/* =========================================================
   Lesson Plan Generator — "Modern Slate" design system
   The digital blackboard, reimagined: deep slate surfaces,
   warm chalk text, an amber chalk-highlight accent, and the
   generated plan rendered as white paper laid on the slate.
   ========================================================= */
:root {
  /* Slate surfaces (warm near-black, not pure black) */
  --slate-900: #0E141B;
  --slate-850: #121A23;
  --slate-800: #161E27;
  --slate-700: #1F2A36;
  --slate-600: #2A3744;
  /* Chalk text */
  --chalk: #F4F2EA;
  --chalk-dim: #A8B2BD;
  --chalk-faint: #6E7B8A;
  /* Accents */
  --amber: #F4B740;
  --amber-soft: #F8CD73;
  --teal: #2DD4BF;
  /* Lines on slate */
  --line: rgba(244, 242, 234, .10);
  --line-strong: rgba(244, 242, 234, .17);
  /* Paper (the document surface) */
  --paper: #FBFAF6;
  --paper-2: #F3F1E8;
  --ink: #1C2433;
  --ink-muted: #5B6675;
  --paper-line: #E5E1D5;
  /* Misc */
  --ring: rgba(244, 183, 64, .28);
  --radius: 16px;
  --radius-sm: 11px;
  --shadow-md: 0 12px 34px rgba(0, 0, 0, .38);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, .5);
  --shadow-paper: 0 18px 50px rgba(0, 0, 0, .45);
  --head-font: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --body-font: "Hanken Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --mono-font: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body-font);
  color: var(--chalk);
  background:
    radial-gradient(1200px 540px at 84% -10%, rgba(244, 183, 64, .08), transparent 60%),
    radial-gradient(1000px 520px at -8% 2%, rgba(45, 212, 191, .07), transparent 55%),
    var(--slate-900);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

h1, h2, h3, h4 { font-family: var(--head-font); letter-spacing: -.015em; }

/* Subtle blackboard ruling behind the whole page */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(244, 242, 234, .025) 1px, transparent 1px);
  background-size: 100% 34px;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

/* ---------- Loading screen ---------- */
.app-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background:
    radial-gradient(700px 400px at 50% 20%, rgba(244, 183, 64, .10), transparent 60%),
    linear-gradient(160deg, var(--slate-850), var(--slate-900));
  color: var(--chalk);
  transition: opacity .55s ease, visibility .55s ease;
}
.app-loader.loaded { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; padding: 22px; animation: loaderRise .6s ease both; }
.loader-logo {
  width: 108px; margin: 0 auto 16px;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45)) drop-shadow(0 0 14px rgba(244, 183, 64, .18));
  animation: loaderPulse 2.2s ease-in-out infinite;
}
.loader-logo .book { display: block; width: 100%; height: auto; }
.loader-title { font-family: var(--head-font); font-size: 23px; font-weight: 800; }
.loader-sub { margin: 9px auto 0; font-size: 13.5px; color: var(--chalk); opacity: .92; max-width: 360px; min-height: 19px; transition: opacity .25s ease; }

/* Four running stickmen (2 girls w/ long hair, 2 boys w/ short hair) on a loading
   bar — they trip, faceplant, then get up and keep running (comedy effect). */
.loader-run { width: 270px; margin: 28px auto 0; }
.runners { position: relative; height: 46px; }
.runner { position: absolute; left: 0; bottom: 0; width: 30px; height: 42px; animation: runAcross 3s linear infinite; }
.runner.r2 { animation-delay: -.75s; }
.runner.r3 { animation-delay: -1.5s; }
.runner.r4 { animation-delay: -2.25s; }
/* the faller pivots from the feet to tumble forward */
.faller { transform-origin: 50% 100%; animation: tumble 3s ease-in-out infinite; }
.runner.r2 .faller { animation-delay: -1s; }
.runner.r3 .faller { animation-delay: -2s; }
.runner.r4 .faller { animation-delay: -.4s; }
.stickman { display: block; width: 30px; height: 42px; overflow: visible; animation: runBob .4s ease-in-out infinite; }
.stickman circle { fill: none; stroke: var(--chalk); stroke-width: 3; }
.stickman line, .stickman path { stroke: var(--chalk); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.stickman .hair { stroke-width: 2.4; }
.stickman line { transform-box: view-box; }
.stickman .leg-a, .stickman .leg-b { transform-origin: 20px 36px; }
.stickman .arm-a, .stickman .arm-b { transform-origin: 21px 20px; }
.stickman .leg-a, .stickman .arm-b { animation: limbA .4s ease-in-out infinite; }
.stickman .leg-b, .stickman .arm-a { animation: limbB .4s ease-in-out infinite; }
.run-track {
  position: relative; width: 100%; height: 4px; margin-top: 2px;
  background: rgba(244, 242, 234, .16); border-radius: 4px; overflow: hidden;
}
.run-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 30%;
  background: linear-gradient(90deg, var(--amber), var(--amber-soft));
  border-radius: 4px; animation: runFill 3s ease-in-out infinite;
}
@keyframes runAcross { 0% { transform: translateX(0); } 100% { transform: translateX(240px); } }
@keyframes runBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes limbA { 0%, 100% { transform: rotate(26deg); } 50% { transform: rotate(-26deg); } }
@keyframes limbB { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(26deg); } }
@keyframes runFill { 0% { width: 8%; } 50% { width: 94%; } 100% { width: 8%; } }
@keyframes tumble {
  0%, 56% { transform: rotate(0); }
  64% { transform: rotate(84deg); }   /* trip — faceplant */
  78% { transform: rotate(84deg); }   /* lie there a beat */
  88%, 100% { transform: rotate(0); } /* pop back up */
}
@keyframes loaderPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes loaderRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes loaderQuoteFade { from { opacity: 0; transform: translateY(8px); } to { opacity: .9; transform: none; } }

.loader-quote {
  margin: 28px auto 0; max-width: 470px; padding: 16px 20px 0;
  border-top: 1px solid rgba(244, 242, 234, .16);
  font-size: 13.5px; line-height: 1.65; font-style: italic;
  color: rgba(244, 242, 234, .88); opacity: .9;
  animation: loaderQuoteFade 1s ease both .35s;
}
.loader-quote cite {
  display: block; margin-top: 12px; font-style: normal;
  font-family: var(--mono-font); font-size: 12px; font-weight: 600;
  letter-spacing: .01em; color: var(--amber);
}
.loader-quote cite span { color: var(--chalk-faint); font-weight: 500; }
@media (max-width: 480px) {
  .loader-quote { font-size: 12.5px; max-width: 320px; padding-left: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-logo, .loader-inner, .loader-quote,
  .runner, .faller, .stickman, .stickman line, .run-fill,
  .f-left, .f-right, .fighter .ss-aura, .clash { animation: none; }
  .run-fill { width: 60%; }
  .runner.r1 { left: 12px; } .runner.r2 { left: 84px; }
  .runner.r3 { left: 156px; } .runner.r4 { left: 228px; }
  .clash { opacity: 1; }
}

/* ---------- Super-Saiyan mini fight (bottom of the loader) ---------- */
.ss-fight { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin-top: 24px; height: 74px; }
.fighter { position: relative; width: 46px; height: 70px; display: flex; align-items: flex-end; justify-content: center; }
.f-left { animation: attackL 4s ease-in-out infinite; }
.f-right { animation: knockbackR 4s ease-in-out infinite; }
.fighter .ss-aura {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: 48px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, rgba(244, 183, 64, .55), rgba(244, 183, 64, .12) 46%, transparent 70%);
  filter: blur(2px); animation: ssAuraFight 4s ease-in-out infinite;
}
.fighter-svg { position: relative; width: 42px; height: auto; overflow: visible; filter: drop-shadow(0 0 5px rgba(244, 183, 64, .6)); }
.f-right .fighter-svg { transform: scaleX(-1); }
.ss-man .body { fill: none; stroke: var(--chalk); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ss-man .ss-hair { fill: var(--amber); stroke: var(--amber); stroke-width: 2; stroke-linejoin: round; }
.ss-man .fist { fill: var(--amber-soft); stroke: none; }
.clash { align-self: center; margin-bottom: 26px; font-size: 22px; opacity: 0; animation: clashHit 4s ease-in-out infinite; }

/* Attacker: charge → slow-mo leap → punch → glide back */
@keyframes attackL {
  0%, 26% { transform: translate(0, 0) rotate(0); }
  30% { transform: translate(-3px, 2px) rotate(-4deg); }                  /* wind-up crouch */
  31% { transform: translate(-3px, 2px); animation-timing-function: cubic-bezier(.18, .7, .3, 1); }
  46% { transform: translate(26px, -16px) rotate(8deg); }                 /* slow-mo rise */
  56% { transform: translate(46px, -6px) rotate(10deg); }                 /* slow-mo glide */
  59% { transform: translate(52px, 2px) rotate(4deg); }                   /* punch lands */
  63% { transform: translate(46px, 0) rotate(0); }                        /* follow-through */
  78% { transform: translate(46px, 0); }
  100% { transform: translate(0, 0); }                                    /* glide back */
}
/* Victim: charge + stand → hit → flung away spinning → reset */
@keyframes knockbackR {
  0%, 58% { transform: translate(0, 0) rotate(0); opacity: 1; }
  61% { transform: translate(6px, -3px) rotate(8deg); }                   /* the hit */
  72% { transform: translate(48px, -16px) rotate(70deg); opacity: 1; }    /* flung up & back */
  86% { transform: translate(95px, 8px) rotate(180deg); opacity: .55; }   /* flying away */
  92% { transform: translate(120px, 26px) rotate(260deg); opacity: 0; }   /* off-screen */
  93% { transform: translate(0, 0) rotate(0); opacity: 0; }               /* teleport back */
  100% { transform: translate(0, 0) rotate(0); opacity: 1; }              /* fade back in */
}
/* Aura flares while charging, then settles */
@keyframes ssAuraFight {
  0% { transform: translateX(-50%) scale(.8); opacity: .55; }
  18% { transform: translateX(-50%) scale(1.3); opacity: 1; }
  28% { transform: translateX(-50%) scale(1); opacity: .85; }
  100% { transform: translateX(-50%) scale(.85); opacity: .65; }
}
/* Single big impact flash */
@keyframes clashHit {
  0%, 56% { opacity: 0; transform: scale(.3); }
  60% { opacity: 1; transform: scale(1.7); }
  68% { opacity: 0; transform: scale(2); }
  100% { opacity: 0; }
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px;
  background: rgba(14, 20, 27, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand .logo {
  font-size: 22px; width: 42px; height: 42px;
  display: grid; place-items: center;
  background: rgba(244, 183, 64, .12);
  border: 1px solid rgba(244, 183, 64, .28);
  border-radius: 12px;
}
.topbar h1 { margin: 0; font-size: 18px; font-weight: 800; color: var(--chalk); }
.topbar .sub { margin: 2px 0 0; font-size: 11px; color: var(--chalk-faint); font-family: var(--mono-font); letter-spacing: .01em; }

.badge {
  font-family: var(--mono-font);
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.badge-demo { background: rgba(244, 183, 64, .15); color: var(--amber-soft); border: 1px solid rgba(244, 183, 64, .35); }
.badge-live { background: rgba(45, 212, 191, .14); color: var(--teal); border: 1px solid rgba(45, 212, 191, .35); }
.badge-offline { background: rgba(230, 57, 70, .16); color: #ff8a93; border: 1px solid rgba(230, 57, 70, .42); }

/* Offline banner — reason + live countdown to LIVE (shown when AI quota is out) */
.offline-banner {
  position: sticky; top: 0; z-index: 19;
  background: rgba(230, 57, 70, .16);
  border-bottom: 1px solid rgba(230, 57, 70, .4);
  color: #ffd9dc; font-size: 13px; line-height: 1.5;
  text-align: center; padding: 9px 16px;
  backdrop-filter: blur(8px);
}
.offline-banner strong { color: #fff; }
.offline-banner a { color: var(--amber); font-weight: 600; text-decoration: none; }
.offline-banner a:hover { text-decoration: underline; }
.offline-banner.ready { background: rgba(45, 212, 191, .14); border-color: rgba(45, 212, 191, .4); color: #c7f5ee; }
.offline-banner.ready strong { color: #eafffb; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 1180px; margin: 16px auto 0; padding: 66px 40px 52px;
  border-radius: 24px; border: 1px solid var(--line);
}
/* Pastel mountain backdrop (Higgsfield), darkened to stay on-theme */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(112deg, rgba(14, 20, 27, .96) 28%, rgba(14, 20, 27, .6) 72%, rgba(14, 20, 27, .4)),
    url("img/hero-bg.jpg") center / cover no-repeat;
}
.hero-inner { max-width: 760px; }
@media (max-width: 600px) { .hero { padding: 52px 24px 40px; border-radius: 18px; } }
.eyebrow {
  display: inline-block; font-family: var(--mono-font);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 18px;
}
.hero-title {
  margin: 0; font-size: clamp(42px, 8vw, 84px); font-weight: 800;
  line-height: .98; letter-spacing: -.03em; color: var(--chalk);
}
.hero-title .mark { position: relative; white-space: nowrap; }
.hero-title .mark::after {
  content: ""; position: absolute; left: -.02em; right: -.02em; bottom: -.04em;
  height: .085em; background: linear-gradient(90deg, var(--amber), var(--amber-soft));
  border-radius: 4px; transform-origin: left center; transform: scaleX(0);
  animation: chalkDraw 1s cubic-bezier(.6, 0, .15, 1) .55s forwards;
}
@keyframes chalkDraw { to { transform: scaleX(1); } }
.hero-sub {
  margin: 26px 0 0; max-width: 540px;
  font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; color: var(--chalk-dim);
}
.hero-cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 30px;
  font-family: var(--head-font); font-weight: 700; font-size: 16px;
  text-decoration: none; color: #1a1206;
  background: linear-gradient(135deg, var(--amber), var(--amber-soft));
  padding: 15px 26px; border-radius: 13px;
  box-shadow: 0 12px 30px rgba(244, 183, 64, .26);
  transition: transform .1s, box-shadow .2s, filter .2s;
}
.hero-cta:hover { filter: brightness(1.05); box-shadow: 0 16px 38px rgba(244, 183, 64, .36); transform: translateY(-1px); }
.hero-cta:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .hero-title .mark::after { animation: none; transform: scaleX(1); }
}

/* Trust pills under the hero CTA */
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.trust-pill {
  font-family: var(--mono-font); font-size: 12px; font-weight: 600;
  color: var(--chalk-dim); background: var(--slate-800);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  transition: border-color .15s, color .15s;
}
.trust-pill:hover { border-color: var(--line-strong); color: var(--chalk); }

/* ---------- Feature tiles (Octari-style glassy cards) ---------- */
.features { max-width: 1180px; margin: 0 auto; padding: 34px 24px 6px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .features-grid { grid-template-columns: 1fr; } }
.feature-tile {
  position: relative; padding: 24px 22px; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(31, 42, 54, .9), rgba(18, 26, 35, .82));
  border: 1px solid var(--line); box-shadow: var(--shadow-md); overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.feature-tile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 160px at 20% -25%, rgba(244, 183, 64, .10), transparent 70%);
}
.feature-tile:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.feature-ico {
  position: relative; display: grid; place-items: center; width: 52px; height: 52px;
  font-size: 26px; border-radius: 14px; margin-bottom: 16px;
  background: rgba(244, 183, 64, .12); border: 1px solid rgba(244, 183, 64, .28);
}
.feature-tile:nth-child(2) .feature-ico:not(.feature-ico-img) { background: rgba(45, 212, 191, .12); border-color: rgba(45, 212, 191, .30); }
/* Floating 3D icon images (Higgsfield-generated) — no chip, they float on their own */
.feature-ico-img { background: none; border: 0; width: 68px; height: 68px; border-radius: 0; margin-bottom: 12px; }
.feature-ico-img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45)); }
.feature-tile h3 { position: relative; margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--chalk); }
.feature-tile p { position: relative; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--chalk-dim); }

/* ---------- Stats / trust strip ---------- */
.stats-strip { max-width: 1180px; margin: 0 auto; padding: 18px 24px 6px; }
.stats-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px;
  padding: 16px 22px; border-radius: var(--radius);
  background: rgba(22, 30, 39, .55); border: 1px solid var(--line); backdrop-filter: blur(8px);
}
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stat-num { font-family: var(--head-font); font-size: 18px; font-weight: 800; color: var(--amber-soft); line-height: 1; }
.stat-label { font-size: 11.5px; color: var(--chalk-faint); margin-top: 5px; letter-spacing: .01em; }
.stat-dot { color: var(--chalk-faint); opacity: .45; }
@media (max-width: 600px) { .stat-dot { display: none; } }

/* ---------- Showcase gallery (Higgsfield classroom scenes) ---------- */
.showcase { max-width: 1180px; margin: 0 auto; padding: 34px 24px 6px; }
.showcase-head { text-align: center; margin-bottom: 20px; }
.showcase-head h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: var(--chalk); }
.showcase-head p { margin: 0; color: var(--chalk-dim); font-size: 14px; }
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .showcase-grid { grid-template-columns: 1fr; } }
.show-card {
  position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.show-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.show-card:hover img { transform: scale(1.05); }
.show-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 11px;
  font-family: var(--mono-font); font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--chalk);
  background: linear-gradient(transparent, rgba(14, 20, 27, .88));
}
@media (prefers-reduced-motion: reduce) { .show-card:hover img { transform: none; } }

/* ---------- Welcome strip ---------- */
.welcome { max-width: 1180px; margin: 0 auto; padding: 8px 24px 0; }
.welcome-inner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding: 14px 18px;
  background: var(--slate-800);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-sm);
}
.welcome-greet { margin: 0; font-family: var(--head-font); font-size: 15px; font-weight: 700; color: var(--chalk); }
.welcome-date { margin: 0; font-family: var(--mono-font); font-size: 12px; color: var(--chalk-faint); }
.welcome-quote { margin: 0; flex-basis: 100%; font-size: 13px; font-style: italic; color: var(--chalk-dim); }

/* ---------- Layout ---------- */
.layout {
  display: grid; grid-template-columns: 400px 1fr; gap: 24px;
  padding: 24px; max-width: 1180px; margin: 0 auto; align-items: start;
}
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.panel { border-radius: var(--radius); padding: 24px; }

/* The form is a framed chalkboard — teachers "write" their lesson on it. */
.form-panel {
  position: sticky; top: 88px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 22% 24%, rgba(244, 242, 234, .04), transparent 42%),
    radial-gradient(circle at 80% 72%, rgba(244, 242, 234, .03), transparent 46%),
    var(--slate-850);
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, .4),
    inset 0 0 0 2px rgba(0, 0, 0, .45),
    0 0 0 9px #2c2218,
    0 0 0 10px rgba(244, 183, 64, .22),
    var(--shadow-lg);
}
/* Wooden chalk tray at the foot of the board */
.form-panel::after {
  content: "";
  display: block;
  height: 12px;
  margin: 20px -24px -24px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(#3c2f20, #241b12);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 1px 0 rgba(244, 183, 64, .12);
}
@media (max-width: 900px) { .form-panel { position: static; } }

/* ---------- Form ---------- */
.form-panel h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--chalk); text-shadow: 0 0 10px rgba(244, 242, 234, .16); }
.form-panel .hint { margin: 0 0 20px; color: var(--chalk-dim); font-size: 13px; }

#planForm label {
  display: block; font-family: var(--mono-font);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  margin-bottom: 15px; color: var(--chalk-dim); text-transform: uppercase;
}
#planForm input,
#planForm textarea {
  width: 100%; margin-top: 8px; padding: 12px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 14px; font-family: var(--body-font); font-weight: 400;
  color: var(--chalk); background: var(--slate-700);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#planForm input::placeholder, #planForm textarea::placeholder { color: var(--chalk-faint); }
#planForm input:focus, #planForm textarea:focus {
  outline: none; background: var(--slate-600);
  border-color: var(--amber); box-shadow: 0 0 0 4px var(--ring);
}
#planForm textarea { resize: vertical; }
.row { display: flex; gap: 12px; }
.row label { flex: 1; }
.req { color: var(--amber); }
.opt { color: var(--chalk-faint); font-weight: 400; }

.btn-primary {
  width: 100%; margin-top: 8px; padding: 15px;
  border: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--amber), var(--amber-soft));
  color: #1a1206; font-family: var(--head-font); font-size: 15.5px; font-weight: 700;
  cursor: pointer; box-shadow: 0 10px 24px rgba(244, 183, 64, .26);
  transition: transform .08s, box-shadow .18s, filter .18s;
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 14px 30px rgba(244, 183, 64, .36); }
.btn-primary:active { transform: translateY(1px) scale(.995); }
.btn-primary:disabled { background: #5a5340; color: #b8b09a; box-shadow: none; cursor: progress; }

.status-msg { margin: 14px 0 0; font-size: 13px; color: var(--chalk-dim); min-height: 18px; font-weight: 500; }

/* Injected "have a code?" link (from app.js) */
#accessLink { font-family: var(--mono-font); color: var(--amber) !important; }

/* ---------- Output panel = white PAPER on the slate ---------- */
.output-panel {
  min-height: 460px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, .14);
  box-shadow: var(--shadow-paper);
  position: relative;
}
.output-panel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(var(--amber), var(--teal));
  border-radius: var(--radius) 0 0 var(--radius);
}
.output-actions {
  display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--paper-line);
}
.btn-out {
  padding: 10px 15px; border: 1px solid var(--paper-line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font-family: var(--head-font);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
}
.btn-out:hover { background: var(--paper-2); border-color: var(--ink-muted); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.btn-out:active { transform: translateY(1px); }

.empty-state { text-align: center; padding: 90px 20px; color: var(--ink-muted); }
.empty-state .big-emoji {
  font-size: 46px; display: grid; place-items: center;
  width: 92px; height: 92px; margin: 0 auto 16px;
  background: var(--paper-2); border: 1px solid var(--paper-line); border-radius: 50%;
}
.empty-state p { margin: 6px 0; font-size: 15px; }
.empty-state .hint { font-size: 13px; }

/* ---------- The Document ---------- */
.plan-doc { font-family: var(--body-font); color: var(--ink); line-height: 1.6; }
.doc-title { text-align: center; font-size: 25px; font-weight: 800; margin: 0 0 6px; color: var(--ink); }
.doc-title + .doc-header { margin-top: 18px; }
.doc-header {
  width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13.5px;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--paper-line);
}
.doc-header th, .doc-header td { border: 1px solid var(--paper-line); padding: 9px 12px; text-align: left; vertical-align: top; }
.doc-header th { background: var(--paper-2); width: 36%; font-weight: 700; color: var(--ink); }
.section-head {
  position: relative; background: var(--slate-800); color: var(--chalk);
  padding: 10px 14px 10px 18px; font-size: 15px; font-weight: 700;
  border-radius: 8px; margin: 26px 0 14px;
}
.section-head::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 62%; background: var(--amber); border-radius: 0 3px 3px 0;
}
.field-block {
  margin-bottom: 16px; padding: 13px 15px;
  background: #fff; border: 1px solid var(--paper-line); border-radius: 12px;
}
.field-block h4 { margin: 0 0 7px; font-size: 13.5px; font-weight: 700; color: #2a6f97; }
.field-block > div { font-size: 14px; }
.field-block ul { margin: 4px 0; padding-left: 20px; }
.field-block li { margin-bottom: 5px; }

.ksa-label { font-weight: 700; margin: 10px 0 2px; font-size: 13px; color: var(--ink); text-transform: uppercase; letter-spacing: .03em; }
.ksa-label:first-child { margin-top: 0; }

.rubric-title { font-weight: 700; margin: 2px 0 9px; font-size: 13px; color: var(--ink); }
.rubric-table { width: 100%; border-collapse: collapse; font-size: 12.5px; border-radius: 8px; overflow: hidden; border: 1px solid var(--paper-line); }
.rubric-table th, .rubric-table td { border: 1px solid var(--paper-line); padding: 7px 9px; text-align: left; vertical-align: top; }
.rubric-table thead th, .rubric-table tr:first-child th { background: var(--slate-800); color: var(--chalk); }
.rubric-table tr th:first-child { width: 20%; background: var(--paper-2); color: var(--ink); }
.rubric-table tr:first-child th:first-child { background: var(--slate-700); color: var(--chalk); }
.rubric-table tbody tr:nth-child(even) td { background: #faf9f4; }

/* ---------- Slides ---------- */
.btn-slides {
  margin-left: auto; background: var(--slate-800); color: var(--chalk); border-color: var(--slate-600);
}
.btn-slides:hover { background: var(--slate-700); color: var(--chalk); border-color: var(--amber); }

.slides-wrap { max-width: 1180px; margin: 8px auto 30px; padding: 0 24px; }
.slides-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.slides-bar h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--chalk); }
.slides-bar .hint { margin: 4px 0 0; color: var(--chalk-faint); font-size: 13px; }
.slides-actions { display: flex; gap: 10px; }
.slides-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; margin-top: 16px; }

.slide-card {
  position: relative; aspect-ratio: 16 / 9; background: #fff; color: var(--ink);
  border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px; padding: 18px 20px;
  overflow: hidden; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s;
}
.slide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.slide-card .slide-no { position: absolute; bottom: 8px; right: 12px; font-size: 10px; color: #aab2bd; }
.slide-card .slide-accent { width: 46px; height: 4px; border-radius: 3px; background: var(--slide-primary, #1d3557); margin-bottom: 11px; }
.slide-card h3 { margin: 0 0 9px; font-size: 15px; font-weight: 800; color: var(--slide-primary, #1d3557); line-height: 1.25; }
.slide-card ul { margin: 0; padding-left: 18px; }
.slide-card li { font-size: 11.5px; margin-bottom: 5px; color: #2a3744; line-height: 1.4; }
.slide-card p.slide-sub { font-size: 12px; color: var(--ink-muted); margin: 2px 0; }
.slide-card.title-slide { justify-content: center; align-items: center; text-align: center; background: linear-gradient(145deg, var(--slide-primary, #1d3557), rgba(0, 0, 0, .28)); }
.slide-card.title-slide h3 { color: #fff; font-size: 19px; }
.slide-card.title-slide p.slide-sub { color: rgba(255, 255, 255, .88); }
.slide-card.title-slide .slide-accent { background: rgba(255, 255, 255, .75); margin: 0 auto 12px; }
.slide-card.ref-slide li { font-size: 11px; color: #44535f; }

/* ---------- Suggestions & Support ---------- */
.support-wrap { max-width: 1180px; margin: 10px auto 0; padding: 36px 24px 8px; }
.support-head { text-align: center; max-width: 640px; margin: 0 auto 24px; }
.support-head h2 { margin: 0 0 8px; font-size: 26px; font-weight: 800; color: var(--chalk); }
.support-head p { margin: 0; color: var(--chalk-dim); font-size: 14px; }

.support-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .support-grid { grid-template-columns: 1fr; } }

.support-card {
  background: var(--slate-800); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-md);
}
.support-eyebrow {
  display: inline-block; font-family: var(--mono-font);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber); background: rgba(244, 183, 64, .1);
  border: 1px solid rgba(244, 183, 64, .28); padding: 5px 11px; border-radius: 999px; margin-bottom: 14px;
}
.support-card h3 { margin: 0 0 16px; font-size: 18px; font-weight: 800; color: var(--chalk); }

#suggestForm label { display: block; font-family: var(--mono-font); font-size: 11.5px; font-weight: 600; margin-bottom: 14px; color: var(--chalk-dim); text-transform: uppercase; letter-spacing: .02em; }
#suggestForm input, #suggestForm textarea {
  width: 100%; margin-top: 7px; padding: 12px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 14px; font-family: var(--body-font); color: var(--chalk); background: var(--slate-700);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#suggestForm input::placeholder, #suggestForm textarea::placeholder { color: var(--chalk-faint); }
#suggestForm input:focus, #suggestForm textarea:focus { outline: none; background: var(--slate-600); border-color: var(--amber); box-shadow: 0 0 0 4px var(--ring); }
#suggestForm textarea { resize: vertical; }

.support-contact { background: linear-gradient(160deg, var(--slate-800), var(--slate-850)); }
.support-contact > p { margin: 0 0 14px; font-size: 14px; color: var(--chalk-dim); }
.tg-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--head-font); font-weight: 700; font-size: 14px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #2aabee, #229ed9); padding: 12px 18px; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(34, 158, 217, .3); transition: transform .08s, box-shadow .18s, filter .18s;
}
.tg-link:hover { filter: brightness(1.05); box-shadow: 0 14px 30px rgba(34, 158, 217, .4); }
.tg-link:active { transform: translateY(1px); }

.donate-note {
  margin-top: 20px; padding: 16px 18px;
  background: var(--slate-700); border: 1px solid var(--line);
  border-left: 4px solid var(--amber); border-radius: 12px;
}
.donate-note h4 { margin: 0 0 7px; font-size: 14.5px; font-weight: 800; color: var(--chalk); }
.donate-note p { margin: 0 0 8px; font-size: 13px; color: var(--chalk-dim); line-height: 1.55; }
.donate-note .thanks { margin: 0; font-size: 13px; color: var(--amber-soft); }

/* ---------- Footer ---------- */
.footer { text-align: center; margin-top: 34px; padding: 36px 20px 34px; color: var(--chalk-faint); font-size: 12.5px; border-top: 1px solid var(--line); }
.footer p { margin: 5px 0; }
.footer-brand { font-family: var(--head-font); font-size: 16px; font-weight: 800; color: var(--chalk); letter-spacing: -.01em; }
.footer-disclaimer { font-size: 11.5px; color: var(--chalk-faint); }
.footer-by {
  margin-top: 12px !important; font-family: var(--mono-font); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; font-size: 11px;
  color: var(--amber);
}

/* ---------- Print (the plan-doc is already paper) ---------- */
@media print {
  body::before { display: none; }
  .topbar, .hero, .welcome, .form-panel, .output-actions, .footer, #modeBadge, .slides-wrap, .support-wrap, .app-loader, .features, .stats-strip, .showcase { display: none !important; }
  body { background: #fff; color: #000; }
  .layout { display: block; padding: 0; max-width: none; }
  .output-panel { border: none; box-shadow: none; padding: 0; background: #fff; }
  .output-panel::before { display: none; }
  .field-block { background: #fff; border: none; padding: 0 0 0 2px; break-inside: avoid; }
  .section-head, .rubric-table thead th, .rubric-table tr:first-child th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rubric-table, .doc-header { break-inside: avoid; }
}