/* =====================================================================
   GRADE NEXT — SCRATCH CODING ACADEMY
   styles.css — one stylesheet, no dependencies, embed-friendly
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------
     GradeNext official brand (Branding Kit)
     Primary purple ramp, pink accent, pastel secondaries, Poppins.
     --------------------------------------------------------------- */
  --gn-purple: #703D84;          /* main brand colour */
  --gn-purple-dark: #5A2F6B;
  --gn-purple-deep: #2D1151;     /* headings / deep ink */
  --gn-purple-mid: #8D4DA5;
  --gn-purple-light: #A169B7;
  --gn-purple-pale: #DAC2E3;
  --gn-purple-wash: #EDE1F1;
  --gn-soft-purple: #EDE1F1;

  --gn-pink: #F5007E;            /* accent rule / highlights */
  --gn-pink-soft: #F8B3CF;
  --gn-blue: #9ECCFA;
  --gn-mint: #89E6D5;
  --gn-yellow: #FBDD80;
  --gn-peach: #FBBE95;
  --gn-lavender: #D2BBFB;

  --gn-bg: #F9FAFB;
  --gn-surface: #FFFFFF;
  --gn-border: #E9E2EF;
  --gn-border-strong: #DAC2E3;
  --gn-text: #2D1151;
  --gn-text-muted: #5B4A6B;
  --gn-text-faint: #8E80A0;
  --gn-good: #1E9E5A;

  /* brand gradients */
  --gn-grad-hero: linear-gradient(120deg, #7F5DF9, #FF6AC6);
  --gn-grad-soft: linear-gradient(120deg, #C8B6FF, #EAE2FF);

  --bg: var(--gn-bg);
  --surface: var(--gn-surface);
  --ink: var(--gn-text);
  --ink-soft: var(--gn-text-muted);
  --ink-faint: var(--gn-text-faint);
  --line: var(--gn-border);
  --brand: var(--gn-purple);
  --brand-dark: var(--gn-purple-dark);
  --accent: var(--gn-purple);
  --good: var(--gn-good);
  --warn: #E08A00;
  --bad: #E0483D;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 10px rgba(45, 17, 81, .05);
  --shadow-md: 0 10px 26px rgba(45, 17, 81, .09);
  --shadow-lg: 0 24px 50px rgba(45, 17, 81, .15);
  --maxw: 1240px;
  --font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: "Poppins", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.55;
}
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .4em; }
p { margin: 0 0 .8em; }
a { color: var(--brand-dark); }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--gn-purple-deep); }
button { font-family: inherit; cursor: pointer; }
code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: .9em; background: var(--gn-soft-purple); padding: .15em .4em; border-radius: 6px; color: var(--gn-purple-dark); }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 999px; padding: 11px 20px; font-size: 15px; font-weight: 700;
  background: var(--gn-soft-purple); color: var(--ink); text-decoration: none; text-align: center;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn.primary:hover { box-shadow: var(--shadow-md); filter: brightness(1.03); }
.btn.ghost { background: #fff; color: var(--ink); border: 2px solid var(--line); }
.btn.block { display: flex; width: 100%; margin-top: 12px; }
.btn.complete { background: var(--gn-soft-purple); color: var(--ink-soft); border: 2px solid var(--line); }
.btn.complete.is-done { background: var(--good); color: #fff; border-color: var(--good); }
.linkish { background: none; border: 0; color: var(--brand-dark); font: inherit; padding: 0; text-decoration: underline; }

/* ---------------- Header ---------------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.brand-mark { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)); }
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: -.2px; }
.brand-sub { font-size: 12px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.nav-btn { border: 0; background: transparent; color: var(--ink-soft); font-weight: 700; font-size: 14px; padding: 8px 12px; border-radius: 999px; }
.nav-btn:hover { background: var(--gn-soft-purple); color: var(--ink); }
.nav-btn.active { background: var(--brand); color: #fff; }
.head-progress { margin-left: 6px; }

/* progress ring */
.ring { position: relative; width: 46px; height: 46px; }
.ring svg { width: 46px; height: 46px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: #e6ecf7; stroke-width: 3.5; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--ink-soft); }

/* ---------------- Layout ---------------- */
.site-main { max-width: var(--maxw); margin: 0 auto; padding: 26px 20px 40px; }
.site-main.embed { padding-top: 16px; }
.view { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- Crumbs ---------------- */
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--ink-faint); margin-bottom: 16px; }
.crumb { border: 0; background: none; color: var(--brand-dark); font: inherit; padding: 0; cursor: pointer; }
.crumb:hover { text-decoration: underline; }
.crumb-sep { color: var(--ink-faint); }

/* ---------------- Home / hero ---------------- */
.hero { text-align: center; padding: 26px 10px 30px; }
.hero h1 { font-size: clamp(28px, 5vw, 44px); letter-spacing: -.5px; }
.hero-sub { max-width: 680px; margin: 0 auto 20px; color: var(--ink-soft); font-size: 18px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.level-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 10px 0 26px; }
.level-card {
  background: var(--surface); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--line); border-top: 5px solid var(--accent); display: flex; flex-direction: column;
}
.level-card:hover { box-shadow: var(--shadow-md); }
.lc-top { display: flex; align-items: center; gap: 14px; }
.lc-emoji { font-size: 40px; }
.lc-eyebrow { text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: .6px; color: var(--accent); }
.lc-top h3 { font-size: 24px; margin: 0; }
.lc-tag { font-size: 16px; margin-top: 12px; }
.lc-age { color: var(--ink-faint); font-size: 14px; }
.lc-meta { display: flex; gap: 8px; margin: 4px 0 14px; }
.pill { background: var(--gn-soft-purple); color: var(--ink-soft); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.lc-progress { margin-top: auto; }
.bar { height: 9px; background: var(--gn-soft-purple); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s ease; }
.bar-label { font-size: 12px; color: var(--ink-faint); font-weight: 700; }

.home-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; }
.strip-card { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; cursor: pointer; box-shadow: var(--shadow-sm); }
.strip-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.sc-emoji { font-size: 30px; }
.strip-card h4 { font-size: 18px; margin: 0 0 4px; }
.strip-card p { margin: 0; color: var(--ink-soft); font-size: 14px; }

/* search */
.search-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); }
.search-input { width: 100%; border: 2px solid var(--line); border-radius: 999px; padding: 12px 18px; font-size: 16px; outline: none; }
.search-input:focus { border-color: var(--brand); }
.search-results { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.search-hit { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: #f6f9fe; border-radius: var(--radius-sm); padding: 10px 12px; }
.search-hit:hover { background: #eaf1fd; }
.sh-emoji { font-size: 20px; }
.sh-title { font-weight: 700; }
.sh-module { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.search-empty, .search-more { color: var(--ink-faint); font-size: 14px; padding: 6px 4px; }

/* ---------------- Level view ---------------- */
.level-hero { display: flex; align-items: center; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--accent); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.lh-eyebrow { text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: .6px; color: var(--accent); }
.level-hero h1 { font-size: clamp(24px, 4vw, 34px); margin: 2px 0 6px; }
.lh-tag { font-size: 17px; margin: 0 0 2px; }
.lh-age { color: var(--ink-faint); font-size: 14px; margin: 0; }
.lh-progress { margin-left: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lh-progress .ring { width: 64px; height: 64px; } .lh-progress .ring svg { width: 64px; height: 64px; }
.lh-progress span { font-size: 12px; font-weight: 700; color: var(--ink-soft); }

.module-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip { border: 2px solid var(--line); background: #fff; color: var(--ink-soft); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.sg-head { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 12px; }
.sg-head h2 { font-size: 20px; margin: 0; }
.sg-count { font-size: 13px; color: var(--ink-faint); font-weight: 700; }
.session-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.session-card { position: relative; display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .1s ease, box-shadow .15s ease; }
.session-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.session-card.done { border-color: #bfe6cf; background: #f6fdf9; }
.sc-num { flex: 0 0 38px; height: 38px; border-radius: 12px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; }
.session-card.done .sc-num { background: var(--good); }
.sc-body { min-width: 0; }
.sc-emoji-title { display: flex; align-items: center; gap: 8px; }
.sc-emoji-title h3 { font-size: 17px; margin: 0; }
.sc-emoji-title .sc-emoji { font-size: 20px; }
.sc-concept { font-size: 13.5px; color: var(--ink-soft); margin: 6px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--gn-soft-purple); color: var(--ink-soft); }
.tag.theme { background: #fff4e6; color: #b5710a; }
.tag.proj { background: #eef7ff; color: var(--brand-dark); }
.tag.mod { background: #f0ecff; color: #6a4fd0; }
.sc-check { position: absolute; top: 12px; right: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--good); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }

/* ---------------- Session detail ---------------- */
.session-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.sh-eyebrow { font-size: 13px; color: var(--ink-faint); font-weight: 700; }
.session-head h1 { font-size: clamp(24px, 4vw, 34px); margin: 4px 0 10px; }
.sh-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.session-head .btn.complete { flex: 0 0 auto; margin-left: auto; }

.callout { display: flex; gap: 14px; border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; }
.callout .co-icon { font-size: 26px; line-height: 1; }
.co-label { text-transform: uppercase; font-size: 11px; letter-spacing: .6px; font-weight: 800; color: var(--ink-faint); margin-bottom: 4px; }
.callout p { margin: 0 0 6px; }
.callout p:last-child { margin: 0; }
.big-idea { background: linear-gradient(135deg, #eef6ff, #f4f0ff); border: 1px solid #dfe8fb; }
.big-idea .objective { color: var(--ink-soft); font-size: 15px; }
.challenge { background: #fff6ec; border: 1px solid #ffe0bd; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.panel h3 { font-size: 18px; margin: 0 0 12px; }

.block-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.block-chip { position: relative; font-size: 13.5px; font-weight: 700; color: #fff; padding: 7px 13px; border-radius: 10px; background: var(--bc, #888); box-shadow: 0 2px 0 rgba(0,0,0,.12) inset, var(--shadow-sm); }
.block-chip.cat-events, .block-chip.cat-operators { color: #23303f; }

.exercise-list { margin: 0; padding-left: 22px; }
.exercise-list li { margin-bottom: 12px; }
.exercise-list li::marker { font-weight: 800; color: var(--accent); }

.project-panel { border-left: 5px solid var(--accent); }
.pp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pp-emoji { font-size: 24px; } .pp-head h3 { margin: 0; }
.pp-brief { font-size: 16px; }
.pp-label { text-transform: uppercase; font-size: 11px; letter-spacing: .6px; font-weight: 800; color: var(--ink-faint); margin: 10px 0 6px; }
.must-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.must-chip { font-size: 13px; font-weight: 600; background: var(--gn-soft-purple); color: var(--ink-soft); padding: 5px 11px; border-radius: 8px; border: 1px dashed #c7d2e6; }
.pp-stretch { margin-top: 12px; background: #fffdf5; border: 1px solid #f2e6bf; border-radius: 10px; padding: 10px 12px; font-size: 14.5px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.two-col .panel { margin-bottom: 0; }
.vocab-list { display: flex; gap: 8px; flex-wrap: wrap; }
.vocab { background: #f0ecff; color: #5a41c0; font-weight: 700; font-size: 13.5px; padding: 6px 12px; border-radius: 999px; }
.checklist { display: flex; flex-direction: column; gap: 8px; }
.check-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: #f7f9fd; cursor: pointer; font-size: 15px; }
.check-item:hover { background: #eff4fc; }
.check-item input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--good); flex: 0 0 auto; }
.check-item.ticked { background: #eefbf3; color: var(--ink-soft); }
.check-item.ticked span { text-decoration: line-through; }

.scratch-cta { text-align: center; background: linear-gradient(135deg, #fff7ec, #ffeede); border: 1px solid #ffdfc0; border-radius: var(--radius); padding: 22px; margin: 18px 0; }
.scratch-cta p { font-weight: 700; margin-bottom: 10px; }
.scratch-cta .cta-note { display: block; margin-top: 10px; font-size: 13px; color: var(--ink-faint); }

/* Scratch starter project panel */
.starter-panel { border-left: 5px solid #ff8c1a; background: linear-gradient(180deg, #fffaf2, var(--surface)); }
.sp-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
.sp-head .sp-emoji { font-size: 30px; line-height: 1; }
.sp-head h3 { margin: 0 0 4px; }
.sp-head p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.sp-sprites { margin: 14px 0; }
.sp-label { display: block; text-transform: uppercase; font-size: 11px; letter-spacing: .6px; font-weight: 800; color: var(--ink-faint); margin-bottom: 8px; }
.sprite-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sprite-chip { font-size: 14px; font-weight: 700; background: #fff3e2; color: #a85f00; border: 1px solid #ffd9a8; padding: 6px 12px; border-radius: 999px; }
.sp-backdrop { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--ink-faint); font-weight: 600; }
.sp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.sp-steps { margin: 10px 0 6px; padding-left: 22px; }
.sp-steps li { margin-bottom: 6px; }
.sp-steps li::marker { font-weight: 800; color: #ff8c1a; }
.sp-note { font-size: 13.5px; color: var(--ink-faint); margin: 8px 0 0; }

.session-nav { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.sn-spacer { flex: 1; }
.session-nav .btn { max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- Teacher guide ---------------- */
.teacher .lead { font-size: 18px; color: var(--ink-soft); max-width: 720px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table-scroll { overflow-x: auto; }
.data-table th, .data-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table th { background: #f3f7fd; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); }
.data-table tr:last-child td { border-bottom: 0; }
.muted { color: var(--ink-faint); font-size: 14px; }
.cat-key { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-swatch { color: #fff; font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 8px; background: var(--bc); }
.map-lv { margin-top: 18px; }
.map-modules { margin: 0 0 6px; padding-left: 20px; }
.map-modules li { margin-bottom: 4px; }
.code-block { background: #1e2635; color: #d7e0f0; padding: 16px; border-radius: var(--radius-sm); overflow-x: auto; font-size: 13px; line-height: 1.5; }

/* ---------------- Footer ---------------- */
.site-foot { max-width: var(--maxw); margin: 0 auto; padding: 24px 20px 40px; text-align: center; color: var(--ink-faint); font-size: 14px; border-top: 1px solid var(--line); }
.foot-links { margin-top: 4px; }

/* =====================================================================
   BLOCK LAB
   ===================================================================== */
.lab-host { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.bl-root { padding: 18px; }
.bl-head h2 { font-size: 22px; margin: 0 0 4px; }
.bl-sub { font-size: 13px; color: var(--ink-faint); font-weight: 600; }
.bl-intro { color: var(--ink-soft); font-size: 14.5px; max-width: 760px; }

.bl-levels { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.bl-lvtab { border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; color: var(--ink-soft); }
.bl-lvtab:hover { border-color: var(--brand); }
.bl-lvtab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.bl-lvstars { color: #ffcf33; margin-left: 4px; letter-spacing: -1px; }
.bl-lvtab.on .bl-lvstars { color: #fff; }

.bl-mission { display: flex; gap: 12px; align-items: center; background: #f3f8ff; border: 1px solid #d9e7fb; border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; }
.bl-mission-text { flex: 1; font-size: 14.5px; }
.bl-mtitle { font-size: 15px; }
.bl-idea { color: var(--brand-dark); font-weight: 700; font-size: 13px; }
.bl-mission-btns { display: flex; gap: 6px; flex: 0 0 auto; }

.bl-btn { border: 0; border-radius: 999px; padding: 9px 15px; font-weight: 700; font-size: 14px; background: var(--gn-soft-purple); color: var(--ink); }
.bl-btn:hover { filter: brightness(.98); }
.bl-btn:disabled { opacity: .5; cursor: default; }
.bl-go { background: #3ac06d; color: #fff; }
.bl-stop { background: #e0483d; color: #fff; }

.bl-main { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bl-stagewrap { display: flex; flex-direction: column; }
.bl-stage { width: 100%; height: auto; background: #eaf3ff; border: 2px solid #cfe0f5; border-radius: var(--radius-sm); display: block; aspect-ratio: 4 / 3; }
.bl-status { min-height: 22px; margin: 10px 0; font-weight: 700; font-size: 14px; color: var(--ink-soft); }
.bl-status.good { color: var(--good); } .bl-status.bad { color: var(--bad); } .bl-status.warn { color: var(--warn); }
.bl-controls { display: flex; gap: 8px; flex-wrap: wrap; }

.bl-code { display: flex; gap: 12px; }
.bl-palette { flex: 0 0 150px; background: #f7f9fd; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; align-self: flex-start; }
.bl-palette-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 800; color: var(--ink-faint); margin-bottom: 8px; }
.bl-pblock { display: block; width: 100%; text-align: left; border: 0; color: #fff; font-weight: 700; font-size: 13px; padding: 9px 11px; border-radius: 8px; margin-bottom: 7px; box-shadow: 0 2px 0 rgba(0,0,0,.15) inset; }
.bl-pblock:hover { transform: translateX(2px); }
.bl-palette-tip { font-size: 11px; color: var(--ink-faint); margin-top: 6px; line-height: 1.35; }

.bl-scriptwrap { flex: 1; min-width: 0; }
.bl-scripthead { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.bl-script { min-height: 260px; background: #fbfcfe; border: 2px dashed #d5deee; border-radius: var(--radius-sm); padding: 10px; }
.bl-empty { color: var(--ink-faint); font-size: 14px; text-align: center; padding: 40px 10px; }

/* Scratch-faithful block colours */
.cat-motion { background: #4c97ff; }
.cat-looks  { background: #9966ff; }
.cat-sound  { background: #cf63cf; }
.cat-control{ background: #ffab19; }
.cat-events { background: #ffbf00; color: #23303f !important; }
.cat-sensing{ background: #5cb1d6; }

.bl-block { border-radius: 9px; margin-bottom: 6px; color: #fff; box-shadow: var(--shadow-sm); }
.bl-block.sel { outline: 3px solid #ffd84d; }
.bl-block-row { display: flex; align-items: center; gap: 6px; padding: 9px 11px; font-weight: 700; font-size: 14px; }
.bl-block-label { cursor: pointer; }
.bl-mini { border: 0; width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,.35); color: #fff; font-weight: 900; font-size: 15px; line-height: 1; }
.cat-events .bl-mini { background: rgba(0,0,0,.15); color: #23303f; }
.bl-mini:hover { background: rgba(255,255,255,.55); }
.bl-say-input { border: 0; border-radius: 6px; padding: 4px 8px; font-size: 13px; font-weight: 600; min-width: 0; width: 120px; }
.bl-toolbar { display: flex; gap: 4px; padding: 0 8px 8px; }
.bl-tool { border: 0; width: 28px; height: 26px; border-radius: 6px; background: rgba(255,255,255,.3); color: #fff; font-weight: 800; }
.cat-events .bl-tool { background: rgba(0,0,0,.15); color: #23303f; }
.bl-tool:hover { background: rgba(255,255,255,.55); }

.bl-slot { margin: 0 0 4px 18px; padding: 6px; border-left: 4px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12); border-radius: 0 8px 8px 0; min-height: 20px; }
.bl-slot.active { background: rgba(255,255,255,.28); box-shadow: 0 0 0 2px #ffd84d inset; }
.bl-slot-ph { font-size: 12px; color: rgba(255,255,255,.9); font-weight: 600; padding: 4px 6px; }
.bl-repeat-end { height: 12px; border-radius: 0 0 9px 9px; margin-top: -2px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .level-cards, .home-strip, .session-grid, .two-col { grid-template-columns: 1fr; }
  .bl-main { grid-template-columns: 1fr; }
  .site-nav { width: 100%; margin-left: 0; order: 3; }
  .head-progress { margin-left: auto; }
  .level-hero { flex-direction: column; align-items: flex-start; }
  .lh-progress { margin-left: 0; flex-direction: row; }
  .session-head { flex-direction: column; }
  .session-head .btn.complete { margin-left: 0; }
  .session-nav { flex-wrap: wrap; }
  .session-nav .btn { max-width: 100%; width: 100%; }
  .sn-spacer { display: none; }
}
@media (max-width: 560px) {
  .bl-code { flex-direction: column; }
  .bl-palette { flex: 1 1 auto; }
  .bl-pblock { display: inline-block; width: auto; margin-right: 6px; }
}

/* ---------------- Dark mode (respect user preference) ---------------- */
/* dark theme (data-theme switch) */
  :root[data-theme="dark"]{
    --gn-bg: #140C1E; --gn-surface: #1E1430; --gn-text: #F3EEF8;
    --gn-text-muted: #C3B6D1; --gn-text-faint: #8E80A0;
    --gn-border: #33244A; --gn-border-strong: #46325F;
    --gn-soft-purple: #2A1B3D; --gn-purple-wash: #2A1B3D; --gn-purple-deep: #F3EEF8;
    --bg: var(--gn-bg); --surface: var(--gn-surface); --ink: var(--gn-text);
    --ink-soft: var(--gn-text-muted); --ink-faint: var(--gn-text-faint); --line: var(--gn-border);
    --brand: #A169B7; --brand-dark: #BF96CF; --accent: #A169B7;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 6px 20px rgba(0,0,0,.5); --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
  }
  :root[data-theme="dark"] .site-head{ background: rgba(27,34,48,.92); }
  :root[data-theme="dark"] code{ background: #2a3346; color: #d7e0f0; }
  :root[data-theme="dark"] .btn{ background: #2a3346; color: var(--ink); }
  :root[data-theme="dark"] .btn.ghost{ background: #1b2230; }
  :root[data-theme="dark"] .btn.complete{ background: #2a3346; }
  :root[data-theme="dark"] .nav-btn:hover{ background: #263047; }
  :root[data-theme="dark"] .pill, :root[data-theme="dark"] .tag, :root[data-theme="dark"] .must-chip{ background: #263047; color: var(--ink-soft); }
  :root[data-theme="dark"] .tag.theme{ background: #3a2f1c; color: #ffcf80; }
  :root[data-theme="dark"] .tag.proj{ background: #1e2c40; color: #8fbcff; }
  :root[data-theme="dark"] .tag.mod{ background: #2b2447; color: #c3b0ff; }
  :root[data-theme="dark"] .big-idea{ background: linear-gradient(135deg, #1a2436, #221e39); border-color: #313a52; }
  :root[data-theme="dark"] .challenge{ background: #2b2417; border-color: #4a3d1e; }
  :root[data-theme="dark"] .strip-card, :root[data-theme="dark"] .session-card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .level-card, :root[data-theme="dark"] .level-hero, :root[data-theme="dark"] .search-block{ background: var(--surface); }
  :root[data-theme="dark"] .session-card.done{ background: #17281f; border-color: #2f5f3f; }
  :root[data-theme="dark"] .search-hit{ background: #232c3d; } :root[data-theme="dark"] .search-hit:hover{ background: #2a3547; }
  :root[data-theme="dark"] .search-input{ background: #131a26; color: var(--ink); }
  :root[data-theme="dark"] .bar, :root[data-theme="dark"] .ring-bg{ background: #2a3346; } :root[data-theme="dark"] .ring-bg{ stroke: #2a3346; }
  :root[data-theme="dark"] .check-item{ background: #212a3a; } :root[data-theme="dark"] .check-item:hover{ background: #263047; }
  :root[data-theme="dark"] .check-item.ticked{ background: #17281f; }
  :root[data-theme="dark"] .chip{ background: #1b2230; border-color: var(--line); color: var(--ink-soft); }
  :root[data-theme="dark"] .data-table th{ background: #212a3a; }
  :root[data-theme="dark"] .vocab{ background: #2b2447; color: #c3b0ff; }
  :root[data-theme="dark"] .scratch-cta{ background: linear-gradient(135deg, #2a2317, #2e2213); border-color: #4a3d1e; }
  :root[data-theme="dark"] .starter-panel{ background: linear-gradient(180deg, #241d12, var(--surface)); border-left-color: #ff8c1a; }
  :root[data-theme="dark"] .sprite-chip{ background: #2e2417; color: #ffc178; border-color: #4a3d1e; }
  :root[data-theme="dark"] .bl-mission{ background: #1a2436; border-color: #313a52; }
  :root[data-theme="dark"] .bl-palette, :root[data-theme="dark"] .bl-script{ background: #131a26; border-color: var(--line); }
  :root[data-theme="dark"] .bl-stage{ background: #16202f; border-color: #2b3547; }
  :root[data-theme="dark"] .bl-lvtab{ background: #1b2230; border-color: var(--line); color: var(--ink-soft); }
  :root[data-theme="dark"] .bl-say-input{ background: #e8edf6; color: #1b2230; }
  :root[data-theme="dark"] .pp-stretch{ background: #241f12; border-color: #4a3d1e; }


/* =====================================================================
   COURSE BROWSER (reference-style: sessions -> exercises)
   ===================================================================== */
.c-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 22px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.c-brand{display:flex;align-items:center;gap:10px;cursor:pointer}
.c-mark{font-size:30px}
.c-name{font-weight:800;font-size:18px}
.c-sub{font-size:12px;color:var(--ink-faint);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.c-nav{margin-left:auto;display:flex;gap:8px}
.c-navbtn{text-decoration:none;color:var(--ink-soft);font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;border:2px solid var(--line)}
.c-navbtn:hover{border-color:var(--brand);color:var(--ink)}
.c-main{max-width:1080px;margin:0 auto;padding:24px 22px 44px}
.view{animation:fade .25s ease}

.c-hero{text-align:center;padding:18px 10px 26px}
.c-hero h1{font-size:clamp(26px,4.5vw,40px);letter-spacing:-.5px;margin-bottom:10px}
.c-hero p{max-width:680px;margin:0 auto;color:var(--ink-soft);font-size:17px}

.session-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.s-card{display:flex;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .1s,box-shadow .15s}
.s-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.thumb{flex:0 0 92px;height:92px;border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -3px 10px rgba(0,0,0,.18)}
.thumb.big{flex-basis:104px;height:104px}
.thumb-emoji{font-size:44px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.s-body{min-width:0}
.s-eyebrow{text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--ink-faint)}
.s-body h3{font-size:20px;margin:2px 0 6px}
.s-body p{font-size:14px;color:var(--ink-soft);margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pill{background:var(--gn-soft-purple);color:var(--ink-soft);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px}

.crumbs{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-faint);margin-bottom:14px}
.crumb{color:var(--brand-dark);text-decoration:none;font-weight:700}.crumb:hover{text-decoration:underline}
.s-title{font-size:clamp(22px,3.5vw,30px);margin:0 0 4px}
.s-concept{color:var(--ink-soft);margin:0 0 18px}
.c-searchwrap{margin-bottom:16px}
.c-search{width:100%;border:2px solid var(--line);border-radius:999px;padding:12px 18px;font-size:16px;outline:none;background:var(--surface);color:var(--ink)}
.c-search:focus{border-color:var(--brand)}

.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ex-card{position:relative;display:flex;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:transform .1s,box-shadow .15s,border-color .15s}
.ex-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand)}
.ex-body{min-width:0;flex:1}
.ex-toprow{display:flex;gap:8px;margin-bottom:6px}
.type-badge{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:4px 10px;border-radius:999px;background:var(--gn-soft-purple);color:var(--ink-soft)}
.type-badge.miniproject{background:#e7efff;color:#2563eb}
.type-badge.hometask{background:#f0ecff;color:#7c3aed}
.type-badge.recalltest{background:#ffe9ef;color:#e11d48}
.ex-body h3{font-size:18px;margin:0 0 5px}
.ex-story{font-size:13.5px;color:var(--ink-soft);margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ex-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.level-wrap{display:flex;align-items:center;gap:8px}
.levelbar{display:flex;gap:3px}
.seg{width:22px;height:7px;border-radius:3px;background:#e2e8f4}
.seg.on.lv1{background:#16a34a}.seg.on.lv2{background:#f59e0b}.seg.on.lv3{background:#e11d48}
.level-txt{font-size:12px;font-weight:700;color:var(--ink-soft)}
.tag-chip{font-size:12px;font-weight:700;background:#fff4e6;color:#b5710a;padding:5px 11px;border-radius:999px}
.ex-go{position:absolute;right:16px;bottom:16px;font-size:13px;font-weight:800;color:var(--brand-dark)}
.empty{color:var(--ink-faint);padding:30px;text-align:center}
.c-foot{max-width:1080px;margin:0 auto;padding:22px;text-align:center;color:var(--ink-faint);font-size:14px;border-top:1px solid var(--line)}

@media (max-width:820px){ .session-grid,.ex-grid{grid-template-columns:1fr} .c-nav{width:100%;margin-left:0} }

/* dark theme (data-theme switch) */
  :root[data-theme="dark"] .c-head{background:rgba(27,34,48,.94)}
  :root[data-theme="dark"] .c-navbtn{color:var(--ink-soft)}
  :root[data-theme="dark"] .s-card, :root[data-theme="dark"] .ex-card{background:var(--surface)}
  :root[data-theme="dark"] .pill, :root[data-theme="dark"] .type-badge{background:#263047;color:var(--ink-soft)}
  :root[data-theme="dark"] .type-badge.miniproject{background:#1e2c40;color:#8fbcff}
  :root[data-theme="dark"] .type-badge.hometask{background:#2b2447;color:#c3b0ff}
  :root[data-theme="dark"] .type-badge.recalltest{background:#3a1f2a;color:#ff9db4}
  :root[data-theme="dark"] .seg{background:#2a3346}
  :root[data-theme="dark"] .tag-chip{background:#3a2f1c;color:#ffcf80}
  :root[data-theme="dark"] .c-search{background:#131a26}


/* ===================================================================
   REAL PROJECT LIBRARY (imported Raspberry Pi / Code Club projects)
   =================================================================== */
/* category badges */
.type-badge.cat-animation{background:#e0f2fe;color:#0369a1}
.type-badge.cat-game{background:#dcfce7;color:#15803d}
.type-badge.cat-puzzle{background:#fef3c7;color:#b45309}
.type-badge.cat-quiz{background:#fef9c3;color:#a16207}
.type-badge.cat-chatbot{background:#ede9fe;color:#6d28d9}
.type-badge.cat-music{background:#ffedd5;color:#c2410c}
.type-badge.cat-art{background:#fce7f3;color:#be185d}
.type-badge.cat-sandbox{background:#cffafe;color:#0e7490}
.type-badge.cat-tool{background:#e2e8f0;color:#475569}

/* hero */
.rpi-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--gn-soft-purple),#f7f0ff)}
.rpi-hero-badge{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:#7c3aed;background:#efe7ff;padding:6px 13px;border-radius:999px;margin-bottom:12px}
.rpi-hero-src{font-size:13.5px;color:var(--ink-faint);margin-top:10px}
.rpi-hero-src a{color:var(--brand-dark);font-weight:700}

/* learning paths */
.rpi-path{margin:34px 0}
.rpi-path-head{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.rpi-path-emoji{width:52px;height:52px;flex:none;display:grid;place-items:center;font-size:26px;border-radius:15px}
.rpi-path-head h2{margin:0;font-size:22px}
.rpi-path-head p{margin:2px 0 0;color:var(--ink-soft);font-size:14px}
.rpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}

/* project card */
.pc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);
  transition:transform .12s ease,box-shadow .18s ease,border-color .18s ease}
.pc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brand)}
.pc-hero{position:relative;aspect-ratio:16/10;background:#f0f4fb;display:grid;place-items:center;overflow:hidden}
.pc-hero img{width:100%;height:100%;object-fit:cover}
.pc-hero-plain{aspect-ratio:16/10}
.pc-emoji{position:absolute;right:10px;bottom:8px;font-size:28px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.pc-emoji.big{position:static;font-size:52px}
.pc-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:9px;flex:1}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pc-steps{font-size:12px;font-weight:700;color:var(--ink-faint)}
.pc-body h3{margin:0;font-size:18px;line-height:1.25}
.pc-desc{margin:0;font-size:13.5px;color:var(--ink-soft);flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pc-diff{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.pc-diff.mini .seg{width:16px;height:6px}
.pc-prog{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.pc-prog .bar{flex:1}

/* ---- project viewer ---- */
.rpi-title{display:flex;align-items:center;gap:18px;margin:6px 0 22px;padding:18px 20px;
  background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--pc,#4c97ff);
  border-radius:16px;box-shadow:var(--shadow-sm)}
.rpi-title h1{margin:0;font-size:26px}
.rpi-sub{margin:5px 0 10px;color:var(--ink-soft);font-size:15px}
.rpi-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.rpi-grid{display:grid;grid-template-columns:1fr 350px;gap:22px;align-items:start}
.rpi-main{min-width:0}
.rpi-side{position:sticky;top:74px;display:flex;flex-direction:column;gap:14px}
.rpi-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm)}
.rpi-card-h{font-weight:800;font-size:14px;margin-bottom:10px}
.rpi-embed{position:relative;width:100%;aspect-ratio:485/402;border-radius:10px;overflow:hidden;background:#0b1220;border:1px solid var(--line)}
.rpi-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.rpi-embed-img{width:100%;border-radius:10px;display:block}
.rpi-note{font-size:12.5px;color:var(--ink-soft);margin:9px 0 0;line-height:1.45}
.rpi-steplist{list-style:none;margin:0;padding:0;counter-reset:none}
.rpi-steplist li{margin:0}
.rpi-steplist a{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;text-decoration:none;
  color:var(--ink-soft);font-size:13.5px;font-weight:600}
.rpi-steplist a:hover{background:var(--gn-soft-purple);color:var(--ink)}
.rpi-steplist li.active a{background:#e7efff;color:var(--brand-dark);font-weight:800}
.rpi-steplist li.seen .sl-n{background:var(--good);color:#fff}
.sl-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;
  background:var(--gn-soft-purple);color:var(--ink-soft)}
.rpi-steplist li.active .sl-n{background:var(--brand);color:#fff}
.rpi-attr{font-size:11.5px;color:var(--ink-faint);line-height:1.5;padding:2px 4px}
.rpi-attr a{color:var(--ink-soft);font-weight:700}

.rpi-prog{margin-bottom:16px}
.rpi-prog-txt{font-size:13px;font-weight:800;color:var(--ink-soft);margin-bottom:7px}
.rpi-step{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow-sm)}
.rpi-step h3{font-size:22px;margin:0 0 14px}
.rpi-step h4{font-size:17px;margin:18px 0 8px}
.rpi-step p{line-height:1.6;margin:0 0 12px}
.rpi-step ul,.rpi-step ol{margin:0 0 14px;padding-left:22px;line-height:1.65}
.rpi-step li{margin:4px 0}
.rpi-img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line);margin:6px 0;cursor:zoom-in;
  box-shadow:var(--shadow-sm);transition:transform .1s}
.rpi-img:hover{transform:scale(1.01)}
.rpi-howto{background:#f3f7ff;border:1px dashed #b9d0ff;border-radius:10px;padding:10px 13px;font-size:14px;color:#31507e}

/* task / hint / challenge blocks */
.rpi-task{position:relative;background:#f7faff;border:1px solid #e2ebfa;border-radius:12px;padding:14px 16px 6px;margin:0 0 14px}
.rpi-task-chip{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:#2563eb;background:#e0ecff;padding:3px 9px;border-radius:999px;margin-bottom:8px}
.rpi-hints{background:#fff8ec;border:1px solid #ffe4b3;border-radius:12px;padding:12px 15px;margin:0 0 14px}
.rpi-challenge{background:#fdf1f5;border:1px solid #ffd0e0;border-radius:12px;padding:12px 16px;margin:14px 0}
.rpi-chip{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:#be185d;background:#ffe1ec;padding:3px 9px;border-radius:999px;margin-bottom:8px}
.rpi-collapse{margin:10px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rpi-collapse summary{cursor:pointer;padding:9px 13px;font-weight:700;font-size:14px;background:var(--gn-soft-purple);list-style:none}
.rpi-collapse summary::-webkit-details-marker{display:none}
.rpi-collapse summary::before{content:"▸ ";color:var(--brand-dark)}
.rpi-collapse[open] summary::before{content:"▾ "}
.rpi-collapse>*:not(summary){padding:0 14px}
.rpi-blocks{background:#20293b;color:#e8eefc;border-radius:12px;padding:30px 16px 15px;position:relative;overflow-x:auto;
  font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-size:13px;line-height:1.6;white-space:pre;margin:0 0 14px;tab-size:2}
.rpi-blabel{position:absolute;top:0;left:0;font-family:var(--font);font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.6px;color:#ffce54;background:#161d2b;padding:4px 12px;border-radius:0 0 10px 0}
.blk{background:var(--gn-soft-purple);color:var(--ink);border-radius:6px;padding:.08em .42em;font-family:inherit;font-weight:600;font-size:.92em}
code.blk.block3control,code.blk.block3events{background:#fff3d9;color:#a15c00}
code.blk.block3looks{background:#efe7ff;color:#6d28d9}
code.blk.block3motion{background:#e0ecff;color:#1d4ed8}
code.blk.block3sound{background:#f2e6ff;color:#8e2fd0}
code.blk.block3sensing,code.blk.block3operators{background:#e3f6ff;color:#0e7490}

.rpi-stepnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.rpi-stepnav-mid{font-size:13px;font-weight:700;color:var(--ink-faint);text-align:center;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn.big{padding:13px 20px;font-size:15px}

/* image lightbox */
.rpi-lb{position:fixed;inset:0;background:rgba(10,15,25,.85);display:grid;place-items:center;z-index:200;padding:24px;cursor:zoom-out}
.rpi-lb img{max-width:96vw;max-height:92vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}

@media (max-width:900px){
  .rpi-grid{grid-template-columns:1fr}
  .rpi-side{position:static;order:-1}
}

/* dark theme (data-theme switch) */
  :root[data-theme="dark"] .rpi-hero{background:linear-gradient(135deg,#1b2740,#231b3d)}
  :root[data-theme="dark"] .rpi-hero-badge{background:#2b2447;color:#c3b0ff}
  :root[data-theme="dark"] .pc, :root[data-theme="dark"] .rpi-card, :root[data-theme="dark"] .rpi-step, :root[data-theme="dark"] .rpi-title{background:var(--surface)}
  :root[data-theme="dark"] .pc-hero{background:#1a2233}
  :root[data-theme="dark"] .rpi-steplist a:hover{background:#20293b}
  :root[data-theme="dark"] .rpi-steplist li.active a{background:#1e2c40;color:#8fbcff}
  :root[data-theme="dark"] .sl-n{background:#2a3346;color:var(--ink-soft)}
  :root[data-theme="dark"] .rpi-task{background:#18202f;border-color:#26324a}
  :root[data-theme="dark"] .rpi-task-chip{background:#1e2c40;color:#8fbcff}
  :root[data-theme="dark"] .rpi-hints{background:#241f14;border-color:#4a3a1c}
  :root[data-theme="dark"] .rpi-challenge{background:#291a22;border-color:#4a2436}
  :root[data-theme="dark"] .rpi-chip{background:#3a1f2a;color:#ff9db4}
  :root[data-theme="dark"] .rpi-howto{background:#141d2e;border-color:#2f4670;color:#a9c4f0}
  :root[data-theme="dark"] .rpi-collapse summary{background:#1a2233}
  :root[data-theme="dark"] .type-badge.cat-animation{background:#12303f;color:#7dd3fc}
  :root[data-theme="dark"] .type-badge.cat-game{background:#123322;color:#86efac}
  :root[data-theme="dark"] .type-badge.cat-puzzle{background:#3a2c12;color:#fcd34d}
  :root[data-theme="dark"] .type-badge.cat-quiz{background:#3a3512;color:#fde047}
  :root[data-theme="dark"] .type-badge.cat-chatbot{background:#241b3f;color:#c4b5fd}
  :root[data-theme="dark"] .type-badge.cat-music{background:#3a230f;color:#fdba74}
  :root[data-theme="dark"] .type-badge.cat-art{background:#3a1428;color:#f9a8d4}
  :root[data-theme="dark"] .type-badge.cat-sandbox{background:#0e3038;color:#67e8f9}
  :root[data-theme="dark"] .type-badge.cat-tool{background:#232c3a;color:#cbd5e1}


/* home banner -> Real Project Library */
.c-navbtn.feature{background:linear-gradient(135deg,#7c3aed,#4c97ff);color:#fff;box-shadow:var(--shadow-sm)}
.c-navbtn.feature:hover{filter:brightness(1.06);color:#fff}
.rpi-banner{display:flex;align-items:center;gap:20px;margin:0 0 26px;padding:20px 24px;text-decoration:none;color:inherit;
  background:linear-gradient(120deg,#eef3ff 0%,#f3ecff 60%,#ffeef7 100%);
  border:1px solid #e2ddf5;border-radius:20px;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .18s}
.rpi-banner:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.rpi-banner-emoji{font-size:52px;flex:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15))}
.rpi-banner-txt{flex:1;min-width:0}
.rpi-banner-kicker{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#7c3aed;margin-bottom:3px}
.rpi-banner-txt h2{margin:0 0 5px;font-size:22px}
.rpi-banner-txt p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.5}
.rpi-banner-go{flex:none;font-weight:800;color:#fff;background:linear-gradient(135deg,#7c3aed,#4c97ff);
  padding:11px 18px;border-radius:999px;box-shadow:var(--shadow-sm);white-space:nowrap}
@media (max-width:720px){ .rpi-banner{flex-wrap:wrap} .rpi-banner-go{width:100%;text-align:center} }
/* dark theme (data-theme switch) */
  :root[data-theme="dark"] .rpi-banner{background:linear-gradient(120deg,#1b2740,#231b3d 60%,#2a1830);border-color:#332a4d}


/* direct "Open in Scratch" CTA in the project title band */
.rpi-title{flex-wrap:wrap}
.rpi-title-txt{flex:1;min-width:220px}
.rpi-title-cta{flex:none;white-space:nowrap;box-shadow:0 4px 0 rgba(0,0,0,.10),var(--shadow-sm)}
.rpi-buildcard{border:2px solid var(--brand);box-shadow:0 0 0 4px rgba(76,151,255,.10),var(--shadow-sm)}
.rpi-buildcard .btn.big{box-shadow:0 3px 0 rgba(0,0,0,.10)}
@media (max-width:560px){ .rpi-title-cta{width:100%;margin-top:6px} }
.rpi-side .btn.block{font-size:14px;padding:9px 12px}
.rpi-side .btn.block.big{font-size:15px;padding:12px 14px}

/* ===================================================================
   GRADE NEXT ACADEMY — teaching system UI
   =================================================================== */
.gn-switch{display:flex;align-items:center;gap:8px;margin-left:auto}
.gn-select{font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--surface);
  border:2px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer}
.btn.sm{padding:7px 13px;font-size:13.5px}
.strand-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.gn-empty{text-align:center;padding:34px 20px;color:var(--ink-soft)}
.gn-empty-emoji{font-size:44px;margin-bottom:8px}
.gn-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.gn-toolbar .c-search{flex:1;min-width:220px}
.gn-hero-prog{margin-top:10px;font-size:14.5px;color:var(--ink-soft)}

/* ---- dashboard ---- */
.dash-hero h1{font-size:30px}
.cont-card{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:0 0 22px;padding:24px;
  background:linear-gradient(120deg,var(--gn-soft-purple),#f4efff 70%,#ffeef6);border:1px solid #e2ddf5;
  border-radius:20px;box-shadow:var(--shadow-sm)}
.cont-txt{flex:1;min-width:260px}
.cont-kicker{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#7c3aed;margin-bottom:4px}
.cont-card h2{margin:0 0 5px;font-size:23px}
.cont-card p{margin:0;color:var(--ink-soft);font-size:14.5px}
.cont-prog{display:flex;align-items:center;gap:11px;margin-top:13px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.cont-prog .bar{flex:1;max-width:280px}
.cont-actions{display:flex;flex-direction:column;gap:9px;min-width:210px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:15px;margin:0 0 26px}
.tile{display:flex;align-items:center;gap:13px;padding:17px;background:var(--surface);border:1px solid var(--line);
  border-left:5px solid var(--tc,#4c97ff);border-radius:15px;text-decoration:none;color:inherit;
  box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .18s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.tile-emoji{font-size:29px;flex:none}
.tile h3{margin:0 0 2px;font-size:16px}
.tile p{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.4}
.tile-go{margin-left:auto;font-weight:800;color:var(--tc,#4c97ff)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px;
  margin:0 0 20px;box-shadow:var(--shadow-sm)}
.panel-h{margin:0 0 4px;font-size:19px}
.panel-sub{margin:0 0 14px;font-size:13.5px;color:var(--ink-soft)}
.mastery{display:flex;flex-direction:column;gap:9px}
.mrow{display:grid;grid-template-columns:150px 1fr 46px 50px;align-items:center;gap:11px;font-size:13.5px}
.mname{display:flex;align-items:center;gap:7px;font-weight:700}
.mpct{font-weight:800;text-align:right}
.mcount{color:var(--ink-faint);font-size:12px;text-align:right}
.lv-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lv-card{display:block;padding:18px;background:var(--bg);border:1px solid var(--line);
  border-top:5px solid var(--lvc,#4c97ff);border-radius:15px;text-decoration:none;color:inherit;
  transition:transform .12s,box-shadow .18s}
.lv-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.lv-card-emoji{font-size:27px}
.lv-card h3{margin:6px 0 5px;font-size:17px}
.lv-card p{margin:0 0 12px;font-size:13px;color:var(--ink-soft);line-height:1.45}
.lv-card-meta{display:block;margin-top:7px;font-size:12px;font-weight:700;color:var(--ink-soft)}

/* ---- curriculum ---- */
.lv-sec{margin:0 0 30px}
.lv-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:17px 20px;margin-bottom:12px;
  background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--lvc,#4c97ff);
  border-radius:16px;box-shadow:var(--shadow-sm)}
.lv-emoji{font-size:33px;flex:none}
.lv-txt{flex:1;min-width:220px}
.lv-txt h2{margin:0 0 3px;font-size:20px}
.lv-txt p{margin:0;font-size:13.5px;color:var(--ink-soft)}
.lv-prog{min-width:170px}
.lv-pct{font-size:15px;font-weight:800;margin-bottom:5px}
.lv-sub{font-size:12px;color:var(--ink-faint);margin-top:5px}
.sess-list{display:flex;flex-direction:column;gap:7px}
.sess-row{display:flex;align-items:center;gap:13px;padding:11px 15px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;
  transition:transform .1s,box-shadow .15s,border-color .15s}
.sess-row:hover{transform:translateX(3px);box-shadow:var(--shadow-sm);border-color:var(--brand)}
.sess-row.done{background:linear-gradient(90deg,rgba(47,174,102,.07),transparent 40%)}
.sess-n{flex:none;width:29px;height:29px;border-radius:9px;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:var(--ink-soft)}
.sess-main{flex:1;min-width:0}
.sess-title{font-weight:700;font-size:15px}
.sess-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:3px;font-size:12.5px;color:var(--ink-soft)}
.sess-content{font-weight:700;color:var(--brand-dark)}
.sess-content.build{color:var(--ink-faint)}
.sess-go{flex:none;font-size:12.5px;font-weight:800;color:var(--brand-dark);opacity:0;transition:opacity .15s}
.sess-row:hover .sess-go{opacity:1}

/* ---- lesson plan ---- */
.lp-head{margin:0 0 20px;padding:18px 22px;background:var(--surface);border:1px solid var(--line);
  border-left:6px solid var(--sc,#4c97ff);border-radius:16px;box-shadow:var(--shadow-sm)}
.lp-crumbs{font-size:13px;color:var(--ink-faint);margin-bottom:9px}
.lp-crumbs a{color:var(--brand-dark);font-weight:700;text-decoration:none}
.lp-titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lp-titlerow h1{margin:0 0 8px;font-size:26px}
.lp-tags{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.strand-chip{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:4px 11px;border-radius:999px}
.lp-modeswitch{display:flex;background:var(--gn-soft-purple);border-radius:999px;padding:4px;gap:3px}
.seg-btn{border:0;background:transparent;font:inherit;font-size:13px;font-weight:800;color:var(--ink-soft);
  padding:8px 14px;border-radius:999px;cursor:pointer}
.seg-btn.on{background:var(--surface);color:var(--brand-dark);box-shadow:var(--shadow-sm)}
.lp-nav{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.lp-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.lp-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.lp-side{position:sticky;top:74px;display:flex;flex-direction:column;gap:14px}
.lp-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow-sm)}
.lp-h{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:17px}
.lp-ico{font-size:19px}
.lp-note{font-size:13.5px;color:var(--ink-soft);margin:0 0 10px;line-height:1.5}
.lp-build{border:2px solid var(--brand);box-shadow:0 0 0 4px rgba(76,151,255,.09),var(--shadow-sm)}
.lp-buildrow{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.lp-buildemoji{font-size:33px}
.lp-buildtitle{font-weight:800;font-size:16px}
.lp-buildmeta{font-size:12px;color:var(--ink-soft);margin-top:2px}
.lp-hw{background:linear-gradient(135deg,#fff8ec,#fffdf8);border-color:#ffe4b3}
.lp-hook{background:linear-gradient(135deg,#eef6ff,#f8fcff);border-color:#cfe4ff}
.lp-warn{border-color:#ffd9c9}
.lp-obj{margin:0;padding-left:20px;line-height:1.65;font-size:14px}
.lp-obj.big{font-size:16px;line-height:1.8}
.lp-obj li{margin:4px 0}
.blk-list{display:flex;flex-wrap:wrap;gap:7px}
.blk-list.big code{font-size:14px;padding:7px 12px}
.lp-vocab{margin:0;font-size:13.5px}
.lp-vocab dt{font-weight:800;margin-top:9px}
.lp-vocab dt:first-child{margin-top:0}
.lp-vocab dd{margin:2px 0 0;color:var(--ink-soft);line-height:1.5}
.lp-steps{margin:0;padding-left:22px;line-height:1.65;font-size:14.5px}
.lp-steps li{margin:9px 0}
.lp-steps code,.lp-watch code,.lp-ask code{background:var(--gn-soft-purple);padding:.1em .4em;border-radius:5px;font-size:.9em}
.lp-watch,.lp-ask{margin:0;padding-left:20px;line-height:1.6;font-size:14px}
.lp-watch li,.lp-ask li{margin:8px 0}
.lp-arrow{color:var(--brand-dark);font-weight:800}
.lp-diff{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.lp-diffbox{padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.5}
.lp-diffbox b{display:block;margin-bottom:4px}
.lp-diffbox.support{background:#f0f7ff;border:1px solid #cfe4ff}
.lp-diffbox.stretch{background:#f2fbf5;border:1px solid #c8ecd5}
/* run sheet */
.runsheet{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rs-item{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line)}
.rs-item:last-child{border-bottom:0}
.rs-min{flex:none;width:44px;height:44px;border-radius:12px;background:var(--gn-soft-purple);display:grid;place-items:center;
  font-weight:800;font-size:14px;color:var(--brand-dark)}
.rs-body{flex:1;min-width:0}
.rs-phase{font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rs-what{font-weight:600;color:var(--ink-soft)}
.rs-detail{margin:5px 0 0;font-size:14px;line-height:1.55}
.rs-note{margin:6px 0 0;font-size:12.5px;color:var(--ink-soft);background:#f7faff;border-radius:8px;padding:6px 10px}
/* assessment */
.rub-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:12px}
.rub-btn{text-align:left;border:2px solid var(--line);background:var(--surface);border-radius:12px;
  padding:11px 13px;cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.rub-btn b{display:block;font-size:13.5px;margin-bottom:3px}
.rub-btn span{font-size:12px;color:var(--ink-soft);line-height:1.4;display:block}
.rub-btn:hover{border-color:var(--brand)}
.rub-btn.on.emerging{border-color:var(--warn);background:#fff8ec}
.rub-btn.on.secure{border-color:var(--brand);background:var(--gn-soft-purple)}
.rub-btn.on.mastered{border-color:var(--good);background:#eefaf2}
.assess-notes{width:100%;font:inherit;font-size:13.5px;padding:11px 13px;border:2px solid var(--line);
  border-radius:12px;background:var(--surface);color:var(--ink);resize:vertical}
.assess-actions{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}

/* ---- reports ---- */
.rep-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px;
  padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm)}
.rep-kicker{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--brand-dark)}
.rep-head h1{margin:3px 0 4px;font-size:29px}
.rep-head p{margin:0;color:var(--ink-soft);font-size:13.5px}
.rep-logo{font-size:44px}
.rep-summary{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:0 0 20px;padding:20px 22px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm)}
.rep-rings{display:flex;gap:14px;flex-wrap:wrap}
.gn-ringwrap{position:relative;width:92px;height:92px}
.gn-ring{width:92px;height:92px;transform:rotate(-90deg)}
.gn-ring-fg{transition:stroke-dashoffset .6s ease}
.gn-ringtxt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gn-ringtxt b{font-size:19px}
.gn-ringtxt span{font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.rep-numbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px;flex:1;min-width:240px}
.rep-num{text-align:center;padding:12px;background:var(--bg);border-radius:12px}
.rep-num b{display:block;font-size:24px}
.rep-num span{font-size:11.5px;color:var(--ink-soft)}
.rep-tablewrap{overflow-x:auto}
.rep-table{width:100%;border-collapse:collapse;font-size:13px}
.rep-table th{text-align:left;padding:9px 10px;border-bottom:2px solid var(--line);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.4px;color:var(--ink-faint)}
.rep-table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.rep-notes{color:var(--ink-soft);max-width:280px}
.rub-pill{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;text-transform:capitalize}
.rub-pill.emerging{background:#fff1d6;color:#a15c00}
.rub-pill.secure{background:#e0ecff;color:#1d4ed8}
.rub-pill.mastered{background:#d8f5e3;color:#12784a}
.rep-tools{display:flex;gap:10px;flex-wrap:wrap}
.cert{display:flex;align-items:center;gap:18px;padding:20px 22px;margin-bottom:12px;border-radius:16px;
  background:linear-gradient(135deg,#fffdf6,#fff8e8);border:2px solid var(--cc,#34d399)}
.cert-seal{font-size:46px}
.cert-kicker{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--ink-faint)}
.cert-body h3{margin:4px 0 6px;font-size:24px}
.cert-body p{margin:0;font-size:14px;color:var(--ink-soft)}
.cert-foot{margin-top:9px;font-size:12px;color:var(--ink-faint)}

@media (max-width:960px){
  .lp-grid{grid-template-columns:1fr}
  .lp-side{position:static;order:-1}
  .lv-cards,.lp-diff,.rub-row{grid-template-columns:1fr}
  .mrow{grid-template-columns:120px 1fr 42px}
  .mcount{display:none}
}
@media print{
  .c-head,.c-foot,.no-print,.gn-switch,.rep-tools{display:none!important}
  body{background:#fff}
  .panel,.rep-head,.rep-summary{box-shadow:none;border-color:#ddd;break-inside:avoid}
  .c-main{max-width:100%;padding:0}
}
/* dark theme (data-theme switch) */
  :root[data-theme="dark"] .gn-select, :root[data-theme="dark"] .assess-notes, :root[data-theme="dark"] .rub-btn{background:var(--surface);color:var(--ink)}
  :root[data-theme="dark"] .cont-card{background:linear-gradient(120deg,#1b2740,#241b3d 70%,#2a1830);border-color:#332a4d}
  :root[data-theme="dark"] .tile, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .lp-card, :root[data-theme="dark"] .lp-head, :root[data-theme="dark"] .sess-row, :root[data-theme="dark"] .lv-head, :root[data-theme="dark"] .rep-head, :root[data-theme="dark"] .rep-summary{background:var(--surface)}
  :root[data-theme="dark"] .lv-card, :root[data-theme="dark"] .rep-num, :root[data-theme="dark"] .rs-min{background:#1a2233}
  :root[data-theme="dark"] .lp-modeswitch{background:#1a2233}
  :root[data-theme="dark"] .seg-btn.on{background:var(--surface)}
  :root[data-theme="dark"] .lp-hw{background:#241f14;border-color:#4a3a1c}
  :root[data-theme="dark"] .lp-hook{background:#141d2e;border-color:#2f4670}
  :root[data-theme="dark"] .lp-diffbox.support{background:#141d2e;border-color:#2f4670}
  :root[data-theme="dark"] .lp-diffbox.stretch{background:#12271c;border-color:#255139}
  :root[data-theme="dark"] .rs-note, :root[data-theme="dark"] .lp-steps code, :root[data-theme="dark"] .lp-watch code, :root[data-theme="dark"] .lp-ask code{background:#1a2233}
  :root[data-theme="dark"] .rub-btn.on.emerging{background:#241f14}
  :root[data-theme="dark"] .rub-btn.on.secure{background:#141d2e}
  :root[data-theme="dark"] .rub-btn.on.mastered{background:#12271c}
  :root[data-theme="dark"] .cert{background:linear-gradient(135deg,#20242e,#2a2418)}
  :root[data-theme="dark"] .rub-pill.emerging{background:#3a2f1c;color:#ffcf80}
  :root[data-theme="dark"] .rub-pill.secure{background:#1e2c40;color:#8fbcff}
  :root[data-theme="dark"] .rub-pill.mastered{background:#12331f;color:#86efac}


/* ===================================================================
   LEARN -> PRACTICE -> APPLY journey, Block Lab and Recall Test
   =================================================================== */
.journey{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px}
.jstep{display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;text-decoration:none;
  background:var(--gn-soft-purple);color:var(--ink-soft);font-size:13.5px;font-weight:700;transition:background .15s,color .15s}
.jstep:hover{background:var(--gn-border-strong);color:var(--ink)}
.jstep.on{background:var(--brand);color:#fff}
.jstep.done{background:#e4f7ec;color:#15803d}
.jstep.on.done{background:var(--good);color:#fff}
.jn{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.5);display:grid;place-items:center;
  font-size:11.5px;font-weight:800;flex:none}
.jstep.on .jn{background:rgba(255,255,255,.3)}
.jarrow{margin-left:4px;color:var(--ink-faint);font-weight:800}
.lp-next{border:2px solid var(--good);box-shadow:0 0 0 4px rgba(47,174,102,.09),var(--shadow-sm)}
.next-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.learn-idea{font-size:16px;line-height:1.6;margin:0}

/* block cards (shared by Learn and Block Lab) */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.bcard{background:var(--bg);border:1px solid var(--line);border-left:5px solid var(--bc,#4c97ff);
  border-radius:13px;padding:14px}
.bcard.unlocked{background:linear-gradient(135deg,rgba(47,174,102,.07),transparent 60%)}
.bcard-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;flex-wrap:wrap}
.bchip{color:#fff;font-size:12.5px;font-weight:800;padding:5px 11px;border-radius:8px;
  font-family:"SFMono-Regular",Consolas,Menlo,monospace;box-shadow:0 2px 0 rgba(0,0,0,.13) inset}
.bcat{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-faint)}
.bunlock{font-size:11px;font-weight:800;color:#15803d;background:#dcfce7;padding:3px 9px;border-radius:999px}
.bwhat{margin:0 0 9px;font-size:13.5px;line-height:1.5}
.bex{background:#20293b;color:#e8eefc;border-radius:9px;padding:8px 11px;margin-bottom:8px;overflow-x:auto}
.bex-l{display:block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#ffce54;margin-bottom:3px}
.bex code{font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-size:12px;white-space:pre}
.btip{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.btaught{display:block;margin-top:9px;font-size:12px;font-weight:700;color:var(--brand-dark);text-decoration:none}
.btaught:hover{text-decoration:underline}

/* Block Lab */
.blab-sec{margin:0 0 28px}
.blab-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;margin-bottom:14px;
  background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--bc);
  border-radius:15px;box-shadow:var(--shadow-sm)}
.blab-emoji{width:46px;height:46px;flex:none;display:grid;place-items:center;font-size:23px;border-radius:13px}
.blab-head h2{margin:0;font-size:19px}
.blab-head p{margin:2px 0 0;font-size:13px;color:var(--ink-soft)}
.blab-count{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--ink-faint)}

/* Recall Test */
.quiz-wrap{max-width:760px;margin:0 auto}
.quiz-prog{margin-bottom:16px}
.quiz-prog-txt{font-size:13px;font-weight:800;color:var(--ink-soft);margin-bottom:7px}
.quiz-dots{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.qdot{width:11px;height:11px;border-radius:50%}
.qdot.right{background:var(--good)}
.qdot.wrong{background:var(--bad)}
.quiz-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow-sm)}
.quiz-stem{margin:0 0 18px;font-size:21px;line-height:1.4}
.quiz-opts{display:flex;flex-direction:column;gap:10px}
.qopt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;font:inherit;font-size:15.5px;
  padding:14px 16px;border:2px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:13px;cursor:pointer;transition:border-color .12s,background .12s,transform .08s}
.qopt:hover:not(:disabled){border-color:var(--brand);transform:translateX(2px)}
.qopt:disabled{cursor:default}
.qletter{flex:none;width:29px;height:29px;border-radius:9px;background:var(--gn-soft-purple);display:grid;place-items:center;
  font-weight:800;font-size:14px;color:var(--ink-soft)}
.qtext{flex:1}
.qmark{font-weight:800;font-size:19px}
.qopt.correct{border-color:var(--good);background:#eefaf2}
.qopt.correct .qletter{background:var(--good);color:#fff}
.qopt.correct .qmark{color:var(--good)}
.qopt.chosen-wrong{border-color:var(--bad);background:#fdeeed}
.qopt.chosen-wrong .qletter{background:var(--bad);color:#fff}
.qopt.chosen-wrong .qmark{color:var(--bad)}
.qopt.dim{opacity:.55}
.qwhy{margin-top:16px;padding:14px 16px;border-radius:12px;font-size:14.5px;line-height:1.55}
.qwhy.ok{background:#eefaf2;border:1px solid #bfe8d1}
.qwhy.no{background:#fff6ec;border:1px solid #ffd9b3}
.quiz-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;justify-content:center}
.quiz-result{text-align:center;background:var(--surface);border:2px solid var(--line);border-radius:20px;
  padding:30px 24px;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.quiz-result.pass{border-color:var(--good);background:linear-gradient(160deg,#f2fbf6,var(--surface) 60%)}
.quiz-result.fail{border-color:var(--warn);background:linear-gradient(160deg,#fffaf1,var(--surface) 60%)}
.qr-emoji{font-size:52px}
.quiz-result h2{margin:6px 0 14px;font-size:27px}
.quiz-result .gn-ringwrap{margin:0 auto}
.qr-score{font-size:19px;font-weight:800;margin:12px 0 6px}
.qr-msg{margin:0 auto;max-width:460px;color:var(--ink-soft);font-size:14.5px;line-height:1.55}
.qr-best{margin-top:10px;font-size:13px;color:var(--ink-faint);font-weight:700}
.qrev{padding:14px 16px;border-radius:12px;margin-bottom:11px;border:1px solid var(--line)}
.qrev.ok{background:#f5fbf7;border-color:#cfe9da}
.qrev.no{background:#fff7f6;border-color:#f5d4d0}
.qrev-h{display:flex;gap:9px;font-weight:700;font-size:14.5px;line-height:1.45}
.qrev-n{flex:none;font-weight:800}
.qrev.ok .qrev-n{color:var(--good)}
.qrev.no .qrev-n{color:var(--bad)}
.qrev-a{font-size:13.5px;color:var(--ink-soft);margin-top:6px}
.qrev-why{font-size:13px;color:var(--ink-soft);margin-top:7px;font-style:italic}

@media (max-width:640px){
  .journey{gap:4px}
  .jstep{padding:7px 10px;font-size:12.5px}
  .jlabel{display:none}
  .quiz-stem{font-size:18px}
  .qopt{font-size:14.5px;padding:12px 13px}
}
/* dark theme (data-theme switch) */
  :root[data-theme="dark"] .jstep{background:#1a2233}
  :root[data-theme="dark"] .jstep:hover{background:#20293b}
  :root[data-theme="dark"] .jstep.done{background:#12331f;color:#86efac}
  :root[data-theme="dark"] .bcard{background:#1a2233}
  :root[data-theme="dark"] .bcard.unlocked{background:linear-gradient(135deg,rgba(47,174,102,.12),#1a2233 60%)}
  :root[data-theme="dark"] .bunlock{background:#12331f;color:#86efac}
  :root[data-theme="dark"] .blab-head, :root[data-theme="dark"] .quiz-card, :root[data-theme="dark"] .quiz-result{background:var(--surface)}
  :root[data-theme="dark"] .qopt{background:var(--surface);color:var(--ink)}
  :root[data-theme="dark"] .qletter{background:#1a2233}
  :root[data-theme="dark"] .qopt.correct{background:#12271c}
  :root[data-theme="dark"] .qopt.chosen-wrong{background:#2a1614}
  :root[data-theme="dark"] .qwhy.ok{background:#12271c;border-color:#255139}
  :root[data-theme="dark"] .qwhy.no{background:#2a2114;border-color:#5a4420}
  :root[data-theme="dark"] .qrev.ok{background:#141f19;border-color:#25412f}
  :root[data-theme="dark"] .qrev.no{background:#241715;border-color:#4a2a26}
  :root[data-theme="dark"] .quiz-result.pass{background:linear-gradient(160deg,#12271c,var(--surface) 60%)}
  :root[data-theme="dark"] .quiz-result.fail{background:linear-gradient(160deg,#2a2114,var(--surface) 60%)}


/* session row: student journey + tutor plan link */
.sess-row{padding:0;overflow:hidden}
.sess-hit{display:flex;align-items:center;gap:13px;flex:1;min-width:0;padding:11px 0 11px 15px;
  text-decoration:none;color:inherit}
.sess-side{display:flex;align-items:center;gap:12px;padding-right:15px;flex:none}
.sess-stages{display:flex;gap:4px}
.sdot{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;font-size:12px;
  background:var(--gn-soft-purple);opacity:.42;filter:grayscale(1)}
.sdot.on{background:#dcfce7;opacity:1;filter:none}
.sess-plan{font-size:12px;font-weight:800;color:var(--ink-faint);text-decoration:none;white-space:nowrap;
  padding:6px 10px;border-radius:999px;border:1px solid var(--line)}
.sess-plan:hover{color:var(--brand-dark);border-color:var(--brand);background:var(--gn-soft-purple)}
.jscore{font-size:12.5px;font-weight:800;color:var(--ink-soft);margin-left:6px}
@media (max-width:720px){ .sess-plan{display:none} }
/* dark theme (data-theme switch) */
  :root[data-theme="dark"] .sdot{background:#1a2233}
  :root[data-theme="dark"] .sdot.on{background:#12331f}
  :root[data-theme="dark"] .sess-plan:hover{background:#1e2c40}

/* the global `code` rule adds a light background — cancel it inside the dark
   example box, otherwise pale text sits on a pale background and vanishes */
.bex code{background:transparent;color:inherit;padding:0;border-radius:0}

/* ===================================================================
   Role switch, subject content, worked examples, staged build briefs
   =================================================================== */
.head-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.role-switch{display:flex;background:var(--gn-soft-purple);border-radius:999px;padding:3px;gap:2px}
.role-btn{border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:800;color:var(--ink-soft);
  padding:7px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.role-btn:hover{color:var(--ink)}
.role-btn.on.student{background:var(--brand);color:#fff}
.role-btn.on.tutor{background:#7c3aed;color:#fff}
.mode-banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;padding:10px 15px;
  border-radius:12px;margin:0 0 18px}
.mode-banner.student{background:var(--gn-soft-purple);border:1px solid #cfe0ff;color:#2c4a7c}
.mode-banner.tutor{background:#f5efff;border:1px solid #ddd0f7;color:#5b3a9e}
.tutor-only{margin-top:12px;padding:12px;border:2px dashed #c4b5fd;border-radius:12px;background:#faf7ff}
.tutor-only-h{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#7c3aed;margin-bottom:7px}
.lp-modehint{font-size:12.5px;font-weight:700;color:var(--ink-soft);display:flex;gap:8px;align-items:center}

/* subject content */
.deep-text p{font-size:15px;line-height:1.68;margin:0 0 12px}
.deep-text p:last-child{margin-bottom:0}
.deep-why,.deep-real{margin-top:12px;padding:11px 14px;border-radius:11px;font-size:14px;line-height:1.55}
.deep-why{background:#eef6ff;border:1px solid #cfe4ff}
.deep-real{background:#f3fbf5;border:1px solid #c9ecd6}

/* worked examples */
.wex-list{display:flex;flex-direction:column;gap:14px}
.wex-t{font-weight:800;font-size:14.5px;margin-bottom:7px}
.wex-code{background:#20293b;color:#e8eefc;border-radius:11px;padding:14px 16px;margin:0;overflow-x:auto;
  font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-size:13px;line-height:1.6;white-space:pre;tab-size:2}
.wex-n{margin:7px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.5}

/* block uses */
.buses{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line)}
.buses-h{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint);margin-bottom:5px}
.buses ul{margin:0;padding-left:17px;font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.buses li{margin:2px 0}

/* staged build brief */
.lp-brief{border:2px solid var(--warn);box-shadow:0 0 0 4px rgba(233,147,11,.09),var(--shadow-sm)}
.stage{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden;background:var(--bg)}
.stage[open]{background:var(--surface);box-shadow:var(--shadow-sm)}
.stage summary{display:flex;align-items:center;gap:11px;cursor:pointer;padding:12px 14px;font-weight:700;list-style:none}
.stage summary::-webkit-details-marker{display:none}
.stage-n{flex:none;width:25px;height:25px;border-radius:8px;background:var(--warn);color:#fff;
  display:grid;place-items:center;font-size:12.5px;font-weight:800}
.stage-t{flex:1;font-size:15px}
.stage-m{font-size:11.5px;font-weight:800;color:var(--ink-faint)}
.stage-goal{margin:0 14px 10px;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.stage-tasks{margin:0 14px 12px;padding-left:20px;font-size:14px;line-height:1.6}
.stage-tasks li{margin:6px 0}
.stage-check{margin:0 14px 14px;padding:10px 13px;background:#eefaf2;border:1px solid #bfe8d1;
  border-radius:10px;font-size:13.5px;line-height:1.5}

@media (max-width:900px){
  .head-right{width:100%;margin-left:0;justify-content:space-between}
  .role-btn{padding:7px 10px;font-size:12px}
}
/* dark theme (data-theme switch) */
  :root[data-theme="dark"] .role-switch{background:#1a2233}
  :root[data-theme="dark"] .mode-banner.student{background:#141d2e;border-color:#2f4670;color:#a9c4f0}
  :root[data-theme="dark"] .mode-banner.tutor{background:#211a35;border-color:#413168;color:#c4b5fd}
  :root[data-theme="dark"] .tutor-only{background:#1b1630;border-color:#4c3b7a}
  :root[data-theme="dark"] .deep-why{background:#141d2e;border-color:#2f4670}
  :root[data-theme="dark"] .deep-real{background:#12271c;border-color:#255139}
  :root[data-theme="dark"] .stage{background:#1a2233}
  :root[data-theme="dark"] .stage[open]{background:var(--surface)}
  :root[data-theme="dark"] .stage-check{background:#12271c;border-color:#255139}


/* ===================================================================
   VISUAL SCRATCH BLOCKS
   =================================================================== */
.sb-stack{display:flex;flex-direction:column;align-items:flex-start;gap:0;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;padding:14px;background:var(--gn-soft-purple);
  border-radius:14px;overflow-x:auto;max-width:100%}
.sb-wrap{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.sb-block{position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px;
  color:#fff;font-size:13.5px;font-weight:700;line-height:1.15;padding:9px 14px;
  border-radius:6px;box-shadow:0 2px 0 rgba(0,0,0,.18);margin-bottom:2px;
  text-shadow:0 1px 0 rgba(0,0,0,.18);white-space:nowrap}
/* the notch that makes blocks look like they stack */
.sb-block::after{content:"";position:absolute;left:14px;bottom:-3px;width:16px;height:5px;
  background:inherit;border-radius:0 0 4px 4px}
.sb-hat{border-radius:16px 16px 6px 6px;padding-top:13px}
.sb-cap::after{display:none}
.sb-body{margin-left:15px;padding:4px 0 4px 10px;border-left:14px solid;border-radius:0 0 0 6px;
  display:flex;flex-direction:column;align-items:flex-start;min-height:14px}
.sb-empty{height:12px}
.sb-foot{height:12px;width:64px;border-radius:0 6px 6px 6px;box-shadow:0 2px 0 rgba(0,0,0,.18);
  margin-bottom:2px;position:relative}
.sb-foot::after{content:"";position:absolute;left:14px;bottom:-3px;width:16px;height:5px;
  background:inherit;border-radius:0 0 4px 4px}

/* input slots */
.sb-input{display:inline-flex;align-items:center;background:#fff;color:#1f2a3d;
  font-weight:700;font-size:12.5px;padding:2px 9px;text-shadow:none;
  border:1px solid rgba(0,0,0,.12);white-space:nowrap}
.sb-in-num{border-radius:999px}
.sb-in-txt{border-radius:5px}
.sb-in-bool{border-radius:0;background:#5cb1d6;color:#fff;padding:2px 12px;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);border:0}

/* inline chip used in prose */
.sb-chip{display:inline-flex;align-items:center;gap:4px;color:#fff;font-weight:700;
  font-size:12.5px;padding:3px 10px;border-radius:6px;box-shadow:0 2px 0 rgba(0,0,0,.16);
  text-shadow:0 1px 0 rgba(0,0,0,.18);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
.sb-chip .sb-input{font-size:11.5px;padding:1px 7px}

.blk-list.sb-list{gap:8px}
/* dark theme (data-theme switch) */
  :root[data-theme="dark"] .sb-stack{background:#151d2b}
  :root[data-theme="dark"] .sb-input{background:#e9eefc;color:#1f2a3d}


/* at-a-glance progress analytics on the dashboard */
.stats-panel{background:linear-gradient(135deg,#f7faff,var(--surface) 60%)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:14px}
.stat{text-align:center;padding:14px 10px;background:var(--bg);border-radius:13px;
  border-bottom:4px solid var(--sc2,#4c97ff)}
.stat b{display:block;font-size:24px;line-height:1.1;color:var(--sc2,#4c97ff)}
.stat span{display:block;margin-top:4px;font-size:11.5px;font-weight:700;color:var(--ink-soft);line-height:1.3}
.stat-bar{display:flex;align-items:center;gap:11px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.stat-bar .bar{flex:1}
.gn-whoami{font-size:13.5px;font-weight:800;color:var(--ink-soft);padding:7px 12px;
  background:var(--gn-soft-purple);border-radius:999px;white-space:nowrap}
/* dark theme (data-theme switch) */
  :root[data-theme="dark"] .stats-panel{background:linear-gradient(135deg,#18202f,var(--surface) 60%)}
  :root[data-theme="dark"] .stat{background:#1a2233}
  :root[data-theme="dark"] .gn-whoami{background:#1a2233}



/* ---- GradeNext brand signature: pink accent rule under headings ---- */
.c-hero h1::after, .panel-h::after, .blab-head h2::after {
  content: ""; display: block; width: 46px; height: 4px; border-radius: 999px;
  background: var(--gn-pink); margin-top: 10px;
}
.c-hero h1::after { margin-left: auto; margin-right: auto; }
.rpi-hero-badge, .cont-kicker, .rep-kicker, .lh-eyebrow { color: var(--gn-pink); }
.cont-card { background: linear-gradient(120deg, #F6F0FF, #FFF0F8 70%, #FFF7FB); border-color: var(--gn-border-strong); }
.rpi-banner { background: linear-gradient(120deg, #F6F0FF, #FFF0F8 70%, #FFF7FB); border-color: var(--gn-border-strong); }
.rpi-hero { background: linear-gradient(120deg, #F6F0FF, #FFF0F8); }
.rpi-hero-badge { background: #FFE3F1; }
.role-btn.on.tutor { background: var(--gn-pink); }
.stats-panel { background: linear-gradient(135deg, #FBF7FF, var(--surface) 60%); }
/* dark theme (data-theme switch) */
  :root[data-theme="dark"] .cont-card, :root[data-theme="dark"] .rpi-banner, :root[data-theme="dark"] .rpi-hero{ background: linear-gradient(120deg, #241634, #2E1430 70%, #2A1226); }
  :root[data-theme="dark"] .rpi-hero-badge{ background: #3A1B33; }
  :root[data-theme="dark"] .stats-panel{ background: linear-gradient(135deg, #221634, var(--surface) 60%); }


/* ===================================================================
   TECH GLOSS — a technical, glossy finish over the brand palette.
   Electric violet -> magenta gradients, glass surfaces, specular
   highlights and soft glows. Brand hues stay exactly on-guideline.
   =================================================================== */
:root{
  --gn-violet:#7F5DF9;          /* electric violet (brand gradient start) */
  --gn-magenta:#FF6AC6;         /* magenta (brand gradient end) */
  --gn-cyan:#41E0FF;            /* technical cyan for data accents */
  --grad-brand:linear-gradient(135deg,#7F5DF9 0%,#A855F7 45%,#FF6AC6 100%);
  --grad-brand-soft:linear-gradient(135deg,rgba(127,93,249,.14),rgba(255,106,198,.14));
  --grad-deep:linear-gradient(135deg,#2D1151 0%,#5A2F6B 55%,#703D84 100%);
  --gloss:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.06) 42%,rgba(255,255,255,0) 60%);
  --glow-brand:0 6px 22px rgba(127,93,249,.32);
  --glow-pink:0 6px 22px rgba(245,0,126,.28);
  --glass:rgba(255,255,255,.72);
  --hairline:1px solid rgba(255,255,255,.55);
}

/* --- glossy primary actions --- */
.btn.primary{
  background:var(--grad-brand);border:0;color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--glow-brand),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(45,17,81,.22);
}
.btn.primary::after{content:"";position:absolute;inset:0 0 auto 0;height:52%;
  background:var(--gloss);pointer-events:none;border-radius:inherit}
.btn.primary:hover{filter:saturate(1.08) brightness(1.04);box-shadow:0 10px 30px rgba(127,93,249,.42),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.ghost{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--gn-border-strong);box-shadow:0 2px 8px rgba(45,17,81,.05)}
.btn.ghost:hover{border-color:var(--gn-purple-light);box-shadow:0 6px 18px rgba(127,93,249,.18)}

/* --- glass panels & cards --- */
.panel,.tile,.lp-card,.quiz-card,.bcard,.pc,.sess-row,.lv-head,.lp-head,.rep-head,.rep-summary,.cert{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78)),var(--surface);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.panel::before,.tile::before,.quiz-card::before,.cont-card::before,.stats-panel::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);pointer-events:none}
.tile:hover{box-shadow:0 14px 34px rgba(127,93,249,.20);border-color:var(--gn-purple-light)}
.pc:hover{box-shadow:0 18px 40px rgba(127,93,249,.22);border-color:var(--gn-purple-light)}

/* --- data surfaces get the technical treatment --- */
.bar{background:linear-gradient(180deg,#E7E1F0,#F2EDF7);box-shadow:inset 0 1px 3px rgba(45,17,81,.10)}
.bar-fill{background:var(--grad-brand)!important;position:relative;
  box-shadow:0 0 12px rgba(127,93,249,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.bar-fill::after{content:"";position:absolute;inset:0 0 50% 0;
  background:linear-gradient(180deg,rgba(255,255,255,.4),transparent);border-radius:999px}
.stat{background:linear-gradient(180deg,#fff,#FBF8FF);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 10px rgba(45,17,81,.05)}
.stat b{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gn-ring-fg{filter:drop-shadow(0 0 6px rgba(127,93,249,.55))}

/* --- glossy chips, badges and journey steps --- */
.thumb,.role-btn.on,.jstep.on,.sess-n,.stage-n,.rs-min,.sl-n,.jn{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 2px 8px rgba(45,17,81,.14)}
.role-btn.on.student{background:var(--grad-brand)}
.role-btn.on.tutor{background:linear-gradient(135deg,#F5007E,#FF6AC6)}
.jstep.on{background:var(--grad-brand)}
.type-badge,.tag-chip,.pill,.strand-chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.c-navbtn.active{background:var(--grad-brand);color:#fff;box-shadow:var(--glow-brand)}
.c-mark{filter:drop-shadow(0 2px 4px rgba(127,93,249,.35))}

/* --- Scratch blocks keep their official colours, gain a glossy edge --- */
.sb-block,.sb-chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 2px 0 rgba(0,0,0,.16),0 3px 8px rgba(45,17,81,.10)}
.sb-block::before{content:"";position:absolute;inset:0 0 auto 0;height:46%;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);pointer-events:none}
.sb-stack{background:linear-gradient(160deg,#F4F0FB,#FBF7FF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 12px rgba(45,17,81,.06)}

/* --- hero: technical gradient wash --- */
.c-hero{background:
  radial-gradient(1200px 320px at 50% -60px,rgba(127,93,249,.14),transparent 70%),
  radial-gradient(900px 260px at 85% 0,rgba(255,106,198,.12),transparent 70%)}
.dash-hero h1,.rpi-hero h1{background:var(--grad-deep);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

/* dark theme (data-theme switch) */
  :root[data-theme="dark"]{--glass:rgba(30,20,48,.66);--hairline:1px solid rgba(255,255,255,.10)}
  :root[data-theme="dark"] .panel, :root[data-theme="dark"] .tile, :root[data-theme="dark"] .lp-card, :root[data-theme="dark"] .quiz-card, :root[data-theme="dark"] .bcard, :root[data-theme="dark"] .pc, :root[data-theme="dark"] .sess-row, :root[data-theme="dark"] .lv-head, :root[data-theme="dark"] .lp-head, :root[data-theme="dark"] .rep-head, :root[data-theme="dark"] .rep-summary, :root[data-theme="dark"] .cert{
    background:linear-gradient(180deg,rgba(40,27,62,.92),rgba(30,20,48,.86)),var(--surface)}
  :root[data-theme="dark"] .panel::before, :root[data-theme="dark"] .tile::before, :root[data-theme="dark"] .quiz-card::before, :root[data-theme="dark"] .cont-card::before, :root[data-theme="dark"] .stats-panel::before{
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
  :root[data-theme="dark"] .bar{background:linear-gradient(180deg,#241A38,#2C2144);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
  :root[data-theme="dark"] .stat{background:linear-gradient(180deg,#241A38,#1E1430)}
  :root[data-theme="dark"] .sb-stack{background:linear-gradient(160deg,#1B1330,#241A38)}
  :root[data-theme="dark"] .btn.ghost{background:rgba(40,27,62,.7)}
  :root[data-theme="dark"] .dash-hero h1, :root[data-theme="dark"] .rpi-hero h1{background:linear-gradient(135deg,#C8B6FF,#FF6AC6);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}


/* ===================================================================
   Scratch Academy by GradeNext — logo, level split, palette, badges,
   leaderboard, session runner, review & practice
   =================================================================== */
/* brand logo */
.gn-logo{display:inline-flex;align-items:baseline;font-family:var(--font-heading);font-weight:800;
  font-size:21px;color:#221530;line-height:1;letter-spacing:-.02em}
.gn-logo-g{position:relative;display:inline-block;font-size:27px;padding-top:8px}
.gn-cap{position:absolute;top:-6px;left:-5px;width:27px;height:19px}
.gn-logo-x{color:var(--gn-purple);font-size:25px;font-style:italic;margin:0 -1px;font-weight:800}
.c-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.c-brand-txt .c-sub{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gn-pink);margin-top:2px}
/* dark theme (data-theme switch) */ :root[data-theme="dark"] .gn-logo{color:#F3EEF8} 

/* level switch */
.level-switch{display:flex;background:var(--gn-soft-purple);border-radius:999px;padding:3px;gap:2px}
.lv-btn{border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:800;color:var(--ink-soft);
  padding:7px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.lv-btn.on{background:var(--grad-deep);color:#fff;box-shadow:var(--glow-brand)}
.search-btn,.theme-btn{border:1px solid var(--line);background:var(--surface);border-radius:999px;font-size:14px;
  width:36px;height:36px;cursor:pointer;box-shadow:var(--shadow-sm)}
.search-btn:hover,.theme-btn:hover{border-color:var(--gn-purple-light)}
.lv-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;font-weight:700;
  color:var(--ink-soft);background:var(--gn-soft-purple);border:1px solid var(--gn-border-strong);
  border-radius:12px;padding:10px 15px;margin:0 0 16px}
.lv-chip{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.4px}
.lv-chip.l1{background:#DFF5E9;color:#15803d}
.lv-chip.l2{background:#E6E0FB;color:#5b3a9e}

/* command palette */
.cmdk{position:fixed;inset:0;background:rgba(24,12,40,.5);backdrop-filter:blur(4px);z-index:300;
  display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.cmdk-box{width:100%;max-width:620px;background:var(--surface);border-radius:18px;
  box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--gn-border-strong)}
.cmdk-input{width:100%;border:0;outline:none;font:inherit;font-size:17px;padding:17px 20px;
  background:transparent;color:var(--ink);border-bottom:1px solid var(--line)}
.cmdk-list{max-height:46vh;overflow-y:auto;padding:7px}
.cmdk-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  text-decoration:none;color:inherit}
.cmdk-item.sel,.cmdk-item:hover{background:var(--gn-soft-purple)}
.cmdk-tag{flex:none;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  padding:3px 8px;border-radius:999px}
.cmdk-tag.t-session{background:#E0ECFF;color:#1d4ed8}
.cmdk-tag.t-block{background:#FFF1D6;color:#a15c00}
.cmdk-tag.t-project{background:#FFE3F1;color:#be185d}
.cmdk-label{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-sub{margin-left:auto;font-size:12px;color:var(--ink-faint);white-space:nowrap}
.cmdk-none{padding:20px;text-align:center;color:var(--ink-faint)}
.cmdk-hint{padding:9px 16px;font-size:11.5px;color:var(--ink-faint);border-top:1px solid var(--line)}

/* achievements */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
.badge{text-align:center;padding:14px 8px;border-radius:14px;background:var(--bg);
  border:1px solid var(--line);opacity:.45;filter:grayscale(.9)}
.badge.earned{opacity:1;filter:none;background:linear-gradient(160deg,#FBF4FF,#FFF3FA);
  border-color:var(--gn-border-strong);box-shadow:0 4px 14px rgba(127,93,249,.14)}
.badge-emoji{display:block;font-size:27px;margin-bottom:5px}
.badge-name{display:block;font-weight:800;font-size:12.5px}
.badge-desc{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:2px;line-height:1.35}

/* leaderboard */
.lb-table{width:100%;border-collapse:collapse;font-size:13.5px}
.lb-table th{text-align:left;padding:8px 10px;font-size:11px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--ink-faint);border-bottom:2px solid var(--line)}
.lb-table td{padding:9px 10px;border-bottom:1px solid var(--line)}
.lb-rank{font-weight:800;color:var(--gn-purple)}
.lb-me{background:var(--gn-soft-purple)}

/* session runner */
.runner{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:11px 13px;margin-bottom:13px;
  background:var(--gn-soft-purple);border:1px solid var(--gn-border-strong);border-radius:13px}
.runner-time{font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-weight:700;font-size:19px;
  color:var(--gn-purple-deep);min-width:120px}
.runner-phase{font-size:12.5px;font-weight:800;color:var(--gn-pink)}
.rs-item.now{background:linear-gradient(90deg,rgba(245,0,126,.07),transparent 65%);border-radius:12px;
  outline:2px solid rgba(245,0,126,.35);outline-offset:-2px}
.rs-item.now .rs-min{background:var(--gn-pink);color:#fff}

/* review + practice */
.review-pill{background:linear-gradient(135deg,#7F5DF9,#FF6AC6);color:#fff!important}
.gn-confetti{position:fixed;inset:0;pointer-events:none;z-index:400}
.tts-btn{margin-left:auto;border:1px solid var(--line);background:var(--surface);border-radius:999px;
  font-size:13px;font-weight:700;padding:6px 12px;cursor:pointer;color:var(--ink-soft)}
.tts-btn.on{background:var(--gn-pink);border-color:var(--gn-pink);color:#fff}

@media (max-width:980px){
  .level-switch{order:2}
  .lv-btn{padding:6px 9px;font-size:11.5px}
}
/* dark theme (data-theme switch) */
  :root[data-theme="dark"] .lv-chip.l1{background:#12331f;color:#86efac}
  :root[data-theme="dark"] .lv-chip.l2{background:#2b2447;color:#c3b0ff}
  :root[data-theme="dark"] .badge{background:#1E1430}
  :root[data-theme="dark"] .badge.earned{background:linear-gradient(160deg,#2A1B3D,#301A31)}
  :root[data-theme="dark"] .search-btn, :root[data-theme="dark"] .theme-btn{background:var(--surface)}

@media print{ .no-print{display:none!important} }
.lp-headactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lv-card.lv-active{outline:3px solid var(--gn-purple-light);outline-offset:2px}
.btn.review-pill{background:linear-gradient(135deg,#7F5DF9,#FF6AC6)!important;color:#fff!important;
  border:0!important;box-shadow:var(--glow-brand)}

/* brand line: "Scratch Academy by GradeNext" top-left */
.gn-brandline{display:inline-flex;align-items:center;gap:10px}
.gn-markwrap .gn-mark{width:40px;height:40px;display:block;filter:drop-shadow(0 3px 6px rgba(112,61,132,.3))}
.gn-brandtxt{display:flex;flex-direction:column;line-height:1.05}
.gn-brand-main{font-family:var(--font-heading);font-weight:800;font-size:17.5px;color:var(--gn-purple-deep);letter-spacing:-.01em}
.gn-brand-by{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gn-pink);margin-top:2px}
/* dark theme (data-theme switch) */ :root[data-theme="dark"] .gn-brand-main{color:#F3EEF8} 

/* ================= Code Puzzles ================= */
.pz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pz-card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--sc);
  border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px;
  box-shadow:0 4px 16px rgba(45,17,81,.06)}
.pz-card.solved{background:linear-gradient(160deg,#FBF4FF,#FFF6FB)}
.pz-card h3{font-size:15.5px;margin:2px 0;line-height:1.3}
.pz-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pz-meta{font-size:12px;color:var(--ink-faint);margin:0 0 4px}
.pz-card .btn{margin-top:auto}
.pz-stars span{color:#d8d2e2;font-size:15px}
.pz-stars span.on{color:#f5b301;text-shadow:0 1px 4px rgba(245,179,1,.5)}
.pz-stars.big{display:block;margin:8px 0}
.pz-stars.big span{font-size:38px}
.pz-play{max-width:860px;margin:0 auto}
.pz-playhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pz-playhead h2{margin:6px 0}
.pz-mist{font-size:13px;font-weight:700;color:var(--ink-soft);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.pz-mist b{color:var(--gn-pink)}
.pz-progress{display:flex;align-items:center;gap:10px;margin:12px 0}
.pz-progress .bar{flex:1}
.pz-progress>span{font-size:12.5px;color:var(--ink-faint);white-space:nowrap}
.pz-board{background:var(--surface);border:1.5px dashed var(--gn-border-strong);border-radius:16px;
  min-height:150px;padding:18px;
  background-image:radial-gradient(circle,rgba(112,61,132,.14) 1px,transparent 1.5px);
  background-size:17px 17px}
.pz-board-h{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gn-purple);margin-bottom:10px}
.pz-board-empty{color:var(--ink-faint);font-size:14px;padding:22px 6px}
.pz-traywrap{margin-top:18px}
.pz-tray{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.pz-chip{border:0;background:transparent;padding:0;cursor:pointer;transition:transform .12s ease}
.pz-chip:hover{transform:translateY(-2px) scale(1.04)}
.pz-chip .sb-chip{cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.22)}
.pz-chip.shake{animation:pzshake .4s}
@keyframes pzshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.pz-done{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:28px;margin-top:18px;box-shadow:0 10px 30px rgba(45,17,81,.10)}
.pz-done-emoji{font-size:52px}
.pz-note{max-width:520px;margin:10px auto;color:var(--ink-soft);font-size:14px}

/* ================= Flashcards ================= */
.fc-counts{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.fc-count{padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-soft)}
.fc-count b{font-size:14px;margin-right:3px}
.fc-count.new b{color:#64748b}.fc-count.learning b{color:#e9930b}
.fc-count.mastered b{color:#2fae66}.fc-count.due b{color:var(--gn-pink)}
.fc-cta{display:flex;gap:10px;align-items:center;margin:18px 0 24px;flex-wrap:wrap}
.fc-alldone{font-size:14.5px;font-weight:600;color:var(--ink-soft);background:var(--gn-soft-purple);
  border:1px solid var(--gn-border-strong);border-radius:13px;padding:12px 16px}
.fc-browse{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px}
.fc-mini{text-align:left;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--sc);border-radius:12px;padding:10px 13px;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;font-family:inherit;font-size:inherit;color:inherit}
.fc-mini:hover{border-color:var(--gn-border-strong)}
.fc-mini-term{font-weight:800;font-size:13.5px}
.fc-box{align-self:flex-start;font-size:9.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;padding:2.5px 9px;border-radius:999px;background:#eef1f6;color:#64748b}
.fc-box.b1{background:#fef3c7;color:#b45309}
.fc-box.b2{background:#dbeafe;color:#1d4ed8}
.fc-box.b3{background:#dcfce7;color:#15803d}
.fc-mini-def{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.fc-study{max-width:640px;margin:0 auto}
.fc-card{display:block;width:100%;min-height:290px;border-radius:26px;border:2px solid var(--line);
  cursor:pointer;background:var(--surface);box-shadow:0 16px 44px rgba(45,17,81,.13);
  padding:30px;font-family:inherit;color:inherit;text-align:center;transition:transform .15s ease;
  margin-top:8px}
.fc-card:hover{transform:translateY(-3px)}
.fc-card.flipped{background:linear-gradient(160deg,#703D84,#8D4DA5);color:#fff;border-color:transparent}
.fc-facelabel{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  opacity:.6;margin-bottom:18px}
.fc-term{font-size:38px;font-weight:800;font-family:var(--font-heading);line-height:1.15;
  overflow-wrap:break-word}
.fc-def{font-size:19px;font-weight:600;line-height:1.6}
.fc-hint{margin-top:24px;font-size:12.5px;color:var(--ink-faint)}
.fc-src{margin-top:20px;font-size:12px;opacity:.75}
.fc-grade{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.fc-grade .btn{display:flex;flex-direction:column;gap:2px;min-width:118px;padding:11px 16px;border:0}
.fc-grade .btn small{font-weight:600;font-size:10.5px;opacity:.85}
.fc-again{background:#fee2e2;color:#b91c1c}
.fc-good{background:#dcfce7;color:#15803d}
.fc-easy{background:linear-gradient(135deg,#7F5DF9,#FF6AC6);color:#fff;box-shadow:var(--glow-brand)}
.fc-kbd{font-size:12px;color:var(--ink-faint)}
.fc-done{max-width:640px;margin:20px auto}

/* ================= printable certificate ================= */
.cert2-tools{display:flex;gap:10px;align-items:center;margin:16px 0;flex-wrap:wrap}
.cert2-samplenote{font-size:12.5px;color:var(--ink-faint);max-width:340px}
.cert2{display:flex;justify-content:center;margin:8px 0 34px}
.cert2-frame{position:relative;background:linear-gradient(160deg,#FFFDF8,#FBF4FF);width:100%;
  max-width:880px;padding:52px 46px;text-align:center;border:3px solid var(--gn-purple);
  border-radius:6px;outline:10px solid rgba(112,61,132,.09);
  box-shadow:0 22px 64px rgba(45,17,81,.18);color:#2D1151;overflow:hidden}
.cert2-frame::before{content:"";position:absolute;inset:11px;border:1.5px solid rgba(245,0,126,.45);
  border-radius:3px;pointer-events:none}
.cert2-brand{display:flex;justify-content:center;margin-bottom:20px}
.cert2-brand .gn-brand-main{color:#2D1151}
.cert2-title{font-family:var(--font-heading);font-size:32px;font-weight:800;letter-spacing:.07em;
  color:var(--gn-purple-deep);text-transform:uppercase}
.cert2-line{font-size:14px;color:#6b5a80;margin-top:16px}
.cert2-name{font-size:46px;font-weight:800;font-family:var(--font-heading);margin-top:6px;
  background:linear-gradient(135deg,#703D84,#F5007E);-webkit-background-clip:text;
  background-clip:text;color:transparent;overflow-wrap:break-word}
.cert2-level{font-size:22px;font-weight:800;margin-top:10px;color:var(--gn-purple-deep)}
.cert2-detail{font-size:13px;color:#6b5a80;margin-top:8px}
.cert2-sig{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:46px}
.cert2-sigcol{flex:1;font-size:11px;color:#6b5a80;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.cert2-sigline{border-bottom:2px solid var(--gn-purple-deep);height:36px;margin-bottom:7px}
.cert2-date{border-bottom:2px solid var(--gn-purple-deep);padding-bottom:7px;margin-bottom:7px;
  font-size:15px;color:#2D1151;font-weight:700;text-transform:none;letter-spacing:0}
.cert2-seal{width:76px;height:76px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,#703D84,#F5007E);display:flex;align-items:center;
  justify-content:center;font-size:34px;box-shadow:0 8px 24px rgba(245,0,126,.35)}
.cert2-foot{margin-top:28px;font-size:12px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gn-pink)}
.cert2-watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:120px;font-weight:800;color:rgba(112,61,132,.10);transform:rotate(-24deg);
  pointer-events:none;letter-spacing:.12em;font-family:var(--font-heading)}

/* report header logo (was an emoji) */
.rep-logo{font-size:inherit!important}
.rep-logo .gn-mark{width:50px;height:50px}

/* site chrome never prints — reports and certificates come out clean */
@media print{
  .c-head,.c-foot,.cert2-tools{display:none!important}
  body{background:#fff}
  .cert2-frame{box-shadow:none;outline-width:6px}
  .c-main{max-width:none;padding:0}
}
@media (max-width:700px){
  .fc-term{font-size:28px}
  .cert2-frame{padding:34px 20px}
  .cert2-name{font-size:32px}
  .cert2-title{font-size:23px}
  .cert2-watermark{font-size:64px}
}

/* level access control: pinned students, locked cards */
.lv-btn.locked{opacity:.55}
.lv-card.lv-open{cursor:pointer;transition:transform .14s ease,box-shadow .14s ease}
.lv-card.lv-open:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(45,17,81,.16)}
.lv-card.lv-locked{opacity:.62;filter:saturate(.55)}
.lv-card{position:relative;display:flex;flex-direction:column;gap:8px}
.lv-ribbon{position:absolute;top:10px;right:10px;font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(135deg,#7F5DF9,#FF6AC6);
  color:#fff;border-radius:999px;padding:3px 10px;box-shadow:0 3px 10px rgba(127,93,249,.35)}
.lv-go{margin-top:auto;align-self:flex-start;pointer-events:none}
.lv-move{align-self:flex-start;font-size:12.5px}

/* ── GradeNext auth overlay ─────────────────────────────────────────── */
.gn-auth-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center}
.gn-auth-loading{background:var(--bg,#f9fafb)}
.gn-auth-gate{background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gn-auth-center{display:flex;flex-direction:column;align-items:center;gap:12px}
.gn-auth-hint{margin:0;font-family:Poppins,sans-serif;font-size:.875rem;color:var(--ink-faint,#9ca3af)}
.gn-auth-spinner{width:36px;height:36px;border:3px solid rgba(112,61,132,.2);border-top-color:#703D84;border-radius:50%;animation:gn-spin .7s linear infinite}
@keyframes gn-spin{to{transform:rotate(360deg)}}

.gn-gate-card{background:var(--bg-card,#fff);border-radius:1.25rem;padding:2.5rem 2rem;max-width:420px;width:90%;text-align:center;box-shadow:0 8px 48px rgba(0,0,0,.3)}
.gn-gate-icon{font-size:3.25rem;margin-bottom:.75rem}
.gn-gate-title{margin:0 0 .5rem;font-family:Poppins,sans-serif;font-size:1.2rem;font-weight:800;color:var(--ink,#111)}
.gn-gate-desc{margin:0 0 1.5rem;font-family:Poppins,sans-serif;font-size:.875rem;color:var(--ink-faint,#6b7280);line-height:1.65}
.gn-gate-btn{display:block;padding:.75rem 1.5rem;background:linear-gradient(135deg,#703D84,#0891b2);color:#fff;border-radius:.75rem;text-decoration:none;font-family:Poppins,sans-serif;font-weight:700;font-size:.95rem;margin-bottom:.75rem;transition:opacity .15s}
.gn-gate-btn:hover{opacity:.9}
.gn-gate-back{background:none;border:none;cursor:pointer;font-family:Poppins,sans-serif;font-size:.875rem;color:var(--ink-faint,#9ca3af);padding:.25rem .5rem}
.btaught.bonus{color:var(--ink-faint);cursor:default;text-decoration:none}