/* ─────────────────────────────────────────────────────────────
   NIGHTFIELD — a fresh visual direction for the IPTV Master.
   Blue-slate near-black ground · electric lime accent ·
   Space Grotesk / Instrument Sans / IBM Plex Mono ·
   asymmetric-radius panels (replaces the copper notch) ·
   dot-lattice hero field · cool depth with a lime spotlight.
   Content, architecture and component contracts are untouched.
   ───────────────────────────────────────────────────────────── */

:root{
  /* ground — cool blue-slate near-black */
  --ink-950:#080a10;
  --ink-900:#0c0f16;
  --ink-850:#11151e;
  --ink-800:#161b26;
  --ink-750:#1c2231;
  --ink-700:#252c3c;
  --ink-600:#39425a;
  --ink-500:#59637a;
  --ink-400:#858ea3;
  --ink-300:#aab2c3;
  --ink-200:#ced4de;
  --ink-100:#e9ecf1;
  --ink-050:#f6f8fb;

  /* accent — electric lime (token names kept for contract compatibility) */
  --copper-100:#f3ffd8;
  --copper-200:#e5fdab;
  --copper-300:#d4fa7e;
  --copper-400:#c3f653;
  --copper-500:#aeea2e;
  --copper-600:#8dc51d;
  --copper-700:#5f8a14;
  --copper-800:#3a560e;
  --copper-900:#1f2f08;

  --signal-live:#ff4d5e;
  --signal-good:#4fd39a;
  --signal-warn:#f5c451;

  --surface-accent-soft:#111a0e;
  --surface-accent-quiet:#16220f;
  --text-on-accent:#080c05;
  --rule-grid:#1a2130;

  /* type */
  --font-display:"Space Grotesk","Arial Narrow",sans-serif;
  --font-sans:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --display-hero:clamp(40px,6.3vw,78px);
  --display-1:clamp(32px,4.1vw,52px);
  --display-2:clamp(26px,2.9vw,38px);
  --display-3:clamp(21px,2.1vw,27px);

  --leading-display:0.96;
  --leading-tight:1.04;
  --tracking-display:0;
  --tracking-label:0.16em;

  /* shape — asymmetric radius replaces the corner notch */
  --notch:22px;
  --notch-sm:12px;
  --notch-lg:30px;
  --radius-2:4px;
  --radius-card:22px;
  --radius-control:10px;
  --radius-media:14px;

  /* depth — cool shadow, lime spotlight */
  --elev-1:0 1px 2px rgba(3,5,10,.7);
  --elev-2:0 10px 30px -10px rgba(3,5,10,.8);
  --elev-3:0 28px 70px -28px rgba(3,5,10,.9);
  --glow-copper:0 0 0 1px var(--copper-800),0 18px 60px -28px rgba(174,234,46,.42);
  --glow-copper-soft:0 26px 90px -44px rgba(174,234,46,.38);
  --glow-live:0 0 0 1px rgba(255,77,94,.4),0 0 24px -6px rgba(255,77,94,.35);
  --ring-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--copper-500);
}

h1,h2,h3,h4{font-weight:700;letter-spacing:var(--tracking-display)}
::selection{background:var(--copper-500);color:var(--text-on-accent)}

/* panels: soften the inline notch clip into an asymmetric radius */
[style*="var(--notch)"]:not(.nv-custom-radius){clip-path:none!important;border-radius:var(--notch) 5px var(--notch) 5px!important}
[style*="var(--notch-sm)"]:not(.nv-custom-radius){clip-path:none!important;border-radius:var(--notch-sm) 4px var(--notch-sm) 4px!important}
[style*="var(--notch-lg)"]:not(.nv-custom-radius){clip-path:none!important;border-radius:var(--notch-lg) 6px var(--notch-lg) 6px!important}
.ixm-notch,.ixm-notch-frame{clip-path:none!important;border-radius:var(--notch) 5px var(--notch) 5px}
.ixm-notch-frame>*{clip-path:none!important;border-radius:calc(var(--notch) - 1px) 4px calc(var(--notch) - 1px) 4px}
.ixm-notch-sm{clip-path:none!important;border-radius:var(--notch-sm) 4px var(--notch-sm) 4px}
.ixm-notch-lg{clip-path:none!important;border-radius:var(--notch-lg) 6px var(--notch-lg) 6px}

/* spotlight: recolour the two hardcoded copper radial glows */
[style*="rgba(217, 118, 46"],[style*="rgba(217,118,46"]{background:radial-gradient(50% 50% at 50% 45%,rgba(174,234,46,.17),transparent 70%)!important}
/* sticky header + lightbox shade: match the blue-slate ground */
[style*="rgba(8, 9, 10, 0.82)"],[style*="rgba(8,9,10,.82)"]{background:rgba(8,10,16,.84)!important}
[style*="rgba(8, 9, 10, 0.92)"],[style*="rgba(8,9,10,.92)"]{background:rgba(8,10,16,.93)!important}

/* hero field: dot lattice instead of the broadcast rule grid */
.ixm-rulegrid{
  background-image:radial-gradient(var(--rule-grid) 1.3px,transparent 1.3px),radial-gradient(var(--rule-grid) 1.3px,transparent 1.3px);
  background-size:30px 30px,30px 30px;
  background-position:0 0,15px 15px;
}