/* MYIPTVMAX custom admin — design tokens lifted from the 8kiptv-design-system.
   Linked by the admin layout so the mockup's var(--…) inline styles resolve. */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ---- Action accent ---- */
  --accent-hot:#FF2E63; --accent-bright:#FF5C86; --accent-press:#D81B54; --accent-tint:#2A0C18;
  /* ---- Neon brand ---- */
  --brand-blue:#29A8FF; --brand-purple:#7B5BFF; --brand-pink:#FF45C8; --brand-gold:#F6B100; --brand-silver:#D7DEEA;
  /* ---- Gradients ---- */
  --grad-brand:linear-gradient(90deg,#29A8FF 0%,#7B5BFF 50%,#FF45C8 100%);
  --grad-cta:linear-gradient(90deg,#FF5A36 0%,#FF2D78 100%);
  --grad-sub:linear-gradient(135deg,#7A28E0 0%,#B14DFF 100%);
  --grad-rail:linear-gradient(180deg,#1B2236 0%,#0E1320 55%,#090C15 100%);
  /* ---- Navy surface scale ---- */
  --black:#04060C; --ink-900:#0A0E18; --ink-850:#0E1320; --ink-800:#141A2A; --ink-750:#1A2133;
  --ink-700:#232C42; --ink-600:#2E3A57; --ink-500:#3C4A6E;
  /* ---- Foreground ---- */
  --fg-1:#FFFFFF; --fg-2:#C2C9D6; --fg-3:#828BA3; --fg-4:#565F78;
  /* ---- Lines & overlays ---- */
  --line-1:rgba(255,255,255,0.07); --line-2:rgba(255,255,255,0.12); --line-3:rgba(255,255,255,0.22);
  --scrim:rgba(4,6,12,0.65);
  /* ---- Status ---- */
  --success:#28D17C; --warning:#F6B100; --info:#29A8FF; --live:#FF2E63;
  /* ---- Semantic aliases ---- */
  --bg-canvas:#06090F; --bg-shell:var(--ink-900); --surface-panel:var(--ink-800);
  --surface-card:var(--ink-750); --surface-raised:var(--ink-700); --surface-chip:var(--ink-700);
  --text-strong:var(--fg-1); --text-body:var(--fg-2); --text-muted:var(--fg-3); --text-faint:var(--fg-4);
  --accent:var(--accent-hot); --on-accent:#FFFFFF;
  --border-soft:var(--line-1); --border:var(--line-2); --border-active:var(--line-3);
  --focus-ring:var(--brand-blue);
  /* ---- Effects ---- */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.5); --shadow-md:0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg:0 18px 48px rgba(0,0,0,0.65);
  --shadow-panel:0 24px 60px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.06);
  --glow-red:0 0 0 1px rgba(255,46,99,0.5),0 8px 26px rgba(255,46,99,0.35);
  --glow-red-sm:0 4px 14px rgba(255,46,99,0.42);
  --glow-brand:0 0 0 1px rgba(123,91,255,0.55),0 8px 30px rgba(123,91,255,0.4);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --hover-lift:rgba(255,255,255,0.06);
  /* ---- Type ---- */
  --font-display:"Sora",system-ui,sans-serif; --font-ui:"Manrope",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  /* ---- Spacing / radii ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px; --sidebar-w:256px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg-canvas);color:var(--text-body);font-family:var(--font-ui);}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.10);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.18);background-clip:padding-box}
::placeholder{color:var(--text-faint)}
input,textarea,select,button{font-family:var(--font-ui)}
table{border-collapse:collapse;width:100%}

/* Hover/focus helpers (inline styles can't express :hover) */
.navItem:hover{background:rgba(255,255,255,0.05)!important}
.iconBtn:hover{background:var(--surface-chip)!important}
.statCard{transition:transform .2s var(--ease-out),border-color .2s}
.statCard:hover{border-color:var(--border-active)!important;transform:translateY(-3px)}
.cardLift{transition:transform .2s var(--ease-out),border-color .2s}
.cardLift:hover{border-color:var(--border-active)!important;transform:translateY(-3px)}
.rowHover:hover{background:var(--hover-lift)}
.btnCta{cursor:pointer;border:none;border-radius:11px;background:var(--grad-cta);color:#fff;font-weight:700;font-size:14px;height:44px;padding:0 18px;display:inline-flex;align-items:center;gap:8px}
.btnCta:hover{filter:brightness(1.06)}
.btnPrimary{cursor:pointer;border:none;border-radius:11px;background:var(--grad-brand);color:#fff;font-weight:700;font-size:14px;height:44px;padding:0 20px}
.btnGhost{cursor:pointer;border-radius:11px;background:transparent;border:1px solid var(--border);color:var(--text-body);font-weight:600;font-size:14px;height:44px;padding:0 18px}
.btnGhost:hover{background:var(--hover-lift)}
.field{width:100%;height:46px;padding:0 14px;border-radius:11px;background:var(--surface-raised);border:1px solid var(--border);color:var(--text-strong);font-size:14px;outline:none}
.field:focus{border-color:var(--accent)}
.actEdit{width:34px;height:34px;border-radius:9px;border:none;background:rgba(123,91,255,0.9);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm)}
.actDel{width:34px;height:34px;border-radius:9px;border:none;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm)}
.pill{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;font-size:11.5px;font-weight:700}