:root { color-scheme: light; --ink:#18222b; --muted:#6b7782; --line:#e4e8eb; --paper:#f7f8f9; --card:#fff; --accent:#1c6b5b; --accent-soft:#e7f2ee; --warn:#a25b1b; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
.shell { max-width:1440px; margin:0 auto; padding:28px 32px 56px; }
.topbar,.section-head,.toolbar,.grid,.stats { display:flex; gap:16px; }
.topbar { align-items:flex-start; justify-content:space-between; margin-bottom:26px; }
h1,h2,p { margin:0; } h1 { font-size:32px; letter-spacing:-.04em; } h2 { font-size:18px; letter-spacing:-.02em; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } .muted { color:var(--muted); } .session { padding-top:7px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 24px #17212b08; }
.toolbar { align-items:end; flex-wrap:wrap; padding:16px; margin-bottom:16px; } .toolbar > div { margin-right:auto; }
label { color:var(--muted); font-size:12px; display:grid; gap:5px; } input,select { border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); padding:9px 10px; min-width:120px; }
.button { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; padding:9px 13px; text-decoration:none; cursor:pointer; font:inherit; } .button.primary { border-color:var(--accent); background:var(--accent); color:#fff; } .button.ghost { background:transparent; }
.stats { margin-bottom:16px; } .stat { padding:17px 20px; flex:1; } .stat strong { display:block; font-size:28px; margin-top:4px; }
.grid.two { display:grid; grid-template-columns:1.1fr .9fr; align-items:start; } .grid > .card { min-width:0; padding:20px; } .section-head { align-items:center; justify-content:space-between; margin-bottom:18px; }
.table-wrap { overflow:auto; } table { border-collapse:collapse; width:100%; } th,td { text-align:left; padding:11px 8px; border-top:1px solid var(--line); white-space:nowrap; } th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; } td small { color:var(--muted); display:block; }
.pill { background:var(--accent-soft); border-radius:99px; color:var(--accent); font-size:12px; padding:3px 8px; } .pill.off { background:#f6ede8; color:var(--warn); }
.inline-form { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; background:#f7faf9; border:1px solid #d9ebe4; border-radius:12px; padding:12px; margin-bottom:16px; } .inline-form .check { display:flex; align-items:center; gap:7px; } .inline-form .check input { min-width:auto; }
.login-card { max-width:460px; padding:28px; display:grid; gap:14px; } details { margin-top:8px; } details form { display:flex; gap:8px; margin-top:10px; } code,pre { background:#f1f3f4; border-radius:6px; padding:2px 5px; } pre { padding:14px; overflow:auto; }
.privacy-note { text-align:center; color:var(--muted); margin-top:18px; } .hidden { display:none !important; }
dialog { border:0; border-radius:16px; box-shadow:0 24px 80px #17212b33; max-width:450px; } dialog::backdrop { background:#17212b66; } dialog > div { padding:10px; display:grid; gap:14px; } dialog pre { user-select:all; color:var(--accent); font-size:16px; }
@media (max-width:900px) { .shell { padding:20px 16px 40px; } .grid.two { grid-template-columns:1fr; } .stats { flex-wrap:wrap; } .stat { min-width:140px; } }