*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; }
body { font-family: 'Outfit', sans-serif; background: #191724; color: #e0def4; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
:root { --amber: #f6c177; --purple: #7c6af7; --surface: #1f1d2e; --border: rgba(246,193,119,0.08); --muted: #908caa; --dim: #6e6a86; --text: #e0def4; }
.orb { position: fixed; border-radius: 50%; pointer-events: none; filter: blur(80px); z-index: 0; }
.orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(124,106,247,0.12), transparent 70%); top: -100px; left: -150px; }
.orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(246,193,119,0.08), transparent 70%); bottom: -100px; right: -100px; }
@media (max-width: 600px) { .orb { display: none; } }
nav { position: relative; z-index: 10; padding: 20px 0; border-bottom: 1px solid var(--border); background: rgba(25,23,36,0.85); backdrop-filter: blur(20px); }
nav .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 6px; font-size: 1.3rem; font-weight: 700; text-decoration: none; color: #e0def4; white-space: nowrap; }
.logo span { color: var(--amber); }
.logo svg { width: 26px; height: 26px; flex-shrink: 0; }
.nav-back { font-size: 0.82rem; color: var(--muted); text-decoration: none; font-family: 'JetBrains Mono', monospace; transition: color 0.2s; white-space: nowrap; }
.nav-back:hover { color: var(--amber); }
@media (max-width: 480px) {
  nav .container { padding: 0 16px; gap: 12px; }
  .logo { font-size: 1.1rem; }
  .nav-back { font-size: 0.72rem; }
}
main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 24px; position: relative; z-index: 1; }
.login-card { width: 100%; max-width: 400px; background: rgba(31,29,46,0.7); backdrop-filter: blur(20px); border: 1px solid rgba(246,193,119,0.08); border-radius: 20px; padding: 40px 36px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.login-card-header { text-align: center; margin-bottom: 32px; }
.login-card-icon { width: 64px; height: 64px; background: rgba(124,106,247,0.1); border: 1px solid rgba(124,106,247,0.2); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.8rem; }
.login-card-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.login-card-title span { color: var(--amber); }
.login-card-sub { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
.field-group { margin-bottom: 16px; }
.field-label { font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; display: block; }
.input-wrap { position: relative; }
.input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--dim); font-size: 0.85rem; pointer-events: none; }
.input-wrap input { width: 100%; background: rgba(25,23,36,0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: var(--text); font-family: 'Outfit', sans-serif; font-size: 0.95rem; padding: 12px 40px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.input-wrap input:focus { border-color: rgba(246,193,119,0.3); box-shadow: 0 0 0 3px rgba(246,193,119,0.06); }
.input-wrap input::placeholder { color: var(--dim); }
.input-wrap input:-webkit-autofill { -webkit-text-fill-color: #e0def4; -webkit-box-shadow: 0 0 0 1000px #1f1d2e inset; }
.pwd-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--dim); padding: 0; line-height: 1; opacity: 0.7; transition: opacity 0.15s; display: flex; align-items: center; }
.pwd-eye:hover { opacity: 1; color: var(--amber); }
.error-msg { margin-top: 12px; background: rgba(220,38,38,0.12); border: 1px solid rgba(220,38,38,0.25); color: #fca5a5; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; padding: 10px 14px; border-radius: 8px; display: none; text-align: center; }
.error-msg.show { display: block; }
.login-btn { width: 100%; margin-top: 20px; background: var(--amber); color: #191724; border: none; border-radius: 10px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem; padding: 14px; cursor: pointer; transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s; box-shadow: 0 4px 20px rgba(246,193,119,0.2); }
.login-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 8px 30px rgba(246,193,119,0.25); }
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.login-footer-links { display: flex; justify-content: center; gap: 24px; margin-top: 20px; }
.login-footer-links a { color: var(--dim); font-size: 0.78rem; text-decoration: none; font-family: 'JetBrains Mono', monospace; transition: color 0.2s; }
.login-footer-links a:hover { color: var(--amber); }
footer { position: relative; z-index: 1; padding: 48px 0 32px; border-top: 1px solid var(--border); margin-top: auto; }
footer .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.footer-logo-wrap { display: flex; justify-content: center; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.footer-logo-center { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #e0def4; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { color: var(--dim); font-size: 0.82rem; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--dim); font-size: 0.82rem; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--amber); }
@media (max-width: 600px) { .footer-bottom { flex-direction: column; text-align: center; } .footer-links { justify-content: center; } .login-card { padding: 32px 24px; } }