/* A single, quiet visual system across public browsing, account, board, and operator tools. */
:root{--studio-bg:#050d19;--studio-panel:#0b1a2a;--studio-panel-raised:#10263a;--studio-line:#91b8d91f;--studio-text:#f2f8fc;--studio-muted:#b0c0ce;--studio-accent:#16d7e8}
html{scroll-behavior:smooth}
body{background:var(--studio-bg);color:var(--studio-text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
:is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--studio-accent);outline-offset:3px}
body>header{border-bottom-color:var(--border,#91b8d91f);background:#050d19e8}
body>header>.site-nav{border-color:var(--studio-line);background:#0b1a2aeb;box-shadow:0 12px 35px #0005}
body>header>.site-nav a:hover,body>header>.site-nav .nav-watch:hover{color:var(--text,#f2f8fc)!important}

/* Home: let the artwork introduce the service; keep the next action unmistakable. */
#welcome.welcome{gap:clamp(24px,4vw,48px)}
#welcome .home-showcase{border-color:var(--studio-line);border-radius:22px;box-shadow:0 28px 70px #0007}
#welcome .home-showcase-content{background:transparent;padding:clamp(22px,3vw,40px)}
#welcome .home-showcase-message h1{max-width:15ch;font-size:clamp(30px,3.4vw,48px);font-weight:780;letter-spacing:-.052em;line-height:1.04}
#welcome .home-showcase-message>p:last-child{max-width:50ch;color:var(--text-muted,#b0c0ce);line-height:1.55}
#welcome .home-action{min-height:48px;border-radius:11px;font-weight:730}
#welcome .home-action-primary{background:var(--brand,#16d7e8);border-color:var(--brand,#16d7e8);color:var(--brand-ink,#03121e)}
#welcome .home-action-secondary{border-color:var(--border-strong,#91b8d938);background:var(--surface,#0b1a2a);color:var(--text,#f2f8fc)}
#welcome .home-intro h2{font-weight:760;letter-spacing:-.055em}

/* Browse: search remains a primary control on small screens, and result cards stay readable. */
body.browse-mode .browse-shell{color:var(--studio-text)}
body.browse-mode .browse-header-search{border-color:var(--border-strong,#91b8d938);background:var(--surface-2,#10263a);color:var(--text,#f2f8fc);box-shadow:none}
body.browse-mode .browse-mobile{border-top:1px solid var(--studio-line);background:var(--surface,#0b1a2a)}
body.browse-mode .browse-mobile-btn.active{background:var(--brand,#16d7e8);color:var(--brand-ink,#03121e)}
.browse-search-overlay{background:var(--bg,#050d19)}
.browse-search-overlay-bar{border-bottom:1px solid var(--studio-line);background:var(--surface,#0b1a2a)}
.browse-search-overlay-match{border-color:var(--studio-line);background:var(--surface,#0b1a2a)}
.zc-search-page-heading h1{font-weight:780;letter-spacing:-.045em}
.zc-search-result-section>h2{font-weight:730}

/* The account, leaderboard and admin now use the same surface depth and typography. */
.account-page .dashboard-heading,.account-page .account-side-card,.account-page .account-view>.care-panel{border-color:var(--studio-line);background:var(--studio-panel);box-shadow:inset 0 1px #f2f8fc08}
.account-page .dashboard-heading h1{font-size:clamp(23px,2.5vw,30px);font-weight:760}
.account-page .account-sidebar nav [aria-current=page]{background:var(--surface-2,#10263a);box-shadow:inset 3px 0 0 var(--studio-accent)}
.zc-lb-page .tk-board{font-family:inherit;background:transparent}
.zc-lb-page .tk-board-head h2{font-size:clamp(30px,3vw,40px);font-weight:790;letter-spacing:-.045em}
.zc-lb-page .tk-community-total,.zc-lb-page .tk-polish-pod,.zc-lb-page .tk-row{border-color:var(--studio-line);background-color:var(--studio-panel)}
.zc-lb-page .tk-polish-gold{border-color:#e1b55c9c;background:radial-gradient(120% 90% at 50% 0%,#b984262d,transparent 65%),var(--studio-panel);box-shadow:0 20px 52px #d49e2419}
.zc-lb-page .tk-polish-silver{border-color:#a7b8d178;background:radial-gradient(120% 90% at 50% 0%,#8da6c022,transparent 65%),var(--studio-panel)}
.zc-lb-page .tk-polish-bronze{border-color:#bb7b5978;background:radial-gradient(120% 90% at 50% 0%,#ad684320,transparent 65%),var(--studio-panel)}
.zc-lb-page .tk-polish-name,.zc-lb-page .tk-row-heading strong{font-weight:780;letter-spacing:-.025em}
.zc-lb-page .tk-polish-minutes strong{font-variant-numeric:tabular-nums}

.admin-page .admin-summary>div,.admin-page .admin-table-wrap,.admin-page #customer-detail,.admin-page .care-panel{border-color:var(--studio-line);background:var(--studio-panel);box-shadow:inset 0 1px #f2f8fc08}
.admin-page .admin-summary strong{color:var(--text,#f2f8fc);font-weight:760;letter-spacing:-.04em}
.admin-page .admin-toolbar{align-items:center;gap:10px}
.admin-page .admin-toolbar h2{font-size:clamp(23px,2.5vw,30px);font-weight:760;letter-spacing:-.035em}
.admin-page .admin-table th{border-bottom-color:var(--studio-line);background:var(--surface,#0b1a2a);color:var(--brand-text,#68e5ef);font-size:11px;font-weight:750}
.admin-page .admin-table td{border-bottom-color:var(--border,#91b8d91f);color:var(--text,#f2f8fc)}
.admin-page .admin-table tbody tr:hover{background:#10263a7a}
.admin-page .admin-search input,.admin-page .admin-search select,.admin-page .ticket-form input,.admin-page .ticket-form select,.admin-page .ticket-form textarea{border-color:var(--border,#91b8d91f);background:var(--bg,#050d19);color:var(--text,#f2f8fc)}
.admin-page .admin-actions button,.admin-page .admin-toolbar a{min-height:44px}

@media(max-width:700px){
  body.browse-mode>header>.site-nav .browse-header-search{display:inline-flex!important;align-items:center;justify-content:center;flex:none;width:42px;height:42px;min-height:42px;margin:0 5px 0 0;padding:0;border-radius:12px}
  body.browse-mode .zc-floating-chat{right:12px;bottom:calc(79px + env(safe-area-inset-bottom));width:52px;min-height:52px;padding:4px;gap:0;border-radius:50%}
  body.browse-mode .zc-floating-chat-icon{width:42px;height:42px}
  body.browse-mode .zc-floating-chat-label{display:none}
  .browse-shell .zc-search-page{padding-bottom:120px}
  .zc-lb-page .tk-board{padding-inline:clamp(12px,4vw,22px)}
  .zc-lb-page .tk-board-head{align-items:center}
  .account-page .dashboard-heading{padding:16px}
  #welcome .home-showcase-content{align-items:stretch;gap:20px}
  #welcome .home-showcase-message h1{max-width:none}
}
@media(max-width:420px){
  #welcome .home-showcase-actions{flex-direction:column;align-items:stretch}
  #welcome .home-action{width:100%;box-sizing:border-box}
  .admin-page .admin-table-wrap{border-radius:12px}
  .zc-lb-page .tk-polish-name{white-space:normal;overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Shared rhythm: fewer decorative effects, clearer action hierarchy. */
body{font-feature-settings:"kern" 1,"ss01" 1}
body :is(h1,h2,h3){text-wrap:balance}
.care-panel{border-radius:18px}
.care-panel :is(h2,h3){letter-spacing:-.035em}
.care-panel p{line-height:1.6}
body :is(button,.button-link,.home-action){transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s}
body :is(button,.button-link,.home-action):active:not(:disabled){transform:translateY(1px)}
body :is(button,.button-link,.home-action):disabled{cursor:not-allowed;opacity:.55}

/* Search is the first useful action on a phone. Its field and category control share one shape. */
.browse-shell .browse-tools.zc-classic-search{gap:12px;margin-bottom:28px}
.browse-shell .zc-classic-search-field input,
.browse-shell .zc-classic-category{border-color:var(--border,#91b8d91f);background:var(--surface,#0b1a2a);box-shadow:inset 0 1px #f2f8fc08}
.browse-shell .zc-classic-search-field input:focus{border-color:var(--brand,#16d7e8);box-shadow:0 0 0 3px #16d7e824}
.browse-shell .zc-classic-search-submit{border:1px solid var(--brand,#16d7e8);background:var(--brand,#16d7e8);color:var(--brand-ink,#03121e);box-shadow:none;font-weight:760}
.browse-shell .zc-classic-search-submit:hover{background:var(--brand-hover,#50e6ec);filter:none}
.browse-search-overlay-bar input{font-size:16px}
.browse-search-overlay-match:hover{border-color:var(--brand,#16d7e8);background:var(--surface,#0b1a2a)}

/* The leaderboard should read as a scorecard, with the medals doing the visual work. */
.zc-lb-page .tk-board-head{padding-bottom:20px;border-bottom:1px solid var(--studio-line)}
.zc-lb-page .tk-board-head .tk-board-eyebrow{color:var(--brand-text,#68e5ef);font-size:11px;letter-spacing:.16em}
.zc-lb-page .tk-board-head h2{letter-spacing:-.045em;line-height:1.08}
.zc-lb-page .tk-polish-pod{border-radius:18px;box-shadow:none}
.zc-lb-page .tk-polish-pod.tk-place-1{box-shadow:0 18px 45px #0006}
.zc-lb-page .tk-polish-pod .tk-polish-name{letter-spacing:-.03em}
.zc-lb-page .tk-polish-pod .tk-polish-tier{background:#f2f8fc0b;border-color:#f2f8fc24}
.zc-lb-page .tk-community-total{border-radius:16px}
.zc-lb-page .tk-community-total .tk-total-label{letter-spacing:.12em}
.zc-lb-page .tk-polish-row{border-radius:14px;box-shadow:inset 0 1px #f2f8fc07}
.zc-lb-page .tk-polish-row:hover{border-color:var(--border-strong,#91b8d938);background:var(--surface,#0b1a2a)}
.zc-lb-page .tk-row-count strong,
.zc-lb-page .tk-polish-minutes strong,
.zc-lb-page .tk-total-number strong{font-variant-numeric:tabular-nums lining-nums}
.zc-lb-page #lb-refresh:hover{border-color:var(--brand,#16d7e8);color:var(--text,#f2f8fc);background:var(--surface-2,#10263a)}

/* Operator workspace: primary task at the top, dense data below it. */
.admin-page main{width:min(100% - 32px,1280px);margin-inline:auto}
.admin-page .admin-toolbar{padding-top:28px;border-top:1px solid var(--studio-line)}
.admin-page .admin-toolbar .button-link:last-child{background:var(--brand,#16d7e8);border-color:var(--brand,#16d7e8);color:var(--brand-ink,#03121e);font-weight:750}
.admin-page .admin-toolbar .button-link:last-child:hover{background:var(--brand-hover,#50e6ec)}
.admin-page #import-panel{max-width:960px;border-radius:20px}
.admin-page #import-panel>h2{font-size:clamp(24px,2.4vw,31px);margin-bottom:6px}
.admin-page #import-panel>p{max-width:70ch;color:var(--text-muted,#b0c0ce)}
.admin-page #import-form fieldset{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 16px;border-radius:14px;padding:18px}
.admin-page #import-form fieldset>div,
.admin-page #import-form fieldset>p,
.admin-page #import-form fieldset>[data-drama-only],
.admin-page #generate-customer-login{grid-column:1/-1}
.admin-page #import-form [data-provider-only]{padding:18px;border:1px solid var(--studio-line);border-radius:14px;background:#101724}
.admin-page #import-form [data-provider-only] h3{margin:0 0 12px;font-size:17px}
.admin-page #playlist-url{width:100%;box-sizing:border-box}
.admin-page #import-submit{min-height:50px;border:1px solid var(--brand,#16d7e8);border-radius:11px;background:var(--brand,#16d7e8);color:var(--brand-ink,#03121e);font-weight:760}
.admin-page #import-submit:hover{background:var(--brand-hover,#50e6ec)}
.admin-page .new-login-details{border-radius:18px}
.admin-page .new-login-details button{background:var(--brand,#16d7e8);color:var(--brand-ink,#03121e)}

@media(max-width:700px){
  .browse-shell .browse-tools.zc-classic-search{gap:8px;margin-bottom:18px}
  .browse-shell .zc-classic-search-field input,.browse-shell .zc-classic-search-submit,.browse-shell .zc-classic-category{min-height:50px}
  .zc-lb-page .tk-board-head{padding-bottom:18px}
  .zc-lb-page .tk-community-totals{gap:9px}
  .admin-page main{width:min(100% - 24px,1280px)}
  .admin-page #import-form fieldset{grid-template-columns:1fr;padding:15px}
  .admin-page #import-form fieldset>*{grid-column:1}
}