/* Qualification skin: color and surface only. Keep typography, spacing and controls intact. */
/* Important declarations in this layer take precedence over legacy unlayered skins. */
@layer qualification-skin {
html:root {
  background: var(--sd-paper) !important;
  --sd-ink: #171717;
  --sd-paper: #f5f2e9;
  --sd-card: #fffdf7;
  --sd-muted: #66635f;
  --sd-line: #c9c3b7;
  --sd-red: #e83b31;
  --sd-action: #c9342b;
  --sd-on-action: #ffffff;
  --sd-disabled: #e7e2d8;
  --sd-shadow: #17171726;
  --sd-header: #171717;
  --sd-header-text: #fffdf7;
  --sd-tint: #ece6da;
  --teal: var(--sd-action) !important;
  --bg: var(--sd-paper) !important;
  --page: var(--sd-paper) !important;
  --text: var(--sd-ink) !important;
  --ink: var(--sd-ink) !important;
  --muted: var(--sd-muted) !important;
  --brand: var(--sd-header) !important;
  --line: var(--sd-line) !important;
  --web-surface: var(--sd-card) !important;
  --web-text: var(--sd-ink) !important;
  --web-muted: var(--sd-muted) !important;
  --web-line: var(--sd-line) !important;
  --web-link: var(--sd-action) !important;
}
html[data-color-mode="dark"] {
  --sd-ink: #f5f2e9;
  --sd-paper: #191817;
  --sd-card: #252320;
  --sd-muted: #c4beb3;
  --sd-line: #777064;
  --sd-red: #ff8175;
  --sd-action: #f47b6e;
  --sd-on-action: #171717;
  --sd-disabled: #35322d;
  --sd-shadow: #00000055;
  --sd-tint: #302c27;
}
html body,
html body :is(.app, .app-shell, .screen, .web-document, .seo-main),
html body :is(.home-main, .home-buttons, .section-pad, .quiz-body, .seo-content) {
  background: var(--sd-paper) !important;
  color: var(--sd-ink) !important;
}
/* Same header boxes and same artwork, with the portal's ink/red diagonal treatment. */
html body :is(.hero, .brand-bar, .topbar, .quiz-header, .document-header, .book-header) {
  background: linear-gradient(119deg, transparent 0 84%, #e83b31 84% 86%, transparent 86%),
    repeating-linear-gradient(121deg, transparent 0 20px, #ffffff07 20px 21px, transparent 21px 24px),
    var(--sd-header) !important;
  color: var(--sd-header-text) !important;
  border-color: var(--sd-red) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html body :is(.hero-title, .hero-title h1, .hero-title span, .brand-name, .brand-name span,
  .department, .topbar-title, .topbar-sub, .subject-eyebrow, .subject-caption,
  .hero-sales-badge, .hero-sales-note, .hero .web-edition-label, .hero .qualification-portal-nav) {
  color: var(--sd-header-text) !important;
  text-shadow: none !important;
}
html body :is(.subject-hero-art, .subject-art svg, .brand-icon) { filter: grayscale(1) !important; }
html body .brand-bar::before {
  background-image: repeating-linear-gradient(121deg, transparent 0 20px, #ffffff07 20px 21px, transparent 21px 24px) !important;
}
html body.app-nav-ready::before { background: var(--sd-header) !important; }
html body :is(.subject-art, .subject-arrow) {
  background: var(--sd-tint) !important;
  border-color: var(--sd-line) !important;
}
html body .subject-art::after { background: var(--sd-red) !important; }
/* Card sizes, original borders and hit areas stay unchanged. Outlines do not consume layout space. */
html body :is(.subject-card, .big-btn, .card, .category-card, .score-box,
  .home-progress-item, .question-paper, .answer-paper, .web-intro, .web-upgrade,
  .web-purchase, .appearance-settings, .reference-table, .web-completion-notice) {
  background: var(--sd-card) !important;
  color: var(--sd-ink) !important;
  border-color: var(--sd-line) !important;
  border-radius: 3px !important;
  box-shadow: 3px 3px 0 var(--sd-shadow) !important;
}
html body :is(.subject-card, .big-btn) {
  outline: 1px solid var(--sd-ink);
  outline-offset: -1px;
}
html body :is(.subject-title, .subject-name, .subject-card h2, .subject-card h3,
  .menu-label, .web-upgrade .price, .web-purchase .price, .score-big) {
  color: var(--sd-ink) !important;
}
html body :is(.big-btn small, .subject-description, .subject-card p, .menu-desc,
  .web-note, .web-upgrade .fine, .web-purchase .fine, .store-status,
  .web-privacy-note, .web-app-notice, .source-note, .app-menu-subheading) {
  color: var(--sd-muted) !important;
}
html body :is(.menu-icon, .menu-arrow, .subject-arrow, .subject-number) { color: var(--sd-action) !important; }
html body :is(#openPastMenuBtn, #resumeYearBtn, .primary-link, .action-btn.teal, .web-store-link, .closeBtn) {
  background: var(--sd-action) !important;
  color: var(--sd-on-action) !important;
  border-color: var(--sd-ink) !important;
  border-radius: 3px !important;
  box-shadow: 3px 3px 0 var(--sd-shadow) !important;
}
html body :is(#openPastMenuBtn, #resumeYearBtn) :is(small, .menu-icon, .menu-label, .menu-desc, .menu-arrow) {
  color: var(--sd-on-action) !important;
}
/* Keep the original restricted/disabled state and crown, with a neutral surface. */
html body :is(#appRoot, .screen) :is(.web-locked, .locked-feature, .locked-year),
html body :is(.big-btn:disabled, .subject-card[aria-disabled="true"]) {
  background: var(--sd-disabled) !important;
  color: var(--sd-muted) !important;
  border-color: var(--sd-line) !important;
  box-shadow: none !important;
}
html body :is(#appRoot, .screen) :is(.web-locked, .locked-feature, .locked-year) :is(small, .menu-icon, .menu-label) {
  color: var(--sd-muted) !important;
}
/* Floating navigation, dialogs and answer controls retain their original layout and behavior. */
html body :is(.nav-btn, .pill, .action-btn.gray, .app-menu-button, .app-menu-close,
  .sheet, .sheetTop, .app-menu-dialog, .app-menu-heading, .answerDock,
  .fixed-page-nav, .quiz-floating, .pwa-settings, .pwa-update-notice) {
  background: var(--sd-card) !important;
  color: var(--sd-ink) !important;
  border-color: var(--sd-line) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 0 var(--sd-shadow) !important;
}
html body .answerDock { border-radius: 0 !important; }
html body .choice { border-radius: 4px !important; }
html body :is(.qText, .stmt, .sheetTitle, .dockTitle) { color: var(--sd-ink) !important; }
html body :is(.qText, .blankBox, .mode-badge),
html body .inlineChoice:not(.correct):not(.wrong) {
  background: var(--sd-card) !important;
  color: var(--sd-ink) !important;
  border-color: var(--sd-line) !important;
  box-shadow: none !important;
}
html body .modal { background: #17171799 !important; }
html body .line { background: var(--sd-red) !important; }
html body :is(.app-notice, .app-notice p, .app-notice strong, .app-notice a) {
  color: var(--sd-muted) !important;
  border-color: var(--sd-line) !important;
}
html body .choice:not(.correct):not(.wrong):not([aria-pressed="true"]) {
  background: var(--sd-card) !important;
  color: var(--sd-ink) !important;
  border-color: var(--sd-line) !important;
  box-shadow: 0 2px 0 var(--sd-shadow) !important;
}
html body :is(.nav-btn:disabled, .pill:disabled) { color: var(--sd-muted) !important; }
html body :is(.app-menu-links a, .web-links a, .web-footer a, .web-app-link,
  .web-document a:not(.primary-link), .seo-breadcrumbs a) {
  color: var(--sd-ink) !important;
  border-color: var(--sd-line) !important;
}
html body :is(.app-menu-links a:hover, .app-menu-links a:focus-visible,
  .subject-card:hover, .big-btn:hover:not(:disabled):not(#openPastMenuBtn):not(#resumeYearBtn)) {
  background-color: var(--sd-tint) !important;
}
html body :is(button, a, input, select, summary):focus-visible {
  outline-color: var(--sd-red) !important;
}
html body :is(input, select, textarea) {
  accent-color: var(--sd-action);
  caret-color: var(--sd-action);
}
html body :is(.progressTrack, .progress-track) { background: var(--sd-tint) !important; }
html body :is(.progressFill, .progress-fill, #progressFill) { background: var(--sd-red) !important; }
html body :is(.chip, .statusChip, .countPill, #countPill):not(.ok):not(.ng) {
  background: var(--sd-card) !important;
  color: var(--sd-ink) !important;
  border-color: var(--sd-line) !important;
}
html body :is(.blockTitle, .tag.memo, .web-badge) {
  background: var(--sd-tint) !important;
  color: var(--sd-ink) !important;
  border-color: var(--sd-line) !important;
}
html body :is(.hero .web-badge, .hero .night-mode-toggle, .hero .night-mode-controls,
  .hero .night-mode-toggle span, .brand-bar .night-mode-toggle, .topbar .night-mode-toggle) {
  color: var(--sd-header-text) !important;
}
html body :is(.night-mode-toggle input, .night-mode-toggle .toggle-track) { accent-color: var(--sd-action); }
html body .night-mode-toggle input:checked {
  background: var(--sd-action) !important;
  border-color: var(--sd-action) !important;
}
html body .fixed-page-nav button {
  background: var(--sd-card) !important;
  color: var(--sd-ink) !important;
  border-color: var(--sd-line) !important;
}
html body :is(.web-version, #appVersion, .app-version-free, .web-banner, #webBanner) {
  background: var(--sd-card) !important;
  color: var(--sd-muted) !important;
  border-color: var(--sd-line) !important;
}
/* Deliberately do not override .correct/.wrong, .ok/.ng, feedback, highlighted answers or diagrams. */
}