:root{
  /* Default theme: Warm - Toys R Us-bright orange + sunny yellow */
  --bg:#fff4ea;
  --ink:#2a1810;
  --muted:#7a6a5e;
  --soft:#ffe3c9;
  --line:#ffd6b0;
  --accent:#ff5200;
  --accent-rgb:255,82,0;
  --accent-2:#ffc400;
  --accent-2-rgb:255,196,0;
  --tint:#ffe6d2;
  --tint-2:#fff1c2;
  --tint-3:#ffe0ea;
  --good:#16a34a;
  --card:#ffffff;
  --radius:22px;
  --shadow:0 14px 34px rgba(255,82,0,.12);

  /* Brand pop accents - stay vibrant across every theme */
  --pop-blue:#0061af;
  --pop-yellow:#ffce00;
  --pop-red:#ed145b;
  --pop-orange:#f58220;
  --pop-green:#72bf44;
}

/* Playful - Toys R Us blue + sunny yellow on white */
:root[data-theme="playful"]{
  --bg:#ffffff;
  --ink:#0c2233;
  --muted:#5a6b7b;
  --soft:#eaf4ff;
  --line:#d7e7f6;
  --accent:#0061af;
  --accent-rgb:0,97,175;
  --accent-2:#ffce00;
  --accent-2-rgb:255,206,0;
  --tint:#eaf4ff;
  --tint-2:#fff3cc;
  --tint-3:#ffe3ee;
  --shadow:0 14px 34px rgba(0,97,175,.10);
}

/* Oxford blue + warm gold - deeper parchment */
:root[data-theme="oxford"]{
  --bg:#ebe4d0;
  --ink:#0b0f1a;
  --muted:#5b6370;
  --soft:#dfd6bd;
  --line:#cabf9f;
  --accent:#14213d;
  --accent-rgb:20,33,61;
  --accent-2:#e8b931;
  --accent-2-rgb:232,185,49;
  --tint:#e6dbb5;
  --tint-2:#d6dceb;
  --tint-3:#e2d6b5;
}

/* Forest green + terracotta - sage-tinted */
:root[data-theme="forest"]{
  --bg:#eaf0e3;
  --ink:#11221c;
  --muted:#5a6660;
  --soft:#d8e1cf;
  --line:#bccab1;
  --accent:#1f4d3d;
  --accent-rgb:31,77,61;
  --accent-2:#c25a3a;
  --accent-2-rgb:194,90,58;
  --tint:#d4e0ca;
  --tint-2:#f0c8b5;
  --tint-3:#dde3cd;
}

/* Plum + soft pink */
:root[data-theme="plum"]{
  --bg:#fbf6f8;
  --ink:#1a0e22;
  --muted:#695870;
  --soft:#efe2e8;
  --line:#e0cfd8;
  --accent:#4a1e5c;
  --accent-rgb:74,30,92;
  --accent-2:#e4a0b7;
  --accent-2-rgb:228,160,183;
  --tint:#f3e4ec;
  --tint-2:#f7d8e2;
  --tint-3:#ede3f0;
}

/* Teal + coral (ed-tech) */
:root[data-theme="teal"]{
  --bg:#f4f7f8;
  --ink:#0a1f26;
  --muted:#5b6e74;
  --soft:#e1ecee;
  --line:#cfdde0;
  --accent:#0e5a6e;
  --accent-rgb:14,90,110;
  --accent-2:#ff6f61;
  --accent-2-rgb:255,111,97;
  --tint:#d8eaee;
  --tint-2:#ffe1dd;
  --tint-3:#e7f2f4;
}

*{ -webkit-font-smoothing:antialiased; }

html, body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

h1,h2,h3,.display-3,.display-4,.display-5{
  font-family:'Fredoka', system-ui, sans-serif;
  letter-spacing:-.01em;
}
h1 .accent, .accent{ color:var(--accent); }
em{ color:var(--accent); font-style:italic; }
/* Fredoka has no true italic - use colour emphasis in headings instead of faux-oblique */
h1 em, h2 em, h3 em, .display-3 em, .display-4 em, .display-5 em{ font-style:normal; }

a{ color:var(--ink); }
a:hover{ color:var(--accent); }

.py-6{ padding-top:5.5rem; padding-bottom:5.5rem; }
.bg-soft{ background:var(--soft); }

/* Floating announce toast */
.announce-toast{
  position:fixed;
  right:20px;
  top:80px;
  z-index:1085;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  max-width:calc(100vw - 40px);
  padding:.7rem .9rem .7rem 1rem;
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  font-size:.88rem;
  font-weight:500;
  opacity:0;
  visibility:hidden;
  transform:translateY(-20px) scale(.96);
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
.announce-toast.is-shown{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.announce-toast .at-icon{
  color:var(--accent-2);
  font-size:1rem;
  flex-shrink:0;
}
.announce-toast .at-text{
  white-space:normal;
  line-height:1.3;
}
.announce-toast .at-close{
  border:0;
  background:rgba(255,255,255,.12);
  color:#fff;
  width:24px; height:24px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  font-size:.75rem;
  transition:background .15s;
}
.announce-toast .at-close:hover{ background:var(--accent); }

@media (max-width:480px){
  .announce-toast{
    left:12px;
    right:12px;
    top:72px;
    max-width:none;
    justify-content:space-between;
  }
}

/* Navbar */
.navbar{
  padding:.75rem 0;
}
.navbar-brand{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  background:var(--accent);
  color:#fff;
  border-radius:8px;
  font-family:'Fredoka', sans-serif;
  font-weight:900;
}
.navbar .nav-link{
  font-weight:500;
  color:#222;
}
.navbar .nav-link:hover{ color:var(--accent); }

/* Eyebrow */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.75rem;
  font-weight:600;
  color:var(--accent);
  background:rgba(var(--accent-rgb),.08);
  padding:.35rem .7rem;
  border-radius:999px;
  margin-bottom:1rem;
}

/* Hero */
.hero{
  background:
    radial-gradient(1100px 480px at 92% -10%, rgba(var(--accent-2-rgb),.55), transparent 60%),
    radial-gradient(820px 420px at -8% 8%, rgba(var(--accent-rgb),.18), transparent 60%),
    radial-gradient(620px 360px at 62% 125%, rgba(237,20,91,.10), transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero h1{ line-height:1.02; }

.hero-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  overflow:hidden;
  transform:rotate(-1.2deg);
}
.hero-card-head{
  padding:.6rem .9rem;
  border-bottom:1px solid var(--line);
  background:#faf2ea;
  display:flex; align-items:center;
}
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:5px; }
.dot-r{ background:#ff6b6b; }
.dot-y{ background:#ffd166; }
.dot-g{ background:#16a34a; }

.hero-card-body{ padding:1.25rem; }
.pill{
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:12px;
  padding:.65rem .85rem;
  margin-bottom:.5rem;
  font-weight:500;
}
.pill i{ color:var(--accent); margin-right:.4rem; }

/* Marquee */
.marquee{
  position:relative;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, #fff 0%, var(--tint) 50%, #fff 100%);
  display:flex;
  align-items:stretch;
  overflow:hidden;
}
.marquee-label{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.85rem 1.25rem;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  z-index:2;
  clip-path:polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  padding-right:1.75rem;
}
.marquee-label i{ color:var(--accent-2); }
.marquee-viewport{
  flex:1 1 auto;
  display:flex;
  overflow:hidden;
  position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.marquee-track{
  display:flex;
  flex-shrink:0;
  align-items:center;
  gap:.6rem;
  padding:.7rem .3rem;
  animation:marquee-scroll 38s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track,
.marquee.is-paused .marquee-track{ animation-play-state:paused; }
.m-item{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .9rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  font-weight:500;
  font-size:.95rem;
  color:var(--ink);
  white-space:nowrap;
  transition:border-color .2s, transform .2s, background .2s;
}
.m-item i{
  color:var(--accent);
  font-size:1rem;
}
.m-item:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  background:var(--tint);
}
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-100%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}
.m-item{
  background:#fff;
  border:1px solid var(--line);
  font-family:inherit;
  cursor:pointer;
}
.m-item.is-active{
  border-color:var(--accent);
  background:var(--tint);
  box-shadow:0 4px 14px rgba(var(--accent-rgb),.18);
}

/* Subject popover */
.subject-popover{
  position:fixed;
  z-index:1080;
  width:280px;
  max-width:calc(100vw - 2rem);
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 20px 50px rgba(15,17,21,.18);
  padding:1rem 1rem .85rem;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px) scale(.98);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events:none;
}
.subject-popover.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.subject-popover::before{
  content:"";
  position:absolute;
  top:-7px;
  left:var(--arrow-x, 24px);
  width:14px; height:14px;
  background:#fff;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
  transform:rotate(45deg);
}
.subject-popover.from-bottom::before{
  top:auto;
  bottom:-7px;
  transform:rotate(225deg);
}
.sp-close{
  position:absolute;
  top:.4rem; right:.4rem;
  width:28px; height:28px;
  border-radius:50%;
  border:0;
  background:var(--soft);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.sp-close:hover{ background:var(--accent); color:#fff; }
.sp-head{
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:.5rem;
  padding-right:1.75rem;
}
.sp-icon{
  width:36px; height:36px;
  border-radius:10px;
  background:rgba(var(--accent-rgb),.12);
  color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
}
.sp-title{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size:1.05rem;
}
.sp-blurb{ line-height:1.4; }
.sp-meta div{ margin-top:.15rem; color:var(--muted); }
.sp-meta strong{ color:var(--ink); font-weight:600; }

/* Service cards */
.service-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.75rem;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
  overflow:hidden;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:var(--accent);
}
.service-card .emoji{
  font-size:2rem;
  margin-bottom:.75rem;
  display:inline-block;
  padding:.5rem .75rem;
  background:var(--soft);
  border-radius:14px;
}
.service-card h3{
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:.5rem;
}
.service-notes{ background:linear-gradient(180deg, #fff, var(--tint)); border-top:5px solid var(--accent); }
.service-notes .emoji{ background:rgba(var(--accent-rgb),.14); }
.service-notes:hover{ border-color:var(--accent); }
.service-tuition{ background:linear-gradient(180deg, #fff, var(--tint-2)); border-top:5px solid var(--pop-yellow); }
.service-tuition .emoji{ background:rgba(245,180,0,.22); }
.service-tuition:hover{ border-color:#f5b400; }
.service-practice{ background:linear-gradient(180deg, #fff, var(--tint-3)); border-top:5px solid var(--pop-red); }
.service-practice .emoji{ background:rgba(237,20,91,.14); }
.service-practice:hover{ border-color:var(--pop-red); }

.ticks{
  list-style:none;
  padding:0;
  margin:1rem 0 1.25rem;
}
.ticks li{
  padding:.25rem 0 .25rem 1.5rem;
  position:relative;
  color:#333;
}
.ticks li::before{
  content:"";
  position:absolute;
  left:0; top:.65rem;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:inset 0 0 0 3px #fff;
}
.link-arrow{
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}
.link-arrow:hover{ color:var(--accent); }

/* Why tiles */
.why-tile{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.25rem;
  height:100%;
  transition:transform .2s ease;
}
.why-tile:hover{ transform:translateY(-3px); }
.why-tile i{
  font-size:1.5rem;
  color:var(--accent);
  background:rgba(var(--accent-rgb),.1);
  padding:.5rem;
  border-radius:10px;
  display:inline-block;
  margin-bottom:.6rem;
}
.why-tile h5{ font-weight:700; margin-bottom:.25rem; }

/* Stats */
.stats-strip{
  background:linear-gradient(120deg, var(--accent), var(--pop-red));
}
.stat-num{
  font-family:'Fredoka', sans-serif;
  font-size:2.5rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:#fff;
}

/* Steps */
.step{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem;
  height:100%;
  position:relative;
}
.step-num{
  font-family:'Fredoka', sans-serif;
  font-weight:900;
  font-size:2.5rem;
  color:var(--accent);
  opacity:.4;
  display:block;
  line-height:1;
  margin-bottom:.5rem;
}
.step h4{ font-weight:700; }

/* Testimonials */
.quote-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem;
  height:100%;
}
.stars i{ color:#f59e0b; }
.quote-card p{ font-family:'Fredoka', sans-serif; font-size:1.1rem; line-height:1.5; }
.quote-card .who{ color:var(--muted); font-size:.9rem; }

.carousel-control-prev, .carousel-control-next{
  width:auto;
  opacity:.9;
}
.carousel-control-prev-icon, .carousel-control-next-icon{
  padding:1.25rem;
  background-size:50%;
}

/* FAQ */
.accordion-button{
  font-weight:600;
  font-size:1.1rem;
  padding:1.25rem 0;
  background:transparent;
}
.accordion-button:not(.collapsed){
  background:transparent;
  color:var(--accent);
  box-shadow:none;
}
.accordion-item{ background:transparent; }
.accordion-button:focus{ box-shadow:none; }

/* CTA */
.cta{
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(var(--accent-2-rgb),.5), transparent 60%),
    var(--soft);
}

/* Footer */
.footer{
  background:#0f1115;
  color:#cfd2d6;
}
.footer h6{ color:#fff; }
.footer a{ color:#cfd2d6; text-decoration:none; }
.footer a:hover{ color:var(--accent); }
.footer .brand-text{ color:#fff; }
.footer hr{ border-color:rgba(255,255,255,.1); }
.footer input.form-control{
  background:#1a1d23;
  border-color:#2a2e36;
  color:#fff;
}
.footer input.form-control::placeholder{ color:#7c828c; }

/* Buttons polish */
.btn-dark{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  border-radius:999px;
  padding:.65rem 1.4rem;
  font-weight:700;
  box-shadow:0 4px 0 color-mix(in srgb, var(--accent) 70%, #000);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn-dark:hover{ background:color-mix(in srgb, var(--accent) 88%, #000); border-color:color-mix(in srgb, var(--accent) 88%, #000); color:#fff; transform:translateY(-2px); box-shadow:0 6px 0 color-mix(in srgb, var(--accent) 70%, #000); }
.btn-dark:active{ transform:translateY(2px); box-shadow:0 1px 0 color-mix(in srgb, var(--accent) 70%, #000); }
.btn-outline-dark{
  border:2px solid var(--accent);
  color:var(--accent);
  background:#fff;
  border-radius:999px;
  padding:.6rem 1.35rem;
  font-weight:700;
  transition:transform .12s ease, background .15s ease, color .15s ease;
}
.btn-outline-dark:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-2px); }
.btn-lg{ padding:.9rem 1.7rem; font-size:1.05rem; }

/* Generic page header (sub pages) */
.page-head{
  background:
    radial-gradient(900px 400px at 90% -20%, rgba(var(--accent-2-rgb),.5), transparent 60%),
    var(--soft);
  padding:5rem 0 4rem;
  border-bottom:1px solid var(--line);
}

/* Note packs / pricing grid (used on sub pages) */
.pack-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem;
  height:100%;
  display:flex;
  flex-direction:column;
}
.pack-card .price{
  font-family:'Fredoka', sans-serif;
  font-size:2rem;
  font-weight:900;
  color:var(--ink);
}
.pack-card .badge-pop{
  background:var(--accent);
  color:#fff;
  font-size:.7rem;
  letter-spacing:.1em;
  padding:.25rem .55rem;
  border-radius:999px;
}
.pack-card.popular{
  border-color:var(--accent);
  box-shadow:0 12px 40px rgba(var(--accent-rgb),.15);
}

.tag{
  display:inline-block;
  font-size:.75rem;
  font-weight:600;
  padding:.2rem .55rem;
  border-radius:999px;
  background:var(--soft);
  color:#333;
  margin-right:.25rem;
}

/* Contact */
.contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem;
  box-shadow:var(--shadow);
}
.contact-card .form-control,
.contact-card .form-select{
  border-radius:12px;
  padding:.75rem 1rem;
}
.contact-card label{ font-weight:500; margin-bottom:.35rem; }

/* Responsive tweaks */
@media (max-width: 991px){
  .navbar-collapse{
    padding:1rem 0;
    border-top:1px solid var(--line);
    margin-top:.5rem;
  }
  .navbar-nav{
    gap:.25rem;
    margin-bottom:1rem;
  }
  .navbar .nav-link{
    padding:.65rem .25rem;
    border-bottom:1px solid var(--soft);
  }
  .navbar .d-flex.gap-2{
    flex-direction:column;
    width:100%;
  }
  .navbar .d-flex.gap-2 .btn{
    width:100%;
  }
}

@media (max-width: 768px){
  body{ font-size:.97rem; }
  .py-6{ padding-top:3rem; padding-bottom:3rem; }
  .hero{ padding-top:1rem; }
  .hero h1, .display-3{ font-size:2.4rem; line-height:1.05; }
  .display-4{ font-size:2rem; }
  .display-5{ font-size:1.75rem; }
  .lead{ font-size:1.05rem; }
  .hero-card{ transform:none; margin-top:1.5rem; }
  .announce{ font-size:.75rem; }
  .announce .container{ flex-wrap:wrap; gap:.25rem !important; }
  .marquee-label{ font-size:.7rem; padding:.7rem .9rem; padding-right:1.3rem; clip-path:polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
  .marquee-label span, .marquee-label i + span{ display:inline; }
  .m-item{ font-size:.85rem; padding:.35rem .7rem; }
  .marquee-track{ gap:.45rem; animation-duration:28s; }
  .stat-num{ font-size:2rem; }
  .step-num{ font-size:2rem; }
  .service-card{ padding:1.35rem; }
  .service-card h3{ font-size:1.3rem; }
  .why-tile{ padding:1rem; }
  .quote-card p{ font-size:1rem; }
  .accordion-button{ font-size:1rem; padding:1rem 0; }
  .btn-lg{ padding:.75rem 1.25rem; font-size:1rem; }
  .page-head{ padding:3rem 0 2.5rem; }
  .contact-card{ padding:1.25rem; }
  /* tap targets */
  .btn{ min-height:44px; }
  .nav-link{ min-height:44px; display:flex; align-items:center; }
}

@media (max-width: 480px){
  .hero h1, .display-3{ font-size:2rem; }
  .display-4{ font-size:1.75rem; }
  .display-5{ font-size:1.5rem; }
  .hero .d-flex.flex-wrap.gap-2 .btn{ width:100%; }
  .trust{ gap:.75rem !important; }
  .trust span{ font-size:.8rem; }
  .eyebrow{ font-size:.7rem; }
  .carousel-control-prev, .carousel-control-next{ display:none; }
  .cta .btn{ width:100%; margin:.25rem 0 !important; }
}

@media (hover: none){
  .service-card:hover{ transform:none; }
  .why-tile:hover{ transform:none; }
}

/* ===== Dev Panel ===== */
.dev-fab{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:1090;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.7rem 1rem;
  background:var(--ink);
  color:#fff;
  border:0;
  border-radius:999px;
  font-weight:600;
  font-size:.85rem;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  transition:transform .15s ease, background .15s ease;
}
.dev-fab:hover{ transform:translateY(-2px); background:var(--accent); }
.dev-fab i{ font-size:1rem; }

.dev-panel{
  position:fixed;
  top:80px;
  right:20px;
  width:300px;
  max-width:calc(100vw - 2rem);
  max-height:calc(100vh - 120px);
  overflow:auto;
  z-index:1095;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(15,17,21,.18);
  padding:1rem;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px) scale(.98);
  transform-origin:top right;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.dev-panel.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.dev-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.75rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--line);
}
.dev-panel-head h6{
  margin:0;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.dev-panel-head .dev-badge{
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.1em;
  background:var(--accent);
  color:#fff;
  padding:.15rem .4rem;
  border-radius:4px;
}
.dev-panel-close{
  border:0;
  background:var(--soft);
  border-radius:50%;
  width:28px; height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.dev-panel-close:hover{ background:var(--accent); color:#fff; }

.dev-section-title{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin:.5rem 0 .5rem;
}

.theme-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
}
.theme-swatch{
  border:2px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:.5rem;
  cursor:pointer;
  text-align:left;
  transition:border-color .15s, transform .15s;
  font-family:inherit;
}
.theme-swatch:hover{ transform:translateY(-2px); }
.theme-swatch.is-active{
  border-color:var(--accent);
  box-shadow:0 6px 16px rgba(var(--accent-rgb),.18);
}
.theme-swatch .swatch-row{
  display:flex;
  gap:3px;
  margin-bottom:.4rem;
}
.theme-swatch .swatch-row span{
  flex:1;
  height:18px;
  border-radius:4px;
}
.theme-swatch .swatch-name{
  font-size:.78rem;
  font-weight:600;
  color:var(--ink);
  display:block;
  line-height:1.2;
}
.theme-swatch .swatch-sub{
  font-size:.65rem;
  color:var(--muted);
}