/* ══ FOUNDRY · molten mold studio ══════════════════════════════════ */
:root{
  --bg:#0a0b0f; --bg2:#0d0f15; --panel:#0e1016; --card:#12141c;
  --line:#1e2433; --line2:#2a3142;
  --txt:#e9edf6; --dim:#8a93a6; --faint:#5a6275;
  --molten1:#ff7a18; --molten2:#ff9d3d; --molten3:#ffd24a;
  --molten:#ff8e3c; --cool:#36e0ff; --good:#56e8b8; --bad:#ff6b6b;
  --grad:linear-gradient(135deg,var(--molten1),var(--molten3));
  --grad-cool:linear-gradient(135deg,#1ec8ff,#7af0ff);
  --r:14px; --r-sm:10px;
  --shadow:0 18px 50px -16px rgba(0,0,0,.65);
  --glow:0 0 0 1px rgba(255,140,60,.35),0 8px 26px -6px rgba(255,122,24,.45);
  --pw:368px;
  --ease:cubic-bezier(.22,1,.36,1);
  font-synthesis:none;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
.hidden{display:none!important}
html,body{height:100%}
body{
  background:var(--bg); color:var(--txt); overflow:hidden;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:.01em;
}
button,input,select{font-family:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:20px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#3a4255;background-clip:content-box}

/* ── boot splash ──────────────────────────────────────────────────── */
.boot{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(120% 90% at 50% 30%,#15171f 0%,#0a0b0f 70%);transition:opacity .6s var(--ease),visibility .6s}
.boot.hide{opacity:0;visibility:hidden;pointer-events:none}
.boot__mark{position:relative;width:74px;height:74px}
.boot__ingot{position:absolute;inset:0;border-radius:18px;background:var(--grad);
  box-shadow:0 0 40px -4px rgba(255,140,60,.7);animation:ingot 2.4s var(--ease) infinite}
.boot__drip{position:absolute;left:50%;top:64%;width:10px;height:10px;border-radius:50%;background:var(--molten3);
  transform:translateX(-50%);filter:blur(.3px);animation:drip 1.8s ease-in-out infinite}
@keyframes ingot{0%,100%{transform:rotate(-4deg) scale(1);filter:hue-rotate(0)}50%{transform:rotate(4deg) scale(1.06);filter:hue-rotate(-12deg)}}
@keyframes drip{0%{transform:translate(-50%,0);opacity:0}30%{opacity:1}100%{transform:translate(-50%,30px);opacity:0}}
.boot__name{font-weight:800;font-size:30px;letter-spacing:.42em;text-indent:.42em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.boot__bar{width:190px;height:4px;border-radius:4px;background:#1b1f2a;overflow:hidden}
.boot__bar i{display:block;height:100%;width:40%;border-radius:4px;background:var(--grad);animation:load 1.25s var(--ease) infinite}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}
.boot__tag{color:var(--dim);font-size:12.5px;letter-spacing:.04em}

/* ── app shell ────────────────────────────────────────────────────── */
.app{height:100vh;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:16px;padding:0 16px;height:60px;flex:0 0 auto;
  background:linear-gradient(180deg,rgba(18,20,28,.96),rgba(12,14,20,.92));
  border-bottom:1px solid var(--line);backdrop-filter:blur(10px);z-index:20}
.top__brand{display:flex;align-items:center;gap:12px}
.brandmark{width:34px;height:34px;border-radius:10px;background:var(--grad);position:relative;
  box-shadow:0 6px 18px -4px rgba(255,122,24,.6)}
.brandmark::after{content:"F";position:absolute;inset:0;display:grid;place-items:center;color:#1a0e04;font-weight:900;font-size:19px}
.brandwrap{display:flex;flex-direction:column;line-height:1.05}
.brandname{font-weight:800;letter-spacing:.26em;font-size:15px;text-indent:.26em}
.brandsub{color:var(--dim);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.top__actions{margin-left:auto;display:flex;align-items:center;gap:9px}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:11px;font-size:13px;font-weight:600;
  transition:transform .15s var(--ease),box-shadow .2s,background .2s;border:1px solid var(--line2);background:#161922;color:var(--txt)}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent}
.btn--ghost:hover{background:#161922}
.btn--primary{background:var(--grad);color:#1c1003;border-color:transparent;box-shadow:var(--glow)}
.btn--primary:hover{box-shadow:0 0 0 1px rgba(255,140,60,.5),0 12px 30px -6px rgba(255,122,24,.6)}
.btn .ico{font-size:15px}

/* segmented (small, header) */
.seg{display:inline-flex;background:#10131b;border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px}
.seg button{padding:6px 11px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--dim);transition:.18s var(--ease)}
.seg button.on{background:var(--card);color:var(--txt);box-shadow:inset 0 0 0 1px var(--line2)}
.seg--sm button{padding:5px 9px;font-size:11.5px}
/* mold-type dropdown (header) */
.moldpick{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.moldpick__lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700}
.moldsel{appearance:none;-webkit-appearance:none;background:var(--grad);color:#1c1003;font-weight:800;font-size:13.5px;
  border:none;border-radius:11px;padding:9px 34px 9px 14px;cursor:pointer;box-shadow:var(--glow);
  background-image:linear-gradient(135deg,var(--molten1),var(--molten3)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231c1003'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-position:right 8px center,right 8px center;background-size:auto,18px;background-repeat:no-repeat}
.moldsel option{background:#12141c;color:var(--txt);font-weight:600}
.moldpick__blurb{font-size:11.5px;color:var(--dim);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── stage ────────────────────────────────────────────────────────── */
.stage{flex:1;display:grid;grid-template-columns:1fr var(--pw);min-height:0}
.view{position:relative;overflow:hidden;background:
  radial-gradient(130% 110% at 30% 12%,#171a23 0%,#0c0d12 55%,#08090d 100%)}
body[data-bg="light"] .view{background:radial-gradient(130% 110% at 35% 15%,#e9edf5 0%,#cfd6e2 60%,#bcc4d2 100%)}
.view::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 70% 100%,rgba(255,122,24,.10),transparent 70%),
             radial-gradient(50% 45% at 15% 0%,rgba(54,224,255,.08),transparent 70%);
  animation:aurora 14s ease-in-out infinite alternate}
@keyframes aurora{0%{opacity:.7}100%{opacity:1;transform:translateY(-2%)}}
canvas#gl{width:100%;height:100%;display:block;position:relative;z-index:1}

/* HUD */
.hud{position:absolute;z-index:3}
.hud--tl{top:14px;left:14px}.hud--bl{left:14px;bottom:14px}.hud--br{right:14px;bottom:14px}
.readout{background:rgba(14,16,22,.78);border:1px solid var(--line);border-radius:13px;padding:11px 14px;
  backdrop-filter:blur(12px);box-shadow:var(--shadow);min-width:172px;display:flex;flex-direction:column;gap:3px}
.readout__title{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--molten2);font-weight:700}
.readout__line{font-size:12.5px;color:var(--dim)}
.readout__line b{color:var(--txt);font-weight:700}
.fitbadge{margin-top:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;width:fit-content}
.fitbadge.ok{background:rgba(86,232,184,.14);color:var(--good)}
.fitbadge.no{background:rgba(255,107,107,.14);color:var(--bad)}
.fitbadge.hint{background:rgba(255,140,60,.14);color:var(--molten3)}
.viewhint{font-size:11.5px;color:var(--faint);background:rgba(12,14,20,.55);padding:6px 11px;border-radius:9px;backdrop-filter:blur(6px)}

.vtools{display:flex;flex-direction:column;gap:6px}
.vbtn{width:38px;height:38px;border-radius:11px;background:rgba(16,19,27,.82);border:1px solid var(--line);
  color:var(--dim);font-size:16px;display:grid;place-items:center;backdrop-filter:blur(10px);
  transition:.16s var(--ease)}
.vbtn:hover{color:var(--txt);border-color:var(--line2);transform:translateX(-2px)}
.vbtn.on{color:#1c1003;background:var(--grad);border-color:transparent;box-shadow:var(--glow)}

/* primary "make the mold" call-to-action */
.makebtn{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;
  display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:15px;
  font-size:15.5px;font-weight:800;letter-spacing:.01em;color:#1c1003;background:var(--grad);
  box-shadow:var(--glow);animation:makepulse 2.1s var(--ease) infinite;transition:transform .15s var(--ease)}
.makebtn__ico{font-size:19px}
.makebtn:hover{transform:translateX(-50%) translateY(-2px)}
.makebtn:active{transform:translateX(-50%) translateY(0) scale(.99)}
@keyframes makepulse{
  0%,100%{box-shadow:0 0 0 1px rgba(255,140,60,.4),0 10px 30px -8px rgba(255,122,24,.55)}
  50%{box-shadow:0 0 0 1px rgba(255,170,90,.7),0 16px 48px -6px rgba(255,122,24,.9)}}

/* floating assembly dock */
.dock{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;
  background:rgba(14,16,22,.82);border:1px solid var(--line);border-radius:15px;padding:11px 15px;
  backdrop-filter:blur(13px);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:9px;min-width:340px;
  animation:dockin .6s .3s var(--ease) both}
@keyframes dockin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
.dock__row{display:flex;align-items:center;gap:11px}
.dock__ico{font-size:15px;color:var(--molten2)}
.dock__lbl{font-size:12px;color:var(--dim);width:54px;font-weight:600}
.dock__toggle{width:26px;height:26px;border-radius:8px;border:1px solid var(--line2);color:var(--dim);font-size:14px;display:grid;place-items:center;transition:.16s}
.dock__toggle.on{background:var(--grad-cool);color:#012;border-color:transparent}

/* forge overlay */
.forge{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:rgba(8,9,13,.62);backdrop-filter:blur(4px)}
.forge__crucible{display:flex;gap:10px;align-items:flex-end;height:40px}
.forge__crucible i{width:13px;height:13px;border-radius:50%;background:var(--grad);box-shadow:0 0 18px -2px var(--molten1)}
.forge__crucible i:nth-child(1){animation:bob .9s var(--ease) infinite}
.forge__crucible i:nth-child(2){animation:bob .9s var(--ease) .15s infinite}
.forge__crucible i:nth-child(3){animation:bob .9s var(--ease) .3s infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-18px);opacity:1}}
.forge__txt{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--molten2);font-weight:700}

/* ── control panel ────────────────────────────────────────────────── */
.panel{background:linear-gradient(180deg,var(--panel),#0b0d12);border-left:1px solid var(--line);
  overflow-y:auto;padding:14px 14px 60px;display:flex;flex-direction:column;gap:12px}
.sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  flex:0 0 auto;animation:secin .5s var(--ease) both}
@keyframes secin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sec__head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none}
.sec__ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:14px;
  background:rgba(255,140,60,.12);color:var(--molten2)}
.sec__ttl{font-size:12.5px;font-weight:700;letter-spacing:.05em;flex:1}
.sec__sub{font-size:10.5px;color:var(--faint)}
.sec__chev{color:var(--faint);transition:transform .25s var(--ease);font-size:12px}
.sec.collapsed .sec__chev{transform:rotate(-90deg)}
.sec__body{padding:4px 14px 14px;display:flex;flex-direction:column;gap:13px;
  max-height:1400px;transition:max-height .35s var(--ease),opacity .25s,padding .35s}
.sec.collapsed .sec__body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}

.field{display:flex;flex-direction:column;gap:7px}
.field.hidden{display:none}
.field__top{display:flex;justify-content:space-between;align-items:baseline}
.field__lbl{font-size:12px;color:var(--dim);font-weight:600}
.field__val{font-size:11.5px;color:var(--molten3);font-weight:700;font-variant-numeric:tabular-nums}
.field__hint{font-size:10.5px;color:var(--faint);line-height:1.4}

/* range */
.rng{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:6px;
  background:linear-gradient(90deg,var(--molten1),var(--molten3)) no-repeat,#1a1f2b;
  background-size:var(--fill,50%) 100%;outline:none}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;
  border:3px solid var(--molten2);box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 4px rgba(255,140,60,.16);cursor:grab;transition:transform .12s}
.rng::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.12)}
.rng::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:#fff;border:3px solid var(--molten2);cursor:grab}
.rng--dock{width:170px}
.rng--cool{background:linear-gradient(90deg,#1ec8ff,#7af0ff) no-repeat,#1a1f2b;background-size:var(--fill,50%) 100%}
.rng--cool::-webkit-slider-thumb{border-color:var(--cool);box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 4px rgba(54,224,255,.16)}

/* segmented (panel, full width) */
.pseg{display:grid;gap:4px;background:#0e1119;border:1px solid var(--line);border-radius:11px;padding:4px;
  grid-auto-flow:column;grid-auto-columns:1fr}
.pseg button{padding:9px 4px;border-radius:8px;font-size:12px;font-weight:600;color:var(--dim);
  display:flex;flex-direction:column;align-items:center;gap:3px;transition:.16s var(--ease)}
.pseg button .g{font-size:16px;line-height:1}
.pseg button:hover{color:var(--txt)}
.pseg button.on{background:var(--grad);color:#1c1003;box-shadow:0 4px 14px -4px rgba(255,122,24,.55)}
.pseg.cool button.on{background:var(--grad-cool);color:#012}

/* toggle */
.tog{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tog__lbl{font-size:12px;color:var(--dim);font-weight:600}
.switch{width:42px;height:24px;border-radius:13px;background:#1a1f2b;border:1px solid var(--line2);position:relative;transition:.2s var(--ease);flex:0 0 auto;cursor:pointer}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#838b9f;transition:.2s var(--ease)}
.switch.on{background:var(--grad);border-color:transparent}
.switch.on::after{transform:translateX(18px);background:#1c1003}

/* dropzone */
.drop{border:1.6px dashed var(--line2);border-radius:13px;padding:20px 14px;text-align:center;cursor:pointer;
  transition:.18s var(--ease);background:rgba(255,140,60,.03)}
.drop:hover,.drop.drag{border-color:var(--molten2);background:rgba(255,140,60,.08)}
.drop__ico{font-size:24px}
.drop__big{font-size:13px;font-weight:700;margin-top:6px}
.drop__sm{font-size:11px;color:var(--faint);margin-top:3px}

/* sample chips + small buttons */
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:7px 12px;border-radius:9px;background:#0e1119;border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--dim);transition:.15s}
.chip:hover{color:var(--txt);border-color:var(--line2)}
.chip.on{background:rgba(255,140,60,.14);color:var(--molten3);border-color:rgba(255,140,60,.4)}
.minib{flex:1;padding:8px;border-radius:9px;background:#0e1119;border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--dim);transition:.15s}
.minib:hover{color:var(--txt);border-color:var(--line2);background:#12151d}
.row{display:flex;gap:7px}

/* stat grid */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{background:#0e1119;border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.stat__k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.stat__v{font-size:15px;font-weight:700;margin-top:2px}
.stat__v small{font-size:10px;color:var(--dim);font-weight:600}

/* demoldability panel */
.demold{background:#0e1119;border:1px solid var(--line);border-radius:11px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.demold__row{display:flex;align-items:center;gap:9px}
.demold__dot{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.demold__dot.ok{background:var(--good);box-shadow:0 0 10px -1px var(--good)}
.demold__dot.warn{background:var(--molten3);box-shadow:0 0 10px -1px var(--molten3)}
.demold__dot.bad{background:var(--bad);box-shadow:0 0 10px -1px var(--bad);animation:trapPulse 1.5s ease-in-out infinite}
@keyframes trapPulse{0%,100%{opacity:1}50%{opacity:.45}}
.demold__txt{font-size:12.5px;font-weight:700;color:var(--txt)}
.demold__txt.ok{color:var(--good)}.demold__txt.warn{color:var(--molten3)}.demold__txt.bad{color:var(--bad)}
.demold__hint{font-size:10.5px;color:var(--faint);line-height:1.45}

/* material dropdown (panel) */
.matsel{width:100%;appearance:none;-webkit-appearance:none;background:#0e1119;color:var(--txt);
  border:1px solid var(--line2);border-radius:9px;padding:9px 30px 9px 11px;font-size:12.5px;font-weight:600;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238a93a6'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:17px}
.matsel:hover{border-color:var(--molten2)}

.note{font-size:11px;color:var(--faint);line-height:1.5;display:flex;gap:7px}
.note::before{content:"◆";color:var(--molten2);flex:0 0 auto}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:120;
  background:#12141c;border:1px solid var(--line2);border-radius:12px;padding:12px 18px;font-size:13px;
  box-shadow:var(--shadow);opacity:0;transition:.3s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{border-color:rgba(255,107,107,.5);color:#ffd9d9}
.toast.good{border-color:rgba(86,232,184,.5)}

/* responsive */
@media(max-width:1180px){ .moldpick__blurb{display:none} }
@media(max-width:920px){
  .moldsel{max-width:44vw;font-size:12px;padding:8px 30px 8px 10px}
  .moldpick__lbl{display:none}
}
@media(max-width:920px){
  .stage{grid-template-columns:1fr;grid-template-rows:54vh 1fr}
  .panel{--pw:100%;border-left:none;border-top:1px solid var(--line)}
  .top__actions .btn span:not(.ico){display:none}
  .dock{min-width:0;width:calc(100% - 86px);left:14px;transform:none}
  @keyframes dockin{from{opacity:0}to{opacity:1}}
}