/* Shared visual language based on the supplied profile mockup. Keep page data and controls native. */
:root{
  --zc-bg:#050d19;--zc-panel:#0b1a2a;--zc-panel-2:#10263a;--zc-field:#0b1a2a;
  --zc-hover:#10263a;--zc-line:#91b8d91f;--zc-line-2:#91b8d938;
  --zc-text:#f2f8fc;--zc-muted:#b0c0ce;--zc-blue:#16d7e8;--zc-purple:#23e5b4;
  --zc-gradient:linear-gradient(135deg,var(--zc-blue),var(--zc-purple));
  --zc-success:#3ddc84;--zc-danger:#ff7777;
}
body{background:var(--zc-bg);color:var(--zc-text)}
body>header{max-width:none;background:#050d19d9;border-bottom:1px solid var(--zc-line);backdrop-filter:blur(14px)}
body>header>.nav-login,body>header>#logout,body>header>#signout{border:1px solid var(--zc-line-2);border-radius:999px;background:var(--zc-panel);color:var(--zc-text)}
body>header>.nav-login:hover,body>header>#logout:hover,body>header>#signout:hover{background:var(--zc-hover);border-color:#16d7e866}
body:not(.browse-mode) .care-panel,body:not(.browse-mode) .account-card,body:not(.browse-mode) .review-card{
  background:var(--zc-panel);border:1px solid var(--zc-line);border-radius:18px;box-shadow:none;
}
body:not(.browse-mode) .care-panel h2,body:not(.browse-mode) .account-card h2{color:var(--zc-text);font-weight:650;letter-spacing:-.02em}
body:not(.browse-mode) .care-panel p,body:not(.browse-mode) .small-note{color:var(--zc-muted)}
body:not(.browse-mode) input:not([type=checkbox]):not([type=radio]),body:not(.browse-mode) select,body:not(.browse-mode) textarea{
  background:var(--zc-field);border:1px solid var(--zc-line-2);border-radius:11px;color:var(--zc-text);
}
body:not(.browse-mode) input:focus-visible,body:not(.browse-mode) select:focus-visible,body:not(.browse-mode) textarea:focus-visible{outline:2px solid var(--zc-blue);outline-offset:1px}
body:not(.browse-mode) button:not(.primary):not(.site-nav-indicator):not(.zc-lang-btn):not(.cc-link),body:not(.browse-mode) .button-link{
  border-radius:10px;
}
body:not(.browse-mode) .primary,body:not(.browse-mode) .button-link.primary{
  background:var(--zc-gradient);border:1px solid transparent;border-radius:10px;color:var(--brand-ink,#03121e);font-weight:650;box-shadow:none;
}
body:not(.browse-mode) .primary:hover{filter:brightness(1.1);color:var(--brand-ink,#03121e)}
body:not(.browse-mode) .button-link{background:var(--zc-panel-2);border-color:var(--zc-line-2);color:var(--zc-text)}
body:not(.browse-mode) .button-link:hover{background:var(--zc-hover);border-color:#16d7e866}
body:not(.browse-mode) .page-hero h1,body:not(.browse-mode) .admin-heading h1{color:var(--zc-text)}
body:not(.browse-mode) .page-hero em{color:var(--zc-blue)}
body:not(.browse-mode) .plan-card{background:var(--zc-panel);border-color:var(--zc-line);border-radius:18px}
body:not(.browse-mode) .plan-card.selected{border-color:var(--zc-blue);box-shadow:0 0 0 1px var(--zc-blue)}
body:not(.browse-mode) .status-pill{border-radius:999px}
/* Browsing and playback keep their existing layout; controls share the new palette. */
body.browse-mode #app>nav,body.browse-mode .browse-content>nav.browse-section-tabs{background:var(--zc-panel-2);border-color:var(--zc-line);border-radius:999px}
body.browse-mode .browse-tools input,body.browse-mode .browse-tools select{background:var(--zc-field);border-color:var(--zc-line-2);border-radius:10px;color:var(--zc-text)}
body.browse-mode .browse-empty,body.browse-mode .browse-detail .episode-row{background:var(--zc-panel);border-color:var(--zc-line);border-radius:14px}
body.browse-mode .browse-card .my-list-button{background:var(--zc-panel-2);border-color:var(--zc-line-2);border-radius:10px}
body.browse-mode .browse-card .my-list-button:hover{background:var(--zc-hover);border-color:#16d7e877}

/* Profile page: same arrangement as the reference, with live account data. */
.account-page #sign-in{width:min(100%,530px);margin:18px auto 0;padding:28px;border-radius:20px;background:linear-gradient(160deg,var(--surface,#0b1a2a),var(--surface,#0b1a2a));border:1px solid var(--zc-line-2);box-sizing:border-box}
.account-page #sign-in h2{font-size:clamp(23px,4vw,30px);letter-spacing:-.03em}
.account-page #account-signup-promo{width:min(100%,530px);margin:16px auto 52px;display:grid;gap:14px}
.account-page #account-signup-promo[hidden]{display:none!important}
.account-signup-card{padding:25px 28px;border:1px solid #16d7e850;border-radius:20px;background:radial-gradient(360px 220px at 90% 5%,#23e5b438,transparent),linear-gradient(160deg,var(--surface,#0b1a2a),var(--surface,#0b1a2a));text-align:left}
.account-signup-eyebrow{display:block;margin-bottom:9px;color:var(--brand-text,#68e5ef);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.account-signup-card h2{margin:0 0 9px;color:var(--text,#f2f8fc);font-size:clamp(22px,4vw,29px);line-height:1.15;letter-spacing:-.035em}
.account-signup-card p{margin:0 0 19px;color:var(--text-muted,#b0c0ce);font-size:14px;line-height:1.6}
.account-signup-cta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:11px 17px;border-radius:11px;background:linear-gradient(110deg,var(--brand,#16d7e8),var(--accent,#23e5b4));color:var(--brand-ink,#03121e);font-size:14px;font-weight:750;text-decoration:none}
.account-signup-cta:hover{filter:brightness(1.1);color:var(--brand-ink,#03121e)}
.account-signup-chat{min-height:102px}
.account-page:has(#sign-in:not([hidden])) .brand-footer{display:none}

/* FAQ, setup, and leaderboard share the blue-violet controls used in navigation and checkout. */
#page-faq .page-hero,#page-install .page-hero,.zc-lb .page-hero{max-width:780px;margin-inline:auto;text-align:center}
#page-faq .care-search{min-height:54px;padding:13px 18px;border:1px solid #f2f8fc25;border-radius:14px;background:var(--bg,#050d19);color:var(--text,#f2f8fc);box-shadow:0 12px 28px #0003}
#page-faq .care-search:focus{border-color:var(--brand,#16d7e8);outline:3px solid #16d7e825}
#page-faq .filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 25px}
#page-faq .filter-chips button{min-height:40px;padding:9px 16px;border:1px solid #f2f8fc23;border-radius:999px;background:var(--surface,#0b1a2a);color:var(--text-muted,#b0c0ce);font-weight:650}
#page-faq .filter-chips button[aria-pressed=true]{border-color:var(--brand,#16d7e8);background:linear-gradient(110deg,var(--brand,#16d7e8),var(--accent,#23e5b4));color:var(--brand-ink,#03121e)}
#page-faq .faq-list details{margin-bottom:10px;border:1px solid #f2f8fc1c;border-radius:14px;background:var(--surface,#0b1a2a);box-shadow:inset 0 1px #f2f8fc08}
#page-faq .faq-list details[open]{border-color:#16d7e86e;background:var(--surface,#0b1a2a)}
#page-faq .faq-list summary{cursor:pointer;font-weight:650;color:var(--text,#f2f8fc)}
#page-faq .faq-list details p{color:var(--text-muted,#b0c0ce);line-height:1.65}
#page-faq .concierge-card{background:radial-gradient(circle at 90% 10%,#16d7e828,transparent 45%),var(--surface,#0b1a2a);border-color:#16d7e850}
#page-install .apps-guides{max-width:960px;margin-inline:auto}
#page-install .apps-tabs{padding:5px;border:1px solid #f2f8fc1c;border-radius:999px;background:var(--surface,#0b1a2a)}
#page-install .apps-tab{border-radius:999px;color:var(--text-muted,#b0c0ce)}
#page-install .apps-tab[aria-selected=true]{background:linear-gradient(110deg,var(--brand,#16d7e8),var(--accent,#23e5b4));color:var(--brand-ink,#03121e);box-shadow:0 7px 17px #16d7e838}
#page-install .apps-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#page-install .apps-list>li{min-width:0}
#page-install .apps-row{width:100%;min-height:86px;padding:13px;border:1px solid #f2f8fc1b;border-radius:15px;background:var(--surface,#0b1a2a);text-align:left}
#page-install .apps-row:hover{border-color:#16d7e880;background:var(--surface,#0b1a2a)}
#page-install .apps-ico{background:linear-gradient(145deg,var(--surface-2,#10263a),var(--accent,#23e5b4));border-color:#f2f8fc20;color:var(--text,#f2f8fc)}
#page-install .apps-action{color:var(--brand-text,#68e5ef)}
.zc-lb{max-width:1000px}
.zc-lb .zc-lb-total{border:1px solid #16d7e85a;background:linear-gradient(110deg,var(--surface,#0b1a2a),var(--surface,#0b1a2a));border-radius:14px}
.zc-lb .zc-lb-total-dot{background:#5bdbab;box-shadow:0 0 0 4px #5bdbab25}
.zc-lb .zc-lb-card{background:linear-gradient(170deg,var(--surface,#0b1a2a),var(--surface,#0b1a2a));border:1px solid #f2f8fc20;border-radius:20px}
.zc-lb .zc-lb-tabs{background:var(--bg,#050d19);border-color:#f2f8fc24;border-radius:999px}
.zc-lb .zc-lb-tabs button{border-radius:999px}
.zc-lb .zc-lb-tabs button[aria-selected=true]{background:linear-gradient(110deg,var(--brand,#16d7e8),var(--accent,#23e5b4));color:var(--brand-ink,#03121e)}
.zc-lb .zc-lb-row{border-color:#f2f8fc1b;background:var(--surface,#0b1a2a);border-radius:14px}
@media(max-width:650px){#page-install .apps-list{grid-template-columns:1fr}.account-page #sign-in,.account-signup-card{padding:21px}.zc-lb{padding-inline:16px}}
.account-page:has(#workspace:not([hidden])) main{max-width:1230px;padding:26px 24px 70px;text-align:left}
.account-page:has(#workspace:not([hidden])) #status{padding:0 0 10px 276px;color:var(--zc-muted)}
.account-page #workspace.dashboard-shell{grid-template-columns:248px minmax(0,1fr);gap:28px}
.account-page .account-sidebar{top:88px;padding:8px;background:var(--zc-panel);border:1px solid var(--zc-line);border-radius:18px}
.account-page .sidebar-label{padding:12px 12px 6px;margin:0;color:var(--zc-muted);font-size:11px;letter-spacing:.08em}
.account-page .account-sidebar nav{gap:3px}
.account-page .account-sidebar nav button,.account-page .account-sidebar nav a{position:relative;min-height:43px;padding:10px 12px;border-radius:10px;color:var(--zc-muted);font-weight:500}
.account-page .account-sidebar nav button:hover,.account-page .account-sidebar nav a:hover{background:var(--zc-hover);color:var(--zc-text)}
.account-page .account-sidebar nav [aria-current=page],.account-page .account-sidebar nav .sidebar-home[aria-current=page]{background:var(--zc-panel-2);border:0;color:var(--zc-text);font-weight:650;justify-content:flex-start}
.account-page .account-sidebar nav [aria-current=page]::before{content:"";position:absolute;left:-8px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--zc-gradient)}
.account-page .account-sidebar nav [aria-current=page] span{color:var(--zc-blue)}
.account-page .account-sidebar nav .sidebar-home{background:transparent;border:0;color:var(--zc-muted);font-weight:500;justify-content:flex-start;margin:0}
.account-page .account-sidebar #sidebar-logout{border-top:1px solid var(--zc-line);color:var(--zc-danger)}
.account-page .sidebar-help{border-top:1px solid var(--zc-line);margin:10px 8px 0;padding:18px 8px;background:linear-gradient(135deg,#16d7e810,#23e5b40a);border-radius:12px}
.account-page .sidebar-help a,.account-page .zc-lb-settings-link{color:var(--zc-blue);border-color:transparent}
.account-page .dashboard-heading{align-items:center;margin-bottom:20px}
.account-page .dashboard-heading h1{color:var(--zc-text);font-size:clamp(24px,2.4vw,34px);font-weight:700}
.account-page .expiry-card{background:var(--zc-field);border-color:var(--zc-line);border-radius:14px}
.account-page .expiry-card span{color:var(--zc-muted)}
.account-page .expiry-card strong{color:var(--zc-text)}
.account-page .account-view>.care-panel{padding:24px;margin-bottom:20px!important}
.account-page .account-view .care-panel h2{font-size:18px;font-weight:700}
.account-page .identity-grid{gap:0;margin:20px 0;border:1px solid var(--zc-line);border-radius:14px;overflow:hidden;grid-template-columns:1fr}
.account-page .identity-field{padding:17px 18px;background:var(--zc-field);border:0;border-radius:0;gap:5px}
.account-page .identity-field+.identity-field{border-top:1px solid var(--zc-line)}
.account-page .identity-field>span{font-size:12px;color:var(--zc-muted)}
.account-page .identity-field strong,.account-page .identity-field a{font-size:14px}
.account-page .profile-card{background:var(--zc-field);border-color:var(--zc-line);border-radius:14px}
.account-page .profile-avatar{background:var(--zc-gradient);border-radius:14px;color:var(--brand-ink,#03121e)}
.account-page .account-facts>div{border-color:var(--zc-line)}
.account-page .zc-lb-settings{background:var(--zc-panel)}
.account-page .zc-lb-form-row input{background:var(--zc-field)}
.account-page .account-home-bar{background:var(--zc-gradient);color:var(--brand-ink,#03121e)}

/* Admin pages retain their real forms/tables and receive matching surfaces. */
.admin-page main{max-width:1600px;text-align:left}
.admin-page .admin-heading h1{font-weight:700;letter-spacing:-.035em}
.admin-page .library-kicker{color:var(--zc-blue)}
.admin-page #operator-login{max-width:520px}
.admin-page .admin-summary>div,.admin-page .cc-kpi,.admin-page .cc-panel,.admin-page .admin-table-wrap,.admin-page .cc-table{
  background:var(--zc-panel);border-color:var(--zc-line);border-radius:16px;
}
.admin-page .admin-summary span,.admin-page .cc-kpi span{color:var(--zc-muted)}
.admin-page .admin-summary strong,.admin-page .cc-kpi strong{color:var(--zc-text)}
.admin-page .admin-table th,.admin-page .cc-table th{background:var(--zc-panel-2);color:var(--zc-muted);border-color:var(--zc-line)}
.admin-page .admin-table td,.admin-page .cc-table td{border-color:var(--zc-line);color:var(--zc-text)}
.admin-page .admin-table tr:hover td,.admin-page .cc-table tbody tr:hover td{background:var(--zc-hover)}
.admin-page .zc-cc{--cc-blue:var(--zc-blue);--cc-blue-soft:#16d7e820;--cc-line:var(--zc-line);--cc-panel:var(--zc-panel);--cc-text:var(--zc-text);--cc-muted:var(--zc-muted)}
.admin-page .cc-tab[aria-selected=true]{color:var(--zc-text);border-bottom-color:var(--zc-blue)}
.admin-page .cc-tabs{width:max-content;max-width:100%;gap:3px;padding:4px;background:var(--zc-panel);border:1px solid var(--zc-line);border-radius:999px}
.admin-page .cc-tab{padding:10px 15px;border:0;border-radius:999px;color:var(--zc-muted)}
.admin-page .cc-tab:hover{background:var(--zc-hover);color:var(--zc-text)}
.admin-page .cc-tab[aria-selected=true]{background:var(--zc-gradient);border:0;color:var(--brand-ink,#03121e)}
.admin-page .cc-btn{background:var(--zc-panel-2);border-color:var(--zc-line-2);color:var(--zc-text)}
.admin-page .cc-btn:hover{background:var(--zc-hover);border-color:#16d7e877}
.admin-page .cc-btn.cc-primary{background:var(--zc-gradient);border-color:transparent;color:var(--brand-ink,#03121e)}
.admin-page .cc-btn.cc-danger{background:#ff777712;border-color:#ff777755;color:var(--zc-danger)}
.admin-page .cc-seg{background:var(--zc-field);border-color:var(--zc-line)}
.admin-page .cc-seg button[aria-pressed=true]{background:var(--zc-gradient);color:var(--brand-ink,#03121e)}
@media(max-width:820px){
  .account-page #workspace.dashboard-shell{grid-template-columns:minmax(0,1fr);gap:18px}
  .account-page:has(#workspace:not([hidden])) #status{padding:0 0 10px}
  .account-page .account-sidebar{position:static;min-width:0}
  .account-page .account-sidebar nav{display:flex;flex-direction:row;gap:3px;overflow-x:auto;scrollbar-width:none}
  .account-page .account-sidebar nav button,.account-page .account-sidebar nav a{width:auto;flex:none;white-space:nowrap}
  .account-page .account-sidebar nav [aria-current=page]::before{display:none}
  .account-page .sidebar-label,.account-page .sidebar-help{display:none}
  .account-page .account-sidebar #sidebar-logout{border:0;margin:0;padding:10px 12px}
}
@media(max-width:650px){
  .account-page:has(#workspace:not([hidden])) main{padding:16px 16px 80px}
  .account-page .account-sidebar nav .sidebar-home{min-height:43px;grid-column:auto;margin:0}
  .account-page .account-view>.care-panel{padding:18px}
  .account-page .dashboard-heading{gap:12px}
  .account-page .expiry-card{min-width:0}
  .admin-page .admin-table tr{background:var(--zc-panel);border-color:var(--zc-line)}
}
/* iOS Home Screen can report a zero safe-area top while using a translucent status bar. */
@media (display-mode:standalone) and (max-width:700px) and (orientation:portrait){
  @supports (-webkit-touch-callout:none){
    body{padding-top:max(env(safe-area-inset-top,0px),54px)}
  }
}