/* QPal neutral charcoal + orange visual system.
   The presentation follows the supplied modern charcoal-card reference while
   preserving QPal's orange identity from the app icon. This final theme layer
   changes presentation only. QPal logic, data, authentication, assessment
   scoring, synchronization, and AI usage remain unchanged. Semantic success,
   warning, and danger colors remain independent from the brand palette. */

:root,
html.qpal-color-locked {
  --page-bg: #f3f3f1;
  --page-bg-alt: #e9e9e6;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-muted: #ecece9;
  --surface-hover: #e3e3df;

  --text-primary: #171717;
  --text-secondary: #5e5e5a;
  --text-muted: #85857f;

  --border-subtle: #d5d5d0;
  --border-strong: #b9b9b2;

  --accent: #c94e00;
  --accent-hover: #a93f00;
  --accent-soft: rgba(201, 78, 0, 0.09);
  --accent-border: #df7841;
  --accent-contrast: #ffffff;
  --accent-gold: #c94e00;
  --accent-coral: #c94e00;

  --secondary: #525250;
  --secondary-hover: #343432;
  --secondary-soft: #ecece9;
  --secondary-border: #c9c9c4;
  --secondary-contrast: #ffffff;

  --success: #14805e;
  --warning: #a96f00;
  --danger: #c84252;
  --danger-soft: #fff0f2;
  --focus-ring: rgba(201, 78, 0, 0.22);

  --shadow-card: 0 15px 36px rgba(26, 26, 25, 0.1);
  --shadow-control: 0 6px 17px rgba(26, 26, 25, 0.09);
  --shadow-popover: 0 18px 44px rgba(18, 18, 18, 0.18);
  --shadow-dialog: 0 28px 78px rgba(18, 18, 18, 0.24);
  --control-hover-shadow: rgba(201, 78, 0, 0.15);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.96);
  --overlay-bg: rgba(20, 20, 20, 0.54);

  /* Compact navigation width: longest label plus icon and comfortable space. */
  --qpal-nav-width: 274px;
  --qpal-nav-gutter: 14px;

  /* Legacy variables retained for existing QPal markup and inline styles. */
  --bg-white: var(--text-primary);
  --bg-black: var(--surface);
  --hover-gray: var(--surface-hover);

  /* Feature aliases used by the Study Next and Mock Board interfaces. */
  --qpal-text: var(--text-primary);
  --qpal-heading: var(--text-primary);
  --qpal-muted: var(--text-secondary);
  --qpal-accent: var(--accent);
  --qpal-accent-soft: var(--accent-soft);
  --qpal-border: var(--border-subtle);
  --qpal-border-strong: var(--border-strong);
  --qpal-card: var(--surface-elevated);
  --qpal-elevated: var(--surface-elevated);
}

html.dark-mode,
html.dark-mode.qpal-color-locked {
  --page-bg: #141414;
  --page-bg-alt: #191919;
  --surface: #242424;
  --surface-elevated: #292929;
  --surface-muted: #303030;
  --surface-hover: #383838;

  --text-primary: #f1f1ef;
  --text-secondary: #b5b5b1;
  --text-muted: #858582;

  --border-subtle: #3a3a39;
  --border-strong: #50504e;

  --accent: #ff6b35;
  --accent-hover: #ff8257;
  --accent-soft: rgba(255, 107, 53, 0.13);
  --accent-border: #ff7a49;
  --accent-contrast: #141414;
  --accent-gold: #ff6b35;
  --accent-coral: #ff6b35;

  --secondary: #d2d2ce;
  --secondary-hover: #f0f0ed;
  --secondary-soft: rgba(255, 255, 255, 0.07);
  --secondary-border: #4a4a48;
  --secondary-contrast: #141414;

  --success: #4fd0a0;
  --warning: #f0bd4c;
  --danger: #ff7d88;
  --danger-soft: rgba(255, 125, 136, 0.12);
  --focus-ring: rgba(255, 107, 53, 0.25);

  --shadow-card: 0 19px 46px rgba(0, 0, 0, 0.4);
  --shadow-control: 0 8px 20px rgba(0, 0, 0, 0.29);
  --shadow-popover: 0 20px 48px rgba(0, 0, 0, 0.54);
  --shadow-dialog: 0 30px 82px rgba(0, 0, 0, 0.65);
  --control-hover-shadow: rgba(255, 107, 53, 0.16);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.065);
  --overlay-bg: rgba(8, 8, 8, 0.82);

  --bg-white: var(--text-primary);
  --bg-black: var(--surface);
  --hover-gray: var(--surface-hover);
}

html {
  background: var(--page-bg) !important;
}

body,
.dark-mode body,
html.qpal-color-locked body,
html.dark-mode.qpal-color-locked body {
  background:
    radial-gradient(circle at 10% -8%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 32%),
    radial-gradient(circle at 94% 3%, color-mix(in srgb, var(--text-primary) 3%, transparent), transparent 28%),
    linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 46%, var(--page-bg) 100%) !important;
  color: var(--text-primary) !important;
}

/* Full-app neutral surfaces: login, create account, password reset, dashboard,
   assessments, profile, admin, libraries, history, and all popup families. */
html.qpal-color-locked :is(
  .dashboard-container,
  .main-dashboard-card,
  .game-container,
  .quick-insights-card,
  .dashboard-insights-card,
  .dashboard-review-tips-card,
  .dashboard-quick-tip-card,
  .analytics-card,
  .countdown-card,
  .user-auth-dialog,
  .user-signout-dialog,
  .user-profile-dialog,
  .welcome-dialog,
  .admin-dialog,
  .confirm-box,
  .modal-content,
  .quick-tip-popup,
  .quick-tip-admin-dialog,
  .quick-tip-admin-control-dialog,
  .qpal-shared-library-dialog,
  .about-author-dialog,
  .developer-email-contact-dialog,
  .developer-icon-picker-dialog,
  .mistakes-review-modal,
  .mistakes-review-card,
  .mistakes-review-info-dialog,
  .qpal-mock-board-dialog,
  .qpal-mock-info-dialog,
  .qbao-dialog,
  .qbao-exam-review-dialog,
  .attempt-history-dialog,
  .central-admin-manager,
  .central-admin-search-dialog,
  .central-admin-question-detail-dialog,
  .central-admin-question-editor,
  .central-admin-score-dialog,
  [role='dialog']
) {
  background-color: var(--surface) !important;
  background-image: 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;
}

:where(
  .user-auth-overlay,
  .user-signout-overlay,
  .user-profile-overlay,
  .welcome-overlay,
  .admin-overlay,
  .confirm-overlay,
  .quick-tip-popup-overlay,
  .quick-tip-admin-overlay,
  .qpal-shared-library-overlay,
  .about-author-overlay,
  .developer-email-contact-overlay,
  .developer-icon-picker-overlay,
  .mistakes-review-modal-overlay,
  .mistakes-review-info-overlay,
  .mistakes-review-clear-confirm-overlay,
  .qpal-mock-board-overlay,
  .qpal-mock-info-overlay,
  .qbao-overlay,
  .qbao-exam-review-overlay,
  .attempt-history-overlay,
  .central-admin-manager-overlay,
  .central-admin-search-overlay,
  .central-admin-question-detail-overlay,
  .central-admin-question-overlay,
  .central-admin-delete-overlay,
  .central-admin-editor-overlay,
  .unfinished-assessment-overlay,
  .flashcard-import-restriction-overlay,
  .qpal-library-question-overlay
) {
  background: var(--overlay-bg) !important;
}

:where(
  h1, h2, h3, h4, h5, h6,
  .user-auth-title,
  .welcome-title,
  .admin-dialog-title,
  .confirm-title,
  .modal-title,
  .question-title,
  .dashboard-title-row h2,
  .quick-insights-title,
  .analytics-title,
  .qpal-study-next-heading h2,
  .qpal-mock-board-header h2,
  .qpal-mock-info-header h2,
  .qbao-message-heading,
  .qbao-message-formatted strong
) {
  color: var(--text-primary) !important;
}

:where(
  p,
  .user-auth-description,
  .welcome-description,
  .admin-dialog-description,
  .confirm-desc,
  .question-subtitle,
  .dashboard-subtitle,
  .empty-state-text,
  .qpal-study-next-copy p,
  .qpal-mock-board-header p,
  .qpal-mock-info-body > p,
  .qbao-disclaimer,
  .qbao-message-meta
) {
  color: var(--text-secondary) !important;
}

/* Inputs and forms across authentication, password recovery, profile, admin,
   import, search, and assessment setup use the same neutral orange focus treatment. */
:where(
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  textarea,
  select,
  .user-auth-input,
  .welcome-input,
  .admin-input,
  .central-admin-search-input-row input,
  .central-admin-question-detail-choice-input,
  .user-profile-edit-form input
) {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--inner-highlight) !important;
}

:where(
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  textarea,
  select,
  .user-auth-input,
  .welcome-input,
  .admin-input,
  .central-admin-search-input-row input,
  .central-admin-question-detail-choice-input,
  .user-profile-edit-form input
):focus,
:where(
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  textarea,
  select,
  .user-auth-input,
  .welcome-input,
  .admin-input,
  .central-admin-search-input-row input,
  .central-admin-question-detail-choice-input,
  .user-profile-edit-form input
):focus-visible {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--secondary-border) !important;
  box-shadow: 0 0 0 4px var(--focus-ring), var(--inner-highlight) !important;
  outline: none !important;
}

:where(input[type='checkbox'], input[type='radio'], input[type='range']) {
  accent-color: var(--secondary) !important;
}

/* Orange remains the primary QPal action color. */
:where(
  .admin-btn-primary,
  .user-auth-submit,
  .user-signout-button.primary,
  .user-profile-primary-button,
  .welcome-submit,
  .primary-btn,
  .ultimate-btn,
  #ultimate-trigger,
  .mistakes-review-open,
  .mistakes-review-start,
  .unfinished-assessment-resume,
  .qpal-shared-library-add:not(.is-added),
  .quick-tip-launch-button,
  .developer-email-contact-copy,
  .qpal-mock-start,
  .qpal-mock-mode-details,
  .qbao-trigger,
  button[type='submit']:not(.btn-danger)
) {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}

:where(
  .admin-btn-primary,
  .user-auth-submit,
  .user-signout-button.primary,
  .user-profile-primary-button,
  .welcome-submit,
  .primary-btn,
  .ultimate-btn,
  #ultimate-trigger,
  .mistakes-review-open,
  .mistakes-review-start,
  .unfinished-assessment-resume,
  .qpal-shared-library-add:not(.is-added),
  .quick-tip-launch-button,
  .developer-email-contact-copy,
  .qpal-mock-start,
  .qpal-mock-mode-details,
  .qbao-trigger,
  button[type='submit']:not(.btn-danger)
):hover,
:where(
  .admin-btn-primary,
  .user-auth-submit,
  .user-signout-button.primary,
  .user-profile-primary-button,
  .welcome-submit,
  .primary-btn,
  .ultimate-btn,
  #ultimate-trigger,
  .mistakes-review-open,
  .mistakes-review-start,
  .unfinished-assessment-resume,
  .qpal-shared-library-add:not(.is-added),
  .quick-tip-launch-button,
  .developer-email-contact-copy,
  .qpal-mock-start,
  .qpal-mock-mode-details,
  .qbao-trigger,
  button[type='submit']:not(.btn-danger)
):focus-visible {
  background: var(--accent-hover) !important;
  color: var(--accent-contrast) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent),
    0 9px 24px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

/* Study, Exam, and Flashcards are the core QPal modes, so their selected
   states deliberately remain orange rather than a secondary brand color. */
:where(
  .mode-btn.active-study,
  .mode-btn.active-exam,
  .mode-btn.active-flashcards,
  .exam-pop-opt-btn.active,
  .study-pop-opt-btn.active,
  .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 color-mix(in srgb, var(--accent) 18%, transparent),
    0 8px 20px color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

:where(
  .mode-btn.active-study,
  .mode-btn.active-exam,
  .mode-btn.active-flashcards,
  .exam-pop-opt-btn.active,
  .study-pop-opt-btn.active,
  .flashcard-opt-btn.active
) * {
  background: transparent !important;
  color: var(--accent) !important;
}

/* Neutral charcoal carries navigation, secondary actions, information labels,
   and selected content cards while orange remains the primary QPal action color. */
:where(
  .qpal-navigation-toggle,
  .qpal-navigation-close,
  .qpal-navigation-theme-toggle,
  .outside-control-btn,
  .admin-btn-secondary,
  .user-signout-button.secondary,
  .user-profile-secondary-button,
  .user-profile-edit-button,
  .back-dash-btn,
  .import-subject-btn,
  .qpal-study-next-arrow,
  .qpal-mock-carousel-arrow,
  .qpal-mock-cancel,
  .qpal-mock-board-close,
  .qbao-close
) {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-control), var(--inner-highlight) !important;
}

:where(
  .qpal-navigation-toggle,
  .qpal-navigation-close,
  .qpal-navigation-theme-toggle,
  .outside-control-btn,
  .admin-btn-secondary,
  .user-signout-button.secondary,
  .user-profile-secondary-button,
  .user-profile-edit-button,
  .back-dash-btn,
  .import-subject-btn,
  .qpal-study-next-arrow,
  .qpal-mock-carousel-arrow,
  .qpal-mock-cancel,
  .qpal-mock-board-close,
  .qbao-close
):hover,
:where(
  .qpal-navigation-toggle,
  .qpal-navigation-close,
  .qpal-navigation-theme-toggle,
  .outside-control-btn,
  .admin-btn-secondary,
  .user-signout-button.secondary,
  .user-profile-secondary-button,
  .user-profile-edit-button,
  .back-dash-btn,
  .import-subject-btn,
  .qpal-study-next-arrow,
  .qpal-mock-carousel-arrow,
  .qpal-mock-cancel,
  .qpal-mock-board-close,
  .qbao-close
):focus-visible {
  background: var(--secondary-soft) !important;
  color: var(--secondary) !important;
  border-color: var(--secondary-border) !important;
  box-shadow: 0 0 0 4px var(--focus-ring), var(--shadow-control), var(--inner-highlight) !important;
}

:where(
  .qpal-navigation-item:hover,
  .qpal-navigation-item:focus-visible,
  .qpal-navigation-item.is-active,
  .matrix-tab.active,
  .user-auth-tab.active,
  .qpal-shared-library-tabs button.is-active,
  .central-admin-user.active,
  .central-admin-filter-menu button.active,
  .mistakes-review-tab.is-active,
  .mistakes-review-subject-option.is-active,
  .qpal-mock-section-choice button.is-active
) {
  background: var(--secondary-soft) !important;
  color: var(--secondary) !important;
  border-color: var(--secondary-border) !important;
}

.qpal-navigation-item.is-active {
  box-shadow: inset 3px 0 0 var(--secondary) !important;
}

.matrix-tab.active::after,
.user-auth-tab.active::after,
.unfinished-assessment-progress-track > span {
  background: var(--secondary) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--secondary) 30%, transparent) !important;
}

.qpal-navigation-badge,
.qpal-toolbar-badge,
.qpal-shared-library-tab-badge {
  background: var(--secondary) !important;
  color: var(--secondary-contrast) !important;
  border-color: var(--surface-elevated) !important;
}

:where(
  .user-auth-eyebrow,
  .admin-dialog-eyebrow,
  .qpal-shared-library-eyebrow,
  .developer-email-contact-eyebrow,
  .qpal-study-next-eyebrow,
  .qpal-mock-board-eyebrow,
  .qpal-mock-mode-eyebrow,
  .qpal-study-next-card-label,
  .qpal-mock-history-header > div > span,
  .qpal-mock-history-attempt-header span,
  .quick-tip-admin-status,
  .central-admin-panel-heading
) {
  color: var(--secondary) !important;
}

/* Selected recommendation and Mock Board cards use clean neutral surfaces with
   controlled orange framing while their main launch actions remain orange. */
.qpal-study-next-card.is-active,
.qpal-mock-mode-card.is-active,
.central-admin-question-card.is-active,
.central-admin-subject-card.is-active,
.qpal-shared-library-item.is-selected {
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface-muted)) !important;
  color: var(--text-primary) !important;
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent), var(--shadow-card) !important;
}

.qpal-study-next-icon,
.qpal-mock-mode-icon,
.mistakes-review-step-icon,
.quick-tip-emblem,
.qpal-shared-library-item-icon {
  background: var(--secondary-soft) !important;
  color: var(--secondary) !important;
  border-color: var(--secondary-border) !important;
}

.qpal-study-next-action {
  color: var(--text-primary) !important;
  border-color: var(--secondary-border) !important;
  background: var(--surface-elevated) !important;
}

.qpal-study-next-action:hover,
.qpal-study-next-action:focus-visible {
  color: var(--secondary-contrast) !important;
  border-color: var(--secondary) !important;
  background: var(--secondary) !important;
}

.qpal-carousel-dots button.is-active {
  background: var(--secondary) !important;
}

/* QBao receives a restrained orange-to-charcoal identity without changing any
   Workers AI request, allowance, cache, or response-rendering behavior. */
.qbao-dialog,
.qbao-exam-review-dialog {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-strong)) !important;
}

.qbao-header,
.qbao-exam-review-header {
  background:
    linear-gradient(110deg,
      color-mix(in srgb, var(--accent-soft) 76%, var(--surface-elevated)),
      color-mix(in srgb, var(--surface-muted) 88%, var(--surface-elevated))) !important;
  border-color: var(--border-subtle) !important;
}

.qbao-thread {
  background:
    radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 30%),
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--text-primary) 4%, transparent), transparent 34%),
    var(--page-bg) !important;
}

.qbao-header-welcome .qbao-message-bubble,
.qbao-message-assistant .qbao-message-bubble {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border-subtle)) !important;
}

.qbao-message-user .qbao-message-bubble {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--text-primary))) !important;
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--accent) 78%, var(--text-primary)) !important;
}

.qbao-remaining-pill {
  background: var(--secondary-soft) !important;
  color: var(--secondary) !important;
  border-color: var(--secondary-border) !important;
}

.qbao-action {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}

.qbao-action:hover,
.qbao-action:focus-visible {
  background: var(--secondary-soft) !important;
  color: var(--secondary) !important;
  border-color: var(--secondary-border) !important;
}

.qbao-typing-dot {
  background: var(--secondary) !important;
}

/* Admin Access no longer carries fixed yellow styling. */
.outside-control-btn.admin-control.admin-active,
.insight-edit-btn {
  background: var(--secondary-soft) !important;
  color: var(--secondary) !important;
  border-color: var(--secondary-border) !important;
  box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-control), var(--inner-highlight) !important;
}

.outside-control-btn.admin-control.admin-active:hover,
.outside-control-btn.admin-control.admin-active:focus-visible,
.insight-edit-btn:hover,
.insight-edit-btn:focus-visible {
  background: color-mix(in srgb, var(--secondary-soft) 76%, var(--secondary)) !important;
  color: var(--secondary-hover) !important;
  border-color: var(--secondary) !important;
}

/* Neutralize remaining warm borders/backgrounds in dense management,
   libraries, history, profile, tips, mistakes, and assessment review views. */
:where(
  .subj-card,
  .reviewer-item,
  .insight-item,
  .empty-state,
  .score-box,
  .timer-box,
  .reviewer-ans-box,
  .stat-good,
  .stat-bad,
  .choice-btn,
  .exam-pop-container,
  .exam-pop-opt-btn,
  .study-pop-opt-btn,
  .flashcard-opt-btn,
  .flashcard-card,
  .qpal-study-next-card,
  .qpal-mock-mode-card,
  .qpal-mock-requirements,
  .qpal-mock-history-summary article,
  .qpal-mock-history-attempt,
  .attempt-history-row,
  .central-admin-user,
  .central-admin-subject-card,
  .central-admin-question-card,
  .central-admin-performance-card,
  .central-admin-unattempted-card,
  .quick-tip-admin-item,
  .qpal-shared-library-item,
  .user-profile-name-card,
  .user-profile-encouragement,
  .mistakes-review-status-panel,
  .mistakes-review-main-panel,
  .mistakes-review-metric-panel,
  .mistakes-review-how-panel,
  .mistakes-review-empty-subject-card
) {
  background-color: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--inner-highlight) !important;
}

:where(
  .subj-card,
  .reviewer-item,
  .choice-btn,
  .exam-pop-opt-btn,
  .study-pop-opt-btn,
  .flashcard-opt-btn,
  .qpal-shared-library-item,
  .central-admin-user,
  .central-admin-subject-card,
  .central-admin-question-card,
  .quick-tip-admin-item
):hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--secondary-border) !important;
}

/* Keep status and answer meaning independent from the brand palette. */
:where(
  .choice-btn.correct,
  .active-recall-feedback.correct,
  .quick-insights-excellent,
  .is-excellent
) {
  --status-color: var(--success);
}

:where(
  .choice-btn.wrong,
  .active-recall-feedback.incorrect,
  .quick-insights-practice,
  .is-practice
) {
  --status-color: var(--danger);
}

:where(
  .quick-insights-improving,
  .is-improving
) {
  --status-color: var(--warning);
}

:where(
  .btn-danger,
  .mistakes-review-clear,
  .unfinished-assessment-discard,
  .central-admin-delete,
  button[class*='delete'],
  button[class*='danger']
) {
  color: var(--danger) !important;
  background: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border-subtle)) !important;
}

/* Explicit Admin Access overrides defeat older yellow !important rules. */
html.qpal-color-locked .admin-dialog-eyebrow,
html.dark-mode.qpal-color-locked .admin-dialog-eyebrow,
html.qpal-color-locked .quick-tip-admin-control-dialog .admin-dialog-eyebrow,
html.dark-mode.qpal-color-locked .quick-tip-admin-control-dialog .admin-dialog-eyebrow {
  color: var(--accent) !important;
}

html.qpal-color-locked .admin-btn-primary,
html.dark-mode.qpal-color-locked .admin-btn-primary,
html.qpal-color-locked #admin-activate-confirm,
html.dark-mode.qpal-color-locked #admin-activate-confirm,
html.qpal-color-locked #admin-logout-confirm,
html.dark-mode.qpal-color-locked #admin-logout-confirm {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}

html.qpal-color-locked .admin-btn-primary:hover,
html.qpal-color-locked .admin-btn-primary:focus-visible,
html.dark-mode.qpal-color-locked .admin-btn-primary:hover,
html.dark-mode.qpal-color-locked .admin-btn-primary:focus-visible,
html.qpal-color-locked #admin-activate-confirm:hover,
html.qpal-color-locked #admin-activate-confirm:focus-visible,
html.dark-mode.qpal-color-locked #admin-activate-confirm:hover,
html.dark-mode.qpal-color-locked #admin-activate-confirm:focus-visible,
html.qpal-color-locked #admin-logout-confirm:hover,
html.qpal-color-locked #admin-logout-confirm:focus-visible,
html.dark-mode.qpal-color-locked #admin-logout-confirm:hover,
html.dark-mode.qpal-color-locked #admin-logout-confirm:focus-visible {
  background: var(--accent-hover) !important;
  color: var(--accent-contrast) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: 0 0 0 4px var(--focus-ring),
    0 9px 24px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

html.qpal-color-locked .admin-input:focus,
html.dark-mode.qpal-color-locked .admin-input:focus {
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 4px var(--focus-ring), var(--inner-highlight) !important;
}

html.qpal-color-locked .outside-control-btn.admin-control.admin-active,
html.dark-mode.qpal-color-locked .outside-control-btn.admin-control.admin-active {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-control), var(--inner-highlight) !important;
}

/* QPal translucent neutral navigation drawer: compact, lightly glassy, and
   softly graded in both themes without adding images or network requests. */
.qpal-navigation-backdrop {
  background: rgba(20, 20, 20, 0.42) !important;
  backdrop-filter: blur(3px) saturate(104%);
  -webkit-backdrop-filter: blur(3px) saturate(104%);
}

html.dark-mode .qpal-navigation-backdrop {
  background: rgba(5, 5, 5, 0.68) !important;
}

.qpal-navigation-drawer {
  width: min(var(--qpal-nav-width), calc(100vw - var(--qpal-nav-gutter))) !important;
  max-width: 100% !important;
  border-right-color: color-mix(in srgb, var(--accent) 16%, var(--border-subtle)) !important;
  background:
    radial-gradient(circle at 8% 4%, rgba(201, 78, 0, 0.1), transparent 30%),
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.86) 0%,
      rgba(243, 243, 241, 0.82) 58%,
      rgba(229, 229, 225, 0.76) 100%) !important;
  box-shadow: 20px 0 52px rgba(20, 20, 20, 0.22) !important;
  backdrop-filter: blur(22px) saturate(108%);
  -webkit-backdrop-filter: blur(22px) saturate(108%);
}

html.dark-mode .qpal-navigation-drawer {
  background:
    radial-gradient(circle at 8% 4%, rgba(255, 107, 53, 0.12), transparent 31%),
    linear-gradient(155deg,
      rgba(20, 20, 20, 0.91) 0%,
      rgba(36, 36, 36, 0.88) 58%,
      rgba(48, 48, 48, 0.82) 100%) !important;
  border-right-color: rgba(255, 107, 53, 0.18) !important;
  box-shadow: 22px 0 62px rgba(0, 0, 0, 0.62) !important;
}

.qpal-navigation-drawer-header,
.qpal-navigation-footer {
  background: color-mix(in srgb, var(--surface-elevated) 60%, transparent) !important;
  backdrop-filter: blur(14px) saturate(106%);
  -webkit-backdrop-filter: blur(14px) saturate(106%);
}

.qpal-navigation-scroll {
  padding-inline: 11px !important;
}

.qpal-navigation-item {
  grid-template-columns: 23px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 9px 10px !important;
}

.qpal-navigation-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qpal-navigation-section-title {
  margin-inline: 9px !important;
}

.qpal-navigation-item:hover,
.qpal-navigation-item:focus-visible,
.qpal-navigation-item.is-active {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border-subtle)) !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent-soft) 92%, transparent),
      color-mix(in srgb, var(--surface-muted) 72%, transparent)) !important;
}

.qpal-navigation-item.is-active {
  box-shadow: inset 3px 0 0 var(--accent), var(--inner-highlight) !important;
}

@media (max-width: 720px) {
  :root,
  html.qpal-color-locked {
    --qpal-nav-width: 264px;
    --qpal-nav-gutter: 12px;
  }
}

@media (max-width: 380px) {
  :root,
  html.qpal-color-locked {
    --qpal-nav-width: 252px;
    --qpal-nav-gutter: 10px;
  }

  .qpal-navigation-drawer-header {
    padding-inline: 12px !important;
  }

  .qpal-navigation-scroll {
    padding-inline: 8px !important;
  }

  .qpal-navigation-item-label {
    font-size: 13.5px !important;
  }
}

/* QPal icon-colored browser scrollbars remain subtle and theme-aware. */
:where(
  .qpal-navigation-scroll,
  .qbao-thread,
  .user-auth-dialog,
  .admin-dialog,
  .qpal-shared-library-dialog,
  .central-admin-manager-body,
  .attempt-history-content
) {
  scrollbar-color: var(--secondary-border) transparent;
}

@media (max-width: 560px) {
  .user-auth-dialog,
  .user-signout-dialog,
  .welcome-dialog,
  .admin-dialog,
  .qbao-dialog {
    border-color: var(--border-subtle) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}