/* QALIB — mold workshop. Precise instrument aesthetic. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink:#121419; --panel:#191c23; --surface:#20242e; --line:#2b303b;
  --txt:#e9ebef; --muted:#878e9c; --faint:#5b626f;
  --ember:#ff6a35; --ember-dim:#c4471f;
  --ok:#5fb98a;
  --rail:340px;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--disp); background:var(--ink); color:var(--txt);
  display:grid; grid-template-rows:auto 1fr; height:100vh; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* top bar */
header{
  display:flex; align-items:center; gap:16px; padding:14px 20px;
  border-bottom:1px solid var(--line); background:var(--panel);
}
.brand{font-weight:700; letter-spacing:.22em; font-size:18px}
.brand b{color:var(--ember)}
.tagline{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.05em}
header .spacer{flex:1}
.lang{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.lang button{
  background:transparent; color:var(--muted); border:0; padding:6px 14px;
  font-family:var(--mono); font-size:12px; cursor:pointer; letter-spacing:.08em;
}
.lang button.on{background:var(--ember); color:#1a0d07; font-weight:700}

/* layout */
main{display:grid; grid-template-columns:var(--rail) 1fr; min-height:0}
.rail{
  background:var(--panel); border-right:1px solid var(--line);
  overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:18px;
}
.viewport{position:relative; min-width:0; background:
  radial-gradient(120% 120% at 50% 0%, #1b1f29 0%, #0d0f13 70%);}
#canvas{width:100%; height:100%; display:block}

/* mode tabs */
.eyebrow{font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--faint); text-transform:uppercase; margin:0 0 8px}
.modes{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.mode{
  text-align:left; background:var(--surface); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:12px 12px; cursor:pointer; font-family:var(--disp);
  font-size:13px; line-height:1.3; transition:border-color .15s, transform .05s;
}
.mode:hover{border-color:var(--faint)}
.mode.on{border-color:var(--ember); box-shadow:inset 0 0 0 1px var(--ember)}
.mode .ix{font-family:var(--mono); font-size:10px; color:var(--ember); display:block; margin-bottom:4px}

/* drop zone */
.drop{
  border:1.5px dashed var(--line); border-radius:12px; padding:22px 16px; text-align:center;
  color:var(--muted); font-size:13px; cursor:pointer; transition:border-color .15s,background .15s;
}
.drop:hover,.drop.hot{border-color:var(--ember); background:rgba(255,106,53,.05); color:var(--txt)}
.drop .fn{display:block; margin-top:6px; font-family:var(--mono); font-size:11px; color:var(--ember)}
.preview-img{max-width:100%; max-height:90px; margin-top:10px; border-radius:6px; image-rendering:pixelated}

/* params */
.group{display:flex; flex-direction:column; gap:12px}
.field{display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px}
.field label{font-size:13px; color:var(--muted)}
.field .val{font-family:var(--mono); font-size:12px; color:var(--txt); min-width:42px; text-align:right}
.field input[type=range]{grid-column:1/-1; width:100%; accent-color:var(--ember); height:4px}
select,.seg{
  background:var(--surface); border:1px solid var(--line); color:var(--txt);
  border-radius:8px; padding:8px 10px; font-family:var(--mono); font-size:12px; width:100%;
}
.seg{display:flex; gap:4px; padding:4px}
.seg button{flex:1; background:transparent; border:0; color:var(--muted); padding:6px; border-radius:5px; cursor:pointer; font-family:var(--mono); font-size:12px}
.seg button.on{background:var(--ember); color:#1a0d07; font-weight:700}
.toggle{display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted)}
.toggle input{accent-color:var(--ember); width:16px; height:16px}
.hidden{display:none !important}

/* generate + stats */
.cta{
  background:var(--ember); color:#190c06; border:0; border-radius:10px; padding:14px;
  font-family:var(--disp); font-weight:700; font-size:15px; cursor:pointer; letter-spacing:.02em;
}
.cta:disabled{opacity:.5; cursor:default}
.cta:hover:not(:disabled){background:#ff7d4e}
.stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:2px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:10px}
.stat .k{font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--faint); text-transform:uppercase}
.stat .v{font-family:var(--mono); font-size:15px; color:var(--txt); margin-top:3px}
.stat .v small{color:var(--muted); font-size:11px}

/* viewport overlays */
.vp-tools{
  position:absolute; left:16px; bottom:16px; right:16px; display:flex; align-items:center; gap:14px;
  background:rgba(18,20,25,.7); backdrop-filter:blur(8px); border:1px solid var(--line);
  border-radius:12px; padding:10px 14px;
}
.vp-tools.hidden{display:none}
.vp-tools label{font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap}
.vp-tools input[type=range]{flex:1; accent-color:var(--ember)}
.vp-tools .dl{background:var(--surface); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:8px 14px; cursor:pointer; font-family:var(--mono); font-size:12px}
.vp-tools .dl:hover{border-color:var(--ember)}
.toast{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--ember);
  padding:10px 16px; border-radius:8px; font-size:13px; color:var(--txt); max-width:80%;
  opacity:0; transition:opacity .2s; pointer-events:none;
}
.toast.show{opacity:1}
.parts-legend{position:absolute; top:16px; left:16px; display:flex; flex-direction:column; gap:6px}
.chip{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--muted)}
.chip .sw{width:12px; height:12px; border-radius:3px}

footer{position:absolute; right:16px; bottom:74px; font-family:var(--mono); font-size:10px; color:var(--faint)}

@media (max-width:860px){
  main{grid-template-columns:1fr; grid-template-rows:1fr auto}
  .viewport{order:-1; min-height:42vh}
  .rail{max-height:58vh; --rail:100%}
  footer{display:none}
}

/* ── Stamp text input ───────────────────────────────── */
.text-field {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 16px;
  padding: 9px 10px;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 8px;
  outline: none;
}
.text-field:focus { border-color: var(--accent); }

.font-select {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 13px;
  padding: 7px 8px;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 8px;
  outline: none;
  cursor: pointer;
}
.font-select:focus { border-color: var(--accent); }

.font-preview {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: center;
  padding: 12px 8px;
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--fg);
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  word-break: break-all;
}