@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* RankersHub app frame
   Derived from frame-showcase.html. Loaded after page-level styles so the
   functional product shares one visual language without rewriting each view. */
:root {
  --cream: #EFE9D9;
  --cream-2: #E4DCC4;
  --ink: #0F0F0F;
  --ink-2: #2A2A2A;
  --green: #1F8A4C;
  --green-dark: #136636;
  --green-solid: var(--green-dark);
  --pink: #F06CA8;
  --pink-dark: #D14E8B;
  --orange: #E85A1F;
  --yellow: #F5C518;
  --frame-display: 'Archivo Black', sans-serif;
  --frame-body: 'Space Grotesk', sans-serif;
  --frame-mono: 'JetBrains Mono', monospace;
  --frame-border: 3px solid var(--ink);
  --frame-border-thin: 2px solid var(--ink);
  --frame-shadow: 6px 6px 0 var(--ink);
  --frame-shadow-small: 3px 3px 0 var(--ink);

  --primary: var(--green);
  --primary-dark: var(--green-dark);
  --primary-light: #D9EBD8;
  --accent: var(--pink);
  --accent-dark: var(--pink-dark);
  --accent-light: #F8C7DE;
  --secondary: var(--orange);
  --gold: var(--yellow);
  --gold-dark: #C69F00;
  --gold-light: #FFF3A7;
  --success: var(--green);
  --success-light: #D9EBD8;
  --warning: #C94816;
  --warning-light: #FFD8C6;
  --danger: #B83E17;
  --danger-light: #FFD8C6;
  --dark: var(--ink);
  --dark-2: var(--ink-2);
  --dark-3: #49433A;
  --gray: #4E493F;
  --gray-light: #6F695D;
  --gray-lighter: #9B9486;
  --gray-bg: var(--cream);
  --gray-bg2: var(--cream-2);
  --white: #FFFDF5;
  --surface: #FFFDF5;
  --surface-solid: #FFFDF5;
  --surface-muted: var(--cream-2);
  --border: var(--ink);
  --border-soft: var(--ink);
  --border-strong: var(--ink);
  --focus-ring: var(--pink);
  --font-primary: var(--frame-body);
  --font-mono: var(--frame-mono);
  --font: var(--frame-body);
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-card: 0;
  --shadow-sm: var(--frame-shadow-small);
  --shadow: var(--frame-shadow-small);
  --shadow-md: var(--frame-shadow);
  --shadow-lg: 8px 8px 0 var(--ink);
  --shadow-xl: 10px 10px 0 var(--ink);
  --shadow-card: var(--frame-shadow-small);
  --shadow-card-hover: 5px 5px 0 var(--ink);
  --shadow-glow: none;
  --shadow-gold: var(--frame-shadow-small);
  --glass-bg: #FFFDF5;
  --glass-border: var(--ink);
  --glass-shadow: var(--frame-shadow-small);
  accent-color: var(--green);
}

html { background: var(--ink-2); }

body {
  background-color: var(--cream);
  background-image:
    linear-gradient(rgba(15, 15, 15, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 15, 15, .035) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  font-family: var(--frame-body);
  font-size: 16px;
  line-height: 1.5;
}

::selection { background: var(--pink); color: var(--ink); }

a { color: var(--green-dark); }
main a:not(.btn):not(.share-btn):visited { color: #7A2A57; }

h1, h2, .page-header h1, .dashboard-header h1, .series-overview h1,
.mock-hero h1, .leaderboard-hero h1, .rph-content h1, .auth-card h1 {
  color: var(--ink);
  font-family: var(--frame-display);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .98;
  text-transform: uppercase;
}

h3, h4, h5, h6, .card-title, .stat-value, .rank-card-value,
.lb-insight-value, .result-box .value {
  color: var(--ink);
  font-family: var(--frame-body);
  letter-spacing: -.015em;
}

.page-header p, .dashboard-header p, .series-overview p, .mock-hero p,
.card-meta, .stat-label, .help-text, .mock-row-meta, .subtitle {
  color: var(--ink-2);
}

:focus-visible {
  outline: 4px solid var(--pink) !important;
  outline-offset: 3px !important;
}

/* Navigation ----------------------------------------------------------- */
.sidebar {
  background: var(--cream) !important;
  border-right: 3px solid var(--ink) !important;
  box-shadow: none !important;
}

.sidebar-logo, .mobile-topbar .mob-logo {
  color: var(--ink) !important;
  font-family: var(--frame-display);
  font-weight: 400;
  letter-spacing: -.02em;
}

.sidebar-logo { border-bottom: 3px solid var(--ink); margin-bottom: 14px; padding-bottom: 18px; }

.sidebar-logo .logo-icon, .mobile-topbar .mob-logo .logo-icon,
.nav-logo .logo-icon {
  background: var(--pink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: var(--frame-shadow-small) !important;
  color: var(--ink) !important;
  font-family: var(--frame-display);
}

.sidebar-nav .nav-section-label {
  border-top: 2px solid var(--ink);
  color: var(--ink-2);
  font-family: var(--frame-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.sidebar-nav a {
  border: 2px solid transparent;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-weight: 700;
  gap: 9px;
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.sidebar-nav a:hover {
  background: var(--cream-2) !important;
  border-color: var(--ink) !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  color: var(--ink) !important;
  transform: translate(-1px, -1px);
}

.sidebar-nav a.active {
  background: var(--yellow) !important;
  border-color: var(--ink) !important;
  box-shadow: var(--frame-shadow-small) !important;
  color: var(--ink) !important;
}

.sidebar-nav a.active::after { display: none !important; }
.nav-code {
  display: inline-grid;
  flex: 0 0 27px;
  min-height: 24px;
  place-items: center;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--frame-mono);
  font-size: 9px;
  letter-spacing: 0;
}

.sidebar-user { border-top: 3px solid var(--ink) !important; }
.sidebar-user .avatar {
  background: var(--green-solid) !important;
  border: 2px solid var(--ink);
  border-radius: 0 !important;
  color: var(--cream);
}
.sidebar-user .user-name { color: var(--ink); }
.sidebar-user .user-email { color: var(--ink-2); }
.token-display {
  background: var(--yellow) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--frame-mono);
  box-shadow: 2px 2px 0 var(--ink);
}

.mobile-topbar {
  background: var(--cream) !important;
  border-bottom: 3px solid var(--ink) !important;
  box-shadow: none !important;
}
.hamburger-btn { border: 2px solid transparent !important; border-radius: 0 !important; }
.hamburger-btn:hover { border-color: var(--ink) !important; background: var(--yellow) !important; }
.hamburger-btn span, .hamburger-btn::before, .hamburger-btn::after { background: var(--ink) !important; }
.sidebar-backdrop { background: rgba(15, 15, 15, .72) !important; backdrop-filter: none !important; }
.mobile-token-count {
  background: var(--yellow);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink);
  font-family: var(--frame-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 5px 7px;
}

/* Page frames ---------------------------------------------------------- */
.main-content, .main-content-full {
  background: transparent !important;
  padding: 34px clamp(22px, 3.3vw, 52px) 60px;
}

.page-header, .dashboard-header {
  background: transparent !important;
  border-bottom: 4px solid var(--ink);
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 28px;
  padding: 0 0 20px;
}

.page-header h1, .dashboard-header h1 { font-size: clamp(32px, 4.4vw, 58px); }
.dashboard-eyebrow, .section-label, .rph-badge, .hero-badge,
.series-badge, .mock-hero-badge, .editor-panel-sub {
  display: inline-flex;
  background: var(--ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--cream) !important;
  font-family: var(--frame-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 7px 10px;
  text-transform: uppercase;
}

.section-title-sm, .section-header h2 {
  font-family: var(--frame-display);
  font-weight: 400;
  text-transform: uppercase;
}

/* Surfaces ------------------------------------------------------------- */
.card, .stat-card, .mock-card, .series-card, .result-section, .result-box,
.analysis-card, .rank-predictor-form, .vocab-card, .ed-card, .your-rank-card,
.lb-insight-card, .lb-insight-panel, .mock-compare-card, .mock-compare-panel,
.mock-compare-chart, .ai-coach-card, .ai-chart-card, .ai-analysis-panel,
.progress-chart-section, .activity-graph-section, .goal-section,
.performance-movement-section, .upload-section, .filter-panel, .editor-sidebar,
.editor-panel, .auth-card, .modal-content, .modal-box, .series-overview,
.series-folder, .qb-card, .qb-practice-box, .typing-panel, .mode-card,
.history-card, .chart-card, .result-panel, .time-stat-card, .study-card,
.comparison-card, .feedback-block, .admin-stat, .health-card, .api-env-card,
.api-key-card, .editor-shell, .danger-zone, .question-container {
  background: var(--white) !important;
  border: var(--frame-border-thin) !important;
  border-radius: 0 !important;
  box-shadow: var(--frame-shadow-small) !important;
  color: var(--ink);
}

.card::after, .mock-card::after, .series-card::after, .feature-card::after,
.exam-card::after, .stat-card::after, .mock-hero::before, .mock-hero::after,
.series-hero::before, .series-hero::after { display: none !important; }

.card:hover, .mock-card:hover, .series-card:hover, .stat-card:hover,
.ed-card:hover, .vocab-card:hover, .mode-card:hover {
  border-color: var(--ink) !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
  transform: translate(-2px, -2px);
}

.stat-card { min-height: 136px; }
.stat-card:nth-child(4n + 1), .admin-stat:nth-child(4n + 1) { background: var(--yellow) !important; }
.stat-card:nth-child(4n + 2), .admin-stat:nth-child(4n + 2) { background: var(--pink) !important; }
.stat-card:nth-child(4n + 3), .admin-stat:nth-child(4n + 3) { background: var(--cream-2) !important; }
.stat-card:nth-child(4n), .admin-stat:nth-child(4n) { background: var(--green-solid) !important; color: var(--cream); }
.stat-card:nth-child(4n) .stat-value, .stat-card:nth-child(4n) .stat-label,
.admin-stat:nth-child(4n) .value, .admin-stat:nth-child(4n) .label { color: var(--cream) !important; }
.stat-card-icon { font-family: var(--frame-mono); filter: grayscale(1); }
.dashboard-stats .stat-card-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  place-items: center;
  background: var(--cream);
  color: var(--ink);
  font-size: 0 !important;
  filter: none;
}
.dashboard-stats .stat-card-icon::after {
  font-family: var(--frame-mono);
  font-size: 10px;
  font-weight: 700;
}
.dashboard-stats .stat-card-tokens .stat-card-icon::after { content: 'TK'; }
.dashboard-stats .stat-card-tests .stat-card-icon::after { content: 'AT'; }
.dashboard-stats .stat-card-ads .stat-card-icon::after { content: 'AD'; }
.dashboard-stats .stat-card-avg .stat-card-icon::after { content: 'AVG'; font-size: 8px; }
.stat-card .stat-value, .admin-stat .value {
  background: none !important;
  color: var(--ink) !important;
  font-family: var(--frame-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 400;
  -webkit-text-fill-color: currentColor !important;
}
.stat-card .stat-label, .admin-stat .label {
  color: var(--ink-2) !important;
  font-family: var(--frame-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Buttons, tabs, fields ------------------------------------------------ */
.btn, button.btn, .btn-download, .share-btn, .btn-copy, .ai-btn,
.typing-tab, .lb-tab, .filter-tab, .tab-pill, .result-tab-btn,
.modal-tab, .p-tab, .editorial-tab, .lang-pill, .admin-tab, .fc-btn,
.start-btn, .quiz-next-btn, .quiz-restart-btn {
  min-height: 44px;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  font-family: var(--frame-body);
  font-weight: 700;
  letter-spacing: 0;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.btn-primary, .btn-accent, .btn-glow, .ai-btn, .btn-download,
.start-btn, .quiz-next-btn, .quiz-restart-btn {
  background: var(--green-solid) !important;
  color: var(--cream) !important;
}
.btn-gold, .btn-warning { background: var(--yellow) !important; color: var(--ink) !important; }
.btn-danger { background: var(--danger) !important; color: var(--cream) !important; }
.btn-success { background: var(--green-solid) !important; color: var(--cream) !important; }
.btn-outline, .btn-clear, .filter-tab, .tab-pill, .typing-tab, .lb-tab,
.result-tab-btn, .modal-tab, .p-tab, .editorial-tab, .lang-pill, .admin-tab,
.fc-btn-s { background: var(--white) !important; color: var(--ink) !important; }

.filter-tab.active, .tab-pill.active, .typing-tab.active, .lb-tab.active,
.result-tab-btn.active, .modal-tab.active, .p-tab.active,
.editorial-tab.active, .lang-pill.active, .admin-tab.active,
.view-toggle button.active {
  background: var(--yellow) !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

.btn:hover, .btn-download:hover, .share-btn:hover, .btn-copy:hover,
.ai-btn:hover, .filter-tab:hover, .tab-pill:hover, .admin-tab:hover {
  box-shadow: 5px 5px 0 var(--ink) !important;
  transform: translate(-2px, -2px);
}
.btn:active, button:active { box-shadow: 1px 1px 0 var(--ink) !important; transform: translate(2px, 2px); }
.btn:disabled, button:disabled { box-shadow: none !important; filter: grayscale(1); opacity: .6; transform: none !important; }

.form-group label, .form-label, .toolbar-label, .label, .lbl {
  color: var(--ink) !important;
  font-family: var(--frame-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.form-input, .form-textarea, input[type='text'], input[type='email'],
input[type='password'], input[type='number'], input[type='search'],
input[type='url'], input[type='datetime-local'], select, textarea {
  min-height: 46px;
  background: var(--white) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
.form-input:focus, .form-textarea:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--ink) !important;
  box-shadow: 4px 4px 0 var(--pink) !important;
  outline: none;
}
::placeholder { color: #6E675B !important; opacity: 1; }

/* Tables --------------------------------------------------------------- */
.results-table-wrap, .cutoff-table-wrap, .vb-table-wrap,
.leaderboard-table-wrap, .answer-sheet-table {
  background: var(--white) !important;
  border: var(--frame-border) !important;
  border-radius: 0 !important;
  box-shadow: var(--frame-shadow-small) !important;
}
.results-table, .leaderboard-table, .leaderboard-tbl, .topic-matrix,
.section-compare-table, .cutoff-table, .vb-table, .word-detail-table,
.answer-sheet-table, .tw-table { border-collapse: collapse; }
.results-table th, .leaderboard-table th, .leaderboard-tbl th,
.topic-matrix th, .section-compare-table th, .cutoff-table th,
.vb-table th, .word-detail-table th, .answer-sheet-table th, .tw-table th {
  background: var(--ink) !important;
  border: 1px solid var(--cream-2) !important;
  color: var(--cream) !important;
  font-family: var(--frame-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.results-table td, .leaderboard-table td, .leaderboard-tbl td,
.topic-matrix td, .section-compare-table td, .cutoff-table td,
.vb-table td, .word-detail-table td, .answer-sheet-table td, .tw-table td {
  border: 1px solid var(--ink) !important;
}
.results-table tbody tr:nth-child(even) td, .leaderboard-table tbody tr:nth-child(even) td,
.leaderboard-tbl tbody tr:nth-child(even) td, .vb-table tbody tr:nth-child(even) td {
  background: var(--cream-2) !important;
}
.results-table tr:hover td, .leaderboard-table tr:hover td,
.leaderboard-tbl tr:hover td { background: var(--yellow) !important; }

/* Progress and badges -------------------------------------------------- */
.score-bar-wrap, .bar-track, .mini-track, .lb-mini-track, .ai-progress-wrap,
.section-bar-wrap, .series-progress-bar, .series-master-progress,
.folder-bar, .goal-progress-bar, .ad-progress {
  height: 12px;
  background: var(--cream-2) !important;
  border: 2px solid var(--ink);
  border-radius: 0 !important;
  overflow: hidden;
}
.score-bar-fill, .bar-fill, .mini-fill, .lb-mini-fill, .ai-progress-bar,
.series-progress-fill, .series-master-progress span, .folder-bar span,
.goal-progress-fill, .ad-progress-bar {
  background: var(--green) !important;
  border-radius: 0 !important;
}
.hero-badge, .card-badge, .percentile-pill, .score-badge, .accuracy-badge,
.ed-tag, .ai-chip, .ai-mini-tag, .live-badge, .feature-tag, .card-exam-badge,
.mock-state, .folder-mode, .badge-free, .badge-recommended {
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--frame-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.card-exam-badge.ssc, .card-exam-badge.upsc, .card-exam-badge.banking,
.card-exam-badge.railway { background: var(--danger) !important; color: var(--cream) !important; }
.badge-free { background: var(--yellow) !important; color: var(--ink) !important; }

/* Mocks and series ----------------------------------------------------- */
.toolbar {
  align-items: end;
  background: var(--cream-2);
  border: var(--frame-border);
  box-shadow: var(--frame-shadow-small);
  padding: 16px;
}
.tab-pills, .filter-tabs, .typing-tabs, .leaderboard-tabs, .result-tabbar,
.admin-tabs { gap: 10px; }
.view-toggle { border: 2px solid var(--ink) !important; border-radius: 0 !important; }
.view-toggle button { background: var(--white) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.view-toggle button + button { border-left: 2px solid var(--ink) !important; }

.cards-grid { gap: 20px; }
.mock-card, .series-card { padding: 20px; }
.mock-card .card-title, .series-card h3 {
  font-size: 19px;
  line-height: 1.2;
}
.mock-card .card-footer, .card-footer { border-top: 2px solid var(--ink); margin-top: 16px; padding-top: 16px; }

.mock-hero, .series-hero, .leaderboard-hero, .rph {
  background: var(--green-solid) !important;
  border: 4px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 var(--orange) !important;
  color: var(--cream) !important;
}
.mock-hero h1, .series-hero h1, .leaderboard-hero h1, .rph h1 { color: var(--cream) !important; }
.mock-hero p, .series-hero p, .leaderboard-hero p, .rph p { color: var(--cream) !important; opacity: .9; }

.series-overview {
  align-items: center;
  background: var(--yellow) !important;
  border-width: 3px !important;
  padding: 24px;
}
.progress-ring-copy { border-left: 3px solid var(--ink); padding-left: 22px; }
.progress-ring-copy strong { color: var(--ink) !important; font-family: var(--frame-display); font-weight: 400; }
.folder-tree { gap: 22px; }
.series-folder { border-width: 3px !important; padding: 18px; }
.series-folder.depth-1 { background: var(--cream-2) !important; margin-left: 24px; }
.series-folder.depth-2 { background: var(--pink) !important; margin-left: 48px; }
.folder-head { border-bottom: 2px solid var(--ink); margin-bottom: 16px; padding-bottom: 14px; }
.folder-head h2 { font-family: var(--frame-display); font-size: 19px; font-weight: 400; text-transform: uppercase; }
.series-mock-row {
  background: var(--cream) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.series-mock-row:hover { background: var(--yellow) !important; }
.mock-order { background: var(--ink) !important; border-radius: 0 !important; color: var(--cream) !important; font-family: var(--frame-mono); }
.schedule-banner {
  background: var(--yellow) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: var(--frame-shadow-small);
  color: var(--ink) !important;
}

/* Auth ---------------------------------------------------------------- */
.auth-container {
  background-color: var(--green) !important;
  background-image:
    linear-gradient(rgba(239, 233, 217, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 233, 217, .13) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}
.auth-card { border-width: 4px !important; box-shadow: 12px 12px 0 var(--orange) !important; }
.auth-card h1 { font-size: clamp(30px, 7vw, 46px); text-align: left !important; }
.auth-card .subtitle { text-align: left !important; }
.auth-divider { color: var(--ink-2); font-family: var(--frame-mono); }
.auth-divider::before, .auth-divider::after { background: var(--ink) !important; height: 2px !important; }
.auth-error, .auth-success, .auth-warning, .auth-dev-link {
  border: 2px solid var(--ink);
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 var(--ink);
  text-align: left !important;
}

/* Mock player ---------------------------------------------------------- */
.mock-screen { background: var(--cream) !important; }
.mock-topbar, .bottom-bar {
  background: var(--cream) !important;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}
.mock-topbar { border-bottom: 3px solid var(--ink) !important; }
.bottom-bar { border-top: 3px solid var(--ink) !important; }
.mock-title { font-family: var(--frame-display) !important; font-weight: 400 !important; text-transform: uppercase; }
.timer-display, .section-timer-display, .question-timer, .section-time-chip {
  background: var(--yellow) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--frame-mono);
}
.section-nav { background: var(--cream-2) !important; border-bottom: 2px solid var(--ink) !important; }
.question-area { background: var(--cream) !important; }
.question-container { box-shadow: none !important; }
.question-number { color: var(--green-dark) !important; font-family: var(--frame-mono); }
.option-btn, .option-item, .sample-option, .qb-option, .qb-practice-option {
  background: var(--white) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
}
.option-btn:hover, .option-item:hover, .sample-option:hover,
.qb-option:hover, .qb-practice-option:hover { background: var(--yellow) !important; }
.option-btn.selected, .option-item.selected { background: var(--pink) !important; box-shadow: var(--frame-shadow-small); }
.option-label, .option-letter, .opt-letter {
  background: var(--ink) !important;
  border-radius: 0 !important;
  color: var(--cream) !important;
  font-family: var(--frame-mono);
}
.palette-panel, .palette-dashboard {
  background: var(--cream-2) !important;
  border-left: 3px solid var(--ink) !important;
}
.palette-header { border-bottom: 3px solid var(--ink) !important; }
.palette-btn { border: 2px solid var(--ink) !important; border-radius: 0 !important; font-family: var(--frame-mono); }
.palette-btn.answered { background: var(--green-solid) !important; color: var(--cream) !important; }
.palette-btn.marked, .palette-btn.marked-answered { background: var(--pink) !important; color: var(--ink) !important; }
.palette-btn.not-answered { background: var(--danger) !important; color: var(--cream) !important; }

/* Empty states, dialogs, feedback ------------------------------------- */
.empty-state, .empty-editorial, .lb-empty-mini, .wp-error, .filter-empty {
  background: var(--cream-2) !important;
  border: 3px dashed var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink);
}
.modal-overlay, .palette-overlay { background: rgba(15, 15, 15, .78) !important; backdrop-filter: none !important; }
.modal-content, .modal-box { border-width: 4px !important; box-shadow: 10px 10px 0 var(--orange) !important; }
.modal-header { border-bottom: 3px solid var(--ink) !important; }
.modal-close, .palette-close { border: 2px solid var(--ink) !important; border-radius: 0 !important; background: var(--yellow) !important; color: var(--ink) !important; }
.toast { background: var(--ink) !important; border: 2px solid var(--cream) !important; border-radius: 0 !important; box-shadow: 5px 5px 0 var(--pink) !important; color: var(--cream) !important; }
.loading-shimmer, .skelly, .skelly-line { border-radius: 0 !important; background: var(--cream-2) !important; }

/* Tool-specific cleanup ------------------------------------------------ */
.rph-stars, .lobby-rocket, .starfield, .rocket-flame, .confetti-container { filter: saturate(.75); }
.vocab-card, .flashcard, .card-inner, .card-face { border-radius: 0 !important; }
.vocab-divider { background: var(--ink) !important; }
.word-chip, .stat-pill, .insight-chip, .chip-strength, .chip-weakness,
.chip-tip, .wp-chip { border: 2px solid var(--ink) !important; border-radius: 0 !important; }
.typing-tabs, .practice-tabs, .modal-tabs { border-bottom: 3px solid var(--ink); padding-bottom: 10px; }
.editor-shell { overflow: visible !important; }
.danger-zone { background: #FFD8C6 !important; }
.api-console-hero { background: var(--ink) !important; border: 3px solid var(--ink); border-radius: 0 !important; color: var(--cream); }
.ai-live-card, .ai-live-log-box { border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; }

@media (max-width: 1024px) {
  .main-content, .main-content-full { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 768px) {
  body { background-color: var(--cream) !important; }
  .main-content, .main-content-full,
  .dashboard .main-content {
    padding: calc(78px + var(--safe-top)) max(14px, var(--safe-right)) calc(36px + var(--safe-bottom)) max(14px, var(--safe-left)) !important;
  }
  .page-header, .dashboard-header { margin-bottom: 18px; padding-bottom: 14px; }
  .page-header h1, .dashboard-header h1, .dashboard .page-header h1 { font-size: clamp(29px, 9vw, 40px); }
  .page-header p, .dashboard-header p { font-size: 15px; line-height: 1.45; }

  .sidebar {
    left: calc(-1 * min(88vw, 320px)) !important;
    width: min(88vw, 320px) !important;
    border-right-width: 4px !important;
  }
  .sidebar.mobile-open { left: 0 !important; }
  .mobile-topbar { min-height: 62px; }

  .dashboard-stats, .stats-row, .profile-stats,
  .dashboard .dashboard-stats, .dashboard .stats-row, .dashboard .profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
  }
  .stat-card { min-height: 118px; padding: 15px !important; }
  .stat-card .stat-value { font-size: clamp(28px, 9vw, 38px); }
  .stat-card-icon { font-size: 20px !important; }

  .toolbar {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
    padding: 12px !important;
  }
  .toolbar-field.search-field { grid-column: 1 / -1; }
  .toolbar-field.view-field { grid-column: 1 / -1; }
  .tab-pills, .filter-tabs, .typing-tabs, .leaderboard-tabs,
  .result-tabbar, .admin-tabs {
    margin-left: -14px !important;
    margin-right: -14px !important;
    padding: 0 14px 8px !important;
    scroll-padding-inline: 14px;
  }
  .dashboard .admin-tabs {
    flex-direction: row !important;
    align-items: stretch !important;
  }
  .dashboard .admin-tab {
    width: auto !important;
    min-width: max-content !important;
  }
  .backup-hint {
    display: block !important;
    line-height: 1.55;
  }
  .backup-hint code { display: inline !important; white-space: normal; }
  .tab-pill, .filter-tab, .typing-tab, .lb-tab, .result-tab-btn, .admin-tab { min-height: 42px !important; }

  .cards-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .mock-card, .series-card { padding: 16px !important; }
  .mock-card .card-title, .series-card h3 { font-size: 18px; }

  .mock-hero, .series-hero, .leaderboard-hero, .rph {
    margin-bottom: 24px !important;
    padding: 26px 18px !important;
    box-shadow: 5px 5px 0 var(--orange) !important;
  }
  .mock-hero { min-height: 0 !important; }
  .mock-hero h1 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1 !important; }
  .mock-hero p { font-size: 14px !important; line-height: 1.45 !important; }
  .mock-hero + .stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .mock-hero + .stats-row .stat-card { min-height: 100px; }

  .series-overview { grid-template-columns: 1fr !important; padding: 17px !important; }
  .series-overview h1 { font-size: clamp(27px, 8vw, 36px) !important; }
  .progress-ring-copy { border-left: 0; border-top: 3px solid var(--ink); padding: 14px 0 0; text-align: left !important; }
  .series-folder, .series-folder.depth-1, .series-folder.depth-2 {
    margin-left: 0 !important;
    padding: 13px !important;
  }
  .folder-head { display: block !important; }
  .folder-progress { margin-top: 12px; min-width: 0; text-align: left !important; }
  .series-mock-row { grid-template-columns: 32px minmax(0, 1fr) !important; gap: 9px !important; padding: 11px !important; }
  .series-mock-row .mock-action { grid-column: 1 / -1; }
  .series-mock-row .btn { width: 100%; }

  .results-table th, .results-table td,
  .leaderboard-table th, .leaderboard-table td { white-space: nowrap; padding: 11px 12px !important; }
  .auth-card { margin: 18px; padding: 26px 20px !important; box-shadow: 7px 7px 0 var(--orange) !important; }

  .mock-topbar { min-height: 58px; padding: 8px 10px !important; }
  .mock-title { font-size: 13px !important; }
  .question-container { padding: 15px !important; }
  .question-text { font-size: 17px !important; line-height: 1.55 !important; }
  .option-btn { min-height: 50px; padding: 10px !important; }
  .bottom-bar { padding: 8px 10px calc(8px + var(--safe-bottom)) !important; }
  .bottom-bar-center { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .bottom-bar .btn-submit-mobile { grid-column: 1 / -1 !important; }
}

@media (max-width: 430px) {
  .dashboard-stats, .stats-row, .profile-stats,
  .dashboard .dashboard-stats, .dashboard .stats-row, .dashboard .profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .stat-card { min-height: 108px; }
  .stat-card .stat-label { font-size: 9px !important; }
  .mock-hero + .stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .mock-hero + .stats-row .stat-card { min-height: 96px; padding: 11px !important; }
  .mock-hero + .stats-row .stat-value { font-size: 25px; }
  .toolbar { padding: 10px !important; }
  .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .admin-stat { min-height: 104px; padding: 13px !important; }
  .card, .mock-card, .series-card, .result-section, .analysis-card { box-shadow: 2px 2px 0 var(--ink) !important; }
}

@media (hover: none) {
  .card:hover, .mock-card:hover, .series-card:hover, .stat-card:hover,
  .ed-card:hover, .vocab-card:hover, .mode-card:hover,
  .btn:hover, .filter-tab:hover, .tab-pill:hover, .admin-tab:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Mock player themes --------------------------------------------------
   This file intentionally loads last, so its mock rules must honor the
   player's data-theme instead of forcing light surfaces in dark mode. */
html[data-theme="light"] .mock-screen,
html[data-theme="light"] .question-area {
  background: var(--cream) !important;
  color: var(--ink) !important;
}

html[data-theme="light"] .mock-topbar,
html[data-theme="light"] .bottom-bar,
html[data-theme="light"] .section-nav {
  background: var(--cream) !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

html[data-theme="light"] .question-container,
html[data-theme="light"] .option-btn,
html[data-theme="light"] .option-content,
html[data-theme="light"] .question-text {
  background-color: var(--white) !important;
  color: var(--ink) !important;
}

html[data-theme="light"] .palette-panel,
html[data-theme="light"] .palette-header,
html[data-theme="light"] .palette-dashboard,
html[data-theme="light"] .palette-stats,
html[data-theme="light"] .palette-scroll,
html[data-theme="light"] .palette-grid,
html[data-theme="light"] .palette-group-wrap {
  background: var(--cream-2) !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .mock-screen,
html[data-theme="dark"] .mock-content,
html[data-theme="dark"] .question-area {
  background: #070B16 !important;
  color: #F8FAFC !important;
}

html[data-theme="dark"] .mock-topbar,
html[data-theme="dark"] .bottom-bar,
html[data-theme="dark"] .section-nav {
  background: #0B1020 !important;
  border-color: #475569 !important;
  color: #F8FAFC !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .mock-topbar .mock-title {
  color: #FACC15 !important;
}

html[data-theme="dark"] .question-container {
  background: #0F172A !important;
  border-color: #475569 !important;
  color: #F8FAFC !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .question-text,
html[data-theme="dark"] .option-content {
  background: transparent !important;
  color: #F8FAFC !important;
}

html[data-theme="dark"] .question-number {
  color: #C4B5FD !important;
}

html[data-theme="dark"] .question-timer,
html[data-theme="dark"] .question-timer span {
  color: #0F0F0F !important;
}

html[data-theme="dark"] .option-btn,
html[data-theme="dark"] .option-item {
  background: #111827 !important;
  border-color: #64748B !important;
  color: #F8FAFC !important;
}

html[data-theme="dark"] .option-btn:hover,
html[data-theme="dark"] .option-item:hover {
  background: #1E293B !important;
  border-color: #A5B4FC !important;
}

html[data-theme="dark"] .option-btn.selected,
html[data-theme="dark"] .option-item.selected {
  background: #4C1D95 !important;
  border-color: #C4B5FD !important;
  color: #FFFFFF !important;
  box-shadow: 3px 3px 0 #A5B4FC !important;
}

html[data-theme="dark"] .option-label,
html[data-theme="dark"] .option-letter,
html[data-theme="dark"] .opt-letter {
  background: #334155 !important;
  color: #F8FAFC !important;
}

html[data-theme="dark"] .palette-panel,
html[data-theme="dark"] .palette-header,
html[data-theme="dark"] .palette-dashboard,
html[data-theme="dark"] .palette-stats,
html[data-theme="dark"] .palette-scroll,
html[data-theme="dark"] .palette-grid,
html[data-theme="dark"] .palette-group-wrap,
html[data-theme="dark"] .palette-analysis {
  background: #0B1220 !important;
  border-color: #475569 !important;
  color: #E2E8F0 !important;
}

html[data-theme="dark"] .palette-header span,
html[data-theme="dark"] .palette-group-header,
html[data-theme="dark"] .palette-stats div,
html[data-theme="dark"] .palette-analysis th,
html[data-theme="dark"] .palette-analysis td {
  color: #F8FAFC !important;
  border-color: #475569 !important;
}

html[data-theme="dark"] .palette-btn.btn-not-visited {
  background: #1E293B !important;
  border-color: #64748B !important;
  color: #E2E8F0 !important;
}

html[data-theme="dark"] .btn-clear,
html[data-theme="dark"] .nav-arrow,
html[data-theme="dark"] .btn-icon {
  background: #1E293B !important;
  border-color: #64748B !important;
  color: #F8FAFC !important;
}

html[data-theme="dark"] .btn-review {
  background: #3B1D65 !important;
  border-color: #8B5CF6 !important;
  color: #F5F3FF !important;
}