:root {
  --accent: #7cd9db;
  --accent-fill: #9ce4e3;
  --accent-ink: #0d2330;
  --accent-wash: #123b44;
}

:root[data-accent="blue"] {
  --accent: #a6c8ff;
  --accent-fill: #9fc2f7;
  --accent-wash: #203b60;
}

:root[data-accent="green"] {
  --accent: #a9d9ac;
  --accent-fill: #b5dcb1;
  --accent-wash: #263f35;
}

:root[data-accent="plum"] {
  --accent: #e2b8dd;
  --accent-fill: #dfb3da;
  --accent-wash: #45304b;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f7;
  --bg2: #e8edf1;
  --surface: #fff;
  --surface2: #f0f4f6;
  --surface3: #e1e9ee;
  --white: #182933;
  --muted: #526570;
  --line: #d0dae0;
  --line-strong: #a7b8c4;
  --gold: #8c4a16;
  --accent: #1e6470;
  --accent-fill: #246873;
  --accent-ink: #fff;
  --accent-wash: #e4f0f1;
  --shadow: 0 10px 30px #263c5410;
}

:root[data-theme="light"][data-accent="blue"] {
  --accent: #254f86;
  --accent-fill: #345e95;
  --accent-wash: #e7effa;
}

:root[data-theme="light"][data-accent="green"] {
  --accent: #305f43;
  --accent-fill: #38674b;
  --accent-wash: #e7f1e9;
}

:root[data-theme="light"][data-accent="plum"] {
  --accent: #714266;
  --accent-fill: #785071;
  --accent-wash: #f1e8f0;
}

:root[data-theme="light"], :root[data-accent]:not([data-accent="classic"]) {
  --cyan: var(--accent);
}

.avatar[data-avatar] {
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0;
}

.avatar[data-avatar] img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.topbar [aria-current="page"] { border-color: var(--accent); }
.profile-page { max-width: 760px; margin-inline: auto; }
.profile-section { margin-bottom: 16px; padding: clamp(18px, 4vw, 30px); }
.profile-section h2 { margin-bottom: 18px; font-size: 20px; }
.profile-identity, .profile-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.profile-identity .profile-avatar { width: 72px; height: 72px; font-size: 26px; }
.profile-identity p { margin: 0; }
.profile-name { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.profile-actions { margin-top: 16px; }
.profile-actions [hidden] { display: none; }
.profile-file-help { margin: 10px 0 0; font-size: 12px; }
.profile-section fieldset { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.profile-section legend { margin-bottom: 8px; font-weight: 700; }
.profile-options { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}
.profile-option:has(input:checked) { background: var(--accent-wash); border-color: var(--accent); }
.profile-option input { margin: 0; accent-color: var(--accent-fill); }
.profile-swatch { width: 11px; height: 11px; background: #178f94; }
.profile-swatch[data-swatch="blue"] { background: #5582bb; }
.profile-swatch[data-swatch="green"] { background: #5e9367; }
.profile-swatch[data-swatch="plum"] { background: #9b6694; }
.profile-status { margin: 8px 0 0; font-size: 13px; color: var(--accent); }
.profile-status:empty { display: none; }

.study-sheet, .personal-programme, .skill-group {
  margin-block: 14px;
  padding: 14px 18px;
}
.study-sheet > summary, .study-comparison > summary, .skill-group > summary { cursor: pointer; font-weight: 700; }
.study-sheet dl { line-height: 1.6; }
.study-sheet dt { font-weight: 700; }
.study-sheet dd { margin: 2px 0 10px; }
.study-sheet [role="status"], .personal-programme [role="status"] { margin: 8px 0 0; }
.study-sheet [role="status"]:empty, .personal-programme [role="status"]:empty, [data-programme-status]:empty { display: none; }
.study-comparison {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--surface2);
}
.study-comparison > p { margin: 10px 0; line-height: 1.6; }
.study-comparison legend { margin: 8px 0; font: inherit; font-weight: 700; }
.study-comparison textarea, .search-scope select {
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg2);
  color: var(--white);
  font: inherit;
}
.study-comparison textarea { display: block; width: 100%; margin: 5px 0 10px; }
.comparison-feedback { margin-top: 8px; }
.comparison-feedback p { margin: 5px 0; }
.personal-programme h2, .skill-group h2 { margin-bottom: 8px; font-size: 18px; }
.personal-programme ol { margin: 8px 0; padding: 0; list-style: none; }
.skill-group ul { margin: 8px 0; padding: 0; list-style: none; }
.personal-programme li, .skill-group li { padding: 8px 0; border-top: 1px solid var(--line); }
.personal-programme li, .skill-map li { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.personal-programme li small, .skill-group li small { display: block; margin-top: 3px; }
.skill-group a, .personal-programme li a { text-decoration: underline; }
.skill-group p { margin: 5px 0; }
.skill-group summary small { display: block; margin: 4px 0 0; color: var(--muted); }
.programme-actions { display: flex; gap: 6px; align-items: center; }
.programme-actions .btn { min-width: 36px; padding: 5px; }
.helpful-label[hidden] { display: none; }
.helpful-label + button { margin-inline-start: 8px; }
.search-scope { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; }

.annex-page { max-width: 780px; margin-inline: auto; }
.annex-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 28px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.annex-links a:hover, .annex-account-links a:hover, .annex-page p a { text-decoration: underline; }
.annex-account-links, .public-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 16px 0; }
.annex-account-links a, .annex-page p a { color: var(--accent); }
.public-shell { max-width: 980px; min-height: 100vh; margin-inline: auto; padding: 0 clamp(16px, 4vw, 44px) 26px; }
.public-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.public-bar .brand { padding: 0; }
.public-main { margin: clamp(24px, 6vw, 70px) auto 0; }
.public-main .recovery-page { max-width: 500px; margin-inline: auto; }
.public-intro .page-head h1 { font-size: clamp(32px, 6vw, 54px); }
.public-course-list { padding-left: 1.5em; }
.public-course-list li + li { margin-top: 12px; }
.public-course-list p { margin: 3px 0 0; color: var(--muted); }
.annex-page details + details { margin-top: 12px; }
.annex-page summary, .profile-page details summary { cursor: pointer; font-weight: 700; }
.annex-page details > summary + p { margin-top: 8px; }
.annex-page .admin-group h3 { margin: 18px 0 8px; }
.annex-page .admin-group > details { padding: 10px 0; border-bottom: 1px solid var(--line); }
.annex-form, .admin-select { display: grid; gap: 10px; margin-top: 12px; }
.annex-form label { display: grid; gap: 5px; font-weight: 650; }
.annex-form :is(input, select, textarea), .admin-select select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  background: var(--bg);
  color: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font: inherit;
}
.annex-form textarea { resize: vertical; }
.annex-form p { margin: 0; }
.annex-form button[type="submit"] { justify-self: start; }
.annex-status { color: var(--accent); margin: 8px 0 0; }
.annex-status:empty { display: none; }
.annex-message { white-space: pre-wrap; overflow-wrap: anywhere; }
[data-recovery-value] { display: block; margin: 8px 0; overflow-wrap: anywhere; font-size: 15px; }

:root[data-theme="light"] body { background: var(--bg); }
:root[data-theme="light"] .sidebar { background: var(--surface); }
:root[data-theme="light"] :is(.brand-text small, .side-caption, .nav-item, .nav-footer, .mobile-nav) { color: var(--muted); }
:root[data-theme="light"] .nav-item:hover { background: var(--surface2); color: var(--white); }
:root[data-theme="light"] .nav-item.active,
:root[data-accent]:not([data-accent="classic"]) .nav-item.active {
  background: var(--accent-wash);
  border-color: var(--accent);
  box-shadow: none;
  color: var(--white);
}
:root[data-theme="light"] .mobile-nav.active,
:root[data-accent]:not([data-accent="classic"]) .mobile-nav.active,
:root[data-theme="light"] .nav-item.active .ic,
:root[data-accent]:not([data-accent="classic"]) .nav-item.active .ic {
  color: var(--accent);
}
:root[data-theme="light"] :is(.panel, .level-card, .mini-stat, .module, .badge-mini, .badges-head, .reward-modal, .notification-panel, .mobile-bar) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--white);
}
:root[data-theme="light"] :is(.circle-btn, .top-xp, .activity-bubble, .player-plan, .player-correction, .prompt-box, .step-num, .btn-ghost, .toast) {
  background: var(--surface2);
  border-color: var(--line-strong);
  color: var(--white);
}
:root[data-theme="light"] .topbar .circle-btn:hover { background: var(--accent-wash); }
:root[data-theme="light"] :is(.top-xp strong, .level-nums, .level-card p, .player-reward, .player-score strong, .reward-modal .earned) { color: var(--gold); }
:root[data-theme="light"] :is(.course-info p, .course-meta, .module small, .module .m-footer, .activity-entry p, .activity-entry small, .mini-stat span, .page-head p, .lesson-body p, .lesson-body li, .step small, .badge-card p, .quiz-result p, .reward-modal p, .badge-mini.locked span, .badge-card.locked strong, .catalog-preview, .player-prerequisite, .player-report, .player-score span, .notification-list small) { color: var(--muted); }
:root[data-theme="light"] :is(.activity-entry strong, .notification-list a, .player-copy, .player-plan summary, .player-option, .quiz-option, .prompt-box code, .copy-btn) { color: var(--white); }
:root[data-theme="light"] :is(.notification-list a:hover, .notification-list a:focus-visible, .player-outline button:hover) { background: var(--surface2); }
:root[data-theme="light"] .player-callout { background: var(--surface2); }
:root[data-theme="light"] .player-outline button { color: var(--white); }
:root[data-theme="light"] :is(.player-outline button[aria-current], .player-option:has(input:checked), .quiz-option.selected) {
  background: var(--accent-wash);
  color: var(--white);
  border-color: var(--accent);
}
:root[data-theme="light"] :is(.player-outline small, .player-outline-icon, .player-outline button[aria-current] small, .player-outline button[aria-current] .player-outline-icon, .player-plan summary strong) { color: var(--accent); }
:root[data-theme="light"] :is(.quiz-option, .player-option, .copy-btn, .player-choice) { background: var(--surface2); border-color: var(--line-strong); }
:root[data-theme="light"] .quiz-option.correct { background: #e2f1e7; border-color: #649373; }
:root[data-theme="light"] .quiz-option.wrong { background: #f7e7e4; border-color: #a76d61; }
:root[data-theme="light"] .quiz-feedback { background: #e2f1e7; color: #264d32; }
:root[data-theme="light"] .quiz-feedback.error { background: #f7e7e4; color: #763727; }
:root[data-theme="light"] :is(.forum-feedback, .account-feedback) { color: #872d21; }
:root[data-theme="light"] :is(.forum-compose, .catalog-tools, .account-diagnostic, .account-panel, .player-report) :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea) {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--white);
}

:is(:root[data-theme="light"], :root[data-accent]:not([data-accent="classic"])) .btn-primary {
  background: var(--accent-fill);
  color: var(--accent-ink);
}
:is(:root[data-theme="light"], :root[data-accent]:not([data-accent="classic"])) :is(.link-btn, .catalog-details a, [data-search-results] a, .player-prerequisite a, .player-correction summary, .player-sources a) {
  color: var(--accent);
}
:is(:root[data-theme="light"], :root[data-accent]:not([data-accent="classic"])) :is(.eyebrow, .btn-outline, .pill-cyan) { color: var(--accent); }
:root[data-theme="light"] .btn-outline { background: var(--surface); border-color: var(--line-strong); }
:root[data-theme="light"] :is(.pill, .pill-cyan) { background: var(--surface2); border-color: var(--line); color: var(--white); }
:root[data-theme="light"] :is(.hero, .side-quote) { color: #f8f7f1; }
:root[data-theme="light"] .hero :is(.eyebrow, .hero-desc, .hero-meter span) { color: #e0ecf2; }
:root[data-theme="light"] .lesson-banner :is(.banner-label, .banner-foot) { background: #19384e; color: #f8f7f1; }
:root[data-theme="light"] :is(#course-catalog, .account-diagnostic, .course-resume) :focus-visible { outline-color: var(--accent); }

@media (max-width: 760px) {
  .profile-page { padding-top: 16px; }
}