/**
 * AICoachess — Design Polish v1
 * Loaded LAST on every page. Fixes all remaining dark-theme inconsistencies
 * that per-page inline <style> blocks, JS-injected HTML, and base.css cause.
 * Uses !important throughout — it beats inline styles without !important.
 */

/* ════════════════════════════════════════════════════════════════
   GLOBAL — belt-and-suspenders resets
════════════════════════════════════════════════════════════════ */

html, body {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-sans) !important;
}

/* base.css sets h* { color: var(--color-dark) } and a { color: #3498db } */
h1, h2, h3, h4, h5, h6 {
  color: var(--ui-text) !important;
}
.main-content a:not([class]),
.ui-page-content a:not([class]) {
  color: var(--ui-gold);
}
small { color: var(--ui-text-3) !important; }

/* ── Keyboard focus rings — clearly visible on the dark theme but never
   shown on mouse interaction (focus-visible). Stronger ring for gold
   buttons since a gold outline against gold is invisible. ── */
:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--ui-gold);
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus-visible,
.btn:focus-visible,
a:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,193,7,0.18);
}
/* On gold backgrounds (the primary CTA), invert the ring so it stays visible */
.premium-gold-btn:focus-visible,
.btn-start:focus-visible,
.btn-signup:focus-visible,
.btn-login:focus-visible,
.btn-auth:focus-visible,
[class*="paymentButton"]:focus-visible,
.btn-cta:focus-visible {
  outline: 2px solid rgba(0,0,0,0.7);
  box-shadow: 0 0 0 4px rgba(255,193,7,0.35);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: rgba(255,193,7,0.5) !important;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.14) !important;
}


/* ════════════════════════════════════════════════════════════════
   MY-ANALYSES — cards, modal, empty states
════════════════════════════════════════════════════════════════ */

/* Generic section wrapper that base.css might colour */
.section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.section > h1,
.section > h2 {
  font-family: var(--ui-font-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ui-text) !important;
  padding-bottom: 14px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid var(--ui-border) !important;
}

/* Analysis cards — single-row list layout (see my-analyses.html for grid template) */
.analysis-card {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
  color: var(--ui-text-2) !important;
  transition: border-color 0.2s, background 0.2s, transform 0.15s !important;
}
.analysis-card:hover {
  background: rgba(255,193,7,0.02) !important;
  border-color: rgba(255,193,7,0.25) !important;
  transform: translateX(2px) !important;
  box-shadow: none !important;
}
.analysis-card-title {
  color: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.analysis-card-date {
  color: var(--ui-text-3) !important;
  font-family: var(--ui-font-mono) !important;
  font-size: 11px !important;
}
.analysis-card-cell-label {
  color: var(--ui-text-3) !important;
  font-family: var(--ui-font-mono) !important;
}
.analysis-card-cell-value {
  color: var(--ui-text) !important;
}

/* Loading / empty states */
.loading-spinner {
  color: var(--ui-text-3) !important;
  font-family: var(--ui-font-mono) !important;
}
.empty-state {
  background: var(--ui-surface) !important;
  border: 1px dashed var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  text-align: center !important;
  padding: 56px 32px !important;
  min-height: 320px !important;
}
.empty-state h3 { color: var(--ui-text) !important; margin-bottom: 10px !important; }
.empty-state p  { color: var(--ui-text-3) !important; margin-bottom: 24px !important; }
/* Auth-prompt buttons inside empty state */
.empty-state a.btn {
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  color: #0b0803 !important;
  border: none !important;
  font-weight: 700 !important;
}
/* Sign Up = secondary / outline — must come after the rule above */
.empty-state a.btn:nth-of-type(2) {
  background: transparent !important;
  border: 1px solid rgba(218,177,72,0.45) !important;
  color: var(--ui-gold) !important;
}

/* Modal */
.modal {
  background: rgba(0,0,0,0.72) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.modal-content {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6) !important;
  color: var(--ui-text-2) !important;
}
.modal-close {
  color: var(--ui-text-3) !important;
}
.modal-close:hover { color: var(--ui-text) !important; }

/* Form groups */
.form-group { margin-bottom: 16px !important; }
.form-group label {
  color: var(--ui-text-3) !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-family: var(--ui-font-mono) !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.form-group input {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  border-radius: var(--ui-radius-sm) !important;
  font-size: 14px !important;
  padding: 11px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.form-group input:focus {
  border-color: rgba(255,193,7,0.4) !important;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.08) !important;
  outline: none !important;
}
.form-group input::placeholder { color: var(--ui-text-3) !important; }
.form-group small { color: var(--ui-text-3) !important; }

/* Alert boxes (password change etc.) */
.alert.alert-success, .alert-success {
  background: rgba(16,185,129,0.1) !important;
  color: var(--ui-emerald) !important;
  border: 1px solid rgba(16,185,129,0.25) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 12px 16px !important;
}
.alert.alert-error, .alert-error {
  background: rgba(239,68,68,0.1) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239,68,68,0.2) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 12px 16px !important;
}

/* Inline #856404, #155724, #721c24 text colors inside warning/success/error boxes
   (the box overrides above remap the surrounding background; the inline text color
   would otherwise stay on dark yellow / dark green / dark red which is unreadable) */
[style*="color: #856404"], [style*="color:#856404"] { color: #fbbf24 !important; }
[style*="color: #155724"], [style*="color:#155724"] { color: var(--ui-emerald) !important; }
[style*="color: #721c24"], [style*="color:#721c24"] { color: #fca5a5 !important; }

/* "Start Analysis" button on top subscription banner (id=goToAnalysisBtn) */
#goToAnalysisBtn[style*="background: white"],
#goToAnalysisBtn[style*="background:white"] {
  background: rgba(255,255,255,0.92) !important;
  color: var(--ui-emerald) !important;
}


/* ════════════════════════════════════════════════════════════════
   CONTACT — section, info card, FAQ
════════════════════════════════════════════════════════════════ */

.contact-section {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: none !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 32px !important;
}
.contact-section h2 {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 20px !important;
}
.contact-section > p { color: var(--ui-text-3) !important; text-align: center !important; }
.contact-info {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  padding: 24px !important;
}
.contact-item { color: var(--ui-text-2) !important; margin: 16px 0 !important; }
.contact-icon {
  color: var(--ui-gold) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: var(--ui-font-mono) !important;
  background: rgba(255,193,7,0.07) !important;
  border: 1px solid rgba(255,193,7,0.14) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 5px 8px !important;
  text-align: center !important;
  min-width: 38px !important;
  letter-spacing: 0.03em !important;
  margin-right: 12px !important;
}
.contact-link { color: var(--ui-gold) !important; font-weight: 600 !important; }
.contact-link:hover { color: #e6ab00 !important; text-decoration: none !important; }

/* FAQ section */
.faq-section h3, .faq-header-desktop {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  margin-bottom: 18px !important;
}
/* CSS !important overrides JS-set element.style properties */
.faq-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.faq-question {
  background: transparent !important;
  color: var(--ui-text) !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
/* :hover CSS !important wins over JS mouseenter inline style */
.faq-question:hover {
  background: transparent !important;
  color: var(--ui-gold) !important;
}
.faq-toggle {
  color: var(--ui-text-3) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  transition: transform 0.2s, color 0.15s;
  display: inline-block;
}
.faq-question:hover .faq-toggle { color: var(--ui-gold) !important; }
.faq-question[aria-expanded="true"] .faq-toggle,
.faq-item.open .faq-toggle { transform: rotate(180deg); }
.faq-answer {
  background: transparent !important;
  color: var(--ui-text-3) !important;
  padding: 4px 0 16px !important;
  line-height: 1.7 !important;
  font-size: 14px !important;
  border: none !important;
  border-radius: 0 !important;
}
/* Override specific inline bg values on faq-answer */
.faq-answer[style*="background: #fafafa"],
.faq-answer[style*="background: #f8f9fa"] {
  background: transparent !important;
}
/* Contact page CTA button */
.contact-section a.btn {
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: var(--ui-radius-md) !important;
  padding: 12px 28px !important;
  display: inline-block !important;
  text-decoration: none !important;
  margin-top: 8px !important;
}
/* Mobile FAQ accordion header */
.faq-header-mobile {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
}
.faq-header-mobile h3       { color: var(--ui-text-3) !important; }
.faq-toggle-icon-mobile     { color: var(--ui-text-3) !important; }


/* ════════════════════════════════════════════════════════════════
   LOGIN PAGE (standalone — no sidebar layout)
════════════════════════════════════════════════════════════════ */

.login-page { background: var(--ui-bg) !important; font-family: var(--ui-font-sans) !important; }
.login-header {
  background: var(--ui-surface-2) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  padding: 16px 32px !important;
}
.login-header-logo span {
  color: var(--ui-gold) !important;
  font-family: var(--ui-font-serif) !important;
  font-weight: 700 !important;
}
.login-header-logo span em { color: var(--ui-gold) !important; font-style: normal !important; }
.login-header-nav a { color: var(--ui-text-3) !important; font-size: 13px !important; }
.login-header-nav a:hover { color: var(--ui-text) !important; }
.login-body { background: var(--ui-bg) !important; }
.context-banner {
  background: rgba(255,193,7,0.05) !important;
  border: 1px solid rgba(255,193,7,0.15) !important;
  border-radius: var(--ui-radius-md) !important;
}
.context-banner p, .context-banner strong { color: var(--ui-text-2) !important; }
.context-banner .cb-note { color: var(--ui-text-3) !important; }
.login-card {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 32px 64px rgba(0,0,0,0.45) !important;
}
.login-card-title {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}
.login-card-sub { color: var(--ui-text-3) !important; }
/* login field labels and inputs */
.login-card .field label,
.login-page  .field label {
  color: var(--ui-text-3) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: var(--ui-font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}
.login-card .field input,
.login-page  .field input {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  border-radius: var(--ui-radius-sm) !important;
  font-size: 14px !important;
}
.login-card .field input:focus,
.login-page  .field input:focus {
  border-color: rgba(255,193,7,0.4) !important;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.08) !important;
  outline: none !important;
  background: var(--ui-surface-3) !important;
}
.login-card .field input::placeholder { color: var(--ui-text-3) !important; }
.forgot-row a { color: var(--ui-gold) !important; }
.forgot-row a:hover { color: #e6ab00 !important; text-decoration: underline !important; }
.btn-login {
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  color: #000 !important;
  border: none !important;
  border-radius: var(--ui-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.btn-login:hover:not(:disabled) {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(255,193,7,0.22) !important;
}
.or-divider { color: var(--ui-text-3) !important; }
.or-divider::before, .or-divider::after { background: var(--ui-border) !important; }
.signup-row { color: var(--ui-text-3) !important; }
.signup-row a { color: var(--ui-gold) !important; font-weight: 700 !important; }
.login-footer-note { color: var(--ui-text-3) !important; }
#alertBox.success {
  background: rgba(16,185,129,0.1) !important;
  color: var(--ui-emerald) !important;
  border: 1px solid rgba(16,185,129,0.25) !important;
  border-radius: var(--ui-radius-sm) !important;
}
#alertBox.error {
  background: rgba(239,68,68,0.1) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
  border-radius: var(--ui-radius-sm) !important;
}


/* ════════════════════════════════════════════════════════════════
   SIGNUP PAGE (mirrors login)
════════════════════════════════════════════════════════════════ */

.signup-page { background: var(--ui-bg) !important; font-family: var(--ui-font-sans) !important; }
.signup-header {
  background: var(--ui-surface-2) !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
.signup-header-logo span {
  color: var(--ui-gold) !important;
  font-family: var(--ui-font-serif) !important;
  font-weight: 700 !important;
}
.signup-body { background: var(--ui-bg) !important; }
.signup-card {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 32px 64px rgba(0,0,0,0.45) !important;
}
.signup-card-title {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}
.signup-card-sub { color: var(--ui-text-3) !important; }
.btn-signup {
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  color: #000 !important;
  border: none !important;
  border-radius: var(--ui-radius-sm) !important;
  font-weight: 700 !important;
}

/* Signup platform toggle */
.platform-toggle button {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-3) !important;
  border-radius: var(--ui-radius-sm) !important;
}
.platform-toggle button.active {
  background: rgba(255,193,7,0.1) !important;
  border-color: rgba(255,193,7,0.3) !important;
  color: var(--ui-gold) !important;
}

/* Health check note */
.hc-note {
  background: rgba(16,185,129,0.06) !important;
  border: 1px solid rgba(16,185,129,0.2) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-emerald) !important;
}

/* Optional section label */
.optional-section-label {
  color: var(--ui-text-3) !important;
  font-family: var(--ui-font-mono) !important;
}

/* Section divider */
.section-divider {
  border-top: 1px solid var(--ui-border) !important;
}

/* Login row */
.login-row { color: var(--ui-text-3) !important; }
.login-row a { color: var(--ui-gold) !important; font-weight: 700 !important; }


/* ════════════════════════════════════════════════════════════════
   CHESS-PROFILE — override inline <style> light-mode classes
   (new-ui.css covers .setup-card / .results-card / .hc-card;
    these are the remaining white-background elements)
════════════════════════════════════════════════════════════════ */

.section-card {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
}
.section-card h2 {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
.analyzing-header {
  background: var(--ui-surface-2) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: none !important;
}
.analyzing-header-text h2 { color: var(--ui-text) !important; font-family: var(--ui-font-serif) !important; }
.analyzing-header-text p  { color: var(--ui-text-3) !important; }
.progress-note            { color: var(--ui-text-3) !important; }
.game-progress-card {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-left-color: var(--ui-gold) !important;
  box-shadow: none !important;
}
.game-num { color: var(--ui-text-3) !important; }
.game-detail-text { color: var(--ui-text-3) !important; }
.platform-tab {
  background: var(--ui-surface-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-3) !important;
}
.platform-tab.active {
  background: rgba(255,193,7,0.1) !important;
  border-color: rgba(255,193,7,0.3) !important;
  color: var(--ui-gold) !important;
}
.report-header h1,
.report-header h2 {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
}
#playerTypeName {
  font-size: 2em;
  font-weight: 700;
  margin-block: 0.67em;
}
.report-subtitle { color: var(--ui-text-3) !important; font-size: 13px !important; }
.metric-label { color: var(--ui-text-3) !important; font-size: 12px !important; }
.metric-sublabel { color: var(--ui-text-3) !important; font-size: 11px !important; }


/* ════════════════════════════════════════════════════════════════
   INDEX — premium section tweaks not caught by new-ui.css
════════════════════════════════════════════════════════════════ */

/* Kicker labels */
.premium-kicker {
  color: var(--ui-gold) !important;
  font-family: var(--ui-font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* Access card */
#premiumAccessCard {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  padding: 14px 18px !important;
}
#premiumAccessCard h2    { color: var(--ui-text) !important; font-size: 15px !important; margin: 0 0 3px !important; }
#premiumAccessCard p     { color: var(--ui-text-3) !important; font-size: 13px !important; margin: 0 !important; }
.premium-access-icon     { color: var(--ui-gold) !important; font-size: 26px !important; }

/* Plan cards */
.premium-plan-card {
  padding: 24px !important;
}
.premium-plan-card h3 {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 10px 0 4px !important;
}
/* tagline is a descendant (inside .plan-header), not a direct child — use descendant combinator */
.premium-plan-card p:not(.premium-price-note):not(.premium-trial-note):not(.premium-plan-footnote) {
  color: #c2c2cc !important;   /* readable, was barely-visible text-3 */
  font-size: 13px !important;
}
/* Footnotes carry inline color:#999/#666 AND a text-4 !important rule — beat both with IDs */
#finePrintOneOff, #finePrintSub, #oneOffCurrencyNote, #subCurrencyNote,
.premium-plan-card .premium-plan-footnote {
  color: #b0b0ba !important;
}
#perMonthText, #oneOffStrikePrice {
  color: #c2c2cc !important;
}
.premium-plan-card ul li {
  color: #d4d4dc !important;
  font-size: 13px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  line-height: 1.5 !important;
}
.premium-price-note, .premium-plan-footnote {
  color: #c2c2cc !important;
  font-size: 12px !important;
  text-align: center !important;   /* center "per month" / "per analysis" under the price */
}
.premium-trial-note {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  align-self: center !important;   /* center the pill in the flex-column header */
  margin-left: auto !important;
  margin-right: auto !important;
  background: rgba(255,193,7,0.08) !important;
  border: 1px solid rgba(255,193,7,0.2) !important;
  color: var(--ui-gold) !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 14px !important;
  white-space: nowrap !important;
  margin-top: 8px !important;
}

/* Section heading in pricing / difference */
.premium-section-title h1,
.premium-section-title h2 {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
}

/* ── KPI Stats strip — PREMIUM REDESIGN ─────────────────────────── */
.premium-stat-icon { display: none !important; }

/* Container: full-width dark card with glowing gold border + radial vignette */
.premium-stats {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(218,177,72,0.05) 0%, transparent 55%),
    radial-gradient(100% 100% at 50% 120%, rgba(218,177,72,0.04) 0%, transparent 60%),
    linear-gradient(180deg, #141416 0%, #0b0b0d 55%, #141416 100%) !important;
  border: 1px solid rgba(218,177,72,0.5) !important;
  box-shadow: 0 0 90px rgba(218,177,72,0.16), 0 0 30px rgba(218,177,72,0.08), inset 0 0 80px rgba(0,0,0,0.5) !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

/* King/brand silhouette bleeding in from the LEFT edge */
.pstat-deco-king {
  position: absolute !important;
  left: -40px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 150% !important;
  width: auto !important;
  opacity: 0.05 !important;
  filter: grayscale(0.2) brightness(1.2) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 85%) !important;
          mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 85%) !important;
}

/* Checkerboard texture bleeding in from the TOP-RIGHT corner.
   Selector must out-specify '.premium-stats > div' (0,1,1) below, so we
   qualify with the parent → (0,2,1). */
.premium-stats > .pstat-deco-check {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 240px !important;
  height: 160px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image:
    linear-gradient(45deg, rgba(218,177,72,0.5) 25%, transparent 25%, transparent 75%, rgba(218,177,72,0.5) 75%),
    linear-gradient(45deg, rgba(218,177,72,0.5) 25%, transparent 25%, transparent 75%, rgba(218,177,72,0.5) 75%) !important;
  background-size: 26px 26px !important;
  background-position: 0 0, 13px 13px !important;
  opacity: 0.08 !important;
  -webkit-mask-image: radial-gradient(120% 120% at 100% 0%, #000 0%, transparent 65%) !important;
          mask-image: radial-gradient(120% 120% at 100% 0%, #000 0%, transparent 65%) !important;
}

/* Top + bottom bright gold horizontal light streaks */
.premium-stats::before,
.premium-stats::after {
  content: '' !important;
  position: absolute !important;
  left: 5% !important;
  right: 5% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(218,177,72,0.2) 10%, rgba(248,210,90,0.95) 40%, rgba(255,220,100,1) 50%, rgba(248,210,90,0.95) 60%, rgba(218,177,72,0.2) 90%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.premium-stats::before { top: 0 !important; }
.premium-stats::after  { bottom: 0 !important; }

/* Gold vertical dividers between stats — sit above the decoration.
   :not(.pstat-deco-check) keeps the checkerboard div out of this rule so it
   stays absolutely positioned (see rule above). */
.premium-stats > div:not(.pstat-deco-check) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 18px 28px !important;
  gap: 0 !important;
  border: none !important;
  border-right: 1px solid rgba(218,177,72,0.22) !important;
  border-bottom: none !important;
  position: relative !important;
  z-index: 1 !important;
}
.premium-stats > div:not(.pstat-deco-check):last-child { border-right: none !important; }

/* Circular icon ring — 54px, compact + elegant, with gold glow */
.pstat-ring {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(218,177,72,0.65) !important;
  background: radial-gradient(circle at center, rgba(218,177,72,0.14) 0%, rgba(218,177,72,0.04) 70%) !important;
  box-shadow: 0 0 20px rgba(218,177,72,0.26), 0 0 6px rgba(218,177,72,0.14), inset 0 0 12px rgba(218,177,72,0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 12px !important;
  color: #f0c84a !important;
  flex-shrink: 0 !important;
}
/* Icon: force 28px against the flex-shrink/viewBox quirk that pinned width to 24px */
.premium-stats .pstat-ring svg {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  min-height: 28px !important;
  flex-shrink: 0 !important;
  stroke-width: 1.8 !important;
}
/* Ensure SVG child elements also get thicker strokes */
.pstat-ring svg path,
.pstat-ring svg line,
.pstat-ring svg circle,
.pstat-ring svg polyline,
.pstat-ring svg rect {
  stroke-width: 1.8 !important;
}

/* Numbers: large gold serif */
.premium-stats strong,
.premium-stats div strong,
.premium-stats #statReports {
  display: block !important;
  color: #dab148 !important;
  font-size: clamp(32px, 3vw, 40px) !important;
  font-weight: 700 !important;
  font-family: var(--ui-font-serif) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  text-shadow: 0 0 30px rgba(218,177,72,0.35) !important;
}

/* Diamond separator */
.pstat-sep {
  display: block !important;
  color: rgba(218,177,72,0.6) !important;
  font-size: 6px !important;
  margin: 7px 0 5px !important;
}

/* Labels must beat new-ui.css '#statReportsLabel{color:var(--ui-text-3)}'
   which uses ID specificity + !important — match it with IDs, win on source order. */
#statReportsLabel,
#statLangsLabel,
#statRatingLabel {
  color: #ffffff !important;
}

/* Labels: uppercase mono white */
.premium-stats small,
.premium-stats div small {
  display: block !important;
  color: #ffffff !important;
  font-family: var(--ui-font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
}

/* FAQ accordion (details/summary) */
.premium-faq-list details {
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.02) !important;
  overflow: hidden !important;
}
.premium-faq-list details[open] {
  border-color: rgba(255,193,7,0.18) !important;
  background: rgba(255,193,7,0.02) !important;
}
.premium-faq-list summary {
  color: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 16px 18px !important;
  cursor: pointer !important;
  transition: color 0.15s !important;
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.premium-faq-list summary:hover { color: var(--ui-gold) !important; }
.premium-faq-list summary::after { color: var(--ui-gold) !important; font-size: 18px !important; }
.premium-faq-list p {
  color: var(--ui-text-3) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  padding: 0 18px 18px !important;
  margin: 0 !important;
}
.premium-faq-list a { color: var(--ui-gold) !important; }

/* Article cards */
.premium-section-row { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 16px !important; }
.premium-section-row h2 { color: var(--ui-text) !important; margin: 0 !important; }
.premium-section-row a  { color: var(--ui-gold) !important; font-size: 13px !important; font-weight: 600 !important; }

/* Free check "next step" info box */
.premium-free-next-step {
  background: rgba(255,193,7,0.04) !important;
  border: 1px solid rgba(255,193,7,0.1) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 12px 14px !important;
  margin: 12px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.premium-free-next-step strong { color: var(--ui-gold) !important; font-size: 13px !important; }
.premium-free-next-step span  { color: var(--ui-text-3) !important; font-size: 13px !important; }

/* Report preview */
.premium-work-box {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 14px !important;
  margin: 14px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
.premium-work-box strong {
  color: var(--ui-text-3) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-family: var(--ui-font-mono) !important;
  margin-bottom: 3px !important;
}
.premium-work-box span { color: var(--ui-text-2) !important; font-size: 13px !important; }

.premium-report-callout {
  background: rgba(255,193,7,0.03) !important;
  border-left: 2px solid var(--ui-gold) !important;
  padding: 12px 16px !important;
  border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0 !important;
  margin: 14px 0 !important;
}
.premium-report-callout span {
  color: var(--ui-text-3) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-family: var(--ui-font-mono) !important;
  display: block !important;
  margin-bottom: 3px !important;
}
.premium-report-callout strong { color: var(--ui-text-2) !important; font-size: 13px !important; }

/* ── Mini report card (coaching preview section) — PREMIUM REDESIGN ── */
.pmr-card {
  background: #141416 !important;
  border: 1px solid rgba(218,177,72,0.55) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-shadow: 0 0 50px rgba(218,177,72,0.18), 0 0 20px rgba(218,177,72,0.08), 0 24px 60px rgba(0,0,0,0.7) !important;
}
/* Right coaching copy fills the card height — natural flow with even gaps */
.premium-report-preview .premium-preview-copy {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 18px !important;
}
/* Zero each child's own margins so ONLY the flex gap controls spacing —
   otherwise h2/p/box/kicker margins stack with the gap and the rhythm looks
   random (was 40/24/30/44/30/18px). #premiumLanding raises specificity above
   the ID-level kicker margin rule. Now every gap is a consistent 18px. */
#premiumLanding .premium-report-preview .premium-preview-copy > * { margin: 0 !important; }
/* "Every report includes" deliverables strip */
.sample-includes {
  border: 1px solid rgba(218,177,72,0.22) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(218,177,72,0.05), rgba(255,255,255,0.01)) !important;
  padding: 16px !important;
}
.sample-includes-label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #dab148 !important;
  font-family: var(--ui-font-mono) !important;
  margin-bottom: 10px !important;
}
.sample-includes-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px 16px !important;
}
.sample-includes-grid > div {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  color: #d4d4dc !important;
  line-height: 1.35 !important;
}
.si-check {
  color: #dab148 !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
@media (max-width: 560px) {
  .sample-includes-grid { grid-template-columns: 1fr !important; }
}
/* CTA row: primary button + secondary text link */
.sample-cta-row {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  margin-top: 2px !important;
}
.sample-cta-row .premium-gold-btn {
  background: linear-gradient(135deg, #b8820a, #dab148, #f0c84a) !important;
  color: #0a0700 !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 22px !important;
  border-radius: 9px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(218,177,72,0.28) !important;
}
.sample-cta-row .premium-gold-btn:hover { opacity: 0.9 !important; }

/* Header bar */
.pmr-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 18px !important;
  background: rgba(218,177,72,0.1) !important;
  border-bottom: 1px solid rgba(218,177,72,0.2) !important;
}
.pmr-badge {
  color: var(--ui-gold) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.pmr-badge-logo {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 5px rgba(218,177,72,0.5)) !important;
}

/* Meta pill */
.pmr-meta,
.pmr-meta-pill {
  color: #cccccc !important;
  font-size: 11px !important;
  font-family: var(--ui-font-mono) !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
}

/* Phase grades row */
.pmr-grades {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  gap: 0 !important;
}
.pmr-grades > div {
  text-align: center !important;
  position: relative !important;
}
.pmr-grades > div + div::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 10% !important;
  bottom: 10% !important;
  width: 1px !important;
  background: rgba(255,255,255,0.08) !important;
}
.pmr-phase {
  display: block !important;
  font-size: 9px !important;
  color: #dab148 !important;
  font-family: var(--ui-font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 5px !important;
}
.pmr-grade {
  display: block !important;
  font-size: 19px !important;   /* percentages are wider than letter grades */
  font-weight: 700 !important;
  font-family: var(--ui-font-serif) !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
}
.pmr-grade-a { color: var(--ui-emerald) !important; }
.pmr-grade-b { color: var(--ui-text) !important; }
.pmr-grade-c { color: #fbbf24 !important; }

/* Metrics row */
.pmr-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.pmr-metrics > div {
  text-align: center !important;
  position: relative !important;
}
.pmr-metrics > div + div::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 10% !important;
  bottom: 10% !important;
  width: 1px !important;
  background: rgba(255,255,255,0.08) !important;
}
.pmr-metrics span {
  display: block !important;
  font-size: 9px !important;
  color: rgba(218,177,72,0.6) !important;
  font-family: var(--ui-font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 3px !important;
}
.pmr-metrics strong {
  display: block !important;
  font-size: 14px !important;   /* "+1.4 → −2.1" needs to fit a 1/3 column */
  font-weight: 700 !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* Board area */
.pmr-board-wrap {
  padding: 14px !important;
  background: rgba(0,0,0,0.2) !important;
  overflow: hidden !important;   /* never let the board spill past the card */
}
/* Stage = exactly the board's box, so the threat overlay aligns to the squares */
.pmr-board-stage {
  position: relative !important;
  width: min(100%, 390px) !important;
  margin: 0 auto !important;
}
.pmr-board-stage .premium-sample-board-real {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.pmr-board-stage .premium-sample-board-real > div { max-width: 100% !important; }
/* Red threat arrows drawn over the board (8x8 unit grid) */
.pmr-threat-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 3 !important;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.28)) !important;
}

/* Coach's note */
.pmr-coach-note {
  padding: 14px 18px !important;
  background: rgba(218,177,72,0.06) !important;
  border-top: 1px solid rgba(218,177,72,0.2) !important;
}
.pmr-note-label {
  display: block !important;
  font-size: 9px !important;
  color: var(--ui-gold) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 5px !important;
  font-family: var(--ui-font-mono) !important;
}
.pmr-coach-note p {
  font-size: 12px !important;
  color: #cccccc !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.premium-report-link {
  color: var(--ui-gold) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-top: 10px !important;
}
.premium-report-link:hover { color: #e6ab00 !important; }

/* Report metrics row — capped to match the board shell width */
.premium-report-metrics { display: flex !important; gap: 10px !important; margin: 14px 0 !important; max-width: min(100%, 390px) !important; }
.premium-report-metrics > div {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 10px 12px !important;
  flex: 1 !important;
  text-align: center !important;
}
.premium-report-metrics span  { color: var(--ui-text-3) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-family: var(--ui-font-mono) !important; display: block !important; margin-bottom: 3px !important; }
.premium-report-metrics strong {
  color: var(--ui-text) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  font-family: var(--ui-font-serif) !important;
  display: block !important;
  line-height: 1.1 !important;
}

/* Move list */
.premium-move-list { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; margin-top: 10px !important; }
.premium-move-list span { background: rgba(255,255,255,0.04) !important; border: 1px solid var(--ui-border) !important; border-radius: 4px !important; padding: 3px 8px !important; font-family: var(--ui-font-mono) !important; font-size: 11px !important; color: var(--ui-text-3) !important; }

/* Final CTA */
.premium-final-cta > div > span { color: var(--ui-gold) !important; font-size: 30px !important; }
.premium-final-cta h2 { color: var(--ui-text) !important; font-family: var(--ui-font-serif) !important; }
.premium-final-cta p  { color: #c2c2cc !important; }
/* real logo in the final CTA, in a gold ring */
.final-cta-logo {
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(218,177,72,0.6) !important;
  background: radial-gradient(circle, rgba(218,177,72,0.16), rgba(218,177,72,0.03) 70%) !important;
  box-shadow: 0 0 20px rgba(218,177,72,0.22) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.final-cta-logo img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 6px rgba(218,177,72,0.5)) !important;
}

/* Secure note */
.premium-secure-note { color: var(--ui-text-3) !important; font-size: 12px !important; }

/* Engine status strip (index) */
.engine-status {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 14px !important;
  font-size: 11px !important;
  color: var(--ui-text-3) !important;
}
.status-indicator {
  position: relative !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--ui-emerald) !important;
  flex-shrink: 0 !important;
}
.status-indicator::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: rgba(16,185,129,0.4) !important;
  animation: _pulse_g 2s infinite !important;
}
@keyframes _pulse_g {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(2.2); opacity: 0; }
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .contact-section { padding: 24px 18px !important; }
  .stat-card       { padding: 16px !important; }
  .login-card      { padding: 28px 22px !important; }
  .login-header    { padding: 14px 18px !important; }
}

/* ════════════════════════════════════════════════════════════════
   VIEW-ANALYSIS / REPORT PAGE — dark theme fixes
════════════════════════════════════════════════════════════════ */

/* Analysis report text — dark theme */
.analysis-report, #claudeReport {
  color: var(--ui-text-2) !important;
  background: transparent !important;
}
.analysis-report h1,
.analysis-report h2,
.analysis-report h3,
.analysis-report h4,
#claudeReport h1,
#claudeReport h2,
#claudeReport h3,
#claudeReport h4 {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
}
.analysis-report p,
.analysis-report li,
#claudeReport p,
#claudeReport li {
  color: var(--ui-text-2) !important;
}
.analysis-report strong,
#claudeReport strong {
  color: var(--ui-text) !important;
}
.analysis-report em,
#claudeReport em {
  color: var(--ui-text-3) !important;
}
.analysis-report hr,
#claudeReport hr {
  border-color: var(--ui-border) !important;
}

/* Right-column sticky support */
.split-screen-container {
  align-items: flex-start !important;
}
.chessboard-section {
  align-self: flex-start !important;
}

/* Evaluation chart container */
.chart-container {
  border-radius: var(--ui-radius-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--ui-border) !important;
}

/* PGN container */
#pgnContainer {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
}
#pgnPre {
  background: var(--ui-surface-3) !important;
  color: var(--ui-text-2) !important;
  border-radius: var(--ui-radius-sm) !important;
}

/* Mobile chessboard containers */
.mobile-layout .chessboard-section {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
}
#mobilePaginatedContent {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
}

/* Move info boxes */
#moveInfo, #moveInfoMobile {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-2) !important;
  border-radius: 4px !important;
}

/* Move controls */
.move-controls button, .move-controls .btn {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-2) !important;
}
.move-controls button:hover, .move-controls .btn:hover {
  border-color: var(--ui-border-hover) !important;
  color: var(--ui-text) !important;
}

/* Report page section heading (analysis info box) */
.analysis-meta {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
}
.analysis-meta h2 { color: var(--ui-text) !important; }
.analysis-meta p  { color: var(--ui-text-3) !important; }

/* Premium report meta topline */
.premium-report-topline {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 16px !important;
  align-items: center !important;
  font-size: 11px !important;
  color: var(--ui-text-3) !important;
  font-family: var(--ui-font-mono) !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
.premium-report-topline span { color: var(--ui-text-3) !important; }

/* Stat row */
.premium-report-stat-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 14px !important;
}
.premium-report-stat-row > div {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 10px 14px !important;
  flex: 1 !important;
  min-width: 80px !important;
}
.premium-report-stat-row span {
  display: block !important;
  font-size: 11px !important;
  color: var(--ui-text-3) !important;
  font-family: var(--ui-font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 4px !important;
}
.premium-report-stat-row strong {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
}

/* Premium report title row */
.premium-report-title-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.premium-report-title-row h1,
.premium-report-title-row h2 {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 6px 0 4px !important;
}
.premium-report-subtitle {
  color: var(--ui-text-3) !important;
  font-size: 12px !important;
  font-family: var(--ui-font-mono) !important;
  margin: 0 !important;
}
.premium-report-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.premium-report-secondary-action {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-3) !important;
  border-radius: var(--ui-radius-sm) !important;
  font-size: 12px !important;
  padding: 8px 14px !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Report footer */
footer {
  background: var(--ui-surface-2) !important;
  border-top: 1px solid var(--ui-border) !important;
  color: var(--ui-text-3) !important;
}
footer h3, footer h4 { color: var(--ui-text-3) !important; font-size: 13px !important; }
footer a { color: var(--ui-text-3) !important; }
footer a:hover { color: var(--ui-text) !important; }

/* ── Site footer (new structure: brand + 3 link columns + base line) ── */
.site-footer {
  position: relative !important;
  background: var(--ui-surface-2) !important;
  border-top: 1px solid var(--ui-border) !important;
  padding: 56px 32px 28px !important;
  margin-top: 64px !important;
  color: var(--ui-text-3) !important;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218,177,72,0.45), transparent);
}
.site-footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
}
@media (max-width: 880px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
@media (max-width: 520px) {
  .site-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer { padding: 44px 24px 24px !important; }
}
.site-footer-brand .site-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 14px;
}
.site-footer-logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255,193,7,0.3));
}
.site-footer-logo span {
  font-size: 18px;
  font-weight: 700;
  color: var(--ui-gold);
  font-family: var(--ui-font-serif);
}
.site-footer-logo span em { font-style: normal; }
.site-footer-brand p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ui-text-3);
  max-width: 320px;
}
.site-footer h4 {
  margin: 0 0 14px;
  font-size: 11px !important;
  font-weight: 700;
  color: var(--ui-text-2) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--ui-font-mono);
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer ul li { margin-bottom: 9px; }
.site-footer ul a {
  font-size: 13px;
  color: var(--ui-text-3) !important;
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer ul a:hover { color: var(--ui-gold) !important; }
.site-footer-base {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--ui-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer-base p {
  margin: 0;
  font-size: 12px;
  color: var(--ui-text-3);
}
.site-footer-tag {
  font-style: italic;
  color: var(--ui-text-3) !important;
}
@media (max-width: 520px) {
  .site-footer-base { justify-content: center; text-align: center; }
}

/* Back button */
.btn[href="/my-analyses.html"] {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-2) !important;
  font-size: 13px !important;
}
.btn[href="/my-analyses.html"]:hover {
  border-color: var(--ui-gold-dim) !important;
  color: var(--ui-gold) !important;
}


/* ════════════════════════════════════════════════════════════════
   NAV AUTH BUTTON — gold for login state
════════════════════════════════════════════════════════════════ */

/* #authNavBtn initial state is set via inline style in HTML;
   the JS auth script overrides it for Logout. We fix the
   visual here for cases where inline style wasn't updated. */
#authNavBtn {
  border-radius: var(--ui-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 7px 16px !important;
  transition: opacity 0.15s !important;
  cursor: pointer !important;
}
/* Mobile auth button */
#authNavBtnMobile {
  border-radius: var(--ui-radius-sm) !important;
  font-weight: 700 !important;
}


/* ════════════════════════════════════════════════════════════════
   MY-ANALYSES — enhanced card layout
════════════════════════════════════════════════════════════════ */

/* Status badge inside analysis cards */
.analysis-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: var(--ui-font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
}
.analysis-status-badge.completed {
  background: rgba(16,185,129,0.1) !important;
  color: var(--ui-emerald) !important;
  border: 1px solid rgba(16,185,129,0.22) !important;
}
.analysis-status-badge.processing {
  background: rgba(245,158,11,0.1) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245,158,11,0.22) !important;
}
.analysis-status-badge.error {
  background: rgba(239,68,68,0.1) !important;
  color: var(--ui-red) !important;
  border: 1px solid rgba(239,68,68,0.22) !important;
}

/* Report type badge */
.analysis-type-badge {
  font-size: 11px !important;
  font-family: var(--ui-font-mono) !important;
  color: var(--ui-text-3) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ui-border) !important;
}

/* Analyses page section title */
.analyses-section-title {
  font-family: var(--ui-font-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ui-text) !important;
  margin-bottom: 18px !important;
}


/* Page header: gold title, white subtitle */
.ui-page-header-title { color: #dab148 !important; }
.ui-page-header-sub   { color: #f4f4f5 !important; }

/* Premium access card (the real subscription/CTA banner shown on home) —
   premium gold box, real logo, gold title, white text. */
#premiumAccessCard.premium-access-card {
  background:
    radial-gradient(120% 100% at 0% 50%, rgba(218,177,72,0.12), transparent 60%),
    linear-gradient(180deg, #181613, #0e0e10) !important;
  border: 1.5px solid rgba(218,177,72,0.55) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 40px rgba(218,177,72,0.12), inset 0 1px 0 rgba(218,177,72,0.18) !important;
  padding: 20px 26px !important;
}
#premiumAccessCard .premium-access-icon {
  width: 58px !important;
  height: 58px !important;
  border: 1.5px solid rgba(218,177,72,0.6) !important;
  background: radial-gradient(circle, rgba(218,177,72,0.16), rgba(218,177,72,0.03) 70%) !important;
  box-shadow: 0 0 20px rgba(218,177,72,0.22) !important;
}
#premiumAccessCard .premium-access-icon img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 6px rgba(218,177,72,0.5)) !important;
}
#premiumAccessCard h2,
#premiumAccessCard #premiumAccessTitle {
  color: #dab148 !important;
  font-family: var(--ui-font-serif) !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  text-shadow: 0 0 18px rgba(218,177,72,0.25) !important;
}
#premiumAccessCard p,
#premiumAccessCard #premiumAccessDetails {
  color: #f4f4f5 !important;
  font-size: 14px !important;
}

/* Active subscription banner — premium gold box, gold/white only */
.sub-active-banner {
  background:
    radial-gradient(120% 100% at 0% 50%, rgba(218,177,72,0.12), transparent 60%),
    linear-gradient(180deg, #181613, #0e0e10) !important;
  border: 1.5px solid rgba(218,177,72,0.55) !important;
  border-radius: 14px !important;
  padding: 20px 26px !important;
  margin-bottom: 28px !important;
  box-shadow: 0 0 40px rgba(218,177,72,0.12), inset 0 1px 0 rgba(218,177,72,0.18) !important;
}
.sub-active-row {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}
.sub-active-logo {
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(218,177,72,0.6) !important;
  background: radial-gradient(circle, rgba(218,177,72,0.14), rgba(218,177,72,0.03) 70%) !important;
  box-shadow: 0 0 20px rgba(218,177,72,0.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sub-active-logo img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 6px rgba(218,177,72,0.5)) !important;
}
.sub-active-text { flex: 1 !important; min-width: 230px !important; }
.sub-active-text h3 {
  margin: 0 0 6px !important;
  font-size: 19px !important;
  font-family: var(--ui-font-serif) !important;
  font-weight: 700 !important;
  color: #dab148 !important;
  text-shadow: 0 0 18px rgba(218,177,72,0.25) !important;
}
.sub-active-text p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #f4f4f5 !important;
}
.sub-active-btn {
  background: linear-gradient(135deg, #c8922e, #dab148, #f3d17a) !important;
  color: #0b0803 !important;
  padding: 12px 24px !important;
  border-radius: 9px !important;
  font-weight: 800 !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 20px rgba(218,177,72,0.3) !important;
}
.sub-active-btn:hover { opacity: 0.9 !important; }
/* Override new-ui.css EMERALD rules (ID specificity) → gold/white */
#activeSubscriptionBanner.sub-active-banner {
  background:
    radial-gradient(120% 100% at 0% 50%, rgba(218,177,72,0.12), transparent 60%),
    linear-gradient(180deg, #181613, #0e0e10) !important;
  border: 1.5px solid rgba(218,177,72,0.55) !important;
  box-shadow: 0 0 40px rgba(218,177,72,0.12), inset 0 1px 0 rgba(218,177,72,0.18) !important;
}
#activeSubscriptionBanner #subBannerTitle { color: #dab148 !important; }
#activeSubscriptionBanner #subBannerDetails,
#activeSubscriptionBanner #subscriptionDetails { color: #f4f4f5 !important; }
#activeSubscriptionBanner #goToAnalysisBtn {
  background: linear-gradient(135deg, #c8922e, #dab148, #f3d17a) !important;
  color: #0b0803 !important;
  box-shadow: 0 6px 20px rgba(218,177,72,0.3) !important;
}

/* Brighten barely-visible body text across landing sections
   (new-ui.css set these to var(--ui-text-3)/text-4 which read as grey). */
.premium-feature-grid p,
.premium-preview-copy p,
.premium-article-grid p,
#diff1Desc, #diff2Desc, #diff3Desc {
  color: #c2c2cc !important;
}

/* ── Pricing plan redesign — PREMIUM ────────────────────────────── */

/* Decorative sparkle + rule below pricing h2 */
.pricing-heading-deco {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin-top: 14px !important;
}
.pricing-deco-star {
  color: #dab148 !important;
  font-size: 15px !important;
  text-shadow: 0 0 12px rgba(218,177,72,0.55) !important;
  line-height: 1 !important;
  flex: none !important;
}
/* Symmetric rules: left fades in toward the star, right fades out */
.pricing-deco-rule {
  display: inline-block !important;
  height: 1px !important;
  width: 90px !important;
  flex: none !important;
}
.pricing-deco-rule:first-child {
  background: linear-gradient(90deg, transparent, rgba(218,177,72,0.6)) !important;
}
.pricing-deco-rule:last-child {
  background: linear-gradient(90deg, rgba(218,177,72,0.6), transparent) !important;
}

/* Chess piece icon circle — 72px ring with gold line-art SVG */
.plan-piece-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(218,177,72,0.6) !important;
  background: radial-gradient(circle, rgba(218,177,72,0.13) 0%, rgba(218,177,72,0.03) 70%) !important;
  box-shadow: 0 0 18px rgba(218,177,72,0.2), 0 0 6px rgba(218,177,72,0.12), inset 0 0 12px rgba(218,177,72,0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 4px auto 10px !important;
  color: #f0c84a !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;   /* never let the fixed-height header squish it into an oval */
  flex-grow: 0 !important;
  box-sizing: border-box !important;
}
.plan-piece-icon svg {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  max-width: 27px !important;
  filter: drop-shadow(0 0 6px rgba(218,177,72,0.4)) !important;
}

/* Decorative gold separator with ◆ */
.plan-price-sep {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 7px 0 3px !important;
}
.plan-price-sep > span:first-child {
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(218,177,72,0.5)) !important;
}
.plan-price-sep > span:last-child {
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(218,177,72,0.5), transparent) !important;
}
.plan-price-sep-gem {
  color: rgba(218,177,72,0.8) !important;
  font-size: 8px !important;
  flex: none !important;
}

/* Card base — radial gold vignette at top for depth + gold glow border */
.premium-plan-card {
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(218,177,72,0.07) 0%, transparent 55%),
    linear-gradient(180deg, #141416 0%, #0e0e10 100%) !important;
  border: 1px solid rgba(218,177,72,0.22) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  border-radius: 14px !important;
  position: relative !important;
}
/* Faint checkerboard corner texture (top-right) inside each card */
.premium-plan-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 130px !important;
  height: 110px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image:
    linear-gradient(45deg, rgba(218,177,72,0.5) 25%, transparent 25%, transparent 75%, rgba(218,177,72,0.5) 75%),
    linear-gradient(45deg, rgba(218,177,72,0.5) 25%, transparent 25%, transparent 75%, rgba(218,177,72,0.5) 75%) !important;
  background-size: 22px 22px !important;
  background-position: 0 0, 11px 11px !important;
  opacity: 0.06 !important;
  -webkit-mask-image: radial-gradient(120% 120% at 100% 0%, #000 0%, transparent 60%) !important;
          mask-image: radial-gradient(120% 120% at 100% 0%, #000 0%, transparent 60%) !important;
}

/* Featured card — stronger gold vignette + glow */
.premium-plan-card.is-featured {
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(218,177,72,0.12) 0%, transparent 55%),
    linear-gradient(180deg, #181613 0%, #0e0e10 100%) !important;
  border: 1.5px solid rgba(218,177,72,0.7) !important;
  box-shadow: 0 0 80px rgba(218,177,72,0.22), 0 0 30px rgba(218,177,72,0.12), 0 24px 70px rgba(0,0,0,0.7) !important;
}

/* Plan name — serif white */
.premium-plan-card h3 {
  font-size: 21px !important;
  font-weight: 700 !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
  text-align: center !important;
  margin: 2px 0 2px !important;
}

/* Tagline */
.premium-plan-card .plan-header > p:first-of-type {
  font-size: 13px !important;
  color: var(--ui-text-3) !important;
  text-align: center !important;
}

/* Price — 52px+ gold serif with glow */
.premium-plan-card strong,
.premium-pricing .premium-plan-card #oneOffPriceMain,
.premium-pricing .premium-plan-card #subPriceMain {
  display: block !important;
  font-size: clamp(34px, 3vw, 40px) !important;
  font-weight: 700 !important;
  color: #dab148 !important;
  font-family: var(--ui-font-serif) !important;
  text-align: center !important;
  text-shadow: 0 0 30px rgba(218,177,72,0.4) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  margin: 2px 0 !important;
}

/* Feature list — gold circle checkmarks */
.premium-plan-card ul li {
  list-style: none !important;
  padding-left: 28px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  position: relative !important;
  color: var(--ui-text-2) !important;
  font-size: 12.5px !important;
  margin-bottom: 0 !important;
  line-height: 1.35 !important;
}
.premium-plan-card ul li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid rgba(218,177,72,0.5) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  color: #dab148 !important;
  top: 1px !important;
  line-height: 18px !important;
  box-sizing: border-box !important;
}

/* Trial note pill — gold outline, more prominent, centered under price */
.premium-trial-note {
  display: inline-block !important;
  align-self: center !important;
  background: rgba(218,177,72,0.1) !important;
  border: 1px solid rgba(218,177,72,0.55) !important;
  border-radius: 999px !important;
  padding: 5px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #dab148 !important;
  margin: 5px auto 0 !important;
  text-shadow: 0 0 10px rgba(218,177,72,0.3) !important;
  letter-spacing: 0.03em !important;
}
/* tighten the "per month" / strike note vertical margins (new-ui gives them -8/14) */
#perMonthText, #oneOffStrikePrice { margin: 0 0 2px !important; }

/* CTA buttons — full gold gradient */
.premium-plan-card button,
.premium-pricing .premium-plan-card #paymentButtonOneOff,
.premium-pricing .premium-plan-card #paymentButtonSubscription {
  background: linear-gradient(135deg, #b8820a, #dab148, #f0c84a) !important;
  color: #0a0700 !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 15px 24px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: opacity 0.2s, transform 0.15s !important;
  box-shadow: 0 4px 20px rgba(218,177,72,0.35) !important;
  width: 100% !important;
}
.premium-plan-card button:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
}

/* "Most Popular" badge — gold gradient, prominent */
.premium-pricing #bestValueBadge,
.premium-plan-card.is-featured .premium-plan-badge {
  background: linear-gradient(135deg, #c8922e, #dab148, #f0c84a) !important;
  color: #0a0700 !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 5px 16px !important;
  box-shadow: 0 2px 12px rgba(218,177,72,0.4) !important;
}

/* Secure payment note */
.premium-secure-note {
  color: var(--ui-text-3) !important;
  font-size: 12px !important;
  text-align: center !important;
  margin-top: 20px !important;
}

/* ── Coaching preview copy redesign — PREMIUM ────────────────────── */
.pkicker-gem {
  color: #dab148 !important;
  font-size: 10px !important;
  margin-right: 6px !important;
}
.pkicker-line {
  display: inline-block !important;
  width: 60px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(218,177,72,0.55), transparent) !important;
  vertical-align: middle !important;
  margin-left: 8px !important;
}

/* Work-on and Report-focus boxes */
.premium-work-box,
.premium-report-callout {
  background: #1a1a1d !important;
  border: 1px solid rgba(218,177,72,0.2) !important;
  border-left: 1px solid rgba(218,177,72,0.2) !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 14px !important;
  align-items: flex-start !important;
  padding: 16px !important;
  margin: 14px 0 !important;
}

/* Circular icon rings */
.pbox-icon {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(218,177,72,0.45) !important;
  background: rgba(218,177,72,0.08) !important;
  box-shadow: 0 0 12px rgba(218,177,72,0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #dab148 !important;
  margin-top: 2px !important;
}
.pbox-icon svg { width: 20px !important; height: 20px !important; }

.pbox-content { flex: 1 !important; }

/* Box labels — uppercase mono gold */
.pbox-label,
.pbox-content strong.pbox-label,
.pbox-content span.pbox-label {
  display: block !important;
  font-size: 10px !important;
  color: #dab148 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-family: var(--ui-font-mono) !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

/* Bullet items */
.premium-work-box .pbox-content span:not(.pbox-label),
.premium-work-box .pbox-content > span {
  display: block !important;
  color: var(--ui-text-2) !important;
  font-size: 13px !important;
  padding: 2px 0 !important;
}

/* Report callout content */
.premium-report-callout .pbox-content > strong {
  display: block !important;
  color: var(--ui-text-2) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

/* Password form helper text */
.form-group small {
  display: block !important;
  margin-top: 6px !important;
  font-size: 11px !important;
  color: var(--ui-text-3) !important;
}


/* ════════════════════════════════════════════════════════════════
   INDEX / LANDING PAGE — additional polish
════════════════════════════════════════════════════════════════ */

/* KPI strip — ensure gold numbers + white labels override any ID rules */
.premium-stats > div > strong,
.premium-stats > div #statReports { color: #dab148 !important; font-size: clamp(44px, 4.2vw, 56px) !important; text-shadow: 0 0 30px rgba(218,177,72,0.35) !important; }
.premium-stats > div > small      { color: #f4f4f5 !important; }

/* Pricing — hide launch offer badge and strikethrough */
#launchOfferBadge { display: none !important; }
#oneOffStrikePrice { display: none !important; }

/* Pricing grid — 2-column for paid plans, flex cards so button stays at bottom.
   stretch on align so both cards rise to the taller card's height. The header
   region is fixed-height (.plan-header) so the divider line and ul rows align
   horizontally between the two cards. */
.premium-plan-grid-paid {
  grid-template-columns: repeat(2, 1fr) !important;
  max-width: 820px !important;
  margin: 16px auto 0 !important;
  align-items: stretch !important;
}
.premium-plan-grid-paid .premium-plan-card {
  display: flex !important;
  flex-direction: column !important;
}
.premium-plan-grid-paid .premium-plan-card .plan-header {
  display: flex !important;
  flex-direction: column !important;
  height: 244px !important;  /* >= featured content so the trial pill never overflows onto the ul */
  padding-bottom: 8px !important;
}
/* Hidden spacer in single-analysis ul — same class/content as featSub0/Sub so height matches */
.plan-feat-placeholder {
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
  aria-hidden: true;
}
/* Extra-feature styles for feat-highlight / feat-sub-note */
.feat-highlight {
  font-weight: 700 !important;
  color: var(--ui-gold) !important;
}
.feat-sub-note {
  font-size: 11px !important;
  color: #c2c2cc !important;
  font-style: italic !important;
  padding-left: 28px !important;
}
/* launch-offer caveat carries a text-4 rule elsewhere — force readable via ID */
#featSub0sub { color: #c2c2cc !important; }
/* caveat line is not a feature — drop its checkmark + its bottom border */
.feat-sub-note::before { display: none !important; }
.premium-plan-card ul li.feat-sub-note { border-bottom: none !important; padding-top: 0 !important; }
.premium-plan-grid-paid .premium-plan-card .plan-header-spacer {
  flex: 1 !important;
}
.premium-plan-grid-paid .premium-plan-card ul {
  flex: 1 !important;
  margin-bottom: 12px !important;
  margin-top: 4px !important;
}
/* tighter card padding to reduce overall height */
.premium-plan-grid-paid .premium-plan-card { padding: 18px 22px !important; }
.premium-plan-grid-paid .premium-plan-card button { padding: 11px 18px !important; }
.premium-plan-grid-paid .premium-plan-card button {
  margin-top: auto !important;
}
/* When the two cards stack (mobile), cross-card alignment is irrelevant:
   drop the hidden spacer rows and let each header size naturally so the
   single-analysis card isn't padded with empty space. */
@media (max-width: 900px) {
  .plan-feat-placeholder { display: none !important; }
  .premium-plan-grid-paid .premium-plan-card .plan-header { height: auto !important; }
}

/* ── Hero visual: report card mock ─────────────────────────── */
.premium-hero-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: auto !important;
  padding: 12px 0 !important;
}
.hero-report-card {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  padding: 22px 24px !important;
  width: min(100%, 370px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(218,177,72,0.06) !important;
}
.hero-rc-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
.hero-rc-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ui-gold) !important;
  background: rgba(218,177,72,0.10) !important;
  border: 1px solid rgba(218,177,72,0.22) !important;
  border-radius: 999px !important;
  padding: 3px 11px 3px 8px !important;
  font-family: var(--ui-font-mono) !important;
}
.hero-rc-badge-glyph {
  font-family: var(--ui-font-serif);
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
}
.hero-rc-badge-logo {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 4px rgba(218,177,72,0.5)) !important;
}

/* ── AI watermark + animated beam lines ──
   A premium "AI is generating this" effect: a glowing logo in the
   top-right corner with rotating rings, plus three faint gold beam
   lines that pulse from the logo downward into the card body. */
.hero-report-card { position: relative; overflow: hidden !important; }

.hero-rc-ai {
  position: absolute;
  top: -36px;
  right: -36px;
  width: 160px;
  height: 160px;
  pointer-events: none;
  z-index: 1;
}
.hero-rc-ai-logo {
  position: absolute;
  top: 36px;
  right: 36px;
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(255,193,7,0.55)) drop-shadow(0 0 28px rgba(255,193,7,0.25));
  opacity: 0.6;
  animation: hero-rc-ai-pulse 3.2s ease-in-out infinite;
}
@keyframes hero-rc-ai-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.78; transform: scale(1.04); }
}

.hero-rc-ai-ring {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 90px;
  height: 90px;
  border: 1px solid rgba(218,177,72,0.18);
  border-radius: 50%;
  animation: hero-rc-ai-ring-fade 3.2s ease-in-out infinite;
}
.hero-rc-ai-ring-2 {
  top: 16px;
  right: 16px;
  width: 118px;
  height: 118px;
  border-color: rgba(218,177,72,0.10);
  animation-delay: -1.6s;
}
@keyframes hero-rc-ai-ring-fade {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.8;  }
}

.hero-rc-ai-tag {
  position: absolute;
  top: 130px;
  right: 38px;
  font-family: var(--ui-font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--ui-gold);
  background: rgba(218,177,72,0.10);
  border: 1px solid rgba(218,177,72,0.32);
  padding: 2px 6px;
  border-radius: 3px;
  opacity: 0.85;
}
.hero-rc-ai-tag::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ui-emerald);
  margin-right: 4px;
  vertical-align: 1px;
  box-shadow: 0 0 6px rgba(16,185,129,0.7);
  animation: hero-rc-ai-blink 1.4s ease-in-out infinite;
}
@keyframes hero-rc-ai-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Three "beam" lines that drop from the logo area down into the content,
   suggesting AI is actively feeding insights into the report. */
.hero-rc-ai-beam {
  position: absolute;
  top: 90px;
  width: 1px;
  background: linear-gradient(180deg, rgba(218,177,72,0.5), transparent);
  opacity: 0;
  animation: hero-rc-ai-beam 2.6s ease-in-out infinite;
}
.hero-rc-ai-beam-1 { right: 78px; height: 90px; animation-delay: 0s; }
.hero-rc-ai-beam-2 { right: 100px; height: 70px; animation-delay: 0.6s; }
.hero-rc-ai-beam-3 { right: 60px; height: 110px; animation-delay: 1.2s; }
@keyframes hero-rc-ai-beam {
  0%   { opacity: 0; transform: translateY(-6px) scaleY(0.6); }
  35%  { opacity: 0.9; transform: translateY(0) scaleY(1); }
  100% { opacity: 0; transform: translateY(20px) scaleY(0.7); }
}

/* Make sure the existing card content sits ABOVE the watermark layer */
.hero-rc-header,
.hero-rc-grades,
.hero-rc-chart-wrap,
.hero-rc-insight,
.hero-rc-work { position: relative; z-index: 2; }

/* Phase grades — replaces the engine-style Result/Accuracy/Blunders trio.
   Same visual layout as before so the card stays "beautiful". */
.hero-rc-grades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.hero-rc-grade {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hero-rc-grade-phase {
  font-size: 9px;
  color: var(--ui-text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--ui-font-mono);
}
.hero-rc-grade-mark {
  font-family: var(--ui-font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--ui-text);
  letter-spacing: -0.01em;
}
.hero-rc-grade-good { color: var(--ui-emerald) !important; }
.hero-rc-grade-warn { color: #fbbf24 !important; }
.hero-rc-game {
  font-size: 11px !important;
  color: var(--ui-text-3) !important;
  font-family: var(--ui-font-mono) !important;
}
.hero-rc-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.hero-rc-stats > div {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 9px 10px !important;
  text-align: center !important;
}
.hero-rc-stats span {
  display: block !important;
  font-size: 10px !important;
  color: var(--ui-text-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 4px !important;
}
.hero-rc-stats strong {
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
}
.hero-rc-loss { color: var(--ui-red) !important; }
.hero-rc-warn { color: #f59e0b !important; }
.hero-rc-insight {
  background: rgba(218,177,72,0.04) !important;
  border: 1px solid rgba(218,177,72,0.12) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 11px 13px !important;
  margin-bottom: 12px !important;
}
.hero-rc-insight-label {
  display: block !important;
  font-size: 9px !important;
  color: var(--ui-gold) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
}

/* Insight callout — add gold em emphasis on key moves */
.hero-rc-insight p em {
  color: var(--ui-gold) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-family: var(--ui-font-mono) !important;
  font-size: 12px;
  padding: 0 1px;
}

/* Hide the abandoned v3 "magazine cover" card if it ever renders */
.hero-card { display: none !important; }

/* ── HERO CARD (v3 — abandoned) ── */
.hero-card-v3-unused {
  position: relative;
  width: min(100%, 380px);
  background:
    radial-gradient(circle at 92% 8%, rgba(218,177,72,0.10), transparent 48%),
    var(--ui-surface-3);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  padding: 22px 24px 18px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.45),
    0 0 0 1px rgba(218,177,72,0.06);
  overflow: hidden;
}
.hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218,177,72,0.55), transparent);
}

.hero-card-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ui-border);
  margin-bottom: 18px;
}
.hero-card-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold));
  display: grid;
  place-items: center;
  font-family: var(--ui-font-serif);
  font-weight: 700;
  font-size: 16px;
  color: #0b0803;
  flex-shrink: 0;
}
.hero-card-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.hero-card-brand-text strong {
  font-family: var(--ui-font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--ui-gold);
}
.hero-card-brand-text small {
  font-family: var(--ui-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ui-text-3);
  text-transform: uppercase;
  margin-top: 3px;
}
.hero-card-brand-meta {
  margin-left: auto;
  font-family: var(--ui-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ui-text-3);
  white-space: nowrap;
}

.hero-card-quote {
  position: relative;
  padding: 0 4px 0 22px;
  margin-bottom: 10px;
}
.hero-card-quote-mark {
  position: absolute;
  top: -6px; left: 0;
  font-family: var(--ui-font-serif);
  font-size: 48px;
  line-height: 1;
  color: var(--ui-gold);
  opacity: 0.5;
}
.hero-card-quote p {
  margin: 0;
  font-family: var(--ui-font-serif);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  font-style: italic;
  color: var(--ui-text);
  letter-spacing: -0.005em;
}
.hero-card-quote em {
  color: var(--ui-gold);
  font-style: normal;
  font-weight: 600;
  font-family: var(--ui-font-mono);
  font-size: 16px;
  padding: 0 1px;
}

.hero-card-attr {
  padding: 0 4px 0 22px;
  font-family: var(--ui-font-mono);
  font-size: 11px;
  color: var(--ui-text-3);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.hero-card-ribbon {
  height: 36px;
  margin-bottom: 16px;
  opacity: 0.85;
}
.hero-card-ribbon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-border);
  font-size: 11px;
  font-family: var(--ui-font-mono);
}
.hero-card-foot-tag {
  color: var(--ui-gold);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 9px;
  background: rgba(218,177,72,0.10);
  border: 1px solid rgba(218,177,72,0.22);
  border-radius: 4px;
  flex-shrink: 0;
}
.hero-card-foot-items {
  color: var(--ui-text-2);
  letter-spacing: 0.02em;
}

@media (max-width: 860px) {
  .hero-card { width: 100%; }
  .hero-card-quote p { font-size: 16px; }
}

/* Old card kept compiling but not referenced. Hide if it ever renders. */
.hero-coach-card { display: none !important; }
.hero-coach-card {
  position: relative;
  width: min(100%, 380px);
  background:
    radial-gradient(circle at 88% 6%, rgba(218,177,72,0.10), transparent 44%),
    var(--ui-surface-3);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  padding: 22px 22px 18px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.45),
    0 0 0 1px rgba(218,177,72,0.06);
  overflow: hidden;
}
.hero-coach-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218,177,72,0.55), transparent);
}

.hero-coach-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.hero-coach-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(218,177,72,0.22);
}
.hero-coach-avatar-glyph {
  font-size: 22px;
  color: #0b0803;
  font-weight: 700;
  line-height: 1;
}
.hero-coach-status {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ui-emerald);
  border: 2px solid var(--ui-surface-3);
  box-shadow: 0 0 0 0 rgba(16,185,129,0.4);
  animation: hero-coach-pulse 2s infinite;
}
@keyframes hero-coach-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
.hero-coach-id { flex: 1; min-width: 0; }
.hero-coach-id strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ui-text);
  font-family: var(--ui-font-serif);
  line-height: 1.2;
}
.hero-coach-id span {
  display: block;
  font-size: 10px;
  color: var(--ui-text-3);
  font-family: var(--ui-font-mono);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.hero-coach-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui-gold);
  background: rgba(218,177,72,0.10);
  border: 1px solid rgba(218,177,72,0.22);
  border-radius: 999px;
  padding: 3px 9px;
  flex-shrink: 0;
}

/* The coach speech bubble — the headline insight */
.hero-coach-bubble {
  position: relative;
  background: rgba(255,193,7,0.05);
  border: 1px solid rgba(218,177,72,0.18);
  border-radius: 14px;
  border-top-left-radius: 4px;
  padding: 14px 16px 14px 20px;
  margin-bottom: 16px;
}
.hero-coach-quote {
  position: absolute;
  top: 2px; left: 8px;
  font-family: var(--ui-font-serif);
  font-size: 32px;
  line-height: 1;
  color: var(--ui-gold);
  opacity: 0.55;
}
.hero-coach-bubble p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ui-text);
  font-family: var(--ui-font-serif);
  font-style: italic;
}
.hero-coach-bubble em {
  color: var(--ui-gold);
  font-style: normal;
  font-weight: 700;
  font-family: var(--ui-font-mono);
  font-size: 13px;
  padding: 0 2px;
}

/* Two coaching insight rows */
.hero-coach-insights {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.hero-coach-insight {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
}
.hero-coach-insight-tag {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  height: fit-content;
  font-family: var(--ui-font-mono);
}
.hero-coach-tag-strength {
  color: var(--ui-emerald);
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.22);
}
.hero-coach-tag-focus {
  color: var(--ui-gold);
  background: rgba(218,177,72,0.10);
  border: 1px solid rgba(218,177,72,0.22);
}
.hero-coach-insight > div { min-width: 0; }
.hero-coach-insight strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-text);
  line-height: 1.3;
  margin-bottom: 2px;
}
.hero-coach-insight p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ui-text-3);
}

/* Footer line — emphasises "tailored to you" */
.hero-coach-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--ui-border);
  font-size: 10px;
  font-family: var(--ui-font-mono);
  letter-spacing: 0.04em;
  color: var(--ui-text-3);
}
.hero-coach-footer-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ui-gold);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(218,177,72,0.6);
}

@media (max-width: 860px) {
  .hero-coach-card { width: 100%; }
}
.hero-rc-insight p {
  font-size: 12px !important;
  color: var(--ui-text-3) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.hero-rc-work {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 9px 11px !important;
  background: var(--ui-surface) !important;
  border-radius: var(--ui-radius-sm) !important;
  margin-bottom: 12px !important;
}
.hero-rc-work-icon {
  font-size: 14px !important;
  color: var(--ui-emerald) !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.hero-rc-work strong {
  display: block !important;
  font-size: 10px !important;
  color: var(--ui-text) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 2px !important;
}
.hero-rc-work span {
  font-size: 11px !important;
  color: var(--ui-text-3) !important;
}
.hero-rc-progress { display: grid !important; gap: 7px !important; }
.hero-rcp-item {
  display: grid !important;
  grid-template-columns: 72px 1fr 32px !important;
  align-items: center !important;
  gap: 8px !important;
}
.hero-rcp-item > span:first-child {
  font-size: 11px !important;
  color: var(--ui-text-3) !important;
}
.hero-rcp-bar {
  height: 4px !important;
  background: rgba(255,255,255,0.07) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
.hero-rcp-bar > div {
  height: 100% !important;
  background: linear-gradient(90deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  border-radius: 999px !important;
}
.hero-rcp-item > span:last-child {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--ui-text-2) !important;
  text-align: right !important;
  font-family: var(--ui-font-mono) !important;
}

/* ── Pricing: hide footnotes + currency notes ────────────────── */
#finePrintOneOff, #finePrintSub { display: none !important; }
/* JS sets note.style.display = 'block' when Paddle detects a non-EUR currency;
   !important beats the inline style so the note stays hidden regardless. */
#oneOffCurrencyNote, #subCurrencyNote { display: none !important; }

/* Align features across both pricing cards:
   .plan-header wraps badge/title/price/notes; min-height ensures both
   card headers consume the same vertical space before the feature list. */
.plan-header {
  min-height: 180px !important;
  display: flex !important;
  flex-direction: column !important;
}
/* The one-off card gets a flex spacer to absorb the gap left by the missing
   trial badge (which the sub card has but the one-off card doesn't). */
.plan-header-spacer {
  flex: 1 !important;
}
/* Highlight the subscription-unique "unlimited" item at bottom of list */
.feat-highlight {
  color: var(--ui-gold) !important;
  font-weight: 600 !important;
  border-bottom-color: transparent !important;
  padding-top: 14px !important;
}
.feat-sub-note {
  font-size: 11px !important;
  color: var(--ui-text-3) !important;
  padding-top: 2px !important;
  padding-bottom: 6px !important;
  border-bottom: none !important;
}

/* ── Image fade on "Discover Your Weak Spots" ───────────────── */
.premium-free-visual {
  width: 100% !important;
  max-width: none !important;
  height: 220px !important;
  object-fit: cover !important;
  border-radius: var(--ui-radius-md) !important;
  margin-top: 18px !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 45%, rgba(0,0,0,0.4) 80%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 45%, rgba(0,0,0,0.4) 80%, transparent 100%) !important;
}

/* ── Hero eval chart ─────────────────────────────────────────── */
.hero-rc-chart-wrap {
  background: rgba(0,0,0,0.18) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 8px 6px 2px !important;
  margin-bottom: 12px !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}
.hero-rc-chart {
  width: 100% !important;
  height: 90px !important;
  display: block !important;
}
.hero-rc-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: heroLineIn 2.4s ease-out 0.4s forwards;
}
@keyframes heroLineIn {
  to { stroke-dashoffset: 0; }
}

/* ── FAQ card redesign ───────────────────────────────────────── */
.premium-faq-cards {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  margin-top: 16px !important;
}
@media (min-width: 720px) {
  .premium-faq-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
.premium-faq-card {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  padding: 18px 20px !important;
}
.premium-faq-card-q {
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--ui-text) !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}
.premium-faq-card-a {
  font-size: 13px !important;
  color: var(--ui-text-3) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.premium-faq-more {
  margin-top: 14px !important;
}
.premium-faq-more > summary {
  cursor: pointer !important;
  color: var(--ui-gold) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 0 !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.premium-faq-more > summary::marker,
.premium-faq-more > summary::-webkit-details-marker { display: none !important; }
.premium-faq-more > summary::after { content: "↓"; transition: transform 0.2s; }
.premium-faq-more[open] > summary::after { transform: rotate(180deg); }
.premium-faq-more-inner {
  margin-top: 10px !important;
  display: grid !important;
  gap: 8px !important;
}
.premium-faq-more-inner > details {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 12px 16px !important;
}
.premium-faq-more-inner > details > summary {
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--ui-text) !important;
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
}
.premium-faq-more-inner > details > summary:hover { color: var(--ui-gold) !important; }
.premium-faq-more-inner > details > summary::marker,
.premium-faq-more-inner > details > summary::-webkit-details-marker { display: none !important; }
.premium-faq-more-inner > details > summary::after {
  content: "↓" !important;
  color: var(--ui-gold) !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s;
}
.premium-faq-more-inner > details[open] > summary::after { transform: rotate(180deg); }
.premium-faq-more-inner > details > p {
  margin: 10px 0 0 !important;
  font-size: 13px !important;
  color: var(--ui-text-3) !important;
  line-height: 1.6 !important;
}
/* Link to the full FAQ on contact.html — replaces the inline "More questions"
   accordion on the landing so the page reads faster. */
.premium-faq-more-link {
  margin-top: 22px !important;
  text-align: center !important;
}
.premium-faq-more-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ui-gold) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid rgba(218,177,72,0.32);
  border-radius: var(--ui-radius-sm);
  transition: background 0.15s, border-color 0.15s;
}
.premium-faq-more-link a:hover {
  background: rgba(255,193,7,0.06);
  border-color: rgba(218,177,72,0.55);
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL — prevent horizontal overflow bleed on non-analysis pages.
   view-analysis.html overrides this with overflow:visible (higher
   specificity: body .ui-main-area) so its sticky column works.
════════════════════════════════════════════════════════════════ */

.ui-main-area {
  overflow: clip !important;
}

/* ════════════════════════════════════════════════════════════════
   VIEW-ANALYSIS — move nav buttons (premium pill design)
════════════════════════════════════════════════════════════════ */

/* Connected pill container — all 4 nav buttons live inside */
.move-nav-row {
  display: flex !important;
  gap: 0 !important;
  margin-top: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: var(--ui-radius-md) !important;
  padding: 4px !important;
}
.move-btn {
  flex: 1 !important;
  height: 36px !important;
  border-radius: var(--ui-radius-sm) !important;
  background: transparent !important;
  border: none !important;
  color: var(--ui-text-3) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.14s, color 0.14s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}
.move-btn:hover,
.move-btn:focus-visible {
  background: rgba(218, 177, 72, 0.12) !important;
  color: var(--ui-gold) !important;
  outline: none !important;
}
.move-btn:active {
  background: rgba(218, 177, 72, 0.22) !important;
  color: var(--ui-gold) !important;
}
/* ⏮ ⏭ icon-only buttons are narrower */
.move-btn:not(.move-btn-wide) {
  flex: 0 0 36px !important;
  font-size: 14px !important;
}
/* ‹ Prev / Next › text buttons get the remaining space */
.move-btn-wide {
  flex: 1 !important;
}
/* Flip button — full width, sits below the pill row, standalone */
.board-flip-btn {
  flex: none !important;
  width: 100% !important;
  margin-top: 8px !important;
  height: 34px !important;
  border-radius: var(--ui-radius-sm) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: var(--ui-text-3) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

/* ════════════════════════════════════════════════════════════════
   VIEW-ANALYSIS — analysis report heading normalization
   Claude's AI output may use h1-h4 inconsistently; pin every
   level to a readable but compact size inside .analysis-report.
════════════════════════════════════════════════════════════════ */

.analysis-report h1 {
  font-size: 19px !important;
  font-weight: 700 !important;
  margin: 20px 0 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
}
.analysis-report h2 {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 18px 0 6px !important;
  color: var(--ui-text) !important;
}
.analysis-report h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 14px 0 5px !important;
  color: var(--ui-text-2) !important;
}
.analysis-report h4 {
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 12px 0 4px !important;
  color: var(--ui-text-3) !important;
}
.analysis-report h1:first-child,
.analysis-report h2:first-child {
  margin-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR LOGO — gold image + top-down reveal on page load
════════════════════════════════════════════════════════════════ */

/* Sidebar user card — improve avatar text and label legibility */
.ui-sidebar-avatar {
  font-size: 11px !important;
}
.ui-sidebar-user-name {
  font-size: 11px !important;
}
.ui-sidebar-user-elo {
  font-size: 10px !important;
}

/* Logo area: img + text in a flex row */
.ui-sidebar-logo {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.ui-sidebar-logo-img {
  display: block !important;
  height: 30px !important;
  width: auto !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}

.ui-sidebar-logo-name {
  font-family: var(--ui-font-serif) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ui-gold) !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Collapsed sidebar: show only the logo image, hide text */
@media (min-width: 1024px) {
  html.ui-sidebar-collapsed .ui-sidebar-logo {
    justify-content: center !important;
    min-height: 52px !important;
    padding: 14px 0 !important;
  }
  html.ui-sidebar-collapsed .ui-sidebar-logo:has(.ui-sidebar-logo-img)::before {
    display: none !important;
  }
  html.ui-sidebar-collapsed .ui-sidebar-logo-name {
    display: none !important;
  }
  html.ui-sidebar-collapsed .ui-sidebar-logo-img {
    height: 38px !important;
    width: 38px !important;
    object-fit: contain !important;
  }

  /* Collapse btn: very bottom of sidebar, below the footer */
  .ui-sidebar-collapse-btn {
    margin: 6px auto 10px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   LOGO LOADING SPINNER — replaces plain text loading states
════════════════════════════════════════════════════════════════ */

.logo-loading {
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 48px 20px !important;
}

.logo-loading-img {
  height: 48px !important;
  width: auto !important;
  animation: logo-load-pulse 1.4s ease-in-out infinite !important;
}

.logo-loading-text {
  font-size: 13px !important;
  color: var(--ui-text-3) !important;
  letter-spacing: 0.04em !important;
  font-family: var(--ui-font-mono) !important;
}

@keyframes logo-load-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.97); }
  50%       { opacity: 1;    transform: scale(1.03); }
}


/* ════════════════════════════════════════════════════════════════
   HERO H1 — prevent mid-word line-break on desktop
════════════════════════════════════════════════════════════════ */

.premium-hero h1 {
  font-size: clamp(36px, 4vw, 56px) !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}


/* ════════════════════════════════════════════════════════════════
   MOBILE — prevent horizontal overflow in hero + sections
════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  /* Prevent page-level horizontal scroll */
  .ui-page-content,
  .ui-main-area {
    overflow-x: hidden !important;
  }

  /* Hero: clamp h1 so it never overflows 390px screen */
  .premium-hero {
    overflow-x: hidden !important;
  }
  .premium-hero h1 {
    font-size: clamp(24px, 8vw, 46px) !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }
  .premium-hero-copy {
    max-width: 100% !important;
    /* NOTE: do NOT set overflow-x:hidden here — with overflow-y:visible the
       spec forces overflow-y to auto, turning this into a nested scroll
       container that traps page scrolling on mobile. The ancestors
       (.ui-page-content / .ui-main-area) already clip horizontal bleed. */
  }

  /* Sections that contain long text / absolute-positioned elements */
  .premium-feature-grid article,
  .premium-access-card,
  .premium-import-card,
  .premium-pricing,
  .premium-faq,
  .premium-difference,
  .premium-stats {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* CTA buttons full width on mobile */
  .premium-hero-actions .premium-gold-btn,
  .premium-hero-actions .premium-ghost-btn {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Pricing plan grid: single column on mobile */
  .premium-plan-grid-paid {
    grid-template-columns: 1fr !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   LOGIN / SIGNUP pages — logo gap + centering
════════════════════════════════════════════════════════════════ */

.login-body {
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.login-card {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ════════════════════════════════════════════════════════════════
   VIEW-ANALYSIS — sticky chessboard panel
   results.css sets top:70px (old fixed header). New-UI has no
   fixed header so we correct to 24px. Also add max-height so the
   panel never extends below the viewport, and fix white bg.
════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .chessboard-section {
    position: sticky !important;
    /* .ui-page-header is sticky at top:0 with 64px height (z-index:55) on
       view-analysis. Without this offset, the chessboard's top would slide
       under the page header — which is what "the top of the box is slightly
       cut" was reporting. 64 (header) + 16 (gap) = 80. */
    top: 80px !important;
    align-self: flex-start !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    /* No box of its own — the .split-screen-container provides the visual frame.
       Adding background/border here on top of the container's identical surface
       causes the top edge to look "clipped" where the two borders overlap. */
    background: transparent !important;
    border: none !important;
    padding: 4px 0 0 !important;
  }
}

/* Dark-theme override: results.css paints the board section white */
.chessboard-section {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}


/* ════════════════════════════════════════════════════════════════
   ANALYZE PAGE — premium polish for the 3-step setup flow
   (override the light-mode inline styles on platform tabs, time
   control filters, manual-import drawer, and the stepper itself)
════════════════════════════════════════════════════════════════ */

/* Analyze page — compact so it fits in a single viewport WITHOUT scroll.
   Header is one-line (kicker + title in a row), stepper is slim,
   cards have minimal padding. The page-level header is hidden on this
   view since the analyze-setup-header carries the title. */
body:has(#uploadSection:not([style*="display: none"])) .ui-page-header {
  display: none !important;
}
#uploadSection {
  padding-top: 0 !important;
  gap: 12px !important;
}
#uploadSection .analysis-setup-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 13px !important;
  margin: 6px auto 24px !important;
  text-align: center !important;
}
#uploadSection .analysis-setup-header h1 {
  font-size: clamp(28px, 3.4vw, 40px) !important;
  line-height: 1.05 !important;
  margin: 0 !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
#uploadSection .analysis-setup-header p {
  font-size: 14px !important;
  margin: 0 !important;
  color: var(--ui-text-3) !important;
  max-width: 52ch !important;
  line-height: 1.6 !important;
}
#uploadSection .analysis-kicker {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 5px 14px !important;
  font-size: 10px !important;
  background: rgba(218,177,72,0.08) !important;
  border: 1px solid rgba(218,177,72,0.30) !important;
  border-radius: 999px !important;
  color: var(--ui-gold) !important;
}
#uploadSection .analysis-stepper {
  gap: 0 !important;
  margin: 0 auto 12px !important;
  max-width: 480px !important;
}
#uploadSection .analysis-stepper::before {
  top: 14px !important;
  left: 18% !important;
  right: 18% !important;
  background: linear-gradient(90deg, transparent, var(--ui-border) 20%, var(--ui-border) 80%, transparent) !important;
}
#uploadSection .analysis-step span {
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
  font-family: var(--ui-font-serif) !important;
  font-weight: 700 !important;
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-3) !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s !important;
}
#uploadSection .analysis-step.is-active span {
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  border-color: rgba(255,193,7,0.6) !important;
  color: #0b0803 !important;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.12) !important;
}
#uploadSection .analysis-step.is-complete span {
  background: rgba(255,193,7,0.10) !important;
  border-color: rgba(255,193,7,0.42) !important;
  color: var(--ui-gold) !important;
}
#uploadSection .analysis-step.is-complete span::after {
  content: '✓';
  font-size: 12px;
}
#uploadSection .analysis-step.is-complete span > * { display: none; }
#uploadSection .analysis-step strong {
  font-family: var(--ui-font-mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}
#uploadSection .analysis-step { gap: 4px !important; }

/* Section card chrome — ultra-tight to fit viewport */
#uploadSection .fetch-game-section,
#uploadSection .settings-section,
#uploadSection .analysis-confirm-section .section {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  padding: 14px 18px !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
}
#uploadSection .fetch-game-section::before,
#uploadSection .settings-section::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218,177,72,0.45), transparent);
  pointer-events: none;
}
#uploadSection .fetch-game-section h2,
#uploadSection .settings-section h2,
#uploadSection .analysis-confirm-section h2 {
  font-family: var(--ui-font-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ui-text) !important;
  margin: 0 0 2px !important;
}
#uploadSection .fetch-game-section > p,
#uploadSection .settings-section > p {
  color: var(--ui-text-3) !important;
  font-size: 12px !important;
  margin: 0 0 10px !important;
}

/* Single-card layout (matches user's premium mockup):
   - Subtle ghost knight watermark in top-right
   - Section header with gold shield icon + "1. Load Your Games" label
   - Field labels above each control (Choose platform / Username /
     Filter by time control), hairlines between fields */
#uploadSection .fetch-game-section {
  position: relative;
}
#uploadSection .fetch-game-ghost {
  position: absolute;
  top: 12px;
  right: 18px;
  width: 70px;
  height: 70px;
  object-fit: contain;
  opacity: 0.12;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(255,193,7,0.25));
}
#uploadSection .fetch-game-step-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ui-border);
}
/* Signature gold-ringed hexagon with a king (matches the inspiration mockup).
   Two stacked hexagons: a full gold hexagon (the ring) + a scaled-down dark
   hexagon on top (the fill), leaving a clean gold edge. */
#uploadSection .fetch-game-step-icon {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  position: relative;
  border: none;
  border-radius: 0;
  clip-path: polygon(50% 1%, 93% 25.5%, 93% 74.5%, 50% 99%, 7% 74.5%, 7% 25.5%);
  background: linear-gradient(135deg, #f6d57d 0%, #dab148 45%, #b9831f 100%);
  box-shadow: 0 0 18px rgba(218,177,72,0.30);
  color: #f3d17a;
}
#uploadSection .fetch-game-step-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 1%, 93% 25.5%, 93% 74.5%, 50% 99%, 7% 74.5%, 7% 25.5%);
  background: radial-gradient(circle at 50% 36%, #1c1810, #100d08 75%);
  transform: scale(0.9);
  z-index: 0;
}
#uploadSection .fetch-game-step-icon svg {
  position: relative;
  z-index: 1;
  width: 23px;
  height: 23px;
  filter: drop-shadow(0 0 5px rgba(218,177,72,0.5));
}
#uploadSection .fetch-game-step-label {
  font-family: var(--ui-font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ui-gold) !important;
}
/* Crown divider (between filters and manual import) */
#uploadSection .analysis-crown-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 2px 14px;
}
#uploadSection .analysis-crown-divider .acd-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218,177,72,0.35), transparent);
}
#uploadSection .analysis-crown-divider .acd-crown {
  color: var(--ui-gold); font-size: 15px; line-height: 1;
  filter: drop-shadow(0 0 6px rgba(218,177,72,0.4));
}
/* "AI Coach — Smarter analysis" footer tagline (step 1 only) */
#uploadSection .analysis-ai-coach { display: none; }
#uploadSection[data-analysis-step-current="1"] .analysis-ai-coach {
  display: inline-flex; align-items: center; gap: 8px; margin-right: auto;
  font-size: 13px; color: var(--ui-text-3);
}
#uploadSection .analysis-ai-coach .aic-spark { color: var(--ui-gold); }
#uploadSection .analysis-ai-coach strong {
  color: var(--ui-gold); font-family: var(--ui-font-mono);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px;
}
#uploadSection .analysis-ai-coach .aic-tag { color: var(--ui-text-3); }
@media (max-width: 640px) { #uploadSection .analysis-ai-coach { display: none !important; } }

/* Subtitle under the step label (mockup: "Select your platform and games…") */
#uploadSection .fetch-game-subtitle {
  margin: -2px 0 18px 38px !important;
  font-size: 13px !important;
  color: var(--ui-text-3) !important;
}
/* Platform buttons: center an icon next to the label */
#uploadSection .platform-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
}
#uploadSection .platform-tab .platform-tab-ico {
  display: inline-flex !important;
  flex: none !important;
}
#uploadSection .platform-tab .platform-tab-ico svg {
  width: 22px !important;
  height: 22px !important;
}
/* Brand-coloured solid icons: Chess.com green pawn, Lichess light knight */
#uploadSection #chesscomTab .platform-tab-ico { color: #81b64c !important; }
#uploadSection #lichessTab .platform-tab-ico { color: #ededed !important; }
@media (max-width: 560px) {
  #uploadSection .fetch-game-subtitle { margin-left: 0 !important; }
}
#uploadSection .fetch-game-field {
  margin-bottom: 14px;
}
#uploadSection .fetch-game-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-text-2);
  letter-spacing: 0.01em;
}

/* Platform tabs tight */
#uploadSection .platform-tab,
#uploadSection #chesscomTab,
#uploadSection #lichessTab {
  padding: 8px !important;
  font-size: 13px !important;
}
#uploadSection #fetchGameContainer { margin-bottom: 8px !important; }
#uploadSection .fetch-game-section > div[style*="display: flex"][style*="gap: 10px"] {
  margin-bottom: 10px !important;
}

/* Platform tabs — on-palette pill toggles */
#uploadSection .platform-tab,
#uploadSection #chesscomTab,
#uploadSection #lichessTab {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-3) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 12px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: var(--ui-font-sans) !important;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#uploadSection .platform-tab:hover,
#uploadSection #chesscomTab:hover,
#uploadSection #lichessTab:hover {
  border-color: rgba(255,255,255,0.18) !important;
  color: var(--ui-text-2) !important;
}
#uploadSection .platform-tab.active,
#uploadSection #chesscomTab.active,
#uploadSection #lichessTab.active {
  background: rgba(255,193,7,0.10) !important;
  border-color: rgba(255,193,7,0.42) !important;
  color: var(--ui-gold) !important;
}

/* Lay out username + Fetch Games side-by-side to save vertical room */
#uploadSection #fetchGameContainer {
  flex-direction: row !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
#uploadSection #fetchGameContainer #platformUsername { flex: 1 !important; }
#uploadSection #fetchGameContainer #fetchGamesBtn { width: auto !important; }

/* Username input + Fetch Games button — visually paired */
#uploadSection #platformUsername {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
#uploadSection #platformUsername::placeholder { color: var(--ui-text-3) !important; }
#uploadSection #platformUsername:focus {
  border-color: rgba(255,193,7,0.4) !important;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.08) !important;
  outline: none !important;
}
#uploadSection #fetchGamesBtn {
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  color: #0b0803 !important;
  border: none !important;
  border-radius: var(--ui-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 11px 18px !important;
  white-space: nowrap !important;
  transition: filter 0.15s, transform 0.15s !important;
}
#uploadSection #fetchGamesBtn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* Time control filter block — compact */
#uploadSection [style*="background: #f8f9fa"][style*="Filter by Time Control"],
#uploadSection .fetch-game-section > div[style*="background"]:has(#filterBullet) {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
}
#uploadSection label:has(#filterBullet),
#uploadSection label:has(#filterBlitz),
#uploadSection label:has(#filterRapid),
#uploadSection label:has(#filterClassical),
#uploadSection label:has(#filterDaily) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 12px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s;
}
#uploadSection label:has(#filterBullet:checked),
#uploadSection label:has(#filterBlitz:checked),
#uploadSection label:has(#filterRapid:checked),
#uploadSection label:has(#filterClassical:checked),
#uploadSection label:has(#filterDaily:checked) {
  background: rgba(255,193,7,0.08) !important;
  border-color: rgba(255,193,7,0.32) !important;
}
#uploadSection label:has(#filterBullet) span,
#uploadSection label:has(#filterBlitz) span,
#uploadSection label:has(#filterRapid) span,
#uploadSection label:has(#filterClassical) span,
#uploadSection label:has(#filterDaily) span {
  color: var(--ui-text-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
#uploadSection label:has(input:checked) span {
  color: var(--ui-gold) !important;
}
#uploadSection #filterBullet,
#uploadSection #filterBlitz,
#uploadSection #filterRapid,
#uploadSection #filterClassical,
#uploadSection #filterDaily {
  accent-color: var(--ui-gold);
  width: 14px !important;
  height: 14px !important;
}

/* "Filter by Time Control:" label — clean Inter, on-formula with other field labels */
#uploadSection [style*="Filter by Time Control"] > div:first-child,
#uploadSection .fetch-game-section > div[style*="background"] > div:first-child {
  color: var(--ui-text-2) !important;
  font-family: var(--ui-font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
}

/* Tip box — compact single line, gold-tinted */
#uploadSection [style*="background: #e8f5e9"],
#uploadSection [style*="background:#e8f5e9"] {
  background: transparent !important;
  border-left: 0 !important;
  border-top: 1px dashed rgba(255,193,7,0.18) !important;
  border-radius: 0 !important;
  padding: 8px 0 0 !important;
  margin-top: 8px !important;
}
#uploadSection [style*="background: #e8f5e9"] div,
#uploadSection [style*="background: #e8f5e9"] strong {
  color: var(--ui-text-3) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}
#uploadSection [style*="background: #e8f5e9"] strong {
  color: var(--ui-gold) !important;
}

/* Manual Import drawer */
#uploadSection .manual-import-section {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  padding: 14px 18px !important;
}
#uploadSection .manual-import-header {
  color: var(--ui-text-2) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: color 0.15s;
}
#uploadSection .manual-import-header:hover {
  color: var(--ui-gold) !important;
}
#uploadSection .manual-import-header .toggle-icon {
  color: var(--ui-text-3) !important;
  font-size: 11px !important;
  transition: transform 0.2s !important;
}
#uploadSection .manual-import-content textarea {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-2) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 14px !important;
}
#uploadSection #loadManualPgnBtn {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-2) !important;
  border-radius: var(--ui-radius-sm) !important;
  font-weight: 600 !important;
}
#uploadSection #loadManualPgnBtn:hover {
  border-color: rgba(255,193,7,0.3) !important;
  background: rgba(255,193,7,0.05) !important;
  color: var(--ui-gold) !important;
}

/* Continue button (footer of each step) */
#uploadSection .analysis-confirm-section button[type="submit"],
#uploadSection button.analysis-start-btn,
#uploadSection .analysis-step-foot button[type="button"][data-step-next] {
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  color: #0b0803 !important;
  border: none !important;
  border-radius: var(--ui-radius-sm) !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  font-size: 14px !important;
}

/* Polish the kicker + title section */
#uploadSection .analysis-kicker {
  background: rgba(255,193,7,0.08) !important;
  border: 1px solid rgba(255,193,7,0.22) !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
}
#uploadSection .analysis-setup-header {
  margin-bottom: 28px !important;
}


/* ════════════════════════════════════════════════════════════════
   VIEW-ANALYSIS — evaluation graph at top of the chessboard column
════════════════════════════════════════════════════════════════ */

/* Force the analysis-section to render children in DOM order so the
   .premium-side-eval block ALWAYS appears above the .analysis-report
   text. Without this, any inherited flex-direction or order rule from
   a cached layout could put the chart at the bottom. */
.analysis-section {
  display: flex !important;
  flex-direction: column !important;
}
.analysis-section .premium-side-eval { order: -2 !important; margin-bottom: 14px; }
.analysis-section > h3 { order: -1 !important; }
.analysis-section .analysis-report { order: 0 !important; }

.premium-side-eval {
  background: var(--ui-surface-3);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  padding: 12px 14px 10px;
}
.premium-side-eval-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.premium-side-eval-header h3 {
  margin: 0 !important;
  font-family: var(--ui-font-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ui-text) !important;
}
.premium-side-eval-header .info-icon {
  font-size: 11px;
  color: var(--ui-text-3);
}
.premium-side-eval-chart {
  position: relative;
  width: 100%;
  /* Fallback height; JS (chart-renderer) syncs this to the exact board height
     via a ResizeObserver, so no !important here (inline style must win). */
  height: clamp(300px, 40vh, 480px);
}
.premium-side-eval-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Premium "End of report" footer — visual closing of the report with
   brand mark + end-of-report label + action pair. Sits at the true
   bottom of the report flow, after both columns of the split-screen. */
.premium-report-footer {
  margin-top: 36px;
  padding: 28px 32px 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(218,177,72,0.06), transparent 60%),
    var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  position: relative;
  overflow: hidden;
}
.premium-report-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218,177,72,0.55), transparent);
  transform: translateX(-50%);
}

.premium-report-footer-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
  margin-bottom: 22px;
}
.premium-report-footer-line::before,
.premium-report-footer-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08));
  max-width: 200px;
}
.premium-report-footer-line::after {
  background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent);
}

.premium-report-footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.premium-report-footer-mark img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255,193,7,0.4));
}
.premium-report-footer-mark strong {
  font-family: var(--ui-font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ui-gold);
  letter-spacing: 0.01em;
}

.premium-report-footer-end {
  font-family: var(--ui-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ui-text-3);
  flex-shrink: 0;
}

.premium-report-footer-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.premium-report-footer-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--ui-radius-sm);
  font-family: var(--ui-font-sans);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 22px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
  min-width: 180px;
  justify-content: center;
}
/* PDF button — forced gold over the .btn defaults from components.css. */
.premium-report-footer .premium-report-footer-pdf,
button.premium-report-footer-pdf,
.premium-report-footer-pdf.btn {
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  color: #0b0803 !important;
  border: none !important;
}
.premium-report-footer .premium-report-footer-pdf:hover,
button.premium-report-footer-pdf:hover,
.premium-report-footer-pdf.btn:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
}
/* ── Hero centerpiece: giant gold chess knight ── */
.premium-hero { position: relative; }
.premium-hero-knight {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  height: 560px;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 1100px) {
  .premium-hero-knight { width: 460px; height: 460px; }
}
@media (max-width: 860px) {
  .premium-hero-knight {
    width: 320px;
    height: 320px;
    top: auto;
    bottom: -40px;
    opacity: 0.35;
  }
}
.premium-hero-knight-glow {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 50% 50%, rgba(218,177,72,0.30), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(218,177,72,0.10), transparent 70%);
  filter: blur(8px);
  animation: phk-glow 5s ease-in-out infinite;
}
@keyframes phk-glow {
  0%, 100% { opacity: 0.8; transform: scale(0.98); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
.premium-hero-knight-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* PNG is now transparent — no need for mix-blend-mode: screen.
     The gold pixels composite directly, keeping their true colour. */
  filter:
    drop-shadow(0 0 30px rgba(255,193,7,0.45))
    drop-shadow(0 0 80px rgba(255,193,7,0.22));
  animation: phk-float 6s ease-in-out infinite;
}
@keyframes phk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.premium-hero-knight-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.phk-orbit { animation: phk-rotate 24s linear infinite; transform-origin: 200px 200px; }
.phk-orbit-2 { animation-duration: 36s; animation-direction: reverse; }
.phk-orbit circle { filter: drop-shadow(0 0 4px rgba(255,193,7,0.6)); animation: phk-twinkle 2.4s ease-in-out infinite; }
.phk-orbit circle:nth-child(2) { animation-delay: -0.6s; }
.phk-orbit circle:nth-child(3) { animation-delay: -1.2s; }
.phk-orbit circle:nth-child(4) { animation-delay: -1.8s; }
@keyframes phk-rotate { to { transform: rotate(360deg); } }
@keyframes phk-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.7); }
  50%      { opacity: 1;   transform: scale(1.4); }
}

/* The text and card sit above the knight */
.premium-hero-copy,
.premium-hero-visual { position: relative; z-index: 2; }

/* Hero text emphasis */
.premium-hero-text em {
  font-style: italic;
  color: var(--ui-gold);
  font-family: var(--ui-font-serif);
  font-weight: 500;
}


/* Force-override the .btn gold gradient that components.css sets by default. */
.premium-report-footer .premium-report-footer-pgn,
button.premium-report-footer-pgn,
.premium-report-footer-pgn.btn {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-2) !important;
}
.premium-report-footer .premium-report-footer-pgn:hover,
button.premium-report-footer-pgn:hover,
.premium-report-footer-pgn.btn:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: var(--ui-text) !important;
}

@media (max-width: 640px) {
  .premium-report-footer { padding: 24px 18px 20px; }
  .premium-report-footer-line::before,
  .premium-report-footer-line::after { display: none; }
  .premium-report-footer-actions button {
    flex: 1;
    min-width: 0;
  }
}

/* AI Coaching Report header — hero block with single accent (gold)
   and clean ui-text on the title (no cream-white that reads as a
   stray colour against the pure white text used everywhere else). */
body:has(#analysisContent) .premium-report-meta {
  position: relative !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(218,177,72,0.10), transparent 46%),
    var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  padding: 28px 32px !important;
  margin: 0 0 22px !important;
  overflow: hidden !important;
}
/* The `display:grid !important` above out-specifies the page's plain
   `.desktop-only-meta { display:none }` — without this, the "desktop-only"
   meta card (and its H1) leaks into the mobile layout. */
@media (max-width: 767px) {
  body:has(#analysisContent) .premium-report-meta.desktop-only-meta {
    display: none !important;
  }
}
body:has(#analysisContent) .premium-report-meta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(218,177,72,0.55), transparent);
}
.premium-report-kicker {
  display: inline-block !important;
  background: rgba(255,193,7,0.08) !important;
  border: 1px solid rgba(255,193,7,0.25) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  margin: 0 0 14px !important;
}
body:has(#analysisContent) .premium-report-title-row h1,
body:has(#analysisContent) .premium-report-title-row h2 {
  font-size: clamp(34px, 3.6vw, 54px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  /* Normalize from the cream-white #f7f0df previously set; --ui-text
     (pure white #f4f4f5) matches every other title across the app. */
  color: var(--ui-text) !important;
}
.premium-report-subtitle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 12px 0 0 !important;
  padding: 4px 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 20px !important;
  font-family: var(--ui-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ui-text-3) !important;
}

/* Top Show PGN button (sits next to Download PDF in the header) */
.premium-report-pgn-toggle {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-2) !important;
  border-radius: var(--ui-radius-sm) !important;
  font-size: 12px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  font-family: var(--ui-font-sans) !important;
  font-weight: 600 !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.premium-report-pgn-toggle:hover {
  border-color: rgba(255,193,7,0.3) !important;
  background: rgba(255,193,7,0.05) !important;
  color: var(--ui-gold) !important;
}


/* ════════════════════════════════════════════════════════════════
   SIDEBAR FOOTER — clean profile card with two-chip locale row

   Layout:
     [ avatar  name + status ]
     ──────────────────────────
     [ 🌐 EN ▾ ] [ 💱 € ▾ ]
   No collapse button (feature removed).
════════════════════════════════════════════════════════════════ */

/* Override .ui-sidebar overflow:hidden so the lang/currency popovers
   anchored above the chips aren't clipped. The sidebar uses sticky
   positioning with height:100vh so we keep its scroll containment via
   the nav element instead. */
.ui-sidebar { overflow: visible !important; }
.ui-sidebar-nav { overflow-y: auto !important; }

.ui-sidebar-footer {
  padding: 12px !important;
  margin: 0 12px 16px !important;
  position: relative !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  border-top: 1px solid var(--ui-border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow: visible !important;
}

/* User identity row */
.ui-sidebar-user {
  padding: 4px !important;
  gap: 11px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}
.ui-sidebar-user:hover { background: rgba(255,255,255,0.03) !important; }
.ui-sidebar-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: 1px solid rgba(218,177,72,0.42) !important;
  color: var(--ui-gold) !important;
  box-shadow: none !important;
  font-family: var(--ui-font-serif) !important;
}
.ui-sidebar-user-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ui-text) !important;
  line-height: 1.2 !important;
}
.ui-sidebar-user-elo {
  font-size: 10px !important;
  color: var(--ui-text-3) !important;
  font-family: var(--ui-font-mono) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-top: 3px !important;
}

/* Hide original combined locale button — JS replaces it with two chips */
.ui-sidebar-footer #langSelectorWrap,
.ui-sidebar-footer > div[style*="padding:6px 8px 4px"] {
  display: none !important;
}

/* Two-chip locale row (Lang | Currency) */
.sb-locale-row {
  display: flex;
  gap: 6px;
  padding: 0;
}
.sb-locale-chip {
  position: relative;
  flex: 1;
}
.sb-locale-btn {
  width: 100%;
  background: var(--ui-surface-3);
  border: 1px solid var(--ui-border);
  color: var(--ui-text-2);
  padding: 7px 10px;
  border-radius: 8px;
  font-family: var(--ui-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sb-locale-btn:hover {
  background: rgba(255,193,7,0.05);
  border-color: rgba(218,177,72,0.32);
  color: var(--ui-gold);
}
.sb-locale-btn[aria-expanded="true"] {
  border-color: rgba(218,177,72,0.45);
  color: var(--ui-gold);
}
.sb-locale-value {
  flex: 1;
  text-align: left;
  text-transform: uppercase;
}
.sb-locale-arrow {
  font-size: 9px;
  opacity: 0.7;
  transition: transform 0.2s;
}
.sb-locale-btn[aria-expanded="true"] .sb-locale-arrow { transform: rotate(180deg); }

/* Popover (anchored above the chip) */
.sb-locale-pop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 160px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
  z-index: 3000;
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}
.sb-locale-pop[hidden] { display: none; }
.sb-locale-pop-head {
  padding: 8px 14px 6px;
  font-family: var(--ui-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-text-3);
  background: var(--ui-surface-2);
  border-bottom: 1px solid var(--ui-border);
}
.sb-locale-pop-item {
  padding: 8px 14px !important;
  cursor: pointer;
  font-size: 13px !important;
  color: var(--ui-text-2) !important;
  transition: background 0.12s, color 0.12s;
}
.sb-locale-pop-item:hover {
  background: rgba(255,193,7,0.06) !important;
  color: var(--ui-gold) !important;
}

/* Hide the legacy collapse-btn entirely (feature removed) */
.ui-sidebar-collapse-btn { display: none !important; }


/* ════════════════════════════════════════════════════════════════
   Mobile nav: language/currency button rows + login button
   (the mobile nav drawer has 7 lang + 7 currency buttons in a
   flex-wrap row; they wrap unevenly. Plus the inline Login button
   uses a blue gradient. Both fixed here without touching the HTML
   on each page.)
════════════════════════════════════════════════════════════════ */

.mobile-nav button[data-lang-mobile],
.mobile-nav button[data-currency-mobile],
[id="mobileNav"] button[data-lang-mobile],
[id="mobileNav"] button[data-currency-mobile] {
  min-width: 56px !important;
  flex: 1 1 calc(25% - 6px) !important;
  text-align: center !important;
}

/* Mobile login button (blue gradient → gold) */
.mobile-nav #authNavBtnMobile,
[id="mobileNav"] #authNavBtnMobile {
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  color: #0b0803 !important;
  border: none !important;
}


/* ════════════════════════════════════════════════════════════════
   Skeleton loaders — used by my-analyses, my-account, view-analysis
   while content is fetched. Pure CSS, opt-in by adding .skeleton or
   .skeleton-line to an empty element.
════════════════════════════════════════════════════════════════ */

.skeleton,
.skeleton-line {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  border-radius: var(--ui-radius-sm);
}
.skeleton::after,
.skeleton-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.08),
    transparent
  );
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-line {
  height: 12px;
  margin-bottom: 8px;
}
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 65%; }
.skeleton-line.long { width: 85%; }
/* transform-based sweep instead of animating background-position, which
   isn't compositor-accelerated and forces a paint every frame. */
@keyframes skeleton-pulse {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}


/* ════════════════════════════════════════════════════════════════
   /learn/ SEO landing pages — dark-theme overrides
   Each /learn/*.html has its own inline <style> with #2c3e50 navy
   header / #f5f7fa light body / white article cards. These rules
   re-skin all 10+ pages without touching their HTML.
════════════════════════════════════════════════════════════════ */

/* /learn/ pages use either .site-header (index) or a bare <header> +
   .breadcrumb-bar (article pages). Target both so all variants match. */
body:has(.site-header),
body:has(.breadcrumb-bar) {
  background: var(--ui-bg) !important;
  background-color: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}
body:has(.site-header) main,
body:has(.breadcrumb-bar) main {
  background: transparent !important;
}

/* /learn/ top header */
.site-header {
  background: var(--ui-surface-2) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  padding: 0 !important;
}
.site-header-inner { padding: 16px 24px !important; }
.site-header a,
.site-header .logo-text {
  color: var(--ui-gold) !important;
  font-family: var(--ui-font-serif) !important;
  font-weight: 700 !important;
}
.site-header .logo-text span { color: var(--ui-gold) !important; }
.site-header nav a {
  color: var(--ui-text-3) !important;
  font-weight: 500 !important;
  font-family: var(--ui-font-sans) !important;
  font-size: 13px !important;
  margin-left: 18px !important;
}
.site-header nav a:hover { color: var(--ui-text) !important; }
.site-header nav button#authNavBtn {
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  color: #0b0803 !important;
  border-radius: var(--ui-radius-sm) !important;
  font-weight: 700 !important;
  padding: 7px 16px !important;
}
.site-header #langSelectorBtn {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-3) !important;
}
.site-header #langSelectorDropdown {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
}
.site-header #langSelectorDropdown div { color: var(--ui-text-2) !important; }

/* /learn/ index page hero */
.page-hero {
  background:
    radial-gradient(circle at 72% 18%, rgba(218,177,72,0.10), transparent 38%),
    var(--ui-surface-2) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  padding: 64px 24px 56px !important;
}
.page-hero h1 {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
  font-weight: 700 !important;
}
.page-hero p { color: var(--ui-text-3) !important; }

/* /learn/ article card grid */
.articles-grid {
  background: transparent !important;
}
.article-card {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  transition: border-color 0.2s, transform 0.2s, background 0.2s !important;
}
.article-card:hover {
  background: rgba(255,193,7,0.02) !important;
  border-color: rgba(255,193,7,0.25) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35) !important;
  transform: translateY(-2px) !important;
}
.article-card .icon { color: var(--ui-gold) !important; }
.article-card h2 {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
  font-weight: 700 !important;
}
.article-card p { color: var(--ui-text-3) !important; }
.article-card .read-more { color: var(--ui-gold) !important; font-weight: 600 !important; }

/* /learn/ article (single page) body — single <article> with white bg */
body:has(.breadcrumb-bar) article,
body:has(.site-header) article {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
  color: var(--ui-text-2) !important;
}
body:has(.breadcrumb-bar) .article-content,
body:has(.breadcrumb-bar) main article,
body:has(.breadcrumb-bar) article.article {
  background: var(--ui-surface) !important;
  color: var(--ui-text-2) !important;
}
body:has(.breadcrumb-bar) .article-meta,
body:has(.breadcrumb-bar) .breadcrumb,
body:has(.breadcrumb-bar) .breadcrumb-bar,
body:has(.breadcrumb-bar) .breadcrumb-inner {
  color: var(--ui-text-3) !important;
}
body:has(.breadcrumb-bar) .breadcrumb-bar {
  background: var(--ui-surface-2) !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
body:has(.breadcrumb-bar) .breadcrumb a,
body:has(.breadcrumb-bar) .breadcrumb-inner a {
  color: var(--ui-gold) !important;
}
body:has(.breadcrumb-bar) .breadcrumb a:hover,
body:has(.breadcrumb-bar) .breadcrumb-inner a:hover {
  color: var(--ui-gold-dark) !important;
  text-decoration: underline;
}
body:has(.breadcrumb-bar) .breadcrumb-inner span {
  color: var(--ui-text-3) !important;
}

/* ════════════════════════════════════════════════════════════════
   HOME HERO — reference-aligned premium composition
   Bigger knight, visible gold trails, richer report proof card,
   and conversion proof beneath the CTA.
════════════════════════════════════════════════════════════════ */
#premiumLanding .premium-hero {
  min-height: clamp(660px, 72vh, 800px) !important;
  padding: clamp(54px, 5vw, 80px) clamp(24px, 3.4vw, 48px) clamp(42px, 4vw, 62px) !important;
  grid-template-columns: minmax(430px, 1fr) minmax(380px, 400px) !important;
  gap: clamp(48px, 5vw, 96px) !important;
  align-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(218,177,72,0.08) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 56% 48%, rgba(255,222,126,0.22), transparent 22%),
    radial-gradient(circle at 63% 74%, rgba(218,177,72,0.16), transparent 28%),
    radial-gradient(circle at 78% 34%, rgba(255,220,126,0.1), transparent 24%),
    linear-gradient(90deg, #08080a 0%, #08080a 38%, #0d0d0f 64%, #070708 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 34px 110px rgba(0,0,0,0.42) !important;
}

#premiumLanding .premium-hero::before {
  background:
    radial-gradient(circle at 56% 54%, rgba(255,214,118,0.36), transparent 22%),
    radial-gradient(circle at 58% 83%, rgba(218,177,72,0.24), transparent 16%),
    linear-gradient(90deg, rgba(7,7,8,0.96) 0%, rgba(7,7,8,0.8) 35%, rgba(7,7,8,0.22) 68%, rgba(7,7,8,0.08) 100%) !important;
  z-index: 0 !important;
}

#premiumLanding .premium-hero::after {
  right: -13% !important;
  bottom: -34% !important;
  width: 88% !important;
  height: 68% !important;
  background:
    radial-gradient(ellipse at 43% 45%, rgba(255,206,84,0.24), transparent 32%),
    linear-gradient(45deg, rgba(191,139,0,0.16) 25%, transparent 25% 50%, rgba(191,139,0,0.16) 50% 75%, transparent 75%),
    linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.048) 25% 50%, transparent 50% 75%, rgba(255,255,255,0.048) 75%) !important;
  background-size: 72px 72px !important;
  transform: perspective(760px) rotateX(65deg) rotateZ(-1deg) !important;
  opacity: 0.52 !important;
  z-index: 0 !important;
}

#premiumLanding .premium-hero-copy {
  position: relative !important;
  z-index: 4 !important;
  max-width: 650px !important;
}
/* Soft dark scrim behind the hero text — guarantees contrast over any glow
   bleed from the knight, while staying invisible/feathered so the hero still
   looks open and premium. */
#premiumLanding .premium-hero-copy::before {
  content: '' !important;
  position: absolute !important;
  z-index: -1 !important;
  left: -8% !important;
  top: -8% !important;
  width: 116% !important;
  height: 116% !important;
  background: radial-gradient(75% 75% at 32% 50%, rgba(8,7,5,0.82) 0%, rgba(8,7,5,0.5) 45%, transparent 72%) !important;
  pointer-events: none !important;
}

#premiumLanding .premium-kicker {
  margin-bottom: 14px !important;
  color: #f3c852 !important;
  font-size: 13px !important;
  letter-spacing: 0.21em !important;
  text-shadow: 0 0 18px rgba(218,177,72,0.24) !important;
}

#premiumLanding .premium-hero h1 {
  max-width: 610px !important;
  margin: 0 0 22px !important;
  font-size: clamp(46px, 4vw, 64px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
  text-shadow: 0 24px 70px rgba(0,0,0,0.48) !important;
}
/* Gold "AI Chess Coach" accent in the H1 — keeps the keyword prominent
   (good for SEO + the gold look) without repeating it in the kicker. */
#premiumLanding .premium-hero h1 .hero-title-accent {
  display: block !important;
  background: linear-gradient(180deg, #f3d17a 0%, #dab148 55%, #c8922e 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #dab148 !important;
  text-shadow: 0 0 34px rgba(218,177,72,0.32) !important;
  margin-bottom: 2px !important;
}

#premiumLanding .premium-hero-text {
  max-width: 570px !important;
  color: rgba(239,231,213,0.82) !important;
  font-size: clamp(17px, 1.3vw, 21px) !important;
  line-height: 1.62 !important;
}

#premiumLanding .premium-hero-actions {
  gap: 16px !important;
  margin-top: 32px !important;
}

#premiumLanding .premium-hero-actions .premium-gold-btn,
#premiumLanding .premium-hero-actions .premium-ghost-btn {
  min-height: 54px !important;
  padding: 0 30px !important;
  border-radius: 7px !important;
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#premiumLanding .premium-hero-actions .premium-gold-btn {
  box-shadow: 0 18px 46px rgba(185,127,26,0.28), inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

#premiumLanding .premium-hero-actions .premium-ghost-btn {
  min-width: 190px !important;
  color: #f2eadb !important;
  background: rgba(255,255,255,0.025) !important;
  border-color: rgba(218,177,72,0.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

#premiumLanding .premium-pill-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  max-width: 560px !important;
  margin-top: 36px !important;
}

#premiumLanding .premium-pill-row span {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 54px !important;
  color: rgba(239,231,213,0.9) !important;
  font-family: var(--ui-font-mono) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

#premiumLanding .premium-pill-row span::before {
  content: "" !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  color: var(--ui-gold) !important;
  background: rgba(218,177,72,0.08) !important;
  border: 1px solid rgba(218,177,72,0.25) !important;
  box-shadow: 0 0 24px rgba(218,177,72,0.11) !important;
}

#premiumLanding .premium-pill-row span:nth-child(1)::before { content: "✣" !important; }
#premiumLanding .premium-pill-row span:nth-child(2)::before { content: "♙" !important; }
#premiumLanding .premium-pill-row span:nth-child(3)::before { content: "◎" !important; }

#premiumLanding .premium-hero-knight {
  left: 51.3% !important;
  top: 54.5% !important;
  width: clamp(560px, 43vw, 700px) !important;
  height: clamp(560px, 43vw, 700px) !important;
  z-index: 3 !important;
  opacity: 1 !important;
}

#premiumLanding .premium-hero-knight-glow {
  inset: -24% !important;
  background:
    radial-gradient(circle at 50% 43%, rgba(255,226,145,0.48), transparent 32%),
    radial-gradient(circle at 50% 66%, rgba(218,177,72,0.24), transparent 42%),
    radial-gradient(circle at 50% 80%, rgba(218,177,72,0.2), transparent 66%) !important;
  filter: blur(14px) !important;
}

#premiumLanding .premium-hero-knight-img {
  filter:
    saturate(1.1)
    contrast(1.06)
    drop-shadow(0 0 34px rgba(255,214,118,0.52))
    drop-shadow(0 0 95px rgba(218,177,72,0.34))
    drop-shadow(0 48px 58px rgba(0,0,0,0.52)) !important;
  /* Fade the knight's LEFT side (where it sits behind the hero text) so the
     white copy keeps strong contrast; the face/right side stays full-bright. */
  -webkit-mask-image: linear-gradient(100deg, transparent 4%, rgba(0,0,0,0.45) 24%, #000 46%) !important;
          mask-image: linear-gradient(100deg, transparent 4%, rgba(0,0,0,0.45) 24%, #000 46%) !important;
}

#premiumLanding .premium-hero-knight-particles {
  opacity: 0.9 !important;
}

.premium-hero-ribbons {
  position: absolute;
  left: 45.5%;
  top: 5%;
  width: 56%;
  height: 82%;
  z-index: 4;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: screen;
}

.premium-hero-ribbons::before {
  content: "";
  position: absolute;
  left: 14%;
  top: 15%;
  width: 82%;
  height: 92%;
  border-radius: 50%;
  background:
    conic-gradient(from 226deg at 52% 54%, transparent 0deg, transparent 126deg, rgba(244,203,91,0.4) 166deg, rgba(244,203,91,0.08) 232deg, transparent 292deg),
    radial-gradient(ellipse at 52% 62%, rgba(244,203,91,0.16), transparent 58%);
  filter: blur(2px);
  opacity: 0.86;
  transform: rotate(-11deg);
  animation: hero-orbit-sweep 6.4s ease-in-out infinite;
}

@keyframes hero-orbit-sweep {
  0%, 100% { opacity: 0.42; transform: rotate(-10deg) scale(0.98); }
  50% { opacity: 0.82; transform: rotate(1deg) scale(1.03); }
}

.premium-hero-ribbons svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-ribbon {
  fill: none;
  stroke: url(#heroFlowStroke);
  stroke-width: 3.2;
  stroke-linecap: square;
  stroke-linejoin: bevel;
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
  --hero-ribbon-low: 0.48;
  --hero-ribbon-high: 1;
  filter:
    drop-shadow(0 0 5px rgba(255,222,140,0.78))
    drop-shadow(0 0 14px rgba(218,177,72,0.42));
  animation: hero-ribbon-pulse 3.8s ease-in-out infinite;
}

.hero-ribbon-b {
  stroke-width: 2.8;
  --hero-ribbon-low: 0.42;
  --hero-ribbon-high: 0.82;
  animation-duration: 4.8s;
}

.hero-ribbon-c {
  stroke-width: 2.7;
  --hero-ribbon-low: 0.34;
  --hero-ribbon-high: 0.68;
  animation-duration: 5.6s;
}

.hero-ribbon-d {
  stroke-width: 2.3;
  --hero-ribbon-low: 0.28;
  --hero-ribbon-high: 0.66;
  animation-duration: 7.2s;
  animation-direction: reverse;
}

.hero-ribbon-e {
  stroke-width: 2;
  --hero-ribbon-low: 0.2;
  --hero-ribbon-high: 0.54;
  animation-duration: 6.6s;
}

.hero-energy-orbit {
  fill: none;
  stroke: rgba(244,203,91,0.48);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1 13;
  vector-effect: non-scaling-stroke;
  filter:
    drop-shadow(0 0 8px rgba(255,222,140,0.64))
    drop-shadow(0 0 22px rgba(218,177,72,0.42));
  animation: hero-orbit-flow 9s linear infinite;
}

.hero-energy-orbit-b {
  stroke-width: 3.4;
  opacity: 0.82;
  stroke-dasharray: 22 18;
  animation-duration: 11s;
}

.hero-energy-orbit-c {
  stroke-width: 1.8;
  opacity: 0.52;
  stroke-dasharray: 4 20;
  animation-duration: 13s;
  animation-direction: reverse;
}

@keyframes hero-orbit-flow {
  to { stroke-dashoffset: -260; }
}

@keyframes hero-ribbon-pulse {
  0%, 100% { opacity: var(--hero-ribbon-low); }
  50% { opacity: var(--hero-ribbon-high); }
}

.hero-ribbon-dots circle {
  fill: url(#heroFlowNode);
  stroke: rgba(255,232,166,0.62);
  stroke-width: 1.5;
  filter:
    drop-shadow(0 0 8px rgba(255,214,118,0.9))
    drop-shadow(0 0 22px rgba(218,177,72,0.56));
  animation: hero-ribbon-dot 2.8s ease-in-out infinite;
}

.hero-ribbon-dots circle:nth-child(2) { animation-delay: -0.7s; }
.hero-ribbon-dots circle:nth-child(3) { animation-delay: -1.4s; }
.hero-ribbon-dots circle:nth-child(4) { animation-delay: -2.1s; }
.hero-ribbon-dots circle:nth-child(5) { animation-delay: -2.8s; }

@keyframes hero-ribbon-dot {
  0%, 100% { opacity: 0.22; transform: scale(0.75); }
  50% { opacity: 1; transform: scale(1.35); }
}

.hero-flow-node {
  fill: url(#heroFlowNode);
  opacity: 0.96;
  filter:
    drop-shadow(0 0 8px rgba(255,222,140,0.9))
    drop-shadow(0 0 18px rgba(218,177,72,0.5));
}

.hero-flow-node-b { opacity: 0.82; }
.hero-flow-node-c { opacity: 0.72; }

#premiumLanding .premium-hero-visual {
  position: relative !important;
  z-index: 7 !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  min-height: 560px !important;
}

#premiumLanding .hero-report-card {
  width: min(100%, 360px) !important;
  margin-left: auto !important;
  padding: 24px !important;
  border-radius: 16px !important;
  color: var(--ui-text) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.018)),
    linear-gradient(180deg, rgba(218,177,72,0.08), transparent 32%),
    rgba(11,11,14,0.88) !important;
  border: 1px solid rgba(218,177,72,0.44) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.035),
    0 0 34px rgba(255,211,116,0.22),
    0 0 78px rgba(218,177,72,0.18),
    0 38px 105px rgba(0,0,0,0.64) !important;
  backdrop-filter: blur(22px) saturate(1.05) !important;
  /* No translateX — Codex's previous value pushed the card off the right
     edge of its column at narrow viewports, cropping the report content. */
}

#premiumLanding .hero-report-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 0%, rgba(218,177,72,0.15), transparent 28%),
    radial-gradient(circle at 86% 100%, rgba(218,177,72,0.09), transparent 34%);
  pointer-events: none;
}

#premiumLanding .hero-report-card::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 70px;
  width: 2px;
  height: calc(100% - 140px);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 12%, #ffe49f 0 3px, transparent 4px),
    radial-gradient(circle at 50% 50%, #f3c852 0 3px, transparent 4px),
    radial-gradient(circle at 50% 88%, #ffe49f 0 3px, transparent 4px),
    linear-gradient(180deg, transparent, rgba(255,220,126,0.88), transparent),
    linear-gradient(180deg, transparent 8%, rgba(218,177,72,0.28) 8% 18%, transparent 18% 30%, rgba(218,177,72,0.32) 30% 42%, transparent 42% 56%, rgba(218,177,72,0.3) 56% 70%, transparent 70%);
  box-shadow:
    0 0 16px rgba(218,177,72,0.52),
    0 0 34px rgba(218,177,72,0.28);
  pointer-events: none;
  animation: hero-card-intake 2.8s ease-in-out infinite;
}

@keyframes hero-card-intake {
  0%, 100% { opacity: 0.38; transform: scaleY(0.92); }
  50% { opacity: 1; transform: scaleY(1); }
}

#premiumLanding .hero-rc-header {
  gap: 14px !important;
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom-color: rgba(218,177,72,0.2) !important;
}

#premiumLanding .hero-rc-badge {
  padding: 5px 12px 5px 9px !important;
  color: #f3c852 !important;
  border-color: rgba(218,177,72,0.36) !important;
  background: rgba(218,177,72,0.11) !important;
}

#premiumLanding .hero-rc-game {
  flex: 1;
  text-align: right;
  color: rgba(239,231,213,0.54) !important;
  font-size: 11px !important;
}

.hero-rc-bars {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background:
    linear-gradient(to top, #f3c852 0 28%, transparent 28%),
    linear-gradient(to top, #f3c852 0 54%, transparent 54%),
    linear-gradient(to top, #f3c852 0 82%, transparent 82%);
  background-size: 4px 100%, 4px 100%, 4px 100%;
  background-position: 2px 0, 8px 0, 14px 0;
  background-repeat: no-repeat;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(218,177,72,0.45));
}

#premiumLanding .hero-rc-grades {
  gap: 9px !important;
  margin-bottom: 14px !important;
}

#premiumLanding .hero-rc-grade {
  min-height: 72px !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: rgba(6,6,8,0.58) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

#premiumLanding .hero-rc-grade-phase {
  color: rgba(239,231,213,0.53) !important;
  font-size: 9px !important;
  letter-spacing: 0.11em !important;
}

#premiumLanding .hero-rc-grade-mark {
  font-size: 18px !important;   /* percentages are wider than letter grades — keep them inside the box */
  letter-spacing: -0.01em !important;
}

#premiumLanding .hero-rc-chart-wrap {
  margin: 0 0 14px !important;
  padding: 14px 13px 8px !important;
  border-radius: 9px !important;
  background: rgba(6,6,8,0.62) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.hero-rc-chart-title {
  display: block;
  margin: 0 0 8px;
  color: rgba(239,231,213,0.78);
  font-family: var(--ui-font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#premiumLanding .hero-rc-chart {
  height: 92px !important;
}

#premiumLanding .hero-rc-insight {
  margin-bottom: 12px !important;
  padding: 14px 15px !important;
  border-radius: 9px !important;
  background: rgba(218,177,72,0.055) !important;
  border-color: rgba(218,177,72,0.18) !important;
}

#premiumLanding .hero-rc-insight-label {
  font-size: 11px !important;
  letter-spacing: 0.11em !important;
}

#premiumLanding .hero-rc-insight p {
  color: rgba(239,231,213,0.68) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

#premiumLanding .hero-rc-work {
  padding: 15px !important;
  border-radius: 9px !important;
  background: rgba(5,5,7,0.72) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
}

#premiumLanding .hero-rc-work strong {
  color: #f7f0df !important;
  font-family: var(--ui-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

#premiumLanding .hero-rc-work span {
  color: rgba(239,231,213,0.65) !important;
}

#premiumLanding .hero-rc-work a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: var(--ui-gold) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}

@media (max-width: 1240px) {
  #premiumLanding .premium-hero {
    grid-template-columns: minmax(390px, 0.82fr) minmax(300px, 0.44fr) !important;
    gap: clamp(42px, 5vw, 76px) !important;
  }

  #premiumLanding .premium-hero-knight {
    left: 50.4% !important;
    width: clamp(500px, 41vw, 580px) !important;
    height: clamp(500px, 41vw, 580px) !important;
  }

  #premiumLanding .hero-report-card {
    width: min(100%, 330px) !important;
    transform: translateX(0) !important;
  }
}

@media (max-width: 980px) {
  #premiumLanding .premium-hero {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    padding: 54px 24px 34px !important;
  }

  #premiumLanding .premium-hero-copy {
    max-width: 680px !important;
  }

  #premiumLanding .premium-hero-knight {
    left: 72% !important;
    top: 32% !important;
    width: 430px !important;
    height: 430px !important;
    opacity: 0.42 !important;
  }

  .premium-hero-ribbons {
    left: 40%;
    top: 30%;
    width: 64%;
    height: 34%;
    opacity: 0.5;
  }

  #premiumLanding .premium-hero-visual {
    min-height: auto !important;
    justify-content: flex-start !important;
  }

  #premiumLanding .hero-report-card {
    width: min(100%, 520px) !important;
    transform: none !important;
  }

  #premiumLanding .premium-pill-row {
    grid-template-columns: 1fr !important;
    max-width: 420px !important;
    gap: 10px !important;
  }
}

@media (max-width: 560px) {
  #premiumLanding .premium-hero h1 {
    font-size: clamp(38px, 11.2vw, 54px) !important;
  }

  #premiumLanding .premium-hero-text {
    font-size: 16px !important;
  }

  #premiumLanding .hero-report-card {
    padding: 18px !important;
  }

  #premiumLanding .hero-rc-header {
    flex-wrap: wrap;
  }

  #premiumLanding .hero-rc-game {
    text-align: left;
  }
}
/* Article page bare <header> (not .site-header) */
body:has(.breadcrumb-bar) > header {
  background: var(--ui-surface-2) !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
body:has(.breadcrumb-bar) > header a,
body:has(.breadcrumb-bar) > header span {
  color: var(--ui-gold) !important;
}
body:has(.breadcrumb-bar) > header nav a {
  color: var(--ui-text-3) !important;
  font-weight: 500 !important;
}
body:has(.breadcrumb-bar) > header nav a:hover {
  color: var(--ui-text) !important;
}

/* Narrow-phone article chrome: keep the brand and two primary controls fully
   visible while the full navigation remains available from the page links. */
@media (max-width: 400px) {
  body:has(.breadcrumb-bar) > nav {
    padding-inline: 12px !important;
    gap: 8px !important;
    overflow: hidden;
  }

  body:has(.breadcrumb-bar) > nav > div {
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  body:has(.breadcrumb-bar) > nav > div > a {
    display: none !important;
  }

  body:has(.breadcrumb-bar) > nav .nav-logo {
    font-size: 18px !important;
    white-space: nowrap;
  }

  body:has(.breadcrumb-bar) #authNavBtn {
    padding-inline: 10px !important;
  }

  body:has(.breadcrumb-bar) #langSelectorBtn {
    padding-inline: 8px !important;
  }

  body:has(.breadcrumb-bar) #langSelectorBtn > span:nth-child(2),
  body:has(.breadcrumb-bar) #currencyDisplay {
    display: none !important;
  }
}
body:has(.site-header) main article h1,
body:has(.site-header) main article h2,
body:has(.site-header) main article h3,
body:has(.site-header) main article h4,
body:has(.breadcrumb-bar) article h1,
body:has(.breadcrumb-bar) article h2,
body:has(.breadcrumb-bar) article h3,
body:has(.breadcrumb-bar) article h4 {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
}
body:has(.site-header) main article p,
body:has(.site-header) main article li,
body:has(.breadcrumb-bar) article p,
body:has(.breadcrumb-bar) article li,
body:has(.breadcrumb-bar) article strong {
  color: var(--ui-text-2) !important;
}
body:has(.breadcrumb-bar) article strong { font-weight: 600 !important; }
body:has(.site-header) main article a,
body:has(.breadcrumb-bar) article a {
  color: var(--ui-gold) !important;
}
body:has(.site-header) main article blockquote,
body:has(.breadcrumb-bar) article blockquote {
  background: rgba(255,193,7,0.04) !important;
  border-left: 3px solid var(--ui-gold) !important;
  color: var(--ui-text-2) !important;
}
body:has(.site-header) main article code,
body:has(.site-header) main article pre,
body:has(.breadcrumb-bar) article code,
body:has(.breadcrumb-bar) article pre {
  background: var(--ui-surface-3) !important;
  color: var(--ui-gold) !important;
  border: 1px solid var(--ui-border) !important;
}

/* /learn/ footer */
body:has(.site-header) footer,
body:has(.breadcrumb-bar) footer {
  background: var(--ui-surface-2) !important;
  border-top: 1px solid var(--ui-border) !important;
  color: var(--ui-text-3) !important;
}
body:has(.site-header) footer h3,
body:has(.site-header) footer h4,
body:has(.breadcrumb-bar) footer h3,
body:has(.breadcrumb-bar) footer h4 {
  color: var(--ui-text-2) !important;
  font-family: var(--ui-font-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}
body:has(.site-header) footer a,
body:has(.breadcrumb-bar) footer a { color: var(--ui-text-3) !important; }
body:has(.site-header) footer a:hover,
body:has(.breadcrumb-bar) footer a:hover { color: var(--ui-gold) !important; }
body:has(.site-header) footer .copy,
body:has(.breadcrumb-bar) footer .copy { color: var(--ui-text-3) !important; }


/* ════════════════════════════════════════════════════════════════
   Legal pages (terms, privacy, refund) — dark-theme overrides
════════════════════════════════════════════════════════════════ */

body:has(.legal-content) {
  background: var(--ui-bg) !important;
  color: var(--ui-text-2) !important;
}
.legal-content {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45) !important;
  color: var(--ui-text-2) !important;
  padding: 36px !important;
}
.legal-content h1 {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  padding-bottom: 18px !important;
}
.legal-content h2 {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-serif) !important;
  font-weight: 700 !important;
  margin-top: 36px !important;
}
.legal-content h3 {
  color: var(--ui-text-2) !important;
  font-weight: 600 !important;
}
.legal-content p,
.legal-content li {
  color: var(--ui-text-2) !important;
  line-height: 1.75 !important;
}
.legal-content strong { color: var(--ui-text) !important; }
.legal-content a { color: var(--ui-gold) !important; }
.legal-content .highlight {
  background: rgba(255,193,7,0.05) !important;
  border-left: 3px solid var(--ui-gold) !important;
  color: var(--ui-text-2) !important;
  border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   ANALYZE WIZARD — premium polish (#uploadSection)
════════════════════════════════════════════════════════════════ */
/* Drop the redundant body heading — the gold "1. Load Your Games"
   step label already names the section. */
#uploadSection.analysis-setup .fetch-game-section h2.hide-mobile { display: none !important; }

/* Platform tabs — clean gold selected state (kills the muddy blue/brown) */
#uploadSection .platform-tab {
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface-3) !important;
  color: var(--ui-text-3) !important;
  font-weight: 600 !important;
  transition: border-color .15s, color .15s, background .15s !important;
}
#uploadSection .platform-tab:hover { border-color: var(--ui-border-hover) !important; color: var(--ui-text-2) !important; }
#uploadSection .platform-tab.active {
  background: rgba(218,177,72,0.10) !important;
  border: 1px solid var(--ui-gold) !important;
  color: var(--ui-gold) !important;
}

/* Username input + Fetch button — equal height + unified brand gold */
#uploadSection #platformUsername {
  padding: 13px 16px !important;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface-3) !important;
  color: var(--ui-text) !important;
  border-radius: var(--ui-radius-sm) !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}
#uploadSection #platformUsername::placeholder { color: var(--ui-text-3) !important; }
#uploadSection #platformUsername:focus {
  outline: none !important;
  border-color: rgba(218,177,72,0.5) !important;
  box-shadow: 0 0 0 3px rgba(218,177,72,0.10) !important;
}
#uploadSection #fetchGamesBtn {
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  color: #0b0803 !important;
  border: none !important;
  border-radius: var(--ui-radius-sm) !important;
  font-weight: 700 !important;
  padding: 13px 22px !important;
}
#uploadSection #fetchGamesBtn:hover { filter: brightness(1.06) !important; }

/* Time-control filter — premium toggle chips with custom checkboxes */
#uploadSection .fetch-game-filter-block {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
}
#uploadSection .fetch-game-filter-block label {
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface-3) !important;
  border-radius: 999px !important;
  padding: 7px 14px 7px 12px !important;
  margin: 0 !important;
  transition: border-color .15s, background .15s !important;
}
#uploadSection .fetch-game-filter-block label:hover { border-color: var(--ui-border-hover) !important; }
#uploadSection .fetch-game-filter-block label:has(input:checked) {
  background: rgba(218,177,72,0.10) !important;
  border-color: rgba(218,177,72,0.45) !important;
}
#uploadSection .fetch-game-filter-block label span { color: var(--ui-text-2) !important; font-size: 13px !important; }
#uploadSection .fetch-game-filter-block label:has(input:checked) span { color: var(--ui-gold) !important; }
#uploadSection .fetch-game-filter-block input[type="checkbox"] {
  appearance: none !important; -webkit-appearance: none !important;
  width: 15px !important; height: 15px !important;
  border: 1px solid var(--ui-border-hover) !important;
  border-radius: 4px !important;
  background: var(--ui-surface) !important;
  margin: 0 9px 0 0 !important;
  position: relative !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
#uploadSection .fetch-game-filter-block input[type="checkbox"]:checked {
  background: var(--ui-gold) !important;
  border-color: var(--ui-gold) !important;
}
#uploadSection .fetch-game-filter-block input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 4px !important; top: 1px !important;
  width: 4px !important; height: 8px !important;
  border: solid #0b0803 !important; border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

/* Ghost knight watermark — make it intentional, not a smudge */
#uploadSection .fetch-game-ghost { opacity: 0.045 !important; }

/* ════════════════════════════════════════════════════════════════
   ANALYZE WIZARD — compact app-like layout (fit step 1 in ~768px)
════════════════════════════════════════════════════════════════ */
#uploadSection.analysis-setup {
  gap: 10px !important;
  padding: 12px 28px 12px !important;
  margin: 0 auto 4px !important;
}
/* Trim landing-page bottom padding when the analyze wizard is active so
   step 1 fits the viewport with no dead scroll space. */
body.analyze-active:has(#premiumLanding) .main-content { padding-bottom: 12px !important; }
#uploadSection .analysis-setup-header {
  gap: 6px !important;
  margin: 0 auto 4px !important;
}
#uploadSection .analysis-setup-header h1 {
  font-size: clamp(22px, 2.2vw, 26px) !important;
  line-height: 1.05 !important;
}
#uploadSection .analysis-setup-header p {
  font-size: 13px !important;
  line-height: 1.4 !important;
  max-width: 46ch !important;
}
#uploadSection .analysis-kicker { padding: 4px 12px !important; }
#uploadSection .analysis-stepper { margin: 0 auto 0 !important; }
#uploadSection .analysis-step { gap: 5px !important; }
#uploadSection .analysis-step span { width: 26px !important; height: 26px !important; }
#uploadSection .analysis-stepper::before { top: 13px !important; }
#uploadSection .section,
#uploadSection .pgn-section > .section,
#uploadSection .settings-section > .section { padding: 18px 26px !important; }
#uploadSection .fetch-game-step-row { margin: 0 0 12px !important; padding-bottom: 11px !important; }
#uploadSection .fetch-game-field { margin-bottom: 10px !important; }
#uploadSection .fetch-game-field-label { margin-bottom: 5px !important; }
#uploadSection .fetch-game-filter-block { padding: 11px 14px !important; margin-top: 2px !important; }
#uploadSection .fetch-game-filter-block > div:first-child { margin-bottom: 9px !important; }

/* Mobile: compact the hero header so the wizard isn't an endless scroll */
@media (max-width: 640px) {
  #uploadSection.analysis-setup { padding: 10px 14px 12px !important; gap: 10px !important; }
  #uploadSection .analysis-setup-header h1 { font-size: 24px !important; }
  #uploadSection .analysis-setup-header p { font-size: 12.5px !important; max-width: 40ch !important; }
  #uploadSection .section,
  #uploadSection .pgn-section > .section { padding: 18px 18px !important; }
}

/* Keep the active wizard action reachable above the persistent app navigation.
   The panels may scroll on compact screens, but their primary action must not
   disappear below the fold or behind the bottom navigation.

   Portrait: stacked full-width controls (owner-specified) — ghost Previous on
   top, gold primary last so the final action in the flow is the closest to the
   thumb. DOM order (Prev → Continue → Start) already matches; no CSS `order`.
   On step 1 Previous is display:none, so Continue alone fills the tray. */
@media (max-width: 1023px) {
  body.analyze-active #uploadSection.analysis-setup {
    padding-bottom: calc(var(--ui-bottom-nav-h) + 136px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.analyze-active #uploadSection .analysis-actions {
    position: fixed !important;
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--ui-bottom-nav-h) + 8px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 720px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid rgba(218,177,72,0.28);
    border-radius: 16px;
    background: rgba(14,14,16,0.94);
    box-shadow: 0 14px 34px rgba(0,0,0,0.58);
    backdrop-filter: blur(14px);
  }

  body.analyze-active #uploadSection .analysis-actions > button {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding-inline: 12px !important;
  }

  /* > button.… keeps these ahead of the generic `> button` rule above
     (that rule's extra element selector otherwise out-specifies a bare
     class selector and the primary sizing loses). */
  body.analyze-active #uploadSection .analysis-actions > button.analysis-nav-primary,
  body.analyze-active #uploadSection .analysis-actions > button.analysis-start-btn {
    min-height: 48px !important;
  }
}

/* Short landscape: stacking would eat too much height — one 1:2 row instead
   (compact ghost Previous, dominant gold primary). */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px) {
  body.analyze-active #uploadSection.analysis-setup {
    padding-bottom: calc(var(--ui-bottom-nav-h) + 92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.analyze-active #uploadSection .analysis-actions {
    flex-direction: row !important;
    padding: 8px;
  }

  body.analyze-active #uploadSection .analysis-actions > button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-height: 48px !important; /* equal heights in the row */
  }

  body.analyze-active #uploadSection .analysis-actions > button.analysis-nav-primary,
  body.analyze-active #uploadSection .analysis-actions > button.analysis-start-btn {
    flex: 2 1 0 !important;
  }
}

/* Analyze username — keep typed/autofilled text readable (Chrome autofill
   otherwise paints a light background with dark-on-dark or invisible text). */
#uploadSection #platformUsername:-webkit-autofill,
#uploadSection #platformUsername:-webkit-autofill:hover,
#uploadSection #platformUsername:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ui-text) !important;
  caret-color: var(--ui-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--ui-surface-3) inset !important;
  box-shadow: 0 0 0 1000px var(--ui-surface-3) inset !important;
  border: 1px solid rgba(218,177,72,0.4) !important;
}

/* ════════════════════════════════════════════════════════════════
   ANALYSIS PROGRESS — premium "engine working" state
════════════════════════════════════════════════════════════════ */
#progressContainer.progress-container {
  position: relative;
  overflow: hidden;
  max-width: 1080px !important;   /* app content width — the review board needs room */
  margin: 24px auto !important;
  padding: 30px 34px !important;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(218,177,72,0.12), transparent 60%),
    var(--ui-surface) !important;
  border: 1px solid rgba(218,177,72,0.22) !important;
  border-radius: var(--ui-radius-xl) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,0.45) !important;
}
#progressContainer.progress-container::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ui-gold), transparent);
}
#progressContainer .progress-steps { padding: 0 6px !important; margin-bottom: 24px !important; }
#progressContainer .step { gap: 8px; color: var(--ui-text-3) !important; }
#progressContainer .step span {
  font-family: var(--ui-font-mono) !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important;
  color: var(--ui-text-3) !important; text-align: center;
}
#progressContainer .step-indicator {
  width: 34px !important; height: 34px !important;
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-3) !important;
  font-family: var(--ui-font-serif) !important; font-weight: 700 !important;
  box-shadow: none !important;
  transition: background .25s, border-color .25s, color .25s, box-shadow .25s !important;
}
#progressContainer .step-indicator.active {
  background: radial-gradient(circle at 30% 25%, rgba(218,177,72,0.35), rgba(218,177,72,0.12)) !important;
  border-color: var(--ui-gold) !important;
  color: var(--ui-gold) !important;
  box-shadow: 0 0 0 4px rgba(218,177,72,0.10), 0 0 20px rgba(218,177,72,0.25) !important;
}
#progressContainer .step-indicator.complete {
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  border-color: var(--ui-gold) !important;
  color: #0b0803 !important;
  font-size: 0 !important;
}
#progressContainer .step-indicator.complete::after {
  content: '✓'; font-size: 16px; font-weight: 700; color: #0b0803;
}
#progressContainer .step-line { background: var(--ui-border) !important; margin-top: 17px !important; }
#progressContainer .step-line.complete { background: linear-gradient(90deg, var(--ui-gold-dim), var(--ui-gold)) !important; }
#progressContainer .progress-info {
  color: var(--ui-text-2) !important; font-weight: 500 !important; margin-bottom: 12px !important;
}
#progressContainer #progressText {
  font-family: var(--ui-font-serif) !important; font-size: 16px !important; color: var(--ui-text) !important;
}
#progressContainer .progress-bar {
  position: relative;
  height: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 999px !important;
  margin: 14px 0 8px !important;
  overflow: hidden !important;
}
#progressContainer .progress-fill {
  background: linear-gradient(90deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 14px rgba(218,177,72,0.5) !important;
  transition: width 0.4s cubic-bezier(0.2,0.8,0.3,1) !important;
}
/* moving sheen over the filled portion so it reads as "working" */
#progressContainer .progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: translateX(-100%);
  animation: progress-sheen 1.4s ease-in-out infinite;
}
@keyframes progress-sheen { to { transform: translateX(220%); } }
#progressContainer #currentPosition {
  color: var(--ui-text-3) !important; font-family: var(--ui-font-mono) !important;
  font-size: 12px !important; margin-top: 8px !important;
}

/* ════════════════════════════════════════════════════════════════
   ANALYZE WIZARD — game list, settings (step 2), confirm (step 3)
════════════════════════════════════════════════════════════════ */

/* ── Step 1: fetched games list ──────────────────────────────────── */
#uploadSection #gamesListContainer { margin-top: 16px; }
#uploadSection #gamesListContainer > h3 {
  font-family: var(--ui-font-mono) !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: var(--ui-gold) !important; margin: 0 0 12px !important;
}
#uploadSection #gamesList {
  max-height: 320px !important; overflow-y: auto !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  padding: 6px !important; background: rgba(0,0,0,0.18) !important;
  display: flex; flex-direction: column; gap: 6px;
}
#uploadSection .game-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px !important;
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
}
#uploadSection .game-item:hover {
  border-color: rgba(218,177,72,0.45) !important;
  background: rgba(218,177,72,0.05) !important;
}
#uploadSection .game-item.selected {
  border-color: var(--ui-gold) !important;
  background: rgba(218,177,72,0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(218,177,72,0.3) !important;
}
#uploadSection .gi-players { font-weight: 600; color: var(--ui-text); font-size: 14px; }
#uploadSection .gi-vs { color: var(--ui-text-3); font-weight: 400; margin: 0 3px; }
#uploadSection .gi-meta { font-size: 12px; color: var(--ui-text-3); margin-top: 3px; font-family: var(--ui-font-mono); }
#uploadSection .gi-right { text-align: right; flex-shrink: 0; }
#uploadSection .gi-result { font-family: var(--ui-font-serif); font-weight: 700; font-size: 16px; line-height: 1; }
#uploadSection .gi-result.gi-win { color: var(--ui-emerald); }
#uploadSection .gi-result.gi-loss { color: #fca5a5; }
#uploadSection .gi-result.gi-draw { color: var(--ui-text-3); }
#uploadSection .gi-cta { font-size: 11px; color: var(--ui-text-3); margin-top: 4px; font-family: var(--ui-font-mono); }
#uploadSection .game-item:hover .gi-cta,
#uploadSection .game-item.selected .gi-cta { color: var(--ui-gold); }

/* Selected-game confirmation banner — show on PC + mobile */
#uploadSection #selectedGameSummary {
  display: none; margin-top: 14px !important;
  padding: 12px 16px !important;
  background: rgba(218,177,72,0.08) !important;
  border: 1px solid rgba(218,177,72,0.35) !important;
  border-radius: var(--ui-radius-md) !important;
}
#uploadSection #selectedGameSummary > div { gap: 12px !important; }
#uploadSection #selectedGameText { color: var(--ui-text) !important; font-weight: 600 !important; }
#uploadSection #selectedGameSummary span[style*="1.2em"] { color: var(--ui-gold) !important; }
#uploadSection #changeGameBtn {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--ui-border-hover) !important;
  color: var(--ui-text-2) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 7px 14px !important; font-weight: 600 !important; font-size: 13px !important;
}
#uploadSection #changeGameBtn:hover { border-color: rgba(218,177,72,0.45) !important; color: var(--ui-gold) !important; }

/* ── Step 2: Analysis Settings — compact ─────────────────────────── */
#uploadSection .settings-section .section > h2 {
  font-size: 18px !important; margin-bottom: 18px !important;
}
#uploadSection .settings-section .form-group { margin-bottom: 14px !important; }
#uploadSection .settings-section label {
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--ui-text-2) !important; margin-bottom: 6px !important; display: block;
}
/* Settings fields with a leading gold icon (matches the mockup) */
#uploadSection .settings-section .al-field { position: relative; }
#uploadSection .settings-section .al-field-ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ui-gold); pointer-events: none; z-index: 1;
}
#uploadSection .settings-section .al-field-ico svg { width: 18px; height: 18px; display: block; }
#uploadSection .settings-section .al-field select,
#uploadSection .settings-section .al-field input[type="text"] { padding-left: 40px !important; }
#uploadSection .settings-section select,
#uploadSection .settings-section input[type="text"] {
  width: 100% !important; padding: 11px 14px !important;
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  border-radius: var(--ui-radius-sm) !important;
  font-size: 14px !important; box-sizing: border-box !important;
}
#uploadSection .settings-section select:focus,
#uploadSection .settings-section input[type="text"]:focus {
  outline: none !important; border-color: rgba(218,177,72,0.5) !important;
  box-shadow: 0 0 0 3px rgba(218,177,72,0.10) !important;
}
#uploadSection .settings-section input::placeholder { color: var(--ui-text-3) !important; }

/* Report length — compact row, description expands only on the selected one */
#uploadSection .al-report-heading { color: var(--ui-text-2) !important; font-size: 12px !important; }
#uploadSection .al-report-options { display: flex !important; gap: 10px !important; }
#uploadSection .al-report-opt {
  flex: 1; position: relative; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 14px 14px 58px;   /* left room for the clock icon */
  background: var(--ui-surface-3); border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
/* clock icon, circular — vertically centred so it stays aligned whether the
   card is the tall multi-line form or the compact single-line form on short
   viewports (where the description is hidden). */
#uploadSection .al-report-opt-ico {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(218,177,72,0.4);
  background: rgba(218,177,72,0.06);
  color: var(--ui-gold);
}
#uploadSection .al-report-opt-ico svg { width: 17px; height: 17px; }
/* override components.css blue hover/checked with gold (ID specificity + !important) */
#uploadSection .al-report-opt:hover {
  border-color: rgba(218,177,72,0.4) !important;
  background: rgba(218,177,72,0.04) !important;
}
#uploadSection .al-report-opt input { position: absolute; opacity: 0; pointer-events: none; }
#uploadSection .al-report-opt-title { font-weight: 700; color: var(--ui-text); font-size: 14px; }
#uploadSection .al-report-opt-time { font-family: var(--ui-font-mono); font-size: 11px; color: var(--ui-text-3); }
#uploadSection .al-report-opt-desc {
  display: none; font-size: 12px; color: var(--ui-text-3);
  margin-top: 6px; line-height: 1.45;
}
#uploadSection .al-report-opt:has(input:checked) {
  background: rgba(218,177,72,0.08) !important;
  border-color: rgba(218,177,72,0.6) !important;
  box-shadow: 0 0 0 1px rgba(218,177,72,0.4), 0 0 22px rgba(218,177,72,0.14) !important;
}
#uploadSection .al-report-opt:has(input:checked) .al-report-opt-ico {
  background: rgba(218,177,72,0.16); border-color: rgba(218,177,72,0.7);
}
#uploadSection .al-report-opt:has(input:checked) .al-report-opt-title { color: var(--ui-gold); }
#uploadSection .al-report-opt:has(input:checked) .al-report-opt-time { color: var(--ui-gold-dim); }
#uploadSection .al-report-opt:has(input:checked) .al-report-opt-desc { display: block; }
/* gold check badge top-right when selected */
#uploadSection .al-report-opt:has(input:checked)::after {
  content: '✓'; position: absolute; top: 11px; right: 12px;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, #dab148, #f3d17a); color: #0b0803;
  font-size: 11px; font-weight: 900; display: grid; place-items: center;
  box-shadow: 0 0 10px rgba(218,177,72,0.4);
}
@media (max-width: 560px) {
  #uploadSection .al-report-options { flex-direction: column !important; }
}

/* ── Step 3: Confirm — premium ───────────────────────────────────── */
#uploadSection .analysis-confirm-card {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  padding: 16px 18px !important;
  transition: border-color .15s;
}
#uploadSection .analysis-confirm-card:hover { border-color: rgba(218,177,72,0.30) !important; }
#uploadSection .analysis-confirm-card { display: flex !important; align-items: center !important; gap: 14px !important; }
#uploadSection .analysis-confirm-card .acard-ico {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(218,177,72,0.4);
  background: radial-gradient(circle, rgba(218,177,72,0.14), rgba(218,177,72,0.03) 70%);
  color: var(--ui-gold);
  box-shadow: 0 0 14px rgba(218,177,72,0.12);
}
#uploadSection .analysis-confirm-card .acard-ico svg { width: 22px; height: 22px; }
#uploadSection .analysis-confirm-card .acard-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#uploadSection .analysis-confirm-card span { color: var(--ui-gold-dim) !important; }
#uploadSection .analysis-confirm-card strong { font-family: var(--ui-font-serif) !important; font-size: 17px !important; }
#uploadSection .analysis-security-note {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px !important; border-radius: var(--ui-radius-md) !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-3) !important;
}
#uploadSection .analysis-security-note::before {
  content: ''; flex-shrink: 0; width: 16px; height: 16px;
  background: var(--ui-gold-dim);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Report-length cards inherit the settings label uppercase — reset to normal case */
#uploadSection .al-report-opt,
#uploadSection .al-report-opt-title,
#uploadSection .al-report-opt-time,
#uploadSection .al-report-opt-desc { text-transform: none !important; letter-spacing: normal !important; }
#uploadSection .al-report-opt-time { font-size: 11px !important; color: var(--ui-text-3) !important; margin-left: 2px; }

/* Step 2 settings — 2-column grid on desktop so it takes less vertical space */
@media (min-width: 720px) {
  #uploadSection .settings-section .section {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 18px !important;
    align-items: start !important;
  }
  #uploadSection .settings-section .section > .analysis-panel-eyebrow,
  #uploadSection .settings-section .section > h2,
  #uploadSection .settings-section .section > .settings-subtitle,
  #uploadSection .settings-section .al-report-group { grid-column: 1 / -1 !important; }
  #uploadSection .settings-section .form-group { margin-bottom: 0 !important; }
}

/* Username autocomplete — dark items with readable hover (was light-on-light) */
#usernameDropdown .username-suggestion {
  padding: 10px 14px !important;
  cursor: pointer;
  color: var(--ui-text) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  transition: background .12s, color .12s;
}
#usernameDropdown .username-suggestion:last-child { border-bottom: none !important; }
#usernameDropdown .username-suggestion:hover {
  background: rgba(218,177,72,0.12) !important;
  color: var(--ui-gold) !important;
}

/* Analyze view — drop the wasteful status line + the big setup header
   (kicker / "New Analysis" / description). The stepper carries the context. */
body.analyze-active .engine-status { display: none !important; }
#uploadSection .analysis-setup-header { display: none !important; }
#uploadSection.analysis-setup { padding-top: 8px !important; }

/* Evaluation graph — full-width strip at the top of the report */
.premium-eval-top {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  padding: 20px 24px !important;
  margin-bottom: 18px !important;
}
.premium-eval-top h3 {
  margin: 0 0 12px !important;
  font-family: var(--ui-font-serif) !important;
  font-size: 16px !important; font-weight: 600 !important;
  color: var(--ui-text) !important;
  display: flex !important; align-items: center; gap: 8px;
}

/* Stepper — more elegant: glow on the active step, check on completed */
#uploadSection .analysis-step.is-active span {
  background: radial-gradient(circle at 30% 25%, rgba(218,177,72,0.35), rgba(218,177,72,0.12)) !important;
  border-color: var(--ui-gold) !important;
  box-shadow: 0 0 0 4px rgba(218,177,72,0.08), 0 0 16px rgba(218,177,72,0.22) !important;
}
#uploadSection .analysis-step.is-complete span {
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  border-color: var(--ui-gold) !important;
  color: #0b0803 !important;
  font-size: 0 !important;
  box-shadow: none !important;
}
#uploadSection .analysis-step.is-complete span::after {
  content: '✓'; font-size: 13px; font-weight: 700; color: #0b0803;
}
#uploadSection .analysis-step strong { font-size: 9px !important; letter-spacing: 0.14em !important; }

/* Fresh report (index) — keep .ui-page-content as the scroll container (its
   default overflow-y:auto) so the global `.chessboard-section { position:sticky }`
   rule works exactly like the saved-report viewer. An earlier attempt forced
   these to overflow:visible, which REMOVED the scroll container and silently
   broke the sticky board. Do NOT reintroduce that. Just make sure intermediate
   wrappers don't clip the sticky element. */
/* Sticky board: the page scrolls on <html>, but every wrapper down to <body>
   has non-visible overflow (body's overflow-y computes to `auto` because
   `html,body{overflow-x:hidden}` — a CSS spec quirk), making them NON-scrolling
   sticky containers that silently break `position:sticky`. Neutralise them for
   the fresh report so the board sticks to the viewport (html scroll). */
body.report-shown { overflow-x: visible !important; }
@media (min-width: 1024px) {
  body.report-shown .ui-main-area,
  body.report-shown .ui-page-content,
  body.report-shown #resultsContainer,
  body.report-shown #resultsContainer .desktop-layout,
  body.report-shown #resultsContainer .split-screen-container { overflow: visible !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ANALYZE WIZARD — PREMIUM REDESIGN (authoritative; loads last → wins)
   Formula matches the approved marketing sections:
   mono gold eyebrow → Playfair serif title → clean Inter body.
   Adds a depth system, refined states, gold CTAs, and motion.
   ════════════════════════════════════════════════════════════════════ */

/* ── Stepper: refined timeline — calm hairline track, nodes are the focus ── */
#uploadSection .analysis-stepper {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  width: min(100%, 392px) !important;
  max-width: 392px !important;
  margin: 6px auto 28px !important;
}
#uploadSection .analysis-stepper::before,
#uploadSection .analysis-stepper::after {
  content: '' !important;
  position: absolute !important;
  top: 23px !important;            /* vertical centre of a 46px node */
  height: 2px !important;
  border-radius: 2px !important;
  left: 16.67% !important;
}
/* incomplete track: quiet hairline */
#uploadSection .analysis-stepper::before { right: 16.67% !important; background: rgba(255,255,255,0.09) !important; }
/* completed fill: calm gold, NO glow halo */
#uploadSection .analysis-stepper::after {
  width: 0 !important;
  background: linear-gradient(90deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  box-shadow: none !important;
  transition: width var(--ui-dur-slow) var(--ui-ease) !important;
}
#uploadSection[data-analysis-step-current="2"] .analysis-stepper::after { width: 33.33% !important; }
#uploadSection[data-analysis-step-current="3"] .analysis-stepper::after { width: 66.66% !important; }

#uploadSection .analysis-step {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  gap: 11px !important;
  cursor: pointer !important;
}
/* nodes: larger, opaque (the hairline tucks cleanly behind them) */
#uploadSection .analysis-step span {
  width: 46px !important; height: 46px !important;
  font-family: var(--ui-font-serif) !important;
  font-size: 18px !important; font-weight: 700 !important;
  background: var(--ui-surface) !important;
  border: 1.5px solid rgba(255,255,255,0.16) !important;
  color: var(--ui-text-3) !important;
  position: relative !important; z-index: 1 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45) !important;
  transition: background var(--ui-dur) var(--ui-ease), border-color var(--ui-dur) var(--ui-ease),
              color var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease),
              transform var(--ui-dur) var(--ui-ease) !important;
}
/* completed: reverse the contrast of the active node — solid gold fill, near-black
   centred number (no check), same ring. Reads as "done", premium, without changing
   layout. Black-on-gold mirrors the gold CTA's #0b0803-on-gold treatment. */
#uploadSection .analysis-step.is-complete span {
  background: linear-gradient(135deg, var(--ui-gold), var(--ui-gold-dim)) !important;
  border: 2px solid var(--ui-gold) !important;
  color: #0b0803 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
#uploadSection .analysis-step.is-complete span::after { content: none !important; }
/* active: cohesive with completed (gold ring on dark) — differentiated by a gold
   numeral, a faint gold inner tint, a thin halo ring + a gentle lift. No garish
   bloom. (Best practice: the active step is a clean stroke, not a glowing blob.) */
#uploadSection .analysis-step.is-active span {
  background:
    radial-gradient(circle at 50% 38%, rgba(255,193,7,0.22), rgba(255,193,7,0.05) 70%),
    var(--ui-surface) !important;
  border: 2px solid var(--ui-gold) !important;
  color: var(--ui-gold) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 0 0 4px rgba(255,193,7,0.10), 0 4px 14px rgba(0,0,0,0.45) !important;
}
#uploadSection .analysis-step strong {
  font-family: var(--ui-font-mono) !important;
  font-size: 9.5px !important; font-weight: 700 !important;
  letter-spacing: 0.16em !important; text-transform: uppercase !important;
  color: var(--ui-text-3) !important;
  transition: color var(--ui-dur) var(--ui-ease) !important;
}
#uploadSection .analysis-step.is-active strong { color: var(--ui-gold) !important; }
#uploadSection .analysis-step.is-complete strong { color: var(--ui-text-2) !important; }

/* ── Section cards: generous padding + depth ────────────────────────── */
#uploadSection .fetch-game-section,
#uploadSection .settings-section,
#uploadSection .analysis-confirm-section .section {
  background: var(--ui-surface) !important;
  background-image: var(--ui-surface-grad) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  padding: 26px 28px !important;
  box-shadow: var(--ui-shadow-md) !important;
  margin-bottom: 8px !important;
}

/* ── Typography: eyebrow → serif title → Inter labels (all 3 steps) ── */
#uploadSection .fetch-game-eyebrow,
#uploadSection .analysis-panel-eyebrow {
  display: block !important;
  font-family: var(--ui-font-mono) !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  color: var(--ui-gold) !important;
  margin: 0 0 7px !important;
}
#uploadSection .fetch-game-step-label,
#uploadSection .settings-section h2,
#uploadSection .analysis-confirm-section h2 {
  font-family: var(--ui-font-serif) !important;
  font-size: 24px !important; font-weight: 700 !important;
  line-height: 1.12 !important; letter-spacing: normal !important; text-transform: none !important;
  color: var(--ui-text) !important;
  margin: 0 0 4px !important;
}
#uploadSection .fetch-game-head-text { display: flex !important; flex-direction: column !important; }
#uploadSection .fetch-game-step-row {
  align-items: center !important; gap: 14px !important;
  margin: 0 0 18px !important; padding-bottom: 16px !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
#uploadSection .fetch-game-subtitle { margin: -2px 0 18px 0 !important; }
#uploadSection .settings-subtitle {
  margin: -2px 0 18px 0 !important; font-size: 13px !important; color: var(--ui-text-3) !important;
}
/* Functional field labels → clean Inter (kills inherited mono/uppercase) */
#uploadSection .form-group label,
#uploadSection .settings-section label,
#uploadSection .fetch-game-field-label {
  font-family: var(--ui-font-sans) !important;
  text-transform: none !important; letter-spacing: 0.005em !important;
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--ui-text-2) !important;
  margin-bottom: 8px !important; display: block !important;
}
/* Step 1 sub-labels (time-control heading, manual-import toggle) → Inter too */
#uploadSection .fetch-game-filter-block > div:first-child,
#uploadSection .manual-import-header,
#uploadSection .manual-import-header span {
  font-family: var(--ui-font-sans) !important;
  text-transform: none !important; letter-spacing: 0.005em !important;
  font-weight: 600 !important; color: var(--ui-text-2) !important;
}
#uploadSection .fetch-game-filter-block > div:first-child { font-size: 13px !important; }

/* ── Inputs & selects: depth, gold focus ring, custom chevron ───────── */
#uploadSection .settings-section select,
#uploadSection .settings-section input[type="text"],
#uploadSection #platformUsername {
  background-color: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  border-radius: var(--ui-radius-md) !important;
  padding: 13px 15px !important;
  font-size: 14px !important;
  box-shadow: var(--ui-shadow-sm) !important;
  transition: border-color var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease) !important;
}
#uploadSection .settings-section select {
  appearance: none !important; -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dab148' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px !important;
  padding-right: 38px !important;
}
#uploadSection .settings-section .al-field select,
#uploadSection .settings-section .al-field input[type="text"] { padding-left: 42px !important; }
#uploadSection .settings-section select:focus,
#uploadSection .settings-section input[type="text"]:focus,
#uploadSection #platformUsername:focus {
  outline: none !important;
  border-color: var(--ui-gold-dim) !important;
  box-shadow: 0 0 0 3px var(--ui-gold-glow), var(--ui-shadow-sm) !important;
}
#uploadSection .settings-section .al-field-ico { left: 14px !important; color: var(--ui-gold-dim) !important; }

/* ── Step 2: report-length cards — balanced + whisper-selected ──────── */
#uploadSection .al-report-opt {
  display: block !important;
  min-height: 90px !important;
  padding: 15px 16px 15px 56px !important;
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  transition: transform var(--ui-dur) var(--ui-ease), border-color var(--ui-dur) var(--ui-ease),
              background var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease) !important;
}
#uploadSection .al-report-opt-title { display: inline !important; font-weight: 700 !important; color: var(--ui-text) !important; font-size: 14px !important; }
#uploadSection .al-report-opt-time { display: inline !important; margin-left: 7px !important; font-family: var(--ui-font-mono) !important; font-size: 11px !important; color: var(--ui-text-3) !important; }
#uploadSection .al-report-opt-desc { display: block !important; margin-top: 6px !important; font-size: 11.5px !important; line-height: 1.45 !important; color: var(--ui-text-3) !important; }
#uploadSection .al-report-opt:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(218,177,72,0.4) !important;
  background: rgba(218,177,72,0.035) !important;
  box-shadow: var(--ui-shadow-md) !important;
}
#uploadSection .al-report-opt:has(input:checked) {
  background: rgba(218,177,72,0.05) !important;
  border-color: rgba(218,177,72,0.55) !important;
  box-shadow: 0 0 0 1px rgba(218,177,72,0.35), var(--ui-shadow-gold) !important;
}
#uploadSection .al-report-opt:has(input:checked) .al-report-opt-title { color: var(--ui-gold) !important; }
#uploadSection .al-report-opt:has(input:checked) .al-report-opt-time { color: var(--ui-gold-dim) !important; }
#uploadSection .al-report-opt:has(input:checked) .al-report-opt-desc { color: var(--ui-text-2) !important; }

/* ── Step 3: confirm cards — depth + empty state ────────────────────── */
#uploadSection .analysis-confirm-card {
  background: var(--ui-surface-3) !important;
  background-image: var(--ui-surface-grad) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  padding: 18px 20px !important;
  box-shadow: var(--ui-shadow-sm) !important;
  transition: transform var(--ui-dur) var(--ui-ease), border-color var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease) !important;
}
#uploadSection .analysis-confirm-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(218,177,72,0.35) !important;
  box-shadow: var(--ui-shadow-md) !important;
}
#uploadSection .analysis-confirm-card.is-empty strong { color: var(--ui-text-3) !important; font-style: italic !important; font-weight: 600 !important; }

/* ── Fetch status box: on-brand gold (loading shows a live spinner) ──── */
#uploadSection #fetchStatus.fetch-status {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 15px !important;
  border-radius: var(--ui-radius-md) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
#uploadSection #fetchStatus.fetch-status-loading,
#uploadSection #fetchStatus.fetch-status-success {
  background: rgba(218,177,72,0.10) !important;
  border: 1px solid rgba(218,177,72,0.45) !important;
  color: var(--ui-gold) !important;
}
#uploadSection #fetchStatus.fetch-status-error {
  background: rgba(229,72,77,0.10) !important;
  border: 1px solid rgba(229,72,77,0.45) !important;
  color: #ff8a8d !important;
}
.fetch-status-spinner {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  border: 2px solid rgba(218,177,72,0.30);
  border-top-color: var(--ui-gold);
  border-radius: 50%;
  animation: fetchStatusSpin 0.7s linear infinite;
}
@keyframes fetchStatusSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fetch-status-spinner { animation-duration: 1.6s !important; }
}

/* ── Platform tabs: unambiguous gold-selected ───────────────────────── */
#uploadSection .platform-tab {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-2) !important;
  padding: 13px !important;
  border-radius: var(--ui-radius-md) !important;
  font-weight: 600 !important;
  box-shadow: var(--ui-shadow-sm) !important;
  transition: transform var(--ui-dur) var(--ui-ease), border-color var(--ui-dur) var(--ui-ease),
              color var(--ui-dur) var(--ui-ease), background var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease) !important;
}
#uploadSection .platform-tab:hover:not(.active) { transform: translateY(-1px) !important; border-color: var(--ui-border-hover) !important; color: var(--ui-text) !important; }
#uploadSection .platform-tab.active {
  background: rgba(255,193,7,0.10) !important;
  border-color: rgba(255,193,7,0.55) !important;
  color: var(--ui-gold) !important;
  box-shadow: var(--ui-shadow-gold) !important;
}

/* ── Footer: both CTAs gold (gradient + glow + press); quiet Previous ── */
#uploadSection .analysis-nav-primary,
#uploadSection .analysis-start-btn {
  background: linear-gradient(135deg, var(--ui-gold), var(--ui-gold-dim)) !important;
  color: #0b0803 !important;
  border: none !important;
  box-shadow: var(--ui-shadow-gold) !important;
  transition: filter var(--ui-dur) var(--ui-ease), transform var(--ui-dur-fast) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease) !important;
}
#uploadSection .analysis-nav-primary:hover,
#uploadSection .analysis-start-btn:hover { filter: brightness(1.07) !important; transform: translateY(-2px) !important; box-shadow: 0 10px 30px rgba(255,193,7,0.28) !important; }
#uploadSection .analysis-nav-primary:active,
#uploadSection .analysis-start-btn:active { transform: translateY(1px) !important; box-shadow: var(--ui-shadow-sm) !important; }
#uploadSection .analysis-nav-btn:not(.analysis-nav-primary) {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-2) !important;
  box-shadow: none !important;
  transition: border-color var(--ui-dur) var(--ui-ease), color var(--ui-dur) var(--ui-ease) !important;
}
#uploadSection .analysis-nav-btn:not(.analysis-nav-primary):hover { border-color: var(--ui-border-hover) !important; color: var(--ui-text) !important; }

/* ── AI Coach footer mark — refined (Inter, not mono) ───────────────── */
#uploadSection .analysis-ai-coach strong {
  font-family: var(--ui-font-sans) !important;
  text-transform: none !important; letter-spacing: 0.005em !important;
  font-size: 13px !important; font-weight: 700 !important; color: var(--ui-gold) !important;
}
#uploadSection .analysis-ai-coach .aic-tag { font-size: 12.5px !important; color: var(--ui-text-3) !important; }

/* ── Loading: "review your game while you wait" — tips | board | moves ── */
/* The progress box is widened to the app content width (above); keep the steps,
   status line and bar at a comfortable reading width, centered, so only the
   review board uses the full width. */
#progressContainer .progress-steps,
#progressContainer .progress-info,
#progressContainer .progress-bar,
#progressContainer > #currentPosition { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; }
#loadingReviewBoard { width: 100%; max-width: 1080px; margin: 28px auto 6px; }
#loadingReviewBoard .lrb-inner {
  display: grid; grid-template-columns: 1fr 420px 1fr; gap: 20px; align-items: start;
}
#loadingReviewBoard .lrb-eyebrow {
  display: block; margin-bottom: 9px;
  font-family: var(--ui-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ui-gold);
}
/* side panels (tips + moves) share chrome */
#loadingReviewBoard .lrb-tips,
#loadingReviewBoard .lrb-moves {
  background: var(--ui-surface-3); border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md); padding: 16px 16px 14px; box-shadow: var(--ui-shadow-sm);
}
#loadingReviewBoard .lrb-panel-title {
  margin: 0 0 12px; font-family: var(--ui-font-serif); font-size: 16px; font-weight: 700; color: var(--ui-text);
}
#loadingReviewBoard .lrb-tip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
#loadingReviewBoard .lrb-tip-list li {
  position: relative; padding-left: 20px; font-size: 12.5px; line-height: 1.45; color: var(--ui-text-2);
}
#loadingReviewBoard .lrb-tip-list li::before {
  content: ''; position: absolute; left: 1px; top: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ui-gold-dim); box-shadow: 0 0 6px rgba(218,177,72,0.5);
}
#loadingReviewBoard .lrb-tip-list strong { color: var(--ui-text); font-weight: 600; }
#loadingReviewBoard .lrb-tips-foot { margin: 14px 0 0; font-size: 11.5px; font-style: italic; color: var(--ui-gold-dim); }
/* board column */
#loadingReviewBoard .lrb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
#loadingReviewBoard .lrb-move { font-family: var(--ui-font-mono); font-size: 11px; color: var(--ui-text-3); }
#loadingReviewBoard .lrb-play {
  font-family: var(--ui-font-sans); font-size: 12px; font-weight: 700; cursor: pointer;
  padding: 7px 14px; border: none; border-radius: 999px;
  background: linear-gradient(135deg, var(--ui-gold), var(--ui-gold-dim)); color: #0b0803;
  box-shadow: var(--ui-shadow-gold); transition: filter var(--ui-dur) var(--ui-ease), transform var(--ui-dur-fast) var(--ui-ease);
}
#loadingReviewBoard .lrb-play:hover { filter: brightness(1.07); transform: translateY(-1px); }
#loadingReviewBoard .lrb-board {
  width: 100%; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(218,177,72,0.22); box-shadow: var(--ui-shadow-lg);
}
/* ── Board controls — premium, app-grade ────────────────────────────────
   Navigation is a single segmented control (joined buttons, hairline dividers,
   crisp SVG chevrons). Flip is a tactile pill. Theme swatches are refined
   chips with a gold ring + glow when active. All share the app's tokens. */
#loadingReviewBoard .lrb-controls {
  display: flex; margin-top: 12px;
  background: var(--ui-surface-3);
  background-image: var(--ui-surface-grad);
  border: 1px solid var(--ui-border);
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--ui-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04);
}
#loadingReviewBoard .lrb-nav {
  flex: 1; padding: 11px 0; cursor: pointer;
  display: grid; place-items: center;
  background: transparent; border: none;
  border-right: 1px solid var(--ui-border);
  color: var(--ui-text-2);
  transition: background var(--ui-dur) var(--ui-ease), color var(--ui-dur) var(--ui-ease);
}
#loadingReviewBoard .lrb-nav:last-child { border-right: none; }
#loadingReviewBoard .lrb-nav svg { width: 18px; height: 18px; display: block; }
#loadingReviewBoard .lrb-nav:hover { background: rgba(218,177,72,0.10); color: var(--ui-gold); }
#loadingReviewBoard .lrb-nav:active { background: rgba(218,177,72,0.20); color: var(--ui-gold); }
/* second control row: flip pill + theme swatches */
#loadingReviewBoard .lrb-controls2 { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
#loadingReviewBoard .lrb-flip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; cursor: pointer;
  font-family: var(--ui-font-sans); font-size: 12px; font-weight: 600;
  color: var(--ui-text-2);
  background: var(--ui-surface-3); background-image: var(--ui-surface-grad);
  border: 1px solid var(--ui-border); border-radius: 999px;
  box-shadow: var(--ui-shadow-sm);
  transition: border-color var(--ui-dur) var(--ui-ease), color var(--ui-dur) var(--ui-ease),
              background var(--ui-dur) var(--ui-ease), transform var(--ui-dur-fast) var(--ui-ease);
}
#loadingReviewBoard .lrb-flip svg { width: 15px; height: 15px; }
#loadingReviewBoard .lrb-flip:hover { border-color: var(--ui-gold-dim); color: var(--ui-gold); background: rgba(218,177,72,0.08); }
#loadingReviewBoard .lrb-flip:active { transform: translateY(1px) scale(0.97); }
#loadingReviewBoard .lrb-themes { display: flex; gap: 7px; margin-left: auto; }
#loadingReviewBoard .lrb-theme {
  width: 40px; height: 28px; padding: 0; cursor: pointer; display: flex; overflow: hidden;
  border: 2px solid var(--ui-border); border-radius: 7px; background: none;
  box-shadow: var(--ui-shadow-sm);
  transition: border-color var(--ui-dur) var(--ui-ease), transform var(--ui-dur-fast) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease);
}
#loadingReviewBoard .lrb-theme span { flex: 1; display: block; }
#loadingReviewBoard .lrb-theme:hover { border-color: var(--ui-gold-dim); transform: translateY(-1px); }
#loadingReviewBoard .lrb-theme.is-active {
  border-color: var(--ui-gold);
  box-shadow: 0 0 0 2px rgba(255,193,7,0.18), var(--ui-shadow-sm);
}
/* clickable move list */
#loadingReviewBoard .lrb-moves { max-height: 470px; display: flex; flex-direction: column; }
#loadingReviewBoard .lrb-move-list {
  list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: rgba(218,177,72,0.4) transparent;
}
#loadingReviewBoard .lrb-row { display: grid; grid-template-columns: 24px 1fr 1fr; align-items: center; gap: 4px; }
#loadingReviewBoard .lrb-no { font-family: var(--ui-font-mono); font-size: 11px; color: var(--ui-text-3); text-align: right; padding-right: 4px; }
#loadingReviewBoard .lrb-mv {
  text-align: left; font-family: var(--ui-font-mono); font-size: 12.5px; color: var(--ui-text-2);
  background: none; border: none; border-radius: 5px; padding: 4px 7px; cursor: pointer;
  transition: background var(--ui-dur) var(--ui-ease), color var(--ui-dur) var(--ui-ease);
}
#loadingReviewBoard .lrb-mv:hover { background: rgba(255,255,255,0.05); color: var(--ui-text); }
#loadingReviewBoard .lrb-mv.is-current { background: rgba(218,177,72,0.16); color: var(--ui-gold); font-weight: 700; }
#loadingReviewBoard .lrb-mv-empty { cursor: default; }
/* intro: pulse the side panels so the player notices them before autoplay */
#loadingReviewBoard.lrb-intro .lrb-tips,
#loadingReviewBoard.lrb-intro .lrb-moves { animation: lrbPulse 1.2s var(--ui-ease) 2; }
@keyframes lrbPulse {
  0%, 100% { border-color: var(--ui-border); box-shadow: var(--ui-shadow-sm); }
  50% { border-color: rgba(218,177,72,0.6); box-shadow: 0 0 0 3px rgba(218,177,72,0.12), var(--ui-shadow-md); }
}
@media (max-width: 960px) {
  #loadingReviewBoard { max-width: 460px; }
  #loadingReviewBoard .lrb-inner { grid-template-columns: 1fr; }
  /* Mobile order: reflection questions first, then the board, then the moves */
  #loadingReviewBoard .lrb-tips { order: 1; }
  #loadingReviewBoard .lrb-board-col { order: 2; }
  #loadingReviewBoard .lrb-moves { order: 3; max-height: 220px; }
  #loadingReviewBoard.lrb-intro .lrb-tips,
  #loadingReviewBoard.lrb-intro .lrb-moves { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  #loadingReviewBoard.lrb-intro .lrb-tips,
  #loadingReviewBoard.lrb-intro .lrb-moves { animation: none; }
}

/* ── Mobile report: standalone eval card + premium pager buttons ────── */
.mobile-eval-card {
  width: 100%;
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  padding: 12px !important;
  box-sizing: border-box;
}
.mobile-eval-title {
  font-family: var(--ui-font-serif);
  font-weight: 700; font-size: 15px;
  color: var(--ui-text);
  margin: 0 0 8px;
}
/* The desktop rule `body:has(#analysisContent) .chessboard-section { order:2 }`
   (board on the right column) leaks into the mobile flex column and shoved the
   board below the report. Restore the mobile order: graph → board → pager →
   report — and drop the desktop sticky/inner-scroll on the mobile board card. */
.results-container.active .mobile-layout .mobile-eval-card,
body:has(#analysisContent) .mobile-layout .mobile-eval-card { order: -2 !important; }
.results-container.active .mobile-layout .chessboard-section,
body:has(#analysisContent) .mobile-layout .chessboard-section {
  order: -1 !important;
  position: static !important;
  top: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
}

/* width:100% is load-bearing: the parent .split-screen-container is
   align-items:flex-start (for the desktop split layout), which otherwise
   shrink-wraps this row to its content and left-aligns it on mobile. */
.mob-pager { display: flex; gap: 10px; justify-content: center; padding: 2px 4px; width: 100%; }
/* id+class selectors: the old #prevSectionBtn… id rules in new-ui.css carry
   !important, so class-only selectors here would lose */
#prevSectionBtnTop.mob-pager-prev, #prevSectionBtnBottom.mob-pager-prev,
#nextSectionBtnTop.mob-pager-next, #nextSectionBtnBottom.mob-pager-next {
  flex: 1 1 0; max-width: none;
  min-height: 46px !important;
  padding: 11px 14px !important;
  border-radius: 11px !important;
  font-weight: 700 !important; font-size: 13px !important;
  transition: filter var(--ui-dur) var(--ui-ease), border-color var(--ui-dur) var(--ui-ease), color var(--ui-dur) var(--ui-ease);
}
#prevSectionBtnTop.mob-pager-prev, #prevSectionBtnBottom.mob-pager-prev {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-2) !important;
  box-shadow: none !important;
}
#nextSectionBtnTop.mob-pager-next, #nextSectionBtnBottom.mob-pager-next {
  background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
  border: none !important;
  color: #0b0803 !important;
  box-shadow: 0 4px 14px rgba(255,193,7,0.18), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
/* .mob-pager #id beats the pages' own #id:disabled !important rules */
.mob-pager #prevSectionBtnTop:disabled, .mob-pager #prevSectionBtnBottom:disabled,
.mob-pager #nextSectionBtnTop:disabled, .mob-pager #nextSectionBtnBottom:disabled {
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-4) !important; /* disabled state — deliberately dimmed, contrast-exempt */
  box-shadow: none !important;
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Games-list loading skeleton (Fetch pressed, games on the way) ───── */
.game-item-skeleton { pointer-events: none; }
.gi-skel-bar {
  height: 12px; border-radius: 6px; margin: 5px 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(218,177,72,0.14) 50%, rgba(255,255,255,0.05) 75%);
  background-size: 200% 100%;
  animation: giSkel 1.1s linear infinite;
}
@keyframes giSkel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .gi-skel-bar { animation: none; } }

/* ── Mobile bottom nav: premium gold separation from the page ───────── */
.ui-bottom-nav {
  border-top: 1px solid rgba(218,177,72,0.28) !important;
  box-shadow: 0 -10px 28px rgba(0,0,0,0.55) !important;
}
.ui-bottom-nav::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 4%, rgba(255,193,7,0.55) 50%, transparent 96%);
  pointer-events: none;
}

/* ── Wizard footer buttons: full-width on mobile (all steps) ────────── */
@media (max-width: 639px) {
  #uploadSection .analysis-actions { gap: 10px !important; }
  #uploadSection .analysis-nav-btn,
  #uploadSection .analysis-start-btn {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}

/* ── Motion: panel entrance + reduced-motion guard ──────────────────── */
@keyframes alStepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#uploadSection .analysis-step-panel.is-active { animation: alStepIn var(--ui-dur-slow) var(--ui-ease); }
@media (prefers-reduced-motion: reduce) {
  #uploadSection .analysis-step-panel.is-active { animation: none !important; }
  #uploadSection .analysis-stepper::after,
  #uploadSection .analysis-step span,
  #uploadSection .al-report-opt,
  #uploadSection .analysis-confirm-card,
  #uploadSection .platform-tab,
  #uploadSection .analysis-nav-primary,
  #uploadSection .analysis-start-btn { transition: none !important; }
}

/* ── App-grade footer buttons: tactile sheen, unified radius, real press ──
   The CTAs already use the gold gradient; this gives them the solid, slightly
   raised feel of a native app button (inner top highlight + soft drop), a
   consistent pill radius across all three, comfortable min-width so "Continue"
   doesn't read as a tiny chip, and a genuine press (sink + micro-scale). */
#uploadSection .analysis-nav-btn,
#uploadSection .analysis-start-btn {
  border-radius: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.012em !important;
  min-height: 52px !important;
}
#uploadSection .analysis-nav-primary,
#uploadSection .analysis-start-btn {
  min-width: 172px !important;
  box-shadow: 0 6px 20px rgba(255,193,7,0.22), inset 0 1px 0 rgba(255,255,255,0.42) !important;
}
#uploadSection .analysis-nav-primary:hover,
#uploadSection .analysis-start-btn:hover {
  box-shadow: 0 10px 28px rgba(255,193,7,0.30), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
#uploadSection .analysis-nav-primary:active,
#uploadSection .analysis-start-btn:active {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow: 0 2px 8px rgba(255,193,7,0.20), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
#uploadSection .analysis-nav-btn:not(.analysis-nav-primary) {
  min-width: 124px !important;
}
#uploadSection .analysis-nav-btn:not(.analysis-nav-primary):active {
  transform: translateY(1px) scale(0.985) !important;
}

/* ── Responsive single-screen fit: compress vertical rhythm on short/laptop
   viewports so the active step + the Continue/Start button are reachable
   without scrolling, at any aspect ratio. Spacing scales down in two tiers;
   the stepper node SIZE is left intact so the gold progress track stays
   aligned. Mild tier ≤ 860px tall (most laptops / split windows). ───────── */
@media (max-height: 860px) {
  #uploadSection.analysis-setup {
    gap: 14px !important;
    padding-top: 14px !important;
    padding-bottom: 22px !important;
    margin-bottom: 18px !important;
  }
  #uploadSection .analysis-stepper { margin: 4px auto 16px !important; }
  #uploadSection .fetch-game-section,
  #uploadSection .settings-section,
  #uploadSection .analysis-confirm-section .section { padding: 17px 22px !important; margin-bottom: 6px !important; }
  #uploadSection .fetch-game-step-row { margin: 0 0 12px !important; padding-bottom: 11px !important; }
  #uploadSection .fetch-game-subtitle,
  #uploadSection .settings-subtitle { margin: -2px 0 12px 0 !important; }
  #uploadSection .fetch-game-step-label,
  #uploadSection .settings-section h2,
  #uploadSection .analysis-confirm-section h2 { font-size: 21px !important; }
  #uploadSection .form-group label,
  #uploadSection .settings-section label,
  #uploadSection .fetch-game-field-label { margin-bottom: 6px !important; }
  #uploadSection .fetch-game-field { margin-bottom: 12px !important; }
  #uploadSection .settings-section select,
  #uploadSection .settings-section input[type="text"],
  #uploadSection #platformUsername { padding-top: 11px !important; padding-bottom: 11px !important; }
  #uploadSection .al-report-opt { min-height: 74px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  #uploadSection .analysis-confirm-card { padding: 13px 16px !important; }
  /* Step 1 space-savers */
  #uploadSection .analysis-crown-divider { margin: 10px 2px 10px !important; }
  #uploadSection .fetch-game-filter-block { padding: 11px 14px !important; }
  #uploadSection .manual-import-section { padding: 11px 16px !important; margin-bottom: 0 !important; }
  #uploadSection #fetchGameContainer { margin-bottom: 0 !important; }
}
/* Aggressive tier ≤ 800px tall (laptops, short windows) — total wizard height
   ~662px, so it fits every viewport down to ~670px with no scroll. */
@media (max-height: 800px) {
  #uploadSection.analysis-setup {
    gap: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 16px !important;
    margin-bottom: 12px !important;
  }
  #uploadSection .analysis-stepper { margin: 2px auto 11px !important; }
  #uploadSection .analysis-step span { width: 38px !important; height: 38px !important; font-size: 15px !important; }
  #uploadSection .analysis-stepper::before,
  #uploadSection .analysis-stepper::after { top: 19px !important; }
  #uploadSection .fetch-game-section,
  #uploadSection .settings-section,
  #uploadSection .analysis-confirm-section .section { padding: 13px 18px !important; }
  #uploadSection .fetch-game-step-row { margin: 0 0 9px !important; padding-bottom: 8px !important; }
  #uploadSection .fetch-game-subtitle,
  #uploadSection .settings-subtitle { margin: -2px 0 9px 0 !important; font-size: 12px !important; }
  #uploadSection .fetch-game-step-label,
  #uploadSection .settings-section h2,
  #uploadSection .analysis-confirm-section h2 { font-size: 19px !important; }
  #uploadSection .fetch-game-field { margin-bottom: 9px !important; }
  #uploadSection .al-report-opt { min-height: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  #uploadSection .analysis-confirm-card { padding: 10px 14px !important; }
  #uploadSection .analysis-nav-btn,
  #uploadSection .analysis-start-btn { min-height: 46px !important; }
  /* Step 2 is the densest panel (4 fields + 3 report cards). Keep the helpful
     report-length descriptions visible and reclaim the space from the header
     stack instead: tighter eyebrow/title/subtitle rhythm + grid gap. */
  #uploadSection .settings-section .section { gap: 6px 18px !important; }
  #uploadSection .settings-section .analysis-panel-eyebrow { margin-bottom: 2px !important; }
  #uploadSection .settings-section h2 { margin-bottom: 2px !important; }
  #uploadSection .settings-section .settings-subtitle { margin: 0 0 2px 0 !important; }
  #uploadSection .al-report-group { margin-top: 2px !important; }
  #uploadSection .al-report-heading { margin-bottom: 5px !important; }
  #uploadSection .al-report-opt { padding-top: 9px !important; padding-bottom: 9px !important; }
  #uploadSection .al-report-opt-desc { font-size: 11px !important; line-height: 1.35 !important; margin-top: 3px !important; }
  /* Step 1 space-savers (denser): tighten the divider, the filter block, the
     collapsed manual-import row, and drop the optional time-control tip — none
     of it is essential to act on the step, and dropping it lets the whole step
     fit with no scroll. */
  #uploadSection .analysis-crown-divider { margin: 7px 2px 7px !important; }
  #uploadSection .fetch-game-filter-block { padding: 9px 12px !important; }
  #uploadSection .fetch-game-filter-block > div:last-child { display: none !important; }
  #uploadSection .manual-import-section { padding: 9px 14px !important; }
}
/* Ultra tier ≤ 670px tall (very short windows / landscape phones): shave the
   last non-essential vertical space — subtitles, the smallest stepper nodes,
   minimal section padding — so the step still fits with zero scroll. */
@media (max-height: 670px) {
  #uploadSection.analysis-setup { gap: 7px !important; padding-top: 7px !important; padding-bottom: 8px !important; }
  #uploadSection .analysis-setup-header { margin-bottom: 0 !important; }
  #uploadSection .fetch-game-subtitle,
  #uploadSection .settings-subtitle { display: none !important; }
  #uploadSection .analysis-stepper { margin: 0 auto 9px !important; }
  #uploadSection .analysis-step span { width: 34px !important; height: 34px !important; font-size: 14px !important; }
  #uploadSection .analysis-stepper::before,
  #uploadSection .analysis-stepper::after { top: 17px !important; }
  #uploadSection .analysis-step strong { font-size: 8.5px !important; }
  #uploadSection .fetch-game-section,
  #uploadSection .settings-section,
  #uploadSection .analysis-confirm-section .section { padding: 11px 16px !important; }
  #uploadSection .fetch-game-step-row { margin: 0 0 7px !important; padding-bottom: 6px !important; }
  #uploadSection .fetch-game-step-label,
  #uploadSection .settings-section h2,
  #uploadSection .analysis-confirm-section h2 { font-size: 17px !important; }
  #uploadSection .fetch-game-field { margin-bottom: 7px !important; }
  #uploadSection .analysis-crown-divider { margin: 5px 2px 5px !important; }
  #uploadSection .settings-section .section { gap: 4px 16px !important; }
  #uploadSection .al-report-opt { padding-top: 7px !important; padding-bottom: 7px !important; }
  #uploadSection .al-report-opt-desc { font-size: 10.5px !important; margin-top: 2px !important; }
  #uploadSection .analysis-nav-btn,
  #uploadSection .analysis-start-btn { min-height: 42px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE GPU BUDGET — iOS Safari tab-crash mitigation (homepage)
   ─────────────────────────────────────────────────────────────────────
   The homepage was the only page mobile Safari killed ~1s after paint.
   It runs, simultaneously: a ~700-900px blurred glow that re-rasterises
   every frame (filter: blur + infinite transform:scale), a knight image
   with two large drop-shadow blurs, backdrop-filter layers, 9 board
   containers and 30+ animated elements. Large *animated* blur surfaces
   are the classic iOS Safari memory/compositor kill.

   Below ~1023px we drop the expensive raster work and keep the look:
   the glow is a radial-gradient, so it still reads as a soft glow
   without the blur filter, and the header stays dark without the
   backdrop blur. Desktop is untouched.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Animated + blurred = re-rasterised every frame. Keep the gradient,
     drop the filter and the animation. */
  .premium-hero-knight-glow,
  #premiumLanding .premium-hero-knight-glow {
    filter: none !important;
    animation: none !important;
  }

  /* Two stacked large-radius drop-shadows on a big PNG. */
  #premiumLanding .premium-hero-knight-img,
  .premium-hero-knight-img {
    filter: saturate(1.1) contrast(1.06) !important;
  }

  /* backdrop-filter forces a live-updating composited layer behind a
     fixed header on a long scrolling page — swap for an opaque bg. */
  .ui-mobile-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #0b0b0d !important;
  }
}