:root {
  /* Theme: Classic Arcade (cobalt maze · Pac-Man yellow on black) */
  --bg: #050507;            /* near-black void */
  --panel: #0c0c14;         /* dark cabinet */
  --text: #fdf3d7;          /* warm arcade white */
  --muted: #8b8ba6;         /* dim label */
  --line: rgba(61, 123, 255, 0.14);
  --link: #3d7bff;          /* maze cobalt blue */
  --linkActive: #ffd23f;    /* Pac-Man yellow */
}

/* Theme: Ghost in the Machine — ambient "data packet" pulse.
   Animates opacity on the whole pellets layer group (one compositor-promoted
   element, no per-frame JS, no layout/paint). Respects reduced-motion. */
@keyframes packetPulse { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }
[data-layer="pellets"] { animation: packetPulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  [data-layer="pellets"] { animation: none; }
}

* { box-sizing: border-box; }
html, body { height: auto; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);

  /* Make footer part of the same layout flow (no overlay layer) */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#app{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1500;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--edge-soft);
  background:
    radial-gradient(120% 180% at 0% -40%, rgba(61, 123, 255,0.10), transparent 60%),
    linear-gradient(180deg, rgba(11,19,34,0.94), rgba(7,12,24,0.88));
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 30px -24px rgba(0,0,0,0.9);
}
/* Neon trace running along the bottom edge of the bar. */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge), var(--neon-2), var(--edge), transparent);
  opacity: 0.8;
  pointer-events: none;
}

/* --- Brand lockup: glyph mark + neon wordmark --- */
.brand { display: flex; align-items: center; gap: 11px; }

.brand__mark {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  border: 1px solid var(--edge-soft);
  background: var(--field-bg);
  box-shadow:
    inset 0 0 16px -8px var(--neon),
    0 0 20px -12px var(--neon);
}
.brand__mark svg {
  width: 23px; height: 23px;
  filter: drop-shadow(0 0 5px rgba(61, 123, 255, 0.55));
}

.brand__title {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.24em;
  /* indent by the tracking so the wordmark optically aligns under the mark */
  padding-left: 0.24em;
  background: linear-gradient(92deg, var(--neon), var(--neon-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(61, 123, 255, 0.30));
}
.brand__subtitle { font-size: 12px; color: var(--muted); margin-top: 2px; }

.nav { display: flex; flex-wrap: wrap; gap: 10px; }
.nav__link {
  color: var(--link);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.nav__link[aria-current="page"] {
  color: var(--linkActive);
  border-color: rgba(255, 210, 63, 0.5);
}

/* --- Topbar Preferences dropdown (overlay; no layout shift) --- */
.nav__menu{
  position: relative;
  display: inline-flex;
}

.nav__btn{
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.nav__dropdown{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;

  display: flex;
  flex-direction: column;
  gap: 8px;

  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(18, 22, 42, 0.98);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  z-index: 2000;
}

/* Ensure the HTML [hidden] attribute always collapses the dropdown */
.nav__dropdown[hidden]{
  display: none;
}

/* --- Admin gate modal --- */
.cfg-gate-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index: 3500;
}

.cfg-gate-card{
  width: min(520px, 100%);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  background: rgba(18, 22, 42, 0.98);
  box-shadow: 0 18px 70px rgba(0,0,0,0.65);
  padding: 16px;
}

.cfg-gate-title{
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 6px;
}

.cfg-gate-help{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 12px;
}

.cfg-gate-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  outline: none;
}

.cfg-gate-input:focus{
  border-color: rgba(61, 123, 255,0.65);
  box-shadow: 0 0 0 3px rgba(61, 123, 255,0.18);
}

.cfg-gate-err{
  margin-top: 10px;
  color: #ff9aa8;
  font-size: 13px;
  min-height: 18px;
}

.cfg-gate-actions{
  margin-top: 14px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

.cfg-gate-btn{
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor: pointer;
}

.cfg-gate-btn:hover{
  background: rgba(255,255,255,0.10);
}

.cfg-gate-btn--primary{
  border-color: rgba(255, 210, 63,0.35);
  background: rgba(255, 210, 63,0.12);
}
.cfg-gate-btn--primary:hover{
  background: rgba(255, 210, 63,0.18);
}

/* --- About modal (overlay; no layout shift) --- */
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2,5,11,0.66);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 3000;
}

.modal-panel{
  width: min(560px, 100%);
  max-height: 82vh;
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  background: var(--panel);
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

/* --- About: redesigned neon panel ---------------------------------------- */
.modal-panel--about{
  position: relative;
  width: min(640px, 100%);
  padding: 22px 22px 20px;
  border: 1px solid var(--edge-soft);
  border-radius: 20px;
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(61, 123, 255,0.12), transparent 60%),
    radial-gradient(120% 90% at 100% 0%, rgba(255, 210, 63,0.08), transparent 55%),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(61, 123, 255,0.06),
    0 28px 70px -26px rgba(0,0,0,0.92),
    0 0 40px -22px var(--neon);
  /* Thin moving accent rule along the very top edge */
  overflow: hidden;
}
.modal-panel--about::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, transparent, var(--neon), var(--neon-2), transparent);
  opacity:0.7;
}

/* Hero ------------------------------------------------------------------- */
.about__hero{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}

.about__mark{
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  border: 1px solid var(--edge-soft);
  background: var(--field-bg);
  box-shadow: inset 0 0 18px -8px var(--neon), 0 0 26px -16px var(--neon);
}
.about__mark svg{ width: 38px; height: 38px; filter: drop-shadow(0 0 6px rgba(61, 123, 255,0.45)); }

.about__heroText{ min-width: 0; }

.about__eyebrow{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--link);
  margin-bottom: 4px;
}

.modal-title{
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  background: linear-gradient(92deg, var(--neon), var(--neon-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.modal-subtitle{
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.35;
}

.modal-close{
  align-self: start;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid var(--edge-soft);
  background: var(--field-bg);
  color: var(--muted);
  border-radius: 10px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.modal-close svg{ width: 18px; height: 18px; }
.modal-close:hover{
  color: var(--text);
  border-color: var(--edge);
  background: rgba(61, 123, 255,0.10);
  transform: translateY(-1px);
}

/* Meta chips ------------------------------------------------------------- */
.about__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  margin: 14px 0 2px;
  padding: 0;
}
.about__chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  padding: 4px 10px 4px 9px;
  border: 1px solid var(--edge-soft);
  border-radius: 999px;
  background: var(--field-bg);
}
.about__chip::before{
  content:"";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon-2);
  box-shadow: 0 0 8px var(--neon-2);
}

.modal-body{
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 16px;
  line-height: 1.55;
  margin-top: 16px;
}

/* --- About modal typography + layout ------------------------------------ */
.about__p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.about__p--lead{
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.7;
}

.about__bullets{
  margin: 2px 0 0 0;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.about__bullet{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 11px;
  border: 1px solid var(--edge-soft);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.14));
  padding: 12px 13px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.about__bullet:hover{
  transform: translateY(-2px);
  border-color: var(--edge);
  box-shadow: 0 14px 30px -22px rgba(0,0,0,0.9), 0 0 22px -14px var(--neon);
}

.about__bulletIcon{
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  color: var(--neon);
  border: 1px solid var(--edge-soft);
  background: rgba(61, 123, 255,0.07);
}
.about__bulletIcon svg{ width: 18px; height: 18px; }

.about__bulletText{ min-width: 0; }

.about__bullet strong{
  display: block;
  color: var(--text);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  margin-bottom: 3px;
}

.about__bullet span{
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.about__divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge-soft), transparent);
  margin-top: 2px;
}

.about__credit{
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  opacity: 0.92;
}

@media (prefers-reduced-motion: reduce){
  .about__bullet, .modal-close{ transition: none; }
}

@media (max-width: 620px){
  .about__bullets{
    grid-template-columns: 1fr;
  }
}


.about-meta{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
}

.about-meta__row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.about-meta__row:last-child{
  border-bottom: 0;
}

.about-meta__k{
  color: var(--muted);
  font-size: 14px;
}

.about-meta__v{
  font-weight: 800;
  font-size: 14px;
  text-align: right;
}

.nav__dropdown .nav__link{
  display: block;
  width: 100%;
}

.nav__dropdown .nav__link:hover{
  background: rgba(255,255,255,0.06);
}


.main {
  padding: 16px;
  display: flex;
  justify-content: center;

  /* Take the remaining space above the footer */
  flex: 1 1 auto;
  min-height: 0;
}


.view {
  width: 100%;
  max-width: 1400px;

  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  min-height: 240px;
  border-color: transparent;
}

.h1 { margin: 0 0 10px 0; font-size: 22px; }
.p { margin: 0; color: var(--muted); line-height: 1.5; }

.footer{
  position: static;
  width: 100%;

  /* strictly one-line bar */
  height: 36px;
  min-height: 36px;
  max-height: 36px;

  padding: 0 16px;
  margin: 0;

  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--bg);
  font-size: 13px;

  /* force single-row layout even if footer contains div/p/br */
  display: flex;
  align-items: center;
  gap: 10px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  flex: 0 0 36px;
}

/* harden against multi-line markup inside footer */
.footer {
  /* Same layer as the app/surface: keep it in normal document flow */
  position: static;
  width: 100%;

  /* strictly one line */
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  margin: 0;

  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--bg);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  flex: 0 0 36px;
}


.footer br{
  display: none;
}


/* Stage 2 — Global Config Editor
   Single-column editor (no JSON viewer)
*/
.cfg-root{ padding:0; }
.cfg-shell{
  max-width:1400px;
  margin:18px auto;
  padding:0 14px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.cfg-tree{
  width:256px;
  flex:0 0 256px;
  align-self:stretch;
  min-width:0;
  padding:10px 8px;
  border:1px solid var(--edge-soft);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(0,0,0,.20));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 48px -30px rgba(0,0,0,.95);
}

.cfg-center{
  width:auto;
  flex:1 1 auto;
  min-width:0;

  /* Keep controls readable (prevents ultra-wide controls on large screens) */
  max-width: 900px;
}

.cfg-section-host{ min-width:0; }

/* ===================================================================== *
 * Tree navigation (left sidebar) — flat single-surface nav with icon
 * section headers, indented leaf rows + a guide line, and a neon active
 * accent. No nested boxes; hierarchy is shown by indentation + type.
 * ===================================================================== */
.cfg-tree-host{ display:flex; flex-direction:column; gap:1px; }

/* Sidebar header */
.cfg-tree-head{
  display:flex; align-items:center; gap:9px;
  padding:4px 10px 12px;
  margin-bottom:6px;
  border-bottom:1px solid var(--edge-soft);
}
.cfg-tree-head__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--neon);
  box-shadow:0 0 10px -1px var(--neon), 0 0 3px var(--neon);
}
.cfg-tree-head__title{
  font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text); opacity:.78;
}

/* Top-level section (no box; just a row) */
.cfg-tree-group{ border:0; background:transparent; border-radius:10px; padding:0; }

.cfg-tree-title{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:10px;
  padding:9px 10px;
  border-radius:10px;
  font-size:13px; font-weight:600; color:var(--text);
  transition:background .12s ease, color .12s ease;
}
.cfg-tree-title::-webkit-details-marker{ display:none; }
.cfg-tree-title:hover{ background:rgba(255,255,255,.05); }
.cfg-tree-group[open] > .cfg-tree-title{ background:rgba(255,255,255,.035); }

.cfg-tree-ic{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 18px; width:18px; height:18px;
  color:var(--text); opacity:.62;
  transition:color .12s ease, opacity .12s ease;
}
.cfg-tree-ic svg{ width:18px; height:18px; display:block; }

.cfg-tree-label{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.cfg-tree-chev{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:13px; height:13px; opacity:.4;
  transition:transform .18s ease, opacity .12s ease;
}
.cfg-tree-chev svg{ width:13px; height:13px; display:block; }
details[open] > .cfg-tree-title > .cfg-tree-chev,
details[open] > .cfg-tree-subtitle > .cfg-tree-chev{ transform:rotate(90deg); opacity:.65; }

/* Active section: brighten its label + neon-tint its icon */
.cfg-tree-title.is-active{ color:#fff; }
.cfg-tree-title.is-active .cfg-tree-ic{ color:var(--neon); opacity:1; }

/* Leaf list under a section, with a vertical guide line */
.cfg-tree-body{
  position:relative;
  display:flex; flex-direction:column; gap:1px;
  margin:1px 0 6px;
  padding:2px 0 2px 28px;
}
.cfg-tree-body::before{
  content:""; position:absolute; left:19px; top:3px; bottom:7px;
  width:1px; background:var(--edge-soft);
}

/* Leaf row (a selectable page) */
.cfg-tree-item{
  position:relative;
  text-align:left; border:0; background:transparent;
  color:var(--text); opacity:.64;
  padding:7px 10px; border-radius:8px;
  font-size:12.5px; font-weight:500; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .12s ease, color .12s ease, opacity .12s ease;
}
.cfg-tree-item:hover{ opacity:1; background:rgba(255,255,255,.05); }
.cfg-tree-item.is-active{
  opacity:1; color:#fff; font-weight:600;
  background:linear-gradient(90deg, rgba(61, 123, 255,.18), rgba(61, 123, 255,.04));
}
.cfg-tree-item.is-active::before{
  content:""; position:absolute; left:-9px; top:6px; bottom:6px;
  width:3px; border-radius:3px;
  background:var(--neon); box-shadow:0 0 10px -1px var(--neon);
}

/* Nested subgroup (expand/collapse only; its children are leafs) */
.cfg-tree-subgroup{ border:0; background:transparent; padding:0; }
.cfg-tree-subtitle{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; margin-top:2px; border-radius:7px;
  font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text); opacity:.46;
  transition:background .12s ease, opacity .12s ease;
}
.cfg-tree-subtitle::-webkit-details-marker{ display:none; }
.cfg-tree-subtitle:hover{ opacity:.8; background:rgba(255,255,255,.04); }
.cfg-tree-subgroup[open] > .cfg-tree-subtitle{ opacity:.7; }
.cfg-tree-subtitle .cfg-tree-chev{ width:11px; height:11px; }
.cfg-tree-subtitle .cfg-tree-chev svg{ width:11px; height:11px; }

.cfg-tree-subbody{
  display:flex; flex-direction:column; gap:1px;
  padding:2px 0 2px 10px;
}


.cfg-center .cfg-section-as-page{
  border:none;
  background:transparent;
  padding:0;
}
.cfg-center .cfg-section-as-page > summary{ display:none; }
.cfg-center .cfg-section-as-page > .cfg-group-body{ padding:0; }

.cfg-center .cfg-section-as-page .cfg-leaf-active{
  border:none;
  background:transparent;
  padding:0;
  margin:0;
}
.cfg-center .cfg-section-as-page .cfg-leaf-active > summary{ display:none; }
.cfg-center .cfg-section-as-page .cfg-leaf-active > .cfg-group-body{ padding:0; }


.cfg-toolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:12px;
}

/* ===================================================================== *
 * Center page header — section-path eyebrow + title + description, with
 * the action toolbar on the right. Orients each section page.
 * ===================================================================== */
.cfg-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--edge-soft);
}
.cfg-page-head__main{ min-width:0; flex:1 1 320px; }
.cfg-page-eyebrow{
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--link); opacity:.85; margin-bottom:7px;
}
.cfg-page-title{
  margin:0;
  font-size:21px; font-weight:800; line-height:1.15; letter-spacing:-.01em;
  color:#fff; text-transform:capitalize;
}
.cfg-page-desc{
  margin-top:7px;
  font-size:12.5px; line-height:1.5; color:var(--muted);
  max-width:62ch;
}
.cfg-page-head__actions{ flex:0 0 auto; }
.cfg-page-head__actions .cfg-toolbar{ margin:0; }
.cfg-action-host{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
/* Animation config: keep Save/Reset/Export on one row */
.cfg-anim-left .cfg-action-host{
  flex-wrap: nowrap;
  overflow-x: auto;
}

.cfg-anim-left .cfg-action-host .cfg-btn{
  white-space: nowrap;
}

.cfg-btn-danger{
  border-color: rgba(255, 120, 120, 0.35);
  background: rgba(255, 120, 120, 0.10);
}
.cfg-btn-danger:hover{
  background: rgba(255, 120, 120, 0.16);
}


.cfg-msg{ font-size:13px; opacity:.85; }
.cfg-errors{
  margin:10px 0 0;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
}
.cfg-errors .err{ margin:4px 0; }

/* ===================================================================== *
 * Right panel — field details / tips. Matches the redesigned sidebar
 * surface: gradient panel, eyebrow header, idle state, key chip, a boxed
 * Current/Default/Range stat list, and a warning callout.
 * ===================================================================== */
.cfg-right{
  width:320px;
  flex:0 0 320px;
  align-self:flex-start;
  padding:12px;
  border:1px solid var(--edge-soft);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(0,0,0,.20));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 48px -30px rgba(0,0,0,.95);
  position:sticky;
  top:14px;
}

.cfg-tips-head{
  display:flex; align-items:center; gap:9px;
  padding:4px 6px 12px;
  margin-bottom:10px;
  border-bottom:1px solid var(--edge-soft);
}
.cfg-tips-head__ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; color:var(--neon); opacity:.9;
}
.cfg-tips-head__ic svg{ width:16px; height:16px; display:block; }
.cfg-tips-head__title{
  font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text); opacity:.8;
}

.cfg-tips-top{
  display:none;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--edge-soft);
}

/* Right sidebar (Animation) */
.cfg-anim-side{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cfg-anim-pattern{
  font-size: 12px;
  line-height: 1.35;
  resize: vertical;
}


.cfg-anim-side .cfg-anim-preview{
  width:100%;
}

.cfg-anim-side .cfg-anim-info{
  width:100%;
  box-sizing:border-box;
}

/* Playback transport bar (preview controls) */
.cfg-anim-side-actions{
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border:1px solid var(--edge-soft);
  border-radius:12px;
  background:rgba(0,0,0,.22);
}

/* Step buttons: square icon buttons */
.cfg-anim-step{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0 !important;
  border-radius:9px;
}
.cfg-anim-step svg{ width:16px; height:16px; display:block; }

/* Play / Pause: primary transport button (icon + label) */
.cfg-anim-play{
  display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 14px 0 11px !important;
  border-radius:9px; font-weight:700;
}
.cfg-anim-play svg{ width:14px; height:14px; display:block; }
.cfg-anim-play__lbl{ line-height:1; }
.cfg-anim-play.is-playing{
  border-color:rgba(255, 210, 63,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 14px -6px #f7d24a;
}
.cfg-anim-play.is-playing svg{ color:#f7d24a; }

/* --- Animation page: tighter rows, better label/control proportions, no compressed inputs --- */
.cfg-anim-controls-grid .cfg-row{
  grid-template-columns: 140px 1fr;
  gap: 8px;
  margin: 6px 0;
}

.cfg-anim-controls-grid .cfg-label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Let controls actually use the available width inside cards */
.cfg-anim-controls-grid .cfg-input,
.cfg-anim-controls-grid .cfg-text,
.cfg-anim-controls-grid .cfg-num,
.cfg-anim-controls-grid .cfg-select,
.cfg-anim-controls-grid .cfg-textarea{
  max-width: none;
  justify-self: stretch;
}

/* Help text shouldn’t force extra vertical space */
.cfg-anim-controls-grid .cfg-help{
  max-width: none;
  margin-top: -4px;
}

/* Pattern row: label فوق control (stacked) */
.cfg-row.cfg-row--stack{
  grid-template-columns: 1fr;
  align-items: stretch;
}

.cfg-row.cfg-row--stack .cfg-label{
  margin-bottom: 6px;
}

.cfg-row.cfg-row--stack .cfg-help{
  grid-column: 1;
  margin-top: 6px;
}

.cfg-anim-frame-readout{
  margin-left:auto;
  align-self:center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11.5px;
  color:var(--text);
  padding:5px 10px;
  border:1px solid var(--edge-soft);
  border-radius:8px;
  background:rgba(0,0,0,.30);
  white-space:nowrap;
}


.cfg-anim-info{
  font-size:11px;
  line-height:1.45;
  height:150px;
  resize:vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:var(--muted);
}

.cfg-tips-body{
  font-size:12.5px;
  color:var(--text);
  line-height:1.5;
}

/* Idle / empty state */
.cfg-tip-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:11px; padding:26px 14px 22px; color:var(--muted);
}
.cfg-tip-empty__ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; color:var(--neon); opacity:.5;
}
.cfg-tip-empty__ic svg{ width:30px; height:30px; display:block; }
.cfg-tip-empty__txt{ font-size:12px; line-height:1.5; max-width:220px; }

/* Active field details */
.cfg-tip{ display:flex; flex-direction:column; gap:12px; }
.cfg-tip__head{ display:flex; flex-direction:column; gap:7px; }
.cfg-tip__name{ font-size:15px; font-weight:750; color:#fff; line-height:1.25; }
.cfg-tip__key{
  align-self:flex-start; max-width:100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10.5px; color:var(--link);
  padding:3px 8px; border-radius:7px;
  background:rgba(61, 123, 255,.08);
  border:1px solid rgba(61, 123, 255,.18);
  overflow-wrap:anywhere; box-sizing:border-box;
}
.cfg-tip__desc{ margin:0; font-size:12.5px; line-height:1.55; color:var(--text); opacity:.82; }

/* Stat rows (Current / Default / Range) */
.cfg-tip__stats{
  display:flex; flex-direction:column;
  border:1px solid var(--edge-soft); border-radius:10px; overflow:hidden;
  background:rgba(0,0,0,.18);
}
.cfg-tip__stat{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 11px;
  border-top:1px solid var(--edge-soft);
}
.cfg-tip__stat:first-child{ border-top:0; }
.cfg-tip__stat-l{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.cfg-tip__stat-v{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px; color:var(--text);
  text-align:right; overflow-wrap:anywhere; min-width:0;
}
.cfg-tip__stat-v--now{ color:var(--neon); font-weight:700; }

/* Warning callout */
.cfg-tip__warn{
  display:flex; gap:9px; align-items:flex-start;
  padding:10px 11px; border-radius:10px;
  background:rgba(255, 210, 63,.08);
  border:1px solid rgba(255, 210, 63,.22);
  border-left:3px solid #f7d24a;
  color:#f3d38a;
  font-size:12px; line-height:1.5;
}
.cfg-tip__warn-ic{
  flex:0 0 16px; width:16px; height:16px; margin-top:1px;
  display:inline-flex; color:#f7d24a;
}
.cfg-tip__warn-ic svg{ width:16px; height:16px; display:block; }
.cfg-tip__warn-txt{ flex:1 1 auto; min-width:0; }
.cfg-hidden{ display:none !important; }

.cfg-catalog{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px;
  background:rgba(0,0,0,.10);
}

.cfg-catalog-head{
  font-weight:800;
  margin-bottom:10px;
}

.cfg-catalog-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cfg-catalog-row{
  display:flex;
  gap:10px;
  align-items:flex-end;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px;
  background:rgba(255,255,255,.03);
}

.cfg-catalog-cell{ flex:1 1 0; min-width:0; }
.cfg-catalog-actions{ flex:0 0 auto; }

.cfg-mini{
  font-size:10px;
  color:var(--muted);
  margin-bottom:4px;
}

.cfg-catalog-footer{
  display:flex;
  justify-content:flex-start;
}

.cfg-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}

.cfg-modal{
  width:min(680px, 100%);
  max-height:82vh;
  overflow:auto;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:var(--panel);
  padding:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.cfg-modal-title{
  font-size:20px;
  font-weight:900;
  margin-bottom:8px;
  letter-spacing:.2px;
}

.cfg-modal-subtitle{
  font-size:14px;
  color:var(--muted);
  margin-bottom:12px;
  line-height:1.35;
}

.cfg-modal-warn{
  font-size:12px;
  padding:10px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  margin:10px 0;
}

.cfg-modal-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

.cfg-modal-row{
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px;
  background:rgba(255,255,255,.03);
}

.cfg-modal-row.is-critical{
  border-color:rgba(255, 210, 63,.55);
}

.cfg-modal-path{ font-weight:900; margin-bottom:6px; }
.cfg-modal-old, .cfg-modal-new{
  font-size:14px;
  color:var(--muted);
  margin:3px 0;
  line-height:1.45;
}

.cfg-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}

/* ---------- File picker modal (Open / Save As) ---------- */
.cfg-filepicker{
  width: min(620px, 100%);
}

.cfg-filepicker__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.cfg-filepicker__close{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:inherit;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}
.cfg-filepicker__close:hover{ background:rgba(255,255,255,.10); }

.cfg-filepicker__toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.cfg-filepicker__toolbar .cfg-input{
  flex: 1 1 auto;
}

.cfg-filepicker__hint{
  flex: 0 0 auto;
  font-size:12px;
  color: var(--muted);
  white-space:nowrap;
}

.cfg-filepicker__list{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background: rgba(255,255,255,.03);
  overflow:auto;
  max-height: 52vh;
  padding: 6px;
}

.cfg-filepicker__item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: inherit;

  border-radius:12px;
  padding: 10px 10px;
  cursor:pointer;
  text-align:left;
  margin: 6px 0;
}
.cfg-filepicker__item:hover{ background: rgba(255,255,255,.07); }

.cfg-filepicker__item.is-selected{
  border-color: rgba(61, 123, 255,.65);
  box-shadow: 0 0 0 2px rgba(61, 123, 255,.18) inset;
  background: rgba(61, 123, 255,.10);
}

.cfg-filepicker__itemTitle{
  font-weight: 900;
}

.cfg-filepicker__itemMeta{
  font-size: 12px;
  color: var(--muted);
}

.cfg-filepicker__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
}

.cfg-filepicker__selected{
  font-size: 12px;
  color: var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 60%;
}


.cfg-section-title{
  font-size:18px;
  font-weight:700;
  margin:14px 0 10px;
}

.cfg-groups{ display:flex; flex-direction:column; gap:10px; }

/* Details-based groups */
.cfg-group{
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
.cfg-group-title{
  list-style:none;
  cursor:pointer;
  padding:10px 12px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
}
.cfg-group-title::-webkit-details-marker{ display:none; }
.cfg-group-title::after{
  content:"▾";
  margin-left:auto;
  opacity:.7;
}
.cfg-group[open] .cfg-group-title::after{ content:"▴"; }
.cfg-group-body{
  padding:12px;
  border-top:1px solid rgba(255,255,255,.10);
}

/* Protected (System & References) */
.cfg-protected-note{
  font-size:12px;
  opacity:.8;
  line-height:1.4;
}

.cfg-protected-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.cfg-protected[data-locked="true"] .cfg-group-body{
  opacity:.85;
}

.cfg-protected[data-locked="true"] .cfg-card,
.cfg-protected[data-locked="true"] .cfg-row{
  opacity:.8;
}


.cfg-row{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:10px;
  align-items:center;
  margin:10px 0;
}
.cfg-label{ font-size:13px; opacity:.9; }
.cfg-help{
  grid-column: 2;
  max-width: 560px;     /* keeps help text visually tied to the control */
  font-size: 12px;
  opacity: .7;
  margin-top: -6px;
}

/* Inputs */
.cfg-input, .cfg-text, .cfg-num, .cfg-select, .cfg-textarea{
  width: 100%;
  max-width: 440px;          /* <- stops the “full width stretched” look */
  justify-self: start;       /* <- keep it aligned to the left in the grid */
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: inherit;
  padding: 8px 10px;
}

/* Textareas can be a bit wider, but still not full-page */
.cfg-textarea{
  min-height: 90px;
  resize: vertical;
  max-width: 560px;
}
/* ---- Color pickers: neon swatch (global — covers .cfg-color and level editor) ---- */
input[type="color"], .cfg-color {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 56px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--field-bg);
  cursor: pointer;
  vertical-align: middle;
  box-shadow: inset 0 0 0 2px rgba(5, 7, 13, 0.6), 0 0 10px -4px var(--neon);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.06s ease;
}
input[type="color"]:hover, .cfg-color:hover {
  border-color: var(--neon);
  box-shadow: inset 0 0 0 2px rgba(5, 7, 13, 0.5), 0 0 16px -3px var(--neon);
  transform: translateY(-1px);
}
input[type="color"]:active, .cfg-color:active { transform: translateY(0); }
input[type="color"]:focus-visible, .cfg-color:focus-visible {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(61, 123, 255, 0.28), 0 0 14px -4px var(--neon);
}
/* Round the actual swatch and drop the browser's default frame. */
input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 5px; }


/* Select: force dark background + readable text across system themes */
.cfg-select{
  background-color: rgba(255,255,255,.06);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.80) 50%),
    linear-gradient(135deg, rgba(255,255,255,.80) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 1px),
    calc(100% - 13px) calc(50% - 1px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
}



/* Backup: any <select> inside config root that missed .cfg-select class */
.cfg-root select{
  background-color: rgba(255,255,255,.06);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.cfg-root select option{
  background-color: #151515;
  color: #f2f2f2;
}
/* Options list (best-effort; some browsers limit option styling) */
.cfg-select option{
  background-color: #151515;
  color: #f2f2f2;
}

/* Focus ring */
.cfg-input:focus, .cfg-text:focus, .cfg-num:focus, .cfg-select:focus, .cfg-textarea:focus{
  outline: 2px solid rgba(255,255,255,.25);
  outline-offset: 2px;
}

/* Cards (items editors) */
.cfg-cards{ display:flex; flex-direction:column; gap:10px; }
.cfg-card{
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}
.cfg-card-head{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.cfg-card-title{ font-weight:700; }
.cfg-inline-actions{ margin-left:auto; display:flex; gap:8px; }
.cfg-card-body{ padding:12px; }

/* Buttons */
.cfg-btn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:inherit;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}
.cfg-btn:hover{ background:rgba(255,255,255,.10); }
.cfg-btn:disabled{ opacity:.55; cursor:not-allowed; }
.cfg-btn:disabled:hover{ background:rgba(255,255,255,.06); }

.cfg-btn-primary{ border-color:rgba(0,136,255,.35); }
.cfg-btn-danger{ border-color:rgba(255,70,70,.35); }

@media (max-width: 720px){
  .cfg-row{ grid-template-columns: 1fr; }
  .cfg-help{ grid-column:1; margin-top:0; }
}

@media (max-width: 980px){
  .cfg-shell{ flex-direction:column; }

  .cfg-tree{ width:100%; flex:1 1 auto; }
  .cfg-center{ width:100%; flex:1 1 auto; }

  .cfg-right{ width:100%; flex:1 1 auto; position:static; }
}

.play{
  position: relative;
}

.play__menu-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 1500;
}


.play__menu-hidden{
  display: none;
}

.play__menu{
  width: min(460px, 100%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  background: var(--panel);
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

.play__menu-title{
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

.play__menu-hint{
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.4;
}

.play__menu-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}


/* --- Play view --- */
.play__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin: 8px 0 10px 0;
  flex-wrap: wrap;
}

.play__header-left{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width: 220px;
}

/* --- Preferences dropdown: Play controls --- */
.nav__divider{
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 6px 2px;
}

.nav__dropdownTitle{
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.nav__prefBlock{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.nav__prefRow{
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 8px;
  align-items: center;
}

.nav__prefRow--single{
  grid-template-columns: 60px 1fr;
}

.nav__prefLabel{
  font-size: 12px;
  color: var(--muted);
}

.nav__prefSelect{
  width: 100%;
  min-width: 0;

  /* Force readable select styling (some browsers ignore .input on <select>) */
  background-color: rgba(0,0,0,0.25);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* best-effort option styling */
.nav__prefSelect option,
.nav__prefSelect optgroup{
  background-color: #111827;
  color: var(--text);
}

.nav__prefHint{
  font-size: 12px;
}
.play__hint{
  color: var(--muted);
  font-size: 13px;
}
.play__hud{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:7px;

  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 0 auto 12px;

  padding: 8px 10px;
  border: 1px solid var(--edge-soft);
  border-radius: 16px;
  background:
    radial-gradient(130% 180% at 50% -50%, rgba(61, 123, 255,0.10), transparent 60%),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(61, 123, 255,0.05),
    0 16px 42px -26px rgba(0,0,0,0.92),
    0 0 30px -20px var(--neon);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


.hud__item{
  display:flex;
  align-items:center;
  gap:7px;

  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--edge-soft);
  background: var(--field-bg);

  color: var(--text);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.hud__icon{
  display:grid;
  place-items:center;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--neon);
  filter: drop-shadow(0 0 4px rgba(61, 123, 255,0.45));
}
.hud__icon svg{ width: 15px; height: 15px; display:block; }

.hud__label{
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hud__value{
  font-weight: 800;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-shadow: 0 0 10px rgba(255, 210, 63, 0.30);
}

/* Accent the primary stats so the eye lands on score + lives first. */
.hud__item--score{ border-color: rgba(255, 210, 63,0.30); }
.hud__item--score .hud__icon{ color: var(--neon-2); filter: drop-shadow(0 0 4px rgba(255, 210, 63,0.5)); }
.hud__item--score .hud__value{ color: var(--neon-2); text-shadow: 0 0 12px rgba(255, 210, 63,0.45); }
.hud__item--lives .hud__icon{ color: var(--neon-2); filter: drop-shadow(0 0 4px rgba(255, 210, 63,0.5)); }

.hud__status{
  /* Put Status on its own centered line */
  flex: 1 1 100%;
  margin-left: 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding-top: 2px;
}

.play__body{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;

  /* Center the maze container */
  justify-items: center;
  align-items:start;
}

.play__stagewrap{
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;

  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;

  overflow:auto;
}

.play__stage{
  display:block;
  image-rendering: pixelated;
  outline: none;
}

.play__stage:focus,
.play__stage:focus-visible{
  outline: none;
}

.panel{
  border:1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  padding: 12px;
}
.panel__title{
  font-weight: 700;
  margin-bottom: 10px;
}
.panel__row{
  display:flex;
  gap:8px;
  align-items:center;
  margin: 10px 0;
  flex-wrap: wrap;
}
.label{
  color: var(--muted);
  font-size: 13px;
  min-width: 52px;
}
.input{
  background: rgba(0,0,0,0.25);
  border:1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--text);
  outline: none;
  min-width: 140px;
}
.btn{
  background: rgba(61, 123, 255,0.18);
  border: 1px solid rgba(61, 123, 255,0.40);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  cursor:pointer;
}
.btn:hover{ background: rgba(61, 123, 255,0.24); }
.btn:focus-visible{
  outline: 2px solid rgba(61, 123, 255,0.75);
  outline-offset: 2px;
}

.panel__hint{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* --- Leaderboard --- */
.lb__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin: 8px 0 12px 0;
}
.lb__hint{
  color: var(--muted);
  font-size: 13px;
}
.lb__controls{
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* group containers */
.lb__ctl{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lb__ctl--mid{
  flex: 1 1 auto;
  justify-content: center;
}

.lb__ctl--right{
  margin-left: auto;
}

/* compact page-size input */
.input.lb__pagesize{
  min-width: 84px;
  width: 84px;
}

/* page indicator as a pill */
.lb__pageinfo{
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table{
  width:100%;
  border-collapse: collapse;
}
.table th, .table td{
  border-bottom:1px solid var(--line);
  padding: 8px 8px;
  text-align:left;
  font-size: 13px;
}
.table th{
  color: var(--muted);
  font-weight: 700;
}

/* Leaderboard popup (end-of-run) */
.lbp__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
}

.lbp__hidden { display: none; }

.lbp__panel {
  width: min(660px, calc(100vw - 24px));
  max-height: min(82vh, 760px);
  overflow: auto;
  background: var(--panel, #111);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

.lbp__title {
  font-weight: 900;
  font-size: 24px;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

.lbp__hint {
  opacity: 0.9;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.4;
}

.lbp__row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
}

.lbp__label { width: 80px; opacity: 0.9; }

.lbp__input { flex: 1; min-width: 160px; }

.lbp__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

.lbp__btn-primary { font-weight: 700; }

.lbp__msg, .lbp__result { margin-top: 10px; opacity: 0.9; }

.lbp__pager {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0;
}

.lbp__page { opacity: 0.85; }

.lbp__me {
  outline: 2px solid rgba(255,255,255,0.22);
  outline-offset: -2px;
}

.lbp__section {
  margin-top: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
}

.lbp__sectiontitle {
  font-weight: 900;
  margin-bottom: 10px;
  opacity: 0.95;
  font-size: 16px;
}

.lbp__panel .table th,
.lbp__panel .table td{
  padding: 10px 10px;
  font-size: 14px;
}

.lbp__panel .table th{
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* ---------- Animation Config Page ---------- */

/* Top bar (title + selector + actions) */
.cfg-anim-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:10px 12px;
  margin-bottom:12px;

  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}

.cfg-anim-topbar-title{
  font-weight:800;
  white-space:nowrap;
}

.cfg-anim-topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;

  /* IMPORTANT: keep everything on one row */
  flex-wrap:nowrap;
  min-width:0;
}

.cfg-anim-topbar-actions .cfg-btn{
  white-space:nowrap;
}

/* Prevent the selector from growing too wide and pushing Export down */
.cfg-anim-asset-select{
  width:260px;
  max-width:360px;
  flex:0 1 auto;
}

@media (max-width: 860px){
  /* On smaller widths, allow wrapping naturally */
  .cfg-anim-topbar{
    flex-wrap:wrap;
  }
  .cfg-anim-topbar-actions{
    flex-wrap:wrap;
  }
  .cfg-anim-asset-select{
    width:100%;
    max-width:none;
  }
}

/* Top bar (Animation Config) */
.cfg-anim-topbar{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;

  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;

  /* slightly stronger than the center background so it “reads” as a header */
  background: rgba(0,0,0,.16);
}

.cfg-anim-topbar-title{
  font-size: 16px;
  font-weight: 900;
}

.cfg-anim-topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* Main asset selector: make it stand out */
.cfg-anim-asset-select{
  min-width: 100px;
  max-width: 230px;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

/* best-effort option styling */
.cfg-anim-asset-select option,
.cfg-anim-asset-select optgroup{
  background-color: #111827;
  color: var(--text);
}

.cfg-anim-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  align-items:start;
}

.cfg-anim-left{ min-width:0; }

/* Controls grid (2-column cards) */
.cfg-anim-controls-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cfg-anim-controls-grid .cfg-card{
  height: 100%;
}

/* ---- Animation center page: single panel, control bar + grouped fields ---- */
.cfg-section-as-page .cfg-anim-card{
  border:1px solid var(--edge-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(0,0,0,.20));
  border-radius:16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 48px -30px rgba(0,0,0,.95);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  overflow:hidden;
}

/* Top control bar: sprite-asset picker (left) + override actions (right) */
.cfg-anim-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:12px 16px;
  border-bottom:1px solid var(--edge-soft);
  background:rgba(0,0,0,.22);
}
.cfg-anim-bar__pick{ display:flex; align-items:center; gap:10px; min-width:0; }
.cfg-anim-bar__label{
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.cfg-anim-bar__pick .cfg-select{ width:auto; min-width:180px; max-width:260px; }
.cfg-anim-bar__actions{ display:flex; gap:8px; flex-wrap:wrap; }

.cfg-anim-card > .cfg-msg{ margin:12px 16px 0; }

@media (max-width: 860px){
  .cfg-anim-controls-grid{
    grid-template-columns: 1fr;
  }
}

.cfg-anim-right{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}

.cfg-anim-preview{
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  box-sizing:border-box;
}

.cfg-anim-stage{
  width:100%;
  height:100%;
  display:block;
  image-rendering: pixelated;
  border-radius:10px;
}

/* ---- Animation preview side panel (in the Tips top slot) ---- */
.cfg-anim-side-head{ display:flex; align-items:center; gap:8px; padding:0 2px 1px; }
.cfg-anim-side-head__title{
  font-size:10.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text); opacity:.6;
}

/* The preview "screen": checkerboard so transparent sprites read clearly,
 * wrapped in a neon-lit frame. */
.cfg-anim-side-preview{
  position:relative;
  padding:10px;
  border:1px solid rgba(61, 123, 255,.22);
  border-radius:14px;
  background:
    linear-gradient(rgba(5,9,16,.62), rgba(5,9,16,.62)),
    repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%, transparent 0% 50%) 0 0 / 22px 22px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.5),
    inset 0 0 26px -6px rgba(61, 123, 255,.28),
    0 0 22px -10px var(--neon);
}
.cfg-anim-side-preview .cfg-anim-stage{
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
}

/* Message styling (optional but makes it feel “finished”) */
.cfg-msg{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
}

.cfg-msg[data-kind="info"]{
  border-color: rgba(61, 123, 255,.25);
}

.cfg-msg[data-kind="error"]{
  border-color: rgba(255,70,70,.35);
  background: rgba(255,70,70,.08);
}

.cfg-msg[data-kind="warn"]{
  border-color: rgba(255, 210, 63,.35);
  background: rgba(255, 210, 63,.08);
}

@media (max-width: 980px){
  .cfg-anim-layout{
    grid-template-columns: 1fr;
  }
  .cfg-anim-preview{
    width:100%;
    height:auto;
    aspect-ratio: 1 / 1;
  }
}

/* ===================================================================== *
 * Neon UI layer — Ghost in the Machine
 * Enhances existing chrome (buttons, inputs/selects, containers, nav,
 * HUD, tables) with a circuit-neon look. Appended last so it layers over
 * the base rules. Chrome-only (not the game loop): glow via box-shadow is
 * fine here. Transitions stay on cheap props (box-shadow/border/transform).
 * ===================================================================== */
:root {
  --neon: #3d7bff;                       /* maze cobalt blue */
  --neon-2: #ffd23f;                     /* Pac-Man yellow */
  --neon-danger: #ff3b3b;                /* Blinky red */
  --edge: rgba(61, 123, 255, 0.45);      /* live blue edge */
  --edge-soft: rgba(61, 123, 255, 0.18); /* dim container edge */
  --surface: linear-gradient(180deg, rgba(16, 18, 34, 0.92), rgba(6, 7, 16, 0.94));
  --field-bg: rgba(7, 9, 20, 0.72);
  --ctn-radius: 12px;   /* shared container corner radius */
  --ctn-pad: 12px;      /* shared container inner padding */
}

/* ---- Containers: neon-edged glass panels ---- */
/* Canonical glowing-container look (the milestones-page card style), shared by
   every real "box" container across the app. Layout/canvas wrappers are
   intentionally excluded so their sizing isn't disturbed. */
.cfg-card,
.panel,
.modal-panel,
.play__menu,
.lbp__panel,
.cfg-gate-card,
.nav__dropdown,
.cfg-group,
.cfg-catalog,
.cfg-catalog-row,
.cfg-modal,
.cfg-filepicker,
.cfg-errors,
.lbp__section {
  border: 1px solid var(--edge-soft) !important;
  background: var(--surface);
  border-radius: var(--ctn-radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(61, 123, 255, 0.05),
    0 16px 44px -24px rgba(0, 0, 0, 0.85),
    0 0 28px -18px var(--neon);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Hairline neon separators on container heads/titles */
.cfg-card-head,
.modal-head,
.cfg-group-title { border-bottom: 1px solid var(--edge-soft); }

/* ---- Buttons: neon outline + hover/focus glow ---- */
.btn,
.cfg-btn,
.cfg-gate-btn,
.nav__btn,
.lbp__actions button {
  background: linear-gradient(180deg, rgba(61, 123, 255, 0.10), rgba(61, 123, 255, 0.03));
  border: 1px solid var(--edge);
  color: var(--text);
  border-radius: 10px;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 14px -6px var(--neon);
  transition: box-shadow 0.18s ease, border-color 0.18s ease,
              transform 0.06s ease, background 0.18s ease, color 0.18s ease;
}
.btn:hover,
.cfg-btn:hover:not(:disabled),
.cfg-gate-btn:hover,
.nav__btn:hover {
  border-color: var(--neon);
  color: #eafcff;
  background: linear-gradient(180deg, rgba(61, 123, 255, 0.18), rgba(61, 123, 255, 0.06));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 18px -4px var(--neon),
    0 0 6px -1px var(--neon);
  transform: translateY(-1px);
}
.btn:active,
.cfg-btn:active,
.cfg-gate-btn:active { transform: translateY(0); }
.btn:focus-visible,
.cfg-btn:focus-visible,
.cfg-gate-btn:focus-visible,
.nav__btn:focus-visible {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(61, 123, 255, 0.30), 0 0 18px -4px var(--neon);
}
.cfg-btn:disabled { opacity: 0.45; box-shadow: none; }

/* Primary = packet green, Danger = daemon red */
.cfg-btn-primary,
.cfg-gate-btn--primary,
.lbp__btn-primary {
  border-color: rgba(255, 210, 63, 0.55);
  background: linear-gradient(180deg, rgba(255, 210, 63, 0.16), rgba(255, 210, 63, 0.05));
  color: #eafff4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 16px -5px var(--neon-2);
}
.cfg-btn-primary:hover,
.cfg-gate-btn--primary:hover,
.lbp__btn-primary:hover {
  border-color: var(--neon-2);
  box-shadow: 0 0 20px -4px var(--neon-2), 0 0 7px -1px var(--neon-2);
}
.cfg-btn-danger {
  border-color: rgba(255, 59, 59, 0.5);
  background: linear-gradient(180deg, rgba(255, 59, 59, 0.14), rgba(255, 59, 59, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 16px -5px var(--neon-danger);
}
.cfg-btn-danger:hover {
  border-color: var(--neon-danger);
  box-shadow: 0 0 20px -4px var(--neon-danger);
}

/* ---- Inputs / selects / textareas: neon field + focus ring ---- */
.cfg-input, .cfg-text, .cfg-num, .cfg-select, .cfg-textarea,
.cfg-gate-input, .lbp__input, .nav__prefSelect, .cfg-root select {
  background: var(--field-bg);
  border: 1px solid var(--edge-soft);
  color: var(--text);
  border-radius: 8px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.cfg-input:hover, .cfg-text:hover, .cfg-num:hover, .cfg-select:hover,
.cfg-textarea:hover, .cfg-gate-input:hover, .lbp__input:hover, .nav__prefSelect:hover {
  border-color: var(--edge);
}
.cfg-input:focus, .cfg-text:focus, .cfg-num:focus, .cfg-select:focus,
.cfg-textarea:focus, .cfg-gate-input:focus, .lbp__input:focus,
.nav__prefSelect:focus, .cfg-root select:focus {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(61, 123, 255, 0.18), 0 0 14px -4px var(--neon);
  background: rgba(7, 16, 28, 0.85);
}
.cfg-input::placeholder, .cfg-text::placeholder,
.cfg-textarea::placeholder, .cfg-gate-input::placeholder,
.lbp__input::placeholder { color: var(--muted); }

/* Custom SVG caret for selects (replaces the old CSS-triangle caret) */
.cfg-select, .nav__prefSelect, .cfg-root select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%233d7bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) 50%;
  background-size: 12px 8px;
}

/* ---- Nav links: neon hover/active ---- */
.nav__link:hover { color: var(--link); text-shadow: 0 0 10px rgba(61, 123, 255, 0.55); }
.nav__link.active,
.nav__link[aria-current="page"] {
  color: var(--linkActive);
  text-shadow: 0 0 12px rgba(255, 210, 63, 0.6);
}

/* ---- HUD values + titles: subtle glow ---- */
.hud__value { text-shadow: 0 0 10px rgba(255, 210, 63, 0.35); }
.modal-title, .lbp__title, .play__menu-title, .cfg-gate-title {
  text-shadow: 0 0 14px rgba(61, 123, 255, 0.45);
}

/* ---- Tables: neon header + hairline rows ---- */
.table th { color: var(--link); border-bottom: 1px solid var(--edge-soft); }
.table td { border-bottom: 1px solid rgba(61, 123, 255, 0.08); }

/* Respect reduced motion: drop button lift (glow stays, it's static) */
@media (prefers-reduced-motion: reduce) {
  .btn, .cfg-btn, .cfg-gate-btn, .nav__btn { transition: none; }
  .btn:hover, .cfg-btn:hover, .cfg-gate-btn:hover, .nav__btn:hover { transform: none; }
}

/* ---- Numeric controls: neon stepper (hide native spinners, add SVG −/+) ---- */
/* Kill the browser's default number spinners everywhere. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* The wrapper built by neonStepper.js: [ − ] [ field ] [ + ] */
.neon-stepper {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--edge-soft);
  border-radius: 8px;
  background: var(--field-bg);
  overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.neon-stepper:hover { border-color: var(--edge); }
.neon-stepper:focus-within {
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(61, 123, 255, 0.18), 0 0 14px -4px var(--neon);
}

/* The field sheds its own border/bg — the wrapper owns the frame now. */
.neon-stepper > input[type="number"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  text-align: center;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.neon-stepper > input[type="number"]:focus { outline: none; box-shadow: none !important; }

.neon-step {
  flex: 0 0 auto;
  width: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--neon);
  background: linear-gradient(180deg, rgba(61, 123, 255, 0.10), rgba(61, 123, 255, 0.03));
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.neon-step:hover {
  color: #eafcff;
  background: rgba(61, 123, 255, 0.20);
  box-shadow: inset 0 0 14px -4px var(--neon);
}
.neon-step:active { background: rgba(61, 123, 255, 0.32); }
.neon-step--dec { border-right: 1px solid var(--edge-soft); }
.neon-step--inc { border-left: 1px solid var(--edge-soft); }
.neon-step svg { display: block; filter: drop-shadow(0 0 4px rgba(61, 123, 255, 0.5)); }

/* ---- Container padding / border-offset normalization ----
 * Consistent inner spacing so the glow sits cleanly around content and heads
 * don't double up borders/padding. */
.cfg-group { padding: 0; overflow: hidden; }          /* <details>: body owns padding */
.cfg-group-body { padding: var(--ctn-pad); }
.cfg-card-body { padding: var(--ctn-pad); }
.modal-body { padding: var(--ctn-pad); }
.cfg-catalog { padding: var(--ctn-pad); }
.lbp__section { padding: var(--ctn-pad); }
.cfg-catalog-row { padding: 10px; }

/* Heads sit flush to the container edge with a hairline divider (no double pad). */
.cfg-group-title { padding: 10px var(--ctn-pad); border-radius: 0; }
.cfg-card-head { padding: 10px var(--ctn-pad); }
.cfg-catalog-head { margin: 0 0 10px; }

/* The page-as-section wrapper stays flat (no nested glow box around a whole page). */
.cfg-center .cfg-section-as-page,
.cfg-center .cfg-section-as-page .cfg-leaf-active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ---- Checkboxes: neon box + SVG check (global, no class needed) ---- */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid var(--edge);
  border-radius: 5px;
  background-color: var(--field-bg);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
input[type="checkbox"]:hover { border-color: var(--neon); box-shadow: 0 0 10px -3px var(--neon); }
input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(61, 123, 255, 0.28);
}
input[type="checkbox"]:checked {
  border-color: var(--neon-2);
  background-color: rgba(255, 210, 63, 0.16);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M2.5 7.4l2.8 2.9 6.2-6.6' fill='none' stroke='%23ffd23f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 13px 13px;
  box-shadow: 0 0 12px -3px var(--neon-2);
}
input[type="checkbox"]:checked:hover { box-shadow: 0 0 16px -3px var(--neon-2); }
input[type="checkbox"]:indeterminate {
  border-color: var(--neon);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3.5 7h7' fill='none' stroke='%233d7bff' stroke-width='2' stroke-linecap='round'/></svg>");
  background-size: 12px 12px;
}
input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ===================================================================== *
 * Config pages: match the Sprite-sheet (Animation) page layout
 * Goal: every center page is a padded, contained panel with tidy aligned
 * controls — not floating fields that touch the edges. */

/* 1) Kill the fieldRow double-box: neutralize the .cfg-input WRAPPER only
 *    (a .cfg-input that is a direct child of a row). Real .cfg-input inputs
 *    used elsewhere (modals/filePicker) are not inside .cfg-row, so untouched. */
.cfg-row > .cfg-input {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
  width: 100%;
  justify-self: stretch;
}

/* 2) Each field page sits inside ONE padded neon container, with its fields laid
 *    out one-per-row as a clean label | control two-column form (the same tidy
 *    alignment as the ghost/fruit item cards, e.g. "blinky"). The padding keeps
 *    controls off the borders. */
.cfg-section-as-page .cfg-leaf-active > .cfg-group-body {
  padding: 18px !important;
  border: 1px solid var(--edge-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(0,0,0,.20));
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 48px -30px rgba(0, 0, 0, 0.95);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 0;
  align-content: start;
}

/* Pages that already provide their own card(s) — item-card pages
 *    (ghosts/runner/fruit/milestones) and the Animation page — shouldn't be
 *    wrapped in a second panel. */
.cfg-section-as-page .cfg-leaf-active > .cfg-group-body:has(.cards-host),
.cfg-section-as-page .cfg-leaf-active > .cfg-group-body:has(.cfg-anim-card) {
  padding: 0 !important;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: block;
}

/* 3) Compact aligned rows; spacing comes from the grid gap, not margins. */
.cfg-section-as-page .cfg-row {
  grid-template-columns: 150px 1fr;
  gap: 8px;
  margin: 0;
  align-items: center;
}
.cfg-section-as-page .cfg-row .cfg-num,
.cfg-section-as-page .cfg-row .cfg-text,
.cfg-section-as-page .cfg-row .cfg-select,
.cfg-section-as-page .cfg-row .cfg-textarea,
.cfg-section-as-page .cfg-row .neon-stepper {
  max-width: none;
  width: 100%;
  justify-self: stretch;
}
.cfg-section-as-page .cfg-help { max-width: none; margin-top: 2px; }

/* 4) Wide / standalone items span all grid columns. */
.cfg-section-as-page .cfg-row--stack,
.cfg-section-as-page .cfg-card,
.cfg-section-as-page .cfg-leaf-active > .cfg-group-body > .cfg-section-title,
.cfg-section-as-page .cfg-leaf-active > .cfg-group-body > .cfg-note,
.cfg-section-as-page .cfg-leaf-active > .cfg-group-body > .cfg-toolbar,
.cfg-section-as-page .cfg-leaf-active > .cfg-group-body > .cards-host,
.cfg-section-as-page .cfg-leaf-active > .cfg-group-body > .cfg-catalog,
.cfg-section-as-page .cfg-leaf-active > .cfg-group-body > details {
  grid-column: 1 / -1;
}

/* 5) Item detail pages (milestone / ghost / runner / fruit): two-column form.
 *    The page header now names the item, so the card's own title bar is
 *    redundant — hide heads that only carry a title, but keep heads that hold
 *    an action (e.g. the milestone Delete button) and drop just their label. */
.cfg-section-as-page .cards-host > .cfg-card > .cfg-card-head:not(:has(.cfg-btn)) {
  display: none;
}
.cfg-section-as-page .cards-host > .cfg-card > .cfg-card-head {
  padding: 10px 12px 10px 18px !important;
  justify-content: flex-end;
  border-bottom: 1px solid var(--edge-soft);
}
.cfg-section-as-page .cards-host > .cfg-card > .cfg-card-head > .cfg-card-title { display: none; }

/* Animation card keeps its own titled head. */
.cfg-section-as-page .cfg-card-head {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--edge-soft);
}
.cfg-section-as-page .cfg-card-title { font-size: 15px; font-weight: 800; }

/* Item-card surface matches the field-page panel (gradient, no blur).
 * These cards place their rows directly in .cfg-card (no .cfg-card-body),
 * so the padding lives on the card itself. */
.cfg-section-as-page .cards-host > .cfg-card {
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(0,0,0,.20));
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 48px -30px rgba(0,0,0,.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* A kept action head (milestone Delete) becomes a flush top bar. */
.cfg-section-as-page .cards-host > .cfg-card > .cfg-card-head {
  margin: -18px -18px 10px;
}

/* Body = exactly two columns of fields. */
.cfg-section-as-page .cfg-card-body {
  padding: 18px 18px 18px !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
  align-content: start;
}

/* Each field: compact label + control that fills its half-column. */
.cfg-section-as-page .cfg-card .cfg-row {
  grid-template-columns: 116px 1fr;
  gap: 10px;
  margin: 0;
  align-items: center;
}
.cfg-section-as-page .cfg-card .cfg-row .cfg-label { font-size: 12px; }
.cfg-section-as-page .cfg-card .cfg-row .cfg-num,
.cfg-section-as-page .cfg-card .cfg-row .cfg-text,
.cfg-section-as-page .cfg-card .cfg-row .cfg-select,
.cfg-section-as-page .cfg-card .cfg-row .neon-stepper {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

/* Subsection heading: full-width neon divider (e.g. "Speed", "Action parameters"). */
.cfg-section-as-page .cfg-card-body > .cfg-section-title {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--link);
  margin: 8px 0 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--edge-soft);
}

/* Items that need the full width of the card. */
.cfg-section-as-page .cfg-card-body > .cfg-action-host,
.cfg-section-as-page .cfg-card-body > .cfg-mini,
.cfg-section-as-page .cfg-card-body > .cfg-note,
.cfg-section-as-page .cfg-card .cfg-row--stack,
.cfg-section-as-page .cfg-card .cfg-row:has(.cfg-textarea),
.cfg-section-as-page .cfg-card .cfg-row:has(.cfg-color) {
  grid-column: 1 / -1;
}
/* Color picker: left-aligned, not stretched across the column. */
.cfg-section-as-page .cfg-card .cfg-row .cfg-color { justify-self: start; width: 56px; }

/* Any row that holds a textarea spans the full grid width (field pages too). */
.cfg-section-as-page .cfg-row:has(.cfg-textarea) { grid-column: 1 / -1; }

/* Rows holding a tall control (multi-line textarea or a catalog editor with its
 * own header) read better stacked: label on its own line above a full-width
 * control, rather than the label floating mid-height beside a tall box. */
.cfg-section-as-page .cfg-row:has(.cfg-textarea),
.cfg-section-as-page .cfg-row:has(.cfg-catalog) {
  grid-template-columns: 1fr;
  align-items: stretch;
}
.cfg-section-as-page .cfg-row:has(.cfg-textarea) > .cfg-label,
.cfg-section-as-page .cfg-row:has(.cfg-catalog) > .cfg-label { margin-bottom: 6px; }
.cfg-section-as-page .cfg-row:has(.cfg-textarea) > .cfg-help,
.cfg-section-as-page .cfg-row:has(.cfg-catalog) > .cfg-help { grid-column: 1; }

/* Field-page subheadings (non-item) keep a little top space. */
.cfg-section-as-page .cfg-section-title { margin: 4px 0 2px; }