:root {
  /* ── Surfaces ───────────────────────────────────── */
  --white:#ffffff;
  --paper:#FBF7F0;
  --paper-2:#F5EFE3;
  --paper-3:#ECE4D2;
  --beech:#E8D4B0;
  --beech-deep:#C9A878;

  /* ── Text ───────────────────────────────────────── */
  --ink:#2A2620;
  --ink-soft:#5A5147;
  --ink-mute:#8A7F71;

  /* ── Lines ──────────────────────────────────────── */
  --line:#E4DCC9;

  /* ── Accent colours ─────────────────────────────── */
  --t-red:#C8463A;
  --t-coral:#E27A5E;
  --t-orange:#E89A4A;
  --t-amber:#C9700A;
  --t-yellow:#E8C13D;
  --t-lime:#A8C45A;
  --t-green:#5FA86E;
  --t-teal:#4A9D9C;
  --t-blue:#3F7CB8;
  --t-indigo:#4A4F9E;
  --t-purple:#8B5CA8;
  --t-pink:#D17AA0;
  --t-rose:#E0B0B8;
  --t-teal-dark:#1e5f5e;

  /* ── Tints (10% opacity backgrounds) ───────────── */
  --tint-red:#F8D9D2;
  --tint-coral:#FAE0D6;
  --tint-orange:#FAE2C7;
  --tint-amber:#FDEBD0;
  --tint-yellow:#F8EBC2;
  --tint-green:#D8E8CD;
  --tint-teal:#CDE3E3;
  --tint-blue:#D6E3F0;
  --tint-indigo:#DCE0F5;
  --tint-purple:#E3D5EC;
  --tint-pink:#F3D9E2;

  /* ── Shadows ────────────────────────────────────── */
  --shadow-xs:0 1px 2px rgba(42,38,32,.06);
  --shadow-sm:0 2px 8px -2px rgba(42,38,32,.12);
  --shadow-paper:0 1px 0 rgba(42,38,32,.04), 0 12px 32px -16px rgba(42,38,32,.18);
  --shadow-card:0 1px 0 rgba(42,38,32,.05), 0 24px 60px -28px rgba(42,38,32,.22);
  --shadow:0 2px 0 rgba(42,38,32,.04), 0 24px 60px -28px rgba(42,38,32,.22);

  /* ── Border radius scale ────────────────────────── */
  /* xs:4  sm:8  md:12  default:16  lg:20  xl:24  pill:999 */
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius:16px;
  --radius-lg:20px;
  --radius-xl:24px;
  --radius-pill:999px;

  /* ── Typography ─────────────────────────────────── */
  --serif:"Fraunces","Cochin",Georgia,serif;
  --sans:"Inter Tight",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --hand:"Caveat",cursive;

  /* Type scale: 11 / 13 / 15 / 18 / 22 / 28 */
  --text-xs:11px;
  --text-sm:13px;
  --text-base:15px;
  --text-lg:18px;
  --text-xl:22px;
  --text-2xl:28px;

  /* Line heights */
  --leading-tight:1.2;
  --leading-snug:1.4;
  --leading-normal:1.5;
  --leading-relaxed:1.7;

  /* ── Spacing scale (4px base) ───────────────────── */
  /* 4 / 8 / 12 / 16 / 24 / 32 / 48 */

  /* ── Layout ─────────────────────────────────────── */
  --panel-w:480px;

  /* ── State colours ──────────────────────────────── */
  --bg:#f7f4ee;
  --panel:#ffffff;
  --muted:#6f665b;
  --accent:#4a4f9e;
  --accent-2:#e89a4a;
  --ok:#5fa86e;
  --warn:#a35a00;
  --error:#8a3e16;
  --error-tint:#fff3ee;
  --error-border:#f0c7b6;

  /* ── Subject ink colours (dark text on tint backgrounds) ───── */
  --t-science-ink:#1e6060;
  --t-maths-ink:#1a3d6e;
  --t-literacy-ink:#7a2a5e;
  --t-geo-ink:#2a5a38;
  --t-art-ink:#4a2a6a;
  --t-history-ink:#7a2e28;
  --t-pshe-ink:#7a5e1b;

  /* ── Semantic colour aliases (used by landing page + result page) ── */
  --amber:         #C9700A;  /* = --t-amber */
  --amber-bg:      #FEF3C7;
  --teal:          #4A9D9C;  /* = --t-teal */
  --teal-bg:       #D4EFEF;
  --teal-text:     #2D6E6D;
  --indigo:        #4A4F9E;  /* = --t-indigo */
  --indigo-dark:   #2D3180;
  --indigo-bg:     #E0E1F5;

  /* ── Textures ────────────────────────────────────── */
  /* Subtle check grid — same pattern as card thumbnails, slightly visible */
  --grid-lines:
    linear-gradient(rgba(42,38,32,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,38,32,.05) 1px, transparent 1px);
  --grid-size: 14px 14px;

  /* ── Focus ──────────────────────────────────────── */
  --focus-ring:#c8bfdc;
  --focus-ring-shadow:rgba(74,79,158,.08);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
html,body{min-height:100%;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  text-rendering:optimizeLegibility;
  line-height:1.5;
  overflow-x:hidden;
}
body.brightbud-builder{
  background-image:
    radial-gradient(circle at 12% 8%, rgba(63,124,184,.05), transparent 38%),
    radial-gradient(circle at 88% 14%, rgba(232,193,61,.07), transparent 40%),
    radial-gradient(circle at 6% 65%, rgba(200,70,58,.04), transparent 35%),
    radial-gradient(circle at 95% 75%, rgba(95,168,110,.05), transparent 40%);
}
::selection{background:var(--tint-yellow);color:var(--ink);}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#f6f1e7;
  padding:2px 6px;
  border-radius:8px;
}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
.page{max-width:1440px;margin:0 auto;padding:28px;}
.page-wrap{max-width:1680px;margin:0 auto;padding:24px;display:grid;grid-template-columns:1fr;gap:20px;min-height:100vh;}

/* Shared header */
.nav{
  position:sticky;top:0;z-index:60;backdrop-filter:blur(12px);
  background:rgba(251,247,240,.84);
  border-bottom:1px solid rgba(228,220,201,.66);
  min-height:70px;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:16px;}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:-.01em;}
.brand-mark{
  width:36px;height:36px;border-radius:var(--radius-sm);background:var(--beech);
  display:flex;align-items:flex-end;justify-content:space-between;padding:4px;gap:1.5px;
  box-shadow:inset 0 0 0 1.5px var(--beech-deep),0 4px 10px -4px rgba(201,168,120,.5);
  overflow:hidden;
}
.brand-mark i{width:3px;border-radius:1.5px 1.5px 0 0;display:block;font-style:normal;}
.brand-mark i:nth-child(1){background:var(--t-red);height:60%;}
.brand-mark i:nth-child(2){background:var(--t-orange);height:75%;}
.brand-mark i:nth-child(3){background:var(--t-yellow);height:88%;}
.brand-mark i:nth-child(4){background:var(--t-green);height:95%;}
.brand-mark i:nth-child(5){background:var(--t-teal);height:88%;}
.brand-mark i:nth-child(6){background:var(--t-blue);height:75%;}
.brand-mark i:nth-child(7){background:var(--t-purple);height:60%;}
.brand em{font-style:italic;color:var(--t-coral);font-variation-settings:"SOFT" 50,"WONK" 1;font-weight:500;}
.nav-links{display:flex;gap:36px;font-size:15px;color:var(--ink-soft);}
.nav-links a{transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{
  background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;
  font-size:14px;font-weight:500;transition:transform .15s ease,background .2s;
  display:inline-flex;align-items:center;
}
.nav-cta:hover{background:var(--t-indigo);transform:translateY(-1px);}

/* ── Hamburger button (mobile only) ── */
.nav-burger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:40px;height:40px;border-radius:var(--radius-sm);
  background:transparent;border:1.5px solid var(--line);
  cursor:pointer;flex:none;transition:background .15s;
}
.nav-burger:hover{background:var(--paper-2);}
.nav-burger span{
  display:block;width:18px;height:1.8px;border-radius:1px;
  background:var(--ink);transition:transform .22s ease,opacity .15s ease;
  transform-origin:center;
}
.nav-burger.open span:nth-child(1){transform:translateY(6.8px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg);}

/* ── Mobile nav drawer ── */
.nav-mobile{
  display:none;
  flex-direction:column;
  gap:0;
  background:rgba(251,247,240,.97);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
  overflow:hidden;
  max-height:0;
  transition:max-height .28s cubic-bezier(.4,0,.2,1);
}
.nav-mobile.open{max-height:420px;}
.nav-mobile-links{
  display:flex;flex-direction:column;
  padding:8px 20px 4px;
  gap:2px;
}
.nav-mobile-links a{
  display:block;padding:13px 0;
  font-size:15px;font-weight:500;color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  transition:color .15s;
}
.nav-mobile-links a:last-child{border-bottom:none;}
.nav-mobile-links a:hover{color:var(--ink);}
.nav-mobile-auth{
  padding:12px 20px 18px;
  display:flex;
}
.nav-mobile-auth .nav-cta{width:100%;justify-content:center;}

/* Shared utility surfaces */
.panel,.hero-card,.status-card,.card,.viewer,.builder,.step,.comp-card,.inspector,.access-card{
  background:var(--white);
  border:1.5px solid var(--line);
  box-shadow:var(--shadow-card);
}
.panel,.viewer,.access-card{border-radius:var(--radius-lg);}
.card,.hero-card,.status-card,.step,.builder{border-radius:var(--radius-xl);}
.hint,.status,.error,.note,.insp-desc,.derived,.auth-box{
  border-radius:var(--radius-md);
}
.hint{background:#f4f6ff;border:1px solid #d8ddff;color:#3e458f;}
.status{background:#eef7ef;border:1px solid #d5e9d8;color:#2f6c3c;display:none;}
.error{background:var(--error-tint);border:1px solid var(--error-border);color:var(--error);display:none;white-space:pre-wrap;}
.note{background:var(--tint-yellow);border:1px solid #efd9a7;color:var(--t-pshe-ink);}
.sub,.muted,.meta{color:var(--muted);font-size:14px;}
.success-inline{color:#2f6c3c;font-size:12px;margin-top:8px;}

action, .toolbar{display:flex;flex-wrap:wrap;gap:10px;}
.btn,.file-btn,
button.primary,button.secondary,button.ghost,button.small{
  appearance:none;border:none;border-radius:999px;font:inherit;cursor:pointer;transition:.16s ease;
}
.btn:hover,.file-btn:hover,button.primary:hover,button.secondary:hover,button.ghost:hover,button.small:hover{transform:translateY(-1px);}
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:999px;font-size:13px;font-weight:500;
  border:1.5px solid var(--line);background:var(--white);color:var(--ink-soft);transition:all .15s ease;white-space:nowrap;
}
.btn:hover{border-color:var(--ink-mute);color:var(--ink);}
.btn svg{width:13px;height:13px;flex:none;}
.btn-primary,.primary{background:var(--ink);color:var(--white);border-color:var(--ink);}
.btn-primary:hover,.primary:hover{background:var(--t-indigo);border-color:var(--t-indigo);color:var(--white);}
.secondary{background:var(--white);border:1px solid var(--line);color:var(--ink);padding:11px 16px;}
.ghost{background:#f6f1e7;color:var(--ink);padding:11px 16px;}
.small{padding:8px 12px;font-size:12px;}

h1{margin:0 0 8px;font-family:var(--serif);font-size:44px;line-height:1.02;letter-spacing:-.03em;font-weight:500;}
h1 em{font-style:italic;color:var(--t-coral);font-weight:400;}
h2{font-size:16px;line-height:1.2;margin:22px 0 10px;letter-spacing:-.01em;}
label{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;}
input[type="text"],input[type="password"],input[type="url"],textarea,select{
  width:100%;border-radius:var(--radius-md);border:1px solid var(--line);padding:12px 14px;font:inherit;color:var(--ink);background:var(--white);outline:none;
}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--focus-ring);box-shadow:0 0 0 4px var(--focus-ring-shadow);}
input:disabled,textarea:disabled,select:disabled{opacity:0.5;cursor:not-allowed;background:var(--paper-3);}
textarea.code{min-height:320px;resize:vertical;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
textarea.small-code{min-height:160px;resize:vertical;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.stack{display:grid;gap:10px;}
.checkbox{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);margin-top:10px;}
.checkbox input{margin-top:2px;}
.dropzone{border:2px dashed #d8cdb9;border-radius:18px;padding:18px;background:#fbf8f2;text-align:center;margin-bottom:14px;transition:.18s ease;}
.dropzone.dragover{border-color:var(--accent);background:#f4f6ff;}
.dropzone strong{display:block;font-size:15px;margin-bottom:4px;}
.dropzone span{color:var(--muted);font-size:13px;}
.dropzone input{display:none;}
.viewer{overflow:hidden;min-height:80vh;}
.viewer-top{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fcfaf6;}
.viewer-top strong{font-size:14px;}
.viewer-top span{font-size:12px;color:var(--muted);}
iframe{width:100%;height:calc(100vh - 110px);border:0;display:block;background:var(--white);}
.derived{background:#fbf8f2;border:1px solid var(--line);padding:12px;}
.derived pre,.auth-box pre{margin:0;white-space:pre-wrap;word-break:break-word;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;max-height:300px;overflow:auto;color:var(--ink-soft);}
.section{margin-top:26px;}

/* Builder page */
.builder-bg{padding:56px 0 96px;position:relative;}
.ornament{position:absolute;pointer-events:none;}
.o1{top:60px;left:5%;--r:-12deg;animation:float 8s ease-in-out infinite;}
.o2{top:130px;right:6%;--r:14deg;animation:float 9s ease-in-out infinite reverse;}
.o3{bottom:80px;left:7%;--r:8deg;animation:float 11s ease-in-out infinite;}
.o4{bottom:50px;right:8%;--r:-6deg;animation:float 10s ease-in-out infinite reverse;}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-8px) rotate(var(--r,0deg));}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-indigo);font-weight:500;padding:6px 14px;border-radius:999px;background:var(--tint-blue);}
.eyebrow .dot{width:6px;height:6px;background:var(--t-blue);border-radius:50%;}
.hero-head{text-align:center;max-width:740px;margin:28px auto 8px;}
.hero-head h1{font-family:var(--serif);font-weight:400;font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 144;font-size:clamp(40px,5.6vw,64px);line-height:1.05;letter-spacing:-.025em;margin:0 0 18px;color:var(--ink);}
.hero-head h1 em{font-style:italic;color:var(--t-coral);font-weight:300;}
.underline{position:relative;display:inline-block;}
.underline::after{content:"";position:absolute;left:-2%;right:-2%;bottom:6px;height:12px;background:linear-gradient(to right,var(--t-red) 0% 16%, var(--t-orange) 16% 33%, var(--t-yellow) 33% 50%, var(--t-green) 50% 66%, var(--t-blue) 66% 83%, var(--t-purple) 83% 100%);opacity:.55;border-radius:6px;z-index:-1;transform:rotate(-1deg);}
.hero-head p{font-size:18px;color:var(--ink-soft);max-width:560px;margin:0 auto;}
.lapbook-info{max-width:580px;margin:22px auto 0;text-align:center;}
.lapbook-info summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-mute);padding:6px 12px;border-radius:999px;transition:color .2s,background .2s;}
.lapbook-info summary::-webkit-details-marker{display:none;}
.lapbook-info summary:hover{color:var(--ink);background:var(--paper-2);}
.lapbook-info summary .chev{transition:transform .25s ease;width:12px;height:12px;}
.lapbook-info[open] summary .chev{transform:rotate(180deg);}
.lapbook-info .info-card{margin-top:14px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;text-align:left;font-size:15px;color:var(--ink-soft);box-shadow:var(--shadow-paper);animation:slideDown .35s ease;position:relative;overflow:hidden;}
.lapbook-info .info-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(to right,var(--t-red),var(--t-orange),var(--t-yellow),var(--t-green),var(--t-blue),var(--t-purple));}
.lapbook-info .info-card strong{color:var(--ink);font-weight:500;}
.lapbook-info .info-card .icons{display:flex;gap:14px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);}
.lapbook-info .icons div{flex:1;text-align:center;font-size:13px;color:var(--ink-mute);}
.lapbook-info .icons div span{display:block;font-size:22px;margin-bottom:4px;}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.builder{margin-top:44px;padding:40px 44px 36px;position:relative;}
.builder::before,.builder::after{content:"";position:absolute;top:-12px;width:70px;height:22px;border-radius:2px;box-shadow:0 2px 6px rgba(42,38,32,.06);}
.builder::before{left:60px;background:rgba(232,193,61,.55);transform:rotate(-3deg);}
.builder::after{right:60px;background:rgba(74,157,156,.45);transform:rotate(2deg);}
.field{margin-bottom:28px;}
.field-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.field-label .label{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--ink);letter-spacing:-.005em;}
.field-label .hint{font-family:var(--hand);font-size:17px;color:var(--ink-mute);background:none;border:none;padding:0;}
.input{width:100%;border:1.5px solid var(--line);background:var(--paper);border-radius:var(--radius);padding:18px 20px;font-size:16px;color:var(--ink);font-family:var(--sans);transition:border-color .2s,background .2s,box-shadow .2s;}
.input::placeholder{color:var(--ink-mute);}
.input:focus{outline:none;border-color:var(--t-teal);background:var(--white);box-shadow:0 0 0 4px var(--tint-teal);}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.chip{font-size:14px;padding:8px 14px 8px 28px;border-radius:999px;background:var(--paper-2);color:var(--ink-soft);border:1px solid transparent;transition:all .18s ease;position:relative;}
.chip::before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--c,var(--t-blue));}
.chip:nth-child(1){--c:var(--t-red);} .chip:nth-child(2){--c:var(--t-green);} .chip:nth-child(3){--c:var(--t-indigo);} .chip:nth-child(4){--c:var(--t-orange);} .chip:nth-child(5){--c:var(--t-teal);} .chip:nth-child(6){--c:var(--t-yellow);}
.chip:hover{background:var(--white);color:var(--ink);border-color:var(--line);transform:translateY(-1px);box-shadow:0 4px 10px -6px rgba(42,38,32,.2);}
.ages{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.age{--age-c:var(--t-blue);--age-tint:var(--tint-blue);position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);padding:20px 22px;text-align:left;transition:all .2s ease;overflow:hidden;}
.age::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--age-c);opacity:.35;transition:opacity .2s,width .2s;}
.age:hover{transform:translateY(-2px);border-color:var(--age-c);}
.age:hover::before,.age.selected::before{opacity:1;width:6px;}
.age.selected{background:var(--age-tint);border-color:var(--age-c);box-shadow:0 0 0 4px color-mix(in srgb,var(--age-c) 18%,transparent);}
.age:nth-child(1){--age-c:var(--t-pink);--age-tint:var(--tint-pink);} .age:nth-child(2){--age-c:var(--t-orange);--age-tint:var(--tint-orange);} .age:nth-child(3){--age-c:var(--t-teal);--age-tint:var(--tint-teal);} .age:nth-child(4){--age-c:var(--t-purple);--age-tint:var(--tint-purple);}
.age .badge{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);background:var(--white);display:grid;place-items:center;transition:all .2s;}
.age.selected .badge{background:var(--age-c);border-color:var(--age-c);} .age.selected .badge svg{opacity:1;}
.age .badge svg{width:12px;height:12px;opacity:0;transition:opacity .2s;}
.age-title{font-family:var(--serif);font-weight:500;font-size:18px;margin-bottom:4px;letter-spacing:-.01em;}
.age-meta{font-size:13px;color:var(--ink-mute);}
.age-icon{width:32px;height:32px;margin-bottom:12px;color:var(--age-c);}
.support-section{background:linear-gradient(135deg,#FBF7F0 0%,#FEFCF7 100%);border:1.5px solid var(--line);border-radius:var(--radius);padding:22px 24px;transition:border-color .2s;}
.support-section:hover{border-color:var(--ink-mute);}
.support-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;cursor:pointer;user-select:none;}
.support-header .left{display:flex;gap:14px;align-items:flex-start;}
.support-header .heart-bg{flex:none;width:38px;height:38px;border-radius:12px;background:var(--tint-pink);display:grid;place-items:center;color:var(--t-red);}
.support-header .heart-bg svg{width:18px;height:18px;}
.support-header .text-block .title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.support-header .text-block .title{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--ink);letter-spacing:-.005em;}
.support-header .text-block .pill{font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--tint-green);color:#4a7d57;font-weight:500;}
.support-header .text-block .desc{font-size:14px;color:var(--ink-soft);margin-top:3px;}
.support-header .chev{flex:none;width:28px;height:28px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;transition:transform .3s ease,background .2s;}
.support-section.open .chev{transform:rotate(180deg);background:var(--tint-pink);border-color:var(--t-rose);}
.support-header .chev svg{width:12px;height:12px;}
.support-body{max-height:0;overflow:hidden;transition:max-height .4s ease,margin .3s ease,padding .3s ease;}
.support-section.open .support-body{max-height:800px;margin-top:22px;padding-top:22px;border-top:1px dashed var(--line);}
.support-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.support-opt{--c:var(--t-blue);--tint:var(--tint-blue);position:relative;text-align:left;background:var(--white);border:1.5px solid var(--line);border-radius:var(--radius-md);padding:14px 16px 14px 50px;transition:all .2s ease;overflow:hidden;}
.support-opt .icon{position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:8px;background:var(--tint);display:grid;place-items:center;color:var(--c);}
.support-opt .icon svg{width:14px;height:14px;}
.support-opt .opt-title{font-weight:500;font-size:14px;color:var(--ink);margin-bottom:2px;display:flex;align-items:center;gap:6px;}
.support-opt .opt-desc{font-size:13px;color:var(--ink-mute);line-height:1.4;}
.support-opt .check{position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);background:var(--white);display:grid;place-items:center;transition:all .2s;}
.support-opt .check svg{width:10px;height:10px;opacity:0;transition:opacity .2s;}
.support-opt:hover{border-color:var(--c);transform:translateY(-1px);} .support-opt.active{background:var(--tint);border-color:var(--c);} .support-opt.active .check{background:var(--c);border-color:var(--c);} .support-opt.active .check svg{opacity:1;}
.support-opt:nth-child(1){--c:var(--t-purple);--tint:var(--tint-purple);} .support-opt:nth-child(2){--c:var(--t-blue);--tint:var(--tint-blue);} .support-opt:nth-child(3){--c:var(--t-orange);--tint:var(--tint-orange);} .support-opt:nth-child(4){--c:var(--t-green);--tint:var(--tint-green);} .support-opt:nth-child(5){--c:var(--t-coral);--tint:var(--tint-red);} .support-opt:nth-child(6){--c:var(--t-teal);--tint:var(--tint-teal);}
.support-extras{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.extra{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.extra-label{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink-soft);margin-bottom:10px;font-weight:500;}
.extra-label b{color:var(--t-indigo);font-weight:600;}
.seg{display:flex;gap:4px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px;}
.seg button{flex:1;padding:6px 8px;font-size:13px;color:var(--ink-soft);border-radius:7px;transition:all .15s;}
.seg button.active{background:var(--t-indigo);color:var(--white);box-shadow:0 2px 4px rgba(74,79,158,.3);} .seg button:not(.active):hover{background:var(--paper-2);color:var(--ink);}
.generate{margin-top:28px;width:100%;min-height:64px;background:var(--ink);color:var(--paper);border-radius:var(--radius);font-size:16.5px;font-weight:500;letter-spacing:-.005em;display:grid;place-items:center;padding:0 24px;transition:box-shadow .2s ease;position:relative;overflow:hidden;isolation:isolate;text-align:center;}
.generate-progress-fill{position:absolute;inset:0 auto 0 0;width:0%;background:linear-gradient(135deg,var(--t-indigo),var(--t-teal));transition:width .45s linear;z-index:0;}
.generate-label{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;text-align:center;pointer-events:none;padding:18px 0;line-height:1.2;}
.generate:hover{box-shadow:0 14px 30px -12px rgba(42,38,32,.4);}
.generate-meta{text-align:center;margin-top:14px;font-size:13px;color:var(--ink-mute);} .generate-meta b{color:var(--t-green);font-weight:600;}
.trust{margin-top:64px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center;}
.trust-item .num{font-family:var(--serif);font-size:32px;font-weight:400;font-variation-settings:"SOFT" 50,"WONK" 1;color:var(--ink);letter-spacing:-.02em;line-height:1;}
.trust-item:nth-child(1) .num em{color:var(--t-red);} .trust-item:nth-child(2) .num em{color:var(--t-green);} .trust-item:nth-child(3) .num em{color:var(--t-blue);} .trust-item:nth-child(4) .num em{color:var(--t-purple);} .trust-item .num em{font-style:italic;font-weight:300;}
.trust-item .label{margin-top:6px;font-size:13px;color:var(--ink-mute);letter-spacing:.02em;}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:48px;}
.section-head .left{max-width:540px;}
.section-eyebrow{font-family:var(--hand);font-size:22px;color:var(--t-coral);margin-bottom:6px;}
.section-head h2{margin:0;font-family:var(--serif);font-weight:400;font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 144;font-size:clamp(32px,4vw,46px);line-height:1.08;letter-spacing:-.022em;}
.section-head h2 em{font-style:italic;color:var(--t-teal);font-weight:300;}
.section-head .right{font-size:15px;color:var(--ink-soft);max-width:320px;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.step{padding:32px 28px;position:relative;transition:transform .25s ease,box-shadow .25s ease;overflow:hidden;}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;}
.step:nth-child(1)::before{background:linear-gradient(to right,var(--t-red),var(--t-orange));} .step:nth-child(2)::before{background:linear-gradient(to right,var(--t-yellow),var(--t-green));} .step:nth-child(3)::before{background:linear-gradient(to right,var(--t-teal),var(--t-purple));}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);}
.step .step-num{font-family:var(--serif);font-style:italic;font-size:38px;color:var(--paper-3);line-height:1;position:absolute;top:28px;right:28px;}
.step .step-icon{width:48px;height:48px;border-radius:var(--radius-md);display:grid;place-items:center;margin-bottom:22px;}
.step:nth-child(1) .step-icon{background:var(--tint-orange);color:var(--t-red);} .step:nth-child(2) .step-icon{background:var(--tint-green);color:var(--t-green);} .step:nth-child(3) .step-icon{background:var(--tint-purple);color:var(--t-purple);}
.step .step-icon svg{width:22px;height:22px;}
.step h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:0 0 10px;letter-spacing:-.012em;}
.step p{margin:0;font-size:15px;color:var(--ink-soft);}
.foot{background:var(--paper-2);border-top:1px solid var(--line);padding:48px 0 32px;position:relative;overflow:hidden;}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(to right,var(--t-red),var(--t-orange),var(--t-yellow),var(--t-green),var(--t-teal),var(--t-blue),var(--t-purple));}
.foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;}
.foot .brand{font-size:19px;}
.foot .small{font-size:13px;color:var(--ink-mute);}
.foot-links{display:flex;gap:24px;font-size:14px;color:var(--ink-soft);}

/* Result page */
.topic-head{border-bottom:1px solid var(--line);padding:26px 0 22px;}
.topic-head .inner{max-width:1640px;margin:0 auto;padding:0 28px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.topic-left{display:flex;gap:16px;align-items:flex-start;}
.topic-thumb{flex:none;width:72px;height:72px;border-radius:16px;background:linear-gradient(135deg,var(--t-green),var(--t-teal));display:grid;place-items:center;color:var(--white);box-shadow:0 10px 24px -10px rgba(95,168,110,.4);position:relative;overflow:hidden;}
.topic-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.22),transparent 60%);}
.topic-thumb svg{width:36px;height:36px;position:relative;z-index:1;}
.topic-text .eyebrow{font-family:var(--hand);font-size:17px;color:var(--t-coral);margin-bottom:3px;padding:0;background:none;text-transform:none;letter-spacing:0;}
.topic-text h1{font-family:var(--serif);font-weight:400;font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 144;font-size:clamp(24px,3vw,36px);line-height:1.05;letter-spacing:-.022em;margin-bottom:7px;}
.topic-text h1 em{font-style:italic;color:var(--t-coral);font-weight:300;}
.topic-stats{display:flex;align-items:center;gap:13px;font-size:13px;color:var(--ink-soft);flex-wrap:wrap;}
.topic-stats .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-mute);}
.topic-stats b{color:var(--ink);}
.prog-track{width:76px;height:5px;border-radius:3px;background:var(--paper-3);overflow:hidden;display:inline-block;vertical-align:middle;}
.prog-fill{height:100%;background:linear-gradient(to right,var(--t-yellow),var(--t-green));width:25%;border-radius:3px;}
.topic-right{display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
.filters-row{max-width:1640px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);}
.filters{display:flex;gap:5px;flex-wrap:wrap;}
.fchip{padding:6px 13px;border-radius:999px;font-size:13px;color:var(--ink-soft);border:1px solid transparent;background:transparent;transition:all .15s;display:inline-flex;align-items:center;gap:5px;}
.fchip:hover{background:var(--paper-2);color:var(--ink);} .fchip.active{background:var(--ink);color:var(--paper);}
.fchip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring);} .fchip .sw{width:7px;height:7px;border-radius:50%;flex:none;} .fchip .ct{font-size:11px;opacity:.65;} .fchip.active .ct{opacity:.8;}
.page-body{max-width:1640px;margin:0 auto;padding:22px 28px 100px;display:grid;grid-template-columns:1fr 0px;gap:22px;align-items:start;transition:grid-template-columns .38s cubic-bezier(.22,.9,.36,1);}
.page-body.panel-open{grid-template-columns:1fr var(--panel-w);}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;}
#cardGrid.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.comp-card{border-radius:var(--radius-lg);overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .2s;cursor:pointer;display:flex;flex-direction:column;position:relative;}
.comp-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px -22px rgba(42,38,32,.26);} .comp-card.selected{border-color:var(--t-orange);box-shadow:0 0 0 3px rgba(232,154,74,.18),0 18px 44px -22px rgba(42,38,32,.22);} .comp-card.selected .card-title{color:var(--t-orange);} .comp-card.selected::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--t-orange);border-radius:var(--radius-lg) 0 0 20px;z-index:2;}
.comp-card.validated .validated-badge{display:grid;}
.validated-badge{display:none;position:absolute;top:14px;right:14px;z-index:5;width:28px;height:28px;border-radius:50%;background:var(--t-green);place-items:center;box-shadow:0 4px 10px -3px rgba(95,168,110,.5),0 0 0 3px rgba(255,255,255,.95);animation:tickPop .3s cubic-bezier(.34,1.56,.64,1);} .validated-badge svg{width:14px;height:14px;}
@keyframes tickPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.comp-card .thumb img{transition:transform .3s ease;}
.thumb{height:182px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);}
.thumb::before,.insp-preview::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(42,38,32,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(42,38,32,.022) 1px,transparent 1px);background-size:14px 14px;pointer-events:none;z-index:0;}
.thumb > *, .insp-preview > *{position:relative;z-index:1;}
.bg-teal{background:linear-gradient(135deg,var(--tint-teal),#daeaea);} .bg-blue{background:linear-gradient(135deg,var(--tint-blue),#dce8f5);} .bg-pink{background:linear-gradient(135deg,var(--tint-pink),#f6d8e5);} .bg-yellow{background:linear-gradient(135deg,var(--tint-yellow),#f7e8c8);} .bg-green{background:linear-gradient(135deg,var(--tint-green),#d4e7c8);} .bg-purple{background:linear-gradient(135deg,var(--tint-purple),#e4d8ef);} .bg-orange{background:linear-gradient(135deg,var(--tint-orange),#f5dfc7);} .bg-red{background:linear-gradient(135deg,var(--tint-red),#f6d8d3);}
.card-body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;gap:7px;}
.card-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.pill{font-size:11px;font-weight:500;letter-spacing:.04em;padding:2px 8px;border-radius:999px;}
.pill-type{font-size:11px;font-weight:500;letter-spacing:.02em;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-mute);}
.p-science{background:var(--tint-teal);color:var(--t-science-ink)}.p-maths{background:var(--tint-blue);color:var(--t-maths-ink)}.p-literacy{background:var(--tint-pink);color:var(--t-literacy-ink)}.p-geo{background:var(--tint-green);color:var(--t-geo-ink)}.p-art{background:var(--tint-purple);color:var(--t-art-ink)}.p-history{background:var(--tint-red);color:var(--t-history-ink)}.p-pshe{background:var(--tint-yellow);color:var(--t-pshe-ink)}
.diff{display:inline-flex;align-items:center;gap:2.5px;}.diff .d{width:5px;height:5px;border-radius:50%;background:var(--paper-3);}.diff .d.on{background:var(--t-orange);}
.t-meta{font-size:12px;color:var(--ink-mute);display:inline-flex;align-items:center;gap:3px;margin-left:auto;}.t-meta svg{width:10px;height:10px;}
.card-title{font-family:var(--serif);font-weight:500;font-size:16px;letter-spacing:-.01em;line-height:1.2;transition:color .2s;}
.card-desc{font-size:13px;color:var(--ink-soft);line-height:1.5;}
.card-confidence{font-size:12px;color:var(--ink-mute);line-height:1.4;font-style:italic;margin-top:4px;}
.curr-tag{display:flex;align-items:flex-start;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:11px;color:var(--ink-soft);line-height:1.4;}.curr-tag svg{width:10px;height:10px;flex:none;margin-top:1px;color:var(--t-indigo);}
.card-foot{display:flex;align-items:center;gap:5px;margin-top:auto;padding-top:11px;border-top:1px dashed var(--line);}
.mini-btn{padding:5px 11px;border-radius:999px;font-size:12px;color:var(--ink-soft);transition:all .15s;display:inline-flex;align-items:center;gap:4px;}
.mini-btn:hover{background:var(--paper-2);color:var(--ink);} .mini-btn svg{width:10px;height:10px;} .mini-btn.ok{color:var(--t-green);} .mini-btn.ok:hover{background:var(--tint-green);}
.inspector{position:sticky;top:72px;align-self:start;overflow:hidden;max-height:calc(100vh - 90px);display:flex;flex-direction:column;width:var(--panel-w);opacity:0;transform:translateX(24px);transition:opacity .35s cubic-bezier(.22,.9,.36,1),transform .35s cubic-bezier(.22,.9,.36,1);pointer-events:none;}
.inspector.visible{opacity:1;transform:translateX(0);pointer-events:auto;}
.insp-preview{height:210px;position:relative;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;}
.insp-close{position:absolute;top:11px;right:11px;z-index:3;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-soft);transition:all .18s;backdrop-filter:blur(4px);}
.insp-close:hover{background:var(--white);color:var(--ink);transform:rotate(90deg);} .insp-close svg{width:12px;height:12px;}
.insp-scroll{overflow-y:auto;flex:1;} .insp-scroll::-webkit-scrollbar{width:4px;} .insp-scroll::-webkit-scrollbar-thumb{background:var(--paper-3);border-radius:2px;}
.insp-body{padding:20px 22px 28px;}
.insp-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.insp-title{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:-.015em;line-height:1.12;margin-bottom:20px;}
.insp-sub{font-size:13px;color:var(--ink-mute);display:flex;align-items:center;gap:8px;margin-bottom:14px;}.insp-sub svg{width:10px;height:10px;flex:none;}
.curr-banner{background:none;border:none;border-radius:0;padding:0;margin-bottom:18px;font-size:13px;line-height:1.5;}
.curr-banner-hd{display:none;} /* label provided by parent section */
.curr-banner-body{display:flex;flex-direction:column;gap:0;}
.curr-link{background:none;border:none;border-radius:0;padding:12px 0;border-top:1px solid var(--line);}
.curr-link:first-child{border-top:none;padding-top:0;}
.curr-link-hd{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:5px;}
.curr-link-subj{font-size:11px;font-weight:700;color:var(--t-indigo);text-transform:uppercase;letter-spacing:.05em;}
.curr-link-strand{font-size:13px;color:var(--ink);font-weight:600;letter-spacing:-.01em;}
.curr-link-strand::before{content:"·";margin-right:6px;color:var(--ink-mute);}
.curr-link-objs{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;}
.curr-link-objs li{font-size:13px;color:var(--ink-soft);line-height:1.5;padding-left:12px;position:relative;}
.curr-link-objs li::before{content:"—";position:absolute;left:0;color:var(--ink-mute);}
.insp-desc{font-size:14px;color:var(--ink-soft);line-height:1.6;padding:13px 15px;background:var(--paper);border:1px solid var(--line);margin-bottom:20px;}
.sec-head{
  font-family:var(--serif);
  font-size:18px;font-weight:700;
  color:var(--ink);letter-spacing:-.015em;
  margin:0 0 14px;
  display:flex;align-items:center;gap:8px;
}
.sec-head::before{display:none;}
.insp-section{margin-bottom:20px;}
.insp-section p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.5;}
.insp-foot{padding:14px 20px;border-top:1px solid var(--line);background:var(--paper);display:flex;gap:7px;flex-wrap:wrap;flex:none;}
.insp-foot .btn{flex:1;justify-content:center;font-size:13px;} .insp-foot .btn-primary{flex:1.5;}
.parent-guide-block{margin-top:6px;margin-bottom:20px;}
.pg-section{margin-bottom:18px;}.pg-section:last-child{margin-bottom:0;}
.pg-heading{
  font-family:var(--serif);
  font-size:18px;font-weight:700;
  color:var(--ink);letter-spacing:-.015em;
  margin-bottom:12px;
}
.pg-heading::before{display:none;}
.pg-text{font-size:14px;color:var(--ink-soft);line-height:1.6;margin-bottom:0;}
.pg-steps{margin:0;padding:0;list-style:none;}
.pg-steps li{display:flex;gap:12px;margin-bottom:10px;font-size:14px;color:var(--ink-soft);line-height:1.5;}.pg-steps li:last-child{margin-bottom:0;}
.pg-step-num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--tint-teal);color:var(--t-teal);display:grid;place-items:center;font-size:13px;font-weight:600;font-style:italic;font-family:var(--serif);}
.pg-vocab{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}.pg-vocab-tag{font-size:12px;padding:5px 12px;border-radius:999px;background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--line);}
.pg-prompts{background:var(--tint-yellow);border-left:3px solid var(--t-yellow);border-radius:0 8px 8px 0;padding:14px 16px;margin-top:8px;}.pg-prompts p{font-size:14px;line-height:1.6;color:var(--ink);font-style:italic;margin:0 0 8px;}.pg-prompts p:last-child{margin:0;}
.loading-overlay{display:flex;align-items:center;justify-content:center;min-height:300px;color:var(--ink-mute);font-size:14px;gap:10px;}
.loading-spinner{width:20px;height:20px;border:2.5px solid var(--paper-3);border-top-color:var(--t-teal);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.modal-overlay{position:fixed;inset:0;background:rgba(42,38,32,.5);z-index:100;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);animation:fadeIn .22s ease;}
.modal-overlay.visible{display:flex;} @keyframes fadeIn{from{opacity:0}to{opacity:1}}
#feedbackModal{z-index:200;}
.modal{background:var(--white);border-radius:var(--radius-lg);padding:32px;max-width:560px;width:90%;box-shadow:0 24px 60px -16px rgba(42,38,32,.35);animation:modalPop .32s cubic-bezier(.22,.9,.36,1);} @keyframes modalPop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-icon{width:52px;height:52px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--t-green),var(--t-teal));display:grid;place-items:center;margin-bottom:18px;box-shadow:0 8px 20px -8px rgba(95,168,110,.5);} .modal-icon svg{width:24px;height:24px;color:var(--white);}
.modal h3{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:-.015em;margin-bottom:10px;line-height:1.2;}.modal p{color:var(--ink-soft);font-size:14px;line-height:1.5;margin-bottom:14px;}
.modal .count-box{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.modal .count-num{font-family:var(--serif);font-size:28px;font-weight:500;color:var(--t-green);line-height:1;}
.modal .count-label{font-size:13px;color:var(--ink-soft);line-height:1.4;}.modal .count-label b{color:var(--ink);font-weight:600;}
.modal-foot{display:flex;gap:10px;}.modal-foot .btn{flex:1;justify-content:center;padding:11px 16px;}

/* ── Modal close X button ── */
.modal-x-btn{
  position:absolute;top:16px;right:16px;
  width:30px;height:30px;
  border-radius:50%;border:none;
  background:var(--paper-2);
  display:grid;place-items:center;
  cursor:pointer;color:var(--ink-mute);
  transition:background .15s,color .15s;
}
.modal-x-btn:hover{background:var(--paper-3);color:var(--ink);}
.modal-x-btn svg{width:14px;height:14px;}
.modal{position:relative;}

/* ── Tasks modal ── */
.tasks-modal{max-width:480px;}
.tm-checklist{margin-top:4px;}
.tm-checklist .pt-check{
  padding:10px 8px;
  border-radius:var(--radius-sm);
  align-items:center;
  gap:12px;
}
.tm-checklist .pt-check-text strong{font-size:14px;}
.tm-checklist .pt-check-text span{font-size:12px;}
.tm-shortcut{
  margin-left:auto;
  flex-shrink:0;
  background:none;
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .15s,color .15s;
}
.tm-shortcut:hover{border-color:var(--ink-mute);color:var(--ink);}

/* ── Resources modal (redesign) ── */
.rm-panel{
  max-width:680px;width:92%;
  padding:0;
  overflow:hidden;
  max-height:88vh;
  display:flex;
  flex-direction:column;
}
.rm-header{
  display:flex;align-items:center;gap:16px;
  padding:22px 28px 18px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.rm-header-icon{
  width:44px;height:44px;border-radius:var(--radius-md);
  background:linear-gradient(135deg,rgba(139,92,168,.12),rgba(139,92,168,.05));
  display:grid;place-items:center;flex-shrink:0;
}
.rm-header-icon svg{width:21px;height:21px;color:var(--t-purple);}
.rm-header h3{font-family:var(--serif);font-size:19px;font-weight:500;margin:0 0 2px;letter-spacing:-.01em;line-height:1.2;}
.rm-header p{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.4;}
.rm-body{
  overflow-y:auto;
  padding:22px 28px 28px;
  display:flex;flex-direction:column;gap:24px;
}
.rm-section{}
.rm-section-label{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.rm-section-label svg{width:13px;height:13px;flex:none;}
/* Cover row */
.rm-cover-row{display:flex;gap:20px;align-items:flex-start;}
.rm-cover-thumb{
  width:108px;height:144px;flex-shrink:0;
  border-radius:var(--radius-sm);border:1.5px solid var(--line);
  overflow:hidden;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;
}
.rm-cover-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.rm-cover-thumb-btn{
  display:block;width:100%;height:100%;
  border:none;background:none;padding:0;margin:0;
  cursor:pointer;position:relative;overflow:hidden;
}
.rm-cover-thumb-zoom{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.38);color:var(--white);
  opacity:0;transition:opacity .18s;
  pointer-events:none;
}
.rm-cover-thumb-btn:hover .rm-cover-thumb-zoom{opacity:1;}
.rm-cover-placeholder{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--ink-mute);padding:12px;text-align:center;
}
.rm-cover-placeholder svg{width:26px;height:26px;opacity:.4;}
.rm-cover-placeholder span{font-size:11px;line-height:1.4;opacity:.7;}
.rm-cover-cta{flex:1;min-width:0;padding-top:4px;}
.rm-cover-hint{font-size:13px;color:var(--ink-soft);margin:0 0 14px;line-height:1.5;}
.rm-cover-btns{display:flex;flex-direction:column;gap:8px;max-width:220px;}
/* Action list */
.rm-action-list{display:flex;flex-direction:column;gap:10px;}
.rm-action-item{
  display:flex;align-items:center;gap:14px;
  padding:13px 16px;
  border:1.5px solid var(--line);border-radius:var(--radius-md);
  background:var(--paper);transition:border-color .15s;
}
.rm-action-item:not(.rm-action-locked):hover{border-color:var(--ink-mute);}
.rm-action-locked{opacity:.6;}
.rm-action-icon{
  width:40px;height:40px;border-radius:11px;
  display:grid;place-items:center;flex-shrink:0;
}
.rm-action-icon svg{width:18px;height:18px;}
.rm-icon-blue{background:var(--tint-blue);color:var(--t-blue);}
.rm-icon-green{background:var(--tint-green);color:var(--t-green);}
.rm-icon-orange{background:var(--tint-orange);color:var(--t-orange);}
.rm-icon-purple{background:var(--tint-purple);color:var(--t-purple);}
.rm-action-body{flex:1;min-width:0;}
.rm-action-body h5{font-size:14px;font-weight:700;margin:0 0 2px;color:var(--ink);display:flex;align-items:center;gap:8px;}
.rm-action-body p{font-size:12px;color:var(--ink-soft);margin:0;line-height:1.4;}
/* Buttons */
.rm-btn{
  display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 16px;
  border-radius:var(--radius-sm);border:1.5px solid var(--line);
  background:var(--white);font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);
  cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s;flex-shrink:0;
}
.rm-btn:hover:not(:disabled){background:var(--paper-2);border-color:var(--ink-mute);}
.rm-btn:disabled{opacity:.4;cursor:default;}
.rm-btn svg{width:14px;height:14px;flex:none;}
.rm-btn-primary{background:var(--ink);color:var(--white);border-color:var(--ink);}
.rm-btn-primary:hover:not(:disabled){opacity:.85;background:var(--ink);}
/* Coming soon */
.rm-section-dim .rm-section-label{opacity:.65;}
.rm-coming-desc{font-size:13px;color:var(--ink-mute);margin:0 0 14px;line-height:1.5;}
.rm-badge-soon{
  margin-left:auto;flex-shrink:0;
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper-3);color:var(--ink-mute);border-radius:5px;padding:2px 7px;
}
.rm-assets-ghost{display:flex;gap:10px;}
.rm-ghost-card{
  flex:1;height:72px;border-radius:12px;
  background:linear-gradient(90deg,var(--paper-2) 25%,var(--paper-3) 50%,var(--paper-2) 75%);
  background-size:200% 100%;animation:rmShimmer 1.8s linear infinite;
}
@keyframes rmShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.modal-warn{background:var(--tint-yellow);border:1px solid #e8c477;border-radius:var(--radius-sm);padding:10px 13px;font-size:13px;color:#7a5e1b;margin-bottom:18px;display:flex;gap:8px;align-items:flex-start;}.modal-warn svg{width:14px;height:14px;flex:none;margin-top:2px;color:#b88722;}
#debug-block{margin:20px 28px;padding:16px 18px;background:#FBF7F0;border:1.5px dashed var(--line);border-radius:var(--radius-md);font-family:monospace;font-size:12px;color:var(--ink-soft);max-width:1640px;}
#debug-block h4{font-family:var(--sans);font-weight:600;color:var(--ink);margin-bottom:8px;font-size:13px;} #debug-block pre{white-space:pre-wrap;overflow-x:auto;max-height:300px;overflow-y:auto;}
.action-bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);border-radius:999px;padding:10px 14px 10px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 16px 36px -14px rgba(42,38,32,.5);z-index:40;font-size:13px;white-space:nowrap;}
.ab-pulse{width:7px;height:7px;border-radius:50%;background:var(--t-green);box-shadow:0 0 0 4px rgba(95,168,110,.25);animation:pulse 2s ease-in-out infinite;flex:none;} @keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(95,168,110,.25)}50%{box-shadow:0 0 0 7px rgba(95,168,110,.1)}}
.ab-btn{background:var(--paper);color:var(--ink);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:5px;transition:transform .15s;}.ab-btn:hover{transform:translateY(-1px);} .ab-btn svg{width:12px;height:12px;} .ab-ghost{background:transparent;color:var(--paper);} .ab-ghost:hover{background:rgba(255,255,255,.1);}
/* FAB toggle: hidden on desktop */
.ab-fab-toggle{display:none;}

/* ── Mobile FAB (≤600px) ─────────────────────────────────────────── */
@media(max-width:600px){
  /* Reshape bar into a column anchored bottom-right */
  .action-bar{
    left:auto;right:20px;bottom:20px;
    transform:none;
    flex-direction:column;
    align-items:flex-end;
    background:transparent;
    box-shadow:none;
    padding:0;
    border-radius:0;
    gap:8px;
  }
  /* Hide the pill-bar contents by default */
  .action-bar .ab-btn,
  .action-bar .ab-ghost,
  .action-bar .ab-pulse{display:none;}
  /* Show the FAB trigger */
  .ab-fab-toggle{
    display:flex;
    width:52px;height:52px;
    border-radius:50%;
    background:var(--ink,#2a2620);
    color:var(--paper,#fffef9);
    align-items:center;justify-content:center;
    border:none;cursor:pointer;
    box-shadow:0 8px 24px -8px rgba(42,38,32,.55);
    flex-shrink:0;
    transition:transform .15s,box-shadow .15s;
  }
  .ab-fab-toggle:active{transform:scale(.94);}
  .ab-fab-toggle svg{width:18px;height:18px;}
  .ab-fab-icon-open{display:block;}
  .ab-fab-icon-close{display:none;}
  /* Expanded state */
  .action-bar.fab-open .ab-btn,
  .action-bar.fab-open .ab-ghost{
    display:inline-flex;
    background:var(--ink,#2a2620);
    color:var(--paper,#fffef9);
    border-radius:999px;
    padding:11px 18px;
    font-size:14px;
    font-weight:500;
    gap:8px;
    box-shadow:0 6px 18px -8px rgba(42,38,32,.45);
    white-space:nowrap;
    animation:fabItemIn .16s ease both;
  }
  .action-bar.fab-open .ab-btn svg,
  .action-bar.fab-open .ab-ghost svg{width:15px;height:15px;}
  .action-bar.fab-open .ab-fab-icon-open{display:none;}
  .action-bar.fab-open .ab-fab-icon-close{display:block;}
  @keyframes fabItemIn{
    from{opacity:0;transform:translateY(8px) scale(.95);}
    to{opacity:1;transform:translateY(0) scale(1);}
  }
  /* Stagger each item */
  .action-bar.fab-open > *:nth-child(1){animation-delay:0ms;}
  .action-bar.fab-open > *:nth-child(2){animation-delay:35ms;}
  .action-bar.fab-open > *:nth-child(3){animation-delay:65ms;}
  .action-bar.fab-open > *:nth-child(4){animation-delay:90ms;}
}

.premium-tag{
  margin-left:8px;
  font-size:10px;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(42,38,32,.06);
  color:var(--ink-soft);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}
.comp-card.is-deleted{
  display:none !important;
}

/* Admin dashboard */
#accessShell.access{max-width:760px;margin:84px auto;padding:0 24px;}
.access-card{padding:28px;}
.access-card h2{margin:0 0 8px;font-family:var(--serif);font-size:34px;line-height:1.04;letter-spacing:-.02em;font-weight:500;}
.access-card p{margin:0;color:var(--ink-soft);font-size:15px;}
.auth-box{margin-top:16px;background:var(--paper);border:1px solid var(--line);padding:12px 14px;}
.hero{display:grid;grid-template-columns:1.35fr .85fr;gap:18px;align-items:stretch;margin-top:18px;}
.hero-card{padding:28px 28px 26px;position:relative;overflow:hidden;background:radial-gradient(circle at top right, rgba(74,79,158,.10), transparent 34%),radial-gradient(circle at bottom left, rgba(95,168,110,.10), transparent 28%),var(--white);}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-soft);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px;}
.hero-kicker i{width:8px;height:8px;border-radius:50%;background:var(--t-green);display:inline-block;box-shadow:0 0 0 4px rgba(95,168,110,.15);}
.hero p{margin:0;font-size:16px;color:var(--ink-soft);max-width:56ch;}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px;}
.hero-stat{padding:14px 16px;border-radius:18px;background:var(--paper);border:1px solid var(--line);}
.hero-stat-label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);font-weight:700;margin-bottom:8px;}
.hero-stat strong{font-family:var(--serif);font-size:26px;line-height:1;letter-spacing:-.02em;font-weight:500;}
.status-card{padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;}
.status-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.status-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px;}
.status-main{font-family:var(--serif);font-size:26px;line-height:1.08;letter-spacing:-.02em;margin:0;}
.badge{padding:7px 10px;border-radius:999px;background:var(--tint-green);color:#2d6c3b;font-size:12px;font-weight:700;white-space:nowrap;}
.status-list{display:grid;gap:10px;}
.status-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-radius:16px;background:var(--paper);border:1px solid var(--line);font-size:14px;}
.status-item strong{color:var(--ink);font-weight:600;}
.section-head p{margin:0;color:var(--ink-soft);font-size:14px;max-width:58ch;}
.card{padding:20px;display:flex;flex-direction:column;min-height:232px;position:relative;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.card:hover{transform:translateY(-3px);border-color:rgba(74,79,158,.28);box-shadow:0 24px 54px -30px rgba(42,38,32,.28);}
.span-4{grid-column:span 4;}.span-6{grid-column:span 6;}
.icon-wrap{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:16px;border:1px solid rgba(42,38,32,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);position:relative;z-index:1;}
.icon{width:26px;height:26px;color:var(--ink);}
.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);font-weight:700;margin-bottom:6px;}
.card h3{margin:0 0 8px;font-family:var(--serif);font-size:24px;line-height:1.08;letter-spacing:-.02em;font-weight:500;}
.card p{margin:0;color:var(--ink-soft);font-size:14px;max-width:40ch;}
.card-foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:none;}
.mini{font-size:12px;color:var(--ink-mute);display:inline-flex;align-items:center;gap:6px;}.mini i{width:7px;height:7px;border-radius:50%;background:var(--t-orange);display:inline-block;}
.link-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;}.link-pill svg{width:14px;height:14px;}
.coming{background:radial-gradient(circle at top right, rgba(139,92,168,.10), transparent 32%),var(--white);}

/* Upload/Preview page tweaks */
body.tool-page{background:var(--bg);}
.tool-page h1{font-size:28px;line-height:1.1;margin:0 0 8px;letter-spacing:-.02em;}
.tool-page h2{font-size:16px;line-height:1.2;margin:22px 0 10px;letter-spacing:-.01em;}
.tool-page .panel{padding:20px;box-shadow:0 18px 40px -28px rgba(42,38,32,.25);}

@media(max-width:1180px){
  .hero{grid-template-columns:1fr;}
  .span-4,.span-6{grid-column:span 6;}
  .page-wrap{grid-template-columns:1fr;}
  iframe{height:75vh;}
}
@media(max-width:1100px){:root{--panel-w:420px;}}
@media(max-width:900px){
  .page-body{grid-template-columns:1fr!important;}
  .inspector{position:fixed;bottom:0;left:0;right:0;top:auto;max-height:80vh;width:100%;border-radius:var(--radius-lg) 20px 0 0;transform:translateY(100%);z-index:55;}
  .inspector.visible{transform:translateY(0);}
  .action-bar{left:16px;right:16px;transform:none;border-radius:16px;bottom:14px;}
  /* BB-K04: hide action bar when inspector drawer is open on mobile */
  body.inspector-open .action-bar{opacity:0;pointer-events:none;transition:opacity .2s ease;}
}
@media(max-width:760px){
  .wrap{padding:0 20px;}
  .page{padding:18px;}
  .builder{padding:28px 22px;}
  .builder::before,.builder::after{display:none;}
  .ages,.support-grid,.support-extras,.row,.row-3{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .nav-mobile{display:flex;}
  /* Sign-in moves to burger drawer on mobile — hide it from the header bar */
  .nav-signin-link{display:none !important;}
  .trust{grid-template-columns:repeat(2,1fr);gap:24px;}
  .steps{grid-template-columns:1fr;}
  .section-head{flex-direction:column;align-items:flex-start;}
  .ornament{display:none;}
  .grid{grid-template-columns:1fr;}
  .span-4,.span-6{grid-column:span 1;}
  .hero-card,.status-card,.card{padding:18px;}
  h1{font-size:34px;}
}

.builder-bg + .section {
  padding: 96px 0 120px;
  margin-top: 0;
}


/* ═══════════════════════════════════════════════════════════
   USER MENU DROPDOWN - ADD THIS TO YOUR EXISTING brightbud-shared.css
   
   INSTRUCTIONS: 
   1. Open your current brightbud-shared.css
   2. Scroll to the very end
   3. Copy and paste ALL of the code below
   4. Save the file
   ═══════════════════════════════════════════════════════════ */

.user-menu-wrapper {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}

/* User Initials Badge */
.user-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.user-menu-chevron {
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.user-menu-trigger:hover .user-menu-chevron {
  opacity: 1;
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 240px;
  background: var(--white);
  border: 1px solid #E5E1DA;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(42, 38, 32, 0.12),
              0 2px 8px rgba(42, 38, 32, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 1000;
  overflow: hidden;
}

.user-menu-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown arrow */
.user-menu-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 20px;
  width: 12px;
  height: 12px;
  background: var(--white);
  border-left: 1px solid #E5E1DA;
  border-top: 1px solid #E5E1DA;
  transform: rotate(45deg);
  z-index: -1;
}

/* User Info Header in Dropdown */
.user-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, 
    rgba(253,252,250,1) 0%, 
    rgba(250,248,245,1) 100%
  );
}

.user-menu-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.user-menu-info {
  flex: 1;
  min-width: 0;
}

.user-menu-name {
  font-size: 14px;
  font-weight: 600;
  color: #2A2620;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.user-menu-email {
  font-size: 12px;
  color: #8A7F71;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-divider {
  height: 1px;
  background: #E5E1DA;
}

/* Menu Items */
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  text-align: left;
  text-decoration: none;
  color: #2A2620;
  font-family: 'Inter Tight', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.user-menu-item:hover {
  background: #FAF8F5;
}

.user-menu-item:active {
  background: #F5F2ED;
}

.user-menu-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.user-menu-item:hover svg {
  opacity: 1;
}

/* Separator between items */
.user-menu-item + .user-menu-item {
  border-top: 1px solid #E5E1DA;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .user-menu-dropdown {
    min-width: 220px;
    right: -8px;
  }
  
  .user-menu-dropdown::before {
    right: 24px;
  }
}


/* REAL MOMENTS */
.real-moments {
  padding: 60px 0 40px;
  background: linear-gradient(180deg, #FBF7F0 0%, var(--white) 100%);
}

.real-head {
  text-align: center;
  margin-bottom: 28px;
}

.real-head h2 {
  font-family: var(--serif);
  font-size: 32px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: var(--ink);
}

.real-head p {
  color: var(--ink-soft);
  font-size: 15px;
}

.real-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.real-card {
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 6px 18px -10px rgba(42,38,32,0.25);
  transition: transform 0.25s ease;
}

.real-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.real-card:hover {
  transform: translateY(-4px);
}

/* MOBILE */
@media (max-width: 900px) {
  .real-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}


.assets-preview-grid{
  display:grid;
  gap:14px;
}

.asset-preview-card{
  background:var(--white);
  border:1.5px solid rgba(228,220,201,0.75);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 28px -22px rgba(42,38,32,.25);
  display:flex;
  flex-direction:row;
  align-items:stretch;
}

.asset-preview-img-wrap{
  flex:0 0 96px;
  width:96px;
  background:var(--paper);
  border-right:1px solid var(--line);
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.asset-preview-img{
  width:100%;
  height:auto;
  max-height:80px;
  object-fit:contain;
  display:block;
  border-radius:6px;
}

.asset-file-preview{
  flex:0 0 96px;
  width:96px;
  display:grid;
  place-items:center;
  background:var(--paper);
  border-right:1px solid var(--line);
  color:var(--t-indigo);
}

.asset-file-preview svg{
  width:36px;
  height:36px;
}

.asset-preview-body{
  flex:1;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}

.asset-title{
  font-size:14px;
  font-weight:500;
  line-height:1.35;
  color:var(--ink);
}

.asset-match-reason{
  font-size:12px;
  line-height:1.5;
  color:var(--ink-mute);
}

.asset-preview-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Stage selector (age / key stage picker)
   Used in: brightbud-builder, brightbud-search
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ages{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.age{
  --age-c:var(--t-blue);
  --age-tint:var(--tint-blue);
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px 12px 14px 14px;
  text-align:left;
  transition:border-color .18s,background .18s,box-shadow .18s;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
}
.age:hover{border-color:var(--age-c);background:var(--white);box-shadow:0 2px 8px -2px rgba(0,0,0,.08);}
.age.selected{
  background:var(--age-tint);
  border:2px solid var(--age-c);
  box-shadow:0 2px 12px -4px rgba(0,0,0,.1);
}
.age:nth-child(1){--age-c:var(--t-pink);  --age-tint:var(--tint-pink);}
.age:nth-child(2){--age-c:var(--t-orange);--age-tint:var(--tint-orange);}
.age:nth-child(3){--age-c:var(--t-teal);  --age-tint:var(--tint-teal);}
.age:nth-child(4){--age-c:var(--t-purple);--age-tint:var(--tint-purple);}
.age-icon{width:28px;height:28px;flex:none;color:var(--age-c);}
.age-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.age-title{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--ink);line-height:1.2;}
.age-meta{font-size:11px;color:var(--ink-mute);line-height:1.4;}
.age .badge{
  width:22px;height:22px;border-radius:50%;flex:none;margin-left:auto;
  border:1.5px solid var(--line);background:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s;
}
.age.selected .badge{background:var(--age-c);border-color:var(--age-c);}
.age .badge svg{width:10px;height:10px;flex:none;opacity:0;transition:opacity .18s;}

/* ══════════════════════════════════════════════════════
   BB-Loader — unified loading component (BB-A01)
   Variants: .bb-loader (simple) | .bb-loader--steps
══════════════════════════════════════════════════════ */
.bb-loader{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;
  padding:32px 20px;gap:14px;
  animation:bb-fadein .25s ease;
}
.bb-loader__ring{
  width:40px;height:40px;border-radius:50%;
  border:3px solid var(--line);
  border-top-color:var(--t-teal);
  animation:bb-spin .7s linear infinite;
  flex:none;
}
.bb-loader__msg{
  margin:0;font-size:14px;
  color:var(--ink-mute);min-height:20px;
}
.bb-loader__steps{
  list-style:none;margin:4px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px;
  max-width:300px;text-align:left;
}
.bb-loader__step{
  display:flex;align-items:center;gap:10px;
  font-size:14px;color:var(--ink-mute);
  opacity:.4;transition:opacity .4s,color .4s;
}
.bb-loader__step.active{opacity:1;color:var(--ink-soft);}
.bb-loader__step.done{opacity:.7;color:var(--t-green);}
.bb-loader__step-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--line);flex:none;
  transition:background .3s;
}
.bb-loader__step.active .bb-loader__step-dot{background:var(--t-teal);}
.bb-loader__step.done   .bb-loader__step-dot{background:var(--t-green);}
@keyframes bb-spin  {to{transform:rotate(360deg);}}
@keyframes bb-fadein{from{opacity:0;}to{opacity:1;}}

/* ── Rainbow underline — design system utility ── */
.rainbow-underline{
  position:relative;
  display:inline;
}
.rainbow-underline::after{
  content:"";
  position:absolute;
  left:-2%;right:-2%;bottom:2px;
  height:10px;
  background:linear-gradient(to right,
    var(--t-red)    0%  14%,
    var(--t-orange) 14% 28%,
    var(--t-yellow) 28% 42%,
    var(--t-green)  42% 57%,
    var(--t-blue)   57% 71%,
    var(--t-indigo) 71% 85%,
    var(--t-purple) 85% 100%
  );
  opacity:.45;
  border-radius:6px;
  z-index:-1;
  transform:rotate(-.5deg);
}
.age.selected .badge svg{opacity:1;}
@media(max-width:600px){.ages{grid-template-columns:1fr;}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-nav{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--t-teal);color:var(--white);padding:8px 16px;border-radius:0 0 8px 0;font-weight:600;font-size:14px;text-decoration:none;}
.skip-nav:focus-visible{left:0;}

/* ── SHARED SITE FOOTER ─────────────────────────────────────── */
.site-footer { background: var(--ink); padding: 28px 60px; }
.site-footer-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer-brand img { filter: brightness(0) invert(.7); display: block; }
.site-footer-legal { display: flex; align-items: center; gap: 20px; }
.site-footer-legal a { font-size: 12px; color: rgba(255,255,255,.65); text-decoration: none; transition: color .15s; }
.site-footer-legal a:hover { color: #fff; }
.site-footer-copy { font-size: 13px; color: rgba(255,255,255,.5); white-space: nowrap; }
@media(max-width:900px) { .site-footer { padding: 28px 36px; } }
@media(max-width:760px) {
  .site-footer { padding: 24px 20px; }
  .site-footer-inner { flex-direction: column; gap: 14px; text-align: center; }
  .site-footer-legal { flex-wrap: wrap; justify-content: center; gap: 12px 20px; }
}