@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

/* Typography
   --font-display : headings, figures, anything that needs presence
   --font-body    : everything else
   The .chalk class is kept (it is used across every page) but now points at
   the display face rather than a handwriting font. */

:root {
  /* LIGHT theme, but far from pale: a soft lavender-tinted paper base carrying
     deep, saturated purple & magenta accents, so the page reads bright and
     airy while the colour still has real weight to it. */
  --bg-deep: #f6f1fc;   /* page base */
  --bg-deep-2: #ece0f8; /* recessed surfaces: inputs, wells */
  --panel: #ffffff;     /* cards */
  --panel-soft: #f4ecfd; /* soft card fills, choice cards */
  --paper: #ffffff;     /* legacy alias used throughout the file */
  --cream: #f6f1fc;     /* legacy alias — page background tone */

  --ink: #2b1244;       /* deep plum, not black */
  --ink-soft: #6b567f;
  --btn-ink: #2b1244;   /* button text stays deep plum on the lighter fills */

  --border-soft: rgba(124, 58, 237, 0.2);
  --border-strong: rgba(192, 38, 163, 0.45);

  /* Accent fills — deepened a step from the old pastels so nothing looks washed out */
  --mint: #9fe3c4;
  --mint-deep: #12996b;
  --sky: #9fd6ef;
  --sky-deep: #0d8ec0;
  --lavender: #cfbdf0;
  --lavender-deep: #7c3aed;
  --peach: #ffc8a6;
  --peach-deep: #e2701f;
  --sun: #ffe487;
  --sun-deep: #b98400;
  --pink: #ffb8d9;
  --pink-deep: #d61f7d;

  --magenta: #c026a3;
  --magenta-deep: #8f0f78;
  --purple: #7c3aed;
  --purple-deep: #5b21b6;

  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius: 18px;
  --shadow: 0 4px 0 rgba(124, 58, 237, 0.16), 0 10px 26px rgba(124, 58, 237, 0.14);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-deep);
  /* Just the soft colour washes here — the corner spider webs live in the
     .bg-decor layer below so each one can be animated independently. */
  background-image:
    radial-gradient(ellipse 900px 550px at 6% -6%, rgba(192, 38, 163, 0.14), transparent 62%),
    radial-gradient(ellipse 820px 560px at 106% 10%, rgba(124, 58, 237, 0.15), transparent 62%),
    radial-gradient(ellipse 1000px 650px at 50% 112%, rgba(147, 51, 234, 0.12), transparent 62%),
    linear-gradient(180deg, #fbf8ff, var(--bg-deep) 55%);
  background-size: auto, auto, auto, 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100%;
}

/* ---------------- animated background decoration ---------------- */
/* Corner webs that slowly drift and fade in and out, plus star bursts that pop
   at random spots. Purely decorative: never interactive, always behind the
   content, and it all stops for anyone who prefers reduced motion. */

.bg-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
/* Content sits above the decoration. */
.container, .admin-shell, .login-wrap, .admin-login-wrap { position: relative; z-index: 1; }

.decor-web {
  position: absolute;
  width: 620px;
  height: 620px;
  max-width: none;
  will-change: transform, opacity;
}
.decor-tl { top: 0; left: 0; animation: web-drift-tl 12s ease-in-out infinite; }
.decor-tr { top: 0; right: 0; animation: web-drift-tr 15s ease-in-out infinite; }
.decor-bl { bottom: 0; left: 0; animation: web-drift-bl 13s ease-in-out infinite; }
.decor-br { bottom: 0; right: 0; animation: web-drift-br 17s ease-in-out infinite; }

/* Each corner breathes on its own timing so they never move in lockstep. */
@keyframes web-drift-tl {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg);        opacity: 0.62; }
  50%      { transform: translate(32px, 22px) scale(1.11) rotate(1.6deg); opacity: 1; }
}
@keyframes web-drift-tr {
  0%, 100% { transform: translate(0, 0) scale(1.1) rotate(-1.4deg);   opacity: 1; }
  50%      { transform: translate(-34px, 26px) scale(1) rotate(0deg); opacity: 0.6; }
}
@keyframes web-drift-bl {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg);         opacity: 0.64; }
  50%      { transform: translate(30px, -24px) scale(1.1) rotate(-1.5deg); opacity: 1; }
}
@keyframes web-drift-br {
  0%, 100% { transform: translate(0, 0) scale(1.1) rotate(1.3deg);     opacity: 1; }
  50%      { transform: translate(-28px, -30px) scale(1) rotate(0deg); opacity: 0.6; }
}

/* Magenta balls that swell, pop, and scatter little circles / squares /
   triangles outward from where they burst. */
.burst-layer { position: absolute; inset: 0; }
.burst-cluster { position: absolute; width: 0; height: 0; }

.burst-ball {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #f0abfc, var(--magenta) 62%, var(--magenta-deep));
  box-shadow: 0 0 14px rgba(192, 38, 163, 0.5);
  transform: translate(-50%, -50%) scale(0);
  animation: ball-pop 0.62s cubic-bezier(0.34, 1.7, 0.5, 1) forwards;
  will-change: transform, opacity;
}
@keyframes ball-pop {
  0%   { transform: translate(-50%, -50%) scale(0);    opacity: 0; }
  45%  { transform: translate(-50%, -50%) scale(1);    opacity: 0.95; }
  78%  { transform: translate(-50%, -50%) scale(1.25); opacity: 0.75; }
  100% { transform: translate(-50%, -50%) scale(0.15); opacity: 0; }
}

.burst-bit {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%) scale(0);
  /* held still until the ball pops, then flung outward */
  animation: bit-fly 1.9s cubic-bezier(0.15, 0.85, 0.3, 1) 0.42s forwards;
  will-change: transform, opacity;
}
.burst-bit.is-circle { border-radius: 50%; }
.burst-bit.is-square { border-radius: 1.5px; }
.burst-bit.is-triangle {
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid var(--magenta);
}

@keyframes bit-fly {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  12%  { transform: translate(calc(-50% + var(--dx) * 0.3), calc(-50% + var(--dy) * 0.3)) scale(1.1) rotate(calc(var(--rot) * 0.3)); opacity: 1; }
  60%  { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); opacity: 0.75; }
  100% { transform: translate(calc(-50% + var(--dx) * 1.3), calc(-50% + var(--dy) * 1.3 + 20px)) scale(0.3) rotate(calc(var(--rot) * 1.4)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .decor-web { animation: none; opacity: 0.7; }
  .burst-layer { display: none; }
}

/* Display face: tightened tracking, which is what makes a geometric sans read
   as considered rather than default. Larger text gets tighter. */
.chalk {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1, h2, h3, .chalk-heading {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
h1 { letter-spacing: -0.03em; font-weight: 800; }

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
p, li, td, label, input, textarea, select, button { font-feature-settings: "kern" 1; }

a { color: inherit; }

img, svg { max-width: 100%; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------- top nav ---------------- */

.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
}

.brand .logo-badge {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--purple-deep), var(--magenta-deep));
  box-shadow: var(--shadow);
}
.brand .logo-badge img { width: 100%; height: 100%; display: block; }

.nav-links { display: flex; gap: 18px; align-items: center; }
.nav-links a {
  text-decoration: none;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: 999px;
}
.nav-links a:hover { background: rgba(233, 78, 194, 0.12); color: var(--ink); }
.nav-links a.admin-link { background: linear-gradient(135deg, var(--purple-deep), var(--magenta-deep)); color: #fff; }
.nav-links a.admin-link:hover { opacity: 0.85; }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2.5px solid transparent;
  background: var(--sun);
  color: var(--btn-ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn.btn-mint { background: var(--mint); }
.btn.btn-sky { background: var(--sky); }
.btn.btn-lavender { background: var(--lavender); }
.btn.btn-peach { background: var(--peach); }
.btn.btn-pink { background: var(--pink); }
.btn.btn-outline { background: transparent; color: var(--ink); border-color: var(--border-strong); box-shadow: none; }
.btn.btn-outline:hover { background: rgba(233, 78, 194, 0.1); }
.btn.btn-secondary { background: var(--panel-soft); color: var(--ink); border-color: var(--border-soft); }
.btn.btn-small { padding: 8px 16px; font-size: 0.85rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* a bright, always-visible primary call-to-action variant leaning into the theme */
.btn.btn-primary {
  background: linear-gradient(135deg, var(--magenta), var(--purple-deep));
  color: #fff;
}

/* ---------------- hero ---------------- */

.hero {
  padding: 56px 0 40px;
  text-align: center;
}
.hero h1 {
  font-size: 3rem;
  margin: 0 0 8px;
  line-height: 1.15;
}
.hero p.sub {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto 28px;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------------- section cards (No/Low/Pro code) ---------------- */

.section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 40px 0;
}
@media (max-width: 800px) { .section-grid { grid-template-columns: 1fr; } }

.section-card {
  background: var(--panel);
  border: 2.5px dashed var(--border-soft);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.section-card .badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
  font-weight: 700;
  color: var(--btn-ink);
}
.section-card.no-code { border-color: var(--mint-deep); }
.section-card.no-code .badge { background: var(--mint); }
.section-card.low-code { border-color: var(--sky-deep); }
.section-card.low-code .badge { background: var(--sky); }
.section-card.pro-code { border-color: var(--lavender-deep); }
.section-card.pro-code .badge { background: var(--lavender); }

.section-card h3 { margin: 4px 0 8px; font-size: 1.5rem; }
.section-card p { color: var(--ink-soft); margin: 0; }

/* ---------------- ask-ai box ---------------- */

.ask-box {
  background: var(--panel);
  border: 2.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 22px;
  max-width: 640px;
  margin: 30px auto;
  box-shadow: var(--shadow);
}
.ask-box textarea, .ask-box input[type=text] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px;
  border-radius: 12px;
  border: 2px solid var(--border-soft);
  background: var(--bg-deep-2);
  color: var(--ink);
  resize: vertical;
}
.ask-response {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
}
.ask-response.ok { background: rgba(18, 153, 107, 0.12); color: #0c7a54; border: 1.5px solid rgba(18, 153, 107, 0.4); }
.ask-response.blocked { background: rgba(214, 31, 125, 0.1); color: #b0175f; border: 1.5px solid rgba(214, 31, 125, 0.4); }

/* ---------------- form / questionnaire ---------------- */

.card {
  background: var(--panel);
  border-radius: var(--radius);
  border: 2px solid var(--border-soft);
  box-shadow: var(--shadow);
  padding: 28px;
}

.step-indicator {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}
.step-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(240, 171, 252, 0.18);
}
.step-dot.active { background: var(--magenta); }
.step-dot.done { background: var(--mint-deep); }

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-weight: 800;
  margin-bottom: 8px;
  font-size: 1.05rem;
}
.field .hint { font-weight: 400; color: var(--ink-soft); font-size: 0.9rem; margin-top: 4px; }

.field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid var(--border-soft);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--bg-deep-2);
  color: var(--ink);
}
.field select option { background: var(--panel); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--magenta); }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.choice-card {
  border: 2.5px solid var(--border-soft);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  text-align: center;
  font-weight: 700;
  background: var(--panel-soft);
  transition: all 0.15s ease;
  user-select: none;
}
.choice-card:hover { border-color: var(--purple); }
.choice-card.selected {
  border-color: var(--magenta);
  background: linear-gradient(135deg, rgba(233, 78, 194, 0.22), rgba(124, 58, 237, 0.22));
  box-shadow: var(--shadow);
}
.choice-card .emoji { font-size: 1.6rem; display: block; margin-bottom: 6px; }

.wizard-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.step-panel { display: none; }
.step-panel.active { display: block; }

/* ---------------- roadmap ---------------- */

.roadmap-header {
  text-align: center;
  margin: 20px 0 40px;
}
.roadmap-meta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.meta-pill {
  background: var(--panel);
  border: 2px solid var(--border-soft);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.9rem;
}

.roadmap-flow {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding-left: 40px;
}
.flow-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.stage {
  position: relative;
  margin-bottom: 34px;
  animation: none;
}
.stage .stage-node {
  position: absolute;
  left: -40px;
  top: 6px;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  border: 3px solid var(--border-strong);
  background: var(--panel);
  box-shadow: var(--shadow);
  z-index: 2;
}
.stage-card {
  position: relative;
  z-index: 2;
  background: var(--panel);
  border-radius: var(--radius);
  border: 2.5px dashed var(--border-soft);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.stage.no-code .stage-card { border-color: var(--mint-deep); background: linear-gradient(180deg, var(--panel), rgba(79, 216, 164, 0.06)); }
.stage.low-code .stage-card { border-color: var(--sky-deep); background: linear-gradient(180deg, var(--panel), rgba(79, 195, 236, 0.06)); }
.stage.pro-code .stage-card { border-color: var(--lavender-deep); background: linear-gradient(180deg, var(--panel), rgba(167, 139, 250, 0.08)); }

.stage-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.stage-badge {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--btn-ink);
}
.stage.no-code .stage-badge { background: var(--mint); }
.stage.low-code .stage-badge { background: var(--sky); }
.stage.pro-code .stage-badge { background: var(--lavender); }

.stage-title { font-size: 1.3rem; margin: 6px 0 4px; }
.stage-duration { font-weight: 700; color: var(--ink-soft); font-size: 0.9rem; }
.stage-desc { color: var(--ink-soft); margin: 8px 0 12px; }

.skills-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; padding: 0; list-style: none; }
.skills-list li {
  background: rgba(233, 78, 194, 0.12);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.85rem;
  font-weight: 700;
}

.stage-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.stage-counter {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--purple-deep);
  background: rgba(124, 58, 237, 0.12);
  border: 1.5px solid rgba(124, 58, 237, 0.3);
  vertical-align: middle;
}

.fee-tag {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--magenta);
}

.roadmap-total {
  max-width: 780px;
  margin: 10px auto 50px;
  text-align: center;
  background: linear-gradient(135deg, rgba(192, 38, 163, 0.09), rgba(124, 58, 237, 0.12));
  border: 2.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.roadmap-total .total-fee { font-size: 2.1rem; font-weight: 800; color: var(--magenta); }

/* per-stage fee breakdown inside the program-total box */
.fee-breakdown {
  max-width: 460px;
  margin: 14px auto 6px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fee-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 0.92rem;
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--border-soft);
}
.fee-line strong { color: var(--ink); white-space: nowrap; font-size: 1rem; }
.fee-total-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0 6px;
  font-size: 1.05rem;
}

/* ---------------- course grid / catalog ---------------- */

.filter-bar { display: flex; gap: 10px; justify-content: center; margin: 20px 0 30px; flex-wrap: wrap; }
.filter-chip {
  border: 2px solid var(--border-soft);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
  background: var(--panel);
}
.filter-chip.active { background: linear-gradient(135deg, var(--magenta), var(--purple-deep)); color: #fff; border-color: transparent; }

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.course-card {
  background: var(--panel);
  border-radius: var(--radius);
  border: 2px solid var(--border-soft);
  box-shadow: var(--shadow);
  padding: 18px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
}
.course-card:hover { transform: translateY(-3px); transition: 0.15s ease; border-color: var(--magenta); }
.course-card .emoji-badge { font-size: 1.8rem; margin-bottom: 6px; }
.course-card h4 { margin: 4px 0; font-size: 1.15rem; }
.course-card p.desc { color: var(--ink-soft); font-size: 0.9rem; flex-grow: 1; }
.course-card .cc-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }

/* ---------------- admin ---------------- */

.admin-shell { display: flex; min-height: 100vh; }
/* The admin sidebar deliberately stays a deep purple slab — it anchors the
   light page and makes the admin surface read as distinct from the site. */
.admin-sidebar {
  width: 230px;
  background: linear-gradient(180deg, var(--purple-deep), var(--magenta-deep));
  color: #f7f0ff;
  padding: 24px 16px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-soft);
}
.admin-sidebar h2 { color: #f7f0ff; font-size: 1.3rem; display: flex; align-items: center; gap: 8px; }
.admin-sidebar h2 .logo-badge { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: inline-flex; flex-shrink: 0; }
.admin-sidebar h2 .logo-badge img { width: 100%; height: 100%; display: block; }
.admin-sidebar nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(243, 236, 255, 0.75);
  font-weight: 700;
  margin-bottom: 6px;
}
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { background: rgba(233, 78, 194, 0.18); color: #fff; }
.admin-main { flex-grow: 1; padding: 30px 34px; }

table.admin-table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 14px; overflow: hidden; }
table.admin-table th, table.admin-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.92rem;
}
table.admin-table th { background: rgba(233, 78, 194, 0.08); font-family: var(--font-display); }
table.admin-table tr:hover { background: rgba(233, 78, 194, 0.05); }

.pill { padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; }
.pill.pending { background: rgba(255, 207, 77, 0.2); color: var(--sun-deep); }
.pill.approved { background: rgba(79, 216, 164, 0.2); color: var(--mint-deep); }
.pill.rejected { background: rgba(255, 122, 184, 0.2); color: var(--pink-deep); }
.pill.paid { background: rgba(79, 216, 164, 0.2); color: var(--mint-deep); }
.pill.created { background: rgba(79, 195, 236, 0.2); color: var(--sky-deep); }
.pill.failed { background: rgba(255, 122, 184, 0.2); color: var(--pink-deep); }

.admin-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-login-card { width: 360px; }

.stat-row { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.stat-box {
  flex: 1;
  min-width: 160px;
  background: var(--panel);
  border-radius: 14px;
  border: 2px dashed var(--border-soft);
  padding: 16px 18px;
}
.stat-box .num { font-family: var(--font-display); font-size: 1.8rem; color: var(--magenta); }
.stat-box .lbl { color: var(--ink-soft); font-weight: 700; font-size: 0.85rem; }

footer.site-footer {
  text-align: center;
  padding: 30px 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.small { font-size: 0.85rem; color: var(--ink-soft); }
.mt-24 { margin-top: 24px; }
.center { text-align: center; }
.hidden { display: none !important; }

.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form input[type=number],
.inline-form input[type=text],
.inline-form input[type=email] {
  padding: 9px 12px;
  border-radius: 10px;
  border: 2px solid var(--border-soft);
  background: var(--bg-deep-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.inline-form input[type=number] { width: 140px; }
.inline-form input:focus { outline: none; border-color: var(--magenta); }

.pill.auto_rejected { background: rgba(255, 122, 184, 0.2); color: var(--pink-deep); }

/* ---------------- curriculum: modules, applications, demand ---------------- */

.stage-details {
  margin-top: 16px;
  border: 2px dashed var(--border-soft);
  border-radius: 14px;
  padding: 4px 14px 12px;
  background: rgba(124, 58, 237, 0.05);
}
.stage-details summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  padding: 10px 0;
  list-style: revert;
  color: var(--ink);
}
.stage-details[open] summary { margin-bottom: 4px; }

.module-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.module-block {
  border-left: 4px solid var(--lavender-deep);
  padding: 6px 0 6px 14px;
  background: rgba(167, 139, 250, 0.08);
  border-radius: 0 10px 10px 0;
}
.module-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
}
.module-subtitle {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-soft);
  margin: 2px 0 6px;
}
.module-topics {
  margin: 0;
  padding-left: 20px;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.55;
}

.applications-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.92rem;
}

.demand-box { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.demand-row { display: grid; grid-template-columns: 60px 1fr 46px; align-items: center; gap: 10px; }
.demand-label { font-weight: 800; font-size: 0.85rem; color: var(--ink-soft); }
.demand-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.1);
  border: 1.5px solid var(--border-soft);
  overflow: hidden;
}
.demand-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mint-deep), var(--magenta));
}
.demand-score { font-size: 0.82rem; font-weight: 800; text-align: right; color: var(--ink-soft); }

.disclaimer-box {
  background: rgba(255, 228, 135, 0.35);
  border: 2px dashed var(--sun-deep);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: #7a5700;
  margin-top: 6px;
}

/* date input to match the hand-drawn choice-card aesthetic */
input[type=date] {
  padding: 10px 12px;
  border-radius: 10px;
  border: 2.5px solid var(--border-soft);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--bg-deep-2);
  color: var(--ink);
  width: 100%;
  color-scheme: light;
}
input[type=date]:focus { outline: none; border-color: var(--magenta); }

/* ---------------- tool options ---------------- */

.tool-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tool-pill {
  background: rgba(18, 153, 107, 0.12);
  border: 1.5px solid rgba(18, 153, 107, 0.4);
  color: #0c7a54;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 700;
}

/* ---------------- weekly schedule ---------------- */

.schedule-box {
  background: rgba(79, 195, 236, 0.08);
  border: 2px dashed var(--sky-deep);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 8px;
}
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 16px;
  font-size: 0.88rem;
}

/* ---------------- individual / batch selector ---------------- */

.seat-toggle { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.seat-option {
  flex: 1;
  min-width: 160px;
  text-align: center;
  padding: 12px;
  border: 2.5px solid var(--border-soft);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  background: var(--panel-soft);
}
.seat-option:hover { border-color: var(--purple); }
.seat-option.selected { border-color: var(--magenta); background: linear-gradient(135deg, rgba(233, 78, 194, 0.2), rgba(124, 58, 237, 0.2)); }

/* ---------------- final fee / razorpay decision box ---------------- */
/* The only place fees appear on candidate-facing pages — bold, no rate, no % */

.decision-fees {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 14px 0 18px;
}
.decision-fee-item { min-width: 160px; }
.decision-fee-label { font-size: 0.85rem; color: var(--ink-soft); font-weight: 700; margin-bottom: 2px; }
.decision-fee-value { font-size: 1.6rem; font-weight: 800; color: var(--ink); font-family: var(--font-display); }
.decision-fee-value.total { color: var(--magenta); }

.decline-other-input {
  margin-top: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid var(--border-soft);
  background: var(--bg-deep-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.decline-other-input:focus { outline: none; border-color: var(--magenta); }

/* ---------------- call-us / still-confused ---------------- */

.callus-box {
  background: linear-gradient(135deg, rgba(192, 38, 163, 0.1), rgba(124, 58, 237, 0.1));
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}
.callus-box a.btn { margin-top: 10px; }

/* ---------------- Google Sign-In / login page ---------------- */

.login-wrap {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
}
.login-card { width: 100%; max-width: 440px; }
.country-phone-row { display: flex; gap: 10px; }
.country-phone-row select { flex: 0 0 160px; }
.country-phone-row input { flex: 1; }
.google-btn-slot { display: flex; justify-content: center; margin: 16px 0; min-height: 44px; }
.divider-text { text-align: center; color: var(--ink-soft); font-size: 0.85rem; margin: 14px 0; }

/* ---------------- ask box: glossary answers ---------------- */

.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.term-chip {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1.5px solid var(--border-soft);
  background: var(--panel-soft);
  color: var(--purple-deep);
  cursor: pointer;
  transition: all 0.12s ease;
}
.term-chip:hover { border-color: var(--magenta); color: var(--magenta); background: #fff; }

.ask-term {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ask-cat {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
  color: var(--purple-deep);
}
.ask-def {
  margin: 8px 0 0;
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink);
}
.ask-related {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------------- time commitment breakdown ---------------- */

.schedule-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--purple-deep);
  margin-bottom: 8px;
}
.time-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.time-table td { padding: 7px 0; border-bottom: 1px dashed var(--border-soft); vertical-align: baseline; }
.time-table td.ct { text-align: right; white-space: nowrap; color: var(--ink-soft); padding-left: 12px; }
.time-table td.hr { text-align: right; white-space: nowrap; padding-left: 14px; min-width: 92px; }
.time-table tr.sub-total td { border-bottom: 2px solid var(--border-soft); }
.time-table tr.grand-total td { border-bottom: none; color: var(--magenta); padding-top: 9px; }
.time-table tr.grand-total strong { color: var(--magenta); }

.schedule-inline {
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: rgba(124, 58, 237, 0.07);
  border-radius: 10px;
  padding: 8px 12px;
  margin-top: 10px;
}

.fee-line-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-weight: 500;
}

.program-time {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 6px 0 10px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.program-time strong { color: var(--ink); }

/* ---------------- month calendar (date picker + admin editor) ---------------- */

.cal-wrap {
  background: var(--panel);
  border: 2px solid var(--border-soft);
  border-radius: 14px;
  padding: 14px;
  max-width: 380px;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.cal-nav {
  border: 1.5px solid var(--border-soft);
  background: var(--panel-soft);
  color: var(--ink);
  border-radius: 8px;
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.cal-nav:hover { border-color: var(--magenta); color: var(--magenta); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow-label {
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  padding-bottom: 4px;
}
.cal-cell { aspect-ratio: 1; border: none; background: none; }
.cal-day {
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.1s ease;
}
.cal-day.is-open { background: rgba(18, 153, 107, 0.13); color: #0c7a54; border-color: rgba(18, 153, 107, 0.3); }
.cal-day.is-open:hover { background: rgba(18, 153, 107, 0.26); border-color: #12996b; }
.cal-day.is-closed { background: rgba(107, 86, 127, 0.09); color: var(--ink-soft); text-decoration: line-through; }
.cal-day.is-outside { color: rgba(107, 86, 127, 0.4); }
.cal-day[disabled] { cursor: not-allowed; }
.cal-day.is-selected {
  background: linear-gradient(135deg, var(--magenta), var(--purple)) !important;
  color: #fff !important;
  border-color: var(--magenta-deep) !important;
  text-decoration: none !important;
}
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 0.75rem; color: var(--ink-soft); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-swatch { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.cal-swatch.open { background: rgba(18, 153, 107, 0.3); border: 1.5px solid rgba(18, 153, 107, 0.5); }
.cal-swatch.closed { background: rgba(107, 86, 127, 0.18); }
.cal-swatch.picked { background: linear-gradient(135deg, var(--magenta), var(--purple)); }
.selected-date-note { margin-top: 10px; font-size: 0.9rem; font-weight: 600; }

/* Shown only when the running server is older than the loaded front-end. */
.stale-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #8f0f78, #5b21b6);
  color: #fff;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 -4px 18px rgba(43, 18, 68, 0.25);
}
.stale-banner code {
  background: rgba(255, 255, 255, 0.18);
  padding: 1px 6px;
  border-radius: 5px;
}

/* ---------------- AI-personalised roadmap content ---------------- */

.ai-panel {
  max-width: 780px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(192, 38, 163, 0.08), rgba(124, 58, 237, 0.1));
  border: 2px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 22px;
  font-size: 0.94rem;
  line-height: 1.6;
}
.ai-panel p { margin: 8px 0 0; }
.ai-panel.is-muted { color: var(--ink-soft); font-size: 0.88rem; }
.ai-panel.is-loading { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); }
.ai-panel.is-warning {
  border: 1px solid #e0a800;
  background: linear-gradient(180deg, #fff8e6, #fff3d4);
  color: #6b4e00;
}
.ai-panel.is-warning code { background: rgba(0, 0, 0, 0.06); padding: 1px 5px; border-radius: 4px; word-break: break-word; }
.ai-panel.is-warning .btn { margin-top: 10px; }
.ai-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--magenta), var(--purple));
  padding: 4px 11px;
  border-radius: 999px;
}
.ai-spinner {
  width: 15px; height: 15px;
  border: 2.5px solid var(--border-soft);
  border-top-color: var(--magenta);
  border-radius: 50%;
  animation: ai-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

.ai-details { border-color: var(--magenta) !important; background: rgba(192, 38, 163, 0.05) !important; }
.ai-why { margin: 4px 0 10px; font-size: 0.92rem; line-height: 1.6; }
.ai-list { margin-bottom: 10px; }
.ai-list-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--purple-deep);
  margin-bottom: 3px;
}
.ai-list ul { margin: 0; padding-left: 20px; font-size: 0.9rem; line-height: 1.55; }
.ai-project {
  margin: 10px 0 0;
  font-size: 0.9rem;
  background: rgba(124, 58, 237, 0.09);
  border-radius: 9px;
  padding: 8px 12px;
}

/* Marks a curriculum that was written for this candidate rather than taken
   from the built-in catalog. */
.ai-badge-sm {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--magenta), var(--purple));
}

/* ---- My Roadmaps list ---------------------------------------------------- */
.roadmap-list-card { max-width: 820px; margin: 0 auto 18px; }
.roadmap-list-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.roadmap-list-fee {
  font-weight: 700; font-size: 1.15rem; color: var(--plum-deep, #3a1a5e); text-align: right; line-height: 1.2;
}
.roadmap-list-fee .small { display: block; font-weight: 500; }
.roadmap-list-stages { margin: 14px 0 0; padding-left: 20px; }
.roadmap-list-stages li { margin-bottom: 6px; }
.limit-note { max-width: 820px; margin: 0 auto 50px; }

/* Hides the page while we check whether anyone is signed in, so a protected
   page never flashes its content before redirecting to the login screen.
   Scoped to html so it works before body styles resolve; JS removes it. */
html.auth-gate body { visibility: hidden; }

.nav-links .logout-link { opacity: 0.9; }
.nav-links .logout-link:hover { opacity: 1; }

/* ---- delete a roadmap ---------------------------------------------------- */
.btn-danger {
  background: linear-gradient(180deg, #ffd6e4, #ffb8d9);
  border: 1px solid var(--pink-deep);
  color: #6b0d3c;
}
.btn-danger:hover { background: linear-gradient(180deg, #ffc2d6, #ff9ec8); }
.delete-confirm {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--pink-deep);
  border-radius: 12px;
  background: #fff3f8;
}
.delete-confirm p { margin: 0 0 10px; }
.delete-status:empty { display: none; }

/* ==========================================================================
   Print / Save-as-PDF
   ==========================================================================
   The PDF export is this very page printed by the browser, so what comes out
   is exactly what was on screen — same cards, same colours, same fee panels.
   Everything below is about removing the parts of the page that only make
   sense on screen (nav, payment buttons, the animated background) and making
   the rest survive being cut into pages. */

.print-only { display: none; }

@media print {
  @page { size: A4; margin: 12mm 10mm; }

  /* Browsers drop background colours when printing unless told otherwise, and
     without this every coloured card, badge and fee panel would come out
     white — which is exactly what we're avoiding here. */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html, body {
    background: #ffffff !important;
    background-image: none !important;
  }

  /* Screen-only furniture. */
  .topnav,
  .bg-decor,
  #programPayCard,
  #downloadPdfBtn,
  #aiPanel .btn,
  .site-footer,
  .roadmap-header .small,
  .flow-svg,
  .stage-footer .btn,
  .hero-cta,
  .ask-box { display: none !important; }

  /* The action row under the roadmap (retake / edit) is screen-only too. */
  .container > .center:last-of-type { display: none !important; }

  .print-only { display: block !important; }

  .container { max-width: none; padding: 0; }
  .roadmap-flow { padding-left: 0; max-width: none; }

  /* The step markers are absolutely positioned against the flow line, which
     does not survive pagination; the "Stage N of M" label carries the same
     information. */
  .stage-node { display: none !important; }
  .stage { margin-bottom: 14px; }

  /* Keep the small units whole, but let a long stage flow across pages.
     Holding a whole stage together sounds tidier and prints worse: a stage
     taller than a sheet gets pushed to the next page and leaves most of the
     previous one blank. */
  .module-block, .fee-line, .demand-row, .ai-panel, .roadmap-total, .learner-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .stage-details { break-inside: auto; }
  .stage-details summary { break-after: avoid; page-break-after: avoid; }
  .stage-title, .roadmap-header h1 { break-after: avoid; page-break-after: avoid; }

  .stage-card {
    box-shadow: none !important;
    border-width: 2px;
    padding: 14px 16px;
  }

  /* Collapsed sections would print as a row of headings with nothing under
     them, so everything is opened for paper. */
  details { display: block !important; }
  details > summary {
    list-style: none;
    cursor: default;
  }
  details > summary::-webkit-details-marker { display: none; }

  /* Tighter than screen: paper is more expensive than scrolling. */
  body { font-size: 10.5pt; line-height: 1.4; }
  .stage-title { font-size: 1.15rem; }
  .roadmap-header h1 { font-size: 1.6rem; margin-bottom: 2px; }
  .stage-details { margin-top: 8px; }
  .module-list { gap: 8px; }

  a { text-decoration: none !important; color: inherit !important; }
}

/* ---- learner identity block --------------------------------------------- */
/* Sits at the top of the roadmap, on screen and on the printed copy. */
.learner-card {
  max-width: 780px;
  margin: 0 auto 18px;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: linear-gradient(135deg, #ffffff, var(--panel-soft));
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 24px;
  align-items: start;
}
.learner-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--purple-deep);
  line-height: 1.2;
}
.learner-email { font-size: 0.9rem; color: var(--ink-soft); margin-top: 2px; word-break: break-all; }
.learner-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--magenta-deep);
  margin-bottom: 6px;
}
.learner-strengths { grid-column: 1 / -1; }
.strength-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.strength-chip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--purple-deep);
  background: #fff;
  border: 1px solid var(--lavender-deep);
}
.strength-chip.is-empty { color: var(--ink-soft); border-color: var(--border-soft); font-weight: 500; }
.learner-summary {
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.learner-summary strong { color: var(--magenta); font-size: 1rem; }

@media (max-width: 560px) {
  .learner-card { grid-template-columns: 1fr; }
}