:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: #e8f5f0; background: radial-gradient(circle at 78% 0%, rgba(52,211,153,.14), transparent 32rem), radial-gradient(circle at 0 60%, rgba(56,189,248,.08), transparent 30rem), #07100f; }
button, input { font: inherit; }
button { cursor: pointer; }
.login-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 440px); padding: clamp(24px, 5vw, 40px); border: 1px solid rgba(255,255,255,.09); border-radius: 24px; background: rgba(12,27,25,.88); box-shadow: 0 28px 90px rgba(0,0,0,.38); backdrop-filter: blur(18px); }
.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(110,231,183,.25); border-radius: 15px; color: #6ee7b7; background: rgba(110,231,183,.1); font-weight: 900; font-size: 20px; }
.eyebrow { margin: 24px 0 0; color: #6b807a; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
h1 { margin: 8px 0 0; font-size: clamp(26px, 6vw, 34px); letter-spacing: -.03em; }
.intro { margin: 12px 0 26px; color: #91a6a0; font-size: 14px; line-height: 1.7; }
label { display: block; margin-bottom: 9px; color: #b9cbc6; font-size: 13px; font-weight: 650; }
input#username { margin-bottom: 16px; }
.password-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
input { width: 100%; min-height: 48px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 0 14px; color: #f0fdfa; background: rgba(0,0,0,.2); outline: none; }
input:focus { border-color: rgba(110,231,183,.65); box-shadow: 0 0 0 3px rgba(110,231,183,.12); }
button { min-height: 48px; border: 0; border-radius: 12px; font-weight: 750; }
.primary { width: 100%; margin-top: 12px; color: #06110e; background: #6ee7b7; }
.primary:hover { background: #8aefc7; }
.primary:disabled { cursor: wait; opacity: .62; }
.secondary { padding: 0 15px; color: #c6d8d3; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.045); }
.message { min-height: 20px; margin: 14px 0 0; color: #78908a; font-size: 12px; line-height: 1.6; }
.message.error { color: #fda4af; }
.security-note { display: grid; gap: 5px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.07); }
.security-note strong { color: #a7f3d0; font-size: 12px; }
.security-note span { color: #6f8580; font-size: 11px; line-height: 1.65; }
@media (max-width: 480px) { .login-shell { align-items: end; padding: 12px; } .login-card { border-radius: 22px; padding: 26px 20px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }