:root { color-scheme: light; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#f4f7fb; color:#172033; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:#f4f7fb; }
main { width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:40px 0 64px; }
.brand { color:#1b4fc2; font-weight:800; letter-spacing:-.02em; }
.brand span { color:#6b7689; font-weight:600; margin-left:6px; }
h1 { margin:10px 0 8px; font-size:30px; }
p { color:#667286; }
.login-panel { width:min(440px, 100%); margin:8vh auto 0; background:#fff; border:1px solid #dfe6ef; border-radius:18px; padding:28px; box-shadow:0 16px 48px rgba(25,42,70,.1); }
label { display:grid; gap:7px; margin-top:16px; font-size:14px; font-weight:700; }
input { width:100%; border:1px solid #cfd8e6; border-radius:10px; padding:12px; font:inherit; }
button { border:0; border-radius:10px; padding:12px 16px; background:#246bfd; color:#fff; font:inherit; font-weight:750; cursor:pointer; }
form button { width:100%; margin-top:20px; }
.secondary { background:#eaf1ff; color:#2454ae; }
.error { color:#b42318; margin-top:12px; min-height:20px; }
header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:26px; }
.header-actions { display:flex; align-items:center; gap:10px; }
.test-badge { background:#fff4d8; color:#805612; padding:8px 10px; border-radius:999px; font-size:12px; font-weight:750; }
.metrics { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:18px; }
.metrics article, .panel { background:#fff; border:1px solid #dfe6ef; border-radius:15px; box-shadow:0 8px 28px rgba(28,44,72,.05); }
.metrics article { padding:18px; }
.metrics span { display:block; color:#69758a; font-size:12px; font-weight:700; }
.metrics strong { display:block; margin-top:9px; font-size:25px; }
.panel { padding:20px; }
.security-panel { margin-bottom:18px; }
.setup-key { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid #cfd8e6; border-radius:10px; background:#f8faff; }
.setup-key code { flex:1; overflow-wrap:anywhere; font-size:15px; letter-spacing:.08em; }
.setup-key button { flex:0 0 auto; }
.success { color:#136b4d; background:#e8f7f1; border-radius:10px; padding:12px; }
#recoveryCodes { margin-top:16px; padding:16px; border:1px solid #f1c66c; border-radius:12px; background:#fff8e8; }
#recoveryCodes h3 { margin:0; }
#recoveryCodeList { white-space:pre-wrap; font-size:16px; letter-spacing:.08em; line-height:1.7; }
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:14px; }
.panel-title h2 { margin:0; font-size:17px; }
.panel-title span { color:#69758a; font-size:12px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; color:#69758a; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:10px; }
td { border-top:1px solid #e1e7f0; padding:13px 10px; white-space:nowrap; }
td:first-child, td:nth-child(2) { white-space:normal; }
.status { display:inline-block; color:#167153; background:#e8f7f1; padding:5px 8px; border-radius:999px; font-weight:750; }
.storage-text { min-width:150px; font-weight:700; }
.storage-track { width:150px; height:7px; margin-top:7px; overflow:hidden; background:#e5eaf2; border-radius:999px; }
.storage-track span { display:block; height:100%; background:#246bfd; border-radius:inherit; }
.storage-track span.storage-danger { background:#d92d20; }
@media (max-width:700px) { main { width:min(100% - 20px, 1180px); padding-top:20px; } .metrics { grid-template-columns:1fr; } header { align-items:flex-start; } .header-actions { flex-direction:column; align-items:flex-end; } }