@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&family=Suez+One&display=swap');
:root{--bg:#120b1f;--line:rgba(255,255,255,.14);--text:#f4ecff;--muted:#c7b5df;--accent:#8c5cff;--accent2:#35a8ff;--danger:#ff4b6a;--warn:#ffbf4b;--field:#302344}
*{box-sizing:border-box}
body{margin:0;height:100vh;overflow:hidden;background:radial-gradient(circle at top left,rgba(140,92,255,.25),transparent 38%),var(--bg);color:var(--text);font-family:Roboto,system-ui,sans-serif;font-weight:700}
.app-shell{height:100vh;display:grid;grid-template-columns:390px minmax(620px,1fr);gap:16px;padding:16px}
.panel{min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(44,33,66,.95),rgba(33,24,50,.98));box-shadow:0 22px 90px rgba(0,0,0,.35)}
.controls-panel{padding:24px;overflow-y:auto}
.viewer-column{min-height:0;display:grid;grid-template-rows:minmax(360px,1.1fr) minmax(300px,.9fr);gap:16px}
.eyebrow{margin:0 0 6px;color:var(--accent2);text-transform:uppercase;letter-spacing:.12em;font-size:.74rem}
h1{font-family:'Suez One',serif;font-weight:400;margin:0;font-size:2.25rem;line-height:.95}
.intro,.mini-note{color:var(--muted);line-height:1.45}.brand-block{margin-bottom:20px}
.control-grid,.control-card{display:grid;gap:14px}.control-card{padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.13)}
.important-card{border-color:rgba(53,168,255,.55);background:linear-gradient(180deg,rgba(53,168,255,.13),rgba(0,0,0,.13))}
.control-card h2{margin:0;font-size:1rem}.control-card summary{cursor:pointer;color:#e8d9ff;margin:4px 0 8px}
label{display:grid;gap:7px;color:#e8d9ff;font-size:.9rem}input,select,button{font:inherit}
input,select{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:var(--field);color:white;padding:11px 13px;outline:none}
input[type=hidden]{display:none}
.two-col,.button-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.checkbox-row{display:flex;align-items:center;gap:10px}.checkbox-row input{width:auto}
button{cursor:pointer;border:0;border-radius:14px;padding:12px 14px;color:white;background:rgba(140,92,255,.22);border:1px solid rgba(255,255,255,.16);font-weight:900}
button.active,#exportBtn{background:linear-gradient(90deg,var(--accent),var(--accent2))}
#exportBtn{width:100%;margin-top:4px;font-size:1rem}
.summary-grid{display:grid;grid-template-columns:1fr auto;gap:8px 12px;color:var(--muted);font-size:.86rem}.summary-grid strong{color:var(--text)}.hidden{display:none!important}
.editor-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto}.preview-panel{display:grid;grid-template-rows:minmax(0,1fr) auto}
.editor-header,.editor-footer,.preview-footer{padding:14px 18px;color:var(--muted);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
.editor-footer,.preview-footer{border-top:1px solid var(--line);border-bottom:0;font-size:.82rem}
.canvas-wrap{position:relative;min-height:0;overflow:hidden}#trackCanvas{display:block;width:100%;height:100%;background:#181126;touch-action:none;cursor:crosshair}
#viewer{height:100%;min-height:0;overflow:hidden}#viewer canvas{display:block;width:100%!important;height:100%!important}
.mode-pill{position:absolute;left:16px;top:16px;padding:10px 13px;border-radius:999px;background:rgba(18,11,31,.84);border:1px solid rgba(255,255,255,.16);font-size:.82rem;pointer-events:none}
.help-box{position:absolute;right:16px;top:16px;width:290px;max-width:calc(100% - 32px);padding:15px 16px;border-radius:18px;background:rgba(33,24,50,.94);border:1px solid rgba(255,255,255,.16);box-shadow:0 22px 70px rgba(0,0,0,.35);color:var(--muted);font-size:.84rem}.help-box strong{color:var(--text)}.help-box ol{padding-left:18px;margin-bottom:0}#closeHelpBtn{position:absolute;right:9px;top:8px;width:28px;height:28px;padding:0;border-radius:999px;background:rgba(255,255,255,.08)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;padding:12px 16px;border-radius:999px;background:rgba(18,11,31,.9);border:1px solid rgba(255,255,255,.18);box-shadow:0 14px 50px rgba(0,0,0,.34)}
@media(max-width:1100px){body{overflow:auto}.app-shell{height:auto;grid-template-columns:1fr}.viewer-column{height:980px}.controls-panel{max-height:none}}
@media(max-width:700px){.app-shell{padding:10px}.viewer-column{height:900px;grid-template-rows:1fr 1fr}.two-col,.button-row{grid-template-columns:1fr}}


.curve-preview{
  width:100%;
  height:110px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(0,0,0,.18);
  margin:.55rem 0 .7rem;
  display:block;
}
.standard-piece-card button.active,
#placeCurveBtn.active{
  background:#8c5cff;
  color:#fff;
}


.switch-tool-card strong{
  color:#f4ecff;
}


#placeSwitchBtn.active{
  background:#ffbf4b;
  color:#181126;
}


/* Support-free print warning shown before downloadable STL packages. */
.print-warning-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(8,5,15,.72);
  backdrop-filter:blur(7px);
}
.print-warning-card{
  width:min(490px,100%);
  padding:25px;
  border:1px solid rgba(255,191,75,.72);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(55,39,75,.99),rgba(26,17,42,.99));
  box-shadow:0 28px 100px rgba(0,0,0,.56);
}
.print-warning-card h2{
  margin:0 0 12px;
  font-family:'Suez One',serif;
  font-weight:400;
  font-size:1.8rem;
}
.print-warning-card p{line-height:1.52}
.print-warning-card strong{color:#fff4cc}
.print-settings{
  padding:12px 14px;
  border-radius:13px;
  border:1px solid rgba(53,168,255,.42);
  background:rgba(53,168,255,.12);
}
.print-warning-actions{margin-top:18px}
#printWarningContinueBtn{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}