/* Shared web design tokens. Legacy names alias these so existing components keep their contracts. */
:root{
  --ui-bg:#050d19;--ui-surface:#0b1a2a;--ui-raised:#10263a;--ui-field:#0b1a2a;
  --ui-border:#91b8d938;--ui-border-soft:#91b8d91f;--ui-text:#f2f8fc;--ui-muted:#b0c0ce;
  --ui-accent:#16d7e8;--ui-accent-fill:#066daa;--ui-success:#63d9a0;--ui-danger:#ff939d;
  --ui-font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --ui-xs:12px;--ui-sm:14px;--ui-base:16px;--ui-lg:20px;--ui-title:clamp(28px,4vw,48px);
  --ui-1:4px;--ui-2:8px;--ui-3:12px;--ui-4:16px;--ui-5:24px;--ui-6:32px;--ui-7:48px;--ui-8:64px;
  --ui-radius-sm:8px;--ui-radius:12px;--ui-radius-lg:20px;--ui-pill:999px;
  --ui-shadow:0 16px 48px #0005;--ui-shadow-modal:0 24px 80px #0009;
  --ui-z-nav:30;--ui-z-modal:100;--ui-fast:140ms;--ui-motion:220ms;--ui-ease:cubic-bezier(.2,.7,.2,1);
  --bg:var(--ui-bg);--panel:var(--ui-surface);--line:var(--ui-border);--text:var(--ui-text);--muted:var(--ui-muted);--accent:var(--ui-accent);
  --zc-bg:var(--ui-bg);--zc-panel:var(--ui-surface);--zc-panel-2:var(--ui-raised);--zc-field:var(--ui-field);--zc-hover:var(--ui-raised);--zc-line:var(--ui-border-soft);--zc-line-2:var(--ui-border);--zc-text:var(--ui-text);--zc-muted:var(--ui-muted);--zc-blue:var(--ui-accent);--zc-purple:var(--ui-accent-fill);
  --studio-bg:var(--ui-bg);--studio-panel:var(--ui-surface);--studio-panel-raised:var(--ui-raised);--studio-line:var(--ui-border);--studio-text:var(--ui-text);--studio-muted:var(--ui-muted);--studio-accent:var(--ui-accent);
  color-scheme:dark;scrollbar-color:#4c5669 var(--ui-bg);scrollbar-width:thin;
}
body{background:var(--ui-bg);color:var(--ui-text);font-family:var(--ui-font);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--brand,#16d7e8);color:var(--brand-ink,#03121e)}*{box-sizing:border-box}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--ui-bg)}::-webkit-scrollbar-thumb{background:#4c5669;border:2px solid var(--ui-bg);border-radius:var(--ui-pill)}
:is(button,input,select,textarea){font-family:var(--ui-font)}
:is(h1,h2,h3){color:var(--ui-text);text-wrap:balance;letter-spacing:-.035em;line-height:1.15}
p{line-height:1.65}small,.small-note,.muted{color:var(--ui-muted)}
:is(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:3px solid var(--ui-accent);outline-offset:3px}
:is(button,.button-link,.primary,.home-action,.zc-primary){border-radius:var(--ui-radius);transition:transform var(--ui-fast) var(--ui-ease),opacity var(--ui-fast);font-weight:650}
button:not(:disabled):active,.button-link:active{transform:translateY(1px) scale(.985)}
button:disabled{cursor:not-allowed;opacity:.5}
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select){border-color:var(--ui-border);background:var(--ui-field);color:var(--ui-text);border-radius:var(--ui-radius);line-height:1.4}
input::placeholder,textarea::placeholder{color:var(--ui-muted);opacity:1}
:is(input,select,textarea):focus{border-color:var(--ui-accent)}
input:is([type=checkbox],[type=radio]){accent-color:var(--ui-accent-fill);min-height:0!important;width:18px!important;height:18px!important;flex:none}
:is(.care-panel,.account-card,.zc-step,.admin-order,.tk-state){border-color:var(--ui-border-soft);background:var(--ui-surface);border-radius:var(--ui-radius-lg)}
body>header{background:#050d19ee;border-bottom-color:var(--ui-border-soft);backdrop-filter:blur(16px)}
body:not(.ui-scrolled):has(#welcome:not([hidden]))>header{background:#050d1988}
body.ui-scrolled>header{background:#050d19f2;box-shadow:0 8px 24px #0003}
body>header>.site-nav{box-shadow:none;background:#0b1a2ae8;border-color:var(--ui-border)}
body>header>.site-nav .site-nav-indicator{background:var(--ui-accent-fill);box-shadow:none;transition:transform var(--ui-motion) var(--ui-ease),opacity var(--ui-motion)}
body>header>.site-nav a,body>header>.site-nav .nav-watch{transition:none}

/* Content browsing retains existing controls, dimensions and scroll handlers. */
.browse-shell,.dzc-root{--dzc-text:var(--ui-text);--dzc-muted:var(--ui-muted);--dzc-line:var(--ui-border);--dzc-blue:var(--ui-accent-fill)}
.library-row-heading h2,.dzc-grid-title{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.03em}
.poster-rail{scroll-snap-type:x proximity;scroll-padding-inline:var(--ui-2);overscroll-behavior-inline:contain;padding-block:var(--ui-3);gap:var(--ui-4)}
.poster-rail .browse-card{scroll-snap-align:start;min-width:0}
.poster-card,.dzc-item{transition:transform var(--ui-motion) var(--ui-ease);border-radius:var(--ui-radius);box-shadow:none}
.poster-art,.dzc-item-art{isolation:isolate;background:var(--ui-raised);border-radius:var(--ui-radius);overflow:hidden}
.poster-art:not(.wide-art):not(.live-art):not(.zc-tile),.dzc-item-art{aspect-ratio:2/3}
.wide-art{aspect-ratio:16/9}.poster-art img,.dzc-item-art img{width:100%;height:100%;object-fit:cover}
.poster-card strong,.dzc-item-copy strong{font-size:var(--ui-sm);font-weight:650;line-height:1.4}
.poster-rail .rail-scroll,.rail-scroll{width:44px;height:44px;min-height:44px;border:1px solid var(--ui-border);background:var(--ui-surface);border-radius:var(--ui-pill)}
.rail-actions{gap:var(--ui-2)}
.billboard{border:1px solid var(--ui-border-soft);border-radius:var(--ui-radius-lg);overflow:hidden;isolation:isolate;background:var(--ui-surface)}
.billboard-art:after{background:linear-gradient(90deg,#050d19ed 0%,#050d1985 52%,#050d1918 100%),linear-gradient(0deg,var(--bg,#050d19),transparent 60%)}
.billboard-copy{max-width:740px}.billboard h1{font-size:var(--ui-title);letter-spacing:-.045em;line-height:1.08}
.billboard-logline{color:var(--text,#f2f8fc);line-height:1.6}
.billboard-actions .primary,.dzc-primary{background:var(--brand,#16d7e8);color:var(--brand-ink,#03121e);border-color:var(--brand,#16d7e8);box-shadow:none;min-height:46px;font-weight:750}
.dzc-feature-card{border-color:var(--ui-border);background:linear-gradient(115deg,var(--surface,#0b1a2a),var(--ui-surface));box-shadow:var(--ui-shadow);border-radius:var(--ui-radius-lg)}
.dzc-feature-copy h2{font-size:clamp(22px,3vw,36px);line-height:1.12}.dzc-feature-art{border-radius:var(--ui-radius)}
.dzc-provider,.dzc-tab{border-color:var(--ui-border);box-shadow:none;min-height:44px}
.dzc-tab[aria-selected=true]{background:var(--ui-accent-fill);color:var(--text,#f2f8fc);border-color:var(--ui-accent)}
.zc-classic-search-field input{font-size:var(--ui-base);box-shadow:none}
.zc-classic-search-submit{box-shadow:none}
/* Ready pages stay visible immediately; retain the subtle entrance movement. */
.browse-content,.category-view,.account-view,.dzc-root{animation:ui-page-enter var(--ui-motion) var(--ui-ease)}

/* Friendly states without replacing retry, playback or account logic. */
.browse-empty,.dzc-empty,.tk-state,#player-empty{color:var(--ui-muted);line-height:1.65;text-align:center}
.browse-empty,.dzc-empty{padding:var(--ui-7) var(--ui-5);border:1px dashed var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-surface);min-width:0;grid-column:1/-1}
.browse-empty h2,.browse-empty h3,.tk-state h3{color:var(--ui-text);font-size:var(--ui-lg)}
.browse-empty::before,.dzc-empty::before{content:'◇';display:block;color:var(--ui-accent);font-size:32px;line-height:1;margin-bottom:var(--ui-4)}
:is(.skeleton-card,.skeleton-hero,.tk-skeleton-row,.tk-skeleton-podium){position:relative;overflow:hidden;isolation:isolate;background:var(--ui-raised)!important;border-radius:var(--ui-radius);animation:none!important}
:is(.skeleton-card,.skeleton-hero,.tk-skeleton-row,.tk-skeleton-podium)::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#f2f8fc0c,transparent);transform:translateX(-100%);animation:ui-shimmer 1.6s linear infinite;pointer-events:none}
.page-ready-status{inset:0;padding:var(--ui-5);color:var(--ui-muted);font-family:var(--ui-font);font-size:var(--ui-sm);background:var(--ui-bg)}
.page-ready-status::before{width:48px;height:48px;border:0;border-radius:var(--ui-radius);background:center/contain no-repeat url('/brand/logo/favicon-32.png?v=2');animation:ui-intro 1.2s var(--ui-ease) 1}
.page-ready-status.ui-returning::before{width:28px;height:4px;border-radius:var(--ui-pill);background:var(--ui-accent);animation:ui-pulse 1.2s ease-in-out infinite}
.page-ready-status.failed{pointer-events:auto}
.ui-image-loaded{animation:ui-image-in var(--ui-motion) ease-out}
.ui-image-failed{opacity:0!important}.poster-art:has(.ui-image-failed),.dzc-item-art:has(.ui-image-failed){background:linear-gradient(145deg,var(--ui-raised),var(--ui-surface))}
.dzc-item-art:has(.ui-image-failed)::after{content:'▶';position:absolute;inset:0;display:grid;place-items:center;color:var(--ui-muted);font-size:28px}

/* Dialogs/player: presentation only; visibility and idle states stay owned by the player. */
dialog,.browse-modal,.zc-stream-menu{border-color:var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-surface);box-shadow:var(--ui-shadow-modal);color:var(--ui-text)}
dialog[open]{animation:ui-enter var(--ui-motion) var(--ui-ease)}
dialog::backdrop{background:#050d19d1;backdrop-filter:blur(4px)}
.zc-stream-menu{animation:ui-enter var(--ui-fast) var(--ui-ease)}
.zc-stream-item{min-height:44px;border-radius:var(--ui-radius-sm)}
.zc-stream-item[aria-checked=true]{background:var(--surface-2,#10263a);color:var(--ui-text)}
.zc-stream-button{border-color:var(--ui-border);background:#0b1a2adf;color:var(--ui-text);font-family:var(--ui-font)}
.zc-player-toolbar{background:linear-gradient(0deg,#050d19ec,#050d1980);border-radius:var(--ui-radius)}
video{background:var(--bg,#050d19)}input[type=range]{accent-color:var(--ui-accent);cursor:pointer}
.zc-toast,.feedback-toast{animation:ui-enter var(--ui-motion) var(--ui-ease);border-color:var(--ui-border)}

/* Keep badge artwork and rank semantics intact; sharpen surrounding contrast. */
.zc-lb-page .tk-row,.tk-me,.tk-community-total,.tk-tier-card,.tk-xp-card{background:var(--ui-surface);border-color:var(--ui-border-soft);border-radius:var(--ui-radius-lg)}
.tk-row-heading strong{font-weight:700;letter-spacing:-.02em}.tk-row-count strong{font-variant-numeric:tabular-nums;font-weight:800}
.tk-badge svg,.rank-badge svg{shape-rendering:geometricPrecision}
.tk-podium-card{border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow)}
.tk-podium-card.tk-place-1{border-color:#b2924e}.tk-podium-card.tk-place-2{border-color:var(--border-strong,#91b8d938)}.tk-podium-card.tk-place-3{border-color:#a77450}
.tk-tabs{border-color:var(--ui-border);background:var(--ui-field)}.tk-tabs button{font-weight:650}
.tk-kicker,.library-kicker,.zc-kicker{font-weight:700;letter-spacing:.15em}

/* Quieter admin and footer; no blocked controls beneath decorative overlays. */
.customer-directory{margin:var(--ui-4) 0;padding:var(--ui-4)}
.customer-directory>summary{min-height:44px;cursor:pointer;display:list-item;font-weight:700;color:var(--ui-text);padding:var(--ui-2)}
.customer-directory[open]>summary{margin-bottom:var(--ui-3)}
.customer-directory:not([open])>:not(summary){display:none!important}
.customer-signin-method{color:var(--ui-accent);font-weight:600}
.admin-page :is(input,select,button){min-height:44px}.admin-page label{line-height:1.45}
.admin-page #zc-floating-chat{display:none!important}
.admin-page #import-form #replace{width:18px!important;height:18px!important;min-height:0!important;justify-self:start}
.brand-footer{border-top:1px solid var(--ui-border-soft);padding-block:var(--ui-6);color:var(--ui-muted)}
.brand-footer .footer-live-chat{box-shadow:none;border-color:var(--ui-border);background:var(--ui-surface);border-radius:var(--ui-radius-lg)}
.brand-footer .footer-live-chat-cta{background:var(--ui-raised);border:1px solid var(--ui-border);color:var(--ui-text);box-shadow:none}
.brand-footer .footer-live-chat-copy strong{font-size:18px}.brand-footer .footer-live-chat-art{opacity:.85}
.e404{--e-bg:var(--ui-bg);--e-text:var(--ui-text);--e-muted:var(--ui-muted);--e-blue:var(--ui-accent-fill);--e-cyan:var(--ui-accent)}
.e404-snow,.e404-scan,.e404-roll{display:none}.e404-code span,.e404-mark,.e404-ring,.e404-bars i{animation:none!important;filter:none!important}
.e404-code{letter-spacing:-.06em}.e404-btn{border-radius:var(--ui-radius);min-height:48px}
@media(hover:hover){.poster-card:hover,.dzc-item:hover{transform:translateY(-4px) scale(1.02)}.poster-rail{mask-image:linear-gradient(90deg,#000 0%,#000 98%,transparent 100%)}.button-link:hover{opacity:.92}}
@media(min-width:1800px){.browse-shell{font-size:18px}.library-row-heading h2{font-size:28px}}
@media(max-width:700px){
  .admin-page main{padding-inline:0}
  .billboard h1{font-size:clamp(26px,7vw,38px)}.billboard-copy{padding:var(--ui-5)}
  .poster-rail{gap:var(--ui-3)}.poster-card strong{font-size:13px}
  .dzc-feature-card{gap:var(--ui-4);padding:var(--ui-4)}
  .zc-stream-menu{width:min(300px,calc(100% - 24px))}
  .brand-footer{padding-inline:var(--ui-4)}.brand-footer .footer-live-chat{padding:var(--ui-4)}
  .zc-lb-page .tk-board-head,.zc-lb-page .tk-board-actions{align-items:center;text-align:center;justify-content:center}
}
/* Final consistency pass across the core customer and operator surfaces. */
:is(.account-content,.browse-shell,.zc-timekeepers,.admin-page main){min-width:0}
:is(.account-content,.admin-page) :is(p,dd,.small-note){overflow-wrap:anywhere}
:is(.tk-row-count,.tk-community-total,.expiry-copy,.zc-member-stats,.admin-summary){font-variant-numeric:tabular-nums}
.account-dropdown{border:1px solid var(--ui-border);border-radius:16px;background:var(--ui-surface);box-shadow:var(--ui-shadow-modal)}
.account-dropdown a[role=menuitem],.account-dropdown button[role=menuitem]{min-height:44px;border-radius:9px}
#welcome .home-showcase{border-color:var(--ui-border);box-shadow:0 20px 55px #0004}
#welcome .home-action{box-shadow:none;line-height:1.3}
#welcome .home-action-primary{background:var(--brand-gradient);color:var(--brand-ink,#03121e)}
.zc-classic-search-field{border-radius:14px;transition:border-color var(--ui-fast),box-shadow var(--ui-fast)}
.zc-classic-search-field:focus-within{border-color:var(--ui-accent);box-shadow:0 0 0 3px #16d7e818}
.library-row-heading{gap:12px;align-items:center}
.library-row-heading h2{line-height:1.25}
.poster-card:focus-visible,.dzc-item:focus-visible{outline-offset:4px}
.zc-lb-page .tk-board-head h2{line-height:1.2;letter-spacing:-.035em}
.zc-lb-page .tk-board-actions{gap:12px}
.zc-lb-page .tk-tabs{padding:5px;box-shadow:none}
.admin-page .care-panel{border-radius:16px;box-shadow:none}
.admin-page .admin-orders-head{gap:16px;align-items:center}
.admin-page .admin-orders-head h2{margin:0;line-height:1.25}
.admin-page .customer-directory>summary{font-size:15px;border-radius:10px}
.admin-page table th{font-size:11px;letter-spacing:.06em;line-height:1.4}
.admin-page table td{line-height:1.5}
.admin-page :is(.admin-orders-tools,.customer-filters){row-gap:12px}
@media(hover:hover){
 .account-dropdown :is(a,button)[role=menuitem]:hover{background:var(--ui-raised)}
 .admin-page .customer-directory>summary:hover{background:var(--ui-raised)}
 .admin-page tbody tr:hover{background:#50e6ec06}
}
@media(max-width:700px){
 :is(.account-page,.admin-page,.browse-mode) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){font-size:16px}
 #welcome .home-action{min-height:48px}
 .admin-page .admin-orders-head{align-items:flex-start;flex-wrap:wrap}
 .admin-page .admin-orders-tools{max-width:100%;flex-wrap:wrap}
 .admin-page .care-panel{padding:18px}
 .zc-lb-page .tk-board-head h2{font-size:clamp(25px,7vw,32px)}
 #zc-floating-chat{width:48px;min-height:48px;padding:5px;gap:0;border-radius:50%;right:12px}
 #zc-floating-chat .zc-floating-chat-icon{width:36px;height:36px}
 #zc-floating-chat .zc-floating-chat-label{display:none}
}
@keyframes ui-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes ui-page-enter{from{transform:translateY(6px)}to{transform:translateY(0)}}
@keyframes ui-shimmer{to{transform:translateX(100%)}}
@keyframes ui-image-in{from{opacity:.25}to{opacity:1}}
@keyframes ui-intro{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes ui-pulse{50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}