/* LiveTV+ Blue: one look for the admin, customer and reseller panels, matching the LiveTV+ app and
   webplayer. Loaded last on every page. Older sheets layer several palettes (mint, then orange) with
   specific selectors, so colors here use !important. Sizes are compact (about the app's 90% scale);
   phones keep comfortable 40px touch targets. */
:root{
 --lt-top:#1530a8;--lt-bottom:#070f4a;--lt-surface:#0d1c6b;--lt-surface2:#1b3196;
 --lt-card:#ffffff14;--lt-card-hi:#ffffff26;--lt-focus:#fff;--lt-on-focus:#0a1450;
 --lt-accent:#7cc8ff;--lt-text:#fff;--lt-text2:#c5cdf0;--lt-muted:#9aa6dd;--lt-line:#ffffff24;
 --lt-good:#5ee3a1;--lt-warn:#ffcc66;--lt-bad:#ff8a80;--lt-input:#0a1450b3;
 /* Variables the older sheets read. */
 --bg:var(--lt-bottom);--panel:var(--lt-card);--line:var(--lt-line);--muted:var(--lt-muted);--text:var(--lt-text);--mint:var(--lt-accent);--amber:var(--lt-warn);
 --orange:var(--lt-accent);--ink:var(--lt-text);
 --ultv-accent:var(--lt-accent);--ultv-border:var(--lt-line);--ultv-muted:var(--lt-text2);
 color-scheme:dark;
}
html body{background:linear-gradient(180deg,var(--lt-top) 0,var(--lt-surface) 380px,var(--lt-bottom) 100%) fixed!important;background-color:var(--lt-bottom)!important;color:var(--lt-text)!important;font-family:Roboto,'Segoe UI',system-ui,sans-serif!important;font-size:13px;line-height:1.45}
html body :focus-visible{outline:2px solid var(--lt-focus)!important;outline-offset:2px}
html body a{color:var(--lt-accent)}
html body p,html body small,html body .muted,html body .subtle,html body td small,html body .section-head p{color:var(--lt-text2)}
html body .eyebrow,html body .auth-eyebrow,html body .nav-label,html body th{color:var(--lt-accent)!important}
html body h1{font-size:24px!important;letter-spacing:-.02em!important;margin:4px 0 8px!important;line-height:1.2}
html body h2{font-size:17px}html body h3{font-size:14px}
html body hr{border-color:var(--lt-line)}

/* ---- Top bars and side bars ---- */
html body>header,html body .topbar,html body .auth-top,html body .sidebar,html body aside{background:#0a145099!important;border-color:var(--lt-line)!important;box-shadow:none!important;backdrop-filter:blur(8px)}
html body>header{min-height:52px;height:auto!important}
html body .brand,html body .brand-home strong,html body .auth-brand{color:var(--lt-accent)!important}
html body .brand>span,html body .brand .mark,html body .brand-icon,html body .auth-brand>span{background:var(--lt-focus)!important;color:var(--lt-on-focus)!important;border-radius:8px!important;box-shadow:none!important;transform:none!important}
html body .brand-home{background:transparent!important;border:0!important}

/* ---- Buttons: translucent pills; the main action is white; destructive actions are red. ---- */
html body button,html body .button,html body .billing-link,html body .secondary,html body a.button{background:var(--lt-card-hi)!important;background-image:none!important;color:var(--lt-text)!important;border:1px solid transparent!important;border-radius:999px!important;box-shadow:none!important;font-weight:600;padding:6px 14px;min-height:32px;line-height:1.2}
html body button:hover,html body .button:hover,html body .secondary:hover{background:#ffffff3d!important}
html body .primary,html body button.primary,html body button[type=submit],html body form>button:not([type=button]):last-of-type,html body .signin-submit,html body .watch-button,html body .vod-actions button:first-child{background:var(--lt-focus)!important;color:var(--lt-on-focus)!important}
html body button[data-create]{background:var(--lt-focus)!important;color:var(--lt-on-focus)!important}
html body .universal-search-trigger{background:var(--lt-card-hi)!important;border:1px solid var(--lt-line)!important;border-radius:999px!important;color:var(--lt-text)!important}
html body .primary:hover,html body button[type=submit]:hover,html body .signin-submit:hover{background:#dfe6ff!important}
html body button.danger,html body .danger,html body button[class*=delete],html body button[class*=danger],html body .customer-delete,html body .bk-danger{background:#ff8a8024!important;color:#ffb4ad!important;border-color:#ff8a8055!important}
html body button.danger:hover,html body button[class*=delete]:hover,html body .customer-delete:hover,html body .bk-danger:hover{background:#ff8a8040!important}
html body button:disabled,html body button[disabled]{opacity:.4!important;cursor:default}
html body button[aria-pressed=true],html body button.active,html body nav button.active,html body nav a.active,html body [aria-current=page]{background:var(--lt-focus)!important;color:var(--lt-on-focus)!important}
/* Navigation: plain text items that light up when chosen. */
html body nav button,html body nav a,html body #admin-navigation button{background:transparent!important;color:var(--lt-text2)!important;border:0!important;border-radius:999px!important;padding:5px 11px!important;min-height:30px!important;font-weight:600}
html body nav button:hover,html body nav a:hover,html body #admin-navigation button:hover{background:var(--lt-card-hi)!important;color:var(--lt-text)!important}
html body #admin-navigation button.active,html body #admin-navigation button[aria-current=true],html body #admin-navigation button[aria-current=page],html body nav button.active{background:var(--lt-focus)!important;color:var(--lt-on-focus)!important}
html body .billing-navigation>summary,html body details[class*=navigation]>summary{background:var(--lt-card-hi)!important;border:1px solid var(--lt-line)!important;border-radius:12px!important;color:var(--lt-text)!important}
html body .billing-navigation>summary strong{color:var(--lt-accent)!important}
html body .billing-navigation[open]>nav{background:var(--lt-surface)!important;border-color:var(--lt-line)!important;border-radius:12px}
html body .password-field button,html body button.link,html body .link-button,html body .customer-name-link,html body button[class*=name-link],html body button[class*=-link]:not(.billing-link){background:transparent!important;color:var(--lt-accent)!important;min-height:0!important;padding:0!important;border-radius:4px!important;text-align:left;font-weight:700}

/* Buttons that are headings (h2–h4 > button) read as headings with a link arrow, not as bars. */
html body :is(h2,h3,h4)>button{background:transparent!important;color:var(--lt-text)!important;padding:0!important;min-height:0!important;border-radius:4px!important;font:inherit!important;display:inline-flex;gap:6px;align-items:center;width:auto!important}
html body :is(h2,h3,h4)>button:hover{color:var(--lt-accent)!important;background:transparent!important}
html body :is(h2,h3,h4)>button span{color:var(--lt-accent)}

/* ---- Form fields ---- */
html body input:not([type=checkbox]):not([type=radio]):not([type=range]),html body select,html body textarea{background:var(--lt-input)!important;color:var(--lt-text)!important;border:1px solid var(--lt-line)!important;border-radius:10px!important;box-shadow:none!important;padding:6px 10px;min-height:34px;font-size:13px}
html body input::placeholder,html body textarea::placeholder{color:var(--lt-muted)!important}
html body input:focus,html body select:focus,html body textarea:focus{border-color:var(--lt-focus)!important;outline:0!important}
html body select option{background:var(--lt-surface);color:var(--lt-text)}
html body label{color:var(--lt-text2)}
html body input[type=checkbox],html body input[type=radio]{accent-color:var(--lt-accent)}

/* ---- Cards, panels and dialogs ---- */
html body .panel,html body .card,html body .stat,html body .billing-card,html body .signin-card,html body .node-card,html body .customer-card,html body .settings-option-card,html body .ticket-bulk-actions,html body details.billing-card,html body .account-card,html body .plan-card,html body .summary-card,html body .overview-card,html body #login:not(.signin){background:var(--lt-card)!important;background-image:none!important;border:1px solid var(--lt-line)!important;border-radius:14px!important;box-shadow:none!important}
/* Any other panel/card-style container (overview-panel, bandwidth-panel, widget-disclosure, …). */
html body :is([class*=panel],[class*=card],[class*=widget],[class*=tile]):not(button):not(a):not(nav):not(input):not(select):not(span):not(strong):not(small):not(img):not(label){background-color:var(--lt-card)!important;background-image:none!important;border-color:var(--lt-line)!important;box-shadow:none!important}
/* A panel inside a panel keeps only its outline, so layers don't stack into grey. */
html body :is(.panel,.card,.billing-card,[class*=panel],[class*=card],[class*=widget],[class*=tile]) :is(.panel,.card,.billing-card,.stat,[class*=panel],[class*=card],[class*=widget],[class*=tile]):not(button){background-color:transparent!important}
/* Clickable stat boxes and option cards are cards, not pills. */
html body button:is([class*=stat],[class*=card],[class*=tile]){border-radius:14px!important;background:var(--lt-card)!important;border:1px solid var(--lt-line)!important;color:var(--lt-text)!important;text-align:left;padding:12px 14px!important}
html body button:is([class*=stat],[class*=card],[class*=tile]):hover{background:var(--lt-card-hi)!important;border-color:#ffffff55!important}
html body .settings-option-card:hover{background:var(--lt-card-hi)!important}
html body dialog,html body .billing-dialog,html body .account-dialog,html body .modal{background:var(--lt-surface)!important;color:var(--lt-text)!important;border:1px solid var(--lt-line)!important;border-radius:16px!important;box-shadow:0 20px 60px #0008!important}
html body dialog::backdrop{background:#02061ccc}
/* Dialog buttons: the safe choice on the left, the action on the right; full width on phones. */
html body .dialog-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
@media(max-width:600px){html body .dialog-actions>button{flex:1 1 0}}
html body .notice,html body .warning,html body .alert{background:#ffcc6614!important;border-color:#ffcc6655!important;color:var(--lt-warn)!important}
html body summary{color:var(--lt-text)}

/* ---- Sign-in and signup pages ---- */
html body .signin-story h1 em,html body .auth-eyebrow,html body .signin-footnote a,html body .story-notes span{color:var(--lt-accent)!important;border-color:var(--lt-accent)!important}
html body .access-label{color:var(--lt-accent)!important;border-color:#7cc8ff66!important;background:#7cc8ff14!important;border-radius:999px!important}
html body .signin-card{backdrop-filter:blur(10px)}
html body.auth-page::before,html body::before{background:none!important}
html body .signin-story::after{background:repeating-radial-gradient(ellipse at 85% 100%,transparent 0 25px,#7cc8ff26 26px 27px,transparent 28px 46px),linear-gradient(120deg,var(--lt-surface2),var(--lt-surface))!important;border-color:var(--lt-line)!important;box-shadow:none!important}
html body .signin-card h2{color:var(--lt-text)!important}
html body .signal-art{background:repeating-radial-gradient(ellipse at 85% 100%,transparent 0 25px,#7cc8ff26 26px 27px,transparent 28px 46px),linear-gradient(120deg,var(--lt-surface2),var(--lt-surface))!important;border-color:var(--lt-line)!important}
html body .signal-line,html body .signal-line:nth-child(2),html body .signal-line:nth-child(3){background:linear-gradient(90deg,#1b319600,var(--lt-accent))!important}
@media(max-width:900px){
 html body .signin{margin:12px auto!important;gap:14px!important}
 html body .signin-story h1{font-size:26px!important;margin-bottom:6px!important}
 html body .signin-story .story-copy{font-size:13px!important;margin:0!important}
 html body .auth-eyebrow{margin-bottom:8px!important}
 html body .signal-art,html body .story-notes,html body .signin-story::after{display:none!important}
 html body .signin-card{padding:18px!important}
 html body .signin-card h2{font-size:22px!important;margin:12px 0 6px!important}
 html body .auth-main{padding:12px!important}
 html body .auth-top{min-height:52px!important;padding:8px 14px!important}
}

/* Heading accent bars and other orange decorations → light blue. */
html body.customer-app #account h2::before{background-image:linear-gradient(var(--lt-accent),#3d8bff)!important}
html body button[id^=copy-]{width:auto!important;align-self:start}
html body .billing-money{color:var(--lt-text)!important}
html body .card .value{color:var(--lt-text)!important}
html body .support-notifications{border-color:var(--lt-line)!important;background:var(--lt-card)!important}html body .support-notifications *:not(button){background-color:transparent!important;background-image:none!important}html body .support-notifications [class*=request],html body .support-notifications article,html body .support-notifications li{border:1px solid var(--lt-line)!important;border-radius:12px}
html body .settings-option-icon{color:var(--lt-accent)!important;background:#7cc8ff14!important}html body .settings-option-arrow,html body .setup-arrow{color:var(--lt-accent)!important;background:transparent!important}
html body main a:not(.button):not([class*=btn]):not([class*=card]){color:var(--lt-accent)!important}
html body .billing-note{border-left-color:var(--lt-accent)!important}
html body .contact-avatar{background:var(--lt-focus)!important;color:var(--lt-on-focus)!important;border-color:var(--lt-focus)!important}

/* ---- Shop / signup page ---- */
html body.signup-page article,html body .comparison-chart,html body .store-addon,html body .store-art{background-color:var(--lt-card)!important;background-image:none!important;border-color:var(--lt-line)!important}
html body .store-eyebrow,html body.signup-page h1 em,html body.signup-page h2 em,html body.signup-page em{color:var(--lt-accent)!important}
html body .marketing-cta{background:var(--lt-focus)!important;color:var(--lt-on-focus)!important;border-color:var(--lt-focus)!important;border-radius:999px!important}
html body .status-pill{background:#7cc8ff1f!important;color:var(--lt-accent)!important;border-color:transparent!important}
html body .primary-link{background:var(--lt-focus)!important;color:var(--lt-on-focus)!important;border-color:var(--lt-focus)!important;border-radius:999px!important}
html body .chart-ultv{background:#7cc8ff1f!important;color:var(--lt-text)!important}
html body .screen-mark{background:var(--lt-focus)!important;background-image:none!important;color:var(--lt-on-focus)!important}

/* ---- Tables ---- */
html body table{border-color:var(--lt-line)}
html body th{background:transparent!important;border-bottom:1px solid var(--lt-line)!important;font-size:10px;letter-spacing:.08em;padding:8px 10px!important}
html body td{border-bottom:1px solid #ffffff14!important;padding:8px 10px!important;font-size:12.5px}
html body tbody tr:hover td{background:#ffffff0a}

/* ---- Status tags: keep their meaning, in the new palette. ---- */
html body .tag,html body .badge,html body .pill,html body [class*=ticket-state]{background:#7cc8ff1f!important;color:var(--lt-accent)!important;border-color:transparent!important;border-radius:999px!important}
html body .tag.amber,html body [class*=state-new],html body [class*=customer_responded],html body .open,html body .status-open{background:#ffcc661f!important;color:var(--lt-warn)!important}
html body .tag.muted{background:#ffffff14!important;color:var(--lt-text2)!important}
html body .paid,html body .status-paid,html body .active-status,html body [class*=support_responded]{color:var(--lt-good)!important}
html body .ticket-attention-dot,html body .live-dot{background:var(--lt-warn)!important}

/* ---- Compact spacing on desktop/TV-size screens ---- */
@media(min-width:901px){
 html body .page,html body main{padding-top:14px}
 html body .page{padding:14px 22px 30px!important}
 html body .page-heading{margin-bottom:12px!important}
 html body .stats{gap:10px!important}
 html body .stat{padding:12px 14px!important}
 html body .stat strong{font-size:24px!important;margin:4px 0!important}
 html body .panel,html body .billing-card{padding:14px 16px!important}
 html body .panel{margin-top:12px!important}
 html body .two-col{gap:12px!important;margin-top:12px!important}
 html body .toolbar{margin:10px 0!important;gap:8px!important}
}

/* ---- Phones: one column, full-width fields, 40px touch targets, no sideways scrolling ---- */
@media(max-width:900px){
 html body{font-size:14px}
 html body h1{font-size:21px!important}
 html body button,html body .button,html body .secondary{min-height:40px!important;padding:8px 14px!important}
 html body input:not([type=checkbox]):not([type=radio]):not([type=range]),html body select,html body textarea{min-height:40px!important;font-size:16px!important}
 html body nav button,html body #admin-navigation button{min-height:36px!important;padding:6px 12px!important}
 html body .panel,html body .billing-card,html body .stat,html body .card{padding:12px!important;border-radius:12px!important}
 html body .page,html body main{padding-left:12px!important;padding-right:12px!important}
 html body td{padding:8px!important}
}
/* Ticket lists become labelled cards on phones, including reseller ticket lists. */
@media(max-width:900px){
 html body .ticket-table-wrap.ticket-table-wrap.ticket-table-wrap.ticket-table-wrap{overflow:visible!important;max-height:none!important;width:100%!important;min-width:0!important;max-width:100%!important;scrollbar-gutter:auto!important}
 html body table.ticket-table.ticket-table.ticket-table{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;table-layout:auto!important}
 html body table.ticket-table.ticket-table.ticket-table>thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important}
 html body table.ticket-table.ticket-table.ticket-table>tbody{display:grid!important;gap:12px;width:100%!important}
 html body table.ticket-table.ticket-table.ticket-table>tbody>tr{display:block!important;width:100%!important;min-width:0!important;box-sizing:border-box;padding:12px!important;border:1px solid var(--lt-line)!important;border-radius:12px!important;background:var(--lt-card)!important}
 html body table.ticket-table.ticket-table.ticket-table>tbody>tr>td{display:block!important;position:static!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;padding:6px 0!important;border:0!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:left!important}
 html body table.ticket-table.ticket-table.ticket-table>tbody>tr>td::before{display:block!important;content:attr(data-label)!important;font-size:11px!important;color:var(--lt-text2);margin-bottom:3px}
 html body table.ticket-table.ticket-table.ticket-table>tbody>tr>td[colspan]::before{display:none!important}
 html body table.ticket-table.ticket-table.ticket-table td :is(strong,a,span,button){white-space:normal!important;overflow-wrap:anywhere!important;max-width:100%!important}
 html body table.ticket-table.ticket-table.ticket-table td button{min-height:40px!important;min-width:44px!important}
}

/* Settings › Home screen ads */
html body .home-ads-upload{display:grid;gap:10px;max-width:560px;margin:10px 0}
html body .home-ads-upload label small{display:block;font-size:11px;color:var(--lt-muted)}
html body .home-ads-rotation{display:flex;align-items:center;gap:8px;margin:8px 0}
html body .home-ads-list{list-style:none;padding:0;margin:10px 0;display:grid;gap:10px}
html body .home-ads-item{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border:1px solid var(--lt-line);border-radius:12px;background:var(--lt-card)}
html body .home-ads-item img{width:96px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;background:#0006}
html body .home-ads-meta small{display:block;color:var(--lt-text2)}
html body .home-ads-actions{display:flex;gap:6px;flex-wrap:wrap}
html body .home-ads-empty{color:var(--lt-text2)}
@media(max-width:700px){html body .home-ads-item{grid-template-columns:72px minmax(0,1fr)}html body .home-ads-item img{width:72px}html body .home-ads-actions{grid-column:1/-1}}