/* =========================================================
   BLOOM TV — Design tokens
   Ink background + a bloom (coral→gold→orchid) signature gradient.
   Display: Fraunces (organic, blooming curves) · UI: Inter · Data: JetBrains Mono
   ========================================================= */
:root{
  --ink:        #0A0D12;
  --surface:    #12161D;
  --surface-2:  #191F29;
  --line:       rgba(255,255,255,.08);
  --text:       #F5F3EE;
  --muted:      #8B93A6;

  --coral:      #FF6B4A;
  --gold:       #FFC15E;
  --orchid:     #C9598A;
  --bloom:      linear-gradient(120deg, var(--coral) 0%, var(--gold) 55%, var(--orchid) 100%);
  --bloom-soft: linear-gradient(120deg, rgba(255,107,74,.16), rgba(201,89,138,.16));

  --live-green: #3ED598;

  --radius:     16px;
  --radius-sm:  10px;
  --nav-h:      72px;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  padding-bottom:calc(var(--nav-h) + 12px);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
a{ text-decoration:none; color:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============ Bloom mark (signature element) ============ */
.bloom-mark, .welcome-bloom{
  position:relative;
  width:28px; height:28px;
  flex-shrink:0;
}
.welcome-bloom{ width:56px; height:56px; margin:0 auto 14px; }
.petal{
  position:absolute; inset:0;
  border-radius:60% 40% 60% 40%;
  background:var(--bloom);
  opacity:.85;
  animation:bloom-turn 9s linear infinite;
}
.p1{ transform:rotate(0deg) scale(.62) translateY(-18%); }
.p2{ transform:rotate(90deg) scale(.62) translateY(-18%); animation-delay:-2.25s; }
.p3{ transform:rotate(180deg) scale(.62) translateY(-18%); animation-delay:-4.5s; }
.p4{ transform:rotate(270deg) scale(.62) translateY(-18%); animation-delay:-6.75s; }
@keyframes bloom-turn{
  0%,100%{ filter:hue-rotate(0deg); }
  50%{ filter:hue-rotate(18deg); }
}

/* ============ Top bar ============ */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  background:rgba(10,13,18,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-name{ font-family:var(--font-display); font-size:20px; letter-spacing:.2px; }
.brand-name em{ font-style:normal; color:var(--gold); }
.btn-ghost{
  background:transparent; border:1px solid var(--line); color:var(--text);
  padding:9px 18px; border-radius:999px; font-weight:600; font-size:14px;
  transition:border-color .2s, background .2s;
}
.btn-ghost:hover{ border-color:var(--gold); background:rgba(255,193,94,.08); }

/* ============ Notification banner ============ */
.notif-banner{
  position:sticky; top:65px; z-index:39;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bloom-soft); border-bottom:1px solid var(--line);
  padding:10px 18px; font-size:13px; color:var(--text);
}
.notif-banner button{
  background:none; border:none; color:var(--muted); font-size:18px; line-height:1; flex-shrink:0;
}
.form-note{ font-size:12.5px; color:var(--muted); margin:-4px 0 4px; min-height:16px; }
.form-note.error{ color:#ff8b8b; }
.form-note.success{ color:var(--live-green, #3ed598); }
.btn-primary[disabled]{ opacity:.6; pointer-events:none; }

/* ============ Hero slider ============ */
.hero{ position:relative; height:min(74vh, 560px); overflow:hidden; }
.hero-track{ position:relative; height:100%; }
.slide{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  padding:0 20px 56px;
  background:
    radial-gradient(120% 90% at 15% 100%, rgba(0,0,0,.05), transparent 60%),
    linear-gradient(0deg, var(--ink) 0%, rgba(10,13,18,.35) 55%, rgba(10,13,18,.55) 100%),
    var(--bg, var(--surface));
  opacity:0; visibility:hidden;
  transition:opacity .7s ease;
}
.slide.is-active{ opacity:1; visibility:visible; }
.slide-glow{
  position:absolute; top:-30%; right:-10%;
  width:70%; height:120%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent, var(--coral)) 55%, transparent), transparent 70%);
  filter:blur(10px);
  animation:glow-pulse 6s ease-in-out infinite;
}
@keyframes glow-pulse{
  0%,100%{ transform:scale(1); opacity:.55; }
  50%{ transform:scale(1.12); opacity:.8; }
}
.slide-copy{ position:relative; max-width:640px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--live-green);
  box-shadow:0 0 0 0 rgba(62,213,152,.6);
  animation:live-ping 1.8s ease-out infinite;
}
@keyframes live-ping{
  0%{ box-shadow:0 0 0 0 rgba(62,213,152,.55); }
  70%{ box-shadow:0 0 0 7px rgba(62,213,152,0); }
  100%{ box-shadow:0 0 0 0 rgba(62,213,152,0); }
}
.slide h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(28px, 5vw, 46px); line-height:1.08; margin:0 0 12px;
}
.slide p{ color:var(--muted); font-size:15px; line-height:1.5; margin:0 0 22px; max-width:46ch; }

.btn-primary{
  display:inline-block; border:none;
  background:var(--bloom); color:#181008;
  font-weight:700; font-size:14px;
  padding:13px 26px; border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 8px 24px -8px rgba(255,107,74,.55);
}
.btn-primary:hover{ transform:translateY(-2px); }
.btn-block{ width:100%; text-align:center; border:none; }

.hero-dots{
  position:absolute; left:20px; bottom:20px; z-index:2;
  display:flex; gap:7px;
}
.hero-dots button{
  width:22px; height:3px; border:none; border-radius:2px;
  background:rgba(255,255,255,.25);
  transition:background .25s, width .25s;
}
.hero-dots button.is-active{ background:var(--gold); width:34px; }

/* ============ Channel section ============ */
.channels-section{ padding:36px 20px 24px; max-width:720px; margin:0 auto; }
.section-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:18px; }
.section-head h2{
  font-family:var(--font-display); font-weight:600; font-size:24px; margin:0;
}
.filter-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.chip{
  flex:0 0 auto;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600;
  transition:all .2s;
}
.chip.is-active{ background:var(--bloom-soft); border-color:var(--orchid); color:var(--text); }

.channel-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.channel-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .2s, transform .2s;
}
.channel-card:hover{ border-color:var(--orchid); transform:translateY(-3px); }
.channel-thumb{
  position:relative; aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2);
  overflow:hidden;
}
.channel-thumb img{ width:100%; height:100%; object-fit:cover; }
.channel-num{
  font-family:var(--font-mono); font-size:26px; font-weight:600;
  color:rgba(245,243,238,.14);
  letter-spacing:.02em;
}
.badge{
  position:absolute; top:8px; left:8px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
  background:rgba(10,13,18,.65); backdrop-filter:blur(4px);
  border:1px solid var(--line);
}
.badge.free{ color:var(--live-green); border-color:rgba(62,213,152,.4); }
.badge.paid{ color:var(--gold); border-color:rgba(255,193,94,.4); }
.live-dot{
  position:absolute; top:9px; right:9px;
  display:flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:9px; color:var(--live-green);
  background:rgba(10,13,18,.65); padding:3px 7px; border-radius:999px;
  border:1px solid rgba(62,213,152,.35);
}
.live-dot::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--live-green);
  animation:live-ping 1.8s ease-out infinite;
}
.channel-body{ padding:12px 14px 14px; }
.channel-name{ font-weight:700; font-size:14px; margin:0 0 3px; }
.channel-cat{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }

/* ============ Bottom nav ============ */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:var(--nav-h);
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(10,13,18,.9); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-item{
  background:transparent; border:none; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  font-size:11px; font-weight:600;
}
.nav-item.is-active{ color:var(--gold); }
.nav-ic{ width:20px; height:20px; border-radius:6px; background:currentColor; opacity:.9; mask-size:contain; -webkit-mask-size:contain; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; mask-position:center; -webkit-mask-position:center; }
.ic-home{ mask-image:polygon-home; -webkit-mask-image:none; background:none; border:2px solid currentColor; border-radius:4px 4px 2px 2px; opacity:1; }
/* simple geometric icons (no external icon set needed) */
.ic-home{ width:16px; height:14px; border-width:0 2px 2px 2px; }
.ic-grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; width:16px; height:16px; background:none; border:none; }
.ic-grid::before, .ic-grid::after{ content:""; background:currentColor; border-radius:2px; }
.ic-bolt{ width:12px; height:16px; background:currentColor; clip-path:polygon(60% 0, 0 60%, 40% 60%, 30% 100%, 100% 35%, 55% 35%); }
.ic-user{ width:16px; height:16px; border-radius:50%; border:2px solid currentColor; background:none; position:relative; }

/* ============ Modal (auth) ============ */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(6,7,10,.72); backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal{
  position:relative; width:100%; max-width:420px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px 22px 0 0;
  padding:28px 24px calc(28px + env(safe-area-inset-bottom));
  transform:translateY(16px);
  transition:transform .3s ease;
}
.modal-overlay.is-open .modal{ transform:translateY(0); }
@media (min-width:520px){
  .modal-overlay{ align-items:center; }
  .modal{ border-radius:22px; }
}
.modal-close{
  position:absolute; top:14px; right:16px;
  background:none; border:none; color:var(--muted); font-size:22px; line-height:1;
}
.modal-eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--orchid);
}
.modal h3{ font-family:var(--font-display); font-size:24px; margin:6px 0 20px; }
#registerView h3, #loginView h3{ margin-bottom:20px; }
.modal form{ display:flex; flex-direction:column; gap:14px; margin-bottom:16px; }
.modal label{ font-size:12.5px; color:var(--muted); display:flex; flex-direction:column; gap:6px; }
.modal input, .modal select{
  font-family:inherit; font-size:14px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:12px 13px;
}
.modal input:focus, .modal select:focus{ border-color:var(--gold); }
.switch-line{ font-size:13px; color:var(--muted); text-align:center; margin:0; }
.link-btn{ background:none; border:none; color:var(--gold); font-weight:600; padding:0; }

#welcomeView{ text-align:center; padding-top:6px; }
.welcome-text{ color:var(--muted); font-size:14px; margin:0 0 22px; }

/* ============ Responsive ============ */
@media (min-width:720px){
  .channels-section{ max-width:960px; }
  .channel-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (min-width:980px){
  .channel-grid{ grid-template-columns:repeat(4, 1fr); }
  .bottom-nav{ display:none; }
  body{ padding-bottom:0; }
}