* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f1117; font-family: system-ui, sans-serif; }
.login-card { background: #1a1d27; border: 1px solid #2a2d3e; border-radius: 16px; padding: 40px; width: 100%; max-width: 380px; }
.login-logo { font-size: 28px; font-weight: 800; color: #e0e0e0; text-align: center; margin-bottom: 4px; }
.login-subtitle { font-size: 13px; color: #888; text-align: center; margin-bottom: 28px; }
.login-error { background: #ef444415; border: 1px solid #ef444433; color: #ef4444; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.login-field { margin-bottom: 16px; }
.login-field label { display: block; font-size: 12px; color: #888; margin-bottom: 6px; font-weight: 500; }
.login-field input { width: 100%; background: #0f1117; border: 1px solid #2a2d3e; border-radius: 8px; padding: 10px 14px; color: #e0e0e0; font-size: 14px; }
.login-field input:focus { outline: none; border-color: #6c63ff; }
.login-btn { width: 100%; background: #6c63ff; color: #fff; border: none; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 8px; transition: background .15s; }
.login-btn:hover { background: #5a52e0; }