/**
* AICoachess – New UI Design System
* Dark theme with gold accent, Inter + Playfair Display typography.
* Layered on top of existing CSS; overrides colour, layout, and components.
*/
/* ─── Google Fonts ─────────────────────────────────────────────────── */
/* Loaded via + directly in
each page's instead of @import here -- @import is serial-discovered
(the browser has to fetch+parse this file before it even learns it needs
the font CSS too), which GTMetrix flagged explicitly. */
/* ─── Design Tokens ────────────────────────────────────────────────── */
:root {
--ui-bg: #09090b;
--ui-surface: #121214;
--ui-surface-2: #0c0c0e;
--ui-surface-3: #18181b;
--ui-border: rgba(255,255,255,0.05);
--ui-border-hover: rgba(255,255,255,0.10);
--ui-gold: #ffc107;
--ui-gold-dim: #dab148;
--ui-gold-dark: #bf8b00;
--ui-gold-glow: rgba(255,193,7,0.10);
--ui-gold-glow-lg: rgba(255,193,7,0.20);
--ui-text: #f4f4f5;
--ui-text-2: #a1a1aa;
--ui-text-3: #8a8a96; /* raised from #71717a (4.1:1) → 5.3:1 WCAG-AA */
--ui-text-4: #52525b; /* decorative ONLY — icons, dividers, disabled states. Never meaningful
text: anything a user must read belongs on --ui-text-3 or brighter. */
--ui-emerald: #10b981;
--ui-red: #ef4444;
--ui-blue: #3b82f6;
--ui-font-sans: "Inter", system-ui, -apple-system, sans-serif;
--ui-font-serif: "Playfair Display", Georgia, serif;
--ui-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
--ui-sidebar-w: 204px;
--ui-header-h: 56px;
--ui-bottom-nav-h: 64px;
--ui-radius-sm: 8px;
--ui-radius-md: 12px;
--ui-radius-lg: 20px;
--ui-radius-xl: 28px;
--ui-radius-2xl: 36px;
/* ─── Elevation / motion / surface (additive — opt-in via var()) ─── */
--ui-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--ui-shadow-md: 0 4px 16px rgba(0,0,0,.35);
--ui-shadow-lg: 0 14px 44px rgba(0,0,0,.5);
--ui-shadow-gold: 0 6px 24px rgba(255,193,7,.18);
--ui-ease: cubic-bezier(.4,0,.2,1);
--ui-dur-fast: .15s;
--ui-dur: .25s;
--ui-dur-slow: .4s;
--ui-surface-grad: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 60%);
}
/* ─── Global Reset Override ─────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }
html, body {
background: var(--ui-bg) !important;
color: var(--ui-text) !important;
font-family: var(--ui-font-sans) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
padding: 0 !important;
overflow-x: hidden;
}
/* ─── App Shell ─────────────────────────────────────────────────────── */
.app-layout {
display: flex;
min-height: 100vh;
background: var(--ui-bg);
}
/* ─── Sidebar (desktop only) ────────────────────────────────────────── */
.ui-sidebar {
display: none;
width: var(--ui-sidebar-w);
min-height: 100vh;
background:
linear-gradient(180deg, rgba(218,177,72,0.035), transparent 24%),
#08080a;
border-right: 1px solid rgba(255,255,255,0.075);
flex-direction: column;
flex-shrink: 0;
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
@media (min-width: 1024px) {
.ui-sidebar { display: flex; }
}
.ui-sidebar-logo {
display: block;
padding: 22px 18px 20px;
font-family: var(--ui-font-serif);
font-size: 18px;
font-weight: 700;
color: var(--ui-gold);
text-decoration: none;
cursor: pointer;
transition: color 0.15s;
letter-spacing: -0.02em;
}
.ui-sidebar-logo:hover { color: #e6ab00; text-decoration: none; }
.ui-sidebar-nav {
flex: 1;
padding: 6px 12px;
display: flex;
flex-direction: column;
gap: 2px;
}
.ui-sidebar-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: var(--ui-radius-sm);
font-size: 12px;
font-weight: 600;
color: var(--ui-text-3);
text-decoration: none !important;
transition: all 0.15s;
border: 1px solid transparent;
white-space: nowrap;
background: transparent;
cursor: pointer;
width: 100%;
text-align: left;
}
.ui-sidebar-link:hover {
color: var(--ui-text);
background: rgba(255,255,255,0.04);
text-decoration: none;
}
.ui-sidebar-link.active {
background: linear-gradient(90deg, rgba(218,177,72,0.16), rgba(218,177,72,0.045));
color: var(--ui-gold);
border-color: rgba(218,177,72,0.26);
box-shadow: inset 2px 0 0 var(--ui-gold-dim);
}
.ui-sidebar-link svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
.ui-sidebar-footer {
padding: 12px;
border-top: 1px solid var(--ui-border);
}
.ui-sidebar-user {
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
border-radius: 8px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--ui-border);
cursor: pointer;
transition: all 0.15s;
text-decoration: none !important;
}
.ui-sidebar-user:hover {
background: rgba(255,255,255,0.05);
border-color: var(--ui-border-hover);
}
.ui-sidebar-avatar {
width: 30px;
height: 30px;
border-radius: 6px;
background: var(--ui-gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 700;
color: #000;
flex-shrink: 0;
}
.ui-sidebar-user-info { min-width: 0; }
.ui-sidebar-user-name {
font-size: 10px;
font-weight: 700;
color: var(--ui-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.ui-sidebar-user-elo {
font-size: 10px;
color: var(--ui-text-3);
font-family: var(--ui-font-mono);
letter-spacing: -0.02em;
display: block;
}
/* ─── Main Area ─────────────────────────────────────────────────────── */
.ui-main-area {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
padding-bottom: var(--ui-bottom-nav-h);
}
@media (min-width: 1024px) {
.ui-main-area { padding-bottom: 0; }
}
/* ─── Mobile Header ─────────────────────────────────────────────────── */
.ui-mobile-header {
height: var(--ui-header-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
border-bottom: 1px solid var(--ui-border);
background: rgba(9,9,11,0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: sticky;
top: 0;
z-index: 50;
flex-shrink: 0;
}
@media (min-width: 1024px) {
.ui-mobile-header { display: none; }
}
.ui-mobile-header-logo {
font-family: var(--ui-font-serif);
font-size: 18px;
font-weight: 700;
color: var(--ui-gold);
cursor: pointer;
text-decoration: none;
min-height: 44px;
display: inline-flex;
align-items: center;
padding-inline: 4px;
}
.ui-mobile-header-logo:hover { color: #e6ab00; text-decoration: none; }
.ui-hamburger {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
color: var(--ui-text-3);
border-radius: var(--ui-radius-sm);
transition: background 0.15s;
padding: 0;
}
.ui-hamburger:hover { background: rgba(255,255,255,0.05); color: var(--ui-text); }
.ui-hamburger svg { width: 20px; height: 20px; }
.ui-mobile-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--ui-surface-3);
border: 1px solid var(--ui-border-hover);
overflow: hidden;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: var(--ui-gold);
text-decoration: none;
transition: border-color 0.15s;
}
.ui-mobile-avatar:hover { border-color: var(--ui-gold); text-decoration: none; }
/* ─── Mobile Drawer (replaces old .mobile-nav) ──────────────────────── */
.mobile-nav-overlay {
background: rgba(0,0,0,0.6) !important;
backdrop-filter: blur(4px);
}
.mobile-nav {
background: var(--ui-surface-2) !important;
border-right: 1px solid var(--ui-border) !important;
left: 0 !important;
right: auto !important;
box-shadow: 4px 0 24px rgba(0,0,0,0.5) !important;
transform: translateX(-100%) !important;
}
.mobile-nav.active { transform: translateX(0) !important; }
.mobile-nav-header {
background: var(--ui-surface-2) !important;
border-bottom: 1px solid var(--ui-border) !important;
}
.mobile-nav-close {
color: var(--ui-text-3) !important;
}
.mobile-nav-link {
color: var(--ui-text-3) !important;
border-radius: var(--ui-radius-sm) !important;
margin-bottom: 2px !important;
font-size: 13px !important;
font-weight: 600 !important;
min-height: 44px !important;
}
.mobile-nav-link:hover {
background: rgba(255,255,255,0.05) !important;
color: var(--ui-text) !important;
}
.mobile-nav-link.active {
background: rgba(255,193,7,0.1) !important;
color: var(--ui-gold) !important;
}
/* ─── Desktop Page Header ────────────────────────────────────────────── */
.ui-page-header {
display: none;
height: 64px;
border-bottom: 1px solid var(--ui-border);
align-items: center;
justify-content: space-between;
padding: 0 32px;
background: rgba(18,18,20,0.5);
flex-shrink: 0;
}
@media (min-width: 1024px) {
.ui-page-header { display: flex; }
}
.ui-page-header-title {
font-family: var(--ui-font-serif);
font-size: 17px;
font-weight: 700;
color: var(--ui-text);
margin: 0;
}
.ui-page-header-sub {
font-size: 11px;
color: var(--ui-text-3);
margin-top: 2px;
}
#authNavBtn,
#authNavBtnMobile {
background: linear-gradient(135deg, #f3d17a, #c8922e) !important;
color: #0b0803 !important;
border: 1px solid rgba(255,214,118,0.45) !important;
box-shadow: 0 10px 24px rgba(218,177,72,0.12) !important;
}
/* ─── Page Content Wrapper ──────────────────────────────────────────── */
.ui-page-content {
flex: 1;
overflow-y: auto;
background: var(--ui-bg);
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.ui-page-content::-webkit-scrollbar { width: 5px; }
.ui-page-content::-webkit-scrollbar-track { background: transparent; }
.ui-page-content::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.06);
border-radius: 10px;
}
.ui-page-content::-webkit-scrollbar-thumb:hover {
background: rgba(255,193,7,0.15);
}
/* ─── Mobile Bottom Nav ─────────────────────────────────────────────── */
.ui-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--ui-bottom-nav-h);
background: var(--ui-surface-2);
border-top: 1px solid var(--ui-border);
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 16px;
z-index: 50;
}
@media (min-width: 1024px) {
.ui-bottom-nav { display: none; }
}
.ui-bottom-nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
color: var(--ui-text-3);
text-decoration: none !important;
transition: color 0.15s;
padding: 6px 12px;
min-width: 44px;
min-height: 44px;
justify-content: center;
border-radius: var(--ui-radius-sm);
cursor: pointer;
background: none;
border: none;
}
@media (max-width: 1023px) {
#authNavBtn,
#langSelectorBtn,
#authNavBtnMobile,
.mobile-nav-content button {
min-width: 44px;
min-height: 44px;
}
.platform-tab,
body:has(.auth-container) .auth-container input,
body:has(.auth-container) .auth-container button {
min-height: 44px !important;
}
.contact-link,
body:has(.auth-container) .auth-container a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
.ui-bottom-nav-item:hover,
.ui-bottom-nav-item.active { color: var(--ui-gold); }
.ui-bottom-nav-item svg { width: 20px; height: 20px; }
.ui-bottom-nav-item span {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ─── Override legacy container/header ─────────────────────────────── */
.container {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
max-width: none !important;
overflow: visible !important;
}
.header {
display: none !important;
}
/* Legacy main-content – let it breathe */
.main-content {
background: transparent !important;
padding: 24px !important;
}
@media (min-width: 1024px) {
.main-content {
padding: 32px 40px !important;
}
}
/* ─── Typography ────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
color: var(--ui-text) !important;
font-family: var(--ui-font-sans) !important;
}
.serif { font-family: var(--ui-font-serif) !important; }
.mono { font-family: var(--ui-font-mono) !important; }
/* ─── Cards / Panels ────────────────────────────────────────────────── */
.ui-card {
background: var(--ui-surface);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-lg);
padding: 24px;
transition: border-color 0.2s;
}
.ui-card:hover { border-color: var(--ui-border-hover); }
.ui-card-gold {
background: rgba(255,193,7,0.04);
border: 1px solid rgba(255,193,7,0.12);
border-radius: var(--ui-radius-lg);
padding: 24px;
}
/* ─── Buttons ───────────────────────────────────────────────────────── */
.ui-btn-primary {
background: var(--ui-gold-dim) !important;
color: #000 !important;
border: none !important;
font-weight: 700 !important;
border-radius: var(--ui-radius-md) !important;
cursor: pointer !important;
transition: background 0.15s, transform 0.1s !important;
font-family: var(--ui-font-sans) !important;
}
.ui-btn-primary:hover { background: var(--ui-gold) !important; }
.ui-btn-primary:active { transform: scale(0.97) !important; }
.ui-btn-secondary {
background: rgba(255,255,255,0.04) !important;
color: var(--ui-text) !important;
border: 1px solid var(--ui-border) !important;
font-weight: 600 !important;
border-radius: var(--ui-radius-md) !important;
cursor: pointer !important;
transition: background 0.15s !important;
font-family: var(--ui-font-sans) !important;
}
.ui-btn-secondary:hover {
background: rgba(255,255,255,0.07) !important;
border-color: var(--ui-border-hover) !important;
}
/* ─── Form Inputs ───────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
background: var(--ui-surface-3) !important;
color: var(--ui-text) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-md) !important;
font-family: var(--ui-font-sans) !important;
transition: border-color 0.15s !important;
outline: none !important;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
color: var(--ui-text-3) !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
border-color: rgba(255,193,7,0.3) !important;
box-shadow: 0 0 0 3px rgba(255,193,7,0.06) !important;
}
select option {
background: var(--ui-surface-3) !important;
color: var(--ui-text) !important;
}
/* ─── Stat Badges ───────────────────────────────────────────────────── */
.ui-stat {
background: var(--ui-surface);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-xl);
padding: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ui-stat-label {
font-size: 9px;
font-weight: 700;
color: var(--ui-text-3);
text-transform: uppercase;
letter-spacing: 0.12em;
font-family: var(--ui-font-mono);
}
.ui-stat-value {
font-size: 26px;
font-weight: 700;
color: var(--ui-text);
line-height: 1;
}
/* ─── Nav Link Badges ───────────────────────────────────────────────── */
.ui-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 20px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.ui-badge-gold {
background: rgba(255,193,7,0.1);
color: var(--ui-gold);
border: 1px solid rgba(255,193,7,0.2);
}
.ui-badge-green {
background: rgba(16,185,129,0.1);
color: var(--ui-emerald);
border: 1px solid rgba(16,185,129,0.2);
}
.ui-badge-red {
background: rgba(239,68,68,0.1);
color: var(--ui-red);
border: 1px solid rgba(239,68,68,0.2);
}
/* ─── Section Dividers ──────────────────────────────────────────────── */
.ui-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 32px 0;
}
.ui-divider::before,
.ui-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--ui-border);
}
.ui-divider-label {
font-size: 9px;
font-weight: 700;
color: var(--ui-text-3);
text-transform: uppercase;
letter-spacing: 0.2em;
font-family: var(--ui-font-mono);
}
/* ─── Tooltips (override inline styles) ────────────────────────────── */
.custom-tooltip {
background: var(--ui-surface) !important;
color: var(--ui-text) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-sm) !important;
}
/* ─── Hero Section ──────────────────────────────────────────────────── */
#heroSection {
padding: 48px 24px 0 !important;
max-width: 900px !important;
margin: 0 auto 0 !important;
text-align: center;
}
#heroSection h1,
#heroHeadline {
font-size: clamp(2rem, 4vw, 3rem) !important;
font-weight: 800 !important;
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
line-height: 1.15 !important;
margin: 0 0 16px !important;
}
#heroTagline {
font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
color: var(--ui-text-2) !important;
font-weight: 500 !important;
margin: 0 0 12px !important;
}
#heroSubheadline {
color: var(--ui-text-3) !important;
font-size: clamp(0.95rem, 2vw, 1.1rem) !important;
margin: 0 0 12px !important;
}
#trustBadge {
color: var(--ui-text-3) !important;
font-size: 12px !important;
font-family: var(--ui-font-mono) !important;
letter-spacing: 0.05em !important;
}
/* ─── Stats Strip ───────────────────────────────────────────────────── */
#statsStrip {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-lg) !important;
}
#statsStrip > div {
border-color: var(--ui-border) !important;
}
#statsStrip .stat-number,
#statReports,
#statsStrip [style*="font-size: 2rem"] {
color: var(--ui-gold) !important;
}
#statReportsLabel,
#statLangsLabel,
#statRatingLabel,
#statsStrip [style*="color: #888"] {
color: var(--ui-text-3) !important;
}
/* ─── Chess Health Check Banner ─────────────────────────────────────── */
#chessHealthCheckBanner > div {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-lg) !important;
box-shadow: none !important;
}
#chessHealthCheckBanner h2 {
font-family: var(--ui-font-serif) !important;
color: var(--ui-text) !important;
}
#chessHealthCheckBanner p {
color: var(--ui-text-3) !important;
}
#chessHealthCheckBanner a {
background: linear-gradient(135deg, var(--ui-emerald), #059669) !important;
border-radius: var(--ui-radius-md) !important;
font-weight: 700 !important;
}
/* ─── Active Subscription Banner ────────────────────────────────────── */
#activeSubscriptionBanner {
background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.05)) !important;
border: 1px solid rgba(16,185,129,0.2) !important;
border-radius: var(--ui-radius-lg) !important;
box-shadow: none !important;
}
#activeSubscriptionBanner h3 {
color: var(--ui-emerald) !important;
}
#goToAnalysisBtn {
background: var(--ui-emerald) !important;
color: #fff !important;
border-radius: var(--ui-radius-sm) !important;
box-shadow: none !important;
}
/* ─── Engine Status ─────────────────────────────────────────────────── */
.engine-status {
background: rgba(255,255,255,0.02) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 20px !important;
margin-bottom: 20px !important;
color: var(--ui-text-3) !important;
font-size: 11px !important;
font-family: var(--ui-font-mono) !important;
letter-spacing: 0.03em !important;
}
/* ─── Pricing / Payment Section ─────────────────────────────────────── */
#pricingHeading {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
font-size: clamp(1.4rem, 3vw, 2rem) !important;
}
#pricingSubtext {
color: var(--ui-text-3) !important;
}
/* Pricing cards */
[style*="background: linear-gradient(135deg, #f8f9fa"],
[style*="background: linear-gradient(135deg, #fff"] {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-lg) !important;
color: var(--ui-text) !important;
box-shadow: none !important;
}
[style*="color: #2c3e50"],
[style*="color:#2c3e50"] {
color: var(--ui-text) !important;
}
[style*="color: #666"],
[style*="color:#666"] {
color: var(--ui-text-3) !important;
}
[style*="color: #888"],
[style*="color:#888"] {
color: var(--ui-text-3) !important;
}
[style*="color: #999"],
[style*="color:#999"] {
color: var(--ui-text-3) !important;
}
/* ─── Move List / Analysis Boxes ────────────────────────────────────── */
.move-row,
.move-item {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-sm) !important;
color: var(--ui-text-2) !important;
transition: all 0.15s !important;
}
.move-row:hover,
.move-item:hover {
background: rgba(255,255,255,0.04) !important;
color: var(--ui-text) !important;
}
.move-row.active,
.move-item.active,
.move-row.current,
.move-item.current {
background: rgba(255,193,7,0.08) !important;
border-color: rgba(255,193,7,0.2) !important;
color: var(--ui-gold) !important;
}
/* ─── Analysis Report Content ───────────────────────────────────────── */
.report-section,
.analysis-section,
.coaching-report {
color: var(--ui-text-2) !important;
line-height: 1.75 !important;
}
.report-section h2,
.report-section h3,
.analysis-section h2,
.coaching-report h2 {
font-family: var(--ui-font-serif) !important;
color: var(--ui-text) !important;
}
/* ─── Chessboard Override ───────────────────────────────────────────── */
.board-container,
.chessboard-section {
background: transparent !important;
border: none !important;
border-radius: var(--ui-radius-lg) !important;
overflow: hidden;
}
/* ─── White-background overrides ────────────────────────────────────── */
[style*="background: white"],
[style*="background:white"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #ffffff"],
[style*="background: #ffffff"] {
background: var(--ui-surface) !important;
color: var(--ui-text) !important;
}
/* ─── White text-colour overrides ───────────────────────────────────── */
[style*="color: #2c3e50"],
[style*="color: #34495e"] {
color: var(--ui-text) !important;
}
/* ─── Border overrides ──────────────────────────────────────────────── */
[style*="border: 1px solid #ddd"],
[style*="border: 1px solid #e5e7eb"],
[style*="border: 2px solid #ddd"],
[style*="border-color: #ddd"] {
border-color: var(--ui-border) !important;
}
/* ─── Box / section backgrounds ────────────────────────────────────── */
[style*="background: linear-gradient(135deg, #f8f9fa, #e9ecef)"],
[style*="background: #f8f9fa"],
[style*="background: #ecf0f1"],
[style*="background: #f1f3f5"] {
background: var(--ui-surface) !important;
}
/* ─── Subscription plan highlighted card ───────────────────────────── */
[style*="background: linear-gradient(135deg, #3498db"],
[style*="background: linear-gradient(45deg, #3498db"] {
background: rgba(255,193,7,0.05) !important;
border: 1px solid rgba(255,193,7,0.15) !important;
}
/* ─── Green success elements ────────────────────────────────────────── */
[style*="background: linear-gradient(135deg, #27ae60"],
[style*="background: linear-gradient(45deg, #27ae60"],
[style*="background: linear-gradient(135deg, #2ecc71"] {
background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.05)) !important;
border: 1px solid rgba(16,185,129,0.2) !important;
}
/* Checkout/pay buttons – keep primary CTA gold */
.btn, .btn-primary, .buy-btn, .pay-btn,
button[data-testid="payBtn"],
button[id*="payBtn"],
button[id*="BuyBtn"],
button[id*="buy"],
button[id*="pay"],
#payBtn,
#buyBtn,
#subscribeBtn {
background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
color: #000 !important;
border: none !important;
border-radius: var(--ui-radius-md) !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: opacity 0.15s, transform 0.1s !important;
}
.btn:hover, .btn-primary:hover, .buy-btn:hover, .pay-btn:hover {
opacity: 0.88 !important;
}
/* Login / auth nav BUTTONS — match gold design system.
Intentionally excludes a[href*="login"] — links in the sidebar nav
that point to /login.html must not be styled as gold CTA buttons. */
button[onclick*="login"],
button[onclick*="Login"],
#authNavBtn,
#authNavBtnMobile {
background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
color: #0b0803 !important;
border: 1px solid rgba(255,214,118,0.35) !important;
border-radius: var(--ui-radius-sm) !important;
font-weight: 700 !important;
cursor: pointer !important;
}
/* ─── Loading / progress ────────────────────────────────────────────── */
.progress-container,
.analysis-progress {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-lg) !important;
}
/* ─── Language / Currency selector ─────────────────────────────────── */
#langSelectorDropdown {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-md) !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
#langSelectorDropdown div {
color: var(--ui-text-2) !important;
}
#langSelectorDropdown div:hover {
background: rgba(255,255,255,0.04) !important;
color: var(--ui-text) !important;
}
#langSelectorBtn {
border-color: rgba(255,255,255,0.1) !important;
color: var(--ui-text-3) !important;
}
/* ─── Scroll restoration fix ────────────────────────────────────────── */
html { scroll-behavior: smooth; }
/* ─── Focus Ring ────────────────────────────────────────────────────── */
:focus-visible {
outline: 2px solid var(--ui-gold) !important;
outline-offset: 2px !important;
}
/* ─── Selection ─────────────────────────────────────────────────────── */
::selection {
background: rgba(255,193,7,0.25) !important;
color: var(--ui-gold) !important;
}
/* ─── Auth pages (login / signup) ──────────────────────────────────── */
.login-page,
.signup-page {
background: var(--ui-bg) !important;
font-family: var(--ui-font-sans) !important;
}
.login-header,
.signup-header {
background: var(--ui-surface-2) !important;
border-bottom: 1px solid var(--ui-border) !important;
}
.login-header-logo span,
.signup-header-logo span { color: var(--ui-gold) !important; }
.login-header-logo span em,
.signup-header-logo span em { color: var(--ui-gold) !important; }
.login-header-nav a,
.signup-header-nav a { color: var(--ui-text-3) !important; }
.login-header-nav a:hover,
.signup-header-nav a:hover { color: var(--ui-text) !important; }
.login-body,
.signup-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: 14px !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,
.signup-card {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
box-shadow: 0 32px 64px rgba(0,0,0,0.4) !important;
border-radius: 20px !important;
}
.login-card-title,
.signup-card-title {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
}
.login-card-sub,
.signup-card-sub { color: var(--ui-text-3) !important; }
.field label {
color: var(--ui-text-3) !important;
}
.field input {
background: var(--ui-surface-3) !important;
border-color: var(--ui-border) !important;
color: var(--ui-text) !important;
border-radius: 10px !important;
}
.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;
background: var(--ui-surface-3) !important;
}
.forgot-row a { color: var(--ui-gold) !important; }
.btn-login,
.btn-signup {
background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
color: #000 !important;
border-radius: 10px !important;
}
/* divider line "or" */
.divider-or {
color: var(--ui-text-3) !important;
}
.divider-or::before,
.divider-or::after { background: var(--ui-border) !important; }
/* "Already have an account" links */
.login-footer a,
.signup-footer a { color: var(--ui-gold) !important; }
/* ─── chess-profile / health check page ─────────────────────────────── */
.hc-page {
background: transparent !important;
color: var(--ui-text) !important;
}
.setup-card,
.results-card,
.hc-card {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 20px !important;
box-shadow: none !important;
color: var(--ui-text-2) !important;
}
.setup-card h1,
.results-card h2 {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
}
.hiw-num {
background: var(--ui-gold-glow) !important;
color: var(--ui-gold) !important;
border: 1px solid rgba(255,193,7,0.2) !important;
}
/* ─── Fix: or-divider (login / signup) ─────────────────────────────── */
.or-divider {
color: var(--ui-text-3) !important;
}
.or-divider::before,
.or-divider::after { background: var(--ui-border) !important; }
/* forgot-row / signup-row links */
.forgot-row a { color: var(--ui-gold) !important; }
.signup-row a { color: var(--ui-gold) !important; }
.login-footer-note { color: var(--ui-text-3) !important; }
/* ─── My Analyses page ──────────────────────────────────────────────── */
.analysis-card {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 14px !important;
box-shadow: none !important;
transition: border-color 0.2s, transform 0.2s !important;
}
.analysis-card:hover {
background: var(--ui-surface-3) !important;
border-color: var(--ui-border-hover) !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
.analysis-card-header {
border-bottom: 1px solid var(--ui-border) !important;
}
.analysis-card-title {
color: var(--ui-text) !important;
font-size: 16px !important;
font-weight: 700 !important;
}
.analysis-card-date {
color: var(--ui-text-3) !important;
font-family: var(--ui-font-mono) !important;
font-size: 11px !important;
}
.analysis-card-info {
color: var(--ui-text-2) !important;
font-size: 13px !important;
}
.analysis-card-info strong {
color: var(--ui-text) !important;
}
.loading-spinner {
color: var(--ui-text-3) !important;
}
.empty-state {
background: var(--ui-surface) !important;
border: 1px dashed var(--ui-border) !important;
border-radius: 16px !important;
}
.empty-state h3 { color: var(--ui-text) !important; }
.empty-state p { color: var(--ui-text-3) !important; }
/* Analyses modal */
.modal-content {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 18px !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; }
/* ─── My Account page ───────────────────────────────────────────────── */
.account-section {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 16px !important;
box-shadow: none !important;
}
.account-section h3 {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
border-bottom: 1px solid var(--ui-border) !important;
}
.info-row {
border-bottom: 1px solid var(--ui-border) !important;
}
.info-label { color: var(--ui-text) !important; font-weight: 600 !important; }
.info-value { color: var(--ui-text-3) !important; }
.stat-card {
background: var(--ui-surface-3) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 14px !important;
}
.stat-number {
color: var(--ui-emerald) !important;
}
.stat-label { color: var(--ui-text-3) !important; }
.form-group label { color: var(--ui-text-2) !important; font-weight: 600 !important; }
.danger-zone {
background: rgba(239,68,68,0.05) !important;
border: 1px solid rgba(239,68,68,0.25) !important;
border-radius: 14px !important;
}
.danger-zone h4 { color: var(--ui-red) !important; }
/* ─── Contact page ──────────────────────────────────────────────────── */
.contact-section {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 20px !important;
box-shadow: none !important;
}
.contact-section h2 { color: var(--ui-text) !important; font-family: var(--ui-font-serif) !important; }
.contact-info {
background: rgba(255,255,255,0.02) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 12px !important;
}
.contact-link { color: var(--ui-gold) !important; }
.contact-link:hover { color: #e6ab00 !important; }
.faq-section h3,
.faq-section h2 { color: var(--ui-text) !important; font-family: var(--ui-font-serif) !important; }
.faq-item {
background: rgba(255,255,255,0.02) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 10px !important;
}
.faq-question { color: var(--ui-text) !important; }
.faq-answer { color: var(--ui-text-3) !important; }
/* ─── View Analysis / Report page ──────────────────────────────────── */
.analysis-meta {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 16px !important;
box-shadow: none !important;
}
.split-screen-container {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 16px !important;
box-shadow: none !important;
}
.analysis-report {
color: var(--ui-text-2) !important;
font-family: var(--ui-font-sans) !important;
}
.analysis-report h1, .analysis-report h2, .analysis-report h3 {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
}
.analysis-report a { color: var(--ui-gold) !important; }
.analysis-report code, .analysis-report pre {
background: rgba(255,255,255,0.04) !important;
color: var(--ui-text) !important;
border-radius: 6px !important;
font-family: var(--ui-font-mono) !important;
}
.analysis-report table {
border-color: var(--ui-border) !important;
}
.analysis-report th {
background: rgba(255,255,255,0.03) !important;
color: var(--ui-text-3) !important;
border-color: var(--ui-border) !important;
}
.analysis-report td {
color: var(--ui-text-2) !important;
border-color: var(--ui-border) !important;
}
.analysis-report tr:nth-child(even) {
background: rgba(255,255,255,0.015) !important;
}
/* Chessboard sticky top — matches new ui-page-header height (64px) */
@media (min-width: 1024px) {
.chessboard-section {
top: 72px !important;
}
}
/* Mobile chessboard — remove white background */
.mobile-layout .chessboard-section {
background: transparent !important;
border-radius: var(--ui-radius-md) !important;
overflow: hidden;
}
/* ─── Move navigation buttons ───────────────────────────────────────── */
#prevBtn, #nextBtn,
#prevSectionBtnTop, #nextSectionBtnTop,
#prevSectionBtnBottom, #nextSectionBtnBottom {
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;
transition: background 0.15s, border-color 0.15s !important;
}
#prevBtn:hover, #nextBtn:hover,
#prevSectionBtnTop:hover, #nextSectionBtnTop:hover,
#prevSectionBtnBottom:hover, #nextSectionBtnBottom:hover {
background: rgba(255,255,255,0.07) !important;
border-color: var(--ui-border-hover) !important;
color: var(--ui-text) !important;
}
/* ─── Misc light-bg elements ────────────────────────────────────────── */
/* Any section with a light gradient background */
[style*="background: linear-gradient(135deg, #f8f9fa, #ecf0f1)"],
[style*="background: linear-gradient(135deg, #ecf0f1"] {
background: var(--ui-surface-3) !important;
}
/* Light solid backgrounds */
[style*="background: #f0f2f5"],
[style*="background: #f5f7fa"],
[style*="background: #fafbfc"],
[style*="background-color: #f0f2f5"],
[style*="background-color: #fafbfc"] {
background: var(--ui-surface-3) !important;
}
/* Muted text colours */
[style*="color: #7f8c8d"],
[style*="color:#7f8c8d"],
[style*="color: #95a5a6"],
[style*="color:#95a5a6"] {
color: var(--ui-text-3) !important;
}
/* ─── Success / error alert boxes ───────────────────────────────────── */
#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;
}
#alertBox.error {
background: rgba(239,68,68,0.1) !important;
color: #fca5a5 !important;
border: 1px solid rgba(239,68,68,0.25) !important;
}
/* ─── Chess-profile: section headings & labels ──────────────────────── */
.hc-page h1, .hc-page h2, .hc-page h3 {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
}
.hc-page p, .hc-page label, .hc-page small {
color: var(--ui-text-2) !important;
}
.hc-page a { color: var(--ui-gold) !important; }
.hc-page select, .hc-page input {
background: var(--ui-surface-3) !important;
color: var(--ui-text) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-md) !important;
}
.hc-page button[type="submit"],
.hc-page .btn-primary,
.hc-page #startBtn,
.hc-page #analyzeBtn {
background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
color: #000 !important;
border: none !important;
border-radius: var(--ui-radius-md) !important;
font-weight: 700 !important;
}
/* ─── PDF download button ───────────────────────────────────────────── */
#downloadPdfBtn,
.download-pdf-btn,
button[id*="pdf"],
button[id*="Pdf"] {
background: rgba(255,255,255,0.05) !important;
border: 1px solid var(--ui-border) !important;
color: var(--ui-text) !important;
border-radius: var(--ui-radius-md) !important;
font-weight: 600 !important;
transition: all 0.15s !important;
}
#downloadPdfBtn:hover,
.download-pdf-btn:hover {
background: rgba(255,255,255,0.08) !important;
border-color: var(--ui-border-hover) !important;
}
/* ─── Signup page specific ──────────────────────────────────────────── */
.signup-page { background: var(--ui-bg) !important; }
.signup-card {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
box-shadow: 0 32px 64px rgba(0,0,0,0.4) !important;
border-radius: 20px !important;
}
.signup-card-title { color: var(--ui-text) !important; font-family: var(--ui-font-serif) !important; }
.signup-card-sub { color: var(--ui-text-3) !important; }
/* ─── Progress bar ──────────────────────────────────────────────────── */
.progress-bar-fill,
.progress-fill,
[style*="background: linear-gradient(90deg, #3498db"] {
background: linear-gradient(90deg, var(--ui-gold-dim), var(--ui-gold)) !important;
}
.progress-bar-bg,
.progress-bg,
[class*="progress-track"] {
background: rgba(255,255,255,0.06) !important;
}
/* ─── Scrollbar (Firefox) ───────────────────────────────────────────── */
.ui-page-content,
.modal-content,
.mobile-nav {
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.07) transparent;
}
.ui-page-content::-webkit-scrollbar,
.modal-content::-webkit-scrollbar { width: 5px; }
.ui-page-content::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.07);
border-radius: 10px;
}
/* ─── Analysis score / eval bar ─────────────────────────────────────── */
.eval-bar, .eval-track {
background: rgba(255,255,255,0.06) !important;
border-radius: 4px !important;
}
.eval-fill-white { background: #f4f4f5 !important; }
.eval-fill-black { background: var(--ui-surface-3) !important; }
/* ─── Results / score section ───────────────────────────────────────── */
.accuracy-badge,
.score-badge {
background: rgba(255,193,7,0.1) !important;
border: 1px solid rgba(255,193,7,0.2) !important;
color: var(--ui-gold) !important;
border-radius: 8px !important;
}
/* ─── Animated shimmer (loading skeleton) ───────────────────────────── */
/* transform-based sweep on a pseudo-element instead of animating
background-position, which isn't compositor-accelerated and forces a
paint every frame (PageSpeed's non-composited-animations audit). */
@keyframes ui-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.skeleton,
.loading-skeleton {
position: relative !important;
overflow: hidden !important;
background: rgba(255,255,255,0.03) !important;
border-radius: var(--ui-radius-sm) !important;
color: transparent !important;
}
.skeleton::after,
.loading-skeleton::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(90deg,
transparent,
rgba(255,255,255,0.07),
transparent
) !important;
animation: ui-shimmer 1.5s ease-in-out infinite !important;
}
/* ─── Polished auth buttons (authNavBtn state) ──────────────────────── */
/* Logged-in state — show user avatar initials */
#authNavBtn.logged-in,
#authNavBtnMobile.logged-in {
background: rgba(255,193,7,0.1) !important;
color: var(--ui-gold) !important;
border: 1px solid rgba(255,193,7,0.2) !important;
border-radius: var(--ui-radius-md) !important;
}
/* ─── Polished sidebar active glow ──────────────────────────────────── */
.ui-sidebar-link.active {
box-shadow: inset 0 0 0 1px rgba(255,193,7,0.18) !important;
}
/* ─── View Analysis extra overrides ────────────────────────────────── */
#pgnContainer {
background: var(--ui-surface-3) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-md) !important;
color: var(--ui-text-2) !important;
font-family: var(--ui-font-mono) !important;
box-shadow: none !important;
}
.analysis-report strong { color: var(--ui-text) !important; }
.analysis-report li { color: var(--ui-text-2) !important; }
/* Theme selector */
.theme-selector {
background: var(--ui-surface-3) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-sm) !important;
}
.theme-option-mini {
border: 1px solid var(--ui-border) !important;
border-radius: 4px !important;
transition: border-color 0.15s !important;
}
.theme-option-mini.active {
border-color: var(--ui-gold) !important;
box-shadow: 0 0 0 2px rgba(255,193,7,0.2) !important;
}
/* Move controls */
.move-controls button {
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;
}
.move-controls button:hover {
background: rgba(255,255,255,0.07) !important;
color: var(--ui-text) !important;
}
/* Chessboard header */
.chessboard-section h3 { color: var(--ui-text-3) !important; }
/* ─── Chess Profile page — deep overrides ───────────────────────────── */
/* Player type hero — update to new dark tokens */
.player-type-hero {
background: linear-gradient(135deg, var(--ui-surface-2), var(--ui-surface-3)) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 20px !important;
}
/* Platform tabs */
.platform-tab {
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;
transition: all 0.15s !important;
}
.platform-tab:hover:not(.active) {
border-color: var(--ui-border-hover) !important;
color: var(--ui-text) !important;
background: rgba(255,255,255,0.05) !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;
}
/* Setup input */
.setup-input {
background: var(--ui-surface-3) !important;
border: 1px solid var(--ui-border) !important;
color: var(--ui-text) !important;
border-radius: var(--ui-radius-md) !important;
font-family: var(--ui-font-sans) !important;
}
.setup-input:focus {
border-color: rgba(255,193,7,0.35) !important;
box-shadow: 0 0 0 3px rgba(255,193,7,0.07) !important;
outline: none !important;
}
.setup-input::placeholder { color: var(--ui-text-3) !important; }
/* Start button — gold brand colour */
.btn-start {
background: linear-gradient(135deg, #dab148, #ffc107) !important;
color: #0b0803 !important;
border-radius: var(--ui-radius-md) !important;
font-family: var(--ui-font-sans) !important;
}
/* Analyzing state */
.analyzing-header {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 14px !important;
box-shadow: none !important;
}
.analyzing-header-text h2 { color: var(--ui-text) !important; font-size: 16px !important; }
.analyzing-header-text p { color: var(--ui-text-3) !important; }
.progress-note { color: var(--ui-text-3) !important; }
/* Spinner */
.spinner {
border-color: var(--ui-border) !important;
border-top-color: var(--ui-emerald) !important;
}
.spinner-sm {
border-color: rgba(255,255,255,0.07) !important;
border-top-color: var(--ui-gold) !important;
}
/* Game progress cards */
.game-progress-card {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-left: 3px solid var(--ui-gold) !important;
border-radius: 12px !important;
box-shadow: none !important;
}
.game-num { color: var(--ui-text-3) !important; }
.game-players { color: var(--ui-text) !important; }
.game-players .you { color: var(--ui-emerald) !important; }
.game-detail-text, .game-status { color: var(--ui-text-3) !important; }
/* Time control badges — dark versions */
.tc-badge.classical, .tc-badge.daily {
background: rgba(59,130,246,0.1) !important;
color: #60a5fa !important;
}
.tc-badge.rapid {
background: rgba(16,185,129,0.1) !important;
color: var(--ui-emerald) !important;
}
.tc-badge.blitz {
background: rgba(245,158,11,0.1) !important;
color: #fbbf24 !important;
}
.tc-badge.bullet {
background: rgba(139,92,246,0.1) !important;
color: #a78bfa !important;
}
/* Skeleton/placeholder shimmer */
.game-progress-placeholder {
position: relative !important;
overflow: hidden !important;
background: var(--ui-surface-3) !important;
}
.game-progress-placeholder::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(90deg,
transparent,
rgba(255,255,255,0.05),
transparent
) !important;
animation: ui-shimmer 1.4s ease-in-out infinite !important;
}
/* Result accuracy mini-chart */
.accuracy-bar { background: rgba(255,255,255,0.06) !important; }
.accuracy-fill { background: var(--ui-gold) !important; }
/* Profile report sections */
.phase-section,
.strength-section,
.weakness-section {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 14px !important;
}
/* ─── Responsive padding for content on small screens ──────────────── */
@media (max-width: 640px) {
.main-content { padding: 16px !important; }
.analysis-card { border-radius: 10px !important; }
.contact-section { padding: 24px 20px !important; }
.account-section { padding: 20px !important; }
.setup-card { padding: 28px 20px !important; }
.player-type-hero { padding: 28px 20px !important; }
}
/* ═══════════════════════════════════════════════════════════════════
PHASE 2 POLISH — targeted overrides for index.html inline styles
═══════════════════════════════════════════════════════════════════ */
/* ── Double main-content safety net ──────────────────────────────── */
.ui-page-content > .main-content > .main-content {
padding: 0 !important;
}
/* ── Stats strip numbers: gold instead of blue ───────────────────── */
#statReports,
#statsStrip [style*="color: #3498db"],
#statsStrip [style*="color:#3498db"] {
color: var(--ui-gold) !important;
}
/* Stat strip separator lines */
#statsStrip > div[style*="width: 1px"],
#statsStrip > div[style*="width:1px"] {
background: var(--ui-border) !important;
}
/* ── Pricing section ──────────────────────────────────────────────── */
/* Subscription card — override the blue light gradient */
#paymentSection [style*="background: linear-gradient(135deg, #e3f2fd"],
#paymentSection [style*="background: linear-gradient(135deg,#e3f2fd"] {
background: var(--ui-surface) !important;
border: 1px solid rgba(255,193,7,0.25) !important;
box-shadow: 0 4px 24px rgba(255,193,7,0.06) !important;
}
/* Subscription card blue border override */
#paymentSection [style*="border: 3px solid #2196F3"],
#paymentSection [style*="border:3px solid #2196F3"] {
border: 1px solid rgba(255,193,7,0.3) !important;
}
/* Subscription heading colour */
#unlimitedMonthlyName { color: var(--ui-text) !important; }
/* Subscription price main */
#subPriceMain { color: var(--ui-gold) !important; }
/* One-off price (already green, keep green) */
#oneOffPriceMain { color: var(--ui-emerald) !important; }
/* BEST VALUE badge — gold instead of blue */
#bestValueBadge {
background: rgba(255,193,7,0.15) !important;
color: var(--ui-gold) !important;
border: 1px solid rgba(255,193,7,0.35) !important;
}
/* LAUNCH OFFER badge — keep green */
#launchOfferBadge {
background: rgba(16,185,129,0.15) !important;
color: var(--ui-emerald) !important;
border: 1px solid rgba(16,185,129,0.3) !important;
}
/* Trial badge */
#trialBadge {
background: rgba(255,193,7,0.1) !important;
color: var(--ui-gold) !important;
border: 1px solid rgba(255,193,7,0.25) !important;
}
/* Subscription pay button — gold instead of blue */
#paymentButtonSubscription {
background: linear-gradient(135deg, var(--ui-gold-dim), var(--ui-gold)) !important;
color: #000 !important;
}
/* Single analysis pay button — gold brand colour */
#paymentButtonOneOff {
background: linear-gradient(135deg, #dab148, #ffc107) !important;
color: #0b0803 !important;
}
/* Fine print texts */
#finePrintOneOff, #finePrintSub,
#securePaymentText, #securePaymentText a,
#oneOffCurrencyNote, #subCurrencyNote {
color: var(--ui-text-3) !important;
}
#securePaymentText a:hover { color: var(--ui-text-3) !important; }
/* Strike price */
#oneOffStrikePrice { color: var(--ui-red) !important; }
/* per-period labels */
#perAnalysisText, #perMonthText { color: var(--ui-text-3) !important; }
/* Feature list items in pricing */
#paymentSection [id^="featOneoff"],
#paymentSection [id^="featSub"] {
color: var(--ui-text-2) !important;
}
#featSub0sub { color: var(--ui-text-3) !important; font-style: italic; }
/* ── How It Works section ─────────────────────────────────────────── */
#howItWorksSection {
background: var(--ui-surface-2) !important;
border-top: 1px solid var(--ui-border) !important;
border-bottom: 1px solid var(--ui-border) !important;
}
#howItWorksHeading { color: var(--ui-text) !important; }
/* How-it-works boxes */
.hiw-box,
#howItWorksSection [style*="background: #f8f9fa"] {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 12px !important;
}
/* HIW box titles */
#howItWorksSection [style*="color: #2c3e50"],
#howItWorksSection [id^="hiw"][id$="Title"] {
color: var(--ui-text) !important;
}
/* HIW box descriptions */
#howItWorksSection [style*="color: #888"],
#howItWorksSection [id^="hiw"][id$="Desc"] {
color: var(--ui-text-3) !important;
}
/* HIW arrows */
.hiw-arrow,
#howItWorksSection [style*="color: #3498db"] {
color: var(--ui-gold) !important;
opacity: 0.6;
}
/* ── Sample Report section ────────────────────────────────────────── */
#sampleReportSection {
background: var(--ui-bg) !important;
border-top: 1px solid var(--ui-border) !important;
}
#sampleReportSection > div > h2 { color: var(--ui-text) !important; }
#sampleReportSection > div > p { color: var(--ui-text-3) !important; }
/* Main sample card */
#sampleReportSection > [style*="max-width: 1200px"],
#sampleReportSection [style*="background: white; border-radius: 16px"] {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
box-shadow: 0 8px 40px rgba(0,0,0,0.4) !important;
}
/* Report preview header bar */
#sampleReportSection [style*="border-bottom: 1px solid #e8edf4"] {
border-bottom: 1px solid var(--ui-border) !important;
}
/* Preview badge */
#sampleReportSection [style*="background: #eef3f9"] {
background: rgba(255,255,255,0.05) !important;
color: var(--ui-text-3) !important;
border-color: var(--ui-border) !important;
}
/* Analysis report text in sample */
#sr-report [style*="color: #1a2535"],
#sr-report [style*="color:#1a2535"] { color: var(--ui-text) !important; }
#sr-report [style*="color: #3d4f61"],
#sr-report [style*="color: #4a5a6a"],
#sr-report [style*="color: #5a6a7e"] { color: var(--ui-text-2) !important; }
#sr-report [style*="color: #8a9ab0"] { color: var(--ui-text-3) !important; }
/* Executive summary box */
#sr-report [style*="background: linear-gradient(135deg, #f0f7ff"] {
background: rgba(59,130,246,0.06) !important;
border-left: 4px solid rgba(59,130,246,0.4) !important;
}
/* Story/narrative boxes */
#sr-report [style*="background: #f7f9fb"],
#sr-report [style*="background:#f7f9fb"] {
background: rgba(255,255,255,0.03) !important;
}
#sr-report [style*="border-left: 4px solid #3498db"] {
border-left: 4px solid rgba(255,193,7,0.4) !important;
}
#sr-report [style*="border-left: 4px solid #78909c"] {
border-left: 4px solid rgba(255,255,255,0.1) !important;
}
/* Quote block */
#sr-report [style*="background: #f7f9fb; padding: 14px"] {
background: rgba(255,255,255,0.02) !important;
border: 1px solid var(--ui-border) !important;
color: var(--ui-text-3) !important;
}
/* Phase badge labels */
#sr-report [style*="background: #d4edda; color: #155724"] {
background: rgba(16,185,129,0.1) !important;
color: var(--ui-emerald) !important;
}
#sr-report [style*="background: #cce5ff; color: #004085"] {
background: rgba(59,130,246,0.1) !important;
color: #60a5fa !important;
}
#sr-report [style*="background: #fff3cd; color: #856404"] {
background: rgba(245,158,11,0.1) !important;
color: #fbbf24 !important;
}
#sr-report [style*="background: #f8d7da; color: #721c24"] {
background: rgba(239,68,68,0.1) !important;
color: #fca5a5 !important;
}
/* Fade overlay — fade to dark background */
#sampleReportSection [aria-hidden="true"] {
background: linear-gradient(to bottom,
transparent 0%,
rgba(18,18,20,0.6) 40%,
var(--ui-surface) 80%,
var(--ui-surface) 100%
) !important;
}
/* CTA bar */
.sr-cta-bar {
background: var(--ui-surface-3) !important;
border-top: 1px solid var(--ui-border) !important;
}
.sr-cta-bar [style*="color: #1a2535"] { color: var(--ui-text) !important; }
.sr-cta-bar [style*="color: #64748b"] { color: var(--ui-text-3) !important; }
.sr-full-btn {
background: rgba(255,193,7,0.1) !important;
color: var(--ui-gold) !important;
border: 1px solid rgba(255,193,7,0.25) !important;
}
.sr-full-btn:hover {
background: rgba(255,193,7,0.18) !important;
color: var(--ui-gold) !important;
}
/* Mobile sample report content */
#sr-mobile-content {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
box-shadow: none !important;
}
/* Mobile nav buttons in sample report */
#sampleReportSection [style*="background:#3498db"],
#sampleReportSection [style*="background: #3498db"] {
background: rgba(255,193,7,0.15) !important;
border-color: rgba(255,193,7,0.3) !important;
color: var(--ui-gold) !important;
}
#sampleReportSection [style*="background:#1e2d3d"],
#sampleReportSection [style*="background: #1e2d3d"] {
background: var(--ui-surface-3) !important;
border-color: var(--ui-border) !important;
color: var(--ui-text-2) !important;
}
/* ── Upload / Analysis Form section ──────────────────────────────── */
/* Platform tabs active state — gold */
#chesscomTab.active,
#lichessTab.active,
.platform-tab.active {
background: rgba(255,193,7,0.12) !important;
border-color: rgba(255,193,7,0.4) !important;
color: var(--ui-gold) !important;
}
.platform-tab:not(.active) {
background: var(--ui-surface-3) !important;
border-color: var(--ui-border) !important;
color: var(--ui-text-3) !important;
}
/* Time control filter box */
#uploadSection [style*="background: #f8f9fa; border: 2px solid #ecf0f1"] {
background: rgba(255,255,255,0.02) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 10px !important;
}
/* Filter label text */
#uploadSection [style*="color: #2c3e50"] { color: var(--ui-text) !important; }
#uploadSection [style*="color: #7f8c8d"] { color: var(--ui-text-3) !important; }
/* Section headings and sub-text in upload */
.fetch-game-section h2,
.section h1,
.section h2 { color: var(--ui-text) !important; font-family: var(--ui-font-serif) !important; }
.fetch-game-section p { color: var(--ui-text-3) !important; }
/* ── Active subscription banner ──────────────────────────────────── */
#activeSubscriptionBanner {
background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.04)) !important;
border: 1px solid rgba(16,185,129,0.2) !important;
box-shadow: none !important;
}
#activeSubscriptionBanner h3,
#subBannerTitle { color: var(--ui-emerald) !important; }
#activeSubscriptionBanner p,
#subBannerDetails,
#subscriptionDetails { color: var(--ui-text-2) !important; }
#goToAnalysisBtn {
background: var(--ui-emerald) !important;
color: #000 !important;
box-shadow: none !important;
}
/* Analysis setup wizard */
#uploadSection.analysis-setup {
flex-direction: column !important;
gap: 24px !important;
width: min(100%, 980px) !important;
max-width: 980px !important;
margin: 0 auto 48px !important;
padding: 24px 16px 96px !important;
}
@media (min-width: 768px) {
#uploadSection.analysis-setup {
padding: 40px 28px 56px !important;
}
}
.analysis-setup-header {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.analysis-kicker,
.analysis-panel-eyebrow {
color: var(--ui-gold);
font-family: var(--ui-font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.analysis-setup-header h1 {
margin: 0;
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
font-size: clamp(34px, 6vw, 56px);
line-height: 1;
}
.analysis-setup-header p {
max-width: 560px;
margin: 0;
color: var(--ui-text-3);
font-size: 15px;
line-height: 1.7;
}
.analysis-stepper {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
width: min(100%, 680px);
margin: 0 auto;
}
.analysis-stepper::before {
content: "";
position: absolute;
top: 20px;
left: 12%;
right: 12%;
height: 1px;
background: var(--ui-border);
}
.analysis-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
background: transparent;
border: 0;
color: var(--ui-text-3);
cursor: pointer;
padding: 0;
font-family: var(--ui-font-sans);
}
.analysis-step span {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--ui-surface-3);
border: 1px solid var(--ui-border);
color: var(--ui-text-3);
font-weight: 800;
}
.analysis-step strong {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.analysis-step.is-active span,
.analysis-step.is-complete span {
background: rgba(255,193,7,0.12);
border-color: rgba(255,193,7,0.42);
color: var(--ui-gold);
}
.analysis-step.is-active strong,
.analysis-step.is-complete strong {
color: var(--ui-gold);
}
.analysis-step-panel {
display: none;
width: 100%;
}
.analysis-step-panel.is-active {
display: block;
}
#uploadSection .section,
#uploadSection .pgn-section > .section,
#uploadSection .settings-section > .section {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 20px !important;
box-shadow: 0 24px 80px rgba(0,0,0,0.28) !important;
padding: 24px !important;
}
@media (min-width: 768px) {
#uploadSection .section,
#uploadSection .pgn-section > .section,
#uploadSection .settings-section > .section {
padding: 34px !important;
}
}
#uploadSection .pgn-section,
#uploadSection .settings-section {
flex: none !important;
}
#uploadSection .fetch-game-section h2,
#uploadSection .settings-section h2,
.analysis-confirm-heading h2 {
margin: 0 0 8px !important;
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
font-size: clamp(24px, 4vw, 34px) !important;
line-height: 1.1 !important;
}
#uploadSection .fetch-game-section p,
.analysis-confirm-heading p {
color: var(--ui-text-3) !important;
margin: 0 0 24px !important;
line-height: 1.7 !important;
}
#uploadSection .platform-tab {
min-height: 48px;
border-radius: 12px !important;
font-size: 14px !important;
}
#fetchGameContainer {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
margin-bottom: 18px !important;
}
@media (min-width: 720px) {
#fetchGameContainer {
grid-template-columns: minmax(0, 1fr) auto !important;
}
}
#platformUsername {
min-height: 52px !important;
padding: 0 16px !important;
border-radius: 14px !important;
font-size: 16px !important;
}
#fetchGamesBtn,
#loadManualPgnBtn {
min-height: 52px !important;
border-radius: 14px !important;
background: var(--ui-gold-dim) !important;
color: #08080a !important;
box-shadow: none !important;
}
#uploadSection label {
color: var(--ui-text-2) !important;
}
#uploadSection input[type="checkbox"],
#uploadSection input[type="radio"] {
accent-color: var(--ui-gold);
}
#uploadSection .manual-import-section,
#uploadSection [style*="background: #f8f9fa; border: 2px solid #ecf0f1"] {
background: rgba(255,255,255,0.025) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 14px !important;
}
#uploadSection .manual-import-header {
color: var(--ui-text) !important;
letter-spacing: 0 !important;
text-transform: none !important;
font-size: 14px !important;
gap: 12px;
padding: 0 !important;
min-height: 34px;
}
#manualImportToggle {
font-size: 0 !important;
margin-left: auto;
}
#manualImportToggle::after {
content: "Open";
font-size: 12px;
}
#manualImportHeader[aria-expanded="true"] #manualImportToggle::after {
content: "Close";
}
#manualPgnInput {
min-height: 180px !important;
margin-top: 8px !important;
border-radius: 14px !important;
font-family: var(--ui-font-mono) !important;
font-size: 13px !important;
}
#uploadSection [style*="background: #e8f5e9"] {
background: rgba(255,193,7,0.08) !important;
border-left: 3px solid rgba(255,193,7,0.55) !important;
border-radius: 12px !important;
}
#uploadSection [style*="color: #2e7d32"] {
color: var(--ui-text-2) !important;
}
#uploadSection [style*="color: #2e7d32"] strong {
color: var(--ui-gold) !important;
}
#gamesListContainer {
margin-top: 20px !important;
background: rgba(255,255,255,0.02) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 16px !important;
padding: 18px !important;
}
#gamesListContainer h3 {
color: var(--ui-text) !important;
margin: 0 0 14px !important;
}
#gamesList {
max-height: min(52vh, 480px) !important;
overflow-y: auto !important;
border: 1px solid var(--ui-border) !important;
border-radius: 12px !important;
padding: 6px !important;
background: var(--ui-surface-2) !important;
}
.game-item {
background: transparent !important;
border-bottom: 1px solid var(--ui-border) !important;
border-radius: 10px !important;
}
.game-item:hover,
.game-item.selected {
background: rgba(255,193,7,0.08) !important;
}
.game-item [style*="color: #2c3e50"] { color: var(--ui-text) !important; }
.game-item [style*="color: #7f8c8d"],
.game-item [style*="color: #95a5a6"] { color: var(--ui-text-3) !important; }
#selectedGameSummary {
background: rgba(16,185,129,0.08) !important;
border: 1px solid rgba(16,185,129,0.22) !important;
border-radius: 14px !important;
color: var(--ui-emerald) !important;
}
#selectedGameText {
color: var(--ui-emerald) !important;
}
#uploadSection .form-group {
margin-bottom: 18px !important;
}
#uploadSection .form-group label,
#uploadSection [style*="font-weight: 600; color: #2c3e50"] {
color: var(--ui-text-2) !important;
font-size: 12px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
#uploadSection select,
#uploadSection input[type="text"] {
min-height: 50px !important;
border-radius: 14px !important;
}
#uploadSection .form-group > div[style*="display: flex; flex-direction: column"] {
gap: 12px !important;
}
#uploadSection .form-group > div[style*="display: flex; flex-direction: column"] > label {
background: rgba(255,255,255,0.025) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 14px !important;
padding: 16px !important;
}
#uploadSection .form-group > div[style*="display: flex; flex-direction: column"] > label:has(input:checked) {
background: rgba(255,193,7,0.08) !important;
border-color: rgba(255,193,7,0.35) !important;
}
#uploadSection .form-group span[style*="color: #2c3e50"] {
color: var(--ui-text) !important;
}
#uploadSection .form-group span[style*="color: #7f8c8d"] {
color: var(--ui-text-3) !important;
}
.analysis-confirm-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin: 24px 0;
}
@media (min-width: 720px) {
.analysis-confirm-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.analysis-confirm-card {
background: rgba(255,255,255,0.025);
border: 1px solid var(--ui-border);
border-radius: 16px;
padding: 18px;
}
.analysis-confirm-card span {
display: block;
margin-bottom: 8px;
color: var(--ui-text-3);
font-family: var(--ui-font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.analysis-confirm-card strong {
display: block;
color: var(--ui-text);
font-size: 16px;
line-height: 1.45;
}
.analysis-security-note {
padding: 16px;
border-radius: 14px;
border: 1px solid rgba(16,185,129,0.18);
background: rgba(16,185,129,0.06);
color: var(--ui-text-2);
line-height: 1.6;
}
.analysis-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
@media (min-width: 640px) {
.analysis-actions {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.analysis-nav-btn,
.analysis-start-btn {
min-height: 52px !important;
border-radius: 14px !important;
font-family: var(--ui-font-sans) !important;
font-weight: 800 !important;
}
.analysis-nav-btn {
border: 1px solid var(--ui-border);
background: rgba(255,255,255,0.035);
color: var(--ui-text-2);
padding: 0 24px;
cursor: pointer;
}
.analysis-nav-primary {
margin-left: auto;
background: var(--ui-gold-dim);
border-color: transparent;
color: #08080a;
}
.analysis-start-btn {
display: none !important;
background: linear-gradient(135deg, #059669, var(--ui-emerald)) !important;
color: #fff !important;
width: 100% !important;
box-shadow: none !important;
}
@media (min-width: 640px) {
.analysis-start-btn {
width: auto !important;
padding-left: 28px !important;
padding-right: 28px !important;
}
}
#uploadSection[data-analysis-step-current="1"] #analysisPrevStep {
display: none;
}
#uploadSection[data-analysis-step-current="3"] #analysisNextStep {
display: none;
}
#uploadSection[data-analysis-step-current="3"] .analysis-start-btn {
display: inline-flex !important;
}
/* Desktop-only: un-hide the .hide-mobile wizard blocks (player-select +
custom-language fields, manual import). On phones they stay hidden so
Step 2 is just Name + Language (the Language select's "Other" option
reveals the custom-language input when needed). */
@media (min-width: 768px) {
#uploadSection.analysis-setup .hide-mobile {
display: block !important;
}
}
#usernameDropdown {
background: var(--ui-surface-3) !important;
border: 1px solid rgba(255,193,7,0.25) !important;
border-radius: 0 0 12px 12px !important;
box-shadow: 0 18px 36px rgba(0,0,0,0.45) !important;
color: var(--ui-text) !important;
}
#uploadSection .manual-import-header {
letter-spacing: 0 !important;
text-transform: none !important;
}
/* Premium landing page */
body:has(#premiumLanding) #heroSection,
body:has(#premiumLanding) #chessHealthCheckBanner,
body:has(#premiumLanding) #paymentSection,
body:has(#premiumLanding) #howItWorksSection,
body:has(#premiumLanding) #sampleReportSection,
body:has(#premiumLanding) #learningGuidesSection,
body:has(#premiumLanding) .faq-section,
#premiumLanding ~ .faq-section {
display: none !important;
}
body:has(#premiumLanding) .main-content {
padding: 0 18px 44px !important;
}
@media (min-width: 1024px) {
body:has(#premiumLanding) .main-content {
padding: 0 40px 64px !important;
}
}
@media (min-width: 1440px) {
body:has(#premiumLanding) .main-content {
padding-left: 56px !important;
padding-right: 56px !important;
}
}
body:has(#premiumLanding) .engine-status {
width: fit-content;
margin: 18px auto 14px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: var(--ui-text-3) !important;
font-family: var(--ui-font-sans) !important;
letter-spacing: 0 !important;
}
.premium-landing {
max-width: 1420px;
margin: 0 auto;
color: var(--ui-text);
}
.premium-access-card,
.premium-hero,
.premium-stats,
.premium-import-card,
.premium-feature-grid article,
.premium-report-preview,
.premium-plan-card,
.premium-faq-grid article,
.premium-article-grid a,
.premium-final-cta {
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.085);
box-shadow: 0 30px 80px rgba(0,0,0,0.34);
}
.premium-access-card {
display: none;
grid-template-columns: auto minmax(0, 1fr);
gap: 14px;
align-items: center;
border-radius: 8px;
padding: 18px;
margin-bottom: 28px;
}
.premium-access-card.is-visible {
display: grid;
}
@media (min-width: 720px) {
.premium-access-card {
grid-template-columns: auto minmax(0, 1fr) auto;
padding: 18px 26px;
}
}
.premium-access-icon {
width: 62px;
height: 62px;
display: grid;
place-items: center;
border-radius: 50%;
background: radial-gradient(circle, rgba(218,177,72,0.28), rgba(218,177,72,0.05) 62%, transparent);
border: 1px solid rgba(218,177,72,0.24);
color: var(--ui-gold);
font-size: 30px;
}
.premium-access-card h2,
.premium-access-card p {
margin: 0;
}
.premium-access-card h2 {
font-size: 17px;
color: var(--ui-text);
}
.premium-access-card p {
margin-top: 4px;
color: var(--ui-text-3);
font-size: 13px;
line-height: 1.5;
}
.premium-gold-btn {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
border: 1px solid rgba(255,214,118,0.45);
border-radius: 4px;
background: linear-gradient(135deg, #f3d17a, #c8922e);
color: #0b0803;
font-weight: 800;
padding: 0 28px;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 12px 28px rgba(218,177,72,0.16);
}
.premium-gold-btn:hover {
filter: brightness(1.06);
}
.premium-ghost-btn {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
/* Demoted from solid white-bordered button to a quiet outline so the
gold primary clearly wins the eye. Same height so the row still
reads as a button pair. */
border: 1px solid rgba(255,255,255,0.08);
border-radius: 4px;
background: transparent;
color: var(--ui-text-3);
font-weight: 600;
font-size: 14px;
padding: 0 22px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.premium-ghost-btn:hover {
border-color: rgba(218,177,72,0.4);
background: rgba(255,193,7,0.04);
color: var(--ui-gold);
}
.premium-hero {
position: relative;
min-height: 520px;
overflow: hidden;
border-radius: 8px;
display: grid;
grid-template-columns: 1fr;
padding: 38px 22px;
isolation: isolate;
}
@media (min-width: 860px) {
.premium-hero {
grid-template-columns: minmax(420px, 0.88fr) minmax(520px, 1.12fr);
align-items: center;
gap: 36px;
padding: 64px 56px;
}
}
.premium-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 78% 58%, rgba(218,177,72,0.28), transparent 28%),
radial-gradient(circle at 72% 34%, rgba(255,255,255,0.08), transparent 20%),
linear-gradient(90deg, rgba(8,8,10,0.98) 0%, rgba(8,8,10,0.9) 44%, rgba(8,8,10,0.38) 100%);
z-index: -1;
}
.premium-hero::after {
content: "";
position: absolute;
right: -6%;
bottom: -34%;
width: 72%;
height: 70%;
background:
linear-gradient(45deg, rgba(191,139,0,0.22) 25%, transparent 25% 50%, rgba(191,139,0,0.22) 50% 75%, transparent 75%),
linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.08) 25% 50%, transparent 50% 75%, rgba(255,255,255,0.08) 75%);
background-size: 76px 76px;
transform: perspective(580px) rotateX(66deg) rotateZ(-2deg);
opacity: 0.55;
filter: blur(0.2px);
z-index: -1;
}
.premium-kicker {
margin: 0;
color: var(--ui-gold);
font-family: var(--ui-font-mono);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.premium-hero-copy {
min-width: 0;
}
.premium-hero h1 {
max-width: 680px;
margin: 8px 0 16px;
color: #f7f0df !important;
font-family: var(--ui-font-serif) !important;
font-size: clamp(42px, 5.3vw, 76px);
line-height: 0.96;
overflow-wrap: break-word;
}
.premium-hero h1::first-line {
color: #f7f0df;
}
.premium-hero-text {
max-width: 570px;
margin: 0;
color: #c9c3b4;
font-size: 15px;
line-height: 1.7;
}
.premium-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.premium-pill-row {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin-top: 24px;
}
.premium-pill-row span {
color: var(--ui-text-2);
font-size: 12px;
}
.premium-pill-row span::before {
content: "◎";
color: var(--ui-gold);
margin-right: 7px;
}
.premium-hero-visual {
min-height: 420px;
position: relative;
display: block;
}
.premium-hero-board {
position: absolute;
right: 4%;
bottom: 4%;
width: min(78%, 520px);
aspect-ratio: 1;
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 0;
transform: perspective(880px) rotateX(58deg) rotateZ(-8deg);
transform-origin: center bottom;
border: 1px solid rgba(218,177,72,0.2);
box-shadow: 0 44px 90px rgba(0,0,0,0.62), 0 0 70px rgba(218,177,72,0.14);
opacity: 0.78;
}
.premium-hero-board span {
background: rgba(218,177,72,0.24);
}
.premium-hero-board span:nth-child(16n+1),
.premium-hero-board span:nth-child(16n+3),
.premium-hero-board span:nth-child(16n+5),
.premium-hero-board span:nth-child(16n+7),
.premium-hero-board span:nth-child(16n+10),
.premium-hero-board span:nth-child(16n+12),
.premium-hero-board span:nth-child(16n+14),
.premium-hero-board span:nth-child(16n+16) {
background: rgba(255,255,255,0.08);
}
.premium-hero-piece {
position: absolute;
right: 26%;
top: 24%;
color: #08080a;
font-size: clamp(150px, 14vw, 240px);
line-height: 1;
text-shadow:
0 1px 0 rgba(255,226,155,0.86),
0 18px 46px rgba(218,177,72,0.36),
0 48px 90px rgba(0,0,0,0.78);
filter: drop-shadow(0 0 26px rgba(218,177,72,0.28));
}
.premium-board-glow,
.premium-hero-visual::before {
content: "";
position: absolute;
width: 58%;
height: 48%;
right: 15%;
top: 25%;
border-radius: 50%;
background: radial-gradient(circle, rgba(218,177,72,0.24), transparent 64%);
filter: blur(26px);
}
.premium-hero-proof {
position: absolute;
width: min(240px, 42%);
padding: 16px;
border-radius: 8px;
background: rgba(13,13,15,0.78);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 24px 70px rgba(0,0,0,0.44);
backdrop-filter: blur(12px);
}
.premium-hero-proof span,
.premium-hero-proof small {
display: block;
color: var(--ui-text-3);
font-size: 11px;
}
.premium-hero-proof strong {
display: block;
color: var(--ui-text);
margin: 5px 0;
font-size: 18px;
}
.premium-hero-proof-eval {
left: 4%;
top: 14%;
}
.premium-hero-proof-eval strong {
color: #f7f0df;
font-size: 34px;
line-height: 1;
}
.premium-hero-proof-coach {
right: 0;
bottom: 14%;
}
.premium-report-sheets {
position: absolute;
left: 11%;
bottom: 18%;
width: 210px;
height: 142px;
border-radius: 8px;
background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.025));
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 28px 70px rgba(0,0,0,0.44);
padding: 18px;
}
.premium-report-sheets span {
display: block;
height: 9px;
margin-bottom: 12px;
border-radius: 999px;
background: rgba(218,177,72,0.55);
}
.premium-report-sheets span:nth-child(2) {
width: 72%;
background: rgba(255,255,255,0.18);
}
.premium-report-sheets span:nth-child(3) {
width: 46%;
background: rgba(255,255,255,0.12);
}
.premium-stats {
display: grid;
grid-template-columns: 1fr;
background: var(--ui-surface);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-md);
margin: 28px auto 0;
max-width: 980px;
overflow: hidden;
}
@media (min-width: 720px) {
.premium-stats {
grid-template-columns: repeat(3, 1fr);
}
}
.premium-stats div {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 16px;
align-items: center;
padding: 22px 28px;
border-bottom: 1px solid var(--ui-border);
}
.premium-stats div:last-child { border-bottom: 0; }
@media (min-width: 720px) {
.premium-stats div {
border-bottom: 0;
border-right: 1px solid var(--ui-border);
}
.premium-stats div:last-child { border-right: 0; }
}
.premium-stats div:last-child {
border: 0;
}
.premium-stat-icon {
grid-row: span 2;
color: var(--ui-gold);
font-size: 30px;
}
.premium-stats strong {
color: var(--ui-text);
font-size: clamp(24px, 3vw, 34px);
line-height: 1;
}
.premium-stats small {
color: var(--ui-text-3);
font-size: 12px;
}
.premium-import-card {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
border-radius: 8px;
padding: 28px;
margin-top: 16px;
}
@media (min-width: 860px) {
.premium-import-card {
grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1fr);
padding: 34px;
}
}
.premium-import-copy h2,
.premium-section-title h1,
.premium-section-title h2,
.premium-section-row h2,
.premium-final-cta h2 {
margin: 8px 0 10px;
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
}
.premium-import-copy h2 {
font-size: clamp(26px, 2.8vw, 38px);
line-height: 1.1;
}
.premium-import-copy p,
.premium-final-cta p {
color: var(--ui-text-3);
line-height: 1.65;
}
.premium-mini-board {
width: min(100%, 420px);
aspect-ratio: 16 / 9;
margin-top: 28px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
padding: 20px;
border-radius: 8px;
background:
radial-gradient(circle at 75% 35%, rgba(218,177,72,0.26), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
border: 1px solid var(--ui-border);
}
.premium-mini-board span {
border-radius: 3px;
background: rgba(218,177,72,0.22);
}
.premium-mini-board span:nth-child(2n) {
background: rgba(255,255,255,0.08);
}
.premium-import-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.premium-tabs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
border-bottom: 1px solid var(--ui-border);
padding-bottom: 12px;
margin-bottom: 4px;
}
.premium-tabs button,
.premium-plan-card button {
min-height: 44px;
border-radius: 4px;
cursor: pointer;
font-weight: 700;
}
.premium-tabs button {
background: transparent;
border: 0;
color: var(--ui-text-3);
}
.premium-tabs button.is-active {
color: var(--ui-gold);
border-bottom: 1px solid var(--ui-gold);
}
.premium-import-form label {
color: var(--ui-text-3);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.premium-import-form input {
min-height: 52px;
border-radius: 6px !important;
padding: 0 16px !important;
}
.premium-import-form ul,
.premium-plan-card ul {
list-style: none;
padding: 0;
margin: 4px 0 8px;
display: grid;
gap: 10px;
color: var(--ui-text-2);
font-size: 13px;
}
.premium-import-form li::before,
.premium-plan-card li::before {
content: "✓";
color: var(--ui-gold);
margin-right: 8px;
}
.premium-full-btn {
width: 100%;
}
.premium-secure-note {
color: var(--ui-text-3);
text-align: center;
font-size: 12px;
margin: 0;
}
.premium-feature-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-top: 16px;
}
@media (min-width: 860px) {
.premium-feature-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.premium-feature-grid article {
border-radius: 8px;
padding: 24px;
}
.premium-feature-grid span {
color: var(--ui-gold);
font-size: 34px;
}
.premium-feature-grid h3,
.premium-plan-card h3,
.premium-preview-copy h2,
.premium-article-grid h3 {
color: var(--ui-text) !important;
margin: 10px 0 8px;
}
.premium-feature-grid p,
.premium-plan-card p,
.premium-preview-copy p,
.premium-article-grid p {
color: var(--ui-text-3);
font-size: 13px;
line-height: 1.6;
margin: 0;
}
.premium-report-preview {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
border-radius: 8px;
padding: 30px;
margin-top: 16px;
background:
radial-gradient(circle at 18% 22%, rgba(218,177,72,0.14), transparent 30%),
linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
}
.premium-difference,
.premium-faq {
margin-top: 28px;
}
@media (min-width: 860px) {
.premium-report-preview {
grid-template-columns: minmax(420px, 1fr) minmax(380px, 1fr);
padding: 32px 40px;
align-items: stretch;
gap: 52px;
}
}
.premium-report-heading h2 {
margin: 6px 0 18px;
font-family: var(--ui-font-serif) !important;
font-size: clamp(26px, 2.8vw, 40px);
line-height: 1.12;
}
.premium-report-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 18px;
}
.premium-report-metrics div {
padding: 12px;
border-radius: 8px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.08);
}
.premium-report-metrics span {
display: block;
color: var(--ui-text-3);
font-size: 11px;
margin-bottom: 5px;
}
.premium-report-metrics strong {
display: block;
color: var(--ui-text);
font-size: 21px;
line-height: 1;
}
.premium-board-shell {
width: min(100%, 390px);
padding: 14px;
border-radius: 10px;
background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 24px 70px rgba(0,0,0,0.38);
}
.premium-board-sample {
width: 100%;
aspect-ratio: 1;
display: grid;
grid-template-columns: repeat(8, 1fr);
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.12);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.premium-board-sample span {
display: grid;
place-items: center;
aspect-ratio: 1;
background: #759061;
position: relative;
}
.premium-board-sample span:nth-child(16n+1),
.premium-board-sample span:nth-child(16n+3),
.premium-board-sample span:nth-child(16n+5),
.premium-board-sample span:nth-child(16n+7),
.premium-board-sample span:nth-child(16n+10),
.premium-board-sample span:nth-child(16n+12),
.premium-board-sample span:nth-child(16n+14),
.premium-board-sample span:nth-child(16n+16) {
background: #d9e3c5;
}
.premium-board-sample .piece::before {
content: "";
width: 52%;
height: 52%;
border-radius: 50% 50% 42% 42%;
background: linear-gradient(180deg, #f8e4ae, #c79536);
border: 1px solid rgba(63,38,7,0.24);
box-shadow: 0 4px 8px rgba(0,0,0,0.22);
}
.premium-board-sample .piece.dark::before {
background: linear-gradient(180deg, #1c1c1f, #050506);
border-color: rgba(246,202,104,0.34);
}
.premium-board-sample .piece.pawn::before {
width: 38%;
height: 38%;
border-radius: 50%;
}
.premium-board-sample .piece.major::before {
border-radius: 8px 8px 48% 48%;
}
.premium-board-sample .piece.king::after,
.premium-board-sample .piece.queen::after {
content: "";
position: absolute;
top: 20%;
width: 22%;
height: 4px;
border-radius: 999px;
background: currentColor;
color: rgba(40,26,8,0.75);
}
.premium-board-sample .piece.dark.king::after,
.premium-board-sample .piece.dark.queen::after {
color: rgba(246,202,104,0.72);
}
.premium-move-list {
width: min(100%, 390px);
display: grid;
gap: 8px;
margin-top: 14px;
}
.premium-move-list span {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-radius: 7px;
background: rgba(255,255,255,0.026);
border: 1px solid rgba(255,255,255,0.06);
color: var(--ui-text-3);
font-size: 12px;
}
.premium-move-list strong {
color: var(--ui-gold);
}
.premium-preview-copy {
align-self: center;
}
.premium-preview-copy a,
.premium-section-row a {
color: var(--ui-gold);
text-decoration: none;
font-weight: 700;
}
.premium-work-box {
display: grid;
gap: 8px;
margin: 20px 0;
padding: 18px;
border-radius: 8px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--ui-border);
}
.premium-report-callout {
display: grid;
gap: 6px;
margin: 0 0 20px;
padding: 16px;
border-radius: 8px;
background: rgba(218,177,72,0.08);
border: 1px solid rgba(218,177,72,0.18);
}
.premium-report-callout span {
color: var(--ui-gold);
font-family: var(--ui-font-mono);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.premium-report-callout strong {
color: var(--ui-text);
font-size: 14px;
line-height: 1.55;
}
.premium-report-link {
display: inline-flex;
align-items: center;
min-height: 40px;
}
.premium-work-box strong {
color: var(--ui-text);
}
.premium-work-box span {
color: var(--ui-text-3);
font-size: 13px;
}
.premium-work-box span::before {
content: "•";
color: var(--ui-gold);
margin-right: 8px;
}
.premium-pricing {
margin-top: 28px;
}
.premium-section-title {
text-align: center;
}
.premium-section-title .premium-kicker {
margin-bottom: 8px;
}
.premium-section-title h1,
.premium-section-title h2 {
font-size: clamp(24px, 2.8vw, 36px);
line-height: 1.15;
}
.premium-plan-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
margin-top: 16px;
}
@media (min-width: 860px) {
.premium-plan-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.premium-plan-card {
position: relative;
border-radius: 8px;
padding: 26px;
}
.premium-plan-card.is-featured {
border-color: rgba(218,177,72,0.58);
box-shadow: 0 24px 70px rgba(218,177,72,0.1);
}
.premium-plan-badge {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(135deg, #f3d17a, #c8922e);
color: #0b0803;
border-radius: 999px;
padding: 4px 18px;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.premium-plan-card strong {
display: block;
color: var(--ui-text);
font-size: 38px;
margin: 18px 0;
}
.premium-plan-card button {
width: 100%;
border: 1px solid rgba(218,177,72,0.45);
background: rgba(218,177,72,0.08);
color: var(--ui-gold);
}
.premium-plan-card.is-featured button {
background: linear-gradient(135deg, #f3d17a, #c8922e);
color: #0b0803;
}
.premium-faq-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-top: 16px;
}
@media (min-width: 760px) {
.premium-faq-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.premium-faq-grid article {
border-radius: 8px;
padding: 24px;
}
.premium-faq-grid h3 {
color: var(--ui-text) !important;
margin: 0 0 10px;
}
.premium-faq-grid p {
color: var(--ui-text-3);
font-size: 13px;
line-height: 1.65;
margin: 0;
}
.premium-articles {
margin-top: 32px;
}
.premium-section-row {
display: flex;
align-items: end;
justify-content: space-between;
gap: 18px;
margin-bottom: 16px;
}
.premium-section-row h2 {
margin: 0;
font-size: clamp(24px, 3vw, 32px);
}
.premium-article-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 860px) {
.premium-article-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.premium-article-grid a {
display: block;
min-height: 138px;
border-radius: 8px;
padding: 20px;
text-decoration: none;
opacity: 0.82;
}
.premium-article-grid span {
color: var(--ui-gold);
font-family: var(--ui-font-mono);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.premium-final-cta {
display: grid;
gap: 20px;
align-items: center;
border-radius: 8px;
padding: 26px;
margin-top: 24px;
}
@media (min-width: 760px) {
.premium-final-cta {
grid-template-columns: minmax(0, 1fr) auto;
}
}
.premium-final-cta > div {
display: flex;
gap: 18px;
align-items: center;
}
.premium-final-cta > div > span {
width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: 8px;
color: var(--ui-gold);
background: rgba(218,177,72,0.08);
border: 1px solid rgba(218,177,72,0.22);
font-size: 32px;
}
.premium-final-cta h2,
.premium-final-cta p {
margin: 0;
}
#appFooter {
background: #08080a !important;
border-top: 1px solid var(--ui-border) !important;
color: var(--ui-text) !important;
}
@media (max-width: 640px) {
.premium-access-card {
grid-template-columns: auto minmax(0, 1fr);
}
.premium-access-card .premium-gold-btn {
grid-column: 1 / -1;
width: 100%;
}
.premium-hero-actions .premium-gold-btn,
.premium-hero-actions .premium-ghost-btn {
width: 100%;
}
.premium-hero {
padding: 30px 18px;
min-height: auto;
}
.premium-hero-visual {
min-height: 260px;
margin-top: 20px;
}
.premium-hero-board {
right: -8%;
bottom: 0;
width: 92%;
}
.premium-hero-piece {
right: 28%;
top: 20%;
font-size: 132px;
}
.premium-hero-proof,
.premium-report-sheets {
display: none;
}
.premium-import-card,
.premium-report-preview {
padding: 20px;
}
.premium-report-metrics {
grid-template-columns: 1fr;
}
.premium-section-row {
align-items: flex-start;
flex-direction: column;
}
}
/* ── Engine status bar ───────────────────────────────────────────── */
.engine-status {
background: rgba(255,255,255,0.015) !important;
border: 1px solid var(--ui-border) !important;
color: var(--ui-text-3) !important;
font-family: var(--ui-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.04em !important;
}
/* ── Authentication modal (if visible) ───────────────────────────── */
#authModal {
background: rgba(0,0,0,0.7) !important;
backdrop-filter: blur(6px) !important;
}
#authModal > div,
.auth-modal-content {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 20px !important;
box-shadow: 0 32px 80px rgba(0,0,0,0.6) !important;
}
/* ── Sections / generic white-background overrides ───────────────── */
.section {
background: transparent !important;
}
/* Info icon */
.info-icon {
color: var(--ui-text-3) !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid var(--ui-border) !important;
border-radius: 50% !important;
}
/* ── Generic deep-color text overrides (scoped to content area) ───── */
.ui-page-content [style*="color: #1a2535"] { color: var(--ui-text) !important; }
.ui-page-content [style*="color: #1976D2"] { color: var(--ui-text) !important; }
.ui-page-content [style*="color: #2176ae"] { color: var(--ui-gold) !important; }
.ui-page-content [style*="background: #d0e9f9"] {
background: rgba(255,193,7,0.1) !important;
color: var(--ui-gold) !important;
}
/* ── App shell permanence and premium scale ───────────────────────── */
@media (min-width: 1024px) {
:root {
--ui-sidebar-w: 224px;
}
.app-layout {
display: block !important;
}
.ui-sidebar {
position: fixed !important;
inset: 0 auto 0 0 !important;
z-index: 80 !important;
width: var(--ui-sidebar-w) !important;
}
.ui-main-area {
margin-left: var(--ui-sidebar-w) !important;
}
.ui-sidebar-link {
font-size: 14px !important;
padding: 12px 14px !important;
}
.ui-sidebar-link svg {
width: 16px !important;
height: 16px !important;
}
.ui-sidebar-logo {
font-size: 20px !important;
}
}
/* ── Home free check and premium board polish ─────────────────────── */
.premium-free-next-step {
display: grid;
gap: 6px;
padding: 18px;
border-radius: 8px;
background: rgba(255,255,255,0.032);
border: 1px solid rgba(255,255,255,0.08);
}
.premium-free-next-step strong {
color: var(--ui-text);
font-size: 15px;
}
.premium-free-next-step span {
color: var(--ui-text-3);
font-size: 13px;
line-height: 1.55;
}
.premium-mini-board {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 70% 28%, rgba(218,177,72,0.24), transparent 30%),
linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)) !important;
}
.premium-mini-board::before,
.premium-mini-board::after {
content: "";
position: absolute;
bottom: 16%;
width: 46px;
height: 70px;
border-radius: 999px 999px 8px 8px;
background: linear-gradient(180deg, #f4d17a, #9a6b1f);
box-shadow: 0 14px 30px rgba(0,0,0,0.42);
}
.premium-mini-board::before {
left: 32%;
}
.premium-mini-board::after {
right: 24%;
transform: scale(0.82);
background: linear-gradient(180deg, #19191c, #070708);
border: 1px solid rgba(218,177,72,0.34);
}
.premium-mini-board span {
border-radius: 4px !important;
}
/* ── Premium report surface shared by generated and saved reports ─── */
.results-container.active,
body:has(#analysisContent) #analysisContent {
color: var(--ui-text);
}
body:has(#analysisContent) .main-content {
max-width: 1480px !important;
margin: 0 auto !important;
padding: 28px 36px 64px !important;
}
body:has(#analysisContent) .section {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
body:has(#analysisContent) .section > div:first-child .btn {
background: transparent !important;
color: var(--ui-text-2) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
box-shadow: none !important;
}
.results-container.active {
max-width: 1480px !important;
margin: 0 auto 64px !important;
padding: 22px 0 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
.results-container.active > h2,
body:has(#analysisContent) .analysis-meta h2 {
color: #f7f0df !important;
font-family: var(--ui-font-serif) !important;
font-size: clamp(34px, 4vw, 56px) !important;
line-height: 1.02 !important;
margin: 0 0 10px !important;
}
.results-actions {
justify-content: flex-end !important;
margin: 0 0 18px !important;
}
.pdf-btn,
#downloadPdfBtn,
#downloadPdfBtnMobile {
background: rgba(218,177,72,0.12) !important;
color: var(--ui-gold) !important;
border: 1px solid rgba(218,177,72,0.48) !important;
border-radius: 6px !important;
box-shadow: none !important;
}
.results-container.active .split-screen-container,
body:has(#analysisContent) .desktop-layout .split-screen-container {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(340px, 430px) !important;
gap: 28px !important;
align-items: start !important;
margin: 18px 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.results-container.active .analysis-section,
body:has(#analysisContent) .analysis-section {
min-width: 0 !important;
order: 1 !important;
display: flex !important;
flex-direction: column !important;
}
.results-container.active .chessboard-section,
body:has(#analysisContent) .chessboard-section {
order: 2 !important;
position: sticky !important;
top: 84px !important;
min-width: 0 !important;
max-width: none !important;
padding: 18px !important;
border-radius: 8px !important;
background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)) !important;
border: 1px solid rgba(255,255,255,0.09) !important;
box-shadow: 0 24px 70px rgba(0,0,0,0.34) !important;
}
.results-container.active .analysis-section > div:first-child,
body:has(#analysisContent) .analysis-section > div:first-child {
order: -1 !important; /* evaluation graph sits ABOVE the report (top of the left column) */
margin: 0 0 18px !important;
padding: 18px !important;
border-radius: 8px !important;
background: rgba(255,255,255,0.026) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
}
.results-container.active .analysis-section > h3,
body:has(#analysisContent) .analysis-section > h3 {
order: 1 !important;
color: var(--ui-gold) !important;
font-family: var(--ui-font-mono) !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
margin: 0 0 12px !important;
}
#claudeReport,
body:has(#analysisContent) .analysis-report {
order: 2 !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
color: #d7d1c2 !important;
font-family: var(--ui-font-sans) !important;
font-size: 16px !important;
line-height: 1.75 !important;
}
#claudeReport h1,
#claudeReport h2,
#claudeReport h3,
#claudeReport h4,
body:has(#analysisContent) .analysis-report h1,
body:has(#analysisContent) .analysis-report h2,
body:has(#analysisContent) .analysis-report h3,
body:has(#analysisContent) .analysis-report h4 {
color: #f7f0df !important;
font-family: var(--ui-font-serif) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
#claudeReport h2,
body:has(#analysisContent) .analysis-report h2 {
font-size: clamp(26px, 2.4vw, 36px) !important;
margin-top: 28px !important;
}
#claudeReport p,
#claudeReport li,
body:has(#analysisContent) .analysis-report p,
body:has(#analysisContent) .analysis-report li {
color: #d7d1c2 !important;
}
#claudeReport blockquote,
body:has(#analysisContent) .analysis-report blockquote {
margin: 26px 0 !important;
padding: 18px 22px !important;
border: 1px solid rgba(218,177,72,0.34) !important;
border-left: 3px solid var(--ui-gold-dim) !important;
border-radius: 8px !important;
background: rgba(218,177,72,0.065) !important;
color: #f0e7d2 !important;
}
.clickable-move,
.clickable-move-mobile,
#claudeReport code,
body:has(#analysisContent) .analysis-report code {
color: var(--ui-gold) !important;
background: rgba(218,177,72,0.12) !important;
border: 1px solid rgba(218,177,72,0.22) !important;
border-radius: 5px !important;
padding: 1px 5px !important;
text-decoration: none !important;
}
#evaluationChart,
.chart-container canvas {
background: #0b0b0d !important;
border: 1px solid rgba(255,255,255,0.08) !important;
}
.chessboard-section h3,
.chessboard-section #moveInfo,
.chessboard-section #moveInfoMobile {
color: var(--ui-text) !important;
}
.chessboard-section #moveInfo,
.chessboard-section #moveInfoMobile {
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
}
.white-1e1d7 {
background-color: #ead8b7 !important;
}
.black-3c85d {
background-color: #8f6840 !important;
}
.chessboard-section img {
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.36));
}
.theme-selector,
.theme-option,
.theme-option-mini {
background: rgba(255,255,255,0.03) !important;
border-color: rgba(255,255,255,0.08) !important;
color: var(--ui-text-2) !important;
}
.move-controls .btn,
#firstMoveBtn,
#prevMoveBtn,
#nextMoveBtn,
#lastMoveBtn,
#flipBoardBtn,
#flipBoardBtnMobile,
#prevMoveBtnMobile,
#nextMoveBtnMobile,
#prevSectionBtnTop,
#nextSectionBtnTop,
#prevSectionBtnBottom,
#nextSectionBtnBottom {
background: rgba(218,177,72,0.1) !important;
color: var(--ui-gold) !important;
border: 1px solid rgba(218,177,72,0.28) !important;
}
.analysis-meta {
background: transparent !important;
padding: 0 0 20px !important;
border-radius: 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
box-shadow: none !important;
}
#pgnContainer {
background: var(--ui-surface) !important;
border: 1px solid rgba(255,255,255,0.09) !important;
}
#pgnPre {
background: #0b0b0d !important;
color: var(--ui-text-2) !important;
}
@media (max-width: 767px) {
.results-container.active .split-screen-container,
body:has(#analysisContent) .desktop-layout .split-screen-container {
display: flex !important;
grid-template-columns: none !important;
}
}
/* ── Analyse setup desktop compaction ─────────────────────────────── */
@media (min-width: 1024px) {
#uploadSection.analysis-setup {
gap: 14px !important;
/* Grows with the viewport on large screens instead of staying a small
1080px island; still ~content-width at 1080px screens (unchanged feel). */
width: min(100%, clamp(1040px, 78vw, 1500px)) !important;
max-width: 1500px !important;
padding: 18px 28px 36px !important;
}
.analysis-setup-header {
gap: 5px !important;
}
.analysis-setup-header h1 {
font-size: 40px !important;
}
.analysis-setup-header p {
font-size: 13px !important;
line-height: 1.45 !important;
}
.analysis-stepper {
width: min(100%, 620px) !important;
}
.analysis-step span {
width: 34px !important;
height: 34px !important;
}
.analysis-step strong {
font-size: 9px !important;
}
#uploadSection .section,
#uploadSection .pgn-section > .section,
#uploadSection .settings-section > .section {
padding: 24px !important;
}
}
/* ── Saved report premium composition ─────────────────────────────── */
body:has(#analysisContent) {
background:
radial-gradient(circle at 84% 14%, rgba(218,177,72,0.1), transparent 32%),
linear-gradient(180deg, #0a0a0c 0%, #050506 100%) !important;
}
body:has(#analysisContent) .ui-page-header {
position: sticky;
top: 0;
z-index: 55;
background: rgba(8,8,10,0.88) !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
backdrop-filter: blur(18px);
}
body:has(#analysisContent) .ui-page-header-title {
color: #f7f0df !important;
font-family: var(--ui-font-serif) !important;
font-size: 20px !important;
font-weight: 600 !important;
}
body:has(#analysisContent) .ui-page-header-sub {
color: var(--ui-text-3) !important;
}
body:has(#analysisContent) .ui-page-content {
background:
linear-gradient(90deg, rgba(255,255,255,0.018), transparent 18%),
radial-gradient(circle at 72% 18%, rgba(218,177,72,0.08), transparent 34%) !important;
}
body:has(#analysisContent) .main-content > .section > div:first-child {
margin-bottom: 18px !important;
}
body:has(#analysisContent) .main-content > .section > div:first-child .btn {
padding: 13px 20px !important;
border-radius: 8px !important;
font-size: 15px !important;
font-weight: 700 !important;
}
body:has(#analysisContent) .premium-report-meta {
display: grid !important;
gap: 18px !important;
margin-bottom: 26px !important;
padding: 0 0 24px !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.premium-report-topline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 18px;
color: var(--ui-text-3);
font-size: 13px;
}
.premium-report-topline span + span {
position: relative;
}
.premium-report-topline span + span::before {
content: "";
position: absolute;
left: -10px;
top: 50%;
width: 1px;
height: 14px;
transform: translateY(-50%);
background: rgba(255,255,255,0.16);
}
.premium-report-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.premium-report-kicker {
margin: 0 0 8px !important;
color: var(--ui-gold) !important;
font-family: var(--ui-font-mono);
font-size: 11px !important;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
body:has(#analysisContent) .premium-report-title-row h1,
body:has(#analysisContent) .premium-report-title-row h2 {
margin: 0 !important;
color: #f7f0df !important;
font-family: var(--ui-font-serif) !important;
font-size: clamp(38px, 4vw, 62px) !important;
font-weight: 500 !important;
line-height: 1.02 !important;
}
.premium-report-subtitle {
margin: 10px 0 0 !important;
color: var(--ui-text-3) !important;
font-size: 15px !important;
}
.premium-report-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.premium-report-actions .btn {
min-width: 132px;
padding: 11px 16px !important;
border-radius: 7px !important;
font-size: 13px !important;
font-weight: 800 !important;
}
.premium-report-secondary-action {
background: rgba(255,255,255,0.035) !important;
color: var(--ui-text-3) !important;
border-color: rgba(255,255,255,0.12) !important;
opacity: 0.8 !important;
}
.premium-report-stat-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border: 1px solid rgba(255,255,255,0.085);
border-radius: 8px;
background: rgba(255,255,255,0.025);
overflow: hidden;
}
.premium-report-stat-row > div {
padding: 16px 18px;
display: grid;
gap: 6px;
border-right: 1px solid rgba(255,255,255,0.08);
}
.premium-report-stat-row > div:last-child {
border-right: 0;
}
.premium-report-stat-row span,
.premium-report-side-cards span {
color: var(--ui-gold);
font-family: var(--ui-font-mono);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.premium-report-stat-row strong {
color: var(--ui-text);
font-size: 18px;
font-weight: 700;
}
body:has(#analysisContent) .analysis-report > h1:first-child,
.results-container.active #claudeReport > h1:first-child {
display: none !important;
}
body:has(#analysisContent) .desktop-layout .chessboard-section {
display: grid !important;
gap: 14px !important;
}
body:has(#analysisContent) .desktop-layout .chessboard-section #chessboard {
overflow: hidden;
border-radius: 6px;
border: 1px solid rgba(218,177,72,0.16);
box-shadow: 0 18px 42px rgba(0,0,0,0.34);
}
.premium-report-side-cards {
display: grid;
gap: 12px;
margin-top: 4px;
}
.premium-report-side-cards article {
display: grid;
gap: 8px;
padding: 18px;
border-radius: 8px;
background:
radial-gradient(circle at 14% 14%, rgba(218,177,72,0.13), transparent 30%),
rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.085);
}
.premium-report-side-cards strong {
color: #f7f0df;
font-family: var(--ui-font-serif);
font-size: 30px;
font-weight: 500;
line-height: 1;
}
.premium-report-side-cards p {
margin: 0;
color: var(--ui-text-3);
font-size: 13px;
line-height: 1.6;
}
.results-container.active .chessboard-section,
body:has(#analysisContent) .desktop-layout .chessboard-section {
max-height: calc(100vh - 104px) !important;
overflow-y: auto !important;
scrollbar-width: thin;
scrollbar-color: rgba(218,177,72,0.45) rgba(255,255,255,0.04);
}
.premium-side-graph {
order: -2 !important;
margin: 0 0 2px !important;
padding: 12px !important;
border-radius: 8px !important;
background: rgba(255,255,255,0.028) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
}
.premium-side-graph h3 {
margin: 0 0 8px !important;
color: var(--ui-gold) !important;
font-family: var(--ui-font-mono) !important;
font-size: 10px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
.premium-side-graph .chart-container {
height: 150px !important;
margin-top: 6px !important;
}
.premium-side-graph #evaluationChart {
height: 150px !important;
background: #0b0b0d !important;
}
.results-container.active .chessboard-section #chessboard,
body:has(#analysisContent) .desktop-layout .chessboard-section #chessboard {
width: min(100%, 360px) !important;
margin: 0 auto !important;
}
.results-container.active .move-controls,
body:has(#analysisContent) .move-controls {
gap: 6px !important;
}
.results-container.active .move-controls button,
body:has(#analysisContent) .move-controls button {
padding: 8px 9px !important;
min-height: 34px !important;
font-size: 11px !important;
}
.results-container.active .theme-selector,
body:has(#analysisContent) .theme-selector {
padding: 6px !important;
margin: 4px 0 0 !important;
}
.results-container.active .theme-option,
body:has(#analysisContent) .theme-option {
padding: 5px 6px !important;
font-size: 10px !important;
}
.premium-report-side-cards article {
padding: 14px !important;
}
.premium-report-side-cards strong {
font-size: 24px !important;
}
/* ── Correction pass: home conversion modules ─────────────────────── */
.premium-import-card {
grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.72fr) !important;
gap: 24px !important;
padding: 26px !important;
align-items: stretch !important;
}
.premium-import-copy {
min-height: 0 !important;
}
.premium-import-copy h2 {
font-size: clamp(24px, 2.3vw, 34px) !important;
line-height: 1.08 !important;
}
.premium-import-copy p {
max-width: 56ch !important;
}
.premium-free-visual {
width: min(100%, 430px);
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
margin-top: 18px;
border-radius: 8px;
border: 1px solid rgba(218,177,72,0.18);
box-shadow: 0 22px 60px rgba(0,0,0,0.36);
}
.premium-import-form {
padding: 20px !important;
align-self: center;
}
.premium-import-form ul {
margin: 4px 0 0 !important;
}
.premium-sample-board-real {
width: min(100%, 390px);
aspect-ratio: 1;
margin: 0 auto;
}
.premium-sample-board-real .board-b72b1 {
border: 0 !important;
box-shadow: none !important;
}
.premium-sample-board-real .white-1e1d7 {
background-color: #ead8b7 !important;
}
.premium-sample-board-real .black-3c85d {
background-color: #8f6840 !important;
}
.premium-plan-grid-paid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
max-width: 900px;
margin-inline: auto;
}
.premium-price-note,
.premium-plan-footnote,
.premium-trial-note {
margin: -8px 0 14px !important;
color: var(--ui-text-3) !important;
font-size: 12px !important;
line-height: 1.45 !important;
}
.premium-trial-note {
width: fit-content;
padding: 5px 10px;
border-radius: 999px;
background: rgba(218,177,72,0.12);
border: 1px solid rgba(218,177,72,0.24);
color: var(--ui-gold) !important;
}
.premium-plan-card #featSub0sub {
color: var(--ui-text-3);
font-size: 12px;
}
.premium-faq-list {
display: grid;
gap: 10px;
max-width: 980px;
margin: 0 auto;
}
.premium-faq-list details {
border: 1px solid rgba(255,255,255,0.085);
border-radius: 8px;
background: rgba(255,255,255,0.028);
overflow: hidden;
}
.premium-faq-list summary {
cursor: pointer;
list-style: none;
padding: 16px 18px;
color: var(--ui-text);
font-weight: 700;
}
.premium-faq-list summary::-webkit-details-marker {
display: none;
}
.premium-faq-list summary::after {
content: "+";
float: right;
color: var(--ui-gold);
}
.premium-faq-list details[open] summary::after {
content: "-";
}
.premium-faq-list p {
margin: 0;
padding: 0 18px 18px;
color: var(--ui-text-3);
line-height: 1.65;
}
.premium-faq-list a {
color: var(--ui-gold);
}
@media (max-width: 900px) {
.premium-import-card,
.premium-plan-grid-paid {
grid-template-columns: 1fr !important;
}
.premium-free-visual {
max-width: 100%;
}
}
/* ── Analyses, contact polish ─────────────────────────────────────── */
body:has(#analysesGrid) .main-content,
body:has(.contact-section) .main-content {
max-width: 1220px !important;
margin: 0 auto !important;
padding: 34px !important;
}
/* Account + Chess Profile: match the Home page content width/alignment
(Home uses .premium-landing max-width:1420 inside a 40/56px-padded
main-content). Keeps these pages visually consistent with Home. */
body:has(#profileForm) .main-content,
body:has(.hc-page) .main-content {
max-width: 1420px !important;
margin: 0 auto !important;
}
@media (min-width: 1024px) {
body:has(#profileForm) .main-content,
body:has(.hc-page) .main-content {
padding: 24px 40px 56px !important;
}
}
@media (min-width: 1440px) {
body:has(#profileForm) .main-content,
body:has(.hc-page) .main-content {
padding-left: 56px !important;
padding-right: 56px !important;
}
}
body:has(#analysesGrid) .section,
body:has(#profileForm) .account-section,
body:has(.contact-section) .contact-section {
background:
radial-gradient(circle at 88% 8%, rgba(218,177,72,0.08), transparent 30%),
linear-gradient(180deg, rgba(255,255,255,0.048), rgba(255,255,255,0.018)) !important;
border: 1px solid rgba(255,255,255,0.085) !important;
border-radius: 10px !important;
box-shadow: 0 28px 80px rgba(0,0,0,0.28) !important;
}
body:has(#analysesGrid) .section > h1,
body:has(#analysesGrid) .section > h2,
body:has(#profileForm) .account-section h3,
body:has(.contact-section) .contact-section h2,
body:has(.contact-section) .faq-header-desktop {
color: #f7f0df !important;
font-family: var(--ui-font-serif) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
.analyses-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
gap: 18px !important;
}
.analysis-card {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)) !important;
border: 1px solid rgba(255,255,255,0.09) !important;
border-radius: 9px !important;
box-shadow: none !important;
padding: 20px !important;
}
.analysis-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg, var(--ui-gold), transparent);
}
.analysis-card:hover {
transform: translateY(-2px) !important;
border-color: rgba(218,177,72,0.3) !important;
box-shadow: 0 22px 60px rgba(0,0,0,0.28) !important;
}
.analysis-card-header {
align-items: flex-start !important;
gap: 16px !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.analysis-card-title {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
font-size: 21px !important;
line-height: 1.15 !important;
}
.analysis-card-date,
.analysis-card-info {
color: var(--ui-text-3) !important;
}
.analysis-card-info strong {
color: var(--ui-text-2) !important;
}
.analysis-card .btn {
background: rgba(218,177,72,0.12) !important;
border: 1px solid rgba(218,177,72,0.32) !important;
color: var(--ui-gold) !important;
box-shadow: none !important;
}
.empty-state,
.loading-spinner {
background: rgba(255,255,255,0.026) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 9px !important;
color: var(--ui-text-3) !important;
}
.empty-state h3 {
color: var(--ui-text) !important;
}
.info-row {
background: rgba(255,255,255,0.028) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 8px !important;
}
.info-label,
.stat-label {
color: var(--ui-text-3) !important;
}
.info-value,
.stat-number {
color: var(--ui-text) !important;
}
.contact-info,
.contact-section .faq-section {
background: rgba(255,255,255,0.026) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 9px !important;
}
.contact-item {
color: var(--ui-text-2) !important;
}
.contact-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 42px !important;
min-width: 42px !important;
height: 30px;
margin-right: 18px !important;
border-radius: 999px;
background: rgba(218,177,72,0.11);
border: 1px solid rgba(218,177,72,0.28);
color: var(--ui-gold) !important;
font-family: var(--ui-font-sans) !important;
font-size: 10px !important;
font-weight: 800;
letter-spacing: 0 !important;
text-transform: uppercase;
}
.contact-item span[style*="color: #7f8c8d"] {
color: var(--ui-text-3) !important;
}
.contact-section .faq-header-mobile,
.contact-section .faq-question {
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
color: var(--ui-text) !important;
}
.contact-section .faq-answer {
background: rgba(255,255,255,0.025) !important;
color: var(--ui-text-3) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
}
.contact-section .faq-toggle,
.contact-section .faq-toggle-icon-mobile {
color: var(--ui-gold) !important;
}
@media (max-width: 860px) {
body:has(#analysesGrid) .main-content,
body:has(.contact-section) .main-content {
padding: 18px !important;
}
}
/* ── Dedicated pricing page ──────────────────────────────────────── */
.pricing-page {
min-height: calc(100vh - 72px);
padding: 34px !important;
background:
radial-gradient(circle at 78% 12%, rgba(218,177,72,0.1), transparent 34%),
linear-gradient(180deg, #09090b 0%, #050506 100%) !important;
}
.pricing-hero {
max-width: 900px;
margin: 0 auto 26px;
text-align: center;
}
.pricing-hero h1 {
margin: 0;
color: #f7f0df !important;
font-family: var(--ui-font-serif) !important;
font-size: clamp(40px, 5vw, 68px) !important;
font-weight: 500 !important;
line-height: 1.02 !important;
}
.pricing-hero p:last-child {
margin: 14px auto 0;
max-width: 720px;
color: var(--ui-text-3);
font-size: 15px;
line-height: 1.65;
}
.pricing-page .premium-pricing {
margin-top: 0 !important;
}
.pricing-page .premium-plan-card strong,
.premium-pricing .premium-plan-card #oneOffPriceMain,
.premium-pricing .premium-plan-card #subPriceMain {
color: #f7f0df !important;
}
.pricing-page .premium-plan-card button,
.premium-pricing .premium-plan-card #paymentButtonOneOff,
.premium-pricing .premium-plan-card #paymentButtonSubscription {
background: linear-gradient(135deg, #f3d17a, #c8922e) !important;
color: #0b0803 !important;
border: 1px solid rgba(255,214,118,0.45) !important;
box-shadow: 0 16px 34px rgba(218,177,72,0.16) !important;
}
.pricing-page .premium-plan-badge,
.premium-pricing .premium-plan-badge,
.premium-pricing #launchOfferBadge,
.premium-pricing #bestValueBadge {
background: rgba(218,177,72,0.13) !important;
border-color: rgba(218,177,72,0.42) !important;
color: var(--ui-gold) !important;
}
.pricing-page .premium-price-note s,
.premium-pricing .premium-price-note s {
color: #e88484 !important;
}
.pricing-auth-modal {
position: relative;
width: min(100%, 420px);
padding: 30px;
border-radius: 10px;
background: #111113;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 32px 90px rgba(0,0,0,0.5);
text-align: center;
}
.pricing-auth-modal > button {
position: absolute;
top: 10px;
right: 14px;
border: 0;
background: transparent;
color: var(--ui-text-3);
font-size: 24px;
cursor: pointer;
}
.pricing-auth-modal h3 {
margin: 0 0 10px;
color: #f7f0df;
font-family: var(--ui-font-serif);
font-size: 28px;
font-weight: 500;
}
.pricing-auth-modal p {
margin: 0 0 22px;
color: var(--ui-text-3);
line-height: 1.6;
}
.pricing-auth-modal div {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
body:has(#analysisContent) .premium-report-utility {
max-width: 320px;
margin: 20px 0 0 auto;
}
body:has(#analysisContent) .premium-report-utility #togglePgnBtn {
background: rgba(255,255,255,0.035) !important;
color: var(--ui-text-2) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
box-shadow: none !important;
}
body:has(#analysisContent) #cookieConsentBanner,
body:has(#analysisContent) .cookie-consent-banner {
background: rgba(9,9,11,0.94) !important;
border-top: 1px solid rgba(218,177,72,0.22) !important;
color: var(--ui-text-2) !important;
box-shadow: 0 -24px 60px rgba(0,0,0,0.36) !important;
}
@media (max-width: 1023px) {
.premium-report-title-row {
flex-direction: column;
}
.premium-report-actions {
justify-content: flex-start;
}
.premium-report-stat-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
body:has(#analysisContent) .main-content {
padding: 16px 14px 96px !important;
}
.premium-report-stat-row {
grid-template-columns: 1fr;
}
.premium-report-stat-row > div {
border-right: 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.premium-report-stat-row > div:last-child {
border-bottom: 0;
}
}
/* Public/auth/legal design-system pass */
body:has(.login-page),
body:has(.auth-container),
body:has(.legal-content),
body:has(.legal-container),
body:has(.site-header),
body:has(.nav-logo),
body:has(.header-inner),
body:has(.themes-grid),
body:has(.checkmark) {
min-height: 100vh;
background:
radial-gradient(circle at 78% 10%, rgba(218,177,72,0.15), transparent 34%),
radial-gradient(circle at 18% 6%, rgba(255,255,255,0.055), transparent 28%),
linear-gradient(180deg, #09090a 0%, #050506 100%) !important;
color: var(--ui-text) !important;
font-family: var(--ui-font-sans) !important;
}
body:has(.login-page) *,
body:has(.auth-container) *,
body:has(.legal-content) *,
body:has(.legal-container) *,
body:has(.site-header) *,
body:has(.nav-logo) *,
body:has(.header-inner) *,
body:has(.themes-grid) *,
body:has(.checkmark) * {
letter-spacing: 0 !important;
}
body:has(.legal-content) .container,
body:has(.auth-container) .container,
body:has(.site-header) .container,
body:has(.themes-grid) .container {
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
color: var(--ui-text) !important;
}
body:has(.login-page) .login-header,
body:has(.auth-container) .header,
body:has(.legal-content) .header,
body:has(.site-header) .site-header,
body:has(.nav-logo) header,
body:has(.header-inner) header {
background: rgba(8,8,9,0.92) !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: 0 18px 50px rgba(0,0,0,0.25) !important;
}
body:has(.login-page) .login-header-logo span,
body:has(.auth-container) .header span,
body:has(.legal-content) .header h1,
body:has(.legal-content) .header a,
body:has(.site-header) .logo-text,
body:has(.site-header) .logo-text span,
body:has(.nav-logo) .nav-logo,
body:has(.header-inner) .header-logo,
body:has(.header-inner) .logo-link {
color: var(--ui-gold) !important;
font-family: var(--ui-font-serif) !important;
font-weight: 600 !important;
}
body:has(.login-page) .login-header-nav a,
body:has(.site-header) nav a,
body:has(.nav-logo) nav a,
body:has(.header-inner) nav a {
color: var(--ui-text-3) !important;
}
body:has(.login-page) .login-header-nav a:hover,
body:has(.site-header) nav a:hover,
body:has(.nav-logo) nav a:hover,
body:has(.header-inner) nav a:hover {
color: var(--ui-gold) !important;
}
body:has(.login-page) .login-body,
body:has(.auth-container) .container {
min-height: calc(100vh - 70px);
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 42px 18px !important;
}
body:has(.login-page) .login-card,
body:has(.auth-container) .auth-container,
body:has(.login-page) .context-banner {
background:
linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
rgba(14,14,16,0.94) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: 10px !important;
box-shadow: 0 30px 90px rgba(0,0,0,0.45) !important;
}
body:has(.login-page) .login-card-title,
body:has(.auth-container) .auth-container h1,
body:has(.auth-container) .auth-container h2 {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
font-size: clamp(27px, 3vw, 38px) !important;
font-weight: 500 !important;
}
body:has(.login-page) .login-card-sub,
body:has(.login-page) .signup-row,
body:has(.login-page) .login-row,
body:has(.login-page) .login-footer-note,
body:has(.auth-container) .info-text,
body:has(.auth-container) .password-hint,
body:has(.auth-container) .auth-links {
color: var(--ui-text-3) !important;
}
body:has(.login-page) .field label,
body:has(.auth-container) .form-group label {
color: var(--ui-text-3) !important;
text-transform: none !important;
font-size: 13px !important;
font-weight: 600 !important;
}
body:has(.login-page) .field input,
body:has(.auth-container) .form-group input {
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
border-radius: 8px !important;
color: var(--ui-text) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
}
body:has(.login-page) .field input:focus,
body:has(.auth-container) .form-group input:focus {
border-color: rgba(218,177,72,0.55) !important;
box-shadow: 0 0 0 3px rgba(218,177,72,0.12) !important;
background: rgba(255,255,255,0.055) !important;
}
body:has(.login-page) .btn-login,
body:has(.login-page) .btn-signup,
body:has(.auth-container) .btn-auth,
body:has(.login-page) .platform-toggle button.active,
body:has(.site-header) #authNavBtn,
body:has(.site-header) #authNavBtnMobile,
body:has(.nav-logo) .cta-btn,
body:has(.header-inner) .cta-btn {
background: linear-gradient(135deg, #f3d17a, #c8922e) !important;
border: 1px solid rgba(255,214,118,0.44) !important;
color: #090602 !important;
border-radius: 8px !important;
box-shadow: 0 16px 36px rgba(218,177,72,0.16) !important;
}
body:has(.login-page) .platform-toggle button {
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
color: var(--ui-text-3) !important;
}
body:has(.login-page) .hc-note {
background: rgba(34,197,94,0.075) !important;
border: 1px solid rgba(34,197,94,0.18) !important;
color: var(--ui-text-2) !important;
}
body:has(.login-page) a,
body:has(.auth-container) a,
body:has(.legal-content) a,
body:has(.legal-container) a {
color: var(--ui-gold) !important;
}
body:has(.legal-content) .legal-content,
body:has(.legal-container) .legal-container {
max-width: min(980px, calc(100vw - 32px)) !important;
margin: 42px auto !important;
padding: clamp(26px, 4vw, 54px) !important;
background:
linear-gradient(145deg, rgba(255,255,255,0.052), rgba(255,255,255,0.018)),
rgba(13,13,15,0.96) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: 10px !important;
color: var(--ui-text-2) !important;
box-shadow: 0 32px 96px rgba(0,0,0,0.46) !important;
}
body:has(.legal-content) .legal-content h1,
body:has(.legal-container) .legal-container h1 {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
font-size: clamp(34px, 5vw, 58px) !important;
font-weight: 500 !important;
border-bottom: 1px solid rgba(218,177,72,0.34) !important;
}
body:has(.legal-content) .legal-content h2,
body:has(.legal-content) .legal-content h3,
body:has(.legal-container) .legal-container h2,
body:has(.legal-container) .legal-container h3 {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
font-weight: 500 !important;
}
body:has(.legal-content) .legal-content p,
body:has(.legal-content) .legal-content li,
body:has(.legal-container) .legal-container p,
body:has(.legal-container) .legal-container li {
color: var(--ui-text-3) !important;
}
body:has(.legal-content) .legal-content strong,
body:has(.legal-container) .legal-container strong {
color: var(--ui-text) !important;
}
body:has(.legal-content) .business-info,
body:has(.legal-content) .highlight,
body:has(.legal-content) .toc,
body:has(.legal-container) .business-info,
body:has(.legal-container) .highlight,
body:has(.legal-container) .toc {
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(255,255,255,0.09) !important;
border-left: 3px solid rgba(218,177,72,0.72) !important;
border-radius: 8px !important;
}
body:has(.site-header) .site-header-inner,
body:has(.header-inner) .header-inner,
body:has(.nav-logo) nav,
body:has(.site-header) footer .footer-inner,
body:has(.header-inner) .footer-grid,
body:has(.nav-logo) .footer-grid {
max-width: 1180px !important;
}
body:has(.site-header) .page-hero,
body:has(.header-inner) .hero,
body:has(.nav-logo) .hero {
background:
radial-gradient(circle at 72% 20%, rgba(218,177,72,0.2), transparent 36%),
linear-gradient(180deg, #11100d 0%, #080809 100%) !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
color: var(--ui-text) !important;
text-align: center !important;
}
body:has(.site-header) .page-hero h1,
body:has(.header-inner) .hero h1,
body:has(.nav-logo) .hero h1,
body:has(.page-wrapper) article h1,
body:has(.page-wrap) article h1 {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
font-weight: 500 !important;
}
body:has(.site-header) .page-hero p,
body:has(.header-inner) .hero p,
body:has(.nav-logo) .hero p,
body:has(.header-inner) .hero-meta,
body:has(.nav-logo) .hero-meta {
color: var(--ui-text-3) !important;
}
body:has(.articles-grid) .articles-grid,
body:has(.page-wrapper) .page-wrapper,
body:has(.page-wrap) .page-wrap {
max-width: 1180px !important;
}
body:has(.page-wrapper) .page-wrapper {
max-width: 980px !important;
}
body:has(.articles-grid) .article-card .icon {
display: none !important;
}
body:has(.articles-grid) .article-card::before {
content: "Guide";
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 24px;
margin-bottom: 20px;
padding: 0 10px;
border-radius: 999px;
background: rgba(218,177,72,0.12);
border: 1px solid rgba(218,177,72,0.32);
color: var(--ui-gold);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
body:has(.page-wrapper) article,
body:has(.page-wrap) article,
body:has(.articles-grid) .article-card,
body:has(.header-inner) .sidebar-card,
body:has(.nav-logo) .sidebar-card,
body:has(.header-inner) .sidebar-cta,
body:has(.nav-logo) .sidebar-cta,
body:has(.page-wrapper) .callout,
body:has(.page-wrap) .callout,
body:has(.page-wrapper) .cta-block,
body:has(.page-wrap) .cta-block,
body:has(.page-wrapper) .faq-item,
body:has(.page-wrap) .faq-item,
body:has(.header-inner) .faq-body,
body:has(.nav-logo) .faq-body {
background:
linear-gradient(145deg, rgba(255,255,255,0.048), rgba(255,255,255,0.018)),
rgba(15,15,17,0.94) !important;
border: 1px solid rgba(255,255,255,0.09) !important;
border-radius: 10px !important;
box-shadow: 0 24px 78px rgba(0,0,0,0.34) !important;
}
body:has(.articles-grid) .article-card:hover {
border-color: rgba(218,177,72,0.38) !important;
box-shadow: 0 28px 90px rgba(0,0,0,0.46) !important;
}
body:has(.articles-grid) .article-card h2,
body:has(.page-wrapper) article h2,
body:has(.page-wrapper) article h3,
body:has(.page-wrap) article h2,
body:has(.page-wrap) article h3,
body:has(.header-inner) .sidebar-card h3,
body:has(.nav-logo) .sidebar-card h3 {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
font-weight: 500 !important;
}
body:has(.articles-grid) .article-card p,
body:has(.page-wrapper) article p,
body:has(.page-wrapper) article li,
body:has(.page-wrap) article p,
body:has(.page-wrap) article li,
body:has(.header-inner) .sidebar-card,
body:has(.nav-logo) .sidebar-card {
color: var(--ui-text-3) !important;
}
body:has(.articles-grid) .article-card .read-more,
body:has(.page-wrapper) article a,
body:has(.page-wrap) article a,
body:has(.header-inner) .toc-list a,
body:has(.nav-logo) .toc-list a,
body:has(.site-header) footer a {
color: var(--ui-gold) !important;
}
body:has(.site-header) footer,
body:has(.header-inner) footer,
body:has(.nav-logo) footer {
background: #080809 !important;
border-top: 1px solid rgba(255,255,255,0.08) !important;
color: var(--ui-text-3) !important;
}
body:has(.themes-grid) {
padding: 28px !important;
}
body:has(.themes-grid) h1 {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
font-weight: 500 !important;
}
body:has(.themes-grid) .subtitle,
body:has(.themes-grid) .theme-description {
color: var(--ui-text-3) !important;
}
body:has(.themes-grid) .theme-card {
background: rgba(15,15,17,0.94) !important;
border: 1px solid rgba(255,255,255,0.09) !important;
border-radius: 10px !important;
box-shadow: 0 24px 78px rgba(0,0,0,0.35) !important;
}
body:has(.themes-grid) .theme-name {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
}
body:has(.themes-grid) .controls button {
background: linear-gradient(135deg, #f3d17a, #c8922e) !important;
color: #090602 !important;
border: 1px solid rgba(255,214,118,0.42) !important;
}
body:has(.checkmark) .container {
max-width: 520px !important;
padding: 46px 34px !important;
background:
linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
rgba(15,15,17,0.96) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: 10px !important;
box-shadow: 0 32px 96px rgba(0,0,0,0.5) !important;
}
body:has(.checkmark) .checkmark {
color: var(--ui-gold) !important;
font-size: 52px !important;
}
body:has(.checkmark) h1 {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
font-weight: 500 !important;
}
body:has(.checkmark) p {
color: var(--ui-text-3) !important;
}
body:has(.checkmark) .spinner {
border-color: rgba(255,255,255,0.12) !important;
border-top-color: var(--ui-gold) !important;
}
body:has(#sampleReportSection) #sampleReportSection > div,
body:has(#sampleReportSection) #sr-report {
background:
linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
rgba(14,14,16,0.96) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
color: var(--ui-text-2) !important;
}
body:has(#sampleReportSection) .analysis-section h3,
body:has(#sampleReportSection) #sr-report h1,
body:has(#sampleReportSection) #sr-report h2,
body:has(#sampleReportSection) #sr-report h3,
body:has(#sampleReportSection) #sr-report strong {
color: var(--ui-text) !important;
font-family: var(--ui-font-serif) !important;
font-weight: 500 !important;
}
body:has(#sampleReportSection) #sr-report p,
body:has(#sampleReportSection) #sr-report div,
body:has(#sampleReportSection) #sr-report li {
color: var(--ui-text-3) !important;
}
body:has(#sampleReportSection) #sr-report [style*="background"] {
background: rgba(255,255,255,0.035) !important;
border-color: rgba(218,177,72,0.22) !important;
}
body:has(#sampleReportSection) #sr-report span,
body:has(#sampleReportSection) #sr-report code,
body:has(#sampleReportSection) #sr-report mark {
background: rgba(218,177,72,0.13) !important;
color: var(--ui-gold) !important;
border: 1px solid rgba(218,177,72,0.22) !important;
}
body:has(#sampleReportSection) .chart-container,
body:has(#sampleReportSection) #sr-eval-chart {
background: #0c0c0e !important;
border-radius: 8px !important;
}
/* --- Report refinement: premium reading column, sticky board rail, PGN, sidebar collapse --- */
@media (min-width: 1024px) {
.ui-sidebar {
position: fixed !important;
inset: 0 auto 0 0 !important;
height: 100vh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
transition: width 180ms ease, padding 180ms ease;
}
html.ui-sidebar-collapsed {
--ui-sidebar-w: 78px !important;
}
}
.ui-sidebar-collapse-btn {
display: none;
}
@media (min-width: 1024px) {
.ui-sidebar-collapse-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin: -6px auto 12px;
border-radius: 8px;
color: var(--ui-gold);
background: rgba(218,177,72,0.09);
border: 1px solid rgba(218,177,72,0.26);
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.ui-sidebar-collapse-btn:hover {
background: rgba(218,177,72,0.16);
border-color: rgba(218,177,72,0.44);
transform: translateY(-1px);
}
.ui-sidebar-collapse-btn svg {
width: 18px;
height: 18px;
}
html.ui-sidebar-collapsed .ui-sidebar {
padding-left: 12px !important;
padding-right: 12px !important;
}
html.ui-sidebar-collapsed .ui-sidebar-logo {
justify-content: center !important;
min-height: 48px;
font-size: 0 !important;
}
html.ui-sidebar-collapsed .ui-sidebar-logo::before {
content: "AC";
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 12px;
color: #090602;
background: linear-gradient(135deg, #f4d47d, #bd8424);
font-family: var(--ui-font-serif);
font-size: 17px;
font-weight: 700;
letter-spacing: 0;
box-shadow: 0 12px 28px rgba(0,0,0,0.38);
}
html.ui-sidebar-collapsed .ui-sidebar-link {
justify-content: center !important;
gap: 0 !important;
padding: 13px 0 !important;
font-size: 0 !important;
}
html.ui-sidebar-collapsed .ui-sidebar-link svg {
width: 21px !important;
height: 21px !important;
margin: 0 !important;
}
html.ui-sidebar-collapsed .ui-sidebar-user {
justify-content: center !important;
padding: 10px 0 !important;
}
html.ui-sidebar-collapsed .ui-sidebar-user-info {
display: none !important;
}
html.ui-sidebar-collapsed .ui-sidebar-avatar {
margin: 0 !important;
}
}
body:has(#analysisContent) .desktop-layout .split-screen-container,
.results-container.active .desktop-layout .split-screen-container {
grid-template-columns: minmax(0, 1fr) minmax(330px, 392px) !important;
gap: clamp(24px, 3vw, 42px) !important;
}
body:has(#analysisContent) .desktop-layout .chessboard-section,
.results-container.active .desktop-layout .chessboard-section {
top: 76px !important;
align-self: start !important;
display: grid !important;
gap: 10px !important;
padding: 14px !important;
max-height: calc(100vh - 92px) !important;
overflow: visible !important;
border-radius: 10px !important;
background:
radial-gradient(circle at 24% 0%, rgba(218,177,72,0.13), transparent 34%),
linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
rgba(12,12,14,0.94) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
box-shadow: 0 26px 82px rgba(0,0,0,0.42) !important;
}
body:has(#analysisContent) .desktop-layout .chessboard-section > div:first-child,
.results-container.active .desktop-layout .chessboard-section > div:first-child {
margin-bottom: 0 !important;
}
body:has(#analysisContent) .desktop-layout .chessboard-section h3,
.results-container.active .desktop-layout .chessboard-section h3 {
color: #f7f0df !important;
font-family: var(--ui-font-serif) !important;
font-size: 17px !important;
font-weight: 500 !important;
}
body:has(#analysisContent) .desktop-layout .chessboard-section #moveInfo,
.results-container.active .desktop-layout .chessboard-section #moveInfo {
min-width: 138px !important;
padding: 7px 9px !important;
border-radius: 7px !important;
color: var(--ui-text-2) !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.09) !important;
}
.premium-side-graph {
order: -3 !important;
padding: 12px !important;
border-radius: 10px !important;
background:
linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
rgba(8,8,10,0.72) !important;
border: 1px solid rgba(218,177,72,0.16) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.premium-side-graph h3 {
margin: 0 0 7px !important;
color: #d9b866 !important;
font-family: var(--ui-font-mono) !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
.premium-side-graph .info-icon {
display: none !important;
}
.premium-side-graph .chart-container {
height: 126px !important;
margin: 0 !important;
border-radius: 9px !important;
overflow: hidden !important;
background: #09090b !important;
border: 1px solid rgba(255,255,255,0.075) !important;
}
.premium-side-graph #evaluationChart {
height: 126px !important;
border: 0 !important;
border-radius: 9px !important;
}
body:has(#analysisContent) .desktop-layout .chessboard-section #chessboard,
.results-container.active .desktop-layout .chessboard-section #chessboard {
width: min(100%, 334px) !important;
margin: 0 auto !important;
border-radius: 8px !important;
border: 1px solid rgba(218,177,72,0.2) !important;
box-shadow: 0 18px 44px rgba(0,0,0,0.42) !important;
}
body:has(#analysisContent) .move-controls,
.results-container.active .move-controls {
margin-top: 2px !important;
gap: 7px !important;
}
body:has(#analysisContent) .move-controls button,
.results-container.active .move-controls button,
#prevSectionBtnTop,
#nextSectionBtnTop,
#prevSectionBtnBottom,
#nextSectionBtnBottom {
min-height: 36px !important;
padding: 8px 10px !important;
border-radius: 8px !important;
color: #f3dba0 !important;
background:
linear-gradient(180deg, rgba(218,177,72,0.16), rgba(218,177,72,0.07)),
rgba(255,255,255,0.025) !important;
border: 1px solid rgba(218,177,72,0.28) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
font-size: 11px !important;
font-weight: 800 !important;
}
body:has(#analysisContent) .move-controls button:hover,
.results-container.active .move-controls button:hover,
#prevSectionBtnTop:hover,
#nextSectionBtnTop:hover,
#prevSectionBtnBottom:hover,
#nextSectionBtnBottom:hover {
color: #090602 !important;
background: linear-gradient(135deg, #f4d47d, #bd8424) !important;
border-color: rgba(255,214,118,0.48) !important;
}
body:has(#analysisContent) .theme-selector,
.results-container.active .theme-selector {
padding: 7px !important;
border-radius: 9px !important;
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
}
body:has(#analysisContent) .theme-option,
.results-container.active .theme-option {
min-height: 42px !important;
border-radius: 7px !important;
color: var(--ui-text-3) !important;
}
body:has(#analysisContent) .theme-option.active,
.results-container.active .theme-option.active {
color: #f5d57e !important;
border-color: rgba(218,177,72,0.44) !important;
background: rgba(218,177,72,0.08) !important;
}
.premium-report-side-cards {
display: none !important;
}
#claudeReport,
body:has(#analysisContent) .analysis-report {
max-width: 900px !important;
padding: clamp(24px, 3vw, 40px) !important;
border-radius: 10px !important;
background:
linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
rgba(13,13,15,0.78) !important;
border: 1px solid rgba(255,255,255,0.085) !important;
box-shadow: 0 22px 72px rgba(0,0,0,0.28) !important;
color: #ddd5c6 !important;
font-size: 15.5px !important;
line-height: 1.78 !important;
}
#claudeReport h1,
body:has(#analysisContent) .analysis-report h1 {
display: none !important;
}
#claudeReport h2,
body:has(#analysisContent) .analysis-report h2 {
margin: 34px 0 12px !important;
padding-top: 24px !important;
border-top: 1px solid rgba(255,255,255,0.08) !important;
color: #f7f0df !important;
font-family: var(--ui-font-serif) !important;
font-size: clamp(23px, 1.55vw, 30px) !important;
font-weight: 500 !important;
line-height: 1.18 !important;
}
#claudeReport h2:first-child,
#claudeReport h1 + h2,
body:has(#analysisContent) .analysis-report h2:first-child,
body:has(#analysisContent) .analysis-report h1 + h2 {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
#claudeReport h3,
body:has(#analysisContent) .analysis-report h3 {
margin: 24px 0 10px !important;
color: #f0dfb6 !important;
font-family: var(--ui-font-serif) !important;
font-size: clamp(18px, 1.15vw, 22px) !important;
font-weight: 500 !important;
line-height: 1.25 !important;
}
#claudeReport h4,
body:has(#analysisContent) .analysis-report h4 {
margin: 20px 0 8px !important;
color: var(--ui-gold) !important;
font-family: var(--ui-font-mono) !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
}
#claudeReport p,
#claudeReport li,
body:has(#analysisContent) .analysis-report p,
body:has(#analysisContent) .analysis-report li {
color: #d8d0c0 !important;
font-size: 15.5px !important;
line-height: 1.78 !important;
}
#claudeReport ul,
#claudeReport ol,
body:has(#analysisContent) .analysis-report ul,
body:has(#analysisContent) .analysis-report ol {
padding-left: 1.2rem !important;
}
#claudeReport li + li,
body:has(#analysisContent) .analysis-report li + li {
margin-top: 7px !important;
}
#claudeReport strong,
body:has(#analysisContent) .analysis-report strong {
color: #f5e5bd !important;
font-weight: 700 !important;
}
#claudeReport blockquote,
body:has(#analysisContent) .analysis-report blockquote {
margin: 26px 0 !important;
padding: 18px 22px !important;
border-radius: 9px !important;
color: #f5e9cf !important;
background:
linear-gradient(90deg, rgba(218,177,72,0.12), rgba(218,177,72,0.025)),
rgba(255,255,255,0.025) !important;
border: 1px solid rgba(218,177,72,0.28) !important;
border-left: 3px solid #d9ad4f !important;
font-family: var(--ui-font-serif) !important;
font-size: 18px !important;
line-height: 1.55 !important;
}
#claudeReport table,
body:has(#analysisContent) .analysis-report table {
width: 100% !important;
margin: 18px 0 !important;
border-collapse: collapse !important;
overflow: hidden !important;
border-radius: 8px !important;
border: 1px solid rgba(255,255,255,0.08) !important;
}
#claudeReport th,
#claudeReport td,
body:has(#analysisContent) .analysis-report th,
body:has(#analysisContent) .analysis-report td {
padding: 10px 12px !important;
border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
#claudeReport th,
body:has(#analysisContent) .analysis-report th {
color: var(--ui-gold) !important;
background: rgba(218,177,72,0.08) !important;
font-family: var(--ui-font-mono) !important;
font-size: 10px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
.pdf-btn,
#pdfBtn,
#downloadPdfBtn,
#downloadPdfBtnMobile,
.premium-report-actions #downloadPdfBtn {
color: #090602 !important;
background: linear-gradient(135deg, #f4d47d 0%, #d5a640 48%, #ad761e 100%) !important;
border: 1px solid rgba(255,218,127,0.48) !important;
border-radius: 8px !important;
box-shadow: 0 14px 34px rgba(153,105,24,0.22), inset 0 1px 0 rgba(255,255,255,0.32) !important;
font-weight: 800 !important;
}
.pdf-btn:hover,
#pdfBtn:hover,
#downloadPdfBtn:hover,
#downloadPdfBtnMobile:hover,
.premium-report-actions #downloadPdfBtn:hover {
transform: translateY(-1px);
filter: brightness(1.04);
}
body:has(#analysisContent) .premium-report-utility {
max-width: 230px !important;
margin: 18px 0 0 auto !important;
gap: 8px !important;
}
#togglePgnBtn,
#togglePgnBtnMobile,
body:has(#analysisContent) .premium-report-utility #togglePgnBtn {
color: #ead9af !important;
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(218,177,72,0.24) !important;
border-radius: 8px !important;
box-shadow: none !important;
font-weight: 800 !important;
}
#togglePgnBtn:hover,
#togglePgnBtnMobile:hover {
color: #090602 !important;
background: linear-gradient(135deg, #f4d47d, #bd8424) !important;
}
#pgnContainer {
max-width: 920px !important;
margin: 18px 0 0 auto !important;
padding: 22px !important;
border-radius: 10px !important;
background:
linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)),
rgba(12,12,14,0.96) !important;
border: 1px solid rgba(218,177,72,0.18) !important;
box-shadow: 0 24px 82px rgba(0,0,0,0.34) !important;
}
#pgnContainer h3 {
margin: 0 0 14px !important;
color: #f7f0df !important;
font-family: var(--ui-font-serif) !important;
font-size: 22px !important;
font-weight: 500 !important;
}
#pgnPre {
max-height: 420px !important;
padding: 18px !important;
border-radius: 8px !important;
color: #d8d0c0 !important;
background: #08080a !important;
border: 1px solid rgba(255,255,255,0.08) !important;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
font-size: 12.5px !important;
line-height: 1.7 !important;
overflow: auto !important;
}