:root{
  --bg:#0a0a0b; --panel:#111113; --panel2:#17171a; --line:#2a2a2e; --text:#f2f2f0; --muted:#98989f;
  --accent:#f0f0ed; --danger:#ff6363; --radius:14px;
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;overflow:hidden}
button,input,select{font:inherit}.app-shell{height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 430px}
.stage-wrap{min-width:0;padding:18px 22px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;background:radial-gradient(circle at 50% 20%,#1c1c1f 0,#0b0b0c 52%,#070708 100%)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px}.eyebrow{font-size:10px;letter-spacing:.2em;color:#7f7f87}.topbar h1{font-size:18px;letter-spacing:.04em;margin:4px 0 0}
.button{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:#171719;color:#eee;cursor:pointer;letter-spacing:.03em;font-weight:700}.button:hover{background:#222226}.button.primary{background:#f0f0ed;color:#101012;border-color:#f0f0ed}.button.primary:hover{background:#fff}.button.ghost{background:transparent}.button.full{width:100%;margin-top:5px}
.stage-card{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #202024;border-radius:16px;background:#000;box-shadow:0 18px 60px #0008}
#outputCanvas{width:100%;height:100%;object-fit:contain;display:block;image-rendering:auto}#sourceVideo,#sourceImage{display:none}
.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:linear-gradient(135deg,#121214,#080809)}.empty-state h2{font-size:20px;margin:15px 0 6px}.empty-state p{max-width:520px;color:var(--muted);font-size:12px;line-height:1.6;margin:0 0 18px}.ascii-mark{font-size:26px;line-height:.8;letter-spacing:-.15em;color:#d8d8d2;transform:rotate(-6deg);opacity:.9}
.stage-card.drag{outline:2px solid #fff8;outline-offset:-5px}.hud{position:absolute;left:12px;top:12px;display:flex;gap:7px;pointer-events:none}.hud-chip{font-size:10px;padding:6px 8px;border:1px solid #ffffff22;background:#0009;backdrop-filter:blur(8px);border-radius:7px;color:#ddd}
.transport{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#111113;padding:10px;border-radius:12px}.icon-btn{width:34px;height:34px;border:1px solid var(--line);background:#18181b;color:#eee;border-radius:8px;cursor:pointer}.timecode{font-size:11px;color:#c9c9cd;min-width:56px;text-align:center}.flex{flex:1}
.controls{height:100vh;overflow-y:auto;border-left:1px solid #242428;background:#0f0f11;padding:10px;scrollbar-width:thin;scrollbar-color:#444 #111}.panel{border:1px solid #26262a;border-radius:11px;background:#131315;margin-bottom:9px;overflow:hidden}.panel-title{width:100%;border:0;background:#171719;color:#f2f2ef;display:flex;justify-content:space-between;align-items:center;padding:12px 13px;cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.04em}.panel-title b{font-size:16px;color:#777}.panel-body{padding:4px 13px 13px}.panel:not(.open) .panel-body{display:none}.panel:not(.open) .panel-title b{transform:rotate(90deg)}
.control-row{display:grid;gap:8px;padding:10px 0;border-bottom:1px solid #222226}.control-row:last-child{border-bottom:0}.control-row.inline{grid-template-columns:132px 1fr;align-items:center}.control-row label{font-size:11px;color:#c4c4c8;display:flex;justify-content:space-between;gap:8px}output{color:#fff;font-weight:700}
select,input[type=text],input:not([type]) ,input[type=number], .control-row>input:not(.range):not([type=color]){width:100%;background:#0d0d0f;border:1px solid #29292e;border-radius:7px;color:#ececf0;padding:8px 9px;outline:none}select:focus,input:focus{border-color:#5b5b62}.range{appearance:none;width:100%;height:6px;border-radius:99px;background:#45454b;outline:none}.range::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:#eee;border:0;cursor:pointer}.range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#eee;border:0;cursor:pointer}
.color-pick{display:grid;grid-template-columns:38px 1fr;gap:7px}.color-pick input[type=color]{width:38px;height:34px;padding:0;border:1px solid #29292e;background:#000;border-radius:6px}.color-pick input[type=text],#backgroundHex{min-width:0;width:100%;background:#0d0d0f;color:#eee;border:1px solid #29292e;border-radius:7px;padding:7px}
.trim-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.trim-grid label{font-size:10px;color:#8e8e94}.trim-grid input{margin-top:5px}.dual-range-wrap{position:relative;height:23px}.dual-range-wrap .range{position:absolute;left:0;top:7px;pointer-events:none}.dual-range-wrap .range::-webkit-slider-thumb{pointer-events:auto}.dual-range-wrap .range::-moz-range-thumb{pointer-events:auto}.trim-display{display:flex;justify-content:space-between;color:#8d8d94;font-size:10px}
.palette-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:9px 0}.mini{border:1px solid #303035;background:#0e0e10;color:#bbb;border-radius:7px;padding:7px 8px;font-size:9px;cursor:pointer}.mini.active,.mini:hover{background:#252529;color:#fff}
.palette-select{position:relative}
.palette-select-btn{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid #29292e;border-radius:9px;background:#0d0d0f;color:#ececf0;cursor:pointer;text-align:left}
.palette-select-btn b{color:#8c8c92;font-size:13px}
.palette-select.open .palette-select-btn{border-color:#5b5b62;background:#131317}
.palette-preview{display:block;width:20px;height:20px;border-radius:6px;border:1px solid #ffffff22;background:linear-gradient(135deg,#f7e66d 0%,#b8a1c8 48%,#637b99 100%)}
.palette-preview-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.palette-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;max-height:260px;overflow:auto;padding:6px;border:1px solid #29292e;border-radius:10px;background:#111113;box-shadow:0 18px 50px #000a}
.palette-option{width:100%;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:10px;padding:8px 9px;border:0;border-radius:8px;background:transparent;color:#e6e6ea;cursor:pointer;text-align:left}
.palette-option:hover,.palette-option.active{background:#2a2a30}
.palette-option .palette-swatch{display:block;width:20px;height:20px;border-radius:6px;border:1px solid #ffffff22}
.mini.wide{width:100%;justify-content:flex-start;font-size:10px;padding:9px 10px}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #29292d;border-left:1px solid #29292d}.swatch{min-height:42px;display:flex;align-items:center;gap:8px;padding:7px;border-right:1px solid #29292d;border-bottom:1px solid #29292d;font-size:9px;color:#bdbdc2}.swatch i{display:block;width:20px;height:20px;border-radius:4px;border:1px solid #ffffff1c}.render-status{margin-top:9px;padding:8px;border-radius:7px;background:#0d0d0f;color:#9b9ba0;font-size:10px;line-height:1.5}.render-status.busy{color:#fff}.render-status.error{color:#ff7d7d}
@media(max-width:980px){body{overflow:auto}.app-shell{height:auto;min-height:100vh;grid-template-columns:1fr}.stage-wrap{height:78vh;min-height:580px}.controls{height:auto;border-left:0;border-top:1px solid #242428}.topbar h1{font-size:15px}}
@media(max-width:520px){.stage-wrap{padding:10px;height:72vh;min-height:520px}.topbar{align-items:flex-start;flex-direction:column}.control-row.inline{grid-template-columns:115px 1fr}.controls{padding:7px}.swatches{grid-template-columns:repeat(2,1fr)}}

.render-status.perf-ok{color:#d8d8de}.render-status.perf-warn{color:#ffd479}.render-status.perf-fast{color:#9ff0b8}


.stage-wrap { height: 100vh; }