:root, [data-theme="dark"] {
  --bg: #07090f; --bg-2: #0b0f1a; --bg-3: #101627;
  --line: #1b2338; --line-2: #26304a;
  --text: #e8edf7; --text-dim: #93a0b8; --text-faint: #5b667d;
  --accent: #ff9138; --cyan: #38e1ff; --magenta: #ff3d81;
  --green: #2dffa3; --red: #ff4d5e; --gold: #ffd257;
  --mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; font-size: 15px; line-height: 1.55; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); }
.dim { color: var(--text-dim); }
.small { font-size: .84rem; }
.warn { color: var(--gold); }
.ok { color: var(--green); }
.bad { color: var(--red); }

.admin-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-side { background: var(--bg-2); border-right: 1px solid var(--line); padding: 20px 14px; }
.admin-side h1 { font-family: var(--mono); font-size: 1.1rem; margin: 0 0 18px; color: var(--accent); }
.admin-side nav { display: flex; flex-direction: column; gap: 4px; }
.admin-side nav a { padding: 7px 10px; border-radius: 7px; color: var(--text-dim); font-size: .9rem; }
.admin-side nav a:hover { background: var(--bg-3); color: var(--text); text-decoration: none; }
.admin-side nav a.on { background: var(--bg-3); color: var(--accent); }
.side-note { font-size: .74rem; color: var(--text-faint); margin-top: 20px; }
.logout { color: var(--magenta); }
.admin-main { padding: 26px 30px; max-width: 1200px; }
.admin-main h2 { margin-top: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; font-size: .78rem; color: var(--text-dim); }
.stat span { display: block; font-size: 1.6rem; font-weight: 800; color: var(--accent); font-family: var(--mono); }
.stat.warn span { color: var(--red); }
.warnline { color: var(--gold); }

table.admin-table { width: 100%; border-collapse: collapse; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: .86rem; }
table.admin-table th { text-align: left; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; color: var(--text-faint); padding: 9px 10px; background: var(--bg-3); border-bottom: 1px solid var(--line-2); }
table.admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.admin-table tr:last-child td { border-bottom: none; }

.abtn { display: inline-block; background: linear-gradient(135deg, var(--accent), #ff6d2e); color: #14100c; font-weight: 700; padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; font-size: .88rem; margin: 4px 6px 4px 0; }
.abtn:hover { text-decoration: none; filter: brightness(1.1); }
.abtn.sm { padding: 4px 10px; font-size: .78rem; }
.abtn.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--cyan); }
.abtn.danger { background: transparent; border: 1px solid color-mix(in srgb, var(--red) 60%, transparent); color: var(--red); }

.admin-form .fgrid { columns: 2 460px; column-gap: 24px; }
.frow { break-inside: avoid; margin-bottom: 10px; }
.frow label { display: block; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; }
.frow input[type="text"], .frow input[type="url"], .frow input[type="password"], .frow input[type="number"], .frow select, .frow textarea {
  width: 100%; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 7px;
  color: var(--text); padding: 7px 10px; font-size: .86rem; font-family: var(--mono);
}
.frow textarea { font-family: var(--mono); }
.frow input:focus, .frow select:focus, .frow textarea:focus { outline: 2px solid var(--cyan); border-color: var(--cyan); }
.check { display: flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--text-dim); }

.modcard { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 10px 0; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.inline input[type="text"] { flex: 1; min-width: 180px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 7px; color: var(--text); padding: 6px 10px; }
.inline select { background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 7px; color: var(--text); padding: 6px; }

.diffbox { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; white-space: pre-wrap; font-size: .8rem; max-height: 480px; overflow-y: auto; }
.dl { display: block; }
ins.dl { color: var(--green); background: rgba(45, 255, 163, .08); text-decoration: none; }
del.dl { color: var(--red); background: rgba(255, 77, 94, .08); }

.chip { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--text-dim); }
.chip.aff { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.chip.direct { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); }
.flash { background: rgba(45, 255, 163, .1); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }

/* Automation alert banner (src/alerts.js) - unacknowledged timer failures */
.alertbox-stack { display: grid; gap: 8px; margin-bottom: 14px; }
.alertbox { border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.alertbox-error { background: rgba(255, 82, 82, .12); border: 1px solid rgba(255, 82, 82, .45); }
.alertbox-warn { background: rgba(255, 178, 62, .1); border: 1px solid rgba(255, 178, 62, .4); }
.alertbox .alertbox-head { font-size: 11px; opacity: .85; margin-bottom: 4px; }
.alertbox form { margin-top: 6px; }

.admin-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 30px; display: flex; flex-direction: column; gap: 12px; width: 320px; }
.login-box h1 { margin: 0; color: var(--accent); font-family: var(--mono); }
.login-box input { background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); padding: 10px 12px; }
.login-box input:focus { outline: 2px solid var(--cyan); }
.login-box button { background: linear-gradient(135deg, var(--accent), #ff6d2e); border: none; color: #14100c; font-weight: 700; padding: 10px; border-radius: 8px; cursor: pointer; }

@media (max-width: 800px) { .admin-shell { grid-template-columns: 1fr; } .admin-side { border-right: none; border-bottom: 1px solid var(--line); } }
.chip.warn-chip { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }

/* stats page charts: SVG only, sizes via attributes (CSP blocks style attrs) */
.chart { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 14px 6px; margin: 12px 0 4px; }
svg.ch { width: 100%; height: auto; display: block; }
.ch-grid line { stroke: var(--line); stroke-width: 1; }
.ch-b1 { fill: var(--accent); }
.ch-b2 { fill: var(--cyan); opacity: .85; }
.ch-t { fill: var(--text-faint); font-size: 10px; font-family: var(--mono); }
.ch-legend { margin: 0 0 18px; color: var(--text-dim); }
.ch-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: baseline; }
.ch-legend .dot.b1 { background: var(--accent); }
.ch-legend .dot.b2 { background: var(--cyan); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 24px; align-items: start; }
.sharecell { min-width: 200px; }
.sharebar { width: 140px; height: 10px; vertical-align: middle; }
.sharebar .bg { fill: var(--bg-3); }
.sharebar .fg { fill: var(--cyan); }
.stat .small.dim { display: inline; font-size: .68rem; }