/* ===== design tokens (indigo/blue/teal) ===== */
:root {
  --bg:#f4f7f6; --fg:#16201b; --muted:#566b63; --border:#dde7e2; --panel:#ffffff;
  --card1:#ffffff; --card2:#f2f8f5;
  --pre-bg:#0e1320; --pre-fg:#d4dbe8; --link:#0c8466; --brand:#0c8466;
  --accent:#0f9b76; --accent2:#13b487; --teal:#0f9b76; --pink:#d6498f; --amber:#b9791a;
  --btn-bg:#e6efeb; --btn-hover:#d8e7e1; --btn-fg:#214036;
  --btn-primary:#40c8a0; --btn-primary-hover:#2c8e72; --btn-primary-fg:#04130e;
  --danger:#d23b54; --danger-hover:#b32942;
  --err-bg:#fde8ee; --err-fg:#9a1b3a; --err-border:#f0b9c7;
  --ok-bg:#e4f7ef; --ok-fg:#0a6b4d; --ok-border:#a9e3cf;
  --warn-bg:#fff4d6; --warn-fg:#7a5200; --warn-border:#e6cf8f;
  --code-bg:#eef3f0; --danger-bg:#fdeaee; --danger-border:#e7a9b6;
  --dot-up:#1faf6b; --dot-down:#d23b54;
  --shadow:0 4px 18px rgba(20,60,45,.08); --shadow-sm:0 1px 3px rgba(20,60,45,.06);
  --ring:rgba(15,155,118,.30); --grad:linear-gradient(100deg,#0c8466,#0f9b76 45%,#13b487);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0a0c12; --fg:#e7ebf3; --muted:#aab2c5; --border:#262c3d; --panel:#141826;
    --card1:#181d2b; --card2:#0e1320;
    --pre-bg:#070a10; --pre-fg:#d4dbe8; --link:#5fe0bb; --brand:#5fe0bb;
    --accent:#40c8a0; --accent2:#5fe0bb; --teal:#40c8a0; --pink:#ec6ead; --amber:#f5b945;
    --btn-bg:#1b2230; --btn-hover:#252d3d; --btn-fg:#d7deea;
    --btn-primary:#40c8a0; --btn-primary-hover:#5fe0bb; --btn-primary-fg:#04130e;
    --danger:#e0556b; --danger-hover:#f3667c;
    --err-bg:#2a1622; --err-fg:#ffb3c4; --err-border:#5b2740;
    --ok-bg:#0f2a22; --ok-fg:#7ff0c8; --ok-border:#1f5a47;
    --warn-bg:#2c2410; --warn-fg:#ffd58a; --warn-border:#6b5520;
    --code-bg:#161c2a; --danger-bg:#251320; --danger-border:#7a2740;
    --dot-up:#42d392; --dot-down:#ff5c7c;
    --shadow:0 8px 28px rgba(0,0,0,.40); --shadow-sm:0 1px 3px rgba(0,0,0,.30);
    --ring:rgba(64,200,160,.40); --grad:linear-gradient(100deg,#2c8e72,#40c8a0 45%,#5fe0bb);
  }
}
body[data-theme=dark] {
  --bg:#0a0c12; --fg:#e7ebf3; --muted:#aab2c5; --border:#262c3d; --panel:#141826;
  --card1:#181d2b; --card2:#0e1320;
  --pre-bg:#070a10; --pre-fg:#d4dbe8; --link:#5fe0bb; --brand:#5fe0bb;
  --accent:#40c8a0; --accent2:#5fe0bb; --teal:#40c8a0; --pink:#ec6ead; --amber:#f5b945;
  --btn-bg:#1b2230; --btn-hover:#252d3d; --btn-fg:#d7deea;
  --btn-primary:#40c8a0; --btn-primary-hover:#5fe0bb; --btn-primary-fg:#04130e;
  --danger:#e0556b; --danger-hover:#f3667c;
  --err-bg:#2a1622; --err-fg:#ffb3c4; --err-border:#5b2740;
  --ok-bg:#0f2a22; --ok-fg:#7ff0c8; --ok-border:#1f5a47;
  --warn-bg:#2c2410; --warn-fg:#ffd58a; --warn-border:#6b5520;
  --code-bg:#161c2a; --danger-bg:#251320; --danger-border:#7a2740;
  --dot-up:#42d392; --dot-down:#ff5c7c;
  --shadow:0 8px 28px rgba(0,0,0,.40); --shadow-sm:0 1px 3px rgba(0,0,0,.30);
  --ring:rgba(64,200,160,.40); --grad:linear-gradient(100deg,#2c8e72,#40c8a0 45%,#5fe0bb);
}
body[data-theme=light] {
  --bg:#f4f7f6; --fg:#16201b; --muted:#566b63; --border:#dde7e2; --panel:#ffffff;
  --card1:#ffffff; --card2:#f2f8f5;
  --pre-bg:#0e1320; --pre-fg:#d4dbe8; --link:#0c8466; --brand:#0c8466;
  --accent:#0f9b76; --accent2:#13b487; --teal:#0f9b76; --pink:#d6498f; --amber:#b9791a;
  --btn-bg:#e6efeb; --btn-hover:#d8e7e1; --btn-fg:#214036;
  --btn-primary:#40c8a0; --btn-primary-hover:#2c8e72; --btn-primary-fg:#04130e;
  --danger:#d23b54; --danger-hover:#b32942;
  --err-bg:#fde8ee; --err-fg:#9a1b3a; --err-border:#f0b9c7;
  --ok-bg:#e4f7ef; --ok-fg:#0a6b4d; --ok-border:#a9e3cf;
  --warn-bg:#fff4d6; --warn-fg:#7a5200; --warn-border:#e6cf8f;
  --code-bg:#eef3f0; --danger-bg:#fdeaee; --danger-border:#e7a9b6;
  --dot-up:#1faf6b; --dot-down:#d23b54;
  --shadow:0 4px 18px rgba(20,60,45,.08); --shadow-sm:0 1px 3px rgba(20,60,45,.06);
  --ring:rgba(15,155,118,.30); --grad:linear-gradient(100deg,#0c8466,#0f9b76 45%,#13b487);
}

/* ===== base — fluid full width ===== */
* { box-sizing: border-box }
html, body { background: var(--bg); color: var(--fg) }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  width:100%; max-width:1900px; margin:0 auto; padding:0 clamp(1rem,2.2vw,2.6rem) 2.5rem; line-height:1.5;
  background:
    radial-gradient(1100px 420px at 108% -10%, color-mix(in srgb,var(--accent2) 13%,transparent), transparent 70%),
    radial-gradient(900px 380px at -8% -6%, color-mix(in srgb,var(--accent) 11%,transparent), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
a { color: var(--link); text-decoration: none } a:hover { text-decoration: underline }
h1,h2,h3 { margin:0 }

/* ===== top bar ===== */
header {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  padding:.7rem 0; margin-bottom:1.2rem; border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:saturate(140%) blur(10px);
}
.brand { display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.12rem }
.brand .mark { width:1.6rem; height:1.6rem; display:grid; place-items:center; border-radius:8px;
  overflow:hidden; box-shadow:var(--shadow-sm) }
.brand .mark svg { width:100%; height:100%; display:block }
.brand .word { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.brand .sub { color:var(--muted); font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-left:.1rem }
nav { display:flex; gap:.3rem; flex-wrap:wrap; flex-grow:1 }
nav a { color:var(--muted); font-size:.86rem; font-weight:600; padding:.34rem .68rem; border-radius:999px;
  border:1px solid transparent; transition:background .15s,color .15s,border-color .15s }
nav a:hover { background:var(--btn-bg); color:var(--fg); text-decoration:none }
nav a.active { color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:color-mix(in srgb,var(--accent) 35%,transparent) }
.theme-toggle,.logout-btn { border:1px solid var(--border); border-radius:999px; cursor:pointer;
  font-size:.8rem; font-weight:600; padding:.34rem .7rem; background:var(--btn-bg); color:var(--btn-fg); transition:background .15s }
.theme-toggle:hover,.logout-btn:hover { background:var(--btn-hover) }

/* ===== cards ===== */
.box { background:linear-gradient(180deg,var(--card1),var(--card2)); border:1px solid var(--border);
  border-radius:16px; padding:1.1rem 1.25rem; margin:.85rem 0; box-shadow:var(--shadow) }
.box h2 { font-size:1.02rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
.box h2 .ico { font-size:1rem; opacity:.85 }
.box h3 { font-size:.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:.95rem 0 .4rem }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:stretch }
.grid2 > .box, .grid2 > .col { margin:0 }
.col { display:flex; flex-direction:column; gap:1rem } .col .box { margin:0 }
.col .box:last-child { flex:1 1 auto }
.cardgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1rem } .cardgrid .box { margin:0 }
hr { border:0; border-top:1px solid var(--border); margin:.8rem 0 }
.box.danger-zone { border-color:var(--danger-border);
  background:linear-gradient(180deg,color-mix(in srgb,var(--danger) 9%,var(--card1)),var(--card2)) }

/* ===== stat chips ===== */
.statgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:.2rem 0 1rem }
.stat { position:relative; background:linear-gradient(180deg,var(--card1),var(--card2)); border:1px solid var(--border);
  border-radius:14px; padding:.8rem .95rem; box-shadow:var(--shadow-sm); overflow:hidden }
.stat .lbl { color:var(--muted); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.stat .val { font-size:1.4rem; font-weight:700; margin-top:.18rem; line-height:1.15; font-variant-numeric:tabular-nums }
.stat .val small { font-size:.78rem; font-weight:600; color:var(--muted) }
.stat .spark { position:absolute; right:.6rem; bottom:.55rem; opacity:.9 }
.stat.accent { border-color:color-mix(in srgb,var(--accent) 40%,var(--border)) }

/* ===== metrics list ===== */
.metrics { display:grid; grid-template-columns:max-content 1fr; gap:.5rem .9rem; font-size:.9rem; align-items:baseline }
.metrics dt { color:var(--muted); font-weight:600 } .metrics dd { margin:0; font-variant-numeric:tabular-nums }

.dot { display:inline-block; width:.6rem; height:.6rem; border-radius:50%; vertical-align:middle; margin-right:.45rem }
.dot.up { background:var(--dot-up); box-shadow:0 0 0 3px color-mix(in srgb,var(--dot-up) 22%,transparent) }
.dot.down { background:var(--dot-down); box-shadow:0 0 0 3px color-mix(in srgb,var(--dot-down) 22%,transparent) }
.dot.degraded { background:var(--amber); box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 26%,transparent); animation:dotpulse 1.4s ease-in-out infinite }
@keyframes dotpulse { 0%,100%{opacity:1} 50%{opacity:.45} }

/* ===== pills / badges / status ===== */
.pill { display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem; font-weight:700;
  padding:.16rem .55rem; border-radius:999px; border:1px solid var(--border); background:var(--code-bg); color:var(--fg) }
.pill.ok { background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-border) }
.pill.warn { background:var(--warn-bg); color:var(--warn-fg); border-color:var(--warn-border) }
.pill.down { background:var(--danger-bg); color:var(--danger); border-color:var(--danger-border) }
.badge { background:var(--code-bg); color:var(--muted); font-size:.72rem; font-weight:600;
  padding:.12rem .45rem; border-radius:6px; margin-left:.4rem }
.ok { color:var(--ok-fg); font-weight:600 } .err { color:var(--danger); font-weight:600 }

/* ===== progress bars ===== */
.bar { position:relative; height:7px; background:var(--border); border-radius:999px; overflow:hidden; width:100%; margin-top:.3rem }
.bar > span { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:999px; transition:width .5s ease }
.bar.warn > span { background:linear-gradient(90deg,#e0a82e,#f5b945) }
.bar.danger > span { background:linear-gradient(90deg,#e0556b,#ff7a7a) }

/* ===== sparkline ===== */
svg.spark { display:block }
svg.spark .ln { fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round }
svg.spark .ar { fill:var(--accent); opacity:.13 }

/* ===== buttons / forms ===== */
button,a.btn { font:inherit; font-size:.86rem; font-weight:600; cursor:pointer; background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--border); border-radius:9px; padding:.42rem .8rem; margin:.18rem .18rem 0 0;
  display:inline-block; text-decoration:none; transition:background .15s,transform .05s }
button:hover,a.btn:hover { background:var(--btn-hover); text-decoration:none }
button:active,a.btn:active { transform:translateY(1px) }
button.primary { background:var(--btn-primary); color:var(--btn-primary-fg); border-color:transparent }
button.primary:hover { background:var(--btn-primary-hover) }
button.danger,a.btn.danger { background:var(--danger); color:#fff; border-color:transparent }
button.danger:hover,a.btn.danger:hover { background:var(--danger-hover) }
button.small,a.btn.small { font-size:.78rem; padding:.3rem .55rem; border-radius:8px }
form { margin:0; display:inline-block } form.block { display:block; margin-top:.8rem }
input[type=password],input[type=text] { font:inherit; padding:.5rem .65rem; border:1px solid var(--border);
  border-radius:9px; background:var(--panel); color:var(--fg); min-width:240px; margin:.15rem .2rem .15rem 0 }
input:focus { outline:2px solid var(--ring); outline-offset:1px; border-color:var(--accent) }

/* ===== tables ===== */
.tablewrap { overflow-x:auto; border:1px solid var(--border); border-radius:12px; margin-top:.5rem }
table { width:100%; border-collapse:collapse; font-size:.86rem }
.tablewrap table { min-width:640px }
th,td { padding:.5rem .7rem; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap }
thead th { position:sticky; top:0; background:var(--card2); color:var(--muted); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.05em; font-weight:700; z-index:1 }
tbody tr:last-child td { border-bottom:0 }
tbody tr:hover { background:color-mix(in srgb,var(--accent) 6%,transparent) }
td.mono,.mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem }
td.path { max-width:340px; overflow:hidden; text-overflow:ellipsis }

/* ===== misc ===== */
pre { background:var(--pre-bg); color:var(--pre-fg); padding:.8rem 1rem; border-radius:10px; overflow-x:auto;
  font-size:.82rem; line-height:1.4; white-space:pre-wrap }
code { background:var(--code-bg); padding:0 .3rem; border-radius:5px; font-size:.9rem; color:var(--fg) }
.small { font-size:.84rem; color:var(--muted) }
.botbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin:1rem 0 .3rem; padding:.6rem 1.15rem; border:1px solid var(--border); border-radius:12px;
  background:linear-gradient(180deg,var(--card1),var(--card2)); box-shadow:var(--shadow-sm);
  color:var(--muted); font-size:.83rem }
.botbar .bb-live { display:inline-flex; align-items:center; gap:.45rem }
.botbar a { color:var(--muted); text-decoration:none } .botbar a:hover { color:var(--accent) }
#live-dot { color:var(--dot-up); transition:opacity .25s }
.flash { padding:.65rem 1rem; border-radius:10px; margin:.6rem 0; border:1px solid var(--border) }
.flash.err { background:var(--err-bg); color:var(--err-fg); border-color:var(--err-border) }
.flash.ok { background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-border) }
.flash.warn { background:var(--warn-bg); color:var(--warn-fg); border-color:var(--warn-border) }
.warn-box { background:var(--warn-bg); color:var(--warn-fg); border:1px solid var(--warn-border);
  padding:.75rem 1rem; border-radius:10px; margin:.7rem 0 }
.warn-box ul { margin:.4rem 0; padding-left:1.4rem } .warn-box li { margin:.2rem 0 }
.health-banner { display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem; font-weight:700;
  padding:.16rem .55rem; border-radius:999px; border:1px solid var(--border); vertical-align:middle; margin-left:.4rem }
.health-banner.health-ok { background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-border) }
.health-banner.health-warn { background:var(--warn-bg); color:var(--warn-fg); border-color:var(--warn-border) }
.health-banner.health-err { background:var(--danger-bg); color:var(--danger); border-color:var(--danger-border) }
tr.health-ok td:first-child::before { content:"\25CF "; color:var(--dot-up) }
tr.health-err td:first-child::before { content:"\25CF "; color:var(--dot-down) }

/* ===== sites: upload dropzone ===== */
.dropzone{border:2px dashed var(--border);border-radius:12px;padding:1.4rem;text-align:center;
  cursor:pointer;color:var(--muted);transition:border-color .15s,background .15s}
.dropzone.drag{border-color:var(--accent);background:var(--btn-bg)}
.progress{height:.5rem;border-radius:999px;background:var(--btn-bg);overflow:hidden;margin-top:.6rem}
#upload-bar{height:100%;background:var(--accent);width:0;transition:width .2s}

/* ===== responsive ===== */
@media (max-width:900px) { .statgrid { grid-template-columns:repeat(2,1fr) } .grid2 { grid-template-columns:1fr } }
@media (max-width:560px) {
  .statgrid { grid-template-columns:1fr } nav { order:3; width:100% }
  button,a.btn,.theme-toggle,.logout-btn { min-height:2.5rem }
  input[type=password],input[type=text] { min-height:2.5rem; width:100% } td.path { max-width:160px }
}
@media (prefers-reduced-motion:reduce) { * { transition:none!important; animation:none!important } }