:root {
  color-scheme: dark;
  --bg: #0f1012;
  --bg2: #16181b;
  --card: #1c1f23;
  --line: #2b2f34;
  --line2: #3a3f45;
  --text: #ecebe7;
  --muted: #9a9ea4;
  --accent: #ffcc00;
  --accent-ink: #111;
  --danger: #ff6b5e;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.4 var(--ui); display: flex; flex-direction: column; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
code { font-family: var(--mono); font-size: 12px; background: #24282d; padding: 1px 5px; border-radius: 4px; color: #ffe27a; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg2); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 30px; height: 30px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.brand-mark svg { width: 22px; height: 22px; }
.brand-name { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 15px; }
.brand-sub { color: var(--muted); font-size: 12px; letter-spacing: 0.04em; }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-group { display: flex; gap: 4px; align-items: center; }
.btn-group.gen select { height: 34px; }

.btn { height: 34px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--line2); background: var(--card); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover:not(:disabled) { background: #262a2f; border-color: #4a5058; }
.btn:disabled { opacity: .35; cursor: default; }
.btn:focus-visible, .pal-btn:focus-visible, .swatch:focus-visible, .tpl:focus-visible, .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { background: #ffd733; border-color: #ffd733; }
.btn.icon { width: 34px; padding: 0; font-size: 16px; }
.btn.sm { height: 26px; font-size: 12px; padding: 0 8px; }
.btn.icon.sm { width: 26px; padding: 0; font-size: 13px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { color: var(--text); background: #23272b; }
.btn.danger:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.btn.wide { width: 100%; }
.btn.dashed { border-style: dashed; background: transparent; color: var(--muted); margin-top: 4px; }
.btn.dashed:hover:not(:disabled) { color: var(--text); }

select, input[type="number"] { height: 30px; background: var(--card); border: 1px solid var(--line2); border-radius: 6px; padding: 0 8px; }
input[type="range"] { accent-color: var(--accent); width: 100%; }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
input[type="color"] { width: 44px; height: 28px; border: 1px solid var(--line2); border-radius: 6px; background: var(--card); padding: 2px; }

.menu { position: relative; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--line2); border-radius: 9px; padding: 5px; min-width: 230px; z-index: 30; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.menu-list button, .menu-file { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; border: 0; background: none; cursor: pointer; }
.menu-list button:hover, .menu-file:hover { background: #2a2e33; }
.menu-file { border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0 0 6px 6px; color: var(--muted); }

/* ---------- layout ---------- */
.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 400px 1fr; }
.sidebar { overflow-y: auto; border-right: 1px solid var(--line); background: var(--bg2); padding: 6px 14px 40px; }
.section { border-bottom: 1px solid var(--line); padding: 4px 0 14px; }
.section > summary { list-style: none; cursor: pointer; padding: 12px 0 10px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #cfd2d6; display: flex; align-items: center; gap: 8px; }
.section > summary::-webkit-details-marker { display: none; }
.section > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; display: inline-block; }
.section[open] > summary::before { transform: rotate(90deg); }
.hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }

/* templates */
.templates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl { background: #121315; border: 1px solid var(--line); border-radius: 8px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.tpl:hover { border-color: var(--accent); }
.tpl-img { height: 46px; display: flex; align-items: center; justify-content: center; }
.tpl-img svg { max-width: 100%; max-height: 46px; display: block; }
.tpl-name { font-size: 12px; color: var(--muted); }

/* panels */
.panel-card { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--pbg); border-radius: 9px; padding: 10px; margin-bottom: 10px; }
.panel-card.flash { animation: flash .9s ease; }
@keyframes flash { 0% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 2px transparent; } }
.phead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ptitle { font-weight: 600; font-size: 13px; }
.ptools { display: flex; gap: 3px; }
.swatches { display: flex; gap: 6px; margin-bottom: 9px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 6px; border: 2px solid transparent; background: var(--bg); padding: 0; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.swatch span { position: absolute; inset: 7px; border-radius: 2px; background: var(--fg); }
.swatch.on { border-color: var(--text); }
.popts { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.popts .lbl { font-size: 12px; color: var(--muted); }
.num { width: 70px; }
.lines { display: flex; flex-direction: column; gap: 5px; }
.line { display: flex; gap: 3px; align-items: center; }
.line-input { flex: 1; min-width: 0; height: 32px; background: #121315; border: 1px solid var(--line); border-radius: 6px; padding: 0 9px; font-family: var(--mono); font-size: 12.5px; }
.line-input:focus { outline: none; border-color: var(--accent); }
.line-input.target:not(:focus) { border-color: #6b5a14; }
.addline { margin-top: 5px; }

/* style form */
.form { display: flex; flex-direction: column; gap: 9px; }
.row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 10px; }
.row > span { color: var(--muted); font-size: 13px; }
.row input[type="checkbox"], .row input[type="color"] { justify-self: start; }
.seg { display: inline-flex; background: #121315; border: 1px solid var(--line2); border-radius: 7px; padding: 2px; gap: 2px; justify-self: start; }
.seg button { border: 0; background: none; padding: 4px 10px; border-radius: 5px; cursor: pointer; color: var(--muted); font-size: 12.5px; }
.seg button.on { background: #30353b; color: var(--text); }
.seg.small button { padding: 3px 9px; font-size: 12px; }

.syntax p { color: var(--muted); margin: 0 0 8px; font-size: 13px; }
.syntax table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 10px; }
.syntax td { padding: 5px 4px; border-top: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.syntax td:first-child { white-space: nowrap; }
.syntax .eg code { display: inline-block; margin: 2px 0; }

/* ---------- stage ---------- */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.stage-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); gap: 10px; flex-wrap: wrap; }
.readout { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.view { flex: 1; min-height: 240px; position: relative; overflow: hidden; display: grid; place-items: center; }
.view.terminal {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 64px),
    linear-gradient(180deg, #2a2f35 0%, #1a1d21 38%, #23272b 100%);
}
.view.terminal::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.04)); pointer-events: none; }
.view.grid { background-color: #141619; background-image: linear-gradient(#1e2125 1px, transparent 1px), linear-gradient(90deg, #1e2125 1px, transparent 1px); background-size: 24px 24px; }
.view.light { background: #e9e8e4; }
.sign-wrap { position: relative; z-index: 1; }
.view.terminal .sign-wrap::before, .view.terminal .sign-wrap::after {
  content: ""; position: absolute; bottom: 100%; width: 6px; height: 100vh;
  background: linear-gradient(90deg, #555b62, #9aa0a6 45%, #4a4f55); left: 12%;
}
.view.terminal .sign-wrap::after { left: auto; right: 12%; }
#canvas { display: block; cursor: pointer; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
.view.light #canvas { filter: drop-shadow(0 10px 20px rgba(0,0,0,.18)); }

.palette { border-top: 1px solid var(--line); background: var(--bg2); padding: 10px 14px; display: flex; gap: 18px; flex-wrap: wrap; max-height: 34vh; overflow-y: auto; align-items: flex-start; }
.pal-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; align-content: flex-start; }
.pal-group.grow { flex: 1 1 360px; }
.pal-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-right: 6px; width: 100%; }
.pal-btn { width: 36px; height: 36px; border-radius: 7px; border: 1px solid var(--line); background: var(--card); color: var(--accent); padding: 6px; cursor: pointer; display: grid; place-items: center; }
.pal-btn svg { width: 100%; height: 100%; display: block; }
.pal-btn:hover { border-color: var(--accent); background: #24282d; }
.pal-btn.txt { font-family: var(--mono); font-size: 13px; color: var(--text); padding: 0; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--accent); color: var(--accent-ink); padding: 9px 16px; border-radius: 8px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  body { overflow: auto; height: auto; }
  .layout { display: flex; flex-direction: column-reverse; }
  .sidebar { border-right: 0; border-top: 1px solid var(--line); overflow: visible; }
  .view { min-height: 46vh; }
  .palette { max-height: none; }
  .brand-sub { display: none; }
  .row { grid-template-columns: 120px 1fr; }
}
@media (max-width: 520px) {
  .topbar { padding: 10px 12px; }
  .sidebar, .palette, .stage-bar { padding-left: 16px; padding-right: 16px; }
  .btn-group.gen select { max-width: 130px; }
}