/* ZED design system (2026-11-14) — the Owner-approved BLUE reference (navy sidebar, electric-blue accents, white
 * rounded cards, light blue-white canvas). One shared layer for every Owner/Team page and the Subscriber portal.
 * Scoped: every rule starts with html.zed (set ONLY on *.tvzed.uk by zed-brand.js), so SHAKO hostnames are unchanged.
 * Presentation only: same nodes, handlers, permission gates. Built from zed.src.css («Z » = html.zed:not(#z)). */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────────────────────── */
html.zed:not(#z), html.zed:not(#z) body {
  --zed-navy-900:#020a24; --zed-navy-800:#05133a; --zed-navy-700:#0a1f55; --zed-navy-600:#13306f;
  --zed-blue:#1f6bff; --zed-blue-600:#0c55e6; --zed-blue-700:#0a46c2; --zed-blue-50:#eef4ff; --zed-blue-100:#dce8ff;
  --zed-cyan:#4cc3ff; --zed-cyan-soft:#7fd4ff;
  --zed-ink:#0b1a3e; --zed-text:#14254d; --zed-muted:#5f6f8f; --zed-faint:#8a98b4;
  --zed-canvas:#f2f6fd; --zed-card:#ffffff; --zed-line:#e1e9f6; --zed-line-strong:#cbd9ef; --zed-row:#f6f9ff;
  --zed-green:#12a058; --zed-green-50:#e6f7ee; --zed-red:#e5374b; --zed-red-50:#fdecee; --zed-amber:#c77a00; --zed-amber-50:#fff4dc;
  --zed-violet:#7b4dff; --zed-violet-50:#f1ebff;
  --zed-r-sm:9px; --zed-r:12px; --zed-r-lg:16px; --zed-r-xl:20px;
  --zed-shadow:0 1px 2px rgba(10,35,90,.04), 0 8px 24px rgba(16,56,140,.06);
  --zed-shadow-lift:0 2px 6px rgba(10,35,90,.06), 0 16px 40px rgba(16,56,140,.10);
  --zed-glow:0 6px 20px rgba(31,107,255,.38);
  --zed-font:"Segoe UI","Noto Sans Arabic","Noto Sans",Tahoma,Arial,sans-serif;
  /* map onto the existing tokens so every legacy component turns blue */
  --ink:var(--zed-ink); --text:var(--zed-text); --muted:var(--zed-muted); --faint:var(--zed-faint);
  --line:var(--zed-line); --line-strong:var(--zed-line-strong); --border:var(--zed-line);
  --bg:var(--zed-canvas); --panel:#fff; --soft:var(--zed-row);
  --brand:var(--zed-blue); --brand-600:var(--zed-blue-600); --brand-50:var(--zed-blue-50); --brand-100:var(--zed-blue-100);
  --blue:var(--zed-blue); --purple:var(--zed-blue); --green:var(--zed-green); --red:var(--zed-red); --warning:#d48a00; --orange:#f08a24;
  --side-1:var(--zed-navy-800); --side-2:var(--zed-navy-900); --side-text:#e9f0ff; --side-muted:var(--zed-cyan);
  --radius:var(--zed-r-lg); --r-control:var(--zed-r-sm); --shadow:var(--zed-shadow); --shadow-lift:var(--zed-shadow-lift);
}
html.zed:not(#z) body { background:radial-gradient(1200px 500px at 85% -10%, #e4eeff 0%, rgba(228,238,255,0) 60%), var(--zed-canvas) !important;
  color:var(--zed-text); font-family:var(--zed-font); }
html.zed:not(#z) ::selection { background:#cfe0ff; }
html.zed:not(#z) :focus-visible { outline:3px solid rgba(31,107,255,.35); outline-offset:2px; }

/* ── 2. Sidebar ────────────────────────────────────────────────────────────────────────────── */
html.zed:not(#z) .sidebar { background:
    radial-gradient(420px 260px at 0% 0%, rgba(31,107,255,.30), rgba(31,107,255,0) 70%),
    radial-gradient(300px 220px at 100% 105%, rgba(76,195,255,.16), rgba(76,195,255,0) 70%),
    linear-gradient(180deg, #071a4a 0%, var(--zed-navy-800) 45%, var(--zed-navy-900) 100%) !important;
  border:0 !important; color:var(--side-text); box-shadow:inset -1px 0 rgba(120,170,255,.12); }
html.zed:not(#z) .sidebar::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:linear-gradient(115deg, rgba(76,195,255,0) 0 38%, rgba(76,195,255,.22) 38.2% 38.5%, rgba(76,195,255,0) 38.7% 100%),
             linear-gradient(115deg, rgba(31,107,255,0) 0 52%, rgba(31,107,255,.18) 52.2% 52.4%, rgba(31,107,255,0) 52.6% 100%); }
html.zed:not(#z) .sidebar > * { position:relative; }
html.zed:not(#z) .sidebar .brand { border-bottom:1px solid rgba(120,170,255,.16) !important; padding:2px 8px 18px !important; margin-bottom:12px !important; gap:12px; }
html.zed:not(#z) .sidebar .brand .logo-play, html.zed:not(#z) .login-brand .logo-play, html.zed:not(#z) .customer-brand .logo-play {
  width:46px; height:46px; border-radius:12px; font-size:0; color:transparent; background:url("zed-logo.svg") center/40px no-repeat, transparent !important;
  box-shadow:none !important; filter:drop-shadow(0 0 10px rgba(47,139,255,.65)); }
html.zed:not(#z) .sidebar .brand strong { color:#fff; font-size:25px; font-weight:900; letter-spacing:.06em; font-style:italic; }
html.zed:not(#z) .sidebar .brand strong em { display:none; }
html.zed:not(#z) .sidebar .brand small { color:#b9cdf5 !important; font-size:11px !important; letter-spacing:0 !important; white-space:nowrap; }
html.zed:not(#z) .nav-group-title { color:var(--zed-cyan) !important; font-size:11.5px !important; font-weight:700 !important; margin:12px 12px 4px !important; }
html.zed:not(#z) .nav-button { color:#eef3ff !important; border-radius:11px !important; font-weight:600 !important; min-height:36px; position:relative; }
html.zed:not(#z) .nav-button .ui-icon { color:#cfe0ff !important; }
html.zed:not(#z) .nav-button:hover { background:rgba(120,170,255,.12) !important; color:#fff !important; }
html.zed:not(#z) .nav-button.active { background:linear-gradient(90deg, #2a78ff 0%, #145be8 100%) !important; color:#fff !important;
  box-shadow:0 0 0 1px rgba(150,200,255,.35) inset, var(--zed-glow) !important; }
html.zed:not(#z) .nav-button.active .ui-icon { color:#fff !important; }
html.zed:not(#z) .nav-button.active::after { background:#fff !important; box-shadow:0 0 8px rgba(255,255,255,.9); }
html.zed:not(#z) .sidebar .support-card { background:rgba(31,107,255,.10) !important; border:1px solid rgba(120,170,255,.35) !important; border-radius:14px !important; color:#fff; }
html.zed:not(#z) .sidebar .support-card strong { color:#fff; } html.zed:not(#z) .sidebar .support-card small { color:#b9cdf5 !important; }
html.zed:not(#z) .sidebar .support-card > span, html.zed:not(#z) .sidebar .support-card .ui-icon { color:var(--zed-cyan) !important; }
html.zed:not(#z) .sidebar .account-card { border-top:1px solid rgba(120,170,255,.16) !important; color:#fff; }
html.zed:not(#z) .sidebar .account-card strong { color:#fff; }
html.zed:not(#z) .sidebar .account-card .badge { background:rgba(31,107,255,.22) !important; color:#dce8ff !important; border:1px solid rgba(120,170,255,.35); }
html.zed:not(#z) .sidebar #logout-button { background:transparent !important; border:1px solid rgba(150,200,255,.45) !important; color:#fff !important; border-radius:12px !important; min-height:40px; }
html.zed:not(#z) .sidebar #logout-button:hover { background:rgba(31,107,255,.18) !important; }

/* ── 3. Top header ─────────────────────────────────────────────────────────────────────────── */
html.zed:not(#z) .topbar { background:rgba(255,255,255,.96) !important; border-bottom:1px solid var(--zed-line) !important; backdrop-filter:saturate(1.4) blur(6px); }
html.zed:not(#z) .topbar .search-box { background:var(--zed-blue-50) !important; border:1px solid #d6e4ff !important; border-radius:14px !important; position:relative; }
html.zed:not(#z) .topbar .search-box > span, html.zed:not(#z) .topbar .search-box .ui-icon { color:var(--zed-blue) !important; font-weight:800; }
html.zed:not(#z) .topbar .search-box input { color:var(--zed-ink); }
html.zed:not(#z) .topbar .search-box input::placeholder { color:#6d7fa3; }
html.zed:not(#z) .zed-kbd { font:700 11px/1 var(--zed-font); color:#3c4f78; border:1px solid #c9d8f5; background:#fff; border-radius:7px; padding:5px 7px; white-space:nowrap; }
html.zed:not(#z) .topbar .balance-chip { background:var(--zed-blue-50) !important; border:1px solid #d6e4ff !important; border-radius:12px !important; color:var(--zed-blue-700); }
html.zed:not(#z) .topbar .balance-chip span { color:var(--zed-blue-700) !important; font-weight:700; }
html.zed:not(#z) .topbar .balance-chip strong { color:var(--zed-blue) !important; }
html.zed:not(#z) .topbar .notification-button { display:none !important; } /* no notification feed exists (the old icon was a placeholder) */
html.zed:not(#z) .topbar .profile-button strong { color:var(--zed-ink); }
html.zed:not(#z) .topbar .profile-button small { color:var(--zed-muted); }
html.zed:not(#z) .topbar .avatar { background:linear-gradient(145deg, #1f6bff, #0a46c2) !important; color:#fff !important; box-shadow:0 0 0 3px #e3edff; }
html.zed:not(#z) .topbar .language-switcher, html.zed:not(#z) .language-switcher { border:1px solid var(--zed-line-strong) !important; border-radius:12px !important; color:var(--zed-ink) !important; background:#fff !important; font-weight:700; }

/* ── 4. Page header ────────────────────────────────────────────────────────────────────────── */
html.zed:not(#z) .page-heading .eyebrow, html.zed:not(#z) #welcome-line { color:var(--zed-blue) !important; font-weight:800; font-size:14.5px; }
html.zed:not(#z) .page-heading h1, html.zed:not(#z) #page-title { color:var(--zed-ink) !important; font-weight:850; letter-spacing:-.01em; font-size:clamp(25px,2.4vw,34px) !important; }
html.zed:not(#z) .page-heading p.muted { color:#4a5b7e !important; }
html.zed:not(#z) #refresh-button { background:#fff !important; color:var(--zed-blue) !important; border:1.5px solid #9fc0ff !important; border-radius:12px !important; font-weight:800; min-height:42px; box-shadow:0 4px 14px rgba(31,107,255,.12); }
html.zed:not(#z) #refresh-button:hover { background:var(--zed-blue-50) !important; }

/* ── 5. Cards / panels / metrics ───────────────────────────────────────────────────────────── */
html.zed:not(#z) .panel, html.zed:not(#z) .metric, html.zed:not(#z) .ds-hero, html.zed:not(#z) .staff-home-card, html.zed:not(#z) .creation-panel, html.zed:not(#z) .ot .panel, html.zed:not(#z) .le-toolbar, html.zed:not(#z) .lp-active {
  background:var(--zed-card) !important; border:1px solid var(--zed-line) !important; border-radius:var(--zed-r-lg) !important; box-shadow:var(--zed-shadow) !important; }
html.zed:not(#z) .panel-header h2, html.zed:not(#z) .panel h2, html.zed:not(#z) .panel h3 { color:var(--zed-ink); font-weight:800; }
html.zed:not(#z) .metric { border-top:1px solid var(--zed-line) !important; }
html.zed:not(#z) .metric i, html.zed:not(#z) .metric .ui-icon { background:var(--zed-blue-50) !important; color:var(--zed-blue) !important; border-radius:14px !important; }
html.zed:not(#z) .metric strong { color:var(--zed-ink); font-weight:850; }
html.zed:not(#z) .metric span { color:#4a5b7e; font-weight:600; }
html.zed:not(#z) .notice { background:#f3f8ff !important; border:1px solid #cfe0ff !important; color:#183b80 !important; border-radius:var(--zed-r) !important; }

/* ── 6. Buttons ────────────────────────────────────────────────────────────────────────────── */
html.zed:not(#z) .button { border-radius:10px !important; font-weight:750; transition:background .15s, box-shadow .15s, transform .05s; }
html.zed:not(#z) .button:active { transform:translateY(1px); }
html.zed:not(#z) .button.primary, html.zed:not(#z) button.primary { background:linear-gradient(135deg, #2f7dff 0%, #0c55e6 100%) !important; color:#fff !important; border:0 !important; box-shadow:var(--zed-glow) !important; }
html.zed:not(#z) .button.primary:hover { background:linear-gradient(135deg, #3d88ff, #0a4ad0) !important; }
html.zed:not(#z) .button.secondary { background:#fff !important; color:var(--zed-ink) !important; border:1px solid var(--zed-line-strong) !important; box-shadow:none !important; }
html.zed:not(#z) .button.secondary:hover { border-color:#9fc0ff !important; color:var(--zed-blue-700) !important; background:#f8fbff !important; }
html.zed:not(#z) .button.ghost { background:var(--zed-blue-50) !important; color:var(--zed-blue-700) !important; border:1px solid #d6e4ff !important; }
html.zed:not(#z) .button.danger { background:var(--zed-red) !important; color:#fff !important; border:0 !important; }
html.zed:not(#z) .button.danger-outline, html.zed:not(#z) .button.secondary.danger-outline { color:var(--zed-red) !important; border-color:#f5b9c1 !important; background:#fff !important; }
html.zed:not(#z) .text-button, html.zed:not(#z) .le-link { color:var(--zed-blue) !important; }
html.zed:not(#z) .creation-panel > .panel-header .button.secondary, html.zed:not(#z) .creation-panel > .panel-header > .button, html.zed:not(#z) .creation-panel [data-editor-title] {
  background:linear-gradient(135deg, #2f7dff 0%, #0c55e6 100%) !important; color:#fff !important; border:0 !important; box-shadow:var(--zed-glow) !important; min-height:44px; padding-inline:20px !important; }

/* ── 7. Forms ──────────────────────────────────────────────────────────────────────────────── */
html.zed:not(#z) input:not([type=checkbox]):not([type=radio]):not([type=range]), html.zed:not(#z) select, html.zed:not(#z) textarea {
  border:1px solid #d3dff2 !important; border-radius:10px !important; background:#fff; color:var(--zed-ink); }
html.zed:not(#z) input:focus, html.zed:not(#z) select:focus, html.zed:not(#z) textarea:focus { border-color:var(--zed-blue) !important; box-shadow:0 0 0 3px rgba(31,107,255,.14) !important; }
html.zed:not(#z) label { color:#2c3d63; }
html.zed:not(#z) input[type=checkbox], html.zed:not(#z) input[type=radio] { accent-color:var(--zed-blue); }
html.zed:not(#z) .list-controls label, html.zed:not(#z) .filter-bar label { color:var(--zed-ink); font-weight:700; }

/* ── 8. Tables ─────────────────────────────────────────────────────────────────────────────── */
html.zed:not(#z) .table-wrap { border:1px solid var(--zed-line); border-radius:var(--zed-r); background:#fff; }
html.zed:not(#z) table th { background:#f3f7ff !important; color:#3e5079 !important; font-weight:750; font-size:12px; border-bottom:1px solid var(--zed-line) !important; }
html.zed:not(#z) table td { border-bottom:1px solid #eef3fb !important; color:var(--zed-text); }
html.zed:not(#z) table tbody tr:hover td { background:#f9fbff; }
html.zed:not(#z) table td strong { color:var(--zed-ink); }
html.zed:not(#z) .account-table td, html.zed:not(#z) .management-table td { vertical-align:middle; }
/* row actions: compact square icon buttons (label kept for screen readers and the tooltip) */
html.zed:not(#z) .account-action-group, html.zed:not(#z) .account-table td:last-child .account-action-group {
  display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important;
  justify-content:flex-end !important; gap:7px !important; width:auto !important; max-width:none !important; }
html.zed:not(#z) .account-action-group > .management-action, html.zed:not(#z) .account-table td:last-child .account-action-group > .management-action, html.zed:not(#z) .subscriber-actions > .management-action {
  width:36px !important; min-width:36px !important; height:36px !important; min-height:36px !important; max-height:36px !important;
  flex:0 0 36px !important; padding:0 !important; display:inline-grid !important; place-items:center !important; justify-content:center !important;
  border-radius:10px !important; border:1px solid #d6e2f5 !important; background:#fff !important; color:var(--zed-blue) !important; box-shadow:none !important; }
html.zed:not(#z) .account-action-group > .management-action .ui-icon, html.zed:not(#z) .subscriber-actions > .management-action .ui-icon { width:17px !important; height:17px !important; margin:0 !important; }
html.zed:not(#z) .account-action-group > .more-menu > summary { width:36px !important; justify-content:center !important; }
html.zed:not(#z) .account-action-group > .management-action .action-label, html.zed:not(#z) .subscriber-actions > .management-action .action-label {
  position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
html.zed:not(#z) .account-action-group > .management-action:hover, html.zed:not(#z) .subscriber-actions > .management-action:hover { background:var(--zed-blue-50) !important; border-color:#9fc0ff !important; }
html.zed:not(#z) .account-action-group > .management-action.danger, html.zed:not(#z) .account-action-group > .management-action[data-action^="delete"],
html.zed:not(#z) .subscriber-actions > .management-action[data-mode="delete"] { color:var(--zed-red) !important; border-color:#f6c3ca !important; }
html.zed:not(#z) .more-menu > summary, html.zed:not(#z) .more-toggle { width:36px; height:36px; display:inline-grid; place-items:center; border-radius:10px; border:1px solid #d6e2f5;
  background:#fff; color:var(--zed-ink); font-size:0 !important; list-style:none; cursor:pointer; }
html.zed:not(#z) .more-menu > summary::before, html.zed:not(#z) .more-toggle::before { content:"⋯"; font-size:20px; line-height:1; font-weight:900; }
html.zed:not(#z) .more-menu > summary::-webkit-details-marker { display:none; }
html.zed:not(#z) .more-list { border:1px solid var(--zed-line) !important; border-radius:12px !important; box-shadow:var(--zed-shadow-lift) !important; background:#fff !important; padding:6px !important; }
html.zed:not(#z) .more-list > button { border-radius:9px !important; color:var(--zed-ink) !important; }
html.zed:not(#z) .more-list > button:hover { background:var(--zed-blue-50) !important; color:var(--zed-blue-700) !important; }

/* ── 9. Badges / status ────────────────────────────────────────────────────────────────────── */
html.zed:not(#z) .badge, html.zed:not(#z) .ot-chip, html.zed:not(#z) .status-pill { border-radius:999px !important; font-weight:750 !important; }
html.zed:not(#z) .badge { background:var(--zed-green-50) !important; color:#0b7a42 !important; }
html.zed:not(#z) .badge.info, html.zed:not(#z) .ot-chip.run { background:var(--zed-blue-50) !important; color:var(--zed-blue-700) !important; }
html.zed:not(#z) .badge.warning, html.zed:not(#z) .ot-chip.warn { background:var(--zed-amber-50) !important; color:var(--zed-amber) !important; }
html.zed:not(#z) .badge.danger, html.zed:not(#z) .ot-chip.bad { background:var(--zed-red-50) !important; color:#b3172b !important; }
html.zed:not(#z) .badge.purple { background:var(--zed-violet-50) !important; color:var(--zed-violet) !important; }
html.zed:not(#z) .points-egypt, html.zed:not(#z) .points-type.points-egypt { color:var(--zed-blue-700) !important; }
html.zed:not(#z) .points-worldwide, html.zed:not(#z) .points-type.points-worldwide { color:var(--zed-violet) !important; }

/* ── 10. Tabs / pills / pagination ─────────────────────────────────────────────────────────── */
html.zed:not(#z) .tm-tab, html.zed:not(#z) .monitoring-tabs .button, html.zed:not(#z) .mirror-views button, html.zed:not(#z) .create-tabs button, html.zed:not(#z) .subscriber-nav .nav-item {
  border-radius:11px !important; }
html.zed:not(#z) .tm-tab.active, html.zed:not(#z) .monitoring-tabs .active, html.zed:not(#z) .mirror-views .selected, html.zed:not(#z) .create-tabs .active {
  background:var(--zed-blue) !important; color:#fff !important; border-color:var(--zed-blue) !important; box-shadow:var(--zed-glow) !important; }
html.zed:not(#z) .list-pager .button, html.zed:not(#z) .pagination .button, html.zed:not(#z) .le-pager .button, html.zed:not(#z) .mirror-pager .button { min-width:40px; border-radius:11px !important; }
html.zed:not(#z) .list-pager .button[aria-current], html.zed:not(#z) .list-pager .button.active { background:var(--zed-blue) !important; color:#fff !important; }

/* ── 11. Dialogs / toasts / states ─────────────────────────────────────────────────────────── */
html.zed:not(#z) dialog::backdrop { background:rgba(4,14,44,.55); backdrop-filter:blur(4px); }
html.zed:not(#z) .dialog-card, html.zed:not(#z) dialog .subscriber-dialog-shell, html.zed:not(#z) dialog[open] > form, html.zed:not(#z) dialog[open] > div, html.zed:not(#z) .le-dialog { border-radius:var(--zed-r-xl) !important; border:1px solid var(--zed-line); box-shadow:var(--zed-shadow-lift); }
html.zed:not(#z) .toast { border-radius:12px !important; border-inline-start:4px solid var(--zed-green) !important; box-shadow:var(--zed-shadow-lift) !important; }
html.zed:not(#z) .toast.error { border-inline-start-color:var(--zed-red) !important; }
html.zed:not(#z) .empty, html.zed:not(#z) .error-state { border-radius:var(--zed-r); }
html.zed:not(#z) .loading-line span { background:linear-gradient(90deg, var(--zed-cyan), var(--zed-blue)) !important; }

/* ── 12. ZED additions: stat cards, action cards, section chip ─────────────────────────────── */
html.zed:not(#z) .zed-stats { display:grid; grid-template-columns:repeat(4, minmax(170px, 1fr)); gap:16px; margin:2px 0 16px; }
html.zed:not(#z) .zed-stat { display:flex; align-items:center; gap:16px; padding:14px 18px; min-height:0; background:#fff; border:1px solid var(--zed-line); border-radius:var(--zed-r-lg); box-shadow:var(--zed-shadow); min-width:0; }
html.zed:not(#z) .zed-stat-icon { flex:none; width:50px; height:50px; border-radius:15px; display:grid; place-items:center; background:linear-gradient(145deg, #eaf2ff, #dbe8ff); color:var(--zed-blue); }
html.zed:not(#z) .zed-stat-icon svg { width:28px; height:28px; }
html.zed:not(#z) .zed-stat-body { min-width:0; display:grid; gap:3px; }
html.zed:not(#z) .zed-stat-body span { color:#3d4f77; font-size:13px; font-weight:650; }
html.zed:not(#z) .zed-stat-body strong { color:var(--zed-ink); font-size:24px; font-weight:850; line-height:1.15; overflow-wrap:anywhere; }
html.zed:not(#z) .zed-stat-body strong.zed-pair { font-size:18px; display:flex; flex-wrap:wrap; gap:2px 10px; }
html.zed:not(#z) .zed-stat-body strong span { font-size:inherit; color:inherit; font-weight:inherit; }
html.zed:not(#z) .zed-stat-body strong small { font-size:14px; font-weight:750; color:#3d4f77; margin-inline-start:4px; }
html.zed:not(#z) .zed-stat-body em { font-style:normal; font-size:11.5px; color:var(--zed-muted); line-height:1.3; }
html.zed:not(#z) .zed-stat.is-loading strong { color:#b6c3dc; }
html.zed:not(#z) .zed-card-icon { flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--zed-blue-50); color:var(--zed-blue); }
html.zed:not(#z) .zed-card-icon svg { width:26px; height:26px; }
html.zed:not(#z) .zed-iconed { display:flex !important; align-items:center; gap:16px; }
html.zed:not(#z) .zed-iconed > div:not(.zed-card-icon) { flex:1; min-width:0; }
html.zed:not(#z) .zed-count-chip { display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; background:var(--zed-blue-50); color:var(--zed-blue-700); font-size:12.5px; font-weight:750; margin-inline-start:10px; vertical-align:middle; }

/* ── 13. Login (Owner/Team) ────────────────────────────────────────────────────────────────── */
html.zed:not(#z) .login-aside { background:radial-gradient(500px 300px at 20% 10%, rgba(76,195,255,.35), rgba(76,195,255,0) 70%), linear-gradient(150deg, #0a2a78 0%, var(--zed-navy-800) 55%, var(--zed-navy-900) 100%) !important; }
html.zed:not(#z) .login-aside .logo-play.large { font-size:0 !important; background:url("zed-logo.svg") center/64px no-repeat !important; filter:drop-shadow(0 0 16px rgba(47,139,255,.8)); }
html.zed:not(#z) .login-brand strong { color:var(--zed-ink); font-weight:900; font-style:italic; letter-spacing:.05em; }
html.zed:not(#z) .login-brand strong em { display:none; }

/* ── 14. Subscriber portal (portal.tvzed.uk) ───────────────────────────────────────────────── */
html.zed:not(#z) body.customer-page { background:radial-gradient(1100px 480px at 90% -10%, #e2edff 0%, rgba(226,237,255,0) 60%), var(--zed-canvas) !important; }
html.zed:not(#z) .portal-topbar { border-bottom:1px solid var(--zed-line) !important; }
html.zed:not(#z) .customer-brand strong { color:var(--zed-ink) !important; font-weight:900; font-style:italic; letter-spacing:.05em; }
html.zed:not(#z) .customer-brand strong em { display:none; }
html.zed:not(#z) .customer-brand small { color:var(--zed-muted) !important; }
html.zed:not(#z) .portal-sidebar { background:linear-gradient(180deg, #071a4a 0%, var(--zed-navy-800) 50%, var(--zed-navy-900) 100%) !important; border-radius:var(--zed-r-xl) !important;
  padding:16px 12px !important; box-shadow:var(--zed-shadow-lift); align-self:start; }
html.zed:not(#z) .portal-sidebar .nav-caption { color:var(--zed-cyan) !important; font-weight:700; }
html.zed:not(#z) .portal-sidebar .nav-item { color:#eef3ff !important; border-radius:11px !important; }
html.zed:not(#z) .portal-sidebar .nav-item .nav-icon { color:#cfe0ff !important; }
html.zed:not(#z) .portal-sidebar .nav-item:hover { background:rgba(120,170,255,.12) !important; }
html.zed:not(#z) .portal-sidebar .nav-item.active, html.zed:not(#z) .portal-sidebar .nav-item[aria-current="page"] { background:linear-gradient(90deg, #2a78ff, #145be8) !important; color:#fff !important; box-shadow:var(--zed-glow) !important; }
html.zed:not(#z) .portal-sidebar .nav-item.active .nav-icon { color:#fff !important; }
html.zed:not(#z) .portal-sidebar .logout-button { background:transparent !important; color:#fff !important; border:1px solid rgba(150,200,255,.45) !important; }
html.zed:not(#z) .login-card .eyebrow { color:var(--zed-blue) !important; }
html.zed:not(#z) .search-results li, html.zed:not(#z) .request-card, html.zed:not(#z) .cr-card { border-radius:var(--zed-r) !important; border-color:var(--zed-line) !important; }

/* ── 15. Responsive ────────────────────────────────────────────────────────────────────────── */
@media (max-width:1200px) { html.zed:not(#z) .zed-stats { grid-template-columns:repeat(2, minmax(160px,1fr)); } }
@media (max-width:780px) {
  html.zed:not(#z) .zed-stats { grid-template-columns:1fr 1fr; gap:10px; }
  html.zed:not(#z) .zed-stat { padding:12px; gap:10px; }
  html.zed:not(#z) .zed-stat-icon { width:40px; height:40px; border-radius:12px; }
  html.zed:not(#z) .zed-stat-icon svg { width:22px; height:22px; }
  html.zed:not(#z) .zed-stat-body strong { font-size:19px; }
  html.zed:not(#z) .zed-iconed { gap:10px; }
  html.zed:not(#z) .zed-card-icon { width:40px; height:40px; }
  html.zed:not(#z) .zed-kbd { display:none; }
  html.zed:not(#z) .account-action-group { flex-wrap:wrap; }
  html.zed:not(#z), html.zed:not(#z) body { overflow-x:clip; }   /* the off-canvas sidebar must never widen the page */
  Z .topbar { gap:8px !important; }
  html.zed:not(#z) .topbar .balance-chip { padding:4px 8px !important; gap:6px !important; min-width:0 !important; max-width:52vw; overflow:hidden; }
  html.zed:not(#z) .topbar .balance-chip > span:first-child { display:none !important; }
  html.zed:not(#z) .topbar .balance-chip .wallet-pair { display:grid !important; gap:0 !important; }
  html.zed:not(#z) .topbar .balance-chip .points-type { font-size:11px !important; }
  html.zed:not(#z) .topbar .balance-chip .points-type::before { width:10px; height:10px; }
  html.zed:not(#z) .topbar .avatar { width:34px !important; height:34px !important; }
}

/* ── 16. Points / wallet pairs (compact two-line balances like the reference) ─────────────── */
html.zed:not(#z) .account-table .wallet-pair, html.zed:not(#z) .wallet-pair { display:grid !important; gap:3px !important; }
html.zed:not(#z) .points-type { display:inline-flex !important; align-items:center; gap:6px; background:transparent !important; padding:0 !important; font-size:12.5px !important; font-weight:750 !important; white-space:nowrap !important; }
html.zed:not(#z) .points-type::before { content:""; width:14px; height:14px; flex:none; border-radius:50%; border:2px solid currentColor; box-sizing:border-box; opacity:.85; }
html.zed:not(#z) .points-type.points-worldwide::before { border-style:dotted; }
html.zed:not(#z) .account-table .points-spent, html.zed:not(#z) .points-spent { font-size:11.5px !important; color:var(--zed-muted) !important; }
html.zed:not(#z) .account-table .points-spent .points-type { font-size:11.5px !important; }
html.zed:not(#z) .topbar .balance-chip .wallet-pair { display:flex !important; gap:10px !important; }
html.zed:not(#z) .account-table th, html.zed:not(#z) .account-table td { padding:11px 10px !important; }

/* ── 17. Reference refinements (agents page) ──────────────────────────────────────────────── */
html.zed:not(#z) .crossview-entry .cv-entry-text { display:grid !important; grid-template-columns:auto 1fr; column-gap:16px; align-items:center; }
html.zed:not(#z) .crossview-entry .cv-entry-text > .zed-card-icon { grid-row:span 2; }
html.zed:not(#z) .crossview-entry .cv-entry-text > :not(.zed-card-icon) { grid-column:2; margin:0 !important; }
html.zed:not(#z) .crossview-entry .cv-entry-text strong, html.zed:not(#z) .crossview-entry .cv-entry-text h2, html.zed:not(#z) .crossview-entry .cv-entry-text h3 { font-size:17px !important; color:var(--zed-ink) !important; font-weight:800 !important; }
html.zed:not(#z) .topbar .search-box > span:first-child { font-size:20px !important; line-height:1; }
html.zed:not(#z) .zed-title-icon { display:inline-grid; place-items:center; width:30px; height:30px; margin-inline-end:8px; vertical-align:middle; color:var(--zed-blue); }
html.zed:not(#z) .zed-title-icon svg { width:26px; height:26px; }
html.zed:not(#z) .panel-header h2 { display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-size:20px; }