/* ===== design tokens — dark only (near-black + light blue) ===== */
:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:28px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-pill:999px;
  --text-xs:11.5px; --text-sm:12.5px; --text-md:14px; --text-lg:16px; --text-xl:19px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --bg:#050607;
  --topbar-bg:#090b0d;
  --panel-bg:#0c0f12;
  --viewport-bg:#000000;
  --text:#ffffff;
  --text-muted:#9fb4c2;
  --border:#1b2228;
  --border-strong:#5a6975;
  --accent:#58c4ff;
  --accent-strong:#7dd3ff;
  --accent-contrast:#04141c;
  --accent-soft:#102534;
  --input-bg:#11161b;
  --card-bg:#12171c;
  --card-active-bg:#58c4ff;
  --card-active-text:#04141c;
  --track-bg:#1c242b;
  --danger:#ff8a80;
  --danger-bg:#2a1512;
  --shadow:0 2px 16px rgba(0,0,0,0.6);
  --overlay-bg:rgba(5,8,10,0.6);
  --overlay-text:#ffffff;
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:'Familjen Grotesk', system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100vh;
}
button, input, select{ font-family:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:0.001ms !important; animation-duration:0.001ms !important; }
}

/* ===== top bar ===== */
.topbar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px var(--space-5);
  background:var(--topbar-bg);
  border-bottom:1px solid var(--border);
  gap:var(--space-4);
}
.topbar .brand{ display:flex; align-items:baseline; gap:var(--space-2); }
.topbar .brand .name{ font-weight:700; font-size:var(--text-lg); letter-spacing:.02em; }
.topbar .brand .sub{ font-size:var(--text-sm); color:var(--text-muted); }
.topbar-actions{ display:flex; gap:var(--space-2); }

.btn{
  border:none; border-radius:var(--radius-md); padding:9px 14px;
  font-size:var(--text-md); font-weight:600; cursor:pointer;
  transition: transform 140ms var(--ease-out), background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.btn:active{ transform:scale(0.97); }
.btn-sm{ padding:7px 12px; font-size:var(--text-sm); }
.btn-primary{ background:var(--accent); color:var(--accent-contrast); }
.btn-primary:hover{ background:var(--accent-strong); }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--border-strong); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-secondary{ background:transparent; color:var(--text); border:1px solid var(--border-strong); width:100%; margin-top:var(--space-2); }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }
.btn-link{
  background:none; border:none; color:var(--text-muted); font-size:var(--text-xs);
  cursor:pointer; padding:5px 6px; min-height:24px; text-decoration:underline; text-underline-offset:2px;
  transition: color 140ms ease, transform 140ms var(--ease-out);
}
.btn-link:hover{ color:var(--accent); }
.btn-link:active{ transform:scale(0.96); }

/* ===== app layout ===== */
.app{
  flex:1 1 auto;
  display:grid;
  grid-template-columns: 1fr 380px;
  min-height:0;
}
.viewport{ position:relative; background:var(--viewport-bg); overflow:hidden; }
.viewport canvas{ display:block; width:100%; height:100%; touch-action:none; }

.viewport-tools{
  position:absolute; top:14px; right:14px;
  display:flex; gap:6px;
}
.tool-btn{
  width:34px; height:34px; border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(5,8,10,0.55);
  color:#fff; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: transform 140ms var(--ease-out), background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.tool-btn:hover{ background:rgba(5,8,10,0.8); border-color:var(--accent); }
.tool-btn:active{ transform:scale(0.93); }
.tool-btn.active{ background:var(--accent); border-color:transparent; color:var(--accent-contrast); }

.brand-mark{
  position:absolute; top:14px; left:16px;
  color:#fff; font-size:13px; opacity:.75;
  letter-spacing:.08em; pointer-events:none;
}

.stats{
  position:absolute; left:16px; bottom:16px;
  display:flex; gap:10px; flex-wrap:wrap;
  pointer-events:none;
}
.stat-pill{
  background:var(--overlay-bg); color:var(--overlay-text);
  padding:7px 12px; border-radius:var(--radius-pill);
  font-size:var(--text-xs); letter-spacing:.02em;
  backdrop-filter:blur(6px);
  border:1px solid rgba(88,196,255,0.18);
  display:flex; align-items:baseline; gap:5px;
}
.stat-pill b{ font-size:var(--text-sm); font-weight:600; color:var(--accent-strong); }
.stat-pill .unit{ opacity:.7; }

/* ===== panel ===== */
.panel{
  background:var(--panel-bg);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  min-height:0;
  overflow-y:auto;
}
.panel-header{ padding:16px 20px 2px; }
.panel-header p{ margin:0; font-size:var(--text-sm); color:var(--text-muted); }

/* preset card grid */
.presets-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:8px;
  padding:14px 20px;
}
.preset-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:6px 4px 7px;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--text);
  transition: transform 140ms var(--ease-out), background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.preset-card:hover{ border-color:var(--accent); }
.preset-card:active{ transform:scale(0.96); }
.preset-card.active{ background:var(--card-active-bg); color:var(--card-active-text); border-color:transparent; }
.preset-card svg{ width:32px; height:44px; display:block; }
.preset-card svg path{ fill:currentColor; opacity:.9; }
.preset-card .label{ font-size:9.5px; text-align:center; line-height:1.2; }

/* control sections */
.sections{ padding:4px 20px 10px; }
details{ border-top:1px solid var(--border); padding:12px 0; }
summary{
  cursor:pointer; font-size:var(--text-md); font-weight:600;
  list-style:none; display:flex; align-items:center; justify-content:space-between;
  outline-offset:3px;
}
summary::-webkit-details-marker{ display:none; }
summary .chev{ transition:transform 180ms var(--ease-out); color:var(--text-muted); font-size:12px; }
details[open] summary .chev{ transform:rotate(90deg); }

.section-desc{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-2); margin-top:4px;
}
.section-desc p{ margin:0; font-size:var(--text-xs); color:var(--text-muted); }

.field{ margin-top:var(--space-4); }
.field-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.field-row label{ font-size:var(--text-sm); color:var(--text); }
.field-row .numwrap{ display:flex; align-items:center; gap:4px; }
.field-row input[type="number"]{
  width:62px; background:var(--input-bg); border:1px solid var(--border-strong);
  border-radius:var(--radius-pill); padding:5px 10px; font-size:var(--text-sm); color:var(--text);
  text-align:center; font-weight:600;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field-row input[type="number"]:hover{ border-color:var(--accent); }
.field-row input[type="number"]:focus-visible{
  border-color:var(--accent); outline:none;
  box-shadow: 0 0 0 3px rgba(88,196,255,0.28);
}
.field-row .unit{ font-size:var(--text-xs); color:var(--text-muted); min-width:16px; }

.range-wrap{ position:relative; }
.range-hints{
  display:flex; justify-content:space-between;
  font-size:10px; color:var(--text-muted); opacity:.85;
  margin-top:2px; padding:0 2px;
  pointer-events:none;
}

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:28px;
  background:transparent; margin:0; cursor:pointer;
  display:block;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:6px; border-radius:var(--radius-pill);
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--pct,0%), var(--track-bg) var(--pct,0%), var(--track-bg) 100%);
}
input[type="range"]::-moz-range-track{
  height:6px; border-radius:var(--radius-pill); background:var(--track-bg);
}
input[type="range"]::-moz-range-progress{
  height:6px; border-radius:var(--radius-pill); background:var(--accent);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#ffffff; border:none;
  margin-top:-6px;
  box-shadow: 0 0 0 4px rgba(88,196,255,0.28), 0 1px 3px rgba(0,0,0,0.5);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:#ffffff; border:none;
  box-shadow: 0 0 0 4px rgba(88,196,255,0.28), 0 1px 3px rgba(0,0,0,0.5);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
input[type="range"]:hover::-webkit-slider-thumb{ transform:scale(1.1); box-shadow: 0 0 0 6px rgba(88,196,255,0.36), 0 1px 4px rgba(0,0,0,0.5); }
input[type="range"]:hover::-moz-range-thumb{ transform:scale(1.1); box-shadow: 0 0 0 6px rgba(88,196,255,0.36), 0 1px 4px rgba(0,0,0,0.5); }
input[type="range"]:active::-webkit-slider-thumb{ transform:scale(0.95); }
input[type="range"]:active::-moz-range-thumb{ transform:scale(0.95); }
input[type="range"]:focus-visible{ outline:none; }
input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow: 0 0 0 2px var(--panel-bg), 0 0 0 5px var(--accent); }
input[type="range"]:focus-visible::-moz-range-thumb{ box-shadow: 0 0 0 2px var(--panel-bg), 0 0 0 5px var(--accent); }

@media (pointer:coarse){
  input[type="range"]::-webkit-slider-thumb{ width:26px; height:26px; margin-top:-10px; }
  input[type="range"]::-moz-range-thumb{ width:26px; height:26px; }
}

select{
  width:100%; background:var(--input-bg); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); padding:8px 10px; font-size:var(--text-sm); margin-top:6px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
select:hover{ border-color:var(--accent); }
select:focus-visible{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(88,196,255,0.28); }
.select-field{ margin-top:var(--space-4); }
.select-field label{ font-size:var(--text-sm); color:var(--text); display:block; }
.holder-extra{ margin-top:2px; }
.holder-note{ font-size:var(--text-xs); color:var(--text-muted); margin-top:var(--space-3); line-height:1.4; }
.holder-warning{
  font-size:var(--text-xs); color:var(--danger); line-height:1.4;
  margin-top:var(--space-2); padding:7px 9px;
  background:var(--danger-bg); border-radius:var(--radius-sm);
}
.holder-warning[hidden]{ display:none; }

/* export footer */
.panel-footer{
  position:sticky; bottom:0;
  background:var(--panel-bg);
  border-top:1px solid var(--border);
  padding:14px 20px 18px;
  box-shadow:var(--shadow);
  margin-top:auto;
}
.export-list{ display:flex; flex-direction:column; gap:7px; margin-bottom:10px; }
.export-row{ display:flex; align-items:flex-start; gap:8px; cursor:pointer; }
.export-row input[type="checkbox"]{ accent-color:var(--accent); width:15px; height:15px; margin-top:2px; }
.export-row .export-text{ display:flex; flex-direction:column; }
.export-row .export-name{ font-size:var(--text-sm); font-weight:600; }
.export-row .export-hint{ font-size:var(--text-xs); color:var(--text-muted); }
.export-summary{
  font-size:var(--text-xs); color:var(--accent-strong);
  margin-bottom:10px; padding:8px 10px;
  background:var(--accent-soft); border-radius:var(--radius-sm);
  border:1px solid rgba(88,196,255,0.2);
}
.toast{
  margin-top:10px; font-size:var(--text-sm); padding:8px 10px;
  border-radius:var(--radius-sm); background:var(--danger-bg); color:var(--danger);
  opacity:0; transform:translateY(4px) scale(0.98);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  pointer-events:none;
}
.toast.show{ opacity:1; transform:translateY(0) scale(1); }
input[type="file"]{ display:none; }

/* ===== responsive ===== */
@media (max-width: 860px){
  .app{ grid-template-columns:1fr; grid-template-rows:42vh 1fr; }
  .panel{ border-left:none; border-top:1px solid var(--border); }
  .presets-grid{ grid-template-columns:repeat(5, 1fr); }
}
@media (max-width: 480px){
  .topbar .brand .sub{ display:none; }
  .presets-grid{ grid-template-columns:repeat(4, 1fr); gap:6px; padding:12px; }
  .panel-header, .sections{ padding-left:14px; padding-right:14px; }
  .panel-footer{ padding:12px 14px 16px; }
  .preset-card .label{ font-size:9px; }
}