/* --- step indicator ------------------------------------------------------ */
.steps{
  display:flex; align-items:center; justify-content:center;
  gap:.9rem;
  margin:1.4rem 0 1.8rem;
  font-family:var(--font-mono); font-size:.72rem;
}
.step{display:inline-flex; align-items:center; gap:.45rem; color:var(--muted)}
.step .n{
  font-weight:700; letter-spacing:.05em;
}
.step.active{color:var(--accent)}
.step.done{color:var(--ok)}
.step-line{width:2.2rem; height:0; border-top:1px solid var(--border); flex-shrink:0}
@media(max-width:540px){
  .step .label{display:none}
  .steps{gap:.6rem}
}

/* --- dropzone ------------------------------------------------------------ */
.dropzone{
  border:1px dashed rgba(255,255,255,.18);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  padding:2.4rem 1.5rem;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.dropzone:hover{border-color:rgba(255,255,255,.3); background:var(--bg-panel-hover)}
.dropzone.dragover{border-color:var(--accent); background:var(--accent-dim)}
.dropzone .dz-title{color:var(--heading); font-weight:600; margin-bottom:.25rem}
.dropzone .dz-hint{font-family:var(--font-mono); font-size:.72rem; color:var(--muted)}
.dropzone.error{border-color:var(--err)}

.or-divider{
  display:flex; align-items:center; gap:.9rem;
  margin:1.1rem 0;
  color:var(--muted);
  font-family:var(--font-mono); font-size:.66rem;
  text-transform:uppercase; letter-spacing:.13em;
}
.or-divider::before,.or-divider::after{content:''; flex:1; border-top:1px solid var(--border)}

.url-row{display:flex; gap:.5rem}
.input{
  flex:1;
  background:var(--bg-terminal);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--font-mono); font-size:.8rem;
  padding:.55rem .8rem;
  outline:none;
  transition:border-color .2s ease;
  min-width:0;
}
.input:focus{border-color:var(--accent-glow)}
.input::placeholder{color:rgba(125,118,108,.7)}

.file-pill{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.4rem .9rem;
  font-family:var(--font-mono); font-size:.78rem;
  color:var(--heading);
}
.file-pill .size{color:var(--muted); font-size:.7rem}
.file-pill button{
  background:none; border:none; color:var(--muted);
  cursor:pointer; font-size:.95rem; line-height:1; padding:0 .1rem;
}
.file-pill button:hover{color:var(--err)}

/* --- phase chips ---------------------------------------------------------- */
.phase-chips{
  display:flex; flex-wrap:wrap; gap:.35rem;
  margin-bottom:.8rem;
}
.phase-chip{
  font-family:var(--font-mono); font-size:.66rem;
  text-transform:uppercase; letter-spacing:.09em;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.18rem .6rem;
  color:var(--muted);
  transition:all .25s ease;
}
.phase-chip.active{color:var(--accent); border-color:var(--accent-glow); background:var(--accent-dim)}
.phase-chip.done{color:var(--ok); border-color:rgba(111,207,142,.3)}
.phase-chip.failed{color:var(--err); border-color:rgba(229,114,111,.35); background:var(--err-dim)}

/* --- conversion progress bar ---------------------------------------------- */
.conv-progress{margin:0 0 .9rem}
.conv-progress-track{height:8px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden}
.conv-progress-fill{
  height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--accent-glow), var(--accent));
  transition:width .5s ease;
}
.conv-progress-meta{
  display:flex; justify-content:space-between; margin-top:.35rem;
  font-family:var(--font-mono); font-size:.66rem; color:var(--muted);
}
#conv-progress-pct{color:var(--accent)}

/* --- terminal pane -------------------------------------------------------- */
.terminal{
  background:var(--bg-terminal);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.terminal-head{
  display:flex; align-items:center; gap:.8rem;
  padding:.45rem .9rem;
  border-bottom:1px solid var(--border);
  font-family:var(--font-mono); font-size:.68rem;
  color:var(--muted);
}
.terminal-head .spacer{flex:1}
.terminal-head .t-meta{color:var(--muted)}
.terminal-head button{
  background:none; border:1px solid var(--border); border-radius:5px;
  color:var(--muted); font-family:var(--font-mono); font-size:.62rem;
  padding:.1rem .45rem; cursor:pointer;
}
.terminal-head button:hover{color:var(--heading); border-color:var(--border-hover)}
.terminal-body{
  font-family:var(--font-mono);
  font-size:.74rem; line-height:1.55;
  padding:.8rem .95rem;
  height:340px;
  overflow-y:auto; overflow-x:auto;
  white-space:pre-wrap;
  word-break:break-word;
  color:var(--text);
}
.terminal-body.mini{height:auto; max-height:180px}
.t-line{display:block}
.t-dim{color:var(--muted)}
.t-ok{color:var(--ok)}
.t-warn{color:var(--accent)}
.t-err{color:var(--err)}
.t-info{color:var(--info)}
.t-phase{
  color:var(--muted);
  border-top:1px solid var(--border);
  margin-top:.5rem; padding-top:.5rem;
  text-transform:uppercase; letter-spacing:.1em; font-size:.64rem;
}
.t-line:first-child.t-phase{border-top:none; margin-top:0; padding-top:0}

/* --- report list (removed mods etc.) -------------------------------------- */
.report-list{list-style:none; padding:0; margin:0}
.report-row{
  display:flex; align-items:baseline; gap:.7rem;
  padding:.5rem 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.84rem;
}
.report-row:last-child{border-bottom:none}
.report-row .dot{position:relative; top:-1px}
.report-row .file{font-family:var(--font-mono); font-size:.76rem; color:var(--heading); word-break:break-all}
.report-row .why{color:var(--muted); font-size:.8rem}
.report-row .tag{
  margin-left:auto;
  font-family:var(--font-mono); font-size:.6rem;
  color:var(--muted);
  border:1px solid var(--border); border-radius:5px;
  padding:.06rem .4rem;
  white-space:nowrap;
}
@media(max-width:600px){
  .report-row{flex-wrap:wrap}
  .report-row .tag{margin-left:1.3rem}
}

/* --- doctor diagnosis cards ------------------------------------------------ */
.diag-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  padding:1rem 1.1rem;
  margin-bottom:.8rem;
}
.diag-card h3{font-size:.98rem; margin-bottom:.3rem; display:flex; align-items:center; gap:.6rem}
.diag-card .rule-id{
  font-family:var(--font-mono); font-size:.62rem; color:var(--muted);
  border:1px solid var(--border); border-radius:5px; padding:.05rem .4rem;
}
.diag-card p{font-size:.84rem; margin-bottom:.5rem}
.diag-card .suggest{color:var(--heading)}

/* --- pricing tiers ---------------------------------------------------------- */
.tier-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.8rem}
.tier-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:1.2rem 1.1rem;
  display:flex; flex-direction:column; gap:.4rem;
}
.tier-card .tier-name{font-weight:700; color:var(--heading); display:flex; align-items:center; gap:.5rem; justify-content:space-between}
.tier-card .price{font-family:var(--font-mono); font-size:1.3rem; color:var(--heading); font-weight:700}
.tier-card .price .per{font-size:.68rem; color:var(--muted); font-weight:400}
.tier-card ul{list-style:none; padding:0; margin:.3rem 0 0}
.tier-card li{
  font-size:.78rem; color:var(--text);
  padding:.28rem 0 .28rem 1rem;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.tier-card li:last-child{border-bottom:none}
.tier-card li::before{
  content:''; position:absolute; left:0; top:.72em;
  width:4px; height:4px; border-radius:50%; background:var(--muted);
}

/* --- builder mock tree ------------------------------------------------------ */
.checkbox-tree{
  border-left:1px solid rgba(255,255,255,.1);
  padding-left:1.1rem;
  margin:.5rem 0 .5rem .15rem;
  opacity:.75;
}
.cb-branch + .cb-branch{margin-top:1rem}
.cb-branch > .micro{display:block; margin-bottom:.3rem}
.cb-item{
  display:flex; align-items:center; gap:.55rem;
  padding:.22rem 0;
  font-size:.85rem;
  color:var(--text);
}
.cb-item input{accent-color:var(--accent); pointer-events:none}
.cb-item .hint{font-family:var(--font-mono); font-size:.66rem; color:var(--muted)}

/* --- how-it-works numbered steps -------------------------------------------- */
.how{counter-reset:how; list-style:none; padding:0}
.how li{
  counter-increment:how;
  position:relative;
  padding:0 0 1.4rem 2.6rem;
}
.how li:last-child{padding-bottom:0}
.how li::before{
  content:counter(how, decimal-leading-zero);
  position:absolute; left:0; top:.1rem;
  font-family:var(--font-mono); font-size:.8rem; font-weight:700;
  color:var(--accent);
}
.how li::after{
  content:''; position:absolute; left:.55rem; top:1.7rem; bottom:.4rem;
  border-left:1px solid var(--border);
}
.how li:last-child::after{display:none}
.how h3{font-size:.98rem; margin-bottom:.25rem}
.how p{font-size:.85rem; color:var(--muted); margin:0}

/* --- faq ---------------------------------------------------------------------- */
details.faq{
  border-bottom:1px solid var(--border);
  padding:.85rem 0;
}
details.faq summary{
  cursor:pointer;
  color:var(--heading); font-weight:600; font-size:.92rem;
  list-style:none;
  display:flex; align-items:baseline; gap:.6rem;
}
details.faq summary::before{
  content:'+';
  font-family:var(--font-mono);
  color:var(--muted);
  flex-shrink:0;
}
details.faq[open] summary::before{content:'\2212'; color:var(--accent)}
details.faq summary::-webkit-details-marker{display:none}
details.faq .faq-body{padding:.6rem 0 .2rem 1.2rem; font-size:.86rem; color:var(--text)}
.faq-group{margin-bottom:2rem}

/* --- converter options panel ------------------------------------------------ */
details.options{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  padding:.8rem 1rem;
}
details.options summary{
  cursor:pointer;
  color:var(--heading); font-weight:600; font-size:.9rem;
  list-style:none;
  display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
}
details.options summary::-webkit-details-marker{display:none}
details.options summary::before{
  content:'▸'; color:var(--muted); font-size:.75rem;
}
details.options[open] summary::before{content:'▾'; color:var(--accent)}
details.options[open] summary{margin-bottom:.6rem}
.opt-section{margin:.7rem 0 .35rem}
.opt-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:.6rem .8rem;
}
.opt-grid-wide{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.opt-field{
  display:flex; flex-direction:column; gap:.25rem;
  font-size:.78rem; color:var(--muted);
}
.opt-field .input{width:100%}
select.input{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 49%, var(--muted) 50%),
                   linear-gradient(135deg, var(--muted) 50%, transparent 51%);
  background-position:calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size:5px 5px;
  background-repeat:no-repeat;
  padding-right:1.8rem;
  cursor:pointer;
}
.opt-checks{display:flex; flex-direction:column; gap:.3rem; margin:.4rem 0}
.opt-check{
  display:flex; align-items:center; gap:.55rem;
  font-size:.84rem; color:var(--text);
  cursor:pointer;
}
.opt-check input{accent-color:var(--accent); width:15px; height:15px; flex-shrink:0}
.opt-check{flex-wrap:wrap}
.opt-help{flex-basis:100%; display:block; font-size:.68rem; color:var(--muted); margin-left:1.7rem; font-weight:400; line-height:1.4}

/* whitelist submenu under the converter option */
.opt-sub{
  margin:.1rem 0 .3rem 1.6rem; padding:.55rem .7rem;
  border-left:2px solid var(--accent-glow); background:rgba(255,255,255,.02);
  border-radius:0 var(--radius) var(--radius) 0;
  display:flex; flex-direction:column; gap:.45rem;
}
.opt-sub[hidden]{display:none}
.wl-row{display:flex; gap:.4rem}
.wl-row .input{flex:1}
.wl-chips{display:flex; flex-wrap:wrap; gap:.35rem}
.wl-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .55rem; border-radius:999px;
  background:var(--accent-dim); border:1px solid var(--accent-glow);
  color:var(--accent); font-size:.78rem;
}
.wl-x{background:none; border:none; color:var(--accent); cursor:pointer; font-size:1rem; line-height:1; padding:0}
.wl-x:hover{color:var(--err)}
.input.bad{border-color:var(--err)}

/* --- scroll reveal (hidden state only ever applied by JS, so no-JS still sees everything) --- */
@media (prefers-reduced-motion: no-preference){
  .reveal{transition:opacity .55s ease, transform .55s ease}
  .reveal.pre{opacity:0; transform:translateY(14px)}
}

/* --- home: interactive demo terminal ------------------------------------------- */
.demo-wrap{position:relative}
.demo-bar{
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:.6rem;
}
.demo-bar .btn{padding:.42rem .95rem; font-size:.8rem}
.demo-status{font-family:var(--font-mono); font-size:.68rem; color:var(--muted)}
.demo-status .dot{margin-right:.35rem; position:relative; top:-1px}

/* --- home: mod-fate chips -------------------------------------------------------- */
.fate-chips{display:flex; flex-wrap:wrap; gap:.45rem; margin:.9rem 0}
.fate-chip{
  font-family:var(--font-mono); font-size:.76rem;
  border:1px solid var(--border);
  background:var(--bg-panel);
  color:var(--text);
  border-radius:999px;
  padding:.32rem .8rem;
  cursor:pointer;
  transition:all .18s ease;
}
.fate-chip:hover{border-color:var(--border-hover); color:var(--heading)}
.fate-chip.sel{border-color:var(--accent-glow); background:var(--accent-dim); color:var(--accent)}
.fate-card{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  padding:1rem 1.15rem;
  display:flex; align-items:flex-start; gap:.85rem;
  min-height:5.2rem;
}
.fate-verdict{
  font-family:var(--font-mono); font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  padding:.2rem .55rem; border-radius:999px;
  flex-shrink:0; margin-top:.15rem;
}
.fate-verdict.stays{color:var(--ok); background:var(--ok-dim); border:1px solid rgba(111,207,142,.3)}
.fate-verdict.goes{color:var(--err); background:var(--err-dim); border:1px solid rgba(229,114,111,.3)}
.fate-card p{margin:0; font-size:.88rem}
.fate-card .fate-name{color:var(--heading); font-weight:600}

/* --- builder planner -------------------------------------------------------------- */
.planner{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; align-items:start}
@media(max-width:760px){.planner{grid-template-columns:1fr}}
.planner-controls .opt-grid{margin-bottom:.9rem}
.base-styles{display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:.45rem; margin:.5rem 0 1rem}
.base-style{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-panel);
  padding:.55rem .6rem;
  text-align:center;
  cursor:pointer;
  transition:all .18s ease;
  font-size:.8rem; color:var(--text); font-weight:600;
}
.base-style small{display:block; font-weight:400; color:var(--muted); font-size:.66rem; margin-top:.1rem}
.base-style:hover{border-color:var(--border-hover)}
.base-style.sel{border-color:var(--accent-glow); background:var(--accent-dim); color:var(--accent)}
.feature-group{margin-bottom:.9rem}
.feature-group > .micro{display:block; margin-bottom:.35rem}
.feature-checks{display:grid; grid-template-columns:1fr 1fr; gap:.15rem .8rem}
@media(max-width:480px){.feature-checks{grid-template-columns:1fr}}

.pack-preview{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-terminal);
  position:sticky; top:calc(var(--nav-h) + 1rem);
  overflow:hidden;
}
.pack-preview-head{
  padding:.7rem 1rem;
  border-bottom:1px solid var(--border);
  display:flex; align-items:baseline; gap:.7rem;
}
.pack-preview-head .count{font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:1.05rem}
.pack-preview-head .sub{font-size:.72rem; color:var(--muted)}
.pack-preview-list{max-height:420px; overflow-y:auto; padding:.4rem 0}
.pp-mod{
  display:flex; align-items:center; gap:.7rem;
  padding:.4rem 1rem;
  font-size:.84rem;
}
.pp-mod img{width:26px; height:26px; border-radius:4px; background:rgba(255,255,255,.05); flex-shrink:0}
.pp-mod .pp-name{color:var(--heading); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pp-mod .pp-dl{margin-left:auto; font-family:var(--font-mono); font-size:.64rem; color:var(--muted); white-space:nowrap}
.pp-empty{padding:1.6rem 1rem; text-align:center; color:var(--muted); font-size:.84rem}
.pack-preview-foot{
  border-top:1px solid var(--border);
  padding:.7rem 1rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1.2rem;
  font-family:var(--font-mono); font-size:.68rem; color:var(--muted);
}
.pp-loading{opacity:.55}

/* --- dependency graph --------------------------------------------------------------- */
.graph-box{
  position:relative;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-terminal);
  overflow:hidden;
}
.graph-box canvas{display:block; touch-action:none}
.graph-legend{
  display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:center;
  padding:.5rem .9rem;
  border-bottom:1px solid var(--border);
  font-family:var(--font-mono); font-size:.64rem; color:var(--muted);
}
.graph-legend i{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:.35rem; vertical-align:middle;
}
.graph-legend .hint{margin-left:auto; opacity:.7}
.graph-tip{
  position:absolute;
  background:rgba(15,14,12,.95);
  border:1px solid var(--border-hover);
  border-radius:4px;
  padding:.3rem .6rem;
  font-family:var(--font-mono); font-size:.68rem; color:var(--heading);
  pointer-events:none;
  max-width:280px;
  z-index:5;
}

/* --- pricing v2 --------------------------------------------------------------------- */
.tier-card.featured{border-color:var(--accent-glow); background:rgba(217,154,78,.05)}
.tier-card .tier-tag{margin-left:auto}
.tier-card li.yes::before{background:var(--ok)}
.price-note{font-size:.8rem; color:var(--muted)}

/* --- segmented toggle -------------------------------------------------------------- */
.seg{
  display:flex; align-items:center; gap:.3rem; flex-wrap:wrap;
  margin:.9rem 0 .7rem;
}
.seg button{
  font-family:var(--font-mono); font-size:.7rem; font-weight:600;
  border:1px solid var(--border); border-radius:999px;
  background:var(--bg-panel); color:var(--muted);
  padding:.26rem .8rem; cursor:pointer;
  transition:all .2s ease;
}
.seg button:hover{color:var(--heading); border-color:var(--border-hover)}
.seg button.sel{color:var(--accent); border-color:var(--accent-glow); background:var(--accent-dim)}
.seg-hint{font-size:.7rem; color:var(--muted); margin-left:.4rem}

/* --- feature rows with descriptions -------------------------------------------------- */
.feature-item{align-items:flex-start}
.feature-item input{margin-top:.28rem}
.feature-text{display:flex; flex-direction:column; gap:.05rem; min-width:0}
.feature-desc{font-size:.7rem; color:var(--muted); font-weight:400; line-height:1.4}
.feature-desc.adv{font-family:var(--font-mono); font-size:.66rem; color:rgba(217,154,78,.75); word-break:break-word}

/* --- shader cards ---------------------------------------------------------------------- */
.shader-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem}
.shader-card{
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--bg-panel);
  padding:0; overflow:hidden; cursor:pointer;
  text-align:left; color:var(--text);
  transition:all .22s var(--e-bounce);
}
.shader-card:hover{border-color:var(--border-hover)}
.shader-card.sel{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-glow)}
.shader-img{
  height:84px;
  background-size:cover; background-position:center;
  background-color:rgba(255,255,255,.04);
}
.shader-img.none{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.7rem; color:var(--muted);
}
.shader-meta{display:flex; flex-direction:column; gap:.15rem; padding:.5rem .6rem .6rem}
.shader-name{font-size:.8rem; font-weight:600; color:var(--heading)}
.shader-badge{
  font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.07em;
  align-self:flex-start; border-radius:999px; padding:.1rem .45rem;
  border:1px solid var(--border); color:var(--muted);
}
.shader-badge.light{color:var(--ok); border-color:rgba(111,207,142,.35)}
.shader-badge.medium{color:var(--accent); border-color:var(--accent-glow)}
.shader-badge.heavy{color:var(--err); border-color:rgba(229,114,111,.35)}
.shader-fps{font-size:.64rem; color:var(--muted)}

/* --- fps estimator box --------------------------------------------------------------------- */
.fps-box{
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--bg-panel);
  padding:.7rem .9rem .8rem;
  margin-bottom:.8rem;
}
.fps-box .seg{margin:.1rem 0 .2rem}
.fps-big{color:var(--accent); font-weight:700}
.pp-gh{
  width:26px; height:26px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--accent-glow); border-radius:4px;
  color:var(--accent); font-size:.56rem; font-weight:700;
  background:var(--accent-dim);
}

/* --- pack builder wizard --------------------------------------------------------- */
.wizard{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-panel);
  overflow:hidden;
}
.wizard-progress{padding:1rem 1.3rem .2rem}
.wz-bar{height:5px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden}
.wz-bar-fill{height:100%; background:var(--accent); border-radius:999px; transition:width .3s ease}
.wz-steplabel{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:.5rem;
  font-family:var(--font-mono); font-size:.66rem; color:var(--muted);
}
.wz-selcount{color:var(--accent)}
.wizard-body{padding:.4rem 1.3rem 1.2rem; min-height:230px}
.wz-title{font-size:1.3rem; margin:.3rem 0 .2rem}
.wz-sub{color:var(--muted); font-size:.86rem; margin-bottom:1.1rem}
.wizard-footer{
  display:flex; justify-content:space-between; gap:.8rem;
  padding:.9rem 1.3rem; border-top:1px solid var(--border);
  background:rgba(255,255,255,.015);
}
.wizard-footer .btn{min-width:120px; justify-content:center}

/* account bar + saved packs */
.account-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; justify-content:space-between;
  margin-bottom:.9rem; padding:.6rem .8rem;
  border:1px solid var(--border); border-radius:var(--radius); background:rgba(255,255,255,.02);
}
/* profile dropdown from the navbar */
.profile-menu{
  position:fixed; z-index:10050; min-width:220px; max-width:280px;
  background:var(--bg-panel); border:1px solid var(--border-hover);
  border-radius:var(--radius-md); padding:.5rem;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  display:flex; flex-direction:column; gap:.2rem;
}
.profile-menu[hidden]{display:none}
.pm-note{font-size:.8rem; color:var(--muted); padding:.35rem .5rem}
.pm-dim{opacity:.7}
.pm-full{width:100%; justify-content:center; margin-top:.2rem}
.pm-head{display:flex; align-items:center; gap:.55rem; padding:.4rem .5rem .55rem; border-bottom:1px solid var(--border); margin-bottom:.25rem}
.pm-avatar{width:30px; height:30px; border:1px solid var(--border)}
.pm-email{font-size:.82rem; color:var(--heading); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pm-item{
  text-align:left; background:none; border:none; cursor:pointer;
  color:var(--text); font-size:.85rem; padding:.5rem .55rem; border-radius:var(--radius-sm);
}
.pm-item:hover{background:rgba(255,255,255,.05); color:var(--heading)}

/* generic modal (user settings) */
.modal-overlay{
  position:fixed; inset:0; z-index:10060;
  background:rgba(6,5,4,.66); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:1.2rem;
}
.modal-card{
  width:100%; max-width:360px;
  background:var(--bg-panel); border:1px solid var(--border-hover);
  border-radius:var(--radius-lg); padding:1.4rem;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.modal-title{font-size:1.1rem; font-weight:700; color:var(--heading); margin-bottom:1rem}
.save-prompt-text{font-size:.88rem; color:var(--text); line-height:1.5; margin-bottom:.4rem}
.settings-avatar{display:flex; justify-content:center; margin-bottom:1rem}
.avatar-lg{width:96px; height:96px; border:1px solid var(--border); background:rgba(255,255,255,.03)}
.avatar-lg svg{width:52px; height:52px}
.settings-row{display:flex; gap:.5rem; justify-content:center}
.settings-status{text-align:center; color:var(--muted); min-height:1rem; margin-top:.6rem}
.modal-actions{display:flex; justify-content:flex-end; gap:.5rem; margin-top:1.2rem}

.account-bar[hidden], .packs-menu[hidden]{display:none}
.account-note{font-size:.8rem; color:var(--muted)}
.account-right{display:flex; gap:.4rem; flex-wrap:wrap}
.btn-google{display:inline-flex; align-items:center; gap:.5rem; background:#fff; color:#1f1f1f; border:1px solid #dadce0}
.btn-google:hover{background:#f6f6f6; color:#1f1f1f}
.g-mark{display:inline-flex}
.btn-sm{padding:.3rem .7rem; font-size:.8rem}
.btn-ghost{background:transparent; border-color:var(--border)}
.packs-menu{flex-basis:100%; margin-top:.5rem; border-top:1px solid var(--border); padding-top:.5rem; display:flex; flex-direction:column; gap:.3rem}
.pack-row{display:flex; align-items:center; gap:.6rem; padding:.35rem .4rem; border-radius:var(--radius-sm)}
.pack-row:hover{background:rgba(255,255,255,.03)}
.pack-name{flex:1; font-size:.86rem; color:var(--heading); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pack-meta{font-size:.64rem; color:var(--muted)}

/* build result: download format choice + install help */
.dl-formats{display:flex; flex-wrap:wrap; gap:.5rem}
.install-help{border:1px solid var(--border); border-radius:var(--radius); padding:.6rem .8rem}
.install-help summary{cursor:pointer; font-size:.85rem; color:var(--heading); font-weight:600; list-style:none}
.install-help summary::-webkit-details-marker{display:none}
.install-help summary::before{content:'?'; color:var(--accent); font-weight:700; margin-right:.45rem}
.install-help[open] summary{margin-bottom:.6rem}
.install-body{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
@media(max-width:560px){.install-body{grid-template-columns:1fr}}
.install-block{border-left:2px solid var(--accent-glow); padding-left:.7rem}
.install-app{font-weight:600; color:var(--accent); font-size:.82rem; margin-bottom:.3rem}
.install-block ol{margin:0; padding-left:1.1rem}
.install-block li{font-size:.78rem; color:var(--text); line-height:1.5; margin-bottom:.2rem}

/* live plain-language summary under the wizard */
.wizard-summary{
  margin-top:1rem; padding:1rem 1.2rem;
  border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius); background:rgba(255,255,255,.02);
}
.wz-sum-label{display:block; color:var(--accent); margin-bottom:.4rem; letter-spacing:.04em}
.wz-sum-text{margin:0; color:var(--text); font-size:.9rem; line-height:1.6}

/* add-on submenu under a base mod (e.g. Create's add-ons) */
.wz-addons{
  grid-column:1/-1; margin:.15rem 0 .5rem .3rem;
  padding:.5rem .7rem; border-left:2px solid var(--accent-glow);
  background:rgba(217,154,78,.05); border-radius:0 var(--radius) var(--radius) 0;
}
.wz-addons-label{display:block; color:var(--accent); margin-bottom:.3rem; letter-spacing:.03em}

.wz-grouplabel{display:block; margin:1rem 0 .4rem}
.wz-grouplabel:first-child{margin-top:0}
.wz-features{display:grid; grid-template-columns:1fr 1fr; gap:.3rem .9rem}
@media(max-width:560px){.wz-features{grid-template-columns:1fr}}
.wz-feature-row{display:flex; align-items:stretch; gap:.1rem}
.wz-feature-row > .wz-feature{flex:1; min-width:0}
/* source-page link: subtle and far right, a separate deliberate target that
   never toggles the mod (own hit area, click stops propagation) */
.wz-mod-link{
  flex-shrink:0; align-self:center;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-right:.15rem; border-radius:4px;
  color:var(--muted); opacity:.35;
  transition:opacity .15s ease, color .15s ease, background .15s ease;
}
.wz-feature-row:hover .wz-mod-link{opacity:.6}
.wz-mod-link:hover{opacity:1; color:var(--accent); background:var(--accent-dim)}

.wz-feature{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.5rem .6rem; border-radius:var(--radius);
  cursor:pointer; transition:background .15s ease;
}
.wz-feature:hover{background:rgba(255,255,255,.03)}
.wz-feature.off{opacity:.4; cursor:default}
.wz-feature input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  width:19px; height:19px; flex-shrink:0; margin-top:.1rem;
  border:1.5px solid var(--border-hover); border-radius:5px;
  background:var(--bg); cursor:pointer; position:relative;
  transition:background .15s ease, border-color .15s ease, transform .12s var(--e-bounce);
}
.wz-feature input:hover{border-color:var(--accent-glow)}
.wz-feature input:checked{background:var(--accent); border-color:var(--accent)}
.wz-feature input:checked::after{
  content:''; position:absolute; left:5.5px; top:2px; width:4px; height:9px;
  border:solid var(--accent-ink); border-width:0 2.2px 2.2px 0; transform:rotate(42deg);
}
.wz-feature input:active{transform:scale(.88)}
.wz-feature-text{display:flex; flex-direction:column; gap:.05rem}
.wz-feature-name{font-size:.9rem; color:var(--heading); font-weight:500}
.wz-feature-desc{font-size:.74rem; color:var(--muted); line-height:1.35}

.wz-fps{
  margin-top:1rem; padding:.7rem 1rem; border-radius:var(--radius);
  background:var(--accent-dim); border:1px solid var(--accent-glow);
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
}

/* review step */
.wz-review{display:flex; flex-direction:column; gap:.1rem}
.wz-rev-row{
  display:grid; grid-template-columns:110px 1fr; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.05);
  font-size:.88rem; align-items:start;
}
.wz-rev-row:last-of-type{border-bottom:none}
.wz-rev-k{font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding-top:.2rem}
.wz-rev-v{color:var(--text)}
.wz-rev-features{display:flex; flex-direction:column; gap:.5rem}
.wz-chips{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.2rem}
.wz-chip{font-size:.74rem; border:1px solid var(--border); border-radius:999px; padding:.15rem .55rem; color:var(--text); background:var(--bg)}
.wz-rev-mods{margin-top:.9rem}
.wz-rev-modlist{margin-top:.4rem; max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius); padding:.3rem; font-size:.82rem; color:var(--muted)}
.wz-modrow{display:flex; align-items:center; gap:.6rem; padding:.32rem .5rem}
.wz-modrow img,.wz-noicon{width:22px; height:22px; border-radius:5px; flex-shrink:0; background:rgba(255,255,255,.05)}
.wz-modname{color:var(--heading); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wz-modver{margin-left:auto; font-family:var(--font-mono); font-size:.64rem; color:var(--muted); white-space:nowrap}
.wz-modnote{padding:.4rem .5rem; font-size:.72rem; opacity:.8}

/* --- floating hero chips ------------------------------------------------------- */
.float-chips{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.55rem;
  margin:1.15rem auto 0;
  max-width:600px;
}
.float-chip{
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  border:1px solid var(--accent-glow); border-radius:999px;
  background:var(--accent-dim); color:var(--accent);
  padding:.34rem .9rem;
  text-decoration:none;
  animation:floaty 3.8s ease-in-out infinite;
  transition:transform .25s var(--e-bounce), background .2s ease, color .2s ease;
}
.float-chip:nth-child(2n){animation-duration:4.6s; animation-delay:.7s}
.float-chip:nth-child(3n){animation-duration:5.2s; animation-delay:1.3s}
.float-chip:nth-child(5n){animation-duration:4.1s; animation-delay:.4s}
.float-chip:hover{transform:scale(1.1) rotate(-2deg); background:var(--accent); color:var(--accent-ink)}
.float-chip.alt{border-color:rgba(111,207,142,.4); background:var(--ok-dim); color:var(--ok)}
.float-chip.alt:hover{background:var(--ok); color:#0c1a10}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){.float-chip{animation:none}}

/* --- scribble tour arrows -------------------------------------------------------- */
.squiggle{
  display:flex; justify-content:center;
  margin:.1rem 0;
  pointer-events:none;
}
.squiggle svg{width:54px; height:92px; overflow:visible}
.squiggle path{
  stroke:var(--accent); fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
.squiggle .s-path{stroke-width:2.5; stroke-dasharray:560; stroke-dashoffset:560}
.squiggle .s-head{stroke-width:2.8; stroke-dasharray:40; stroke-dashoffset:40}
/* one continuous "being drawn" motion: the line draws, the arrowhead draws
   straight on the end (no pop), it stays drawn for most of the loop, flows out,
   then a short (<1s) gap before it redraws. */
.squiggle.in .s-path{animation:sq-draw 9s ease-in-out var(--sq-delay,0s) infinite}
.squiggle.in .s-head{animation:sq-headdraw 9s ease-in-out var(--sq-delay,0s) infinite}
@keyframes sq-draw{
  0%   {stroke-dashoffset:560}
  14%  {stroke-dashoffset:0}
  82%  {stroke-dashoffset:0}
  90%  {stroke-dashoffset:-560}
  100% {stroke-dashoffset:-560}
}
@keyframes sq-headdraw{
  0%,14% {stroke-dashoffset:40}
  20%    {stroke-dashoffset:0}
  82%    {stroke-dashoffset:0}
  90%    {stroke-dashoffset:-40}
  100%   {stroke-dashoffset:-40}
}
@media(prefers-reduced-motion:reduce){
  .squiggle .s-path{stroke-dashoffset:0; animation:none}
  .squiggle .s-head{stroke-dashoffset:0; animation:none}
}

/* --- custom checkboxes (modern, not the OS default) ------------------------------ */
.opt-check input[type=checkbox],
.feature-item input[type=checkbox],
.cb-item input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; flex-shrink:0;
  border:1.5px solid var(--border-hover);
  border-radius:5px;
  background:var(--bg-panel);
  cursor:pointer;
  position:relative;
  transition:background .15s ease, border-color .15s ease, transform .12s var(--e-bounce);
}
.opt-check input[type=checkbox]:hover,
.feature-item input[type=checkbox]:hover{border-color:var(--accent-glow)}
.opt-check input[type=checkbox]:checked,
.feature-item input[type=checkbox]:checked,
.cb-item input[type=checkbox]:checked{
  background:var(--accent); border-color:var(--accent);
}
.opt-check input[type=checkbox]:checked::after,
.feature-item input[type=checkbox]:checked::after,
.cb-item input[type=checkbox]:checked::after{
  content:''; position:absolute;
  left:5px; top:1.5px; width:4px; height:9px;
  border:solid var(--accent-ink); border-width:0 2.2px 2.2px 0;
  transform:rotate(42deg);
}
.opt-check input[type=checkbox]:active,
.feature-item input[type=checkbox]:active{transform:scale(.88)}
.opt-check input[type=checkbox]:focus-visible,
.feature-item input[type=checkbox]:focus-visible{outline:2px solid var(--accent-glow); outline-offset:2px}

/* --- spec preset chips + help ----------------------------------------------------- */
.preset-chips{display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0 .2rem}
.preset-chip{
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  border:1px solid var(--border); border-radius:999px;
  background:var(--bg-panel); color:var(--text);
  padding:.3rem .75rem; cursor:pointer;
  transition:all .18s var(--e-bounce);
}
.preset-chip:hover{border-color:var(--border-hover)}
.preset-chip.sel{border-color:var(--accent-glow); background:var(--accent-dim); color:var(--accent)}
/* --- pc step: cleaner spec picker ------------------------------------------------- */
.wz-pc{display:flex; flex-direction:column; gap:.9rem}
.wz-specmode{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.wz-seg-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  padding:.7rem .85rem; text-align:left; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--bg-panel); transition:border-color .2s ease, background .2s ease;
}
.wz-seg-btn:hover{border-color:var(--border-hover)}
.wz-seg-btn.sel{border-color:var(--accent); background:var(--accent-dim)}
.wz-seg-title{font-size:.9rem; font-weight:600; color:var(--heading)}
.wz-seg-btn.sel .wz-seg-title{color:var(--accent)}
.wz-seg-sub{font-family:var(--font-mono); font-size:.64rem; color:var(--muted)}
.preset-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.5rem}
.preset-card{
  display:flex; flex-direction:column; gap:.15rem; padding:.6rem .7rem; text-align:left; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-panel);
  transition:border-color .2s ease, background .2s ease, transform .2s var(--e-bounce);
}
.preset-card:hover{border-color:var(--border-hover)}
.preset-card.sel{border-color:var(--accent); background:var(--accent-dim)}
.preset-name{font-size:.84rem; font-weight:600; color:var(--heading)}
.preset-card.sel .preset-name{color:var(--accent)}
.preset-spec{font-family:var(--font-mono); font-size:.62rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.preset-desc{font-size:.66rem; color:var(--muted); line-height:1.3}
.detect-box{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem}
.detect-hint{color:var(--muted)}
.detect-result{
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem .9rem; border-radius:var(--radius-md);
  background:var(--accent-dim); border:1px solid var(--accent-glow);
}
.detect-result > div{flex:1; min-width:0}
.detect-check{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
}
.detect-title{font-weight:600; color:var(--heading); font-size:.92rem}
.detect-note{color:var(--muted)}
.wz-spec-grid{display:grid; grid-template-columns:1fr 1fr; gap:.7rem .8rem}
@media(max-width:520px){.wz-specmode,.wz-spec-grid{grid-template-columns:1fr}}
.spec-help-os{font-weight:600; min-width:64px; color:var(--heading)}

.spec-help{margin-top:.6rem; border-top:1px solid var(--border); padding-top:.5rem}
.spec-help summary{
  cursor:pointer; list-style:none;
  font-family:var(--font-mono); font-size:.68rem;
  color:var(--muted);
  display:inline-flex; align-items:center; gap:.4rem;
}
.spec-help summary::-webkit-details-marker{display:none}
.spec-help summary::before{content:'?'; color:var(--accent); font-weight:700; border:1px solid var(--accent-glow); border-radius:50%; width:15px; height:15px; display:inline-flex; align-items:center; justify-content:center; font-size:.6rem}
.spec-help[open] summary{color:var(--heading)}
.spec-help-body{margin:.5rem 0 .1rem; display:flex; flex-direction:column; gap:.3rem}
.spec-help-row{display:flex; gap:.6rem; align-items:baseline; font-size:.78rem}
.spec-help-row a{font-weight:600; min-width:64px}
.spec-help-how{color:var(--muted); font-family:var(--font-mono); font-size:.68rem}
.fps-note{font-size:.7rem; color:var(--muted)}

/* --- hovers: quiet, no lifting ---------------------------------------------------- */
.card{transition:background .2s ease, border-color .2s ease}
.card:hover{border-color:var(--border-hover); background:var(--bg-panel-hover)}
.btn{transition:background .18s ease, border-color .18s ease, color .18s ease}
.btn:active{transform:translateY(1px)}
.base-style{transition:all .2s var(--e-bounce)}

/* --- home builder teaser ------------------------------------------------------------ */
.teaser-box{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  padding:1.1rem 1.2rem;
  display:grid; grid-template-columns:1fr auto;
  gap:.6rem 1.4rem; align-items:center;
}
@media(max-width:600px){.teaser-box{grid-template-columns:1fr}}
.teaser-box .opt-checks{margin:0}
.teaser-readout{
  text-align:center;
  font-family:var(--font-mono);
}
.teaser-readout .n{font-size:2rem; font-weight:700; color:var(--accent); line-height:1.1}
.teaser-readout .l{font-size:.64rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em}

/* --- pricing: two plans -------------------------------------------------------------- */
.plan-cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1rem; align-items:stretch;
  max-width:840px; margin:1.9rem auto 0;
}
@media(max-width:720px){
  .plan-cards{grid-template-columns:1fr; max-width:400px}
}
.plan-card{
  position:relative;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-panel);
  padding:1.5rem 1.35rem;
  display:flex; flex-direction:column;
  transition:border-color .2s ease, background .2s ease;
}
.plan-card:hover{border-color:var(--border-hover)}
.plan-card.best{border-color:var(--accent-glow); background:rgba(217,154,78,.05)}
.plan-ribbon{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.58rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em;
  background:var(--accent); color:var(--accent-ink);
  border-radius:3px; padding:.2rem .6rem;
  white-space:nowrap;
}
.plan-name{font-weight:700; color:var(--heading); font-size:.9rem; text-transform:uppercase; letter-spacing:.06em}
.plan-price{font-family:var(--font-mono); font-size:2rem; font-weight:700; color:var(--heading); margin:.35rem 0 0}
.plan-price .per{font-size:.8rem; color:var(--muted); font-weight:400}
.plan-sub{font-size:.79rem; color:var(--muted); margin:.35rem 0 .95rem; line-height:1.45}
.plan-feats{list-style:none; padding:0; margin:0 0 1.1rem; display:flex; flex-direction:column; gap:.42rem}
.plan-feats li{position:relative; padding-left:1.35rem; font-size:.82rem; color:var(--text); line-height:1.35}
.plan-feats li::before{content:'✓'; position:absolute; left:0; top:0; color:var(--ok); font-weight:700}
.plan-feats li.add{color:var(--heading)}
.plan-feats li.add::before{content:'+'; color:var(--accent)}
.plan-card .btn{width:100%; margin-top:auto}

.plan-includes{max-width:620px; margin:1.7rem auto 0}
.includes-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:.15rem 1rem; list-style:none; padding:0;
}
.includes-grid li{position:relative; padding:.34rem 0 .34rem 1.5rem; font-size:.87rem}
.includes-grid li::before{
  content:'✓'; position:absolute; left:.15rem;
  color:var(--ok); font-weight:700;
}

/* free-vs-paid comparison */
.plan-cards-3{max-width:840px}
.plan-free-cta{width:100%; border-color:var(--border-hover)}
.plan-compare{max-width:600px; margin:1.8rem auto 0}
.compare-table{width:100%; border-collapse:collapse; font-size:.86rem}
.compare-table th, .compare-table td{padding:.55rem .6rem; text-align:left; border-bottom:1px solid var(--border)}
.compare-table thead th{font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}
.compare-table th:nth-child(2), .compare-table th:nth-child(3),
.compare-table td:nth-child(2), .compare-table td:nth-child(3){text-align:center; width:23%; white-space:nowrap}
.compare-table td.yes{color:var(--ok); font-weight:600}
.compare-table td.no{color:var(--muted)}
.compare-table tbody tr:hover{background:rgba(255,255,255,.02)}

.breakeven{max-width:560px; margin:2rem auto 0; text-align:center}
.breakeven input[type=range]{
  width:100%; accent-color:var(--accent);
  margin:.7rem 0 .35rem; cursor:pointer;
}
.breakeven .verdict{font-size:.95rem; color:var(--heading); min-height:1.5em}
.breakeven .fine{font-size:.74rem; color:var(--muted)}

/* --- misc ----------------------------------------------------------------------- */
.stat-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:.4rem;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:1rem 0; margin:1.2rem 0;
  text-align:center;
}
.stat-row .value{font-family:var(--font-mono); font-size:1.15rem; font-weight:700; color:var(--heading)}
.stat-row .label{font-family:var(--font-mono); font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:.2rem}

.notice{
  border:1px solid var(--border);
  border-left:3px solid var(--info);
  border-radius:var(--radius);
  background:var(--bg-panel);
  font-size:.84rem;
  padding:.75rem 1rem;
  margin:1rem 0;
}
.notice.warn{border-left-color:var(--accent)}
.notice.err{border-left-color:var(--err)}
.notice.ok{border-left-color:var(--ok)}