/* =========================================================
   QPAL — ADMIN ICON VISIBILITY + COMPACT MISTAKE METRICS
   Final authoritative layer for the current dashboard update.
   ========================================================= */

/* The Mistakes heading uses the same hierarchy as Quick Insights. */
.dashboard-insights-card .quick-insights-title,
.dashboard-review-tips-card .mistakes-review-title {
  font-size: max(13px, calc(14px * var(--quiz-font-scale))) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.09em !important;
}

/* Only the two live mistake totals remain; both occupy equal space. */
.dashboard-review-tips-card .mistakes-review-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: calc(10px * var(--qpal-ui-scale)) !important;
}

.dashboard-review-tips-card .mistakes-review-metric-panel {
  min-height: calc(76px * var(--qpal-ui-scale)) !important;
  padding: calc(10px * var(--qpal-ui-scale)) calc(14px * var(--qpal-ui-scale)) !important;
  gap: calc(5px * var(--qpal-ui-scale)) !important;
}

/* Match Quick Insights number sizing across the same viewport. */
.dashboard-review-tips-card .mistakes-review-metric-panel > strong {
  font-size: max(27px, calc(31px * var(--quiz-font-scale))) !important;
  line-height: 1 !important;
}

.dashboard-review-tips-card .mistakes-review-metric-panel > span {
  font-size: max(12px, calc(13px * var(--quiz-font-scale))) !important;
  line-height: 1.3 !important;
}

@media (max-width: 760px) {
  .dashboard-review-tips-card .mistakes-review-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: calc(9px * var(--qpal-ui-scale)) !important;
  }

  .dashboard-review-tips-card .mistakes-review-metric-panel {
    min-height: calc(70px * var(--qpal-ui-scale)) !important;
    padding: calc(9px * var(--qpal-ui-scale)) calc(10px * var(--qpal-ui-scale)) !important;
  }

  .dashboard-review-tips-card .mistakes-review-metric-panel > strong {
    font-size: max(25px, calc(27px * var(--quiz-font-scale))) !important;
  }

  .dashboard-review-tips-card .mistakes-review-metric-panel > span {
    font-size: max(11.5px, calc(12px * var(--quiz-font-scale))) !important;
  }
}

@media (max-width: 420px) {
  .dashboard-insights-card .quick-insights-title,
  .dashboard-review-tips-card .mistakes-review-title {
    font-size: max(12px, calc(12.5px * var(--quiz-font-scale))) !important;
  }

  .dashboard-review-tips-card .mistakes-review-metric-panel {
    min-height: calc(66px * var(--qpal-ui-scale)) !important;
    padding: calc(8px * var(--qpal-ui-scale)) !important;
  }

  .dashboard-review-tips-card .mistakes-review-metric-panel > strong {
    font-size: max(24px, calc(25px * var(--quiz-font-scale))) !important;
  }
}

/* =========================================================
   QPAL — 100% DEFAULT APP SCALE, COMPACT EMPTY STATES,
   AND ADMIN USER PROGRESS OVERVIEW
   ========================================================= */

/* QPal defaults to a normal 1.00 internal scale. Valid saved QPal scale
   preferences may still be applied by the existing frontend sync layer.
   Browser zoom remains entirely browser-controlled. */
:root {
  --quiz-font-scale: 1;
  --qpal-ui-scale: 1;
}

/* The Interface Size card has been removed from the profile. The board-exam
   setting now occupies the complete available row. */
.user-profile-settings-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

.user-profile-settings-grid .user-profile-scale-card {
  display: none !important;
}

.user-profile-settings-grid .user-profile-exam-card {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  padding: 16px;
}

.user-profile-settings-grid .user-profile-exam-controls {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}

.user-profile-settings-grid .user-profile-exam-controls .user-profile-primary-button {
  width: auto;
  min-width: 112px;
}

.user-profile-settings-grid .user-profile-section-copy > span {
  font-size: max(9px, calc(9px * var(--quiz-font-scale)));
}

.user-profile-settings-grid .user-profile-section-copy h3 {
  font-size: max(15px, calc(16px * var(--quiz-font-scale)));
  line-height: 1.25;
}

.user-profile-settings-grid .user-profile-section-copy p {
  font-size: max(11px, calc(11.5px * var(--quiz-font-scale)));
  line-height: 1.45;
}

/* Compact the Assessment Dashboard empty state while retaining the icon and
   explanatory copy. */
.game-container .empty-state {
  min-height: 104px !important;
  padding: 14px 12px !important;
  gap: 7px !important;
}

.game-container .empty-state .empty-state-icon,
.game-container .empty-state-icon {
  width: 36px !important;
  height: 36px !important;
}

.game-container .empty-state .empty-state-text,
.game-container .empty-state-text {
  font-size: max(14px, calc(14px * var(--quiz-font-scale))) !important;
  line-height: 1.35 !important;
}

/* Reduce the Mistakes to Review empty-state footprint and illustration. */
.dashboard-review-tips-card .mistakes-review-main-panel.is-empty {
  min-height: 176px !important;
  padding: 17px !important;
}

.dashboard-review-tips-card .mistakes-review-empty-illustration {
  width: min(96px, 30%) !important;
  margin-bottom: 8px !important;
}

.dashboard-review-tips-card .mistakes-review-main-panel.is-empty h3 {
  font-size: max(15px, calc(16px * var(--quiz-font-scale))) !important;
  line-height: 1.3 !important;
}

.dashboard-review-tips-card .mistakes-review-main-panel.is-empty > p {
  width: min(500px, 94%) !important;
  margin-top: 7px !important;
  font-size: max(12px, calc(12.5px * var(--quiz-font-scale))) !important;
  line-height: 1.45 !important;
}

/* Admin User Management — selected-user progress overview. */
.central-admin-progress-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-muted);
  box-shadow: var(--inner-highlight);
}

.central-admin-progress-header,
.central-admin-progress-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.central-admin-progress-header > div,
.central-admin-progress-section-heading {
  min-width: 0;
}

.central-admin-progress-header span {
  color: #c58a00;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.dark-mode .central-admin-progress-header span {
  color: #f8c94c;
}

.central-admin-progress-header h4,
.central-admin-progress-section-heading h5 {
  margin: 4px 0 0;
  color: var(--text-primary);
}

.central-admin-progress-header h4 {
  font-size: 17px;
  line-height: 1.25;
}

.central-admin-progress-header small,
.central-admin-progress-section-heading span {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 11px;
}

.central-admin-progress-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.central-admin-progress-insights article {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 13px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface);
  text-align: center;
}

.central-admin-progress-insights strong {
  font-size: 28px;
  line-height: 1;
}

.central-admin-progress-insights span {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
}

.central-admin-progress-insights small {
  color: var(--text-secondary);
  font-size: 10px;
}

.central-admin-progress-insights .is-excellent strong,
.central-admin-progress-insights .is-excellent span {
  color: #34d399;
}

.central-admin-progress-insights .is-improving strong,
.central-admin-progress-insights .is-improving span {
  color: #fbbf24;
}

.central-admin-progress-insights .is-practice strong,
.central-admin-progress-insights .is-practice span {
  color: #f87171;
}

.central-admin-progress-details {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.65fr);
  align-items: start;
  gap: 12px;
}

.central-admin-performance-card,
.central-admin-unattempted-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface);
}

.central-admin-progress-section-heading {
  margin-bottom: 10px;
}

.central-admin-progress-section-heading h5 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.central-admin-progress-table {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.central-admin-progress-table-head,
.central-admin-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 124px;
  align-items: center;
  gap: 10px;
}

.central-admin-progress-table-head {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-elevated);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.central-admin-progress-rows {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.central-admin-progress-row {
  min-height: 54px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-subtle);
  box-sizing: border-box;
}

.central-admin-progress-row:last-child {
  border-bottom: 0;
}

.central-admin-progress-subject {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.central-admin-progress-subject span {
  color: #c58a00;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.dark-mode .central-admin-progress-subject span {
  color: #f8c94c;
}

.central-admin-progress-subject strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.central-admin-progress-score {
  color: var(--text-primary);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.central-admin-progress-status {
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}

.central-admin-progress-row.is-excellent .central-admin-progress-status {
  color: #34d399;
}

.central-admin-progress-row.is-improving .central-admin-progress-status {
  color: #fbbf24;
}

.central-admin-progress-row.is-practice .central-admin-progress-status {
  color: #f87171;
}

.central-admin-progress-row.is-unattempted .central-admin-progress-status {
  color: var(--text-secondary);
}

.central-admin-unattempted-list {
  max-height: 300px;
  display: grid;
  gap: 7px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: thin;
}

.central-admin-unattempted-list li {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--surface-muted);
}

.central-admin-unattempted-list li > span {
  color: #c58a00;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.dark-mode .central-admin-unattempted-list li > span {
  color: #f8c94c;
}

.central-admin-unattempted-list li > strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.central-admin-unattempted-list .central-admin-progress-none {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.central-admin-progress-empty {
  padding: 18px;
  color: var(--text-secondary);
  font-size: 11px;
  text-align: center;
}

@media (max-width: 760px) {
  .user-profile-settings-grid .user-profile-exam-card {
    padding: 13px;
  }

  .user-profile-settings-grid .user-profile-exam-controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .user-profile-settings-grid .user-profile-exam-controls input,
  .user-profile-settings-grid .user-profile-exam-controls .user-profile-primary-button {
    min-height: 42px;
    padding: 9px 10px;
    font-size: 11px;
  }

  .game-container .empty-state {
    min-height: 94px !important;
    padding-block: 12px !important;
  }

  .dashboard-review-tips-card .mistakes-review-main-panel.is-empty {
    min-height: 158px !important;
    padding: 15px !important;
  }

  .dashboard-review-tips-card .mistakes-review-empty-illustration {
    width: min(82px, 28%) !important;
  }

  .central-admin-progress-panel {
    margin-bottom: 16px;
    padding: 13px;
  }

  .central-admin-progress-header {
    align-items: flex-start;
  }

  .central-admin-progress-header h4 {
    font-size: 15px;
  }

  .central-admin-progress-insights {
    gap: 7px;
  }

  .central-admin-progress-insights article {
    padding: 10px 6px;
  }

  .central-admin-progress-insights strong {
    font-size: 23px;
  }

  .central-admin-progress-insights span {
    font-size: 10px;
  }

  .central-admin-progress-insights small {
    font-size: 8.5px;
  }

  .central-admin-progress-details {
    grid-template-columns: 1fr;
  }

  .central-admin-progress-table-head,
  .central-admin-progress-row {
    grid-template-columns: minmax(0, 1fr) 76px 104px;
    gap: 7px;
  }

  .central-admin-progress-subject strong,
  .central-admin-progress-score {
    font-size: 11px;
  }

  .central-admin-progress-status {
    font-size: 9px;
  }
}

@media (max-width: 420px) {
  .user-profile-settings-grid .user-profile-exam-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-profile-settings-grid .user-profile-exam-controls .user-profile-primary-button {
    width: 100%;
  }

  .game-container .empty-state {
    min-height: 88px !important;
  }

  .game-container .empty-state .empty-state-icon,
  .game-container .empty-state-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .dashboard-review-tips-card .mistakes-review-main-panel.is-empty {
    min-height: 146px !important;
  }

  .dashboard-review-tips-card .mistakes-review-empty-illustration {
    width: min(72px, 26%) !important;
  }

  .central-admin-progress-insights article {
    padding-inline: 4px;
  }

  .central-admin-progress-insights span {
    font-size: 9px;
  }

  .central-admin-progress-insights small {
    font-size: 8px;
  }

  .central-admin-progress-table-head {
    display: none;
  }

  .central-admin-progress-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "subject score"
      "subject status";
  }

  .central-admin-progress-subject {
    grid-area: subject;
  }

  .central-admin-progress-score {
    grid-area: score;
    text-align: right;
  }

  .central-admin-progress-status {
    grid-area: status;
    text-align: right;
  }
}

/* =========================================================
   QPAL — ADMIN ATTEMPT PROGRESS + REVIEW HEADER CLEANUP
   ========================================================= */

/* Only the Quick Tips bell remains in the Mistakes to Review header. */
.dashboard-review-tips-card .mistakes-review-card-header {
  padding-inline: calc(
    var(--mistakes-header-action-size) +
    calc(8px * var(--qpal-ui-scale))
  ) !important;
}

/* Interactive progress summary cards double as performance filters. */
.central-admin-progress-insights button {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 13px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--app-font) !important;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--inner-highlight);
  transition:
    border-color 170ms ease,
    background 170ms ease,
    transform 170ms ease,
    box-shadow 170ms ease;
}

.central-admin-progress-insights button:hover,
.central-admin-progress-insights button:focus-visible {
  background: var(--surface-hover);
  border-color: color-mix(in srgb, currentColor 48%, var(--border-subtle));
  outline: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  outline-offset: 2px;
  transform: translateY(-1px);
}

.central-admin-progress-insights button.is-active {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, var(--surface));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent),
    var(--inner-highlight);
}

.central-admin-progress-insights button strong {
  font-size: 28px;
  line-height: 1;
}

.central-admin-progress-insights button span {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
}

.central-admin-progress-insights button small {
  color: var(--text-secondary);
  font-size: 10px;
}

.central-admin-progress-insights button.is-excellent,
.central-admin-progress-insights button.is-excellent span {
  color: #34d399;
}

.central-admin-progress-insights button.is-improving,
.central-admin-progress-insights button.is-improving span {
  color: #fbbf24;
}

.central-admin-progress-insights button.is-practice,
.central-admin-progress-insights button.is-practice span {
  color: #f87171;
}

.central-admin-progress-attempted-heading {
  align-items: flex-end;
}

.central-admin-progress-attempted-heading > div:first-child {
  min-width: 0;
}

.central-admin-progress-controls {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.central-admin-progress-controls label {
  display: grid;
  gap: 4px;
}

.central-admin-progress-controls label > span {
  color: var(--text-secondary);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.central-admin-progress-controls select {
  min-height: 34px;
  padding: 7px 28px 7px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-elevated);
  color: var(--text-primary);
  font-family: var(--app-font) !important;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.central-admin-progress-controls select:focus-visible {
  border-color: #f8c94c;
  outline: 2px solid color-mix(in srgb, #f8c94c 25%, transparent);
  outline-offset: 2px;
}

.central-admin-progress-subject small {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 8.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.central-admin-unattempted-description {
  margin: -2px 0 10px;
  color: var(--text-secondary);
  font-size: 9.5px;
  line-height: 1.45;
}

.central-admin-unattempted-list li > small {
  color: var(--text-secondary);
  font-size: 8.5px;
  line-height: 1.35;
}

/* Admin User Management no longer exposes destructive global subject deletion. */
.central-admin-subject-actions {
  justify-content: center;
}

.central-admin-subject-actions .admin-btn {
  min-width: 112px;
}

@media (max-width: 760px) {
  .dashboard-review-tips-card .mistakes-review-card-header {
    padding-inline: calc(
      var(--mistakes-header-action-size) + 5px
    ) !important;
  }

  .central-admin-progress-insights button {
    padding: 10px 6px;
  }

  .central-admin-progress-insights button strong {
    font-size: 23px;
  }

  .central-admin-progress-insights button span {
    font-size: 10px;
  }

  .central-admin-progress-insights button small {
    font-size: 8.5px;
  }

  .central-admin-progress-attempted-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .central-admin-progress-controls {
    justify-content: stretch;
  }

  .central-admin-progress-controls label {
    min-width: min(190px, 100%);
    flex: 1 1 150px;
  }

  .central-admin-progress-controls select {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .central-admin-progress-insights button {
    padding-inline: 4px;
  }

  .central-admin-progress-insights button span {
    font-size: 9px;
  }

  .central-admin-progress-insights button small {
    font-size: 8px;
  }

  .central-admin-progress-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .central-admin-progress-controls label {
    min-width: 0;
  }
}

/* =========================================================
   QPAL — AUTH SPACING AND SIGN-OUT ACCENT REFINEMENT
   ========================================================= */

/* Empty status copy should not reserve a large blank row between the password
   field and the primary sign-in action. It returns to the normal flow as soon
   as an error, success, or progress message is present. */
.user-auth-dialog .user-auth-message:empty {
  display: none;
}

.user-auth-dialog .user-auth-message:not(:empty) {
  min-height: 0;
  margin-top: 2px;
}

.user-auth-dialog .user-auth-submit {
  margin-top: 1px;
}

/* Keep the confirmation dark and monochrome while using the same restrained
   QPal yellow accent language as account sign-in. */
.user-signout-overlay {
  color-scheme: dark;
  background: rgba(4, 6, 9, 0.9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.user-signout-dialog {
  border-color: rgba(248, 201, 76, 0.72);
  background: linear-gradient(180deg, #171b21 0%, #11151a 100%);
  color: #f4f5f7;
  box-shadow:
    0 0 0 1px rgba(248, 201, 76, 0.1),
    0 28px 80px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.user-signout-dialog .user-auth-eyebrow {
  color: #f8c94c;
}

.user-signout-dialog .user-auth-title {
  color: #f7f8fa;
}

.user-signout-dialog .user-auth-description,
.user-signout-dialog .user-auth-message {
  color: #aab0ba;
}

.user-signout-dialog .user-signout-button.secondary {
  border-color: rgba(255, 255, 255, 0.12);
  background: #0c0f13;
  color: #f4f5f7;
}

.user-signout-dialog .user-signout-button.secondary:hover:not(:disabled) {
  border-color: rgba(248, 201, 76, 0.38);
  background: #171b21;
}

.user-signout-dialog .user-signout-button.primary {
  border-color: #d89a13;
  background: #f8c94c;
  color: #151515;
  box-shadow:
    0 8px 20px rgba(216, 154, 19, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.user-signout-dialog .user-signout-button.primary:hover:not(:disabled) {
  filter: brightness(1.035);
  box-shadow:
    0 10px 24px rgba(216, 154, 19, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* =========================================================
   QPAL — CROSS-BROWSER COLOR-SCHEME STABILITY
   Prevent browser auto-darkening from recoloring QPal differently when the
   same account is opened in browsers with different automatic dark settings.
   The app's own saved theme remains the single source of truth.
   ========================================================= */
html,
html.dark-mode,
html.auth-pending,
html.auth-pending.dark-mode,
html.auth-pending:not(.dark-mode) {
  /*
   * Always advertise a light native color scheme. QPal paints its dark and
   * light interfaces with explicit application colors, while `only light`
   * prevents Chrome Auto Dark Mode from transforming the finished page.
   */
  color-scheme: only light !important;
}

/*
 * Keep form controls opted out as well. Their actual QPal colors continue to
 * come from the existing theme variables and component rules.
 */
html input,
html select,
html textarea,
html button {
  color-scheme: only light !important;
}

/*
 * Dark Reader recognizes the head-level `darkreader-lock` meta tag. These
 * explicit paint guards also prevent inherited filters or blend modes from
 * changing QPal's card and icon palette when a browser profile injects broad
 * automatic-darkening rules.
 */
html,
body,
#app,
.dashboard-shell,
.user-auth-overlay,
.user-signout-overlay {
  filter: none !important;
  mix-blend-mode: normal !important;
}



/* =========================================================
   QPAL — MANAGED CHROME PROFILE COLOR-INTEGRITY GUARD
   Apply the documented Auto Dark opt-out to every rendered element rather
   than relying only on inheritance from :root. This also prevents Windows
   forced-color adjustments from partially repainting QPal components.
   ========================================================= */
html.qpal-color-locked,
html.qpal-color-locked body,
html.qpal-color-locked body *,
html.qpal-color-locked body *::before,
html.qpal-color-locked body *::after {
  color-scheme: only light !important;
  forced-color-adjust: none !important;
  -webkit-forced-color-adjust: none !important;
}

html.qpal-color-locked,
html.qpal-color-locked body {
  background-color: var(--page-bg) !important;
  background-image: linear-gradient(var(--page-bg), var(--page-bg)) !important;
}

/*
 * Auto-dark engines are less likely to reinterpret an explicit image paint
 * than a bare background-color. Keep the core QPal surfaces painted from the
 * same existing theme variables without changing component layout or logic.
 */
html.qpal-color-locked .dashboard-container,
html.qpal-color-locked .main-dashboard-card,
html.qpal-color-locked .quick-insights-card,
html.qpal-color-locked .dashboard-review-tips-card,
html.qpal-color-locked .mistakes-review-card,
html.qpal-color-locked .countdown-card,
html.qpal-color-locked .user-auth-dialog,
html.qpal-color-locked .user-signout-dialog,
html.qpal-color-locked .modal-content,
html.qpal-color-locked [role="dialog"] {
  background-image: linear-gradient(var(--surface), var(--surface)) !important;
  background-blend-mode: normal !important;
  isolation: isolate;
}

html.qpal-color-locked input,
html.qpal-color-locked textarea,
html.qpal-color-locked select,
html.qpal-color-locked option,
html.qpal-color-locked button {
  forced-color-adjust: none !important;
  -webkit-forced-color-adjust: none !important;
}

@media (forced-colors: active) {
  html.qpal-color-locked,
  html.qpal-color-locked body,
  html.qpal-color-locked body * {
    forced-color-adjust: none !important;
  }
}


/* =========================================================
   QPAL — SVG ICON PAINT INTEGRITY
   Keep QPal's stroke-only interface icons visually identical across Chrome
   profiles. Profile-level automatic darkening can incorrectly fill child
   paths/circles even when the SVG root declares fill="none". Intentional
   filled artwork is preserved because only shapes without a declared fill,
   or with fill="none", are locked here.
   ========================================================= */
html.qpal-color-locked svg[fill="none"] {
  fill: none !important;
  paint-order: stroke fill markers;
}

html.qpal-color-locked svg[fill="none"] :is(path, circle, rect, ellipse, polygon, polyline, line):not([fill]),
html.qpal-color-locked svg[fill="none"] [fill="none"],
html.qpal-color-locked [data-qpal-outline-fill="none"] {
  fill: none !important;
}

/* Explicitly retain the authored currentColor strokes on QPal controls. */
html.qpal-color-locked :is(
  .outside-control-btn,
  .quick-insights-icon,
  .empty-state-icon,
  .quick-tip-launch-button,
  .user-auth-password-toggle,
  .user-profile-overlay,
  .mistakes-review-card,
  .modal-content,
  [role="dialog"]
) svg[fill="none"] {
  stroke: currentColor;
}

/* Prevent profile filters from applying image-like blending to line icons. */
html.qpal-color-locked :is(
  .outside-control-btn,
  .quick-insights-icon,
  .empty-state-icon,
  .quick-tip-launch-button,
  .user-auth-password-toggle
) svg {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1;
}

/* =========================================================
   QPAL — SHARED LIBRARY VIEWPORT SAFETY + COMPACT SUBJECT LIST
   Authoritative final layer. Keeps the Shared Library inside the
   usable viewport and limits dashboard/deck lists to four rows.
   ========================================================= */

/* Include padding and borders inside the dialog width so mobile dialogs
   cannot extend past the viewport edge. */
.qpal-shared-library-overlay {
  box-sizing: border-box;
  overflow: hidden;
  padding:
    max(12px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
}

.qpal-shared-library-dialog {
  box-sizing: border-box;
  width: min(820px, 100%);
  max-width: 100%;
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)));
  margin: 0;
  overflow: hidden;
}

.qpal-shared-library-header,
.qpal-shared-library-header > div,
.qpal-shared-library-tabs,
.qpal-shared-library-list,
.qpal-shared-library-item,
.qpal-shared-library-item-copy {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.qpal-shared-library-list {
  width: 100%;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Dashboard and Flashcard lists grow naturally through four entries, then
   become internally scrollable instead of increasing the main card height. */
#subj-list-box,
#flashcards-deck-list {
  --qpal-subject-row-height: 48px;
  --qpal-subject-row-gap: 8px;
  width: 100%;
  max-height: calc((var(--qpal-subject-row-height) * 4) + (var(--qpal-subject-row-gap) * 3));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 4px;
}

#subj-list-box .subj-card,
#flashcards-deck-list .subj-card {
  box-sizing: border-box;
  min-height: var(--qpal-subject-row-height) !important;
  height: var(--qpal-subject-row-height);
  padding: 6px 10px !important;
  gap: 8px;
}

#subj-list-box .subj-card .card-content,
#flashcards-deck-list .subj-card .card-content {
  min-width: 0;
  min-height: 34px;
  gap: 8px;
}

#subj-list-box .subj-card .card-content > span:first-child,
#flashcards-deck-list .subj-card .card-content > span:first-child {
  min-width: 0;
  line-height: 1.2 !important;
}

#subj-list-box .subj-remove-btn,
#flashcards-deck-list .subj-remove-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
}


@media (max-width: 700px) {
  .qpal-shared-library-overlay {
    place-items: center;
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      max(8px, env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px));
  }

  .qpal-shared-library-dialog {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))) !important;
    padding: 14px !important;
    border-radius: 14px;
  }

  .qpal-shared-library-header {
    padding-right: 44px;
  }

  .qpal-shared-library-tabs {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .qpal-shared-library-tabs button {
    min-width: 0;
    padding-inline: 3px;
    white-space: nowrap;
  }

  .qpal-shared-library-list {
    padding-right: 3px;
  }

  .qpal-shared-library-item {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 86px !important;
  }

  .qpal-shared-library-add {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
  }

  #subj-list-box,
  #flashcards-deck-list {
    --qpal-subject-row-height: 50px;
    --qpal-subject-row-gap: 8px;
    padding-right: 3px;
  }

  #subj-list-box .subj-card,
  #flashcards-deck-list .subj-card {
    padding: 7px 9px !important;
  }

  #subj-list-box .subj-card .card-content > span:first-child,
  #flashcards-deck-list .subj-card .card-content > span:first-child {
    font-size: max(12.5px, calc(13px * var(--quiz-font-scale))) !important;
  }

  #subj-list-box .subj-card .card-content > span:last-child,
  #flashcards-deck-list .subj-card .card-content > span:last-child {
    font-size: max(12px, calc(12.5px * var(--quiz-font-scale))) !important;
  }
}

@media (max-width: 380px) {
  .qpal-shared-library-dialog {
    padding: 12px !important;
  }

  .qpal-shared-library-tabs {
    gap: 4px;
  }

  .qpal-shared-library-tabs button {
    font-size: max(8px, calc(8px * var(--quiz-font-scale))) !important;
  }

  .qpal-shared-library-item {
    grid-template-columns: minmax(0, 1fr) 80px !important;
    padding: 10px 9px !important;
    gap: 8px !important;
  }

  .qpal-shared-library-add {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    padding-inline: 5px !important;
  }
}

/* =========================================================
   QPAL — SHARED LIBRARY MOBILE CLOSE CONTROL POSITION
   Keeps the close control anchored to the dialog's upper-right corner
   instead of allowing the header copy to move it vertically.
   ========================================================= */
.qpal-shared-library-dialog {
  position: relative;
}

@media (max-width: 700px) {
  .qpal-shared-library-header {
    position: static;
    padding-right: 52px;
  }

  .qpal-shared-library-dialog [data-qpal-shared-library-close] {
    position: absolute;
    top: 14px;
    right: 14px;
    margin: 0;
    z-index: 3;
  }
}

@media (max-width: 380px) {
  .qpal-shared-library-dialog [data-qpal-shared-library-close] {
    top: 12px;
    right: 12px;
  }
}

/* =========================================================
   QPAL — NARROW-VIEWPORT SAFETY, COMPACT FUSION ACTION,
   AND UNIFIED DASHBOARD CARD RHYTHM
   Final authoritative layer for dashboard spacing and widths.
   ========================================================= */
:root {
  /* Reuse this token for every primary dashboard section now and later. */
  --qpal-dashboard-card-gap: clamp(12px, 1.7vw, 18px);
  --console-section-gap: var(--qpal-dashboard-card-gap);
}

/* A card or one of its descendants must never enlarge the page canvas. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.app-workspace,
.dashboard-topbar,
.game-container,
.dashboard-tools-row,
.dashboard-insights-card,
.dashboard-review-tips-card,
.board-countdown-container,
.mode-button-group,
.matrix-tabs-container,
.subject-grid,
#subj-list-box,
#flashcards-deck-list {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

/* One shared vertical rhythm between the Assessment Dashboard, Quick
   Insights, Mistakes to Review, and subsequent dashboard sections. */
.app-workspace,
.dashboard-tools-row {
  gap: var(--qpal-dashboard-card-gap) !important;
}

.dashboard-tools-row {
  margin-top: 0 !important;
}

.dashboard-tools-row > *,
.game-container,
.dashboard-insights-card,
.dashboard-review-tips-card,
.board-countdown-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Keep the Fusion action comfortable to tap without occupying a tall row. */
#ultimate-trigger {
  min-height: 44px !important;
  padding: 9px 14px !important;
  margin-top: 10px !important;
  border-radius: 9px !important;
  font-size: max(13px, calc(14px * var(--quiz-font-scale))) !important;
  line-height: 1.2 !important;
}

@media (max-width: 760px) {
  :root {
    --qpal-dashboard-card-gap: 12px;
  }

  /* Remove any width accumulated by padding, stable-scrollbar reserves, or
     older mobile rules. This specifically protects 390px-class screens. */
  body:not(.qpal-session-active) {
    width: 100%;
    max-width: 100%;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    overflow-x: clip !important;
  }

  .app-workspace,
  .dashboard-topbar,
  .game-container,
  .dashboard-tools-row,
  .dashboard-insights-card,
  .dashboard-review-tips-card,
  .board-countdown-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .game-container {
    padding-right: 14px !important;
    padding-left: 14px !important;
    overflow: hidden;
  }

  .mode-button-group,
  .matrix-tabs-container,
  .subject-grid,
  #subj-list-box,
  #flashcards-deck-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .mode-btn,
  .matrix-tab,
  .subj-card,
  .subj-card .card-content {
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  #subj-list-box,
  #flashcards-deck-list {
    /* Avoid reserving a permanent scrollbar gutter on narrow WebKit views. */
    scrollbar-gutter: auto;
    padding-right: 0 !important;
  }

  #subj-list-box .subj-card,
  #flashcards-deck-list .subj-card {
    width: 100% !important;
  }

  #ultimate-trigger {
    min-height: 44px !important;
    padding: 8px 12px !important;
    margin-top: 9px !important;
  }
}

@media (max-width: 420px) {
  body:not(.qpal-session-active) {
    padding-right: max(9px, env(safe-area-inset-right, 0px)) !important;
    padding-left: max(9px, env(safe-area-inset-left, 0px)) !important;
  }

  .game-container {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .mode-button-group {
    gap: 7px !important;
  }

  .matrix-tabs-container {
    overflow: hidden;
  }

  .matrix-tab {
    padding-right: 2px !important;
    padding-left: 2px !important;
  }
}

/* QPal assessment action labels: readable professional wrapping without
   changing the existing assessment controls or interaction states. */
.ultimate-btn,
#ultimate-trigger:not([hidden]) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal !important;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  height: auto !important;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 520px) {
  #ultimate-trigger {
    min-height: 48px !important;
    padding: 8px 12px !important;
    font-size: max(13px, calc(14px * var(--quiz-font-scale))) !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 360px) {
  #ultimate-trigger {
    padding-inline: 10px !important;
    font-size: max(12.5px, calc(13px * var(--quiz-font-scale))) !important;
  }
}

/* =========================================================
   QPAL — CENTERED DASHBOARD ACTIONS AND PROFILE IDENTITY
   Date/greeting/name live in User Profile; dashboard actions stay centered.
   ========================================================= */
.dashboard-topbar {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin-top: 6px !important;
  box-sizing: border-box;
}

/* The greeting node is intentionally detached in script.js. Keep this
   safeguard so older cached markup cannot reserve dashboard space. */
.dashboard-topbar > .greeting-container {
  display: none !important;
}

.dashboard-header-controls {
  display: flex !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 44px;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

/* Profile identity is intentionally not a card. */
.user-profile-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 14px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.user-profile-greeting {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-size: max(11px, calc(11px * var(--quiz-font-scale)));
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

.user-profile-identity h2 {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: clamp(27px, 6vw, 38px);
  font-weight: 900;
  line-height: 1.04;
  text-align: left;
}

.user-profile-edit-button.user-profile-edit-button-compact {
  width: auto;
  min-width: 0;
  min-height: 30px;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: max(9px, calc(9px * var(--quiz-font-scale)));
  line-height: 1.15;
  align-self: flex-start;
}

.user-profile-membership-since {
  margin: 13px 0 0;
  color: var(--text-secondary);
  font-size: max(10.5px, calc(10.5px * var(--quiz-font-scale)));
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}

.user-profile-membership-since strong {
  color: var(--text-primary);
  font-weight: 900;
}

.user-profile-change-count {
  margin: -3px 0 1px;
  color: var(--text-secondary);
  font-size: max(9px, calc(9px * var(--quiz-font-scale)));
  line-height: 1.4;
}

/* The countdown is now the only settings card, so it occupies the full row. */
.user-profile-settings-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100%;
}

.user-profile-settings-grid .user-profile-exam-card {
  width: 100%;
  min-width: 0;
}

/* Legacy profile elements are no longer rendered; these guards prevent an
   older cached template from showing the removed content. */
.user-profile-name-card,
.user-profile-membership,
.user-profile-encouragement {
  display: none !important;
}

@media (max-width: 600px) {
  .dashboard-topbar {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: center !important;
    margin-top: 4px !important;
  }

  .dashboard-header-controls {
    width: auto !important;
    max-width: 100% !important;
    min-height: 40px;
    justify-content: center !important;
    gap: 6px !important;
  }

  .user-profile-identity {
    margin-top: 10px;
    padding-inline: 1px;
  }

  .user-profile-greeting {
    margin-bottom: 5px;
    font-size: max(10px, calc(10px * var(--quiz-font-scale)));
  }

  .user-profile-identity h2 {
    font-size: clamp(25px, 9vw, 32px);
  }

  .user-profile-edit-button.user-profile-edit-button-compact {
    width: auto !important;
    min-height: 30px;
    margin-top: 7px;
    padding: 5px 9px;
  }

  .user-profile-membership-since {
    margin-top: 11px;
    font-size: max(10px, calc(10px * var(--quiz-font-scale)));
  }

  .user-profile-settings-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-top: 12px;
  }
}

@media (max-width: 360px) {
  .dashboard-header-controls {
    gap: 5px !important;
  }
}

/* =========================================================
   QPAL — USER PROFILE IDENTITY RESTORATION GUARD
   Keeps the greeting, name, name-edit action, and membership date visible
   even when older cached profile markup or earlier responsive rules exist.
   ========================================================= */
.user-profile-dialog > .user-profile-identity[data-profile-identity] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  overflow: visible !important;
  margin: 14px 0 0 !important;
  padding: 0 2px !important;
  transform: none !important;
  clip: auto !important;
  clip-path: none !important;
}

.user-profile-dialog > .user-profile-identity[data-profile-identity] > * {
  visibility: visible !important;
  opacity: 1 !important;
}

.user-profile-dialog > .user-profile-identity[data-profile-identity] .user-profile-greeting {
  display: block !important;
  margin: 0 0 6px !important;
}

.user-profile-dialog > .user-profile-identity[data-profile-identity] #user-profile-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

.user-profile-dialog > .user-profile-identity[data-profile-identity] .user-profile-edit-button-compact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 8px 0 0 !important;
}

.user-profile-dialog > .user-profile-identity[data-profile-identity] .user-profile-membership-since {
  display: block !important;
  margin: 13px 0 0 !important;
}

.user-profile-dialog > .user-profile-identity[data-profile-identity] + .user-profile-edit-form,
.user-profile-dialog > .user-profile-identity[data-profile-identity] ~ .user-profile-settings-grid {
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .user-profile-dialog > .user-profile-identity[data-profile-identity] {
    margin-top: 10px !important;
    padding-inline: 1px !important;
  }

  .user-profile-dialog > .user-profile-identity[data-profile-identity] .user-profile-membership-since {
    margin-top: 11px !important;
  }
}


/* =========================================================
   QPAL — PROFILE GREETING, MEMBERSHIP ALIGNMENT, AND MODAL CENTERING
   Keeps popup dialogs centered in every supported viewport and prevents
   dynamic browser chrome or narrow screens from pushing dialogs off-axis.
   ========================================================= */
.user-profile-greeting {
  margin-bottom: 2px !important;
}

.user-profile-membership-since,
.user-profile-dialog > .user-profile-identity[data-profile-identity] .user-profile-membership-since {
  width: 100% !important;
  margin-top: 13px !important;
  text-align: center !important;
  align-self: stretch !important;
}

.user-profile-dialog {
  overflow-x: hidden !important;
}

/* One centering invariant for every QPal popup overlay. Large dialogs keep
   their internal scrolling, while the overlay remains centered horizontally
   and vertically across phones, tablets, desktops, and dynamic viewports. */
.about-author-overlay,
.admin-overlay,
.attempt-history-overlay,
.central-admin-delete-overlay,
.central-admin-editor-overlay,
.central-admin-manager-overlay,
.central-admin-question-detail-overlay,
.central-admin-question-overlay,
.central-admin-search-overlay,
.confirm-overlay,
.developer-email-contact-overlay,
.developer-icon-picker-overlay,
.flashcard-import-restriction-overlay,
.mistakes-review-clear-confirm-overlay,
.mistakes-review-info-overlay,
.mistakes-review-modal-overlay,
.qpal-library-question-overlay,
.qpal-shared-library-overlay,
.quick-insights-modal-overlay,
.quick-tip-admin-overlay,
.quick-tip-popup-overlay,
.unfinished-assessment-overlay,
.user-auth-overlay,
.user-profile-overlay,
.user-signout-overlay,
.welcome-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  align-items: center !important;
  justify-items: center !important;
  place-items: center !important;
  box-sizing: border-box !important;
  padding-top: max(16px, env(safe-area-inset-top, 0px)) !important;
  padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
  overflow: auto !important;
}

.about-author-dialog,
.admin-confirm-dialog,
.admin-dialog,
.attempt-history-dialog,
.central-admin-question-detail-dialog,
.central-admin-score-dialog,
.central-admin-search-dialog,
.developer-email-contact-dialog,
.developer-icon-picker-dialog,
.qpal-import-controls-dialog,
.qpal-library-admin-dialog,
.qpal-library-visibility-dialog,
.qpal-shared-library-dialog,
.mistakes-review-info-dialog,
.mistakes-review-modal,
.quick-insights-modal,
.quick-tip-admin-control-dialog,
.quick-tip-admin-dialog,
.quick-tip-popup-dialog,
.unfinished-assessment-dialog,
.user-auth-dialog,
.user-profile-dialog,
.user-signout-dialog,
.welcome-dialog {
  margin: auto !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  box-sizing: border-box !important;
}

@supports not (height: 100dvh) {
  .about-author-dialog,
  .admin-confirm-dialog,
  .admin-dialog,
  .attempt-history-dialog,
  .central-admin-question-detail-dialog,
  .central-admin-score-dialog,
  .central-admin-search-dialog,
  .developer-email-contact-dialog,
  .developer-icon-picker-dialog,
  .qpal-import-controls-dialog,
  .qpal-library-admin-dialog,
  .qpal-library-visibility-dialog,
  .qpal-shared-library-dialog,
  .mistakes-review-info-dialog,
  .mistakes-review-modal,
  .quick-insights-modal,
  .quick-tip-admin-control-dialog,
  .quick-tip-admin-dialog,
  .quick-tip-popup-dialog,
  .unfinished-assessment-dialog,
  .user-auth-dialog,
  .user-profile-dialog,
  .user-signout-dialog,
  .welcome-dialog {
    max-height: calc(100vh - 32px) !important;
  }
}

@media (max-width: 600px) {
  .user-profile-membership-since,
  .user-profile-dialog > .user-profile-identity[data-profile-identity] .user-profile-membership-since {
    margin-top: 11px !important;
  }

  .about-author-overlay,
  .admin-overlay,
  .attempt-history-overlay,
  .central-admin-delete-overlay,
  .central-admin-editor-overlay,
  .central-admin-manager-overlay,
  .central-admin-question-detail-overlay,
  .central-admin-question-overlay,
  .central-admin-search-overlay,
  .confirm-overlay,
  .developer-email-contact-overlay,
  .developer-icon-picker-overlay,
  .flashcard-import-restriction-overlay,
  .mistakes-review-clear-confirm-overlay,
  .mistakes-review-info-overlay,
  .mistakes-review-modal-overlay,
  .qpal-library-question-overlay,
  .qpal-shared-library-overlay,
  .quick-insights-modal-overlay,
  .quick-tip-admin-overlay,
  .quick-tip-popup-overlay,
  .unfinished-assessment-overlay,
  .user-auth-overlay,
  .user-profile-overlay,
  .user-signout-overlay,
  .welcome-overlay {
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
  }
}


/* =========================================================
   QPAL — SESSION TOOLBAR AND COMBINED-ACTION VISIBILITY
   ========================================================= */
body.qpal-session-active .dashboard-topbar,
body.qpal-session-active .dashboard-header-controls,
.dashboard-topbar[hidden],
.dashboard-header-controls[hidden] {
  display: none !important;
}

#ultimate-trigger[hidden] {
  display: none !important;
}

#ultimate-trigger:not([hidden]) {
  display: flex !important;
}

/* =========================================================
   QPAL — STRICT MONOCHROME PALETTE, MISTAKES BANK TOOLBAR,
   AND SMOOTH INTERACTION MOTION
   Quick Insights and Subject Insights retain their semantic status colors.
   ========================================================= */
:root {
  --accent: #17191d;
  --accent-soft: #f1f2f4;
  --accent-border: #17191d;
  --accent-contrast: #ffffff;
  --accent-gold: #17191d;
  --accent-coral: #17191d;
  --success: #17191d;
  --warning: #17191d;
  --danger: #17191d;
  --danger-soft: #f1f2f4;
  --focus-ring: rgba(23, 25, 29, 0.2);
  --control-hover-shadow: rgba(23, 25, 29, 0.12);
  --mistakes-accent: #17191d;
}

.dark-mode {
  --accent: #f4f6f8;
  --accent-soft: #1b1e23;
  --accent-border: #f4f6f8;
  --accent-contrast: #101216;
  --accent-gold: #f4f6f8;
  --accent-coral: #f4f6f8;
  --success: #f4f6f8;
  --warning: #f4f6f8;
  --danger: #f4f6f8;
  --danger-soft: #1b1e23;
  --focus-ring: rgba(244, 246, 248, 0.2);
  --control-hover-shadow: rgba(244, 246, 248, 0.1);
  --mistakes-accent: #f4f6f8;
}

/* The dashboard card was intentionally replaced by toolbar access. */
.dashboard-review-tips-card,
.dashboard-review-tips-card[hidden] {
  display: none !important;
}

/* New toolbar actions inherit the exact dimensions and interaction language
   of every other centered dashboard action. */
.mistakes-bank-control,
.quick-tips-control {
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface-elevated) !important;
}

.mistakes-bank-control:hover,
.mistakes-bank-control:focus-visible,
.quick-tips-control:hover,
.quick-tips-control:focus-visible {
  color: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
  background: var(--surface-hover) !important;
}

/* Remove non-semantic accent colors throughout QPal. Status meaning remains
   available through text, labels, icons, borders, and layout rather than hue. */
.choice-btn.correct,
.choice-btn.wrong,
.active-recall-feedback.correct,
.active-recall-feedback.incorrect,
.welcome-input.has-error,
.welcome-error,
.central-admin-editor-message,
.central-admin-load-error,
.attempt-history-empty.is-error,
.central-admin-search-empty.is-error,
.user-auth-dialog .user-auth-message.error,
.user-auth-dialog .user-auth-message.success,
.qpal-shared-library-message.is-success,
.qpal-shared-library-message.is-error,
.qpal-shared-library-empty.is-error,
.developer-email-contact-copy.is-copied,
.quick-tip-admin-message,
.quick-tip-admin-status,
.quick-tip-admin-order-message,
.mistakes-review-missed-count,
.mistakes-review-missed-count strong,
.attempt-history-accuracy,
.central-admin-question-detail-choice > em,
.central-admin-progress-status {
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface-muted) !important;
  box-shadow: none !important;
}

.choice-btn.correct,
.choice-btn.wrong,
.active-recall-feedback.correct,
.active-recall-feedback.incorrect {
  outline-color: var(--text-primary) !important;
}

/* Labels, badges, icons, and section accents are monochrome everywhere other
   than Quick Insights and the Subject Insights legend/status dots. */
:where(
  .admin-dialog-eyebrow,
  .central-admin-manager-header span,
  .central-admin-editor-header span,
  .central-admin-manager-header h2,
  .central-admin-set,
  .central-admin-score-dialog > span,
  .central-admin-set-group-header h4,
  .central-admin-filter-menu button.active,
  .central-admin-search-header > div > span,
  .central-admin-search-group > header span,
  .central-admin-search-result-copy > div,
  .central-admin-search-result-open,
  .central-admin-question-detail-header > div > span,
  .central-admin-progress-header span,
  .central-admin-progress-subject span,
  .central-admin-unattempted-list li > span,
  .attempt-history-set,
  .attempt-history-row.is-admin-adjustment .attempt-history-type,
  .unfinished-assessment-icon,
  .unfinished-assessment-header h2,
  .unfinished-assessment-progress-copy > strong,
  .user-auth-brand-mark,
  .user-auth-dialog .user-auth-eyebrow,
  .user-auth-footnote-icon,
  .mistakes-review-summary > strong,
  .mistakes-review-modal-header > div > span,
  .mistakes-review-subject-button > strong,
  .quick-tip-quote-icon,
  .quick-tip-heading strong,
  .quick-tip-admin-header > div > span,
  .quick-tip-admin-message.is-info,
  .quick-tip-admin-order-message.is-saving,
  .quick-tip-admin-status.is-scheduled,
  .about-author-eyebrow,
  .about-author-size-label output,
  .about-author-zoom-label output,
  .qpal-library-kind,
  .qpal-shared-library-eyebrow,
  .qpal-shared-library-item-set,
  .qpal-shared-library-item-icon,
  .qpal-library-admin-filter-control > span,
  .about-author-tagline strong,
  .developer-icon-picker-header > span,
  .developer-email-contact-eyebrow,
  .developer-email-contact-dialog h2,
  .user-profile-eyebrow,
  .user-profile-section-copy > span,
  .user-profile-scale-heading span,
  .user-profile-scale-heading output,
  .quick-tip-popup-heading .quick-tip-bulb-icon,
  .quick-tip-popup-heading strong,
  .quick-tip-popup-quote,
  .user-profile-message-label,
  .user-signout-dialog .user-auth-eyebrow
) {
  color: var(--text-primary) !important;
}

/* Monochrome controls and selected states. */
:where(
  .outside-control-btn.admin-control.admin-active,
  .admin-btn-primary,
  .user-auth-dialog .user-auth-submit,
  .user-signout-dialog .user-signout-button.primary,
  .user-profile-primary-button,
  .mistakes-review-open,
  .mistakes-review-start,
  .unfinished-assessment-resume,
  .ultimate-btn,
  #ultimate-trigger,
  .developer-email-contact-copy,
  .developer-icon-preset-check
) {
  color: var(--surface) !important;
  background: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
  box-shadow: var(--shadow-control) !important;
}

:where(
  .outside-control-btn.admin-control.admin-active,
  .admin-btn-primary,
  .user-auth-dialog .user-auth-submit,
  .user-signout-dialog .user-signout-button.primary,
  .user-profile-primary-button,
  .mistakes-review-open,
  .mistakes-review-start,
  .unfinished-assessment-resume,
  .ultimate-btn,
  #ultimate-trigger,
  .developer-email-contact-copy
):hover,
:where(
  .outside-control-btn.admin-control.admin-active,
  .admin-btn-primary,
  .user-auth-dialog .user-auth-submit,
  .user-signout-dialog .user-signout-button.primary,
  .user-profile-primary-button,
  .mistakes-review-open,
  .mistakes-review-start,
  .unfinished-assessment-resume,
  .ultimate-btn,
  #ultimate-trigger,
  .developer-email-contact-copy
):focus-visible {
  color: var(--surface) !important;
  background: var(--text-secondary) !important;
  border-color: var(--text-primary) !important;
  box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-control) !important;
}

:where(
  .qpal-shared-library-tabs button.is-active,
  .user-auth-dialog .user-auth-tab.active,
  .developer-icon-preset.is-selected,
  .central-admin-user.active,
  .central-admin-question-card.is-search-target,
  .qpal-shared-library-add,
  .qpal-shared-library-add.is-added,
  .quick-tip-launch-button,
  .mistakes-review-info-close:hover,
  .mistakes-review-info-close:focus-visible,
  .qpal-library-close:hover,
  .qpal-library-close:focus-visible,
  .admin-dialog-close:hover,
  .admin-dialog-close:focus-visible,
  .developer-icon-picker-close:hover,
  .developer-icon-picker-close:focus-visible
) {
  color: var(--text-primary) !important;
  background: var(--surface-hover) !important;
  border-color: var(--text-primary) !important;
  box-shadow: none !important;
}

:where(
  .admin-input,
  .quick-tip-admin-form textarea,
  .quick-tip-admin-form input,
  .about-author-size-range,
  .about-author-zoom-range,
  .user-profile-scale-card input[type="range"],
  .qpal-import-control-row input,
  .qpal-library-visibility-mode input,
  .qpal-library-user-option input,
  .central-admin-choice-row input[type="radio"],
  .central-admin-question-detail-choice-input input[type="radio"]
) {
  accent-color: var(--text-primary) !important;
}

:where(
  .admin-input,
  .quick-tip-admin-form textarea,
  .quick-tip-admin-form input:not([type="checkbox"]),
  .about-author-social-admin-fields > [data-author-social-url],
  .central-admin-progress-controls select
):focus,
:where(
  .admin-input,
  .quick-tip-admin-form textarea,
  .quick-tip-admin-form input:not([type="checkbox"]),
  .about-author-social-admin-fields > [data-author-social-url],
  .central-admin-progress-controls select
):focus-visible {
  border-color: var(--text-primary) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  outline: none !important;
}

/* Destructive actions remain clearly named and outlined, but do not introduce
   a third color into either theme. */
:where(
  .btn-danger,
  .mistakes-review-clear,
  .unfinished-assessment-discard,
  .central-admin-delete,
  button[class*="delete"],
  button[class*="danger"]
) {
  color: var(--text-primary) !important;
  background: var(--surface-muted) !important;
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
}

/* Preserve only the approved semantic color areas. */
.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: #34d399 !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: #fbbf24 !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: #f87171 !important;
}
.quick-insights-modal [style*="--quick-modal-accent"],
.quick-insights-modal [style*="--quick-row-accent"] {
  color: var(--quick-modal-accent, var(--quick-row-accent)) !important;
}
.central-admin-progress-insights .is-excellent,
.central-admin-progress-insights .is-excellent * {
  color: #34d399 !important;
}
.central-admin-progress-insights .is-improving,
.central-admin-progress-insights .is-improving * {
  color: #fbbf24 !important;
}
.central-admin-progress-insights .is-practice,
.central-admin-progress-insights .is-practice * {
  color: #f87171 !important;
}

/* Smooth popup, tab, card, and content opening transitions. */
@keyframes qpal-overlay-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes qpal-dialog-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes qpal-content-enter {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:where(
  .about-author-overlay,
  .admin-overlay,
  .attempt-history-overlay,
  .central-admin-delete-overlay,
  .central-admin-editor-overlay,
  .central-admin-manager-overlay,
  .central-admin-question-detail-overlay,
  .central-admin-question-overlay,
  .central-admin-search-overlay,
  .confirm-overlay,
  .developer-email-contact-overlay,
  .developer-icon-picker-overlay,
  .flashcard-import-restriction-overlay,
  .mistakes-review-clear-confirm-overlay,
  .mistakes-review-info-overlay,
  .mistakes-review-modal-overlay,
  .qpal-library-question-overlay,
  .qpal-shared-library-overlay,
  .quick-insights-modal-overlay,
  .quick-tip-admin-overlay,
  .quick-tip-popup-overlay,
  .unfinished-assessment-overlay,
  .user-auth-overlay,
  .user-profile-overlay,
  .user-signout-overlay,
  .welcome-overlay
) {
  animation: qpal-overlay-enter 180ms ease-out both;
}

:where(
  .about-author-dialog,
  .admin-confirm-dialog,
  .admin-dialog,
  .attempt-history-dialog,
  .central-admin-question-detail-dialog,
  .central-admin-score-dialog,
  .central-admin-search-dialog,
  .developer-email-contact-dialog,
  .developer-icon-picker-dialog,
  .qpal-import-controls-dialog,
  .qpal-library-admin-dialog,
  .qpal-library-visibility-dialog,
  .qpal-shared-library-dialog,
  .mistakes-review-info-dialog,
  .mistakes-review-modal,
  .quick-insights-modal,
  .quick-tip-admin-control-dialog,
  .quick-tip-admin-dialog,
  .quick-tip-popup-dialog,
  .unfinished-assessment-dialog,
  .user-auth-dialog,
  .user-profile-dialog,
  .user-signout-dialog,
  .welcome-dialog
) {
  transform-origin: center;
  animation: qpal-dialog-enter 220ms cubic-bezier(.2, .8, .2, 1) both;
}

:where(
  .mode-btn,
  .matrix-tab,
  .exam-pop-opt-btn,
  .qpal-shared-library-tabs button,
  .user-auth-tab,
  .central-admin-filter-menu button,
  .outside-control-btn,
  button,
  .subject-card,
  .qpal-shared-library-item,
  .quick-insights-col
) {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    opacity 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease !important;
}

:where(
  .subject-grid,
  .qpal-shared-library-list,
  .qpal-shared-library-item,
  .quick-insights-modal-list,
  .quick-insights-subject-row,
  .insight-set-group,
  .exam-pop-container,
  .attempt-history-row,
  .central-admin-question-card
) {
  animation: qpal-content-enter 210ms ease-out both;
}

:where(button, .subject-card, .qpal-shared-library-item):active {
  transform: translateY(1px) scale(0.995);
}

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

/* Final neutral-surface safeguards for legacy gradients and fixed dark dialogs. */
body,
.dark-mode body {
  background: linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 46%, var(--page-bg) 100%) !important;
}

.user-auth-overlay,
.user-signout-overlay {
  background: var(--overlay-bg) !important;
}

.user-auth-dialog,
.user-signout-dialog {
  color-scheme: inherit !important;
  color: var(--text-primary) !important;
  background: var(--surface-elevated) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-dialog) !important;
}

.unfinished-assessment-progress-track > span {
  background: var(--text-primary) !important;
}

/* Pixel-level monochrome guarantee for every non-exempt interface region.
   Quick Insights and Subject Insights remain outside this grayscale layer. */
.dashboard-topbar,
.game-container:not(.subject-insights-view),
.board-countdown-container,
.about-author-overlay,
.admin-overlay,
.attempt-history-overlay,
.central-admin-delete-overlay,
.central-admin-editor-overlay,
.central-admin-manager-overlay,
.central-admin-question-detail-overlay,
.central-admin-question-overlay,
.central-admin-search-overlay,
.confirm-overlay,
.developer-email-contact-overlay,
.developer-icon-picker-overlay,
.flashcard-import-restriction-overlay,
.mistakes-review-clear-confirm-overlay,
.mistakes-review-info-overlay,
.mistakes-review-modal-overlay,
.qpal-library-question-overlay,
.qpal-shared-library-overlay,
.quick-tip-admin-overlay,
.quick-tip-popup-overlay,
.unfinished-assessment-overlay,
.user-auth-overlay,
.user-profile-overlay,
.user-signout-overlay,
.welcome-overlay {
  filter: grayscale(1) !important;
}

.quick-insights-card,
.quick-insights-modal-overlay,
.game-container.subject-insights-view {
  filter: none !important;
}


/* =========================================================
   QPAL — APPROVED COLOR EXCEPTIONS
   Preserve original developer media and semantic answer feedback while the
   remainder of the interface stays within the monochrome theme system.
   ========================================================= */

/* The About the Developer dialog is already styled with QPal's neutral
   surfaces. Do not grayscale the uploaded developer photo or the uploaded /
   preset social-link images inside this dialog. */
.about-author-overlay {
  filter: none !important;
}

.about-author-image-frame img,
.about-author-social-link img {
  filter: none !important;
  opacity: 1 !important;
}

/* Assessment sessions need semantic answer feedback. Remove the parent-level
   grayscale pass so the green correct and red incorrect states can render;
   all non-feedback controls continue to inherit QPal's monochrome variables. */
.game-container:not(.subject-insights-view) {
  filter: none !important;
}

:root {
  --answer-correct-text: #047857;
  --answer-correct-border: #059669;
  --answer-correct-bg: rgba(16, 185, 129, 0.12);
  --answer-incorrect-text: #b91c1c;
  --answer-incorrect-border: #dc2626;
  --answer-incorrect-bg: rgba(239, 68, 68, 0.1);
}

.dark-mode {
  --answer-correct-text: #34d399;
  --answer-correct-border: #10b981;
  --answer-correct-bg: rgba(16, 185, 129, 0.16);
  --answer-incorrect-text: #f87171;
  --answer-incorrect-border: #ef4444;
  --answer-incorrect-bg: rgba(239, 68, 68, 0.16);
}

.choice-btn.correct,
.active-recall-feedback.correct {
  color: var(--answer-correct-text) !important;
  background: var(--answer-correct-bg) !important;
  border-color: var(--answer-correct-border) !important;
  outline-color: var(--answer-correct-border) !important;
}

.choice-btn.wrong,
.active-recall-feedback.incorrect {
  color: var(--answer-incorrect-text) !important;
  background: var(--answer-incorrect-bg) !important;
  border-color: var(--answer-incorrect-border) !important;
  outline-color: var(--answer-incorrect-border) !important;
}

.choice-btn.correct *,
.choice-btn.wrong *,
.active-recall-feedback.correct *,
.active-recall-feedback.incorrect * {
  color: inherit !important;
}

/* =========================================================
   QPAL — DEVELOPER NAME, SHARED LIBRARY ACTIONS, QUICK TIPS
   Final compatibility layer for all viewport sizes and both themes.
   ========================================================= */

/* Keep the developer's full name on one line at every supported width.
   The identity column is allowed to shrink while the type scales down just
   enough on narrow phones to preserve the single-line presentation. */
.about-author-identity {
  min-width: 0 !important;
  overflow: visible;
}

.about-author-identity h3 {
  max-width: 100%;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
  font-size: clamp(13px, 3.8vw, 30px) !important;
  letter-spacing: -0.035em !important;
}

@media (max-width: 620px) {
  .about-author-profile {
    gap: 12px !important;
  }

  .about-author-profile .about-author-image-frame {
    width: min(var(--about-author-image-size, 190px), 27vw, 112px) !important;
    max-width: 112px !important;
  }

  .about-author-identity {
    flex: 1 1 0 !important;
  }

  .about-author-identity h3 {
    font-size: clamp(12.5px, 3.75vw, 18px) !important;
  }
}

@media (max-width: 360px) {
  .about-author-profile {
    gap: 10px !important;
    padding-inline: 13px !important;
  }

  .about-author-profile .about-author-image-frame {
    width: min(var(--about-author-image-size, 190px), 25vw, 96px) !important;
    max-width: 96px !important;
  }

  .about-author-identity h3 {
    font-size: 12px !important;
    letter-spacing: -0.045em !important;
  }
}

/* Shared Library actions use an intentional inverse monochrome treatment:
   white controls on the dark theme and dark controls on the light theme.
   Both the available and already-added states keep the same readable scheme. */
.qpal-shared-library-add,
.qpal-shared-library-add.is-added {
  color: var(--surface) !important;
  background: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
  box-shadow: none !important;
}

.qpal-shared-library-add:hover:not(:disabled),
.qpal-shared-library-add:focus-visible:not(:disabled) {
  color: var(--surface) !important;
  background: var(--text-secondary) !important;
  border-color: var(--text-primary) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

.qpal-shared-library-add:disabled,
.qpal-shared-library-add.is-added {
  opacity: 0.72;
  cursor: default;
}

/* Topnotcher advice is body copy, not a heading. Keep it regular-weight and
   readable while retaining the existing justified presentation. */
.quick-tip-popup-quote,
.quick-tip-quote {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

/* =========================================================
   QPAL — ADMIN PROGRESS, LIBRARY DISCOVERY, TOOLBAR ICONS
   Approved semantic-color and workflow additions.
   ========================================================= */

/* The admin User Progress summary is an approved performance-semantic area,
   equivalent to Quick Insights. Remove the parent grayscale pass only for the
   Admin User Management overlay; all non-performance elements continue to use
   the monochrome theme variables. */
.central-admin-manager-overlay,
.dashboard-topbar,
.qpal-shared-library-overlay {
  filter: none !important;
}

.central-admin-progress-insights .is-excellent,
.central-admin-progress-insights .is-excellent *,
.central-admin-progress-row.is-excellent .central-admin-progress-status {
  color: #34d399 !important;
}

.central-admin-progress-insights .is-improving,
.central-admin-progress-insights .is-improving *,
.central-admin-progress-row.is-improving .central-admin-progress-status {
  color: #fbbf24 !important;
}

.central-admin-progress-insights .is-practice,
.central-admin-progress-insights .is-practice *,
.central-admin-progress-row.is-practice .central-admin-progress-status {
  color: #f87171 !important;
}

html:not(.dark-mode) .central-admin-progress-insights .is-excellent,
html:not(.dark-mode) .central-admin-progress-insights .is-excellent *,
html:not(.dark-mode) .central-admin-progress-row.is-excellent .central-admin-progress-status {
  color: #047857 !important;
}

html:not(.dark-mode) .central-admin-progress-insights .is-improving,
html:not(.dark-mode) .central-admin-progress-insights .is-improving *,
html:not(.dark-mode) .central-admin-progress-row.is-improving .central-admin-progress-status {
  color: #a16207 !important;
}

html:not(.dark-mode) .central-admin-progress-insights .is-practice,
html:not(.dark-mode) .central-admin-progress-insights .is-practice *,
html:not(.dark-mode) .central-admin-progress-row.is-practice .central-admin-progress-status {
  color: #b91c1c !important;
}

.central-admin-progress-insights button.is-active {
  box-shadow: inset 0 0 0 2px currentColor !important;
}

/* Remove the former decorative notification dot from About the Developer. */
.about-author-control::after {
  content: none !important;
  display: none !important;
}

/* Shared Library discovery badges. */
.outside-control-btn,
.qpal-shared-library-tabs button {
  position: relative;
}

.qpal-toolbar-badge,
.qpal-shared-library-tab-badge {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border: 2px solid var(--surface-elevated);
  border-radius: 999px;
  background: #dc2626 !important;
  color: #fff !important;
  font-family: "Geist Pixel", monospace !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.38) !important;
  pointer-events: none;
}

.qpal-toolbar-badge {
  top: -5px;
  right: -5px;
}

.qpal-shared-library-tab-badge {
  top: -7px;
  right: -7px;
  border-color: var(--surface);
}

html:not(.dark-mode) .qpal-toolbar-badge,
html:not(.dark-mode) .qpal-shared-library-tab-badge {
  border-color: #fff;
  background: #dc2626 !important;
  color: #fff !important;
}

.qpal-shared-library-new-label {
  display: block;
  margin: 0 0 4px;
  color: #ef4444 !important;
  font-size: max(9px, calc(10px * var(--quiz-font-scale))) !important;
  font-weight: 800 !important;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html:not(.dark-mode) .qpal-shared-library-new-label {
  color: #b91c1c !important;
}

.qpal-shared-library-item.is-new {
  border-color: color-mix(in srgb, #ef4444 42%, var(--border-subtle)) !important;
}

/* Keep the replacement toolbar glyphs proportionate to the shared circular
   control system. */
.outside-control-btn.shared-library-control svg,
.outside-control-btn.subject-insights-control svg,
.outside-control-btn.mistakes-bank-control svg,
.outside-control-btn.user-profile-control svg {
  width: 21px !important;
  height: 21px !important;
}

.outside-control-btn.mistakes-bank-control svg {
  width: 18px !important;
  height: 18px !important;
}

/* Manage Shared Library direct question search. */
.qpal-library-admin-search {
  width: min(100%, 760px);
  margin: 10px auto 4px;
  display: grid;
  gap: 9px;
}

.qpal-library-admin-search > label {
  color: var(--text-secondary);
  font-size: max(10px, calc(11px * var(--quiz-font-scale)));
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.qpal-library-admin-search-pill {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-primary);
}

.qpal-library-admin-search-pill:focus-within {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.qpal-library-admin-search-pill svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.qpal-library-admin-search-pill input {
  min-width: 0;
  width: 100%;
  padding: 5px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: max(12px, calc(13px * var(--quiz-font-scale)));
}

.qpal-library-admin-search-pill input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.qpal-library-admin-search-pill > span {
  color: var(--text-muted);
  font-size: max(9px, calc(10px * var(--quiz-font-scale)));
  white-space: nowrap;
}

.qpal-library-admin-search-results {
  max-height: min(45dvh, 480px);
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-muted);
  scrollbar-gutter: stable;
}

.qpal-library-admin-search-results[hidden] {
  display: none !important;
}

.qpal-library-admin-search-loading,
.qpal-library-admin-search-empty {
  padding: 18px;
  color: var(--text-secondary);
  font-size: max(11px, calc(12px * var(--quiz-font-scale)));
  line-height: 1.5;
  text-align: center;
}

.qpal-library-admin-search-group {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.qpal-library-admin-search-group > header {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 3px;
}

.qpal-library-admin-search-group > header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.qpal-library-admin-search-group > header span {
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.qpal-library-admin-search-group > header strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: max(12px, calc(13px * var(--quiz-font-scale)));
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qpal-library-admin-search-group > header small {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 10px;
}

.qpal-library-admin-search-list {
  display: grid;
  gap: 7px;
}

.qpal-library-admin-search-result {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  background: var(--surface);
}

.qpal-library-admin-search-result > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.qpal-library-admin-search-result span {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.qpal-library-admin-search-result p {
  margin: 0;
  color: var(--text-primary);
  font-size: max(11px, calc(12px * var(--quiz-font-scale)));
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.qpal-library-admin-search-result .admin-btn {
  min-width: 118px;
  min-height: 40px;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .qpal-toolbar-badge,
  .qpal-shared-library-tab-badge {
    min-width: 16px;
    height: 16px;
    font-size: 8px !important;
  }

  .qpal-library-admin-search {
    width: 100%;
  }

  .qpal-library-admin-search-pill {
    grid-template-columns: auto minmax(0, 1fr);
    border-radius: 14px;
  }

  .qpal-library-admin-search-pill > span {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: -3px;
  }

  .qpal-library-admin-search-result {
    grid-template-columns: minmax(0, 1fr);
  }

  .qpal-library-admin-search-result .admin-btn {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   QPAL — SHARED-LIBRARY LABEL, LIGHT AUTH, AND POPUP FIT FIX
   Final compatibility layer for compact cards, readable light-mode
   authentication, and tablet/mobile dialog safety.
   ========================================================= */

/* Keep the NEW SUBJECT / NEW DECK label inside the subject card at every
   interface scale. New cards may grow slightly rather than allowing the
   label to collide with the card border. */
.qpal-shared-library-item.is-new {
  min-height: 0 !important;
  height: auto !important;
  align-items: center !important;
  padding-top: 15px !important;
  padding-bottom: 12px !important;
  overflow: visible !important;
}

.qpal-shared-library-item.is-new .qpal-shared-library-item-copy {
  align-self: stretch !important;
  align-content: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding-block: 1px !important;
  overflow: visible !important;
}

.qpal-shared-library-new-label {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

@media (max-width: 700px) {
  .qpal-shared-library-item.is-new {
    padding-top: 13px !important;
    padding-bottom: 11px !important;
  }
}

/* The light authentication experience mirrors the dark layout while using
   explicit high-contrast white and charcoal values. This prevents legacy
   dark-only text declarations from hiding Welcome Back and form copy. */
html:not(.dark-mode) .user-auth-overlay {
  color-scheme: light !important;
  background: rgba(245, 246, 248, 0.94) !important;
}

html:not(.dark-mode) .user-auth-dialog {
  border-color: #cfd4dc !important;
  background: #ffffff !important;
  color: #17191d !important;
  box-shadow:
    0 26px 70px rgba(28, 36, 50, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

html:not(.dark-mode) .user-auth-dialog :is(
  .user-auth-title,
  .user-auth-title *,
  .user-auth-label,
  .user-auth-brand-copy,
  .user-auth-brand-copy *,
  .user-auth-tab,
  .user-auth-submit
) {
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-title,
html:not(.dark-mode) .user-auth-dialog .user-auth-label {
  color: #17191d !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-eyebrow,
html:not(.dark-mode) .user-auth-dialog .user-auth-description,
html:not(.dark-mode) .user-auth-dialog .user-auth-brand-note,
html:not(.dark-mode) .user-auth-dialog .user-auth-message,
html:not(.dark-mode) .user-auth-dialog .user-auth-link,
html:not(.dark-mode) .user-auth-dialog .user-auth-footnote {
  color: #5f6672 !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-tabs {
  border-color: #d9dee7 !important;
  background: #f1f2f4 !important;
  box-shadow: inset 0 1px 0 #ffffff !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-tab {
  color: #5f6672 !important;
  background: transparent !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-tab:hover {
  color: #17191d !important;
  background: #ffffff !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-tab.active {
  border-color: #17191d !important;
  background: #17191d !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-input {
  border-color: #d9dee7 !important;
  background: #f7f8fb !important;
  color: #17191d !important;
  -webkit-text-fill-color: #17191d !important;
  caret-color: #17191d !important;
  box-shadow: inset 0 1px 0 #ffffff !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-input::placeholder {
  color: #858d99 !important;
  -webkit-text-fill-color: #858d99 !important;
  opacity: 1 !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-input:hover {
  border-color: #b8c0cc !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-input:focus {
  border-color: #17191d !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(23, 25, 29, 0.14) !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-password-toggle {
  color: #5f6672 !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-password-toggle:hover,
html:not(.dark-mode) .user-auth-dialog .user-auth-password-toggle:focus-visible {
  border-color: #b8c0cc !important;
  background: #f1f2f4 !important;
  color: #17191d !important;
  box-shadow: 0 0 0 3px rgba(23, 25, 29, 0.12) !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-submit {
  border-color: #17191d !important;
  background: #17191d !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 7px 18px rgba(28, 36, 50, 0.14) !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-link:hover {
  color: #17191d !important;
}

html:not(.dark-mode) .user-auth-dialog .user-auth-footnote {
  border-top-color: #d9dee7 !important;
}

html:not(.dark-mode) .user-auth-dialog input:-webkit-autofill,
html:not(.dark-mode) .user-auth-dialog input:-webkit-autofill:hover,
html:not(.dark-mode) .user-auth-dialog input:-webkit-autofill:focus {
  -webkit-text-fill-color: #17191d !important;
  -webkit-box-shadow: 0 0 0 1000px #f7f8fb inset !important;
  caret-color: #17191d !important;
}

/* Every popup border must stay inside the overlay's padded content box. The
   central admin manager was the remaining large dialog that could retain a
   100vw width and overlap phone/tablet edges. */
:where(
  .about-author-dialog,
  .admin-confirm-dialog,
  .admin-dialog,
  .attempt-history-dialog,
  .central-admin-manager,
  .central-admin-question-editor,
  .central-admin-question-detail-dialog,
  .central-admin-score-dialog,
  .central-admin-search-dialog,
  .developer-email-contact-dialog,
  .developer-icon-picker-dialog,
  .mistakes-review-info-dialog,
  .mistakes-review-modal,
  .qpal-import-controls-dialog,
  .qpal-library-admin-dialog,
  .qpal-library-visibility-dialog,
  .qpal-shared-library-dialog,
  .quick-insights-modal,
  .quick-tip-admin-control-dialog,
  .quick-tip-admin-dialog,
  .quick-tip-popup-dialog,
  .unfinished-assessment-dialog,
  .user-auth-dialog,
  .user-profile-dialog,
  .user-signout-dialog,
  .welcome-dialog
) {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.central-admin-manager {
  width: min(1180px, 100%) !important;
  height: min(760px, calc(100dvh - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  margin: auto !important;
}

.central-admin-question-editor {
  width: min(1120px, 100%) !important;
  height: min(900px, calc(100dvh - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  margin: auto !important;
}

@media (max-width: 600px) {
  .central-admin-manager-overlay,
  .central-admin-editor-overlay,
  .central-admin-question-overlay {
    padding:
      max(10px, env(safe-area-inset-top, 0px))
      max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-left, 0px)) !important;
  }

  .central-admin-manager,
  .central-admin-question-editor {
    width: 100% !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
}

/* At tablet widths the attempted and not-yet-attempted panels need the full
   available subject-column width. Stacking them prevents either card from
   becoming narrow and unreadable at 768 × 1024. */
@media (max-width: 980px) {
  .central-admin-progress-details {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .central-admin-progress-attempted-heading {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .central-admin-progress-controls {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  .central-admin-progress-controls label,
  .central-admin-progress-controls select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .central-admin-performance-card,
  .central-admin-unattempted-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .central-admin-progress-controls {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* =========================================================
   QPAL — SHARED LIBRARY NEW-LABEL POSITION RESTORATION
   Keep the original left-aligned subject information layout. The only
   adjustment is additional internal breathing room so NEW SUBJECT / NEW DECK
   never touches the card's upper border at any responsive width.
   ========================================================= */
.qpal-shared-library-item.is-new {
  padding-top: 15px !important;
  padding-bottom: 12px !important;
  align-items: center !important;
}

.qpal-shared-library-item.is-new .qpal-shared-library-item-copy {
  align-self: center !important;
  align-content: normal !important;
  justify-content: normal !important;
  justify-items: stretch !important;
  text-align: left !important;
  gap: 3px !important;
  padding-block: 0 !important;
  overflow: hidden !important;
}

.qpal-shared-library-item.is-new .qpal-shared-library-new-label {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  justify-self: start !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.qpal-shared-library-item.is-new .qpal-shared-library-item-copy > strong,
.qpal-shared-library-item.is-new .qpal-shared-library-item-meta {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 700px) {
  .qpal-shared-library-item.is-new {
    padding-top: 14px !important;
    padding-bottom: 11px !important;
  }

  .qpal-shared-library-item.is-new .qpal-shared-library-item-copy {
    align-self: center !important;
  }
}