:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0c1620; color: #e7edf3; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 80% 0%, #173a52, transparent 35rem), #0c1620; }
main { max-width: 1100px; margin: 0 auto; padding: 68px 28px; }
header { max-width: 760px; }
h1 { margin: 6px 0 14px; font-size: clamp(2.2rem, 6vw, 4.5rem); letter-spacing: -.055em; }
h2 { margin: 0; font-size: 1.1rem; }
.eyebrow { margin: 0; color: #73d7b0; font-size: .73rem; font-weight: 750; letter-spacing: .13em; }
.subtitle { color: #b9c7d3; font-size: 1.12rem; line-height: 1.6; }
.notice, .panel, article { border: 1px solid #294153; background: rgba(15, 32, 45, .82); border-radius: 14px; }
.notice { display: flex; gap: 14px; align-items: center; margin: 40px 0 24px; padding: 16px 18px; color: #d3e5db; }
.notice strong { color: #73d7b0; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
article { min-height: 160px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
article span, small { color: #9fb2c1; } article strong { color: #f2f6f8; font-size: 2.6rem; letter-spacing: -.06em; }
.panel { margin-top: 16px; padding: 24px; line-height: 1.6; } .panel p { color: #b9c7d3; max-width: 720px; }
.compact { max-width: 520px; } li { margin: 8px 0; } code { color: #8edfc0; }
.auth-panel { max-width: 620px; } form { display: grid; gap: 14px; margin-top: 18px; } label { display: grid; gap: 6px; color: #b9c7d3; font-size: .9rem; } input { border: 1px solid #456177; border-radius: 8px; background: #0c1620; color: #f2f6f8; padding: 11px; font: inherit; } button { width: fit-content; border: 0; border-radius: 8px; padding: 11px 16px; background: #73d7b0; color: #0c1620; font: inherit; font-weight: 750; cursor: pointer; } #login-status { min-height: 1.5em; margin: 0; color: #b9c7d3; }
.identity-form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; margin: 18px 0 12px; } .identity-form button { align-self: end; } .identity-form p { margin: 0; } .hint { color: #9db0bf; font-size: .9rem; }
.users-list { display: grid; gap: 10px; margin-top: 18px; } .user-row { min-height: auto; padding: 14px; color: #d3e5db; }
@media (max-width: 760px) { main { padding: 40px 20px; } .cards { grid-template-columns: repeat(2, 1fr); } .notice { align-items: flex-start; flex-direction: column; } .identity-form { grid-template-columns: 1fr; } }