/* --- REFINED LIGHT / DARK THEME (VISUAL-ONLY OVERRIDES) --- */
html {
  background: var(--page-bg);
  color-scheme: light;
}
html.dark-mode {
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at 14% -10%, rgba(37, 99, 235, 0.055), transparent 34%),
    linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 44%, var(--page-bg) 100%) !important;
  color: var(--text-primary) !important;
}
.dark-mode body {
  background:
    radial-gradient(circle at 16% -10%, rgba(255, 255, 255, 0.038), transparent 34%),
    linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 46%, var(--page-bg) 100%) !important;
}

button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-border);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--focus-ring);
}
button:disabled,
.choice-btn[disabled],
input:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none !important;
}

.greeting-container,
.greeting-container * {
  color: var(--text-primary) !important;
}
.greeting-container > div:first-child {
  color: var(--text-secondary) !important;
}

.game-container,
.quick-insights-card,
.analytics-card {
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface)) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-card), var(--inner-highlight) !important;
}
.board-countdown-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.outside-control-btn {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-control), var(--inner-highlight);
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.outside-control-btn:hover {
  background: var(--surface-hover) !important;
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
  box-shadow: 0 7px 18px var(--control-hover-shadow), var(--inner-highlight);
}
.outside-control-btn:active {
  background: var(--surface-muted) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14);
}

.dashboard-title-row h2,
.header-panel,
.mode-badge,
.question-title,
.question-title span,
.quick-insights-title,
.analytics-title,
.confirm-title,
.welcome-title {
  color: var(--text-primary) !important;
}

.import-subject-btn,
.back-dash-btn {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-control), var(--inner-highlight);
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.import-subject-btn:hover,
.back-dash-btn:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
  box-shadow: 0 7px 18px var(--control-hover-shadow), var(--inner-highlight);
}
.import-subject-btn:active,
.back-dash-btn:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14);
}

.mode-btn {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--inner-highlight) !important;
}
.mode-btn .mode-title {
  color: var(--text-primary) !important;
}
.mode-btn .mode-subtitle {
  color: var(--text-secondary) !important;
}
.mode-btn:hover,
.mode-btn:hover * {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
.mode-btn:hover {
  box-shadow: var(--shadow-control), var(--inner-highlight) !important;
}
html:not(.dark-mode) .mode-btn.active-study,
html:not(.dark-mode) .mode-btn.active-exam,
html:not(.dark-mode) .mode-btn.active-flashcards {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.08),
    0 8px 20px rgba(37, 99, 235, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}
html:not(.dark-mode) .mode-btn.active-study *,
html:not(.dark-mode) .mode-btn.active-exam *,
html:not(.dark-mode) .mode-btn.active-flashcards * {
  background: transparent !important;
  color: var(--accent) !important;
}
.dark-mode .mode-btn.active-study,
.dark-mode .mode-btn.active-exam,
.dark-mode .mode-btn.active-flashcards {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--accent-border) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.09),
    0 0 18px rgba(255, 255, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
}
.dark-mode .mode-btn.active-study *,
.dark-mode .mode-btn.active-exam *,
.dark-mode .mode-btn.active-flashcards * {
  background: transparent !important;
  color: var(--text-primary) !important;
}

.exam-pop-container {
  background: var(--surface-elevated) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-popover), var(--inner-highlight);
}
.exam-pop-lbl,
.study-pop-lbl {
  color: var(--text-secondary) !important;
}
.exam-pop-opt-btn,
.flashcard-opt-btn {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--inner-highlight);
}
.exam-pop-opt-btn:hover,
.flashcard-opt-btn:hover {
  background: var(--surface-hover) !important;
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
}
html:not(.dark-mode) .exam-pop-opt-btn.active,
html:not(.dark-mode) .study-pop-opt-btn.active,
html:not(.dark-mode) .flashcard-opt-btn.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
}
.dark-mode .exam-pop-opt-btn.active,
.dark-mode .study-pop-opt-btn.active,
.dark-mode .flashcard-opt-btn.active {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
}

.matrix-tabs-container {
  border-bottom-color: var(--border-subtle) !important;
}
.matrix-tab {
  color: var(--text-secondary) !important;
}
.matrix-tab:hover {
  color: var(--text-primary) !important;
  opacity: 1;
}
html:not(.dark-mode) .matrix-tab.active {
  color: var(--accent) !important;
}
html:not(.dark-mode) .matrix-tab.active::after {
  background: var(--accent) !important;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.16);
}
.dark-mode .matrix-tab.active {
  color: var(--text-primary) !important;
}
.dark-mode .matrix-tab.active::after {
  background: var(--text-primary) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.16);
}

.empty-state {
  background: var(--surface-muted) !important;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--inner-highlight);
}
.empty-state-icon {
  color: var(--text-muted) !important;
}
.empty-state-text {
  color: var(--text-secondary) !important;
}

.subj-card,
.reviewer-item,
.insight-item {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--inner-highlight);
}
.subj-card:hover,
.subj-card:hover * {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--accent-border) !important;
}
.subj-card:hover {
  box-shadow: var(--shadow-control), var(--inner-highlight);
}
.subj-remove-btn {
  background: var(--surface-elevated) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--inner-highlight);
}
.subj-remove-btn:hover {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}

.header-panel,
.action-bar,
.reviewer-scroll-view,
.analytics-title,
.metric-row,
.insight-set-title,
.insight-table-header {
  border-color: var(--border-subtle) !important;
}
.mode-badge,
.question-title,
.question-title span,
.flashcard-face-content,
.insight-col-subj,
.insight-col-stat,
.sub-tag {
  color: var(--text-primary) !important;
}
.score-box,
.timer-box,
.timer-box.study-mode,
.timer-box.flashcard-mode,
.reviewer-ans-box,
.stat-good,
.stat-bad {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--inner-highlight);
}
.timer-box.urgent {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}

.choice-btn {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--inner-highlight);
}
.choice-btn:hover:not([disabled]),
.choice-btn:hover:not([disabled]) * {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--accent-border) !important;
}
.choice-btn.correct {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: var(--success) !important;
  color: var(--success) !important;
}
.choice-btn.wrong {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

.next-btn,
.ultimate-btn,
.welcome-continue-btn {
  background: var(--text-primary) !important;
  color: var(--surface) !important;
  border-color: var(--text-primary) !important;
  box-shadow: var(--shadow-control);
}
.next-btn:hover,
.ultimate-btn:hover,
.welcome-continue-btn:hover {
  background: var(--text-primary) !important;
  color: var(--surface) !important;
  filter: brightness(0.92);
  box-shadow: 0 8px 20px var(--control-hover-shadow);
}
.dark-mode .next-btn:hover,
.dark-mode .ultimate-btn:hover,
.dark-mode .welcome-continue-btn:hover {
  filter: brightness(1.08);
}

.file-upload-box {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--inner-highlight);
}
.file-upload-box:hover,
.file-upload-box:hover * {
  background: var(--surface-hover) !important;
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
}

.flashcard-face {
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface-muted)) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-card), var(--inner-highlight);
}
.flashcard-face-lbl,
.flashcard-hint-tap {
  color: var(--text-secondary) !important;
}
.active-recall-input {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--inner-highlight);
}
.active-recall-input::placeholder,
.welcome-input::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}
.active-recall-input:focus {
  background: var(--surface) !important;
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.insights-btn {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-control), var(--inner-highlight);
}
.insights-btn:hover {
  background: var(--surface-hover) !important;
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
}
.insight-set-title,
.insight-table-header {
  color: var(--text-secondary) !important;
}

.quick-insights-title {
  color: var(--text-primary) !important;
}
.quick-insights-col:not(:last-child)::after {
  background: var(--border-subtle) !important;
  opacity: 1;
}
.quick-insights-col:nth-child(1) .quick-insights-count,
.quick-insights-col:nth-child(1) .quick-insights-label,
.quick-insights-col:nth-child(1) .quick-insights-icon {
  color: var(--success) !important;
}
.quick-insights-col:nth-child(2) .quick-insights-count,
.quick-insights-col:nth-child(2) .quick-insights-label,
.quick-insights-col:nth-child(2) .quick-insights-icon {
  color: var(--warning) !important;
}
.quick-insights-col:nth-child(3) .quick-insights-count,
.quick-insights-col:nth-child(3) .quick-insights-label,
.quick-insights-col:nth-child(3) .quick-insights-icon {
  color: var(--danger) !important;
}
.quick-insights-range {
  color: var(--text-muted) !important;
  opacity: 1;
}

.countdown-title,
.ticker-value {
  color: var(--text-primary) !important;
}
.countdown-subtitle {
  color: var(--text-secondary) !important;
}
.ticker-lbl {
  color: var(--text-muted) !important;
}

.welcome-overlay,
.confirm-overlay {
  background: var(--overlay-bg) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.welcome-dialog,
.confirm-box {
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface)) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-dialog), var(--inner-highlight);
}
.welcome-eyebrow,
.welcome-description,
.welcome-instruction,
.welcome-label,
.confirm-desc {
  color: var(--text-secondary) !important;
}
.welcome-input {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--inner-highlight);
}
.welcome-input:focus {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.btn-cancel {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}
.btn-danger {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}

.reviewer-scroll-view::-webkit-scrollbar-thumb {
  background: var(--border-strong);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* --- FULLSCREEN / JSFIDDLE PRESENTATION CLEANUP --- */
/*
 * The JSFiddle show-page badge is platform chrome, not dashboard content.
 * Exact-title selectors avoid affecting any application control.
 */
a[title="Edit in JSFiddle"],
a[aria-label="Edit in JSFiddle"],
body > *:has(a[title="Edit in JSFiddle"]),
body > *:has(a[aria-label="Edit in JSFiddle"]),
.jsfiddle-badge,
#jsfiddle-badge,
.edit-in-jsfiddle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html:fullscreen,
html:-webkit-full-screen {
  width: 100%;
  min-height: 100%;
  background: var(--page-bg) !important;
}

html:fullscreen body,
html:-webkit-full-screen body {
  min-height: 100vh;
}