/*
 * Application styles — Modern SaaS UI
 * Sidebar layout · Light indigo + Dark purple themes
 */

/* ─── Tokens: Light ──────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --brand-200: #c7d2fe;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;

  --surface:        #f4f6fb;
  --surface-card:   #ffffff;
  --surface-raised: #ffffff;
  --surface-hover:  #f1f5f9;

  --border:       #e4e8f0;
  --border-focus: #818cf8;

  --text-muted:   #8b97b1;
  --text-body:    #374151;
  --text-heading: #111827;

  --sidebar-bg:           #1a1740;
  --sidebar-border:       rgba(255,255,255,.07);
  --sidebar-brand-color:  #fff;
  --sidebar-link-color:   rgba(255,255,255,.55);
  --sidebar-link-hover:   rgba(255,255,255,.1);
  --sidebar-link-active:  rgba(255,255,255,.14);
  --sidebar-label-color:  rgba(255,255,255,.28);
  --sidebar-width:        240px;

  --green-bg:    #ecfdf5;
  --green-fg:    #059669;
  --green-dot:   #10b981;
  --green-border: #a7f3d0;

  --amber-bg:    #fffbeb;
  --amber-fg:    #92400e;
  --amber-dot:   #f59e0b;
  --amber-border: #fde68a;

  --bs-primary-rgb: 99,102,241;

  /* Alias used by legacy rules */
  --text: var(--text-body);

  /* Radii, shadows, focus, spacing rhythm */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 4px 18px rgba(15, 23, 42, 0.07);
  --shadow-md: 0 10px 36px rgba(15, 23, 42, 0.1);
  --shadow-card: var(--shadow-xs);
  --shadow-sidebar: 4px 0 32px rgba(0, 0, 0, 0.28);

  --focus-ring-width: 3px;
  --focus-ring: 0 0 0 var(--focus-ring-width) rgba(var(--bs-primary-rgb), 0.22);

  --main-pad-x: 1.75rem;
  --main-pad-y: 1.75rem;
  --main-max-width: 1440px;
}

/* ─── Tokens: Dark purple ────────────────────────────────────── */
[data-theme="dark"] {
  --brand-200: #a78bfa;
  --brand-400: #a78bfa;
  --brand-500: #8b5cf6;
  --brand-600: #7c3aed;
  --brand-700: #6d28d9;

  --surface:        #0e0b1c;
  --surface-card:   #16112b;
  --surface-raised: #1e1840;
  --surface-hover:  #1e1840;

  --border:       rgba(139,92,246,.2);
  --border-focus: #a78bfa;

  --text-muted:   #7b6fa8;
  --text-body:    #c4b5fd;
  --text-heading: #ede9fe;

  --sidebar-bg:          #0a0817;
  --sidebar-border:      rgba(139,92,246,.13);
  --sidebar-brand-color: #ede9fe;
  --sidebar-link-color:  rgba(196,181,253,.5);
  --sidebar-link-hover:  rgba(139,92,246,.2);
  --sidebar-link-active: rgba(139,92,246,.3);
  --sidebar-label-color: rgba(139,92,246,.35);

  --green-bg:    rgba(5,150,105,.14);
  --green-fg:    #34d399;
  --green-dot:   #34d399;
  --green-border: rgba(52,211,153,.25);

  --amber-bg:    rgba(245,158,11,.1);
  --amber-fg:    #fbbf24;
  --amber-dot:   #fbbf24;
  --amber-border: rgba(251,191,36,.2);

  --bs-primary-rgb: 139,92,246;
}

/* ─── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--surface);
  color: var(--text-body);
  height: 100%;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

h1,h2,h3,h4,h5,h6 {
  color: var(--text-heading);
  letter-spacing: -0.025em;
}

a { color: var(--brand-500); }

/* ─── Shell ──────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ─── Sidebar ────────────────────────────────────────────────── */
.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  z-index: 200;
  overflow-y: auto;
  transition: background 0.3s ease;
}

/* Brand */
.sidebar-brand {
  height: 56px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid var(--sidebar-border);
}

.brand {
  text-decoration: none;
  color: var(--sidebar-brand-color);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.brand:hover { color: var(--brand-400); }
.brand .fw-bold { font-size: 0.9375rem; letter-spacing: -0.3px; }

.brand-icon {
  width: 30px; height: 30px;
  background: rgba(255,255,255,.1);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  color: var(--brand-400);
  flex-shrink: 0;
}

/* CTA */
.sidebar-cta { padding: 0.875rem 0.75rem 0.5rem; }

.btn-new-post {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 1rem;
  background: var(--brand-500);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 9px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  letter-spacing: 0.01em;
}
.btn-new-post:hover {
  background: var(--brand-600);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--bs-primary-rgb),.4);
}
.btn-new-post i { font-size: 0.95rem; }

/* Nav */
.sidebar-nav { padding: 0.625rem 0.75rem 0; flex: 1; }

.sidebar-section-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sidebar-label-color);
  margin-bottom: 0.3rem;
  padding-left: 0.5rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sidebar-link-color);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
  line-height: 1;
  margin-bottom: 1px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.sidebar-link i { font-size: 0.9375rem; flex-shrink: 0; }
.sidebar-link span:first-of-type { flex: 1; }
.sidebar-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #ef4444; color: #fff;
  font-size: 0.65rem; font-weight: 700; border-radius: 9px;
  line-height: 1; margin-left: auto;
}
.sidebar-link:hover { background: var(--sidebar-link-hover); color: rgba(255,255,255,.9); }
.sidebar-link.active { background: var(--sidebar-link-active); color: #fff; }
[data-theme="dark"] .sidebar-link:hover,
[data-theme="dark"] .sidebar-link.active { color: var(--brand-200); }

/* ─── Main area ──────────────────────────────────────────────── */
.app-main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  transition: background 0.3s ease;
}

.main-content {
  flex: 1;
  padding: 2rem 2.25rem;
  width: 100%;
}

/* ─── Mobile topbar ──────────────────────────────────────────── */
.mobile-topbar {
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-border);
  position: sticky;
  top: 0;
  z-index: 150;
  height: 52px;
}
.mobile-topbar .brand { color: #fff; }
.mobile-topbar .brand:hover { color: var(--brand-400); }

.btn-icon {
  background: rgba(255,255,255,.1);
  border: none;
  color: rgba(255,255,255,.75);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 1.1rem;
  line-height: 1;
}
.btn-icon:hover { background: rgba(255,255,255,.18); color: #fff; }

.sidebar-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 190;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.sidebar-overlay.open { opacity: 1; pointer-events: all; }

@media (max-width: 991.98px) {
  .app-shell { height: auto; overflow: visible; }
  .app-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh;
    transform: translateX(-100%);
    box-shadow: 4px 0 32px rgba(0,0,0,.3);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  }
  .app-sidebar.open { transform: translateX(0); }
  .app-main { overflow: visible; }
  .main-content { padding: 1.25rem 1rem; }
}

/* ─── Page header ────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.75rem;
}

.page-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 0.2rem;
  letter-spacing: -0.03em;
}

.page-subtitle {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}

/* ─── Posts grid ─────────────────────────────────────────────── */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* ─── Post card ──────────────────────────────────────────────── */
.post-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.3s ease;
  position: relative;
}
.post-card:hover {
  box-shadow: 0 8px 32px rgba(var(--bs-primary-rgb),.14);
  transform: translateY(-2px);
  border-color: var(--brand-200);
}

.post-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem 0;
}

.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.published { background: var(--green-dot); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.status-dot.draft     { background: var(--amber-dot); box-shadow: 0 0 0 3px rgba(245,158,11,.15); }

.post-card-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.post-card:hover .post-card-actions { opacity: 1; }

.card-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  padding: 0;
}
.card-action-btn:hover {
  background: var(--surface-hover);
  color: var(--brand-500);
}
.card-action-btn.danger:hover {
  background: rgba(239,68,68,.1);
  color: #ef4444;
}

.post-card-body {
  padding: 0.625rem 1rem 0.875rem;
  flex: 1;
}

.post-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}

.post-card-link {
  color: var(--text-heading);
  text-decoration: none;
}
.post-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.post-card-link:hover { color: var(--brand-500); }

.post-card-excerpt {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem 0.875rem;
  border-top: 1px solid var(--border);
  gap: 0.5rem;
}

/* ─── Status badges ──────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 99px;
  padding: 0.25em 0.65em;
}
.status-badge.published {
  background: var(--green-bg);
  color: var(--green-fg);
  border: 1px solid var(--green-border);
}
.status-badge.draft {
  background: var(--amber-bg);
  color: var(--amber-fg);
  border: 1px solid var(--amber-border);
}

.post-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ─── Show page ──────────────────────────────────────────────── */
.show-page { width: 100%; }

.show-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.show-actions { display: flex; gap: 0.5rem; }

.show-article {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem;
  transition: background 0.3s ease;
}

.show-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.show-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--text-heading);
  margin: 0 0 1.5rem;
}

.show-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 1.75rem;
}

.show-body {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-body);
}
.show-body p { margin-bottom: 1.1rem; }

/* ─── Buttons ────────────────────────────────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  border-radius: 7px;
  transition: background 0.12s, color 0.12s;
}
.back-link:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-ghost:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
  border-color: var(--border-focus);
}
.btn-ghost.danger {
  color: #ef4444;
  border-color: rgba(239,68,68,.25);
}
.btn-ghost.danger:hover {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.4);
}

.btn-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--brand-500);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.55rem 1.25rem;
  border-radius: 9px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  letter-spacing: 0.01em;
}
.btn-primary-action:hover {
  background: var(--brand-600);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--bs-primary-rgb),.4);
}
.btn-primary-action:active { transform: translateY(0); }

.page-header-actions .btn-primary-action {
  font-size: 0.8125rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid transparent;
}

.btn-secondary-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--text-heading);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-secondary-action:hover {
  background: var(--surface-hover);
  border-color: var(--border-focus);
  color: var(--text-heading);
}
.page-header-actions .btn-secondary-action {
  font-size: 0.8125rem;
  padding: 0.4rem 0.75rem;
}

.btn-sm-action,
.admin-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 7px;
  border: 1px solid var(--border);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-sm-action:hover,
.admin-btn-sm:hover {
  background: var(--surface-hover);
  color: var(--brand-500);
  border-color: var(--brand-500);
}
.btn-sm-action--status {
  cursor: default;
  pointer-events: none;
}
.btn-sm-action--status:hover {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}

.admin-btn-sm.admin-btn-danger {
  color: #dc2626;
  border-color: #fca5a5;
}
.admin-btn-sm.admin-btn-danger:hover {
  background: #fee2e2;
  color: #b91c1c;
}
.admin-btn-sm.admin-btn-approve {
  color: #059669;
  border-color: #6ee7b7;
}
.admin-btn-sm.admin-btn-approve:hover {
  background: #d1fae5;
  color: #047857;
  border-color: #059669;
}

/* ─── Editor / Form page ─────────────────────────────────────── */
.editor-page { width: 100%; }

.editor-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.editor-title-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
}

.editor-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  transition: background 0.3s ease;
}

/* ─── Form ───────────────────────────────────────────────────── */
.modern-form { display: flex; flex-direction: column; gap: 1.5rem; }

.form-field { display: flex; flex-direction: column; gap: 0.35rem; }

.field-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-heading);
  letter-spacing: 0.01em;
}

.field-input {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--text-body);
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.3s;
  outline: none;
  resize: none;
}
.field-input::placeholder { color: var(--text-muted); }
.field-input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb),.15);
  background: var(--surface-card);
}
.field-input.is-error { border-color: #ef4444; }
.field-input-xl { font-size: 1.125rem; font-weight: 600; }
.field-textarea { min-height: 80px; line-height: 1.7; }
.field-textarea-lg { min-height: 200px; }

select.field-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%238b97b1' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

input[type="date"].field-input {
  min-height: 2.75rem;
  cursor: pointer;
}

input[type="date"].field-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.75;
  filter: invert(0.35);
}

input[type="date"].field-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.field-error {
  font-size: 0.75rem;
  color: #ef4444;
  font-weight: 500;
}

/* Token tag multi-select (admin book lessons / topics) */
.token-tags-hint { margin-bottom: 0.35rem; }
.token-tags__box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.5rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.token-tags__box:focus-within {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
  background: var(--surface-card);
}
.token-tags__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.token-tags__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem 0.15rem 0.55rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-heading);
  background: rgba(var(--bs-primary-rgb), 0.12);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
  border-radius: 999px;
}
.token-tags__chip-label { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token-tags__chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.token-tags__chip-remove:hover { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.token-tags__query {
  flex: 1 1 8rem;
  min-width: 6rem;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0.35rem 0.25rem !important;
}
.token-tags__suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  z-index: 40;
  max-height: 12rem;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
}
.token-tags__suggestion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  color: var(--text-body);
  cursor: pointer;
}
.token-tags__suggestion:hover,
.token-tags__suggestion:focus {
  background: var(--surface-hover);
  outline: none;
}

/* Toggle / switch */
.form-field-inline {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  transition: background 0.3s;
}

.toggle-input {
  width: 36px; height: 20px;
  border-radius: 99px;
  border: 2px solid var(--border);
  appearance: none;
  -webkit-appearance: none;
  background: var(--border);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.2s, border-color 0.2s;
}
.toggle-input::after {
  content: '';
  position: absolute;
  width: 13px; height: 13px;
  background: #fff;
  border-radius: 50%;
  top: 1.5px; left: 1.5px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-input:checked {
  background: var(--brand-500);
  border-color: var(--brand-500);
}
.toggle-input:checked::after { transform: translateX(16px); }

.toggle-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-heading);
  display: block;
  cursor: pointer;
}
.toggle-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0.15rem 0 0;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

/* ─── Form section blocks ────────────────────────────────────── */
.form-section-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.form-section-label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: -.25rem;
}
.form-section-hint {
  font-size: .8125rem;
  color: var(--text-muted);
  margin: -.25rem 0 0;
}

/* ─── Nested topics ──────────────────────────────────────────── */
.topics-container {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.topic-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  transition: opacity .2s ease, transform .2s ease;
}
.topic-row--deleted {
  opacity: 0;
  transform: translateX(6px);
}

.topic-input-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.topic-name-input {
  height: 40px;
}

.topic-remove-btn {
  flex-shrink: 0;
  width: 36px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--text-muted);
  cursor: pointer;
  font-size: .8125rem;
  transition: background .15s, color .15s, border-color .15s;
  padding: 0;
}
.topic-remove-btn:hover {
  background: rgba(239,68,68,.08);
  color: #ef4444;
  border-color: rgba(239,68,68,.3);
}

.btn-add-topic {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .875rem;
  border-radius: 8px;
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: .8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  align-self: flex-start;
}
.btn-add-topic:hover {
  border-color: var(--brand-400);
  color: var(--brand-500);
  background: rgba(99,102,241,.05);
}
.btn-add-topic i { font-size: .875rem; }

/* Error banner */
.form-error-banner {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 10px;
  color: #dc2626;
  font-size: 0.875rem;
}
.form-error-banner i { flex-shrink: 0; margin-top: 1px; }

/* ─── Alerts ─────────────────────────────────────────────────── */
.alert-success {
  background: var(--green-bg) !important;
  border-color: var(--green-border) !important;
  color: var(--green-fg) !important;
  border-radius: 10px;
  font-size: 0.875rem;
}
.alert-danger {
  background: rgba(239,68,68,.08) !important;
  border-color: rgba(239,68,68,.22) !important;
  color: #dc2626 !important;
  border-radius: 10px;
  font-size: 0.875rem;
}

/* ─── Empty state ────────────────────────────────────────────── */
.empty-state {
  padding: 4rem 2rem;
  text-align: center;
  color: var(--text-muted);
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  background: var(--surface-card);
  transition: background 0.3s;
}
.empty-state-icon {
  width: 56px; height: 56px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  color: var(--brand-400);
  margin: 0 auto 1.25rem;
}
.empty-state h5 {
  color: var(--text-heading);
  font-weight: 700;
  margin-bottom: 0.35rem;
  font-size: 1rem;
}
.empty-state p {
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

/* ─── App top bar ────────────────────────────────────────────── */
.app-topbar {
  height: 56px;
  padding: 0 1.75rem;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.app-topbar-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; }
.app-topbar-title {
  font-size: .9375rem; font-weight: 600; color: var(--text-heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-topbar-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.btn-sm-action {
  font-size: .8rem !important;
  padding: .32rem .8rem !important;
  border-radius: 7px !important;
  gap: .3rem !important;
}

/* ─── User layout: content area & flash ─────────────────────── */
.app-content {
  flex: 1;
  padding: 1.75rem 2rem;
  min-width: 0;
}
@media (max-width: 991.98px) {
  .app-content { padding: 1.25rem 1rem; }
}

.flash {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 2rem;
  font-size: .85rem;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  flex-shrink: 0;
}
.flash-notice { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.flash-alert  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
[data-theme="dark"] .flash-notice { background: rgba(52,211,153,.1);  color: #34d399; border-color: rgba(52,211,153,.2); }
[data-theme="dark"] .flash-alert  { background: rgba(239,68,68,.1);   color: #f87171; border-color: rgba(239,68,68,.2);  }

.topbar-search-form { flex: 1; max-width: 480px; }

.topbar-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.topbar-search-icon {
  position: absolute;
  left: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  pointer-events: none;
}

.topbar-search-input {
  width: 100%;
  padding: 0.45rem 2.25rem 0.45rem 2.25rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.8125rem;
  color: var(--text-body);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.3s;
}
.topbar-search-input::placeholder { color: var(--text-muted); }
.topbar-search-input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb),.12);
  background: var(--surface-card);
}

.topbar-search-clear {
  position: absolute;
  right: 0.625rem;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  font-size: 0.625rem;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.topbar-search-clear:hover {
  background: var(--brand-500);
  color: #fff;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.topbar-btn:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
  border-color: var(--border-focus);
}

/* ─── Page subtitle link ─────────────────────────────────────── */
.page-subtitle-link {
  color: var(--brand-500);
  text-decoration: none;
  font-weight: 500;
}
.page-subtitle-link:hover { text-decoration: underline; }

/* ─── Turbo progress bar ─────────────────────────────────────── */
.turbo-progress-bar {
  background: var(--brand-400);
  height: 3px;
}

/* ─── Auth pages ─────────────────────────────────────────────── */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
  padding: 2rem 1rem;
}
.auth-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.auth-header {
  text-align: center;
  margin-bottom: 2rem;
}
.auth-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--brand-600);
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.auth-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: .25rem;
}
.auth-subtitle {
  color: var(--text-muted);
  font-size: .9rem;
  margin-bottom: 0;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form-group { display: flex; flex-direction: column; gap: .375rem; }
.form-label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-heading);
}
.form-control {
  border-color: var(--border);
  border-radius: 8px;
  padding: .625rem .875rem;
  font-size: .9375rem;
  background: var(--surface);
  color: var(--text-body);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
  background: var(--surface-card);
  color: var(--text-body);
}
.btn-auth {
  padding: .75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  margin-top: .5rem;
}
.auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: .9rem;
  color: var(--text-muted);
}
.auth-link {
  color: var(--brand-500);
  font-weight: 500;
  text-decoration: none;
}
.auth-link:hover { text-decoration: underline; color: var(--brand-600); }

/* ─── Sidebar auth elements ──────────────────────────────────── */
.sidebar-auth-links { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .25rem; }

/* ─── Topbar auth elements ───────────────────────────────────── */
.topbar-user-email {
  font-size: .8125rem;
  color: var(--text-muted);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-btn-primary {
  background: var(--brand-600);
  color: #fff;
  border-color: var(--brand-600);
}
.topbar-btn-primary:hover {
  background: var(--brand-700);
  color: #fff;
  border-color: var(--brand-700);
}
.topbar-logout-btn form { margin: 0; }

/* ─── Topbar icon-only theme button ─────────────────────────── */
.topbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: .9375rem;
  cursor: pointer;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.topbar-icon-btn:hover {
  background: var(--surface-hover);
  color: var(--text-body);
}

/* ─── Topbar user dropdown trigger ──────────────────────────── */
.topbar-user-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .6rem .3rem .3rem;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  max-width: 240px;
}
.topbar-user-btn:hover { background: var(--surface-hover); }
.topbar-user-btn[aria-expanded="true"] {
  background: var(--surface-hover);
  border-color: var(--brand-400);
}
.topbar-user-email-text {
  font-size: .8125rem;
  color: var(--text-muted);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chevron {
  font-size: .625rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform .2s;
}
.topbar-user-btn[aria-expanded="true"] .user-chevron { transform: rotate(180deg); }

.topbar-user-btn--compact {
  padding: .25rem;
  gap: 0;
}

/* ─── User avatar circle (initials) ─────────────────────────── */
.user-avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: .02em;
  user-select: none;
}
.user-avatar-lg {
  width: 38px;
  height: 38px;
  font-size: .875rem;
}

/* ─── App dropdown panel ─────────────────────────────────────── */
.app-dropdown {
  min-width: 220px;
  padding: .375rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-card);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  margin-top: .375rem !important;
}
[data-theme="dark"] .app-dropdown { box-shadow: 0 8px 24px rgba(0,0,0,.35); }

.app-dropdown-header {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  pointer-events: none;
  user-select: none;
}
.app-dropdown-name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-heading);
  line-height: 1.3;
}

.app-dropdown-email {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-heading);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-dropdown-role {
  font-size: .6875rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.app-dropdown .dropdown-divider {
  border-color: var(--border);
  margin: .25rem 0;
}

.app-dropdown-item {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  padding: .45rem .625rem !important;
  border-radius: 8px !important;
  font-size: .875rem;
  color: var(--text-body) !important;
  transition: background .12s, color .12s;
}
.app-dropdown-item:hover { background: var(--surface-hover) !important; color: var(--text-heading) !important; }
.app-dropdown-item i { width: 1rem; text-align: center; font-size: .875rem; }

.app-dropdown-danger { color: #dc2626 !important; }
.app-dropdown-danger:hover { background: rgba(239,68,68,.08) !important; color: #dc2626 !important; }
[data-theme="dark"] .app-dropdown-danger { color: #f87171 !important; }
[data-theme="dark"] .app-dropdown-danger:hover { background: rgba(239,68,68,.12) !important; color: #f87171 !important; }

.dropdown-form { margin: 0; padding: 0; }
.dropdown-form .app-dropdown-item {
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

/* ─── Auth layout ────────────────────────────────────────────── */
.auth-body {
  background: var(--surface);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.auth-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.auth-layout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-card);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  color: var(--text-heading);
}
.auth-brand:hover { color: var(--brand-600); }
.auth-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--brand-600);
  color: #fff;
  font-size: 1.1rem;
}
.auth-brand-name {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
}
.auth-theme-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .4rem .6rem;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background .15s, color .15s, border-color .15s;
}
.auth-theme-btn:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
  border-color: var(--border-focus);
}
.auth-layout-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}
.auth-layout-footer {
  text-align: center;
  padding: 1.25rem;
  font-size: .8125rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

/* ─── Auth split layout ──────────────────────────────────────── */
.auth-split {
  display: flex;
  min-height: 100vh;
}

/* ── Left infographic panel ── */
.auth-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 420px;
  flex-shrink: 0;
  padding: 2rem 2.25rem 2.5rem;
  background: linear-gradient(155deg, #3730a3 0%, #4f46e5 45%, #7c3aed 100%);
  color: #fff;
}
@media (max-width: 900px) { .auth-panel { display: none; } }

.auth-panel-topbar {
  display: flex;
  align-items: center;
}
.auth-panel-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.auth-panel .auth-brand-icon {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.auth-panel .auth-brand-name { color: #fff; }

/* Hero */
.auth-panel-hero {}
.auth-panel-headline {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: .75rem;
}
.auth-panel-sub {
  font-size: .9375rem;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  margin: 0;
}

/* Stat chips */
.auth-panel-stats {
  display: flex;
  gap: .75rem;
}
.auth-stat-chip {
  flex: 1;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 1rem;
  backdrop-filter: blur(6px);
}
.auth-stat-num {
  display: block;
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: .25rem;
}
.auth-stat-label {
  font-size: .75rem;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Bar chart */
.auth-panel-chart {}
.auth-chart-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255,255,255,.55);
  margin-bottom: .75rem;
}
.auth-bars {
  display: flex;
  align-items: flex-end;
  gap: .375rem;
  height: 72px;
}
.auth-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  flex: 1;
}
.auth-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.auth-bar {
  width: 100%;
  height: 0;
  border-radius: 4px 4px 0 0;
  background: rgba(255,255,255,.35);
  transition: height .55s cubic-bezier(.4,0,.2,1), background .2s;
}
.auth-bar:hover { background: rgba(255,255,255,.65); }
.auth-bar--animate { height: var(--bar-pct, 0%); }
.auth-bar-day {
  font-size: .65rem;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Feature list */
.auth-features {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  margin-top: auto;
}
.auth-feature {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
}
.auth-feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.auth-feature-title {
  font-size: .875rem;
  font-weight: 600;
  margin: 0 0 .125rem;
}
.auth-feature-desc {
  font-size: .8125rem;
  color: rgba(255,255,255,.6);
  margin: 0;
  line-height: 1.5;
}

/* Decorative blobs */
.auth-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: .18;
}
.auth-blob-1 {
  width: 300px;
  height: 300px;
  background: #a5b4fc;
  top: -80px;
  right: -80px;
}
.auth-blob-2 {
  width: 220px;
  height: 220px;
  background: #c4b5fd;
  bottom: 60px;
  left: -60px;
}

/* ── Right form panel ── */
.auth-form-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  min-height: 100vh;
}
.auth-form-panel-topbar {
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem 1.75rem;
}
.auth-form-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN AUTH LAYOUT
   ═══════════════════════════════════════════════════════════════════ */

.admin-auth-body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--surface);
  font-family: 'Inter', sans-serif;
}

.admin-auth-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Left branding panel ── */
.admin-auth-panel {
  width: 420px;
  flex-shrink: 0;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 60%, #1e1b4b 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

[data-theme="dark"] .admin-auth-panel {
  background: linear-gradient(145deg, #020617 0%, #0f172a 60%, #1e1b4b 100%);
}

.admin-auth-panel-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: .12;
}
.admin-auth-blob-1 {
  width: 320px;
  height: 320px;
  background: #6366f1;
  top: -100px;
  right: -80px;
}
.admin-auth-blob-2 {
  width: 240px;
  height: 240px;
  background: #a78bfa;
  bottom: 60px;
  left: -60px;
}

.admin-auth-panel-content {
  position: relative;
  z-index: 1;
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
}

/* Logo */
.admin-auth-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.admin-auth-logo-icon {
  width: 40px;
  height: 40px;
  background: rgba(99,102,241,.25);
  border: 1px solid rgba(99,102,241,.4);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a5b4fc;
  font-size: 1.1rem;
}
.admin-auth-logo-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: -.01em;
}

/* Hero */
.admin-auth-hero {
  flex: 1;
}
.admin-auth-headline {
  font-size: 2.6rem;
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 .9rem;
}
.admin-auth-sub {
  font-size: .93rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

/* Feature list */
.admin-auth-features {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-bottom: 1rem;
}
.admin-auth-feature {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}
.admin-auth-feature-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: rgba(99,102,241,.18);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #818cf8;
  font-size: .95rem;
  margin-top: 1px;
}
.admin-auth-feature-title {
  font-size: .875rem;
  font-weight: 600;
  color: #e2e8f0;
  margin: 0 0 .15rem;
}
.admin-auth-feature-desc {
  font-size: .8rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* ── Right form panel ── */
.admin-auth-form-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  min-height: 100vh;
}
.admin-auth-topbar {
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem 1.75rem;
}
.admin-auth-theme-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  transition: background .15s, color .15s;
}
.admin-auth-theme-btn:hover {
  background: var(--border);
  color: var(--text);
}
.admin-auth-form-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}
.admin-auth-footer {
  text-align: center;
  padding: 1.25rem;
  font-size: .78rem;
  color: var(--text-muted);
}

/* ── Admin auth card ── */
.admin-auth-card {
  width: 100%;
  max-width: 400px;
}
.admin-auth-card-header {
  text-align: center;
  margin-bottom: 1.75rem;
}
.admin-auth-card-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.35rem;
  margin: 0 auto 1rem;
  box-shadow: 0 4px 14px rgba(79,70,229,.35);
}
.admin-auth-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .35rem;
  letter-spacing: -.02em;
}
.admin-auth-card-subtitle {
  font-size: .875rem;
  color: var(--text-muted);
  margin: 0;
}

/* Alerts */
.admin-auth-alert {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 8px;
  padding: .75rem 1rem;
  font-size: .875rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.admin-auth-notice {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  border-radius: 8px;
  padding: .75rem 1rem;
  font-size: .875rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
[data-theme="dark"] .admin-auth-alert {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.3);
  color: #fca5a5;
}
[data-theme="dark"] .admin-auth-notice {
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.25);
  color: #86efac;
}

/* Form fields */
.admin-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.admin-form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
}
.admin-form-input {
  height: 42px;
  padding: 0 .875rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .9rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.admin-form-input::placeholder { color: var(--text-muted); }
.admin-form-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
[data-theme="dark"] .admin-form-input {
  background: var(--surface-alt);
}

/* Submit button */
.admin-auth-submit {
  display: block;
  width: 100%;
  height: 44px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: .9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(79,70,229,.3);
  margin-top: .25rem;
}
.admin-auth-submit:hover {
  opacity: .92;
  box-shadow: 0 6px 20px rgba(79,70,229,.38);
}
.admin-auth-submit:active {
  transform: translateY(1px);
}

/* Back link */
.admin-auth-back {
  text-align: center;
  margin-top: 1.25rem;
}
.admin-auth-back-link {
  font-size: .8125rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s;
}
.admin-auth-back-link:hover {
  color: #6366f1;
}

/* Responsive */
@media (max-width: 768px) {
  .admin-auth-panel { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN DATA TABLE
   ═══════════════════════════════════════════════════════════════════ */

.admin-table-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: background .3s ease, border-color .3s ease;
}

/* ── Table base ── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

/* Header */
.data-table thead tr {
  background: var(--surface-hover);
  border-bottom: 1px solid var(--border);
}
.data-table thead th {
  padding: 10px 16px;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  white-space: nowrap;
  border: none;
  background: transparent;
}
.data-table thead th.col-right,
.data-table td.col-right { text-align: right; }
.data-table td.col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* Curriculum books: align book + lesson question counts in one column */
.curriculum-books-table,
.curriculum-books-table .book-lessons-table {
  table-layout: fixed;
}
.curriculum-books-table col.col-name { width: 34%; }
.curriculum-books-table col.col-publisher { width: 18%; }
.curriculum-books-table col.col-author { width: 18%; }
.curriculum-books-table col.col-count { width: 12%; }
.curriculum-books-table col.col-actions { width: 18%; }

.book-details-cell { background: var(--surface-hover); }
.book-lessons-table tbody tr { border-bottom: 1px solid var(--border); }
.book-lessons-table tbody tr:last-child { border-bottom: none; }
.book-lessons-table tbody tr:hover { background: transparent; }
.book-lesson-name { padding-left: 2.75rem; }

/* Body rows */
.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .1s ease;
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-hover); }

/* Cells */
.data-table td {
  padding: 13px 16px;
  vertical-align: middle;
  border: none;
  color: var(--text-body);
}

/* Name cell */
.cell-name {
  font-weight: 600;
  color: var(--text-heading);
  font-size: .875rem;
}

/* Meta cell (dates, counts shown as plain text) */
.cell-meta {
  font-size: .8125rem;
  color: var(--text-muted);
}

/* ── Inline count chip ── */
.tbl-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 11px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
}
a.tbl-count-link {
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
a.tbl-count-link:hover {
  background: var(--brand-50, #eff6ff);
  border-color: var(--brand-500);
  color: var(--brand-600, #2563eb);
}

/* ── Action buttons ── */
.tbl-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.tbl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--text-muted);
  font-size: .875rem;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  line-height: 1;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.tbl-btn:hover {
  background: rgba(99,102,241,.08);
  color: var(--brand-600);
  border-color: rgba(99,102,241,.25);
  box-shadow: 0 1px 4px rgba(99,102,241,.1);
}
[data-theme="dark"] .tbl-btn:hover {
  background: rgba(139,92,246,.15);
  color: var(--brand-400);
  border-color: rgba(139,92,246,.35);
}
.tbl-btn.danger:hover {
  background: rgba(239,68,68,.08);
  color: #ef4444;
  border-color: rgba(239,68,68,.3);
  box-shadow: 0 1px 4px rgba(239,68,68,.1);
}

/* ── Badges ── */
.tbl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.tbl-badge-indigo {
  background: rgba(99,102,241,.1);
  color: #4338ca;
}
[data-theme="dark"] .tbl-badge-indigo {
  background: rgba(139,92,246,.18);
  color: #a78bfa;
}
.tbl-badge-green {
  background: var(--green-bg);
  color: var(--green-fg);
}
.tbl-badge-amber {
  background: var(--amber-bg);
  color: var(--amber-fg);
}
.tbl-badge-slate {
  background: var(--surface-hover);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.tbl-badge-admin {
  background: rgba(245,158,11,.14);
  color: #92400e;
}
[data-theme="dark"] .tbl-badge-admin {
  background: rgba(245,158,11,.12);
  color: #fcd34d;
}
.tbl-badge-purple {
  background: rgba(109,40,217,.12);
  color: #6d28d9;
}
[data-theme="dark"] .tbl-badge-purple {
  background: rgba(167,139,250,.14);
  color: #a78bfa;
}

/* ── "You" pill ── */
.tbl-you {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  background: rgba(99,102,241,.1);
  color: var(--brand-600);
  border-radius: 10px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}
[data-theme="dark"] .tbl-you { color: var(--brand-400); }

/* ── Table toolbar (search bar above the table) ── */
.tbl-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem .875rem;
  border-bottom: 1px solid var(--border);
}

.tbl-search-wrap {
  position: relative;
  flex: 1;
  max-width: 340px;
}

.tbl-search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .875rem;
  color: var(--text-muted);
  pointer-events: none;
}

.tbl-search-input {
  width: 100%;
  height: 36px;
  padding: 0 .75rem 0 2.25rem;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-body);
  font-size: .875rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .3s;
}
.tbl-search-input::placeholder { color: var(--text-muted); }
.tbl-search-input:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

/* ── Sortable column headers ── */
.th-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.th-sortable:hover { color: var(--text-body); }

.sort-icon {
  font-size: .625rem;
  margin-left: 4px;
  vertical-align: middle;
  opacity: .45;
  transition: opacity .15s;
}
.th-sortable:hover .sort-icon { opacity: .8; }
.th-sortable.sort-asc .sort-icon,
.th-sortable.sort-desc .sort-icon {
  opacity: 1;
  color: var(--brand-500);
}

/* ── No-results state ── */
.tbl-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  font-size: .875rem;
}
.tbl-no-results i {
  font-size: 1.5rem;
  opacity: .4;
}
.tbl-no-results p { margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   Settings page
   ═══════════════════════════════════════════════════════════════ */

/* Form wrapper — full width within admin main content */
.settings-form {
  width: 100%;
  max-width: 100%;
}

.settings-form .provider-selector {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ── Settings card ── */
.settings-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 1.25rem;
  overflow: hidden;
  transition: background .3s, border-color .3s;
}

.settings-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.settings-card-heading { flex: 1; min-width: 0; }

.settings-card-title {
  font-size: .9375rem;
  font-weight: 600;
  margin: 0 0 .1rem;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.settings-card-title i {
  font-size: .875rem;
  color: var(--text-muted);
}

.settings-card-subtitle {
  font-size: .8125rem;
  color: var(--text-muted);
  margin: 0;
}

.settings-enable-wrap {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
}

.settings-card-body {
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Toggle switch ── */
.toggle-switch {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  margin: 0;
}

.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
  z-index: 1;
}

.toggle-track {
  width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 10px;
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.toggle-switch input:checked ~ .toggle-track {
  background: var(--brand-500);
}

.toggle-switch input:checked ~ .toggle-track::after {
  transform: translateX(16px);
}

.toggle-label {
  font-size: .8125rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Settings field ── */
.settings-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.settings-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0;
}

.settings-input {
  height: 38px;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-body);
  font-size: .875rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .3s;
  width: 100%;
}

.settings-input::placeholder { color: var(--text-muted); }
.settings-input:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .1);
}

.settings-select {
  height: 38px;
  padding: 0 .75rem;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  background: var(--surface) !important;
  color: var(--text-body) !important;
  font-size: .875rem;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color .15s, background .3s;
  width: 100%;
  max-width: 480px;
}

.settings-select:focus {
  border-color: var(--brand-400) !important;
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .1) !important;
}

.settings-hint {
  font-size: .75rem;
  color: var(--text-muted);
  margin: .2rem 0 0;
}

/* ── Provider selector ── */
.provider-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}

@media (max-width: 600px) {
  .provider-selector { grid-template-columns: 1fr; }
}

.provider-option {
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: block;
}

.provider-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.provider-option-inner {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .75rem;
}

.provider-option:hover {
  border-color: var(--brand-400);
  background: rgba(var(--bs-primary-rgb), .03);
}

.provider-option.selected {
  border-color: var(--brand-500);
  background: rgba(var(--bs-primary-rgb), .05);
}

[data-theme="dark"] .provider-option.selected {
  background: rgba(139,92,246,.08);
}

.provider-icon {
  font-size: .875rem;
  flex-shrink: 0;
}

.replit-icon    { color: #0ea5e9; }
.openai-icon    { color: #059669; }
.anthropic-icon { color: #d97706; }
.gemini-icon    { color: #4285f4; }

[data-theme="dark"] .replit-icon    { color: #38bdf8; }
[data-theme="dark"] .openai-icon    { color: #34d399; }
[data-theme="dark"] .anthropic-icon { color: #fbbf24; }
[data-theme="dark"] .gemini-icon    { color: #60a5fa; }

.provider-name {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-heading);
  white-space: nowrap;
}

.provider-desc {
  font-size: .75rem;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* ── Provider section blocks ── */
.settings-provider-section {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

/* ── Inline info text (replaces heavy callout box) ── */
.settings-info-inline {
  font-size: .8125rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
  display: flex;
  gap: .4rem;
  align-items: flex-start;
}

.settings-info-inline i {
  flex-shrink: 0;
  margin-top: .15rem;
  font-size: .8rem;
}

/* ── API key masked field ── */
.api-key-masked {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 .75rem;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}

.key-dots {
  font-size: .8125rem;
  color: var(--text-muted);
  font-family: 'Courier New', monospace;
  letter-spacing: .06em;
  flex: 1;
}

.key-change-btn {
  background: none;
  border: none;
  font-size: .75rem;
  font-weight: 600;
  color: var(--brand-500);
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}
.key-change-btn:hover { color: var(--brand-600); text-decoration: underline; }

/* ── Test connection ── */
.settings-test-section {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.btn-test-connection {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .875rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-body);
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  font-family: inherit;
}

.btn-test-connection:hover:not(:disabled) {
  border-color: var(--brand-400);
  color: var(--brand-500);
  background: rgba(var(--bs-primary-rgb), .03);
}

.btn-test-connection:disabled { opacity: .55; cursor: not-allowed; }

.spin-icon {
  display: inline-block;
  animation: spin .8s linear infinite;
}

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

.test-result-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8125rem;
  font-weight: 600;
  padding: .25rem .625rem;
  border-radius: 99px;
}

.test-result-badge.test-ok {
  background: var(--green-bg);
  color: var(--green-fg);
  border: 1px solid var(--green-border);
}

.test-result-badge.test-fail {
  background: rgba(239,68,68,.07);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.18);
}

[data-theme="dark"] .test-result-badge.test-fail {
  background: rgba(239,68,68,.1);
  color: #f87171;
  border-color: rgba(239,68,68,.22);
}

/* ── Save button ── */
.settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2rem;
}

.btn-save-settings {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1.125rem;
  background: var(--brand-500);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}

.btn-save-settings:hover { background: var(--brand-600); }
.btn-save-settings:active { opacity: .9; }

/* ═══════════════════════════════════════════════════════════════
   Question Bank & Worksheet Builder
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared utilities ── */
.hdr-actions { display: flex; align-items: center; gap: .5rem; }
.page-header-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* button_to wraps buttons in a <form> — make the form transparent to flex layout */
.hdr-actions > form,
.page-header-actions > form { display: contents; }
.mt-1 { margin-top: .25rem; }
.mb-1 { margin-bottom: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.page-form { max-width: 680px; }
.page-form--wide { max-width: 100%; }

.form-section-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .75rem;
}

.form-row-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) { .form-row-two { grid-template-columns: 1fr; } }

.form-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  transition: background .3s, border-color .3s;
}

.form-card-title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.form-card-title i { color: var(--text-muted); font-size: .875rem; }

.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}

@media (max-width: 600px) { .form-row-3 { grid-template-columns: 1fr; } }

.form-field-inline {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.field-input-sm { width: 80px; }
.field-required { color: #ef4444; }
.field-hint-inline { font-size: .75rem; color: var(--text-muted); font-weight: 400; }

/* ── Filter bar ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: .75rem 1rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background .3s, border-color .3s;
}

.filter-select {
  height: 34px;
  padding: 0 .625rem;
  font-size: .8125rem;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  background: var(--surface) !important;
  color: var(--text-body) !important;
  font-family: inherit;
  cursor: pointer;
}

.btn-filter {
  height: 34px;
  padding: 0 .875rem;
  background: var(--brand-500);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.btn-clear-filter {
  font-size: .8125rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0 .25rem;
}

.btn-clear-filter:hover { color: var(--text-body); text-decoration: underline; }

/* ── Question list (index) ── */
.question-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.question-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .875rem 1rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background .3s, border-color .3s;
}

.question-row:hover { border-color: var(--brand-300); }
[data-theme="dark"] .question-row:hover { border-color: rgba(139,92,246,.4); }

.question-row-main { flex: 1; min-width: 0; }

.question-badges {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}

.question-content {
  font-size: .875rem;
  color: var(--text-heading);
  margin: 0 0 .35rem;
  line-height: 1.5;
}

.question-meta {
  font-size: .75rem;
  color: var(--text-muted);
  margin: 0;
}

.question-meta i { margin-right: .2rem; }

.question-row-actions {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex-shrink: 0;
}

/* ── Row icon buttons ── */
.btn-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: .875rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
  font-family: inherit;
  padding: 0;
}

.btn-row-icon:hover { border-color: var(--brand-400); color: var(--brand-500); background: rgba(var(--bs-primary-rgb),.04); }
.btn-row-danger:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.05); }

/* ── Badges ── */
.badge-qtype, .badge-diff, .badge-marks, .badge-ai {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .7rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 5px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.badge-qtype-mcq   { background: rgba(99,102,241,.1);  color: #6366f1; }
.badge-qtype-short { background: rgba(16,185,129,.1);  color: #059669; }
.badge-qtype-long  { background: rgba(245,158,11,.1);  color: #d97706; }

.badge-diff-easy   { background: rgba(16,185,129,.1);  color: #059669; }
.badge-diff-medium { background: rgba(245,158,11,.1);  color: #d97706; }
.badge-diff-hard   { background: rgba(239,68,68,.1);   color: #ef4444; }

.badge-marks { background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
.badge-ai    { background: rgba(139,92,246,.1); color: var(--brand-500); }

.badge-qtype-match_pairs  { background: rgba(20,184,166,.1);  color: #0d9488; }
.badge-qtype-fill_blank   { background: rgba(59,130,246,.1);  color: #2563eb; }
.badge-qtype-one_sentence { background: rgba(107,114,128,.1); color: #4b5563; }
.badge-qtype-word_problem { background: rgba(245,158,11,.1);  color: #d97706; }
.badge-qtype-diagram      { background: rgba(139,92,246,.1);  color: #7c3aed; }

[data-theme="dark"] .badge-qtype-match_pairs  { background: rgba(45,212,191,.12); color: #2dd4bf; }
[data-theme="dark"] .badge-qtype-fill_blank   { background: rgba(96,165,250,.12); color: #60a5fa; }
[data-theme="dark"] .badge-qtype-one_sentence { background: rgba(156,163,175,.1); color: #9ca3af; }
[data-theme="dark"] .badge-qtype-word_problem { background: rgba(251,191,36,.1);  color: #fbbf24; }
[data-theme="dark"] .badge-qtype-diagram      { background: rgba(167,139,250,.12);color: #a78bfa; }

[data-theme="dark"] .badge-qtype-mcq   { background: rgba(99,102,241,.15); color: #818cf8; }
[data-theme="dark"] .badge-qtype-short { background: rgba(52,211,153,.12); color: #34d399; }
[data-theme="dark"] .badge-qtype-long  { background: rgba(251,191,36,.1);  color: #fbbf24; }
[data-theme="dark"] .badge-diff-easy   { background: rgba(52,211,153,.12); color: #34d399; }
[data-theme="dark"] .badge-diff-medium { background: rgba(251,191,36,.1);  color: #fbbf24; }
[data-theme="dark"] .badge-diff-hard   { background: rgba(239,68,68,.12);  color: #f87171; }

.badge-lesson { background: rgba(16,185,129,.1);  color: #059669; font-size:.75rem; padding:.2rem .55rem; border-radius:999px; display:inline-flex; align-items:center; gap:.3rem; }
.badge-topic  { background: rgba(99,102,241,.1);  color: #6366f1; font-size:.75rem; padding:.2rem .55rem; border-radius:999px; display:inline-flex; align-items:center; gap:.3rem; }
[data-theme="dark"] .badge-lesson { background: rgba(52,211,153,.12); color: #34d399; }
[data-theme="dark"] .badge-topic  { background: rgba(129,140,248,.12); color: #818cf8; }

/* ── Empty state with icon ── */
.empty-state i {
  font-size: 2rem;
  display: block;
  margin-bottom: .75rem;
}

/* ── Question-type chip grid ── */
.type-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
.type-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: .875rem;
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--text-body);
  transition: border-color .15s, background .15s;
  user-select: none;
}
.type-chip input[type=checkbox] { accent-color: var(--brand-500); flex-shrink: 0; }
.type-chip:has(input:checked) {
  border-color: var(--brand-500);
  background: rgba(99,102,241,.06);
  color: var(--brand-600);
  font-weight: 500;
}
[data-theme="dark"] .type-chip:has(input:checked) { background: rgba(99,102,241,.12); color: #818cf8; }

/* ── AI Generate layout ── */
.gen-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.5rem;
  align-items: flex-start;
}

@media (max-width: 900px) { .gen-layout { grid-template-columns: 1fr; } }

/* ── Worksheet wizard ── */
.wiz-indicator {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 1.25rem; padding: 0 .25rem;
}
.wiz-step {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  flex-shrink: 0;
}
.wiz-step-circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8125rem; font-weight: 700; line-height: 1;
  border: 2px solid var(--border);
  background: var(--surface); color: var(--text-muted);
  transition: background .2s, border-color .2s, color .2s;
}
.wiz-step-label {
  font-size: .72rem; font-weight: 500; color: var(--text-muted);
  white-space: nowrap; transition: color .2s;
}
.wiz-step--active .wiz-step-circle {
  background: var(--brand-500); border-color: var(--brand-500); color: #fff;
}
.wiz-step--active .wiz-step-label { color: var(--brand-500); }
.wiz-step--done .wiz-step-circle {
  background: transparent; border-color: var(--brand-500); color: var(--brand-500);
}
.wiz-step--done .wiz-step-label { color: var(--brand-500); }
.wiz-connector {
  flex: 1; height: 2px; background: var(--border);
  margin: 0 .5rem; margin-bottom: 1.4rem;
  transition: background .2s;
}
.wiz-connector--done { background: var(--brand-500); }

.wiz-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.wiz-nav--right { justify-content: flex-end; }

/* Lesson toggle */
.lesson-toggle-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 1px dashed var(--border); border-radius: 8px;
  padding: .35rem .75rem; font-size: .8125rem; font-weight: 500;
  color: var(--text-muted); cursor: pointer; transition: border-color .15s, color .15s;
}
.lesson-toggle-btn:hover { border-color: var(--brand-400); color: var(--brand-500); }
.lesson-toggle-chevron { font-size: .7rem; transition: transform .2s; }

/* Count stepper */
.wiz-stepper {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--surface);
}
.wiz-stepper-btn {
  width: 36px; height: 38px; border: none; background: var(--surface-raised);
  color: var(--text-body); font-size: 1rem; cursor: pointer; flex-shrink: 0;
  transition: background .12s, color .12s;
}
.wiz-stepper-btn:hover { background: var(--surface-hover); color: var(--brand-500); }
.wiz-stepper-input {
  border: none !important; border-radius: 0 !important;
  text-align: center; width: 52px; -moz-appearance: textfield;
  box-shadow: none !important;
}
.wiz-stepper-input::-webkit-inner-spin-button,
.wiz-stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Difficulty pills */
.wiz-diff-pills {
  display: flex; gap: .4rem;
}
.wiz-diff-pill {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: .45rem .5rem; border-radius: 8px;
  border: 1.5px solid var(--border); font-size: .8125rem; font-weight: 600;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
  color: var(--text-muted); background: var(--surface);
}
.wiz-diff-pill input[type=radio] { display: none; }
.wiz-diff-pill:has(input:checked) { border-color: var(--brand-500); color: var(--brand-500); background: rgba(99,102,241,.07); }
.wiz-diff-pill--easy:has(input:checked)   { border-color: #22c55e; color: #16a34a; background: rgba(34,197,94,.08); }
.wiz-diff-pill--medium:has(input:checked) { border-color: var(--brand-500); color: var(--brand-500); background: rgba(99,102,241,.07); }
.wiz-diff-pill--hard:has(input:checked)   { border-color: #ef4444; color: #dc2626; background: rgba(239,68,68,.08); }
.wiz-diff-pill--mixed:has(input:checked)  { border-color: #f59e0b; color: #d97706; background: rgba(245,158,11,.08); }
[data-theme="dark"] .wiz-diff-pill:has(input:checked) { background: rgba(99,102,241,.15); }

/* ── Multi-Search-Add (MSA) widget ── */
.msa-widget {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: .4rem .5rem .3rem;
  min-height: 42px;
  cursor: text;
  transition: border-color .15s;
}
.msa-widget:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }

.msa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .25rem;
}
.msa-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: rgba(99,102,241,.1);
  color: var(--brand-600);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  padding: .18rem .55rem .18rem .6rem;
  line-height: 1.3;
}
[data-theme="dark"] .msa-chip { background: rgba(99,102,241,.18); color: #a5b4fc; border-color: rgba(99,102,241,.35); }
.msa-chip-x {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: .6;
  font-size: .9rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
}
.msa-chip-x:hover { opacity: 1; }

.msa-search {
  border: none;
  outline: none;
  background: transparent;
  font-size: .875rem;
  color: var(--text-body);
  width: 100%;
  padding: .1rem .2rem;
  min-width: 80px;
}
.msa-search::placeholder { color: var(--text-muted); }

.msa-dropdown {
  display: none;
  position: absolute;
  left: -1px;
  right: -1px;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 200;
  max-height: 200px;
  overflow-y: auto;
}
/* Keep open dropdowns above siblings (e.g. worksheet plan preview on new form) */
.msa-widget:has(.msa-dropdown.msa-open) { z-index: 300; }
.ws-scope-grid { position: relative; z-index: 2; overflow: visible; }
.ws-scope-grid:has(.msa-dropdown.msa-open) { z-index: 20; }
.ws-form-right { overflow: visible; }
.ws-form-right .ws-plan-preview { position: relative; z-index: 1; }
.msa-dropdown.msa-open { display: block; }
.msa-dropdown-item {
  padding: .5rem .75rem;
  font-size: .875rem;
  cursor: pointer;
  color: var(--text-body);
}
.msa-dropdown-item:hover { background: var(--hover); }
.msa-dropdown-empty {
  padding: .5rem .75rem;
  font-size: .8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* locked / disabled state */
.msa-locked {
  background: var(--hover);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: .75;
}
.msa-locked .msa-search { cursor: not-allowed; color: var(--text-muted); }

/* ── Worksheet form: horizontal two-column layout ── */
.ws-form-card { padding: 1.5rem 2rem; overflow: visible; }

.ws-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: flex-start;
}

.ws-form-grid:not(:has(.ws-form-right)) {
  grid-template-columns: 1fr;
}

.ws-form-left {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  border-right: 1px solid var(--border);
  padding-right: 2rem;
  min-width: 0;
}

.ws-form-grid:not(:has(.ws-form-right)) .ws-form-left {
  border-right: none;
  padding-right: 0;
}

.ws-form-right {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
}

.ws-form-actions {
  margin-top: .5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.ws-scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ws-plan-preview { margin-top: 0; }
.ws-form-right .ws-plan-preview { position: sticky; top: 1rem; }
.ws-plan-scope { font-size: .875rem; font-weight: 500; margin: 0 0 .75rem; color: var(--text); }
.ws-plan-table { width: 100%; font-size: .8125rem; border-collapse: collapse; margin-bottom: .5rem; }
.ws-plan-table th { text-align: left; font-weight: 500; color: var(--text-muted); padding: .35rem .75rem .35rem 0; vertical-align: top; white-space: nowrap; }
.ws-plan-table td { padding: .35rem 0; color: var(--text); }
.ws-plan-type-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  margin: 0 .35rem .35rem 0; padding: .15rem .5rem;
  background: var(--hover); border-radius: 4px; font-size: .75rem;
}
.ws-plan-hint { margin: 0; }

.ws-multiselect {
  min-height: 130px;
  resize: vertical;
}

@media (max-width: 860px) {
  .ws-form-grid  { grid-template-columns: 1fr; }
  .ws-form-left  { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 1.5rem; }
  .ws-scope-grid { grid-template-columns: 1fr; }
}

.gen-form-col, .gen-preview-col { min-width: 0; }

.gen-preview-header { margin-bottom: .75rem; }
.gen-preview-hint { font-size: .8125rem; color: var(--text-muted); margin: -.5rem 0 .75rem; }

.gen-questions { display: flex; flex-direction: column; gap: .75rem; }

.gen-q-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .875rem 1rem;
  transition: background .3s, border-color .3s;
}

.gen-q-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.gen-q-num {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .1rem .4rem;
}

.gen-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  color: var(--text-muted);
  min-height: 260px;
}

.gen-placeholder-icon { font-size: 2.5rem; margin-bottom: .75rem; display: block; }
.gen-placeholder p { font-size: .875rem; margin: .25rem 0; }
.gen-placeholder-warn { color: #d97706; margin-top: .5rem; font-size: .8125rem; }
[data-theme="dark"] .gen-placeholder-warn { color: #fbbf24; }

/* ── Worksheet builder ── */
.builder-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: flex-start;
}

@media (max-width: 900px) { .builder-layout { grid-template-columns: 1fr; } }

.builder-col-left, .builder-col-right { min-width: 0; }

.builder-section-header {
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}

.builder-section-title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0;
}

.builder-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  font-size: .875rem;
}

.builder-empty i { font-size: 1.5rem; display: block; margin-bottom: .5rem; }

.builder-wq-list { display: flex; flex-direction: column; gap: .5rem; }

.builder-wq-item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .625rem .75rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background .3s;
}

.builder-wq-num {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .15rem .35rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

.builder-wq-body { flex: 1; min-width: 0; }

.builder-wq-badges {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}

.builder-wq-content {
  font-size: .8125rem;
  color: var(--text-heading);
  margin: 0 0 .2rem;
  line-height: 1.4;
}

.builder-wq-meta {
  font-size: .75rem;
  color: var(--text-muted);
  margin: 0;
}

.builder-wq-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: .75rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
  padding: 0;
  font-family: inherit;
  margin-top: .1rem;
}

.builder-wq-remove:hover { border-color: #ef4444; color: #ef4444; }

/* ── Builder filter ── */
.builder-filter { margin-bottom: .75rem; }

.bf-row { display: grid; gap: .5rem; align-items: end; margin-bottom: .4rem; }
.bf-row-1 { grid-template-columns: 1fr 1fr auto; }
.bf-row-2 { grid-template-columns: 1fr 1fr auto; }

.bf-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.bf-field-clear { justify-content: flex-end; }

.bf-multiselect { min-height: 96px !important; resize: vertical; }

.bf-hint {
  font-size: .68rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: .3rem;
}

.bf-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.bf-active-hint {
  margin-top: .5rem;
  font-size: .78rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}
.bf-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 999px;
  padding: .1rem .55rem;
  font-size: .75rem;
  color: var(--brand-600);
}
[data-theme="dark"] .bf-tag { background: rgba(99,102,241,.15); color: #a5b4fc; }

@media (max-width: 860px) {
  .bf-row-1, .bf-row-2 { grid-template-columns: 1fr 1fr; }
}

/* ── Bank question list ── */
.bank-list { display: flex; flex-direction: column; gap: .4rem; max-height: 70vh; overflow-y: auto; }

.bank-item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .625rem .75rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background .3s, border-color .15s;
}

.bank-item-added { opacity: .6; }

.bank-item-body { flex: 1; min-width: 0; }

.bank-item-badges {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}

.bank-item-content {
  font-size: .8125rem;
  color: var(--text-heading);
  margin: 0 0 .2rem;
  line-height: 1.4;
}

.bank-item-meta { font-size: .75rem; color: var(--text-muted); margin: 0; }

.bank-item-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--brand-500);
  font-size: .875rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
  padding: 0;
  font-family: inherit;
  margin-top: .1rem;
}

.bank-item-add:hover { border-color: var(--brand-400); background: rgba(var(--bs-primary-rgb),.06); }

.bank-item-added-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(16,185,129,.1);
  color: #059669;
  font-size: .8rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

[data-theme="dark"] .bank-item-added-badge { background: rgba(52,211,153,.12); color: #34d399; }

/* ── Worksheet index row actions ── */
.row-actions { display: flex; align-items: center; gap: .375rem; justify-content: flex-end; }

/* ── cell helpers ── */
.cell-hint { display: block; font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }
.cell-muted { color: var(--text-muted); font-size: .8125rem; }

/* ── AI Generate: worksheet context banner ── */
.worksheet-context-banner {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(var(--bs-primary-rgb), .08);
  border: 1px solid rgba(var(--bs-primary-rgb), .2);
  border-radius: 10px;
  padding: .75rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: .9rem;
  color: var(--text-primary);
  flex-wrap: wrap;
}
.worksheet-context-banner i { color: var(--brand-500); font-size: 1rem; }
.worksheet-context-banner strong { color: var(--brand-600); }
.worksheet-context-note { color: var(--text-muted); font-size: .82rem; }
[data-theme="dark"] .worksheet-context-banner { background: rgba(var(--bs-primary-rgb), .13); }
[data-theme="dark"] .worksheet-context-banner strong { color: var(--brand-400); }

/* ── Multi-select fields ── */
.field-multiselect {
  min-height: 110px;
  padding: .35rem .5rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: .875rem;
  width: 100%;
  cursor: pointer;
}
.field-multiselect option { padding: .3rem .4rem; border-radius: 4px; }
.field-multiselect option:checked { background: rgba(var(--bs-primary-rgb), .18); color: var(--brand-600); }
[data-theme="dark"] .field-multiselect option:checked { color: var(--brand-300); }
.field-hint {
  display: none !important;
}

.form-hint,
.field-hint-inline,
.field-multiselect-count,
.ws-plan-hint {
  display: none !important;
}
.field-multiselect-count {
  font-size: .78rem;
  color: var(--brand-500);
  font-weight: 600;
  margin-top: .25rem;
  min-height: 1rem;
}

/* ── Generated question topic tag ── */
.gen-q-topic-tag {
  font-size: .72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
  padding: .15rem .45rem;
  background: var(--surface-2);
  border-radius: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.gen-answer-label { color: #059669; font-size: .78rem; display: flex; align-items: center; gap: .3rem; }
[data-theme="dark"] .gen-answer-label { color: #34d399; }
.gen-answer-select { background: #f0fdf4; border-color: #6ee7b7; }
[data-theme="dark"] .gen-answer-select { background: #022c22; border-color: #065f46; }

/* ══════════════════════════════════════════════════════════════════════════
   QuestionReference — cards, badges, detail view
   ══════════════════════════════════════════════════════════════════════════ */

/* Type badges */
.ref-type-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .03em;
  padding: .2rem .55rem; border-radius: 20px; white-space: nowrap;
}
.ref-type-text    { background: #e8f4fd; color: #1a6fa0; }
.ref-type-image   { background: #fdf0e8; color: #a0521a; }
.ref-type-diagram { background: #e8fdf0; color: #1a7a4a; }
.ref-type-map     { background: #f0e8fd; color: #5a1aa0; }
.ref-type-table   { background: #fdfae8; color: #8a7a00; }
.ref-type-chart   { background: #e8fdfd; color: #1a8080; }
.ref-type-mixed   { background: #fde8f0; color: #a01a55; }
[data-theme="dark"] .ref-type-text    { background: #1a3a50; color: #7bcbe8; }
[data-theme="dark"] .ref-type-image   { background: #50301a; color: #e8a87b; }
[data-theme="dark"] .ref-type-diagram { background: #1a4030; color: #7be8a8; }
[data-theme="dark"] .ref-type-map     { background: #2d1a50; color: #b07be8; }
[data-theme="dark"] .ref-type-table   { background: #4a4010; color: #e8d87b; }
[data-theme="dark"] .ref-type-chart   { background: #1a4040; color: #7be8e8; }
[data-theme="dark"] .ref-type-mixed   { background: #501a30; color: #e87bb0; }

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
}

/* Reference card */
.ref-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.ref-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.ref-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem .85rem .45rem;
  border-bottom: 1px solid var(--border);
  gap: .5rem;
}
.ref-card-actions { display: flex; gap: .25rem; }
.ref-card-body {
  display: block; text-decoration: none; color: inherit;
  padding: .75rem .85rem .85rem;
}
.ref-card-body:hover { color: inherit; }
.ref-card-title { font-size: .95rem; font-weight: 600; margin-bottom: .4rem; line-height: 1.35; }
.ref-card-excerpt { font-size: .8rem; color: var(--text-muted); line-height: 1.55; margin-bottom: .5rem; }
.ref-card-thumb { margin-bottom: .5rem; border-radius: 6px; overflow: hidden; max-height: 100px; }
.ref-thumb-img  { width: 100%; height: 100px; object-fit: cover; display: block; }
.ref-card-meta  { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }

/* Detail view */
.ref-detail-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.ref-detail-media { margin-bottom: 1rem; }
.ref-detail-img   { max-width: 100%; max-height: 420px; border-radius: 8px; display: block; }
.ref-detail-body  { font-size: .92rem; line-height: 1.7; color: var(--text-main); }
.ref-detail-body p { margin-bottom: .6rem; }
.ref-detail-meta  {
  margin-top: 1rem; font-size: .78rem; color: var(--text-muted);
  display: flex; align-items: center; gap: .35rem;
}

/* Form — reference body textarea */
.ref-body-textarea { font-family: Georgia, serif; font-size: .9rem; line-height: 1.7; }

/* Reference block in print / worksheet */
.ref-block {
  margin-bottom: 1.2rem;
  padding: .9rem 1.1rem;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  background: #fafafa;
  page-break-inside: avoid;
}
.ref-block-title { font-weight: 700; font-size: .85rem; margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .04em; }
.ref-block-body  { font-size: .88rem; line-height: 1.7; white-space: pre-wrap; }
.ref-svg-wrap svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.ref-svg-wrap     { overflow-x: auto; }
.ref-block-img   { max-width: 100%; max-height: 300px; display: block; margin-top: .5rem; border-radius: 4px; }

/* Filter tabs (used on references index) */
.filter-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-tab {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 500; padding: .3rem .75rem;
  border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-muted);
  text-decoration: none; transition: all .15s;
}
.filter-tab:hover { border-color: var(--brand-500); color: var(--brand-500); }
.filter-tab.active { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }

/* Reference group sub-heading on print */
.ref-group-label {
  font-size: 9pt;
  font-style: italic;
  color: #555;
  margin: 4pt 0 8pt 0;
}
@media print {
  .ref-block { break-inside: avoid; }
  .ref-block + .ref-group-label { margin-top: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AI Generate — mode tabs + passage UI
   ══════════════════════════════════════════════════════════════════════════ */
.gen-mode-tabs {
  display: flex; gap: .35rem; margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.gen-mode-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 500;
  padding: .5rem 1.1rem;
  border-radius: 8px 8px 0 0;
  text-decoration: none;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-bottom: none;
  transition: all .15s;
  margin-bottom: -2px;
}
.gen-mode-tab:hover { color: var(--brand-500); background: var(--surface-2); }
.gen-mode-tab.active {
  color: var(--brand-500); font-weight: 600;
  background: var(--surface-1);
  border-color: var(--border);
  border-bottom-color: var(--surface-1);
}

/* Passage source radio tabs */
.gen-passage-source-tabs {
  display: flex; gap: .5rem; margin-bottom: .25rem;
}
.passage-source-tab {
  display: inline-flex; align-items: center; gap: .35rem;
  cursor: pointer;
  font-size: .82rem; font-weight: 500;
  padding: .35rem .85rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  transition: all .15s;
}
.passage-source-tab:has(input:checked) {
  background: var(--brand-500); color: #fff; border-color: var(--brand-500);
}
.passage-source-tab input[type="radio"] { display: none; }

/* Type chip recommended indicator */
.type-chip-recommended { border-color: var(--brand-400); }
.type-chip-rec-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-500); flex-shrink: 0;
  display: inline-block; vertical-align: middle;
}

/* Existing ref preview box */
.ref-preview-box {
  margin-top: .5rem;
  padding: .6rem .85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Form divider */
.form-divider {
  border: none; border-top: 1px solid var(--border); margin: 1rem 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Worksheet builder — difficulty distribution widget
   ══════════════════════════════════════════════════════════════════════════ */
.ws-dist-widget {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .65rem .85rem;
  margin-bottom: .85rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.ws-dist-row {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.ws-dist-label {
  font-size: .72rem; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
  min-width: 56px;
}
.ws-dist-bar-track {
  flex: 1; display: flex; height: 10px; border-radius: 6px;
  overflow: hidden; background: var(--border); min-width: 80px;
}
.ws-dist-bar-seg { height: 100%; transition: width .4s; }
.ws-dist-legend {
  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  font-size: .72rem; color: var(--text-muted);
}
.ws-dist-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ws-dist-leg-label { white-space: nowrap; }
.ws-dist-row-types { align-items: flex-start; }
.ws-dist-type-chips { display: flex; flex-wrap: wrap; gap: .3rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Answer key print styles
   ══════════════════════════════════════════════════════════════════════════ */

/* Marks grid at top */
.ak-marks-grid {
  display: flex; flex-wrap: wrap; gap: 4pt;
  margin-bottom: 8pt;
}
.ak-marks-cell {
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid #bbb; border-radius: 4pt;
  padding: 3pt 6pt; min-width: 28pt; text-align: center;
  font-size: 8pt;
}
.ak-marks-num { font-weight: 600; }
.ak-marks-val { color: #666; font-size: 7pt; }
.ak-marks-total { background: #f0f0f0; border-color: #888; }

/* Answer block inside question */
.ak-question-block { margin-bottom: 10pt; }
.ak-answer-block {
  margin: 5pt 0 2pt 24pt;
  padding: 4pt 8pt;
  background: #f0fff4;
  border-left: 3pt solid #2ecc71;
  border-radius: 0 4pt 4pt 0;
  font-size: 9pt;
  page-break-inside: avoid;
}
.ak-answer-label { font-weight: 700; margin-right: 4pt; }
.ak-answer-text  { color: #1a5e30; }

/* Correct MCQ option highlight */
.ak-correct-option { font-weight: 700; color: #1a5e30; }

/* Metadata row per question */
.ak-meta-row {
  margin-left: 24pt; margin-top: 2pt;
  display: flex; gap: 6pt; flex-wrap: wrap;
}
.ak-meta-tag {
  font-size: 7pt; color: #777;
  padding: 1pt 5pt; border: 1px solid #ddd;
  border-radius: 20pt;
}
.ak-diff-easy   { color: #1a7a3a; border-color: #2ecc71; }
.ak-diff-medium { color: #7a5500; border-color: #f39c12; }
.ak-diff-hard   { color: #7a1a1a; border-color: #e74c3c; }

@media print {
  .ak-answer-block { background: #f8fff8; }
  .ak-marks-grid   { page-break-inside: avoid; }
}

/* ══════════════════════════════════════════════════════════════════════════
   User area — layout, dashboard, worksheets, profile
   ══════════════════════════════════════════════════════════════════════════ */

.sidebar-link-danger { color: var(--text-muted) !important; }
.sidebar-link-danger:hover { color: #e74c3c !important; background: #fdf0f0 !important; }
[data-theme="dark"] .sidebar-link-danger:hover { background: #3a1a1a !important; }
.sidebar-link-ai { color: var(--brand-500) !important; font-weight: 600; }

/* Published badge (admin) */
.badge-published {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600;
  background: #e8fdf0; color: #1a7a4a;
  padding: .2rem .55rem; border-radius: 20px;
}
[data-theme="dark"] .badge-published { background: #1a3a28; color: #7be8a8; }

/* From School badge (student catalog worksheets) */
.badge-from-school {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600;
  background: #e0e7ff; color: #4338ca;
  padding: .2rem .55rem; border-radius: 20px;
}
[data-theme="dark"] .badge-from-school { background: #312e81; color: #a5b4fc; }

.badge-from-parent {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600;
  background: #fce7f3; color: #9d174d;
  padding: .2rem .55rem; border-radius: 20px;
}
[data-theme="dark"] .badge-from-parent { background: #500724; color: #f9a8d4; }

/* Published btn state */
.btn-published { color: #1a7a4a !important; border-color: #2ecc71 !important; }

/* ── User stat grid (dashboard) ── */
.user-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.user-stat-card {
  display: flex; align-items: center; gap: .85rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  transition: box-shadow .15s, transform .15s;
}
.user-stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.user-stat-cta { border: none !important; }
.user-stat-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.user-stat-icon--primary { background: rgba(99,102,241,.12); color: var(--brand-500); }
.user-stat-icon--warning { background: rgba(245,158,11,.12); color: #f59e0b; }
.user-stat-icon--success { background: rgba(16,185,129,.12); color: #059669; }
.user-stat-icon--danger  { background: rgba(239,68,68,.12);  color: #dc2626; }
.user-stat-body { display: flex; flex-direction: column; }
.user-stat-num { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--text-main); }
.user-stat-label { font-size: .73rem; color: var(--text-muted); font-weight: 500; margin-top: .1rem; }

/* ── Quick Actions ── */
.quick-actions-section {
  margin-bottom: 2rem;
}
.quick-actions-heading {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.quick-action-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: var(--text-body);
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  cursor: pointer;
}
.quick-action-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-1px);
  border-color: var(--brand-500);
  color: var(--text-heading);
}
.quick-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.quick-action-icon--primary { background: rgba(99,102,241,.12); color: var(--brand-500); }
.quick-action-icon--success  { background: rgba(16,185,129,.12);  color: #059669; }
.quick-action-icon--warning  { background: rgba(245,158,11,.12);  color: #f59e0b; }
.quick-action-icon--info     { background: rgba(14,165,233,.12);  color: #0ea5e9; }
.quick-action-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.quick-action-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-heading);
}
.quick-action-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}
.quick-action-arrow {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}
.quick-action-card:hover .quick-action-arrow {
  color: var(--brand-500);
  transform: translateX(2px);
}

/* ── Dashboard hero banner ── */
.dash-hero {
  background: linear-gradient(120deg, #6d28d9 0%, #4f46e5 100%);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  overflow: hidden;
  position: relative;
}
.dash-hero::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -5%;
  width: 280px;
  height: 280px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
  pointer-events: none;
}
.dash-hero-text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.dash-hero-greeting {
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  margin: 0 0 .2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dash-hero-name {
  font-size: 1.65rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .35rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-hero-school {
  font-size: .78rem;
  color: rgba(255,255,255,.6);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.dash-hero-art {
  font-size: 3.5rem;
  color: rgba(255,255,255,.18);
  flex-shrink: 0;
  user-select: none;
  position: relative;
  z-index: 1;
  line-height: 1;
}
[data-theme="dark"] .dash-hero {
  background: linear-gradient(120deg, #5b21b6 0%, #3730a3 100%);
}
@media (max-width: 640px) {
  .dash-hero-art { display: none; }
  .dash-hero-name { font-size: 1.4rem; }
}

/* Clickable stat card link */
.user-stat-link {
  text-decoration: none; color: inherit; cursor: pointer;
}
.user-stat-link:hover { color: inherit; }
.user-stat-link:hover .user-stat-num { color: var(--brand-500); }

/* ── Dashboard section ── */
.dash-section { margin-bottom: 1.5rem; }
.dash-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .85rem;
}
.dash-section-title { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0; }
.dash-section-link {
  font-size: .8rem; color: var(--brand-500); text-decoration: none;
  display: inline-flex; align-items: center; gap: .25rem;
}
.dash-section-link:hover { text-decoration: underline; }

/* Empty hero */
.dash-empty-hero {
  text-align: center; padding: 3rem 1rem;
  background: var(--surface-1); border: 1px dashed var(--border);
  border-radius: 12px;
}
.dash-empty-icon { font-size: 2.5rem; color: var(--text-muted); display: block; margin-bottom: .75rem; }

/* ── Worksheet card grid ── */
.ws-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.ws-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  height: 220px;
  transition: box-shadow .15s, transform .15s;
}
.ws-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.09); transform: translateY(-2px); }
.ws-card-body {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  padding: .85rem 1.1rem .6rem;
  flex: 1; overflow: hidden;
}
.ws-card-body:hover { color: inherit; }
.ws-card-header { display: flex; align-items: flex-start; margin-bottom: .4rem; min-height: 1.6rem; }
.ws-card-title {
  font-size: .92rem; font-weight: 600; line-height: 1.35;
  flex: 1; margin: 0 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; cursor: default;
}
.ws-card-meta {
  margin-top: auto;
  display: flex; flex-direction: column; gap: .22rem;
  font-size: .75rem; color: var(--text-muted);
  border-top: 1px solid var(--border); padding-top: .45rem;
}
.ws-card-meta-row { display: flex; flex-wrap: wrap; gap: .25rem .65rem; }
.ws-card-meta-row span { display: flex; align-items: center; gap: .25rem; white-space: nowrap; }
.ws-card-badge {
  flex-shrink: 0;
}
.ws-card-actions {
  border-top: 1px solid var(--border);
  padding: .45rem .85rem;
  display: flex; justify-content: flex-end; align-items: center; gap: .35rem;
  flex-shrink: 0;
}
.ws-card-action-btn {
  height: 30px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  font-size: .8rem; color: var(--text-muted);
  border: 1px solid var(--border);
  text-decoration: none; white-space: nowrap;
  padding: 0 .65rem;
  transition: all .15s;
}
.ws-card-icon-btn { width: 30px; padding: 0; }
.ws-card-labeled-btn { font-weight: 600; }
.ws-card-action-btn:hover { color: var(--brand-500); border-color: var(--brand-500); }

/* ── User tabs ── */
.user-tabs {
  display: flex; gap: .35rem; margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--border);
}
.user-tab {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; font-weight: 500;
  padding: .5rem 1rem; border-radius: 8px 8px 0 0;
  text-decoration: none; color: var(--text-muted);
  border: 1px solid transparent; border-bottom: none;
  margin-bottom: -2px; transition: all .15s;
}
.user-tab:hover { color: var(--brand-500); background: var(--surface-2); }
.user-tab.active {
  color: var(--brand-500); font-weight: 600;
  background: var(--surface-1);
  border-color: var(--border);
  border-bottom-color: var(--surface-1);
}
.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: .7rem; font-weight: 700; line-height: 1;
  background: var(--surface-2); color: var(--text-muted);
  border-radius: 99px;
}
.user-tab.active .tab-count {
  background: rgba(var(--bs-primary-rgb), .12);
  color: var(--brand-500);
}

/* ── User worksheet show (question list) ── */
.user-qs-list { display: flex; flex-direction: column; gap: .75rem; max-width: 820px; }

.user-ref-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-500);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  margin-bottom: .25rem;
}
.user-q-card .user-ref-block,
.exam-q-card .user-ref-block,
.results-q-card .user-ref-block {
  margin-top: .35rem;
  margin-bottom: .75rem;
}
.user-ref-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.user-ref-title  { font-weight: 600; font-size: .9rem; }
.user-ref-img    { max-width: 100%; max-height: 320px; border-radius: 6px; display: block; margin: .5rem 0; }
.user-ref-body   { font-size: .88rem; line-height: 1.7; color: var(--text-main); }

.user-q-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.15rem;
}
.user-q-meta {
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .65rem; flex-wrap: wrap;
}
.user-q-num {
  font-size: .78rem; font-weight: 700; color: var(--text-muted);
  background: var(--surface-2); padding: .15rem .55rem; border-radius: 20px;
}
.user-q-content {
  font-size: .95rem; font-weight: 500; line-height: 1.55;
  color: var(--text-main); margin-bottom: .6rem;
}
.user-q-options  { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.user-q-option   { display: flex; align-items: flex-start; gap: .4rem; font-size: .88rem; }
.user-q-opt-letter { font-weight: 600; color: var(--text-muted); min-width: 18px; }
.user-match-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: .6rem; }
.user-match-table th, .user-match-table td { padding: .35rem .65rem; border: 1px solid var(--border); }
.user-match-table th { background: var(--surface-2); font-weight: 600; }
.user-answer-line {
  height: 1px; background: var(--border);
  margin: .55rem 0;
}
.user-q-answer-space { margin-top: .5rem; }

/* ── Profile card ── */
.profile-card {
  display: flex; gap: 1.5rem; align-items: flex-start;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 520px;
}
.profile-avatar-lg {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; font-weight: 700;
}
.profile-info { flex: 1; display: flex; flex-direction: column; gap: .75rem; }
.profile-field { display: flex; flex-direction: column; gap: .15rem; }
.profile-field-label { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.profile-field-value { font-size: .95rem; color: var(--text-main); }

/* ═══════════════════════════════════════════════════════════════════
   SCHOOL STRUCTURE — Admin + User styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── School grid (admin index) ── */
.school-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.school-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: box-shadow .15s;
}
.school-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.08); }
.school-card-header { display: flex; align-items: flex-start; gap: .75rem; }
.school-avatar {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  background: var(--brand-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 700;
}
.school-card-meta { flex: 1; min-width: 0; }
.school-card-name { font-size: .97rem; font-weight: 700; color: var(--text-heading); margin: 0 0 .25rem; }
.school-card-sub  { display: flex; flex-wrap: wrap; gap: .35rem; }
.school-card-location { font-size: .8rem; color: var(--text-muted); display: flex; align-items: center; gap: .3rem; }
.school-card-stats { display: flex; gap: 1rem; }
.school-stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.school-stat-val   { font-size: 1.15rem; font-weight: 700; color: var(--text-heading); }
.school-stat-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.school-card-actions { display: flex; gap: .4rem; margin-top: auto; padding-top: .25rem; }
.school-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .35rem .5rem; border-radius: 7px; font-size: .78rem; font-weight: 500;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-body);
  cursor: pointer; text-decoration: none; transition: background .12s;
}
.school-btn:hover { background: var(--surface-hover); color: var(--text-heading); }
.school-btn-danger { color: #ef4444; }
.school-btn-danger:hover { background: #fef2f2; border-color: #fca5a5; }

/* ── School show page ── */
.school-show-header { display: flex; align-items: flex-start; gap: 1rem; }
.school-show-avatar {
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
  background: var(--brand-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700;
}
.school-show-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .25rem; }
.school-description { color: var(--text-muted); font-size: .9rem; max-width: 640px; margin-bottom: 1rem; }
.school-show-stats { display: flex; flex-wrap: wrap; gap: .5rem; }
.school-stat-pill {
  display: flex; align-items: center; gap: .35rem;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 999px; padding: .3rem .75rem; font-size: .8rem; color: var(--text-body);
}
.school-stat-mapped   { border-color: #a7f3d0; background: #ecfdf5; color: #065f46; }
.school-stat-exclusive { border-color: #fde68a; background: #fffbeb; color: #92400e; }

/* ── School curriculum topic table ── */
.sct-group { margin-bottom: 1.5rem; }
.sct-group-header {
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); padding: .4rem .5rem; margin-bottom: .25rem;
  border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .4rem;
}
.sct-table-wrap { overflow-x: auto; }
.sct-table { font-size: .85rem; }
.sct-mapped-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0;
  border-radius: 6px; padding: .15rem .5rem; font-size: .75rem; font-weight: 500;
}
.sct-ok-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  background: #ecfdf5; color: #065f46;
  border-radius: 6px; padding: .15rem .5rem; font-size: .75rem;
}
.sct-exclusive-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  background: #fffbeb; color: #92400e; border: 1px solid #fde68a;
  border-radius: 6px; padding: .15rem .5rem; font-size: .75rem; font-weight: 500;
}
.sct-unmapped-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5;
  border-radius: 6px; padding: .15rem .5rem; font-size: .75rem;
}

/* ── Inline form for school show ── */
.sct-inline-form { display: flex; flex-direction: column; gap: .75rem; }
.sct-form-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.sct-form-row .form-group { flex: 1; min-width: 140px; }

/* ── School badges ── */
.badge-brand {
  display: inline-flex; align-items: center;
  background: #ede9fe; color: #5b21b6;
  border-radius: 6px; padding: .15rem .5rem; font-size: .73rem; font-weight: 600;
  letter-spacing: .03em;
}
.badge-board {
  display: inline-flex; align-items: center;
  background: #e0f2fe; color: #0369a1;
  border-radius: 6px; padding: .15rem .5rem; font-size: .73rem; font-weight: 600;
}

/* ── Profile school badge ── */
.profile-school-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .93rem; color: var(--text-body);
}
.profile-school-board {
  background: #e0f2fe; color: #0369a1;
  border-radius: 5px; padding: .1rem .4rem; font-size: .72rem; font-weight: 600;
}

/* ── Curriculum mode toggle (user worksheet builder) ── */
.curriculum-mode-toggle {
  display: flex; gap: .4rem; margin-bottom: 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: .3rem;
}
.curr-mode-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .45rem .75rem; border-radius: 7px; font-size: .84rem; font-weight: 500;
  background: transparent; border: none; color: var(--text-muted); cursor: pointer;
  transition: background .12s, color .12s;
}
.curr-mode-btn.active {
  background: var(--surface-card); color: var(--brand-500);
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.curr-mode-btn:hover:not(.active) { background: var(--surface-hover); color: var(--text-body); }

/* ── School curriculum picker banner ── */
.school-curriculum-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 10px; padding: .6rem 1rem; font-size: .85rem;
  color: #1e40af; margin-bottom: .75rem;
}
.school-curr-hint { color: #3b82f6; font-size: .78rem; margin-left: auto; }
.school-curr-legend {
  display: flex; gap: 1rem; flex-wrap: wrap;
  font-size: .75rem; color: var(--text-muted); margin-top: .4rem;
}

/* ── Admin section card ── */
.admin-section-card {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.admin-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.admin-section-title { margin: 0; font-size: .95rem; font-weight: 700; color: var(--text-heading); }
.admin-section-body  { padding: 1.15rem; }

/* ── Misc admin form helpers ── */
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .admin-form-grid { grid-template-columns: 1fr; } }

/* ── Status badges ── */
.status-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 20px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.status-not_started  { background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
.status-in_progress  { background: #fff8e1; border: 1px solid #f59e0b; color: #b45309; }
.status-completed    { background: #ecfdf5; border: 1px solid #10b981; color: #065f46; }
[data-theme="dark"] .status-not_started { background: var(--surface-raised); color: var(--text-muted); }
[data-theme="dark"] .status-in_progress { background: #451a03; border-color: #f59e0b; color: #fbbf24; }
[data-theme="dark"] .status-completed   { background: #022c22; border-color: #10b981; color: #34d399; }

.ws-card-badges { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

/* ── Card action buttons: add / take ── */
.ws-card-add-btn  { color: var(--brand-500); border-color: var(--brand-500); font-weight: 600; }
.ws-card-add-btn:hover { background: var(--brand-500); color: #fff; }
.ws-card-take-btn { color: #10b981; border-color: #10b981; font-weight: 600; }
.ws-card-take-btn:hover { background: #10b981; color: #fff; }
.ws-card-action-btn form { margin: 0; }
.ws-card-action-btn form button {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 600; color: var(--brand-500); white-space: nowrap;
}

/* ── Online Exam form ── */
.exam-form { display: flex; flex-direction: column; gap: 1.25rem; }
.exam-q-card {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.25rem 1.5rem;
}
.exam-options { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.exam-option-label {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .55rem .85rem; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--border); font-size: .9rem;
  transition: border-color .15s, background .15s;
}
.exam-option-label:hover { border-color: var(--brand-400); background: var(--surface-raised); }
.exam-option-label input[type="radio"] { margin-top: .15rem; accent-color: var(--brand-500); }
.exam-option-label input[type="radio"]:checked ~ * { color: var(--brand-600); }
.exam-option-label:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50, #f0f7ff); }
.exam-option-letter { font-weight: 700; color: var(--brand-500); min-width: 1.4rem; }
.exam-input-group  { margin-top: .75rem; display: flex; flex-direction: column; gap: .35rem; }
.exam-input-label  { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.exam-input        { width: 100%; padding: .6rem .85rem; border-radius: 8px; border: 1.5px solid var(--border);
                     background: var(--surface); color: var(--text-body); font-size: .9rem; }
.exam-input:focus  { outline: none; border-color: var(--brand-500); }
.exam-textarea     { width: 100%; padding: .6rem .85rem; border-radius: 8px; border: 1.5px solid var(--border);
                     background: var(--surface); color: var(--text-body); font-size: .9rem;
                     resize: vertical; font-family: inherit; }
.exam-textarea:focus { outline: none; border-color: var(--brand-500); }
.exam-submit-bar   { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                     padding: 1rem 1.25rem; background: var(--surface-card); border: 1px solid var(--border);
                     border-radius: 12px; }
.exam-submit-info  { font-size: .83rem; color: var(--text-muted); }
.exam-submit-btn   { font-size: .95rem; padding: .65rem 1.75rem; }

/* ── Results page ── */
.page-header--compact {
  padding-bottom: .75rem;
  margin-bottom: 1rem;
}
.page-title--sm { font-size: 1.15rem; }
.page-subtitle--sm { font-size: .8rem; margin-top: .15rem; }

.results-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .85rem 1rem;
  margin-bottom: 1rem;
}
.results-summary--with-chart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 36%);
  grid-template-rows: auto auto;
  gap: .5rem .85rem;
  align-items: center;
}
.results-summary-score {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex: 1 1 auto;
  min-width: 0;
}
.results-summary-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  min-width: 0;
}
.results-summary-retake {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  flex: 0 1 auto;
  margin-left: auto;
}
.results-summary--with-chart .results-summary-score { grid-column: 1; grid-row: 1; }
.results-summary--with-chart .results-summary-retake { grid-column: 1; grid-row: 2; justify-content: flex-start; margin-left: 0; }
.results-summary--with-chart .results-chart-card--compact { grid-column: 2; grid-row: 1 / span 2; margin: 0; }

.results-score-main { display: flex; align-items: baseline; gap: .2rem; flex-shrink: 0; }
.results-score-num  { font-size: 2rem; font-weight: 800; color: var(--brand-600); line-height: 1; }
.results-score-sep  { font-size: 1.15rem; color: var(--text-muted); }
.results-score-denom { font-size: 1.15rem; font-weight: 700; color: var(--text-muted); }
.results-score-pct  { width: 100%; max-width: 140px; display: flex; align-items: center; gap: .45rem; }
.results-pct-bar    { flex: 1; height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; }
.results-pct-fill   { height: 100%; background: var(--brand-500); border-radius: 99px; transition: width .6s ease; }
.results-pct-label  { font-weight: 700; font-size: .8rem; min-width: 2rem; }
.results-grade-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem;
                       border-radius: 20px; font-weight: 700; font-size: .75rem; white-space: nowrap; }

.results-retake-text {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.results-retake-text i { font-size: .9rem; color: var(--brand-500); }
.results-retake-text--muted i { color: var(--text-muted); }
.btn-retake--compact {
  padding: .35rem .75rem;
  font-size: .78rem;
  border-radius: 6px;
  white-space: nowrap;
}
.grade-a { background: #ecfdf5; color: #065f46; border: 1.5px solid #10b981; }
.grade-b { background: #eff6ff; color: #1d4ed8; border: 1.5px solid #3b82f6; }
.grade-c { background: #fff8e1; color: #b45309; border: 1.5px solid #f59e0b; }
.grade-d { background: #fef2f2; color: #991b1b; border: 1.5px solid #f87171; }

.results-breakdown { display: flex; flex-direction: column; gap: .85rem; }
.results-breakdown-title { font-size: 1rem; font-weight: 700; color: var(--text-heading); margin-bottom: .25rem; }

.ws-answer-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .65rem;
  margin: 0 0 .35rem;
}
.ws-answer-filter-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ws-answer-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.ws-answer-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-card);
  color: var(--text-main);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ws-answer-filter-btn:hover {
  border-color: var(--brand-400, #818cf8);
  color: var(--brand-600, #4f46e5);
}
.ws-answer-filter-btn.is-active {
  background: var(--brand-500, #6366f1);
  border-color: var(--brand-500, #6366f1);
  color: #fff;
}
.ws-answer-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 .25rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  background: rgba(0, 0, 0, .08);
}
.ws-answer-filter-btn.is-active .ws-answer-filter-count {
  background: rgba(255, 255, 255, .22);
}
.ws-answer-filter-empty {
  margin: .25rem 0 .5rem;
  padding: .75rem 1rem;
  text-align: center;
  font-size: .85rem;
  color: var(--text-muted);
  background: var(--surface-card);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.iw-results-list .ws-answer-filter {
  margin-bottom: .65rem;
}

[data-answer-outcome][hidden] {
  display: none !important;
}
.results-q-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.35rem; }
.result-correct  { border-left: 4px solid #10b981; }
.result-wrong    { border-left: 4px solid #f87171; }
.result-pending  { border-left: 4px solid #f59e0b; }
.result-skipped  { border-left: 4px solid var(--border); opacity: .85; }
.text-warning    { color: #f59e0b !important; }

.ai-feedback {
  margin-top: .6rem;
  padding: .55rem .85rem;
  background: linear-gradient(90deg, #eef2ff, #f5f3ff);
  border-left: 3px solid #6366f1;
  border-radius: 8px;
  font-size: .85rem;
  color: #312e81;
  display: flex;
  gap: .45rem;
  align-items: flex-start;
}
[data-theme="dark"] .ai-feedback { background: #1e1b4b; color: #c7d2fe; }

.ai-reeval-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .25rem 0 1rem;
  flex-wrap: wrap;
}
.ai-reeval-hint { font-size: .8rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: .3rem; }

.ai-grading-banner {
  margin: .75rem 0 1rem;
  padding: .65rem 1rem;
  border-radius: 8px;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ai-grading-banner--queued,
.ai-grading-banner--processing { background: #eef2ff; color: #3730a3; }
.ai-grading-banner--completed  { background: #ecfdf5; color: #065f46; }
.ai-grading-banner--failed     { background: #fef2f2; color: #991b1b; }
[data-theme="dark"] .ai-grading-banner--queued,
[data-theme="dark"] .ai-grading-banner--processing { background: #1e1b4b; color: #c7d2fe; }
[data-theme="dark"] .ai-grading-banner--completed  { background: #022c22; color: #86efac; }
[data-theme="dark"] .ai-grading-banner--failed     { background: #450a0a; color: #fca5a5; }

.ai-suggestion {
  margin: .6rem 0;
  padding: .55rem .85rem;
  border-radius: 8px;
  font-size: .85rem;
  background: #eef2ff;
  color: #312e81;
  border-left: 3px solid #6366f1;
}
.ai-suggestion--low    { border-left-color: #f59e0b; }
.ai-suggestion--medium { border-left-color: #6366f1; }
.ai-suggestion--high   { border-left-color: #10b981; }
.ai-suggestion--pending { background: #fef3c7; color: #92400e; border-left-color: #f59e0b; }
.ai-suggestion--failed  { background: #fef2f2; color: #991b1b; border-left-color: #ef4444; }
.ai-suggestion-head { font-weight: 600; display: flex; gap: .35rem; align-items: center; }
.ai-suggestion-body { margin: .3rem 0 0; font-weight: 400; }
.ai-confidence { font-size: .75rem; font-weight: 400; opacity: .8; margin-left: .25rem; }
[data-theme="dark"] .ai-suggestion { background: #1e1b4b; color: #c7d2fe; }
.results-q-header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.results-q-score { margin-left: auto; font-weight: 600; font-size: .85rem; }
.results-user-answer { margin-top: .6rem; padding: .5rem .85rem; background: var(--surface); border-radius: 8px; font-size: .85rem; }
.results-correct-answer { margin-top: .4rem; padding: .5rem .85rem; background: #ecfdf5; border-radius: 8px; font-size: .85rem; color: #065f46; }
[data-theme="dark"] .results-correct-answer { background: #022c22; color: #34d399; }
/* ── Admin: Student Attempts ── */
.attempt-summary-strip { display: flex; flex-wrap: wrap; gap: 1rem; background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.4rem; margin-bottom: 1.25rem; }
.attempt-stat { display: flex; flex-direction: column; gap: .15rem; min-width: 100px; }
.attempt-stat-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.attempt-stat-value { font-size: .95rem; font-weight: 600; color: var(--text-heading); }
.attempt-pct { font-size: .8rem; font-weight: 400; color: var(--text-muted); margin-left: .2rem; }
.badge-attempt { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; font-size: .72rem; font-weight: 700; padding: .1rem .5rem; color: var(--text-muted); }
.score-cell { font-weight: 700; font-size: .85rem; }
.score-pass { color: #059669; }
.score-fail { color: #dc2626; }
.admin-marks-row { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; padding-top: .65rem; border-top: 1px dashed var(--border); }
.admin-marks-label { font-size: .78rem; color: var(--text-muted); display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.admin-marks-input { width: 70px; padding: .2rem .5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-main); font-size: .85rem; text-align: center; }
.admin-marks-max { font-size: .82rem; color: var(--text-muted); }
.admin-attempt-save-bar { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; margin-top: .5rem; }
.admin-marks-hint { font-size: .78rem; color: var(--text-muted); }
.admin-attempt-form { display: contents; }
.ws-cell { display: flex; flex-direction: column; gap: .1rem; }
.ws-title { font-weight: 500; }
/* ── */
.results-review-note { font-size: .7rem; font-weight: 500; color: var(--brand); margin-left: .25rem; vertical-align: middle; }
.results-review-notice { margin-top: .6rem; padding: .4rem .75rem; background: #fffbeb; border-radius: 6px; font-size: .78rem; color: #92400e; display: flex; align-items: center; gap: .4rem; }
[data-theme="dark"] .results-review-notice { background: #451a03; color: #fcd34d; }
.exam-no-ref-notice { margin-bottom: .75rem; padding: .5rem .85rem; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; font-size: .82rem; color: #9a3412; display: flex; align-items: center; gap: .5rem; }
[data-theme="dark"] .exam-no-ref-notice { background: #431407; border-color: #7c2d12; color: #fdba74; }
.text-success { color: #10b981 !important; }
.text-danger  { color: #f87171 !important; }
.text-muted   { color: var(--text-muted) !important; }

.btn-retake {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.25rem; border-radius: 8px; font-size: .9rem; font-weight: 600;
  background: var(--brand-500); color: #fff; border: none; cursor: pointer;
  text-decoration: none; transition: background .15s;
}
.btn-retake:hover { background: var(--brand-600); color: #fff; }

/* ── Results – Performance chart ── */
.results-chart-card {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.results-chart-card--compact {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  padding: 0 0 0 .75rem;
  margin-bottom: 0;
}
.results-chart-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .35rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.results-chart-wrap {
  margin-top: .75rem;
  position: relative;
  min-height: 200px;
  height: 220px;
}
.results-chart-card--compact .results-chart-wrap {
  margin-top: 0;
  min-height: 88px;
  height: 96px;
}
.performance-chart-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.results-chart-fallback {
  margin: 0;
  padding: 1rem;
  text-align: center;
  font-size: .9rem;
  color: var(--text-muted);
}
.results-chart-fallback i { margin-right: .35rem; }

@media (max-width: 640px) {
  .results-summary--with-chart {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .results-summary--with-chart .results-summary-score,
  .results-summary--with-chart .results-summary-retake,
  .results-summary--with-chart .results-chart-card--compact {
    grid-column: 1;
    grid-row: auto;
  }
  .results-summary--with-chart .results-chart-card--compact {
    border-left: none;
    border-top: 1px solid var(--border);
    padding: .65rem 0 0;
    margin-top: .25rem;
  }
  .results-summary-retake {
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .iw-results-summary--with-chart {
    grid-template-columns: 1fr;
  }
  .iw-results-summary--with-chart .results-chart-card--compact {
    border-left: none;
    border-top: 2px dashed #fde68a;
    padding: .55rem 0 0;
    margin-top: .35rem;
  }
  .iw-results-summary-top {
    flex-wrap: wrap;
  }
}

/* ── Profile page – redesigned ── */
.profile-layout { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; }

.profile-hero {
  display: flex; align-items: center; gap: 1.25rem;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.5rem 1.75rem;
}
.profile-avatar-xl {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800;
}
.profile-hero-info { display: flex; flex-direction: column; gap: .2rem; }
.profile-hero-name  { font-size: 1.2rem; font-weight: 700; color: var(--text-heading); margin: 0; }
.profile-hero-email { font-size: .88rem; color: var(--text-muted); margin: 0; }
.profile-hero-since { font-size: .78rem; color: var(--text-muted); margin: 0; }

.profile-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.profile-detail-card {
  display: flex; align-items: flex-start; gap: .85rem;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.1rem 1.25rem;
}
.profile-detail-icon {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  background: var(--brand-50, #eff6ff); color: var(--brand-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
[data-theme="dark"] .profile-detail-icon { background: color-mix(in srgb, var(--brand-500) 15%, transparent); }
.profile-detail-label { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .2rem; }
.profile-detail-value { font-size: .95rem; font-weight: 500; color: var(--text-heading); margin: 0; }
.profile-nudge-link   { font-size: .82rem; color: var(--brand-500); text-decoration: none; margin-left: .4rem; }
.profile-nudge-link:hover { text-decoration: underline; }

.profile-edit-page {
  width: 100%;
}

.profile-edit-card {
  padding: 1.5rem 1.75rem;
  width: 100%;
}

.profile-edit-card--narrow {
  max-width: 560px;
}

.profile-edit-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.profile-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.25rem 1.5rem;
  width: 100%;
}

@media (min-width: 900px) {
  .profile-edit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-edit-grid-span-2 {
    grid-column: span 2;
  }
}

.profile-edit-grid-heading {
  grid-column: 1 / -1;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0.5rem 0 0;
  padding-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.profile-edit-grid-heading:first-child {
  margin-top: 0;
  padding-top: 0;
}

.profile-edit-grid-heading i {
  color: var(--text-muted);
  font-size: .875rem;
}

.profile-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}

.form-errors-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.875rem;
}

[data-theme="dark"] .form-errors-summary {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #f87171;
}

.form-errors-summary-title {
  font-weight: 600;
  margin: 0 0 0.35rem;
}

.form-errors-summary ul {
  margin: 0;
  padding-left: 1.1rem;
}

.form-errors-summary > i {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.field-input.is-invalid {
  border-color: #ef4444;
}

[data-theme="dark"] .field-input.is-invalid {
  border-color: #f87171;
}

@media (max-width: 768px) {
  .profile-edit-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-edit-actions .btn-primary-action,
  .profile-edit-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ── Worksheet show — compact action group ── */
.ws-action-group {
  display: flex; align-items: center;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.ws-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  color: var(--text-muted); font-size: .95rem;
  background: transparent; text-decoration: none;
  transition: color .15s, background .15s;
  border-right: 1px solid var(--border);
}
.ws-icon-btn:last-child { border-right: none; }
.ws-icon-btn:hover { color: var(--brand-500); background: var(--surface-raised); }

.btn-publish {
  color: #10b981 !important;
  border-color: #10b981 !important;
}
.btn-publish:hover { background: #10b981 !important; color: #fff !important; }

/* ── Disabled button state ── */
.btn-disabled,
button:disabled.btn-ghost { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ── Filter bar — search input variant ── */
.filter-search-wrap {
  position: relative; display: flex; align-items: center; flex: 1; min-width: 180px; max-width: 300px;
}
.filter-search-icon {
  position: absolute; left: .75rem; color: var(--text-muted); font-size: .85rem; pointer-events: none;
}
.filter-search-input {
  width: 100%; height: 36px;
  padding: 0 .75rem 0 2.1rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font-size: .875rem; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.filter-search-input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 15%, transparent);
}

/* ── Pagination ── */
.pg-nav {
  display: flex; align-items: center; justify-content: center;
  gap: .25rem; padding: 1rem 0 .25rem;
  flex-wrap: wrap;
}
.pg-item { display: inline-flex; }
.pg-link, .pg-item--active span {
  display: flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 .5rem;
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: .875rem; font-weight: 500;
  text-decoration: none; background: var(--surface);
  transition: background .15s, color .15s, border-color .15s;
}
.pg-link:hover { background: var(--surface-raised); border-color: var(--brand-500); color: var(--brand-500); }
.pg-item--active span {
  background: transparent; border: 2px solid var(--brand-500);
  color: var(--brand-500); font-weight: 700; cursor: default;
}
.pg-gap {
  display: flex; align-items: center; padding: 0 .35rem;
  color: var(--text-muted); font-size: .875rem; user-select: none;
}
.tbl-badge-pro {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; font-weight: 600;
}

/* ═══════════════════════════════════════════════
   PLAN SYSTEM
   ═══════════════════════════════════════════════ */

/* ── Admin: plan master cards grid ── */
.plan-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem;
}
.plan-master-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
}
.plan-master-card--inactive { opacity: .6; }
.plan-master-card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.plan-master-name { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0; }
.plan-master-slug { font-size: .75rem; color: var(--text-muted); font-family: monospace; }

.field-input-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .875rem; }
.plan-master-desc { font-size: .875rem; color: var(--text-muted); margin: 0; }
.plan-price-tag {
  display: inline-flex; align-items: center; padding: .25rem .75rem;
  border-radius: 999px; font-size: .8rem; font-weight: 700;
}
.plan-price-free { background: #d1fae5; color: #065f46; }
.plan-price-paid { background: linear-gradient(135deg,#fef3c7,#fde68a); color: #78350f; }

.plan-master-stats { display: flex; gap: 1.5rem; }
.plan-stat-item { display: flex; flex-direction: column; gap: .1rem; }
.plan-stat-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.plan-stat-val { font-size: 1rem; font-weight: 700; color: var(--text); }

.plan-features-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.plan-features-list li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-muted); }
.plan-features-list li i { color: #10b981; font-size: .8rem; flex-shrink: 0; }

.plan-master-actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--border); }

/* ── Admin users: inline plan select ── */
.plan-select-form { margin: 0; }
.plan-select-inline {
  height: 30px; padding: 0 .5rem; font-size: .8rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color .15s;
}
.plan-select-inline:hover { border-color: var(--brand-500); }
.plan-select-inline:focus { outline: none; border-color: var(--brand-500); }

/* ── Build view: plan usage banner ── */
.plan-usage-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .875rem 1.25rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; margin-bottom: 1.25rem;
}
.plan-usage-banner--warning {
  background: #fffbeb; border-color: #f59e0b;
}
[data-theme="dark"] .plan-usage-banner--warning {
  background: rgba(245,158,11,.12); border-color: #f59e0b;
}
.plan-usage-left { display: flex; align-items: center; gap: .875rem; flex: 1; }
.plan-usage-icon { font-size: 1.25rem; color: var(--brand-500); }
.plan-usage-banner--warning .plan-usage-icon { color: #f59e0b; }
.plan-usage-title { margin: 0 0 .4rem; font-size: .875rem; color: var(--text); }
.plan-usage-bar-wrap {
  width: 100%; max-width: 240px; height: 6px;
  background: var(--border); border-radius: 3px; overflow: hidden;
}
.plan-usage-bar {
  height: 100%; background: var(--brand-500); border-radius: 3px;
  transition: width .4s ease;
}
.plan-usage-banner--warning .plan-usage-bar { background: #f59e0b; }
.plan-usage-cta { font-size: .8rem; color: #92400e; white-space: nowrap; font-weight: 500; }

/* ── Profile: plan card ── */
.plan-profile-card {
  display: flex; gap: 2rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.5rem; margin-top: 1.5rem;
}
.plan-profile-left { flex: 1; display: flex; flex-direction: column; gap: .75rem; }
.plan-profile-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem 1rem; border-radius: 999px;
  font-size: .875rem; font-weight: 700;
}
.plan-badge-free { background: #d1fae5; color: #065f46; }
.plan-badge-pro  { background: linear-gradient(135deg,#fef3c7,#fde68a); color: #78350f; }
.plan-profile-desc { font-size: .875rem; color: var(--text-muted); margin: 0; }
.plan-profile-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.plan-profile-features li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-muted); }
.plan-profile-features li i { color: #10b981; font-size: .8rem; }
.plan-profile-usage { min-width: 160px; display: flex; flex-direction: column; gap: .5rem; }
.plan-profile-usage-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0; }
.plan-profile-usage-val { font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 0; }
.plan-profile-upgrade-hint { font-size: .78rem; color: #d97706; display: flex; align-items: center; gap: .35rem; margin: 0; }
.plan-profile-limit-reached { font-size: .78rem; color: #dc2626; display: flex; align-items: center; gap: .35rem; margin: 0; }
.credit-breakdown { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .82rem; color: var(--text-muted); }
.credit-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.credit-sources-list { display: flex; flex-direction: column; gap: .75rem; }
.credit-source-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .875rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1);
}
.credit-source-stats { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; color: var(--text-muted); }
.credit-ledger-table-wrap { overflow-x: auto; }

/* ── Subscription checkout ── */
.plan-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem; margin: 1rem 0 1.25rem;
}
.plan-picker-card {
  display: block; border: 2px solid var(--border); border-radius: 12px;
  padding: 1rem 1.1rem; cursor: pointer; background: var(--surface-1);
  transition: border-color .15s, box-shadow .15s;
}
.plan-picker-card:has(.plan-picker-radio:checked),
.plan-picker-card-selected {
  border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.plan-picker-radio { margin-right: .5rem; }
.plan-picker-name { font-weight: 700; margin: 0 0 .25rem; }
.plan-picker-price { font-size: 1.1rem; font-weight: 600; color: var(--brand-600,#0369a1); margin: 0 0 .5rem; }
.plan-picker-desc { font-size: .85rem; color: var(--text-muted); margin: 0 0 .5rem; }
.plan-picker-features { list-style: none; padding: 0; margin: 0; font-size: .82rem; color: var(--text-muted); }
.plan-picker-features li { display: flex; gap: .35rem; align-items: flex-start; margin-bottom: .25rem; }
.plan-picker-features li i { color: #10b981; flex-shrink: 0; margin-top: .15rem; }
.checkout-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .5rem 0; font-size: .95rem;
}
.checkout-label { color: var(--text-muted); }
.checkout-value { font-weight: 600; }
.checkout-line-discount .checkout-value { color: #059669; }
.checkout-line-total { border-top: 1px solid var(--border); margin-top: .5rem; padding-top: .75rem; font-size: 1.05rem; }
.checkout-divider { margin: 1.25rem 0; border: none; border-top: 1px solid var(--border); }
.checkout-coupon-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.checkout-coupon-row .field-input { flex: 1; min-width: 160px; }

/* ── Role picker (registration) ── */
.role-picker { display: flex; gap: .75rem; margin-top: .35rem; }
.role-picker-option {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem 1rem; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--border); background: var(--surface-1);
  font-size: .9rem; font-weight: 500; color: var(--text-muted);
  transition: all .15s;
}
.role-picker-option:has(.role-picker-radio:checked) {
  border-color: var(--brand-500); background: var(--brand-50,#f0f9ff); color: var(--brand-600,#0369a1);
}
.role-picker-radio { display: none; }

/* ── Auth login method tabs ── */
.auth-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.auth-tab {
  flex: 1;
  text-align: center;
  padding: .65rem 1rem;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--surface-1);
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: all .15s;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-tab:hover { color: var(--brand-600,#0369a1); border-color: var(--brand-300,#93c5fd); }
.auth-tab--active {
  border-color: var(--brand-500);
  background: var(--brand-50,#f0f9ff);
  color: var(--brand-600,#0369a1);
}

@media (max-width: 576px) {
  .btn-auth { min-height: 44px; }
}

/* ── Parent dashboard ── */
.parent-empty-hero {
  text-align: center; padding: 3.5rem 1rem;
  background: var(--surface-1); border: 1px dashed var(--border);
  border-radius: 16px;
}
.parent-empty-icon {
  font-size: 2.5rem; color: var(--brand-400,#60a5fa);
  margin-bottom: .75rem;
}
.parent-empty-hero h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .35rem; }
.parent-empty-hero p  { font-size: .88rem; color: var(--text-muted); margin-bottom: 1rem; }
.parent-ws-empty {
  display: flex; align-items: center; gap: .4rem;
  padding: 1rem 1.25rem; border-radius: 10px;
  background: var(--surface-1); border: 1px dashed var(--border);
  font-size: .88rem; color: var(--text-muted);
}

.parent-children-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}

/* pcc = parent child card */
.pcc {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.pcc:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-2px); }
.pcc-top {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1.1rem 1.25rem .75rem;
}
.pcc-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-400,#60a5fa));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 700;
}
.pcc-info { flex: 1; min-width: 0; }
.pcc-name {
  font-size: .88rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcc-tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .3rem; }
.pcc-tag {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .7rem; color: var(--text-muted);
  background: var(--surface-2,#f3f4f6); border-radius: 4px; padding: .1rem .4rem;
}
.pcc-stats {
  display: flex; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.pcc-stat {
  flex: 1; text-align: center; padding: .65rem .5rem;
}
.pcc-stat + .pcc-stat { border-left: 1px solid var(--border); }
.pcc-stat-num { display: block; font-size: 1.15rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.pcc-stat-lbl { display: block; font-size: .67rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .15rem; }
.pcc-footer { padding: .6rem 1.25rem; display: flex; justify-content: flex-end; }
.pcc-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 600; color: var(--brand-500);
  text-decoration: none; padding: .28rem .65rem;
  border: 1px solid var(--brand-200,#bfdbfe); border-radius: 6px;
  background: var(--brand-50,#eff6ff);
  transition: background .12s, border-color .12s;
}
.pcc-btn:hover { background: var(--brand-100,#dbeafe); border-color: var(--brand-500); color: var(--brand-600); }

/* Parent dashboard — mobile layout */
@media (max-width: 640px) {
  .parent-dashboard .parent-dashboard-header {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
  }

  .parent-dashboard .parent-dashboard-header > div:first-child {
    min-width: 0;
  }

  .parent-dashboard .page-header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }

  .parent-dashboard .page-header-actions .btn-ghost,
  .parent-dashboard .page-header-actions .btn-primary-action {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: .65rem 1rem;
    font-size: .875rem;
  }

  .parent-dashboard .parent-children-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .parent-dashboard .pcc-footer {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    padding: .75rem 1rem;
  }

  .parent-dashboard .pcc-footer .pcc-btn,
  .parent-dashboard .pcc-footer .pcc-btn-secondary {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: .65rem 1rem;
    margin-left: 0;
    font-size: .8125rem;
  }

  .parent-dashboard .pcc-stat-lbl {
    font-size: .6rem;
    letter-spacing: .03em;
  }

  .parent-dashboard .activity-row {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }

  .parent-dashboard .activity-right {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .5rem;
  }

  .parent-dashboard .section-header {
    flex-wrap: wrap;
    gap: .5rem;
    align-items: flex-start;
  }

  .parent-dashboard .alert-banner {
    flex-wrap: wrap;
    gap: .5rem;
    align-items: flex-start;
  }

  .parent-dashboard .alert-banner-link {
    margin-left: 0;
    width: 100%;
  }

  .parent-dashboard .ws-card-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .parent-dashboard .parent-ws-empty {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }

  .parent-dashboard .parent-ws-empty .btn-sm-action {
    margin-left: 0 !important;
    min-height: 44px;
    padding: .65rem 1rem;
    justify-content: center;
    width: 100%;
  }

  .parent-dashboard .parent-empty-hero .btn-primary-action {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: .65rem 1rem;
  }
}

/* ── Parent worksheet assign panel ── */
.two-col-layout { display: flex; gap: 1.5rem; align-items: flex-start; }
.two-col-main { flex: 1; min-width: 0; }
.two-col-side { width: 280px; flex-shrink: 0; }
@media (max-width: 768px) { .two-col-layout { flex-direction: column; } .two-col-side { width: 100%; } }

/* Parent worksheet — assign to children */
.parent-assign-children { margin-bottom: 0; }
.parent-assign-children .settings-card-body { padding: .75rem; gap: .75rem; }
.parent-assign-form { display: flex; flex-direction: column; gap: .75rem; }
.parent-assign-list { display: flex; flex-direction: column; gap: .5rem; }
.parent-assign-child {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface,#fff);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.parent-assign-child:hover:not(.is-assigned) {
  border-color: var(--brand-300,#a5b4fc);
  background: var(--brand-50,#f5f3ff);
}
.parent-assign-child.is-assigned {
  border-color: var(--brand-400,#818cf8);
  background: var(--brand-50,#eef2ff);
  cursor: default;
}
.parent-assign-child-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-400,#60a5fa));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 700;
}
.parent-assign-child.is-assigned .parent-assign-child-avatar {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}
.parent-assign-child-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.parent-assign-child-name {
  font-size: .9rem; font-weight: 600; color: var(--text-heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.parent-assign-child-handle {
  font-size: .75rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.parent-assign-child-status {
  display: flex; align-items: center; gap: .4rem; flex-shrink: 0;
}
.parent-assign-check { color: #22c55e; font-size: 1.1rem; line-height: 1; }
.parent-assign-checkbox {
  width: 1.1rem; height: 1.1rem; flex-shrink: 0;
  accent-color: var(--brand-500);
  cursor: pointer;
}
.parent-assign-child.is-assigned .parent-assign-checkbox { cursor: default; opacity: .7; }
.parent-assign-submit { margin-top: .15rem; }
.parent-assign-empty {
  text-align: center; padding: 1.25rem .5rem;
  color: var(--text-muted); font-size: .875rem;
}
.parent-assign-empty-icon {
  font-size: 1.75rem; color: var(--text-muted); opacity: .6; margin-bottom: .5rem;
}
.parent-assign-empty p { margin: 0 0 .75rem; }

/* Parent worksheet show — mobile header & assign panel */
.parent-worksheet-mobile-bar,
.parent-worksheet-mobile-subtitle { display: none; }

@media (max-width: 767px) {
  .parent-worksheet-header {
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
  }

  .parent-worksheet-mobile-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .parent-worksheet-desktop-heading,
  .parent-worksheet-desktop-actions { display: none !important; }

  .parent-worksheet-mobile-subtitle {
    display: block;
    margin: 0;
    font-size: .75rem;
    line-height: 1.45;
  }

  .parent-worksheet-back,
  .parent-worksheet-actions-btn {
    flex-shrink: 0;
    padding: .45rem .6rem;
    min-height: 44px;
  }

  .parent-worksheet-back .bi,
  .parent-worksheet-actions-btn .bi { font-size: 1rem; }

  .parent-worksheet-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .parent-worksheet-actions { flex-shrink: 0; }

  .parent-worksheet-actions-label { display: none; }

  .parent-worksheet-actions-menu {
    min-width: 12rem;
    margin-top: .35rem !important;
  }

  /* Collapse assign panel until opened from Actions menu */
  .two-col-side .parent-assign-children {
    display: none;
    scroll-margin-top: 5.5rem;
  }

  .two-col-side .parent-assign-children:target {
    display: block;
  }

  .parent-assign-children .settings-card-body { padding: .85rem; }

  .parent-assign-child {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: .35rem .75rem;
    padding: .75rem;
    min-height: 44px;
  }

  .parent-assign-child-avatar { grid-row: 1 / -1; }

  .parent-assign-child-info {
    grid-column: 2;
    grid-row: 1;
  }

  .parent-assign-child-status {
    grid-column: 2;
    grid-row: 2;
    flex-wrap: wrap;
    gap: .35rem;
  }

  .parent-assign-checkbox {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: center;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    padding: .5rem;
    box-sizing: content-box;
  }

  .parent-assign-submit {
    min-height: 44px;
    font-size: .9375rem;
  }
}

@media (max-width: 400px) {
  .parent-worksheet-back-label { display: none; }
}

/* ── Section header (parent dash) ── */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.section-title { font-size: 1rem; font-weight: 700; margin: 0; }
.section-link { font-size: .82rem; color: var(--brand-500); text-decoration: none; }
.section-link:hover { text-decoration: underline; }
.section-count { font-size: .78rem; color: var(--text-muted); background: var(--surface-2,#f4f4f5); border: 1px solid var(--border); border-radius: 999px; padding: .15rem .6rem; }

/* ── Parent child card enhancements ── */
.pcc-avatar-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg,var(--brand-500),var(--brand-700,#6d28d9));
  color: #fff; font-size: .75rem; font-weight: 700; margin-right: .4rem;
  vertical-align: middle;
}
.pcc-tag-purple { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.pcc-btn-secondary {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 600; color: var(--text-muted);
  text-decoration: none; padding: .28rem .65rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface,#fff);
  transition: background .12s, border-color .12s;
  margin-left: .4rem;
}
.pcc-btn-secondary:hover { background: var(--surface-2,#f4f4f5); border-color: var(--text-muted); color: var(--text); }
.pcc-footer { padding: .6rem 1.25rem; display: flex; align-items: center; }

.pcc-score-bar-wrap { height: 5px; background: var(--border); margin: 0 1.25rem .2rem; border-radius: 999px; overflow: hidden; }
.pcc-score-bar-fill { height: 100%; border-radius: 999px; transition: width .4s; }

/* ── Progress stat row (child progress page) ── */
.progress-stats-row {
  display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.progress-stat-card {
  flex: 1; min-width: 120px;
  display: flex; align-items: center; gap: .75rem;
  background: var(--surface,#fff); border: 1px solid var(--border);
  border-radius: 12px; padding: .85rem 1rem;
}
.progress-stat-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.psi-blue   { background: #dbeafe; color: #2563eb; }
.psi-green  { background: #d1fae5; color: #059669; }
.psi-amber  { background: #fef3c7; color: #d97706; }
.psi-red    { background: #fee2e2; color: #dc2626; }
.psi-slate  { background: var(--surface-2,#f4f4f5); color: var(--text-muted); }
.psi-purple { background: #f5f3ff; color: #7c3aed; }
.progress-stat-num { font-size: 1.25rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.progress-stat-lbl { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .1rem; }

/* ── Progress worksheet list ── */
.progress-ws-list { display: flex; flex-direction: column; gap: .5rem; }
.progress-ws-row {
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface,#fff); border: 1px solid var(--border);
  border-radius: 10px; padding: .85rem 1.1rem;
}
.progress-ws-meta { flex: 1; min-width: 0; }
.progress-ws-title { font-weight: 600; font-size: .93rem; color: var(--text); margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-ws-tags  { display: flex; gap: .3rem; flex-wrap: wrap; }
.progress-ws-right {
  display: flex; align-items: center; gap: .75rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end;
}
.progress-ws-score { font-size: .83rem; white-space: nowrap; }
.progress-ws-date  { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }

/* ── Score progress bar ── */
.progress-bar-wrap { width: 90px; height: 7px; background: var(--border); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.progress-bar-fill { height: 100%; border-radius: 999px; transition: width .4s; }
.pbf-green { background: #10b981; }
.pbf-red   { background: #f87171; }
.activity-bar { width: 60px; }

/* ── Recent activity list ── */
.activity-list { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.activity-row {
  display: flex; align-items: center; gap: .85rem;
  background: var(--surface,#fff); border: 1px solid var(--border);
  border-radius: 10px; padding: .7rem 1rem;
}
.activity-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,var(--brand-500),var(--brand-700,#6d28d9));
  color: #fff; font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.activity-body  { flex: 1; min-width: 0; }
.activity-child { font-size: .73rem; color: var(--text-muted); margin-bottom: .1rem; }
.activity-ws    { font-weight: 600; font-size: .88rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-tags  { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .25rem; }
.activity-right {
  display: flex; align-items: center; gap: .6rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end;
}
.activity-score { font-size: .83rem; font-weight: 700; white-space: nowrap; }
.activity-time  { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }

.text-amber { color: #d97706 !important; }

/* ── Attempt question blocks (reuse in parent show) ── */
.attempt-q-block { border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: .85rem; }
.attempt-q-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.attempt-q-num { font-weight: 700; font-size: .82rem; color: var(--brand-500); }
.attempt-q-type { font-size: .72rem; background: var(--surface-2,#f3f4f6); padding: .15rem .45rem; border-radius: 4px; color: var(--text-muted); }
.attempt-q-marks { margin-left: auto; font-size: .78rem; color: var(--text-muted); }
.attempt-q-content { font-size: .9rem; line-height: 1.55; }
.attempt-options-list { margin: .5rem 0 0; padding-left: 1.2rem; font-size: .85rem; color: var(--text-muted); }
.attempt-opt-correct { font-weight: 600; color: #059669; }
.attempt-model-answer { font-size: .82rem; color: var(--text-muted); margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--border); }

/* ── Verification badge (pending children) ── */
.badge-pending {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; color: #92400e;
}

/* ── Alert banner (pending link notice) ── */
.alert-banner {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem 1rem; border-radius: 10px;
  font-size: .88rem; font-weight: 500;
}
.alert-pending {
  background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
}
.alert-banner-link {
  margin-left: auto; color: #92400e; font-weight: 700; text-decoration: none;
  display: flex; align-items: center; gap: .25rem;
}
.alert-banner-link:hover { text-decoration: underline; }

/* ── Verify actions page ── */
.verify-info-box {
  background: var(--surface-2,#f8fafc); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem 1.25rem; margin: 1rem 0; font-size: .9rem;
}
.verify-info-box ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.verify-info-box li { margin-bottom: .3rem; }
.verify-actions { display: flex; flex-direction: column; gap: .5rem; margin: 1.5rem 0; }
.admin-table-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.admin-table-actions form {
  display: contents;
  margin: 0;
}
.admin-table-actions--nowrap {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* ── Invitation page specific ── */
.badge-count-urgent {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #fee2e2; color: #dc2626;
  font-size: .78rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 8px; border: 1px solid #fca5a5;
}
.text-purple { color: #7c3aed !important; }
[data-theme="dark"] .text-purple { color: #a78bfa !important; }

/* ── External API logs ── */
.api-log-pre {
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-size: 0.78rem;
  line-height: 1.45;
  max-height: 28rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 0;
}
[data-theme="dark"] .api-log-pre {
  background: var(--surface-2, #1e293b);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Interactive worksheets (Class 1–2) — playful, touch-friendly layout
   ═══════════════════════════════════════════════════════════════════════════ */

.iw-html, .iw-body {
  font-family: "Nunito", system-ui, sans-serif;
}

.iw-body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(165deg, #fff7ed 0%, #fef3c7 35%, #e0f2fe 100%);
  color: #1e293b;
}

.iw-topbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid #fde68a;
  position: sticky;
  top: 0;
  z-index: 100;
}

.iw-topbar-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid #fcd34d;
  color: #b45309;
  text-decoration: none;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.iw-topbar-back:hover { background: #fffbeb; color: #92400e; }

.iw-topbar-title {
  flex: 1;
  font-weight: 800;
  font-size: 1rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #0f172a;
}

.iw-avatar {
  width: 36px;
  height: 36px;
  font-size: .85rem;
}

.iw-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1rem 2.5rem;
}

.iw-flash {
  margin: .5rem 1rem 0;
  padding: .65rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.iw-flash--notice { background: #dcfce7; color: #166534; border: 2px solid #86efac; }
.iw-flash--alert  { background: #fee2e2; color: #991b1b; border: 2px solid #fca5a5; }

.iw-hero {
  text-align: center;
  padding: .5rem 0 1.25rem;
}
.iw-hero-icon { font-size: 2.75rem; line-height: 1; margin-bottom: .35rem; }
.iw-hero-title {
  font-size: 1.65rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 .35rem;
  line-height: 1.2;
}
.iw-hero-sub { margin: 0; font-size: 1rem; font-weight: 700; color: #64748b; }

.iw-progress-wrap { margin-bottom: 1rem; }
.iw-progress-track {
  height: 14px;
  background: #fff;
  border: 3px solid #fcd34d;
  border-radius: 999px;
  overflow: hidden;
}
.iw-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #f97316);
  border-radius: 999px;
  transition: width .35s ease;
}
.iw-progress-label {
  text-align: center;
  font-weight: 800;
  font-size: .95rem;
  color: #b45309;
  margin: .5rem 0 0;
}

.iw-slides { position: relative; min-height: 280px; }
.iw-slide {
  display: none;
  animation: iw-fade-in .35s ease;
}
.iw-slide--active { display: block; }
.iw-slide--shake { animation: iw-shake .45s ease; }

@keyframes iw-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes iw-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.iw-slide-card {
  background: #fff;
  border: 3px solid #fcd34d;
  border-radius: 20px;
  padding: 1.15rem 1.1rem 1.25rem;
  box-shadow: 0 8px 24px rgba(245, 158, 11, .15);
}

.iw-slide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
}
.iw-q-badge {
  display: inline-block;
  background: #fef3c7;
  color: #b45309;
  font-weight: 900;
  font-size: .85rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 2px solid #fcd34d;
}
.iw-stars-badge { color: #f59e0b; font-size: .9rem; }
.iw-stars-badge .bi { margin-left: 1px; }

.iw-ref-block { margin-bottom: 1rem; }
.iw-ref-img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 14px;
  border: 2px solid #e2e8f0;
  background: #f8fafc;
}
.iw-ref-img--sm { max-height: 140px; }
.iw-ref-body { font-size: .95rem; margin-top: .5rem; }

.iw-question-text {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.45;
  color: #0f172a;
  margin: 0 0 1rem;
}
.iw-question-text--sm { font-size: 1.05rem; }

.iw-mcq-options { display: flex; flex-direction: column; gap: .65rem; }
.iw-mcq-option {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  min-height: 56px;
  background: #f8fafc;
  border: 3px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  margin: 0;
  position: relative;
}
.iw-mcq-option:hover { border-color: #fcd34d; background: #fffbeb; }
.iw-mcq-option:active { transform: scale(.98); }
.iw-mcq-option--selected {
  border-color: #22c55e;
  background: #f0fdf4;
  box-shadow: 0 4px 12px rgba(34, 197, 94, .2);
}
.iw-mcq-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.iw-mcq-bubble {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  color: #fff;
  font-weight: 900;
  font-size: 1.1rem;
  border-radius: 12px;
}
.iw-mcq-bubble--sm { width: 28px; height: 28px; font-size: .8rem; border-radius: 8px; }
.iw-mcq-text { flex: 1; font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.iw-mcq-check {
  display: none;
  color: #16a34a;
  font-size: 1.5rem;
}
.iw-mcq-option--selected .iw-mcq-check { display: block; }

.iw-field-label {
  display: block;
  font-weight: 800;
  font-size: .95rem;
  color: #64748b;
  margin-bottom: .5rem;
}
.iw-text-input,
.iw-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  padding: .85rem 1rem;
  border: 3px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  box-sizing: border-box;
}
.iw-text-input:focus,
.iw-textarea:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .25);
}
.iw-text-input--lg { min-height: 56px; font-size: 1.15rem; }
.iw-textarea { resize: vertical; min-height: 100px; }

/* Interactive match-the-pairs (tap + drag, SVG lines) */
.iw-match-hint {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 700;
  color: #b45309;
  margin: 0 0 .75rem;
}
.iw-match-stage {
  position: relative;
  margin-bottom: .5rem;
}
.iw-match-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.iw-match-line {
  stroke: #ea580c;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: .85;
}
.iw-match-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1.25rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 480px) {
  .iw-match-columns { gap: .65rem .85rem; }
}
.iw-match-col {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.iw-match-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 52px;
  padding: .65rem .75rem;
  border: 3px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: .95rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.iw-match-item:hover { border-color: #fcd34d; background: #fffbeb; }
.iw-match-item:active { transform: scale(.98); }
.iw-match-item--selected {
  border-color: #f59e0b;
  background: #fff7ed;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .25);
}
.iw-match-item--linked {
  border-color: #22c55e;
  background: #f0fdf4;
}
.iw-match-item--drop-target {
  border-color: #38bdf8;
  background: #e0f2fe;
}
.iw-match-item--dragging { opacity: .65; }
.iw-match-bubble {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  border-radius: 10px;
}
.iw-match-bubble--letter {
  background: linear-gradient(135deg, #60a5fa, #6366f1);
}
.iw-match-label {
  flex: 1;
  line-height: 1.35;
  color: #0f172a;
}

/* Interactive diagram labeling (one input per shape) */
.iw-slide[data-qtype="diagram"] .iw-ref-block {
  margin-bottom: 1rem;
}
.iw-slide[data-qtype="diagram"] .iw-ref-body .ref-svg-wrap {
  display: flex;
  justify-content: center;
  padding: .5rem;
  background: #f8fafc;
  border-radius: 14px;
  border: 2px solid #e2e8f0;
  max-height:  min(42vh, 320px);
  overflow: auto;
}
.iw-slide[data-qtype="diagram"] .iw-ref-body .ref-svg-wrap svg {
  max-width: 100%;
  height: auto;
}
.iw-diagram-hint {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 700;
  color: #0369a1;
  margin: 0 0 .75rem;
}
.iw-diagram-labels {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.iw-diagram-label-row {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .65rem .75rem;
  background: #fff;
  border: 3px solid #e2e8f0;
  border-radius: 14px;
  transition: border-color .15s, background .15s;
}
.iw-diagram-label-row:focus-within {
  border-color: #38bdf8;
  background: #f0f9ff;
}
.iw-diagram-label-meta {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.iw-diagram-shape-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #fff;
  font-weight: 900;
  font-size: .95rem;
  border-radius: 10px;
}
.iw-diagram-shape-name {
  font-weight: 800;
  font-size: .95rem;
  color: #0f172a;
  line-height: 1.3;
}
.iw-diagram-label-input {
  width: 100%;
  min-height: 48px;
  font-size: 1.05rem;
  margin: 0;
}
.iw-diagram-label-input--filled {
  border-color: #86efac;
  background: #f0fdf4;
}
.iw-hint-box {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .85rem;
  background: #e0f2fe;
  border: 2px solid #7dd3fc;
  border-radius: 12px;
  font-weight: 700;
  font-size: .9rem;
  color: #0369a1;
  margin-bottom: .75rem;
}

.iw-nav-bar {
  display: flex;
  gap: .75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.iw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 52px;
  padding: .75rem 1.25rem;
  border-radius: 14px;
  font-family: inherit;
  font-weight: 900;
  font-size: 1.05rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .1s, box-shadow .15s;
  box-sizing: border-box;
}
.iw-btn:active { transform: scale(.98); }
.iw-btn--primary {
  flex: 1;
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: #fff;
  box-shadow: 0 4px 14px rgba(234, 88, 12, .35);
}
.iw-btn--primary:hover { color: #fff; box-shadow: 0 6px 18px rgba(234, 88, 12, .45); }
.iw-btn--ghost {
  background: #fff;
  color: #64748b;
  border: 3px solid #e2e8f0;
}
.iw-btn--finish {
  flex: 1;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 4px 14px rgba(22, 163, 74, .35);
}
.iw-btn--block { width: 100%; }
.iw-btn--pulse { animation: iw-pulse 2s ease-in-out infinite; }
@keyframes iw-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(234, 88, 12, .35); }
  50% { box-shadow: 0 4px 24px rgba(234, 88, 12, .55); }
}

.iw-empty {
  text-align: center;
  padding: 2rem 1rem;
  background: #fff;
  border-radius: 20px;
  border: 3px dashed #fcd34d;
}
.iw-empty-emoji { font-size: 3rem; display: block; margin-bottom: .5rem; }

.iw-results-summary {
  background: #fff;
  border: 2px solid #fde68a;
  border-radius: 16px;
  padding: .75rem .85rem;
  margin-bottom: .85rem;
}
.iw-results-summary--with-chart {
  display: grid;
  grid-template-columns: 1fr minmax(120px, 38%);
  gap: .5rem .65rem;
  align-items: center;
}
.iw-results-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
}
.iw-results-summary--with-chart .iw-results-summary-top { grid-column: 1; }
.iw-results-summary--with-chart .results-chart-card--compact {
  grid-column: 2;
  grid-row: 1;
  border-left: 2px dashed #fde68a;
  padding-left: .55rem;
}

.iw-results-hero {
  text-align: center;
  padding: 1rem 0 1.5rem;
}
.iw-results-hero--compact {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-align: left;
  padding: 0;
  flex: 1;
  min-width: 0;
}
.iw-results-emoji { font-size: 4rem; line-height: 1; }
.iw-results-hero--compact .iw-results-emoji { font-size: 2.25rem; flex-shrink: 0; }
.iw-results-hero-text { min-width: 0; }
.iw-results-title { font-size: 1.85rem; font-weight: 900; margin: .25rem 0; color: #0f172a; }
.iw-results-hero--compact .iw-results-title { font-size: 1.05rem; margin: 0; line-height: 1.2; }
.iw-results-msg { font-size: 1.1rem; font-weight: 700; color: #64748b; margin: 0 0 1.25rem; }

.iw-score-inline {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: .15rem;
}
.iw-score-num { font-size: 2.75rem; font-weight: 900; color: #ea580c; line-height: 1; }
.iw-results-hero--compact .iw-score-num { font-size: 1.35rem; }
.iw-score-of { font-size: 1rem; font-weight: 700; color: #64748b; }
.iw-results-hero--compact .iw-score-of { font-size: .85rem; }
.iw-score-pct { font-size: 1.35rem; font-weight: 900; color: #16a34a; }
.iw-results-hero--compact .iw-score-pct { font-size: .9rem; }

.iw-btn--compact {
  padding: .45rem .7rem !important;
  font-size: .82rem !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.iw-retake-meta {
  font-size: .72rem;
  font-weight: 700;
  opacity: .85;
  margin-left: .15rem;
}
.iw-results-list-title {
  font-size: 1.15rem;
  font-weight: 900;
  margin: 0 0 .85rem;
  color: #0f172a;
}
.iw-result-card {
  background: #fff;
  border: 3px solid #e2e8f0;
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: .75rem;
}
.iw-result-card--yes { border-color: #86efac; background: #f0fdf4; }
.iw-result-card--no  { border-color: #fca5a5; background: #fef2f2; }
.iw-result-card--review { border-color: #fcd34d; background: #fffbeb; }
.iw-result-card--skip { border-color: #e2e8f0; opacity: .85; }
.iw-result-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.iw-result-icon { font-size: 1.5rem; }
.iw-result-your, .iw-result-correct, .iw-result-pending, .iw-result-feedback {
  font-size: .95rem;
  font-weight: 700;
  margin: .35rem 0 0;
}
.iw-result-correct  { color: #16a34a; }
.iw-result-pending  { color: #b45309; display: flex; align-items: center; gap: .35rem; }
.iw-result-feedback { color: #4338ca; background: #eef2ff; padding: .5rem .75rem; border-radius: 10px; font-weight: 500; }

.iw-ai-banner {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  margin: 0 0 1rem;
  background: linear-gradient(90deg, #eef2ff, #fae8ff);
  border-radius: 14px;
  font-weight: 600;
  color: #4338ca;
}
.iw-ai-banner-emoji { font-size: 1.4rem; }

.iw-ai-banner--warn {
  background: linear-gradient(90deg, #fff7ed, #fee2e2);
  color: #7c2d12;
}

.iw-ai-hint {
  margin: .35rem 0 0;
  font-size: .85rem;
  color: var(--text-muted);
  text-align: center;
}

.ai-locked-note {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .85rem;
  color: var(--text-muted);
  padding: .35rem .6rem;
  border: 1px dashed var(--border-color, #d1d5db);
  border-radius: 8px;
}

.iw-results-actions, .iw-show-actions {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-top: 1.5rem;
}

.iw-preview-list { display: flex; flex-direction: column; gap: .75rem; }
.iw-preview-card {
  background: #fff;
  border: 2px solid #fde68a;
  border-radius: 16px;
  padding: 1rem;
}
.iw-preview-options {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.iw-preview-options li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .95rem;
}

@media (min-width: 480px) {
  .iw-main { padding: 1.25rem 1.5rem 3rem; }
  .iw-hero-title { font-size: 1.85rem; }
}