/* ============================================================================
   Leaf Host — Status & Analytics · STYLES
   organic-tech: deep forest + botanical warmth, mono accents
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg:#0a0e0a; --bg-1:#0d130e; --bg-2:#111a13; --bg-3:#16211a;
  --line:rgba(255,255,255,0.075); --line-2:rgba(255,255,255,0.13);
  --text:#e9efe6; --text-dim:#93a48f; --text-faint:#5d6e59;
  --brand:#5ec96a; --brand-2:#8fe389; --brand-deep:#1c7a32; --brand-glow:rgba(94,201,106,0.22);
  --gold:#e6b24c; --aqua:#5fcad6; --danger:#e2685e; --warn:#e6b24c;
  --shadow:0 24px 60px -20px rgba(0,0,0,0.7); --shadow-sm:0 8px 24px -12px rgba(0,0,0,0.6);
  --radius:16px; --radius-sm:10px; --maxw:1120px;
  --ff-disp:"Bricolage Grotesque",sans-serif; --ff-body:"Hanken Grotesk",sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:dark;
}
[data-theme="light"] {
  --bg:#f3f6ee; --bg-1:#ffffff; --bg-2:#ffffff; --bg-3:#f6f9f1;
  --line:rgba(18,40,20,0.10); --line-2:rgba(18,40,20,0.16);
  --text:#16231a; --text-dim:#56654f; --text-faint:#8a9a83;
  --brand:#248a39; --brand-2:#1c7a32; --brand-deep:#0f5a25; --brand-glow:rgba(36,138,57,0.16);
  --gold:#b6862a; --aqua:#1f8c9c; --danger:#c64a40; --warn:#cc8f22;
  --shadow:0 24px 60px -24px rgba(20,50,25,0.18); --shadow-sm:0 8px 22px -12px rgba(20,50,25,0.14);
  color-scheme:light;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--ff-body); background:var(--bg); color:var(--text);
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .4s ease, color .4s ease;
}
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.03; mix-blend-mode:overlay;
}
::selection { background:var(--brand); color:#06120a; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--ff-disp); font-weight:600; line-height:1.05; letter-spacing:-0.02em; margin:0; }
p { margin:0; }
.mono { font-family:var(--ff-mono); }

/* ---- shell ---------------------------------------------------------------- */
.app { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

.topbar { position:sticky; top:0; z-index:40; backdrop-filter:blur(14px) saturate(1.3);
  background:color-mix(in oklab, var(--bg) 78%, transparent); border-bottom:1px solid var(--line); }
.topbar-in { display:flex; align-items:center; gap:20px; height:62px; }
.brand { display:flex; align-items:center; gap:11px; font-family:var(--ff-disp); font-weight:700; font-size:17px; letter-spacing:-.01em; }
.brand .mark { width:30px; height:30px; border-radius:8px; flex:0 0 auto; box-shadow:var(--shadow-sm); }
.brand small { display:block; font-family:var(--ff-mono); font-weight:400; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); margin-top:2px; }

.tabs { display:flex; gap:3px; margin-left:6px; background:var(--bg-2); border:1px solid var(--line); border-radius:11px; padding:4px; }
.tab { appearance:none; border:0; background:transparent; cursor:pointer; color:var(--text-dim);
  font-family:var(--ff-body); font-weight:600; font-size:13.5px; padding:8px 15px; border-radius:8px;
  display:flex; align-items:center; gap:8px; transition:color .2s, background .2s; white-space:nowrap; }
.tab:hover { color:var(--text); }
.tab[aria-selected="true"] { color:var(--text); background:var(--bg-3); box-shadow:var(--shadow-sm); }
.tab[aria-selected="true"] svg { color:var(--brand); }
.tab svg { width:16px; height:16px; }

.topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.refresh-tag { font-family:var(--ff-mono); font-size:11px; color:var(--text-dim); display:flex; align-items:center; gap:7px; white-space:nowrap; }
.refresh-tag .spin { width:6px; height:6px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 0 var(--brand-glow); animation:pulse 2.2s infinite; }
.icon-btn { width:36px; height:36px; display:inline-grid; place-items:center; cursor:pointer; border-radius:9px;
  border:1px solid var(--line-2); background:var(--bg-2); color:var(--text-dim); transition:color .2s, border-color .2s; }
.icon-btn:hover { color:var(--brand); border-color:var(--brand); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 var(--brand-glow)} 70%{box-shadow:0 0 0 7px rgba(94,201,106,0)} 100%{box-shadow:0 0 0 0 rgba(94,201,106,0)} }

.page { flex:1; padding:34px 0 80px; }
.eyebrow { font-family:var(--ff-mono); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); display:inline-flex; align-items:center; gap:9px; }
.eyebrow::before { content:""; width:20px; height:1px; background:var(--brand); opacity:.6; }

/* ---- big status banner ---------------------------------------------------- */
.banner { display:flex; align-items:center; gap:18px; padding:22px 26px; border-radius:var(--radius);
  border:1px solid var(--line-2); position:relative; overflow:hidden; box-shadow:var(--shadow-sm); }
.banner.ok    { background:linear-gradient(100deg, color-mix(in oklab,var(--brand) 26%,var(--bg-1)), var(--bg-1)); }
.banner.degraded { background:linear-gradient(100deg, color-mix(in oklab,var(--warn) 24%,var(--bg-1)), var(--bg-1)); }
.banner.down  { background:linear-gradient(100deg, color-mix(in oklab,var(--danger) 26%,var(--bg-1)), var(--bg-1)); }
.banner .icon { width:46px; height:46px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center; background:rgba(0,0,0,.18); }
.banner.ok .icon { color:var(--brand); } .banner.degraded .icon { color:var(--warn); } .banner.down .icon { color:var(--danger); }
.banner h1 { font-size:26px; font-weight:700; }
.banner .sub { color:var(--text-dim); font-size:13.5px; margin-top:3px; }
.banner .stamp { margin-left:auto; text-align:right; font-family:var(--ff-mono); font-size:12px; color:var(--text-dim); }
.banner .stamp b { display:block; color:var(--text); font-size:13px; }

.section-label { display:flex; align-items:baseline; justify-content:space-between; margin:36px 0 14px; }
.section-label h2 { font-size:15px; font-family:var(--ff-mono); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim); }
.section-label .hint { font-family:var(--ff-mono); font-size:11.5px; color:var(--text-faint); }

/* ---- component cards (system) --------------------------------------------- */
.components { display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.comp { background:var(--bg-1); padding:18px 22px; }
.comp-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; row-gap:7px; }
.comp-head .nm { font-family:var(--ff-disp); font-weight:600; font-size:16.5px; white-space:nowrap; }
.comp-head .note { color:var(--text-faint); font-size:12.5px; white-space:nowrap; }
.regions { display:flex; gap:6px; }
.region-chip { font-family:var(--ff-mono); font-size:10px; font-weight:500; letter-spacing:.02em; color:var(--brand);
  border:1px solid color-mix(in oklab,var(--brand) 35%,transparent); background:color-mix(in oklab,var(--brand) 11%,transparent);
  padding:3px 8px; border-radius:6px; }
.comp-status { margin-left:auto; display:flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:12.5px; font-weight:500; }
.comp-status .led { width:9px; height:9px; border-radius:50%; }
.s-operational { color:var(--brand); } .s-operational .led { background:var(--brand); }
.s-degraded { color:var(--warn); } .s-degraded .led { background:var(--warn); }
.s-down { color:var(--danger); } .s-down .led { background:var(--danger); }
.s-maintenance { color:var(--aqua); } .s-maintenance .led { background:var(--aqua); }

/* 90-day uptime bars */
.uptime { display:flex; align-items:stretch; gap:2px; height:34px; margin-top:14px; }
.uptime i { flex:1; border-radius:2px; background:var(--brand); opacity:.85; transition:transform .12s, opacity .12s; cursor:default; }
.uptime i.warn { background:var(--warn); } .uptime i.down { background:var(--danger); }
.uptime i:hover { transform:scaleY(1.12); opacity:1; }
.uptime-meta { display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-family:var(--ff-mono); font-size:10.5px; color:var(--text-faint); }
.uptime-meta b { color:var(--text-dim); }

/* external services */
.external { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.ext { background:var(--bg-1); display:flex; align-items:center; gap:11px; padding:15px 20px; font-size:14px; }
.ext .led { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.ext.ok .led { background:var(--brand); } .ext.degraded .led { background:var(--warn); } .ext.down .led { background:var(--danger); }
.ext .st { margin-left:auto; font-family:var(--ff-mono); font-size:11px; color:var(--text-faint); text-transform:capitalize; }

/* incidents */
.incidents { display:flex; flex-direction:column; gap:14px; }
.incident { border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); padding:20px 22px; }
.incident-head { display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.incident-head .sev { font-family:var(--ff-mono); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:6px; }
.sev.minor { color:var(--warn); background:color-mix(in oklab,var(--warn) 14%,transparent); }
.sev.major { color:var(--danger); background:color-mix(in oklab,var(--danger) 14%,transparent); }
.sev.maintenance { color:var(--aqua); background:color-mix(in oklab,var(--aqua) 14%,transparent); }
.incident-head .ttl { font-family:var(--ff-disp); font-weight:600; font-size:16px; }
.incident-head .dt { margin-left:auto; font-family:var(--ff-mono); font-size:11.5px; color:var(--text-faint); }
.incident-head .ongoing { font-family:var(--ff-mono); font-size:10px; color:var(--warn); display:flex; align-items:center; gap:5px; }
.incident-head .ongoing::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--warn); animation:pulse 2.2s infinite; }
.upd { display:flex; gap:14px; padding:9px 0 0; border-top:1px solid var(--line); margin-top:10px; }
.upd:first-of-type { border-top:0; }
.upd .when { font-family:var(--ff-mono); font-size:11px; color:var(--text-faint); flex:0 0 78px; padding-top:2px; }
.upd .tag { font-family:var(--ff-mono); font-size:10px; font-weight:600; color:var(--brand); flex:0 0 78px; text-transform:uppercase; padding-top:2px; }
.upd .txt { color:var(--text-dim); font-size:13.5px; line-height:1.45; }

/* ============================================================================
   PLAYER ANALYTICS
   ============================================================================ */
.player-grid { display:grid; gap:16px; }
.layout-analytics { grid-template-columns:300px 1fr; grid-auto-rows:min-content; }
.layout-analytics .col-span { grid-column:1 / -1; }
.layout-cards { grid-template-columns:repeat(2,1fr); }
.layout-cards .col-span { grid-column:1 / -1; }
.layout-compact { grid-template-columns:repeat(4,1fr); }
.layout-compact .col-span { grid-column:1 / -1; }

.card { border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); padding:20px 22px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.card > .card-h { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.card > .card-h h3 { font-size:13px; font-family:var(--ff-mono); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
.card > .card-h .ic { color:var(--brand); display:grid; place-items:center; }
.card > .card-h .right { margin-left:auto; font-family:var(--ff-mono); font-size:11px; color:var(--text-faint); }

/* server-as-numbers list */
.numbers { display:flex; flex-direction:column; }
.numbers .row { display:flex; align-items:baseline; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.numbers .row:last-child { border-bottom:0; }
.numbers .row .k { color:var(--text-dim); font-size:13px; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.numbers .row .k svg { width:15px; height:15px; color:var(--text-faint); flex:0 0 auto; }
.numbers .row .v { margin-left:auto; font-family:var(--ff-disp); font-weight:700; font-size:17px; white-space:nowrap; }
.numbers .row .v small { font-family:var(--ff-mono); font-weight:400; font-size:11px; color:var(--text-faint); margin-left:5px; }

/* big online-now stat */
.online-hero { display:flex; align-items:baseline; gap:10px; }
.online-hero .big { font-family:var(--ff-disp); font-weight:800; font-size:54px; line-height:.9; letter-spacing:-.03em; }
.online-hero .cap { font-family:var(--ff-mono); font-size:14px; color:var(--text-dim); }
.online-hero .live { width:9px; height:9px; border-radius:50%; background:var(--brand); align-self:center; animation:pulse 2.2s infinite; }

/* activity area chart */
.chart-area { width:100%; display:block; }
.chart-axis { display:flex; justify-content:space-between; font-family:var(--ff-mono); font-size:10.5px; color:var(--text-faint); margin-top:6px; }

/* week comparison table */
.weektab { width:100%; border-collapse:collapse; font-size:13.5px; }
.weektab th { text-align:right; font-family:var(--ff-mono); font-weight:500; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); padding:0 0 10px; }
.weektab th:first-child { text-align:left; }
.weektab td { padding:9px 0; border-top:1px solid var(--line); text-align:right; font-variant-numeric:tabular-nums; }
.weektab td:first-child { text-align:left; color:var(--text-dim); }
.weektab td.now { font-family:var(--ff-disp); font-weight:700; font-size:15px; }
.trend { display:inline-flex; align-items:center; gap:4px; font-family:var(--ff-mono); font-size:11.5px; font-weight:600; padding:2px 7px; border-radius:6px; }
.trend.up { color:var(--brand); background:color-mix(in oklab,var(--brand) 13%,transparent); }
.trend.down { color:var(--danger); background:color-mix(in oklab,var(--danger) 13%,transparent); }
.trend svg { width:11px; height:11px; }

/* donut / playerbase */
.donut-wrap { display:flex; align-items:center; gap:22px; }
.donut-legend { display:flex; flex-direction:column; gap:9px; flex:1; }
.donut-legend .lg { display:flex; align-items:center; gap:9px; font-size:13px; }
.donut-legend .sw { width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.donut-legend .lg .val { margin-left:auto; font-family:var(--ff-mono); font-weight:600; color:var(--text); }
.donut-center { font-family:var(--ff-disp); }

/* retention */
.retention-big { font-family:var(--ff-disp); font-weight:800; font-size:46px; letter-spacing:-.03em; line-height:1; }
.retention-big small { font-size:18px; color:var(--text-dim); font-family:var(--ff-mono); font-weight:400; }
.ret-bar { height:10px; border-radius:6px; background:var(--bg-3); overflow:hidden; margin:14px 0 8px; border:1px solid var(--line); }
.ret-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--brand-2),var(--brand)); }
.ret-meta { font-family:var(--ff-mono); font-size:11.5px; color:var(--text-faint); }

/* performance gauges */
.perf-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.perf { background:var(--bg-3); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; }
.perf .k { font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.perf .v { font-family:var(--ff-disp); font-weight:700; font-size:26px; margin-top:4px; }
.perf .v.good { color:var(--brand); } .perf .v.warn { color:var(--warn); }
.perf .v small { font-size:13px; font-family:var(--ff-mono); font-weight:400; color:var(--text-dim); }

/* online players list */
.players { display:flex; flex-direction:column; }
.players .pr { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.players .pr:last-child { border-bottom:0; }
.players .av { width:30px; height:30px; border-radius:7px; flex:0 0 auto; display:grid; place-items:center; font-family:var(--ff-disp); font-weight:700; font-size:13px; color:#06160b; }
.players .nm { font-weight:600; font-size:14px; display:flex; align-items:center; gap:7px; }
.players .rk { font-family:var(--ff-mono); font-size:9px; font-weight:600; padding:1px 5px; border-radius:4px; }
.rk.VIP { color:var(--gold); background:color-mix(in oklab,var(--gold) 16%,transparent); }
.rk.MVP { color:var(--aqua); background:color-mix(in oklab,var(--aqua) 16%,transparent); }
.players .meta { margin-left:auto; text-align:right; font-family:var(--ff-mono); font-size:11px; color:var(--text-faint); }
.players .meta b { color:var(--text-dim); font-weight:600; }

/* ---- entrance (transform-only so content is never hidden if a capture
   environment doesn't advance the animation) ------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation:rise .5s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes rise { from { transform:translateY(10px); } to { transform:none; } }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 880px) {
  .layout-analytics, .layout-cards, .layout-compact { grid-template-columns:1fr; }
  .external { grid-template-columns:1fr; }
  .brand small { display:none; }
  .tab span { display:none; }
  .refresh-tag span.r-txt { display:none; }
}
@media (max-width: 560px) {
  .wrap { padding:0 16px; }
  .banner { flex-wrap:wrap; }
  .banner .stamp { margin-left:0; text-align:left; width:100%; }
  .perf-grid { grid-template-columns:1fr; }
}

/* uptime bar: day with no monitoring data yet */
.uptime i.nodata { background:var(--line-2); opacity:.45; }

@keyframes spin { to { transform:rotate(360deg); } }

/* ── status v2: component cards · external deps · incident admin form ─────── */
.scomp-list { display:flex; flex-direction:column; gap:14px; }
.scomp .comp-head { flex-wrap:wrap; row-gap:8px; align-items:center; }
.scomp .comp-head .note { color:var(--text-faint); font-size:12.5px; }
.scomp .comp-head .regions { margin-right:2px; }
.scomp .comp-status { margin-left:auto; }

.si-form { display:grid; gap:10px; background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--radius); padding:14px; text-align:left; }
.si-row { display:flex; gap:8px; flex-wrap:wrap; }
.si-input, .si-select, .si-textarea { font-family:var(--ff-body); font-size:13px; background:var(--bg-3); border:1px solid var(--line-2); border-radius:8px; color:var(--text); padding:9px 11px; }
.si-input { flex:1; min-width:180px; }
.si-textarea { min-height:60px; resize:vertical; width:100%; }
.si-btn { font-family:var(--ff-mono); font-size:12px; font-weight:600; padding:9px 15px; border-radius:8px; border:1px solid var(--brand); background:var(--brand); color:#06160b; cursor:pointer; }
.si-btn.ghost { background:transparent; color:var(--text-dim); border-color:var(--line-2); }
.si-btn:disabled { opacity:.6; cursor:default; }
.si-mini { font-family:var(--ff-mono); font-size:10px; font-weight:600; padding:4px 9px; border-radius:6px; cursor:pointer; border:1px solid var(--line-2); background:transparent; color:var(--text-dim); }
.si-mini:hover { color:var(--text); }
.incident-head { flex-wrap:wrap; position:relative; }

/* status v3: players-online chart hover tooltip */
.chart-tip { position:absolute; top:6px; background:var(--bg-3); border:1px solid var(--line-2); border-radius:8px; padding:6px 10px; font-family:var(--ff-mono); font-size:11px; color:var(--text-dim); white-space:nowrap; pointer-events:none; box-shadow:var(--shadow-sm); z-index:6; }
.chart-tip b { color:var(--brand); font-size:13px; }
.chart-tip .tip-t { display:block; color:var(--text-faint); font-size:10px; margin-top:2px; }