/* Lupitivù panel — one design system.
   Layout: a centred window (max 1440px) = full-height sidebar + slim top bar + content.
   Spacing scale 4 / 8 / 12 / 16 / 24 px · radius 6px (4px for small controls) · Inter 13px. */
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0b101a;
  --frame: #0e1624;
  --surface: #121b2b;
  --surface-2: #17243a;
  --hover: #1b2a42;
  --line: #223049;
  --line-2: #2d3d58;
  --fg: #e8edf5;
  --muted: #9aa8bd;
  --faint: #66768f;
  --accent: #3b82f6;
  --accent-soft: rgba(59, 130, 246, .16);
  --accent-ink: #ffffff;
  --good: #10b981;
  --warn: #ff922b;
  --bad: #f43f5e;
  --violet: #8b5cf6;
  --dim: var(--muted);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --r: 10px;
  --r-sm: 6px;
  --f-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-num: "Inter", "Segoe UI", system-ui, sans-serif;
  --logo-tv: #ffffff;
  --border-hover: #3a4d6b;
  --accent-hover: #5b9bff;
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 12px 30px rgba(0,0,0,.45);
  --sh-lg: 0 24px 60px rgba(0,0,0,.6);
  --backdrop: rgba(4, 8, 15, .7);
  --good-soft: rgba(16, 185, 129, .14);
  --blue: #5c7cfa; --track: #34445c; --card-head: #17243a; --active-nav: #2563eb; --eyebrow: #8abaff;
  --hero: linear-gradient(135deg, #17243b 0%, #15213a 60%, #131d33 100%);
}
/* Light theme: chosen in the top bar, or automatic from the system setting. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f8; --frame: #ffffff; --surface: #ffffff; --surface-2: #f2f4f7; --hover: #eef1f5;
  --line: #e3e7ed; --line-2: #d3d9e1; --fg: #171b22; --muted: #5c6575; --faint: #8a93a2;
  --accent: #2470d8; --accent-soft: rgba(36, 112, 216, .10); --accent-hover: #1b5fbd;
  --good: #1f9d5c; --warn: #c27c12; --bad: #d23c34; --violet: #7a52d6;
  --logo-tv: #171b22; --border-hover: #b9c1cc;
  --sh-sm: 0 1px 2px rgba(16,24,40,.08); --sh-md: 0 10px 24px rgba(16,24,40,.12); --sh-lg: 0 20px 50px rgba(16,24,40,.18);
  --backdrop: rgba(20, 26, 36, .35); --good-soft: rgba(31, 157, 92, .12);
  --blue: #4c6ef5; --track: #e2e8f0; --card-head: #f5f8fc; --active-nav: #2563eb; --eyebrow: #2563eb;
  --hero: linear-gradient(135deg, #ffffff 0%, #f1f5fc 100%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --bg: #f3f5f8; --frame: #ffffff; --surface: #ffffff; --surface-2: #f2f4f7; --hover: #eef1f5;
    --line: #e3e7ed; --line-2: #d3d9e1; --fg: #171b22; --muted: #5c6575; --faint: #8a93a2;
    --accent: #2470d8; --accent-soft: rgba(36, 112, 216, .10); --accent-hover: #1b5fbd;
    --good: #1f9d5c; --warn: #c27c12; --bad: #d23c34; --violet: #7a52d6;
    --logo-tv: #171b22; --border-hover: #b9c1cc;
    --sh-sm: 0 1px 2px rgba(16,24,40,.08); --sh-md: 0 10px 24px rgba(16,24,40,.12); --sh-lg: 0 20px 50px rgba(16,24,40,.18);
    --backdrop: rgba(20, 26, 36, .35); --good-soft: rgba(31, 157, 92, .12);
  --blue: #4c6ef5; --track: #e2e8f0; --card-head: #f5f8fc; --active-nav: #2563eb; --eyebrow: #2563eb;
  --hero: linear-gradient(135deg, #ffffff 0%, #f1f5fc 100%);
  }
}
.logo .ltv { stroke: var(--logo-tv); } .logo .ltvf { fill: var(--logo-tv); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 13px/1.45 var(--f-ui); -webkit-font-smoothing: antialiased; }
#app { min-height: 100%; }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[hidden] { display: none !important; }
svg { flex: none; }
.num { font-variant-numeric: tabular-nums; }
.dim { color: var(--muted); }
.small { font-size: 11.5px; font-weight: 400; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }

/* ============ shell ============ */
.shell {
  width: 100%; min-height: 100vh;
  display: grid; grid-template-columns: 224px minmax(0, 1fr);
  background: var(--frame);
}
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  border-right: 1px solid var(--line); background: var(--frame);
}
.side-logo { display: flex; align-items: center; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.side-logo .logo { height: 22px; width: auto; color: var(--accent); }
.side-nav { flex: 1; overflow: auto; padding: 12px 10px; display: grid; align-content: start; gap: 14px; }
.side-label { padding: 0 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--faint); }
.side-group { display: grid; gap: 1px; }
.side a[data-page] {
  display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--r);
  color: var(--muted); font-weight: 500; position: relative;
}
.side a[data-page] svg { width: 16px; height: 16px; }
.side a[data-page]:hover { background: var(--hover); color: var(--fg); }
.side a[data-page][aria-current="page"] { background: var(--accent-soft); color: var(--fg); }
.side a[data-page][aria-current="page"] svg { color: var(--accent); }
.side a[data-page][aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.side .dotcount { position: static; margin-left: auto; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 600; flex: none; }
.uname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urole { font-size: 11.5px; color: var(--muted); }
.col { min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: 0; z-index: 20; height: 56px; display: flex; align-items: center; gap: 12px;
  padding: 0 24px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--frame) 92%, transparent); backdrop-filter: blur(8px);
}
.top .menu-btn { display: none; }
.top-counters { display: flex; gap: 6px; }
.top-counters .cnt { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.top-counters .cnt svg { width: 14px; height: 14px; }
.top-counters .cnt b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.main { padding: 24px; display: grid; gap: 16px; align-content: start; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-head h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.1px; flex: 1; }

/* ============ controls ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--fg);
  font-weight: 500; font-size: 12.5px; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s;
}
.btn svg { width: 14px; height: 14px; }
.btn:hover:not([disabled]) { background: var(--hover); border-color: var(--border-hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover:not([disabled]) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { color: var(--bad); }
.btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: default; }
.icon-btn { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; font-size: 12.5px; }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--hover); color: var(--fg); }
.input, select.input, textarea.input {
  width: 100%; height: 32px; padding: 0 10px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--bg); transition: border-color .12s, box-shadow .12s;
}
textarea.input { height: auto; padding: 8px 10px; resize: vertical; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search { max-width: 260px; }
.lang { display: inline-flex; padding: 2px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.lang button { border: 0; background: none; padding: 0 8px; height: 22px; border-radius: var(--r-sm); color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--surface-2); color: var(--fg); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; white-space: nowrap; cursor: pointer; color: var(--fg); }
.filters { display: inline-flex; flex-wrap: wrap; padding: 2px; gap: 2px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.filters button { border: 0; background: none; height: 26px; padding: 0 10px; border-radius: var(--r-sm); color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.filters button:hover { color: var(--fg); }
.filters button[aria-pressed="true"] { background: var(--surface-2); color: var(--fg); box-shadow: var(--sh-sm); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.switch { display: inline-flex; gap: 10px; align-items: center; cursor: pointer; }
.switch input { width: 32px; height: 18px; appearance: none; background: var(--line-2); border-radius: 999px; position: relative; cursor: pointer; transition: background .15s; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { left: 16px; }

/* ============ cards, lists, tables ============ */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.card > h2 { margin: 0; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--line); }
.card > h2 .count { font-size: 11px; font-weight: 500; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 8px; }
.card .body { padding: 12px 14px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list li.clickable { cursor: pointer; } .list li.clickable:hover { background: var(--hover); }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.empty.big { display: grid; place-items: center; align-content: center; gap: 8px; height: 100%; }
.empty.big svg { width: 28px; height: 28px; color: var(--faint); }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
th { position: sticky; top: 0; background: var(--surface); font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--faint); }
tbody tr:hover { background: var(--hover); }
tr:last-child td { border-bottom: 0; }
td.actions { text-align: right; }
td.actions .icon-btn { font-size: 12px; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; color: var(--muted); font-size: 12px; }

/* stat tiles (other pages) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { position: relative; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: grid; gap: 2px; }
.stat .k { font-size: 11.5px; color: var(--muted); }
.stat .v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); }
.stat::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c, var(--accent)); }

/* badges & small marks */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, currentColor 14%, transparent); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.active { color: var(--good); } .badge.expiring { color: var(--warn); }
.badge.expired, .badge.disabled { color: var(--bad); } .badge.trial { color: var(--violet); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); margin-right: 8px; vertical-align: 1px; }
.dot.on { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.amount.plus { color: var(--good); } .amount.minus { color: var(--bad); }
.secret { cursor: pointer; letter-spacing: 1px; }
.pill { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600; }
.pill.warn { background: var(--warn); color: #1a1100; }
.dotcount { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.tag { font-size: 10px; color: var(--violet); border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; margin-left: 6px; }

/* ============ forms & dialogs ============ */
.form { display: grid; gap: 12px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 5px; }
.field label { font-size: 12px; font-weight: 500; color: var(--muted); }
.field .hint, .hint { font-size: 11.5px; color: var(--faint); }
.row { display: flex; gap: 6px; align-items: center; } .row > .input { flex: 1; }
dialog { width: min(500px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--fg); box-shadow: var(--sh-lg); }
dialog::backdrop { background: var(--backdrop); }
dialog[open] { animation: pop .14s ease-out; }
@keyframes pop { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }
dialog header { padding: 14px 18px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
dialog .content { padding: 16px 18px; max-height: 70vh; overflow: auto; }
dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--frame); border-radius: 0 0 8px 8px; }
.creds { padding: 12px; border-radius: var(--r); background: var(--bg); border: 1px dashed var(--line-2); font-family: ui-monospace, Menlo, monospace; white-space: pre-wrap; }
.toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 100; }
.toast { padding: 10px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-2); border-left: 3px solid var(--good); box-shadow: var(--sh-md); max-width: 340px; animation: pop .15s ease-out; }
.toast.err { border-left-color: var(--bad); }

/* shortcuts menu */
.sc { position: relative; }
.sc-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 200px; display: grid; padding: 4px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--sh-md); }
.sc-menu button { text-align: left; height: 30px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer; font-size: 12.5px; }
.sc-menu button:hover, .sc-menu button:focus-visible { background: var(--hover); }

/* ============ login ============ */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login form { width: min(360px, 100%); display: grid; gap: 14px; padding: 28px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-lg); }
.login .logo { height: 34px; width: auto; color: var(--accent); justify-self: center; margin-bottom: 4px; }
.login .err { color: var(--bad); min-height: 18px; font-size: 12px; }
.login .lang { justify-self: center; }

/* ============ dashboard ============ */
.drow4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.drow3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dcard { display: flex; flex-direction: column; height: 280px; }
.dcard.wide { height: auto; }
.dbody { flex: 1; min-height: 0; overflow: auto; }
.dtabs { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); }
.dtabs button { border: 0; background: none; padding: 6px 10px 8px; color: var(--muted); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; }
.dtabs button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.notice { align-items: flex-start !important; }
.nicon { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--good-soft); color: var(--good); }
.nicon svg { width: 14px; height: 14px; }
.ntitle { font-weight: 600; font-size: 12.5px; }
.nbody { margin-top: 2px; color: var(--muted); font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; padding: 14px; }
.ftile { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.ftile .flag { width: 100%; height: 100%; object-fit: cover; display: block; }
.flag-x { display: grid !important; place-items: center; width: 100%; height: 100%; background: var(--surface-2); color: var(--faint); }
.flag-x svg { width: 40%; height: 40%; }
.fcount { position: absolute; right: 4px; bottom: 4px; min-width: 20px; height: 18px; padding: 0 5px; border-radius: var(--r-sm); background: rgba(0,0,0,.75); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.rank { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.rank.r1 { background: #f2c94c; color: #241a00; } .rank.r2 { background: #c7cfda; color: #1a1f27; } .rank.r3 { background: #d4935b; color: #241002; }
.linkish { display: block; color: var(--fg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linkish:hover { color: var(--accent); }
.exp-when { text-align: right; font-size: 11.5px; white-space: nowrap; }
.exp-when .bad { color: var(--bad); } .exp-when .warn { color: var(--warn); }
.cart-btn { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--accent); cursor: pointer; }
.cart-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.cart-btn svg { width: 14px; height: 14px; }
.mw { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; padding: 14px; }
.mwc { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r); background: var(--surface-2); }
.mwflag { width: 44px; flex: none; aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; }
.mwflag .flag { width: 100%; height: 100%; object-fit: cover; }
.mwlist { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: grid; gap: 3px; font-size: 12px; }
.mwlist li { display: flex; gap: 8px; justify-content: space-between; }
.mwlist li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwlist b { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.scard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; border-top: 3px solid var(--sc); }
.s-orange { --sc: var(--warn); } .s-green { --sc: var(--good); } .s-violet { --sc: var(--violet); }
.scard > h2 { margin: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--line); }
.scard > h2 b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--sc); }
.sbody { display: flex; gap: 14px; padding: 14px; align-items: center; }
.sicon { width: 44px; height: 44px; flex: none; border-radius: var(--r); display: grid; place-items: center; color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, transparent); }
.sicon svg { width: 22px; height: 22px; }
.meters { flex: 1; display: grid; gap: 10px; }
.meter-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.meter-top b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.bar { height: 4px; margin-top: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; transition: width .5s ease-out; }
.thread { display: grid; gap: 8px; max-height: 45vh; overflow: auto; }
.msg { max-width: 85%; padding: 8px 12px; border-radius: var(--r); background: var(--surface-2); }
.msg.mine { justify-self: end; background: var(--accent-soft); }
.mbody { white-space: pre-wrap; word-break: break-word; }

/* ============ playlist editor ============ */
.pl { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.pl .card { display: flex; flex-direction: column; height: calc(100vh - 210px); min-height: 360px; }
.pl .card > h2 { flex: none; }
.pl .card .body { flex: none; padding: 10px 12px; }
.pl .list { flex: 1; overflow: auto; }
.pl .search { max-width: none; width: 100%; }
.pl-row { gap: 8px !important; padding: 0 10px !important; height: 34px; cursor: default; }
.pl-row:hover { background: var(--hover); }
.pl-cats .pl-row { cursor: pointer; }
.pl-row.sel { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.pl-row.off .pl-name .t { color: var(--faint); text-decoration: line-through; }
.pl-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.pl-row.drop-into { background: var(--accent-soft); outline: 1px dashed var(--accent); outline-offset: -2px; }
.pl-row .grip { color: var(--faint); cursor: grab; user-select: none; font-size: 12px; }
.pl-row input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; flex: none; }
.pl-logo { width: 36px; height: 22px; flex: none; display: grid; place-items: center; }
.pl-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pl-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.pl-name .t { overflow: hidden; text-overflow: ellipsis; }
.pl-name .sub { color: var(--faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.pl-row .count-r { margin-left: auto; color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pl-row .icon-btn { opacity: 0; }
.pl-row:hover .icon-btn, .pl-row:focus-within .icon-btn, .pl-row .icon-btn.on { opacity: 1; }
.pl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r); background: var(--accent-soft); font-size: 12px; }
.pl-drop { min-height: 80px; }
.drag-ghost { position: fixed; top: -100px; left: -100px; padding: 6px 12px; border-radius: var(--r); background: var(--accent); color: #fff; font-weight: 600; }

/* ============ small screens ============ */
@media (max-width: 1200px) { .drow4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .top-counters .cnt-l { display: none; } }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; border: 0; }
  .side { position: fixed; z-index: 30; left: 0; top: 0; width: 240px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sh-lg); }
  .side.open { transform: none; }
  .top .menu-btn { display: inline-grid; }
  .top { padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
  .main { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
  .drow3, .pl { grid-template-columns: 1fr; }
  .form .two { grid-template-columns: 1fr; }
  .pl .card { height: 60vh; }
}
@media (max-width: 600px) { .drow4 { grid-template-columns: 1fr; } .top-counters { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* row "⋯" menus */
td.actions > span { display: inline-flex; align-items: center; gap: 4px; }
.icon-btn.more { font-size: 16px; letter-spacing: 1px; }
.row-menu { min-width: 170px; text-align: left; }
.row-menu .menu-item { display: flex; align-items: center; width: 100%; height: 30px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--fg); cursor: pointer; font-size: 12.5px; text-decoration: none; }
.row-menu .menu-item:hover { background: var(--hover); }

.theme-switch button svg { width: 13px; height: 13px; }
.theme-switch button { display: inline-grid; place-items: center; width: 28px; }

/* live connections */
.live { display: grid; gap: 12px; }
.cap-line { display: flex; flex-wrap: wrap; gap: 6px; } .cap-line:empty { display: none; }
.cap-line b.bad { color: var(--bad); }
.live-table td, .live-table th { padding: 8px 10px; }
.live-table th.cb, .live-table td.cb { width: 34px; padding-right: 0; }
.live-table input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--accent); }
.live-table .r { text-align: right; }
.live-table .cc { text-align: center; }
.live-table .stream { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.live-table .player { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.uname-link { color: var(--good); font-weight: 500; }
.ip { color: var(--accent); }
.mini-flag { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; vertical-align: middle; box-shadow: 0 0 0 1px var(--line); }
.kind { display: inline-grid; place-items: center; height: 17px; padding: 0 5px; margin-left: 4px; border-radius: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: .3px; }
.k-live { background: var(--accent-soft); color: var(--accent); } .k-movie { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.k-episode { background: color-mix(in srgb, var(--violet) 16%, transparent); color: var(--violet); } .k-mv { background: var(--surface-2); color: var(--muted); }
.act-btn { color: var(--accent); background: var(--accent-soft); }
.row-menu .menu-item { gap: 8px; } .row-menu .menu-item svg { width: 14px; height: 14px; } .row-menu .menu-item.danger { color: var(--bad); }
.live-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; }
.live-foot b { color: var(--accent); }

.popup { position: fixed; right: auto; top: 0; z-index: 200; }

/* connection check */
.spd.ok { color: var(--good); } .spd.warn { color: var(--warn); } .spd.bad { color: var(--bad); }
.ck-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .ck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ck-tile { padding: 10px 12px; border-radius: var(--r); background: var(--surface-2); border-top: 3px solid var(--line-2); display: grid; gap: 2px; }
.ck-tile .k { font-size: 11.5px; color: var(--muted); } .ck-tile .v { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-tile.ok { border-top-color: var(--good); } .ck-tile.warn { border-top-color: var(--warn); } .ck-tile.bad { border-top-color: var(--bad); }
.ck-tile.ok .v { color: var(--good); } .ck-tile.warn .v { color: var(--warn); } .ck-tile.bad .v { color: var(--bad); }
.ck-verdict { padding: 9px 12px; border-radius: var(--r); font-weight: 500; }
.ck-verdict.ok { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.ck-verdict.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.ck-verdict.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
details summary { cursor: pointer; color: var(--muted); font-weight: 500; padding: 4px 0; }
.ck-pre { margin: 6px 0 0; padding: 10px 12px; max-height: 240px; overflow: auto; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); font: 11.5px/1.5 ui-monospace, Menlo, monospace; white-space: pre; }
.spinner-line { height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: sweep 1.1s linear infinite; }
@keyframes sweep { from { background-position: -50% 0; } to { background-position: 150% 0; } }

.pl-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11.5px; font-weight: 500; white-space: nowrap; }

/* playlist page always keeps a gap under the two columns */
.pl { margin-bottom: 8px; }

/* ================= cms3 look ================= */
.shell, .side, .top { background: var(--frame); }
.side { border-right-color: var(--line); }
.side-logo, .top { height: 64px; }
.side-nav { padding: 16px 12px; }
.side a[data-page] { height: 38px; padding: 0 12px; border-radius: 6px; color: color-mix(in srgb, var(--fg) 88%, transparent); font-size: 13.5px; }
.side a[data-page] svg { width: 18px; height: 18px; }
.side a[data-page][aria-current="page"] { background: var(--active-nav); color: #fff; }
.side a[data-page][aria-current="page"] svg { color: #fff; }
.side a[data-page][aria-current="page"]::before { display: none; }
.top { background: var(--frame); backdrop-filter: none; }
.top-counters { gap: 18px; }
.top-counters .cnt { background: none; border: 0; padding: 0; height: auto; color: var(--fg); font-size: 13px; }
.top-counters .cnt svg { width: 20px; height: 20px; }
.top-counters .cnt .cnt-l { display: none; }
.top-counters .cnt b { font-weight: 700; }
.main { padding: 22px 26px 32px; gap: 22px; background: var(--bg); }
.col { background: var(--bg); }

/* page header card */
.page-head { position: relative; overflow: hidden; align-items: flex-end; gap: 16px; padding: 20px 26px 22px 30px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--hero); }
.page-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), var(--violet)); }
.ph-text { flex: 1; min-width: 0; }
.ph-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 8px; }
.ph-title { display: flex; align-items: center; gap: 14px; }
.ph-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--eyebrow); }
.ph-icon svg { width: 20px; height: 20px; }
.page-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -.3px; flex: none; }
.ph-sub { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* cards: header band with an icon box */
.card, .scard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; border-top: 1px solid var(--line); }
.card > h2, .scard > h2 { height: 52px; padding: 0 16px; gap: 10px; font-size: 14px; font-weight: 600; background: var(--card-head); border-bottom: 1px solid var(--line); }
.hicon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); }
.hicon svg { width: 15px; height: 15px; }
.card > h2 .icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); }
.table-wrap { border-radius: var(--r); }
th { background: var(--card-head); }

/* summary cards */
.drow3 { gap: 18px; }
.sbody { display: grid; gap: 16px; padding: 14px 16px 22px; align-items: stretch; }
.stop { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.sbig { font-size: 34px; font-weight: 700; letter-spacing: -.5px; color: var(--fg); }
.sicon { width: 44px; height: 44px; border-radius: 8px; color: var(--sc); background: color-mix(in srgb, var(--sc) 18%, var(--surface)); }
.sicon svg { width: 22px; height: 22px; }
.s-orange { --sc: #e7e2d6; } .s-orange .sicon { background: color-mix(in srgb, var(--fg) 16%, transparent); color: var(--fg); }
.s-green { --sc: var(--good); } .s-violet { --sc: var(--fg); } .s-violet .sicon { background: color-mix(in srgb, var(--fg) 16%, transparent); }
.meters { gap: 14px; }
.meter-top { color: var(--muted); font-size: 12.5px; }
.meter-top b { color: var(--muted); font-weight: 500; }
.bar { height: 3px; margin-top: 7px; background: var(--track); }

/* dashboard boxes */
.drow4 { gap: 18px; }
.dcard { height: 300px; }
.dtabs { padding: 0; gap: 0; }
.dtabs button { flex: 1; justify-content: center; padding: 12px 10px; }
.dtabs .pill { border-radius: 6px; min-width: 22px; }
.list.subs { padding: 8px 10px; display: grid; gap: 10px; }
.list.subs li { border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); box-shadow: 0 3px 0 color-mix(in srgb, var(--line-2) 70%, transparent); padding: 10px 12px; }
.list.subs li:last-child { border-bottom: 1px solid var(--line-2); }
.linkish { color: var(--accent); font-weight: 500; }
.cart-btn { width: 34px; height: 34px; border-radius: 8px; border: 0; background: var(--accent); color: #fff; }
.cart-btn svg { width: 17px; height: 17px; }
.cart-btn:hover { background: var(--accent-hover); }
.pill.warn { background: var(--warn); color: #fff; border-radius: 6px; min-width: 24px; height: 22px; }
.nicon { width: 30px; height: 30px; background: color-mix(in srgb, var(--good) 22%, transparent); }
.flags { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; padding: 12px; }
.ftile { aspect-ratio: 5 / 3; border-radius: 4px; border: 0; }
.fcount { right: 50%; transform: translateX(50%); bottom: 50%; translate: 0 50%; border-radius: 999px; min-width: 18px; height: 18px; font-size: 10px; }
.mw { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; padding: 12px; }
.mwc { align-items: center; gap: 18px; padding: 12px 20px; min-height: 92px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.mwflag { width: 66px; border-radius: 2px; }
.mwlist { font-size: 12.5px; }
.mwlist b { color: var(--accent); }

/* buttons & inputs on the navy theme */
.btn { border-radius: 6px; }
.btn.primary { background: var(--active-nav); border-color: var(--active-nav); }
.input, select.input, textarea.input { background: var(--frame); border-radius: 6px; }
dialog { border-radius: 12px; }
dialog header { background: var(--card-head); border-radius: 12px 12px 0 0; }
.mw { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mwc { justify-content: center; }
.mwlist { flex: none; max-width: 60%; }
.mwlist li { justify-content: flex-start; gap: 14px; }
.mwlist li span { max-width: 130px; }
@media (max-width: 1400px) { .mw { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .mw { grid-template-columns: 1fr; } .page-head { padding: 16px 18px 18px 22px; } .page-head h1 { font-size: 21px; } }
/* compact expiring / notice rows */
.list.subs { padding: 6px 8px; gap: 6px; }
.list.subs li { padding: 6px 10px; gap: 8px; border-radius: 6px; box-shadow: 0 2px 0 color-mix(in srgb, var(--line-2) 60%, transparent); font-size: 12px; line-height: 1.3; }
.list.subs .linkish { font-size: 12px; }
.list.subs .dim { font-size: 11px; }
.list.subs .exp-when { font-size: 11px; }
.list.subs .cart-btn { width: 26px; height: 26px; border-radius: 6px; }
.list.subs .cart-btn svg { width: 14px; height: 14px; }
.srv-list { display: grid; gap: 6px; padding-left: 4px; }

/* ================= bouquets, packages, add line ================= */
.btn.success { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn.success:hover:not([disabled]) { background: #15803d; border-color: #15803d; }
.form-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: 0 -8px 24px color-mix(in srgb, var(--bg) 70%, transparent); }
.form-bar .row { gap: 8px; }
.al-card { overflow: visible; }
.al-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 16px; }
.al-notes { display: flex; flex-direction: column; } .al-notes textarea { flex: 1; resize: vertical; }
.al-info { padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--frame); font-size: 12.5px; }
.al-summary { font-size: 12.5px; color: var(--muted); min-height: 18px; } .al-summary b { color: var(--fg); }
.combo { position: relative; }
.combo-in { padding-right: 28px; cursor: pointer; }
.combo-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 11px; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; max-height: 300px; overflow: auto; padding: 4px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); box-shadow: var(--sh-md); }
.combo-opt { padding: 7px 10px; border-radius: 5px; cursor: pointer; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-opt.hi { background: var(--hover); } .combo-opt.sel { color: var(--accent); font-weight: 600; }
.combo-opt.combo-change { color: var(--warn); }
.combo-empty { padding: 10px; color: var(--muted); font-size: 12.5px; }
.bq-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bq-col { display: flex; flex-direction: column; height: calc(100vh - 420px); min-height: 340px; }
.bq-col > h2 .bq-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent); }
.bq-tools { display: flex; gap: 6px; align-items: center; padding: 10px 12px; flex: none; } .bq-tools .input { flex: 1; }
.bq-list { flex: 1; overflow: auto; padding: 4px 6px 8px; }
.bq-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 5px; cursor: pointer; font-size: 12.5px; }
.bq-row:hover { background: var(--hover); } .bq-row.on { background: var(--accent-soft); }
.bq-row input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.bq-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .bq-cols, .al-grid { grid-template-columns: 1fr; } .bq-col { height: 420px; } }
@media (max-width: 600px) { .form-bar { flex-wrap: wrap; } }