:root{
  /* Apple-style dark, translucent surfaces + vivid gradient accent */
  --bg:#0a0b0f;
  --glass:rgba(255,255,255,.05); --glass2:rgba(255,255,255,.08); --glass3:rgba(255,255,255,.12);
  --hair:rgba(255,255,255,.10); --hair2:rgba(255,255,255,.16);
  --txt:#f5f6fa; --muted:#a0a6b8; --muted2:#717789;
  --a1:#0a84ff; --a2:#5e5ce6; --a3:#bf5af2;
  --accent:#3d8bff; --accent-soft:rgba(61,139,255,.16);
  --ok:#30d158; --warn:#ffd60a; --danger:#ff453a; --fixed:#30d158;
  --grad:linear-gradient(135deg,var(--a1),var(--a2));
  --grad-soft:linear-gradient(135deg,rgba(10,132,255,.18),rgba(94,92,230,.18));
  --r:12px; --r-lg:18px; --r-pill:980px;
  --sh:0 4px 16px rgba(0,0,0,.4);
  --sh-lg:0 24px 70px rgba(0,0,0,.6);
  --t:.2s cubic-bezier(.4,0,.2,1);
  --spring:.4s cubic-bezier(.34,1.4,.5,1);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; color:var(--txt); overflow:hidden; -webkit-font-smoothing:antialiased;
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:-.01em; display:flex; flex-direction:column;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(94,92,230,.20), transparent 60%),
    radial-gradient(760px 460px at 8% 4%, rgba(10,132,255,.16), transparent 55%),
    radial-gradient(700px 700px at 50% 120%, rgba(191,90,242,.10), transparent 60%),
    #07080c;
}
h1,h3{margin:0; letter-spacing:-.02em}
.spacer{flex:1}
.muted{color:var(--muted); font-size:12px}
small{color:var(--muted)}
::selection{background:rgba(61,139,255,.3)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--hair2); border-radius:8px; border:2px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}
button{font:inherit}

/* ---------- Lucide icons ---------- */
.ic{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto}
.lucide{width:16px; height:16px; flex:0 0 auto; display:block}
.tool.icon-only{padding-left:9px; padding-right:9px}
.btn.icon-only{width:32px; height:32px; padding:0; justify-content:center}
.btn.icon-only .lucide{width:16px; height:16px}
.copy-icon .lucide{width:15px; height:15px}
.note-check .lucide{width:16px; height:16px}
.note-del .lucide{width:13px; height:13px}
.note-num .lucide{width:13px; height:13px}
.chip .ic{vertical-align:middle}
.chip .lucide{width:11px; height:11px}
.ver-chip .x .lucide{width:12px; height:12px}
.opt-pill .lucide{width:13px; height:13px}
.slider-handle .grip .lucide{width:16px; height:16px}
.toast-action .lucide{width:13px; height:13px}
.toast-action{display:inline-flex; align-items:center; gap:5px}

/* ---------- buttons (pill, glassy) ---------- */
.btn{background:var(--glass2); color:var(--txt); border:1px solid var(--hair); border-radius:var(--r-pill);
  padding:8px 15px; cursor:pointer; font-size:13px; font-weight:590; transition:var(--t);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.btn:hover{background:var(--glass3); border-color:var(--hair2); transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px}
.btn.primary{background:var(--grad); border-color:transparent; color:#fff;
  box-shadow:0 6px 20px rgba(10,132,255,.4), inset 0 1px 0 rgba(255,255,255,.25)}
.btn.primary:hover{filter:brightness(1.08) saturate(1.1); box-shadow:0 8px 28px rgba(94,92,230,.5)}
.btn.primary:disabled{cursor:default; transform:none}
.btn.primary.busy{background:linear-gradient(135deg,var(--a1),var(--a2),var(--a3),var(--a1)); background-size:300% 300%; animation:flow 2.6s ease infinite}
.btn.primary.busy.pro{background:linear-gradient(135deg,#f6dd86,#e9b949,#caa14a,#f6dd86); background-size:300% 300%; color:#2a1f00;
  box-shadow:0 6px 22px rgba(233,198,106,.5), inset 0 1px 0 rgba(255,255,255,.4)}
@keyframes flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.btn.ghost{background:transparent; box-shadow:none}
.btn.ghost:hover{background:var(--glass)}
.btn.small{padding:5px 12px; font-size:12px}
.btn.danger:hover{border-color:var(--danger); color:var(--danger); background:rgba(255,69,58,.12)}

select,input[type=text],input[type=password],input[type=date],textarea{
  background:rgba(0,0,0,.28); color:var(--txt); border:1px solid var(--hair); border-radius:10px;
  padding:9px 11px; font:inherit; transition:var(--t)}
input[type=date]{width:100%; color-scheme:dark; cursor:pointer}
select{cursor:pointer; padding:8px 10px; font-size:13px}
input[type=text],input[type=password],textarea{width:100%}
select:focus,input:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
textarea{resize:vertical; line-height:1.55}
input[type=range]{accent-color:var(--accent); cursor:pointer}
input[type=checkbox]{accent-color:var(--accent); cursor:pointer; width:15px; height:15px}

/* ---------- topbar ---------- */
.topbar{display:flex; align-items:center; gap:10px; padding:11px 18px; flex:0 0 auto; z-index:5;
  background:rgba(14,16,22,.6); backdrop-filter:blur(24px) saturate(1.4); border-bottom:1px solid var(--hair)}
.brand{font-weight:700; font-size:16px; letter-spacing:-.02em;
  background:linear-gradient(120deg,#fff,#c9d4ff); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand-colon{color:var(--a1); -webkit-text-fill-color:var(--a1); font-weight:800}
.project-bar{display:flex; gap:6px; align-items:center}
.topbar-actions{display:flex; gap:6px}

/* ---------- project dropdown ---------- */
.proj-dd{position:relative}
.proj-dd-trigger{display:inline-flex; align-items:center; gap:8px; min-width:150px; max-width:240px; padding:7px 12px}
.proj-dd-name{margin-right:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.proj-dd-trigger .chev-dd{width:14px; height:14px; opacity:.6; transition:transform .2s; flex:0 0 auto}
.proj-dd.open .chev-dd{transform:rotate(180deg)}
.proj-dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 3px rgba(255,255,255,.05)}
.proj-menu{position:absolute; top:calc(100% + 7px); left:0; z-index:45; min-width:300px; max-width:380px;
  max-height:min(440px,70vh); overflow:auto;
  background:rgba(22,24,32,.9); border:1px solid var(--hair2); border-radius:16px; padding:6px;
  box-shadow:var(--sh-lg); backdrop-filter:blur(30px) saturate(1.4); animation:popCard .18s ease both}
.proj-opt{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none;
  color:var(--txt); padding:9px 10px; border-radius:11px; cursor:pointer; transition:var(--t)}
.proj-opt:hover{background:var(--glass2)}
.proj-opt.active{background:var(--grad-soft)}
.proj-opt-body{display:flex; flex-direction:column; gap:2px; margin-right:auto; min-width:0}
.proj-opt-name{font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.proj-opt-meta{font-size:11px; color:var(--muted2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.proj-opt-meta.overdue{color:var(--danger)}
.proj-opt-check{width:16px; height:16px; color:var(--accent); flex:0 0 auto}
.proj-opt-check .lucide{width:16px; height:16px}
.proj-empty{padding:14px; text-align:center; color:var(--muted2); font-size:12px}
/* folder grouping */
.proj-group{display:flex; align-items:center; gap:7px; padding:9px 10px 5px; color:var(--muted2);
  font-size:10px; text-transform:uppercase; letter-spacing:.6px; font-weight:700}
.proj-group .lucide{width:13px; height:13px; opacity:.85}
.proj-group .pg-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.proj-group-count{margin-left:auto; font-size:10px; letter-spacing:0; color:var(--muted); background:var(--glass2);
  border:1px solid var(--hair); border-radius:var(--r-pill); padding:1px 7px; font-weight:600}
.proj-menu.grouped .proj-opt{margin-left:8px; width:calc(100% - 8px); border-left:1px solid var(--hair); border-radius:0 11px 11px 0; padding-left:12px}
.proj-menu.grouped .proj-opt:hover, .proj-menu.grouped .proj-opt.active{border-left-color:var(--accent)}
.proj-group:first-child{padding-top:4px}
/* folder prefix shown on the dropdown trigger */
.dd-folder{color:var(--muted2); font-weight:600}
/* modal label head + hint */
.lbl-head{display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap}
.lbl-head .lucide{width:13px; height:13px; opacity:.8}
.lbl-hint{font-size:10.5px; font-weight:500; color:var(--muted2); text-transform:none; letter-spacing:0}

/* project status chip */
.pstatus-chip{font-size:11px; font-weight:650; letter-spacing:.2px; color:var(--ps,#5b8cff);
  background:color-mix(in srgb, var(--ps,#5b8cff) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--ps,#5b8cff) 38%, transparent);
  padding:4px 11px; border-radius:var(--r-pill); cursor:pointer; transition:var(--t); white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; line-height:1}
button.pstatus-chip:hover{filter:brightness(1.18)}
.pstatus-chip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ps,#5b8cff); flex:0 0 auto}
.pstatus-chip.sm{font-size:10px; padding:3px 9px; flex:0 0 auto}

/* deadline chip */
.deadline-chip{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  color:var(--muted); background:var(--glass2); border:1px solid var(--hair); padding:4px 10px;
  border-radius:var(--r-pill); cursor:pointer; white-space:nowrap}
.deadline-chip .lucide{width:12px; height:12px}
.deadline-chip.soon{color:var(--warn); border-color:rgba(255,214,10,.35); background:rgba(255,214,10,.12)}
.deadline-chip.overdue{color:var(--danger); border-color:rgba(255,69,58,.4); background:rgba(255,69,58,.14)}

.proj-modal-meta{font-size:11.5px; color:var(--muted2)}
.proj-modal-meta:empty{display:none}

/* ---------- empty state ---------- */
.empty-state{flex:1; display:flex; align-items:center; justify-content:center; padding:20px}
.empty-card{text-align:center; background:var(--glass); border:1px solid var(--hair);
  padding:52px 56px; border-radius:26px; max-width:500px; box-shadow:var(--sh-lg);
  backdrop-filter:blur(30px) saturate(1.3); animation:pop .5s var(--spring)}
.empty-card h1{font-size:28px; margin-bottom:12px; background:linear-gradient(120deg,#fff,#aebfff);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.empty-card p{color:var(--muted); margin:0 0 24px; font-size:14.5px}
@keyframes pop{from{opacity:0; transform:translateY(16px) scale(.97)}to{opacity:1; transform:none}}

/* ---------- workspace ---------- */
.workspace{flex:1; display:grid; grid-template-columns:1fr 420px; grid-template-rows:auto 1fr;
  grid-template-areas:"toolbar panel" "stage panel"; min-height:0}
/* hide entire sidebar (toggle) or fullscreen focus → single column */
.workspace.panel-hidden, .workspace.fs{grid-template-columns:1fr; grid-template-areas:"toolbar" "stage"}
.workspace.panel-hidden .panel, .workspace.fs .panel{display:none}
.tool.is-active{background:var(--grad); color:#fff; box-shadow:0 3px 12px rgba(10,132,255,.4), inset 0 1px 0 rgba(255,255,255,.25)}
.toolbar{grid-area:toolbar; display:flex; gap:9px; align-items:center; flex-wrap:wrap; z-index:4;
  padding:10px 16px; background:rgba(12,14,20,.55); backdrop-filter:blur(20px) saturate(1.3); border-bottom:1px solid var(--hair)}
.tool-group{display:flex; gap:3px; align-items:center; padding:3px;
  background:rgba(0,0,0,.25); border:1px solid var(--hair); border-radius:13px; backdrop-filter:blur(8px)}
.tool{background:transparent; border:none; color:var(--muted); padding:6px 12px;
  border-radius:10px; cursor:pointer; font-size:13px; font-weight:560; transition:var(--t);
  display:inline-flex; align-items:center; gap:6px; line-height:1; white-space:nowrap}
.tool:hover{color:var(--txt); background:var(--glass)}
.tool.active{background:var(--grad); color:#fff; box-shadow:0 3px 12px rgba(10,132,255,.4), inset 0 1px 0 rgba(255,255,255,.25)}
.slider-label{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; padding:0 8px}
.slider-label input[type=range]{width:120px}
.hint{color:var(--muted); font-size:12px; padding-left:8px}
.badge{font-size:11px; color:#1a1500; background:var(--warn); padding:3px 9px; border-radius:var(--r-pill); font-weight:600}
.badge:empty{display:none}
/* thin divider inside the align tool-group */
.align-div{width:1px; height:18px; background:var(--hair); margin:0 3px; flex:0 0 auto}
/* zoom control: − [editable %] + */
.zoom-ctl{display:inline-flex; align-items:center; gap:1px}
.zoom-step{width:22px; height:22px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--muted); font-size:16px; font-weight:500; cursor:pointer;
  border-radius:7px; transition:var(--t); line-height:1; flex:0 0 auto}
.zoom-step:hover{background:var(--glass); color:var(--txt)}
.zoom-step:active{transform:scale(.92)}
.zoom-field{display:inline-flex; align-items:center; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; user-select:none}
/* .zoom-ctl prefix raises specificity above the base input[type=text] rule */
.zoom-ctl .zoom-input{width:32px; min-width:0; background:transparent; border:none; color:var(--txt); font:inherit; font-size:12px;
  text-align:right; padding:2px 1px; border-radius:5px; font-variant-numeric:tabular-nums; transition:var(--t)}
.zoom-ctl .zoom-input:hover{background:var(--glass)}
.zoom-ctl .zoom-input:focus{outline:none; background:var(--glass2); box-shadow:0 0 0 2px var(--accent-soft); color:var(--txt)}
#pinVisBtn.pins-off{color:var(--muted2)}
#pinVisBtn.pins-off:hover{color:var(--txt)}

/* ---------- stage ---------- */
.stage{grid-area:stage; position:relative; overflow:hidden; min-height:0;
  background:repeating-conic-gradient(rgba(255,255,255,.025) 0% 25%, transparent 0% 50%) 50%/22px 22px, #0b0d12}
.canvas-wrap{position:absolute; inset:0}
.canvas-wrap.side{display:flex}
.canvas-wrap canvas{width:100%; height:100%; display:block; touch-action:none}
.side-pane{position:relative; flex:1; min-width:0; border-right:1px solid var(--hair)}
.side-pane:last-child{border-right:none}
.side-tag{position:absolute; top:11px; left:11px; z-index:2; background:rgba(0,0,0,.55); color:#fff;
  padding:4px 11px; border-radius:var(--r-pill); font-size:12px; font-weight:600; backdrop-filter:blur(10px); border:1px solid var(--hair)}
/* swap/blink: crossfade #canvas + badge for the currently-shown layer */
#canvas{transition:opacity .12s ease}
#canvas.swap-fade{opacity:0}
.swap-tag{transition:opacity .12s ease}
/* image dimensions readout — now lives in the Layers & Versions panel */
.dim-info{font-size:11px; color:var(--muted2); font-weight:560; margin-top:11px; padding-top:11px;
  border-top:1px solid var(--hair); text-align:center; font-variant-numeric:tabular-nums}
.dim-info:empty{display:none}

/* ---------- compare-mode dropdown ---------- */
.mode-dd{position:relative}
.mode-dd-trigger{display:inline-flex; align-items:center; gap:7px; min-width:118px}
.mode-dd-trigger #modeDDLabel{margin-right:auto}
.mode-dd-trigger .chev-dd{width:14px; height:14px; opacity:.65; transition:transform .2s}
.mode-dd.open .chev-dd{transform:rotate(180deg)}
.mode-menu{position:absolute; top:calc(100% + 7px); right:0; z-index:40; min-width:216px;
  background:rgba(22,24,32,.92); border:1px solid var(--hair2); border-radius:14px; padding:6px;
  box-shadow:var(--sh-lg); backdrop-filter:blur(22px) saturate(1.3); animation:popCard .16s ease both}
.mode-menu-title{font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted2);
  font-weight:700; padding:7px 10px 6px}
.mode-opt{display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:none;
  color:var(--txt); font-size:13px; font-weight:560; padding:9px 11px; border-radius:9px; cursor:pointer; transition:var(--t)}
.mode-opt .ic{width:17px; height:17px; color:var(--muted); flex:0 0 auto}
.mode-opt .mo-label{margin-right:auto}
.mode-opt kbd{font:inherit; font-size:11px; color:var(--muted2); background:var(--glass2); border:1px solid var(--hair);
  border-radius:6px; padding:1px 7px; min-width:20px; text-align:center}
.mode-opt .mo-check{width:15px; height:15px; color:var(--accent); opacity:0}
.mode-opt:hover{background:var(--glass2)}
.mode-opt.active{background:var(--grad-soft); color:#fff}
.mode-opt.active .ic{color:var(--accent)}
.mode-opt.active .mo-check{opacity:1}
.slider-handle{position:absolute; top:0; bottom:0; left:50%; width:2px; z-index:3; transform:translateX(-50%); cursor:ew-resize}
.slider-handle .line{position:absolute; inset:0; background:rgba(255,255,255,.92); box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 16px rgba(10,132,255,.5)}
.slider-handle .grip{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.96); color:#0a84ff;
  display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700;
  box-shadow:0 4px 16px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.06); transition:transform var(--spring); backdrop-filter:blur(4px)}
.slider-handle:hover .grip{transform:translate(-50%,-50%) scale(1.14)}
.slider-handle.horiz{top:50%; left:0; right:0; bottom:auto; width:auto; height:2px; transform:translateY(-50%); cursor:ns-resize}
.slider-handle.horiz .grip{transform:translate(-50%,-50%) rotate(90deg)}
.slider-handle.horiz:hover .grip{transform:translate(-50%,-50%) rotate(90deg) scale(1.14)}
.stage-hint{position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.5); padding:6px 16px; border-radius:var(--r-pill); font-size:12px; color:#dfe4f0;
  pointer-events:none; backdrop-filter:blur(12px); border:1px solid var(--hair)}

/* ---------- Vision scan overlay ---------- */
.scan-overlay{position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity .35s ease}
.scan-overlay.show{opacity:1}
/* faint gold tint + fixed scanlines reading the whole frame (Vision is a PRO feature → gold) */
.scan-grid{position:absolute; inset:0; mix-blend-mode:screen;
  background:linear-gradient(rgba(233,198,106,.07) 1px, transparent 1px) 0 0/100% 3px,
            radial-gradient(130% 70% at 50% 45%, rgba(233,198,106,.12), transparent 72%);
  animation:scanFlicker 2.8s ease-in-out infinite}
@keyframes scanFlicker{0%,100%{opacity:.6}50%{opacity:1}}
/* sweeping analysis beam (top → bottom) */
.scan-beam{position:absolute; left:0; right:0; top:0; height:18%;
  background:linear-gradient(to bottom, transparent, rgba(233,198,106,.16) 55%, rgba(246,221,134,.46) 88%, rgba(255,243,205,.95));
  border-bottom:2px solid rgba(255,245,215,.97);
  box-shadow:0 0 28px 9px rgba(233,198,106,.55);
  animation:scanSweep 2.6s cubic-bezier(.5,.04,.5,.96) infinite}
@keyframes scanSweep{
  0%{top:-20%; opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{top:100%; opacity:0}}
/* corner reticle bracket frame */
.scan-frame span{position:absolute; width:32px; height:32px; border:2px solid rgba(246,221,134,.9);
  filter:drop-shadow(0 0 6px rgba(233,198,106,.65))}
.scan-frame span:nth-child(1){top:18px; left:18px; border-right:0; border-bottom:0; border-radius:9px 0 0 0}
.scan-frame span:nth-child(2){top:18px; right:18px; border-left:0; border-bottom:0; border-radius:0 9px 0 0}
.scan-frame span:nth-child(3){bottom:18px; left:18px; border-right:0; border-top:0; border-radius:0 0 0 9px}
.scan-frame span:nth-child(4){bottom:18px; right:18px; border-left:0; border-top:0; border-radius:0 0 9px 0}
.scan-frame{position:absolute; inset:0; animation:scanFlicker 1.7s ease-in-out infinite}
/* status pill */
.scan-label{position:absolute; top:18px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:7px; padding:6px 14px; border-radius:var(--r-pill);
  background:rgba(26,20,6,.66); border:1px solid rgba(233,198,106,.5); color:#fbeec2;
  font-size:12px; font-weight:600; letter-spacing:.2px; backdrop-filter:blur(10px);
  box-shadow:0 0 22px rgba(233,198,106,.45); animation:scanFlicker 1.8s ease-in-out infinite}
.scan-label .ic{width:15px; height:15px; display:inline-flex}
@media (prefers-reduced-motion:reduce){.scan-beam{animation:none; top:42%; opacity:.6}}

/* ---------- panel ---------- */
.panel{grid-area:panel; background:rgba(14,16,22,.55); border-left:1px solid var(--hair);
  overflow-y:auto; display:flex; flex-direction:column; backdrop-filter:blur(24px) saturate(1.3)}
.panel-sec{padding:15px 17px; border-bottom:1px solid var(--hair)}
.panel-sec h3{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted2); margin-bottom:11px; font-weight:680}
.sec-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; gap:8px}
.sec-head h3{margin:0}
.sec-actions{display:flex; gap:6px; align-items:center; flex:0 0 auto}
/* draggable divider between panel sections */
.sec-resizer{height:10px; flex:0 0 auto; cursor:row-resize; position:relative; background:var(--bg2)}
.sec-resizer::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:40px; height:3px; border-radius:3px; background:var(--hair2); transition:var(--t)}
.sec-resizer:hover::before, .sec-resizer.dragging::before{background:var(--accent); width:56px}
/* collapsible sections */
.sec-toggle{display:flex; align-items:center; gap:8px; background:none; border:none; padding:0; cursor:pointer; flex:1; min-width:0; text-align:left}
.sec-toggle h3{margin:0; transition:color var(--t)}
.sec-toggle:hover h3, .sec-toggle:hover .chev{color:var(--muted)}
.chev{width:19px; height:19px; border-radius:7px; border:1px solid var(--hair2); display:inline-flex;
  align-items:center; justify-content:center; font-size:14px; line-height:1; color:var(--muted);
  transition:var(--t); flex:0 0 auto; font-weight:600}
.chev::before{content:"–"}
.panel-sec.collapsed .chev::before{content:"+"}
.sec-toggle:hover .chev{border-color:var(--accent); color:var(--txt)}
.panel-sec.collapsed .sec-body{display:none}
.panel-sec.collapsed{flex:0 0 auto !important}
.panel-sec.collapsed .sec-head{margin-bottom:0}
.notes-sec .sec-body{flex:1; display:flex; flex-direction:column; min-height:0}
.notes-sec.collapsed{min-height:0}

.layer-slots{display:flex; gap:11px}
.slot{flex:1; text-align:center}
.slot-thumb{height:74px; border:1.5px dashed var(--hair2); border-radius:14px; display:flex;
  flex-direction:column; align-items:center; justify-content:center; cursor:pointer; gap:2px;
  font-size:12px; color:var(--muted); background-size:cover; background-position:center;
  overflow:hidden; transition:var(--spring); position:relative}
.slot-thumb.has-img{border-style:solid; border-color:var(--hair); color:transparent}
.slot-thumb.has-img::after{content:"✎ replace"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:#fff; background:rgba(0,0,0,.55); opacity:0; transition:var(--t); font-size:12px; font-weight:600; backdrop-filter:blur(2px)}
.slot-thumb.has-img:hover::after{opacity:1}
.slot-thumb:hover{border-color:var(--accent); transform:translateY(-2px)}
.slot-thumb.drag{border-color:var(--accent); background-color:var(--accent-soft); box-shadow:0 0 0 4px var(--accent-soft)}
.slot-label{font-size:11px; color:var(--muted); margin-top:6px; display:block}
.version-list{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.ver-chip{font-size:11px; padding:5px 10px; border-radius:var(--r-pill); background:var(--glass);
  border:1px solid var(--hair); cursor:pointer; display:flex; align-items:center; gap:6px; transition:var(--t)}
.ver-chip:hover{border-color:var(--hair2); background:var(--glass2)}
.ver-chip.active{border-color:var(--accent); background:var(--accent-soft); color:#fff}
.ver-chip .x{color:var(--muted); cursor:pointer; font-size:13px; line-height:1}
.ver-chip .x:hover{color:var(--danger)}
.compare-pickers{display:flex; gap:11px; margin-top:13px}
.compare-pickers label{flex:1; font-size:11px; color:var(--muted); display:flex; flex-direction:column; gap:4px; font-weight:560}

/* ---------- notes ---------- */
.notes-sec{flex:1; display:flex; flex-direction:column; min-height:180px}
.filters{display:flex; gap:6px; align-items:center; margin-bottom:10px; flex-wrap:wrap}
.filters select{flex:1; font-size:12px; padding:6px 8px}
.counts{font-size:11px; color:var(--muted); width:100%; padding-top:2px}
.note-list{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:5px; padding-right:2px}
.note-empty{color:var(--muted); text-align:center; padding:26px 10px; line-height:1.8}
.note-item{background:var(--glass); border:1px solid var(--hair); border-left:3px solid var(--cat,var(--hair2));
  border-radius:9px; padding:6px 8px; cursor:pointer; display:flex; gap:7px; align-items:center;
  transition:var(--spring); position:relative; backdrop-filter:blur(8px)}
.note-item:hover{background:var(--glass2); border-color:var(--hair2); border-left-color:var(--cat); transform:translateY(-1px); box-shadow:var(--sh)}
.note-item.sel{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.note-item.done{opacity:.58}
.note-num{width:19px; height:19px; border-radius:6px; color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.note-body{flex:1; min-width:0}
.note-title{font-size:12.5px; font-weight:600; word-break:break-word; line-height:1.25}
.note-item.done .note-title{text-decoration:line-through; color:var(--muted)}
.note-meta{display:flex; gap:4px; flex-wrap:wrap; margin-top:3px}
.chip{font-size:9px; padding:1px 6px; border-radius:var(--r-pill); background:var(--glass2); color:var(--muted); font-weight:600; letter-spacing:.2px; display:inline-flex; align-items:center; gap:3px}
.chip.cat{background:rgba(255,255,255,.07); color:#c4ccdf}
.chip.status-open{color:#1a1500; background:var(--warn)}
.chip.status-fixed{color:#04210d; background:var(--fixed)}
.chip.status-wontfix{color:var(--muted); background:rgba(255,255,255,.08)}
.chip.prio-high{color:#fff; background:var(--danger)}
.note-check{flex:0 0 auto; font-size:15px; cursor:pointer; background:none; border:none; color:var(--muted2); padding:0; line-height:1; transition:var(--spring)}
.note-check:hover{color:var(--fixed); transform:scale(1.18)}
.note-check.done{color:var(--fixed)}
.note-del{flex:0 0 auto; background:none; border:none; color:var(--muted2); cursor:pointer; font-size:12px;
  padding:2px 4px; border-radius:7px; opacity:0; transition:var(--t)}
.note-item:hover .note-del{opacity:.7}
.note-del:hover{opacity:1; color:var(--danger); background:rgba(255,69,58,.14)}

/* ---------- prompt ---------- */
.opt-grid{display:flex; flex-direction:column; gap:16px; margin-bottom:16px}
.opt-row{display:grid; grid-template-columns:58px 1fr; align-items:center; gap:9px}
.opt-label{font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted2); font-weight:700; text-align:right}
.opt-pills{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.opt-pills select{padding:6px 9px}
.opt-pill{display:inline-flex; gap:5px; align-items:center; font-size:11.5px; color:var(--muted2);
  background:var(--glass); border:1px solid var(--hair); border-radius:var(--r-pill); padding:5px 12px; cursor:pointer;
  transition:var(--spring); user-select:none; opacity:.75}
.opt-pill input{display:none}
.opt-pill:hover{border-color:var(--hair2); color:var(--txt); opacity:1}
.opt-pill:has(input:checked){background:var(--grad-soft); border-color:var(--accent); color:var(--txt); opacity:1; font-weight:640;
  box-shadow:0 2px 10px rgba(10,132,255,.18)}
.opt-pill.premium{border-color:rgba(233,198,106,.4)}
.opt-pill.premium:has(input:checked){background:linear-gradient(135deg,rgba(233,198,106,.22),rgba(202,161,74,.14)); border-color:#e9c66a; color:var(--txt);
  box-shadow:0 2px 12px rgba(233,198,106,.25)}
.opt-pill .pro{font-size:8.5px; font-weight:800; letter-spacing:.5px; background:linear-gradient(135deg,#f0d175,#caa14a);
  color:#3a2c00; padding:1px 5px; border-radius:6px}
.opt-pill .pro.free{background:linear-gradient(135deg,#6ee7a0,#30d158); color:#052b12}
.opt-pill.disabled{opacity:.4 !important; pointer-events:none; background:var(--glass) !important; border-color:var(--hair) !important;
  box-shadow:none !important; color:var(--muted2) !important; font-weight:500 !important}
.opt-pill:has(#optLocal:checked){background:linear-gradient(135deg,rgba(48,209,88,.2),rgba(48,209,88,.1)); border-color:var(--ok); color:var(--txt); opacity:1; font-weight:640}
.opt-lang{display:inline-flex; gap:5px; align-items:center; font-size:11.5px; color:var(--muted); margin-left:auto}
.opt-lang select{padding:4px 7px; font-size:12px}

/* segmented control — render type (Interior / Exterior) */
.seg{display:inline-flex; padding:3px; gap:3px; background:rgba(0,0,0,.25); border:1px solid var(--hair); border-radius:11px}
.seg-opt{font-size:11.5px; font-weight:600; color:var(--muted2); background:none; border:none; cursor:pointer;
  padding:5px 13px; border-radius:8px; transition:var(--t); display:inline-flex; align-items:center; gap:6px; line-height:1; white-space:nowrap}
.seg-opt:hover:not(:disabled):not(.active){color:var(--txt); background:var(--glass)}
.seg-opt.active{background:var(--grad); color:#fff; box-shadow:0 2px 8px rgba(10,132,255,.35), inset 0 1px 0 rgba(255,255,255,.2)}
.seg-opt:disabled{cursor:not-allowed; opacity:.6}
.seg-opt.is-soon{opacity:.75}
.seg-opt.is-soon:hover{opacity:1}
.seg-opt .soon{font-size:8px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  background:var(--glass3); color:var(--muted); padding:2px 5px; border-radius:var(--r-pill)}

/* generate group — the hero, always visible (separated from the collapsible settings) */
.generate-group{background:linear-gradient(180deg, rgba(94,92,230,.07), transparent 78%); border-bottom:none}

.prompt-actions{display:flex; gap:7px; margin-bottom:16px}
.prompt-actions .btn.block{flex:1; justify-content:center; padding:11px 16px; font-size:14px}
.prompt-actions .pin-btn{flex:0 0 auto; align-self:stretch; padding:0; width:44px; justify-content:center}
.prompt-actions .pin-btn .ic{width:18px; height:18px}
.prompt-actions.out{margin-bottom:11px}
.prompt-actions.out .btn{flex:1; justify-content:center}
.prompt-out-wrap{position:relative}
.copy-icon{position:absolute; top:8px; right:8px; z-index:2; width:30px; height:30px; border-radius:8px;
  background:var(--glass2); border:1px solid var(--hair); color:var(--muted); cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); transition:var(--t)}
.copy-icon:hover{color:#fff; background:var(--grad); border-color:transparent; transform:translateY(-1px)}
.copy-icon:active{transform:translateY(0)}
#promptOut{min-height:140px; width:100%; font-size:12.5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:rgba(0,0,0,.35); border-radius:12px; --rc:rgba(10,132,255,.55)}
#promptOut.pro{--rc:rgba(233,198,106,.65)}
/* glow while the generated prompt streams in */
#promptOut.revealing{border-color:transparent; box-shadow:0 0 0 1.5px var(--rc), 0 0 26px var(--rc);
  background:rgba(0,0,0,.5); transition:box-shadow .3s ease}
.prompt-meta{font-size:11px; color:var(--muted); margin-top:7px; min-height:14px}
.api-state{font-size:11px; color:var(--muted); font-weight:600}

/* ---------- AI generating loader ---------- */
/* themed accent: blue for Basic, gold for PRO (AI elaborate / Vision) */
.ai-loader{--c1:#0a84ff; --c2:#5e5ce6; --c3:#bf5af2;
  --glowLo:rgba(10,132,255,.55); --glowHi:rgba(191,90,242,.9); --glowBase:rgba(94,92,230,.7); --shineMid:#fff;
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; border-radius:12px; background:rgba(8,10,16,.62); backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid var(--hair); opacity:0; transform:scale(.99); transition:opacity .3s, transform .3s}
.ai-loader.pro{--c1:#f6dd86; --c2:#e9b949; --c3:#caa14a;
  --glowLo:rgba(233,198,106,.6); --glowHi:rgba(246,221,134,.95); --glowBase:rgba(233,198,106,.8); --shineMid:#fff4d2}
.ai-loader.show{opacity:1; transform:scale(1)}
.ai-orb{position:relative; width:48px; height:48px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--c1), var(--c2), var(--c3), var(--c1));
  animation:spin 1.5s linear infinite, breathe 2.4s ease-in-out infinite;
  filter:drop-shadow(0 0 18px var(--glowBase))}
.ai-orb::before{content:""; position:absolute; inset:7px; border-radius:50%; background:rgba(8,10,16,.92)}
.ai-orb::after{content:"✦"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--shineMid); animation:twinkle 1.7s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{filter:drop-shadow(0 0 12px var(--glowLo))}50%{filter:drop-shadow(0 0 28px var(--glowHi))}}
@keyframes twinkle{0%,100%{opacity:.6; transform:scale(.9)}50%{opacity:1; transform:scale(1.18)}}
.ai-step{font-size:13.5px; font-weight:680; letter-spacing:-.01em;
  background:linear-gradient(90deg,var(--muted) 18%,var(--shineMid) 50%,var(--muted) 82%); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 2.4s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.ai-bar{width:172px; height:5px; border-radius:var(--r-pill); background:rgba(255,255,255,.1); overflow:hidden;
  box-shadow:0 0 14px var(--glowBase)}
.ai-bar span{display:block; height:100%; width:44%; border-radius:var(--r-pill);
  background:linear-gradient(90deg,transparent,var(--c1),var(--c2),transparent); animation:slide 1.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes slide{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(8px) saturate(1.2); display:flex;
  align-items:center; justify-content:center; z-index:50; padding:20px; animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{background:rgba(22,24,32,.78); border:1px solid var(--hair2);
  border-radius:24px; padding:24px; width:min(490px,100%); display:flex; flex-direction:column; gap:14px;
  max-height:90vh; overflow:auto; box-shadow:var(--sh-lg); backdrop-filter:blur(40px) saturate(1.4);
  /* opacity + gentle rise only — no scale/overshoot, which would re-rasterize the 40px backdrop blur each frame */
  animation:popCard .24s cubic-bezier(.22,.61,.36,1) both; will-change:transform, opacity; transform:translateZ(0)}
@keyframes popCard{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:translateY(0)}}
.modal-card h3{font-size:18px}
.modal-card label{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); font-weight:560}
.modal-card .row{display:flex; gap:10px}
.modal-card .row label{flex:1}
.modal-actions{display:flex; gap:8px; align-items:center; margin-top:6px}
.pin-info{font-size:12px; color:#9ec3ff; background:var(--accent-soft); padding:8px 11px; border-radius:10px}

/* ---------- toast ---------- */
.toast{position:fixed; bottom:26px; left:50%; background:rgba(28,30,40,.85); color:#fff; padding:12px 18px;
  border-radius:16px; z-index:99; font-size:13px; border:1px solid var(--hair2); box-shadow:var(--sh-lg);
  display:flex; align-items:center; gap:14px; transform:translateX(-50%); backdrop-filter:blur(30px) saturate(1.4)}
.toast.show{animation:toastIn .3s var(--spring)}
@keyframes toastIn{from{transform:translateX(-50%) translateY(24px); opacity:0}to{transform:translateX(-50%) translateY(0); opacity:1}}
.toast-action{background:var(--grad); border:none; color:#fff; border-radius:var(--r-pill);
  padding:5px 14px; cursor:pointer; font-weight:640; font-size:12px; transition:var(--t)}
.toast-action:hover{filter:brightness(1.1)}

@media (max-width:880px){
  .workspace{grid-template-columns:1fr; grid-template-rows:auto 48vh auto;
    grid-template-areas:"toolbar" "stage" "panel"}
  .panel{border-left:none; border-top:1px solid var(--hair)}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}

/* ===== Login overlay + account chip (multi-user auth) ===== */
.login-overlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(120% 120% at 50% 0%, rgba(10,132,255,.12), transparent 60%), rgba(6,7,11,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.login-card{
  width:min(380px,100%); display:flex; flex-direction:column; gap:14px;
  padding:28px 26px; border-radius:var(--r-lg);
  background:var(--glass2); border:1px solid var(--hair2); box-shadow:var(--sh-lg);
}
.login-brand{font-size:30px; font-weight:700; letter-spacing:-.02em; text-align:center}
.login-brand .brand-colon{color:var(--accent)}
.login-sub{margin:0; text-align:center; color:var(--muted); font-size:14px}
.login-label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.login-label input{
  padding:12px 14px; font-size:18px; letter-spacing:.12em; text-transform:uppercase; text-align:center;
  border-radius:var(--r); border:1px solid var(--hair2); background:var(--bg); color:var(--txt);
}
.login-label input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.login-msg{min-height:18px; text-align:center; font-size:13px; color:var(--warn)}
.login-foot{margin:0; text-align:center; font-size:12px; color:var(--muted2)}
.btn.block{width:100%; justify-content:center}

.user-chip{
  display:inline-flex; align-items:center; gap:7px; padding:5px 8px 5px 10px;
  border-radius:var(--r-pill); background:var(--glass); border:1px solid var(--hair);
  font-size:13px; color:var(--txt); white-space:nowrap;
}
.user-chip .lucide{width:15px; height:15px; color:var(--muted)}
.credit-pill{
  padding:2px 9px; border-radius:var(--r-pill); font-size:12px; font-weight:600;
  background:var(--accent-soft); color:var(--accent);
}
.settings-account{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:var(--r); background:var(--glass); border:1px solid var(--hair); font-size:14px;
}