/* ==========================================================================
   PRIME TV — css/base74128.css
   Shared tokens + reset + glass component library (imported by every page)
   ========================================================================== */

:root{
  /* ink scale (monochrome premium palette) */
  --bg:          #07080a;
  --bg-soft:     #0b0c0f;
  --surface:     #101114;
  --surface-2:   #16171b;

  --ink-0:       #f5f6f8;   /* headings / brightest text   */
  --ink-1:       #d6d8dd;   /* body text                   */
  --ink-2:       #9a9ea8;   /* secondary / muted text      */
  --ink-3:       #6d7078;   /* faint / disabled text       */

  --line-0:      rgba(255,255,255,0.12);
  --line-1:      rgba(255,255,255,0.07);
  --glass-fill:  rgba(255,255,255,0.055);
  --glass-fill-strong: rgba(255,255,255,0.10);

  --accent:      #e2685c;  /* live / attention accent only */
  --accent-soft: rgba(226,104,92,0.14);
  --ok:          #38d68a;

  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   26px;
  --shadow:      0 24px 70px -24px rgba(0,0,0,0.75);
  --ease:        cubic-bezier(.22,.9,.32,1);

  --f-display:   'Playfair Display', 'Times New Roman', serif;
  --f-body:      'Playfair Display', 'Times New Roman', serif;
  --f-mono:      'Playfair Display', 'Times New Roman', serif;
}

*, *::before, *::after{ box-sizing:border-box; min-width:0; }
html{ color-scheme:dark; scroll-behavior:smooth; }
html,body{ height:100%; }
html{ overflow-x:hidden; width:100%; }
body{
  margin:0;
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  background:
    radial-gradient(60% 50% at 50% -8%, rgba(255,255,255,0.05), transparent 60%),
    var(--bg);
  color:var(--ink-1);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
svg{ display:block; }
::selection{ background: var(--glass-fill-strong); color:#fff; }
:focus-visible{ outline:2px solid var(--ink-1); outline-offset:3px; border-radius:6px; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.14); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.22); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

h1,h2,h3{ font-family:var(--f-display); color:var(--ink-0); font-weight:700; letter-spacing:-.01em; }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:1180px; margin-left:auto; margin-right:auto; padding-inline:28px; box-sizing:border-box; }

/* --------------------------------------------------------------------------
   Glass primitives
   -------------------------------------------------------------------------- */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.02));
  border:1px solid var(--line-0);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06);
}
.glass-strong{
  background: rgba(16,17,20,0.66);
  border:1px solid var(--line-0);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
/* Fallback so panels never render invisible/black if backdrop-filter is unsupported */
@supports not (backdrop-filter: blur(1px)){
  .glass{ background: rgba(22,23,27,0.92); }
  .glass-strong{ background: rgba(18,19,23,0.95); }
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.topnav{
  position:sticky; top:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  background: rgba(7,8,10,0.6);
  border-bottom:1px solid var(--line-1);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
@supports not (backdrop-filter: blur(1px)){
  .topnav{ background: rgba(7,8,10,0.95); }
}
.brand{
  display:flex; align-items:center; gap:11px;
  font-family: var(--f-display); font-weight:700; font-size:20px; letter-spacing:.01em; color:var(--ink-0);
}
.brand-mark{
  width:36px; height:36px; border-radius:10px; flex-shrink:0; overflow:hidden;
  border:1px solid var(--line-0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 18px -8px rgba(0,0,0,.8);
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand small{ display:block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; color:var(--ink-3); font-weight:500; margin-top:2px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:14px; color:var(--ink-2); font-weight:500; transition:color .2s var(--ease); }
.nav-links a:hover{ color:var(--ink-0); }
.nav-actions{ display:flex; align-items:center; gap:12px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:999px;
  font-size:14.5px; font-weight:600; letter-spacing:.01em; font-family:var(--f-body);
  border:1px solid transparent; cursor:pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; }
.btn:active{ transform:scale(.97); }
.btn-primary{
  background: linear-gradient(180deg, #fdfdfd, #d9dbe0 65%, #b7bac2);
  color:#0a0b0d;
  box-shadow: 0 12px 30px -12px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-primary:hover{ box-shadow: 0 16px 38px -10px rgba(255,255,255,.45), inset 0 1px 0 rgba(255,255,255,.6); transform: translateY(-1px); }
.btn-ghost{ background: var(--glass-fill); color: var(--ink-0); border-color: var(--line-0); }
.btn-ghost:hover{ background: var(--glass-fill-strong); border-color: rgba(255,255,255,.2); }
.btn-block{ width:100%; }
.btn-lg{ padding:16px 30px; font-size:15.5px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* --------------------------------------------------------------------------
   Chips
   -------------------------------------------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line-0); background:var(--glass-fill); color:var(--ink-2);
}
.chip.ok{ color:var(--ok); border-color:rgba(56,214,138,.3); background:rgba(56,214,138,.1); }
.chip.live{ color:#ff9c92; border-color:rgba(226,104,92,.35); background:var(--accent-soft); }
.chip.live::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); animation:livepulse 1.8s infinite; }
@keyframes livepulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer{
  padding:72px 28px 44px; text-align:center;
  border-top:1px solid var(--line-1); margin-top:40px;
}
.footer-name{
  font-family: var(--f-display); font-weight:700; font-size:36px; letter-spacing:.01em;
  background: linear-gradient(180deg, #fff, #8b8e97);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.footer-rule{
  width:120px; height:1px; margin:22px auto;
  background: linear-gradient(90deg, transparent, var(--ink-2), transparent);
}
.footer-line{ font-size:14px; color:var(--ink-3); margin:8px 0; }
.footer-line:first-of-type{ margin-top:0; }

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
.spinner{
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  border:2.5px solid rgba(255,255,255,.16); border-top-color:var(--ink-0);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px);
  padding:13px 20px; border-radius:14px; font-size:13.5px; font-weight:500; color:var(--ink-0);
  opacity:0; pointer-events:none; z-index:300; transition:all .35s var(--ease);
  display:flex; align-items:center; gap:10px; max-width:90vw;
}
.toast.show{ transform:translate(-50%,0); opacity:1; }
.toast.err{ border-color:rgba(226,104,92,.4); }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }