/* === 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 */
}

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; /* Large screens (desktop) */
  --md: 768px; /* Medium screens (tablet) */
  --sm: 480px; /* Small screens (mobile) */
}

/* 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;
}
/* ────────────────────────────────────────────────────────────────────
 * LaTeX error toast + modal
 * Used by utils/html-preview-utility.js
 * Templates: #latex-error-toast-template, #latex-error-modal (in editor/index.html)
 * ──────────────────────────────────────────────────────────────────── */

/* ── Toast stack (top-right) ── */
.latex-error-toasts {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  pointer-events: none;
}

.latex-error-toast {
  background: #fff;
  border-left: 4px solid #f34141;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 12px 14px 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: auto;
  animation: latex-toast-in 0.2s ease-out;
}

@keyframes latex-toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.latex-error-toast-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.latex-error-toast-type {
  font-size: 14px;
  font-weight: 600;
  color: #f34141;
  line-height: 1.3;
  word-break: break-word;
}

.latex-error-toast-summary {
  font-size: 13px;
  color: #333;
  line-height: 1.45;
  word-break: break-word;
}

.latex-error-see-more {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 2px 0;
  margin-top: 2px;
  color: #2f57d6;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}

.latex-error-see-more:hover {
  color: #1e3fa0;
}

.latex-error-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}

.latex-error-toast-close:hover {
  color: #333;
}

/* ── Modal ── */
.latex-error-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.latex-error-modal.hidden {
  display: none;
}

.latex-error-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.latex-error-modal-card {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.latex-error-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e5e5;
  background: #fafafa;
}

.latex-error-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #222;
}

.latex-error-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: 0 4px;
}

.latex-error-modal-close:hover {
  color: #222;
}

.latex-error-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.latex-error-modal-type {
  font-size: 15px;
  font-weight: 700;
  color: #f34141;
  margin-bottom: 6px;
}

.latex-error-modal-summary {
  font-size: 14px;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.5;
}

.latex-error-modal-raw {
  background: #1e1e1e;
  color: #e6e6e6;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 14px 16px;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 50vh;
  overflow-y: auto;
  margin: 0;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .latex-error-toasts {
    top: auto;
    bottom: 20px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
  .latex-error-modal-card {
    max-height: 90vh;
  }
}
/* 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; /* Yellow */
}

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

.status-badge.error .status-dot,
.status-badge.rejected .status-dot {
  background: #ea4335; /* Red */
}
/**
 * Pending Approval Badge
 * Shared styles for the pending publish-request status banner
 * shown on public node pages (public-theory, public-quiz, public-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;
}

/* 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 Styles for Editor and Public Quiz Views */
/* Use this file for common question card styles to maintain DRY principle */

: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: 700;
  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;
}

.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%;
  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;
  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;
}
/* 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;

  /* Shadow for depth */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Show tooltip on hover */
.tooltip-wrapper:hover .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;
}
/* 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;
}

/* #user-menu-panel inherits its base look from popup-menu.css (.menu-popup):
   light surface, soft shadow, 12px radius. Only positioning is set here so
   the panel sits close beneath the avatar. */
#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 whose root container fills the
   viewport and manages its own internal scrolling: auth split-screen,
   the node viewer, the editor, and the map.  All other pages (tests,
   profile, settings, question-bank, list/form views, …) need the body
   to scroll naturally — otherwise mobile users can't reach anything
   below the fold.  That global `overflow: hidden` was Rose's bug. */
body:has(.auth-layout),
body:has(.pg-container),
body:has(.editor-container),
body:has(#app-root) {
  overflow: hidden;
}

/* On mobile the auth split-screen collapses to a stacked column whose
   content can exceed the viewport on smaller phones.  Allow the body
   to scroll on auth pages below the desktop breakpoint so Rose's
   "content cut off on some phones" bug doesn't recur. */
@media (max-width: 768px) {
  body:has(.auth-layout) { overflow: auto; }
}

.auth-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* 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 */
  body:has(#login-form) .mobile-header {
    display: block;
  }

  body:has(#login-form) .mobile-logo {
    display: flex;
  }

  body:has(#login-form) .auth-card {
    margin-top: 80px;
    border-radius: 32px 32px 0 0;
    padding: 40px 24px;
    /* Was min-height: calc(100vh - 140px) which combined with the
       80px top margin guaranteed overflow on devices with on-screen
       UI like the iPhone home indicator.  Min the card to "at least
       fill the rest of the viewport" using 100dvh (dynamic viewport
       height) instead, so the card hugs whatever room is left. */
    min-height: calc(100dvh - 140px);
  }

  /* 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;
  }
}
/* 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;
}

/* Hide helper class */
.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 Styles */
/* 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;
}

.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 {
  background: var(--accent);
  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);
}
/**
 * Editorial design system — used by Tests + Question Bank modules.
 *
 * MOBILE-FIRST: base styles target small screens (< 640px). Larger viewports
 * pick up wider layouts via min-width queries:
 *   - default: phones (≤ 639px)
 *   - 640px+:  tablets (denser sections, two-pane editor)
 *   - 960px+:  desktops (full John mock layout: 80px section gutter, etc.)
 *
 * Layout/UI structure adapted from a mock by John (kahoot.html in repo root),
 * tokens map to the project's existing palette (variables.css) and fonts.
 * Scoped under `.qz-page` so the light palette doesn't leak into the dark
 * global theme used by /map and other modules.
 */

.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 ────────────────────────────────────────────────────────── */
.qz-btn {
  padding: 10px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--qz-ink);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--qz-ink);
  white-space: nowrap;
}

.qz-btn-primary { background: var(--qz-ink); color: var(--qz-paper); }
.qz-btn-primary:hover { background: var(--qz-coral); border-color: var(--qz-coral); }
.qz-btn-coral { background: var(--qz-coral); border-color: var(--qz-coral); color: var(--qz-paper); }
.qz-btn-coral:hover { filter: brightness(0.95); }
.qz-btn-ghost:hover { background: var(--qz-ink); 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); }

.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 iOS prevents zoom; we use 14 + viewport scale fix */
  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);
  border: 1px solid var(--qz-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(26, 24, 21, 0.06);
}

.qz-player-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--qz-line);
  background: var(--qz-cream);
  gap: 8px;
}

.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; }

.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;
}

.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;
}

.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);
}

.qz-answer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.qz-answer {
  padding: 16px 18px;
  border-radius: 14px;
  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;
}

.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; }

.qz-player-bottom {
  padding: 12px 16px;
  border-top: 1px solid var(--qz-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--qz-cream);
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
}

.qz-who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--qz-mute);
}

.qz-who-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--qz-forest);
  color: var(--qz-paper);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.qz-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--qz-coral);
  display: inline-block;
  animation: qz-pulse 1.5s infinite;
}

@keyframes qz-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── RESULTS / LEADERBOARD ──────────────────────────────────────────── */
.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;
}

.qz-leaderboard {
  background: var(--qz-paper);
  border: 1px solid var(--qz-line);
  border-radius: 16px;
  overflow: hidden;
}

.qz-lb-row {
  display: grid;
  grid-template-columns: 38px 1fr 64px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--qz-line-soft);
  transition: background 0.15s ease;
  gap: 6px;
}

.qz-lb-row:last-child { border-bottom: 0; }
.qz-lb-row:hover { background: var(--qz-cream); }

.qz-lb-row.head {
  background: var(--qz-cream);
  font-family: var(--qz-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--qz-mute);
  padding: 10px 14px;
}

.qz-lb-row.head:hover { background: var(--qz-cream); }

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

/* Hide the time/accuracy columns on mobile — only Rank · Player · Score. */
.qz-lb-row .qz-lb-time,
.qz-lb-row .qz-lb-acc,
.qz-lb-row.head > div:nth-child(3),
.qz-lb-row.head > div:nth-child(4) {
  display: none;
}

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

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

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

.qz-lb-name .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--qz-paper);
  flex-shrink: 0;
  background: var(--qz-forest);
}

.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-name > div:last-child { min-width: 0; }

.qz-lb-time,
.qz-lb-acc { font-family: var(--qz-mono); font-size: 12px; }

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

.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; }

.qz-qrow {
  display: grid;
  grid-template-columns: 32px 1fr 44px;
  align-items: center;
  gap: 10px;
}

.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 .qpct { font-family: var(--qz-mono); font-size: 11px; text-align: right; }

/* ── 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; }

/* ── 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);
}

/* ── TAKE (student) STATES ──────────────────────────────────────────── */
.qz-take-card {
  max-width: 520px;
  margin: 0 auto;
}

.qz-take-pill {
  display: inline-block;
  background: var(--qz-ink);
  color: var(--qz-paper);
  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); }
}

.qz-take-status {
  font-size: 13px;
  color: var(--qz-forest);
  font-weight: 600;
  margin-top: 8px;
}

/* ── 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; }
  .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: 22px; }
  .qz-player-top { padding: 16px 22px; }
  .qz-question-area { padding: 40px 32px 24px; }
  .qz-question-text { font-size: 34px; }
  .qz-answer-grid { grid-template-columns: 1fr 1fr; }
  .qz-answer { padding: 20px 22px; font-size: 16px; }

  /* Leaderboard grows back its time + accuracy columns. */
  .qz-lb-row {
    grid-template-columns: 60px 1fr 100px 100px 90px;
    padding: 16px 22px;
    gap: 8px;
  }
  .qz-lb-row.head { padding: 12px 22px; }
  .qz-lb-row .qz-lb-time,
  .qz-lb-row .qz-lb-acc,
  .qz-lb-row.head > div:nth-child(3),
  .qz-lb-row.head > div:nth-child(4) { display: block; }

  .qz-rank { font-size: 26px; }
  .qz-lb-name .av { width: 36px; height: 36px; font-size: 13px; }
  .qz-lb-name strong { font-size: 15px; }
  .qz-lb-name span { font-size: 12px; }
  .qz-lb-score { font-size: 22px; }

  .qz-stat .qz-stat-num { font-size: 36px; }
  .qz-results-stats { gap: 28px; }

  .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; }

  /* 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: 24px; }
  .qz-player-top { padding: 18px 28px; }
  .qz-question-area { padding: 56px 56px 28px; }
  .qz-question-text { font-size: 44px; }
  .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-who-avatar { width: 24px; height: 24px; font-size: 11px; }
  .qz-who { gap: 10px; 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 inside the header avatar button.
   Apply on every page (.header-avatar-btn) — JS toggles the .hidden class
   on .header-avatar-img / .header-avatar-fallback 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 the blue accent (light AND dark mode), so the
   profile avatar fallback silhouette must stay white on every page, in every
   mode. Without this it inherits currentColor and turns dark in dark mode. */
.header-avatar-fallback path {
  fill: #fff !important;
  stroke: none !important;
}

/* User Menu Panel Adjustment for this header */
/* No overrides needed, using 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); /* Subtle blue tint */
  color: #5b8cff; /* Premium blue text */
  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;
}

/* 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;
}

.nbell-text strong {
  font-weight: 700;
}

.nbell-subtext {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  margin: 0;
}

/* 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-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 the theme toggle on pages whose own CSS doesn't
   override it (view module has its own .pg-theme-btn rule). Header
   buttons are typically white-on-colored so this matches that. */
.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; }

/* ─── Dark mode baseline ────────────────────────────────────────────
   Sensible defaults so any page that doesn't yet ship explicit
   .pg-dark overrides still reads correctly (dark surface + light
   text). Per-page CSS may override these to match its own palette.
   Accent colors are deliberately NOT remapped here — that's a per-page
   audit (e.g. #26c6da → #007c8c).
   ─────────────────────────────────────────────────────────────────── */
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; }

/* Tests page (.qz-page) was authored assuming a light page bg, but the
   global body bg defaults to var(--bg) = #000011 (dark navy), so light
   mode looked broken (dark text on dark page). Force .qz-page to its
   own light surface in light mode; dark mode flips it below. */
.qz-page {
  background: var(--qz-cream);
  min-height: 100vh;
}

/* Tests page in dark mode: remap --qz-* tokens AND override 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;
}
/* 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: cards are ~10% lighter than the page so
   they read as tiles, with a clearly 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 in dark mode (Join by code, Play, etc.) ──────
   The light theme has them as white pills with a faint blue border;
   in dark mode they were sticking out as bright white tiles. Flip to
   a dark surface with a visible border that matches the rest of the
   dark chrome. */
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
   The page is .qz-page so --qz-* tokens are remapped above. Only the
   hovers that target rgba(0,0,0,0.05) or `--qz-cream` (which is now
   page bg) need explicit overrides — otherwise hovers would either
   disappear or make items DARKER than their normal state.
   ════════════════════════════════════════════════════════════════════ */
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;
}
/* 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; }

/* ════════════════════════════════════════════════════════════════════
   Settings page — no local CSS vars, every color is hardcoded.
   Override surfaces, text, inputs, and the save button.
   ════════════════════════════════════════════════════════════════════ */
body.pg-dark .settings-page          { 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-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; }

/* ════════════════════════════════════════════════════════════════════
   Notifications dropdown (.nbell-*) in dark mode.
   The light-mode panel is pure-white with very faint dividers; in dark
   mode that reads as a glowing white tile floating over a dark page.
   Flip to the same elevation palette as the rest of the chrome.
   ════════════════════════════════════════════════════════════════════ */
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 they don't blast bright pastels 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" preference and any
   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 — use !important on width/height because some
   container styles (or browser defaults under macOS "always show")
   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 (login / signup / forgot-password) in dark mode.
   The auth-card was already dark via the global card rule, but the
   surrounding split-screen scene (.auth-left lavender + .auth-right
   cream) stayed bright, and the inner card title `.auth-card-header
   h2` was hardcoded #1a1d2e — invisible on the dark card. Cover the
   whole layout.
   ════════════════════════════════════════════════════════════════════ */

/* Left half — branding panel. Light has a soft lavender gradient;
   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);
}
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 / Create Group / Rename
   dialogs on the map page).  The light-mode styles paint a white card
   with `#222` text, light-gray inputs, and a near-black primary
   button — none of which reads on the dark page.  Apply the same
   Material elevation palette used by the rest of the app.
   ════════════════════════════════════════════════════════════════════ */
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);
}
/* Style the dropdown options the browser renders — works in Chromium-
   based browsers; 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; the
   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); }