:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #10131a; color: #edf1f7; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 10% 0%, #283451, #10131a 45%); }
.shell { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 60px; }
.centered { display: grid; place-items: center; padding: 20px; }
.card { background: rgba(25, 31, 44, .92); border: 1px solid #364158; border-radius: 18px; padding: 24px; box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.login-card { width: min(420px, 100%); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: clamp(2rem, 5vw, 3.2rem); } h2 { font-size: 1.1rem; }
.eyebrow { color: #8eaaff; letter-spacing: .14em; font-size: .75rem; font-weight: 700; margin-bottom: 8px; }
.muted, .hint, label { color: #9aa7bf; } label { display: block; font-size: .85rem; margin-bottom: 8px; }
.hero, .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; } .grid { grid-template-columns: repeat(2, 1fr); }
.hero strong, .hero span { display: block; } .hero strong { margin-top: 7px; font-size: 1.05rem; }
.status { color: #87e0af; } .empty { margin-bottom: 18px; border-color: #806d36; }
form.stack, .actions { display: grid; gap: 12px; margin-top: 18px; } .actions { grid-template-columns: repeat(3, 1fr); }
input, textarea { width: 100%; border: 1px solid #4a5873; border-radius: 10px; padding: 12px; color: #edf1f7; background: #111722; font: inherit; }
button, .button { display: inline-flex; justify-content: center; align-items: center; border: 0; border-radius: 10px; padding: 11px 14px; color: #0f1420; background: #9ab4ff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.secondary { background: #354158; color: #edf1f7; } .danger-button { background: #713f54; color: #ffe8ee; } .alert { padding: 10px; border-radius: 8px; }.danger { color: #ffd1dc; background: #512b3d; }
.result { min-height: 1.3em; }.good { color: #87e0af; }.bad { color: #ffabbc; }
dl { display: grid; grid-template-columns: minmax(190px, .8fr) 1fr; gap: 11px 20px; margin: 0; } dl.compact { gap: 8px 14px; margin-bottom: 16px; } dt { color: #9aa7bf; } dd { margin: 0; overflow-wrap: anywhere; } .hint { margin: 24px 0 0; font-size: .9rem; }
@media (max-width: 700px) { .hero, .grid { grid-template-columns: 1fr; } .actions { grid-template-columns: 1fr; } .topbar { align-items: flex-start; } }