:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #09111f; color: #e8eefb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0%, #123565 0, transparent 36rem), #09111f; }
.shell { width: min(100% - 2rem, 42rem); margin: 0 auto; padding: 2.5rem 0 4rem; }
header { margin-bottom: 1.4rem; }
.eyebrow { margin: 0 0 .55rem; color: #8db8ff; font-size: .78rem; font-weight: 800; letter-spacing: .11em; }
h1, h2, p { margin-top: 0; } h1 { font-size: clamp(2rem, 7vw, 2.8rem); letter-spacing: -.045em; margin-bottom: .5rem; } h2 { font-size: 1.15rem; }
.mode { display: inline-block; margin-bottom: 0; color: #b8c8e2; font-weight: 700; } .mode-active { color: #ffbf85; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.card { background: #101c30; border: 1px solid #243754; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 12px 32px rgba(0,0,0,.16); }
.label { color: #aebed5; font-size: .9rem; margin-bottom: .6rem; } .status { font-size: 1.12rem; } .ok { color: #65e6a9; } .bad { color: #ff8d98; } .neutral { color: #ffd37b; }
.details, .action-card, .login-card { margin-bottom: 1rem; } dl { margin: 0 0 1rem; } dl div { display:flex; justify-content:space-between; gap:1rem; padding:.65rem 0; border-bottom: 1px solid #223550; } dt { color:#aebed5; } dd { margin:0; font-weight:700; text-align:right; overflow-wrap:anywhere; }
form { display:grid; gap:.75rem; } label { font-weight:700; font-size:.94rem; } input { width:100%; min-height:3rem; border:1px solid #3a5277; border-radius:.65rem; background:#07101f; color:#fff; padding:.7rem .85rem; font:inherit; }
button { min-height:3.1rem; border:0; border-radius:.65rem; background:#3a86ff; color:#fff; font:800 1rem inherit; cursor:pointer; } button:hover { background:#5c9bff; } .danger { background:#c84250; } .danger:hover { background:#e05261; }
.alert { border-color:#8f5c23; color:#ffe1a5; } code { color:#b9d6ff; } a { color:#a8cbff; } .logout { text-align:center; margin-top:1.25rem; }
@media (max-width: 30rem) { .shell { width: min(100% - 1.25rem, 42rem); padding-top:1.5rem; } .cards { grid-template-columns:1fr; } dl div { display:block; } dd { text-align:left; margin-top:.25rem; } }