/* =====================================================================
   Estrutura de Curso IA — Gênesis IA
   Design Direction: BOTANICAL EDITORIAL
   - Palette: cream paper #f3efe4 · deep forest-green ink #1b3a2b · soft gold #b08d3e
   - Type: treated garamond-class system serif (Georgia/Cambria) headings +
     humanist sans body + mono micro-labels; hairline rules, no shadows/gradients
   - Signature: hand-drawn botanical line-art (a growing branch/vine) + the
     curriculum rendered as a "growing" structure — each module a numbered stem
     with its lessons as leaf nodes (course grows seed → modules → lessons)
   ===================================================================== */

:root {
  /* paper / surfaces */
  --paper: #f3efe4;
  --paper-2: #ece4d3;
  --paper-3: #e4dac4;
  --panel: #f8f5ec;

  /* ink */
  --ink: #1b3a2b;          /* forest green — headings */
  --ink-body: #283a30;     /* body text */
  --ink-soft: #5b665b;     /* meta / muted */
  --ink-faint: #646e5f;    /* darkened from original for AA-level contrast on cream */

  /* accents */
  --gold: #b08d3e;         /* decorative only (rules, motifs) */
  --gold-deep: #876727;    /* accent text on cream (AA) */
  --leaf: #3f6b4e;         /* secondary green */
  --error: #9c3b2e;

  /* lines */
  --rule: #cdc3ab;
  --rule-strong: #b3a888;

  /* type stacks */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;

  /* scale */
  --space-xs: 0.4rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.25rem;

  --radius: 3px;
  --maxw: 920px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-body);
  background-color: var(--paper);
  /* faint botanical paper grain via layered radial dots */
  background-image:
    radial-gradient(circle at 18% 22%, rgba(176,141,62,0.05) 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 64%, rgba(27,58,43,0.04) 0 1px, transparent 1.4px);
  background-size: 26px 26px, 34px 34px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---- screens ---- */
.screen { display: none; }
.screen.active { display: block; }

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); }
/* h3/h4 sit inside AI-generated cards (module + capstone titles) where copy
   length is unpredictable and lines wrap often — a looser line-height keeps
   two-line headings from feeling cramped, unlike the tighter display h1/h2. */
h3 { font-size: 1.3rem; line-height: 1.32; }
h4 { font-size: 1.05rem; line-height: 1.34; }

a { color: var(--gold-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

.label, .community-badge, .micro {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--ink-soft);
}

/* botanical hairline divider */
.botrule {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--gold);
  margin: var(--space-md) 0;
}
.botrule::before, .botrule::after {
  content: "";
  height: 1px;
  background: var(--rule-strong);
  flex: 1;
}

/* =====================================================================
   GATE SCREEN + KEY SCREEN
   ===================================================================== */
#gate-screen, #key-screen {
  min-height: 100vh;
  display: none;
  place-items: center;
  padding: var(--space-lg) var(--space-md);
}
#gate-screen.active, #key-screen.active { display: grid; }

.gate-container, .key-container {
  width: 100%;
  max-width: 540px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.75rem);
  position: relative;
  overflow: hidden;
}

/* botanical corner sprig on the gate card */
.gate-container::before {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 96px; height: 96px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%23b08d3e' stroke-width='1.3' stroke-linecap='round'><path d='M94 2 C 68 10, 46 26, 34 52'/><path d='M60 16 q 9 -7 18 -5 q -5 9 -16 10 z' fill='%23b08d3e' fill-opacity='0.12'/><path d='M46 32 q 10 -6 19 -2 q -6 9 -17 9 z' fill='%233f6b4e' fill-opacity='0.12'/><path d='M34 52 q 9 -7 18 -3 q -6 9 -17 9 z' fill='%23b08d3e' fill-opacity='0.12'/></svg>");
  background-repeat: no-repeat;
  pointer-events: none;
}

.gate-header { text-align: left; margin-bottom: var(--space-lg); position: relative; }
.gate-header h1 { margin-bottom: var(--space-sm); }
/* the old gradient-text class is neutralised into the botanical ink */
.gradient-text {
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
}
.subtitle {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.55;
  margin-bottom: var(--space-md);
}
.community-badge {
  display: inline-block;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  background: var(--paper-2);
  color: var(--ink);
  letter-spacing: 0.12em;
}

/* ---- forms ---- */
.form-group { margin-bottom: var(--space-md); }
label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
}
input, textarea, select {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink-body);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(63,107,78,0.18);
}
select { cursor: pointer; }

/* ---- buttons ---- */
.btn-primary, .btn-secondary, .btn-danger {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius);
  padding: 0.78rem 1.3rem;
  min-height: 46px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary {
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  letter-spacing: 0.02em;
}
.btn-primary:hover:not(:disabled) { background: #142d21; }
.btn-primary:disabled { background: var(--paper-3); color: var(--ink-faint); border-color: var(--rule-strong); cursor: not-allowed; }
.btn-secondary {
  width: 100%;
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-secondary:hover { border-color: var(--ink); }
.btn-danger {
  background: transparent;
  color: var(--error);
  border-color: var(--error);
}
.btn-danger:hover { background: var(--error); color: var(--paper); }

.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible,
.btn-icon:focus-visible, .mode-tab:focus-visible, a:focus-visible,
.result-actions button:focus-visible, .key-toggle:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

.error-message {
  color: var(--error);
  font-size: 0.92rem;
  margin-top: var(--space-sm);
  padding: 0.6rem 0.8rem;
  background: rgba(156,59,46,0.07);
  border-left: 2px solid var(--error);
  border-radius: 2px;
}

.gate-footer { margin-top: var(--space-lg); color: var(--ink-soft); font-size: 0.92rem; }

/* =====================================================================
   KEY SCREEN
   ===================================================================== */
.key-container h2 { margin-bottom: var(--space-sm); }
.key-inputs { margin: var(--space-md) 0; }
.key-input-group { margin-bottom: var(--space-md); }
.key-input-wrapper { display: flex; gap: 0.5rem; }
.key-input-wrapper input { flex: 1; }
.key-toggle {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  padding: 0 0.8rem;
  cursor: pointer;
  min-height: 44px;
}
.key-toggle:hover { border-color: var(--ink); color: var(--ink); }
.key-status { font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.35rem; font-family: var(--mono); letter-spacing: 0.04em; }
.key-status.saved { color: var(--leaf); }
.key-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: var(--space-md); }
.key-info { margin-top: var(--space-lg); border-top: 1px solid var(--rule); padding-top: var(--space-md); }
.key-info summary { cursor: pointer; font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }
.key-info-content { margin-top: var(--space-sm); font-size: 0.92rem; color: var(--ink-soft); }
.key-info-content p { margin-bottom: 0.4rem; }
.key-info-content code { font-family: var(--mono); background: var(--paper-2); padding: 0.1rem 0.35rem; border-radius: 2px; font-size: 0.85em; }

/* =====================================================================
   APP SCREEN
   ===================================================================== */
#app-screen.active { display: flex; flex-direction: column; min-height: 100vh; }

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--rule-strong);
  background: var(--panel);
}
.header-left { display: flex; align-items: center; gap: 0.7rem; }
.app-title { font-size: 1.25rem; margin: 0; }
/* botanical mark before the title */
.header-left::before {
  content: "";
  width: 26px; height: 26px;
  flex: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none' stroke='%231b3a2b' stroke-width='1.4' stroke-linecap='round'><path d='M13 24 V 9'/><path d='M13 14 q -7 -1 -9 -8 q 7 -1 9 6 z' fill='%233f6b4e' fill-opacity='0.18'/><path d='M13 11 q 7 -1 9 -7 q -7 -1 -9 5 z' fill='%23b08d3e' fill-opacity='0.2'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.header-right { display: flex; align-items: center; gap: 0.35rem; }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-icon:hover { color: var(--ink); background: var(--paper-2); border-color: var(--rule); }

.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-xl) clamp(1rem, 4vw, 2.5rem) var(--space-lg);
}

/* intro block */
.lede-block { margin-bottom: var(--space-lg); max-width: 62ch; }
.lede-block .micro { display: block; margin-bottom: 0.6rem; }
.lede-block h2 { margin-bottom: var(--space-sm); line-height: 1.3; }
.lede-block p { color: var(--ink-soft); margin-top: var(--space-sm); }

/* the builder form */
.builder {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 2rem);
  margin-bottom: var(--space-lg);
}
.builder h2 { font-size: 1.4rem; margin-bottom: var(--space-md); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.field-grid .full { grid-column: 1 / -1; }
.hint { font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.3rem; }

.builder-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: var(--space-md); align-items: center; }
.builder-actions .btn-primary { width: auto; min-width: 230px; }
.builder-actions .btn-secondary { width: auto; }

/* status line (typed feel) */
.status-line {
  display: none;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--leaf);
  letter-spacing: 0.04em;
  margin-top: var(--space-sm);
}
.status-line.active { display: block; }
.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* =====================================================================
   RESULT — the "growing" curriculum
   ===================================================================== */
#result { display: none; margin-top: var(--space-lg); }
#result.active { display: block; }

.result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.result-head .micro { color: var(--ink-soft); }
.result-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.result-actions button {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  padding: 0.5rem 0.7rem;
  min-height: 40px;
  cursor: pointer;
}
.result-actions button:hover { border-color: var(--ink); color: var(--ink); }

/* course title block */
.course-title h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 0.3rem; }
.course-title .course-sub { font-style: italic; color: var(--gold-deep); font-family: var(--serif); font-size: 1.15rem; }
.course-promise { margin-top: var(--space-sm); max-width: 66ch; color: var(--ink-body); }

/* meta strip */
.meta-strip {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--ink-soft); text-transform: uppercase;
  margin: var(--space-md) 0;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.meta-strip b { color: var(--ink); font-weight: 600; }

/* generic info sections */
.info-section { margin: var(--space-lg) 0; }
.info-section > h3 {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: var(--space-sm);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
  font-size: 0.88rem;
  color: var(--ink-body);
}
.bullet-list { list-style: none; }
.bullet-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}
.bullet-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 9px; height: 9px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'><path d='M4.5 9 Q 0 6 0 0 Q 4.5 3 4.5 9 Z M4.5 9 Q 9 6 9 0 Q 4.5 3 4.5 9 Z' fill='%233f6b4e'/></svg>");
  background-repeat: no-repeat;
}

/* MODULES — the growing branch structure (signature element) */
.modules { margin: var(--space-lg) 0; }
.modules > h3 { margin-bottom: var(--space-md); }
.modules-stem {
  position: relative;
  padding-left: 2.4rem;
}
/* the vertical "stem" the modules grow from */
.modules-stem::before {
  content: "";
  position: absolute;
  left: 12px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--leaf), var(--gold));
}
.module {
  position: relative;
  margin-bottom: var(--space-lg);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.module:last-child { margin-bottom: 0; }
/* leaf node on the stem */
.module::before {
  content: "";
  position: absolute;
  left: -2.4rem; top: 1.4rem;
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><circle cx='11' cy='11' r='10' fill='%23f3efe4' stroke='%23b08d3e' stroke-width='1.2'/><path d='M11 17 Q 5 13 6 6 Q 12 8 11 17 Z' fill='%233f6b4e' fill-opacity='0.55'/></svg>");
  background-repeat: no-repeat;
  border-radius: 50%;
}
/* connector tick from stem to card */
.module::after {
  content: "";
  position: absolute;
  left: -1.55rem; top: 2.0rem;
  width: 1.45rem; height: 1px;
  background: var(--rule-strong);
}
.module-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.module-num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
  background: rgba(176, 141, 62, 0.1);
  border: 1px solid rgba(176, 141, 62, 0.4);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}
.module-head h3 { font-size: 1.25rem; }
.module-dur {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.module-goal { color: var(--ink-soft); margin: 0.5rem 0 var(--space-sm); font-style: italic; font-family: var(--serif); }

.lessons { list-style: none; margin-top: var(--space-sm); }
.lessons li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.7rem;
  border-top: 1px dotted var(--rule);
  font-size: 0.97rem;
}
.lessons li:first-child { border-top: none; }
.lessons li .lesson-n { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-faint); position: absolute; left: 0; top: 0.5rem; }

.practice {
  margin-top: var(--space-sm);
  background: var(--paper-2);
  border-left: 2px solid var(--leaf);
  border-radius: 2px;
  padding: 0.6rem 0.85rem;
  font-size: 0.92rem;
}
.practice .micro { display: block; margin-bottom: 0.2rem; color: var(--leaf); }

/* final project + bonus */
.capstone {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
}
.capstone h3 { color: var(--paper); }
.capstone .micro { color: #cdbd86; }
.capstone p { color: #e7e0cf; margin-top: var(--space-sm); }
.capstone .bullet-list li { color: #e7e0cf; }
.capstone .bullet-list li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'><path d='M4.5 9 Q 0 6 0 0 Q 4.5 3 4.5 9 Z M4.5 9 Q 9 6 9 0 Q 4.5 3 4.5 9 Z' fill='%23cdbd86'/></svg>");
}

.empty-note { color: var(--ink-faint); font-style: italic; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.app-footer {
  border-top: 1px solid var(--rule-strong);
  padding: var(--space-lg) clamp(1rem, 4vw, 2.5rem);
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.88rem;
  background: var(--panel);
}
.footer-links { margin-top: 0.5rem; }
.footer-links a { color: var(--ink-soft); }
.footer-sep { margin: 0 0.5rem; color: var(--rule-strong); }

/* =====================================================================
   MODAL
   ===================================================================== */
.modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 50; padding: var(--space-md); }
.modal-overlay { position: absolute; inset: 0; background: rgba(20,30,24,0.42); }
.modal-content {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--ink);
  border-radius: var(--radius);
  max-width: 520px; width: 100%;
  padding: var(--space-lg);
  max-height: 90vh; overflow-y: auto;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.modal-header .btn-icon { font-size: 1.5rem; }
.modal-actions { display: flex; gap: 0.6rem; margin-top: var(--space-md); }
.modal-actions .btn-primary, .modal-actions .btn-danger { width: auto; flex: 1; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 768px) {
  /* ease the stem indentation down gradually before the phone tier below */
  .modules-stem { padding-left: 2.1rem; }
  .module::before { left: -2.1rem; }
  .module::after { left: -1.3rem; width: 1.2rem; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .field-grid { grid-template-columns: 1fr; }
  .builder-actions .btn-primary, .builder-actions .btn-secondary { width: 100%; min-width: 0; }
  .app-main { padding-top: var(--space-lg); }
  .modules-stem { padding-left: 1.9rem; }
  .module::before { left: -1.9rem; }
  .module::after { left: -1.05rem; width: 0.95rem; }
  .module-dur { margin-left: 0; width: 100%; margin-top: 0.25rem; }

  /* keep the header on one tidy row at phone widths */
  .app-header { padding-left: 1rem; padding-right: 1rem; gap: 0.6rem; }
  .app-title { font-size: 1.05rem; }
  .header-right { gap: 0.15rem; }
  .btn-icon { width: 38px; height: 38px; }

  /* corner sprig shouldn't crowd a two-line heading on narrow cards */
  .gate-container::before { width: 60px; height: 60px; }

  /* less lopsided padding on small screens */
  .capstone { padding: var(--space-md); }
  .modal-content { padding: var(--space-md); }

  /* roomier tap targets for the result toolbar at thumb-driven widths */
  .result-actions button { min-height: 44px; padding: 0.55rem 0.85rem; }
}

/* =====================================================================
   PRINT — clean curriculum handout
   ===================================================================== */
@media print {
  body { background: #fff; font-size: 12pt; color: #000; }
  .app-header, .app-footer, .builder, .result-actions, #feedback-widget, .status-line, .lede-block { display: none !important; }
  .app-main { max-width: 100%; padding: 0; }
  .module, .capstone { break-inside: avoid; border: 1px solid #999; }
  .capstone { background: #fff; color: #000; }
  .capstone h3, .capstone p, .capstone .micro, .capstone .bullet-list li { color: #000; }
  .modules-stem::before, .module::before, .module::after { display: none; }
  .modules-stem { padding-left: 0; }
}

/* =====================================================================
   STATIC DOC PAGES (about / privacy / data-deletion)
   ===================================================================== */
.doc-page { max-width: 760px; margin: 0 auto; padding: var(--space-xl) var(--space-md); }
.doc-page h1 { margin-bottom: var(--space-md); }
.doc-page h2 { margin: var(--space-lg) 0 var(--space-sm); }
.doc-page h3 { margin: var(--space-md) 0 var(--space-xs); }
.doc-page p, .doc-page li { color: var(--ink-body); margin-bottom: 0.6rem; }
.doc-page ul, .doc-page ol { padding-left: 1.3rem; margin-bottom: var(--space-md); }
.doc-page a.back-link { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; display: inline-block; margin-bottom: var(--space-md); }
.doc-page .doc-footer { margin-top: var(--space-xl); border-top: 1px solid var(--rule); padding-top: var(--space-md); color: var(--ink-soft); font-size: 0.85rem; }