* { box-sizing: border-box; }
:root {
  --bg: #12151a; --panel: #1a1f26; --panel2: #222832; --line: #2e3540; --text: #dfe4ea; --muted: #8b95a3;
  --accent: #ffb300; --good: #4caf50; --warn: #ffb300; --bad: #ef5350;
}
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.4 system-ui, 'Segoe UI', Roboto, sans-serif; overflow: hidden; }
body { display: flex; flex-direction: column; }
button, select, input { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.on { background: #3a2f10; border-color: var(--accent); color: var(--accent); }
#top { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { font-weight: 800; font-size: 16px; color: var(--accent); }
.brand span { color: var(--text); font-weight: 400; }
.grp { display: flex; gap: 6px; align-items: center; }
.grp label { color: var(--muted); }
.grp .chk { color: var(--text); display: flex; gap: 4px; align-items: center; }
.grp.right { margin-left: auto; }
#main { flex: 1; display: flex; min-height: 0; }
#palette { width: 210px; background: var(--panel); border-right: 1px solid var(--line); padding: 8px; overflow-y: auto; }
#palette h4 { margin: 4px 0 8px; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
.pal { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; margin-bottom: 4px; padding: 6px 8px; }
.pal i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pal.on { background: #3a2f10; border-color: var(--accent); }
.help { margin-top: 12px; color: var(--muted); font-size: 12px; }
.help p { margin: 6px 0; }
kbd { background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; font-size: 11px; }
#stage { flex: 1; position: relative; min-width: 0; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
#hud { position: absolute; left: 10px; top: 10px; background: rgba(18,21,26,.85); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; pointer-events: none; font-variant-numeric: tabular-nums; }
#hud b { color: var(--accent); }
#meter { position: absolute; right: 10px; top: 10px; width: 230px; background: #f2c200; color: #111; border-radius: 12px; padding: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }
#meter .lcd { background: #9fb28a; border-radius: 6px; padding: 6px 8px; font: 700 26px/1.1 'Consolas', monospace; text-align: right; margin: 6px 0; color: #1d2a12; }
#meter .lcd small { font-size: 13px; }
#meter .row { font-size: 12px; }
#meter .red { color: #b71c1c; font-weight: 700; } #meter .blk { font-weight: 700; }
#tip { position: absolute; pointer-events: none; background: rgba(10,12,16,.95); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12px; max-width: 320px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: #3a1e1e; border: 1px solid var(--bad); padding: 6px 12px; border-radius: 6px; }
#panel { width: 300px; background: var(--panel); border-left: 1px solid var(--line); padding: 10px; overflow-y: auto; }
#pTitle { font-weight: 700; font-size: 15px; margin-bottom: 8px; color: var(--accent); }
#pBody .f { margin: 8px 0; }
#pBody .f > label { display: block; color: var(--muted); margin-bottom: 3px; }
#pBody select, #pBody input[type=number] { width: 100%; }
#pBody input[type=range] { width: 100%; }
#pBody .btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.muted { color: var(--muted); }
.note { background: var(--panel2); border-left: 3px solid var(--accent); padding: 6px 8px; border-radius: 4px; color: var(--muted); font-size: 12px; margin: 8px 0; }
#pLive table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
#pLive td { padding: 3px 2px; border-bottom: 1px solid var(--line); }
#pLive td:last-child { text-align: right; }
#pLive .h td { color: var(--accent); font-weight: 700; padding-top: 10px; }
.good { color: var(--good); } .warn { color: var(--warn); } .bad { color: var(--bad); }
#log { height: 110px; background: #0d1014; border-top: 1px solid var(--line); overflow-y: auto; padding: 4px 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
#log div { padding: 1px 0; }
#log .t { color: var(--muted); margin-right: 8px; }
#log .warn { color: #ffcc80; } #log .bad { color: #ff8a80; } #log .info { color: #b0bec5; }

#cancelBtn { position: absolute; right: 10px; bottom: 10px; padding: 10px 14px; background: #3a2f10; border-color: var(--accent); color: var(--accent); font-weight: 700; }
.mob { display: none; }
@media (max-width: 820px) {
  html, body { font-size: 12px; }
  #top { gap: 6px; padding: 4px 6px; flex-wrap: nowrap; overflow-x: auto; }
  #top > * { flex: none; }
  #top .brand { font-size: 14px; }
  #top label { display: none; }
  #top .grp .chk { display: flex; }
  #top select, #top button { padding: 5px 6px; font-size: 12px; max-width: 60vw; }
  .grp.right { margin-left: 0; }
  #main { flex-direction: column; }
  #palette { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); padding: 4px 6px; display: flex; gap: 6px; align-items: center; overflow-x: auto; overflow-y: hidden; flex: none; }
  #palette h4 { margin: 0; white-space: nowrap; display: none; }
  #palList { display: flex; gap: 4px; }
  .pal { width: auto; white-space: nowrap; margin: 0; padding: 8px 10px; }
  .help { display: none; }
  #stage { flex: 1; min-height: 0; }
  #panel { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 42vh; border-left: 0; border-top: 2px solid var(--accent); z-index: 5; border-radius: 12px 12px 0 0; box-shadow: 0 -6px 20px rgba(0,0,0,.6); }
  body.nosel #panel { display: none; }
  #log { height: 64px; }
  #meter { width: 180px; padding: 6px; } #meter .lcd { font-size: 20px; }
  #hud { font-size: 11px; max-width: 60vw; }
  #cancelBtn { bottom: auto; top: 10px; right: auto; left: 50%; transform: translateX(-50%); }
}