/* Shared device theme. Loaded before every page stylesheet. */
:root {
  color-scheme: light;

  --paper: #f4efe4;
  --paper-deep: #ece3d2;
  --card: rgba(255, 252, 246, 0.76);
  --card-solid: #fbf8f1;
  --card-raised: #fffdf8;
  --ink: #193d33;
  --ink-deep: #102a23;
  --ink-soft: #4e655c;
  --muted: #59685f;
  --line: rgba(25, 61, 51, 0.11);
  --line-strong: rgba(25, 61, 51, 0.2);
  --soft: rgba(25, 61, 51, 0.045);
  --soft-strong: rgba(25, 61, 51, 0.08);
  --cinnabar: #a3402b;
  --cinnabar-deep: #9d3c29;
  --cinnabar-soft: rgba(194, 82, 59, 0.09);
  --jade: #2b6857;
  --jade-soft: rgba(59, 124, 104, 0.1);
  --gold: #80602b;
  --gold-soft: rgba(179, 138, 72, 0.11);
  --button-bg: #193d33;
  --button-text: #fbf7ed;
  --ring-track: rgba(25, 61, 51, 0.085);
  --ring-color: var(--cinnabar);
  --ring-soft: var(--cinnabar-soft);
  --shadow: 0 28px 70px -34px rgba(32, 54, 44, 0.48), 0 2px 8px rgba(32, 54, 44, 0.03);
  --shadow-soft: 0 12px 32px -20px rgba(32, 54, 44, 0.45);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --font-display: "Noto Serif SC Variable", "Songti SC", STSong, SimSun, serif;
  --font-sans: "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-num: "Noto Sans SC Variable", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --shell-max: 1240px;
  --shell-pad: 28px;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --paper: #0f1916;
  --paper-deep: #0a1210;
  --card: rgba(23, 36, 31, 0.78);
  --card-solid: #17241f;
  --card-raised: #1b2a24;
  --ink: #efe8d8;
  --ink-deep: #faf4e7;
  --ink-soft: #c5cbbc;
  --muted: #aebbb1;
  --line: rgba(239, 232, 216, 0.1);
  --line-strong: rgba(239, 232, 216, 0.19);
  --soft: rgba(239, 232, 216, 0.055);
  --soft-strong: rgba(239, 232, 216, 0.095);
  --cinnabar: #e0795f;
  --cinnabar-deep: #ef967f;
  --cinnabar-soft: rgba(224, 121, 95, 0.13);
  --jade: #7bb9a2;
  --jade-soft: rgba(123, 185, 162, 0.12);
  --gold: #d3b16d;
  --gold-soft: rgba(211, 177, 109, 0.13);
  --button-bg: #e8dfcc;
  --button-text: #15241e;
  --ring-track: rgba(239, 232, 216, 0.1);
  --shadow: 0 32px 90px -34px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.16);
  --shadow-soft: 0 16px 40px -24px rgba(0, 0, 0, 0.7);
}
/* Semantic surfaces and states shared by learning and administration pages. */
:root {
  --bg: var(--paper);
  --accent: var(--jade);
  --input-bg: #fffdf8;
  --input-border: var(--line-strong);
  --input-readonly: #ece7dc;
  --input-disabled: #e5e2d9;
  --placeholder: var(--muted);
  --focus: #a3402b;
  --focus-soft: rgba(163, 64, 43, .15);
  --danger: #a3402b;
  --error-bg: #fbebe5;
  --success: #2b6857;
  --success-bg: #e7eee6;
  --warning: #785718;
  --warning-bg: #f5ecd7;
  --button-hover: #294f40;
  --action-bg: #c7352c;
  --action-hover: #b52a23;
  --action-active: #9e241e;
  --action-paused: #963b29;
  --action-text: #fffaf1;
  --switch-thumb: #fffaf1;
  --overlay: rgba(13, 25, 21, .52);
}
html[data-theme="dark"] {
  --input-bg: #1b2a24;
  --input-border: var(--line-strong);
  --input-readonly: #202f28;
  --input-disabled: #26342c;
  --focus: #e0795f;
  --focus-soft: rgba(224, 121, 95, .18);
  --danger: #f1a08b;
  --error-bg: #39251f;
  --success: #9bd4b7;
  --success-bg: #203b30;
  --warning: #e2c183;
  --warning-bg: #393022;
  --button-hover: #f5ebd6;
  --switch-thumb: #15241e;
  --overlay: rgba(13, 25, 21, .52);
}
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  background: var(--input-bg); color: var(--ink); border: 1px solid var(--input-border);
}
:where(input, textarea)::placeholder { color: var(--placeholder); opacity: 1; }
:where(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--accent); }
:where(select option, select optgroup) { color: var(--ink); background: var(--card-raised); }
html[data-theme] :is(button, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
html[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):disabled {
  color: var(--muted); background: var(--input-disabled); border-color: var(--input-border); opacity: 1; cursor: not-allowed;
}
html[data-theme] :is(input, textarea)[readonly] {
  color: var(--ink-soft); background: var(--input-readonly); border-color: var(--input-border);
}
html[data-theme] :is(input, select, textarea)[aria-invalid="true"],
html[data-theme] :is(input, select, textarea):user-invalid { border-color: var(--danger); }
html[data-theme] input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
}
:where(input[type="file"]) { max-width: 100%; min-width: 0; }
input::file-selector-button {
  font: inherit; color: var(--button-text); background: var(--button-bg);
  border: 1px solid var(--input-border); border-radius: 6px; padding: 4px 10px; margin-right: 10px; cursor: pointer;
}
input::file-selector-button:hover { background: var(--button-hover); }
input:disabled::file-selector-button { color: var(--muted); background: var(--input-disabled); cursor: not-allowed; }

/* Keep component focus treatments; text fields never add a second outer frame. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
  outline: none;
  border-color: var(--cinnabar);
  background: var(--card-raised);
}
html[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus-visible {
  outline: none;
  outline-offset: 0;
}