:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; --bg:#07101d; --layer:#0d1a2a; --border:#203248; --text:#eef5fb; --muted:#8497aa; --accent:#26d9c7; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 30% -10%,#103650 0,transparent 35%),var(--bg); }
button,input { font:inherit; }
button { border:0; border-radius:9px; padding:11px 16px; color:#041817; background:var(--accent); font-weight:700; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
header { height:76px; padding:0 max(28px,calc((100% - 1160px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
header>div,.dialog-heading,.actions { display:flex; align-items:center; gap:12px; }
.mark { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:#031817; background:var(--accent); font-weight:900; }
header strong,header small { display:block; } header small { margin-top:2px; color:var(--muted); font-size:11px; }
.private { color:#7c91a5; font-size:11px; }
.login-view { min-height:calc(100vh - 76px); display:grid; place-items:center; padding:28px; }
.login-card { width:min(410px,100%); padding:32px; border:1px solid var(--border); border-radius:16px; background:rgba(13,26,42,.92); box-shadow:0 28px 90px #0007; }
.login-card .mark { margin-bottom:24px; }.login-card h1 { margin-bottom:25px; font-size:32px; }.login-card>button { width:100%; margin-top:4px; }
main { width:min(1160px,calc(100% - 40px)); margin:0 auto; padding:72px 0; }
.heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:32px; }
.heading p,.dialog-heading p { margin:0 0 8px; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.16em; }
h1,h2 { margin:0; letter-spacing:-.04em; } h1 { font-size:40px; } h2 { font-size:25px; }
.heading div>span { display:block; margin-top:10px; color:var(--muted); font-size:14px; }
.summary { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:20px; border:1px solid var(--border); border-radius:14px; background:rgba(13,26,42,.72); }
.summary article { padding:22px 24px; } .summary article+article { border-left:1px solid var(--border); }
.summary span,.summary strong { display:block; } .summary span { color:var(--muted); font-size:11px; } .summary strong { margin-top:7px; font-size:24px; }
.table-wrap { overflow:auto; border:1px solid var(--border); border-radius:14px; background:rgba(13,26,42,.78); }
table { width:100%; border-collapse:collapse; } th,td { padding:16px 18px; text-align:left; border-bottom:1px solid var(--border); font-size:12px; white-space:nowrap; }
th { color:#6f8397; font-size:10px; text-transform:uppercase; letter-spacing:.08em; } tbody tr:last-child td { border-bottom:0; }
.status { display:inline-flex; align-items:center; gap:7px; } .status::before { content:""; width:6px; height:6px; border-radius:50%; background:#50d88a; } .status.off::before { background:#e76e78; }
.row-actions { display:flex; justify-content:flex-end; gap:7px; } .row-actions button { padding:7px 9px; color:#a9bbca; background:#142438; font-size:11px; }
.empty { padding:42px; color:var(--muted); text-align:center; }
dialog { width:min(480px,calc(100% - 28px)); padding:0; border:1px solid var(--border); border-radius:16px; color:var(--text); background:#0c1928; box-shadow:0 28px 90px #0009; }
dialog::backdrop { background:#020711c9; backdrop-filter:blur(5px); } form { padding:28px; }
.dialog-heading { justify-content:space-between; margin-bottom:25px; } .dialog-heading .close { padding:3px 9px; color:var(--muted); background:transparent; font-size:25px; }
label { display:grid; gap:8px; margin:16px 0; color:#9babb9; font-size:12px; } input { width:100%; padding:12px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:#07121f; outline:0; } input:focus { border-color:var(--accent); }
.input-action { display:flex; gap:8px; }.input-action input { min-width:0; }.input-action button { flex:none; }
.hint { display:block; margin-top:-8px; color:var(--muted); font-size:11px; }
.actions { justify-content:flex-end; margin-top:24px; } .secondary { color:#9babb9; background:#152538; } .form-error { min-height:17px; color:#f1848c; font-size:12px; }
.created-account { padding:32px; }.success-mark { display:grid; place-items:center; width:44px; height:44px; margin-bottom:20px; border-radius:50%; color:#031817; background:var(--accent); font-size:22px; font-weight:900; }
.eyebrow { margin:0 0 8px; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.16em; }.created-copy { color:var(--muted); font-size:13px; line-height:1.55; }
dl { display:grid; gap:10px; margin:22px 0 0; }dl div { padding:12px 14px; border:1px solid var(--border); border-radius:9px; background:#07121f; }dt { margin-bottom:5px; color:var(--muted); font-size:10px; text-transform:uppercase; }dd { margin:0; overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,monospace; font-size:13px; }
@media(max-width:720px){.private{display:none}.heading{align-items:start;flex-direction:column}.summary{grid-template-columns:1fr}.summary article+article{border-left:0;border-top:1px solid var(--border)}main{padding-top:45px}}