:root{
  --bg:#0b0c14; --panel:#121425; --panel2:#161a33; --stroke:#2a2f6a;
  --text:#e8ebff; --muted:#9aa1ff; --split:#404466; --ok:#33c759; --bad:#ff5b5b; --idle:#c3c7db;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text); }
button,select,textarea{ font:inherit; }
.hidden{ display:none !important; }
.muted{ color:var(--muted); }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:12px; }
.kv{ font-size:12px; line-height:1.45; }
.label{ color:var(--muted); font-size:12px; display:block; margin-bottom:6px; }

.topbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 14px; border-bottom:1px solid var(--stroke); }
.brand{ display:flex; align-items:center; gap:14px; min-width:0; }
.brand-logo{ display:block; height:34px; width:auto; max-width:220px; object-fit:contain; }
.brand .title{ font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn,.tool-btn,.menu-action{ border:0; border-radius:12px; cursor:pointer; font-weight:600; }
.btn{ background:#2a2f6a; color:#fff; padding:10px 14px; }
.btn.secondary,.tool-btn,.menu-action{ background:#1c214d; color:#fff; }
.btn[disabled],.tool-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn input{ display:none; }
.tool-btn{ padding:8px 10px; font-size:12px; }
.approve-btn{ min-width:126px; align-self:flex-end; }
.approve-btn.active{ background:#1f8d45; }

.dropdown-wrap{ position:relative; }
.dropdown{ position:absolute; top:calc(100% + 8px); right:0; width:260px; background:var(--panel); border:1px solid var(--stroke); border-radius:14px; padding:10px; z-index:30; box-shadow:0 10px 28px rgba(0,0,0,.35); }
.menu-action{ width:100%; text-align:left; padding:8px 10px; margin-bottom:6px; }
.checklist{ max-height:320px; overflow:auto; display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.check-item{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; background:var(--panel2); }
.check-item input{ margin:0; }
.color-chip{ width:10px; height:10px; border-radius:999px; border:1px solid rgba(255,255,255,.4); flex:none; }

.workspace{ height:calc(100vh - 63px); display:grid; grid-template-columns:minmax(280px,var(--col-a,56%)) 8px minmax(340px,var(--col-c,44%)); }
.workspace.list-visible{ grid-template-columns:minmax(240px,var(--col-a,42%)) 8px minmax(180px,var(--col-b,18%)) 8px minmax(320px,var(--col-c,40%)); }
.pane{ min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.pane-list{ border-left:1px solid var(--stroke); border-right:1px solid var(--stroke); }
.splitter{ background:var(--split); cursor:col-resize; position:relative; }
.splitter::after{ content:'↔'; position:absolute; inset:0; display:grid; place-items:center; color:#d4d8ff; opacity:0; font-size:12px; }
.splitter:hover::after{ opacity:1; }
.pane-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border-bottom:1px solid var(--stroke); background:rgba(18,20,37,.95); }
.pane-title{ font-weight:700; }
.pane-tools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.select{ min-width:180px; padding:10px 12px; border-radius:12px; border:1px solid var(--stroke); background:var(--panel2); color:var(--text); }
.zoom-stage{ position:relative; flex:1; background:#070812; min-height:0; }
.canvas{ width:100%; height:100%; display:block; }
.footer-status,.detail-meta{ padding:12px; border-top:1px solid var(--stroke); }
.empty-state{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--muted); pointer-events:none; padding:20px; }
.detail-stage{ min-height:340px; }
.detail-meta{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }
.comment-inline{ min-width:0; }
.textarea{ width:100%; min-height:120px; resize:vertical; border-radius:12px; border:1px solid var(--stroke); background:var(--panel2); color:var(--text); padding:10px 12px; }
.textarea-inline{ min-height:80px; }

.piece-list{ overflow:auto; padding:12px; display:flex; flex-direction:column; gap:14px; }
.list-group{ display:flex; flex-direction:column; gap:6px; }
.list-group-title{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:0 6px 4px; }
.piece-item{ display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid rgba(255,255,255,.25); border-radius:10px; color:#fff; cursor:pointer; }
.piece-item:hover{ filter:brightness(1.05); }
.piece-item.selected{ outline:3px solid #ff4fd8; box-shadow:0 0 0 2px rgba(255,79,216,.2); }
.piece-code{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; font-weight:700; color:#fff; }
.status-dot{ width:10px; height:10px; border-radius:999px; border:1px solid rgba(0,0,0,.35); flex:none; background:var(--idle); }
.status-dot.empty{ background:var(--idle); }
.status-dot.approved{ background:var(--ok); }
.status-dot.commented{ background:var(--bad); }

@media (max-width:1100px){
  .workspace,.workspace.list-visible{ grid-template-columns:1fr; grid-auto-rows:minmax(280px,1fr); height:auto; min-height:calc(100vh - 63px); }
  .splitter,.pane-list{ display:none !important; }
  .detail-meta{ grid-template-columns:1fr; }
}