/* ── Question image (shown under the stem) ──────────────────────────────────
   Common class + per-surface modifier (.qc-question-image--admin-list). Only
   rendered when the image URL is a real http(s) link, so it never leaves an
   empty box. The admin list variant is capped in height to keep rows compact. */
.qc-question-image {
  padding: 6px 0 4px;
}
.qc-question-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.qc-question-image--admin-list img {
  max-height: 160px;
  width: auto;
}

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

:root {
  --navy: #0f1f2e;
  --navy-mid: #1a3548;
  --navy-light: #233d54;
  --teal: #06b6d4;
  --teal-mid: #0891b2;
  --teal-pale: #f0feff;
  --teal-light: #e0f9fd;
  --teal-border: #67e8f9;
  --emerald: #0891b2;
  --emerald-pale: #e0f9fd;
  --amber: #d97706;
  --amber-pale: #fffbeb;
  --amber-light: #fef9c3;
  --yellow: #f5c400;
  --yellow-mid: #d4a800;
  --yellow-pale: #fefce8;
  --rose: #e11d48;
  --green: #16a34a;
  --green-light: #dcfce7;
  --red: #dc2626;
  --red-light: #fee2e2;
  --ink: #0f1f2e;
  --ink-mid: #374f65;
  --ink-dim: #7a95ad;
  --border: #e2edf4;
  --border-hi: #c8dce8;
  --surface: #f7fbfd;
  --surface-hi: #eef6fa;
  --white: #ffffff;
  --bg: #ffffff;
  --shadow-sm: 0 1px 4px rgba(6, 182, 212, 0.1), 0 2px 14px rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 22px rgba(6, 182, 212, 0.13), 0 10px 36px rgba(0, 0, 0, 0.07);
  --shadow-lg:
    0 14px 52px rgba(6, 182, 212, 0.16), 0 28px 72px rgba(0, 0, 0, 0.09);
  --shadow-teal: 0 8px 32px rgba(6, 182, 212, 0.38);
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --sidebar: 260px;
  --purple: #7c3aed;
  --purple-light: #f5f3ff;

  /* ── Tinted-badge INK ────────────────────────────────────────────────────────
     Status chips are a pale tint + a deep text colour (amber-100 + amber-900).
     Those deep inks were written as literal hex all over the components, which is
     fine on white and unreadable the moment the tint goes translucent for dark
     mode. Naming them makes them flippable — see the body.dark block at the end
     of this file, where each one becomes its LIGHT counterpart. */
  --amber-ink: #92400e;
  --green-ink: #047857;
  --red-ink: #b91c1c;
  --rose-ink: #be123c;
  --blue-ink: #1d4ed8;

  --green-border: #6ee7b7;
  --rose-light: #fff1f2;
  --rose-border: #fda4af;
  --blue-light: #eff6ff;
  --blue-border: #93c5fd;
}

html {
  height: 100%;
}

body.app-body {
  font-family: "Figtree", sans-serif;
  background: var(--surface);
  color: var(--ink);
  display: flex;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body.app-body div#__nuxt {
  display: flex;
  width: 100%;
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar);
  flex-shrink: 0;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  position: relative;
  z-index: 10;
}

.sidebar-logo {
  padding: 24px 20px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-badge {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: rgba(217, 119, 6, 0.2);
  color: var(--amber);
  border: 1px solid rgba(217, 119, 6, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
}

.sidebar-nav {
  padding: 16px 12px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.nav-section-label {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.2);
  padding: 0 8px;
  margin: 10px 0 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
  margin-bottom: 1px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.nav-item:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
}

.nav-item.active {
  color: #fff;
  background: rgba(6, 182, 212, 0.15);
}

.nav-item.active .nav-icon {
  color: var(--teal);
}

.nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-item.active .nav-icon {
  opacity: 1;
}

.nav-badge {
  margin-left: auto;
  background: var(--teal);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
}

.nav-badge.amber {
  background: var(--amber);
}

.sidebar-footer {
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.admin-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
}

.admin-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.2);
  border: 1.5px solid rgba(6, 182, 212, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--teal);
  flex-shrink: 0;
}

.admin-info {
  flex: 1;
  min-width: 0;
}

.admin-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-role {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
}

/* ── MAIN ── */
.main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  transform: translateZ(0);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.topbar-title {
  font-family: "Figtree", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

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

.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 7px 12px;
  font-size: 0.82rem;
  color: var(--ink-dim);
  min-width: 220px;
}

.topbar-search input {
  border: none;
  background: none;
  outline: none;
  font-family: "Figtree", sans-serif;
  font-size: 0.82rem;
  color: var(--ink);
  width: 100%;
}

.topbar-search input::placeholder {
  color: var(--ink-dim);
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
  color: var(--ink-dim);
  position: relative;
}

.icon-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--white);
}

.content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 32px;
  overscroll-behavior: none;
}

/* ── SECTION PANELS ── */
.panel {
  display: none;
}

.panel.active {
  display: block;
}

/* ── STATS ROW ── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  transition: box-shadow 0.2s;
}

.stat-card:hover {
  box-shadow: var(--shadow);
}

.stat-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon.teal {
  background: rgba(6, 182, 212, 0.1);
  color: var(--teal);
}

.stat-icon.amber {
  background: rgba(217, 119, 6, 0.1);
  color: var(--amber);
}

.stat-icon.green {
  background: rgba(22, 163, 74, 0.1);
  color: var(--green);
}

.stat-icon.red {
  background: rgba(220, 38, 38, 0.08);
  color: var(--red);
}

.stat-delta {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

.stat-delta.up {
  background: var(--green-light);
  color: var(--green);
}

.stat-delta.down {
  background: var(--red-light);
  color: var(--red);
}

.stat-num {
  font-family: "Figtree", sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.78rem;
  color: var(--ink-dim);
  font-weight: 500;
}

/* ── CARDS / GRIDS ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
}

.card-action {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--teal);
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
}

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

/* ── TABLES ── */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-dim);
  padding: 0 12px 10px;
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 11px 12px;
  font-size: 0.83rem;
  color: var(--ink-mid);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: var(--surface);
}

.td-main {
  color: var(--ink);
  font-weight: 600;
}

/* ── BADGES ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.badge-green {
  background: var(--green-light);
  color: var(--green);
}

.badge-amber {
  background: var(--amber-light);
  color: #92400e;
}

.badge-red {
  background: var(--red-light);
  color: var(--red);
}

.badge-teal {
  background: var(--teal-light);
  color: var(--teal-mid);
}

.badge-gray {
  background: var(--surface);
  color: var(--ink-dim);
  border: 1px solid var(--border);
}

/* Expired subscription — an active login whose subscription has lapsed (or who never
   subscribed). Orange to read as "attention / renew", distinct from amber Pending and
   gray Inactive. */
.badge-orange {
  background: #ffedd5;
  color: #9a3412;
  border: 1px solid rgba(234, 88, 12, 0.2);
}

.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.badge .badge-grays {
  background: rgba(148, 163, 184, 0.1);
  color: var(--ink-mid);
  border: 1px solid var(--border);
}

.badge .badge-grays .badge-dot {
  background: var(--ink-dim);
}

/* ── BUTTONS ── */
.btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
  border: none;
  font-family: "Figtree", sans-serif;
}

.btn-primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 2px 0 rgba(8, 145, 178, 0.4);
}

.btn-primary:hover {
  background: var(--teal-mid);
}

.btn-amber {
  background: var(--amber);
  color: #fff;
  box-shadow: 0 2px 0 rgba(180, 83, 9, 0.3);
}

.btn-amber:hover {
  filter: brightness(1.1);
}

.btn-outline {
  background: var(--white);
  color: var(--ink-mid);
  border: 1.5px solid var(--border);
}

.btn-outline:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.btn-danger {
  background: var(--red-light);
  color: var(--red);
}

.btn-danger:hover {
  background: var(--red);
  color: #fff;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 0.75rem;
}

.btn-icon {
  width: 30px;
  height: 30px;
  padding: 0;
  justify-content: center;
  border-radius: var(--r-sm);
}

/* ── SECTION HEADER ── */
.section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.section-hdr-left h2 {
  font-family: "Figtree", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
}

.section-hdr-left p {
  font-size: 0.82rem;
  color: var(--ink-dim);
  margin-top: 3px;
}

.section-hdr-right {
  display: flex;
  gap: 8px;
}

/* ── FILTER BAR ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.filter-input {
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  font-size: 0.82rem;
  font-family: "Figtree", sans-serif;
  color: var(--ink);
  background: var(--white);
  outline: none;
  transition: border-color 0.15s;
}

.filter-input:focus {
  border-color: var(--teal);
}

.filter-select {
  min-width: 140px;
}

/* ── PROGRESS BARS ── */
.progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.progress-label {
  font-size: 0.78rem;
  color: var(--ink-mid);
  font-weight: 600;
  min-width: 120px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s;
}

.fill-teal {
  background: var(--teal);
}

.fill-amber {
  background: var(--amber);
}

.fill-green {
  background: var(--green);
}

.progress-pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-dim);
  min-width: 36px;
  text-align: right;
}

/* ── MINI CHART ── */
.sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
}

.spark-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: rgba(6, 182, 212, 0.25);
  transition: background 0.15s;
}

.spark-bar:hover {
  background: var(--teal);
}

.spark-bar.highlight {
  background: var(--teal);
}

/* ── REVENUE CHART ── */
.rev-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding-top: 10px;
}

.rev-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rev-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: opacity 0.2s;
  cursor: pointer;
}

.rev-bar.teal {
  background: linear-gradient(
    180deg,
    var(--teal) 0%,
    rgba(6, 182, 212, 0.6) 100%
  );
}

.rev-bar.amber {
  background: linear-gradient(
    180deg,
    var(--amber) 0%,
    rgba(217, 119, 6, 0.6) 100%
  );
}

.rev-bar:hover {
  opacity: 0.8;
}

.rev-month {
  font-size: 0.62rem;
  color: var(--ink-dim);
  font-weight: 600;
}

/* ── ACTIVITY FEED ── */
.activity-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

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

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.activity-text {
  font-size: 0.8rem;
  color: var(--ink-mid);
  line-height: 1.5;
  flex: 1;
}

.activity-text strong {
  color: var(--ink);
  font-weight: 700;
}

.activity-time {
  font-size: 0.72rem;
  color: var(--ink-dim);
  font-family: "JetBrains Mono", monospace;
  white-space: nowrap;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* ── USER DETAIL OVERLAY ── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgb(15 31 46 / 76%);
  z-index: 1000;
  will-change: opacity;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.overlay-top {
  z-index: 1050;
}

.overlay.open {
  opacity: 1;
  pointer-events: all;
}

.drawer {
  background: var(--white);
  border-radius: var(--r-lg);
  width: 580px;
  max-width: 97vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(15, 31, 46, 0.25);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.overlay.open .drawer {
  transform: none;
}

.drawer-header {
  padding: 20px 24px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.drawer-body {
  padding: 20px 24px 16px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.drawer-close {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
}

.drawer-close:hover {
  background: var(--border);
}

.drawer-user-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.drawer-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(6, 182, 212, 0.1);
  border: 2px solid rgba(6, 182, 212, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Figtree", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--teal);
}

.drawer-name {
  font-family: "Figtree", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.drawer-email {
  font-size: 0.8rem;
  color: var(--ink-dim);
  margin-top: 2px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.detail-item {
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}

.detail-item-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-dim);
  margin-bottom: 4px;
}

.detail-item-val {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.drawer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--white);
}

/* ── FORM ── */
.form-row {
  margin-bottom: 16px;
}

.form-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-dim);
  margin-bottom: 6px;
  display: block;
}

.form-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: 0.88rem;
  font-family: "Figtree", sans-serif;
  color: var(--ink);
  background: var(--white);
  outline: none;
  transition: border-color 0.15s;
}

.form-input:focus {
  border-color: var(--teal);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a95ad' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* ── PROMO CARD ── */
.promo-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  transition: box-shadow 0.15s;
}

.promo-card:hover {
  box-shadow: var(--shadow-sm);
}

.promo-code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border);
  padding: 5px 12px;
  border-radius: var(--r-sm);
}

.promo-info {
  flex: 1;
}

.promo-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}

.promo-meta {
  font-size: 0.75rem;
  color: var(--ink-dim);
}

.promo-stats {
  text-align: right;
}

.promo-uses {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.promo-uses-label {
  font-size: 0.7rem;
  color: var(--ink-dim);
}

/* ── QUESTION CARD ── */
.q-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 10px;
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
}

.q-card:hover {
  border-color: var(--amber);
  box-shadow: var(--shadow-sm);
}

.q-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.q-text {
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.5;
  font-weight: 500;
  flex: 1;
}

.q-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.q-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── CONTENT PAGE ROW ── */
.page-row {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
}

.exam-row {
  cursor: pointer;
}

.exam-row:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow-sm);
}

.page-row:hover {
  border-color: var(--teal);
}

.page-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-dim);
}

.page-row-info {
  flex: 1;
}

.page-row-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

.page-row-url {
  font-size: 0.72rem;
  color: var(--ink-dim);
  font-family: "JetBrains Mono", monospace;
}

.page-row-stats {
  display: flex;
  gap: 16px;
  align-items: center;
}

.page-stat {
  text-align: right;
}

.page-stat-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.page-stat-label {
  font-size: 0.65rem;
  color: var(--ink-dim);
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: var(--surface);
}

::-webkit-scrollbar-thumb {
  background: var(--border-hi);
  border-radius: 3px;
}

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r);
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(15, 31, 46, 0.3);
  z-index: 1200;
  transform: translateY(20px);
  opacity: 0;
  transition:
    opacity 0.25s,
    transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}

/* ── NEW PROMO FORM ── */
.collapsible {
  display: none;
}

.collapsible.open {
  display: block;
}

/* ── Q CHOICE ROWS ── */
.q-choice-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.q-choice-row input[type="radio"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ── EXTEND OPTS ── */
.extend-opt.active-extend {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
  background: rgba(6, 182, 212, 0.05);
}

/* -- EXAM TABS -- */
.exam-tab {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: 0.8rem;
  font-weight: 700;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--ink-dim);
  cursor: pointer;
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
}

.exam-tab:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.exam-tab.active-tab {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* -- IMPORT MODAL -- */
.import-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  border: none;
  background: none;
  font-family: "Figtree", sans-serif;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--ink-dim);
  cursor: pointer;
  border-bottom: 2px solid var(--border);
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
}

.import-tab.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 36px 24px;
  text-align: center;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  cursor: pointer;
}

.drop-zone:hover {
  border-color: var(--teal);
  background: rgba(6, 182, 212, 0.04);
}

.drop-zone-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(6, 182, 212, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: var(--teal);
}

/* -- EXAM EDITOR TABS -- */
.tab-btn {
  padding: 8px 16px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1.5px solid var(--border);
  border-bottom: none;
  background: var(--surface);
  color: var(--ink-dim);
  cursor: pointer;
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
  margin-right: 2px;
}

.tab-btn.active {
  background: var(--white);
  color: var(--ink);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  border: 1.5px solid var(--border);
  border-radius: 0 var(--r) var(--r) var(--r);
  padding: 20px;
  margin-bottom: 16px;
  background: var(--white);
}

.q-assign-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  margin-bottom: 6px;
  background: var(--white);
  transition: border-color 0.15s;
}

.q-assign-row:hover {
  border-color: var(--amber);
}

.q-assign-row.assigned {
  border-color: var(--amber);
  background: rgba(217, 119, 6, 0.03);
}

.q-assign-check {
  width: 16px;
  height: 16px;
  accent-color: var(--amber);
  flex-shrink: 0;
  cursor: pointer;
}

.q-assign-text {
  flex: 1;
  font-size: 0.82rem;
  color: var(--ink);
  line-height: 1.4;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.price-input-wrap {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}

.price-input-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-dim);
  margin-bottom: 6px;
}

.price-input {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  border: none;
  background: none;
  outline: none;
  width: 100%;
  font-family: "Figtree", sans-serif;
}

/* -- COLUMN TOGGLE & SORT -- */
.col-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.82rem;
  color: var(--ink);
  cursor: pointer;
}

.col-toggle-row input {
  accent-color: var(--teal);
  width: 14px;
  height: 14px;
}

.sort-arrow {
  font-size: 0.7rem;
  color: var(--ink-dim);
  margin-left: 2px;
}

th.sort-asc .sort-arrow {
  color: var(--teal);
}

th.sort-desc .sort-arrow {
  color: var(--teal);
}

/* Sticky last column for tables */
#usersTable th:last-child,
#usersTable td:last-child,
.tbleWraps th:last-child,
.tbleWraps td:last-child,
#instTable th:last-child,
#instTable td:last-child {
  position: sticky;
  right: 0;
  background: var(--surface);
  z-index: 2;
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.08);
}

.tbleWraps tr:hover td:last-child,
#usersTable tr:hover td:last-child,
#instTable tr:hover td:last-child {
  background: var(--surface-hover);
}

/* ── SUPPORT PANEL ── */
.support-ticket {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: var(--r-sm);
}

.support-ticket:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.03));
}

.support-ticket:last-child {
  border-bottom: none;
}

/* ── EMAIL TEMPLATES ── */
.email-template-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.email-template-row:last-child {
  border-bottom: none;
}

.email-template-row:hover {
  opacity: 0.85;
  cursor: pointer;
}

/* ── SETTINGS NAV ── */
.settings-nav-item {
  display: inline-block;
  width: auto;
  text-align: center;
  padding: 10px 20px;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--ink-dim);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
  transition:
    color 0.12s,
    border-color 0.12s;
  margin-bottom: 0;
  white-space: nowrap;
}

.settings-nav-item:hover {
  color: var(--ink);
  border-bottom-color: var(--border);
}

.settings-nav-item.active {
  color: var(--teal);
  font-weight: 700;
  border-bottom-color: var(--teal);
  background: none;
}

/* ── EMAIL EDITOR MODAL ── */
#emailEditorOverlay .drawer {
  width: 700px;
  max-width: 97vw;
}

/* ── TICKET MODAL ── */
#ticketOverlay .drawer {
  width: 560px;
  max-width: 97vw;
}

/* ── RED LIGHT ── */

/* ── ACCESSIBILITY / SYSTEM PATCHES ── */
:root {
  --surface-hover: var(--surface-hi);
  --focus-ring: 0 0 0 3px rgba(6, 182, 212, 0.18);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 1000;
  background: var(--navy);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 700;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.icon-btn:focus-visible,
.nav-item:focus-visible,
.btn:focus-visible,
.settings-nav-item:focus-visible,
.exam-tab:focus-visible,
.tab-btn:focus-visible,
.import-tab:focus-visible,
.drawer-close:focus-visible {
  box-shadow: var(--focus-ring);
}

.stat-val {
  font-family: "Figtree", sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-trend {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

.stat-trend.up {
  background: var(--green-light);
  color: var(--green);
}

.stat-trend.down {
  background: rgba(220, 38, 38, 0.08);
  color: var(--red);
}

.overlay[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}

.overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu-btn {
  display: none;
}

@media (max-width: 1200px) {
  .stats-row,
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .two-col,
  .three-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  body {
    overflow: auto;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 20px 50px rgba(15, 31, 46, 0.35);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .mobile-menu-btn {
    display: inline-flex;
  }

  .topbar {
    transform: translateZ(0);
    padding: 0 18px;
  }

  .content {
    padding: 20px;
  }

  .topbar-search {
    min-width: 0;
    width: min(320px, 42vw);
  }
}

@media (max-width: 768px) {
  .stats-row,
  .pricing-grid,
  .detail-grid,
  .form-row-2 {
    grid-template-columns: 1fr;
  }

  .section-hdr {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .section-hdr-right,
  .topbar-right {
    flex-wrap: wrap;
  }

  .topbar {
    transform: translateZ(0);
    height: auto;
    min-height: 60px;
    padding-block: 10px;
  }

  .topbar-right {
    justify-content: flex-end;
  }

  .content {
    padding: 16px;
  }

  .drawer {
    width: min(100vw - 16px, 720px);
    max-height: calc(100vh - 32px);
  }

  .page-row,
  .promo-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── DEEP REFACTOR SYSTEM LAYER ── */
.stack-sm {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stack-md {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cluster-sm {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cluster-md {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.panel-shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-muted {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}

.kbd-hint {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
}

.overlay.is-closing {
  opacity: 0;
  pointer-events: none;
}

/* ---- Added Admin Operational Components ---- */
.bulk-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
}

.review-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.review-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-hi);
}

.q-stat-btn {
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
}

.notif-rule-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.notif-rule-row:last-child {
  border-bottom: none;
}

.theme-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.theme-swatch:hover {
  transform: scale(1.15);
}

.theme-swatch.active {
  border-color: var(--ink);
  box-shadow:
    0 0 0 2px var(--white),
    0 0 0 4px var(--ink-mid);
}

.q-stat-btn.active {
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-sm);
}

.q-feedback {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 12px;
}

.q-feedback-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.q-feedback-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.q-feedback-user {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-mid);
  margin-right: 8px;
}

.q-feedback-date {
  font-size: 0.68rem;
  color: var(--ink-dim);
  font-family: "JetBrains Mono", monospace;
}

.q-feedback-text {
  font-size: 0.78rem;
  color: var(--ink);
  margin-top: 4px;
  font-style: italic;
  line-height: 1.5;
}

.qa-flag {
  background: #fff7ed;
  color: #9a3412;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  margin-right: 4px;
}

.badge-draft {
  background: #eef2ff;
  color: #3730a3;
  padding: 3px 6px;
  border-radius: 6px;
}

.badge-review {
  background: #fff7ed;
  color: #c2410c;
  padding: 3px 6px;
  border-radius: 6px;
}

.badge-published {
  background: #ecfdf5;
  color: #047857;
  padding: 3px 6px;
  border-radius: 6px;
}

.audit-table td,
.audit-table th {
  font-size: 13px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
}

.confirm-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--white);
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: 10px;
  display: none;
  z-index: 1100;
}

.confirm-modal.show {
  display: block;
}

/* Overlay scroll lock — lock the scrollable content, not body (avoids reflow) */
body.overlay-open .content {
  overflow-y: hidden;
}

/************ drop*****************/

.dropdowntoggle {
  color: var(--ink-dim);
  background: var(--white);
  padding: 5px 16px;
  border-radius: 5px;
  border-color: var(--border);
  box-shadow: none !important;
  cursor: pointer;
}

.dropdown,
.dropup {
  position: relative;
}

.open > .dropdown-menu {
  display: block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  z-index: 1000;
  display: none;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: var(--white);
  background-clip: padding-box;
  border: 1px solid var(--border);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  right: -1px;
}

.dropdown-menu li {
  display: list-item;
  unicode-bidi: isolate;
}

.dropdown-menu > li > a {
  display: block;
  padding: 10px 10px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.dropdown-menu > li:last-child a {
  border: none;
}

.disabled,
.disabled:hover {
  cursor: not-allowed;
  background: var(--surface);
  color: var(--ink-dim);
  border-color: var(--border);
}

.sidebar-nav .nav-item {
  text-decoration: none;
}

.sidebar-nav .dropdownManagerwrap .dropdownitemsList {
  position: relative;
}

.sidebar-nav .dropdownManagerwrap .minusdots {
  background: rgba(59, 70, 72, 0.5);
  border-radius: 65%;
  width: 10px;
  height: 10px;
  margin-left: 20px;
}

.sidebar-nav .dropdownManagerwrap.active > .dropdownitemsList > a {
  background-color: transparent;
}

.paginationWrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 6px;
}

.paginationWrap .navtotalCount {
  font-size: 0.78rem;
  color: var(--ink-dim);
}

.paginationWrap .ulpagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.paginationWrap .page-item {
  font-size: 0.78rem;
  color: var(--ink-dim);
}

.wrap-columntoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.wrap-columntoggle .wrapcolumleft {
  font-size: 0.78rem;
  color: var(--ink-dim);
}

.wrap-columntoggle .wrapcolumnright {
  position: relative;
  display: inline-block;
}

.wrap-columntoggle .columnbtntoggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.togglecolPanel {
  display: none;
  position: absolute;
  right: 0px;
  top: calc(100% + 6px);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 12px 10px;
  z-index: 50;
  min-width: 180px;
  box-shadow: var(--shadow);
}

.togglecolPanel.show {
  display: block;
}

.togglecolPanel .ulitms {
  display: block;
}

.togglecolPanel .titledrop {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-dim);
  margin-bottom: 8px;
}

.cursor-pointer {
  cursor: pointer;
}

.logoutbtn {
  color: #fff;
}

form.drawer-body-scrollar {
  overflow: auto;
}

.toggletrackbtn {
  width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}

.toggletrackbtn .trialThumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--white);
  border-radius: 50%;
  transition: left 0.2s;
}

.toggletrackbtn.active {
  width: 36px;
  height: 20px;
  background: var(--teal);
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}

.toggletrackbtn.active .trialThumb {
  position: absolute;
  top: 3px;
  left: 19px;
  width: 14px;
  height: 14px;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  transition: left 0.2s;
}

.drawhdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
  margin-top: 16px;
}

.btnremoveOption {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f30404;
}

.error-banner {
  display: none;
  background: var(--red-light);
  border: 1.5px solid #fecaca;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 0.82rem;
  color: var(--red);
  font-weight: 600;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.error-banner.show {
  display: flex;
}

.dropdown.topheandright {
  display: none;
}

.examThemeLbel {
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin-top: 6px;
}

.q-meta .badge-teal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(6, 182, 212, 0.1);
  color: var(--teal-mid);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
}

.q-meta .badge-green {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--green-light);
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
}

.settingwrappage .tab-section-content {
  display: none;
}

.settingwrappage .tab-section-content.active {
  display: block;
}

.pagehide {
  display: none;
}

.topwrapadd {
  padding: 6px 0;
}

.badge-professor {
  background: rgba(217, 119, 6, 0.1);
  color: var(--amber);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 0.68rem;
  margin-right: 6px;
}

.badge-institution {
  background: rgba(8, 145, 178, 0.1);
  color: var(--teal);
  border: 1px solid rgba(8, 145, 178, 0.25);
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 0.68rem;
  margin-right: 6px;
}

.settingsSection-admins .paginationWrap {
  padding-top: 23px;
}

.fullheadsec {
  flex: 1;
}

.error-full {
  font-size: 14px;
  color: var(--ink);
  text-align: center;
  width: 100%;
  color: var(--red);
  margin-top: 10px;
  display: none;
}

.error-full.show {
  display: block;
}

sapn.required {
  color: red;
  font-weight: bold;
}

.badge-danger {
  background: var(--red-light);
  color: var(--red);
}

.badge-blue {
  background: var(--teal-light);
  color: var(--teal-mid);
}

.tablePermission td span.badge {
  text-transform: capitalize;
}

div#activityFeed {
  height: auto;
}

/**
* question model wrap
*/
.questionmodelwrap .csvRowCount {
  font-size: 0.78rem;
  color: var(--ink-dim);
}

.questionmodelwrap .csvFileName {
  font-size: 0.78rem;
  color: var(--ink-dim);
}

.questionmodelwrap .expected-csv-column-wrap {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.questionmodelwrap .expected-csv-column-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-dim);
  margin-bottom: 8px;
}

.questionmodelwrap .expected-csv-column-contnt {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: var(--ink-mid);
  line-height: 1.8;
}

.questionmodelwrap .dropzonecnt {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.questionmodelwrap .csvPreview {
  margin-top: 14px;
}

.questionmodelwrap .csvPreviewicns {
  background: var(--green-light);
  border: 1.5px solid rgba(22, 163, 74, 0.2);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.questionmodelwrap span.csvFileName {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green);
}

.questionmodelwrap .drawer-header-title {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink-dim);
  margin-bottom: 4px;
}

.questionmodelwrap .drawer-header-subtitle {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  font-family: "Figtree", sans-serif;
}

.questionmodelwrap .drawer-body {
  padding-top: 20px;
}

.import-tab-wrap {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin: 0 24px;
}

input[disabled] {
  background: var(--border-hi);
}

.seoGoogwrap {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
  margin-top: 4px;
}

.seoTitleCount {
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin-top: 4px;
}

.seoDescCount {
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin-top: 4px;
}

.seoprogressbar {
  height: 4px;
  background: var(--surface-hi);
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}

.seoprogressbar .seoprogressitm {
  height: 100%;
  background: #f97316;
}

.seoGoogAreaPreview {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-dim);
  margin-bottom: 8px;
}

.seoGoogleTitlePreview {
  font-size: 0.88rem;
  color: #1a0dab;
  font-weight: 600;
  margin-bottom: 2px;
}

.seopreviewUrl {
  font-size: 0.8rem;
  color: #006621;
  margin-bottom: 4px;
}

.googleDescPreview {
  font-size: 0.8rem;
  color: var(--ink-dim);
}

.seowraps {
  padding: 10px 0px;
}

.dropdownManagerwrap {
  padding: 9px 0px;
  width: 100%;
  text-align: left;
}

.dropdownManagerwrap .drptitle {
  display: flex;
  padding: 10px 5px;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: 10px;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
  margin-bottom: 1px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.dropdownManagerwrap.active .drptitle,
.dropdownManagerwrap:hover .drptitle {
  color: #fff;
  background: rgba(6, 182, 212, 0.15);
}

.dropdownManagerwrap .dropdownitemsList {
  display: none;
}

.dropdownManagerwrap.active .dropdownitemsList {
  display: block;
}

.dropdownManagerwrap .icnsdrop {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a95ad' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 14px;
  margin-left: auto;
  width: 14px;
  transition: all 0.3s;
}

.dropdownManagerwrap.active i.icnsdrop {
  transform: rotate(180deg);
}

.wrapSettingsTab {
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
  display: flex;
  gap: 0;
}

.toggle-track {
  width: 32px;
  height: 18px;
  background: var(--teal);
  border-radius: 99px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}

.btn-red {
  background: var(--red);
  color: #fff;
}

.importfrmWrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.stopProcessingbtn {
  display: inline-flex;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
  border: none;
  font-family: "Figtree", sans-serif;
  background: var(--red);
  color: #fff;
}

.importBtnProgress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.processingLoader {
  width: 30px;
  height: 30px;
  border: 3px dotted #06b6d4;
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: processingRotation 2s linear infinite;
}

.processingLoader::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px dotted #d97706;
  border-style: solid solid dotted;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: processingRotationBack 1s linear infinite;
  transform-origin: center center;
}

@keyframes processingRotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes processingRotationBack {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.password-rules {
  width: 100%;
  display: block;
  padding-top: 5px;
  font-size: 10px;
  display: none;
}

.passwordrules .titleclvald {
  color: var(--ink-dim);
  font-size: 12px;
  padding-bottom: 5px;
  width: 100%;
  display: block;
}

.password-rules .clvald {
  color: red;
  font-size: 10px;
  display: block;
}

.password-rules .valid {
  color: green;
  display: none;
}

.password-rules.active {
  display: block;
}

.required {
  color: red;
  font-size: 10px;
}

.leftseleallwrap {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.leftseleallwrap .seleallwrap {
  padding: 5px 10px;
  font-size: 0.75rem;
  background: var(--white);
  color: var(--ink-mid);
  border: 1.5px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
  border: none;
}

.leftseleallwrap .seleallwrap input[type="checkbox"] {
  cursor: pointer !important;
}

.qBulkBarwrapRight {
  gap: 8px;
  align-items: center;
  display: flex;
}

#usersTable th:last-child {
  background: var(--white);
}

.actTdbtn {
  margin-right: 5px;
}

.actTdbtn.EditAcn {
  padding-left: 10px;
  padding-right: 10px;
  width: auto;
}

.leftseleallwrap .seleallwrap input.allselect {
  margin-top: 0 !important;
  accent-color: #fff !important;
}

.leftseleallwrap .seleallwrap input.allselect:checked {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

span#qBulkCount {
  font-size: 16px;
  color: var(--ink);
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 3px;
}

span#qBulkCount span.label {
  font-size: 0.8em;
  color: var(--ink-dim);
  font-weight: 400;
}

span.ChkPrstle {
  font-size: 0.78rem;
  color: var(--ink-dim);
  padding-right: 18px;
}

.columnformat {
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin-left: 4px;
}

span.badge {
  text-transform: capitalize;
}

.discountTypeToggle {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.dtFixedField .dtinputTile {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-right: none;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  padding: 9px 10px;
  font-size: 0.88rem;
  color: var(--ink-dim);
}

.dtFixedField {
  display: flex;
}

.dtFreeFieldwrap {
  background: var(--teal-pale);
  border: 1.5px solid var(--teal-border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: 0.78rem;
  color: var(--teal-mid);
}

.instEditorTitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}

.tab-btn {
  font-family: Figtree, sans-serif;
}

.instUserSubTabBtn {
  padding: 7px 18px;
  font-size: 0.78rem;
  font-weight: 700;
  border-top-width: medium;
  border-right-width: medium;
  border-bottom-width: medium;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-top-color: currentcolor;
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  border-image: initial;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink-dim);
  border-left: 1.5px solid var(--border);
  transition: background 0.15s;
}

.instUserSubTabBtn.active {
  background: var(--teal);
  color: var(--white);
}

.tabtitlewrapbilling {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  /* grid-template-columns: 1fr 1fr; */
}

.headertitlewrap .titlewrap {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink-dim);
  margin-bottom: 4px;
}

.headertitlewrap .subtitlewrap {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.aRangeBtn {
  background: var(--white);
  color: var(--ink-mid);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-sm);
  font-weight: 700;
  cursor: pointer;
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
  border: none;
  font-family: "Figtree", sans-serif;
  padding: 4px 10px;
  font-size: 0.75rem;
}

.aRangeBtn.active {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 2px 0 rgba(8, 145, 178, 0.4);
}

.aRangeBtn.active:hover {
  background: var(--teal-mid);
}

span.tdexm {
  border: 1px solid var(--border);
  padding: 3px 2px;
  display: flex;
  text-align: center;
}

.wrapdrwractions {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  background: var(--white);
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.filterselectinput {
  min-width: 200px;
}

.filterselectinput .multiselect {
  min-height: 31px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
}

.filterselectinput .multiselect-wrapper {
  min-height: 30px;
}

.filterselectinput .multiselect-single-label {
  font-size: 0.82rem;
  font-family: "Figtree", sans-serif;
  color: var(--ink);
}

.filter-bar {
  margin-top: 20px;
}

.emlTemp-stat-btn.active {
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-sm);
}

.usrsInstttnstble {
  border-collapse: collapse;
  display: block;
  overflow: auto;
  width: 100%;
  min-height: 240px;
}

.usrsInstttnstble .spnarls {
  white-space: nowrap;
  background: rgba(217, 119, 6, 0.1);
  color: var(--amber);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 700;
}

.usrsInstttnstble tr {
  border: 1px solid var(--border);
}

.wrapheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 15px;
}

.n-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.icon-milestone {
  background: var(--green-light);
  color: var(--green);
}

.icon-reminder {
  background: var(--purple-light);
  color: var(--purple);
}

.icon-account {
  background: var(--yellow-pale);
  color: var(--yellow-mid);
}

.icon-content {
  background: var(--teal-light);
  color: var(--teal-dark);
}

/*********** start form css *********************/
.rowFrmFldWrap {
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 20px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--teal) 0%, #12a0ae 100%);
}
.rowFrmFldWrap .form-label {
  color: #fff;
}
.rowFrmFldWrap .form-label .sub-form-label {
  display: block;
  color: #fff;
}
.columnFrmFldWrap .form-label {
  color: var(--navy-light) !important;
}

.rowFrmFldWrap .columnFrmFldWrap {
  width: 100%;
  padding: 20px;
  margin-bottom: 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.rowFrmFldWrap .sub-form-label {
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--ink-dim);
  text-transform: lowercase;
}

.rowFrmFldWrap .columnFrmFldWrap .btninputdelteFiled {
  color: var(--red);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 4px;
  flex-shrink: 0;
}

.rowFrmFldWrap .form-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rowFrmFldWrap .columnFrmFldWrap .form-label {
  display: flex;
  width: 100%;
  align-items: center;
  flex: 1;
  justify-content: space-between;
  flex-wrap: wrap;
}

.rowFrmFldWrap .columnFrmFldWrap .frmchckbxFld {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.rowFrmFldWrap .columnFrmFldWrap .frmchckbxFld label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
  color: var(--ink-dim);
  cursor: pointer;
  flex-shrink: 0;
}

.rowFrmFldWrap .columnFrmFldWrap .frmchckbxFld .inptcheckbox {
  margin: 0 0 0 2px;
}

.rowFrmFldWrap .rowinptfldot {
  width: 100%;
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}

.rowFrmFldWrap .rowinptfldot .fldotbtn {
  color: var(--red);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
}

.rowFrmFldWrap .rowinptfldot .inputfldot {
  flex: 1;
  min-width: 0;
}

.rowFrmFldWrap .inputfiledBtn {
  flex: 1;
  min-width: 0;
}
.rowtitlePgfm {
  margin: 10px 0 10px 0;
}

/*********** end form css *********************/

.reviewDuplicateBody {
  padding: 15px 16px;
  flex: 1;
  min-height: 132px;
  border-bottom: 1px solid var(--border);
}
.section-hdr .page-sub {
  font-size: 0.74rem;
  color: var(--ink-dim);
  margin-top: 4px;
}

.input-wrap {
  position: relative;
}

.input-wrap button.pw-toggle {
  position: absolute;
  right: 8px;
  top: 18px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.12s;
}
.input-wrap .pw-toggle:hover {
  color: var(--ink);
}

.headswraplabl .form-label {
  padding: 0 5px 0 0;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: capitalize;
  letter-spacing: 1.5px;
  color: var(--ink-dim);
  margin-bottom: 6px;
  display: inline-block;
}
.qbtnActn {
  cursor: pointer;
}
.invtwrap {
  padding: 2px 10px 10px 10px;
}
.invtwrap span.invtitmwrap {
  padding: 0 13px 0 0;
}

.formfilterrow {
  display: flex;
  max-width: 100%;
  min-width: 218px;
}

.topbar-right .notifwrap {
  position: relative;
}
.topbar-right .notif-badge {
  position: absolute;
  top: -9px;
  right: -10px;
  width: 24px;
  height: 23px;
  padding: 3px 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Unread notification row: subtle tint + left accent bar (not a heavy amber wash),
   with a proper hover state so rows still respond to the cursor. */
.table-wrap tr.tdUnRead {
  background: rgba(100, 116, 139, 0.08);
  box-shadow: inset 3px 0 0 0 #94a3b8;
  cursor: pointer;
}
.table-wrap tr.tdUnRead:hover {
  background: rgba(100, 116, 139, 0.14);
}
/* Read rows are also clickable now; give them the same hover affordance. */
.table-wrap tr.tdisread {
  cursor: pointer;
}
.table-wrap tr.tdisread:hover {
  background: var(--surface-hover);
}

input.multiselect-search {
  font-size: 0.82rem;
  font-family: "Figtree", sans-serif;
  color: var(--ink);
  border-radius: var(--r-sm);
  padding-left: 12px;
}

.multiselect-single-label {
  font-size: 0.82rem;
  font-family: "Figtree", sans-serif;
  color: var(--ink);
  padding-left: 12px;
}

.multiselect-wrapper {
  min-height: 31px !important;
}

.multiselect.multiexam-select-options {
  min-height: 31px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
}

span.multiselect-caret {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a95ad' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a95ad' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════════════════════════
   Same approach as the student and institute portals: the stylesheet is
   var()-driven, so dark mode is a re-map of the custom properties — not a second
   set of rules. `body.dark` is toggled by useDarkMode() (app/composables), which
   persists the choice in the admin_theme cookie.

   Palette is deliberately identical to the portals' --dm-* ramp, so an admin who
   flips to dark here and then opens the institute portal sees the same greys.

   Anything below the palette block is an exception: a rule that hardcoded a light
   colour and could not be expressed as a variable (pastel status badges, mostly).
   Every other surface in this file follows automatically. */

:root {
  --dm-bg: #090f1a;
  --dm-surface: #0c1825;
  --dm-card: #0f1f2e;
  --dm-border: #1a3045;
  --dm-ink: #e2edf4;
  --dm-ink-mid: #8aafc8;
  --dm-ink-dim: #506a82;
}

body.dark {
  --surface: var(--dm-bg);
  --surface-hi: var(--dm-surface);
  --surface-hover: var(--dm-surface);
  --white: var(--dm-card);
  --bg: var(--dm-bg);
  --border: var(--dm-border);
  --border-hi: #234156;
  --ink: var(--dm-ink);
  --ink-mid: var(--dm-ink-mid);
  --ink-dim: var(--dm-ink-mid);

  /* Tints must become translucent — a pale wash designed for white will glow on
     a dark card. Alpha over the card colour keeps the hue, kills the glare. */
  --teal-light: rgba(6, 182, 212, 0.12);
  --teal-pale: rgba(6, 182, 212, 0.08);
  --teal-border: rgba(6, 182, 212, 0.25);
  --emerald-pale: rgba(8, 145, 178, 0.12);
  --amber-pale: rgba(217, 119, 6, 0.12);
  --amber-light: rgba(217, 119, 6, 0.15);
  --yellow-pale: rgba(245, 196, 0, 0.12);
  --green-light: rgba(22, 163, 74, 0.15);
  --red-light: rgba(220, 38, 38, 0.15);
  --purple-light: rgba(124, 58, 237, 0.12);
  --rose-light: rgba(225, 29, 72, 0.15);
  --blue-light: rgba(37, 99, 235, 0.15);

  /* Deep badge inks → their light counterparts. amber-900 on amber-100 becomes
     amber-400 on translucent amber: same meaning, legible on a dark card. */
  --amber-ink: #fbbf24;
  --green-ink: #4ade80;
  --red-ink: #f87171;
  --rose-ink: #fb7185;
  --blue-ink: #93c5fd;

  --green-border: rgba(22, 163, 74, 0.35);
  --rose-border: rgba(225, 29, 72, 0.35);
  --blue-border: rgba(37, 99, 235, 0.35);

  /* Teal-tinted shadows read as haze on a dark background. Go neutral + deeper. */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 22px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 14px 52px rgba(0, 0, 0, 0.5);
  --shadow-teal: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* The sidebar is ink-dark in BOTH modes. Under body.dark, var(--ink) flips to a
   LIGHT colour, so anything painting the sidebar from --ink/--navy would turn it
   white. Pin it to the dark card colour instead. */
body.dark .sidebar {
  background: var(--dm-card);
}

/* ── Modals / drawers ────────────────────────────────────────────────────────
   The scrim is `rgb(15 31 46 / 76%)` — that is #0f1f2e, which is EXACTLY the dark
   card colour (--dm-card). So in dark mode the drawer was painted the same colour
   as the thing behind it: same fill, a navy shadow that vanishes on navy, and no
   border. The modal didn't disappear — it became invisible.

   Three separate things have to give it an edge back:
     1. the scrim goes pure black, so it can never match a surface colour;
     2. the drawer gets a real border (in light mode the shadow alone does this
        job; shadows do not read on dark);
     3. the shadow goes black and much deeper, for lift rather than colour. */
body.dark .overlay {
  background: rgba(0, 0, 0, 0.72);
}

body.dark .drawer {
  border: 1px solid var(--border-hi);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
}

body.dark .confirm-modal {
  border-color: var(--border-hi);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
}

/* The drawer sits ON the card colour, so its own inner chrome (close button,
   footer) must step AWAY from it — --surface is the page background, which is
   darker than the card and reads as a hole punched in the modal. Lift them. */
body.dark .drawer-close {
  background: var(--surface-hi);
  border: 1px solid var(--border);
}

/* Inputs are `background: var(--white)` — the same colour as the card they sit on,
   so in dark mode a text field has no fill of its own and reads as flat text with
   a faint hairline. On white that's fine (the border does the work); on dark the
   field needs to be SUNKEN — a shade below the card, the way it looks lifted above
   the page in light mode. */
body.dark .form-input,
body.dark .form-select,
body.dark textarea.form-input,
body.dark .confirm-input {
  background: var(--surface);
  border-color: var(--border);
}
body.dark .form-input:focus,
body.dark .form-select:focus,
body.dark .confirm-input:focus {
  border-color: var(--teal);
}
body.dark .form-input::placeholder,
body.dark textarea.form-input::placeholder {
  color: var(--ink-faint, #506a82);
}

/* Toasts float over everything; a navy shadow leaves them looking unanchored. */
body.dark .toast {
  border: 1px solid var(--border-hi);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}

/* ── Exceptions: rules that hardcode a light colour ─────────────────────────── */

/* Status badges: pastel bg + dark text. Invert to translucent bg + light text. */
body.dark .qa-flag,
body.dark .badge-review {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
}
body.dark .badge-draft {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}
body.dark .badge-published {
  background: rgba(22, 163, 74, 0.15);
  color: #4ade80;
}
body.dark .badge-amber {
  color: #fbbf24;
}
body.dark .badge-orange {
  background: rgba(234, 88, 12, 0.15);
  color: #fb923c;
}

/* Error banner border was #fecaca — a light-pink hairline, invisible on dark. */
body.dark .error-banner {
  border-color: rgba(220, 38, 38, 0.35);
}
body.dark .btnremoveOption {
  color: #f87171;
}

/* Google SERP preview mimics Google's own colours — it should keep looking like
   a search result, so only lift them enough to stay legible on dark. */
body.dark .seoGoogleTitlePreview {
  color: #8ab4f8;
}
body.dark .seopreviewUrl {
  color: #7cb98a;
}

/* Form controls the browser paints itself — without this the native widgets stay
   light and the caret/marks disappear. */
body.dark input,
body.dark textarea,
body.dark select,
body.dark .form-input,
body.dark .form-select {
  color-scheme: dark;
}

/* The multiselect caret is an inline SVG data-URI with the stroke baked in
   (%237a95ad = --ink-dim in light mode), so it can't follow a variable. Recolour
   it via the mask's background instead — the mask shape stays, the paint flips. */
body.dark span.multiselect-caret {
  background-color: var(--dm-ink-mid);
}

.dark .multiselect-search {
  background: var(--surface);
  border-color: var(--border);
}

.dark .multiselect {
  background: transparent;
}
.dark .multiselect-option {
  background: var(--surface);
  border-color: var(--border);
}
.no-pass-needed-prompt {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  background: var(--surface-2, #f8fafc);
}
.dark .no-pass-needed-prompt {
  background: var(--surface);
  border-color: var(--border);
}   


.qc-question-image.qc-question-image--admin-list img {
    max-height: 100px;
    margin-top: 10px;
    padding: 4px;
}

.qc-question-image.qc-question-image--admin-edit {
    margin-bottom: 20px;
}