:root {
  /* A teacher's planning notebook, not a finance dashboard: warm paper
     instead of clinical mint, ink-tinted neutrals instead of flat grays,
     and a single reserved amber for the one thing per screen that should
     actually stand out. */
  --bg: #F1F4EE;
  --surface: #FFFFFF;
  --primary: #1C5C4E;
  --primary-hover: #123E34;
  --primary-tint: #E4EFE9;
  --accent: #B8842E;
  --accent-tint: #FBF1DC;
  --text-heading: #16231E;
  --text-body: #55635B;
  --border: #DEE5DC;
  --warning-text: #92400E;
  --warning-bg: #FCEEDD;
  --danger: #AB3524;
  --danger-bg: #FBEAE5;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(22, 35, 30, 0.07), 0 1px 1px rgba(22, 35, 30, 0.04);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

p {
  margin: 0;
  color: var(--text-body);
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.centered-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand span {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.01em;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
}

.topbar .brand {
  margin-bottom: 0;
}

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

.topbar-user {
  font-size: 14px;
  color: var(--text-body);
}

.topbar-user strong {
  color: var(--text-heading);
}

.main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 28px 80px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.page-header h1 {
  font-size: 22px;
  margin: 0;
}

.page-subtitle {
  font-size: 13.5px;
  color: var(--text-body);
  margin: -20px 0 22px;
  max-width: 640px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 16px;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 6px;
}

.field .hint {
  font-size: 12px;
  color: var(--text-body);
  margin-top: 5px;
}

.role-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.role-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
  margin: 0;
}

.role-option input {
  accent-color: var(--primary);
  width: auto;
}

.role-option:has(input:checked) {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="file"],
select,
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-heading);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color 0.15s ease;
}

textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}

/* Applied to generated fields whose content is a bulleted list (objectives,
   references, materials, etc.) so each "• " line reads as a distinct item
   with breathing room, instead of one dense block of text. */
textarea.textarea-list {
  line-height: 1.85;
  white-space: pre-wrap;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
}

input::placeholder,
textarea::placeholder {
  color: #9CA3AF;
}

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

.checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.checkbox-row label {
  font-size: 13px;
  color: var(--text-body);
  font-weight: 500;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

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

.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text-heading);
  border-color: var(--border);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-secondary.danger {
  color: var(--danger);
}

.btn-secondary.danger:hover:not(:disabled) {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}

.btn-ghost {
  background: transparent;
  color: var(--text-body);
  border-color: transparent;
  padding: 8px 10px;
}

.btn-ghost:hover:not(:disabled) {
  color: var(--text-heading);
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--border);
}

.btn-danger:hover:not(:disabled) {
  border-color: var(--danger);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

/* Caps a block's width for comfortable reading/form-filling (short labels,
   name fields, step indicators) inside a page that otherwise uses the full
   available width — e.g. the format builder, where the document canvas
   next to it needs to stay wide. */
.form-narrow {
  max-width: 640px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.format-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.format-card:hover {
  border-color: var(--primary);
}

/* Title + privacy badge on the left, a kebab menu for secondary actions
   (Edit / Delete / View original) on the right — keeps only ONE prominent
   action per card ("Use this format") instead of a row of same-weight
   buttons that has no room to breathe at typical card widths. */
.format-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.format-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.format-card h3 {
  font-size: 15.5px;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.format-card-meta {
  font-size: 12.5px;
  color: var(--text-body);
}

.format-card-cta {
  margin-top: auto;
}

.format-card-skeleton {
  height: 148px;
}

.new-format-tile {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  min-height: 140px;
  color: var(--text-body);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.new-format-tile:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg);
}

.new-format-tile .plus {
  font-size: 22px;
  line-height: 1;
  color: var(--primary);
}

.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  border: 1px solid transparent;
}

/* De-emphasized variant for a "default"/unremarkable state (e.g. a private
   format) so it doesn't compete for attention with the primary-colored
   badge used for a genuinely notable state (e.g. shared publicly). */
.badge-neutral {
  background: var(--bg);
  color: var(--text-body);
}

.empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 48px 24px;
  text-align: center;
  color: var(--text-body);
}

.empty-state h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.empty-state p {
  font-size: 14px;
  margin-bottom: 18px;
}

.alert {
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}

.alert-error {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: #FCA5A5;
}

.alert-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: #FDE68A;
}

.alert[hidden] {
  display: none;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--text-heading);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.toast-error {
  background: var(--danger);
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn-secondary .spinner,
.btn-ghost .spinner {
  border: 2px solid rgba(27, 110, 106, 0.25);
  border-top-color: var(--primary);
}

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

.skeleton {
  background: var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.step-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.step-indicator .step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
}

.step-indicator .step .dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-body);
  background: var(--surface);
}

.step-indicator .step.active .dot {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

.step-indicator .step.active span.label {
  color: var(--text-heading);
}

.step-indicator .step.done .dot {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--primary);
}

.step-indicator .divider {
  width: 32px;
  height: 1px;
  background: var(--border);
}

.field-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
  position: relative;
}

.field-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field-row-grid .field {
  margin-bottom: 0;
}

.field-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.field-row-top .field-index {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-body);
}

.field-key-preview {
  font-size: 12px;
  color: var(--text-body);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dropzone {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  color: var(--text-body);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.dropzone:hover,
.dropzone.dragover {
  border-color: var(--primary);
}

.dropzone strong {
  color: var(--primary);
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-heading);
}

.gen-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.gen-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  color: var(--text-body);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 2px;
  margin-bottom: -1px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.gen-tabs button.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.gen-tabs button .tab-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-body);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.gen-tabs button.active .tab-step-num {
  background: var(--primary);
  color: #FFFFFF;
}

.tab-panel {
  animation: tab-fade-in 0.15s ease-out;
}

@keyframes tab-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mode-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.mode-switch button {
  border: none;
  background: var(--surface);
  color: var(--text-body);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
}

.mode-switch button.active {
  background: var(--primary);
  color: #FFFFFF;
}

.context-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.section-pill {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-body);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: default;
}

.section-pill.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg);
}

.step-nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.step-nav-select {
  flex: 1 1 260px;
  max-width: 420px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
}

.section-pill.filled::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  margin-right: 6px;
}

.section-group {
  margin-bottom: 30px;
}

.section-group h2 {
  font-size: 16px;
  color: var(--primary);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.generator-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.generation-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-muted, #f7f9f8);
  max-width: 420px;
}

.progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}

.progress-row.progress-done {
  color: var(--text, #1f2937);
}

.progress-row.progress-active,
.progress-row.progress-retrying {
  color: var(--primary);
  font-weight: 600;
}

.progress-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  font-size: 12px;
}

.progress-row.progress-done .progress-icon {
  color: var(--primary);
}

.progress-row.progress-active .progress-icon,
.progress-row.progress-retrying .progress-icon {
  animation: spin 1s linear infinite;
}

.progress-note {
  font-size: 12px;
  font-style: italic;
  opacity: 0.8;
}

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

.generator-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

hr.rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 28px 0;
}

.text-sm { font-size: 13px; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .two-col-grid { grid-template-columns: 1fr; } }
[hidden] { display: none !important; }

/* A textured ink-green field instead of flat white or a trendy multi-stop
   gradient: one solid ground color, a faint dot grid for texture, and two
   soft flat-color rings for depth — nothing that shifts hue across the
   page. */
body.auth-page {
  position: relative;
  min-height: 100vh;
  background-color: #12271F;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%23FFFFFF' fill-opacity='0.08'/%3E%3C/svg%3E");
  overflow-x: hidden;
}

/* position:fixed (viewport-relative), not absolute (body-relative) — these
   are purely decorative full-viewport dressing, and an absolutely
   positioned circle bleeding past the body's own content-determined edge
   silently extends the page's scrollable area on any short viewport, even
   though nothing is actually visible in that extra space. Fixed positioning
   is excluded from document scroll size entirely, which is what a
   background decoration should be either way. */
body.auth-page::before,
body.auth-page::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

body.auth-page::before {
  width: 620px;
  height: 620px;
  top: -220px;
  left: -220px;
  background: rgba(255, 255, 255, 0.035);
}

body.auth-page::after {
  width: 480px;
  height: 480px;
  bottom: -180px;
  right: -140px;
  background: rgba(184, 132, 46, 0.12);
}

.auth-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 40px;
}

.auth-illustration {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  flex: 1 1 420px;
  max-width: 480px;
}

.auth-illustration img {
  width: 100%;
  max-width: 280px;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.25));
}

.auth-illustration .wordmark {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.auth-illustration .wordmark span {
  color: var(--accent);
}

.auth-illustration .tagline {
  margin: -12px 0 0;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  max-width: 320px;
  line-height: 1.5;
}

.auth-panel {
  flex: 0 1 420px;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.10);
  padding: 40px 36px;
}

.auth-panel h1 {
  font-size: 24px;
  margin-bottom: 6px;
}

.auth-panel .auth-subtitle {
  font-size: 14px;
  color: var(--text-body);
  margin-bottom: 28px;
}

.auth-panel .field {
  margin-bottom: 16px;
}

.auth-panel .field label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.auth-panel input[type="text"],
.auth-panel input[type="email"],
.auth-panel input[type="password"] {
  padding: 12px 14px;
  border-radius: 10px;
  background: #FAFBFC;
}

.auth-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  font-size: 13px;
}

.auth-row-between a {
  font-weight: 600;
}

.auth-panel .btn-primary {
  border-radius: 10px;
  padding: 13px 18px;
  font-size: 15px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: #9CA3AF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Wraps every password input (login, signup, settings, admin account
   modal, ...) — see wirePasswordToggles() in api.js, which adds this
   wrapper and the toggle button to every password field on the page from
   one shared place. */
.password-field {
  position: relative;
}

.password-field input[type="password"],
.password-field input[type="text"] {
  padding-right: 42px;
}

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-body);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.password-toggle-btn svg {
  width: 18px;
  height: 18px;
}

.password-toggle-btn:hover {
  color: var(--primary);
  background: var(--bg);
}

/* Width-independent: a short browser window (wide desktop layout included)
   needs the same "never scroll" treatment as a narrow one. Shrinks the
   illustration and the gap/padding around it rather than the form itself,
   so the fields stay full-size. */
@media (max-height: 700px) {
  .auth-shell {
    gap: 32px;
    padding: 24px 40px;
  }
  .auth-illustration {
    gap: 14px;
  }
  /* The form card is the taller of the two columns here, so the brand mark
     has slack to spend before it starts driving the page height — keep it
     at a readable size rather than shrinking it in step with the padding. */
  .auth-illustration img {
    max-width: 230px;
  }
  .auth-illustration .wordmark {
    font-size: 36px;
  }
  .auth-illustration .tagline {
    display: none;
  }
}

/* Only on a genuinely tiny window does the brand mark have to give way —
   and at that point the card's own padding and row spacing has to tighten
   too, since the card (not the illustration) is what sets the page height. */
@media (max-height: 520px) {
  .auth-shell {
    padding: 16px 40px;
  }
  .auth-illustration img {
    max-width: 150px;
  }
  .auth-illustration .wordmark {
    font-size: 26px;
  }
  .auth-panel {
    padding: 24px 32px;
  }
  .auth-panel .auth-subtitle {
    margin-bottom: 18px;
  }
  .auth-panel .field {
    margin-bottom: 10px;
  }
  .auth-row-between {
    margin-bottom: 14px;
  }
  .auth-divider {
    margin: 12px 0;
  }
}

@media (max-width: 900px) {
  .auth-shell {
    flex-direction: column;
    gap: 32px;
  }
  .auth-illustration img {
    max-width: 220px;
  }
  .auth-illustration .wordmark {
    font-size: 26px;
  }
}

/* At phone width, stacking the illustration above the form (the 900px rule
   above) pushes the actual login fields below the fold — the illustration
   alone can be taller than the viewport. Going back to a side-by-side row
   keeps the form in view immediately; the illustration just shrinks down to
   a small logo lockup (image + wordmark, tagline dropped) so it doesn't
   compete with the form for width. */
@media (max-width: 640px) {
  .auth-shell {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 20px 16px;
  }
  .auth-illustration {
    flex: 0 0 auto;
    max-width: 84px;
    gap: 10px;
  }
  .auth-illustration img {
    max-width: 44px;
  }
  .auth-illustration .wordmark {
    font-size: 15px;
    text-align: center;
  }
  .auth-illustration .tagline {
    display: none;
  }
  .auth-panel {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    padding: 24px 18px;
  }
}

.source-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 4px;
}

.source-option {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: left;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.source-option:hover {
  border-color: var(--primary);
}

.source-option .icon {
  color: var(--primary);
  margin-bottom: 14px;
}

.source-option .icon svg {
  width: 26px;
  height: 26px;
}

.source-option h3 {
  font-size: 15px;
  margin-bottom: 4px;
}

.source-option p {
  font-size: 13px;
}

.scan-status {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 14px;
  color: var(--text-heading);
  background: var(--bg);
}

.scan-status .spinner {
  border: 2px solid rgba(27, 110, 106, 0.25);
  border-top-color: var(--primary);
}

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

.generate-panel .mode-switch {
  margin-top: 4px;
}

.setup-panel .field {
  margin-bottom: 0;
}

.setup-panel .intake-grid {
  margin-bottom: 0;
}

.setup-intro h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 4px;
}

.setup-intro p {
  margin: 0;
  color: var(--text-body);
}

/* Each logical group (who/topic, course guide, optional details) is its own
   bordered "common region" so related fields read as one unit (proximity)
   and are clearly separated from unrelated groups. */
.setup-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px 20px;
}

.setup-section-flush {
  border: none;
  background: transparent;
  padding: 0;
}

.setup-section-head {
  margin-bottom: 14px;
}

.setup-section-head h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 2px;
}

.setup-section-head p {
  font-size: 12px;
  color: var(--text-body);
  margin: 0;
}

.intake-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}

.intake-grid .field.full-width {
  grid-column: 1 / -1;
}

.course-guide-picker {
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--bg);
}

.course-guide-picker .cg-tabs {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--surface);
}

.course-guide-picker .cg-tabs button {
  border: none;
  background: var(--surface);
  color: var(--text-body);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.course-guide-picker .cg-tabs button.active {
  background: var(--primary);
  color: #FFFFFF;
}

.cg-tab-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.cg-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cg-search-hint {
  margin: 0;
}

.cg-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cg-results:not(:empty) {
  margin-top: 14px;
}

.cg-result-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: pointer;
  background: var(--surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cg-result-card:hover {
  border-color: var(--primary);
}

.cg-result-card.selected {
  border-color: var(--primary);
  background: var(--bg);
}

.cg-result-card .cg-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
}

.cg-result-card .cg-meta {
  font-size: 12px;
  color: var(--text-body);
}

.cg-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--primary);
  background: var(--bg);
  color: var(--primary-hover);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
}

.cg-selected-chip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}

.gate-lock {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  color: var(--text-body);
  font-size: 14px;
}

@media (max-width: 640px) {
  .advanced-group-grid,
  .field-row-grid,
  .intake-grid,
  .source-choice {
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 12px 16px;
  }

  .main {
    padding: 28px 16px 64px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.dash-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#announcement-banner-wrap {
  flex-shrink: 0;
}

.announcement-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 28px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.announcement-banner-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
}

.announcement-banner-body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  color: inherit;
}

.announcement-banner-body strong {
  color: inherit;
}

.announcement-banner-close {
  flex-shrink: 0;
  border: none;
  background: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
  padding: 2px 4px;
}

.announcement-banner-close:hover {
  opacity: 1;
}

.announcement-info {
  background: #EAF3FF;
  color: #1D4E89;
}

.announcement-maintenance {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.announcement-urgent {
  background: var(--danger-bg);
  color: var(--danger);
}

.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 28px;
  flex-shrink: 0;
}

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

.brand-block img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-block .brand-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-heading);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.brand-block .brand-sub {
  font-size: 12px;
  color: var(--text-body);
  line-height: 1.2;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-body);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

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

.sidebar-toggle-btn {
  display: none;
  flex-shrink: 0;
  margin-right: 6px;
}

.sidebar-backdrop {
  display: none;
}

.icon-btn .dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F59E0B;
  border: 1.5px solid var(--surface);
}

/* ---- Notification bell dropdown (wireNotificationBell in api.js) ---- */

.notif-menu {
  position: relative;
  display: inline-flex;
}

.notif-panel {
  position: absolute;
  top: 46px;
  right: 0;
  width: 320px;
  max-width: 80vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.14), 0 2px 8px rgba(31, 41, 55, 0.06);
  z-index: 30;
  overflow: hidden;
}

.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
}

.notif-mark-all {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.notif-mark-all:hover {
  text-decoration: underline;
}

.notif-list {
  max-height: 360px;
  overflow-y: auto;
}

.notif-item {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

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

.notif-item:hover {
  background: var(--bg);
}

.notif-item.unread {
  background: var(--primary-tint);
}

.notif-item.unread:hover {
  background: var(--primary-tint);
  filter: brightness(0.97);
}

.notif-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  gap: 6px;
}

.notif-item.unread .notif-item-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.notif-item-message {
  font-size: 12.5px;
  color: var(--text-body);
  margin-top: 2px;
  line-height: 1.4;
}

.notif-item-time {
  font-size: 11px;
  color: var(--text-body);
  opacity: 0.75;
  margin-top: 4px;
}

.notif-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-body);
}

@media (max-width: 640px) {
  .notif-panel {
    right: -60px;
    width: 280px;
  }
}

.settings-panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.settings-avatar {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

#profile-role-badge {
  margin-right: 8px;
}

#profile-member-since {
  color: var(--text-body);
}

.avatar-menu {
  position: relative;
}

.avatar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 999px;
}

.avatar-btn:hover {
  background: var(--bg);
}

.avatar-btn svg {
  width: 14px;
  height: 14px;
  color: var(--text-body);
}

.avatar-chip {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--primary);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.avatar-dropdown {
  position: absolute;
  top: 46px;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.14), 0 2px 8px rgba(31, 41, 55, 0.06);
  min-width: 200px;
  padding: 8px;
  display: none;
  z-index: 30;
}

.avatar-dropdown.open {
  display: block;
}

.avatar-dropdown .dd-user {
  padding: 6px 10px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.avatar-dropdown .dd-user strong {
  display: block;
  font-size: 13px;
  color: var(--text-heading);
}

.avatar-dropdown .dd-user span {
  font-size: 12px;
  color: var(--text-body);
}

.avatar-dropdown .dd-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--text-heading);
  cursor: pointer;
  text-align: left;
}

.avatar-dropdown .dd-item svg {
  width: 15px;
  height: 15px;
  color: var(--text-body);
  flex-shrink: 0;
}

.avatar-dropdown .dd-item:hover {
  background: var(--bg);
  color: var(--primary);
}

.avatar-dropdown .dd-item:hover svg {
  color: var(--primary);
}

.avatar-dropdown .dd-item.danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.avatar-dropdown .dd-item.danger:hover svg {
  color: var(--danger);
}

.dash-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-body);
}

.sidebar-nav a:hover {
  background: var(--bg);
  color: var(--primary);
  text-decoration: none;
}

.sidebar-nav a.active {
  background: var(--bg);
  color: var(--primary);
}

.sidebar-nav a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-footer .avatar-chip {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

.sidebar-footer .who strong {
  display: block;
  font-size: 13px;
  color: var(--text-heading);
  line-height: 1.3;
}

.sidebar-footer .who span {
  font-size: 12px;
  color: var(--text-body);
  line-height: 1.3;
}

.dash-main {
  flex: 1;
  min-width: 0;
  padding: 28px 28px 60px;
  overflow-y: auto;
}

.dash-page-title {
  font-size: 20px;
  margin-bottom: 20px;
}

/* The illustration is a full-bleed backdrop rather than a boxed-off panel,
   so it reads as the banner itself instead of a photo placed inside it. A
   flat dark scrim (not a gradient) sits between the image and the text for
   general contrast, but the chalkboard art's own white icon linework is
   close enough to white text that a shadow alone isn't reliable — so the
   headline gets a solid chip behind it too, guaranteeing contrast no matter
   what part of the artwork lands behind it. */
.hero-banner {
  position: relative;
  border-radius: 20px;
  padding: 40px 44px;
  min-height: 320px;
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  overflow: hidden;
}

.hero-image-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-image-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 22, 0.68);
}

.hero-image-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-text {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.hero-text h1 {
  display: inline-block;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-bottom: 26px;
  padding: 10px 20px;
  color: var(--text-heading);
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-actions .btn {
  font-size: 15px;
  padding: 13px 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.hero-actions .btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* A single ledger band, not a grid of repeated cards — the numbers carry
   the information, so there's nothing for an icon-in-a-tinted-square to add
   except visual noise. Segments read left to right like line items in a
   register. The 1px gap filled with the border color (rather than a
   border-left on every item but the first) draws a hairline between every
   pair of neighbors even once auto-fit wraps them onto a second row — a
   plain border-left would only ever separate items within one row. */
.stat-ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 28px;
  overflow: hidden;
}

.stat-ledger-item {
  background: var(--surface);
  padding: 18px 24px;
}

.stat-ledger-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--text-heading);
  line-height: 1.15;
}

.stat-ledger-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  margin-top: 4px;
}

.stat-ledger-sub {
  font-size: 12px;
  color: var(--text-body);
  margin-top: 2px;
}

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 6px;
}

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

.section-card-header h2 {
  font-size: 16px;
}

.section-link {
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-body);
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-heading);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.plan-title-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.plan-title-cell .file-ico {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--bg);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.plan-title-cell .file-ico svg {
  width: 14px;
  height: 14px;
}

.row-menu {
  position: relative;
  display: inline-block;
}

.row-menu-btn {
  background: none;
  border: none;
  color: var(--text-body);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 9px;
  border-radius: 6px;
  line-height: 1;
}

.row-menu-btn:hover {
  background: var(--bg);
  color: var(--primary);
}

.row-menu-dropdown {
  position: absolute;
  top: 30px;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.14), 0 2px 8px rgba(31, 41, 55, 0.06);
  min-width: 150px;
  padding: 6px;
  display: none;
  z-index: 25;
}

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

.row-menu-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 6px;
  color: var(--text-heading);
  cursor: pointer;
}

.row-menu-dropdown button:hover {
  background: var(--bg);
  color: var(--primary);
}

.row-menu-dropdown button.danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.row-action-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.row-action-btn svg {
  width: 16px;
  height: 16px;
}

.row-action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg);
}

.row-action-btn.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}

.table-empty-row td {
  text-align: center;
  color: var(--text-body);
  padding: 30px 10px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 41, 55, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-dialog {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px rgba(31, 41, 55, 0.22);
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-header h2 {
  font-size: 17px;
  margin: 0;
  color: var(--text-heading);
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-body);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--bg);
  color: var(--primary);
}

.modal-body {
  padding: 20px 22px;
  overflow-y: auto;
}

.preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-body);
}

.preview-meta strong {
  color: var(--text-heading);
}

.preview-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin: 18px 0 8px;
}

.preview-section-title:first-child {
  margin-top: 0;
}

.preview-field {
  margin-bottom: 12px;
}

.preview-field-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-heading);
  margin-bottom: 2px;
}

.preview-field-value {
  font-size: 13.5px;
  color: var(--text-body);
  white-space: pre-wrap;
}

.preview-field-value ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.preview-loading,
.preview-error {
  text-align: center;
  color: var(--text-body);
  padding: 30px 10px;
}

.preview-error {
  color: var(--danger);
}

/* ---- Lesson-plan document editor: mirrors the real reference .docx ---- */

.modal-dialog-doc {
  max-width: 920px;
}

.doc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.doc-toolbar-views {
  display: flex;
  gap: 6px;
}

.doc-view-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-body);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.doc-view-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg);
}

.doc-view-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.doc-warning {
  background: #FFF7ED;
  border: 1px solid #FDBA74;
  color: #9A3412;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 14px;
}

.doc-hint {
  font-size: 12.5px;
  color: var(--text-body);
  margin: -4px 0 14px;
}

.lp-doc-wrap {
  background: #E9EBEE;
  border-radius: var(--radius-sm);
  padding: 22px;
  max-height: 55vh;
  overflow: auto;
}

.lp-doc {
  background: #fff;
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 44px;
  box-shadow: 0 1px 3px rgba(31, 41, 55, 0.12), 0 8px 20px rgba(31, 41, 55, 0.08);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-heading);
}

.lp-doc .lp-p {
  margin: 0 0 8px;
}

.lp-doc .lp-heading {
  font-weight: 700;
  margin-top: 12px;
}

.lp-doc .lp-bold {
  font-weight: 700;
}

.lp-doc .lp-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
  table-layout: fixed;
}

.lp-doc .lp-td {
  /* Fallback grid for cells whose source file has no explicit border data
     (e.g. table-style borders rather than per-cell ones) — real inline
     border-* styles rendered per cell/table from the .docx take precedence. */
  border: 1px solid #D1D5DB;
  padding: 7px 10px;
  vertical-align: top;
  font-size: 12px;
  overflow-wrap: break-word;
}

.lp-doc .lp-td-value {
  background: #FAFBFB;
}

.lp-field {
  display: block;
  min-height: 18px;
  outline: none;
  white-space: pre-wrap;
  border-radius: 3px;
}

.lp-field-inline {
  display: inline;
}

.lp-field:empty::before {
  content: attr(data-placeholder);
  color: #9CA3AF;
  font-style: italic;
}

.lp-field[contenteditable="true"]:hover {
  background: #F3F4F6;
}

.lp-field[contenteditable="true"]:focus {
  background: #ECFDF5;
  box-shadow: 0 0 0 1px var(--primary) inset;
}

.lp-field.lp-filled {
  background: transparent;
}

/* ---- Step-by-step mode: one field unlocked at a time ---- */

.lp-field.step-locked {
  pointer-events: none;
  cursor: not-allowed;
  border-radius: 3px;
  background: repeating-linear-gradient(135deg, #F3F4F6, #F3F4F6 6px, #E9EBEE 6px, #E9EBEE 12px);
}

.lp-field.step-locked:empty::before {
  content: "🔒 Locked — complete the current field first";
  color: #9CA3AF;
  font-style: italic;
}

.lp-field.step-active {
  border-radius: 3px;
  background: #ECFDF5;
  box-shadow: 0 0 0 2px var(--primary) inset;
}

.field textarea.step-locked,
.field input.step-locked {
  cursor: not-allowed;
  background: repeating-linear-gradient(135deg, #F3F4F6, #F3F4F6 6px, #E9EBEE 6px, #E9EBEE 12px);
}

.field textarea.step-active,
.field input.step-active {
  box-shadow: 0 0 0 2px var(--primary) inset;
}

/* ---- Format builder: click-to-define document editor ---- */

#doc-field-editor {
  max-width: 1400px;
}

.doc-builder-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.doc-builder-canvas {
  flex: 1 1 auto;
  min-width: 0;
  height: 72vh;
  min-height: 360px;
  max-height: 90vh;
  resize: vertical;
}

.doc-builder-canvas .lp-doc {
  max-width: 940px;
}

.doc-builder-sidebar {
  flex: 0 0 260px;
  position: sticky;
  top: 16px;
}

.doc-builder-sidebar h3 {
  font-size: 13px;
  margin: 0 0 10px;
  color: var(--text-heading);
}

.doc-field-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 64vh;
  overflow-y: auto;
}

.doc-field-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  background: var(--surface);
}

.doc-field-list-row:hover {
  border-color: var(--primary);
  background: var(--bg);
}

.doc-field-list-info {
  flex: 1 1 auto;
  min-width: 0;
}

.doc-field-list-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-heading);
}

.doc-field-list-meta {
  font-size: 11.5px;
  color: var(--text-body);
  margin-top: 2px;
}

.doc-field-list-delete {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-field-list-delete:hover {
  background: #FEE2E2;
  color: var(--danger);
}

.doc-builder-canvas .lp-anchor {
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.1s ease;
}

.doc-builder-canvas .lp-anchor:hover {
  background: #ECFDF5;
  outline: 1px dashed var(--primary);
  outline-offset: 1px;
}

.doc-builder-canvas .lp-candidate {
  border-bottom: 1px dashed #9CA3AF;
}

.doc-builder-canvas .lp-anchor-defined {
  background: #D1FAE5;
  outline: 1px solid #059669;
  outline-offset: 1px;
}

/* ---- Edit-content mode: formatting toolbar + in-canvas previews ---- */

.doc-mode-hint {
  margin: 10px 0 12px;
}

.doc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.doc-toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.doc-toolbar-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 4px;
  background: var(--border);
}

.doc-tool-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-heading);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.doc-tool-btn svg {
  width: 16px;
  height: 16px;
}

.doc-tool-btn:hover {
  background: var(--bg);
}

.doc-tool-btn.active {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--primary);
}

.doc-tool-btn.danger {
  color: var(--danger);
}

.doc-tool-btn.danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
}

.doc-tool-select {
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 6px;
  font-size: 12.5px;
  background: var(--surface);
  color: var(--text-heading);
}

.doc-toolbar-save {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 4px;
}

.doc-builder-canvas.doc-edit-active {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  cursor: text;
}

.doc-builder-canvas .doc-preview-h1 {
  font-size: 1.55em;
  font-weight: 700;
}

.doc-builder-canvas .doc-preview-h2 {
  font-size: 1.3em;
  font-weight: 700;
}

.doc-builder-canvas .doc-preview-h3 {
  font-size: 1.12em;
  font-weight: 700;
}

.doc-builder-canvas .doc-preview-bullet,
.doc-builder-canvas .doc-preview-number {
  padding-left: 1.4em;
  position: relative;
}

.doc-builder-canvas .doc-preview-bullet::before {
  content: "•";
  position: absolute;
  left: 0.35em;
}

.doc-builder-canvas .doc-preview-number::before {
  content: "1.";
  position: absolute;
  left: 0;
}

.doc-builder-canvas .doc-marked-delete {
  text-decoration: line-through;
  opacity: 0.45;
  background: var(--danger-bg);
}

@media (max-width: 860px) {
  .doc-builder-layout {
    flex-direction: column;
  }
  .doc-builder-sidebar {
    flex: 1 1 auto;
    width: 100%;
    position: static;
  }
  .doc-toolbar-save {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
    margin-top: 4px;
  }
}

.widget-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 20px;
}

.widget-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.widget-header .icon-badge {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.widget-header .icon-badge svg {
  width: 15px;
  height: 15px;
}

.widget-header h3 {
  font-size: 14px;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-heading);
  border-bottom: 1px solid var(--border);
}

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

.todo-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.todo-item span {
  flex: 1;
}

.todo-item.done span {
  text-decoration: line-through;
  color: var(--text-body);
}

.todo-empty {
  font-size: 13px;
  color: var(--text-body);
  padding: 4px 0 8px;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  padding: 6px 0;
  color: var(--text-heading);
  line-height: 1.4;
}

.tip-item svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 1px;
}

@media (max-width: 1080px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .sidebar {
    width: 76px;
    padding: 16px 8px;
  }
  .sidebar-nav a span,
  .sidebar-footer .who {
    display: none;
  }
  .sidebar-nav a {
    justify-content: center;
    padding: 12px;
  }
  .sidebar-footer {
    justify-content: center;
  }
  .hero-banner {
    padding: 32px 28px;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .dash-topbar {
    padding: 12px 16px;
  }
  .dash-main {
    padding: 20px 16px 48px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .hero-banner {
    padding: 24px;
  }
  /* A fixed minmax() floor can force a card grid narrower than the phone's
     remaining width (after the icon-only sidebar) to overflow horizontally.
     A single flexible column has no such floor. */
  .card-grid,
  .class-card-grid {
    grid-template-columns: 1fr;
  }

  /* Below the tablet icon-rail breakpoint, the sidebar becomes a full
     off-canvas drawer instead — there just isn't room for even a slim
     always-on rail next to usable content on a phone screen. It's taken
     out of the flex flow entirely (position:fixed) so .dash-main reclaims
     the full width when the drawer is closed, which is the default. */
  .sidebar-toggle-btn {
    display: inline-flex;
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 210;
    width: 250px;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: none;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 12px 0 32px rgba(22, 35, 30, 0.22);
  }

  /* The icon-rail rules above (max-width:860px) strip the text labels and
     center everything for a slim always-visible rail — none of that applies
     to an expanded slide-in drawer, so restore the normal, fully-labeled
     nav layout here. */
  .sidebar-nav a span,
  .sidebar-footer .who {
    display: block;
  }
  .sidebar-nav a {
    justify-content: flex-start;
    padding: 10px 12px;
  }
  .sidebar-footer {
    justify-content: flex-start;
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 205;
    background: rgba(15, 23, 18, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .sidebar-backdrop.open {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  body.sidebar-lock-scroll {
    overflow: hidden;
  }

  /* Two tab buttons with long labels ("Search the shared library") don't
     fit an inline-flex row at phone width — split them into an even,
     wrapping pair instead of letting the row overflow the card. */
  .course-guide-picker .cg-tabs {
    display: flex;
    width: 100%;
  }
  .course-guide-picker .cg-tabs button {
    flex: 1 1 0;
    white-space: normal;
    text-align: center;
    padding: 8px 6px;
  }

  /* .page-header itself already wraps its own direct children (the title
     and the action-button group) onto separate lines, but the button group
     is a plain, non-wrapping .flex row internally — with three real button
     labels (e.g. the admin dashboard's "View documents" / "Announcements" /
     "Manage users") that still overflows the viewport at phone width. */
  .page-header .flex {
    flex-wrap: wrap;
  }
}

/* ---- Sections & submissions (teacher/student classroom features) ---- */

.class-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.class-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.class-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.class-card h3 {
  font-size: 16px;
  margin-bottom: 4px;
}

.class-card .class-meta {
  font-size: 12px;
  color: var(--text-body);
  margin-bottom: 12px;
}

.class-card .class-stats {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--text-body);
}

.class-card .class-stats strong {
  color: var(--text-heading);
  font-size: 14px;
  display: block;
}

.join-code-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary);
  background: var(--bg);
  border: 1px dashed var(--primary);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}

.join-code-display {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--primary);
  background: var(--bg);
  border: 1px dashed var(--primary);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: center;
}

.status-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

.status-pill.draft {
  background: var(--bg);
  color: var(--text-body);
}

.status-pill.submitted {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.status-pill.reviewed {
  background: #E3F7E9;
  color: #1A7A3D;
}

.score-row {
  margin-top: 10px;
}

.score-pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}

.score-pill.score-great {
  background: #E3F7E9;
  color: #1A7A3D;
}

.score-pill.score-good {
  background: #E6F4F1;
  color: var(--primary);
}

.score-pill.score-ok {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.score-pill.score-low {
  background: var(--danger-bg);
  color: var(--danger);
}

.roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

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

.roster-who strong {
  display: block;
  font-size: 13px;
  color: var(--text-heading);
}

.roster-who span {
  font-size: 12px;
  color: var(--text-body);
}

.submission-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--surface);
  margin-bottom: 14px;
}

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

.submission-card-header h3 {
  font-size: 15px;
  margin-bottom: 2px;
}

.submission-meta {
  font-size: 12px;
  color: var(--text-body);
}

.feedback-box {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-heading);
  margin-top: 10px;
}

/* ---- Page transition: a brief full-screen mask shown while navigating
   between pages (this is a multi-page app — every sidebar click is a real
   navigation) and while the destination page's first data fetch is still in
   flight, so the reflow as the sidebar/banner settle into place happens
   behind a curtain instead of in view. Kept deliberately short (see the
   MIN_MS/MAX_MS constants in api.js) — it's meant to smooth over a few
   hundred milliseconds, not add a real loading step. ---- */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 1;
  transition: opacity 0.16s ease;
}

.page-transition.page-transition-hide {
  opacity: 0;
  pointer-events: none;
}

.page-transition img {
  width: 64px;
  height: auto;
  animation: page-transition-bob 0.9s ease-in-out infinite;
}

@keyframes page-transition-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.page-transition span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-body);
}

/* ---- Guide owl: a companion that reacts to where you are in building the
   lesson plan, not a static piece of decoration. Fixed in the corner so it
   never competes with the form for layout space; pointer-events is off so
   it can never sit in front of something clickable. ---- */
.owl-guide {
  position: fixed;
  right: 28px;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 400px;
  pointer-events: none;
}

.owl-guide-img {
  width: 148px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 14px rgba(22, 35, 30, 0.2));
  transition: opacity 0.15s ease;
}

.owl-guide-img.is-swapping {
  opacity: 0;
}

.owl-guide-bubble {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px 15px;
  margin-bottom: 56px;
  box-shadow: var(--shadow);
}

.owl-guide-bubble::after {
  content: "";
  position: absolute;
  bottom: -7px;
  right: 26px;
  width: 13px;
  height: 13px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}

.owl-guide-bubble p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-heading);
}

@media (max-width: 640px) {
  /* The floating owl guide is a nice-to-have nudge, and its message always
     duplicates text already visible on the page — at phone width there's no
     corner it can sit in without landing on top of a field or the primary
     action button at the bottom of the form, so it's hidden entirely rather
     than obscuring real UI either way. */
  .owl-guide {
    display: none;
  }
}