/* === Shared CSS bundle === */
/* Modern CSS Reset & Base Styles */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Form elements reset */
input,
button,
textarea,
select {
  font: inherit;
  margin: 0; /* Critical for radio/checkbox alignment */
}

/* iOS Safari zooms on focus if font-size is under 16px; floor it on touch only, desktop untouched. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  textarea,
  select,
  [contenteditable]:not([contenteditable="false"]) {
    font-size: 16px !important;
  }
}

/* Stop sideways page panning on mobile; clip (not hidden) keeps vertical scroll and position: sticky. !important beats module resets like `overflow: unset`. */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip !important;
  }
}

button {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Utilities */
.hidden {
  display: none !important;
}

.link {
  background: transparent;
  border: none;
  color: #7ec8ff;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

#root {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
/* CSS Variables - Colors, spacing, z-index, animations */

:root {
  /* Global Colors - from base.css */
  --bg: #000011;
  --fg: #fff;
  --panel: #111;
  --panel-2: #222;
  --muted: #9aa;
  --brand: #2a9df4;

  /* App accent (header, buttons, links). Single source of truth — use var(--accent). */
  --accent: #2f57d6;

  /* Primary Colors */
  --primary-1: var(--accent);
  --primary-2: #7297f040;
  --primary-3: #1e3a8a;

  /* Secondary Colors */
  --secondary-1: #43a57d;
  --secondary-2: #e3c22c;
  --secondary-3: #e07b61;

  /* Greys */
  --greys-0: #1a1a1d;
  --greys-1: #3d3d40;
  --greys-2: #6c6c70;
  --greys-3: #c7c7cc;
  --greys-4: #8e8e93;
  --greys-5: #e4e4e7;
  --greys-6: #f5fcfd;
  --greys-7: #ffffff;

  /* Component Colors */
  --comp-1: #2e4ac2;
  --comp-2: #5979d0;
  --comp-3: #8fa7f5;
  --comp-4: #3c9e7e;
  --comp-5: #6ac8a9;
  --comp-6: #d4b743;
  --comp-7: #f0c25a;
  --comp-8: #d87c71;
  --comp-9: #e99489;
  --comp-10: #d97a48;
  --comp-11: #e39a6b;
  --comp-12: #8053c2;
  --comp-13: #a38ad3;
  --comp-14: #1b8f85;
  --comp-15: #3ca6a0;
  --comp-16: #ff3b30;

  /* Additional Colors */
  --bg-dark: #0f0f0f;
  --bg-darker: #101010;
  --border-color: #444;
  --white: #ffffff;
  --black: #000000;
  --grey-light: #e9e9e9;
  --grey-lighter: #f5f5f5;

  /* Dimensions */
  --header-height: 60px;
  --sidebar-collapsed-width: 60px;
  --input-height: 42px;

  /* Spacing */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;

  /* Border radius */
  --br-sm: 4px;
  --br-md: 8px;
  --br-lg: 10px;
  --br-full: 999px;

  /* Z-index */
  --z-bottom-nav: 15;
  --z-add-btn: 20;
  --z-user-menu: 40;
  --z-details-panel: 80;
  --z-modal: 30;
  --z-roles-panel: 1200;
  --z-hover-tip: 100;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.35);

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s cubic-bezier(0.4, 0.2, 0.2, 1);

  /* Breakpoints - Desktop First */
  --lg: 1200px;
  --md: 768px;
  --sm: 480px;
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000;
    --fg: #ddd;
  }
}
/* Notifications - Toast notifications container */

/* Notifications - Toast notifications container */

#notifications {
  position: fixed;
  z-index: 10000;
  display: flex;
  gap: 12px;
  width: 360px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
  padding: 16px;
  transition: all 0.3s ease;

  /* Default: Bottom Right */
  bottom: 0;
  right: 0;
  flex-direction: column;
}

/* --- Positioning Variants --- */

/* Top Right */
#notifications.top-right {
  top: 0;
  right: 0;
  bottom: auto;
  flex-direction: column-reverse; /* Newest at top */
}

/* Top Left */
#notifications.top-left {
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  flex-direction: column-reverse;
}

/* Bottom Right */
#notifications.bottom-right {
  bottom: 0;
  right: 0;
  top: auto;
  flex-direction: column; /* Newest at bottom */
}

/* Bottom Left */
#notifications.bottom-left {
  bottom: 0;
  left: 0;
  top: auto;
  right: auto;
  flex-direction: column;
}

/* --- Toast Notification Style --- */

.noti {
  background: rgba(22, 22, 26, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.2);
  color: #f2f2f2;
  border-radius: 10px;
  padding: 14px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;

  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;

  /* Animations */
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  animation: notiEnter 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes notiEnter {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.noti.leaving {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.2s ease;
  pointer-events: none;
}

/* --- Icons via CSS (Pseudo-elements) --- */
.noti::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 1px; /* visual align */
}

/* Success */
.noti-success {
  border-left: 3px solid #10b981;
}
.noti-success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

/* Error */
.noti-error {
  border-left: 3px solid #ef4444;
}
.noti-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/%3E%3C/svg%3E");
}

/* Info */
.noti-info {
  border-left: 3px solid #3b82f6;
}
.noti-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

/* --- Close Button --- */
.noti-close {
  position: relative;
  top: auto;
  right: auto;
  width: 24px;
  height: 24px;
  margin-left: auto;
  margin-top: -2px;

  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.4);

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  transition: all 0.2s;
}

.noti-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
/* Toasts with a title + actions (App.utils.syncIssues.notify) — extends the .noti toast above */
.noti-warning {
  border-left: 3px solid #f59e0b;
}
.noti-warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

.noti-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-wrap: anywhere;
}

.noti-title {
  font-weight: 600;
}

.noti-meta {
  font-size: 12px;
  color: rgba(242, 242, 242, 0.65);
}

.noti-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 6px;
}

.noti-action {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #9db4ff;
  cursor: pointer;
}

.noti-action:hover {
  text-decoration: underline;
}

/* Sync problem details modal ("See more") — same card language as the Tests modals */
.sync-modal {
  position: fixed;
  inset: 0;
  z-index: 10001; /* above the #notifications toast that opens it */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.sync-modal.hidden {
  display: none;
}

.sync-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.sync-modal-card {
  position: relative;
  width: 560px;
  max-width: 100%;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.sync-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 24px 12px;
}

.sync-modal-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #b91c1c;
  overflow-wrap: anywhere;
}

.sync-modal-title--warning { color: #b45309; }
.sync-modal-title--info { color: #1e40af; }

.sync-modal-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: -4px -8px 0 0;
  background: none;
  border: 0;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
}

.sync-modal-close:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.sync-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 24px;
}

.sync-modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px 20px;
}

.sync-modal-actions .sync-status-btn,
.sync-modal-dismiss {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

.sync-modal-dismiss {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
  cursor: pointer;
}

.sync-modal-dismiss:hover {
  background: #f9fafb;
}

/* Matches the Tests modals' 640px bottom-sheet breakpoint */
@media (max-width: 639.98px) {
  .sync-modal {
    align-items: flex-end;
    padding: 0;
  }
  .sync-modal-card {
    width: 100%;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
  }
  .sync-modal-header {
    padding: 20px 16px 10px;
  }
  .sync-modal-body {
    padding: 0 16px;
  }
  .sync-modal-actions {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .sync-modal-actions > button {
    flex: 1 1 auto;
    min-height: 44px;
  }
}

/* "See more" body — shared by the modal and the popup viewer's inline <details> */
.sync-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  line-height: 1.55;
  color: #374151;
  text-align: start;
}

.sync-details-text {
  margin: 0;
}

.sync-details-label {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b7280;
}

.sync-details-code {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #111827;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  direction: ltr;
  text-align: left;
}

.sync-details-list {
  margin: 0;
  padding-inline-start: 20px;
}

.sync-details-list li + li {
  margin-top: 4px;
}

.sync-details-raw summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #2f57d6;
}

.sync-details-raw pre {
  margin: 8px 0 0;
  padding: 12px 14px;
  max-height: 40vh;
  overflow: auto;
  border-radius: 6px;
  background: #1e1e1e;
  color: #e6e6e6;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  direction: ltr;
  text-align: left;
}

/* Sync status block — same look in desktop panel, mobile tabs and popup viewer */
.sync-status {
  margin: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  border-inline-start: 4px solid #dc2626;
  background: #fef2f2;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.5;
  text-align: start;
  overflow-wrap: anywhere;
}

.sync-status--warning {
  border-color: #fde68a;
  border-inline-start-color: #d97706;
  background: #fffbeb;
}

.sync-status--info {
  border-color: #bfdbfe;
  border-inline-start-color: #2f57d6;
  background: #eff6ff;
}

.sync-status--empty {
  border: none;
  background: none;
  color: #6b7280;
  text-align: center;
}

.sync-status--banner {
  margin: 0 0 12px;
}

.sync-status-title {
  font-weight: 600;
  color: #b91c1c;
  margin-bottom: 2px;
}

.sync-status--warning .sync-status-title {
  color: #b45309;
}

.sync-status--info .sync-status-title {
  color: #1e40af;
}

.sync-status-more {
  margin-top: 4px;
  font-size: 13px;
  color: #6b7280;
}

.sync-status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 8px;
}

.sync-status-btn {
  background: var(--accent, #2f57d6);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.sync-status-btn--link {
  background: none;
  color: #2f57d6;
  padding: 6px 0;
  text-decoration: underline;
}

.sync-status-details {
  margin-top: 8px;
}

.sync-status-details > summary {
  cursor: pointer;
  color: #2f57d6;
  font-size: 13px;
  font-weight: 500;
}

.sync-status-details > .sync-details {
  margin-top: 10px;
}

/* Phones: keep the notice compact so it doesn't push the preview off screen; full log stays under See more */
@media (max-width: 768px) {
  .sync-status--banner {
    margin: 0 0 8px;
    padding: 10px 12px;
    font-size: 13px;
  }
  .sync-status--clamp .sync-status-summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sync-status-btn {
    min-height: 36px;
  }
}

body.pg-dark .sync-status {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(248, 113, 113, 0.35);
  border-inline-start-color: #f87171;
  color: #e5e7eb;
}
body.pg-dark .sync-status--warning {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
  border-inline-start-color: #fbbf24;
}
body.pg-dark .sync-status--info {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(147, 197, 253, 0.35);
  border-inline-start-color: #93c5fd;
}
body.pg-dark .sync-status--empty {
  background: none;
  border: none;
  color: #9ca3af;
}
body.pg-dark .sync-status-title,
body.pg-dark .sync-modal-title                       { color: #fca5a5; }
body.pg-dark .sync-status--warning .sync-status-title,
body.pg-dark .sync-modal-title--warning              { color: #fcd34d; }
body.pg-dark .sync-status--info .sync-status-title,
body.pg-dark .sync-modal-title--info                 { color: #93c5fd; }
body.pg-dark .sync-status-more                       { color: #9ca3af; }
body.pg-dark .sync-status-btn--link,
body.pg-dark .sync-modal .sync-details-raw summary   { color: #9db4ff; }
body.pg-dark .sync-modal-card                        { background: #1c2235; border: 1px solid #3a4561; }
body.pg-dark .sync-modal-close                       { color: #b8bfd0; }
body.pg-dark .sync-modal-close:hover                 { background: #252b40; color: #f1f3f5; }
body.pg-dark .sync-modal-dismiss                     { background: transparent; border-color: #3a4561; color: #f1f3f5; }
body.pg-dark .sync-modal-dismiss:hover               { background: #252b40; }
body.pg-dark .sync-modal .sync-details               { color: #d1d5db; }
body.pg-dark .sync-modal .sync-details-label         { color: #9ca3af; }
body.pg-dark .sync-modal .sync-details-code          { background: #161b2b; color: #e5e7eb; }
/* Shared Status Badge Component */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
}

/* Status Indicator Dot */
.status-badge .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* Status Variants */
.status-badge.pending .status-dot {
  background: #fcc419;
}

.status-badge.approved .status-dot {
  background: #34a853;
}

.status-badge.error .status-dot,
.status-badge.rejected .status-dot {
  background: #ea4335;
}
/* Pending Approval Badge — shared by the publish-request status banner on public node pages (theory, quiz, pitfall). */

.published-warning-wrapper {
  padding: 12px 24px 0;
  display: none; /* Controlled by JS but let's set a default */
  flex-direction: column;
  align-items: flex-start;
}

.warning-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
}

.warning-badge .version-text {
  font-weight: 600;
}

.warning-badge.warning-light {
  background-color: #e6f0fa;
  border: 1px solid var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  border-radius: 4px;
  padding: 8px 16px;
  gap: 32px;
}

.warning-light .wb-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.warning-light .wb-dot {
  width: 14px;
  height: 14px;
  background-color: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.warning-light .wb-text {
  color: #444;
  font-size: 15px;
  font-weight: 500;
}

.warning-light .version-text {
  color: #444;
  font-weight: 500;
}

.warning-light .wb-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.warning-light .wb-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  color: #333;
}

.tf-light {
  color: #888;
}

.warning-text {
  margin: 4px 0 0;
  font-size: 14px;
  color: #757575;
  font-weight: normal;
}

.see-review-link {
  color: #757575;
  text-decoration: underline;
  cursor: pointer;
  transition: opacity 0.2s;
}

.see-review-link:hover {
  opacity: 0.8;
}

/* Note under the pending badge; specificity beats view.css's white .warning-text. */
.warning-text.wb-note {
  padding: 0 12px 12px;
  background-color: #e6f0fa;
  color: #757575;
  font-weight: normal;
  font-size: 11px;
}

.see-review-link.wb-reasons-link {
  color: #2f57d6;
}

/* Delete Request Badges */
.warning-badge.warning-danger-light {
  background-color: #fff0f0;
  border: 1px solid #f34141;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  border-radius: 4px;
  padding: 8px 16px;
  gap: 32px;
  color: #c0392b;
}

.warning-danger-light .wb-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.warning-danger-light .wb-text {
  color: #c0392b;
  font-size: 15px;
  font-weight: 600;
}

.warning-danger-light .wb-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.warning-danger-light .wb-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  color: #c0392b;
}

.warning-badge.warning-danger {
  background-color: #f34141;
  color: #fff;
  border-radius: 4px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
/* Popup Menu Component */
.menu-container {
  position: relative;
}

.menu-popup {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20, 24, 60, 0.12);
  min-width: 220px;
  z-index: 1000;
  border: 1px solid #e4e4e7;
  box-sizing: border-box;
  overflow: hidden;
}

.menu-popup.right-aligned {
  left: auto;
  right: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 14px;
  font-family: inherit;
  color: #1a1c2b;
  cursor: pointer;
  border-bottom: 1px solid #f0f1f4;
  box-sizing: border-box;
  text-decoration: none;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:not(.toggle-item):hover {
  background: #f5f6fb;
}

.menu-item.danger {
  display: flex;
  align-items: center;
  color: #f44336;
}

.menu-item.danger:hover {
  background: #fdecea;
}

/* Toggle item inside menu */
.menu-item.toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: default;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
  .export-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    min-width: unset;
    width: 100%;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
    z-index: 1100;

    /* Slide animation */
    transform: translateY(100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    display: block !important; /* override hidden so transition works */
    pointer-events: none;
  }

  .export-menu:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
}/* Main Header Component */
.main-header {
  height: var(--header-height, 60px);
  background: var(--primary-1);
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
}

.header-logo {
  flex: 1;
}

.header-user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Mobile Responsive ── */
@media (max-width: 480px) {
  .main-header {
    padding: 0 10px;
  }
}
/* Info Bar Component */
.info-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: var(--info-bar-height, 81px);
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  gap: 20px;
  box-sizing: border-box;
}

.info-bar-left {
  display: flex;
  gap: 16px;
  align-items: center;
}

.info-avatar-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #2f57d6;
  border: 2px solid #2f57d6;
}

.info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-label {
  font-size: 12px;
  color: #999;
}

.info-role {
  font-size: 16px;
  font-weight: 600;
  color: #222;
}

.info-bar-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  flex: 1;
}

.info-center-title {
  font-size: 14px;
  font-weight: 700;
  color: #222;
}

.info-center-grid {
  display: flex;
  gap: 32px;
}

.info-center-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-detail-row {
  font-size: 13px;
  display: flex;
  gap: 4px;
}

.info-key {
  font-weight: 600;
  color: #222;
}

.info-val {
  color: #666;
}
/* Custom Dropdown Component */
.custom-dropdown {
  position: relative;
  display: inline-block;
  min-width: 200px;
}

.custom-dropdown-trigger {
  width: 100%;
  max-width: 200px;
  padding: 8px 32px 8px 12px;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s;
}

.custom-dropdown-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Placeholder styling */
.custom-dropdown-trigger.has-placeholder span {
  color: #999;
  font-weight: 400;
}

.custom-dropdown-trigger:hover {
  border-color: #2f57d6;
}

.custom-dropdown-trigger svg {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.custom-dropdown-trigger.open svg {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.dropdown-search-wrapper {
  padding: 8px;
  border-bottom: 1px solid #e8e8e8;
  background: #fafafa;
}

.dropdown-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.dropdown-search-input:focus {
  border-color: #2f57d6;
}

.dropdown-items-container {
  overflow-y: auto;
  max-height: 260px;
}

.no-results-message {
  padding: 16px 12px;
  text-align: center;
  color: #999;
  font-size: 13px;
}

.custom-dropdown-menu.hidden {
  display: none;
}

.custom-dropdown-item {
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.custom-dropdown-item:hover {
  background: #f0f0f0;
}

.custom-dropdown-item.selected {
  background: #e8f0ff;
  color: #2f57d6;
  font-weight: 600;
}

.custom-dropdown-item:first-child {
  border-radius: 4px 4px 0 0;
}

.custom-dropdown-item:last-child {
  border-radius: 0 0 4px 4px;
}

/* ── Mobile Responsive ── */
@media (max-width: 480px) {
  .custom-dropdown {
    min-width: 0;
    width: 100%;
  }
  .custom-dropdown-trigger {
    max-width: 100%;
  }
}
/* Shared question card styles for editor and public quiz views (DRY). */

:root {
  --input-height: 40px;
}

/* ===== QUESTION CARD BASE ===== */
.question-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 24px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  border: none;
  border-left: 3px solid var(--q-accent, #2f57d6);
  transition: box-shadow 0.2s;
  overflow: hidden;
  margin-bottom: 16px;
}

.question-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ===== INPUT SUFFIX GROUP ===== */
.input-suffix-group {
  display: flex;
  align-items: center;
  border: 1px solid #dde1e6;
  border-radius: 6px;
  background-color: #fff;
  overflow: hidden;
  width: fit-content;
  height: var(--input-height);
}

.input-suffix-group input {
  width: 50px;
  height: 100%;
  border: none;
  border-right: 1px solid #dde1e6;
  border-radius: 0;
  text-align: center;
  font-size: 14px;
  color: #333;
  padding: 0 8px;
  box-sizing: border-box;
}

.input-suffix-group input:focus {
  outline: none;
  background-color: #f5f8ff;
}

.input-suffix-group .suffix {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 36px;
  padding: 0 8px;
  border: none;
  background: #fff;
  color: #333;
  font-size: 13px;
  font-weight: 500;
  box-sizing: border-box;
}

/* ===== QUESTION META BOX ===== */
.question-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Question Body Wrapper - flex layout for content + info-box */
.question-body-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.question-main-content {
  flex: 1;
}

.question-info-box {
  background: #e6f0ff;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  flex-shrink: 0;
  align-self: flex-start;
}

.info-row {
  display: flex;
  gap: 4px;
}

.info-key,
.info-label {
  font-weight: 600;
  color: #333;
}

.info-value {
  font-weight: 400;
  color: #666;
}

/* ===== QUESTION PROMPT ===== */
.question-prompt-section {
  margin-bottom: 20px;
}

.prompt-header {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  margin-bottom: 12px;
}

.prompt-textarea {
  width: 100%;
  min-height: 1000px;
  padding: 12px;
  border: 1px solid #2f57d6;
  border-radius: 4px;
  font-family: "Monaco", "Menlo", monospace;
  font-size: 12px;
  resize: vertical;
  box-sizing: border-box;
}

.prompt-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(47, 87, 214, 0.2);
}

/* ===== NUMERIC QUESTION ===== */
.numeric-answer-section {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.numeric-input {
  width: 200px;
  padding: 0 12px;
  height: var(--input-height);
  border: 1px solid #2f57d6;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
}

.numeric-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(47, 87, 214, 0.2);
}

/* ===== MULTIPLE CHOICE ===== */
.multi-options-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.multi-option-item {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* For editor view - checkbox to mark correct */
.option-correct-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 10px;
  cursor: pointer;
  accent-color: #2f57d6;
  flex-shrink: 0;
}

.option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* For public view - radio buttons */
.multi-option-item input[type="radio"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #2f57d6;
  flex-shrink: 0;
}

.multi-option-text,
.option-text {
  flex: 1;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* ===== ORDER QUESTION ===== */
.order-section-header {
  margin-bottom: 8px;
}

.order-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  margin: 0 0 4px 0;
}

.order-section-hint {
  font-size: 12px;
  color: #999;
  display: block;
}

.order-images-container {
  border: 1px solid #2f57d6;
  border-radius: 4px;
  padding: 16px;
  background: #fff;
  width: 80%;
  margin: 0 auto;
}

.order-images,
.order-images-grid {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  justify-content: center;
  gap: 16px;
}

.order-images img {
  object-fit: contain;
}

.order-image {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.order-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-upload-box {
  border: 1px dashed #999;
  border-radius: 8px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s;
}

.image-upload-box:hover {
  border-color: #666;
  background: #fafafa;
}

.upload-icon {
  color: #666;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-text {
  font-size: 13px;
  font-weight: 500;
  color: #666;
}

.correct-order-section {
  margin-top: 24px;
}

.correct-order-title,
.order-label {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  margin-bottom: 12px;
  display: block;
}

.order-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.order-slot {
  aspect-ratio: 1;
  border: 1px solid #2f57d6;
  border-radius: 8px;
  background: #e6f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 700;
  color: #2f57d6;
  cursor: pointer;
  transition: all 0.2s;
}

.order-slot:hover {
  background: #d0e4ff;
}

.order-slot.filled {
  background: #2f57d6;
  color: #fff;
}

/* ===== OPEN RESPONSE ===== */
.student-response-section {
  margin-top: 16px;
}

.response-title {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  margin-bottom: 4px;
}

.response-subtitle {
  font-size: 13px;
  color: #999;
  font-weight: 400;
  margin-bottom: 24px;
}

.response-content-wrapper {
  width: 80%;
  margin: 0 auto;
}

.open-response-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid #2f57d6;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}

.open-response-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(47, 87, 214, 0.2);
}

.supporting-files {
  margin-top: 16px;
}

.supporting-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #000;
  margin-bottom: 4px;
}

.supporting-hint {
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
}

.file-upload-area {
  border: 1px dashed #d0d0d0;
  border-radius: 8px;
  padding: 60px 20px;
  text-align: center;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
  cursor: pointer;
}

.file-upload-area:hover {
  border-color: #2f57d6;
  background: #f5f8ff;
}

.file-upload-icon {
  margin-bottom: 16px;
  color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 32px;
}

.file-upload-text {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  margin-bottom: 8px;
}

.choose-file-link,
.upload-link {
  color: #2f57d6;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 4px;
}

.file-upload-hint,
.upload-formats {
  font-size: 12px;
  color: #999;
}

.or-label,
.url-divider {
  text-align: center;
  margin: 16px 0;
  font-size: 14px;
  color: #999;
  font-weight: 600;
}

.url-input-section,
.url-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.url-label {
  font-size: 13px;
  color: #666;
}

.url-input {
  width: 100%;
  padding: 0 12px;
  height: var(--input-height);
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

.url-input:focus {
  outline: none;
  border-color: #2f57d6;
  box-shadow: 0 0 0 2px rgba(47, 87, 214, 0.2);
}

/* ===== ANSWER SECTION ===== */
.answer-section {
  margin-top: 16px;
}

.answer-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #000;
  margin-bottom: 12px;
}

.question-content {
  margin-bottom: 16px;
  line-height: 1.6;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
}
/* Shared between editor view and public views */

.header-buttons-group {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}

.export-dropdown-container {
  position: relative;
}

.export-download-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #2f57d6;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.export-download-btn:hover {
  background: #1e3fa0;
}

.export-download-btn svg {
  flex-shrink: 0;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.export-download-btn .loading-spinner {
  animation: spin 1s linear infinite;
}

.export-download-btn .loading-spinner.hidden {
  display: none !important;
}

/* Export Dropdown Menu */
.export-menu {
  min-width: 180px;
}

.export-format-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
}

.export-format-item span {
  font-size: 14px;
  color: #333;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {

    .export-menu {
      position: fixed;
      bottom: 0px;
      top: auto;
      min-width: stretch;
      border-top-left-radius: 18px;
      border-top-right-radius: 18px;
      box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
      z-index: 1100;
  
}}
/* Modal Component - Dialog boxes for forms */

.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.modal:not(.hidden) {
  display: flex;
}

.modal .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.modal .modal-card {
  position: relative;
  width: min(92vw, 420px);
  max-width: 92vw;
  background: #fff;
  color: #222;
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  padding: 1rem 1rem 0.75rem;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modal-form h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.modal-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.modal-form input[type="text"],
.modal-form input[type="number"],
.modal-form input[type="email"],
.modal-form select {
  border: 1px solid #ccc;
  border-radius: var(--br-md);
  padding: 0.5rem 0.65rem;
  font-size: 1rem;
  font-family: inherit;
}

.modal-form input[type="text"]:focus,
.modal-form input[type="number"]:focus,
.modal-form input[type="email"]:focus,
.modal-form select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.modal-actions button {
  padding: 0.5rem 0.9rem;
  border-radius: var(--br-md);
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
}

.modal-actions button.primary {
  background: #111;
  color: #fff;
}

.modal-actions button.primary:hover {
  background: #333;
}

.modal-actions button:not(.primary) {
  background: var(--grey-lighter);
  color: #111;
}

.modal-actions button:not(.primary):hover {
  background: #e0e0e0;
}

/* Success Modal */
.success-modal-card {
  text-align: center;
  padding: 2.5rem 2rem;
  max-width: 400px;
  border-radius: 12px;
  background: #fff;
  animation: modalScaleContent 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal:not(.hidden) .modal-backdrop {
  animation: modalFadeBackdrop 0.2s ease-out;
}

@keyframes modalFadeBackdrop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalScaleContent {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.success-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.success-icon {
  margin-bottom: 1.2rem;
  display: flex;
  justify-content: center;
}

.success-modal-title {
  font-size: 1.5rem;
  margin: 0 0 1rem;
  color: #333;
  font-weight: 700;
}

.success-modal-message {
  color: #666;
  font-size: 1rem;
  margin: 0 0 2rem;
  line-height: 1.5;
}

body.pg-dark .success-modal-title {
  color: #f1f3f5;
}

body.pg-dark .success-modal-message {
  color: #b6bccc;
}

.success-modal-btn {
  background: #3b60e4;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  max-width: 160px;
  transition: background 0.2s;
}

.success-modal-btn:hover {
  background: #2f50c0;
}
/* Confirm Dialog Component - Reusable confirmation dialog */

.confirm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity 0.2s ease;
}

.confirm-dialog.hidden {
  display: none;
  opacity: 0;
}

.confirm-dialog-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  max-width: 440px;
  width: 90%;
  max-height: calc(100% - 32px);
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: confirmDialogSlideIn 0.2s ease-out;
}

@keyframes confirmDialogSlideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.confirm-dialog-title {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  margin: 0 0 12px 0;
}

.confirm-dialog-message {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

.confirm-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.confirm-dialog-btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  min-width: 80px;
}

.confirm-dialog-btn-cancel {
  background: white;
  color: #666;
  border: 1px solid #ddd;
}

.confirm-dialog-btn-cancel:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

.confirm-dialog-btn-confirm {
  background: #ef4444;
  color: white;
}

.confirm-dialog-btn-confirm:hover {
  background: #dc2626;
}

.confirm-dialog-btn-confirm:active {
  transform: scale(0.98);
}

.confirm-dialog-btn-cancel:active {
  transform: scale(0.98);
}

/* Variants for different types */
.confirm-dialog-btn-confirm.primary {
  background: var(--accent);
}

.confirm-dialog-btn-confirm.primary:hover {
  background: #3d4fa3;
}

.confirm-dialog-btn-confirm.success {
  background: #10b981;
}

.confirm-dialog-btn-confirm.success:hover {
  background: #059669;
}

.confirm-dialog-btn-neutral {
  background: white;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.confirm-dialog-btn-neutral:hover {
  background: #f0f2fa;
}

.confirm-dialog-btn-neutral:active {
  transform: scale(0.98);
}

body.pg-dark .confirm-dialog-card {
  background: #1c2235;
  color: #f1f3f5;
  border: 1px solid #3a4561;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
body.pg-dark .confirm-dialog-title   { color: #f1f3f5; }
body.pg-dark .confirm-dialog-message { color: #b8bfd0; }
body.pg-dark .confirm-dialog-btn-cancel {
  background: #1c2235;
  color: #d2d7e3;
  border-color: #3a4561;
}
body.pg-dark .confirm-dialog-btn-cancel:hover {
  background: #252b40;
  border-color: #4f5d80;
}
body.pg-dark .confirm-dialog-btn-neutral {
  background: transparent;
  color: #9aafff;
  border-color: #9aafff;
}
body.pg-dark .confirm-dialog-btn-neutral:hover { background: #252b40; }
/* Shared Toggle Switch Component */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2ece56;
}

input:checked + .slider:before {
  transform: translateX(16px);
}

.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}
/* Slide Panel Tabs - Cloned from quiz-edit-tab pattern for panel context */

.sp-tab-header {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #2f57d6;
  background: #fff;
  height: 44px;
  flex-shrink: 0;
}

.sp-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  font-weight: 600;
  font-size: 14px;
  color: #666;
  border: none;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition:
    color 0.2s,
    background 0.2s;
}

.sp-tab.active {
  color: #222;
  background: #e6eefc;
}

.sp-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 4px;
  background: #2f57d6;
}

.sp-tab:not(.active):hover {
  background: #f5f5f5;
  color: #333;
}

/* Tab content visibility */
.sp-tab-content {
  display: none;
}

.sp-tab-content.active {
  display: block;
}
/* Shared Side Panel Component - Template for sliding panels (roles, notes, etc.) */

/* Overlay backdrop */
.side-panel-overlay,
.sp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.side-panel-overlay.active,
.sp-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Panel */
.side-panel,
.sp-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 420px;
  max-width: 100%;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.25);
  z-index: 1200;
  border-radius: 12px 0 0 12px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.side-panel.open,
.sp-panel.open {
  transform: translateX(0);
}

.side-panel.hidden,
.sp-panel.hidden {
  display: none;
}

/* Shared panel layout - reusable structure */
.panel-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.panel-header {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
  position: relative;
}

.panel-header-close {
  position: absolute;
  right: 12px;
  top: 12px;
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  color: #666;
  z-index: 10;
  transition: color 0.2s;
}

.panel-header-close:hover {
  color: #333;
}

.panel-header-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #222;
  padding-right: 32px;
}

.panel-header-subtitle {
  font-size: 13px;
  color: #888;
  margin: 2px 0 0;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
  .side-panel {
    width: 100%;
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  .panel-header-title {
    font-size: 16px;
  }
}
/* Hover Tooltip Component - Reusable tooltip for buttons and icons */

.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-content {
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tooltip-wrapper:hover .tooltip-content {
  opacity: 1;
}

/* Show tooltip on tap (toggled via JS) — for touch, which has no hover. */
.tooltip-wrapper.tooltip-active .tooltip-content {
  opacity: 1;
}

/* Position variants */
.tooltip-left .tooltip-content {
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
}

.tooltip-right .tooltip-content {
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
}

.tooltip-top .tooltip-content {
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-bottom .tooltip-content {
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
}

/* Arrow indicators (optional small triangles) */
.tooltip-left .tooltip-content::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid rgba(0, 0, 0, 0.9);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.tooltip-right .tooltip-content::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-right: 6px solid rgba(0, 0, 0, 0.9);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.tooltip-top .tooltip-content::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid rgba(0, 0, 0, 0.9);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.tooltip-bottom .tooltip-content::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-bottom: 6px solid rgba(0, 0, 0, 0.9);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

/* Wrap long tooltip text instead of running off the mobile viewport. */
@media (max-width: 600px) {
  .tooltip-content {
    max-width: calc(100vw - 32px);
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
}
/* Button Component - Various button styles */

.icon-button {
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  border-radius: var(--br-sm);
  transition: background var(--transition-normal);
}

.icon-button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.icon-button.hidden {
  display: none;
}

.lv-big-btn {
  color: #062;
  background: var(--brand);
  border: none;
  padding: 1.1rem 0.75rem;
  border-radius: var(--br-md);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.1s;
}

.lv-big-btn:active {
  transform: translateY(1px);
}

.lv-big-btn:hover {
  filter: brightness(1.05);
}

.settings-btn {
  padding: 0.25rem 0.6rem;
  border-radius: var(--br-sm);
  border: 1px solid #ccc;
  background: var(--grey-lighter);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.settings-btn:hover {
  background: #e0e0e0;
}

.settings-btn.primary {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}

.settings-btn.primary:hover {
  background: #1d4ed8;
}

.settings-btn.danger {
  background: #ef4444;
  border-color: #dc2626;
  color: #fff;
}

.settings-btn.danger:hover {
  background: #dc2626;
}

.settings-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--br-md);
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn.primary {
  background: var(--primary-1);
  color: white;
  border-color: var(--primary-2);
}

.btn.primary:hover {
  background: #1d4ed8;
}

.btn.danger {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

.btn.danger:hover {
  background: #dc2626;
}
/* User Menu - Top-right user avatar and navigation */

#user-menu {
  display: flex;
  gap: 8px;
  z-index: var(--z-user-menu, 100);
}

.um-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast);
}

.um-icon:hover {
  background: rgba(255, 255, 255, 0.2);
}

.avatar-fallback {
  font-size: 20px;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Base look inherited from popup-menu.css (.menu-popup); only positioning is set here. */
#user-menu-panel {
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 220px;
  z-index: 1000;
}

#user-menu-panel.hidden { display: none; }

/* Legacy `.um-item` (older menu pattern) — keep light-themed if used. */
.um-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: #1a1c2b;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  transition: background-color var(--transition-fast);
}

.um-item:hover { background: #f5f6fb; }

.um-item.danger { color: #f44336; }
.um-item.danger:hover { background: #fdecea; }

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
  #user-menu-panel {
    right: 0;
    min-width: min(80vw, 220px);
  }
}
/* Auth Layout - Split Screen Design */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Lock body scroll only for pages managing their own internal scroll (auth, node viewer, editor, map) — a global lock broke scrolling on other pages. */
body:has(.auth-layout),
body:has(.pg-container),
body:has(.editor-container),
body:has(#app-root) {
  overflow: hidden;
}

/* Allow body scroll on auth pages below desktop width — the stacked column can exceed the viewport on smaller phones. */
@media (max-width: 768px) {
  body:has(.auth-layout) { overflow: auto; }
}

.auth-layout {
  display: flex;
  height: 100vh;
  /* 100vw includes the scrollbar width, causing horizontal overflow. */
  width: 100%;
}

/* Left Side - Branding */
.auth-left {
  flex: 1;
  background: linear-gradient(135deg, #e8ecfd 0%, #d4dcfa 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  position: relative;
}

.auth-left::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, #9ba5d6 50%, transparent 100%);
}

.auth-logo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 48px;
  box-shadow: 0 4px 12px rgba(74, 95, 193, 0.15);
}

.auth-logo span {
  font-size: 24px;
  font-weight: 700;
  color: #1a1d2e;
  letter-spacing: 0.5px;
}

.auth-tagline {
  text-align: center;
  max-width: 480px;
}

.auth-tagline h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1d2e;
  margin-bottom: 16px;
}

.auth-tagline h1 .highlight {
  color: var(--accent);
}

.auth-tagline p {
  font-size: 18px;
  color: #5b6178;
  font-weight: 400;
}

/* Right Side - Form */
.auth-right {
  flex: 1;
  background: #fafbfc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

.auth-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: 48px;
  width: 100%;
  max-width: 440px;
}

.auth-card-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #1a1d2e;
  margin-bottom: 8px;
}

.auth-card-header p {
  font-size: 15px;
  color: #6b7280;
  margin-bottom: 32px;
}

/* Form Elements */
.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1a1d2e;
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #1a1d2e;
  font-size: 15px;
  outline: none;
  transition: all 0.2s ease;
}

.form-group input::placeholder {
  color: #9ca3af;
}

.form-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(74, 95, 193, 0.1);
}

.form-link {
  display: block;
  text-align: right;
  margin-top: 8px;
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.form-link:hover {
  color: #3a4fa1;
}

.auth-submit-btn {
  width: 100%;
  padding: 14px 24px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 32px;
  transition: all 0.2s ease;
}

.auth-submit-btn:hover {
  background: #3a4fa1;
  box-shadow: 0 4px 12px rgba(74, 95, 193, 0.3);
}

.auth-submit-btn:active {
  transform: translateY(1px);
}

.auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: #6b7280;
}

.auth-footer-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s ease;
}

.auth-footer-link:hover {
  color: #3a4fa1;
  text-decoration: underline;
}

/* Verification Code Inputs */
.verification-code-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 32px 0;
}

.code-input {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid #d1d5db;
  background: #ffffff;
  color: #1a1d2e;
  outline: none;
  transition: all 0.2s ease;
}

.code-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(74, 95, 193, 0.1);
}

.resend-container {
  text-align: center;
  margin-bottom: 24px;
  min-height: 21px; /* Prevent layout shift */
}

.resend-timer {
  font-size: 14px;
  color: #6b7280;
}

.resend-link {
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
  cursor: pointer;
}

.resend-link:hover {
  color: #3a4fa1;
  text-decoration: underline;
}

/* Password Input Wrapper */
.password-input-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

.password-toggle:hover {
  color: var(--accent);
}

.password-error {
  margin-top: 8px;
  font-size: 13px;
  color: #ef4444;
  display: flex;
  align-items: center;
  gap: 6px;
}

.password-error::before {
  content: "⚠";
  font-size: 16px;
}

/* Password Strength Indicator */
.password-strength {
  margin-top: 12px;
}

.strength-bar {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}

.strength-bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  transition:
    width 0.3s ease,
    background-color 0.3s ease;
}

.strength-bar.weak::after {
  width: 33%;
  background: #ef4444;
}

.strength-bar.medium::after {
  width: 66%;
  background: #f59e0b;
}

.strength-bar.strong::after {
  width: 100%;
  background: #10b981;
}

.strength-text {
  font-size: 13px;
  color: #6b7280;
}

.strength-text.weak {
  color: #ef4444;
}

.strength-text.medium {
  color: #f59e0b;
}

.strength-text.strong {
  color: #10b981;
}

/* Mobile Header Wave */
.mobile-header {
  display: none;
  background: var(--accent);
  height: 140px;
  position: relative;
}

.mobile-header::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  height: 50px;
  background: var(--accent);
  border-radius: 0 0 50% 50%;
}

.mobile-header .back-button {
  position: absolute;
  top: 60px;
  left: 20px;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  z-index: 10;
}

.mobile-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.mobile-logo span {
  font-size: 24px;
  font-weight: 700;
  color: #1a1d2e;
}

/* Step Indicator */
.step-indicator {
  display: none;
  text-align: center;
  padding: 32px 0;
  margin-top: auto;
}

.step-text {
  font-size: 15px;
  color: #6b7280;
  margin-bottom: 16px;
}

.step-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.step-dots::before,
.step-dots::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d1d5db;
  max-width: 80px;
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  transition: background 0.3s ease;
}

.step-dot.active {
  background: var(--accent);
}

/* Success Screen */
.success-content {
  text-align: center;
  padding: 60px 0;
}

.success-icon {
  margin: 0 auto 32px;
  width: 64px;
  height: 64px;
}

.success-content h2 {
  font-size: 28px;
  font-weight: 700;
  color: #1a1d2e;
  margin-bottom: 12px;
}

.success-content p {
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 40px;
}

/* Responsive - Desktop */
@media (max-width: 1200px) {
  .auth-left {
    display: none;
  }

  .auth-right {
    flex: 1;
    padding: 32px 24px;
  }
}

/* Responsive - Tablet */
@media (max-width: 768px) {
  .auth-layout {
    flex-direction: column;
  }

  .auth-left {
    display: none;
  }

  .auth-right {
    flex: 1;
    padding: 0;
    background: #e8ecfd;
  }

  /* Login page mobile — header + layout share one viewport-tall column; a 100vh layout under the header always overflowed. */
  body:has(#login-form) {
    display: flex;
    flex-direction: column;
  }

  body:has(#login-form) .mobile-header {
    display: block;
    flex: none;
    /* svh = height with Android/iOS browser bars visible, so the button isn't pushed off-screen. */
    height: clamp(80px, 18vh, 140px);
    height: clamp(80px, 18svh, 140px);
  }

  body:has(#login-form) .mobile-logo {
    display: flex;
    width: clamp(56px, 13vh, 100px);
    width: clamp(56px, 13svh, 100px);
    height: clamp(56px, 13vh, 100px);
    height: clamp(56px, 13svh, 100px);
  }

  body:has(#login-form) .mobile-logo span {
    font-size: clamp(16px, 3vh, 24px);
    font-size: clamp(16px, 3svh, 24px);
  }

  body:has(#login-form) .auth-layout {
    height: auto;
    flex: 1 0 auto;
  }

  body:has(#login-form) .auth-right {
    flex-direction: column;
    justify-content: flex-start;
  }

  body:has(#login-form) .auth-card {
    /* Must stay > 40px so the header's wave never overlaps the card. */
    margin-top: clamp(52px, 9vh, 80px);
    margin-top: clamp(52px, 9svh, 80px);
    border-radius: 32px 32px 0 0;
    padding: 40px 24px;
    flex: 1 0 auto;
  }

  body.pg-dark:has(#login-form) .auth-card {
    border-bottom: 0;
  }

  /* Signup page mobile */
  body:has(#email-form) .mobile-header,
  body:has(#verify-form) .mobile-header,
  body:has(#password-form) .mobile-header {
    display: block;
  }

  body:has(#email-form) .mobile-header .back-button,
  body:has(#verify-form) .mobile-header .back-button,
  body:has(#password-form) .mobile-header .back-button {
    display: block;
  }

  body:has(#email-form) .auth-card,
  body:has(#verify-form) .auth-card,
  body:has(#password-form) .auth-card {
    margin-top: 60px;
    border-radius: 32px 32px 0 0;
    padding: 32px 24px 24px;
    /* Same overflow fix as the login card above. */
    min-height: calc(100dvh - 140px);
    display: flex;
    flex-direction: column;
  }

  body:has(#email-form) .step-indicator,
  body:has(#verify-form) .step-indicator,
  body:has(#password-form) .step-indicator {
    display: block;
  }

  .auth-card-header h2 {
    font-size: 32px;
    margin-bottom: 12px;
  }

  .auth-card-header p {
    font-size: 16px;
    margin-bottom: 40px;
  }

  .verification-code-group {
    gap: 8px;
  }

  .code-input {
    width: 48px;
    height: 56px;
  }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
  .mobile-header {
    height: 120px;
  }

  .mobile-logo {
    width: 80px;
    height: 80px;
  }

  .mobile-logo span {
    font-size: 20px;
  }

  .auth-card {
    padding: 24px 20px;
    box-shadow: none;
  }

  .auth-card-header h2 {
    font-size: 28px;
  }

  .verification-code-group {
    gap: 6px;
  }

  .code-input {
    width: 42px;
    height: 50px;
    font-size: 20px;
  }

  .auth-submit-btn {
    padding: 12px 24px;
    font-size: 15px;
  }

  body:has(#login-form) .mobile-header {
    height: clamp(80px, 15vh, 120px);
    height: clamp(80px, 15svh, 120px);
  }

  body:has(#login-form) .mobile-logo {
    width: clamp(56px, 11vh, 80px);
    width: clamp(56px, 11svh, 80px);
    height: clamp(56px, 11vh, 80px);
    height: clamp(56px, 11svh, 80px);
  }

  body:has(#login-form) .mobile-logo span {
    font-size: clamp(16px, 3vh, 20px);
    font-size: clamp(16px, 3svh, 20px);
  }
}

/* Short phones (e.g. 360x640 Android, iPhone SE) — tighten login spacing so Sign in stays above the fold. */
@media (max-width: 768px) and (max-height: 700px) {
  body:has(#login-form) .auth-card {
    padding-top: 28px;
    padding-bottom: 24px;
  }

  body:has(#login-form) .auth-card-header h2 {
    margin-bottom: 8px;
  }

  body:has(#login-form) .auth-card-header p {
    margin-bottom: 24px;
  }

  body:has(#login-form) .form-group {
    margin-bottom: 18px;
  }

  body:has(#login-form) .auth-submit-btn {
    margin-top: 20px;
  }
}
/* Form Inputs Component - Reusable input styles */

.settings-input {
  width: 100%;
  flex: 1;
  padding: 0.25rem 0.45rem;
  border-radius: var(--br-sm);
  border: 1px solid #ccc;
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.settings-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.settings-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f5f5f5;
}

.settings-input[type="email"] {
  padding: 0.4rem 0.6rem;
}

.settings-promote-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.settings-promote-row .settings-input {
  flex: 1;
  min-width: 200px;
}

.settings-promote-row button {
  flex-shrink: 0;
}

.settings-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.settings-input-group label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fg);
}

.settings-input-group input {
  padding: 0.5rem;
  border-radius: var(--br-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-dark);
  color: var(--fg);
}

.settings-input-group input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Settings rows for grouped inputs */
.settings-promote-help {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 0.5rem;
}

section#promote-user-section,
section#attachments-section {
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--br-md);
}

.attachments-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--fg);
}

.attachments-upload-wrap {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.attachments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.attachments-list li {
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--br-sm);
  font-size: 0.85rem;
}

.settings-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.settings-list li {
  padding: 0.5rem 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-list li:last-child {
  border-bottom: none;
}

/* ── Mobile Responsive ── */
@media (max-width: 480px) {
  .settings-promote-row .settings-input {
    min-width: 0;
    width: 100%;
  }
  .settings-promote-row {
    flex-direction: column;
  }
  .attachments-upload-wrap {
    flex-direction: column;
    align-items: stretch;
  }
}
/* Main Sidebar Component */
.main-sidebar {
  width: var(--sidebar-collapsed-width);
  background: #eef2ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 8px;
  /* height: calc(100vh - var(--header-height) - 30px); */
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.sidebar-btn {
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 20px;
  transition: background-color 0.2s;
}

.sidebar-btn:hover {
  background: rgba(74, 95, 193, 0.1);
  transform: none;
}

.sidebar-btn.active {
  background: rgba(74, 95, 193, 0.2);
  color: var(--accent);
  border: none;
  box-shadow: none;
}

.sidebar-spacer {
  flex: 1;
}

.sidebar-btn-help {
  margin-top: auto;
  margin-bottom: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.sidebar-btn-help:hover {
  background: transparent;
  opacity: 0.8;
}

/* Style SVG specifically for the Help button to match design (Dark circle, white icon) */
.sidebar-btn-help svg circle {
  fill: #333;
  stroke: none;
}

.sidebar-btn-help svg path,
.sidebar-btn-help svg line {
  stroke: #fff;
}

.main-sidebar.hidden {
  display: none;
}
/* Accordion Component - Collapsible sections for settings */

.lv-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.lv-accordion-section {
  background: var(--bg-dark);
  border-radius: var(--br-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-normal);
}

.lv-accordion-section.open {
  box-shadow: var(--shadow-lg);
}

.lv-acc-header {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0.7rem 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #fffffd;
}

.lv-acc-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.lv-acc-chevron {
  transition: transform var(--transition-normal);
}

.lv-accordion-section.open .lv-acc-chevron {
  transform: rotate(90deg);
}

.lv-acc-body {
  padding: 0 0.9rem;
  font-size: 0.65rem;
  line-height: 1.35;
  transition: max-height var(--transition-slow);
  max-height: 0;
  overflow: hidden;
}

.lv-acc-body ul {
  margin: 0.5rem 0 0.8rem;
  padding-left: 1.1rem;
}

.lv-acc-body li {
  margin: 0.15rem 0;
}

.lv-acc-body-open {
  max-height: 1000px;
}

.lv-acc-body-admin {
  max-height: 2000px;
}

.lv-empty {
  margin: 0.55rem 0 0.9rem;
  opacity: 0.6;
}

/* Accordion body content adjustments */
.lv-acc-body label,
.lv-acc-body input,
.lv-acc-body select {
  font-size: 0.9rem;
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  padding: 0.5rem 0;
}

.switch-row input[type="checkbox"] {
  cursor: pointer;
}
/* Profile Component - User profile card styling */

/* .profile-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1rem;
  align-items: center;
  width: 100%;
} */

.avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.avatar-upload-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  background: #ddd;
  border: 2px solid #fff;
  box-shadow: var(--shadow-lg);
}

.avatar-upload {
  background: var(--brand);
  color: #fff;
  padding: 0.35rem 0.6rem;
  border-radius: var(--br-md);
  font-size: 0.8rem;
  cursor: pointer;
  border: none;
  transition: filter var(--transition-fast);
}

.avatar-upload:hover {
  filter: brightness(1.05);
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.pi-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--fg);
  font-weight: 500;
}

.pi-input {
  width: 95%;
  padding: 0.6rem;
  margin-top: 0.25rem;
  border-radius: var(--br-md);
  border: 1px solid var(--border-color);
  background: var(--bg-dark);
  color: var(--fg);
  font-size: 0.95rem;
  transition: all var(--transition-fast);
}

.pi-input:focus {
  outline: none;
  border-color: #888;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
  background: var(--bg-darker);
}

.pi-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.profile-save-btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* Avatar styles for user menu */
.avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
  /* .profile-card {
    grid-template-columns: 1fr;
  } */

  .avatar-wrap {
    flex-direction: row;
    justify-content: flex-start;
  }

  .pi-input {
    width: 100%;
  }
}
/* Read Aloud Component — shared between editor view and public node view */

.read-aloud-section {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.read-aloud-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid var(--primary-1);
  border-radius: 4px;
  font-size: 13px;
  color: var(--primary-1);
  cursor: pointer;
  transition: all 0.2s;
}

.read-aloud-btn:hover {
  background: #f5f5f5;
  border-color: #999;
}

.read-aloud-btn.playing {
  background: #e3f2fd;
  border-color: #2f57d6;
  color: #2f57d6;
}

.read-aloud-btn svg {
  width: 16px;
  height: 16px;
}
/* Reject Dialog Component */

.reject-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity 0.2s ease;
}

.reject-dialog.hidden {
  display: none;
  opacity: 0;
}

.reject-dialog-card {
  background: white;
  border-radius: 8px;
  padding: 32px;
  max-width: 560px;
  width: 90%;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
  animation: rejectDialogSlideIn 0.25s ease-out;
}

@keyframes rejectDialogSlideIn {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.reject-dialog-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.reject-dialog-message {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.reject-dialog-field {
  margin-bottom: 24px;
}

.reject-dialog-textarea {
  width: 100%;
  min-height: 160px;
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.reject-dialog-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.reject-dialog-textarea::placeholder {
  color: #999;
}

/* input-dialog reuses reject-dialog's classes; this fixes textarea sizing on the <input>. */
.input-dialog-input {
  min-height: auto;
  resize: none;
}

.reject-dialog-actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.reject-dialog-btn {
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  min-width: 140px;
}

.reject-dialog-btn-cancel {
  background: white;
  color: #666;
  border: 1px solid #ccc;
}

.reject-dialog-btn-cancel:hover {
  background: #f8f8f8;
  border-color: #bbb;
}

.reject-dialog-btn-confirm {
  /* Hardcoded, not var(--accent), so it stays visible outside a --accent scope — matches the hardcoded :hover/:disabled states below. */
  background: #2f57d6;
  color: white;
}

.reject-dialog-btn-confirm:hover {
  background: #3d4fa3;
}

.reject-dialog-btn-confirm:disabled {
  background: #aab4e4;
  cursor: not-allowed;
}

.reject-dialog-btn:active {
  transform: scale(0.98);
}

/* Also covers input-dialog, which reuses these classes */
body.pg-dark .reject-dialog-card {
  background: #1c2235;
  color: #f1f3f5;
  border: 1px solid #3a4561;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
body.pg-dark .reject-dialog-title   { color: #f1f3f5; }
body.pg-dark .reject-dialog-message { color: #b8bfd0; }
body.pg-dark .reject-dialog-textarea {
  background: #161b2b;
  color: #f1f3f5;
  border-color: #3a4561;
}
body.pg-dark .reject-dialog-textarea:focus {
  border-color: #9aafff;
  box-shadow: 0 0 0 3px rgba(154, 175, 255, 0.18);
}
body.pg-dark .reject-dialog-textarea::placeholder { color: #8a92a8; }
body.pg-dark .reject-dialog-btn-cancel {
  background: #1c2235;
  color: #d2d7e3;
  border: 1px solid #3a4561;
}
body.pg-dark .reject-dialog-btn-cancel:hover {
  background: #252b40;
  border-color: #4f5d80;
}
body.pg-dark .reject-dialog-btn-confirm:disabled {
  background: #2a3148;
  color: #8a92a8;
}

@media (max-width: 600px) {
  .reject-dialog-card {
    padding: 20px;
  }

  .reject-dialog-title {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .reject-dialog-message {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .reject-dialog-field {
    margin-bottom: 16px;
  }

  .reject-dialog-actions {
    gap: 10px;
  }

  .reject-dialog-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 10px;
  }
}
/* Editorial design system for Tests + Question Bank — mobile-first (640px/960px breakpoints); scoped under .qz-page so its light palette doesn't leak into the dark global theme. */

.qz-page {
  /* Surfaces */
  --qz-cream: #f5f6fb;
  --qz-paper: #ffffff;
  --qz-sand:  #eef0f7;
  --qz-line:        #e4e4e7;
  --qz-line-soft:   #f0f1f4;

  /* Text */
  --qz-ink:       #1a1c2b;
  --qz-ink-soft:  #3d3d40;
  --qz-mute:      #6c6c70;

  /* Brand accent (project --primary-1 blue) */
  --qz-coral:      var(--accent);
  --qz-coral-soft: #e7ebfc;

  /* Answer-tile colors (project secondary palette) */
  --qz-forest:      #43a57d;
  --qz-forest-soft: #e2f1ea;
  --qz-gold:        #e3c22c;

  --qz-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --qz-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  color: var(--qz-ink);
  font-family: var(--qz-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.qz-page * { box-sizing: border-box; }

/* Display flair classes (carry weight + tracking for editorial feel without serif). */
.qz-serif {
  font-family: var(--qz-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.qz-mono { font-family: var(--qz-mono); }

/* ── TOPBAR ─────────────────────────────────────────────────────────── */
.qz-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--qz-cream);
  border-bottom: 1px solid var(--qz-line);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  backdrop-filter: blur(8px);
}

.qz-logo {
  font-family: var(--qz-sans);
  font-weight: 700;
  font-size: 22px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--qz-ink);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}

.qz-logo::before {
  content: "●";
  color: var(--qz-coral);
  font-size: 10px;
  transform: translateY(-3px);
  display: inline-block;
}

.qz-nav-tabs {
  display: flex;
  gap: 2px;
  background: var(--qz-paper);
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--qz-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
}

.qz-nav-tabs::-webkit-scrollbar { display: none; }

.qz-nav-tabs a,
.qz-nav-tabs button {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--qz-mute);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.qz-nav-tabs a.active,
.qz-nav-tabs button.active { background: var(--qz-ink); color: var(--qz-paper); }
.qz-nav-tabs a:hover:not(.active),
.qz-nav-tabs button:hover:not(.active) { color: var(--qz-ink); }

.qz-topbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.qz-topbar-stamp {
  display: none; /* hidden on mobile to save space */
  font-family: var(--qz-mono);
  font-size: 11px;
  color: var(--qz-mute);
  letter-spacing: 0.04em;
}

.qz-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--qz-forest);
  color: var(--qz-paper);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

/* ── BUTTONS ────────────────────────────────────────────────────────── */
/* Shares the list/wizard's blue-accent rounded look instead of a separate pill system, so host/play/results read as the same app. */
.qz-btn {
  padding: 10px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--accent);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--accent);
  white-space: nowrap;
}

.qz-btn-primary { background: var(--accent); color: var(--qz-paper); }
.qz-btn-primary:hover { filter: brightness(1.08); }
.qz-btn-coral { background: var(--qz-coral); border-color: var(--qz-coral); color: var(--qz-paper); }
.qz-btn-coral:hover { filter: brightness(0.95); }
/* :not(:disabled) — touch keeps :hover on the last-tapped element, which made a disabled Skip look live. */
.qz-btn-ghost:not(:disabled):hover { background: var(--accent); color: var(--qz-paper); }

.qz-btn-sm { padding: 8px 14px; font-size: 12px; }
.qz-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── PAGE LAYOUT ────────────────────────────────────────────────────── */
.qz-main {
  /* max-width: 980px; */
  margin: 0 auto;
  padding: 24px 16px 80px;
}

.qz-page-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--qz-line);
  margin-bottom: 32px;
}

.qz-eyebrow {
  font-family: var(--qz-mono);
  font-size: 11px;
  color: var(--qz-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.qz-eyebrow .accent { color: var(--qz-coral); }

.qz-display-title {
  font-family: var(--qz-sans);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--qz-ink);
  width: 100%;
  padding: 4px 0;
  border-bottom: 2px dashed transparent;
  transition: border-color 0.2s ease;
}

.qz-display-title:focus,
.qz-display-title:hover { border-bottom-color: var(--qz-coral); }

/* Results header pairs title with bank name as a subtitle, so a long bank name at the shared title size reads too loud — scoped here only. */
#results-frame .qz-display-title { font-size: 26px; }
#results-frame .title-tag {
  font-size: 0.65em;
  font-weight: 500;
  color: var(--qz-mute);
  letter-spacing: 0;
}

.qz-page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.qz-page-actions .qz-btn { flex: 1 1 auto; }

/* ── SECTIONS ───────────────────────────────────────────────────────── */
.qz-section { margin-bottom: 36px; }

.qz-section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}

.qz-section-num {
  font-family: var(--qz-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--qz-coral);
  letter-spacing: 0.04em;
}

.qz-section-title {
  font-family: var(--qz-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.qz-section-title em {
  color: var(--qz-mute);
  font-weight: 500;
  font-style: normal;
}

.qz-section-body {
  display: grid;
  gap: 20px;
}

/* ── FIELDS ─────────────────────────────────────────────────────────── */
.qz-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--qz-ink-soft);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.qz-field-label .qz-hint {
  font-family: var(--qz-sans);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--qz-mute);
}

/* ── OPTION CARDS ───────────────────────────────────────────────────── */
.qz-option-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}

/* On mobile, every option grid stacks. cols-N kicks in at 640px+. */

.qz-opt {
  background: var(--qz-paper);
  border: 1px solid var(--qz-line);
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: inherit;
  text-align: left;
  color: var(--qz-ink);
}

.qz-opt:hover { border-color: var(--qz-ink); }

.qz-opt.selected {
  background: var(--qz-ink);
  color: var(--qz-paper);
  border-color: var(--qz-ink);
}

.qz-opt.selected .qz-opt-desc { color: rgba(255, 255, 255, 0.72); }

.qz-opt.selected::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 14px;
  width: 18px;
  height: 18px;
  background: var(--qz-coral);
  color: var(--qz-paper);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.qz-opt-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 28px; /* clear room for the ✓ badge */
}

.qz-opt-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--qz-coral);
  flex-shrink: 0;
}

.qz-opt-desc {
  font-size: 12px;
  color: var(--qz-mute);
  line-height: 1.5;
}

/* ── INLINE INPUTS ──────────────────────────────────────────────────── */
.qz-inline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--qz-paper);
  border: 1px solid var(--qz-line);
  border-radius: 12px;
}

.qz-inline-row label {
  font-size: 13px;
  color: var(--qz-ink-soft);
  font-weight: 500;
}

.qz-input {
  border: 1px solid var(--qz-line);
  background: var(--qz-cream);
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--qz-mono);
  font-size: 14px; /* 16px on touch, via global iOS-zoom guard above */
  color: var(--qz-ink);
  width: 80px;
  text-align: center;
}

.qz-input.wide { width: 100%; min-width: 0; text-align: left; }
.qz-input:focus { outline: 2px solid var(--qz-coral); border-color: var(--qz-coral); }

textarea.qz-input {
  width: 100%;
  text-align: left;
  font-family: var(--qz-sans);
  resize: vertical;
}

select.qz-input {
  width: 100%;
  text-align: left;
  font-family: var(--qz-sans);
}

/* ── SWITCH ─────────────────────────────────────────────────────────── */
.qz-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--qz-paper);
  border: 1px solid var(--qz-line);
  border-radius: 12px;
  gap: 12px;
}

.qz-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qz-switch-text strong { font-size: 13px; font-weight: 600; }
.qz-switch-text span { font-size: 12px; color: var(--qz-mute); }

.qz-switch {
  width: 44px;
  height: 24px;
  background: var(--qz-line);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
  border: 0;
  padding: 0;
}

.qz-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--qz-paper);
  border-radius: 50%;
  transition: left 0.2s ease;
}

.qz-switch.on { background: var(--qz-coral); }
.qz-switch.on::after { left: 23px; }

/* ── CONDITIONAL ────────────────────────────────────────────────────── */
.qz-conditional {
  display: none;
  padding-left: 14px;
  border-left: 2px solid var(--qz-coral);
  margin-top: -8px;
}

.qz-conditional.show {
  display: grid;
  gap: 14px;
  animation: qz-slide-in 0.3s ease;
}

@keyframes qz-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.qz-conditional-tag {
  font-family: var(--qz-mono);
  font-size: 10px;
  color: var(--qz-coral);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

/* ── CHIPS ──────────────────────────────────────────────────────────── */
.qz-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qz-chip {
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--qz-paper);
  border: 1px solid var(--qz-line);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  color: var(--qz-ink);
}

.qz-chip:hover { border-color: var(--qz-ink); }

.qz-chip.on {
  background: var(--qz-ink);
  color: var(--qz-paper);
  border-color: var(--qz-ink);
}

.qz-chip.on::before {
  content: "+";
  transform: rotate(45deg);
  font-size: 14px;
  font-weight: 600;
}

/* ── DIFFICULTY PILLS ───────────────────────────────────────────────── */
.qz-diff-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.qz-diff-pill {
  padding: 10px 4px;
  background: var(--qz-paper);
  border: 1px solid var(--qz-line);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  font-family: inherit;
  color: var(--qz-ink);
}

.qz-diff-pill:hover { border-color: var(--qz-ink); }

.qz-diff-pill.on {
  background: var(--qz-coral);
  border-color: var(--qz-coral);
  color: var(--qz-paper);
}

.qz-diff-pill .num {
  font-family: var(--qz-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  display: block;
  margin-bottom: 2px;
}

.qz-diff-pill .lbl {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── A/B CARD ───────────────────────────────────────────────────────── */
.qz-ab-card {
  background: var(--qz-paper);
  border: 1px solid var(--qz-line);
  border-radius: 12px;
  padding: 16px;
}

.qz-ab-banks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}

.qz-ab-bank {
  padding: 12px;
  border: 1px dashed var(--qz-line);
  border-radius: 10px;
  background: var(--qz-cream);
  text-align: center;
}

.qz-ab-bank .bank-name {
  font-family: var(--qz-sans);
  font-weight: 700;
  font-size: 18px;
}

.qz-ab-bank .bank-stat {
  font-family: var(--qz-mono);
  font-size: 11px;
  color: var(--qz-mute);
  margin-top: 4px;
}

.qz-add-bank {
  grid-column: 1 / -1;
  padding: 10px;
  border: 1px dashed var(--qz-line);
  border-radius: 10px;
  background: transparent;
  color: var(--qz-mute);
  cursor: pointer;
  font-size: 13px;
  margin-top: 6px;
  font-family: inherit;
}

.qz-add-bank:hover { color: var(--qz-ink); border-color: var(--qz-ink); }

/* ── SAVE BAR (sticks to bottom on mobile, pill on desktop) ─────────── */
.qz-save-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--qz-ink);
  color: var(--qz-paper);
  padding: 10px 16px env(safe-area-inset-bottom, 10px);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -8px 24px rgba(26, 24, 21, 0.18);
  z-index: 50;
}

.qz-save-bar .qz-progress-text { font-size: 12px; font-weight: 500; min-width: 0; flex: 1; }
.qz-save-bar .qz-progress-text strong { color: var(--qz-coral); }

/* ── PLAYER FRAME ───────────────────────────────────────────────────── */
.qz-player {
  min-height: calc(100vh - 60px);
  padding: 16px 12px;
  display: grid;
  place-items: start center;
  background:
    radial-gradient(circle at 20% 20%, rgba(59, 91, 219, 0.06), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(67, 165, 125, 0.06), transparent 50%),
    var(--qz-cream);
}

.qz-player-frame {
  width: 100%;
  max-width: 980px;
  background: var(--qz-paper);
  /* Matches .qt-card's 12px radius (modules/tests/index.css) so the player reads as the same app, not a separate softer UI. */
  border: 1px solid var(--qz-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(26, 24, 21, 0.06);
}

/* 3-track grid, not flex, so the timer stays centered regardless of the width of the progress/identity pills on either side. */
.qz-player-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--qz-line);
  background: var(--qz-cream);
  gap: 8px;
}

/* Explicit grid-column pins each side — without it, omitting the timer would auto-pack the identity pill into the center column instead of the right edge. */
.qz-player-top > .qz-progress-pill { grid-column: 1; justify-self: start; min-width: 0; }
.qz-player-top > .qz-timer { grid-column: 2; justify-self: center; }
.qz-player-top > .qz-take-pill {
  grid-column: 3;
  justify-self: end;
  margin: 0; /* base .qz-take-pill carries a bottom margin for its stacked use above a heading — not wanted inside this grid row */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qz-progress-pill {
  font-family: var(--qz-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--qz-mute);
  text-transform: uppercase;
}

.qz-progress-pill strong { color: var(--qz-ink); }

.qz-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--qz-mono);
  font-size: 12px;
  font-weight: 600;
}

.qz-timer-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: conic-gradient(var(--qz-coral) calc(var(--qz-pct, 65) * 1%), var(--qz-line) 0);
  display: grid;
  place-items: center;
  position: relative;
}

.qz-timer-circle::after {
  content: "";
  width: 22px;
  height: 22px;
  background: var(--qz-cream);
  border-radius: 50%;
}

.qz-question-area { padding: 28px 20px 20px; }

/* Shared padding for info screens (ready/loading/error/score/etc.); two-class selector so it outranks the ≥640px .qz-question-area padding shorthand at equal specificity. */
.qz-question-area.qz-question-area-center {
  text-align: center;
  padding-top: 48px;
  padding-bottom: 40px;
}

/* Button row for info screens — wraps instead of overflowing when two long localized labels can't share a line. */
.qz-info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

/* Review answers + Done stack and share width so their edges align, instead of each centering at its own content width. */
.qz-info-actions-stack {
  flex-direction: column;
  align-items: stretch;
}
.qz-info-actions-stack .qz-btn { justify-content: center; }

/* Width-capped so the join-flow name input doesn't stretch full-width on desktop, while still shrinking on mobile. */
.qz-take-input {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  text-align: left;
}

.qz-take-input + .qz-take-input { margin-top: 10px; }

/* Test name above the "Join a test" heading. */
.qz-take-test-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
}

/* Inline join error — reserves its line so buttons below don't jump when a message appears. */
.qz-err {
  color: var(--qz-coral);
  min-height: 18px;
  margin: 8px 0 0;
}

.qz-final-score {
  display: block;
  font-size: 48px;
  line-height: 1.1;
}

/* Secondary text shared by host.js/join.js markup; previously referenced but never defined, so it inherited whatever its container set. */
.qz-mute { color: var(--qz-mute); }

/* Left-aligned inside an otherwise centered info screen; scrollable rather than overflowing when a long name meets a narrow card. */
.qz-take-leaderboard {
  text-align: left;
  margin-top: 24px;
}

.qz-take-leaderboard-title {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--qz-mute);
  margin: 0 0 10px;
}

.qz-take-leaderboard > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qz-take-lb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  background: var(--qz-cream);
}

.qz-take-lb-row.is-self {
  background: var(--qz-coral-soft);
  font-weight: 600;
}

.qz-take-lb-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.qz-take-lb-rank {
  color: var(--qz-mute);
  font-family: var(--qz-mono);
  min-width: 22px;
}

.qz-take-lb-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qz-question-meta {
  font-family: var(--qz-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--qz-coral);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Carries the spacing below it instead of the bare meta text, so a question with no difficulty badge (row absent) still gets the same gap before the heading. */
.qz-question-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 12px;
}

.qz-question-meta-row > .qz-question-meta { margin-bottom: 0; }

/* Same dot+pill idiom and color semantics as .qt-card-status in modules/tests/index.css, so difficulty reads with the same visual language as test status. */
.qz-diff-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--qz-paper);
  border: 1px solid var(--qz-line);
  border-radius: 999px;
  font-family: var(--qz-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--qz-ink-soft);
}

.qz-diff-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--qz-mute);
  flex-shrink: 0;
}

.qz-diff-badge[data-level="easy"]::before   { background: #16a34a; }
.qz-diff-badge[data-level="medium"]::before { background: #f59e0b; }
.qz-diff-badge[data-level="hard"]::before   { background: #dc2626; }

/* overflow-wrap so a long unspaced run (URL, formula) doesn't get clipped by .qz-player-frame's overflow:hidden; anything still too wide scrolls instead. */
.qz-question-text {
  font-family: var(--qz-sans);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  overflow-wrap: anywhere;
}

.qz-question-html {
  font-family: var(--qz-sans);
  font-style: normal;
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 24px;
  color: var(--qz-ink-soft);
  overflow-wrap: anywhere;
  overflow-x: auto;
}

/* Scoped by id, not the shared .qz-question-text/-html classes, so info screens (ready/waiting/error/score) keep their original roomier size. */
#qz-q-name, #tk-name {
  font-size: 22px;
  margin-bottom: 12px;
}

#qz-q-body, #tk-body {
  margin-bottom: 16px;
}

/* minmax(0, 1fr) not bare 1fr — a bare 1fr floors at the label's min-content width (rendered LaTeX), overflowing the frame instead of wrapping. */
.qz-answer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.qz-answer {
  padding: 16px 18px;
  border-radius: var(--br-lg);
  color: var(--qz-paper);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  font-family: inherit;
  text-align: left;
  min-width: 0; /* grid items default to min-width:auto — see .qz-answer-grid */
}

/* Label holds arbitrary converted markup — `anywhere` breaks long unspaced runs; anything still too wide scrolls inside the label instead of escaping the card. */
.qz-answer .label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  overflow-x: auto;
}

.qz-answer .label img,
.qz-answer .label svg { max-width: 100%; height: auto; }
.qz-answer .label p { margin: 0; }

.qz-answer:hover { transform: translateY(-2px); }

.qz-answer .key {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  font-family: var(--qz-mono);
  font-size: 12px;
  flex-shrink: 0;
}

.qz-ans-1 { background: var(--qz-coral); }
.qz-ans-2 { background: var(--qz-forest); }
.qz-ans-3 { background: var(--qz-gold); color: var(--qz-ink); }
.qz-ans-3 .key { background: rgba(0, 0, 0, 0.1); }
.qz-ans-4 { background: var(--qz-ink); }

.qz-answer.locked { opacity: 0.4; cursor: not-allowed; }

/* Once an answer is picked, every tile disables (see _submitAnswer); without this the whole group goes flat with no sign of which tile was chosen. */
.qz-answer:disabled { cursor: default; }
.qz-answer:disabled:not(.qz-answer-selected) { opacity: 0.4; transform: none; }
.qz-answer.qz-answer-selected {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--qz-paper), 0 0 0 6px var(--qz-ink);
  animation: qz-answer-pick 0.2s ease;
}

@keyframes qz-answer-pick {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* :disabled variant needed to outweigh .qz-answer:disabled:not(.qz-answer-selected) above at equal specificity, or an unpicked-correct tile would fade out. */
.qz-answer:disabled.qz-answer-correct,
.qz-answer.qz-answer-correct {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--qz-paper), 0 0 0 6px var(--qz-forest);
}

/* Covers correct/wrong reveal, neutral submitted/skipped acknowledgments — every variant keeps the same two rows so the continue button lands in one place. */
.qz-feedback {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--br-lg);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  font-size: 14px;
  animation: qz-feedback-in 0.2s ease;
}

.qz-feedback-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}

.qz-feedback-actions {
  display: flex;
  justify-content: flex-end;
}

.qz-feedback strong { font-size: 15px; }

.qz-feedback.ok { background: var(--qz-forest-soft); color: var(--qz-forest); }
.qz-feedback.no { background: #fbe7e7; color: #c0392b; }
.qz-feedback.qz-feedback-neutral { background: var(--qz-sand); color: var(--qz-ink-soft); }

/* Own row via flex-basis so it doesn't squeeze awkwardly next to the points on narrow panels (see _formatCorrectAnswer). */
.qz-feedback-correct { flex-basis: 100%; font-size: 13px; opacity: 0.85; min-width: 0; overflow-wrap: anywhere; }

@keyframes qz-feedback-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Caps results.js'../frontend/styles/s review screen to the same width as join.js's .qz-take-card-wide card — .qz-main itself has no max-width. Padding matches .qz-question-area: on join.js this renders directly inside the borderless .qz-player-frame, which has none of its own. */
.qz-review-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 20px;
}

/* Post-finish "review your answers" list — see join.js's _renderReview. */
.qz-review-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  margin-bottom: 8px;
}

.qz-review-item {
  padding: 32px 34px;
  border-radius: var(--br-lg);
  background: var(--qz-paper);
  border: 1px solid var(--qz-line);
}

.qz-review-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.qz-review-num {
  font-family: var(--qz-mono);
  font-size: 12px;
  color: var(--qz-mute);
}

.qz-review-status {
  font-family: var(--qz-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--qz-sand);
  color: var(--qz-ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
}

.qz-review-status.ok { background: var(--qz-forest-soft); color: var(--qz-forest); }
.qz-review-status.no { background: #fbe7e7; color: #c0392b; }

.qz-review-prompt {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.qz-review-body {
  color: var(--qz-ink-soft);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
  overflow-x: auto;
}

.qz-review-answer-row {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.qz-review-answer-row + .qz-review-answer-row { margin-top: 4px; }

.qz-review-answer-row .label {
  color: var(--qz-mute);
  margin-right: 6px;
}

/* Drag-to-reorder list instead of the single-select tile grid, since the answer is a full sequence; dragging driven by Pointer Events (see _wireOrderDrag). */
.qz-order-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qz-order-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--br-lg);
  background: var(--qz-paper);
  border: 1px solid var(--qz-line);
}

.qz-order-item.qz-order-dragging {
  opacity: 0.6;
  border-color: var(--qz-coral);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.qz-order-pos {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--qz-ink);
  color: var(--qz-paper);
  display: grid;
  place-items: center;
  font-family: var(--qz-mono);
  font-size: 12px;
  flex-shrink: 0;
}

/* Same content as .qz-answer .label (converted LaTeX→HTML), same wrap protection needed. */
.qz-order-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  overflow-x: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--qz-ink);
}

.qz-order-label img,
.qz-order-label svg { max-width: 100%; height: auto; }
.qz-order-label p { margin: 0; }

.qz-order-grip {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--qz-mute);
  cursor: grab;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  touch-action: none; /* let the grip's own pointermove drive the drag instead of the browser scrolling the page */
}

.qz-order-grip:hover { background: var(--qz-sand); color: var(--qz-ink); }
.qz-order-grip:focus-visible { outline: 2px solid var(--qz-coral); outline-offset: 1px; }
.qz-order-item.qz-order-dragging .qz-order-grip { cursor: grabbing; }

/* ── RESULTS / LEADERBOARD ──────────────────────────────────────────── */
.qz-results-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.qz-results-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.qz-stat .qz-stat-num {
  font-family: var(--qz-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
}

.qz-stat .qz-stat-lbl {
  font-size: 11px;
  color: var(--qz-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* Capped so long translated labels (e.g. Spanish retake policy) wrap instead of unbalancing the row. */
.qz-results-stats .qz-stat { max-width: 120px; }

/* Secondary line under a stat label (e.g. Final score's retake policy). */
.qz-stat .qz-stat-sub {
  font-size: 10px;
  color: var(--qz-mute);
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.qz-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Mobile: every attempt/player is its own card — head line (rank + date/name), a 3-column labeled stat row, then an optional Review-answers action row. */
.qz-lb-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--qz-paper);
  border: 1px solid var(--qz-line);
  border-radius: 16px;
  padding: 16px;
  transition: border-color 0.15s ease;
}

.qz-lb-row.head { display: none; }

.qz-lb-row.self { background: var(--qz-coral-soft); border-color: var(--qz-coral); }

.qz-lb-group {
  font-family: var(--qz-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--qz-mute);
  padding: 8px 4px 0;
}

.qz-lb-head { display: flex; align-items: center; gap: 10px; min-width: 0; }

.qz-rank {
  font-family: var(--qz-sans);
  font-weight: 700;
  font-size: 22px;
  flex-shrink: 0;
}

.qz-rank.top { color: var(--qz-coral); }

/* Non-competitive rows render no rank digits; drop the box entirely so its flex gap doesn't push the name off the row's left edge (out of line with TIME below). */
.qz-rank:empty { display: none; }

.qz-lb-name { display: flex; flex-direction: column; min-width: 0; }

.qz-lb-name strong {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  min-width: 0;
}

.qz-lb-name span {
  display: block;
  font-size: 11px;
  color: var(--qz-mute);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qz-lb-date {
  font-size: 15px;
  font-weight: 600;
  color: var(--qz-ink);
}

.qz-lb-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* First/last blocks hug the row's own edges (flush with the card's padding) and the middle stays centered, so the row's visual margins match the card padding regardless of how wide each value's text is (e.g. a bold "80" vs. a bare "–"). */
.qz-lb-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; text-align: center; }
.qz-lb-stat:first-child { align-items: flex-start; text-align: left; }
.qz-lb-stat:last-child { align-items: flex-end; text-align: right; }

.qz-lb-stat-lbl {
  font-family: var(--qz-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--qz-mute);
}

.qz-lb-stat-val {
  font-family: var(--qz-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--qz-ink);
}

.qz-lb-score.qz-lb-stat-val {
  font-family: var(--qz-sans);
  font-weight: 700;
  font-size: 18px;
}

.qz-lb-score-max {
  font-size: 0.6em;
  font-weight: 500;
  color: var(--qz-mute);
  white-space: nowrap;
}

/* Stat values with a definition tooltip (results.js _attachDefTip). */
.qz-def-tip {
  cursor: help;
  text-decoration: underline dotted var(--qz-mute);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.qz-def-tip:focus-visible { outline: 2px solid var(--qz-coral); outline-offset: 2px; border-radius: 4px; }
.qz-def-tip:focus-visible .tooltip-content { opacity: 1; }
/* Closed by a click while still hovered/focused; cleared on mouseleave/blur. */
.qz-def-tip.tip-dismissed .tooltip-content { opacity: 0; }
/* Touch keeps a sticky :hover after a tap, so only the JS toggle may open it there. */
@media (hover: none) { .qz-def-tip:not(.tooltip-active) .tooltip-content { opacity: 0; } }
/* JS sets --qz-tip-arrow-x when the bubble is nudged into the viewport, keeping the arrow on the metric. */
.qz-def-tip .tooltip-content::after { left: calc(50% + var(--qz-tip-arrow-x, 0px)); }
.qz-def-tip .tooltip-content {
  width: max-content;
  max-width: min(260px, calc(100vw - 32px));
  white-space: normal;
  text-align: left;
  line-height: 1.4;
  font-family: var(--qz-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
}

.qz-lb-actions { display: flex; justify-content: flex-end; }

.qz-lb-review-btn { gap: 6px; }
.qz-lb-review-arrow { font-size: 14px; line-height: 1; }

.qz-results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}

.qz-panel {
  background: var(--qz-paper);
  border: 1px solid var(--qz-line);
  border-radius: 16px;
  padding: 18px;
}

.qz-panel h3 {
  font-family: var(--qz-sans);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
}

.qz-panel h3 em { color: var(--qz-mute); }

.qz-qbreak { display: flex; flex-direction: column; gap: 10px; }

/* n= column is auto-width so a three-digit sample count doesn't squeeze the bar; the wrap owns the grid so the note shares the bar's column. */
.qz-qrow-wrap {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 44px;
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
}
.qz-qrow { display: contents; }

.qz-qrow .qnum { font-family: var(--qz-mono); font-size: 11px; color: var(--qz-mute); }
.qz-qrow .bar { height: 6px; background: var(--qz-sand); border-radius: 999px; overflow: hidden; }
.qz-qrow .bar-fill { height: 100%; background: var(--qz-forest); border-radius: 999px; }
.qz-qrow .bar-fill.weak { background: var(--qz-coral); }
.qz-qrow .qn { font-family: var(--qz-mono); font-size: 10px; color: var(--qz-mute); white-space: nowrap; }
.qz-qrow .qpct { font-family: var(--qz-mono); font-size: 11px; text-align: right; }
.qz-qrow .qstatus { font-family: var(--qz-mono); font-size: 11px; color: var(--qz-mute); }

/* Optional last-attempt caption, aligned under the bar and wrapping within bar→% width. */
.qz-qrow-note { grid-column: 2 / -1; justify-self: start; max-width: 100%; font-family: var(--qz-mono); font-size: 10px; line-height: 1.45; color: var(--qz-mute); overflow-wrap: break-word; text-wrap: pretty; }
.qz-qrow-note.is-link { background: none; border: 0; margin: 0; padding: 0; text-align: start; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) {
  .qz-qbreak { gap: 14px; }
  .qz-qrow-wrap { grid-template-columns: 28px minmax(0, 1fr) auto 38px; column-gap: 8px; row-gap: 6px; }
}
.qz-qrow-note.is-link:hover, .qz-qrow-note.is-link:focus-visible { color: var(--qz-ink); }
.qz-review-item.is-focused { border-color: var(--qz-coral); box-shadow: 0 0 0 2px var(--qz-coral); }

/* ── CARDS (list views) ─────────────────────────────────────────────── */
.qz-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.qz-card {
  background: var(--qz-paper);
  border: 1px solid var(--qz-line);
  border-radius: 16px;
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s ease;
}

.qz-card:hover { border-color: var(--qz-ink); }

.qz-card-name {
  font-family: var(--qz-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  margin: 0;
  color: var(--qz-ink);
  word-break: break-word;
}

.qz-card-meta {
  font-family: var(--qz-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--qz-mute);
}

.qz-card-meta .accent { color: var(--qz-coral); }

.qz-card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  flex-wrap: wrap;
}

/* ── EMPTY ──────────────────────────────────────────────────────────── */
.qz-empty {
  margin: 36px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--qz-mute);
  max-width: 380px;
  padding: 0 12px;
}

.qz-empty h3 {
  font-family: var(--qz-sans);
  font-weight: 700;
  font-size: 22px;
  color: var(--qz-ink);
  margin: 12px 0 6px;
}

.qz-empty p { font-size: 14px; }

/* Host terminal screens' action row — wraps rather than overflowing .qz-empty's 380px column when three localized labels can't share a line. */
.qz-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}

/* ── MODALS (bottom-sheet on mobile, centered card on desktop) ──────── */
.qz-modal {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 21, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

.qz-modal.hidden { display: none; }

.qz-modal-card {
  background: var(--qz-paper);
  border-radius: 20px 20px 0 0;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 460px;
  border: 1px solid var(--qz-line);
  border-bottom: 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
}

.qz-modal-title {
  font-family: var(--qz-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  margin-bottom: 14px;
  color: var(--qz-ink);
}

.qz-modal-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--qz-ink-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 12px 0 6px;
}

.qz-modal-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--qz-line);
  border-radius: 10px;
  font-size: 16px; /* >= 16 prevents iOS zoom on focus */
  background: var(--qz-cream);
  color: var(--qz-ink);
  font-family: inherit;
}

.qz-modal-input:focus { outline: 2px solid var(--qz-coral); border-color: var(--qz-coral); }

.qz-modal-hint { font-size: 12px; color: var(--qz-coral); margin-top: 8px; }

.qz-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
  flex-shrink: 0; /* Keep buttons fixed at the bottom of a flex card. */
}

.qz-modal-actions .qz-btn { flex: 1 1 auto; }

/* ── HOST CODE DISPLAY ──────────────────────────────────────────────── */
.qz-code-display {
  font-family: var(--qz-sans);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0.1em;
  color: var(--qz-coral);
  text-align: center;
  background: var(--qz-coral-soft);
  border: 2px dashed var(--qz-coral);
  border-radius: 14px;
  padding: 18px 12px;
  margin: 14px 0 16px;
  word-break: break-all;
}

.qz-join-url {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.qz-url-input {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--qz-line);
  border-radius: 10px;
  font-family: var(--qz-mono);
  font-size: 12px;
  background: var(--qz-cream);
  color: var(--qz-ink);
}

.qz-participants {
  background: var(--qz-paper);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--qz-line);
}

.qz-participants h3 {
  font-family: var(--qz-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qz-mute);
  margin: 0 0 10px;
  font-weight: 600;
}

.qz-pp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qz-pp-list li {
  background: var(--qz-cream);
  border: 1px solid var(--qz-line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--qz-ink);
}

/* ── PLAYER CARD WIDTHS — shared by play.js/join.js ──────────────────── */
/* Caps only bite on desktop; must land on .qz-player's direct grid child or a shrink-wrapped wrapper stops the card ever reaching its max-width. */
.qz-take-card {
  max-width: 520px;
  margin: 0 auto;
}

/* Question screen only — 520px leaves the two-column answer grid (switches on at 768px viewport width) only ~220px per tile, too narrow for an equation. */
.qz-take-card.qz-take-card-wide { max-width: 760px; }

/* Matches .qt-card-pill in modules/tests/index.css rather than a solid-black badge, so identity reads as the same app as the test list. */
.qz-take-pill {
  display: inline-block;
  background: var(--qz-paper);
  color: var(--qz-ink);
  border: 1px solid var(--qz-line);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--qz-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.qz-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--qz-coral-soft);
  border-top-color: var(--qz-coral);
  border-radius: 50%;
  margin: 18px auto;
  animation: qz-spin 0.8s linear infinite;
}

@keyframes qz-spin {
  to { transform: rotate(360deg); }
}

/* ── FOOTER MARK ────────────────────────────────────────────────────── */
.qz-footer-mark {
  text-align: center;
  padding: 40px 0;
  font-family: var(--qz-sans);
  color: var(--qz-mute);
  font-size: 13px;
}

.qz-footer-mark::before,
.qz-footer-mark::after {
  content: "—";
  margin: 0 10px;
}

/* ── UTIL ───────────────────────────────────────────────────────────── */
.qz-page .hidden { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════
 * TABLET (≥ 640px)
 * ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .qz-topbar { padding: 14px 24px; }
  .qz-logo { font-size: 24px; }
  .qz-nav-tabs button { padding: 8px 16px; font-size: 13px; }
  .qz-topbar-right { gap: 12px; }
  .qz-topbar-stamp { display: inline; }
  .qz-avatar { width: 36px; height: 36px; font-size: 13px; }

  .qz-main { padding: 36px 24px 100px; }

  .qz-page-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    padding-bottom: 28px;
    margin-bottom: 40px;
  }

  .qz-display-title { font-size: 44px; }
  #results-frame .qz-display-title { font-size: 32px; }
  .qz-page-actions { flex-wrap: nowrap; }
  .qz-page-actions .qz-btn { flex: 0 0 auto; }

  .qz-section { margin-bottom: 48px; }
  .qz-section-title { font-size: 26px; }
  .qz-section-body { gap: 24px; }

  /* Option grids switch to multi-column at tablet width. */
  .qz-option-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .qz-option-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .qz-option-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .qz-option-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

  .qz-ab-banks { grid-template-columns: 1fr 1fr; }

  /* Save bar collapses back into the floating pill on bigger screens. */
  .qz-save-bar {
    left: 50%;
    right: auto;
    bottom: 24px;
    transform: translateX(-50%);
    border-radius: 999px;
    padding: 12px 14px 12px 22px;
    box-shadow: 0 12px 40px rgba(26, 24, 21, 0.25);
    width: auto;
    max-width: calc(100% - 32px);
  }

  /* Player frame bigger paddings on tablet. */
  .qz-player { padding: 28px 24px; }
  .qz-player-frame { border-radius: 14px; }
  .qz-player-top { padding: 16px 22px; }
  .qz-question-area { padding: 40px 32px 24px; }
  .qz-review-page { padding: 40px 32px 24px; }
  .qz-question-text { font-size: 34px; }
  #qz-q-name, #tk-name { font-size: 28px; }
  .qz-answer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qz-answer { padding: 20px 22px; font-size: 16px; }

  /* Desktop: back to one unified table — head row visible, each attempt/player collapses to a single grid row (rank/name/time/acc/score/action); stat labels hidden since the head row already names the columns. */
  .qz-leaderboard {
    display: block;
    background: var(--qz-paper);
    border: 1px solid var(--qz-line);
    border-radius: 16px;
  }
  /* Rounded ends on the rows instead of overflow:hidden, so stat tooltips aren't clipped. */
  .qz-leaderboard > .qz-lb-row:first-child { border-radius: 16px 16px 0 0; }
  .qz-leaderboard > .qz-lb-row:last-child { border-radius: 0 0 16px 16px; }

  .qz-lb-row {
    display: grid;
    grid-template-columns: 60px 1fr 100px 100px 130px 160px;
    grid-template-areas: "rank name time acc score action";
    align-items: center;
    padding: 16px 22px;
    gap: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--qz-line-soft);
    transition: background 0.15s ease;
  }
  .qz-lb-row:last-child { border-bottom: 0; }
  .qz-lb-row:hover { background: var(--qz-cream); }

  .qz-lb-row.head {
    display: grid;
    background: var(--qz-cream);
    font-family: var(--qz-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--qz-mute);
    padding: 12px 22px;
  }
  .qz-lb-row.head > div:nth-child(1) { grid-area: rank; }
  .qz-lb-row.head > div:nth-child(2) { grid-area: name; }
  .qz-lb-row.head > div:nth-child(3) { grid-area: time; text-align: center; }
  .qz-lb-row.head > div:nth-child(4) { grid-area: acc; text-align: center; }
  .qz-lb-row.head > div:nth-child(5) { grid-area: score; text-align: center; }
  .qz-lb-row.head > div:nth-child(6) { grid-area: action; }

  .qz-lb-group {
    padding: 14px 22px 8px;
    border-bottom: 1px solid var(--qz-line-soft);
  }
  .qz-lb-group strong { color: var(--qz-ink); font-weight: 600; }

  /* Unwrap the mobile card groupings back into individual grid cells. */
  .qz-lb-head { display: contents; }
  .qz-lb-stats { display: contents; }
  .qz-lb-stat { display: contents; }
  .qz-lb-actions { display: contents; }

  .qz-lb-stat-lbl { display: none; }
  .qz-lb-stat-val.qz-lb-time { grid-area: time; text-align: center; }
  .qz-lb-stat-val.qz-lb-acc { grid-area: acc; text-align: center; }
  .qz-lb-stat-val.qz-lb-score { grid-area: score; text-align: center; }

  .qz-rank { grid-area: rank; font-size: 26px; }
  .qz-lb-name, .qz-lb-date { grid-area: name; }
  .qz-lb-name strong { font-size: 15px; }
  .qz-lb-name span { font-size: 12px; }
  .qz-lb-score { font-size: 22px; }

  .qz-lb-review-btn { grid-area: action; justify-self: end; margin-left: 12px; }

  .qz-stat .qz-stat-num { font-size: 36px; }
  .qz-results-stats { gap: 28px; }
  .qz-results-stats .qz-stat { max-width: 160px; }

  .qz-card-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .qz-card { padding: 22px 20px 18px; gap: 12px; }
  .qz-card-name { font-size: 22px; }

  /* Modal: centered card instead of bottom sheet. */
  .qz-modal {
    align-items: center;
    padding: 16px;
  }
  .qz-modal-card {
    border-radius: 20px;
    border-bottom: 1px solid var(--qz-line);
    padding: 26px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  }
  .qz-modal-actions { flex-wrap: nowrap; }
  .qz-modal-actions .qz-btn { flex: 0 0 auto; }
  .qz-modal-title { font-size: 26px; }

  .qz-code-display { font-size: 48px; letter-spacing: 0.14em; padding: 22px 16px; }
  .qz-join-url { flex-direction: row; }

  .qz-question-html { font-size: 17px; }

  .qz-empty h3 { font-size: 26px; }
}


/* ═══════════════════════════════════════════════════════════════════════
 * DESKTOP (≥ 960px) — full John mock layout
 * ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {
  .qz-topbar { padding: 18px 36px; }
  .qz-logo { font-size: 26px; }

  .qz-main { padding: 56px 36px 120px; }

  .qz-page-header {
    padding-bottom: 32px;
    margin-bottom: 56px;
  }

  .qz-display-title { font-size: 64px; }
  #results-frame .qz-display-title { font-size: 40px; }

  /* Section heads: 80px gutter + content column on desktop. */
  .qz-section { margin-bottom: 64px; }
  .qz-section-head {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    align-items: baseline;
    margin-bottom: 28px;
  }
  .qz-section-body { margin-left: 104px; gap: 28px; }
  .qz-section-title { font-size: 32px; }

  .qz-opt { padding: 16px 18px; border-radius: 14px; }
  .qz-inline-row { padding: 14px 18px; }
  .qz-switch-row { padding: 14px 18px; }

  .qz-input { width: 70px; }

  .qz-conditional { padding-left: 18px; }

  .qz-diff-pill .num { font-size: 28px; }
  .qz-diff-pill .lbl { font-size: 11px; letter-spacing: 0.05em; }
  .qz-diff-pill { padding: 14px 8px; }

  .qz-ab-banks { gap: 8px; }
  .qz-ab-bank .bank-name { font-size: 22px; }

  .qz-player { padding: 40px 36px; }
  .qz-player-frame { border-radius: 16px; }
  .qz-player-top { padding: 18px 28px; }
  .qz-question-area { padding: 56px 56px 28px; }
  .qz-review-page { padding: 56px 56px 28px; }
  .qz-question-text { font-size: 44px; }
  #qz-q-name, #tk-name { font-size: 36px; }
  .qz-question-html { font-size: 18px; }
  .qz-answer { padding: 24px 28px; font-size: 18px; gap: 14px; }
  .qz-answer .key { width: 28px; height: 28px; font-size: 13px; }

  .qz-timer-circle { width: 32px; height: 32px; }
  .qz-timer-circle::after { width: 24px; height: 24px; }
  .qz-progress-pill { font-size: 11px; }
  .qz-timer { font-size: 13px; }

  .qz-stat .qz-stat-num { font-size: 38px; }

  .qz-leaderboard { border-radius: 20px; }
  .qz-lb-row { padding: 18px 24px; }
  .qz-lb-row.head { padding: 14px 24px; font-size: 11px; letter-spacing: 0.08em; }
  .qz-rank { font-size: 28px; }
  .qz-lb-name strong { font-size: 15px; }
  .qz-lb-score { font-size: 24px; }

  .qz-results-grid {
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-top: 32px;
  }
  .qz-panel { padding: 24px; border-radius: 20px; }
  .qz-panel h3 { font-size: 24px; margin-bottom: 18px; }

  .qz-card-grid { gap: 14px; }
  .qz-card { padding: 22px 20px 18px; border-radius: 20px; }
  .qz-card-name { font-size: 26px; }

  .qz-modal-card { padding: 28px; max-width: 460px; }
  .qz-modal-title { font-size: 28px; }

  .qz-code-display { font-size: 56px; letter-spacing: 0.16em; padding: 26px 16px; border-radius: 18px; }

  .qz-empty { margin: 48px auto; }
  .qz-empty h3 { font-size: 28px; }

  .qz-footer-mark { padding: 60px 0; font-size: 14px; }
  .qz-footer-mark::before,
  .qz-footer-mark::after { margin: 0 14px; }
}
/* Layout - Structural containers and main layout */

#app-root {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
}

#canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

#threejs-canvas {
  position: absolute;
  inset: 0;
  touch-action: none;
  display: block;
  width: 100%;
  height: 100%;
}

.hidden {
  display: none !important;
}

#linear-view {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 6.5rem 0.75rem 4.5rem;
  max-width: 760px;
  margin: 0 auto;
  flex: 1 1 auto;
  overflow-y: auto;
}

.page-view {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 6.5rem 1rem 4.5rem;
  max-width: var(--lg);
  margin: 0 auto;
  flex: 1 1 auto;
  overflow-y: auto;
}

#profile-view.page-view,
#settings-view.page-view {
  min-width: 320px;
}
/* Editor Header - Based on Organizer Header but fixed for Map View */

.editor-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--accent);
  color: #fff;
  padding: 0 24px;
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.editor-header-right {
  display: flex;
  align-items: center;
}

.editor-badge {
  display: flex;
  align-items: center;
  gap: 16px;
}

.notification-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  transition: opacity 0.2s;
}

.notification-btn:hover {
  opacity: 0.8;
}

.notification-badge {
  position: absolute;
  top: 0;
  right: 4px;
  background: #ff4d4f;
  color: white;
  font-size: 10px;
  font-weight: bold;
  height: 16px;
  min-width: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.5px solid var(--accent);
  transform: translate(50%, -20%);
}

.editor-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  padding: 0;
}

.editor-avatar-btn:hover {
  opacity: 0.8;
}

.editor-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: opacity 0.2s;
}

.editor-action-btn:hover {
  opacity: 0.8;
}

/* Shared avatar img/fallback — JS toggles .hidden on them via App.utils.avatar. */
.header-avatar-btn {
  position: relative;
  overflow: hidden;
}

.header-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.header-avatar-img.hidden,
.header-avatar-fallback.hidden {
  display: none !important;
}

/* The header bar is always blue-accent, so the fallback silhouette must stay white — without this it inherits currentColor and turns dark in dark mode. */
.header-avatar-fallback path {
  fill: #fff !important;
  stroke: none !important;
}

/* User menu panel here needs no overrides — uses shared .menu-popup styles. */

#user-menu {
  display: none;
}

/* ── Mobile Responsive ── */
@media (max-width: 480px) {
  .editor-header {
    padding: 0 10px;
  }
  .editor-badge {
    gap: 8px;
  }
}
/* Navigation - Bottom nav and view selector buttons */

#user-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

#bottom-nav {
  position: fixed;
  top: 70px; /* Below header */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center; /* Center the trigger */
  background: transparent;
  padding: 0;
  z-index: 20;
  pointer-events: none; /* Let clicks pass through empty areas */
}

/* Container for dropdown logic */
.nav-dropdown-wrap {
  position: relative;
  pointer-events: auto; /* Re-enable clicks for the menu */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Trigger button "Map view" */
.nav-trigger {
  background: transparent;
  color: #ccc;
  border: none;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  transition: all 0.2s ease;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.nav-trigger:hover {
  color: #fff;
}

.nav-chevron {
  transition: transform 0.2s ease;
  opacity: 0.7;
}

/* When menu is open (we can add a class or rely on state) */
.nav-trigger[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}

/* Dropdown Menu */
/* Dropdown Menu */
.nav-menu {
  position: absolute;
  top: 100%;
  margin-top: 0.5rem;
  background: rgba(45, 45, 50, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 160px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transform-origin: top center;
  animation: navMenuIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-menu.hidden {
  display: none;
}

@keyframes navMenuIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(5px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Menu Items */
.nav-item {
  background: transparent;
  border: none;
  color: #bbb;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  text-align: left;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-item.active {
  background: rgba(60, 100, 255, 0.2);
  color: #5b8cff;
  border: 1px solid rgba(91, 140, 255, 0.3);
}

/* Remove old button active style */
.nav-item.active:hover {
  background: rgba(60, 100, 255, 0.3);
}

.nav-icon {
  opacity: 0.7;
}
.nav-item.active .nav-icon {
  opacity: 1;
  color: #5b8cff;
}

/* View selector btn (legacy or other usage, keeping just in case) */
.vs-btn {
  background: #3d3d40;
  color: #fff;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
}

.vs-btn.active {
  background: #111;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #111;
}

.vs-btn:hover {
  filter: brightness(1.1);
}

.vs-btn:active {
  transform: translateY(1px);
}

/* ── Mobile Responsive ── */
@media (max-width: 480px) {
  .nav-menu {
    min-width: min(80vw, 160px);
  }
}
/* Manage Access Panel - Component Styles */

.ma-panel-body {
  padding: 20px;
}

/* Sections */
.ma-section {
  margin-bottom: 24px;
}

.ma-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #222;
  margin: 0 0 4px;
}

.ma-section-subtitle {
  font-size: 13px;
  color: #888;
  margin: 0 0 12px;
}

.ma-count {
  font-weight: 400;
  color: #888;
}

/* Invite Form */
.ma-invite-form {
  display: flex;
  gap: 8px;
}

.ma-invite-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  outline: none;
  transition: border-color 0.2s;
}

.ma-invite-input:focus {
  border-color: #2f57d6;
}

.ma-invite-btn {
  padding: 10px 24px;
  background: #2f57d6;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.ma-invite-btn:hover {
  background: #1e3fa0;
}

/* User List */
.ma-user-list {
  display: flex;
  flex-direction: column;
}

.ma-user-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  gap: 12px;
}

.ma-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #e0e0e0;
}

.ma-user-info {
  flex: 1;
  min-width: 0;
}

.ma-user-name {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  margin: 0;
  line-height: 1.3;
}

.ma-user-email {
  font-size: 12px;
  color: #888;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pending Actions */
.ma-user-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.ma-action-link {
  background: none;
  border: none;
  font-size: 13px;
  color: #2f57d6;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.2s;
}

.ma-action-link:hover {
  color: #1e3fa0;
  text-decoration: underline;
}

.ma-action-separator {
  color: #ccc;
  font-size: 13px;
  user-select: none;
}

/* Role Button */
.ma-role-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.ma-role-btn::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 5px;
  background: url('data:image/svg+xml;utf8,<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L4 4L7 1" stroke="%23888" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    no-repeat center;
}

.ma-role-btn:hover {
  border-color: #999;
  background: #f9f9f9;
}

.ma-user-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ma-revoke-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: #888;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
}

.ma-revoke-btn:hover {
  color: #333;
}

/* Allow Invite Toggle */
.ma-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid #e0e0e0;
  margin-top: 8px;
}

.ma-toggle-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}
/* Notification Bell Component */

/* Bell button */
.nbell-btn {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.nbell-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.nbell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

.nbell-badge.hidden {
  display: none;
}

/* Dropdown container */
.nbell-wrapper {
  position: relative;
}

.nbell-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: var(--z-modal);
  overflow: hidden;
  border: 1px solid #e5e7eb;
  animation: nbell-drop 0.18s ease;
}

.nbell-dropdown.hidden {
  display: none;
}

@keyframes nbell-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header */
.nbell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.nbell-title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin: 0;
}

.nbell-mark-all {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

.nbell-mark-all:hover {
  text-decoration: underline;
}

/* Notification list */
.nbell-list {
  max-height: 380px;
  overflow-y: auto;
}

/* Individual notification item */
.nbell-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}

.nbell-item:hover {
  background: #f9faff;
}

.nbell-item:last-child {
  border-bottom: none;
}

/* Translucent accent so the flash reads on both light and dark panels */
.nbell-item--new {
  animation: nbell-new-flash 2.4s ease-out;
}

@keyframes nbell-new-flash {
  0%, 35% { background: rgba(47, 87, 214, 0.18); box-shadow: inset 3px 0 0 #2f57d6; }
  100%    { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .nbell-item--new { animation-duration: 0.01s; }
}

/* Icon column */
.nbell-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  background: #f3f4f6;
  overflow: hidden;
}

.nbell-icon.approve {
  background: #d1fae5;
  color: #16a34a;
}

.nbell-icon.reject {
  background: #fee2e2;
  color: #dc2626;
}

.nbell-icon.delete {
  background: #fee2e2;
  color: #dc2626;
}

.nbell-icon.publish {
  background: #dbeafe;
  color: #2563eb;
}

.nbell-icon.rename {
  background: #ede9fe;
  color: #7c3aed;
}

.nbell-icon.track {
  background: #e0e7ff;
  color: #4338ca;
}

.nbell-icon.edit {
  background: #fef3c7;
  color: #d97706;
}

/* Content column */
.nbell-content {
  flex: 1;
  min-width: 0;
}

.nbell-text {
  font-size: 13px;
  color: #111;
  line-height: 1.45;
  margin: 0 0 3px;
  /* Cap the main text at 2 lines with an ellipsis; the full text is on hover (title). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.nbell-text strong {
  font-weight: 700;
}

.nbell-subtext {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  margin: 0;
  /* One clamped line so the whole item stays ≤ 3 lines tall. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* Never let an item exceed 3 lines — the title tooltip holds the rest. */
.nbell-item .nbell-subtext ~ .nbell-subtext { display: none; }

/* Inline vote buttons for pending group requests */
.nbell-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
  flex-basis: 100%;
}

.nbell-vote-btn {
  flex: 1;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.nbell-vote-btn.approve {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.nbell-vote-btn.approve:hover:not(:disabled) {
  background: #d1fae5;
  border-color: #6ee7b7;
}

.nbell-vote-btn.reject {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.nbell-vote-btn.reject:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #fca5a5;
}

.nbell-vote-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.nbell-vote-btn.hidden { display: none; }

.nbell-vote-decision-pill {
  font-size: 11px;
  font-style: italic;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-2, #d0d7de);
  color: var(--text-2, #57606a);
  background: var(--surface-2, #f6f8fa);
  user-select: none;
  white-space: nowrap;
  align-self: center;
}
.nbell-vote-decision-pill.approved {
  color: #047857;
  border-color: #a7f3d0;
  background: #ecfdf5;
}
.nbell-vote-decision-pill.rejected {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}

/* Allow nbell-actions to wrap onto a new line under the content */
.nbell-item {
  flex-wrap: wrap;
}

/* Time + unread dot */
.nbell-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.nbell-time {
  font-size: 11px;
  color: #999;
  white-space: nowrap;
}

.nbell-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.nbell-dot.muted {
  background: #ccc;
}

/* Footer */
.nbell-footer {
  padding: 12px 20px;
  text-align: center;
  border-top: 1px solid #f0f0f0;
}

.nbell-view-all {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

.nbell-view-all:hover {
  text-decoration: underline;
}

.nbell-view-all:disabled {
  cursor: default;
  text-decoration: none;
}

.nbell-empty {
  padding: 40px 20px;
  text-align: center;
  color: #999;
  font-size: 13px;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
  .nbell-dropdown {
    position: fixed;
    right: 4px;
    left: 4px;
    top: calc(var(--header-height, 60px) + 4px);
    width: auto;
  }
}
/* Node Menu Component Styles */

/* Toggle switch (self-contained for component) */
.nm-toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.nm-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.nm-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 20px;
}

.nm-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.nm-toggle-switch input:checked + .nm-slider {
  background-color: #2ece56;
}

.nm-toggle-switch input:checked + .nm-slider:before {
  transform: translateX(16px);
}

/* Status labels (Private / Public) in toggle item */
.nm-status-labels {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #333;
}

.nm-status-labels span {
  transition: font-weight 0.15s;
}

.nm-status-labels span.active {
  font-weight: 700;
  color: #000;
}

/* 3-dot button styles */
.quiz-menu-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.quiz-menu-btn:hover {
  opacity: 0.8;
}

/* Ensure mount point is the positioning anchor for the menu-popup */
#node-menu-mount {
  position: relative;
  display: flex;
  align-items: center;
}

/* Ensure popup width consistency across modules */
#node-menu-mount .menu-popup {
  min-width: 240px;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
  #node-menu-mount .menu-popup {
    left: auto;
    right: 0;
    min-width: min(90vw, 240px);
  }
}
/* Track Node Component */

.track-node-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  background: transparent;
  color: var(--primary-1);
  border: 1.5px solid var(--primary-1);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.track-node-btn:hover {
  background: var(--primary-1);
  color: #fff;
}

.track-node-btn.tracking {
  background: var(--primary-1);
  border-color: var(--primary-1);
  color: #fff;
}

/* Icon visibility toggling */
.track-node-btn .track-icon.tracking {
  display: none;
}
.track-node-btn .track-icon.un-tracked {
  display: block;
}

.track-node-btn.tracking .track-icon.tracking {
  display: block;
}
.track-node-btn.tracking .track-icon.un-tracked {
  display: none;
}

.track-node-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* App.utils.theme — global theme toggle button + dark-mode baseline */

/* Default look for pages without their own override (view module has its own .pg-theme-btn rule); matches typical white-on-colored header buttons. */
.pg-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 6px;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background 0.15s;
  flex-shrink: 0;
}
.pg-theme-btn:hover { background: rgba(255, 255, 255, 0.25); }
.pg-theme-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Guest "Sign in": auto width (base .editor-action-btn is a fixed 36px icon box) and same pill as the theme toggle. */
.editor-action-btn.app-header-signin {
  display: inline-flex;
  width: auto;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.editor-action-btn.app-header-signin:hover { background: rgba(255, 255, 255, 0.25); opacity: 1; }
.editor-action-btn.app-header-signin:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Shared search-match highlight, set via App.utils.highlightMatch(). */
mark.search-highlight {
  background: var(--secondary-2, #e3c22c);
  color: #1a1a1d;
  border-radius: 2px;
  padding: 0 1px;
}

/* Dark mode baseline — sensible defaults for pages without explicit .pg-dark overrides; accent colors deliberately NOT remapped here (per-page audit). */
body.pg-dark {
  background: #0c1119;
  color: #f1f3f5;
  color-scheme: dark;
}

/* Card-ish surfaces — visibly lighter than page so they read as elevated. */
body.pg-dark .card,
body.pg-dark .qz-card,
body.pg-dark .menu-popup,
body.pg-dark .nbell-dropdown,
body.pg-dark .auth-card,
body.pg-dark .settings-card,
body.pg-dark .profile-card {
  background: #1c2235;
  color: #f1f3f5;
  border-color: #3a4561;
}

/* Inputs / textareas — slightly darker than cards so they read as wells. */

body.pg-dark input[type="text"],
body.pg-dark input[type="email"],
body.pg-dark input[type="search"],
body.pg-dark .qt-search,
body.pg-dark input[type="password"],
body.pg-dark input[type="number"],
body.pg-dark textarea,
body.pg-dark select {
  background: #161b2b;
  color: #f1f3f5;
  border-color: #3a4561;
}
body.pg-dark input::placeholder,
body.pg-dark textarea::placeholder { color: #8a92a8; }

/* Menus / dropdowns */
body.pg-dark .menu-item { color: #f1f3f5; }
body.pg-dark .menu-item:hover { background: rgba(255, 255, 255, 0.08); }
body.pg-dark .menu-item.danger { color: #fca5a5; }

/* Headings + paragraphs fall through to body color; keep links readable. */
body.pg-dark a { color: #9aafff; }

/* .qz-page assumes a light bg, but the global body bg is dark navy — force its own light surface here; dark mode flips it below. */
.qz-page {
  background: var(--qz-cream);
  min-height: 100vh;
}

/* <html> keeps the global near-black --bg since only <body> gets .qz-page — mirror the page bg onto <html> too, or it shows as a stray black band below short content. */
html:has(> body.qz-page) {
  background: #f5f6fb; /* mirrors --qz-cream above */
}

/* Remaps --qz-* tokens AND overrides the few hard-coded text colors in tests/index.css so they stay legible. */
body.pg-dark.qz-page,
body.pg-dark .qz-page {
  background: #0c1119;
  --qz-paper:      #1c2235;
  --qz-cream:      #0c1119;
  --qz-sand:       #252b40;
  --qz-line:       #3a4561;
  --qz-line-soft:  #2a3148;
  --qz-ink:        #f1f3f5;
  --qz-ink-soft:   #d2d7e3;
  --qz-mute:       #b8bfd0;
  --qz-coral:      var(--accent);
  --qz-coral-soft: #252b40;
}

html:has(> body.pg-dark.qz-page) {
  background: #0c1119;
}
/* Hardcoded text colors (#1f2937 / #6b7280 etc.) that don't use tokens. */
body.pg-dark .qt-list-title       { color: #f1f3f5; }
body.pg-dark .qt-list-subtitle    { color: #b8bfd0; }
body.pg-dark .qt-filter-tab       { color: #b8bfd0; }
body.pg-dark .qt-filter-tab:hover { color: #f1f3f5; }
body.pg-dark .qt-filter-tab.active{ color: #9aafff; }

/* Test cards in dark mode — Material-style elevation: ~10% lighter than the page so they read as tiles, with a visible border. */
body.pg-dark .qt-card {
  background: #1c2235;
  border-color: #3a4561;
}
body.pg-dark .qt-card:hover {
  border-color: #4f5d80;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

/* Banner gradient stays (pastel reads fine on dark too as an accent). */

body.pg-dark .qt-card-status {
  background: #252b40;
  color: #f1f3f5;
}
body.pg-dark .qt-card-overflow       { color: #9aafff; }
body.pg-dark .qt-card-overflow:hover { background: rgba(255, 255, 255, 0.08); }

body.pg-dark .qt-card-name      { color: #f1f3f5; }
body.pg-dark .qt-card-bank,
body.pg-dark .qt-card-bank-label,
body.pg-dark .qt-card-meta      { color: #b8bfd0; }
body.pg-dark .qt-card-bank-name { color: #f1f3f5; }

body.pg-dark .qt-card-pill {
  background: #252b40;
  border-color: #3a4561;
  color: #d2d7e3;
}
body.pg-dark .qt-card-pill svg  { color: #9aafff; }

body.pg-dark .qt-card-footer    { border-top-color: #2a3148; }

/* 3-dot menu popover anchored to the card */
body.pg-dark .qt-card-menu {
  background: #1c2235;
  border-color: #3a4561;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
body.pg-dark .qt-card-menu button             { color: #f1f3f5; }
body.pg-dark .qt-card-menu button:hover       { background: rgba(255, 255, 255, 0.08); }
body.pg-dark .qt-card-menu button.danger      { color: #fca5a5; }
body.pg-dark .qt-card-menu button.danger:hover{ background: rgba(220, 38, 38, 0.14); }

/* Empty state */
body.pg-dark .qt-empty      { color: #b8bfd0; }
body.pg-dark .qt-empty-icon { background: #252b40; color: #8a92a8; }

/* Outline buttons (Join by code, Play, etc.) in dark mode — the light theme's white pills stuck out as bright tiles, so flip to a dark surface. */
body.pg-dark .qt-btn-outline {
  background: #1c2235;
  color: #d2d7e3;
  border-color: #3a4561;
}
body.pg-dark .qt-btn-outline:hover {
  background: #252b40;
  border-color: #9aafff;
  color: #f1f3f5;
}
body.pg-dark .qt-btn-outline:active {
  background: rgba(255, 255, 255, 0.12);
}

/* Question-bank page (.qb-*) in dark mode — only hovers targeting rgba(0,0,0,0.05) or --qz-cream need overrides, or they'd disappear or go darker than normal. */
body.pg-dark .qb-list-item:hover     { background: #252b40; }
body.pg-dark .qb-list-item.selected  { background: #2d3550; border-color: #4f5d80; }
body.pg-dark .qb-list-overflow:hover { background: rgba(255, 255, 255, 0.08); color: #f1f3f5; }
body.pg-dark .qb-group-toggle:hover  { background: rgba(255, 255, 255, 0.08); color: #f1f3f5; }
body.pg-dark .qb-modal-item:hover    { background: #252b40; }
body.pg-dark .qb-empty               { background: #161b2b; color: #b8bfd0; }
body.pg-dark .qb-toolbar-add:hover   { background: #252b40; }
body.pg-dark .qb-edit-name:hover     { border-bottom-color: rgba(154, 175, 255, 0.4); }

/* ════════════════════════════════════════════════════════════════════
   Profile page — remap its local --profile-* variables.
   ════════════════════════════════════════════════════════════════════ */
body.pg-dark .profile-page,
body.pg-dark.profile-page {
  --profile-bg:      #0c1119;
  --profile-card-bg: #1c2235;
  --profile-border:  #3a4561;
  --profile-muted:   #b8bfd0;
  --profile-text:    #f1f3f5;
}
/* Mobile keeps the card color edge-to-edge; the darker backdrop is desktop-only. */
@media (min-width: 768px) {
  body.pg-dark .profile-main { background-color: var(--profile-bg); }
}
/* Hardcoded surfaces that don't read from --profile-*. */
body.pg-dark .profile-input {
  background: #161b2b;
  color: #f1f3f5;
  border-color: #3a4561;
}
body.pg-dark .profile-input:focus {
  border-color: #9aafff;
  box-shadow: 0 0 0 3px rgba(154, 175, 255, 0.18);
}
body.pg-dark .profile-input::placeholder { color: #8a92a8; }
body.pg-dark .profile-input[readonly]    { background: #161b2b; color: #b8bfd0; }
body.pg-dark .profile-save-btn:hover     { background: #5567dc; }
body.pg-dark .profile-char-count.is-limit { color: #fdba74; }
body.pg-dark .photo-crop-apply:hover     { background: #5567dc; }
body.pg-dark .photo-crop-zoom-btn:hover,
body.pg-dark .photo-crop-choose          { color: #9aafff; }
body.pg-dark .photo-crop-zoom-btn:hover  { border-color: #9aafff; }

/* Settings page — no local CSS vars, every color is hardcoded; override surfaces, text, inputs, and the save button. */
body.pg-dark .settings-page,
body.pg-dark .settings-main          { background: #1c2235; }
@media (min-width: 768px) {
  body.pg-dark .settings-page,
  body.pg-dark .settings-main        { background: #0c1119; }
}
body.pg-dark .settings-card,
body.pg-dark .settings-admin-card {
  background: #1c2235;
  border-color: #3a4561;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
body.pg-dark .settings-section + .settings-section { border-top-color: #2a3148; }
body.pg-dark .settings-section-title    { color: #f1f3f5; }
body.pg-dark .settings-section-subtitle { color: #f1f3f5; }
body.pg-dark .settings-section-help     { color: #b8bfd0; }
body.pg-dark .settings-row-label        { color: #f1f3f5; }
body.pg-dark .settings-input,
body.pg-dark .settings-select {
  background: #161b2b;
  color: #f1f3f5;
  border-color: #3a4561;
}
body.pg-dark .settings-input:focus,
body.pg-dark .settings-select:focus {
  border-color: #9aafff;
  box-shadow: 0 0 0 3px rgba(154, 175, 255, 0.18);
}
body.pg-dark .settings-input::placeholder { color: #8a92a8; }
body.pg-dark .settings-lang-dropdown .custom-dropdown-trigger.open {
  border-color: #9aafff;
  box-shadow: 0 0 0 3px rgba(154, 175, 255, 0.18);
}
body.pg-dark .settings-lang-dropdown .custom-dropdown-trigger svg { color: #b8bfd0; }
body.pg-dark .settings-lang-dropdown .custom-dropdown-menu {
  background: #1c2235;
  border-color: #3a4561;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
body.pg-dark .settings-lang-dropdown .custom-dropdown-item          { color: #f1f3f5; }
body.pg-dark .settings-lang-dropdown .custom-dropdown-item:hover    { background: #252b40; }
body.pg-dark .settings-lang-dropdown .custom-dropdown-item.selected { background: rgba(154, 175, 255, 0.16); color: #9aafff; }
body.pg-dark .settings-eye-btn          { color: #b8bfd0; }
body.pg-dark .settings-eye-btn:hover    { color: #f1f3f5; background: rgba(255, 255, 255, 0.06); }
body.pg-dark .settings-save-btn         { background: var(--accent); }
body.pg-dark .settings-save-btn:hover   { background: #5567dc; }
body.pg-dark .settings-error            { color: #fca5a5; }

/* Review badges (pending publish / delete) — swap the light tinted panels for dark ones. */
body.pg-dark #pending-approval-badge,
body.pg-dark .warning-badge.warning-light,
body.pg-dark .warning-text.wb-note       { background-color: #1a2340; }
body.pg-dark .warning-text               { background-color: transparent; color: #b8bfd0; }
body.pg-dark .warning-light .wb-text,
body.pg-dark .warning-light .version-text { color: #f1f3f5; }
body.pg-dark .warning-light .wb-stat     { color: #d2d7e3; }
body.pg-dark .warning-light .wb-stat svg { stroke: #b8bfd0; }
body.pg-dark .warning-light .wb-stat:first-child svg { stroke: #9aafff; }
body.pg-dark .warning-light .tf-light    { color: #8a92a8; }
body.pg-dark .see-review-link            { color: #b8bfd0; }
body.pg-dark .see-review-link.wb-reasons-link { color: #9aafff; }
body.pg-dark .warning-badge.warning-danger-light { background-color: #3a1d24; }
body.pg-dark .warning-danger-light,
body.pg-dark .warning-danger-light .wb-text,
body.pg-dark .warning-danger-light .wb-stat { color: #fca5a5; }

/* Editor "Expected Answer" heading — match the other editor section labels. */
body.pg-dark .response-title    { color: #d2d7e3; }
body.pg-dark .response-subtitle { color: #8a92a8; }

/* Notifications dropdown (.nbell-*) in dark mode — the pure-white light panel would read as a glowing tile on a dark page, so flip to the chrome's elevation palette. */
body.pg-dark .nbell-dropdown {
  background: #1c2235;
  border-color: #3a4561;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}
body.pg-dark .nbell-header      { border-bottom-color: #2a3148; }
body.pg-dark .nbell-title       { color: #f1f3f5; }
body.pg-dark .nbell-mark-all    { color: #9aafff; }

body.pg-dark .nbell-item        { border-bottom-color: #2a3148; }
body.pg-dark .nbell-item:hover  { background: #252b40; }
body.pg-dark .nbell-text        { color: #f1f3f5; }
body.pg-dark .nbell-subtext     { color: #b8bfd0; }
body.pg-dark .nbell-time        { color: #8a92a8; }
body.pg-dark .nbell-dot.muted   { background: #4a5266; }

body.pg-dark .nbell-footer      { border-top-color: #2a3148; }
body.pg-dark .nbell-view-all    { color: #9aafff; }
body.pg-dark .nbell-empty       { color: #b8bfd0; }

/* Notification icon tiles — keep the colored hue but darken the background so pastels don't blast on a dark surface. */
body.pg-dark .nbell-icon         { background: #252b40; color: #c7cdda; }
body.pg-dark .nbell-icon.approve { background: rgba(22, 163, 74, 0.18);  color: #4ade80; }
body.pg-dark .nbell-icon.reject,
body.pg-dark .nbell-icon.delete  { background: rgba(220, 38, 38, 0.20);  color: #fca5a5; }
body.pg-dark .nbell-icon.publish { background: rgba(37, 99, 235, 0.20);  color: #93c5fd; }
body.pg-dark .nbell-icon.rename  { background: rgba(124, 58, 237, 0.20); color: #c4b5fd; }
body.pg-dark .nbell-icon.track   { background: rgba(67, 56, 202, 0.22);  color: #a5b4fc; }
body.pg-dark .nbell-icon.edit    { background: rgba(217, 119, 6, 0.20);  color: #fcd34d; }

/* Inline approve/reject vote buttons in pending group requests. */
body.pg-dark .nbell-vote-btn.approve {
  background: rgba(22, 163, 74, 0.16);
  color: #4ade80;
  border-color: rgba(22, 163, 74, 0.45);
}
body.pg-dark .nbell-vote-btn.approve:hover:not(:disabled) {
  background: rgba(22, 163, 74, 0.26);
  border-color: #4ade80;
}
body.pg-dark .nbell-vote-btn.reject {
  background: rgba(220, 38, 38, 0.16);
  color: #fca5a5;
  border-color: rgba(220, 38, 38, 0.45);
}
body.pg-dark .nbell-vote-btn.reject:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.26);
  border-color: #fca5a5;
}
body.pg-dark .nbell-vote-decision-pill {
  background: #252b40;
  border-color: #3a4561;
  color: #b8bfd0;
}
body.pg-dark .nbell-vote-decision-pill.approved {
  background: rgba(22, 163, 74, 0.18);
  border-color: rgba(22, 163, 74, 0.45);
  color: #4ade80;
}
body.pg-dark .nbell-vote-decision-pill.rejected {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.45);
  color: #fca5a5;
}

/* Themed scrollbars — globally thin, theme-aware; overrides macOS "always show scrollbars" and inherited chunky native styling. 6px rail, floating pill thumb. */

/* Firefox + future standard — set on html, body AND * so it wins. */
html, body, * {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120, 130, 160, 0.45) transparent !important;
}

/* Chromium / WebKit — !important on width/height since some container styles or macOS "always show" defaults try to push it wider. */
::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
  background: transparent !important;
}
::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background-color: rgba(120, 130, 160, 0.45) !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
}
::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(120, 130, 160, 0.75) !important;
}
::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: transparent !important;
}
/* Kill the inset shadow / track buttons that some browsers add */
::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Dark mode — slightly brighter thumb so it's visible on the #0c1119 surface, fades to brand-blue on hover. */
body.pg-dark,
body.pg-dark * {
  scrollbar-color: rgba(180, 195, 230, 0.30) transparent !important;
}
body.pg-dark ::-webkit-scrollbar-thumb,
body.pg-dark *::-webkit-scrollbar-thumb {
  background-color: rgba(180, 195, 230, 0.28) !important;
}
body.pg-dark ::-webkit-scrollbar-thumb:hover,
body.pg-dark *::-webkit-scrollbar-thumb:hover {
  background-color: rgba(154, 175, 255, 0.55) !important;
}

/* Auth pages in dark mode — the card was already dark via the global rule, but the surrounding split-screen scene stayed bright and the title was hardcoded invisible; cover the whole layout. */

/* Left half — branding panel; dark uses a deep gradient that still echoes the brand blue. */
body.pg-dark .auth-left {
  background: linear-gradient(135deg, #374f9a 0%, #35498e 100%);
}
body.pg-dark .auth-left::before {
  background: linear-gradient(180deg, transparent 0%, #4f5d80 50%, transparent 100%);
}
body.pg-dark .auth-logo {
  background: #1c2235;
  border-color: #9aafff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
body.pg-dark .auth-logo span        { color: #f1f3f5; }
body.pg-dark .auth-tagline h1       { color: #f1f3f5; }
body.pg-dark .auth-tagline h1 .highlight { color: #9aafff; }
body.pg-dark .auth-tagline p        { color: #b8bfd0; }

/* Right half — form panel. */
body.pg-dark .auth-right { background: #0c1119; }
body.pg-dark .auth-card {
  background: #1c2235;
  border: 1px solid #3a4561;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Card title was invisible — hardcoded #1a1d2e on the now-dark card. */
body.pg-dark .auth-card-header h2 { color: #f1f3f5; }
body.pg-dark .auth-card-header p  { color: #b8bfd0; }

/* Form fields */
body.pg-dark .form-group label    { color: #f1f3f5; }
body.pg-dark .form-group input {
  background: #161b2b;
  color: #f1f3f5;
  border-color: #3a4561;
}
body.pg-dark .form-group input::placeholder { color: #8a92a8; }
body.pg-dark .form-group input:focus {
  border-color: #9aafff;
  box-shadow: 0 0 0 3px rgba(154, 175, 255, 0.18);
}
/* Mobile browsers paint autofilled/suggested email with a forced light fill; an inset shadow is the only override. */
body.pg-dark .form-group input:-webkit-autofill,
body.pg-dark .form-group input:-webkit-autofill:hover {
  -webkit-text-fill-color: #f1f3f5;
  caret-color: #f1f3f5;
  -webkit-box-shadow: 0 0 0 1000px #161b2b inset;
  box-shadow: 0 0 0 1000px #161b2b inset;
  transition: background-color 9999s ease-out 0s;
}
body.pg-dark .form-group input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f1f3f5;
  caret-color: #f1f3f5;
  -webkit-box-shadow: 0 0 0 1000px #161b2b inset, 0 0 0 3px rgba(154, 175, 255, 0.18);
  box-shadow: 0 0 0 1000px #161b2b inset, 0 0 0 3px rgba(154, 175, 255, 0.18);
}
/* Separate rule: an unknown pseudo would drop the whole -webkit- selector list. */
body.pg-dark .form-group input:autofill { filter: none; }
body.pg-dark .form-link             { color: #9aafff; }
body.pg-dark .form-link:hover       { color: #c0cdff; }

/* 6-digit verification code boxes */
body.pg-dark .code-input {
  background: #161b2b;
  color: #f1f3f5;
  border-color: #3a4561;
}
body.pg-dark .code-input:focus {
  border-color: #9aafff;
  box-shadow: 0 0 0 3px rgba(154, 175, 255, 0.18);
}

/* Footer link row ("Already have an account?") */
body.pg-dark .auth-footer       { color: #b8bfd0; }
body.pg-dark .auth-footer-link  { color: #9aafff; }
body.pg-dark .auth-footer-link:hover { color: #c0cdff; }

/* Resend timer / link, password toggle */
body.pg-dark .resend-timer      { color: #b8bfd0; }
body.pg-dark .resend-link       { color: #9aafff; }
body.pg-dark .resend-link:hover { color: #c0cdff; }
body.pg-dark .password-toggle   { color: #b8bfd0; }
body.pg-dark .password-toggle:hover { color: #9aafff; }

/* Password strength bar — base track */
body.pg-dark .strength-bar      { background: #2a3148; }
body.pg-dark .strength-text     { color: #b8bfd0; }
/* .weak/.medium/.strong colors stay the same — they read fine on dark. */

/* Password-error keeps red; bump to a lighter tone for dark contrast. */
body.pg-dark .password-error    { color: #fca5a5; }

/* Generic .modal .modal-card (Create Node/Group, Rename dialogs) — light-mode's white card/near-black button don't read on dark; apply the app's Material elevation palette. */
body.pg-dark .modal .modal-card {
  background: #1c2235;
  color: #f1f3f5;
  border: 1px solid #3a4561;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
body.pg-dark .modal .modal-backdrop { background: rgba(0, 0, 0, 0.55); }

body.pg-dark .modal-form h3,
body.pg-dark .modal-card h3        { color: #f1f3f5; }
body.pg-dark .modal-form label     { color: #d2d7e3; }

body.pg-dark .modal-form input[type="text"],
body.pg-dark .modal-form input[type="number"],
body.pg-dark .modal-form input[type="email"],
body.pg-dark .modal-form select {
  background: #161b2b;
  color: #f1f3f5;
  border-color: #3a4561;
}
body.pg-dark .modal-form input::placeholder { color: #8a92a8; }
body.pg-dark .modal-form input[type="text"]:focus,
body.pg-dark .modal-form input[type="number"]:focus,
body.pg-dark .modal-form input[type="email"]:focus,
body.pg-dark .modal-form select:focus {
  border-color: #9aafff;
  box-shadow: 0 0 0 3px rgba(154, 175, 255, 0.20);
}
/* Styles the browser-rendered dropdown options — works in Chromium; Firefox respects it on macOS too. */
body.pg-dark .modal-form select option {
  background: #1c2235;
  color: #f1f3f5;
}
body.pg-dark .modal-form select option:disabled { color: #4f5d80; }

/* Footer buttons (Cancel / Create) — primary stays brand-blue; ghost variant gets a dark surface with a visible border. */
body.pg-dark .modal-actions button.primary {
  background: var(--accent);
  color: #fff;
}
body.pg-dark .modal-actions button.primary:hover { background: #5567dc; }
body.pg-dark .modal-actions button:not(.primary) {
  background: #1c2235;
  color: #d2d7e3;
  border: 1px solid #3a4561;
}
body.pg-dark .modal-actions button:not(.primary):hover {
  background: #252b40;
  border-color: #4f5d80;
  color: #f1f3f5;
}

/* ── Bug Report (WhatsApp) overlay ─────────────────────────────────────────── */
.bugs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: bugsFadeIn 0.2s ease;
}
@keyframes bugsFadeIn { from { opacity: 0; } to { opacity: 1; } }

.bugs-modal {
  background: var(--surface, #fff);
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: bugsSlideUp 0.25s ease;
}
@keyframes bugsSlideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.bugs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
}
.bugs-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text, #1a1a2e);
  margin: 0;
}
.bugs-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.bugs-close:hover { color: var(--text, #1a1a2e); }

.bugs-body {
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bugs-text {
  color: var(--text-secondary, #6b7280);
  font-size: 0.95rem;
  margin: 0;
}
.bugs-whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: #25D366;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  align-self: flex-start;
  transition: background 0.15s;
}
.bugs-whatsapp-link:hover { background: #20bd5a; color: #fff; }

/* Dark theme */
body.pg-dark .bugs-modal {
  background: var(--surface, #1e2235);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
body.pg-dark .bugs-title { color: var(--text, #e2e8f0); }
body.pg-dark .bugs-text { color: var(--text-secondary, #94a3b8); }
body.pg-dark .bugs-close { color: var(--text-secondary, #64748b); }
body.pg-dark .bugs-close:hover { color: var(--text, #e2e8f0); }
/* Beats the global body.pg-dark a link color */
body.pg-dark .bugs-whatsapp-link,
body.pg-dark .bugs-whatsapp-link:hover { color: #fff; }