:root{
  --bg:#15171b; --bg2:#1b1e24; --bg3:#22262e; --bg4:#2b303a;
  --line:#333944;
  --fg:#dfe3ea; --fg2:#98a1b0; --fg3:#6d7684;
  --accent:#f0a93b; --accent2:#5aa9e6; --ok:#67c98a; --warn:#e2705a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{
  background:var(--bg); color:var(--fg);
  font:12px/1.45 "Inter","Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; user-select:none;
}
#app{display:flex;flex-direction:column;height:100%}

/* ── topbar ── */
#topbar{
  height:42px;flex:0 0 42px;display:flex;align-items:center;gap:8px;padding:0 10px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  background:linear-gradient(#232830,#1c2027);border-bottom:1px solid #0d0f12;
}
.brand{display:flex;align-items:center;gap:7px;font-weight:600;letter-spacing:.5px;margin-right:6px}
.proj-name{
  width:150px;flex:0 0 150px;height:26px;background:#131519;border:1px solid #0d0f12;
  border-radius:5px;color:var(--fg);padding:0 8px;font:inherit;font-size:12px;outline:none;
}
.proj-name:focus{border-color:var(--accent2)}
.proj-name::placeholder{color:var(--fg3)}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.tb-group{display:flex;align-items:center;gap:4px;flex:0 0 auto}
#topbar::-webkit-scrollbar{height:0}
.tb-sep{width:1px;height:20px;background:#0d0f12;box-shadow:1px 0 0 #3a404b}
.spacer{flex:1}
.tb{
  height:26px;padding:0 10px;border-radius:5px;border:1px solid #00000040;
  background:#333a45;color:var(--fg);cursor:pointer;font-size:12px;white-space:nowrap;
}
.tb:hover{background:#3d4551}
.tb:active,.tb.on{background:var(--accent);color:#20160a;border-color:#00000060}
.tb.icon{width:28px;padding:0;font-size:13px}
.tb:disabled{opacity:.32;cursor:default}
.tb:disabled:hover{background:#333a45}
.tb.primary{background:var(--accent2);color:#08131c;font-weight:600}
.tb.primary:hover{filter:brightness(1.1)}
.tb-menu{position:relative}
.menu{
  display:none;position:absolute;top:30px;left:0;z-index:60;min-width:200px;padding:5px;
  background:#262b34;border:1px solid #0d0f12;border-radius:7px;box-shadow:0 10px 30px #000a;
}
.menu.open{display:block}
.menu .mi{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;cursor:pointer}
.menu .mi:hover{background:#39404c}
.menu .mi .sw{width:9px;height:9px;border-radius:2px;flex:0 0 9px}
.menu .mi .sub{margin-left:auto;color:var(--fg3);font-size:10px}
.menu .mgrp{padding:7px 8px 3px;color:var(--fg3);font-size:10.5px;letter-spacing:.6px}

/* ── main ── */
#main{flex:1;display:flex;min-height:0}
.pane{display:flex;flex-direction:column;min-width:140px;min-height:0;background:var(--bg)}
#pane-edit{flex:1 1 42%}
#pane-cam{flex:1 1 34%}
#pane-side{flex:0 0 336px;display:flex;flex-direction:column;background:var(--bg2);border-left:1px solid #0d0f12;min-height:0}
.splitter{flex:0 0 5px;background:#0d0f12;cursor:col-resize;position:relative}
.splitter:hover{background:var(--accent2)}

.pane-head{
  height:28px;flex:0 0 28px;display:flex;align-items:center;gap:8px;padding:0 8px;
  background:var(--bg3);border-bottom:1px solid #0d0f12;
}
.pane-title{color:var(--fg2);font-weight:600;letter-spacing:.4px}
.pane-tools{margin-left:auto;display:flex;align-items:center;gap:5px}
.mini{height:20px;padding:0 7px;border-radius:4px;border:1px solid #00000040;background:#39404c;color:var(--fg2);cursor:pointer;font-size:11px}
.mini:hover{background:#454d5b;color:var(--fg)}
.mini.on{background:var(--accent);color:#20160a}
.mini-sel{height:20px;background:#39404c;color:var(--fg2);border:1px solid #00000040;border-radius:4px;font-size:11px;outline:none}
.vsep{width:1px;height:14px;background:#00000060}
.chk{display:flex;align-items:center;gap:3px;color:var(--fg2);font-size:11px;cursor:pointer}
.chk input{accent-color:var(--accent);width:12px;height:12px;margin:0}
.ratio-tag{background:#0d0f12;color:var(--accent);padding:1px 7px;border-radius:9px;font-size:11px;font-variant-numeric:tabular-nums}

.canvas-wrap{flex:1;position:relative;min-height:0;overflow:hidden;background:#0f1114}
.canvas-wrap canvas{display:block}
.canvas-wrap.photo{background:repeating-conic-gradient(#181a1e 0% 25%, #131518 0% 50%) 50%/16px 16px}
#photo-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:10px}
#photo-frame{position:relative;box-shadow:0 0 0 1px #000,0 8px 40px #000a;overflow:hidden;background:#000}
#photo-canvas-holder{position:absolute;inset:0}
#photo-canvas-holder canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
#overlay-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}

#edit-hint{position:absolute;bottom:6px;left:10px;color:#5c6472;font-size:10.5px;pointer-events:none}

#cam-hud{
  flex:0 0 auto;background:var(--bg2);border-top:1px solid #0d0f12;padding:6px 8px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:5px 8px;
}
.hud{display:flex;flex-direction:column;gap:1px;overflow:hidden}
.hud b{font-size:13px;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.hud span{font-size:10px;color:var(--fg3);letter-spacing:.3px;white-space:nowrap}
.hud.accent b{color:var(--accent)}
.hud.blue b{color:var(--accent2)}

/* ── side panel ── */
#tabs{display:flex;flex:0 0 30px;background:var(--bg3);border-bottom:1px solid #0d0f12}
.tab{flex:1;height:30px;border:0;background:transparent;color:var(--fg3);cursor:pointer;font-size:11px;border-bottom:2px solid transparent;padding:0;white-space:nowrap}
.tab:hover{color:var(--fg2)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);background:#00000030}
#tab-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 0 14px}
#outliner{flex:0 0 170px;border-top:1px solid #0d0f12;display:flex;flex-direction:column;background:#181b21}
.ol-head{padding:5px 9px;color:var(--fg3);font-size:10.5px;letter-spacing:.7px;border-bottom:1px solid #0d0f12}
#ol-list{flex:1;overflow-y:auto;padding:3px}
.ol-row{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:4px;cursor:pointer;color:var(--fg2)}
.ol-row:hover{background:#262c35}
.ol-row.sel{background:#3a4553;color:var(--fg)}
.ol-row .sw{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.ol-row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-row .act{opacity:.15;color:var(--fg3);padding:0 3px}
.ol-row:hover .act{opacity:1}
.ol-row .act:hover{color:var(--warn)}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#00000030}
::-webkit-scrollbar-thumb{background:#39404c;border-radius:5px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#4a525f;background-clip:padding-box}

/* ── widgets ── */
.sec{border-bottom:1px solid #0d0f12}
.sec-h{display:flex;align-items:center;gap:6px;padding:6px 9px;cursor:pointer;color:var(--fg2);font-weight:600;letter-spacing:.3px;background:#1f232a}
.sec-h:hover{background:#242932}
.sec-h .cv{color:var(--fg3);transition:transform .12s;font-size:9px}
.sec.closed .cv{transform:rotate(-90deg)}
.sec.closed .sec-b{display:none}
.sec-h .tail{margin-left:auto;color:var(--fg3);font-weight:400;font-size:10.5px}
.sec-b{padding:6px 9px 9px}

.row{display:flex;align-items:center;gap:6px;margin-bottom:5px;min-height:22px}
.row>.lbl{flex:0 0 80px;color:var(--fg2);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .ctl{flex:1;display:flex;align-items:center;gap:5px;min-width:0}
.row.col{flex-direction:column;align-items:stretch;gap:4px}
.row.col>.lbl{flex:none}
.note{color:var(--fg3);font-size:10.5px;line-height:1.55;margin:2px 0 7px}
.note.warn{color:#c9915f}
.note b{color:var(--fg2)}

input[type=text],input[type=number],select,textarea{
  height:22px;background:#131519;border:1px solid #0d0f12;border-radius:4px;color:var(--fg);
  padding:0 6px;font:inherit;font-size:11.5px;outline:none;min-width:0;width:100%;
  font-variant-numeric:tabular-nums;
}
textarea{height:auto;padding:4px 6px;resize:vertical;font-size:11px;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--accent2)}
input[type=color]{width:28px;height:22px;padding:0;border:1px solid #0d0f12;border-radius:4px;background:#131519;cursor:pointer;flex:0 0 28px}
select{cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7d8593 50%),linear-gradient(135deg,#7d8593 50%,transparent 50%);background-position:calc(100% - 12px) 9px,calc(100% - 8px) 9px;background-size:4px 4px;background-repeat:no-repeat;padding-right:20px}

.slider{position:relative;flex:1;height:21px;border-radius:4px;background:#131519;border:1px solid #0d0f12;overflow:hidden;cursor:ew-resize;min-width:40px}
.slider .fill{position:absolute;left:0;top:0;bottom:0;background:#39414f}
.slider .txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--fg);pointer-events:none;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000}
.slider:hover .fill{background:#454f61}
.slider.drag .fill{background:var(--accent)}
.slider.drag .txt{color:#20160a;text-shadow:none}
.slider input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:ew-resize;border:0;background:transparent}
.slider.editing input{opacity:1;background:#131519;text-align:center;cursor:text}
.slider.editing .txt{display:none}

.btn{height:22px;padding:0 9px;border-radius:4px;border:1px solid #00000050;background:#333a45;color:var(--fg);cursor:pointer;font-size:11.5px;white-space:nowrap}
.btn:hover{background:#3d4551}
.btn.on{background:var(--accent);color:#20160a}
.btn.tiny{height:19px;padding:0 6px;font-size:10.5px}
.btn.wide{flex:1}
.btn.danger:hover{background:var(--warn);color:#20160a}
.btn.go{background:var(--accent2);color:#08131c;font-weight:600}

.seg{display:flex;border-radius:4px;overflow:hidden;border:1px solid #0d0f12;flex:1}
.seg button{flex:1;height:21px;border:0;border-right:1px solid #0d0f12;background:#2b313a;color:var(--fg2);cursor:pointer;font-size:11px;padding:0 4px;white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button:hover{background:#39414f;color:var(--fg)}
.seg button.on{background:var(--accent);color:#20160a;font-weight:600}

.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{height:21px;padding:0 8px;border-radius:11px;border:1px solid #00000050;background:#2b313a;color:var(--fg2);cursor:pointer;font-size:11px;font-variant-numeric:tabular-nums}
.chip:hover{background:#39414f;color:var(--fg)}
.chip.on{background:var(--accent);color:#20160a;font-weight:600;border-color:#00000060}
.chip.blue.on{background:var(--accent2);color:#08131c}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.vec{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;flex:1}
.vec .ax{position:relative}
.vec .ax::before{content:attr(data-ax);position:absolute;left:5px;top:4px;font-size:9px;color:var(--fg3);pointer-events:none;z-index:2}

.kelvin-bar{height:7px;border-radius:4px;margin:3px 0 6px;
  background:linear-gradient(90deg,#ff7b1e,#ffb46b,#ffd9b8,#fff4ea,#ffffff,#eaf1ff,#c9dcff,#a8c6ff)}

.swatches{display:flex;flex-wrap:wrap;gap:4px}
.swatches .s{width:20px;height:20px;border-radius:4px;border:1px solid #00000060;cursor:pointer}
.swatches .s:hover{outline:2px solid var(--fg2)}

.shot{display:flex;gap:7px;padding:6px;border-radius:6px;background:#20242b;border:1px solid #0d0f12;margin-bottom:6px;cursor:pointer}
.shot:hover{background:#262c35}
.shot.on{border-color:var(--accent);background:#2c2a22}
.shot .thumb{flex:0 0 76px;height:56px;border-radius:4px;background:#000;object-fit:contain;border:1px solid #0d0f12}
.shot .meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.shot .nm{font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot .sub{color:var(--fg3);font-size:10.5px;font-variant-numeric:tabular-nums}
.shot .ops{display:flex;gap:3px;margin-top:auto}

#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:#20242b;border:1px solid #39414f;color:var(--fg);padding:8px 16px;border-radius:8px;
  box-shadow:0 8px 30px #000b;opacity:0;pointer-events:none;transition:.22s;z-index:200;font-size:12px;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.drop{border:1px dashed #454d5b;border-radius:6px;padding:15px 8px;text-align:center;color:var(--fg3);cursor:pointer}
.drop:hover{border-color:var(--accent);color:var(--fg2);background:#00000030}
.plate-prev{width:100%;height:76px;object-fit:contain;background:#0d0f12;border-radius:5px;border:1px solid #0d0f12;display:block}
.brief-box{
  width:100%;height:190px;background:#131519;border:1px solid #0d0f12;border-radius:5px;
  color:var(--fg2);padding:7px 8px;font:11px/1.6 ui-monospace,Consolas,monospace;
  resize:vertical;white-space:pre;overflow:auto;
}