/* Base layout */
:root {
  /* Surfaces & neutrals */
  --bg: #eef1fb;
  --surface: #ffffff;
  --surface-soft: #f5f6fe;
  --border: #e3e6f4;
  --border-strong: #c6cbe6;
  --text: #1a1c33;
  --muted: #6b6f8c;
  --muted-dark: #43476b;

  /* Brand: deep indigo primary + violet depth */
  --primary: #4f46e5;
  --primary-dark: #3f33d6;
  --primary-soft: #eef0ff;

  /* Accent: teal for vibrancy without being loud */
  --accent: #0ea5a4;
  --accent-soft: #e6fbf8;

  --success-soft: #e9fbf2;

  --shadow: 0 22px 50px rgba(33, 26, 92, 0.12);
  --shadow-soft: 0 10px 28px rgba(33, 26, 92, 0.09);
  --radius-lg: 22px;
  --radius-md: 15px;
  --radius-sm: 11px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  background:
    radial-gradient(
      circle at top left,
      rgba(79, 70, 229, 0.18),
      transparent 34rem
    ),
    radial-gradient(
      circle at top right,
      rgba(14, 165, 164, 0.14),
      transparent 30rem
    ),
    linear-gradient(180deg, #f6f7ff 0%, var(--bg) 100%);
  background-attachment: fixed;
  color: var(--text);
}

.page-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 48px 20px;
}

/* Hero */
.hero {
  text-align: center;
  margin-bottom: 32px;
}

.eyebrow,
.section-label {
  margin: 0 0 8px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 12px;
  padding: 0.08em 0.04em;
  font-size: clamp(34px, 6vw, 54px);
  line-height: 1.18;
  letter-spacing: -0.04em;
  background: linear-gradient(120deg, #312bb5 0%, #5b4bf0 45%, #0ea5a4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  max-width: 720px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted-dark);
}

/* Cards */
.form-card {
  position: relative;
  background: rgba(255, 255, 255, 0.97);
  padding: 34px;
  border: 1px solid rgba(214, 219, 240, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #4f46e5, #7c6cf6 45%, #0ea5a4);
}

.result-card {
  padding: 28px;
}

/* Form sections */
.form-section {
  margin-bottom: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}

.form-section h2 {
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.helper-text {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Form controls */
label {
  display: block;
  margin-top: 18px;
  margin-bottom: 7px;
  font-weight: 700;
  color: #2a2d4d;
}

input,
select,
textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #a7adda;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.16);
}

textarea {
  min-height: 110px;
  resize: vertical;
}

select {
  cursor: pointer;
}
/* Hidden form fields used for copying and exports */
.hidden-copy-source {
  display: none !important;
}

/* Buttons */
button,
.secondary-button {
  min-height: 48px;
  padding: 13px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    filter 0.12s ease;
}

button:hover,
.secondary-button:hover {
  transform: translateY(-1px);
}

button {
  width: 100%;
  background: linear-gradient(135deg, var(--primary), #6a5cf3);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.28);
}

button:hover {
  filter: brightness(1.05);
  box-shadow: 0 16px 30px rgba(79, 70, 229, 0.34);
}

button:active {
  transform: translateY(0);
}

.button-primary {
  background: linear-gradient(135deg, var(--primary), #6a5cf3);
  color: #ffffff;
}

.button-secondary,
.secondary-button {
  background: #ffffff;
  color: #312bb5;
  border: 1px solid var(--border-strong);
  box-shadow: none;
}

.button-secondary:hover,
.secondary-button:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}
/* Compact login and registration layouts */
.auth-form-card {
  width: min(100%, 980px);
  margin-inline: auto;
  padding: 2rem;
}

.auth-form-card .material-form {
  width: 100%;
}

.auth-form-card .form-grid {
  gap: 1.25rem;
}

.auth-form-card .field input {
  min-height: 54px;
  padding: 0.8rem 1rem;
}
/* Password visibility controls */
.auth-form-card .password-input-wrap {
  position: relative;
}

.auth-form-card .password-input-wrap input {
  padding-right: 3.5rem;
}

.auth-form-card .password-visibility-toggle {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted-dark);
  box-shadow: none;
  transform: translateY(-50%);
}

.auth-form-card .password-visibility-toggle:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
  box-shadow: none;
  filter: none;
  transform: translateY(-50%);
}

.auth-form-card .password-visibility-toggle:active {
  transform: translateY(-50%);
}

.auth-form-card .password-visibility-toggle:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.22);
  outline-offset: 2px;
  box-shadow: none;
}

.auth-form-card .password-visibility-toggle svg {
  width: 21px;
  height: 21px;
  pointer-events: none;
}

.auth-form-card .auth-submit-bar {
  padding: 1.35rem 1.5rem;
}

.auth-form-card .primary-submit {
  min-height: 50px;
  padding: 0.75rem 2rem;
}

.auth-google-bar {
  margin-bottom: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.4rem 0;
  color: var(--muted-text, #667085);
  font-size: 0.9rem;
  text-align: center;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(79, 70, 229, 0.18);
}

.auth-divider span {
  white-space: nowrap;
}

@media (max-width: 700px) {
  .auth-form-card {
    padding: 1.25rem;
  }

  .auth-form-card .auth-submit-bar {
    padding: 1.1rem;
  }

  .auth-divider span {
    white-space: normal;
  }
}

/* Result overview */
.result-overview {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 24px;
  align-items: start;
  background: linear-gradient(
    135deg,
    var(--primary-soft),
    var(--accent-soft) 120%
  );
  padding: 24px;
  border: 1px solid #d8dcfb;
  border-radius: var(--radius-md);
  margin-bottom: 22px;
}

.result-overview h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.overview-grid p {
  margin: 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(216, 220, 251, 0.9);
  border-radius: var(--radius-sm);
}

.overview-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.overview-grid strong {
  display: block;
  color: var(--text);
  font-size: 15px;
}

/* Action bar */
.copy-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.copy-actions button,
.copy-actions .secondary-button {
  width: 100%;
  text-align: center;
}

.regenerate-form {
  width: 100%;
}

.regenerate-form button {
  width: 100%;
}

/* Output */
.generated-output {
  margin-top: 16px;
}

.output-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin: 0 0 14px;
}

.output-header h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.02em;
}

/* Generated material output */
.rendered-output {
  background: #ffffff;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: break-word;
}

.rendered-output h1,
.rendered-output h2,
.rendered-output h3 {
  margin-top: 28px;
  margin-bottom: 12px;
  color: #1a1142;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.rendered-output h1:first-child,
.rendered-output h2:first-child,
.rendered-output h3:first-child {
  margin-top: 0;
}

.rendered-output h1 {
  font-size: 30px;
}

.rendered-output h2 {
  font-size: 24px;
}

.rendered-output h3 {
  font-size: 20px;
}

.rendered-output p {
  margin: 0 0 16px;
  overflow-wrap: break-word;
}

.rendered-output ul,
.rendered-output ol {
  margin: 0 0 18px;
  padding-left: 26px;
}

.rendered-output li {
  margin-bottom: 10px;
  overflow-wrap: break-word;
}

.rendered-output li::marker {
  color: var(--primary);
}

.rendered-output hr {
  margin: 26px 0;
  border: none;
  border-top: 1px solid var(--border);
}

.rendered-output code {
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 0.92em;
}

.answer-key-preview {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.answer-key-output {
  background: #fbfbff;
  border-left: 4px solid var(--accent);
}

/* Internal values used for copying, saving, and exports */
.hidden-copy-source {
  display: none !important;
}
/* Print window */
.print-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

.print-card {
  box-shadow: none;
}

/* Mobile */
@media (max-width: 860px) {
  .result-overview {
    grid-template-columns: 1fr;
  }

  .copy-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .page-container {
    padding: 30px 14px;
  }

  .form-card,
  .result-card {
    padding: 22px;
    border-radius: 16px;
  }

  .hero {
    margin-bottom: 24px;
  }

  .hero p {
    font-size: 16px;
  }

  .copy-actions {
    grid-template-columns: 1fr;
  }

  .overview-grid {
    grid-template-columns: 1fr;
  }

  .rendered-output {
    padding: 22px;
  }
}

/* Print / PDF styles */
@media print {
  body {
    background: white;
    color: black;
  }

  .no-print {
    display: none !important;
  }

  .page-container,
  .print-page {
    max-width: 100%;
    padding: 0;
  }

  .form-card,
  .result-card,
  .print-card {
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
  }

  .form-card::before {
    display: none;
  }

  .rendered-output {
    border: none;
    background: white;
    box-shadow: none;
    padding: 0;
  }

  .answer-key-output {
    border-left: none;
  }

  .generated-output h2 {
    margin-top: 24px;
  }

  a {
    color: black;
    text-decoration: none;
  }
}

/* Index page UI polish */
.app-hero {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.hero-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.hero-badges span {
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid #d8dcfb;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(33, 26, 92, 0.07);
}
.hero-badges span:nth-child(1) {
  color: #312bb5;
  border-color: #cfcdfb;
}

.hero-badges span:nth-child(2) {
  color: #5b4bf0;
  border-color: #d8d5ff;
}

.hero-badges span:nth-child(3) {
  color: #2f7bdc;
  border-color: #c8dcfb;
}

.hero-badges span:nth-child(4) {
  color: #0ea5a4;
  border-color: #bdeeea;
}

.material-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.form-section {
  margin-bottom: 0;
  padding: 24px;
  border: 1px solid var(--border, #e3e6f4);
  border-radius: var(--radius-md, 15px);
  background: var(--surface-soft, #f5f6fe);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  overflow: visible;
}

.form-section:hover {
  border-color: #c6cbe6;
  box-shadow: var(--shadow-soft);
}

.form-section:last-of-type {
  border-bottom: 1px solid var(--border, #e3e6f4);
}

.section-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.step-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary, #4f46e5), #6a5cf3);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.3);
}

.section-header h2 {
  margin: 0 0 4px;
}

.section-header .helper-text {
  margin: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 24px;
}
.form-section > .field {
  margin-bottom: 22px;
}

.form-section > .field:last-child {
  margin-bottom: 0;
}

.field {
  min-width: 0;
}

.field-wide {
  grid-column: 1 / -1;
}

.field label {
  margin-top: 0;
}

.dynamic-section {
  background: #ffffff;
}

.submit-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border: 1px solid #d8dcfb;
  border-radius: var(--radius-md, 15px);
  background: linear-gradient(
    135deg,
    var(--primary-soft, #eef0ff),
    var(--accent-soft, #e6fbf8) 130%
  );
}

.submit-bar p {
  margin: 0;
}

.submit-helper {
  color: var(--muted, #6b6f8c);
  font-size: 14px;
  margin-top: 4px;
}

.primary-submit {
  max-width: 260px;
}
a.primary-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: auto;
  max-width: max-content;
}

a.primary-submit:hover {
  text-decoration: none;
}
.auth-submit-bar .primary-submit {
  flex-shrink: 0;
}
.auth-submit-bar {
  min-height: 96px;
}

.auth-submit-bar > div:first-child {
  flex: 1;
}

.auth-submit-bar .primary-submit,
.auth-submit-bar .google-auth-image-link {
  width: 260px;
  max-width: 260px;
  flex: 0 0 260px;
}

.auth-submit-bar .google-auth-image {
  width: 260px;
  height: 48px;
  object-fit: contain;
}

.forgot-password-link {
  margin-top: 0.45rem;
  text-align: right;
  font-size: 0.9rem;
}

.forgot-password-link a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.forgot-password-link a:hover {
  text-decoration: underline;
}

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

  .submit-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .primary-submit {
    max-width: none;
  }
  /* Fix oversized authentication buttons on mobile */
  .auth-submit-bar .primary-submit,
  .auth-submit-bar .google-auth-image-link {
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
  }

  .auth-submit-bar .primary-submit {
    min-height: 50px;
  }

  .auth-submit-bar .google-auth-image {
    width: 100%;
    max-width: 260px;
    height: 48px;
    margin-inline: auto;
  }
}
.teacher-scope-panel {
  margin-bottom: 34px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border, #e3e6f4);
}

.teacher-scope-output {
  background: #f6f7ff;
  border-color: #d8dcfb;
  border-left: 4px solid var(--primary);
}

.teacher-scope-output ul,
.teacher-scope-output ol {
  margin-bottom: 0;
}

/* Compact inline blanks for scaffolded equations and fill-ins */
.inline-answer-space {
  display: inline-block;
  width: 2.75em;
  border-bottom: 2px solid currentColor;
  margin: 0 0.12em;
  vertical-align: baseline;
}
/* Stacked inline fractions for generated math text */
.fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0.08em;
  line-height: 1;
  vertical-align: middle;
}

.fraction-top,
.fraction-bottom {
  display: block;
  font-size: 0.78em;
  line-height: 1.05;
}

.fraction-top {
  padding: 0 0.18em 0.08em;
  border-bottom: 1.5px solid currentColor;
}

.fraction-bottom {
  padding: 0.08em 0.18em 0;
}

/* Printable answer spaces for student assessments */
.answer-space {
  margin: 12px 0 26px;
  border-radius: 10px;
}

/* Lined space for normal written short answers */
.short-answer-space {
  min-height: 96px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 30px,
    #c6cbe6 31px
  );
}

/* Larger lined space for essays */
.essay-space {
  min-height: 260px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 30px,
    #c6cbe6 31px
  );
}

.work-space {
  min-height: 150px;
}

/* Blank workspace for math, science, calculations, diagrams, and messy work */
.blank-work-space {
  min-height: 170px;
  border: 1px solid #c6cbe6;
  background: #ffffff;
}

@media print {
  .answer-space {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Cleaner spacing for assessment settings */
.assessment-setting {
  margin-top: 10px;
}

/* Keep answer key and explanations visually grouped */
#assessment-fields .form-grid {
  row-gap: 22px;
}

.student-info-line {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
  margin-bottom: 8px;
}

.student-info-blank {
  flex: 1;
  min-width: 160px;
  border-bottom: 1px solid #1a1c33;
  height: 1.2em;
}

/* Saved materials page */
.saved-material-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.saved-material-toolbar h2 {
  margin: 0 0 6px;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.saved-material-toolbar .helper-text {
  margin: 0;
}

.saved-material-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.saved-material-item {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #ffffff;
}

.saved-material-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.saved-material-item h2 {
  margin: 0 0 10px;
  font-size: 23px;
  line-height: 1.25;
}

.saved-material-item h2 a {
  color: #4c1d95;
  text-decoration: none;
}

.saved-material-item h2 a:hover {
  text-decoration: underline;
}

.material-meta {
  margin: 0 0 8px;
  color: var(--muted-dark);
}

.saved-material-item .helper-text {
  margin: 0;
}

.material-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.material-actions form {
  margin: 0;
}

.material-actions .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 72px;
}

.material-actions button {
  width: auto;
  box-shadow: none;
}

.delete-button,
.button-secondary.delete-button {
  color: #ffffff;
  border: none;
  background: linear-gradient(135deg, #f43f5e, #fb7185);
  box-shadow: 0 10px 22px rgba(244, 63, 94, 0.26);
}

.delete-button:hover,
.button-secondary.delete-button:hover {
  color: #ffffff;
  border: none;
  background: linear-gradient(135deg, #f43f5e, #fb7185);
  filter: brightness(1.05);
  box-shadow: 0 14px 28px rgba(244, 63, 94, 0.34);
}

.create-another-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--primary), #6a5cf3);
  color: #ffffff;
  border: none;
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.28);
}

.create-another-button:hover {
  background: linear-gradient(135deg, var(--primary), #6a5cf3);
  color: #ffffff;
  filter: brightness(1.05);
  box-shadow: 0 16px 30px rgba(79, 70, 229, 0.34);
}

@media (max-width: 760px) {
  .saved-material-toolbar,
  .saved-material-header {
    flex-direction: column;
    align-items: stretch;
  }

  .material-actions {
    width: 100%;
  }

  .material-actions .secondary-button,
  .create-another-button {
    width: 100%;
  }
}

.google-auth-image-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.google-auth-image-link:hover {
  text-decoration: none;
}

.google-auth-image {
  display: block;
  height: 44px;
  max-width: 100%;
}
/* Index-page authentication actions */
.auth-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  margin: 0 0 20px;
}

.auth-bar .helper-text {
  margin: 0 auto 0 0;
}

.auth-bar form {
  display: flex;
  margin: 0;
}

.auth-bar .button-secondary,
.auth-bar .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 44px;
  padding: 0.7rem 1.05rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease;
}

/* Login */
.auth-bar a.button-secondary:first-child,
.auth-bar a.button-secondary:first-child:visited {
  color: #36275d;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(109, 40, 217, 0.22);
  box-shadow: 0 6px 16px rgba(21, 14, 46, 0.07);
}

.auth-bar a.button-secondary:first-child:hover {
  color: #6d28d9;
  background: #ffffff;
  border-color: #6d28d9;
  box-shadow: 0 10px 22px rgba(109, 40, 217, 0.14);
  transform: translateY(-2px);
}

/* Create Account */
.auth-bar a.button-secondary:last-child,
.auth-bar a.button-secondary:last-child:visited {
  color: #ffffff;
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 48%, #14b8a6 100%);
  border: 1px solid transparent;
  box-shadow:
    0 10px 24px rgba(109, 40, 217, 0.25),
    0 2px 6px rgba(20, 184, 166, 0.16);
}

.auth-bar a.button-secondary:last-child:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #5f20c7 0%, #7040dd 48%, #0fa897 100%);
  border-color: transparent;
  box-shadow:
    0 14px 30px rgba(109, 40, 217, 0.32),
    0 4px 10px rgba(20, 184, 166, 0.2);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .auth-bar {
    flex-wrap: wrap;
  }

  .auth-bar .helper-text {
    flex: 0 0 100%;
    margin: 0 0 4px;
  }
}
/* Result and saved-material page management actions */
.management-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px;
  margin-bottom: 30px;
  padding: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.management-action-form {
  display: flex;
  min-width: 0;
  margin: 0;
}

.management-button,
.management-actions button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  height: 100%;
  text-align: center;
}

/* Separate Teacher Scope, Student Version, and Answer Key cards */
.document-card {
  overflow: hidden;
  margin-top: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.document-card:first-child {
  margin-top: 0;
}

.document-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

.document-card-header > div:first-child {
  min-width: 0;
}

.document-card-header .section-label {
  margin-bottom: 5px;
}

.document-card-header h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.document-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}

.document-action-button {
  width: auto;
  min-width: 115px;
  min-height: 42px;
  padding: 10px 14px;
  box-shadow: none;
}

.document-card-content {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 30px;
}

.teacher-document-card .document-card-header {
  background: linear-gradient(135deg, var(--primary-soft), #f7f7ff);
}

.student-document-card .document-card-header {
  background: linear-gradient(135deg, #ffffff, var(--primary-soft));
}

.answer-document-card .document-card-header {
  background: linear-gradient(135deg, var(--accent-soft), #f8fffe);
}

.teacher-document-card .teacher-scope-output {
  background: #fafaff;
  border-left: 4px solid var(--primary);
}

.answer-document-card .answer-key-output {
  background: #fbfffe;
  border-left: 4px solid var(--accent);
}

/* Responsive result cards */
@media (max-width: 700px) {
  .management-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .document-card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px;
  }

  .document-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .document-action-button {
    width: 100%;
    min-width: 0;
  }

  .document-card-content {
    padding: 22px;
  }
}

@media (max-width: 430px) {
  .management-actions {
    grid-template-columns: 1fr;
  }

  .document-card-header h2 {
    font-size: 21px;
  }
}

/* Print cleanup for the new cards */
@media print {
  .management-actions,
  .document-actions {
    display: none !important;
  }

  .document-card {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .document-card-header {
    padding: 0 0 16px;
    background: white;
    border-bottom: none;
  }

  .document-card-content {
    padding: 0;
  }
}

/* Allow longer management button labels to wrap cleanly */
.management-actions .management-button {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  padding: 12px 14px;
  text-align: center;
}

.management-button-second-line {
  display: block;
  width: 100%;
}
/* Keep the Google Drive action consistent with other management buttons */
.management-actions .google-drive-button {
  flex-direction: row;
  gap: 10px;
}

.management-actions .google-drive-button-icon {
  display: block;
  width: 28px;
  height: 28px;
  max-width: 28px;
  max-height: 28px;
  flex: 0 0 28px;
  object-fit: contain;
}
/* Slightly reduce the size of the top result-page action buttons */

/* Keep Word and PDF actions in a consistent two-line format */
.management-file-button {
  gap: 3px;
}

.management-file-action,
.management-file-button .management-button-second-line {
  display: block;
  width: 100%;
  text-align: center;
}

.management-actions .management-button,
.management-actions button {
  min-height: 56px;
  padding: 7px 10px;
  font-size: 13.5px;
  line-height: 1.15;
}

.management-actions .google-drive-button-icon {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  flex-basis: 24px;
}
/* ==========================================================================
   SHARED SITE HEADER  —  "bookend"
   The single source of truth for the header. Replaces the older header
   block that lived here plus two appended patch blocks at the end of the
   file; those have been removed, so do not re-append header rules below.

   Ground, link colour, hover and focus ring are taken from the .site-footer
   block further down, so the two bars speak the same language.

   ⚠ REQUIRES a light variant of chalkdraft-logo.svg. See the LOGO note below.
   ========================================================================== */

/* --- The bar: same ground as .site-footer -------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  border: 0;
  background: #100a24;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px -24px rgba(16, 10, 36, 0.9);
}

/* Optional: a hint of glass so content shows through as it scrolls under.
   Costs you an exact colour match with the footer (lands nearer #1a142f).
   Swap the background above for this pair if you want it. */
/*
.site-header {
  background: rgba(16, 10, 36, 0.94);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
*/

/* Depth: the body's own indigo/teal radials, faintly, so the bar isn't a
   flat slab. Remove this rule for a dead-flat footer match. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      120% 340% at 0% 0%,
      rgba(99, 91, 240, 0.34),
      transparent 66%
    ),
    radial-gradient(
      120% 340% at 100% 0%,
      rgba(14, 165, 164, 0.22),
      transparent 62%
    );
}

/* Signature: the gradient rule from .form-card::before, reused as the
   header's bottom edge. It reads far harder against the dark ground. */
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 2px;
  background: linear-gradient(90deg, #4f46e5, #7c6cf6 45%, #0ea5a4);
}

/* Geometry is locked to the landing page's `.nav .wrap` so the logo does not
   shift or resize when you cross from the landing page into the app:
     max-width 1180px  ·  padding 0 1.5rem   (landing `.wrap`)
     min-height 90px   ·  padding 1rem 0     (landing `.nav .wrap`)
   Changing any of these four values breaks the handoff. */
.site-header .site-header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 90px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

/* --- LOGO ----------------------------------------------------------------
   The header partial points at images/chalkdraft-logo-light.svg — identical
   to chalkdraft-logo.svg except the wordmark gradient runs
   #ffffff → #c7d2fe → #5eead4 so it survives the dark ground. The mark tile
   is unchanged, so the brand reads the same on both light and dark bars.

   If you switch this header back to a light treatment, point the partial at
   the original chalkdraft-logo.svg instead.                                */
/* Mirrors landing `.logo` */
.site-header .site-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}

.site-header .site-brand:hover {
  transform: translateY(-1px);
  opacity: 0.96;
  text-decoration: none;
}

/* Mirrors landing `.landing-logo` — 58px, unchanged at every breakpoint */
.site-header .site-brand-logo {
  display: block;
  width: auto;
  height: 58px;
  max-width: 100%;
}

.site-header .site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

/* --- Tier 3: quiet links, footer palette ---------------------------------
   Footer links sit at weight 400 / 0.85rem because they're legal-tier. These
   are primary navigation, so they carry more weight — colour and hover match
   the footer exactly, the typographic weight deliberately does not.         */
.site-header .site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: rgba(248, 246, 252, 0.7);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}

.site-header .site-nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
  color: #5eead4; /* .site-footer-nav a:hover */
  text-decoration: none;
  transform: none;
}

/* --- Current page --------------------------------------------------------- */
.site-header .site-nav a[aria-current="page"] {
  color: #ffffff;
}

.site-header .site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 3px;
  left: 13px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7c6cf6, #5eead4);
}

/* --- Tier 1: primary destination ----------------------------------------- */
.site-header .site-nav a.site-nav-cta {
  margin-left: 6px;
  padding: 9px 17px;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), #6a5cf3);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.45);
  transition:
    box-shadow 0.14s ease,
    filter 0.14s ease;
}

.site-header .site-nav a.site-nav-cta:hover {
  background: linear-gradient(135deg, var(--primary), #6a5cf3);
  color: #ffffff;
  filter: brightness(1.1);
  box-shadow: 0 12px 26px rgba(79, 70, 229, 0.6);
}

.site-header .site-nav a.site-nav-cta[aria-current="page"]::after {
  display: none;
}

/* --- Tier 2: Admin reads as a mode, in the footer's teal ----------------- */
.site-header .site-nav a.site-nav-admin {
  margin-right: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(94, 234, 212, 0.32);
  background: rgba(14, 165, 164, 0.16);
  color: #5eead4;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-header .site-nav a.site-nav-admin:hover {
  border-color: rgba(94, 234, 212, 0.6);
  background: rgba(14, 165, 164, 0.26);
  color: #99f6e4;
}
.site-header .site-nav-billing-form {
  display: flex;
  margin: 0;
}

.site-header .site-nav-billing-button {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: rgba(248, 246, 252, 0.7);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
}

.site-header .site-nav-billing-button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #5eead4;
  box-shadow: none;
  filter: none;
  transform: none;
}
/* --- Log out: divider, then the quietest thing in the bar ---------------- */
.site-header .site-nav-logout-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 6px;
}

.site-header .site-nav-logout-form::before {
  content: "";
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.18);
}

.site-header .site-nav-logout-button {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: rgba(248, 246, 252, 0.55);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}

.site-header .site-nav-logout-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
  color: #ffffff;
  box-shadow: none;
  filter: none;
  transform: none;
}

/* --- Focus: same ring as .site-footer-nav a:focus-visible ---------------- */
.site-header .site-brand:focus-visible,
.site-header .site-nav a:focus-visible,
.site-header .site-nav-billing-button:focus-visible,
.site-header .site-nav-logout-button:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.4);
  outline-offset: 3px;
  border-radius: 999px;
  box-shadow: none;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .site-header .site-nav a {
    padding: 8px 10px;
    font-size: 13px;
  }

  .site-header .site-nav a[aria-current="page"]::after {
    right: 10px;
    left: 10px;
  }
}

/* Breakpoints below mirror the landing nav's (900px / 560px). The logo height
   and the horizontal 1.5rem padding are deliberately NOT touched at any width
   — that is what keeps the mark pinned across the landing/app handoff. */
@media (max-width: 900px) {
  .site-header .site-nav {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    margin-left: 0;
  }

  .site-header .site-header-inner {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .site-header .site-nav a.site-nav-cta {
    margin-left: 0;
  }

  .site-header .site-nav-logout-form {
    margin-left: auto;
  }
}

/* Mirrors landing `@media (max-width: 560px) .nav .wrap` */
@media (max-width: 560px) {
  .site-header .site-header-inner {
    min-height: auto;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }

  .site-header .site-nav-logout-form::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .site-brand-logo,
  .site-header .site-nav a,
  .site-header .site-nav-logout-button {
    transition: none;
  }
}
/* Scoped student-assessment work-space adjustment.
   Existing answer-space rules remain intact for other pages and exports. */
.student-assessment-output .answer-space {
  margin: 10px 0 18px;
  border-radius: 0;
}

.student-assessment-output .blank-work-space {
  min-height: 96px;
  border: none;
  background: transparent;
}

/* Keep printable assessment questions together when they fit on one page. */
@media print {
  .student-assessment-output ol > li {
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  .student-assessment-output ol:has(+ .answer-space) {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  .student-assessment-output .answer-space {
    break-before: avoid-page;
    page-break-before: avoid;
  }

  .student-assessment-output .blank-work-space {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}
.form-error-message {
  font-weight: 800;
  background: #fef2f2; /* soft red */
  color: #b91c1c; /* deep red text */
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 0.875rem 1.25rem;
  margin: 0 auto 1.5rem;
  max-width: 640px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.08);
}

/* Generation progression board */
.generation-progress {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(238, 241, 251, 0.88);
  backdrop-filter: blur(6px);
}

.generation-progress[hidden] {
  display: none;
}

.generation-progress-card {
  width: min(100%, 560px);
  padding: 34px;
  border: 1px solid rgba(198, 203, 230, 0.85);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow);
  text-align: center;
}

.generation-progress-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 24px;
}

.generation-progress-bar {
  position: relative;
  overflow: hidden;
  height: 10px;
  margin: 0 auto 24px;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid #d8dcfb;
}

.generation-progress-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #7c6cf6, var(--accent));
  animation: generation-progress-sweep 1.7s ease-in-out infinite;
}

.generation-progress-card h2 {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--text);
}

.generation-progress-copy {
  max-width: 440px;
  margin: 0 auto 20px;
  color: var(--muted-dark);
  font-size: 16px;
  line-height: 1.6;
}

.generation-progress-status {
  margin: 0;
  color: var(--primary-dark);
  font-size: 16px;
  font-weight: 800;
}

.generation-progress-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.generation-progress-logo {
  display: block;
  width: auto;
  height: 58px;
  max-width: 100%;
  margin: 0 auto;
  transform: translateX(22px);
}

button:disabled,
button[disabled] {
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
  filter: none;
}

button:disabled:hover,
button[disabled]:hover {
  transform: none;
  filter: none;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.2);
}

@keyframes generation-progress-sweep {
  0% {
    transform: translateX(-115%);
  }

  50% {
    transform: translateX(75%);
  }

  100% {
    transform: translateX(235%);
  }
}

@media (max-width: 600px) {
  .generation-progress-card {
    padding: 26px 22px;
  }

  .generation-progress-card h2 {
    font-size: 23px;
  }

  .generation-progress-copy {
    font-size: 15px;
  }
}

.auth-action-link:hover {
  text-decoration: none;
}

.auth-secondary-link {
  display: inline-flex;
  margin-top: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.auth-secondary-link:hover {
  text-decoration: underline;
}

.auth-link-row {
  margin-top: 1rem;
}

.auth-message-action > div:first-child {
  flex: 1;
}

.auth-message-action .primary-submit {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  padding: 13px 20px;
}

@media (max-width: 760px) {
  .auth-message-action {
    align-items: stretch;
    flex-direction: column;
  }

  .auth-message-action .primary-submit {
    width: 100%;
  }
}

.auth-submit-bar .auth-inline-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--primary-dark);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.auth-submit-bar .auth-inline-link:hover {
  text-decoration: underline;
}
/* Support and feedback forms */
.honeypot-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.privacy-warning {
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1px solid #bdeeea;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--muted-dark);
  font-size: 14px;
  line-height: 1.55;
}

.privacy-warning strong {
  color: var(--text);
}

.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  margin-bottom: 0;
}

.checkbox-field input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}

.checkbox-field span {
  line-height: 1.4;
}
/* Success messages for restored forms, support, and feedback */
.form-success-message {
  max-width: 720px;
  margin: 0 auto 24px;
  padding: 18px 22px;
  border: 1px solid #d8dcfb;
  border-left: 5px solid var(--primary);
  border-radius: var(--radius-md);
  background: linear-gradient(
    135deg,
    var(--primary-soft),
    var(--accent-soft) 130%
  );
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.form-success-message::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  vertical-align: 1px;
}
/* Feedback and Support page polish */
.contact-page .page-container {
  max-width: 900px;
}

.contact-page .hero {
  margin-bottom: 28px;
}

.contact-page .eyebrow {
  color: var(--accent);
}

.contact-page .hero h1 {
  background: linear-gradient(120deg, #176b70 0%, #0ea5a4 45%, #4f46e5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-page .form-card {
  border-color: rgba(14, 165, 164, 0.22);
}

.contact-page .form-card::before {
  background: linear-gradient(90deg, #0ea5a4, #43c7bd 45%, #4f46e5);
}

.contact-page .form-section {
  background: linear-gradient(135deg, #ffffff, var(--accent-soft) 170%);
  border-color: rgba(14, 165, 164, 0.22);
}

.contact-page .form-section:hover {
  border-color: rgba(14, 165, 164, 0.42);
  box-shadow: 0 12px 30px rgba(14, 165, 164, 0.11);
}

.contact-page .step-pill {
  background: linear-gradient(135deg, var(--accent), #43c7bd);
  box-shadow: 0 8px 18px rgba(14, 165, 164, 0.28);
}

.contact-page input:focus,
.contact-page select:focus,
.contact-page textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(14, 165, 164, 0.14);
}

.contact-page .privacy-warning {
  margin-bottom: 26px;
  padding: 16px 18px;
  border: 1px solid rgba(14, 165, 164, 0.25);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: #176b70;
  line-height: 1.5;
}

.contact-page .primary-submit {
  background: linear-gradient(135deg, var(--accent), #43c7bd);
  box-shadow: 0 12px 24px rgba(14, 165, 164, 0.26);
}

.contact-page .primary-submit:hover {
  box-shadow: 0 16px 30px rgba(14, 165, 164, 0.34);
}

.contact-page .auth-link-row {
  margin: 26px 0 0;
  text-align: center;
}

.contact-page .auth-link-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid rgba(14, 165, 164, 0.32);
  border-radius: 999px;
  background: #ffffff;
  color: #176b70;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(14, 165, 164, 0.1);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}

.contact-page .auth-link-row a:hover {
  transform: translateY(-1px);
  background: var(--accent-soft);
  color: #0f5f63;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(14, 165, 164, 0.16);
}
/* Admin dashboard */
.admin-dashboard-page {
  min-height: 100vh;
}

.admin-page-container {
  max-width: 1120px;
}

.admin-hero {
  margin-bottom: 30px;
}

.admin-hero h1 {
  font-size: clamp(36px, 6vw, 52px);
}

.admin-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 10px 16px;
  border: 1px solid;
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(33, 26, 92, 0.08);
}

.admin-status.is-enabled {
  color: #087f79;
  border-color: #a9e8e1;
  background: #f1fffc;
}

.admin-status.is-paused {
  color: #b42318;
  border-color: #fecaca;
  background: #fff5f5;
}

.admin-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(14, 165, 164, 0.12);
}

.admin-status.is-paused .admin-status-dot {
  box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.1);
}

.admin-summary-panel,
.admin-panel {
  position: relative;
  margin-bottom: 26px;
  padding: 30px;
  border: 1px solid rgba(214, 219, 240, 0.92);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.admin-summary-panel::before,
.admin-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--primary),
    #7c6cf6 45%,
    var(--accent)
  );
}

.admin-panel {
  box-shadow: var(--shadow-soft);
}

.admin-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}

.admin-section-heading h2 {
  margin: 0 0 7px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.admin-section-heading .helper-text {
  margin: 0;
}

.admin-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 150px;
  flex-shrink: 0;
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.admin-metric-card {
  position: relative;
  min-width: 0;
  min-height: 154px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), #f7f8ff);
  box-shadow: 0 9px 22px rgba(33, 26, 92, 0.07);
  overflow: hidden;
}

.admin-metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #c6cbe6;
}

.admin-metric-card span,
.admin-limit-card span {
  display: block;
  margin-bottom: 12px;
  color: var(--muted-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-metric-card strong {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 31px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.admin-metric-card small,
.admin-limit-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.admin-metric-primary::before {
  background: var(--primary);
}

.admin-metric-violet::before {
  background: #7c6cf6;
}

.admin-metric-teal::before {
  background: var(--accent);
}

.admin-metric-blue::before {
  background: #2f7bdc;
}

.admin-limit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.admin-limit-card {
  padding: 22px;
  border: 1px solid #d8dcfb;
  border-radius: var(--radius-md);
  background: linear-gradient(
    135deg,
    var(--primary-soft),
    var(--accent-soft) 145%
  );
}

.admin-limit-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--primary-dark);
  font-size: 28px;
  line-height: 1;
}

.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #ffffff;
}

.admin-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 15px 17px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.admin-table th {
  background: var(--surface-soft);
  color: var(--muted-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-table td {
  color: var(--text);
  font-size: 14px;
}

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

.admin-table tbody tr:hover {
  background: #fafaff;
}

.admin-user-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid #d8dcfb;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-log-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-transform: capitalize;
}

.admin-log-status.is-success {
  color: #087f79;
  background: var(--accent-soft);
}

.admin-log-status.is-failed {
  color: #b42318;
  background: #fff0f0;
}

.admin-empty-state {
  padding: 28px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  text-align: center;
}

.admin-empty-state p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 960px) {
  .admin-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .admin-summary-panel,
  .admin-panel {
    padding: 22px;
    border-radius: 17px;
  }

  .admin-section-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-back-button {
    width: 100%;
  }

  .admin-limit-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .admin-metric-grid {
    grid-template-columns: 1fr;
  }

  .admin-metric-card {
    min-height: 135px;
  }
}

.admin-user-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
}

.admin-user-email {
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.admin-user-cell small {
  color: var(--muted);
  font-size: 11px;
}

.admin-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-users-table td {
  vertical-align: middle;
}

@media (max-width: 720px) {
  .admin-heading-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .admin-heading-actions .admin-back-button {
    width: 100%;
  }
}

.admin-user-link {
  text-decoration: none;
}

.admin-user-link:hover {
  text-decoration: underline;
}

.admin-user-metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .admin-user-metric-grid {
    grid-template-columns: 1fr;
  }
}

.admin-table-link {
  color: var(--primary-dark);
  font-weight: 800;
  text-decoration: none;
}

.admin-table-link:hover {
  text-decoration: underline;
}

.admin-muted-text {
  color: var(--muted);
  font-size: 13px;
}

.admin-material-metadata {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.admin-material-metadata p {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.admin-material-metadata span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-material-metadata strong {
  display: block;
  overflow-wrap: anywhere;
}

.admin-material-text {
  margin: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fbfbff;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .admin-material-metadata {
    grid-template-columns: 1fr;
  }
}

/* FAQ and How to Use pages */
.help-page .page-container {
  max-width: 1040px;
}

.help-page-hero {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.help-page-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding: 24px 26px;
  border: 1px solid #d8dcfb;
  border-radius: var(--radius-md);
  background: linear-gradient(
    135deg,
    var(--primary-soft),
    var(--accent-soft) 140%
  );
  box-shadow: var(--shadow-soft);
}

.help-page-intro > div {
  min-width: 0;
}

.help-page-intro h2 {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.help-page-intro p:not(.section-label) {
  max-width: 620px;
  margin: 0;
  color: var(--muted-dark);
  line-height: 1.6;
}

.help-page-intro .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.faq-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.faq-section-nav {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.faq-section-nav .section-label {
  margin-bottom: 8px;
}

.faq-section-nav a {
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--muted-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.faq-section-nav a:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
  text-decoration: none;
}

.faq-content {
  min-width: 0;
}

.faq-section {
  scroll-margin-top: 24px;
  margin-bottom: 26px;
  padding: 28px;
  border: 1px solid rgba(214, 219, 240, 0.95);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-soft);
}

.faq-section:last-child {
  margin-bottom: 0;
}

.faq-section-heading {
  margin-bottom: 20px;
}

.faq-section-heading h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.faq-item {
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.faq-item:first-of-type {
  margin-top: 0;
}

.faq-item[open] {
  background: #ffffff;
  border-color: #cdd2f4;
  box-shadow: 0 8px 22px rgba(33, 26, 92, 0.07);
}

.faq-item summary {
  position: relative;
  padding: 18px 52px 18px 18px;
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 800;
  transform: translateY(-50%);
}

.faq-item[open] summary::after {
  content: "−";
  background: var(--accent-soft);
  color: #176b70;
}

.faq-item summary:hover {
  color: var(--primary-dark);
}

.faq-answer {
  padding: 0 18px 18px;
  color: var(--muted-dark);
  font-size: 15px;
  line-height: 1.65;
}

.faq-answer p {
  margin: 0 0 12px;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer ul {
  margin: 0;
  padding-left: 22px;
}

.faq-answer li {
  margin-bottom: 7px;
}

.faq-answer li:last-child {
  margin-bottom: 0;
}

.faq-answer a {
  color: var(--primary-dark);
  font-weight: 800;
}

.help-warning {
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid #d8dcfb;
  border-left: 5px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--muted-dark);
  line-height: 1.6;
}

.help-warning strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
}

.help-warning p {
  margin: 0;
}

.help-warning-privacy {
  border-color: #bdeeea;
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.faq-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.faq-contact-actions .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
}

/* Shared site footer — matches the landing page footer */
.site-footer {
  margin: 48px calc(50% - 50vw) 0;
  padding: 3rem 0 2rem;
  background: #100a24;
  color: rgba(248, 246, 252, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.site-footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer-brand {
  min-width: 0;
}

.site-footer-logo,
.site-footer-logo:visited {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
}

.site-footer-logo:hover {
  color: #5eead4;
  text-decoration: none;
}

.site-footer-brand p {
  max-width: 32ch;
  margin: 0.6rem 0 0;
  color: rgba(248, 246, 252, 0.45);
  font-size: 0.85rem;
  line-height: 1.55;
}

.site-footer-nav {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  max-width: 680px;
}
.site-footer-legal-links {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 1.6rem;
  white-space: nowrap;
}

.site-footer-nav a,
.site-footer-nav a:visited {
  color: rgba(248, 246, 252, 0.65);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}

.site-footer-nav a:hover {
  color: #5eead4;
  text-decoration: none;
}

.site-footer-logo:focus-visible,
.site-footer-nav a:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.4);
  outline-offset: 3px;
  border-radius: 3px;
}

.site-footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  padding-top: 1.4rem;
  color: rgba(248, 246, 252, 0.35);
  font-size: 0.78rem;
}

@media (max-width: 700px) {
  .site-footer {
    margin-top: 36px;
    padding: 2.5rem 0 1.75rem;
  }

  .site-footer-top,
  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer-nav {
    gap: 0.75rem 1.25rem;
  }
}

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

  .faq-section-nav {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faq-section-nav .section-label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .help-page-intro {
    align-items: stretch;
    flex-direction: column;
    padding: 22px;
  }

  .help-page-intro .secondary-button {
    width: 100%;
  }

  .faq-section {
    padding: 22px;
    border-radius: 16px;
  }

  .faq-section-heading h2 {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .faq-section-nav {
    grid-template-columns: 1fr;
  }

  .faq-section-nav .section-label {
    grid-column: auto;
  }

  .faq-item summary {
    padding: 16px 48px 16px 16px;
    font-size: 16px;
  }

  .faq-answer {
    padding: 0 16px 16px;
  }

  .faq-contact-actions {
    flex-direction: column;
  }

  .faq-contact-actions .secondary-button {
    width: 100%;
  }
}
/* How to Use page */
.how-to-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.how-to-content {
  min-width: 0;
}

.how-to-lead {
  margin: 0 0 22px;
  color: var(--muted-dark);
  font-size: 17px;
  line-height: 1.65;
}

.how-to-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.how-to-step {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.how-to-step .step-pill {
  flex-shrink: 0;
}

.how-to-step h3 {
  margin: 2px 0 6px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.how-to-step p {
  margin: 0;
  color: var(--muted-dark);
  line-height: 1.6;
}

.how-to-field-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.how-to-field-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.how-to-field-card h3 {
  margin: 0 0 9px;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.how-to-field-card p {
  margin: 0 0 12px;
  color: var(--muted-dark);
  line-height: 1.6;
}

.how-to-field-card p:last-child {
  margin-bottom: 0;
}

.how-to-field-card ul {
  margin: 0;
  padding-left: 21px;
  color: var(--muted-dark);
  line-height: 1.55;
}

.how-to-field-card li {
  margin-bottom: 8px;
}

.how-to-field-card li:last-child {
  margin-bottom: 0;
}

.how-to-material-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.how-to-material-card {
  padding: 19px;
  border: 1px solid #d8dcfb;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary-soft), #ffffff 125%);
}

.how-to-material-card h3 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 18px;
}

.how-to-material-card p {
  margin: 0;
  color: var(--muted-dark);
  line-height: 1.6;
}

.how-to-example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.how-to-example {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #ffffff;
}

.how-to-example:first-of-type {
  margin-top: 0;
}

.how-to-example .section-label {
  margin-bottom: 10px;
}

.how-to-example ul {
  margin: 0;
  padding-left: 21px;
  color: var(--muted-dark);
  line-height: 1.55;
}

.how-to-example li {
  margin-bottom: 7px;
}

.how-to-example-good {
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
}

.how-to-example-bad {
  border-left: 4px solid #e87979;
  background: #fff5f5;
}

.how-to-example-bad .section-label {
  color: #b54141;
}

.how-to-standard-list {
  margin: 0 0 22px;
  padding-left: 23px;
  color: var(--muted-dark);
  line-height: 1.6;
}

.how-to-standard-list li {
  margin-bottom: 8px;
}

.how-to-inline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-bottom: 22px;
}

.how-to-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.faq-answer h3 {
  margin: 20px 0 7px;
  color: var(--text);
  font-size: 16px;
}

.faq-answer h3:first-child {
  margin-top: 0;
}

@media (max-width: 820px) {
  .how-to-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .how-to-field-list,
  .how-to-material-grid,
  .how-to-example-grid,
  .how-to-support-grid {
    grid-template-columns: 1fr;
  }
}

.overview-topic {
  min-width: 0;
}

.overview-subject {
  margin-top: 18px;
}

.overview-subject span {
  display: block;
  margin-bottom: 8px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.overview-subject strong {
  display: block;
  max-width: 100%;
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.overview-subject-area {
  margin-top: 22px;
}

.overview-subject-area span {
  display: block;
  margin-bottom: 8px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.overview-subject-area strong {
  display: block;
  max-width: 100%;
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
/* ==========================================================================
   Sample library (/samples)
   ========================================================================== */

.samples-section .section-header {
  align-items: center;
  justify-content: space-between;
}

/* Same pill treatment as .hero-badges span */
.sample-count {
  flex-shrink: 0;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid #d8dcfb;
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted-dark);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(33, 26, 92, 0.07);
}

.saved-materials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Same card shell as .saved-material-item */
.saved-material-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #ffffff;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Same hover as .form-section: border and shadow, no lift */
.saved-material-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-soft);
}

.saved-material-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* The topic paragraph has no class of its own; margin-bottom auto pushes the
   meta grid and button to the bottom so cards in a row line up. */
.saved-material-card > h2 + p {
  margin: 0 0 auto;
  padding-bottom: 18px;
  color: var(--muted-dark);
  font-size: 15px;
  line-height: 1.6;
}

/* Same label/value treatment as .overview-grid on the sample detail page */
.saved-material-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.saved-material-meta p {
  margin: 0;
  min-width: 0;
}

/* Five items in two columns leaves one alone; let it run full width. */
.saved-material-meta p:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.saved-material-meta span {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.saved-material-meta strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* .button-secondary is not covered by the base button rule, so it needs its
   own metrics here — same approach as .auth-bar .button-secondary. */
.saved-material-card .button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 48px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

@media (max-width: 760px) {
  .samples-section .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .saved-materials-grid {
    grid-template-columns: 1fr;
  }

  .saved-material-card .button-secondary {
    width: 100%;
    align-self: stretch;
  }
}

@media print {
  .saved-materials-grid {
    grid-template-columns: 1fr;
  }

  .saved-material-card {
    box-shadow: none;
    break-inside: avoid;
  }

  .saved-material-card .button-secondary {
    display: none;
  }
}

/* ==========================================================================
   HEADER — Tier 0: "Create"
   Append after the existing .site-header block (end of styles-patch.css).
   Nothing above is edited; these rules only add.

   Built to mirror .site-nav-cta one-for-one — same gradient shape, same
   shadow pair, same hover technique — swapping the indigo brand ramp for
   the teal accent ramp so the two pills read as the same species of button
   in two different voices.
   ========================================================================== */

.site-header .site-nav a.site-nav-create {
  gap: 8px;
  margin-right: 6px;
  padding: 9px 17px 9px 14px;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), #5eead4);
  color: #042f2e; /* teal-950, the dark end of the ramp used above */
  box-shadow: 0 8px 20px rgba(14, 165, 164, 0.45);
  transition:
    box-shadow 0.14s ease,
    filter 0.14s ease;
}

.site-header .site-nav a.site-nav-create .site-nav-create-icon {
  flex-shrink: 0;
  opacity: 0.8;
}

.site-header .site-nav a.site-nav-create:hover {
  background: linear-gradient(135deg, var(--accent), #5eead4);
  color: #042f2e;
  filter: brightness(1.1);
  box-shadow: 0 12px 26px rgba(14, 165, 164, 0.6);
}

/* On /create the pill is already unmistakable — suppress the underline bar
   that .site-nav a[aria-current="page"]::after draws on the quiet links,
   exactly as .site-nav-cta does. */
.site-header .site-nav a.site-nav-create[aria-current="page"] {
  color: #042f2e;
}

.site-header .site-nav a.site-nav-create[aria-current="page"]::after {
  display: none;
}

/* The bar wraps here and the nav gap drops to 4px, so the tier margin comes
   off — the same treatment .site-nav-cta gets. */
@media (max-width: 900px) {
  .site-header .site-nav a.site-nav-create {
    margin-right: 0;
  }
}

/* The reduced-motion block at the foot of the header section can't reach this
   rule (or the .site-nav-cta one) — both set transition at a higher
   specificity, so it has to be restated here. */
@media (prefers-reduced-motion: reduce) {
  .site-header .site-nav a.site-nav-create,
  .site-header .site-nav a.site-nav-cta {
    transition: none;
  }
}

/* ==========================================================================
   OPTIONAL — demote "Saved Library" so the bar has one clear primary.
   Two filled pills next to each other split the eye; if Create is the action
   you actually want people taking, turn Saved Library into an outline chip.
   Same specificity as the original .site-nav-cta rules, so this must sit
   after them in the cascade (it does, if this file is appended last).
   Delete this block if you want both pills filled.
   ========================================================================== */
/*
.site-header .site-nav a.site-nav-cta {
  border-color: rgba(124, 108, 246, 0.42);
  background: rgba(124, 108, 246, 0.16);
  color: #c7d2fe;
  box-shadow: none;
}

.site-header .site-nav a.site-nav-cta:hover {
  border-color: rgba(124, 108, 246, 0.7);
  background: rgba(124, 108, 246, 0.26);
  color: #ffffff;
  filter: none;
  box-shadow: none;
}
*/

/* ==========================================================================
   /create — material form polish
   Scoped to #generation-form on purpose: .material-form is also used by the
   login, register and contact pages, and none of this should reach them.

   Layout constraint — the page script sets inline display:block / none on
   .field and .form-section elements to show and hide the conditional steps.
   Nothing below may make either of those flex or grid: the inline block
   would win and the layout would silently collapse.
   ========================================================================== */

/* --- Selects ------------------------------------------------------------
   ~20 native dropdowns in a row is the main reason the page reads as a
   plain form. Swapping the OS chevron for the brand indigo one is the
   single highest-leverage change here. */
#generation-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 13px 13px;
}

/* --- Type hierarchy inside a field --------------------------------------
   Labels were body-size bold, competing with the value in the control.
   Drop them a step so the answer is what reads first. */
#generation-form .field label {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted-dark);
}

#generation-form .field:focus-within > label {
  color: var(--primary);
}

/* Helper text that belongs to a field, not to a section header. The base
   .helper-text rule pushes 18px *below* itself, which left uneven gaps
   wherever a note sat under a control. */
#generation-form .field .helper-text {
  margin: 10px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--border-strong);
  font-size: 13px;
}

/* A number between 0 and 30 does not need a 460px input. */
#generation-form input[type="number"] {
  max-width: 150px;
}

/* --- Section headers ----------------------------------------------------- */
#generation-form .form-section h2 {
  font-size: 20px;
}

#generation-form .section-header {
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(198, 203, 230, 0.55);
}

#generation-form .step-pill {
  min-width: 30px;
  height: 30px;
  font-size: 13px;
  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.26);
}

/* --- Conditional steps read as teal, permanent steps as indigo ------------
   This encodes something true rather than decorating: teal sections are the
   ones that appeared because of the material type chosen above. */
#generation-form .dynamic-section {
  border-color: #c8ebe8;
}

#generation-form .dynamic-section:hover {
  border-color: #9fdcd7;
}

#generation-form .dynamic-section .step-pill {
  background: linear-gradient(135deg, var(--accent), #2fc4bd);
  box-shadow: 0 6px 14px rgba(14, 165, 164, 0.28);
}

#generation-form .dynamic-section .section-header {
  border-bottom-color: rgba(14, 165, 164, 0.22);
}

/* --- The hinge -----------------------------------------------------------
   Material type drives every conditional section below it, but it was the
   fifth identical dropdown in the grid. Full width, on its own surface, with
   the same indigo/violet/teal rule the form card wears at the top. */
#generation-form .field-feature {
  position: relative;
  padding: 22px 24px 22px 26px;
  border: 1px solid #d3d7f7;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  overflow: hidden;
}

#generation-form .field-feature::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #4f46e5, #7c6cf6 45%, #0ea5a4);
}

#generation-form .field-feature > label {
  font-size: 15px;
  color: var(--primary-dark);
}

#generation-form .field-feature select {
  min-height: 54px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-color: #bfc4f2;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.09);
}

/* This rule set border-color at (1,1,1), which outranks the base select:hover
   and select:focus rules at (0,1,1) — the most important control on the page
   was silently losing both states. Restate them here. */
#generation-form .field-feature select:hover {
  border-color: #9aa1ec;
}

#generation-form .field-feature select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.18);
}

#generation-form .field-feature .helper-text {
  border-left-color: rgba(79, 70, 229, 0.3);
  color: var(--muted-dark);
}

/* --- Terminal action ----------------------------------------------------- */
#generation-form .submit-bar {
  padding: 24px;
  border-color: #cfd4f7;
}

#generation-form .primary-submit {
  min-height: 52px;
  font-size: 16px;
}

@media (max-width: 760px) {
  #generation-form .field-feature {
    padding: 18px 16px 18px 20px;
  }

  #generation-form .form-section h2 {
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #generation-form .form-section {
    transition: none;
  }
}

/* ==========================================================================
   Pricing page  —  append to static/styles.css
   Uses the existing :root tokens. No new colors introduced.
   Reuses .page-container, .hero, and .eyebrow from the base sheet.
   ========================================================================== */

.pricing-page .page-container {
  max-width: 1260px; /* wider than the 980px default — four tiers need it */
}

/* ---------- standards band ---------- */

.pp-billing-access {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  text-align: center;
}

.pp-billing-access p {
  margin: 0;
  color: var(--muted-dark);
  font-size: 14px;
}

.pp-billing-access .link-button {
  display: inline;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--primary);
  box-shadow: none;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.pp-billing-access .link-button:hover {
  background: transparent;
  color: var(--primary-dark);
  box-shadow: none;
  filter: none;
  transform: none;
}
.pp-standards {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(214, 219, 240, 0.9);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 22px 26px;
  margin: 0 0 26px;
}

.pp-standards-marks {
  display: flex;
  flex: none;
  gap: 8px;
}
.pp-standards-mark {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px; /* same ~28% squircle as the logo mark */
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.pp-standards-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}

.pp-standards-head h2 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.pp-soon {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}

.pp-standards p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-dark);
  margin: 0;
  max-width: 70ch;
}

/* ---------- tier grid ---------- */

.pp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.pp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(214, 219, 240, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 28px 22px 26px;
  overflow: hidden;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.pp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* featured tier gets the same top rule as .form-card */
.pp-card--pro {
  border-color: rgba(79, 70, 229, 0.45);
  box-shadow: var(--shadow);
}

.pp-card--pro::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #4f46e5, #7c6cf6 45%, #0ea5a4);
}

.pp-flag {
  position: absolute;
  top: 18px;
  right: 20px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}

.pp-tier {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--text);
}

.pp-tier-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 22px;
  min-height: 3em;
}

.pp-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 5px;
}

.pp-amount {
  font-size: clamp(32px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
}

.pp-amount--custom {
  font-size: clamp(26px, 2.6vw, 31px);
}

.pp-per {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.pp-allowance {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 4px;
}

.pp-unit {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 14px;
  min-height: 1.2em;
}

.pp-unit b {
  color: var(--accent);
  font-weight: 800;
}

.pp-card--free .pp-allowance {
  color: var(--muted-dark);
}

.pp-card--ent .pp-allowance {
  color: var(--accent);
}

/* ---------- signature: chalk tally of the monthly allowance ---------- */

.pp-tally {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  height: 28px;
  margin: 0 0 22px;
  overflow: hidden;
}

.pp-tally-group {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  position: relative;
  flex: none;
}

.pp-tally-group i {
  display: block;
  width: 2px;
  height: 21px;
  border-radius: 1px;
  background: var(--primary);
  opacity: 0.8;
}

/* the diagonal fifth stroke */
.pp-tally-group i:last-child {
  position: absolute;
  left: -2px;
  bottom: 2px;
  width: 29px;
  height: 2px;
  transform: rotate(-19deg);
  transform-origin: left center;
}

/* a group of fewer than five has no diagonal */
.pp-tally-group--partial i:last-child {
  position: static;
  width: 2px;
  height: 21px;
  transform: none;
}

.pp-card--free .pp-tally-group i {
  background: var(--muted);
}

.pp-card--ent .pp-tally-group i {
  background: var(--accent);
}

.pp-tally--open {
  -webkit-mask-image: linear-gradient(to right, #000 52%, transparent 100%);
  mask-image: linear-gradient(to right, #000 52%, transparent 100%);
}

/* ---------- feature list ---------- */

.pp-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 20px 0 0;
  flex: 1 0 auto;
  border-top: 1px solid var(--border);
}

.pp-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 11px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted-dark);
}

.pp-list li:last-child {
  margin-bottom: 0;
}

.pp-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 6px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.pp-list strong {
  font-weight: 700;
  color: var(--text);
}

/* ---------- buttons (mirrors the base button styles for <a>) ---------- */

.pp-btn {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    filter 0.12s ease;
}

.pp-btn:hover {
  transform: translateY(-1px);
}

.pp-btn:active {
  transform: translateY(0);
}

.pp-btn--solid {
  background: linear-gradient(135deg, var(--primary), #6a5cf3);
  color: #ffffff;
  border: none;
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.28);
}

.pp-btn--solid:hover {
  filter: brightness(1.05);
  box-shadow: 0 16px 30px rgba(79, 70, 229, 0.34);
  color: #ffffff;
}

.pp-btn--ghost {
  background: #ffffff;
  color: #312bb5;
  border: 1px solid var(--border-strong);
}

.pp-btn--ghost:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}

.pp-btn:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.45);
  outline-offset: 2px;
}

.pp-fineprint {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  margin: 11px 0 0;
}

/* ---------- included-in-every-plan strip ---------- */

.pp-strip {
  margin-top: 30px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 26px 24px;
}

.pp-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
}

.pp-strip-grid h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 5px;
  color: var(--text);
}

.pp-strip-grid p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* ---------- questions ---------- */

.pp-faq {
  margin-top: 34px;
}

.pp-faq h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  color: var(--text);
}

.pp-faq dl {
  margin: 0;
  border-top: 1px solid var(--border);
}

.pp-faq dt {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
  padding-top: 18px;
}

.pp-faq dd {
  margin: 6px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted-dark);
  max-width: 66ch;
}

.pp-faq dd a {
  color: var(--primary);
}

/* ---------- closing line ---------- */

.pp-close {
  margin-top: 34px;
  text-align: center;
}

.pp-close p {
  font-size: 17px;
  color: var(--muted-dark);
  margin: 0 0 16px;
}

.pp-close .pp-btn {
  display: inline-block;
  width: auto;
  padding-left: 34px;
  padding-right: 34px;
}

/* ---------- responsive ---------- */

@media (max-width: 1140px) {
  .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 720px) {
  .pp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .pp-tier-note { min-height: 0; }
  .pp-card {
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
  }
}

@media (max-width: 860px) {
  .pp-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .pp-standards {
    flex-direction: column;
    gap: 14px;
    padding: 20px;
  }
  .pp-card { padding: 26px 20px 24px; }
  .pp-strip { padding: 22px 20px 20px; }
}

@media (max-width: 480px) {
  .pp-strip-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pp-card,
  .pp-btn { transition: none; }
  .pp-card:hover,
  .pp-btn:hover { transform: none; }
}

.pp-card form {
  margin: 0;
}

.pp-card form .pp-btn {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
/* ============================================================
   /create page redesign
   Append to the end of static/styles.css — these override the
   earlier rules by source order, nothing above needs editing.

   Rule: never set `display` on .form-section or .field. The inline
   script sets display: block/none on those directly and will win.
   ============================================================ */

/* 1 — Dissolve the outer card so the page gradient shows through.
   Scoped to #generation-form so auth pages keep their card. */
.form-card:has(#generation-form) {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.form-card:has(#generation-form)::before {
  display: none;
}

/* 2 — Hero becomes the gradient panel */
.app-hero {
  max-width: none;
  margin-bottom: 28px;
  padding: 32px 34px;
  text-align: left;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    115deg,
    #312bb5 0%,
    #5b4bf0 52%,
    var(--accent) 100%
  );
  box-shadow: var(--shadow);
}

.app-hero .eyebrow {
  color: #cfcdfb;
}

.app-hero h1 {
  margin-bottom: 10px;
  font-size: clamp(28px, 4.2vw, 40px);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #ffffff;
}

.app-hero p {
  max-width: 56ch;
  margin: 0;
  font-size: 16px;
  color: #dcd9ff;
}

/* .hero-badges is reused by #additional-instruction-chips inside the
   form, so every badge override below stays scoped to .app-hero. */
.app-hero .hero-badges {
  justify-content: flex-start;
  margin-top: 20px;
}

.app-hero .hero-badges span,
.app-hero .hero-badges span:nth-child(1),
.app-hero .hero-badges span:nth-child(2),
.app-hero .hero-badges span:nth-child(3),
.app-hero .hero-badges span:nth-child(4) {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  box-shadow: none;
}

/* 3 — Step spine */
.material-form {
  position: relative;
  padding-left: 60px;
}

.material-form::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 110px;
  left: 15px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    var(--primary),
    #7c6cf6 50%,
    var(--accent)
  );
}

.material-form .form-section {
  position: relative;
  padding: 22px 24px;
  background: var(--surface);
  border-color: rgba(214, 219, 240, 0.9);
  box-shadow: var(--shadow-soft);
}

.material-form .dynamic-section {
  background: var(--surface);
}

.material-form .form-section:hover {
  border-color: var(--border-strong);
  box-shadow: 0 16px 36px rgba(33, 26, 92, 0.11);
}

.material-form .step-pill {
  position: absolute;
  top: 22px;
  left: -60px;
}

/* Fires every time the script flips a section from none to block */
.material-form .dynamic-section {
  animation: section-in 0.28s ease both;
}

@keyframes section-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 4 — Weight the fields that actually drive the output */
.material-form .field-feature {
  padding: 16px 18px;
  border: 1px solid #cfcdfb;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
}

.material-form .field-feature label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--primary);
}

.material-form .field-feature select {
  min-height: 54px;
  font-size: 17px;
  border-color: #a7adda;
}

.material-form #topic {
  font-size: 16px;
  border-color: #a7adda;
}

/* 5 — Custom select chevron */
.material-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

/* 6 — Sticky submit bar */
.material-form .submit-bar {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  background: linear-gradient(
    135deg,
    rgba(238, 240, 255, 0.92),
    rgba(230, 251, 248, 0.92) 130%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -6px 24px rgba(33, 26, 92, 0.1);
}

/* 7 — Mobile: drop the spine, pills return to the flex header */
@media (max-width: 760px) {
  .app-hero {
    padding: 24px 20px;
  }

  .material-form {
    padding-left: 0;
  }

  .material-form::before {
    display: none;
  }

  .material-form .step-pill {
    position: static;
  }

  .material-form .submit-bar {
    position: static;
  }
}