/* Appearance only. Keep layout and page content in their owning stylesheets.
   Future sections should use --bg, --surface, --text, --text-2 and --border. */
:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f5faf7;
  --color-surface-3: #edf3f0;
  --color-text: #0d1715;
  --color-text-2: #52675e;
  --color-muted: #63766b;
  --color-border: #e3ece7;
  --color-border-strong: #cddcd4;
  --color-brand: #008452;
  --color-brand-soft: #e8f7ef;
  --color-focus: #008452;
  --color-action: #008452;
  --color-action-hover: #006c43;
  --color-overlay: #ffffffed;
  --color-shadow: 0 12px 40px #163b261c;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0d1512;
  --color-surface: #141f19;
  --color-surface-2: #1b2a22;
  --color-surface-3: #23362a;
  --color-text: #e7f0ea;
  --color-text-2: #b4c5bb;
  --color-muted: #96aba0;
  --color-border: #2c4134;
  --color-border-strong: #3b5945;
  --color-brand: #61dfa6;
  --color-brand-soft: #183a29;
  --color-focus: #8becb9;
  --color-overlay: #141f19ed;
  --color-shadow: 0 18px 48px #00000066;
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --surface-3: var(--color-surface-3);
  --text: var(--color-text);
  --text-2: var(--color-text-2);
  --muted: var(--color-muted);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --primary: var(--color-brand);
  --primary-hover: #8becb9;
  --primary-soft: var(--color-brand-soft);
  --primary-text: #0a2115;
  --accent: #c4e989;
  --accent-soft: #28351c;
  --success: #73dca3;
  --success-soft: #133024;
  --danger: #ff9d96;
  --danger-soft: #3a1b1b;
  --warning: #f0cf7d;
  --warning-soft: #342b16;
  --info: #8bc5ed;
  --info-soft: #182e40;
  --shadow-sm: 0 2px 5px #0000001a;
  --shadow: 0 6px 24px #00000033;
  --shadow-lg: var(--color-shadow);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .prep-home {
  --bg: var(--color-bg); --surface: var(--color-surface);
  --text: var(--color-text); --text-2: var(--color-text-2);
  --border: var(--color-border); --primary: var(--color-brand);
  background: var(--bg); color: var(--text); color-scheme: dark;
}
html[data-theme="dark"] :focus-visible { outline-color: var(--color-focus); }
html[data-theme="dark"] ::selection { background: #326f4e; color: #fff; }
html[data-theme="dark"] .site-body>main,
html[data-theme="dark"] .panel-content,
html[data-theme="dark"] .player-body {
  background: radial-gradient(ellipse 80% 380px at 100% 0, #17382466, transparent), var(--bg);
}
html[data-theme="dark"] :is(.card,.sidebar,.panel-body .sidebar,.site-footer,.dropdown-menu,.question-card,.palette-card,.test-tab,.cert-tab,.cert-arrow) {
  background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm);
}
html[data-theme="dark"] :is(.card-header,.card-footer,.sidebar .brand,.sidebar-foot,.site-footer,.player-top,.player-nav,.exam-card .meta,.cert-controls,.cert-card-counts,.review-opt,.q-row,.feed li,.table td,.chip-sep,.prep-how,.prep-footer) { border-color: var(--border); }
html[data-theme="dark"] :is(.card-footer,.table th,.modal-actions,.live-card .nums div,.segmented,.option .key,.timer,.about-cert-stat,.cert-stat,.mock-rules li,.avatar-upload) {
  background: var(--surface-2); border-color: var(--border); color: var(--text-2);
}
html[data-theme="dark"] :is(.brand,.brand small,.stat-value,.empty h3,.kv dd,.score-ring strong,.live-card .nums b,.test-tab,.cert-name,.cert-card h3,.cert-card-code,.mock-history a,.about-steps li,.mock-rules li,.prep-plan-heading,.prep-progress strong) { color: var(--text); }
html[data-theme="dark"] :is(.page-header p,.brand small,.stat-label,.stat-hint,.meta,.field .help,.kv dt,.auth-note,.cert-index,.cert-desc,.cert-stat span,.about-hero p,.about-cert-stat span,.about-note,.cert-card-counts,.test-tab-text small,.test-tab-text em,.mock-hero p,.mock-history small,.prep-plan-heading small,.prep-step-count,.prep-program small,.prep-how p,.prep-footer) { color: var(--text-2); }
html[data-theme="dark"] :is(.prep-label,.stat-accent .stat-value,.exam-card-action,.cert-link,.cert-card-arrow,.cert-card-counts strong,.about-cert-stat strong,.exam-kind,.side-nav a.active svg,.auth-intro h2 em,.auth-intro li svg,.prep-intro h1 em,.prep-program-icon,.prep-program-arrow,.prep-step-status,.cert-tab.is-active) { color: var(--primary); }
html[data-theme="dark"] :is(.field label,.label,.auth-intro>p,.auth-intro li,.prep-intro p,.prep-sample,.prep-steps a,.prep-program) { color: var(--text-2); }
html[data-theme="dark"] .prep-program strong { color: var(--text); }
html[data-theme="dark"] :is(.card-link:hover,.test-tab:hover,.prep-program:hover,.prep-program.selected) { border-color: var(--border-strong); box-shadow: var(--shadow); }
html[data-theme="dark"] :is(.stat-accent,.profile-hero,.mock-hero,.about-cta,.test-tab.is-active) {
  background: linear-gradient(125deg,#173325,var(--surface)); border-color: var(--border-strong);
}
html[data-theme="dark"] .stat:after { background: radial-gradient(circle,#28623c55,transparent 70%); }
html[data-theme="dark"] :is(.btn,.chip,.pagination a,.pagination span,.user-trigger,.option,.palette button,.q-grid a,.points-pick span,.choice-row) { border-color: var(--border-strong); }
html[data-theme="dark"] .btn { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-border: var(--border-strong); }
html[data-theme="dark"] :is(.btn-primary,.palette button.answered,.chip.active,.pagination .current,.option.selected .key,.points-pick input:checked+span) {
  background: var(--color-action); color: #fff; border-color: var(--color-action);
}
html[data-theme="dark"] .btn-primary:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
html[data-theme="dark"] .btn-danger { background:#a92b26; color:#fff; border-color:#c4473e; }
html[data-theme="dark"] .btn-accent { background:var(--accent-soft); color:var(--accent); border-color:var(--border-strong); }
html[data-theme="dark"] .btn-ghost { background:transparent; border-color:transparent; box-shadow:none; }
html[data-theme="dark"] .btn-danger-ghost { color:var(--danger); }
html[data-theme="dark"] :is(.btn:hover,.chip:hover,.table tbody tr:hover,.side-nav a:hover,.mock-history a:hover,.cert-arrow:hover) { background: var(--surface-2); }
html[data-theme="dark"] .btn-primary:hover { background: var(--color-action-hover); }
html[data-theme="dark"] :is(.exam-card-icon,.test-tab-icon,.avatar,.side-nav a.active,.empty>svg,.mock-rules span,.prep-step-icon.done) { background:var(--primary-soft); color:var(--primary); border-color:var(--border); }
html[data-theme="dark"] :is(.test-tab.is-active .test-tab-icon,.test-tab.is-active .test-tab-text em) { background:var(--color-action); color:#fff; }
html[data-theme="dark"] .test-tab-text em { background:var(--surface-3); }
html[data-theme="dark"] :is(.badge-primary,.badge-accent,.badge-success) { background:var(--success-soft); color:var(--success); }
html[data-theme="dark"] .badge-info { background:var(--info-soft); color:var(--info); }
html[data-theme="dark"] .alert-info { background:var(--primary-soft); color:var(--primary); }
html[data-theme="dark"] .explanation { background:var(--primary-soft); color:var(--text); border-color:var(--border-strong); }
html[data-theme="dark"] :is(input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=date],input[type=tel],input[type=url],select,textarea) {
  background-color:var(--surface); color:var(--text); border-color:var(--border-strong);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:var(--muted); opacity:1; }
html[data-theme="dark"] :is(input,select,textarea):focus { border-color:var(--primary); box-shadow:0 0 0 3px #61dfa620; }
html[data-theme="dark"] :is(.field .errorlist,.errorlist) { color:var(--danger); }
html[data-theme="dark"] .auth-wrap:before { background:radial-gradient(ellipse at 15% 45%,#1b4b2d88,transparent 72%); }
html[data-theme="dark"] .auth-intro .prep-label { background:var(--accent-soft); color:var(--accent); }
html[data-theme="dark"] .option.selected { background:var(--primary-soft); border-color:var(--primary); box-shadow:0 0 0 2px #61dfa612; }
html[data-theme="dark"] .option:hover { background:var(--surface-2); border-color:var(--border-strong); }
html[data-theme="dark"] .palette button.current { box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--primary); }
html[data-theme="dark"] .timer.warn { background:var(--warning-soft); color:var(--warning); }
html[data-theme="dark"] .timer.danger { background:var(--danger-soft); color:var(--danger); }
html[data-theme="dark"] .progress { background:var(--surface-3); }
html[data-theme="dark"] .player-progress { background:var(--surface-3); }
html[data-theme="dark"] .panel-top,
html[data-theme="dark"] .player-top { background:var(--color-overlay); border-color:var(--border); }
html[data-theme="dark"] .side-nav a { color:var(--text-2); }
html[data-theme="dark"] .side-nav a.active { color:var(--primary); box-shadow:inset 3px 0 var(--primary); }
html[data-theme="dark"] .side-nav :is(.group,svg) { color:var(--muted); }
html[data-theme="dark"] .exam-kind-mock { color:var(--warning); }
html[data-theme="dark"] dialog::backdrop { background:#0009; }
/* Shared header and certificate menu: layout and behavior remain owned by header.css/js. */
html[data-theme="dark"] .site-header { --sh-text:var(--text-2); --sh-green:var(--primary); background:var(--color-overlay); border-color:var(--border); }
html[data-theme="dark"] :is(.site-header__brand,.site-header__menu-item) { color:var(--text); }
html[data-theme="dark"] :is(.site-header__name small,.site-header__menu-label,.site-header__menu-text small,.site-header__menu-empty,.site-header__menu-arrow) { color:var(--text-2); }
html[data-theme="dark"] :is(.site-header__toggle,.site-header__menu) { background:var(--surface); color:var(--text); border-color:var(--border); box-shadow:var(--shadow); }
html[data-theme="dark"] .site-header__actions .user-trigger { border-color:var(--border); }
html[data-theme="dark"] :is(.site-header__menu-item:hover,.site-header__menu-item:focus-visible,.site-header__menu-item.is-current,.site-header__menu-btn.active) { background:var(--primary-soft); }
html[data-theme="dark"] .site-header__menu-icon { background:var(--primary-soft); color:var(--primary); }
html[data-theme="dark"] :is(.site-header__menu-item:hover,.site-header__menu-item:focus-visible,.site-header__menu-item.is-current) .site-header__menu-icon { background:var(--color-action); color:#fff; }
@media(max-width:1199px) {
  html[data-theme="dark"] .site-header__nav { background:var(--surface); border-color:var(--border); }
  html[data-theme="dark"] .site-header__nav>a.active { background:var(--primary-soft); }
}
/* Existing home and About colors, without editing those page files. */
html[data-theme="dark"] .prep-hero:before { background:radial-gradient(ellipse at 62% 36%,#1c4d3280,transparent 76%),linear-gradient(130deg,var(--bg),#14281c); }
html[data-theme="dark"] .prep-plan { background:linear-gradient(145deg,#19291f,var(--surface)); border-color:var(--border-strong); box-shadow:var(--shadow); }
html[data-theme="dark"] :is(.prep-steps li,.prep-program,.about-steps li) { background:var(--surface); border-color:var(--border); }
html[data-theme="dark"] :is(.prep-steps a:hover,.prep-program:hover,.prep-program.selected) { background:var(--surface-2); }
html[data-theme="dark"] .prep-step-icon { background:var(--surface-3); color:var(--muted); }
html[data-theme="dark"] .prep-step-icon.started { background:var(--color-action); color:#fff; }
html[data-theme="dark"] .prep-progress progress { background:var(--surface-3); }
html[data-theme="dark"] .prep-progress progress::-webkit-progress-bar { background:var(--surface-3); }
html[data-theme="dark"] .prep-progress progress::-webkit-progress-value { background:var(--color-brand); }
html[data-theme="dark"] .prep-progress progress::-moz-progress-bar { background:var(--color-brand); }
html[data-theme="dark"] .prep-sample>span { background:var(--surface); border-color:var(--border-strong); }
html[data-theme="dark"] .prep-sample svg { fill:var(--primary); stroke:var(--primary); }
html[data-theme="dark"] .prep-programs:before { border-color:var(--border); }
html[data-theme="dark"] .cert-watermark { color:#61dfa60b; }
html[data-theme="dark"] .cert-stat strong { background:linear-gradient(135deg,#92f4c5,#4dce90); background-clip:text; -webkit-background-clip:text; color:transparent; }
html[data-theme="dark"] :is(.cert-tab:hover,.cert-arrow) { color:var(--text); }
html[data-theme="dark"] .cert-tab.is-active { color:var(--primary); background:var(--primary-soft); border-color:var(--border-strong); }
html[data-theme="dark"] .cert-arrow:hover { background:var(--color-action); color:#fff; }
/* Django administration uses a different set of variables. Share the same preference. */
html[data-theme="dark"] {
  --body-fg:var(--text); --body-bg:var(--bg); --body-quiet-color:var(--text-2); --body-loud-color:var(--text);
  --header-bg:#123923; --header-branding-color:#e7f0ea; --header-color:#e7f0ea; --header-link-color:#e7f0ea;
  --breadcrumbs-fg:var(--text-2); --breadcrumbs-link-fg:var(--primary); --breadcrumbs-bg:var(--surface-2);
  --link-fg:var(--primary); --link-hover-color:var(--primary-hover); --link-selected-fg:var(--primary);
  --hairline-color:var(--border); --border-color:var(--border); --error-fg:var(--danger);
  --message-success-bg:var(--success-soft); --message-warning-bg:var(--warning-soft); --message-error-bg:var(--danger-soft);
  --darkened-bg:var(--surface-2); --selected-bg:var(--primary-soft); --selected-row:var(--primary-soft);
  --button-bg:var(--color-action); --button-hover-bg:var(--color-action-hover); --button-fg:#fff;
  --default-button-bg:var(--color-action); --default-button-hover-bg:var(--color-action-hover);
  --object-tools-fg:var(--primary); --object-tools-bg:var(--surface-2); --object-tools-hover-bg:var(--surface-3);
}
html[data-theme="dark"] :is(#content h1,#nav-sidebar) { color:var(--text); }
html[data-theme="dark"] :is(.module,#nav-sidebar) { background:var(--surface); border-color:var(--border); }
html[data-theme="dark"] :is(.module h2,.module caption,.inline-group h2,.submit-row,#changelist-filter) { background:var(--surface-2); color:var(--text); border-color:var(--border); }
html[data-theme="dark"] #changelist-filter h2 { background:var(--primary-soft); color:var(--primary); }
html[data-theme="dark"] #toolbar { background:var(--surface-2)!important; }
html[data-theme="dark"] #content :is(input,select,textarea) { border-color:var(--border-strong)!important; }
/* Appearance popover: native radios support Tab, arrows and Space without a focus trap. */
.appearance { position:fixed; left:max(18px,env(safe-area-inset-left)); bottom:calc(18px + env(safe-area-inset-bottom)); z-index:55; font-family:Inter,system-ui,sans-serif; font-size:13px; line-height:1.5; text-align:left; }
.appearance[hidden],.appearance [hidden] { display:none!important; }
.appearance__toggle { display:flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 14px; margin:0; border:1px solid var(--color-border-strong); border-radius:999px; background:var(--color-surface); color:var(--color-text); box-shadow:0 3px 14px #0000000d; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.appearance__toggle:hover { background:var(--color-surface-2); border-color:var(--color-brand); }
.appearance__toggle[aria-expanded=true] { border-color:var(--color-brand); }
.appearance svg { width:18px; height:18px; flex:none; }
.appearance__moon { display:none; }
html[data-theme="dark"] .appearance__sun { display:none; }
html[data-theme="dark"] .appearance__moon { display:block; }
.appearance__panel { position:absolute; bottom:calc(100% + 10px); left:0; width:min(270px,calc(100vw - 36px)); max-height:calc(100dvh - 100px); overflow:auto; padding:18px; border:1px solid var(--color-border); border-radius:16px; background:var(--color-surface); color:var(--color-text); box-shadow:var(--color-shadow); }
.appearance__choices { min-width:0; border:0; padding:0; margin:0; }
.appearance__choices legend { display:block; float:none; width:auto; padding:0; margin:0 0 8px; color:var(--color-text); font:inherit; font-size:14px; font-weight:650; }
.appearance__description { margin:0 0 13px; font-size:12px; color:var(--color-text-2); }
.appearance__choice { position:relative; display:flex; align-items:center; gap:11px; min-height:48px; padding:10px; border:1px solid transparent; border-radius:10px; margin:4px 0 0; font:inherit; font-weight:500; cursor:pointer; color:var(--color-text); }
.appearance__choice:hover { background:var(--color-surface-2); }
.appearance__choice:has(input:checked) { background:var(--color-brand-soft); border-color:var(--color-border-strong); }
.appearance__choice:has(input:focus-visible),.appearance__toggle:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }
.appearance__choice input[type=radio] { order:3; margin:0 0 0 auto; width:16px; height:16px; flex:none; accent-color:var(--color-action); box-shadow:none; }
.appearance__choice input:focus { box-shadow:none; }
.appearance__choice svg { color:var(--color-brand); }
.appearance__choice small { display:block; margin-top:2px; color:var(--color-text-2); font-size:10px; font-weight:400; }
.appearance__sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:600px) { .appearance { left:max(12px,env(safe-area-inset-left)); bottom:calc(12px + env(safe-area-inset-bottom)); } .appearance__toggle { width:44px; height:44px; padding:0; } .appearance__toggle>span { display:none; } }
@media(forced-colors:active) { .appearance__toggle,.appearance__panel,.appearance__choice:has(input:checked) { border:1px solid CanvasText; } .appearance__choice:has(input:checked) { outline:1px solid Highlight; } }
@media(prefers-reduced-motion:reduce) { .appearance * { transition:none!important; animation:none!important; } }
@media print { .appearance { display:none!important; } }

/* Keep small helper text and solid actions readable in both palettes. */
html[data-theme="light"] :is(.muted,.stat-label,.stat-hint,.field .help,.auth-note,.cert-index,.meta,.about-note,.cert-card-counts,.site-footer,.prep-footer){color:var(--color-muted)}
html[data-theme] .btn-primary,html[data-theme] .prep-cta{background:linear-gradient(125deg,var(--color-action),var(--color-action-hover));color:#fff;border-color:var(--color-action)}
html[data-theme] .btn-primary:hover,html[data-theme] .prep-cta:hover{background:var(--color-action-hover);color:#fff}
html[data-theme="dark"] .field.has-error :is(input,textarea,select){border-color:var(--danger)}
html[data-theme="dark"] .q-grid a.correct{border-color:var(--success)}
html[data-theme="dark"] .q-grid a.wrong{border-color:var(--danger)}
@supports selector(:has(input:focus-visible)){.appearance__choice input:focus-visible{outline:none}}