:root{--bg: #12151b;--panel: #181c24;--line: #2a303c;--text: #e7e9ee;--mute: #8e96a6;--accent: #e0b25a;--accent2: #4fd1d1;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif}button,input,select{font:inherit;color:inherit}button{background:#232834;border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer}button:hover{border-color:#4a5366}button.on{border-color:var(--accent);background:#2b2819;color:#fff}input[type=text],input:not([type]),select{width:100%;background:#10131a;border:1px solid var(--line);border-radius:8px;padding:7px 9px;margin:3px 0}.app{display:grid;grid-template-columns:minmax(340px,44%) 1fr;height:100%}.stage{position:relative;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 35%,#2a303d,#14171d 70%);transition:background .4s;overflow:hidden;min-height:0}.stage.night{background:#04060a}.stage header{padding:16px 20px 0}.stage h1{margin:0;font-size:18px;letter-spacing:.04em;font-weight:650}.stage header p{margin:2px 0 0;color:var(--mute);font-size:13px}.watch-svg{flex:1;min-height:0;width:100%}.stage-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 16px 16px}.stage-bar button{padding:4px 10px}.toast{position:absolute;left:50%;bottom:70px;transform:translate(-50%);background:#000c;padding:6px 12px;border-radius:8px}.panel{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel);border-left:1px solid var(--line)}.panel nav{display:flex;gap:4px;padding:10px 12px 0;overflow-x:auto;border-bottom:1px solid var(--line)}.panel nav button{border:0;border-radius:8px 8px 0 0;background:none;color:var(--mute);padding:8px 12px;white-space:nowrap}.panel nav button.on{color:var(--text);background:#232834;box-shadow:inset 0 -2px var(--accent)}.content{padding:16px 18px 40px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px}.field>label{display:block;font-weight:600;margin-bottom:6px}.hint{font-weight:400;color:var(--mute)}.chips{display:flex;flex-wrap:wrap;gap:6px}.chips.hands button{display:flex;flex-direction:column;align-items:center;padding:4px 8px;font-size:11px}.swatches{display:flex;flex-wrap:wrap;gap:6px}.swatches button,.swatches .custom{width:28px;height:28px;padding:0;border-radius:50%;border:2px solid #0007}.swatches button.on{outline:2px solid var(--accent);outline-offset:2px}.swatches.big button{width:36px;height:36px}.custom{position:relative;overflow:hidden;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);cursor:pointer}.custom input{opacity:0;position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;width:40px;height:40px;cursor:pointer}.slider{display:flex;align-items:center;gap:10px}.slider input{flex:1;accent-color:var(--accent)}.slider output{min-width:64px;text-align:right;font-variant-numeric:tabular-nums;color:var(--accent)}.toggle{display:flex;gap:8px;align-items:center;cursor:pointer}.toggle input{accent-color:var(--accent)}.note{color:var(--mute);font-size:13px;margin:6px 0 0}.row{display:flex;gap:8px;flex-wrap:wrap}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}.card{text-align:left;display:flex;flex-direction:column;gap:2px;padding:10px 12px}.card span{color:var(--mute);font-size:12px}.saved div{display:flex;gap:6px;margin:4px 0}.saved .x{padding:4px 8px}h3{margin:6px 0 0;font-size:14px;color:var(--accent)}.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.checks li{display:flex;gap:8px;padding:8px 10px;border-radius:8px;background:#1f242e}.checks i{font-style:normal;width:18px;flex:none}.checks .ok i{color:#6fd08c}.checks .warn{background:#33281b}.checks .warn i{color:#f0a53a}.checks .info i{color:var(--accent2)}.bom{border-collapse:collapse;width:100%}.bom th{text-align:left;vertical-align:top;width:130px;color:var(--accent);padding:6px 10px 6px 0;font-weight:600}.bom td{padding:6px 0;border-bottom:1px solid var(--line)}.bom tr:last-child td{border:0}.gloss{margin:0}.gloss div{padding:8px 0;border-bottom:1px solid var(--line)}.gloss dt{font-weight:650;color:var(--accent)}.gloss dd{margin:2px 0 0;color:#c5cad5}@media (max-width: 860px){.app{grid-template-columns:1fr;grid-template-rows:55vh 1fr}.panel{border-left:0;border-top:1px solid var(--line)}}
