/* Main whole-site visual theme. Never loaded by Custom IDE.
   Keep the explicit exclusion as a second boundary against accidental imports. */
:root:not(.theme-ide) {
  scrollbar-gutter: stable;
  color-scheme: dark;
  --background: #1e1e1e;
  --surface: #252526;
  --surface-deep: #222223;
  --surface-hover: #2d2d30;
  --surface-active: #34323f;
  --ink: #e0e0e0;
  --muted: #b0b0b8;
  --subtle: #55555b;
  --line: #38383d;
  --accent: #b8b3ff;
  --accent-soft: #d0ccff;
  --accent-bright: #e4e1ff;
  --text-on-accent: #ffffff;
  --action-fill: #5751d9;
  --action-hover: #655ff0;
  --shadow: #00000030;
  --dialog-backdrop: #00000099;
  --selection: #45415f;
  --warning: #e8b978;
  --error: #ff9ca7;
  --success: #8cdbb0;
  --nav-height: 64px;
  --practice-background: var(--background);
  --practice-search-surface: var(--surface);
  --practice-input-surface: var(--surface);
  --practice-input-active: var(--surface-hover);
  --practice-popup-surface: var(--surface);
  --practice-result-surface: var(--surface);
  --ui-font: "Nunito", Arial, sans-serif;
  font-family: var(--ui-font);
}
html:not(.theme-ide) body {
  background: var(--background);
  color: var(--ink);
  font-family: var(--ui-font);
  line-height: 1.55;
}
html:not(.theme-ide) ::selection { background: var(--selection); color: var(--ink); }
html:not(.theme-ide) :is(input, textarea) { caret-color: var(--accent); }
html:not(.theme-ide) :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
html:not(.theme-ide) :is(button, input, select, textarea) { font-family: var(--ui-font); }
html:not(.theme-ide) button:disabled { cursor: not-allowed; opacity: .55; }
html:not(.theme-ide) [hidden] { display: none !important; }
html:not(.theme-ide) a { text-underline-offset: .2em; }

/* Shared header: a compact charcoal band, not another content panel. */
html:not(.theme-ide) .site-header {
  --background: #1e1e1e; --surface: #252526; --surface-deep: #222223;
  --surface-hover: #2d2d30; --surface-active: #34323f;
  --ink: #e0e0e0; --muted: #b0b0b8; --accent: #b8b3ff;
  --accent-bright: #e4e1ff; --line: #38383d;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
html:not(.theme-ide) .site-header .nav-shell {
  font-family: var(--ui-font); font-size: .9rem; line-height: 1;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  width: 100%; background: transparent;
  max-width: 1328px; min-height: 64px; margin-inline: auto;
  padding: .5rem 2rem; column-gap: 2rem;
  align-items: center;
}
html:not(.theme-ide) .site-header .brand-cluster { gap: .7rem; }
html:not(.theme-ide) .site-header .logo { padding: 0 .45rem 0 0; }
html:not(.theme-ide) .site-header :is(.nav-menu-button, .primary-nav-link, .premium-link) {
  display: inline-flex; align-items: center; line-height: 1;
  margin: 0; padding-block: 0;
}
html:not(.theme-ide) .site-header .logo,
html:not(.theme-ide) .auth-brand {
  font-family: var(--ui-font); font-size: 1.6rem;
  font-weight: 600; letter-spacing: -.025em; color: var(--ink);
}
html:not(.theme-ide) .site-header :is(.nav-menu-button, .primary-nav-link, .premium-link) {
  font-family: var(--ui-font); font-size: .9rem; font-weight: 700;
  letter-spacing: 0; color: var(--muted); min-height: 38px;
}
html:not(.theme-ide) .site-header :is(.nav-menu-button, .primary-nav-link) {
  padding-inline: .65rem; border-radius: 5px;
}
html:not(.theme-ide) .site-header :is(.nav-menu-button, .primary-nav-link)::before { display: none; }
html:not(.theme-ide) .site-header :is(.nav-menu-button, .primary-nav-link):is(:hover, .is-current, [aria-current="page"], [aria-expanded="true"]) {
  color: var(--accent); background: var(--surface-active);
}
html:not(.theme-ide) .site-header .premium-link { color: var(--accent); }
html:not(.theme-ide) .site-header :is(.logo, .nav-menu-button, .primary-nav-link, .premium-link, .auth-button) {
  white-space: nowrap; flex-shrink: 0;
}
html:not(.theme-ide) .site-header .primary-nav {
  flex-wrap: wrap; align-items: center; gap: .2rem;
}
html:not(.theme-ide) .site-header .nav-menu { display: flex; align-items: center; flex-shrink: 0; }
html:not(.theme-ide) .site-header .nav-account-cluster { min-width: 0; flex-wrap: wrap; }
html:not(.theme-ide) .site-header .auth-button {
  font-size: .85rem; font-weight: 600; min-height: 36px;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--surface); color: var(--ink);
}
html:not(.theme-ide) .site-header .sign-up { background: var(--action-fill); border-color: var(--action-fill); color: #fff; }
html:not(.theme-ide) .site-header .nav-dropdown {
  padding: .4rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; box-shadow: 0 8px 24px #00000030;
}
html:not(.theme-ide) .site-header .nav-dropdown a {
  color: var(--muted); font-family: var(--ui-font); font-size: .875rem;
  font-weight: 500; border-radius: 4px; min-height: 40px;
}
html:not(.theme-ide) .site-header .nav-dropdown a:is(:hover, [aria-current="page"]) {
  color: var(--accent); background: var(--surface-active);
}

/* Shared scale and controls. */
html:not(.theme-ide) :is(.dashboard-main, .practice-main, .problem-detail, .premium-main, .settings-main) {
  width: min(1240px, calc(100% - 4rem)); margin-inline: auto; padding-bottom: 4rem;
}
html:not(.theme-ide) .page-intro {
  padding: 2rem 0 1.5rem; margin: 0; align-items: center;
  border-bottom: 1px solid var(--line); margin-bottom: 1.5rem;
}
html:not(.theme-ide) :is(.page-intro h1, .detail-heading h1, .settings-heading h1) {
  font-size: clamp(1.65rem, 2.4vw, 2rem); font-weight: 650;
  line-height: 1.2; letter-spacing: -.025em;
}
html:not(.theme-ide) :is(.quiet-button, .primary-button, .settings-action, .auth-submit, .ruleset-start-button) {
  border-radius: 5px; min-height: 40px; font-size: .875rem;
  font-weight: 600; box-shadow: none; letter-spacing: 0;
}
html:not(.theme-ide) :is(.quiet-button, .settings-action) {
  color: var(--ink); background: var(--surface); border: 1px solid var(--subtle);
}
html:not(.theme-ide) :is(.primary-button, .settings-action-primary, .auth-submit, .ruleset-start-button) {
  color: #fff; background: var(--action-fill); border: 1px solid var(--action-fill);
}
html:not(.theme-ide) :is(.primary-button, .settings-action-primary, .auth-submit, .ruleset-start-button):hover {
  background: var(--action-hover); color: #fff; filter: none;
}
html:not(.theme-ide) :is(.auth-input, .settings-field input, .settings-field select, .member-form-row input, .member-form-row select) {
  color: var(--ink); background: var(--surface); border: 1px solid var(--subtle);
  border-radius: 5px; min-height: 44px; box-shadow: none; font-size: 1rem;
}
html:not(.theme-ide) :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }

/* Practice keeps the original control and section order. */
html:not(.theme-ide) #practice-browser {
  display: block;
  max-width: 860px;
}
html:not(.theme-ide) #practice-browser > .page-intro { grid-column: 1 / -1; }
html:not(.theme-ide) .practice-search-panel {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 1.25rem; margin-bottom: 1.5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
}
html:not(.theme-ide) .practice-toolbar {
  grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap;
  align-items: center; gap: .75rem; margin-bottom: 0;
}
html:not(.theme-ide) .practice-toolbar-left { flex: 1; min-width: 0; flex-wrap: wrap; gap: .75rem; }
html:not(.theme-ide) .practice-search-control { position: relative; min-width: 0; flex: 1 1 300px; }
html:not(.theme-ide) .practice-search-box {
  min-height: 44px; padding: .55rem .8rem; border: 1px solid var(--subtle);
  background: var(--surface); border-radius: 5px; box-shadow: none;
}
html:not(.theme-ide) .practice-search-box input { font-size: .9375rem; color: var(--ink); }
html:not(.theme-ide) .practice-sort-control { color: var(--muted); gap: .5rem; font-size: .8125rem; }
html:not(.theme-ide) .practice-sort-control select { color: var(--ink); background: var(--surface); font-size: .8125rem; }
html:not(.theme-ide) :is(.practice-icon-button, .sort-direction-button, #practice-settings-toggle) {
  width: 40px; height: 40px; color: var(--ink); background: transparent;
  border: 0; border-radius: 50%; box-shadow: none;
  transition: color 150ms ease, background-color 150ms ease, filter 150ms ease;
}
html:not(.theme-ide) :is(.practice-icon-button, .sort-direction-button, #topics-toggle) svg {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
html:not(.theme-ide) #topics-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
html:not(.theme-ide) #topics-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
html:not(.theme-ide) :is(.practice-icon-button, .sort-direction-button, #practice-settings-toggle):hover,
html:not(.theme-ide) :is(.practice-icon-button, .sort-direction-button, #practice-settings-toggle):focus-visible {
  background: var(--surface-active); color: var(--accent-bright); filter: brightness(1.3);
}
html:not(.theme-ide) :is(.practice-icon-button, .sort-direction-button):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
html:not(.theme-ide) .practice-filter-row {
  grid-column: 1; grid-row: 2 / 4; display: flex; flex-direction: column;
  gap: 1.25rem; padding: 1rem 0 0; border-top: 1px solid var(--line);
}
html:not(.theme-ide) .subject-filter-area { width: 100%; flex-direction: column; gap: .75rem; align-items: stretch; }
html:not(.theme-ide) .filter-label { font-size: .8125rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--ink); }
html:not(.theme-ide) .subject-filter-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: .35rem; align-items: stretch; }
html:not(.theme-ide) .subject-filter-button {
  min-height: 36px; padding: .45rem .6rem; border: 1px solid transparent;
  text-align: left; border-radius: 5px; color: var(--muted); font-size: .8125rem;
}
html:not(.theme-ide) .subject-filter-button.is-selected,
html:not(.theme-ide) .subject-filter-button.is-selected:not([data-subject="all"]) {
  color: var(--accent-soft); background: var(--surface-active); border-color: transparent;
}
html:not(.theme-ide) .subject-filter-button:hover { background: var(--surface-hover); }
html:not(.theme-ide) .subject-filter-button:not([data-subject="all"]),
html:not(.theme-ide) .subject-filter-button.is-selected:not([data-subject="all"]) {
  color: var(--subject-color, var(--ink));
}
html:not(.theme-ide) .subject-filter-button[data-subject="all"] {
  color: var(--muted);
}
html:not(.theme-ide) .difficulty-filter-area { width: min(400px, 100%); flex: auto; min-width: 0; }
html:not(.theme-ide) .difficulty-filter-heading { flex-direction: column; align-items: start; gap: .5rem; }
html:not(.theme-ide) #difficulty-range-output { color: var(--muted); font-size: .75rem; }
html:not(.theme-ide) .practice-results-section { grid-column: 2; grid-row: 3; margin: 0; min-width: 0; }
html:not(.theme-ide) .practice-results-header { align-items: center; flex-wrap: wrap; }
html:not(.theme-ide) .practice-results-header h1 { font-size: 1rem; font-weight: 650; }
html:not(.theme-ide) :is(#practice-result-count, .practice-page-status) { font-size: .8125rem; color: var(--muted); }
html:not(.theme-ide) #clear-filters { min-height: 36px; font-size: .8125rem; color: var(--muted); }
html:not(.theme-ide) .practice-results { gap: .85rem; margin-top: 1rem; }
html:not(.theme-ide) .problem-result-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "heading meta" "statement statement" "footer footer";
  gap: .65rem; padding: 1.35rem 1.5rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface); box-shadow: none;
}
html:not(.theme-ide) .problem-result-row:hover { background: var(--surface); border-color: var(--subtle); transform: none; }
html:not(.theme-ide) .problem-result-heading h2 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; }
html:not(.theme-ide) .problem-result-heading h2 a:hover { color: var(--accent); text-decoration: underline; }
html:not(.theme-ide) .problem-result-source { color: var(--muted); font-size: .8125rem; margin-top: .3rem; }
html:not(.theme-ide) .problem-result-meta { justify-content: end; max-width: 440px; gap: .5rem; }
html:not(.theme-ide) .variant-difficulty-list { justify-content: end; }
/* Give regular Practice copy more weight without overriding bold roles. */
html.theme-practice :is(#practice-browser, #problem-detail, .practice-dialog, .badge-tooltip) {
  font-weight: 600;
}
html:not(.theme-ide) .problem-result-statement {
  font-family: "Nunito", Arial, sans-serif; color: #b8bbc2;
  font-size: .92rem; line-height: 1.35; margin: .35rem 0;
  width: 100%; min-width: 0; max-width: none;
  overflow-wrap: break-word; word-break: normal;
}
html:not(.theme-ide) :is(.problem-result-statement, .detail-statement) mjx-container,
html:not(.theme-ide) :is(.problem-result-statement, .detail-statement) strong {
  color: #f0f0f2;
}
html:not(.theme-ide) .problem-result-divider { background: var(--line); }
html:not(.theme-ide) :is(.variant-difficulty, .variant-difficulty:hover, .variant-difficulty:focus-visible) { min-height: 24px; height: 24px; border-radius: 5px; box-shadow: none; }
html:not(.theme-ide) .variant-difficulty-label { font-size: .65rem; padding-inline: .4rem; }
/* List cards use only the dot; retain the link's title and accessible name. */
html:not(.theme-ide) .problem-result-row .variant-difficulty {
  width: 24px; min-width: 24px; height: 24px; padding: 0;
  justify-content: center; gap: 0; border: 0; background: transparent;
  border-radius: 50%; box-shadow: none;
}
html:not(.theme-ide) .problem-result-row .variant-difficulty::before {
  width: 14px; height: 14px; flex-basis: 14px;
}
html:not(.theme-ide) .problem-result-row .variant-difficulty-label { display: none; }
html:not(.theme-ide) .problem-result-row .variant-difficulty:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
html:not(.theme-ide) .detail-difficulty { font-size: .65rem; padding: .17rem .4rem; }
html:not(.theme-ide) :is(.result-topic, .result-topic.is-multicolor) {
  color: var(--muted); background: var(--surface-deep); border: 1px solid var(--line);
  font-size: .75rem; border-radius: 4px; padding: .2rem .5rem;
}
html:not(.theme-ide) .result-badge {
  width: 22px; height: 22px; font-size: .625rem; color: var(--muted);
  border: 1px solid var(--subtle); border-radius: 4px; background: var(--surface);
}
html:not(.theme-ide) .result-badge { cursor: help; }
html:not(.theme-ide) .badge-tooltip {
  position: fixed; z-index: 1000; pointer-events: none;
  width: max-content; max-width: min(300px, calc(100vw - 16px));
  box-sizing: border-box; padding: .6rem .75rem;
  font-family: var(--ui-font); font-size: .75rem; line-height: 1.5;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--subtle); border-radius: 5px;
  box-shadow: 0 4px 12px #00000040;
}
html:not(.theme-ide) :is(.practice-settings, .practice-search-popup) {
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 12px 32px #00000040;
  max-width: calc(100vw - 2rem);
}
html:not(.theme-ide) .topic-picker-option { font-size: .8125rem; }
html:not(.theme-ide) .practice-setting-stepper {
  display: grid; grid-template-columns: 24px minmax(70px, auto) 24px;
  min-height: 25px; background: transparent;
  flex-shrink: 0;
}
html:not(.theme-ide) .practice-setting-stepper button {
  display: grid; place-items: center; padding: 0; border: 0;
  border-radius: 5px; background: transparent; color: var(--ink); cursor: pointer;
}
html:not(.theme-ide) .practice-setting-stepper button:hover:not(:disabled) {
  background: var(--surface-hover);
}
html:not(.theme-ide) .practice-setting-stepper button:disabled {
  color: var(--subtle); cursor: default;
}
html:not(.theme-ide) .practice-setting-stepper svg {
  width: .9rem; height: .9rem; fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5;
}
html:not(.theme-ide) .practice-setting-stepper output {
  display: grid; place-items: center; padding-inline: .3rem;
  color: var(--ink); background: transparent;
  font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
html:not(.theme-ide) .practice-pagination { padding-top: 1rem; }
html:not(.theme-ide) .practice-pagination button { background: var(--surface); border: 1px solid var(--subtle); color: var(--ink); border-radius: 5px; min-height: 40px; }
html:not(.theme-ide) .practice-empty-state { border: 1px dashed var(--subtle); border-radius: 6px; padding: 3rem 1.5rem; color: var(--muted); }

/* Problem detail and dialogs inherit the same reading and control hierarchy. */
html:not(.theme-ide) .back-link { display: inline-block; color: var(--muted); margin-top: 1.5rem; font-size: .875rem; }
html:not(.theme-ide) .detail-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 2rem; }
html:not(.theme-ide) .detail-statement-panel { padding: 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
html:not(.theme-ide) .detail-statement {
  font-family: "Nunito", Arial, sans-serif; color: #b8bbc2;
  font-size: .92rem; line-height: 1.35; width: 100%; max-width: none;
  overflow-wrap: break-word; word-break: normal;
}
html:not(.theme-ide) :is(.detail-sidebar h2, .detail-statement-heading h2, .detail-notes h2, .detail-attempt h2) { font-size: .9375rem; font-weight: 650; }
html:not(.theme-ide) .detail-variant-link { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; }
html:not(.theme-ide) .detail-variant-link[aria-current="page"] { background: var(--surface-active); color: var(--accent-soft); border-color: var(--accent); }
html:not(.theme-ide) .detail-attempt { background: var(--surface-deep); border: 1px solid var(--line); border-radius: 6px; padding: 1.25rem; }
html:not(.theme-ide) .rating-guide strong { color: var(--ink); }
html:not(.theme-ide) .rating-guide span { font-size: .8125rem; }
html:not(.theme-ide) .practice-dialog { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
html:not(.theme-ide) .practice-dialog-card { background: var(--surface); color: var(--ink); }
html:not(.theme-ide) .practice-dialog::backdrop { background: var(--dialog-backdrop); backdrop-filter: none; }
html:not(.theme-ide) .ruleset-option { background: var(--surface-deep); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
html:not(.theme-ide) .ruleset-option:has(input:checked) { background: var(--surface-active); border-color: var(--accent); }
html:not(.theme-ide) .timer-fields input { background: var(--surface); color: var(--ink); border: 1px solid var(--subtle); border-radius: 5px; }

/* Dashboard: active content and a quieter reference column. */
html:not(.theme-ide) .dashboard-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 2.5rem; }
html:not(.theme-ide) .dashboard-panel { background: transparent; border: 0; border-radius: 0; padding: 0 0 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
html:not(.theme-ide) .dashboard-panel h2 { font-size: 1rem; font-weight: 650; }
html:not(.theme-ide) .dashboard-welcome { display: block; }
html:not(.theme-ide) .dashboard-welcome h2 { font-size: 1.5rem; }
html:not(.theme-ide) .dashboard-welcome .dashboard-stats { margin: 1rem 0 1.4rem; gap: 1.5rem; }
html:not(.theme-ide) .dashboard-stats span { display: inline-flex; align-items: baseline; gap: .35rem; font-size: .8125rem; }
html:not(.theme-ide) .dashboard-stats strong { font-size: .9375rem; }
html:not(.theme-ide) .dashboard-grid > aside { border-left: 1px solid var(--line); padding-left: 1.5rem; }
html:not(.theme-ide) .dashboard-problem { border-radius: 0; padding: 1rem .25rem; background: transparent; border-bottom: 1px solid var(--line); }
html:not(.theme-ide) .dashboard-problem:hover { background: var(--surface-hover); }
html:not(.theme-ide) .dashboard-problem small { font-size: .8125rem; }
html:not(.theme-ide) .dashboard-footnote { font-size: .75rem; }

/* Plans: a comparison table, with restrained emphasis and unchanged prices. */
html:not(.theme-ide) .plan-table-wrap { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; }
html:not(.theme-ide) .plan-table thead { background: var(--surface); }
html:not(.theme-ide) .plan-table thead th { color: var(--ink); padding-block: 1.75rem; font-weight: 650; }
html:not(.theme-ide) .plan-price { font-size: 2rem; color: var(--ink); }
html:not(.theme-ide) .plan-table .plan-section th { background: var(--surface-deep); }
html:not(.theme-ide) .plan-table tbody tr:not(.plan-section):hover { background: var(--background); }
html:not(.theme-ide) .billing-options { background: var(--surface); border-radius: 5px; }
html:not(.theme-ide) .billing-options label:has(input:checked) { color: var(--accent-soft); background: var(--surface-active); }
html:not(.theme-ide) .membership-admin { background: var(--surface); border-color: var(--line); }

/* Account forms and settings use the same dark working surfaces. */
html:not(.theme-ide) .auth-main { font-family: var(--ui-font); padding: 6rem 1.5rem 3rem; }
html:not(.theme-ide) .auth-shell { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
html:not(.theme-ide) .auth-shell-sign-in { width: min(440px, 100%); }
html:not(.theme-ide) .auth-shell-sign-in .auth-form-panel { padding: 2rem; }
html:not(.theme-ide) .auth-title { font-size: 1.8rem; letter-spacing: -.025em; }
html:not(.theme-ide) .auth-caption { font-family: var(--ui-font); font-size: .9375rem; color: var(--muted); }
html:not(.theme-ide) .auth-form { font-family: var(--ui-font); }
html:not(.theme-ide) :is(.auth-message.is-muted, .auth-legal, .auth-divider) { color: var(--muted); }
html:not(.theme-ide) .auth-input[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
html:not(.theme-ide) .auth-intro { background: var(--surface-deep); border-right: 1px solid var(--line); }
html:not(.theme-ide) .auth-form-panel { background: var(--surface); }
html:not(.theme-ide) .auth-social-button { background: var(--surface-deep); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; }
html:not(.theme-ide) .settings-page { font-family: var(--ui-font); }
html:not(.theme-ide) .settings-main { padding-top: 2rem; }
html:not(.theme-ide) .settings-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; }
html:not(.theme-ide) .settings-navigation { border-right: 1px solid var(--line); padding-right: 1.25rem; }
html:not(.theme-ide) .settings-navigation button { border-radius: 5px; min-height: 40px; font-size: .875rem; }
html:not(.theme-ide) .settings-navigation button[aria-current]:not([aria-current="false"]) { background: var(--surface-active); color: var(--accent-soft); }
html:not(.theme-ide) .settings-navigation button[aria-current]:not([aria-current="false"])::before { display: none; }
html:not(.theme-ide) .settings-content { max-width: 800px; }
html:not(.theme-ide) .settings-section { padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; margin-top: 1.5rem; }
html:not(.theme-ide) .settings-danger-zone { border-color: #71424a; }
html:not(.theme-ide) .settings-action-danger { background: #342327; color: var(--error); border-color: #71424a; }

/* Unfinished destinations remain unfinished; no fake functionality. */
html:not(.theme-ide) .mode-main { width: min(1000px, calc(100% - 4rem)); min-height: 55vh; margin: 3rem auto; padding: 3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
html:not(.theme-ide) .mode-message { color: var(--muted); font-family: var(--ui-font); font-size: 1.0625rem; line-height: 1.7; }

@media (max-width: 1100px) {
  html:not(.theme-ide) .site-header .nav-shell { grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1rem; }
  html:not(.theme-ide) .site-header .nav-future { grid-row: 2; grid-column: 1 / -1; }
  html:not(.theme-ide) .site-header .nav-account-cluster { grid-row: 1; grid-column: 2; }
  html:not(.theme-ide) #practice-browser { grid-template-columns: 190px minmax(0, 1fr); column-gap: 1.5rem; }
  html:not(.theme-ide) .practice-toolbar-left { flex-direction: column; align-items: stretch; }
  html:not(.theme-ide) .practice-search-control { flex-basis: auto; }
}
@media (max-width: 760px) {
  html:not(.theme-ide) :is(.dashboard-main, .practice-main, .problem-detail, .premium-main, .settings-main) { width: calc(100% - 2rem); }
  html:not(.theme-ide) .site-header .nav-shell { padding: .75rem 1rem; }
  html:not(.theme-ide) .site-header .primary-nav { flex-wrap: wrap; justify-content: flex-start; gap: .2rem; }
  html:not(.theme-ide) .site-header .nav-account-cluster { flex-wrap: wrap; gap: .35rem; }
  html:not(.theme-ide) .site-header .logo { font-size: 1.4rem; }
  html:not(.theme-ide) #practice-browser { display: block; }
  html:not(.theme-ide) .practice-search-panel { display: flex; flex-direction: column; gap: 1rem; }
  html:not(.theme-ide) .practice-toolbar { margin: 0; width: 100%; }
  html:not(.theme-ide) .practice-search-control { flex-wrap: wrap; }
  html:not(.theme-ide) .practice-search-box { flex-basis: 100%; }
  html:not(.theme-ide) .practice-filter-row { padding: 1rem 0; border: 0; border-top: 1px solid var(--line); gap: 1rem; width: 100%; }
  html:not(.theme-ide) .subject-filter-list { flex-direction: row; flex-wrap: wrap; gap: .3rem; }
  html:not(.theme-ide) .subject-filter-button { min-height: 40px; }
  html:not(.theme-ide) .difficulty-filter-area { max-width: 400px; }
  html:not(.theme-ide) .practice-results-section { margin-top: 1.5rem; }
  html:not(.theme-ide) .problem-result-row { padding: 1rem; grid-template-columns: 1fr; grid-template-areas: "heading" "meta" "statement" "footer"; }
  html:not(.theme-ide) .problem-result-meta, html:not(.theme-ide) .variant-difficulty-list { justify-content: start; max-width: none; }
  html:not(.theme-ide) :is(.dashboard-grid, .detail-layout, .settings-layout) { grid-template-columns: 1fr; gap: 1.5rem; }
  html:not(.theme-ide) .dashboard-grid > aside { padding-left: 0; border-left: 0; }
  html:not(.theme-ide) .settings-navigation { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 1rem; }
  html:not(.theme-ide) .detail-statement-panel { padding: 1.25rem; }
  html:not(.theme-ide) .page-intro { gap: 1rem; flex-wrap: wrap; }
  html:not(.theme-ide) .auth-shell-sign-up { grid-template-columns: 1fr; width: 100%; }
  html:not(.theme-ide) .auth-intro { border-right: 0; border-bottom: 1px solid var(--line); }
  html:not(.theme-ide) .mode-main { width: calc(100% - 2rem); padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.theme-ide) *, html:not(.theme-ide) *::before, html:not(.theme-ide) *::after { transition: none !important; animation: none !important; }
}