/* Extracted from app/Views/site/pages/kit_simulator.php on 2026-06-09. Page CSS cached externally for performance. */


/* =============================================================
   Bare-chrome contrast safety net.
   Master.php's deglass override forces all kinds of elements to
   white with !important. Without this, our dark modal panels can
   end up with dark text on white background or vice versa. We
   set high-specificity, scoped rules that win the cascade.
   ============================================================= */
body.bare-chrome{ color:#e5edff !important; }
body.bare-chrome .ksim-root{ color:#e5edff; }
body.bare-chrome .ksim-modal,
body.bare-chrome .ksim-modal .card,
body.bare-chrome .ksim-modal .body,
body.bare-chrome .ksim-modal .hero,
body.bare-chrome .ksim-modal .plan,
body.bare-chrome .ksim-modal form.signin,
body.bare-chrome .ksim-lib-modal,
body.bare-chrome .ksim-lib-modal .card,
body.bare-chrome .ksim-lib-modal .lib-body,
body.bare-chrome .ksim-lib-modal .lib-card,
body.bare-chrome .ksim-gate,
body.bare-chrome .ksim-gate .panel,
body.bare-chrome .ksim-intro,
body.bare-chrome .ksim-intro .wrap,
body.bare-chrome .ksim-intro .feat,
body.bare-chrome .ksim-intro .plans-teaser .pt{
  color:#e5edff !important;
}
body.bare-chrome .ksim-modal h1, body.bare-chrome .ksim-modal h2, body.bare-chrome .ksim-modal h3,
body.bare-chrome .ksim-lib-modal h1, body.bare-chrome .ksim-lib-modal h2, body.bare-chrome .ksim-lib-modal h3,
body.bare-chrome .ksim-gate h1, body.bare-chrome .ksim-gate h2, body.bare-chrome .ksim-gate h3,
body.bare-chrome .ksim-intro h1, body.bare-chrome .ksim-intro h2, body.bare-chrome .ksim-intro h3{
  color:#ffffff !important;
}
body.bare-chrome .ksim-modal .card, body.bare-chrome .ksim-lib-modal .card,
body.bare-chrome .ksim-gate .panel{
  background:linear-gradient(160deg,#0f172a 0%,#111c33 100%) !important;
  background-color:#0f172a !important;
}
body.bare-chrome .ksim-intro{
  background:radial-gradient(circle at 20% 0%, rgba(14,165,233,.18), transparent 55%),
             radial-gradient(circle at 80% 100%, rgba(168,85,247,.16), transparent 55%),
             linear-gradient(160deg,#0a1020 0%,#0f172a 100%) !important;
  background-color:#0a1020 !important;
}
body.bare-chrome .ksim-intro .feat,
body.bare-chrome .ksim-intro .plans-teaser .pt{
  background-color:rgba(15,23,42,.7) !important;
  background-image:none !important;
}
body.bare-chrome .ksim-modal .plan,
body.bare-chrome .ksim-lib-modal .lib-card{
  background-color:#0b1220 !important;
  background-image:none !important;
}
body.bare-chrome .ksim-modal form.signin input,
body.bare-chrome .ksim-modal form.signin label,
body.bare-chrome .ksim-modal .modal-tabs button,
body.bare-chrome .ksim-modal .plan ul,
body.bare-chrome .ksim-modal .plan ul li,
body.bare-chrome .ksim-lib-modal .lib-card .desc,
body.bare-chrome .ksim-lib-modal .lib-card pre,
body.bare-chrome .ksim-intro .feat p,
body.bare-chrome .ksim-intro .plans-teaser .pt .pd,
body.bare-chrome .ksim-intro .hero p.lede,
body.bare-chrome .ksim-intro .footnote{
  color:#cbd5e1 !important;
}
body.bare-chrome .ksim-modal form.signin input{
  background-color:#0b1220 !important;
  background-image:none !important;
  color:#e5edff !important;
  border-color:#243049 !important;
}
body.bare-chrome .ksim-modal form.signin input::placeholder{ color:#64748b !important; }
body.bare-chrome .ksim-modal .modal-tabs button.active{ background-color:#1e293b !important; color:#ffffff !important; }
body.bare-chrome .ksim-modal .plan .price,
body.bare-chrome .ksim-intro .plans-teaser .pt .pp{
  color:#67e8f9 !important;
}

/* ===========================================================
   Kit Simulator — visual + perf optimized layout
   Scoped under .ksim-root to avoid leaking into other pages
   =========================================================== */
.ksim-root{
  --bg:#0b1220;
  --panel:#0f172a;
  --panel-2:#111c33;
  --line:#1e293b;
  --line-2:#243049;
  --ink:#e5edff;
  --muted:#94a3b8;
  --accent:#0ea5e9;
  --accent-2:#22d3ee;
  --ok:#16a34a;
  --warn:#f59e0b;
  --err:#dc2626;
  --wire-red:#ef4444;
  --wire-black:#0f172a;
  --wire-yellow:#facc15;
  --wire-blue:#3b82f6;
  --wire-green:#22c55e;
  --wire-orange:#fb923c;
  --wire-purple:#a855f7;

  /* Take the entire viewport — the simulator owns the whole window now
     that the site nav/footer are skipped via $bareChrome. */
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  box-sizing:border-box;

  display:flex; flex-direction:column; gap:14px; color:var(--ink);
  background:#0a1020;
  min-height:100vh;
}

/* When simulator is on the page, kill the wrap container's max width
   completely. With $bareChrome the .wrap class is replaced by .bare-main,
   but keep this fallback so dev edits don't break layout. */
body.bare-chrome, body.has-ksim{ background:#0a1020 !important; }
body.bare-chrome .bare-main, body.has-ksim .wrap{
  max-width:none !important; padding:0 !important; margin:0 !important;
}

/* ---------- Slim simulator top bar (replaces site nav) ----------
   The site-wide deglass override in master.php forces every
   <header role="banner"> to white with !important. Our simulator
   topbar IS a header[role=banner] for a11y, so we override with
   !important so we win that fight. */
.ksim-topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:14px;
  padding:10px 18px;
  background-color:#162032 !important;
  background-image:none !important;
  border-bottom:1px solid #243049;
  box-shadow:0 6px 18px -14px rgba(0,0,0,.55);
}
.ksim-topbar .brand{
  display:inline-flex; align-items:center; gap:10px;
  color:#ffffff; font-weight:900; letter-spacing:-.01em;
  font-size:1.02rem; text-decoration:none;
}
.ksim-topbar .brand:hover{ color:#ffffff; opacity:.92; }
.ksim-topbar .brand .logo{
  width:32px; height:32px; border-radius:8px;
  background:linear-gradient(135deg,#0ea5e9,#22d3ee);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:#062a3a;
  box-shadow:0 6px 16px -8px rgba(14,165,233,.6);
}
.ksim-topbar .brand .name{ font-family:"Sora",system-ui,sans-serif; color:#ffffff; }
.ksim-topbar .brand .tag{
  background:rgba(34,211,238,.22); color:#a5f3fc;
  border:1px solid rgba(34,211,238,.55);
  padding:3px 10px; border-radius:999px; font-weight:900; font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase;
}
.ksim-topbar .spacer{ flex:1; }
.ksim-topbar .top-link{
  display:inline-flex; align-items:center; gap:6px;
  color:#cbd5e1; text-decoration:none; font-weight:700; font-size:.85rem;
  padding:8px 14px; border-radius:9px;
  border:1px solid rgba(255,255,255,.12); background:rgba(15,23,42,.6);
  transition:background .12s ease, border-color .12s ease, color .12s ease;
  cursor:pointer;
}
.ksim-topbar .top-link:hover{ color:#fff; border-color:rgba(255,255,255,.32); background:rgba(30,41,59,.8); }
.ksim-topbar .top-link.primary{
  background:linear-gradient(135deg,#0ea5e9,#22d3ee);
  border-color:transparent; color:#062a3a;
  box-shadow:0 6px 18px -10px rgba(14,165,233,.7);
}
.ksim-topbar .top-link.primary:hover{ filter:brightness(1.08); color:#062a3a; }
.ksim-topbar .top-link.gold{
  background:linear-gradient(135deg,#f59e0b,#facc15);
  border-color:transparent; color:#3a2706;
  box-shadow:0 6px 18px -10px rgba(245,158,11,.7);
}
.ksim-topbar .top-link.gold:hover{ filter:brightness(1.08); color:#3a2706; }
.ksim-topbar .user-pill{
  display:none; align-items:center; gap:8px;
  padding:5px 12px 5px 5px; border-radius:999px;
  background:#0f1a2c; border:1px solid #2a3950;
  color:#e5edff; font-weight:800; font-size:.82rem;
  line-height:1;
}
.ksim-topbar .user-pill.show{ display:inline-flex; }
.ksim-topbar .user-pill .av{
  width:26px; height:26px; border-radius:999px;
  background:#16a34a; color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:900;
  line-height:1;
}

@media (max-width:780px){
  .ksim-topbar{ padding:8px 12px; gap:8px; flex-wrap:wrap; }
  .ksim-topbar .brand .tag{ display:none; }
  .ksim-topbar .top-link{ padding:6px 10px; font-size:.78rem; }
}

/* ---------- Subscribe / Login modal ---------- */
.ksim-modal{
  position:fixed; inset:0; z-index:200;
  background:rgba(2,8,20,.78); backdrop-filter:blur(6px);
  display:none; align-items:flex-start; justify-content:center;
  /* The overlay scrolls — the card grows naturally. Far more reliable
     on short viewports and mobile than scrolling the card itself. */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:20px;
}
.ksim-modal.open{ display:flex; }
.ksim-modal .card{
  width:100%; max-width:980px;
  margin:auto;           /* vertically centers when content fits, stays at top when it overflows */
  background:linear-gradient(160deg,#0f172a 0%,#111c33 100%);
  border:1px solid #243049; border-radius:18px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  position:relative;
}
.ksim-modal .card .close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:8px; cursor:pointer;
  background:rgba(15,23,42,.7); color:#cbd5e1; border:1px solid #243049;
  display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.ksim-modal .card .close:hover{ background:rgba(220,38,38,.16); color:#fecaca; border-color:rgba(220,38,38,.4); }
.ksim-modal .hero{
  padding:32px 36px 22px; border-bottom:1px solid #1e293b;
  background:radial-gradient(circle at 0% 0%, rgba(14,165,233,.18), transparent 60%);
}
.ksim-modal .hero .eyebrow{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:rgba(34,211,238,.16); color:#67e8f9; border:1px solid rgba(34,211,238,.36);
  font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px;
}
.ksim-modal .hero h2{
  margin:0 0 8px; font-family:"Sora",system-ui,sans-serif;
  font-size:1.6rem; font-weight:900; color:#f8fafc; letter-spacing:-.01em;
}
.ksim-modal .hero p{ margin:0; color:#cbd5e1; font-size:.95rem; line-height:1.55; max-width:660px; }
.ksim-modal .body{
  padding:24px 36px 32px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:28px;
}
@media (max-width:760px){
  .ksim-modal .body{ grid-template-columns:1fr; padding:20px; }
  .ksim-modal .hero{ padding:22px 22px 18px; }
}
.ksim-modal .plans{ display:flex; flex-direction:column; gap:14px; }
.ksim-modal .plan{
  border:1px solid #243049; border-radius:14px; padding:18px;
  background:#0b1220; position:relative;
}
.ksim-modal .plan.featured{
  border-color:#22d3ee;
  box-shadow:0 12px 30px -18px rgba(34,211,238,.6), inset 0 0 0 1px rgba(34,211,238,.18);
}
.ksim-modal .plan .badge{
  position:absolute; top:-10px; right:14px;
  background:linear-gradient(135deg,#0ea5e9,#22d3ee); color:#062a3a;
  padding:3px 10px; border-radius:999px; font-size:.7rem; font-weight:900;
  letter-spacing:.08em; text-transform:uppercase;
}
.ksim-modal .plan .name{ font-weight:900; color:#f8fafc; font-size:1.1rem; }
.ksim-modal .plan .price{ color:#67e8f9; font-weight:900; font-size:1.6rem; margin:6px 0 4px; }
.ksim-modal .plan .price span{ color:#94a3b8; font-size:.82rem; font-weight:700; }
.ksim-modal .plan ul{ margin:10px 0 14px; padding:0; list-style:none; color:#cbd5e1; font-size:.86rem; line-height:1.6; }
.ksim-modal .plan ul li::before{ content:"✓ "; color:#22c55e; font-weight:900; }
.ksim-modal .plan .btn{
  display:block; width:100%; text-align:center;
  padding:10px 14px; border-radius:10px; font-weight:900; font-size:.9rem;
  background:#1e293b; color:#fff; border:1px solid #243049; cursor:pointer;
}
.ksim-modal .plan.featured .btn{
  background:linear-gradient(135deg,#0ea5e9,#22d3ee); color:#062a3a; border-color:transparent;
}
.ksim-modal .plan .btn:hover{ filter:brightness(1.08); }
.ksim-modal .plan .plan-tag{
  margin:6px 0 6px; color:#9aa6c1; font-size:.82rem; font-weight:600;
}
.ksim-modal .plan .price-sub{ margin:-2px 0 6px; color:#22c55e; font-size:.78rem; font-weight:800; }
.ksim-modal .plan ul li.muted{ color:#64748b; }
.ksim-modal .plan ul li.muted::before{ content:"− "; color:#64748b; }
.ksim-modal .plan .cta-note{
  text-align:center; color:#94a3b8; font-size:.74rem; margin-top:8px; font-weight:600;
}
.ksim-modal .billing-toggle{
  display:inline-flex; align-self:flex-start; gap:0;
  background:#0b1220; border:1px solid #243049; border-radius:999px;
  padding:4px; margin-bottom:6px;
}
.ksim-modal .billing-toggle .bt{
  background:transparent; color:#cbd5e1; border:0;
  padding:7px 14px; border-radius:999px; font-weight:800; font-size:.82rem;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.ksim-modal .billing-toggle .bt.active{
  background:linear-gradient(135deg,#0ea5e9,#22d3ee); color:#062a3a;
}
.ksim-modal .billing-toggle .save-pill{
  background:#16a34a; color:#052e16; font-size:.62rem; font-weight:900;
  padding:2px 7px; border-radius:999px; letter-spacing:.05em;
}
.ksim-modal .student-note{
  color:#9aa6c1; font-size:.78rem; margin-top:6px; text-align:center;
}
.ksim-modal .student-note a{ color:#7dd3fc; font-weight:800; text-decoration:none; }
.ksim-modal .student-note a:hover{ text-decoration:underline; }
.ksim-modal form.signin{ display:flex; flex-direction:column; gap:12px; }
.ksim-modal form.signin .ftitle{
  color:#f8fafc; font-weight:900; font-size:1rem; margin:0 0 4px;
  font-family:"Sora",system-ui,sans-serif;
}
.ksim-modal form.signin .fsub{ color:#94a3b8; font-size:.85rem; margin:-4px 0 8px; }
.ksim-modal form.signin label{ color:#cbd5e1; font-size:.78rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.ksim-modal form.signin input{
  background:#0b1220; color:#e5edff; border:1px solid #243049;
  padding:11px 12px; border-radius:10px; font-size:.92rem; font-weight:600;
  outline:none; transition:border-color .12s ease, box-shadow .12s ease;
}
.ksim-modal form.signin input:focus{ border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.18); }
.ksim-modal form.signin .row{ display:flex; gap:8px; align-items:center; color:#94a3b8; font-size:.82rem; }
.ksim-modal form.signin .row a{ color:#7dd3fc; text-decoration:none; cursor:pointer; }
.ksim-modal form.signin .row a:hover{ text-decoration:underline; }
.ksim-modal form.signin button[type="submit"]{
  margin-top:6px;
  background:linear-gradient(135deg,#16a34a,#22c55e); color:#052e16;
  border:none; padding:12px 16px; border-radius:10px;
  font-weight:900; font-size:.95rem; cursor:pointer;
  box-shadow:0 8px 22px -12px rgba(34,197,94,.7);
}
.ksim-modal form.signin button[type="submit"]:hover{ filter:brightness(1.08); }
.ksim-modal .modal-tabs{
  display:flex; gap:6px; margin-bottom:14px;
  background:#0b1220; padding:4px; border-radius:10px; border:1px solid #243049;
}
.ksim-modal .modal-tabs button{
  flex:1; background:transparent; color:#cbd5e1; border:none;
  padding:8px 10px; border-radius:8px; font-weight:800; font-size:.85rem; cursor:pointer;
}
.ksim-modal .modal-tabs button.active{ background:#1e293b; color:#fff; }
.ksim-modal .pane{ display:none; }
.ksim-modal .pane.active{ display:block; }

/* ---------- Component Library modal ---------- */
.ksim-lib-modal{
  position:fixed; inset:0; z-index:200;
  background:rgba(2,8,20,.78); backdrop-filter:blur(6px);
  display:none; align-items:flex-start; justify-content:center;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:20px;
}
.ksim-lib-modal.open{ display:flex; }
.ksim-lib-modal .card{
  width:100%; max-width:1100px; max-height:92vh;
  margin:auto;
  background:linear-gradient(160deg,#0f172a 0%,#111c33 100%);
  border:1px solid #243049; border-radius:16px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  display:flex; flex-direction:column; position:relative;
}
.ksim-lib-modal .card .close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:8px; cursor:pointer;
  background:rgba(15,23,42,.7); color:#cbd5e1; border:1px solid #243049;
  display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.ksim-lib-modal .card .close:hover{ background:rgba(220,38,38,.16); color:#fecaca; }
.ksim-lib-modal .hd{
  padding:20px 26px 16px; border-bottom:1px solid #1e293b;
  background:radial-gradient(circle at 0% 0%, rgba(34,197,94,.16), transparent 60%);
}
.ksim-lib-modal .hd .eyebrow{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:rgba(34,197,94,.16); color:#86efac; border:1px solid rgba(34,197,94,.36);
  font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px;
}
.ksim-lib-modal .hd h2{
  margin:0 0 4px; font-family:"Sora",system-ui,sans-serif;
  font-size:1.4rem; font-weight:900; color:#f8fafc;
}
.ksim-lib-modal .hd p{ margin:0; color:#cbd5e1; font-size:.9rem; }
.ksim-lib-modal .lib-tabs{
  display:flex; gap:6px; padding:12px 26px 0; align-items:center;
}
.ksim-lib-modal .lib-tabs button{
  background:#0b1220; color:#cbd5e1; border:1px solid #243049;
  padding:8px 14px; border-radius:8px; font-weight:800; font-size:.86rem; cursor:pointer;
}
.ksim-lib-modal .lib-tabs button.active{
  background:linear-gradient(135deg,#0ea5e9,#22d3ee); color:#062a3a; border-color:transparent;
}
.ksim-lib-modal .lib-tabs .auto-toggle{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  color:#cbd5e1; font-size:.82rem; font-weight:700;
}
.ksim-lib-modal .lib-tabs .auto-toggle input{ accent-color:#22d3ee; }
.ksim-lib-modal .lib-body{
  flex:1; overflow:auto; padding:18px 26px 22px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px;
}
.ksim-lib-modal .lib-card{
  background:#0b1220; border:1px solid #243049; border-radius:12px;
  padding:16px; display:flex; flex-direction:column; gap:10px;
}
.ksim-lib-modal .lib-card h3{
  margin:0; color:#f8fafc; font-size:1rem; font-weight:900;
  display:flex; align-items:center; gap:8px;
}
.ksim-lib-modal .lib-card h3 .ic{
  width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg,#1e293b,#0f172a); border:1px solid #243049;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:900; color:#7dd3fc;
}
.ksim-lib-modal .lib-card .role{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:.66rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase;
  background:rgba(99,102,241,.16); color:#a5b4fc; border:1px solid rgba(99,102,241,.32);
  align-self:flex-start;
}
.ksim-lib-modal .lib-card .role.input{ background:rgba(34,197,94,.16); color:#86efac; border-color:rgba(34,197,94,.32); }
.ksim-lib-modal .lib-card .desc{ color:#94a3b8; font-size:.82rem; line-height:1.5; }
.ksim-lib-modal .lib-card .wiring{
  font-size:.74rem; color:#7dd3fc; background:rgba(14,165,233,.08);
  border:1px solid rgba(14,165,233,.24); padding:6px 10px; border-radius:6px;
}
.ksim-lib-modal .lib-card pre{
  margin:0; background:#070d18; color:#e5edff;
  padding:10px 12px; border-radius:8px;
  font-family:JetBrains Mono,monospace; font-size:.74rem;
  line-height:1.45; white-space:pre-wrap; max-height:170px; overflow:auto;
  border:1px solid #1e293b;
}
.ksim-lib-modal .lib-card .actions{ display:flex; gap:6px; flex-wrap:wrap; }
.ksim-lib-modal .lib-card .actions button{
  flex:1; min-width:130px; cursor:pointer;
  padding:8px 10px; border-radius:8px; font-weight:800; font-size:.78rem;
  border:1px solid #243049; background:#1e293b; color:#fff;
}
.ksim-lib-modal .lib-card .actions button.primary{
  background:linear-gradient(135deg,#16a34a,#22c55e); color:#052e16; border-color:transparent;
}
.ksim-lib-modal .lib-card .actions button:hover{ filter:brightness(1.1); }

@media (max-width:680px){
  .ksim-lib-modal .lib-body{ grid-template-columns:1fr; padding:16px; }
  .ksim-lib-modal .hd{ padding:16px 16px 12px; }
  .ksim-lib-modal .lib-tabs{ padding:10px 16px 0; flex-wrap:wrap; }
  .ksim-lib-modal .lib-tabs .auto-toggle{ width:100%; margin-left:0; padding-top:6px; border-top:1px solid #1e293b; }
}


/* Higher-specificity override — site's deglass rule targets every
   header[role="banner"] with !important, so we counter with a body-scoped
   rule that wins on specificity. */
body.bare-chrome header.ksim-topbar[role="banner"],
body.bare-chrome header.ksim-topbar[role="banner"] *:not(.brand .name):not(.tag):not(.av):not(.plan-badge):not(.user-pill *){
  /* parent rule below sets the color — children just inherit, no extra bg */
}
body.bare-chrome header.ksim-topbar[role="banner"]{
  background-color:#162032 !important;
  background-image:none !important;
  color:#e5edff !important;
}
body.bare-chrome header.ksim-topbar[role="banner"] .brand,
body.bare-chrome header.ksim-topbar[role="banner"] .brand .name{
  color:#ffffff !important;
}
body.bare-chrome header.ksim-topbar[role="banner"] .top-link{
  color:#cbd5e1 !important;
}
body.bare-chrome header.ksim-topbar[role="banner"] .top-link.primary{ color:#062a3a !important; }
body.bare-chrome header.ksim-topbar[role="banner"] .top-link.gold{ color:#3a2706 !important; }


/* =============================================================
   Eye-catchy intro polish — bright hover states + animations
   ============================================================= */
@keyframes ksim-float{
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-4px); }
}
@keyframes ksim-pulse-glow{
  0%,100% { box-shadow:0 12px 40px -16px rgba(14,165,233,.7); }
  50%     { box-shadow:0 12px 50px -10px rgba(34,211,238,.85); }
}
body.bare-chrome .ksim-intro .hero h1{
  background:linear-gradient(135deg, #ffffff 0%, #67e8f9 50%, #c084fc 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent !important;
  text-shadow:none !important;
}
body.bare-chrome .ksim-intro .hero .ctas .primary{
  animation:ksim-pulse-glow 2.6s ease-in-out infinite;
  font-size:1.02rem;
  padding:14px 26px;
}
body.bare-chrome .ksim-intro .feat{
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
  cursor:default;
}
body.bare-chrome .ksim-intro .feat:hover{
  transform:translateY(-3px);
  border-color:#22d3ee !important;
  background-color:rgba(15,23,42,.92) !important;
}
body.bare-chrome .ksim-intro .feat .ic{
  font-size:1.6rem;
  background:linear-gradient(135deg, rgba(14,165,233,.25), rgba(168,85,247,.25)) !important;
  border-color:rgba(34,211,238,.4) !important;
  animation:ksim-float 3.5s ease-in-out infinite;
}
body.bare-chrome .ksim-intro .feat:nth-child(2) .ic{ animation-delay:.4s; background:linear-gradient(135deg, rgba(34,197,94,.28), rgba(14,165,233,.28)) !important; }
body.bare-chrome .ksim-intro .feat:nth-child(3) .ic{ animation-delay:.8s; background:linear-gradient(135deg, rgba(245,158,11,.28), rgba(168,85,247,.28)) !important; }
body.bare-chrome .ksim-intro .feat:nth-child(4) .ic{ animation-delay:1.2s; background:linear-gradient(135deg, rgba(168,85,247,.28), rgba(236,72,153,.28)) !important; }
body.bare-chrome .ksim-intro .plans-teaser .pt{
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.bare-chrome .ksim-intro .plans-teaser .pt:hover{
  transform:translateY(-3px);
  border-color:#22d3ee !important;
}
body.bare-chrome .ksim-intro .plans-teaser .pt.featured{
  position:relative;
  background-image:linear-gradient(160deg, rgba(34,211,238,.08), rgba(14,165,233,.04)) !important;
}
body.bare-chrome .ksim-intro .plans-teaser .pt.featured::before{
  content:"⭐ Most popular"; position:absolute; top:-10px; right:14px;
  background:linear-gradient(135deg,#0ea5e9,#22d3ee); color:#062a3a;
  padding:3px 10px; border-radius:999px; font-size:.65rem; font-weight:900;
  letter-spacing:.06em;
}
/* Bigger, clearer hero eyebrow */
body.bare-chrome .ksim-intro .hero .eyebrow{
  font-size:.78rem !important;
  background:linear-gradient(135deg, rgba(34,211,238,.22), rgba(168,85,247,.18)) !important;
  border-color:rgba(34,211,238,.5) !important;
  color:#a5f3fc !important;
}
/* Add a footer-ish "trusted by" badge row for trust */
body.bare-chrome .ksim-intro .trust-row{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  color:#64748b; font-size:.78rem; margin-top:-12px;
}
body.bare-chrome .ksim-intro .trust-row span{
  display:inline-flex; align-items:center; gap:6px;
}
body.bare-chrome .ksim-intro .trust-row span::before{
  content:"✓"; color:#22c55e; font-weight:900;
}


/* ---------- Intro showcase gallery (SVG previews) ---------- */
body.bare-chrome .ksim-intro .showcase{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:14px;
  margin-top:4px;
}
body.bare-chrome .ksim-intro .shot{
  background:rgba(15,23,42,.7) !important; border:1px solid #243049; border-radius:14px;
  padding:14px; transition:transform .18s ease, border-color .18s ease;
  display:flex; flex-direction:column; gap:10px;
  position:relative; overflow:hidden;
}
body.bare-chrome .ksim-intro .shot:hover{
  transform:translateY(-3px); border-color:#22d3ee !important;
}
body.bare-chrome .ksim-intro .shot .frame{
  background:#070d18; border:1px solid #1e293b; border-radius:10px;
  padding:8px; display:flex; align-items:center; justify-content:center;
  min-height:160px;
}
body.bare-chrome .ksim-intro .shot .frame svg{
  width:100%; height:auto; display:block; max-height:170px;
}
body.bare-chrome .ksim-intro .shot .lbl{
  display:flex; align-items:center; gap:6px;
  font-weight:900; color:#f8fafc; font-size:.92rem;
  font-family:"Sora",system-ui,sans-serif;
}
body.bare-chrome .ksim-intro .shot .lbl .dot{
  width:8px; height:8px; border-radius:50%; background:#22d3ee;
  box-shadow:0 0 0 4px rgba(34,211,238,.18);
}
body.bare-chrome .ksim-intro .shot .desc{
  color:#94a3b8 !important; font-size:.78rem; line-height:1.5;
}
body.bare-chrome .ksim-intro .section-title{
  text-align:center; color:#f8fafc;
  font-family:"Sora",system-ui,sans-serif;
  font-size:1.3rem; font-weight:900; margin:0; letter-spacing:-.01em;
}
body.bare-chrome .ksim-intro .section-title small{
  display:block; color:#94a3b8; font-size:.85rem; font-weight:600;
  margin-top:4px; letter-spacing:0;
}

/* tiny pulse for the LED in the simulator preview */
@keyframes ksim-led-blink{
  0%, 100% { opacity:1; }
  50% { opacity:.35; }
}
body.bare-chrome .ksim-intro .shot .led-glow{ animation:ksim-led-blink 1.4s ease-in-out infinite; transform-origin:center; }

/* ---------- Subscribe / login gate (admin-controlled) ---------- */
.ksim-gate{
  position:fixed; inset:0; z-index:150;  /* below auth modal (z=200) so the form is reachable */
  background:linear-gradient(160deg, rgba(2,8,20,.95) 0%, rgba(15,23,42,.92) 100%);
  backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  padding:32px 20px;
}
.ksim-gate.show{ display:flex; }
.ksim-gate .panel{
  width:100%; max-width:560px;
  background:linear-gradient(160deg,#0f172a 0%,#111c33 100%);
  border:1px solid #243049; border-radius:18px;
  padding:32px 36px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  text-align:center;
}
.ksim-gate .panel .lock{
  width:64px; height:64px; margin:0 auto 14px;
  border-radius:16px;
  background:linear-gradient(135deg,#f59e0b,#facc15);
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; color:#3a2706;
  box-shadow:0 12px 30px -16px rgba(245,158,11,.7);
}
.ksim-gate .panel h2{
  margin:0 0 6px;
  font-family:"Sora",system-ui,sans-serif;
  font-size:1.4rem; font-weight:900; color:#f8fafc;
}
.ksim-gate .panel p{
  margin:0 0 18px; color:#cbd5e1; font-size:.95rem; line-height:1.55;
}
.ksim-gate .panel .actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.ksim-gate .panel .actions button{
  cursor:pointer; padding:11px 18px; border-radius:10px;
  font-weight:900; font-size:.92rem; border:none;
}
.ksim-gate .panel .actions .signin{
  background:linear-gradient(135deg,#0ea5e9,#22d3ee); color:#062a3a;
}
.ksim-gate .panel .actions .signup{
  background:linear-gradient(135deg,#f59e0b,#facc15); color:#3a2706;
}
.ksim-gate .panel .actions button:hover{ filter:brightness(1.08); }
.ksim-gate .panel .back{
  display:inline-block; margin-top:14px;
  color:#94a3b8; font-size:.82rem; text-decoration:none;
}
.ksim-gate .panel .back:hover{ color:#cbd5e1; }

/* ---------- Free vs Paid plan distinction ---------- */
.ksim-topbar .user-pill .plan-badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:.66rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  background:#22c55e; color:#052e16; border:1px solid #16a34a;
  margin-left:2px;
}
.ksim-topbar .user-pill[data-plan="pro"]{
  background:rgba(245,158,11,.16); border-color:rgba(245,158,11,.4); color:#fde68a;
}
.ksim-topbar .user-pill[data-plan="pro"] .av{ background:linear-gradient(135deg,#f59e0b,#facc15); color:#3a2706; }
.ksim-topbar .user-pill[data-plan="pro"] .plan-badge{
  background:linear-gradient(135deg,#f59e0b,#facc15); color:#3a2706; border-color:transparent;
}
.ksim-topbar .user-pill[data-plan="classroom"]{
  background:rgba(168,85,247,.16); border-color:rgba(168,85,247,.4); color:#e9d5ff;
}
.ksim-topbar .user-pill[data-plan="classroom"] .av{ background:linear-gradient(135deg,#a855f7,#c084fc); color:#3b0764; }
.ksim-topbar .user-pill[data-plan="classroom"] .plan-badge{
  background:linear-gradient(135deg,#a855f7,#c084fc); color:#3b0764; border-color:transparent;
}

/* Pro-only components in the palette get a small lock badge + slight overlay */
.ksim-comp.pro-locked{ position:relative; }
.ksim-comp.pro-locked .pro-pill{
  position:absolute; top:6px; right:6px;
  background:linear-gradient(135deg,#f59e0b,#facc15); color:#3a2706;
  font-size:.6rem; font-weight:900; letter-spacing:.06em;
  padding:1px 6px; border-radius:999px;
  display:inline-flex; align-items:center; gap:3px;
  pointer-events:none;
  box-shadow:0 4px 10px -6px rgba(245,158,11,.6);
}
.ksim-comp.pro-locked::after{
  content:""; position:absolute; inset:0; border-radius:10px;
  background:rgba(245,158,11,.04); pointer-events:none;
}
.ksim-comp.pro-locked:hover{ border-color:#f59e0b; }
.ksim-comp.pro-locked .ic{ filter:saturate(.6); }
.ksim-comp.pro-locked.signed-in-free{ cursor:not-allowed; }

/* Code Recipe cards: Pro lock for free users */
.ksim-recipe-card.pro-locked{ position:relative; border-color:rgba(245,158,11,.4); }
.ksim-recipe-card.pro-locked::after{
  content:""; position:absolute; inset:0; border-radius:10px;
  background:rgba(245,158,11,.05); pointer-events:none;
}
.ksim-recipe-card.pro-locked .pro-pill-r{
  position:absolute; top:6px; right:6px;
  background:linear-gradient(135deg,#f59e0b,#facc15); color:#3a2706;
  font-size:.6rem; font-weight:900; letter-spacing:.06em;
  padding:1px 6px; border-radius:999px;
  pointer-events:none;
  box-shadow:0 4px 10px -6px rgba(245,158,11,.6);
}
.ksim-recipe-card.pro-locked .ttl{ color:#cbd5e1; }
.ksim-recipe-card.pro-locked.signed-in-free{ cursor:not-allowed; }
.ksim-recipe-card.pro-locked.signed-in-free:hover{ border-color:#f59e0b; }

/* ---------- Welcome / intro screen (shown to unauthenticated visitors) ---------- */
.ksim-intro{
  position:fixed; inset:0; z-index:160;
  background:radial-gradient(circle at 20% 0%, rgba(14,165,233,.18), transparent 55%),
             radial-gradient(circle at 80% 100%, rgba(168,85,247,.16), transparent 55%),
             linear-gradient(160deg,#0a1020 0%,#0f172a 100%);
  display:none; flex-direction:column;
  overflow:auto;
  padding:48px 24px 32px;
}
.ksim-intro.show{ display:flex; }
.ksim-intro .wrap{
  max-width:1100px; width:100%; margin:0 auto;
  display:flex; flex-direction:column; gap:36px;
}
.ksim-intro .hero{
  text-align:center; color:#e5edff;
}
.ksim-intro .hero .eyebrow{
  display:inline-block; padding:5px 14px; border-radius:999px;
  background:rgba(34,211,238,.16); color:#67e8f9; border:1px solid rgba(34,211,238,.4);
  font-weight:900; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:14px;
}
.ksim-intro .hero h1{
  font-family:"Sora",system-ui,sans-serif !important;
  font-size:clamp(1.8rem, 4vw, 2.8rem) !important;
  font-weight:900 !important; letter-spacing:-.02em !important;
  margin:0 0 12px !important; color:#ffffff !important; line-height:1.1;
}
.ksim-intro .hero p.lede{
  font-size:clamp(.95rem, 1.4vw, 1.15rem); color:#cbd5e1;
  max-width:680px; margin:0 auto 22px; line-height:1.6;
}
.ksim-intro .hero .ctas{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.ksim-intro .hero .ctas button, .ksim-intro .hero .ctas a{
  cursor:pointer; padding:13px 22px; border-radius:11px;
  font-weight:900; font-size:.96rem; border:none; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
}
.ksim-intro .hero .ctas .primary{
  background:linear-gradient(135deg,#0ea5e9,#22d3ee); color:#062a3a;
  box-shadow:0 12px 30px -16px rgba(14,165,233,.7);
}
.ksim-intro .hero .ctas .gold{
  background:linear-gradient(135deg,#f59e0b,#facc15); color:#3a2706;
  box-shadow:0 12px 30px -16px rgba(245,158,11,.7);
}
.ksim-intro .hero .ctas .ghost{
  background:rgba(15,23,42,.7); color:#cbd5e1; border:1px solid #2a3950;
}
.ksim-intro .hero .ctas button:hover, .ksim-intro .hero .ctas a:hover{ filter:brightness(1.08); }

/* Feature grid */
.ksim-intro .features{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px;
}
.ksim-intro .feat{
  background:rgba(15,23,42,.7); border:1px solid #243049; border-radius:14px;
  padding:18px; color:#e5edff;
}
.ksim-intro .feat .ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg,#1e293b,#0f172a); border:1px solid #2a3950;
  font-size:1.2rem; margin-bottom:10px;
}
.ksim-intro .feat h3{
  margin:0 0 6px; font-size:1rem; font-weight:900; color:#f8fafc;
  font-family:"Sora",system-ui,sans-serif;
}
.ksim-intro .feat p{ margin:0; color:#94a3b8; font-size:.86rem; line-height:1.55; }

/* Plan teaser strip */
.ksim-intro .plans-teaser{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px;
}
.ksim-intro .plans-teaser .pt{
  background:rgba(15,23,42,.7); border:1px solid #243049; border-radius:12px;
  padding:14px; color:#e5edff;
}
.ksim-intro .plans-teaser .pt.featured{
  border-color:#22d3ee;
  box-shadow:0 12px 30px -18px rgba(34,211,238,.6);
}
.ksim-intro .plans-teaser .pt .pn{
  font-weight:900; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:#94a3b8; margin-bottom:4px;
}
.ksim-intro .plans-teaser .pt.featured .pn{ color:#67e8f9; }
.ksim-intro .plans-teaser .pt .pp{
  font-weight:900; font-size:1.4rem; color:#f8fafc; margin-bottom:6px;
}
.ksim-intro .plans-teaser .pt .pp small{ color:#94a3b8; font-size:.7rem; font-weight:700; }
.ksim-intro .plans-teaser .pt .pd{ color:#cbd5e1; font-size:.82rem; line-height:1.5; }

.ksim-intro .footnote{
  text-align:center; color:#64748b; font-size:.78rem;
}

/* ===== Games row + pitch on the intro screen ===== */
.ksim-intro .ksim-games-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px; margin:0 0 24px;
}
.ksim-intro .game-card{
  background:linear-gradient(160deg,#0e1a2f 0%,#101a2c 100%);
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px; padding:16px;
  cursor:pointer; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column; gap:8px;
}
.ksim-intro .game-card:hover{
  transform:translateY(-3px); border-color:#22d3ee;
  box-shadow:0 14px 38px -16px rgba(34,211,238,.45);
}
.ksim-intro .game-card .gc-ic{
  width:46px; height:46px; border-radius:12px;
  background:linear-gradient(135deg, rgba(34,211,238,.22), rgba(168,85,247,.22));
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.ksim-intro .game-card .gc-t{
  font-family:"Sora",system-ui,sans-serif; font-weight:800; font-size:1rem; color:#e2e8f0;
}
.ksim-intro .game-card .gc-d{
  color:#94a3b8; font-size:.83rem; line-height:1.5; flex:1;
}
.ksim-intro .game-card .gc-tags{
  display:flex; gap:6px; flex-wrap:wrap;
}
.ksim-intro .game-card .gc-tags span{
  font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#67e8f9; background:rgba(34,211,238,.1);
  padding:3px 8px; border-radius:999px;
}

.ksim-intro .ksim-games-pitch{
  background:linear-gradient(160deg,#0e1a2f 0%,#101a2c 100%);
  border:1px solid rgba(148,163,184,.18); border-radius:18px;
  padding:22px 24px; margin:0 0 28px;
}
.ksim-intro .ksim-games-pitch h3{
  margin:0 0 12px; font-family:"Sora",system-ui,sans-serif;
  font-size:1.15rem; font-weight:800; color:#e2e8f0;
}
.ksim-intro .ksim-games-pitch ul{
  list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:10px 22px;
}
.ksim-intro .ksim-games-pitch li{
  position:relative; padding:6px 0 6px 22px;
  color:#cbd5e1; font-size:.88rem; line-height:1.55;
}
.ksim-intro .ksim-games-pitch li::before{
  content:""; position:absolute; left:0; top:14px; width:10px; height:10px;
  border-radius:50%; background:linear-gradient(135deg,#22d3ee,#a855f7);
}
.ksim-intro .ksim-games-pitch li strong{ color:#e2e8f0; }
.ksim-intro .ksim-games-btn{
  display:inline-block; margin-top:14px;
  padding:10px 18px; border-radius:10px;
  background:linear-gradient(135deg,#22d3ee,#0ea5e9);
  color:#0a1424; font-weight:800; text-decoration:none;
  transition:transform .15s ease, filter .15s ease;
}
.ksim-intro .ksim-games-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }

.ksim-modal .footnote{
  margin-top:18px; padding-top:14px; border-top:1px solid #1e293b;
  color:#94a3b8; font-size:.78rem; line-height:1.55;
}
.ksim-head{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:18px 22px;
  background:linear-gradient(135deg,#0b1220 0%,#1e293b 50%,#0b1220 100%);
  border-radius:18px;
  box-shadow:0 18px 50px -25px rgba(14,165,233,.55), inset 0 0 0 1px rgba(255,255,255,.04);
}
.ksim-head h1{
  font-family:"Sora",system-ui,sans-serif !important;
  font-size:clamp(1.2rem, 2.4vw, 1.6rem) !important;
  font-weight:900 !important; letter-spacing:-.02em !important;
  margin:0 !important; color:#f8fafc !important;
}
.ksim-head .tag{
  background:rgba(34,211,238,.16); color:#67e8f9;
  border:1px solid rgba(34,211,238,.36);
  padding:4px 12px; border-radius:999px; font-weight:800; font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase;
}
.ksim-head .sub{ color:#cbd5e1; font-size:.92rem; flex:1 1 280px; }
.ksim-head .back{
  color:#cbd5e1; text-decoration:none; font-weight:700; font-size:.85rem;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,.12); background:rgba(15,23,42,.6);
}
.ksim-head .back:hover{ color:#fff; border-color:rgba(255,255,255,.32); }

/* Layout: palette | canvas | side (editor + console)
   Now that the simulator owns the whole viewport (no site nav/footer), we
   give the center canvas a much heftier share of the horizontal real
   estate. Editor stays usable, palette stays compact. */
.ksim-shell{
  display:grid;
  grid-template-columns:260px minmax(0,2.4fr) minmax(0,1fr);
  grid-template-rows:auto auto;
  grid-template-areas:
    "palette canvas editor"
    "console console console";
  gap:14px;
  padding:0 14px 24px;
  min-height:calc(100vh - 70px); /* topbar ~52px + a little gap */
}
.ksim-palette{ grid-area:palette; }
.ksim-canvas-pane{ grid-area:canvas; }
.ksim-editor-pane{ grid-area:editor; }
.ksim-console-pane{ grid-area:console; }

@media (max-width:1180px){
  .ksim-shell{
    grid-template-columns:240px 1fr;
    grid-template-areas:
      "palette canvas"
      "editor  editor"
      "console console";
  }
}
@media (max-width:780px){
  .ksim-shell{
    grid-template-columns:1fr;
    grid-template-areas:
      "palette"
      "canvas"
      "editor"
      "console";
  }
}

.ksim-pane{
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 12px 40px -28px rgba(0,0,0,.7);
  min-width:0;
}
.ksim-canvas-pane{ display:flex; flex-direction:column; }
.ksim-console-pane .ksim-console{ min-height:240px; }
.ksim-pane-head{
  padding:12px 16px; background:var(--panel-2); border-bottom:1px solid var(--line);
  color:#e2e8f0; font-size:.8rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.ksim-pane-head .pill{
  background:rgba(14,165,233,.16); color:#7dd3fc;
  border:1px solid rgba(14,165,233,.3);
  padding:2px 8px; border-radius:999px; font-size:.7rem;
}

/* --- Palette --- */
.ksim-palette{ display:flex; flex-direction:column; }
.ksim-palette .scroll{ overflow:auto; padding:10px; display:flex; flex-direction:column; gap:8px; max-height:min(82vh, 980px); }
.ksim-board-pick{
  display:flex; flex-direction:column; gap:6px;
  padding:8px; background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
}
.ksim-board-pick label{ font-size:.72rem; color:#94a3b8; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.ksim-board-pick select{
  width:100%; background:#0b1220; color:#e5edff; border:1px solid var(--line-2);
  padding:8px 10px; border-radius:8px; font-weight:700; font-size:.86rem;
}
.ksim-group-title{
  color:#94a3b8; font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em;
  padding:6px 6px 2px;
}
.ksim-comp{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; background:#0b1220; border:1px solid var(--line);
  border-radius:10px; cursor:pointer; transition:transform .12s ease, border-color .12s ease, background .12s ease;
  user-select:none;
}
.ksim-comp:hover{ transform:translateY(-1px); border-color:var(--accent); background:#0d1426; }
.ksim-comp .ic{
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1e293b,#0f172a); border:1px solid var(--line-2);
}
.ksim-comp .meta{ flex:1; min-width:0; }
.ksim-comp .meta .name{ font-weight:800; font-size:.86rem; color:#e5edff; line-height:1.15; }
.ksim-comp .meta .pins{ font-size:.7rem; color:#94a3b8; }
.ksim-comp.disabled{ opacity:.4; cursor:not-allowed; }

/* --- Canvas --- */
.ksim-canvas-wrap{ position:relative; flex:1; min-height:min(78vh, 980px); background:radial-gradient(circle at 20% 0%, #11203a 0%, #0b1220 60%); }
.ksim-canvas{ width:100%; height:100%; display:block; touch-action:none; }
.ksim-fps{
  position:absolute; top:10px; right:12px; padding:4px 10px;
  background:rgba(15,23,42,.7); border:1px solid var(--line-2); border-radius:999px;
  font-size:.72rem; color:#94a3b8; font-weight:700; pointer-events:none;
  font-variant-numeric:tabular-nums;
}
.ksim-fps .ok{ color:#22c55e; } .ksim-fps .warn{ color:#f59e0b; } .ksim-fps .err{ color:#ef4444; }

.ksim-toolbar{
  display:flex; gap:8px; padding:10px 12px; background:var(--panel-2);
  border-bottom:1px solid var(--line); align-items:center; flex-wrap:wrap;
}
.ksim-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:#1e293b; color:#fff; border:1px solid var(--line-2);
  padding:7px 12px; border-radius:9px; cursor:pointer; font-weight:800; font-size:.82rem;
  transition:background .12s ease, transform .08s ease;
}
.ksim-btn:hover{ background:#243049; }
.ksim-btn:active{ transform:translateY(1px); }
.ksim-btn.primary{ background:#16a34a; border-color:#16a34a; }
.ksim-btn.primary:hover{ background:#15803d; }
.ksim-btn.danger{ background:#dc2626; border-color:#dc2626; }
.ksim-btn.danger:hover{ background:#b91c1c; }
.ksim-btn.ghost{ background:transparent; }
.ksim-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.ksim-toolbar .spacer{ flex:1; }
.ksim-toolbar select{
  background:#0b1220; color:#e5edff; border:1px solid var(--line-2);
  padding:6px 10px; border-radius:8px; font-weight:700; font-size:.82rem;
}

/* component on canvas: drag handles */
.ksim-handle{ cursor:grab; }
.ksim-handle:active{ cursor:grabbing; }

/* Pin tooltip */
.ksim-tooltip{
  position:absolute; pointer-events:none; transform:translate(-50%,-130%);
  background:#0b1220; border:1px solid var(--line-2);
  color:#e5edff; padding:6px 10px; border-radius:8px;
  font-size:.74rem; font-weight:700; box-shadow:0 10px 22px -10px rgba(0,0,0,.5);
  white-space:nowrap; opacity:0; transition:opacity .12s ease;
}
.ksim-tooltip.show{ opacity:1; }

/* --- Side: editor + console --- */
.ksim-side{ display:flex; flex-direction:column; gap:14px; }
.ksim-editor-wrap{ flex:1 1 auto; min-height:600px; display:flex; flex-direction:column; }
.ksim-editor-pane{ display:flex; flex-direction:column; }
.ksim-editor-pane .ksim-pane{ flex:1; display:flex; flex-direction:column; }
.ksim-editor{
  flex:1; width:100%; background:#0b1220; color:#e5edff;
  border:0; outline:none; resize:none; padding:14px 16px;
  font-family:"JetBrains Mono","Fira Code",ui-monospace,monospace;
  font-size:.84rem; line-height:1.55; tab-size:2; min-height:280px;
  caret-color:#22d3ee;
}
.ksim-editor::-webkit-scrollbar{ width:10px; height:10px; }
.ksim-editor::-webkit-scrollbar-thumb{ background:#1e293b; border-radius:8px; }

.ksim-console-wrap{ height:400px; display:flex; flex-direction:column; }
.ksim-console{ font-size:.86rem; padding:14px 18px; line-height:1.55; }
.ksim-console{
  flex:1; overflow:auto; padding:10px 14px;
  font-family:"JetBrains Mono","Fira Code",ui-monospace,monospace;
  font-size:.78rem; line-height:1.5;
  background:#070d18; color:#cbd5e1;
}
.ksim-console .line{ white-space:pre-wrap; word-break:break-word; }
.ksim-console .line.err{ color:#fda4af; }
.ksim-console .line.ok{ color:#86efac; }
.ksim-console .line.sys{ color:#7dd3fc; }
.ksim-console .ts{ color:#475569; margin-right:8px; }

/* Sensor mini-controls */
.ksim-controls{
  position:absolute; left:12px; bottom:12px; right:12px;
  display:flex; flex-wrap:wrap; gap:8px;
  pointer-events:none;
}
.ksim-control{
  pointer-events:auto;
  background:rgba(15,23,42,.85); border:1px solid var(--line-2);
  border-radius:10px; padding:8px 10px;
  display:flex; align-items:center; gap:8px;
  font-size:.78rem; color:#e5edff; font-weight:700;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.6);
}
.ksim-control input[type=range]{ width:140px; }
.ksim-control button.btn-tactile{
  background:#1e293b; color:#fff; border:1px solid var(--line-2);
  padding:5px 12px; border-radius:8px; font-weight:800; font-size:.78rem; cursor:pointer;
}
.ksim-control button.btn-tactile.pressed{ background:#16a34a; }

/* Tiny sparkline */
.ksim-spark{ width:80px; height:18px; display:block; }

/* Quick templates dropdown */
.ksim-templates{ position:relative; }
.ksim-templates-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  background:#0b1220; border:1px solid var(--line-2); border-radius:10px;
  min-width:240px; z-index:30; padding:6px; display:none;
  box-shadow:0 18px 36px -16px rgba(0,0,0,.6);
}
.ksim-templates-menu.open{ display:block; }
.ksim-templates-menu button{
  width:100%; text-align:left; background:transparent; border:0;
  color:#e5edff; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:.82rem;
  font-weight:700;
}
.ksim-templates-menu button:hover{ background:#142036; }
.ksim-templates-menu button{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; line-height:1.25; }
.ksim-templates-menu button b{ font-weight:800; color:#e5edff; font-size:.86rem; }
.ksim-templates-menu button .d{ font-weight:500; color:#94a3b8; font-size:.74rem; }
.ksim-templates-menu button:hover .d{ color:#bae6fd; }
.ksim-templates-menu .sep{ color:#475569; font-size:.7rem; padding:6px 10px 2px; text-transform:uppercase; letter-spacing:.06em; font-weight:900; }
.ksim-templates-menu{ min-width:340px; }

/* Circuit info panel - shows what the loaded sketch is + does */
.ksim-circuit-info{
  display:none; gap:14px; align-items:flex-start;
  background:linear-gradient(135deg, #0e1b3a, #1e0f3a);
  border:1px solid rgba(34,211,238,.45); border-radius:14px;
  padding:18px 22px; margin-bottom:14px;
  color:#f1f5f9; font-size:.98rem; line-height:1.55;
  box-shadow:0 10px 30px -14px rgba(34,211,238,.35);
}
.ksim-circuit-info.show{ display:flex; animation:ksimFade .25s ease; }
.ksim-circuit-info .ic{
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,#22d3ee,#a855f7);
  display:flex; align-items:center; justify-content:center;
  color:#0b1220; font-weight:900; font-size:1.1rem;
  box-shadow:0 8px 24px -8px rgba(34,211,238,.45);
}
.ksim-circuit-info .body{ flex:1; min-width:0; }
.ksim-circuit-info .body h3{
  margin:0 0 6px; font-family:"Sora",system-ui;
  font-size:1.18rem; font-weight:900; color:#fff;
  letter-spacing:-.01em;
}
.ksim-circuit-info .body p{ margin:0; color:#e2e8f0; font-size:.95rem; }
.ksim-circuit-info .body .meta{
  display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;
}
.ksim-circuit-info .body .meta .pill{
  background:rgba(34,211,238,.15); color:#7dd3fc;
  padding:2px 10px; border-radius:999px;
  font-size:.7rem; font-weight:800; letter-spacing:.04em;
}
.ksim-circuit-info .body .meta .pill.lang{ background:rgba(168,85,247,.18); color:#d8b4fe; }
.ksim-circuit-info .body .meta .pill.parts{ background:rgba(34,197,94,.15); color:#86efac; }
.ksim-circuit-info .x{
  background:transparent; border:0; color:#94a3b8; cursor:pointer;
  font-size:1.2rem; line-height:1; padding:0 4px;
}
.ksim-circuit-info .x:hover{ color:#fff; }

/* Active wire animation - flowing dashes when current is "on" */
.ksim-canvas .wire-on{
  stroke-dasharray:8 6;
  animation:ksimFlow 0.9s linear infinite;
}
@keyframes ksimFlow {
  to { stroke-dashoffset: -28; }
}

/* Pin state floating labels */
.ksim-pin-state{
  pointer-events:none;
  font-family:'JetBrains Mono', monospace;
  font-size:9px; font-weight:700;
  fill:#22d3ee;
}

/* Heads-up note + toast */
.ksim-note{
  display:flex; gap:10px; align-items:flex-start;
  background:linear-gradient(135deg, #0f1f3a, #0b1a30);
  border:1px solid rgba(34,211,238,.4); border-radius:12px;
  padding:12px 16px; color:#e2e8f0; font-size:.92rem; line-height:1.55;
}
.ksim-note .dot{
  width:8px; height:8px; border-radius:50%; background:#22d3ee;
  margin-top:6px; flex-shrink:0;
  box-shadow:0 0 0 4px rgba(34,211,238,.18);
}
.ksim-note strong{ color:#7dd3fc; }
.ksim-toast{
  position:fixed; left:18px; bottom:18px; z-index:1100;
  background:#0b1220; color:#e5edff; border:1px solid #243049;
  border-radius:12px; padding:12px 16px; box-shadow:0 24px 50px -22px rgba(0,0,0,.7);
  font-size:.86rem; max-width:340px;
  transform:translateY(20px); opacity:0; transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.ksim-toast.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.ksim-toast strong{ color:#22d3ee; display:block; margin-bottom:4px; font-weight:900; letter-spacing:.02em; }
.ksim-toast.err{ border-color:#7f1d1d; }
.ksim-toast.err strong{ color:#fda4af; }


/* Manual wire mode */
.ksim-btn.wire{
  background:linear-gradient(135deg, #f59e0b, #d97706);
  border-color:#f59e0b; color:#0b1220;
}
.ksim-btn.wire.active{
  background:linear-gradient(135deg, #fde047, #facc15);
  box-shadow:0 0 0 3px rgba(250,204,21,.3), 0 0 18px rgba(250,204,21,.5);
  color:#0b1220;
}
.ksim-canvas-wrap.wire-mode { cursor:crosshair; }
.ksim-canvas-wrap.wire-mode .ksim-pin-hit{ cursor:crosshair; }
.ksim-canvas-wrap.wire-mode .ksim-pin-hit:hover ~ * .ksim-pin{ stroke-width:3; }
.ksim-canvas-wrap.wire-mode circle.ksim-pin{ stroke-width:2.5; }
.ksim-pin-armed{ stroke:#facc15 !important; stroke-width:4 !important; filter:drop-shadow(0 0 6px rgba(250,204,21,.8)); }
.ksim-wire-preview{ stroke:#facc15; stroke-width:2.5; stroke-dasharray:6 4; opacity:.85; pointer-events:none; }
.ksim-wire-banner{
  position:absolute; top:50px; left:50%; transform:translateX(-50%); z-index:20;
  background:rgba(15,23,42,.95); border:1px solid #facc15; border-radius:8px;
  padding:6px 14px; font-size:.82rem; color:#fde047; font-weight:700;
  pointer-events:none; box-shadow:0 8px 24px -8px rgba(250,204,21,.4);
}

/* Lessons (step-by-step tutorials) panel — slides in from right */
.ksim-btn.lesson{
  background:linear-gradient(135deg, #16a34a, #15803d);
  border-color:#16a34a; color:#fff;
}
.ksim-btn.lesson:hover{ background:linear-gradient(135deg, #22c55e, #16a34a); }
.ksim-lesson-panel{
  position:fixed; right:-460px; top:0; bottom:0; z-index:280;
  width:440px; max-width:90vw;
  background:linear-gradient(180deg, #0f1b30 0%, #0b1220 100%);
  border-left:1px solid #243049;
  display:flex; flex-direction:column;
  transition:right .28s ease;
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.7);
}
.ksim-lesson-panel.open{ right:0; }
.ksim-lp-head{
  padding:14px 18px; background:#0f172a; border-bottom:1px solid #1e293b;
  display:flex; align-items:center; gap:10px;
}
.ksim-lp-head h3{ margin:0; color:#fff; font-family:"Sora",system-ui; font-size:1rem; font-weight:900; flex:1; min-width:0; }
.ksim-lp-head .x{
  background:transparent; border:0; color:#94a3b8; font-size:1.4rem; cursor:pointer; padding:0 4px; line-height:1;
}
.ksim-lp-head .x:hover{ color:#fff; }
.ksim-lp-body{ flex:1; overflow:auto; padding:16px 20px; color:#e5edff; }
.ksim-lp-intro{
  background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3);
  border-radius:10px; padding:12px 14px; color:#bbf7d0;
  font-size:.88rem; line-height:1.5; margin-bottom:14px;
}
.ksim-lp-list{
  display:flex; flex-direction:column; gap:8px;
}
.ksim-lp-list .lesson-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:#0b1220; border:1px solid #1e293b; border-radius:10px;
  cursor:pointer; font-size:.86rem; color:#e5edff;
}
.ksim-lp-list .lesson-row:hover{ border-color:#22c55e; }
.ksim-lp-list .lesson-row .num{
  width:28px; height:28px; border-radius:50%; background:#1e293b;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:.84rem; color:#94a3b8; flex-shrink:0;
}
.ksim-lp-list .lesson-row.done{ background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.4); }
.ksim-lp-list .lesson-row.done .num{ background:#22c55e; color:#0b1220; }
.ksim-lp-list .lesson-row.active{ border-color:#22d3ee; }
.ksim-lp-list .lesson-row .meta{ flex:1; min-width:0; }
.ksim-lp-list .lesson-row .meta b{ font-weight:800; }
.ksim-lp-list .lesson-row .meta span{ display:block; color:#94a3b8; font-size:.74rem; }

.ksim-lp-step{
  background:#0b1220; border:1px solid #243049; border-radius:12px;
  padding:14px 16px; margin-bottom:10px;
}
.ksim-lp-step .step-head{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.ksim-lp-step .step-head .num{
  width:26px; height:26px; border-radius:50%;
  background:#1e293b; color:#94a3b8;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:.8rem; flex-shrink:0;
}
.ksim-lp-step.done .step-head .num{ background:#22c55e; color:#0b1220; }
.ksim-lp-step.active{ border-color:#22d3ee; box-shadow:0 0 0 1px rgba(34,211,238,.25); }
.ksim-lp-step.active .step-head .num{ background:#22d3ee; color:#0b1220; }
.ksim-lp-step .step-head .title{ font-weight:800; font-size:.92rem; }
.ksim-lp-step .instruction{ color:#cbd5e1; font-size:.86rem; line-height:1.5; }
.ksim-lp-step .instruction code{
  background:#1e293b; color:#7dd3fc; padding:1px 6px; border-radius:4px;
  font-family:"JetBrains Mono",monospace; font-size:.78rem;
}
.ksim-lp-actions{
  display:flex; gap:6px; margin-top:10px;
}
.ksim-lp-actions button{
  background:#1e293b; color:#cbd5e1; border:1px solid #334155;
  padding:6px 12px; border-radius:6px; font-size:.74rem; font-weight:700; cursor:pointer;
}
.ksim-lp-actions button:hover{ background:#243049; border-color:#22d3ee; color:#fff; }
.ksim-lp-actions button.skip{ margin-left:auto; opacity:.7; }
.ksim-lp-actions button.reveal{ background:#374151; color:#fde047; border-color:#facc15; }
.ksim-lp-warn{
  margin-top:10px; padding:12px 14px;
  background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.32); border-radius:8px;
  color:#bae6fd; font-size:.86rem; line-height:1.6;
}
.ksim-lp-warn code{
  background:#0b1220; color:#7dd3fc; padding:1px 7px; border-radius:4px;
  font-family:"JetBrains Mono",monospace; font-size:.78rem; font-weight:600;
}
.ksim-lp-warn b{ color:#fecaca; }
.ksim-lp-warn ul{ margin:6px 0 0; padding:0 0 0 20px; }
.ksim-lp-warn li{ margin:3px 0; }
.ksim-lp-hint{
  margin-top:10px; padding:10px 12px;
  background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3); border-radius:8px;
  color:#fde68a; font-size:.82rem; line-height:1.5;
}
.ksim-lp-foot{
  padding:10px 16px; border-top:1px solid #1e293b; background:#0f172a;
  display:flex; gap:8px; align-items:center;
}
.ksim-lp-foot .progress{
  flex:1; height:6px; background:#1e293b; border-radius:3px; overflow:hidden;
}
.ksim-lp-foot .progress .bar{ height:100%; background:linear-gradient(90deg,#22c55e,#22d3ee); transition:width .3s ease; }
.ksim-lp-foot .pct{ color:#94a3b8; font-size:.74rem; font-weight:700; min-width:34px; text-align:right; }
.ksim-lp-foot button{
  background:#1e293b; color:#fff; border:1px solid #334155;
  padding:6px 14px; border-radius:6px; font-weight:700; font-size:.8rem; cursor:pointer;
}
.ksim-lp-foot button.primary{ background:#16a34a; border-color:#16a34a; }
.ksim-lp-foot button[disabled]{ opacity:.4; cursor:not-allowed; }

/* Explain button + modal */
.ksim-btn.explain{
  background:linear-gradient(135deg, #8b5cf6, #a855f7);
  border-color:#a855f7; color:#fff;
}
.ksim-btn.explain:hover{ background:linear-gradient(135deg, #7c3aed, #9333ea); }
.ksim-explain-modal{
  position:fixed; inset:0; z-index:300;
  background:rgba(2,6,18,.78); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.ksim-explain-modal.open{ display:flex; }
.ksim-explain-card{
  width:min(700px, 100%); max-height:84vh;
  background:linear-gradient(135deg, #1e1b4b, #0f172a);
  border:1px solid rgba(168,85,247,.5); border-radius:14px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
}
.ksim-explain-card .head{
  padding:14px 18px; background:#0f172a; border-bottom:1px solid #1e293b;
  display:flex; align-items:center; gap:10px;
}
.ksim-explain-card .head h3{ margin:0; color:#fff; font-family:"Sora",system-ui; font-size:1.05rem; font-weight:900; }
.ksim-explain-card .head .x{ margin-left:auto; background:transparent; border:0; color:#94a3b8; font-size:1.4rem; cursor:pointer; }
.ksim-explain-card .body{ overflow:auto; padding:16px 22px; color:#e5edff; font-size:.92rem; line-height:1.6; }
.ksim-explain-card .step{
  background:rgba(255,255,255,.04); border-left:3px solid #a855f7;
  padding:10px 14px; border-radius:6px; margin-bottom:10px;
}
.ksim-explain-card .step b{ color:#c4b5fd; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:.84rem; display:block; margin-bottom:4px; }

/* Challenges panel under Circuit Info */
.ksim-challenges{
  display:none; gap:14px; align-items:flex-start;
  background:linear-gradient(135deg, rgba(245,158,11,.1), rgba(217,70,239,.08));
  border:1px solid rgba(245,158,11,.4); border-radius:12px;
  padding:14px 18px; margin-bottom:14px;
  color:#fde68a;
}
.ksim-challenges.show{ display:flex; }
.ksim-challenges .ic{
  width:36px; height:36px; border-radius:8px;
  background:linear-gradient(135deg,#f59e0b,#d97706);
  display:flex; align-items:center; justify-content:center;
  color:#0b1220; font-weight:900; font-size:1rem; flex-shrink:0;
}
.ksim-challenges .body{ flex:1; min-width:0; color:#e5edff; }
.ksim-challenges h4{ margin:0 0 8px; color:#fbbf24; font-size:.9rem; font-weight:900; letter-spacing:.02em; }
.ksim-challenges .ch-list{ display:flex; flex-direction:column; gap:6px; }
.ksim-challenges .ch-row{
  display:flex; gap:10px; align-items:flex-start;
  padding:8px 12px; background:rgba(0,0,0,.25); border-radius:8px;
  font-size:.86rem; line-height:1.4;
}
.ksim-challenges .ch-row.done{ background:rgba(34,197,94,.18); color:#bbf7d0; }
.ksim-challenges .ch-row .check{
  flex-shrink:0; width:20px; height:20px; border-radius:50%;
  border:2px solid #94a3b8; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:900;
}
.ksim-challenges .ch-row.done .check{ background:#22c55e; border-color:#22c55e; color:#0b1220; }
.ksim-challenges .ch-row .lvl{
  font-size:.66rem; padding:1px 7px; border-radius:999px;
  background:rgba(245,158,11,.2); color:#fbbf24; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; flex-shrink:0; align-self:flex-start; margin-top:2px;
}

/* Badge bar - shows collected achievements */
.ksim-badges{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:8px 14px; background:#0f172a; border:1px solid #243049; border-radius:10px;
  font-size:.78rem; color:#94a3b8; margin-bottom:10px;
}
.ksim-badges .label{ font-weight:900; color:#fde68a; letter-spacing:.04em; }
.ksim-badges .badge{
  background:linear-gradient(135deg, #f59e0b, #d97706);
  color:#0b1220; padding:3px 10px; border-radius:999px;
  font-weight:800; font-size:.74rem; letter-spacing:.02em;
  box-shadow:0 4px 12px -4px rgba(245,158,11,.5);
}
.ksim-badges .count{ background:#1e293b; color:#e5edff; padding:3px 10px; border-radius:999px; font-weight:700; font-size:.72rem; margin-left:auto; }
.ksim-badges .empty{ font-style:italic; color:#64748b; }

/* Live signal chart - oscilloscope-style at the bottom of canvas */
.ksim-chart{
  position:absolute; left:12px; right:12px; bottom:80px; height:120px;
  background:rgba(11,18,32,.85); border:1px solid #243049; border-radius:10px;
  padding:8px 10px; pointer-events:none;
  display:none;
}
.ksim-chart.show{ display:block; }
.ksim-chart .head{
  display:flex; gap:8px; align-items:center;
  font-size:.7rem; color:#94a3b8; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:4px;
}
.ksim-chart .head .legend{ display:flex; gap:10px; flex-wrap:wrap; }
.ksim-chart .head .swatch{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px; vertical-align:middle; }
.ksim-chart .head .clear-btn{ margin-left:auto; pointer-events:auto; cursor:pointer; background:transparent; border:1px solid #334155; color:#94a3b8; padding:2px 8px; border-radius:5px; font-size:.66rem; font-weight:700; }
.ksim-chart .head .clear-btn:hover{ color:#fff; border-color:#0ea5e9; }
.ksim-chart svg{ width:100%; height:88px; display:block; }

/* Particle effects */
@keyframes ksimGlowBurst {
  0%   { r:6; opacity:0; }
  35%  { opacity:.7; }
  100% { r:32; opacity:0; }
}
@keyframes ksimSoundRipple {
  0%   { r:8; opacity:.7; stroke-width:3; }
  100% { r:48; opacity:0; stroke-width:.5; }
}
@keyframes ksimAngularSweep {
  0%   { opacity:.7; }
  100% { opacity:0; }
}
.ksim-particle{ pointer-events:none; }

/* Real-world callout in Circuit Info card */
.ksim-circuit-info .real-world{
  margin-top:10px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.32);
  border-radius:8px; padding:8px 12px;
  font-size:.86rem; color:#bbf7d0;
}
.ksim-circuit-info .real-world strong{ color:#86efac; }

/* Loading overlay (template/recipe load) */
.ksim-loading{
  position:fixed; inset:0; z-index:300;
  background:rgba(2,6,18,.78); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
}
.ksim-loading.open{ display:flex; animation:ksimFade .18s ease; }
@keyframes ksimFade{ from{opacity:0;} to{opacity:1;} }
.ksim-loading .card{
  background:#0b1220; border:1px solid #243049; border-radius:16px;
  padding:26px 30px; min-width:300px; max-width:420px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
}
.ksim-loading .spinner{
  width:46px; height:46px; border-radius:50%;
  border:3px solid #1e293b; border-top-color:#22d3ee;
  animation:ksimSpin .85s linear infinite;
}
@keyframes ksimSpin{ to{ transform:rotate(360deg); } }
.ksim-loading .title{ font-family:"Sora",system-ui; font-weight:900; color:#fff; font-size:1.02rem; }
.ksim-loading .sub{ color:#94a3b8; font-size:.85rem; text-align:center; }
.ksim-loading .steps{ display:flex; flex-direction:column; gap:4px; width:100%; }
.ksim-loading .steps li{
  list-style:none; padding:5px 0; font-size:.78rem; color:#64748b;
  display:flex; align-items:center; gap:8px;
}
.ksim-loading .steps li.done{ color:#86efac; }
.ksim-loading .steps li.active{ color:#7dd3fc; }
.ksim-loading .dot-ic{ width:10px; height:10px; border-radius:50%; background:#1e293b; flex-shrink:0; }
.ksim-loading .steps li.done .dot-ic{ background:#22c55e; }
.ksim-loading .steps li.active .dot-ic{ background:#22d3ee; box-shadow:0 0 0 4px rgba(34,211,238,.2); }

/* Main help panel */
.ksim-help{
  background:linear-gradient(135deg, #1e1b4b, #0f172a);
  border:1px solid rgba(168,85,247,.45);
  border-radius:14px; padding:0;
  overflow:hidden;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.35);
}
.ksim-help summary{
  cursor:pointer; padding:16px 22px; list-style:none;
  display:flex; align-items:center; gap:12px;
  font-weight:900; color:#fff; font-size:1.05rem;
  letter-spacing:.01em;
}
.ksim-help summary::-webkit-details-marker{ display:none; }
.ksim-help summary .chev{ margin-left:auto; transition:transform .2s ease; color:#c4b5fd; font-size:1.2rem; }
.ksim-help[open] summary .chev{ transform:rotate(90deg); }
.ksim-help summary:hover{ background:rgba(168,85,247,.06); }
.ksim-help .help-body{
  padding:6px 22px 22px; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px;
  color:#e2e8f0; font-size:.92rem; line-height:1.6;
}
.ksim-help .help-body h4{
  margin:6px 0; color:#fff; font-family:"Sora",system-ui; font-size:.9rem;
  text-transform:uppercase; letter-spacing:.08em; font-weight:900;
}
.ksim-help .help-body p{ margin:0; color:#cbd5e1; }
.ksim-help .help-body code{
  background:#0b1220; color:#7dd3fc; padding:1px 6px; border-radius:4px;
  font-family:"JetBrains Mono",monospace; font-size:.78rem;
}
.ksim-help .help-body kbd{
  background:#0b1220; color:#e5edff; padding:1px 7px; border-radius:4px;
  border:1px solid #334155; font-family:"JetBrains Mono",monospace; font-size:.72rem;
}

/* Per-recipe Help button + detail flyout */
.ksim-recipe-card .info-btn{
  background:#1e293b; border:1px solid #334155; color:#7dd3fc;
  width:24px; height:24px; border-radius:50%;
  font-weight:900; font-size:.78rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ksim-recipe-card .info-btn:hover{ background:#0ea5e9; color:#0b1220; }
.ksim-recipe-detail{
  background:#0b1220; border:1px solid #243049; border-radius:10px;
  padding:12px 14px; margin-top:6px; display:none;
  font-size:.82rem; color:#cbd5e1; line-height:1.5;
}
.ksim-recipe-detail.open{ display:block; animation:ksimFade .15s ease; }
.ksim-recipe-detail .row{ display:flex; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.ksim-recipe-detail .pill-c{ background:rgba(34,211,238,.15); color:#7dd3fc; padding:2px 8px; border-radius:999px; font-size:.7rem; font-weight:800; }
.ksim-recipe-detail pre{
  background:#070d18; color:#cbd5e1; border-radius:8px; padding:10px;
  font-size:.74rem; font-family:"JetBrains Mono",monospace;
  max-height:140px; overflow:auto; margin:6px 0 0;
}
.ksim-recipe-detail .use-btn{
  background:#16a34a; color:#fff; border:0; padding:6px 14px;
  border-radius:8px; font-weight:800; cursor:pointer; font-size:.78rem; margin-top:8px;
}
.ksim-recipe-detail .use-btn:hover{ background:#15803d; }

/* Component integration hint card.
   Positioned bottom-LEFT so it stays clear of the chat widget that
   sits bottom-right on every public page. Goes to the bottom on
   wider screens, slides up on mobile too. */
.ksim-hint{
  position:fixed; left:18px; bottom:18px; z-index:1100;
  width:min(440px, calc(100vw - 36px)); max-height:78vh;
  background:#0b1220; border:1px solid #243049; border-radius:14px;
  color:#e5edff; box-shadow:0 28px 60px -22px rgba(0,0,0,.8);
  transform:translateY(20px); opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none; display:flex; flex-direction:column; overflow:hidden;
}
@media (max-width: 720px){
  .ksim-hint{ left:8px; right:8px; width:auto; bottom:80px; }
}
.ksim-hint.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.ksim-hint .head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; background:#0f172a; border-bottom:1px solid #1e293b;
}
.ksim-hint .head .ic{
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg,#22d3ee,#0ea5e9);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-weight:900; color:#0b1220; font-size:.9rem;
}
.ksim-hint .head h4{
  margin:0; font-family:"Sora",system-ui; font-weight:900; font-size:.95rem;
  color:#fff; flex:1; min-width:0;
}
.ksim-hint .head .x{
  background:transparent; border:0; color:#94a3b8; font-size:1.2rem;
  cursor:pointer; padding:0 4px; line-height:1;
}
.ksim-hint .head .x:hover{ color:#fff; }
.ksim-hint .body{ padding:12px 14px; overflow:auto; }
.ksim-hint .desc{
  color:#cbd5e1; font-size:.85rem; line-height:1.5; margin:0 0 10px;
}
.ksim-hint .ctxhint{
  background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.25);
  border-radius:8px; padding:8px 10px; font-size:.78rem; color:#7dd3fc;
  margin-bottom:10px;
}
.ksim-hint .warn{
  background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.35);
  border-radius:8px; padding:8px 10px; font-size:.78rem; color:#fbbf24;
  margin-bottom:10px;
  display:flex; gap:8px; align-items:flex-start;
}
.ksim-hint .warn strong{ color:#fde68a; }
.ksim-hint pre.snippet{
  background:#070d18; color:#e5edff; border-radius:8px; padding:10px 12px;
  font-family:"JetBrains Mono",monospace; font-size:.76rem; line-height:1.55;
  max-height:240px; overflow:auto; margin:0; white-space:pre;
}
.ksim-hint .actions{
  display:flex; gap:6px; padding:10px 14px; background:#0f172a;
  border-top:1px solid #1e293b; flex-wrap:wrap;
}
.ksim-hint .actions button{
  flex:1; min-width:90px;
  background:#1e293b; color:#e5edff; border:1px solid #334155;
  padding:7px 10px; border-radius:8px; font-weight:800; font-size:.78rem; cursor:pointer;
}
.ksim-hint .actions button:hover{ background:#243049; border-color:#0ea5e9; }
.ksim-hint .actions button.ok{ background:#16a34a; border-color:#16a34a; color:#fff; }
.ksim-hint .actions button.ok:hover{ background:#15803d; }

/* Recipes modal */
.ksim-modal{
  position:fixed; inset:0; z-index:200;
  background:rgba(2,6,18,.7); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.ksim-modal.open{ display:flex; }
.ksim-modal-card{
  width:min(820px, 100%); max-height:84vh; display:flex; flex-direction:column;
  background:#0b1220; border:1px solid #243049; border-radius:16px; overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
}
.ksim-modal-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px; border-bottom:1px solid #1e293b; background:#0f172a;
}
.ksim-modal-head h3{ margin:0; font-family:"Sora", system-ui; font-size:1.05rem; color:#fff; font-weight:900; }
.ksim-modal-x{
  margin-left:auto; background:transparent; color:#cbd5e1; border:0;
  font-size:1.4rem; cursor:pointer; line-height:1;
}
.ksim-modal-x:hover{ color:#fff; }
.ksim-modal-tabs{ display:flex; gap:6px; padding:10px 14px; flex-wrap:wrap; border-bottom:1px solid #1e293b; }
.ksim-modal-tabs button{
  background:#0f172a; color:#cbd5e1; border:1px solid #243049;
  padding:5px 12px; border-radius:999px; cursor:pointer; font-weight:800; font-size:.78rem;
}
.ksim-modal-tabs button.active{ background:#0ea5e9; color:#0b1220; border-color:#0ea5e9; }
.ksim-modal-tabs button:hover{ border-color:#0ea5e9; }
.ksim-modal-search{ display:flex; gap:10px; align-items:center; padding:10px 14px; border-bottom:1px solid #1e293b; flex-wrap:wrap; }
.ksim-modal-search input[type=text]{
  flex:1 1 220px; background:#0f172a; color:#e5edff; border:1px solid #243049;
  padding:8px 12px; border-radius:8px; font-size:.86rem;
}
.ksim-recipes-mode{ display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:#cbd5e1; cursor:pointer; }
.ksim-modal-body{ flex:1; overflow:auto; padding:10px 14px; display:grid; gap:8px; }
.ksim-recipes-loading{ color:#94a3b8; padding:20px; text-align:center; font-size:.86rem; }
.ksim-recipe-card{
  background:#0f172a; border:1px solid #1e293b; border-radius:10px;
  padding:10px 12px; cursor:pointer; transition:border-color .12s ease, transform .08s ease;
  display:flex; gap:10px; align-items:center;
}
.ksim-recipe-card:hover{ border-color:#0ea5e9; transform:translateY(-1px); }
.ksim-recipe-card .pf{
  font-size:.66rem; font-weight:900; padding:3px 8px; border-radius:999px;
  background:rgba(34,211,238,.15); color:#67e8f9; letter-spacing:.05em; text-transform:uppercase;
  flex-shrink:0;
}
.ksim-recipe-card .pf.python{ background:rgba(168,85,247,.18); color:#d8b4fe; }
.ksim-recipe-card .ttl{ font-weight:800; color:#e5edff; font-size:.88rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ksim-recipe-card .sz{ font-family:"JetBrains Mono", monospace; font-size:.7rem; color:#64748b; flex-shrink:0; }
.ksim-modal-foot{ padding:10px 14px; border-top:1px solid #1e293b; background:#0f172a; }

/* Components area legend */
.ksim-legend{
  display:flex; gap:10px; flex-wrap:wrap; font-size:.72rem; color:#94a3b8;
  padding:6px 14px 10px;
}
.ksim-legend i{
  display:inline-block; width:12px; height:3px; border-radius:2px; margin-right:4px; vertical-align:middle;
}

/* =============================================================
   PLAYFUL LIGHT THEME for the intro/welcome page only.
   Makes it inviting for students/teachers — soft cream-sky gradient
   background, white cards with colourful top stripes, big icons,
   vibrant CTAs. The rest of the simulator (canvas, modals, gate,
   library) stays dark for legibility against bright LEDs/code.
   Scoped tightly so nothing else changes.
   ============================================================= */
body.bare-chrome .ksim-intro{
  background:
    radial-gradient(circle at 12% 12%, rgba(244,114,182,.18), transparent 38%),
    radial-gradient(circle at 88% 8%,  rgba(34,211,238,.22),  transparent 42%),
    radial-gradient(circle at 78% 92%, rgba(168,85,247,.18),  transparent 42%),
    radial-gradient(circle at 18% 88%, rgba(251,191,36,.18),  transparent 42%),
    linear-gradient(160deg, #fff8ee 0%, #f0f9ff 55%, #fdf2f8 100%) !important;
  color:#1e293b !important;
}

/* Decorative confetti dots in the background */
body.bare-chrome .ksim-intro::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    radial-gradient(circle, #fcd34d 2px, transparent 2px),
    radial-gradient(circle, #f9a8d4 2px, transparent 2px),
    radial-gradient(circle, #67e8f9 2px, transparent 2px),
    radial-gradient(circle, #c4b5fd 2px, transparent 2px);
  background-size: 220px 220px, 280px 280px, 320px 320px, 260px 260px;
  background-position: 30px 60px, 140px 200px, 80px 320px, 260px 140px;
  opacity:.55;
}

/* Hero block on light background */
body.bare-chrome .ksim-intro .hero{ color:#1e293b !important; }
body.bare-chrome .ksim-intro .hero .eyebrow{
  background:linear-gradient(135deg, #fce7f3, #cffafe) !important;
  color:#0e7490 !important;
  border-color:rgba(34,211,238,.55) !important;
  font-size:.78rem !important;
  box-shadow:0 4px 14px -8px rgba(34,211,238,.4);
}
body.bare-chrome .ksim-intro .hero h1{
  background:linear-gradient(135deg, #0f172a 0%, #0ea5e9 35%, #a855f7 70%, #ec4899 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
body.bare-chrome .ksim-intro .hero p.lede{
  color:#475569 !important; font-weight:500;
}

/* CTAs — bigger, bouncier */
body.bare-chrome .ksim-intro .hero .ctas .primary{
  background:linear-gradient(135deg,#0ea5e9,#22d3ee) !important;
  color:#062a3a !important;
  box-shadow:0 14px 30px -12px rgba(14,165,233,.55) !important;
}
body.bare-chrome .ksim-intro .hero .ctas .gold{
  background:linear-gradient(135deg,#fb923c,#f472b6) !important;
  color:#3a2706 !important;
  box-shadow:0 14px 30px -12px rgba(251,146,60,.5) !important;
}
body.bare-chrome .ksim-intro .hero .ctas .ghost{
  background:#ffffff !important; color:#0f172a !important;
  border:1px solid #e2e8f0 !important;
}

/* Trust row on light bg */
body.bare-chrome .ksim-intro .trust-row{ color:#64748b !important; }
body.bare-chrome .ksim-intro .trust-row span::before{ color:#22c55e !important; }

/* Section title */
body.bare-chrome .ksim-intro .section-title{ color:#0f172a !important; }
body.bare-chrome .ksim-intro .section-title small{ color:#64748b !important; }

/* Feature cards — white with rotating coloured top stripes */
body.bare-chrome .ksim-intro .feat{
  background-color:#ffffff !important;
  border:1px solid #e2e8f0 !important;
  border-radius:18px !important;
  padding:22px 18px !important;
  box-shadow:0 8px 22px -16px rgba(15,23,42,.18);
  position:relative; overflow:hidden;
}
body.bare-chrome .ksim-intro .feat::after{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,#0ea5e9,#22d3ee);
}
body.bare-chrome .ksim-intro .feat:nth-child(2)::after{ background:linear-gradient(90deg,#22c55e,#0ea5e9); }
body.bare-chrome .ksim-intro .feat:nth-child(3)::after{ background:linear-gradient(90deg,#f59e0b,#a855f7); }
body.bare-chrome .ksim-intro .feat:nth-child(4)::after{ background:linear-gradient(90deg,#a855f7,#ec4899); }
body.bare-chrome .ksim-intro .feat h3{ color:#0f172a !important; font-size:1.08rem !important; margin-top:6px !important; }
body.bare-chrome .ksim-intro .feat p{ color:#475569 !important; }
body.bare-chrome .ksim-intro .feat .ic{
  width:54px !important; height:54px !important; font-size:1.9rem !important;
  border-radius:14px !important; border:none !important;
  background:linear-gradient(135deg, #cffafe, #ddd6fe) !important;
  box-shadow:0 8px 18px -10px rgba(34,211,238,.45);
}
body.bare-chrome .ksim-intro .feat:nth-child(2) .ic{ background:linear-gradient(135deg, #d1fae5, #cffafe) !important; box-shadow:0 8px 18px -10px rgba(34,197,94,.45); }
body.bare-chrome .ksim-intro .feat:nth-child(3) .ic{ background:linear-gradient(135deg, #fef3c7, #ddd6fe) !important; box-shadow:0 8px 18px -10px rgba(245,158,11,.45); }
body.bare-chrome .ksim-intro .feat:nth-child(4) .ic{ background:linear-gradient(135deg, #fce7f3, #ddd6fe) !important; box-shadow:0 8px 18px -10px rgba(168,85,247,.45); }
body.bare-chrome .ksim-intro .feat:hover{
  transform:translateY(-4px) scale(1.01);
  border-color:#22d3ee !important;
  background-color:#ffffff !important;
  box-shadow:0 14px 30px -16px rgba(15,23,42,.25);
}

/* Showcase shots — keep frame dark (it's a simulator screen), but
   wrap card is white with a coloured tab. */
body.bare-chrome .ksim-intro .shot{
  background-color:#ffffff !important;
  border:1px solid #e2e8f0 !important;
  border-radius:18px !important;
  box-shadow:0 8px 22px -16px rgba(15,23,42,.18);
  position:relative; overflow:hidden;
}
body.bare-chrome .ksim-intro .shot::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, #0ea5e9, #22d3ee);
}
body.bare-chrome .ksim-intro .shot:nth-child(2)::before{ background:linear-gradient(90deg,#22c55e,#0ea5e9); }
body.bare-chrome .ksim-intro .shot:nth-child(3)::before{ background:linear-gradient(90deg,#fb923c,#facc15); }
body.bare-chrome .ksim-intro .shot:nth-child(4)::before{ background:linear-gradient(90deg,#a855f7,#ec4899); }
body.bare-chrome .ksim-intro .shot .lbl{ color:#0f172a !important; font-size:1rem !important; }
body.bare-chrome .ksim-intro .shot .desc{ color:#475569 !important; font-size:.84rem !important; }
body.bare-chrome .ksim-intro .shot .frame{
  background:#070d18 !important; border:1px solid #1e293b !important;
}
body.bare-chrome .ksim-intro .shot:hover{
  transform:translateY(-4px) scale(1.01);
  border-color:#22d3ee !important;
}

/* Plans teaser — white cards, coloured ribbons */
body.bare-chrome .ksim-intro .plans-teaser .pt{
  background-color:#ffffff !important;
  background-image:none !important;
  border:1px solid #e2e8f0 !important;
  border-radius:18px !important;
  padding:18px !important;
  box-shadow:0 8px 22px -16px rgba(15,23,42,.18);
  color:#1e293b !important;
}
body.bare-chrome .ksim-intro .plans-teaser .pt .pn{ color:#64748b !important; }
body.bare-chrome .ksim-intro .plans-teaser .pt .pp{ color:#0f172a !important; }
body.bare-chrome .ksim-intro .plans-teaser .pt .pp small{ color:#94a3b8 !important; }
body.bare-chrome .ksim-intro .plans-teaser .pt .pd{ color:#475569 !important; }
body.bare-chrome .ksim-intro .plans-teaser .pt.featured{
  background-color:#ffffff !important;
  background-image:linear-gradient(160deg, rgba(34,211,238,.08), rgba(168,85,247,.05)) !important;
  border:2px solid #22d3ee !important;
  box-shadow:0 18px 42px -14px rgba(34,211,238,.45) !important;
  transform:translateY(-2px);
}
body.bare-chrome .ksim-intro .plans-teaser .pt.featured .pn{ color:#0e7490 !important; }
body.bare-chrome .ksim-intro .plans-teaser .pt.featured::before{
  background:linear-gradient(135deg,#0ea5e9,#22d3ee) !important;
  color:#062a3a !important;
}

/* Footnote */
body.bare-chrome .ksim-intro .footnote{ color:#64748b !important; }

/* Make the wrap a touch wider so cards breathe */
body.bare-chrome .ksim-intro .wrap{ max-width:1180px !important; gap:42px !important; }
body.bare-chrome .ksim-intro{ padding:56px 24px 48px !important; }

/* Mobile tweaks */
@media (max-width:640px){
  body.bare-chrome .ksim-intro .hero h1{ font-size:2rem !important; }
  body.bare-chrome .ksim-intro .feat .ic{ width:48px !important; height:48px !important; font-size:1.6rem !important; }
}


/* ===== Intro: full-page width + hide component hint while overlay up ===== */

/* Intro overlay = no boxed wrap; let cards span the viewport */
body.bare-chrome .ksim-intro .wrap{
  max-width:none !important;
  width:100% !important;
  padding:0 clamp(20px, 4vw, 64px) !important;
}

/* Hero sits flat on the page gradient — no teal block */
body.bare-chrome .ksim-intro .hero{
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border:none !important;
}

/* Suppress the component-hint card + any toasts while the intro is up.
   The simulator's init block adds an LED + Push Button before the intro
   shows, which fires the hint. Hide it cleanly. */
body.bare-chrome .ksim-intro.show ~ .ksim-hint,
body.bare-chrome .ksim-intro.show ~ * .ksim-hint,
body.bare-chrome:has(.ksim-intro.show) .ksim-hint,
body.bare-chrome:has(.ksim-intro.show) #ksim-hint,
body.bare-chrome:has(.ksim-intro.show) .ksim-toast{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}

/* Belt-and-braces: when the intro is up, ALSO hide any open hint by ID.
   Older browsers without :has() get a JS fallback below. */
body.intro-active #ksim-hint,
body.intro-active .ksim-hint,
body.intro-active .ksim-toast{
  display:none !important;
  visibility:hidden !important;
}


/* =============================================================
   AUTH MODAL — light, friendly redesign matching the intro page.
   Scoped under body.bare-chrome so it only applies on the simulator.
   ============================================================= */
body.bare-chrome .ksim-modal{
  background:rgba(15,23,42,.55) !important;
  backdrop-filter:blur(8px);
}
body.bare-chrome .ksim-modal .card{
  max-width:1040px !important;
  background:linear-gradient(160deg,#ffffff 0%, #f8fafc 100%) !important;
  background-color:#ffffff !important;
  border:1px solid #e2e8f0 !important;
  border-radius:22px !important;
  box-shadow:0 30px 80px -16px rgba(15,23,42,.45) !important;
  overflow:hidden;
}
body.bare-chrome .ksim-modal .card .close{
  top:18px !important; right:18px !important;
  width:36px !important; height:36px !important;
  background:#f1f5f9 !important;
  border:1px solid #e2e8f0 !important;
  color:#475569 !important;
  font-size:1.2rem !important;
}
body.bare-chrome .ksim-modal .card .close:hover{
  background:#fee2e2 !important; color:#dc2626 !important; border-color:#fecaca !important;
}

/* Hero */
body.bare-chrome .ksim-modal .hero{
  background:
    radial-gradient(circle at 12% 12%, rgba(244,114,182,.18), transparent 38%),
    radial-gradient(circle at 88% 8%, rgba(34,211,238,.22), transparent 42%),
    linear-gradient(160deg, #fdf2f8 0%, #f0f9ff 60%, #fff8ee 100%) !important;
  padding:36px 40px 28px !important;
  border-bottom:1px solid #e2e8f0 !important;
  color:#0f172a !important;
}
body.bare-chrome .ksim-modal .hero .eyebrow{
  background:linear-gradient(135deg, #fce7f3, #cffafe) !important;
  color:#0e7490 !important;
  border:1px solid rgba(34,211,238,.55) !important;
  padding:5px 12px !important; font-size:.72rem !important;
  box-shadow:0 4px 14px -8px rgba(34,211,238,.4);
}
body.bare-chrome .ksim-modal .hero h2{
  font-size:1.7rem !important; line-height:1.2 !important;
  background:linear-gradient(135deg, #0f172a 0%, #0ea5e9 50%, #a855f7 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
body.bare-chrome .ksim-modal .hero p{ color:#475569 !important; max-width:640px; }

/* Body */
body.bare-chrome .ksim-modal .body{
  padding:28px 40px 36px !important;
  background:#ffffff !important;
  color:#0f172a !important;
  grid-template-columns:1.05fr 1fr !important;
  gap:36px !important;
}
@media (max-width:760px){
  body.bare-chrome .ksim-modal .body{ padding:22px !important; gap:22px !important; }
  body.bare-chrome .ksim-modal .hero{ padding:24px 22px 18px !important; }
  body.bare-chrome .ksim-modal .hero h2{ font-size:1.35rem !important; }
}

/* Tabs */
body.bare-chrome .ksim-modal .modal-tabs{
  display:flex; gap:0 !important;
  background:#f1f5f9 !important;
  border:1px solid #e2e8f0 !important;
  border-radius:12px !important;
  padding:4px !important;
  margin-bottom:18px !important;
}
body.bare-chrome .ksim-modal .modal-tabs button{
  background:transparent !important; color:#64748b !important;
  border:none !important; padding:10px 14px !important;
  font-size:.92rem !important; font-weight:800 !important;
  border-radius:9px !important;
  transition:all .18s ease;
}
body.bare-chrome .ksim-modal .modal-tabs button.active{
  background:#ffffff !important; color:#0f172a !important;
  box-shadow:0 4px 10px -4px rgba(15,23,42,.18);
}

/* Forms */
body.bare-chrome .ksim-modal form.signin{ gap:14px !important; }
body.bare-chrome .ksim-modal form.signin .ftitle{
  color:#0f172a !important; font-size:1.15rem !important;
  margin:0 !important;
}
body.bare-chrome .ksim-modal form.signin .fsub{
  color:#64748b !important; margin:-6px 0 8px !important; font-size:.88rem !important;
}
body.bare-chrome .ksim-modal form.signin label{
  color:#475569 !important; font-size:.74rem !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  font-weight:800 !important;
}

/* Icon-prefixed input wrap (added via JS below) */
body.bare-chrome .ksim-modal form.signin .field{
  position:relative; display:flex; flex-direction:column; gap:6px;
}
body.bare-chrome .ksim-modal form.signin .field .input-wrap{
  position:relative;
}
body.bare-chrome .ksim-modal form.signin .field .input-wrap .ic{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:#94a3b8; font-size:1rem; pointer-events:none;
}
body.bare-chrome .ksim-modal form.signin .field .input-wrap .pw-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; cursor:pointer;
  color:#64748b; font-size:.8rem; padding:6px 10px; border-radius:6px;
  font-weight:700;
}
body.bare-chrome .ksim-modal form.signin .field .input-wrap .pw-toggle:hover{ background:#f1f5f9; color:#0f172a; }
body.bare-chrome .ksim-modal form.signin input{
  background:#f8fafc !important;
  background-image:none !important;
  border:1px solid #e2e8f0 !important;
  color:#0f172a !important;
  padding:13px 14px 13px 42px !important;
  border-radius:11px !important;
  font-size:.95rem !important; font-weight:600 !important;
  transition:all .18s ease;
}
body.bare-chrome .ksim-modal form.signin input::placeholder{ color:#94a3b8 !important; opacity:1; }
body.bare-chrome .ksim-modal form.signin input:focus{
  background:#ffffff !important;
  border-color:#0ea5e9 !important;
  box-shadow:0 0 0 4px rgba(14,165,233,.15) !important;
  outline:none;
}
body.bare-chrome .ksim-modal form.signin .row{
  display:flex; gap:8px; align-items:center; justify-content:space-between;
  color:#64748b !important; font-size:.85rem;
}
body.bare-chrome .ksim-modal form.signin .row a{ color:#0ea5e9 !important; cursor:pointer; }
body.bare-chrome .ksim-modal form.signin .row a:hover{ color:#0369a1 !important; text-decoration:underline; }
body.bare-chrome .ksim-modal form.signin .row label{
  text-transform:none !important; letter-spacing:0 !important;
  font-weight:600 !important; font-size:.85rem !important;
  color:#475569 !important;
  display:inline-flex !important; align-items:center; gap:8px;
}
body.bare-chrome .ksim-modal form.signin .row input[type="checkbox"]{
  padding:0 !important; margin:0 !important;
  width:18px; height:18px; border-radius:5px !important;
  background:#ffffff !important; border:1px solid #cbd5e1 !important;
  accent-color:#0ea5e9 !important;
}
body.bare-chrome .ksim-modal form.signin button[type="submit"]{
  margin-top:8px;
  background:linear-gradient(135deg,#0ea5e9,#22d3ee) !important;
  color:#062a3a !important;
  border:none !important;
  padding:14px 18px !important;
  border-radius:11px !important;
  font-weight:900 !important; font-size:1rem !important;
  cursor:pointer; transition:all .18s ease;
  box-shadow:0 12px 30px -14px rgba(14,165,233,.55) !important;
}
body.bare-chrome .ksim-modal form.signin button[type="submit"]:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:0 16px 36px -14px rgba(14,165,233,.7) !important;
}
body.bare-chrome .ksim-modal form.signin button[type="submit"]:disabled{
  opacity:.7; transform:none; cursor:wait;
}

/* Mock social row */
body.bare-chrome .ksim-modal .social-row{
  display:flex; gap:8px; margin-top:6px;
}
body.bare-chrome .ksim-modal .social-row button,
body.bare-chrome .ksim-modal .social-row a{
  flex:1; padding:10px 12px; cursor:pointer; text-decoration:none;
  background:#ffffff; border:1px solid #e2e8f0;
  border-radius:10px; color:#475569; font-weight:700; font-size:.9rem;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:all .15s ease;
}
body.bare-chrome .ksim-modal .social-row button:hover,
body.bare-chrome .ksim-modal .social-row a:hover{
  background:#f8fafc; border-color:#cbd5e1; color:#0f172a;
}
body.bare-chrome .ksim-modal .or-divider{
  display:flex; align-items:center; gap:10px; margin:14px 0 4px;
  color:#94a3b8; font-size:.78rem; font-weight:700;
}
body.bare-chrome .ksim-modal .or-divider::before,
body.bare-chrome .ksim-modal .or-divider::after{
  content:""; flex:1; height:1px; background:#e2e8f0;
}
body.bare-chrome .ksim-modal .footnote{
  color:#94a3b8 !important; border-top-color:#e2e8f0 !important;
}

/* Plans (right column) */
body.bare-chrome .ksim-modal .plans{ gap:12px !important; }
body.bare-chrome .ksim-modal .plan{
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid #e2e8f0 !important;
  border-radius:14px !important;
  padding:18px 18px 16px !important;
  color:#0f172a !important;
  box-shadow:0 4px 12px -10px rgba(15,23,42,.18) !important;
  position:relative; transition:all .18s ease;
}
body.bare-chrome .ksim-modal .plan:hover{
  transform:translateY(-2px);
  border-color:#22d3ee !important;
  box-shadow:0 12px 28px -16px rgba(15,23,42,.25) !important;
}
body.bare-chrome .ksim-modal .plan.featured{
  background-image:linear-gradient(160deg, rgba(34,211,238,.06), rgba(168,85,247,.04)) !important;
  border:2px solid #22d3ee !important;
  box-shadow:0 18px 42px -14px rgba(34,211,238,.4) !important;
  transform:translateY(-2px);
}
body.bare-chrome .ksim-modal .plan .badge{
  background:linear-gradient(135deg,#0ea5e9,#22d3ee) !important;
  color:#062a3a !important;
  padding:4px 12px !important; border-radius:999px !important;
  font-size:.66rem !important; font-weight:900 !important;
}
body.bare-chrome .ksim-modal .plan .name{ color:#0f172a !important; font-size:1.1rem !important; }
body.bare-chrome .ksim-modal .plan .price{
  color:#0e7490 !important; font-size:1.6rem !important;
  background:linear-gradient(135deg,#0ea5e9,#a855f7) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
body.bare-chrome .ksim-modal .plan .price span{ color:#94a3b8 !important; -webkit-text-fill-color:#94a3b8 !important; }
body.bare-chrome .ksim-modal .plan ul{ color:#475569 !important; font-size:.86rem !important; }
body.bare-chrome .ksim-modal .plan ul li::before{ color:#22c55e !important; }
body.bare-chrome .ksim-modal .plan .btn{
  background:#f1f5f9 !important;
  color:#0f172a !important;
  border:1px solid #e2e8f0 !important;
  padding:11px 14px !important;
  border-radius:10px !important;
  font-weight:800 !important;
  transition:all .15s ease;
}
body.bare-chrome .ksim-modal .plan .btn:hover{
  background:#0f172a !important; color:#ffffff !important; border-color:#0f172a !important;
}
body.bare-chrome .ksim-modal .plan.featured .btn{
  background:linear-gradient(135deg,#0ea5e9,#22d3ee) !important;
  color:#062a3a !important; border:none !important;
  box-shadow:0 8px 20px -10px rgba(14,165,233,.5);
}
body.bare-chrome .ksim-modal .plan.featured .btn:hover{
  filter:brightness(1.06); transform:translateY(-1px);
  background:linear-gradient(135deg,#0ea5e9,#22d3ee) !important;
  color:#062a3a !important;
}


/* ===== Stronger Pro-lock visuals so free users SEE the difference ===== */
body.bare-chrome .ksim-comp.pro-locked.signed-in-free{
  cursor:not-allowed;
  opacity:.55;
  filter:saturate(.45) brightness(.92);
  border-color:#fbbf24 !important;
  background-image:
    repeating-linear-gradient(45deg,
      transparent 0,
      transparent 8px,
      rgba(245,158,11,.08) 8px,
      rgba(245,158,11,.08) 12px) !important;
}
body.bare-chrome .ksim-comp.pro-locked.signed-in-free:hover{
  opacity:.78; transform:none;
  border-color:#f59e0b !important;
  background-image:
    repeating-linear-gradient(45deg,
      transparent 0,
      transparent 8px,
      rgba(245,158,11,.18) 8px,
      rgba(245,158,11,.18) 12px) !important;
}
body.bare-chrome .ksim-comp.pro-locked .pro-pill{
  font-size:.62rem !important;
  padding:2px 7px !important;
  background:linear-gradient(135deg,#f59e0b,#facc15) !important;
  color:#3a2706 !important;
  border:1px solid #fde68a !important;
  box-shadow:0 4px 10px -4px rgba(245,158,11,.7) !important;
}
/* Pro user — show the badge but keep tiles fully usable, no grey */
body.bare-chrome .ksim-comp.pro-locked:not(.signed-in-free){
  opacity:1; filter:none;
  border-color:rgba(245,158,11,.4) !important;
  background-image:none !important;
}

/* Logout button styling — same shape as other top-link ghosts */
body.bare-chrome .ksim-topbar .top-link#ksim-logout-btn{
  background:rgba(220,38,38,.16);
  border-color:rgba(220,38,38,.36);
  color:#fecaca;
}
body.bare-chrome .ksim-topbar .top-link#ksim-logout-btn:hover{
  background:rgba(220,38,38,.28);
  border-color:rgba(220,38,38,.55);
  color:#ffffff;
}


/* ---------- Smart code-help popup ---------- */
.ksim-codehelp{
  position:fixed; top:84px; right:20px; z-index:175;
  width:380px; max-width:calc(100vw - 40px); max-height:70vh; overflow:auto;
  background:linear-gradient(160deg,#0f172a 0%,#111c33 100%);
  border:1px solid #f59e0b; border-radius:14px;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.7), 0 0 0 4px rgba(245,158,11,.15);
  padding:18px 18px 14px;
  display:none; flex-direction:column; gap:10px;
  color:#e5edff;
  animation:ksim-codehelp-in .25s ease-out;
}
.ksim-codehelp.show{ display:flex; }
@keyframes ksim-codehelp-in{
  from{ opacity:0; transform:translateY(-8px) scale(.98); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
.ksim-codehelp .ch-head{
  display:flex; align-items:center; gap:10px;
  font-family:"Sora",system-ui,sans-serif; font-weight:900;
  color:#facc15; font-size:.96rem;
}
.ksim-codehelp .ch-head .ic{
  width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg,#f59e0b,#facc15); color:#3a2706;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem; flex-shrink:0;
}
.ksim-codehelp .ch-head .x{
  margin-left:auto; cursor:pointer;
  width:26px; height:26px; border-radius:6px;
  background:rgba(15,23,42,.7); color:#cbd5e1; border:1px solid #243049;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.95rem;
}
.ksim-codehelp .ch-head .x:hover{ background:rgba(220,38,38,.18); color:#fecaca; border-color:rgba(220,38,38,.4); }
.ksim-codehelp .ch-err{
  background:rgba(220,38,38,.16); color:#fda4af;
  border:1px solid rgba(220,38,38,.32);
  padding:8px 10px; border-radius:8px;
  font-family:JetBrains Mono,monospace; font-size:.78rem; line-height:1.5;
  word-break:break-word;
}
.ksim-codehelp .ch-explain{
  color:#cbd5e1; font-size:.86rem; line-height:1.55;
}
.ksim-codehelp .ch-explain b{ color:#fde68a; }
.ksim-codehelp .ch-explain code{
  background:#070d18; padding:1px 6px; border-radius:4px;
  font-family:JetBrains Mono,monospace; font-size:.78rem;
  color:#7dd3fc;
}
.ksim-codehelp .ch-fix-title{
  font-weight:900; color:#86efac; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase;
  display:flex; align-items:center; gap:6px;
}
.ksim-codehelp pre.ch-fix{
  margin:0; background:#070d18; color:#e5edff;
  padding:10px 12px; border-radius:8px;
  font-family:JetBrains Mono,monospace; font-size:.78rem;
  line-height:1.45; white-space:pre-wrap; max-height:220px; overflow:auto;
  border:1px solid rgba(34,197,94,.3);
}
.ksim-codehelp .ch-actions{
  display:flex; gap:8px; flex-wrap:wrap;
}
.ksim-codehelp .ch-actions button{
  cursor:pointer; padding:8px 12px; border-radius:8px;
  border:1px solid #243049; background:#1e293b; color:#fff;
  font-weight:800; font-size:.78rem;
}
.ksim-codehelp .ch-actions button.primary{
  background:linear-gradient(135deg,#16a34a,#22c55e); color:#052e16; border:none;
}
.ksim-codehelp .ch-actions button:hover{ filter:brightness(1.08); }