/* ============================================================================
   EchoStream — single stylesheet. Plain CSS, loaded directly (no build step).
   Tailwind (via CDN) still provides generic utilities (flex, grid, spacing,
   rounded, emerald/red/yellow, white-alpha). Everything THEME-related lives
   here. To restyle the product, edit the variables in the block below.
   ============================================================================ */

:root{
  /* ===================== EDIT YOUR THEME HERE ===================== */
  --accent:#10B981;        /* primary green (buttons, highlights)     */
  --accent-2:#34D399;       /* lighter green (text, active items)      */
  --accent-3:#059669;       /* darker green (gradient end)             */
  --accent-ink:#04130D;     /* text/icon color ON green buttons        */

  --bg:#0A0B0E;             /* page background (dark, neutral)         */
  --surface:#0F1115;        /* cards / inputs base                     */
  --side:#0F1115;           /* sidebar background                      */
  --ink:#E8EAF0;            /* main text                               */
  --muted:#919AA6;          /* secondary text                         */
  --faint:#5C6470;          /* hints / disabled                        */
  --line:rgba(255,255,255,.08);   /* hairline borders                 */

  --radius:.9rem;           /* default corner radius                   */

  /* green tints (kept here so the accent is changeable in one place)  */
  --accent-soft:rgba(16,185,129,.12);
  --accent-line:rgba(16,185,129,.28);
  --accent-ring:rgba(16,185,129,.45);
  --accent-strong:rgba(16,185,129,.55);
  /* =============================================================== */
}

/* ---------- base ---------- */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }

.font-display{ font-family:"Space Grotesk",Inter,sans-serif }
.font-mono{ font-family:"JetBrains Mono",ui-monospace,monospace }
.text-muted{ color:var(--muted) }
.text-faint{ color:var(--faint) }
.text-ink{ color:var(--ink) }

.grid-bg{
  background-color:var(--bg);
  background-image:
    radial-gradient(75% 55% at 50% -10%, rgba(255,255,255,.035), transparent 60%),
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:auto, 44px 44px, 44px 44px;
}
.glow{ background:radial-gradient(55% 55% at 50% 0%, rgba(255,255,255,.04), transparent 60%); }

/* ---------- surfaces ---------- */
.glass-card{ background:rgba(255,255,255,.04); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.glass{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.tile,.mini-stat{ background:rgba(255,255,255,.028); border:1px solid var(--line); }

/* A dialog is not a card. .glass-card is 4% white, which reads correctly when
   it sits on the page but goes see-through the moment it floats over a scrim -
   the storage page's "Add more storage" tiles were legible straight through the
   Go live dialog. Modals get an opaque surface instead. */
.modal-scrim{ background:rgba(0,0,0,.66); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.modal-card{ background:var(--surface); border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.6); }

/* ---------- accents ---------- */
.grad{ background:linear-gradient(135deg,var(--accent),var(--accent-3)); }
.text-gradient{ background:linear-gradient(120deg,var(--accent-2),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- buttons ---------- */
.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-3)); color:var(--accent-ink);
  font-weight:600; display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  transition:.18s; border:0; cursor:pointer; }
.btn-primary:hover{ opacity:.92; transform:translateY(-1px); }
.btn-ghost{ background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink);
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center; transition:.18s; cursor:pointer; }
.btn-ghost:hover{ background:rgba(255,255,255,.08); }

/* ---------- badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:11px; font-weight:600;
  padding:.25rem .6rem; border-radius:9999px; }
.badge-green{ background:var(--accent-soft); color:var(--accent-2); border:1px solid var(--accent-line); }
.badge-yellow{ background:rgba(245,158,11,.12); color:#FBBF24; border:1px solid rgba(245,158,11,.28); }
.badge-red{ background:rgba(239,68,68,.12); color:#F87171; border:1px solid rgba(239,68,68,.28); }
.badge-muted{ background:rgba(255,255,255,.06); color:var(--faint); border:1px solid var(--line); }

/* ---------- form fields ---------- */
input,select,textarea{ background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--ink); }
input::placeholder,textarea::placeholder{ color:var(--faint); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent-strong);
  box-shadow:0 0 0 3px var(--accent-soft); }
select option{ background:var(--surface); }

/* ---------- sidebar ---------- */
.side-bar{ background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%),var(--side);
  border-right:1px solid var(--line); }
.side-item{ position:relative; display:flex; align-items:center; gap:.7rem; margin:.12rem .25rem;
  padding:.62rem .8rem; border-radius:.75rem; color:var(--muted); font-size:.9rem; font-weight:500;
  transition:.15s; cursor:pointer; }
.side-item i{ width:1.15rem; text-align:center; font-size:1rem; opacity:.9; }
.side-item:hover{ background:rgba(255,255,255,.05); color:var(--ink); }
.side-item.active{ background:var(--accent-soft); color:var(--accent-2); box-shadow:inset 3px 0 0 var(--accent); }
.side-item.active i{ opacity:1; }
.nav-sep{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  padding:.95rem .95rem .35rem; }

/* ---------- site header (public) ---------- */
#siteHeader{ transition:padding .25s ease; }
#siteHeader .hdr-inner{ position:relative; overflow:hidden; background:rgba(15,17,21,.72);
  border-bottom:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:all .25s ease; }
#scroll-progress{ position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .1s linear; }
#siteHeader.floating{ padding:.55rem .8rem 0; }
#siteHeader.floating .hdr-inner{ max-width:72rem; margin:0 auto; border:0; border-radius:1rem;
  box-shadow:0 12px 34px rgba(0,0,0,.45); background:rgba(20,22,27,.8); }

/* ---------- guided steps (tutorial) ---------- */
.step{ display:flex; gap:1rem; }
.step-rail{ display:flex; flex-direction:column; align-items:center; }
.step-num{ width:2.25rem; height:2.25rem; border-radius:9999px; display:grid; place-items:center;
  font-weight:700; font-family:"Space Grotesk",sans-serif; flex:0 0 auto;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--muted); }
.step-line{ width:2px; flex:1; background:var(--line); margin:.35rem 0; min-height:1rem; }
.step.active .step-num{ border-color:var(--accent-strong); color:var(--accent-2); box-shadow:0 0 0 3px var(--accent-soft); }
.step.done .step-num{ background:linear-gradient(135deg,var(--accent),var(--accent-3)); color:var(--accent-ink); border-color:transparent; }
.step.done .step-line{ background:linear-gradient(var(--accent),var(--line)); }
.step-body{ flex:1; padding-bottom:1.4rem; }
.step:last-child .step-body{ padding-bottom:0; }
.step-title{ font-family:"Space Grotesk",sans-serif; font-weight:600; }
.step.done .step-title{ color:var(--accent-2); }

/* ---------- node selection ---------- */
.node-sel{ transition:.15s }
.node-sel.selected{ border-color:var(--accent-strong)!important; box-shadow:0 0 0 1px var(--accent-ring); }

/* ---------- ripple + motion ---------- */
.ring-r{ position:absolute; inset:0; margin:auto; border-radius:9999px; border:1px solid var(--accent-line); }
@keyframes ripple{ 0%{ transform:scale(.18); opacity:.7 } 100%{ transform:scale(1); opacity:0 } }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.5 } }
@media (prefers-reduced-motion:no-preference){
  .ring-r{ animation:ripple 4.4s ease-out infinite; }
  .ring-r:nth-child(2){ animation-delay:1.1s } .ring-r:nth-child(3){ animation-delay:2.2s } .ring-r:nth-child(4){ animation-delay:3.3s }
  .pulse-dot{ animation:pulse 1.8s ease-in-out infinite; }
}

/* ---------- misc ---------- */
::selection{ background:var(--accent-ring); }
::-webkit-scrollbar{ width:10px; height:10px } ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.08); border-radius:9px }
summary::-webkit-details-marker{ display:none } summary::marker{ content:"" }

/* ============================================================================
   PANEL v2 — profile box, channel cards, settings tabs, animations
   ========================================================================== */

/* sidebar profile box (top of sidebar) */
.profile-box{ position:relative; }
.profile-trigger{ display:flex; align-items:center; gap:.6rem; width:100%; padding:.55rem .6rem;
  border-radius:.8rem; border:1px solid var(--line); background:rgba(255,255,255,.028); cursor:pointer;
  transition:border-color .15s, background .15s; }
.profile-trigger:hover{ border-color:var(--accent-line); background:rgba(255,255,255,.05); }
.avatar{ flex:none; width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  font-weight:700; color:var(--accent-ink); background:linear-gradient(135deg,var(--accent),var(--accent-3)); }
.profile-menu{ position:absolute; left:0; right:0; top:calc(100% + .4rem); z-index:60;
  background:var(--surface); border:1px solid var(--line); border-radius:.9rem; padding:.35rem;
  box-shadow:0 16px 40px rgba(0,0,0,.5); opacity:0; transform:translateY(-6px) scale(.98);
  pointer-events:none; transition:opacity .16s, transform .16s; }
.profile-box.open .profile-menu{ opacity:1; transform:none; pointer-events:auto; }
.profile-menu a{ display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border-radius:.6rem;
  font-size:.85rem; color:var(--muted); transition:background .12s,color .12s; }
.profile-menu a:hover{ background:rgba(255,255,255,.05); color:var(--ink); }
.profile-menu a i{ width:1.1rem; text-align:center; }
.profile-menu .sep{ height:1px; background:var(--line); margin:.3rem .2rem; }

/* channel catalog cards (Add a channel grid) */
.chan-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.65rem; }
.chan-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  padding:1.1rem .6rem; border-radius:1rem; border:1px solid var(--line); background:rgba(255,255,255,.028);
  cursor:pointer; text-align:center; transition:transform .18s, border-color .18s, background .18s; }
.chan-card:hover{ transform:translateY(-3px); border-color:var(--accent-line); background:rgba(255,255,255,.05); }
.chan-card i{ font-size:1.7rem; color:var(--ink); transition:color .18s; }
.chan-card:hover i{ color:var(--accent-2); }
.chan-card .nm{ font-size:.82rem; font-weight:600; }
.chan-card .sub{ font-size:.66rem; color:var(--faint); }

/* settings tabs */
.tab-link{ padding:.5rem .9rem; border-radius:.7rem; font-size:.85rem; color:var(--muted);
  border:1px solid transparent; transition:all .15s; white-space:nowrap; }
.tab-link:hover{ color:var(--ink); background:rgba(255,255,255,.04); }
.tab-link.active{ color:var(--accent-2); background:var(--accent-soft); border-color:var(--accent-line); }

/* ---- animation layer (gated on reduced-motion) ---- */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes popIn{ 0%{ opacity:0; transform:scale(.96) } 100%{ opacity:1; transform:none } }
@media (prefers-reduced-motion:no-preference){
  .anim-page > *{ animation:fadeUp .5s both; }
  .anim-page > *:nth-child(2){ animation-delay:.05s }
  .anim-page > *:nth-child(3){ animation-delay:.1s }
  .anim-page > *:nth-child(4){ animation-delay:.15s }
  .anim-page > *:nth-child(5){ animation-delay:.2s }
  .anim-page > *:nth-child(n+6){ animation-delay:.25s }
  .stagger > *{ animation:popIn .42s both; }
  .stagger > *:nth-child(2){ animation-delay:.04s } .stagger > *:nth-child(3){ animation-delay:.08s }
  .stagger > *:nth-child(4){ animation-delay:.12s } .stagger > *:nth-child(5){ animation-delay:.16s }
  .stagger > *:nth-child(6){ animation-delay:.2s }  .stagger > *:nth-child(7){ animation-delay:.24s }
  .stagger > *:nth-child(8){ animation-delay:.28s } .stagger > *:nth-child(n+9){ animation-delay:.32s }
  .lift{ transition:transform .18s, box-shadow .18s, border-color .18s; }
  .lift:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.28); }
  .side-item{ transition:background .15s,color .15s,box-shadow .15s,transform .12s; }
  .side-item:hover{ transform:translateX(2px); }
}

/* multi-chat rows (panel view; overlay has its own copy) */
.cmsg{font-size:14px;line-height:1.4;word-wrap:break-word}
.cmsg.chist{opacity:.55}
.cplat{margin-right:6px;font-size:12px}
.cbadge{margin-right:3px;font-size:11px;vertical-align:middle}
/* display:inline-block is load-bearing: Tailwind's preflight sets img{display:block},
   which put every emote on its own line and split the sentence around it. The
   overlay page does not load Tailwind, which is why it only showed in the panel. */
.cemote{display:inline-block;height:1.5em;width:auto;vertical-align:middle;margin:0 1px}
.cbadge{display:inline-block}
.cmsg{overflow-wrap:anywhere}
.cuser{font-weight:700;margin-right:6px}
.ctext{color:var(--muted)}
/* Legal pages (privacy, terms). Long-form prose needs different rhythm from
   the dashboard: readable measure, clear heading hierarchy, real list spacing. */
.legal h2{font-family:'Space Grotesk',Inter,sans-serif;font-weight:600;font-size:1.05rem;margin:2rem 0 .6rem;color:var(--ink)}
.legal h3{font-weight:600;font-size:.92rem;margin:1.2rem 0 .4rem;color:var(--ink)}
.legal p{color:var(--muted);font-size:.92rem;line-height:1.7;margin:.6rem 0}
.legal ul{margin:.6rem 0 .6rem 1.1rem;padding:0}
.legal li{color:var(--muted);font-size:.92rem;line-height:1.7;margin:.35rem 0;list-style:disc}
.legal b{color:var(--ink);font-weight:600}
.legal a{color:var(--accent-2);text-decoration:underline}

/* Kick has no FontAwesome icon — the brand set only carries Kickstarter, which
   is a different company — so it was falling back to a bolt or a generic video
   glyph. This draws the mark as a mask so it inherits currentColor and sizes
   like any other <i>, with no extra network request. */
.icon-kick{
  display:inline-block; width:1em; height:1em; vertical-align:-.125em;
  background-color:currentColor;
  -webkit-mask:var(--kick-mark) center/contain no-repeat;
          mask:var(--kick-mark) center/contain no-repeat;
}
:root{
  --kick-mark:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h5v6h2V6h2V3h6v6h-2v3h-2v3h2v3h2v6h-6v-3h-2v-3H8v6H3z'/></svg>");
}
.text-kick{ color:#53FC18 }