/* ---- IRL+ brand system (shared with the admin panel) ----
   lime #ccff02 (primary/signal)  ·  cyan #02bccc  ·  red #e56767 (tally)  ·  amber #f5c451
   near-black glass surfaces, lime-tinted borders + glows, Syne/Inter/JetBrains Mono */

:root {
  --lime: #ccff02;
  --lime-glow: rgba(204, 255, 2, .40);
  --lime-dim: rgba(204, 255, 2, .15);
  --cyan: #02bccc;
  --red: #e56767;
  --amber: #f5c451;
  --muted: #8888a0;
  --line: rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .06);
  --surface: rgba(20, 20, 32, .55);
  --surface-2: #14141f;
  --blurple: #5865F2;
}

/* ambient IRL+ glow behind everything */
body {
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(204, 255, 2, .055), transparent 60%),
    radial-gradient(820px 460px at -5% 112%, rgba(2, 188, 204, .045), transparent 60%),
    #050508;
}

/* glass panels */
header { backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }

/* ---- Control / icon buttons (mirrors admin) ---- */
.ctl {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .9rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line); color: #e0e0e8;
  font: 500 .85rem/1 Inter, system-ui, sans-serif; cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s, background .15s;
}
.ctl:hover { border-color: var(--lime); color: var(--lime); }
.ctl:disabled { opacity: .45; cursor: not-allowed; }
.ctl:disabled:hover { border-color: var(--line); color: #e0e0e8; }
.ctl-primary { background: var(--lime-dim); border-color: var(--lime); color: var(--lime); }
.ctl-primary:hover { box-shadow: 0 0 24px var(--lime-glow); }
.ctl-primary:disabled:hover { box-shadow: none; }
.ctl-danger { background: rgba(229,103,103,.14); border-color: rgba(229,103,103,.5); color: #f0a5a5; }
.ctl-danger:hover { background: rgba(229,103,103,.22); border-color: var(--red); color: #ffd5d5; box-shadow: 0 0 20px rgba(229,103,103,.25); }
.ctl [data-icon] { display: grid; place-items: center; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .35rem .5rem; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line); color: #c3c3d4;
  cursor: pointer; transition: border-color .15s, color .15s, box-shadow .15s;
}
.iconbtn:hover { border-color: var(--lime); color: var(--lime); box-shadow: 0 0 16px var(--lime-dim); }

.field {
  padding: .5rem .65rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line); color: #e0e0e8; font-size: .85rem;
}
.field:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px var(--lime-dim); }

/* ---- Discord sign-in button ---- */
.btn-discord {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .8rem 1.4rem; border-radius: 12px; cursor: pointer;
  background: var(--blurple); border: 1px solid var(--blurple); color: #fff;
  font: 600 .95rem/1 Inter, system-ui, sans-serif;
  transition: box-shadow .15s, filter .15s, transform .05s;
}
.btn-discord:hover { box-shadow: 0 0 28px rgba(88,101,242,.45); filter: brightness(1.08); }
.btn-discord:active { transform: translateY(1px); }
.btn-discord [data-icon] { display: grid; place-items: center; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .8rem; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  font: 500 .8rem/1 Inter, system-ui, sans-serif;
  transition: border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: rgba(204,255,2,.4); color: var(--lime); }

/* ---- Section labels / cards (mirrors admin) ---- */
.section-label { font: 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .2em; color: #8a8f98; }
.panel-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.stat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.stat-pill [data-icon] { display: grid; place-items: center; }
.badge {
  font: 9px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase;
  padding: .18rem .45rem; border-radius: 6px; border: 1px solid var(--line); color: #9a9ab0;
}

/* ---- Status dots ---- */
.stdot { width: 8px; height: 8px; border-radius: 999px; background: #44445a; transition: background .2s, box-shadow .2s; flex: 0 0 auto; }
.stdot.on  { background: var(--lime); box-shadow: 0 0 8px var(--lime-glow); }
.stdot.off { background: var(--red); }
.stdot.live { animation: dotpulse 1.6s ease-in-out infinite; }
@keyframes dotpulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---- Health grading ---- */
.h-good { color: var(--lime) !important; }
.h-warn { color: var(--amber) !important; }
.h-bad  { color: var(--red) !important; }
.h-muted{ color: var(--muted) !important; }
.hdot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; }
.hdot.h-good { background: var(--lime); box-shadow: 0 0 6px var(--lime-glow); }
.hdot.h-warn { background: var(--amber); box-shadow: 0 0 6px rgba(245,196,81,.5); }
.hdot.h-bad  { background: var(--red); box-shadow: 0 0 6px rgba(229,103,103,.5); }

/* ================= Hero (landing) ================= */
.hero-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.hero {
  width: min(94vw, 560px); text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  padding: 44px 38px 38px; position: relative; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 60px rgba(204,255,2,.04);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(560px 220px at 50% -20%, rgba(204,255,2,.10), transparent 65%);
}
.hero > * { position: relative; z-index: 1; }
.hero-eyebrow {
  font: 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 18px;
}
.hero-title { font: 800 40px/1.02 Syne, system-ui, sans-serif; letter-spacing: -.01em; margin-bottom: 14px; }
.hero-title .plus { color: var(--lime); text-shadow: 0 0 22px rgba(204,255,2,.5); }
.hero-pitch { font: 400 15px/1.6 Inter, system-ui, sans-serif; color: #b9b9cc; max-width: 420px; margin: 0 auto 28px; }
.hero-note { font: 10px/1.5 'JetBrains Mono', ui-monospace, monospace; color: var(--muted); margin-top: 20px; letter-spacing: .04em; }
.hero-note .dot-sep { color: rgba(204,255,2,.5); margin: 0 6px; }

/* ================= Top bar (logged-in) ================= */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(18,19,30,.82), rgba(10,10,16,.72)),
    radial-gradient(600px 120px at 12% -40%, rgba(204,255,2,.10), transparent 70%),
    radial-gradient(600px 120px at 88% -40%, rgba(2,188,204,.08), transparent 70%);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 30px rgba(0,0,0,.35);
}
.topbar::after {   /* thin lime accent underline */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(204,255,2,.5), rgba(2,188,204,.4), transparent);
  opacity: .5;
}
.brand-lockup { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { font: 800 19px/1 Syne, system-ui, sans-serif; color: var(--lime); text-shadow: 0 0 18px rgba(204,255,2,.45); }
.brand-sub { font: 600 12px/1 Syne, system-ui, sans-serif; color: rgba(224,224,232,.72); padding-left: 8px; border-left: 1px solid var(--line); }
/* user chip (avatar + name) */
.user-chip { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 6px; border-radius: 999px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.avatar { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; border: 1px solid rgba(204,255,2,.35);
  background: var(--surface-2); box-shadow: 0 0 10px rgba(204,255,2,.12); flex: 0 0 auto; }
.avatar-fallback { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--lime-dim), rgba(2,188,204,.14)); border: 1px solid rgba(204,255,2,.45);
  color: var(--lime); font: 800 19px/1 Syne, system-ui, sans-serif; text-shadow: 0 0 10px rgba(204,255,2,.45); padding-bottom: 1px; }
.user-name { font: 600 13px/1 Inter, system-ui, sans-serif; color: #e6e6ee; }

/* ================= Quota meter ================= */
.quota-pips { display: inline-flex; gap: 5px; }
.qpip { width: 26px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line-soft); transition: background .2s, box-shadow .2s; }
.qpip.free { background: linear-gradient(90deg, var(--cyan), var(--lime)); border-color: transparent; box-shadow: 0 0 8px var(--lime-dim); }
.qpip.used { background: rgba(229,103,103,.28); border-color: rgba(229,103,103,.3); }

/* ================= Generate CTA card ================= */
.cta-card {
  text-align: center; padding: 44px 32px;
  border: 1.5px dashed var(--line); border-radius: 20px; background: rgba(255,255,255,.015);
  transition: border-color .15s, background .15s;
}
.cta-card.ready:hover { border-color: rgba(204,255,2,.45); background: rgba(204,255,2,.03); }
.cta-ic { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; background: var(--lime-dim); color: var(--lime); }
.cta-ic svg { width: 26px; height: 26px; }
.cta-title { font: 700 20px/1.2 Syne, system-ui, sans-serif; color: #eaeaf2; margin-bottom: 6px; }
.cta-sub { font: 12px/1.6 Inter, system-ui, sans-serif; color: var(--muted); max-width: 420px; margin: 0 auto 22px; }

/* ================= Active session: countdown ring ================= */
.count-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.count-ring { position: relative; width: 200px; height: 200px; }
.count-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.count-ring .track { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 10; }
.count-ring .prog { fill: none; stroke: var(--lime); stroke-width: 10; stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--lime-glow)); transition: stroke-dashoffset 1s linear, stroke .3s; }
.count-ring.warn .prog { stroke: var(--amber); filter: drop-shadow(0 0 6px rgba(245,196,81,.6)); }
.count-ring.bad  .prog { stroke: var(--red);   filter: drop-shadow(0 0 6px rgba(229,103,103,.6)); }
.count-num {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  font: 700 46px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--lime);
  text-shadow: 0 0 22px rgba(204,255,2,.25); letter-spacing: .02em;
}
.count-ring.warn .count-num { color: var(--amber); text-shadow: 0 0 22px rgba(245,196,81,.28); }
.count-ring.bad  .count-num { color: var(--red);   text-shadow: 0 0 22px rgba(229,103,103,.3); }
.count-cap { font: 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ================= Endpoint rows ================= */
.ep-group + .ep-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.ep-group-head { font: 9px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; color: #7f7f92; margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.ep-group-head::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.ep-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ep-tag {
  font: 9px/1 'JetBrains Mono', monospace; letter-spacing: .04em; color: var(--lime);
  background: var(--lime-dim); border: 1px solid rgba(204,255,2,.2); border-radius: 6px;
  padding: 5px 8px; min-width: 74px; text-align: center; flex-shrink: 0; white-space: nowrap;
}
.ep-tag.cyan { color: var(--cyan); background: rgba(2,188,204,.12); border-color: rgba(2,188,204,.25); }
.src-url {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: #aab;
  background: #0a0a12; border: 1px solid var(--line); border-radius: 8px;
  padding: .4rem .55rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ingest-hint { font: 10px/1.6 'JetBrains Mono', monospace; color: #8a8a9c; margin: 14px 2px 4px; }
.ingest-hint b { color: rgba(204,255,2,.85); font-weight: 400; }

/* ---- BELABOX push fields (primary ingest) ---- */
.ep-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.ep-head .eh-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--lime-dim); border: 1px solid rgba(204,255,2,.25); color: var(--lime); }
.ep-head .eh-ic svg { width: 15px; height: 15px; }
.ep-head .eh-title { font: 700 14px/1 Syne, system-ui, sans-serif; letter-spacing: .01em; color: #eaeaf2; }
.ep-head .eh-tag { margin-left: auto; font: 8px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lime); background: var(--lime-dim); border: 1px solid rgba(204,255,2,.25); border-radius: 5px; padding: 4px 7px; }
/* one box, three separated rows */
.bela-box { border: 1px solid var(--line); border-radius: 13px; background: #0a0a12; overflow: hidden; }
.bela-field { display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft); transition: background .15s; }
.bela-field:last-child { border-bottom: none; }
.bela-field:hover { background: rgba(204,255,2,.03); }
.bf-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-soft); color: var(--muted); }
.bf-ic svg { width: 13px; height: 13px; }
.bf-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bf-label { font: 8px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #7f7f92; }
.bf-val { font: 600 14px/1.2 'JetBrains Mono', ui-monospace, monospace; color: #eef;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "or" divider */
.or-sep { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px;
  font: 9px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #64647a; }
.or-sep::before, .or-sep::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }

/* ---- Secondary links (SRT url / playback / stats / overlay): thin boxed rows ---- */
.links-label { font: 9px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase;
  color: #7f7f92; margin: 18px 0 8px; }
.link-box { border: 1px solid var(--line); border-radius: 11px; background: #0a0a12; overflow: hidden; }
#epSrt { margin-top: 2px; }
.link-field { display: flex; align-items: center; gap: 10px; padding: 8px 11px;
  border-bottom: 1px solid var(--line-soft); transition: background .15s; }
.link-field:last-child { border-bottom: none; }
.link-field:hover { background: rgba(255,255,255,.02); }
.lf-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(2,188,204,.1); border: 1px solid rgba(2,188,204,.22); color: var(--cyan); }
.lf-ic.lime { background: var(--lime-dim); border-color: rgba(204,255,2,.25); color: var(--lime); }
.lf-ic svg { width: 12px; height: 12px; }
.lf-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lf-name { font: 600 11px/1.2 Inter, system-ui, sans-serif; color: #d5d5e2; }
.lf-url { font: 10px/1.3 'JetBrains Mono', monospace; color: #6f6f85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.iconbtn.sm { padding: .28rem .4rem; }
.iconbtn.sm svg { width: 13px; height: 13px; }

/* ---- Live bitrate graph (area + line, replaces the old bar) ---- */
.live-graph { position: relative; width: 100%; height: 84px; margin: 6px 0 14px;
  border-radius: 12px; background: rgba(255,255,255,.02); border: 1px solid var(--line-soft); overflow: hidden; }
.live-graph svg { display: block; width: 100%; height: 100%; }
.live-graph .lg-now { position: absolute; top: 8px; left: 12px; display: flex; align-items: baseline; gap: 5px; }
.live-graph .lg-now .n { font: 700 26px/1 Syne, system-ui, sans-serif; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.live-graph .lg-now .u { font: 400 11px/1 'JetBrains Mono', monospace; color: #9aa; }
.live-graph .lg-cap { position: absolute; top: 9px; right: 12px; font: 8px/1 'JetBrains Mono', monospace;
  letter-spacing: .1em; text-transform: uppercase; color: #5a5a70; }

/* ================= Live health widget (reuses overlay language) ================= */
.live-card {
  background: rgba(8,9,12,.72); border: 1px solid rgba(204,255,2,.22); border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 6px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
}
.live-top { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.live-label { font: 600 13px/1 Inter, system-ui, sans-serif; color: #fff; }
.live-rate { display: flex; align-items: baseline; gap: 8px; }
.live-rate .n { font: 700 42px/1 Syne, system-ui, sans-serif; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.live-rate .u { font: 400 13px/1 'JetBrains Mono', monospace; color: #9aa; }
.chip { font: 11px/1 'JetBrains Mono', monospace; padding: 4px 9px; border-radius: 8px; background: rgba(255,255,255,.06); color: #bcc; white-space: nowrap; }
.chip b { color: #fff; font-weight: 600; }

/* per-link bonding bars */
.link-row { display: flex; align-items: center; gap: 8px; }
.link-ip { font: 10px/1 'JetBrains Mono', monospace; color: #c3c3d4; width: 118px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.link-fill { height: 100%; border-radius: 999px; transition: width .5s ease; }
.link-fill.h-good { background: linear-gradient(90deg, var(--cyan), var(--lime)); box-shadow: 0 0 8px var(--lime-dim); }
.link-fill.h-warn { background: linear-gradient(90deg, #c9a13a, var(--amber)); box-shadow: 0 0 8px rgba(245,196,81,.25); }
.link-fill.h-bad  { background: var(--red); }
.link-kbps { font: 10px/1 'JetBrains Mono', monospace; color: var(--lime); width: 74px; text-align: right; flex-shrink: 0; }
.link-row.down .link-ip { color: var(--red); }
.link-row.down .link-kbps { color: var(--red); }

/* metric tiles */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.metric-tile { background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px; text-align: center; }
.metric-label { display: block; font: 8px/1 'JetBrains Mono', monospace; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; }
.metric-val { font: 13px/1 'JetBrains Mono', monospace; color: #eaeaf2; }

/* waiting-for-encoder */
.waiting { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px; text-align: center; }
.waiting-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--lime-dim); color: var(--lime); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.45} 50%{opacity:1} }
.waiting-t { font: 600 14px/1.3 Syne, system-ui, sans-serif; color: #eaeaf2; }
.waiting-s { font: 11px/1.5 'JetBrains Mono', monospace; color: var(--muted); max-width: 360px; }

/* queue state */
.queue-card { text-align: center; padding: 44px 32px; border: 1px solid rgba(2,188,204,.3); border-radius: 20px;
  background: rgba(2,188,204,.05); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.queue-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 14px;
  background: rgba(2,188,204,.14); color: var(--cyan); animation: pulse 1.8s ease-in-out infinite; }
.queue-ic svg { width: 26px; height: 26px; }
.queue-stats { display: flex; gap: 40px; margin: 18px 0 6px; }
.qstat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.qs-num { font: 700 34px/1 Syne, system-ui, sans-serif; color: var(--cyan); text-shadow: 0 0 20px rgba(2,188,204,.3); }
.qs-lbl { font: 9px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* expired state */
.expired-card { text-align: center; padding: 44px 32px; border: 1px solid rgba(229,103,103,.35); border-radius: 20px; background: rgba(229,103,103,.05); }
.expired-ic { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; background: rgba(229,103,103,.14); color: var(--red); }

/* ================= Toast ================= */
.src-toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-24px);
  z-index: 120; display: flex; align-items: center; gap: 10px; pointer-events: none;
  background: #07070d; border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px;
  font: 12px/1 Inter, system-ui, sans-serif; color: #e6e6ee;
  opacity: 0; transition: opacity .22s ease, transform .22s ease; box-shadow: 0 10px 34px rgba(0,0,0,.55);
}
.src-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.src-toast [data-icon] { display: grid; place-items: center; }
.src-toast.ok { border-color: var(--lime); color: var(--lime); box-shadow: 0 10px 34px rgba(0,0,0,.55), 0 0 16px var(--lime-dim); }
.src-toast.bad { border-color: var(--red); color: var(--red); }

/* ================= Confirm modal ================= */
.modal-back { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); display: grid; place-items: center; }
.modal-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 22px; width: min(92vw, 400px); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.confirm-title { font: 700 15px/1.3 Syne, sans-serif; color: #f0f0f5; margin-bottom: 8px; }
.confirm-body { font: 12px/1.6 Inter, sans-serif; color: var(--muted); margin-bottom: 18px; }
.confirm-body b { color: #e6e6ee; font-weight: 600; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ================= Scrollbars ================= */
* { scrollbar-width: thin; scrollbar-color: rgba(204, 255, 2, .25) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(204, 255, 2, .18); border-radius: 999px; border: 2px solid #0d0d16; }
::-webkit-scrollbar-thumb:hover { background: rgba(204, 255, 2, .38); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ================= Tab bar ================= */
.tabbar { border-bottom: 1px solid var(--line); background: rgba(10,10,16,.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tabbar-inner { max-width: 880px; margin: 0 auto; display: flex; gap: 4px; padding: 0 16px; }
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 12px 14px 11px; border: none; background: none; cursor: pointer;
  font: 600 12.5px/1 Inter, system-ui, sans-serif; color: var(--muted); border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.tab [data-icon] { display: grid; place-items: center; opacity: .75; }
.tab:hover { color: #d5d5e2; }
.tab.active { color: var(--lime); border-bottom-color: var(--lime); }
.tab.active [data-icon] { opacity: 1; }

/* ================= Live eyebrow ================= */
.live-eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 9px/1 'JetBrains Mono', monospace;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.live-eyebrow [data-icon] { display: grid; place-items: center; }

/* ================= Countdown idle (before first connect) ================= */
.count-ring.idle .prog { stroke: var(--cyan); filter: drop-shadow(0 0 6px rgba(2,188,204,.5)); opacity: .55; }
.count-ring.idle .count-num { color: var(--cyan); text-shadow: 0 0 20px rgba(2,188,204,.25); }

/* ================= History ================= */
.hist-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.hist-sub { font: 11px/1.4 Inter, system-ui, sans-serif; color: var(--muted); margin-top: 3px; }
.hist-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; transition: border-color .15s; }
.hist-card:hover { border-color: rgba(204,255,2,.25); }
.hist-when { display: flex; flex-direction: column; gap: 3px; min-width: 118px; }
.hw-date { font: 600 13px/1.2 Inter, system-ui, sans-serif; color: #eaeaf2; }
.hw-key { font: 10px/1 'JetBrains Mono', monospace; color: var(--muted); }
.hist-stats { display: grid; grid-template-columns: repeat(4, minmax(86px, 1fr)); gap: 10px; flex: 1; }
.hist-stat { display: flex; align-items: center; gap: 8px; }
.hs-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-soft); color: var(--cyan); }
.hs-ic svg { width: 13px; height: 13px; }
.hs-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hs-label { font: 8px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #6f6f82; }
.hs-val { font: 600 12px/1.2 'JetBrains Mono', monospace; color: #e6e6ee; white-space: nowrap; }
.hs-dim { color: var(--muted); font-weight: 400; }
.hist-empty { text-align: center; padding: 48px 24px; border: 1.5px dashed var(--line); border-radius: 16px; }
.hist-empty-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--lime-dim); color: var(--lime); margin-bottom: 10px; }
.hist-empty-ic svg { width: 22px; height: 22px; }
.hist-empty-t { font: 700 15px/1.2 Syne, system-ui, sans-serif; color: #eaeaf2; margin-bottom: 4px; }
.hist-empty-s { font: 11px/1.5 Inter, system-ui, sans-serif; color: var(--muted); max-width: 380px; margin: 0 auto; }

/* ================= Footer ================= */
.site-footer { border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(2,188,204,.02)); margin-top: 30px; }
.foot-inner { max-width: 880px; margin: 0 auto; padding: 22px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foot-brand .brand-mark { font-size: 16px; }
.foot-tag { font: 600 12px/1 Syne, system-ui, sans-serif; color: rgba(224,224,232,.82); }
.foot-dim { font: 11px/1.4 Inter, system-ui, sans-serif; color: var(--muted); }
.foot-links { display: inline-flex; align-items: center; gap: 8px; font: 11px/1 'JetBrains Mono', monospace; }
.foot-links a { color: var(--muted); transition: color .15s; }
.foot-links a:hover { color: var(--lime); }
.foot-sep { color: rgba(204,255,2,.4); }

/* ================= Responsive ================= */
@media (max-width: 720px) {
  .hero-title { font-size: 32px; }
  .count-ring { width: 168px; height: 168px; }
  .count-num { font-size: 38px; }
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
}
@media (max-width: 640px) {
  .hist-stats { grid-template-columns: repeat(2, 1fr); }
  .hist-card { gap: 12px; }
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}