:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: machined control panels on a gridded workbench. Image mode = 3 columns.
   Video mode = dockable tabbed panels (left / right) around a camera viewer with a Cinema 4D style timeline. */
:root{
  --primary:#e85d2b;
  --bg:#e6e2dc; --bg-2:#d9d5cf; --panel:#f5f0e8; --panel-2:#eae5dd; --fg:#1a1a1a; --fg-2:#4a4a4a; --muted:#6f6f6f;
  --line:#b8b4ae; --edge:#2a2a2a; --screw:#444; --screw-hi:#777;
  --accent:#e85d2b; --accent-hover:#ec7448; --accent-glow:rgba(232,93,43,.16); --accent-ink:#ffffff;
  --green:#2f9e44; --green-ink:#ffffff; --green-glow:rgba(47,158,68,.14);
  --rig:#2563c9; --ax-x:#d93a40; --ax-y:#2f9e44; --ax-z:#2f66db; --grid:rgba(0,0,0,.045); --grid-2:rgba(0,0,0,.1); --page-grid:rgba(0,0,0,.04);
  --shadow:rgba(0,0,0,.12); --code-k:#2459b5; --code-s:#7a4d12; --code-n:#c24a1c; --track:#e0dbd2; --track-alt:#d8d2c8;
  --f-body:"Inter","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-mode="day"]){
  color-scheme:dark;
  --bg:#0a0a0a; --bg-2:#111111; --panel:#1e1e1e; --panel-2:#161616; --fg:#e8e4df; --fg-2:#a8a4a0; --muted:#858585;
  --line:#333333; --edge:#333333; --screw:#888; --screw-hi:#bbb;
  --accent-hover:#ef7a4f; --accent-glow:rgba(232,93,43,.2);
  --green:#3fb950; --green-ink:#0b1a0e; --green-glow:rgba(63,185,80,.16);
  --rig:#7db8ff; --ax-x:#e5484d; --ax-y:#3fb950; --ax-z:#3f7cf6; --grid:rgba(255,255,255,.04); --grid-2:rgba(255,255,255,.085); --page-grid:rgba(255,255,255,.03);
  --shadow:rgba(0,0,0,.55); --code-k:#7db8ff; --code-s:#d9c49a; --code-n:#f08a5d; --track:#141414; --track-alt:#191919;
}}
:root[data-mode="night"]{
  color-scheme:dark;
  --bg:#0a0a0a; --bg-2:#111111; --panel:#1e1e1e; --panel-2:#161616; --fg:#e8e4df; --fg-2:#a8a4a0; --muted:#858585;
  --line:#333333; --edge:#333333; --screw:#888; --screw-hi:#bbb;
  --accent-hover:#ef7a4f; --accent-glow:rgba(232,93,43,.2);
  --green:#3fb950; --green-ink:#0b1a0e; --green-glow:rgba(63,185,80,.16);
  --rig:#7db8ff; --ax-x:#e5484d; --ax-y:#3fb950; --ax-z:#3f7cf6; --grid:rgba(255,255,255,.04); --grid-2:rgba(255,255,255,.085); --page-grid:rgba(255,255,255,.03);
  --shadow:rgba(0,0,0,.55); --code-k:#7db8ff; --code-s:#d9c49a; --code-n:#f08a5d; --track:#141414; --track-alt:#191919;
}
:root[data-mode="day"], html[data-mode="day"]{
  color-scheme:light;
  --bg:#e6e2dc; --bg-2:#d9d5cf; --panel:#f5f0e8; --panel-2:#eae5dd; --fg:#1a1a1a; --fg-2:#4a4a4a; --muted:#6f6f6f;
  --line:#b8b4ae; --edge:#2a2a2a; --screw:#444; --screw-hi:#777;
  --accent:#e85d2b; --accent-hover:#ec7448; --accent-glow:rgba(232,93,43,.16); --accent-ink:#ffffff;
  --green:#2f9e44; --green-ink:#ffffff; --green-glow:rgba(47,158,68,.14);
  --rig:#2563c9; --ax-x:#d93a40; --ax-y:#2f9e44; --ax-z:#2f66db; --grid:rgba(0,0,0,.045); --grid-2:rgba(0,0,0,.1); --page-grid:rgba(0,0,0,.04);
  --shadow:rgba(0,0,0,.12); --code-k:#2459b5; --code-s:#7a4d12; --code-n:#c24a1c; --track:#e0dbd2; --track-alt:#d8d2c8;
}
*{box-sizing:border-box}
body{background-color:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.5;
  background-image:linear-gradient(var(--page-grid) 1px,transparent 1px),linear-gradient(90deg,var(--page-grid) 1px,transparent 1px);background-size:3.75rem 3.75rem;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 32px;
  transition:background-color .4s ease,color .4s ease}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}

/* navbar */
.nav{position:relative;z-index:1990;margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px))) 22px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:var(--panel);border-bottom:1px solid var(--edge);transition:background .4s ease}
.nav-in{position:relative;max-width:none;width:100%;margin:0;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:10px;padding-right:0}
.brand{display:flex;align-items:center;gap:14px;margin:0;min-width:0;flex:0 0 auto}
.brand h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1;color:var(--fg);display:inline-flex;align-items:center}
.brand .vp-logo{height:38px;width:auto;display:block;flex:none}
.brand .tagline{display:flex;flex-direction:column;gap:3px;padding-left:14px;border-left:1px solid var(--line);min-width:0}
.brand .tagline span{font-size:12.5px;font-weight:500;letter-spacing:.01em;color:var(--fg-2);line-height:1.2;white-space:nowrap}
.brand .tagline small{font-size:10.5px;font-weight:500;letter-spacing:.02em;color:var(--muted);line-height:1.2;white-space:nowrap}
.brand .tagline b{font-weight:700}
.nav-right{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
.nav-right > .seg.app{margin-right:10px}
@keyframes vp-green-grad-flow{
  from{background-position:0% 0}
  to{background-position:100% 0}
}
body.adv #modeNormal, body.pro #modeNormal{display:none!important}
body.adv #modeAdv, body.pro #modeAdv, #modeAdv[aria-pressed="true"]{
  pointer-events:none!important;
  cursor:default!important;
  border:1px solid var(--green)!important;
  color:#ffffff!important;
  background:linear-gradient(100deg,var(--green) 0 38%,#b7f0c4 50%,var(--green) 62% 100%)!important;
  background-size:260% 100%!important;
  animation:vp-shine 2.8s linear infinite!important;
  text-shadow:0 1px 2px rgba(0,0,0,.35)!important;
  box-shadow:0 2px 0 rgba(0,0,0,.35)!important;
  font-weight:700!important;
}
.fbi{color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:3px}
.fbi:hover b,.fbi:focus-visible b{text-decoration:underline;text-underline-offset:2px}
.fbi .cur{width:11px;height:11px;flex:none}
.brand h1 .v{color:var(--accent)}
@media (max-width:620px){.brand{flex-direction:column;align-items:flex-start;gap:6px}.brand .tagline{padding-left:0;border-left:0}}
.seg{display:inline-flex;gap:4px;flex-wrap:wrap}
.seg button{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2);
  padding:7px 13px;border:1px solid var(--line);border-radius:6px;background:transparent;cursor:pointer;transition:all .25s ease}
.seg button:hover{color:var(--fg);border-color:var(--fg-2)}
.seg button[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--accent-glow)}
.seg.app button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.navbtn{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2);padding:7px 11px;border:1px dashed var(--line);border-radius:6px;background:transparent;cursor:pointer}
.navbtn:hover{border-color:var(--accent);color:var(--accent)}
.theme{width:60px;height:32px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);position:relative;cursor:pointer;flex:none;padding:0}
.theme:hover{border-color:var(--accent)}
.theme .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:var(--accent-ink);transition:left .4s cubic-bezier(.34,1.56,.64,1)}
:root[data-mode="night"] .theme .knob{left:31px}
.theme svg{width:13px;height:13px}
.theme .moon{display:none} :root[data-mode="night"] .theme .moon{display:block} :root[data-mode="night"] .theme .sun{display:none}

/* image-mode layout */
.grid{display:grid;grid-template-columns:340px minmax(0,1fr) 410px;gap:22px 18px;max-width:1680px;margin:0 auto;align-items:start}
.col{display:flex;flex-direction:column;gap:26px;min-width:0}
.stage{gap:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width:1250px){.grid{grid-template-columns:340px minmax(0,1fr)}.grid > .right{grid-column:1 / -1}}
@media (max-width:820px){.grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.two{grid-template-columns:1fr}}

/* video-mode layout: dock columns + center viewer */
.vgrid{display:grid;grid-template-columns:330px minmax(0,1fr) 380px;gap:10px;margin:0 auto;align-items:start}
.dock{display:flex;flex-direction:column;gap:0;min-width:0;min-height:120px}
#vCenter{display:flex;flex-direction:column;gap:10px;min-width:0}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.three canvas{height:200px!important}
@media (max-width:1250px){.vgrid{grid-template-columns:320px minmax(0,1fr)}#vRight{grid-column:1 / -1}}
@media (max-width:820px){.vgrid{grid-template-columns:minmax(0,1fr)}#vCenter{order:-1}.three{grid-template-columns:1fr}}
body:not(.video) .vgrid, body.video .grid{display:none}
body:not(.video) .vonly{display:none!important}
body.video .ionly{display:none!important}
body:not(.video):not(.img3d) .vp3d{display:none!important}
body:not(.img3d) .img3d-only{display:none!important}
body.img3d #pairViews{display:none!important}
.dd:has(> #vfTarget){display:none!important}

/* panels */
.card{position:relative;border:1px solid var(--edge);border-radius:12px;min-width:0;box-shadow:0 4px 20px var(--shadow);transition:background-color .4s ease;
  --sc:radial-gradient(circle at 35% 35%,var(--screw-hi) 0,var(--screw) 2.4px,transparent 3.2px);
  background:var(--sc) 6px 6px/8px 8px no-repeat,var(--sc) calc(100% - 6px) 6px/8px 8px no-repeat,
    var(--sc) 6px calc(100% - 6px)/8px 8px no-repeat,var(--sc) calc(100% - 6px) calc(100% - 6px)/8px 8px no-repeat,var(--panel)}
.cbody{padding:24px 16px 16px;display:flex;flex-direction:column;gap:13px;min-width:0}
.tag{position:absolute;top:-11px;left:18px;background:var(--accent);color:var(--accent-ink);font-family:var(--f-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:4px;margin:0;z-index:2;cursor:pointer;user-select:none;border:0}
.tag::after,.vtag::after{content:"▾";margin-left:7px;font-size:9px;opacity:.75}
.min > .tag::after,.min > .vtag::after{content:"▸"}
.card.min .cbody{display:none}
.card.min{min-height:30px}
.card-head{display:flex;align-items:center;gap:8px;justify-content:space-between}
.hint{color:var(--muted);font-size:12px;margin:0}
body:not(.adv) .adv{display:none!important}
body.adv .nrm{display:none!important}

/* video: flat docked panels with tabs */
body.video{padding-bottom:16px}
body.video .nav{margin-bottom:22px}
/* dock: panels grouped as tabs on one card; drag a tab onto another card to join it, or between cards to stack */
.dock{display:flex;flex-direction:column;gap:0;min-width:0}
.dock > *{flex-shrink:0}
.dock.row{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
.dock.row > .tgroup{flex:1 1 300px}
.tgroup{position:relative;min-width:0;scroll-margin-top:18px}
.card{scroll-margin-top:18px}
.tgroup > .card > .tag{display:none}
.tgroup .tabbar{position:absolute;top:-11px;left:16px;right:12px;z-index:3;display:flex;gap:5px;flex-wrap:nowrap}
.tab{font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:4px;cursor:grab;user-select:none;
  background:var(--panel);color:var(--accent);border:1px solid var(--accent);line-height:1.35}
.tab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.tab[aria-selected="true"]::after{content:"▾";margin-left:7px;font-size:9px;opacity:.75}
.tgroup.collapsed .tab[aria-selected="true"]::after{content:"▸"}
.tab.dragging{opacity:.4}
.tgroup.over > .card{outline:2px dashed var(--accent);outline-offset:3px}
.tgroup.collapsed .cbody{display:none}
.tgroup.collapsed > .card{min-height:30px}
.dropzone{height:26px;border-radius:6px;transition:background .15s}
.dock.row > .dropzone{height:auto;width:18px;align-self:stretch}
.dock > .dropzone:first-child{height:14px}
.dock.row > .dropzone:first-child{width:0}
.dropzone.over{background:var(--accent-glow);outline:1px dashed var(--accent)}
body.dragging-tab .dropzone{outline:1px dashed var(--line)}
/* reset menu */
.resetm{position:relative}
.resetm .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:1500;background:var(--panel);border:1px solid var(--edge);border-radius:10px;box-shadow:0 14px 36px var(--shadow);padding:5px;
  display:none;flex-direction:column;min-width:250px}
.resetm::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
.resetm:hover .menu,.resetm:focus-within .menu{display:flex}
.resetm .menu button{text-align:left;background:transparent;border:0;border-radius:7px;padding:8px 10px;cursor:pointer;font-size:13px;color:var(--fg)}
.resetm .menu button small{display:block;color:var(--muted);font-size:11.5px}
.resetm .menu button:hover{background:var(--green);color:var(--green-ink)}
.resetm .menu button:hover small{color:inherit}
.resetm .menu button.danger.armed{background:var(--ax-x);color:#fff}
/* keyframe right-click menu */
.ctx{position:fixed;z-index:2500;background:var(--panel);border:1px solid var(--edge);border-radius:10px;box-shadow:0 14px 36px var(--shadow);padding:5px;min-width:250px}
.ctx button{display:flex;justify-content:space-between;gap:16px;width:100%;text-align:left;background:transparent;border:0;border-radius:7px;padding:7px 10px;cursor:pointer;font-size:13px;color:var(--fg)}
.ctx button span{color:var(--muted);font-family:var(--f-mono);font-size:11px}
.ctx button:hover{background:var(--green);color:var(--green-ink)}
.ctx button:hover span{color:inherit}
.ctx .sepl{height:1px;background:var(--line);margin:4px 6px}
.xyz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.xyz label{font-family:var(--f-mono);font-size:10px;color:var(--muted);display:flex;align-items:center;gap:4px}
.xyz .ax{font-weight:700}
.xyz .ax.x{color:var(--ax-x)} .xyz .ax.y{color:var(--ax-y)} .xyz .ax.z{color:var(--ax-z)}
.xyz input{padding:4px 7px 7px}

/* reference */
.refgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px}
.reftile{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line);
  background:repeating-conic-gradient(var(--panel-2) 0 25%,var(--bg-2) 0 50%) 0 0/14px 14px}
.reftile img{width:100%;height:100%;object-fit:cover;display:block}
.reftile .lab{position:absolute;left:4px;right:4px;bottom:4px;z-index:3;pointer-events:none;font-family:var(--f-mono);font-size:9.5px;line-height:1.25;background:rgba(0,0,0,.72);color:#fff;
  border-radius:4px;padding:2px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reftile .num{position:absolute;left:4px;top:4px;z-index:3;pointer-events:none;font-family:var(--f-mono);font-size:10px;font-weight:700;background:var(--accent);color:var(--accent-ink);border-radius:4px;padding:0 5px}
.reftile .x{position:absolute;top:4px;right:4px;z-index:10;pointer-events:auto;width:20px;height:20px;border-radius:5px;border:0;background:rgba(0,0,0,.78);color:#fff;display:inline-flex;align-items:center;justify-content:center;line-height:0;cursor:pointer;padding:0}
.reftile .x:hover{background:var(--accent)}
.reftile .x svg,.vp-x-ico{width:10px;height:10px;display:block;margin:auto;pointer-events:none;flex:none}
.reftile .busy{position:absolute;inset:0;z-index:2;pointer-events:none;display:grid;place-items:center;background:rgba(0,0,0,.35)}
.addtile{aspect-ratio:1;border:1.5px dashed var(--line);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;
  color:var(--fg-2);font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;background:var(--panel-2);text-align:center;padding:4px}
.addtile:hover,.addtile.over{border-color:var(--accent);color:var(--accent)}
.addtile svg{width:18px;height:18px}
.detect{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;color:var(--fg-2);min-height:18px}
.detect.ok{color:var(--green)}
.spin{width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex:none;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.row{display:flex;gap:10px;align-items:center}
.row > *{min-width:0}
.field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.field label,.lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
select,input[type=number],input[type=text],textarea{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:5px 9px 7px;width:100%;line-height:1.2}
input[type=number]{cursor:ew-resize;font-variant-numeric:tabular-nums;height:34px;display:inline-flex;align-items:center}
input[type=number]:focus{cursor:text}
input[type=number].scrubbing{border-color:var(--accent);cursor:ew-resize;user-select:none}
/* clean spin arrows on number inputs with no background box behind them, ~15% larger and vertically centered with the number */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance:none;appearance:none;margin:2px 0 0;align-self:center;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20'%3E%3Cpath d='M6 2.5 10.3 7.2H1.7zM6 18 1.7 13.3h8.6z' fill='%239a9a9a'/%3E%3C/svg%3E") center/12px 20px no-repeat;
  border:0;box-shadow:none;outline:none;width:14px;height:20px;opacity:.85;cursor:pointer;
}
input[type=number]::-webkit-inner-spin-button:hover{opacity:1}
input[type=color]{width:100%;height:34px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);padding:2px;cursor:pointer}
.subj-row{align-items:flex-end;gap:8px}
.subj-row > .field{align-items:center}
.subj-row > .field > label{white-space:nowrap;display:inline-flex;align-items:baseline;justify-content:center;gap:3px;line-height:1.2;width:100%;text-align:center}
.unit{font-family:var(--f-body);font-size:10px;font-weight:700;text-transform:lowercase;letter-spacing:.02em;color:var(--fg);opacity:.95}
.subj-row input[type=number],.subj-row .dd-btn{height:36px;min-height:36px;padding-top:0;padding-bottom:3px;line-height:1;display:flex;align-items:center}
.subj-row .dd-btn svg{margin-top:2px}
.subj-row input[type=number]{text-align:center;padding-left:6px;padding-right:6px}
.color-field{flex:0 0 auto;align-items:center}
input[type=color].color-cube{-webkit-appearance:none;appearance:none;width:36px;height:36px;padding:0;border:1.5px solid var(--edge);border-radius:6px;background:none;overflow:hidden;display:block;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 5px var(--shadow)}
input[type=color].color-cube::-webkit-color-swatch-wrapper{padding:0}
input[type=color].color-cube::-webkit-color-swatch{border:0;border-radius:4px}
input[type=color].color-cube::-moz-color-swatch{border:0;border-radius:4px}
select:focus,input:focus,textarea:focus{border-color:var(--accent);outline:none}
textarea,input{resize:none!important}
textarea{min-height:54px}
textarea::-webkit-resizer{display:none!important}
.labrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.labrow > label,.labrow > .lbl{display:inline-flex;align-items:center;gap:6px}

/* Cinema 4D style keyframe button: ○ static, ◎ animated, ● key on this frame */
.kb{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--muted);background:transparent;padding:0;cursor:pointer;flex:none;vertical-align:-1px;margin-right:2px;position:relative}
.kb:hover{border-color:var(--accent)}
.kb.anim{border-color:var(--accent)}
.kb.anim::after{content:"";position:absolute;inset:2.5px;border-radius:50%;border:1px solid var(--accent)}
.kb.on{background:var(--accent);border-color:var(--accent)}
.kb.on::after{display:none}

/* custom dropdown */
.dd-native{position:absolute!important;opacity:0;pointer-events:none;width:1px!important;height:1px;overflow:hidden}
.dd{position:relative;width:100%}
.dd-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;
  padding:7px 9px;text-align:left;cursor:pointer;min-height:36px}
.dd-btn:hover{border-color:var(--fg-2)}
.dd-btn[aria-expanded="true"]{border-color:var(--green)}
.dd-btn .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-btn svg{width:11px;height:11px;flex:none;color:var(--muted);transition:transform .2s}
.dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd-btn.is-custom{color:var(--accent);border-color:var(--accent)}
.dd-btn:disabled{opacity:.45;cursor:not-allowed}
.dd-pop{position:fixed;z-index:1000;background:var(--panel);border:1px solid var(--edge);border-radius:10px;box-shadow:0 14px 36px var(--shadow);padding:5px;
  overflow:auto;max-height:300px;min-width:160px}
.dd-opt{padding:7px 10px;border-radius:7px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px}
.dd-opt .ck{width:12px;height:12px;flex:none;opacity:0}
.dd-opt[aria-selected="true"]{color:var(--green);font-weight:600}
.dd-opt[aria-selected="true"] .ck{opacity:1}
.dd-opt.c{color:var(--accent)}
.dd-opt:hover,.dd-opt.act{background:var(--green);color:var(--green-ink)}
.dd-group{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:9px 10px 4px}

/* sliders */
.sl{display:flex;flex-direction:column;gap:4px}
.sl .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sl .top > span:first-child{font-weight:600;display:inline-flex;align-items:center;gap:5px}
.sl .top output{font-family:var(--f-mono);font-size:12.5px;color:var(--accent);font-variant-numeric:tabular-nums}
.ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.05em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:999px;--p:50%;
  background:linear-gradient(to right,var(--accent) var(--p),var(--line) var(--p));margin:9px 0;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--accent),0 0 10px var(--accent-glow)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid var(--panel)}

/* stroke-only toggles */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.tog{border:1px solid var(--line);background:transparent;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:12.5px;color:var(--fg-2);transition:all .2s ease}
.tog:hover{border-color:var(--fg-2);color:var(--fg)}
.tog[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);font-weight:600}
.dof{width:100%;min-height:36px;padding:7px 12px;font-weight:600;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:8px;white-space:nowrap}
.dof .sub{font-family:var(--f-mono);font-size:11px;font-weight:500;flex:none}
.tog.extra{color:var(--green);border-style:dashed;border-color:var(--green);display:inline-flex;align-items:center;gap:6px;max-width:100%}
.tog.extra[aria-pressed="true"]{border-style:solid;box-shadow:inset 0 0 0 1px var(--green)}
.tog.extra[aria-pressed="false"]{opacity:.6}
.tog.extra .del{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;margin-right:-4px;font-weight:700;line-height:0;padding:0;flex:none}
.tog.extra .del .vp-x-ico{width:8.5px;height:8.5px}
.tog.extra .del:hover{background:var(--green);color:var(--panel)}
.addbtn{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:6px;border:1px solid var(--green);color:var(--green);background:transparent;border-radius:6px;padding:6px 10px;cursor:pointer;
  font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.addbtn:hover{box-shadow:inset 0 0 0 1px var(--green)}
.addbtn svg{width:11px;height:11px}
.tog.pin{padding:4px 11px;font-size:11.5px;font-weight:700;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);
  box-shadow:0 3px 0 color-mix(in srgb,var(--accent),#000 35%),0 5px 10px var(--shadow);transform:translateY(-2px);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.tog.pin:hover{background:var(--accent-hover);color:var(--accent-ink)}
.tog.pin[aria-pressed="true"]{transform:translateY(1px);background:var(--green);border-color:var(--green);color:var(--green-ink);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.38),0 0 0 1px color-mix(in srgb,var(--green),#000 35%)}
.csw{display:inline-block;width:10px;height:10px;border-radius:3px;border:1px solid rgba(0,0,0,.35);vertical-align:-1px;margin-right:4px}
.fdetail{border:1.5px solid var(--green);background:var(--green-glow);border-radius:9px;padding:8px;flex:0 0 auto}
.fdetail textarea{border-color:var(--green);background:var(--panel);min-height:74px;height:74px;font-size:11.5px;line-height:1.42;overflow-y:auto;resize:none}
.mrow{display:flex;flex-direction:column;gap:8px;padding:7px 8px;border:1px dashed var(--line);border-radius:8px;background:var(--panel-2)}
.field > input[type=text].cust,#bgCustom{border-color:var(--accent)}
.field > input[type=text].cust{margin-top:6px}
.switch{width:40px;height:22px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);position:relative;cursor:pointer;flex:none;padding:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:left .2s ease,background .2s}
.switch[aria-checked="true"]{border-color:var(--green)}
.switch[aria-checked="true"]::after{left:20px;background:var(--green)}
.swrow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600}
.swrow.sm{font-weight:500;font-size:13px}
.off .dim{opacity:.4;pointer-events:none}

.kv{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:12.5px;margin:0}
.kv dt{color:var(--fg-2)} .kv dd{margin:0;font-family:var(--f-mono);text-align:right;font-variant-numeric:tabular-nums}
.sep{height:1px;background:var(--line);margin:2px 0}

/* rig views */
.view{position:relative;background:var(--panel-2);border:1px solid var(--edge);border-radius:10px;overflow:hidden}
.view canvas{display:block;width:100%;touch-action:none}
.view .vtag{position:absolute;left:10px;top:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);z-index:2;
  cursor:pointer;user-select:none;background:none;border:0;padding:0}
.view .scale{position:absolute;left:10px;bottom:8px;font-family:var(--f-mono);font-size:10.5px;color:var(--muted);pointer-events:none}
.view.min{height:32px}
.view.min > :not(.vtag){display:none!important}
#globe{height:380px}
.two canvas{height:300px}
.orb{position:absolute;width:34px;height:34px;border-radius:6px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--fg-2);transition:all .2s ease}
.orb:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}
.orb svg{width:15px;height:15px}
.orb.l{left:10px;top:50%;margin-top:-17px}.orb.r{right:10px;top:50%;margin-top:-17px}
.orb.u{top:10px;left:50%;margin-left:-17px}.orb.d{bottom:10px;left:50%;margin-left:-17px}
.readout{position:absolute;right:10px;top:8px;font-family:var(--f-mono);font-size:11px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:3px 8px;font-variant-numeric:tabular-nums;pointer-events:none}
.reset{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:6px 10px;cursor:pointer;
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2);transition:all .2s ease}
.reset:hover{border-color:var(--accent);color:var(--accent)}
.reset svg{width:13px;height:13px}
.reset.inline{position:static;align-self:flex-start}
.three .orb{width:26px;height:26px;margin-top:-13px}.three .orb.u,.three .orb.d{margin-left:-13px;margin-top:0}
.three .readout{display:none}
.three .reset{padding:4px 7px;right:6px;bottom:6px}

/* focus point */
.focusimg{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line);line-height:0;display:flex;align-items:center;justify-content:center;min-height:120px;
  background:repeating-conic-gradient(var(--panel-2) 0 25%,var(--bg-2) 0 50%) 0 0/16px 16px;touch-action:none;user-select:none}
.focusimg img{max-width:100%;max-height:100%;width:auto;height:auto;flex:0 0 auto;display:block;cursor:crosshair;-webkit-user-drag:none;user-select:none;pointer-events:auto}
.off .focusimg img{cursor:default}
.fmark{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border:2px solid var(--green);border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px rgba(0,0,0,.45)}
.fmark::before,.fmark::after{content:"";position:absolute;background:var(--green)}
.fmark::before{left:50%;top:-8px;bottom:-8px;width:2px;margin-left:-1px}
.fmark::after{top:50%;left:-8px;right:-8px;height:2px;margin-top:-1px}
.focusimg.dragging .fmark{border-color:var(--accent)}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs button{font-family:var(--f-mono);font-size:11px;border:1px solid var(--line);background:transparent;border-radius:5px;padding:3px 8px;cursor:pointer;color:var(--fg-2)}
.tabs button[aria-pressed="true"]{border-color:var(--green);color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}

/* lighting */
.lightwrap{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;align-items:center}
#lightDial{width:140px;height:140px;display:block;touch-action:none;cursor:grab}
.ldesc{font-size:12.5px;color:var(--fg-2);margin:0}
.roles{display:flex;flex-wrap:wrap;gap:5px}
.role{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;border-radius:6px;padding:4px 9px;cursor:pointer;font-size:12px;color:var(--fg-2)}
.role i{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.role.on i{background:var(--c,var(--accent))}
.role.on{color:var(--fg)}
.role[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

/* prompt */
.prompt{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;font-family:var(--f-mono);font-size:11.5px;line-height:1.6;
  margin:0;padding:12px;overflow:auto;height:520px;white-space:pre-wrap;word-break:break-word;overflow-anchor:none}
body.video .prompt{height:420px}
.prompt .k{color:var(--code-k)} .prompt .s{color:var(--code-s)} .prompt .n{color:var(--code-n)} .prompt .b{color:var(--accent)}
.empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:var(--muted);font-family:var(--f-body);font-size:13px}
.empty svg{width:34px;height:34px;color:var(--line)}
.status{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.status.stale{color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:6px;cursor:pointer;position:relative;overflow:hidden;
  font-family:var(--f-mono);font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;transition:all .25s cubic-bezier(.4,0,.2,1)}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink);width:100%;font-size:13.5px}
.btn.primary::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-100%);transition:transform .6s ease}
.btn.primary:hover::before{transform:translateX(100%)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 8px 24px var(--accent-glow)}
.btn.primary.busy{pointer-events:none;cursor:progress}
.btn.primary .spin{border-color:rgba(255,255,255,.35);border-top-color:var(--accent-ink)}
.btn.ghost{background:transparent;border:1px solid var(--edge);color:var(--fg);flex:1}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}
.btn.sm{padding:6px 10px;font-size:11px}
/* video mode: Generate Prompt sub-box with Video / Frame */
.genbox{display:flex;flex-direction:column;gap:7px;border:1px solid var(--line);border-radius:8px;padding:8px 10px 10px;background:var(--panel-2)}
.genbox .row{gap:8px}
.genbox .btn.primary{flex:1;width:auto;padding:8px 10px;font-size:12px}
/* timeline Tracks button: ash outline so it reads as a button */
#tlTracksBtn:not([aria-pressed="true"]){border-color:#8b8f97}
#tlTracksBtn:not([aria-pressed="true"]):hover{border-color:var(--fg-2)}

/* video: viewer */
.viewer{display:grid;grid-template-columns:minmax(0,1fr) 200px;background:#111;min-height:240px}
@media (max-width:620px){.viewer{grid-template-columns:1fr}}
.vpwrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:220px;height:min(54vh,540px);padding:8px}
.vpframe{position:relative;line-height:0;box-shadow:0 0 0 1px rgba(255,255,255,.18);
  background:repeating-conic-gradient(#2a2b2f 0 25%,#232428 0 50%) 0 0/20px 20px}
.vpframe canvas{display:block;max-width:100%;max-height:100%}
.guides{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.22) calc(33.33% - .5px),rgba(255,255,255,.22) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.22) calc(66.66% - .5px),rgba(255,255,255,.22) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
  linear-gradient(transparent calc(33.33% - .5px),rgba(255,255,255,.22) calc(33.33% - .5px),rgba(255,255,255,.22) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.22) calc(66.66% - .5px),rgba(255,255,255,.22) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.vpfocus{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid #3fb950;border-radius:50%;pointer-events:auto;cursor:grab;z-index:4;box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.vpfocus:active{cursor:grabbing}
.vpfocus::before,.vpfocus::after{content:"";position:absolute;background:#3fb950}
.vpfocus::before{left:50%;top:-9px;bottom:-9px;width:2px;margin-left:-1px}
.vpfocus::after{top:50%;left:-9px;right:-9px;height:2px;margin-top:-1px}
.vpfocus span{position:absolute;left:24px;top:-22px;white-space:nowrap;font:600 11px var(--f-mono);color:#fff;background:rgba(0,0,0,.65);padding:2px 6px;border-radius:4px;line-height:1.3}
.vpfocus.flip-x span{left:auto;right:24px}
.vpfocus.flip-y span{top:22px}
.vpside{background:var(--panel);border-left:1px solid var(--edge);padding:10px;display:flex;flex-direction:column;gap:10px;min-width:0}
.vpside > .field{flex:none}
.vpside .lbl{display:flex;align-items:center;gap:6px}
.vpnote{position:absolute;left:12px;bottom:10px;font-family:var(--f-mono);font-size:10.5px;color:rgba(255,255,255,.65);pointer-events:none}
.vpbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;border-top:1px solid var(--edge);background:var(--panel)}
.vpbar .tc{font-family:var(--f-mono);font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums;margin-right:auto}

/* video: objects */
.objlist{display:flex;flex-direction:column;gap:4px}
.objrow{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;cursor:pointer;background:transparent;text-align:left;width:100%}
.objrow[aria-pressed="true"]{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.objrow .sw{width:12px;height:12px;border-radius:3px;flex:none;border:1px solid rgba(0,0,0,.3)}
.objrow .m{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;color:var(--muted);text-transform:uppercase}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* video: Cinema 4D style timeline */
.c4d{background:var(--panel);border:1px solid var(--edge);border-radius:6px;overflow:hidden}
.c4dbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:6px 8px;border-bottom:1px solid var(--edge)}
.tb{height:28px;min-width:28px;padding:0 6px;border:1px solid transparent;border-radius:5px;background:transparent;display:inline-grid;place-items:center;cursor:pointer;color:var(--fg-2);
  font-family:var(--f-mono);font-size:11px}
.tb:hover{border-color:var(--line);color:var(--fg)}
.tb svg{width:15px;height:15px}
.tb[aria-pressed="true"]{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}
.tb.rec{color:var(--accent)}
.tb:disabled{opacity:.35;cursor:default}
.tb:disabled:hover{border-color:transparent;color:var(--fg-2)}
.tbsep{width:1px;height:20px;background:var(--line);margin:0 4px}
input.fr{width:78px;flex:none;height:28px;text-align:center;font-family:var(--f-mono);font-size:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.c4dsp{flex:1}
/* keyframe layers: one chip per animated group / 3D scene object, with thin horizontal scrollbar when many objects exist */
.kgroups{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;overflow-x:auto;overflow-y:hidden;padding:2px 6px 4px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.kgroups::-webkit-scrollbar{height:4px;display:block}
.kgroups::-webkit-scrollbar-track{background:transparent}
.kgroups::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px;border:0}
.kg{flex:none;height:24px;display:inline-flex;align-items:center;gap:6px;padding:0 9px;border:1px solid var(--line);border-radius:12px;background:transparent;
  color:var(--fg-2);font-family:var(--f-mono);font-size:11px;white-space:nowrap;cursor:pointer;user-select:none;transition:border-color .15s,background .15s,box-shadow .15s}
.kg:hover{color:var(--fg);border-color:var(--fg-2)}
.kg b{font-weight:400;color:var(--muted);font-size:10px}
.kg svg{width:12px;height:12px}
.kg .sw{width:9px;height:9px;border-radius:2px;flex:none}
.kg .sw.fp{border-radius:50%;background:transparent;border:1.5px solid currentColor}
.kg[aria-pressed="true"]{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}
.kg[aria-pressed="true"] b{color:var(--accent)}
.kg.multi-sel{border-color:var(--green);color:var(--fg);box-shadow:0 0 0 1.5px var(--green);background:var(--green-glow)}
.kg.drag-over,.objrow.drag-over{outline:2px dashed var(--green);outline-offset:1px;background:var(--green-glow)!important;border-color:var(--green)!important}
.objrow.multi-sel{border-color:var(--green);box-shadow:0 0 0 1.5px var(--green);background:var(--green-glow)}
.kg .grp-badge{font-size:9px;font-weight:700;padding:0 4px;border-radius:4px;background:var(--accent);color:var(--accent-ink);letter-spacing:.03em}
.kg input.kg-ren{width:86px;height:18px;padding:0 4px;font:11px var(--f-mono);border:1px solid var(--accent);border-radius:3px;background:var(--panel);color:var(--fg)}
.durbox{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.durbox label{text-transform:uppercase;letter-spacing:.08em;font-size:10px}
.durbox input{width:96px;height:28px;text-align:center;font-family:var(--f-mono);font-size:12.5px;color:var(--accent);background:var(--panel-2);border:1px solid var(--accent);border-radius:5px;padding:2px 6px}
.kfed{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;color:var(--fg-2)}
.kfed .dd{width:200px}
.power{position:relative;height:58px;margin:0 14px;cursor:ew-resize;touch-action:none;user-select:none}
.power canvas{position:absolute;inset:0;width:100%;height:100%}
.pkey{position:absolute;top:34px;width:14px;height:14px;margin-left:-7px;padding:0;border:0;background:transparent;cursor:grab}
.pkey i{position:absolute;inset:2px;background:var(--accent);transform:rotate(45deg);border:1px solid rgba(0,0,0,.35)}
.pkey.ease i{border-radius:50%;transform:none}
.pkey.hold i{transform:none;border-radius:1px}
.pkey.sel i{background:var(--green);box-shadow:0 0 0 2px var(--green-glow)}
.phead{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--accent);pointer-events:none}
.phead::before{content:"";position:absolute;top:0;left:-7px;width:12px;height:16px;background:var(--accent);border-radius:2px}
.frames{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 12px 8px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.frames input.fr{width:54px}
.frames .durbox input{width:68px}
/* the free space on both sides of "Video length": Graph + Reset on the left, key edit + Tracks + Subject Detail on the right */
.frames .fside{flex:1 1 auto;min-width:max-content;display:flex;align-items:center;gap:6px}
.frames .fside.l{justify-content:flex-start}
.frames .fside.r{justify-content:flex-end}
.frames .fside .tb{flex:none;width:auto;white-space:nowrap}
.frames .kfed .dd{width:150px}
#tlGraphBtn,#tlResetBtn{display:inline-flex;align-items:center;gap:6px;padding:0 9px}
#tlResetBtn{border-color:#8b8f97}
#tlResetBtn:hover{border-color:var(--accent);color:var(--accent)}
#tlTracksBtn{display:inline-flex;align-items:center;justify-content:center;padding:0 10px}
#tlSubjDetailBtn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 11px;background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;white-space:nowrap}
#tlSubjDetailBtn:hover,#tlSubjDetailBtn[aria-pressed="true"]{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink);box-shadow:0 0 10px var(--accent-glow)}
/* graph editor */
.graph{border-top:1px solid var(--edge);display:flex;flex-direction:column;box-sizing:border-box}
.graph[hidden]{display:none!important}
.gbar{display:flex;align-items:center;gap:6px;padding:5px 8px;border-bottom:1px solid var(--line);flex:none}
.gseg{display:flex;gap:2px;flex:none}
.gprops{flex:1 1 0;min-width:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.gprops::-webkit-scrollbar{display:none}
.gp{flex:none;height:24px;display:inline-flex;align-items:center;gap:6px;padding:0 9px;border:1px solid var(--line);border-radius:12px;background:transparent;
  color:var(--fg-2);font-family:var(--f-mono);font-size:10.5px;white-space:nowrap;cursor:pointer}
.gp:hover{color:var(--fg);border-color:var(--fg-2)}
.gp .sw{width:10px;height:3px;border-radius:2px;flex:none}
.gp[aria-pressed="true"]{border-color:var(--accent);color:var(--fg);background:var(--accent-glow)}
.gtools{display:flex;gap:2px;flex:none}
.gwrap{position:relative;height:220px;margin:4px 6px 6px;touch-action:none;user-select:none;cursor:crosshair;border-radius:4px;overflow:hidden;flex:1 1 auto;min-height:0}
.gwrap canvas{position:absolute;inset:0;width:100%;height:100%}
.gphead{position:absolute;top:0;bottom:0;width:0;border-left:1px solid var(--accent);pointer-events:none}
body.video .gwrap{height:auto}
.tracks{border-top:1px solid var(--edge);max-height:260px;overflow:auto;box-sizing:border-box}
.tracks[hidden]{display:none!important}
#vThree[hidden]{display:none!important}
.trow{display:grid;grid-template-columns:230px minmax(0,1fr);height:26px;border-bottom:1px solid var(--line);align-items:center}
.trow .tn{display:flex;align-items:center;gap:6px;padding:0 8px;font-size:12px;color:var(--fg-2);white-space:nowrap;overflow:hidden}
.trow .tn .g{font-family:var(--f-mono);font-size:10px;color:var(--muted);text-transform:uppercase}
.trow .tt{position:relative;height:100%;margin-right:14px;background:var(--track);cursor:ew-resize}
.trow .tt .kf{position:absolute;top:6px;width:13px;height:13px;margin-left:-6.5px;padding:0;border:0;background:transparent;cursor:grab}
.trow .tt .kf i{position:absolute;inset:1.5px;background:var(--accent);transform:rotate(45deg);border:1px solid rgba(0,0,0,.35)}
.trow .tt .kf.ease i{border-radius:50%;transform:none}
.trow .tt .kf.hold i{transform:none;border-radius:1px}
.trow .tt .kf.sel i{background:var(--green)}
.trow .tt .ph2{position:absolute;top:0;bottom:0;border-left:1px solid var(--accent);pointer-events:none}

/* modal + toast */
.modal{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:16px}
.modal .card{width:min(420px,100%)}
.modal .cbody{padding-top:28px}
.modal .tag{cursor:default}
.modal .tag::after{display:none}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:6px;
  font-family:var(--f-mono);font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none;max-width:calc(100% - 32px);z-index:3000}
.toast.show{opacity:1}
/* access: Advanced mode needs sign-in + the owner's approval */
body.gated:not(.pro) .pro-only{display:none!important}
body.gated:not(.pro) #keys .tog.extra.y{display:none!important}
.dd-opt.locked{color:var(--muted)}
.tab.locked,
body:not(.adv) .tabbar .tab[data-pid="pCam"]{
  background:#26282e!important;
  border-color:#3c3f47!important;
  color:#9a9da6!important;
  opacity:1!important;
  box-shadow:none!important;
  pointer-events:none!important;
  user-select:none!important;
  cursor:default!important;
}
:root[data-mode="day"] .tab.locked,
:root[data-mode="day"] body:not(.adv) .tabbar .tab[data-pid="pCam"]{
  background:#34373f!important;
  border-color:#4b4f5a!important;
  color:#d0d3da!important;
}
.tab .lk{width:9px;height:9px;margin-left:4px;vertical-align:-1px}
.lk{width:10px;height:10px;flex:none;margin-left:6px;vertical-align:-1px}
.dd-opt.locked{cursor:not-allowed}
.dd-opt.locked .lk{margin-left:auto}
.advpop-backdrop{
  position:fixed;inset:0;z-index:3090;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
}
.advpop-backdrop:has(+ .advpop.show){display:block!important}
.advpop{
  position:fixed;left:50%;top:50%;bottom:auto;
  transform:translate(-50%,-46%) scale(.96);
  opacity:0;z-index:3100;width:min(430px,calc(100% - 32px));
  background:var(--panel);color:var(--fg);border:1px solid var(--edge);border-top:3px solid var(--accent);
  border-radius:12px;box-shadow:0 24px 64px rgba(0,0,0,.68);padding:18px 20px;
  transition:transform .22s cubic-bezier(.2,.9,.3,1),opacity .22s ease,visibility .22s;
  visibility:hidden;pointer-events:none;
}
.advpop.show{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;pointer-events:auto}
.advpop b{display:flex;align-items:center;gap:6px;font-size:14px}
.advpop b .lk{margin:0;color:var(--accent);width:12px;height:12px}
.advpop p{margin:4px 0 12px;color:var(--fg-2);font-size:12.5px;line-height:1.45}
.advpop .by{display:block;font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--muted);margin-bottom:8px}
.advpop .by b{font-weight:700;display:inline}
.advpop .x{position:absolute;top:8px;right:8px;width:28px;height:28px;padding:0;border:0;font-size:18px;line-height:1;color:var(--muted)}
.advpop .x:hover{color:var(--fg)}
.advpop .acts{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;text-align:center}
.advpop .acts button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.advpop .acts svg{width:15px;height:15px;flex:none}
.advpop .acts button:disabled{opacity:1;cursor:default;border-color:var(--green);color:var(--green);background:transparent}
.advpop .st{margin:10px 0 0;font-size:11.5px;color:var(--muted);text-align:center;width:100%}
.advpop .st:empty{display:none}
.advpop button{font:600 12px var(--f-body);border-radius:6px;padding:7px 12px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--fg)}
.advpop button.x{position:absolute;top:10px;right:12px;width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:5px;background:var(--panel-2);font-size:16px;line-height:0;color:var(--muted);display:inline-flex;align-items:center;justify-content:center}
.advpop button.x:hover{color:#fff;background:var(--ax-x);border-color:var(--ax-x)}
.advpop button.go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.authm{position:relative;display:none}
body.gated .authm{display:block}
.authm::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
.authm .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:1500;background:var(--panel);border:1px solid var(--edge);border-radius:10px;box-shadow:0 14px 36px var(--shadow);padding:5px;
  display:none;flex-direction:column;min-width:240px}
.authm.open .menu{display:flex}
.authm .menu button{text-align:left;background:transparent;border:0;border-radius:7px;padding:8px 10px;cursor:pointer;font-size:13px;color:var(--fg);display:flex;align-items:center;gap:9px}
.authm .menu button:hover{background:var(--green);color:var(--green-ink)}
.authm .menu svg{width:16px;height:16px;flex:none}
.authm .who{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:12px;color:var(--muted);line-height:1.4}
.authm .who strong{display:block;color:var(--fg);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.authm .who .st{display:inline-block;margin-top:5px;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px;border:1px solid var(--line)}
.authm .who .st.on{border-color:var(--green);color:var(--green)}
#authBtn{display:flex;align-items:center;gap:7px;max-width:180px}
#authBtn img{width:18px;height:18px;border-radius:50%;flex:none}
#authBtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#authBtn.pro{border-style:solid;font-weight:700}
/* Normal mode: everything that needs Advanced mode is grey (still clickable: it opens the request panel) */
body.gated:not(.pro) #appVideo,body.gated:not(.pro) #img3dBtn,body.gated:not(.pro) #modeAdv,body:not(.adv) #img3dBtn{color:var(--muted);border-color:var(--line);background:transparent}
body.gated:not(.pro) #focusOn,body.gated:not(.pro) #detailOn,body.gated:not(.pro) #lightOn{filter:grayscale(1)}
/* shimmer: a lighter tint of the colour runs from right to left */
@keyframes vp-shine{from{background-position:0% 0}to{background-position:100% 0}}
.fbi b{background:linear-gradient(100deg,var(--accent) 0 38%,#ffc4a3 50%,var(--accent) 62% 100%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:vp-shine 2.8s linear infinite}
.fbi .cur{background:linear-gradient(100deg,var(--accent) 0 38%,#ffc4a3 50%,var(--accent) 62% 100%);background-size:260% 100%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 5.2v9l2.3-2.2 1.7 3.6 1.6-.7-1.7-3.5 3.2-.3z'/%3E%3Cpath d='M3.6 3.6 2.2 2.2M6.2 2.6V.9M2.6 6.2H.9' stroke='black' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 5.2v9l2.3-2.2 1.7 3.6 1.6-.7-1.7-3.5 3.2-.3z'/%3E%3Cpath d='M3.6 3.6 2.2 2.2M6.2 2.6V.9M2.6 6.2H.9' stroke='black' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:vp-shine 2.8s linear infinite;animation-delay:-.35s}
.fbi .cur *{fill:transparent;stroke:transparent}
#authBtn.pro,.authm .who .st.on{background:linear-gradient(100deg,var(--green) 0 38%,#b7f0c4 50%,var(--green) 62% 100%);background-size:260% 100%;
  color:var(--green-ink);border:1px solid var(--green);box-shadow:0 2px 0 rgba(0,0,0,.35);animation:vp-shine 2.8s linear infinite}
#authBtn.pro,#authBtn.pro span,body.pro #authBtn,body.pro #authBtn span{color:#fff}
@media (prefers-reduced-motion:reduce){.fbi b,.fbi .cur,#authBtn.pro,.authm .who .st.on{animation:none}}
/* key prompts: raised orange buttons that press down when selected */
#keys .tog{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);font-weight:600;
  box-shadow:0 3px 0 color-mix(in srgb,var(--accent),#000 35%),0 5px 10px var(--shadow);transform:translateY(-2px);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
#keys .tog:hover{background:var(--accent-hover)}
#keys .tog[aria-pressed="true"]{transform:translateY(1px);background:color-mix(in srgb,var(--accent),#000 22%);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--accent),#000 35%)}
#keys .tog[aria-pressed="true"]::before{content:"✓ ";font-weight:700}
#keys .tog.extra{background:var(--green);color:var(--green-ink);border:1px solid var(--green);border-style:solid;opacity:1;
  box-shadow:0 3px 0 color-mix(in srgb,var(--green),#000 35%),0 5px 10px var(--shadow)}
#keys .tog.extra[aria-pressed="true"]{background:color-mix(in srgb,var(--green),#000 22%);box-shadow:inset 0 2px 5px rgba(0,0,0,.45)}
#keys .tog.extra .del:hover{background:var(--green-ink);color:var(--green)}
#keys{padding-top:3px}

/* video: center column stays put at full height, the side columns scroll on their own */
@media (min-width:1251px){
  body.video{overflow:hidden;height:100dvh;padding-bottom:0}
  body.video .nav{margin-bottom:10px}
  body.video .vgrid{height:calc(100dvh - var(--navh,82px) - 26px);align-items:stretch}
  body.video #vLeft,body.video #vRight{overflow-y:auto;overflow-x:hidden;min-height:0;padding:0 6px 12px 2px;scrollbar-width:thin}
  body.video #vCenter{min-height:0;overflow:hidden}
  body.video #pViewport{flex:1 1 auto;min-height:220px;display:flex;flex-direction:column}
  body.video #pViewport .viewer{flex:1 1 auto;min-height:0}
  body.video .vpwrap{height:auto;min-height:0}
  body.video .three{flex:0 0 172px;height:172px;min-height:172px;max-height:172px;box-sizing:border-box}
  body.video #pTimeline{flex:none;box-sizing:border-box}
  body.video .three canvas{height:170px!important}
  body.video .graph:not([hidden]),
  body.video .tl-subj-detail:not([hidden]),
  body.video .tracks:not([hidden]){
    height:182px!important;min-height:182px!important;max-height:182px!important;
    box-sizing:border-box!important;margin:0!important;
  }
  body.video .graph:not([hidden]),
  body.video .tl-subj-detail:not([hidden]){overflow:hidden!important}
  body.video .tracks:not([hidden]){overflow-y:auto!important}
  body.video .prompt{height:clamp(140px,calc(100dvh - 700px),360px)}
  body.video #vLeft > .dropzone:first-child,body.video #vRight > .dropzone:first-child{height:20px}
  body.video #keys .tog{padding:4px 8px;font-size:11.5px}
  body.video #pOutput .cbody,body.video #pPrompt .cbody{gap:9px;padding-top:20px}
  body.video #pPrompt .btn{padding:8px 10px}
  body.video #extra{min-height:38px;height:38px}
  body.video #pOutput .addbtn{margin-top:4px}
}
/* yellow: notes and custom text added to the prompt; green: the subject description */
:root{--yellow:#e0a800;--yellow-ink:#1c1500}
.addbtn.y{border-color:var(--yellow);color:var(--yellow)}
.addbtn.y:hover{box-shadow:inset 0 0 0 1px var(--yellow)}
.descbox{border:1.5px solid var(--green);background:var(--green-glow);border-radius:10px;padding:10px}
.descbox textarea{border-color:var(--green);background:var(--panel);font-size:12px;line-height:1.42}
.descbox .hint{color:var(--fg-2);font-size:11.5px}
/* key prompts: small chips in a scroll box */
#keys{max-height:185px;overflow-y:auto;padding:4px 4px 6px 2px;gap:6px 5px;align-content:flex-start}
#keys .tog{padding:3px 7px;font-size:11px;border-radius:5px}
#keys .tog.extra.y{background:var(--yellow);color:var(--yellow-ink);border-color:var(--yellow);box-shadow:0 3px 0 color-mix(in srgb,var(--yellow),#000 35%),0 5px 10px var(--shadow)}
#keys .tog.extra.y[aria-pressed="true"]{background:color-mix(in srgb,var(--yellow),#000 18%);box-shadow:inset 0 2px 5px rgba(0,0,0,.4)}
#keys .tog.extra.y .del:hover{background:var(--yellow-ink);color:var(--yellow)}
/* orange scrollbars everywhere */
*{scrollbar-color:var(--accent) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:9px;border:2px solid var(--panel)}
::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}
/* orbit with Top view & Side view stacked vertically beside it in one box; Focus Point sits in #pairViews below with fixed left image + scrollable right options */
#pOrbit{display:grid;grid-template-columns:minmax(0,1fr)}
#pOrbit:has(#orbitSide > *){grid-template-columns:minmax(0,1.4fr) minmax(240px,.72fr)}
.orbitcv{position:relative;min-width:0}
.orbitside{min-width:0;border-left:1px solid var(--edge);background:var(--panel-2);overflow:hidden;display:flex;flex-direction:column;max-height:500px}
.orbitside:empty{display:none}
.orbitside > .view{flex:1 1 0;min-width:0;min-height:0;width:100%;border:0;border-radius:0;box-shadow:none;background:var(--panel-2)}
.orbitside > .view + .view{border-top:1px solid var(--edge)}
.orbitside > .view > canvas{width:100%;height:100%!important;min-height:0!important}
.orbitside > .view.min{flex:0 0 32px;height:32px!important}
.shead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 4px;cursor:pointer;user-select:none;flex:none}
.card.has-sw .shead > .tag{position:static;display:inline-flex;align-items:center;margin:0}
.card.has-sw > .cbody{padding-top:10px}
.tgroup.single-sw > .tabbar{display:none}
.tgroup:not(.single-sw) > .card.has-sw .shead > .tag{visibility:hidden;pointer-events:none;height:0;padding:0}
.tgroup.collapsed > .card.has-sw .shead,.card.has-sw.min .shead{padding-bottom:10px}
.tgroup.collapsed .shead > .tag::after,.card.min .shead > .tag::after{content:"▸"}
#pairViews:has(> #pFocus){display:flex;flex-direction:column;align-items:stretch;width:100%;gap:0}
#pairViews > #pFocus{flex:1 1 auto;min-height:0;width:100%;height:100%!important;display:flex;flex-direction:column;overflow:hidden}
#pairViews > #pFocus > .shead{padding:8px 20px 4px 14px;cursor:default}
#pairViews > #pFocus > .shead .tag{cursor:default;pointer-events:none}
#pairViews > #pFocus > .shead .tag::after{display:none!important;content:none!important}
.focus-shead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.focus-shead-left{display:flex;align-items:center;gap:6px;min-width:0}
.focus-shead-right{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}
.focus-shead-right .swrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--fg)}
.focus-shead-right .focus-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 10px;border-radius:7px;
  background:var(--accent);border:1px solid var(--accent);
  color:#fff;box-shadow:none;
  cursor:pointer;transition:background .2s,border-color .2s,color .2s;
}
.focus-shead-right .focus-pill .vf-sw-lbl{color:#fff;font-weight:700}
body:not(.adv) .focus-shead-right .focus-pill,
#pFocus.off .focus-shead-right .focus-pill{
  background:#26282e;border:1px solid #3c3f47;
  color:#9a9da6;box-shadow:none;
}
:root[data-mode="day"] body:not(.adv) .focus-shead-right .focus-pill,
:root[data-mode="day"] #pFocus.off .focus-shead-right .focus-pill{
  background:#34373f;border-color:#4b4f5a;color:#d0d3da;box-shadow:none;
}
body:not(.adv) .focus-shead-right .focus-pill .vf-sw-lbl,
#pFocus.off .focus-shead-right .focus-pill .vf-sw-lbl{color:inherit;font-weight:600}
.focus-shead-right .focus-pill .switch{
  background:var(--panel-2);border:1.5px solid var(--accent);filter:none!important;
}
.focus-shead-right .focus-pill .switch::after{background:var(--accent)}
.focus-shead-right .focus-pill .switch[aria-checked="true"]{
  background:var(--panel-2);border-color:var(--accent);
}
.focus-shead-right .focus-pill .switch[aria-checked="true"]::after{background:var(--accent)}
body.gated:not(.pro):not(.adv) .focus-shead-right .focus-pill,
body.gated:not(.pro):not(.adv) .focus-shead-right .focus-pill .switch{
  cursor:not-allowed;
}
#focusTabs.focus-head-tabs{display:inline-flex;align-items:center;gap:5px;flex-wrap:nowrap}
#focusTabs.focus-head-tabs:empty{display:none}
#focusTabs.focus-head-tabs button{
  font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.03em;
  border:1px solid var(--green);border-radius:6px;padding:3px 9px;cursor:pointer;
  background:transparent;color:var(--green);transition:background .15s,color .15s,box-shadow .15s;
}
#focusTabs.focus-head-tabs button:hover{background:var(--green-glow);color:var(--green)}
#focusTabs.focus-head-tabs button[aria-pressed="true"]{
  background:var(--green);border-color:var(--green);color:#fff;
  box-shadow:0 0 10px var(--green-glow);
}
#pairViews > #pFocus > .cbody{flex:1 1 auto;min-height:0;overflow:hidden;padding:6px 14px 12px;display:flex;flex-direction:column}
.dd:has(> #focusTarget){display:none!important}
.focus-split{display:grid;grid-template-columns:var(--fbox-w,392px) minmax(0,1fr);gap:16px;flex:1 1 auto;min-height:0;width:100%;height:100%;overflow:hidden}
.focus-left{display:flex;flex-direction:column;gap:6px;min-height:0;width:var(--fbox-w,392px);min-width:var(--fbox-w,392px);max-width:var(--fbox-w,392px);height:100%;overflow:hidden}
.focus-left > .tabs:empty{display:none}
.focus-left > .focusimg{flex:1 1 0;min-height:180px;height:100%;aspect-ratio:4 / 3;width:var(--fbox-w,392px);max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.focus-left > .focusimg img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;flex:0 0 auto}
.focus-left > .focusimg img[data-fit="width"]{width:100%;height:auto;max-width:100%;max-height:none}
.focus-left > .focusimg img[data-fit="height"]{height:100%;width:auto;max-height:100%;max-width:none}
.focus-right{display:flex;flex-direction:column;gap:8px;min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;padding-left:5px;padding-right:6px;scrollbar-width:thin}
.focus-right > *{flex:0 0 auto}
.focus-right .field{gap:4px;flex:0 0 auto}
.focus-right select,.focus-right input[type=text],.focus-right input[type=number]{padding:5px 8px}
.focus-right .dd-btn{min-height:32px;padding:5px 8px}
.fmode-bar{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:0 0 auto}
.fmode-bar button{text-align:center;padding:5px 8px;font-size:11px}
.fmulti-acts{display:inline-flex;align-items:center;gap:6px}
.reset.inline.freset{padding:4px 8px;font-size:10.5px;border-radius:5px;gap:4px}
.reset.inline.freset svg{width:11px;height:11px}
.fboxes{position:absolute;inset:0;pointer-events:none}
.fbox{position:absolute;border:1.5px solid var(--sc,var(--accent));border-radius:4px;pointer-events:auto;cursor:pointer;box-sizing:border-box;transition:box-shadow .15s,background .15s}
.focusimg.marker-active .fbox{pointer-events:none}
.fbox:hover,.fbox.act{background:color-mix(in srgb,var(--sc,var(--accent)) 14%,transparent);box-shadow:0 0 0 1px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.25)}
.fbox-tag{position:absolute;left:-1px;top:var(--tag-top,-15px);background:var(--sc,var(--accent));color:#fff;font:600 9px/1.2 var(--f-mono);padding:1px 5px;border-radius:3px 3px 3px 0;white-space:nowrap;pointer-events:none;text-shadow:0 1px 1px rgba(0,0,0,.45)}
.fmulti{border:1.5px solid var(--line);background:var(--panel-2);border-radius:9px;padding:8px;gap:7px;flex:0 0 auto}
.fdet-btn{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;font-size:11.5px;border-color:color-mix(in srgb,var(--sc,var(--line)) 75%,var(--line))}
.fdet-btn[aria-pressed="true"]{border-color:var(--sc,var(--accent));color:var(--fg);background:color-mix(in srgb,var(--sc,var(--accent)) 16%,transparent);box-shadow:inset 0 0 0 1px var(--sc,var(--accent));font-weight:600}
.fdet-btn.marker-glow{border-color:var(--green);color:var(--green);background:rgba(63,185,80,.12);box-shadow:0 0 12px rgba(63,185,80,.42),inset 0 0 6px rgba(63,185,80,.18);font-weight:600}
.fdet-btn.marker-glow:hover{border-color:var(--green);color:var(--fg);box-shadow:0 0 15px rgba(63,185,80,.55),inset 0 0 8px rgba(63,185,80,.24)}
.fdet-btn.marker-glow[aria-pressed="true"]{border-color:var(--green);color:var(--fg);background:rgba(63,185,80,.24);box-shadow:0 0 16px rgba(63,185,80,.65),inset 0 0 0 1px var(--green);font-weight:700}
.sdot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.sdot.marker-dot{background:var(--green);box-shadow:0 0 7px var(--green),0 0 0 1.5px rgba(255,255,255,.45)}
.fmedit{display:flex;flex-direction:column;gap:5px;padding-top:5px;border-top:1px dashed var(--line)}
.fmedit .btn.ghost.sm{flex:0 0 auto;padding:4px 10px}
.fmedit textarea{min-height:54px;font-size:11.5px;line-height:1.42;background:var(--panel);resize:none}
.fsubj-list{gap:6px 5px;padding-top:3px;align-content:flex-start}
.fsubj-empty{font-size:11px;padding:2px 0}
.tog.fsubj{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;font-size:11px;border-radius:5px;font-weight:600;
  background:var(--sc,var(--accent));color:#fff;border:1px solid var(--sc,var(--accent));
  box-shadow:0 3px 0 color-mix(in srgb,var(--sc,var(--accent)),#000 38%),0 5px 10px var(--shadow);
  transform:translateY(-2px);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.tog.fsubj:hover{filter:brightness(1.08);color:#fff}
.tog.fsubj .sdot{background:#fff!important;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.tog.fsubj[aria-pressed="true"]{transform:translateY(1px);background:color-mix(in srgb,var(--sc,var(--accent)),#000 24%);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.48),0 0 0 1px color-mix(in srgb,var(--sc,var(--accent)),#000 38%)}
.tog.fsubj[aria-pressed="true"]::before{content:"✓";font-weight:700;margin-right:1px}
.tog.fsubj .del{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:4px;margin-right:-3px;font-weight:700;line-height:0;padding:0;flex:none}
.tog.fsubj .del .vp-x-ico{width:8.5px;height:8.5px}
.tog.fsubj .del:hover{background:rgba(0,0,0,.35);color:#fff}
.tog.fsubj.marker-glow{box-shadow:0 3px 0 color-mix(in srgb,var(--green),#000 38%),0 0 12px rgba(63,185,80,.55)}
.tog.fsubj.marker-glow[aria-pressed="true"]{box-shadow:inset 0 2px 5px rgba(0,0,0,.48),0 0 14px rgba(63,185,80,.7)}
.tog.zoom-lock[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--green-ink);font-weight:600;box-shadow:inset 0 1px 4px rgba(0,0,0,.35)}
.tog.zoom-lock[aria-pressed="true"]::before{content:"✓ ";font-weight:700}
.view.min .orbitcv > :not(.vtag),.view.min .orbitside{display:none!important}
.view.min > .orbitcv{display:block!important}
@media (max-width:820px){#pOrbit:has(#orbitSide > *){grid-template-columns:1fr}.orbitside{border-left:0;border-top:1px solid var(--edge);max-height:360px}.focus-split{grid-template-columns:1fr}.focus-left,.focus-left > .focusimg{width:100%;min-width:0;max-width:100%;height:auto;aspect-ratio:4 / 3}}
/* image mode: same fixed workspace as video (center stays, sides scroll) */
@media (min-width:1251px){
  body:not(.video){overflow:hidden;height:100dvh;padding-bottom:0}
  body:not(.video) .nav{margin-bottom:10px}
  body:not(.video) .grid{height:calc(100dvh - var(--navh,82px) - 26px);align-items:stretch;max-width:none;grid-template-columns:330px minmax(0,1fr) 395px;gap:10px}
  body:not(.video) #iLeft,body:not(.video) #iRight{overflow-y:auto;overflow-x:hidden;min-height:0;padding:0 6px 0 2px}
  body:not(.video) #iLeft > .dropzone:first-child,body:not(.video) #iRight > .dropzone:first-child{height:16px}
  body:not(.dragging-tab) .dock > .dropzone:last-child{height:0}
  body:not(.video) #iCenter{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding-top:6px}
  body:not(.video) #pOrbit:not(.min){flex:none;height:500px;min-height:500px;max-height:500px}
  body:not(.video) #pOrbit .orbitcv,body:not(.video) #pOrbit #globe{height:100%!important;min-height:240px}
  body:not(.video) #pOrbit .orbitside{height:100%;max-height:100%}
  body:not(.video) #pairViews{flex:0 0 calc(100% - 510px);height:calc(100% - 510px);max-height:calc(100% - 510px);min-height:0}
  body:not(.video) #pairViews .view{height:100%}
  body:not(.video) #pairViews canvas{height:100%;min-height:200px}
  body:not(.video) #keys .tog{padding:3.5px 8px}
  body:not(.video) #pOutput:not(.min) > .cbody,
  body:not(.video) #pPresets:not(.min) > .cbody,
  body:not(.video) #pAnimPresets:not(.min) > .cbody,
  body.video #pOutput:not(.min) > .cbody,
  body.video #pPresets:not(.min) > .cbody,
  body.video #pAnimPresets:not(.min) > .cbody{
    display:flex;flex-direction:column;
    gap:8px;padding-top:16px;padding-bottom:12px;
    height:var(--out-box-h,436px);min-height:var(--out-box-h,436px);max-height:var(--out-box-h,436px);
    box-sizing:border-box;overflow:hidden;
  }
  #pOutput:not(.min) > .cbody > .field{flex:0 0 auto}
  #pOutput:not(.min) > .cbody > .field:has(> #keys){
    flex:1 1 0;min-height:78px;display:flex;flex-direction:column;overflow:hidden;
  }
  #pOutput:not(.min) > .cbody #keys{
    flex:1 1 0;min-height:60px;max-height:none;overflow-y:auto;
  }
  #pOutput:not(.min) > .cbody .addbtn{margin-top:4px}
  body:not(.video) #pPrompt > .cbody,body.video #pPrompt > .cbody{gap:8px;padding-top:16px;padding-bottom:12px}
  body:not(.video) #pPrompt .btn,body.video #pPrompt .btn{padding:8px 10px}
  body:not(.video) #extra,body.video #extra{min-height:42px;height:42px}
}
/* Presets card & Animation presets card (tabbed alongside Output) */
#pPresets .cbody,#pAnimPresets .cbody{gap:9px;padding-top:20px;display:flex;flex-direction:column}
#imgPresetWrap,#vidPresetWrap{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 0;min-height:0}
.plist{display:flex;flex-direction:column;gap:8px;flex:1 1 0;min-height:0;max-height:295px;overflow-y:auto;padding-right:4px}
.pgroup{display:flex;flex-direction:column;gap:6px;flex:none}
.pgroup.min > .pgrid{display:none}
.psep-btn{display:flex;align-items:center;justify-content:space-between;width:100%;background:#3a3d42;border:1px solid #555960;border-radius:6px;padding:6px 10px;font-family:var(--f-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#f0eee9;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:background .15s,border-color .15s,color .15s}
:root[data-mode="day"] .psep-btn{background:#cbc6bc;border-color:#9e988e;color:#1a1a1a}
.psep-btn:hover{background:#454950;border-color:#727780;color:#fff}
:root[data-mode="day"] .psep-btn:hover{background:#beb8ad;border-color:#7a746b;color:#000}
.psep-arr{font-style:normal;font-size:11px;color:#d0d4dc;line-height:1}
:root[data-mode="day"] .psep-arr{color:#333}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;grid-auto-rows:max-content}
.pitem-wrap{grid-column:1 / -1;display:flex;align-items:center;gap:5px}
.pitem{width:100%;min-height:34px;display:flex;align-items:center;text-align:left;padding:7px 10px;line-height:1.25;border-radius:6px;border:1px solid var(--line);background:var(--panel-2);color:var(--fg);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .12s,background .12s,color .12s}
.pitem:hover{border-color:var(--accent);color:var(--fg)}
.pitem[aria-pressed="true"]{background:var(--accent-glow);border-color:var(--accent);color:var(--accent);font-weight:600;box-shadow:inset 0 0 0 1px var(--accent)}
.pitem-wrap .pitem{flex:1 1 auto;min-width:0}
.pdel{flex:none;width:34px;height:34px;padding:0;border-radius:6px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);font-size:12px;line-height:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.pdel:hover{border-color:var(--ax-x);color:var(--ax-x)}
.psep{grid-column:1 / -1;font-family:var(--f-mono);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:4px 2px 1px}
.psave{display:flex;gap:6px;align-items:center;padding-top:6px;border-top:1px solid var(--line)}
.psave input[type=text]{flex:1 1 auto;min-width:0;padding:6px 9px;font-size:12px}
.psave .btn.sm{flex:none;padding:6px 10px;font-size:11.5px}
#vpFrame{overflow:hidden}
/* 3D Focus toggles & Focus Subject buttons inside #pViewport .vpside */
.vf-toggles{
  display:flex;flex-direction:column;gap:6px;
  padding:7px 9px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel-2);flex:none;
}
.vf-toggles .swrow{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;min-height:22px;font-size:12px;font-weight:600;color:var(--fg);
}
.vf-toggles .swrow + .swrow{
  padding-top:6px;border-top:1px solid var(--line);
}
.vf-sw-lbl{
  display:inline-flex;align-items:center;gap:6px;line-height:1.2;white-space:nowrap;
}
.vf-gdot{
  width:9px;height:9px;border-radius:50%;border:2px solid #3fb950;
  box-shadow:0 0 4px var(--green-glow);flex:none;display:inline-block;box-sizing:border-box;
}
.vfsubj-list{max-height:84px;overflow-y:auto;padding:3px 2px 4px 1px}
/* Video & 3D: Orbit, Top View, Side View buttons inside the three boxes below the camera view */
body.video #vThree .view .vtag{
  display:inline-flex;align-items:center;justify-content:center;
  width:88px;height:25px;padding:0 8px;border-radius:6px;
  background:#4a4d54;border:1px solid #636770;color:#f0eee9;
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;box-shadow:0 2px 5px rgba(0,0,0,.28);
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
:root[data-mode="day"] body.video #vThree .view .vtag{background:#8a8e96;border-color:#6e727a;color:#fff}
body.video #vThree .view .vtag::after{display:none!important}
body.video #vThree .view .vtag:hover{background:#575b63;border-color:#7d828d;color:#fff}
body.video #vThree .view .vtag[aria-pressed="true"]{
  background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important;
  box-shadow:0 0 10px var(--accent-glow);
}
/* Subject Detail drawer opened by the orange Subject Detail button (#tlSubjDetailBtn) in the bar below the timeline */
.tl-subj-detail{
  border-top:1px solid var(--edge);padding:7px 14px 9px;
  display:flex;flex-direction:column;gap:5px;background:var(--panel-2);box-sizing:border-box;
}
.tl-subj-detail[hidden]{display:none!important}
.tl-subj-detail .tl-subj-toprow{flex:none}
.tl-subj-detail .tl-subj-chips{gap:6px;padding:2px 2px 3px;flex:none;max-height:32px;overflow-y:auto}
.tl-subj-detail #tlSubjDetailEdit{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:4px}
.tl-subj-detail .tl-subj-edit-head{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;flex:none}
.tl-subj-detail #tlSubjDetailSave{width:auto;flex:none;margin:0;padding:4px 14px;font-size:11.5px;height:24px;min-height:24px}
.tl-subj-detail textarea{flex:1 1 auto;min-height:42px;height:100%;font-size:12px;width:100%;box-sizing:border-box}
/* Slide-up bottom editing bar for grouping & double-clicking 3D objects/groups (Rename -> Subject Detail -> Save) */
.obj-edit-bar{
  position:fixed;left:50%;bottom:0;transform:translate(-50%,106%);
  width:min(540px,calc(100% - 32px));z-index:2200;
  background:var(--panel);border:1px solid var(--edge);border-top:3px solid var(--accent);
  border-radius:12px 12px 0 0;box-shadow:0 -12px 36px var(--shadow);
  padding:12px 16px 14px;display:flex;flex-direction:column;gap:9px;
  transition:transform .25s cubic-bezier(.22,.9,.3,1),visibility .25s;
  pointer-events:none;visibility:hidden;
}
.obj-edit-bar.open{transform:translate(-50%,0);pointer-events:auto;visibility:visible}
.obj-edit-bar .oeb-close{width:22px;height:22px;border-radius:5px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:0;padding:0;flex:none;margin-left:auto}
.obj-edit-bar .oeb-close:hover{border-color:var(--accent);color:var(--accent)}
.obj-edit-bar textarea{min-height:52px;height:52px;font-size:12px}
.obj-edit-bar #objEditSave{width:100%;padding:8px 14px;font-size:12px}
/* Top-Middle AI Model selector & Extension Bridge controls */
.aimodelm{
  position:relative;margin:0 auto;display:inline-flex;align-items:center;gap:6px;
  --ai-c:var(--accent);
}
@media (min-width:1180px){
  .aimodelm{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:12;
  }
}
.aimodelm[data-active-model="visionpilot"]{--ai-c:#e85d2b}
.aimodelm[data-active-model="claude"]{--ai-c:#d97757}
.aimodelm[data-active-model="gpt"]{--ai-c:#10a37f}
.aimodelm[data-active-model="gemini"]{--ai-c:#4285f4}
.aimodelm::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
.aimodel-btn{
  --ai-c:var(--accent);
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  border:1.5px solid var(--ai-c);border-radius:7px;
  background:color-mix(in srgb,var(--ai-c) 16%,transparent);
  color:var(--fg);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.03em;
  text-transform:none;cursor:pointer;transition:all .2s ease;
}
.aimodel-btn[data-active-model="visionpilot"]{--ai-c:#e85d2b}
.aimodel-btn[data-active-model="claude"]{--ai-c:#d97757}
.aimodel-btn[data-active-model="gpt"]{--ai-c:#10a37f}
.aimodel-btn[data-active-model="gemini"]{--ai-c:#4285f4}
.aimodel-btn:hover{border-color:var(--ai-c);background:color-mix(in srgb,var(--ai-c) 25%,transparent);color:var(--fg)}
.aimodel-btn .ai-lbl{color:var(--fg-2);font-weight:500}
.aimodel-btn b{color:var(--ai-c);font-weight:700}
.aimodel-btn .ai-caret{font-size:10px;color:var(--ai-c);margin-left:2px}
.aimodel-btn .ai-dot{
  width:8px;height:8px;border-radius:50%;background:var(--ai-c);
  box-shadow:0 0 6px var(--ai-c);flex:none;
}
.aiext-topbtn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 10px;
  border:1px dashed var(--line);border-radius:7px;background:var(--panel-2);
  font-family:var(--f-mono);font-size:11px;text-transform:none;letter-spacing:.02em;
}
.aiext-topbtn .ext-dot{
  width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none;
}
.aiext-topbtn.connected{
  border-style:solid;border-color:var(--green);color:var(--green);background:var(--green-glow);
}
.aiext-topbtn.connected .ext-dot{
  background:var(--green);box-shadow:0 0 5px var(--green);
}
.aimodel-menu{
  position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 6px);
  z-index:1800;min-width:340px;background:var(--panel);border:1px solid var(--edge);
  border-radius:10px;box-shadow:0 16px 40px var(--shadow);padding:7px;
  display:none;flex-direction:column;gap:4px;
}
.aimodelm.open .aimodel-menu{display:flex}
.aimodel-head{
  font-family:var(--f-mono);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);padding:4px 8px 3px;
}
.aimodel-opt{
  display:flex;flex-direction:column;align-items:stretch;gap:3px;
  text-align:left;background:transparent;border:1px solid transparent;
  border-radius:7px;padding:8px 10px;cursor:pointer;color:var(--fg);
  transition:background .15s,border-color .15s;
}
.aimodel-opt:hover{background:var(--panel-2);border-color:var(--line)}
.aimodel-opt[aria-checked="true"]{
  background:var(--accent-glow);border-color:var(--accent);
}
.aimodel-opt .opt-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.aimodel-opt .opt-name{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px}
.aimodel-opt[aria-checked="true"] .opt-name::after{
  content:"✓";color:var(--accent);font-weight:800;margin-left:4px;
}
.aimodel-opt .m-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.aimodel-opt .m-dot.vp{background:var(--accent)}
.aimodel-opt .m-dot.claude{background:#d97757}
.aimodel-opt .m-dot.gpt{background:#10a37f}
.aimodel-opt .m-dot.gemini{background:#4285f4}
.aimodel-opt .opt-badge{
  font-family:var(--f-mono);font-size:9.5px;font-weight:600;padding:1.5px 6px;
  border-radius:99px;border:1px solid var(--line);color:var(--muted);
}
.aimodel-opt[aria-checked="true"] .opt-badge{border-color:var(--accent);color:var(--accent)}
.aimodel-opt small{font-size:11px;color:var(--muted);line-height:1.35}
.aimodel-extbar{
  margin-top:4px;padding-top:7px;border-top:1px solid var(--line);
}
.ext-status-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 6px;
}
.ext-st-lbl{
  display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;
  text-align:left;font-family:var(--f-mono);font-size:11.5px;font-weight:700;line-height:1.25;
}
.ext-st-lbl .ext-l1,
.ext-st-lbl .ext-l2{
  display:block;text-align:left;white-space:nowrap;
  background:linear-gradient(100deg,var(--green) 0 38%,#b7f0c4 50%,var(--green) 62% 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:vp-shine 2.8s linear infinite;
}
.ext-status-row .ext-dl-btn{
  width:auto;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:6px 12px;border-radius:6px;flex:none;
}
.ext-dl-btn .ext-dl-ico{
  width:23px;height:25px;flex:none;display:block;
}
.ext-dl-btn .ext-dl-txt{
  display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;
  text-align:left;font-family:var(--f-mono);font-size:10.5px;font-weight:700;
  line-height:1.18;letter-spacing:.04em;text-transform:uppercase;
}
.ext-dl-btn .ext-dl-txt span{
  display:block;white-space:nowrap;
}
.aiext-card{width:min(460px,100%)!important}
.aiext-body{display:flex;flex-direction:column;gap:12px}
.aiext-lead{margin:0;font-size:13px;color:var(--fg);line-height:1.45}
.aiext-steps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--fg-2);line-height:1.45}
.aiext-steps code{font-family:var(--f-mono);font-size:11.5px;background:var(--panel-2);padding:1px 5px;border-radius:4px;border:1px solid var(--line);color:var(--accent)}
.aiext-actions{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.ai-live-pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 9px;margin-top:4px;
  border-radius:6px;border:1px solid var(--aic,var(--green));
  background:color-mix(in srgb,var(--aic,var(--green)) 12%,transparent);
  color:var(--fg);font-family:var(--f-mono);font-size:10.5px;line-height:1.35;
}
.ai-live-pill i{
  width:7px;height:7px;border-radius:50%;background:var(--aic,var(--green));
  box-shadow:0 0 6px var(--aic,var(--green));flex:none;
}
.ai-live-pill b{color:var(--aic,var(--green));font-weight:700}
.ai-live-pill.vp{--aic:var(--accent)}
.ai-focus-tag{
  display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:1.5px 7px;
  border-radius:99px;border:1px solid var(--aic,var(--green));
  background:color-mix(in srgb,var(--aic,var(--green)) 14%,transparent);
  color:var(--aic,var(--green));font-family:var(--f-mono);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}
.ai-focus-tag .ai-tag-spin{
  width:11px;height:11px;border-width:2px;
  border-color:var(--line);border-top-color:var(--accent);
}

/* PART 2 & PART 3: Split Generate Prompt / Generate Image buttons & Image Model Chooser */
.gen-split-row{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;
}
.gen-split-row > .btn{
  width:100%;justify-content:center;padding:10px 8px;font-size:12px;white-space:nowrap;min-height:38px;
}
.gen-half-right{
  background:var(--green)!important;color:var(--green-ink)!important;border-color:var(--green)!important;
}
.gen-half-right:hover{
  filter:brightness(1.08);
}
.gen-half-right.busy{
  background:color-mix(in srgb,var(--green) 42%,var(--panel))!important;
  border-color:color-mix(in srgb,var(--green) 52%,var(--line))!important;
  color:#fff!important;
  opacity:.72;
  pointer-events:none;
  cursor:wait;
}
.gen-half-right.busy .spin{
  width:15px;height:15px;border-width:2.2px;
  border-color:rgba(255,255,255,.32);border-top-color:#ffffff;
}
/* Dimmed & untouchable state inside Image Detection & Focus (#pFocus) while Focus point detail is loading — matches .off .dim */
#pFocus.focus-loading > .cbody > .dim{
  opacity:.4!important;
  pointer-events:none!important;
  user-select:none!important;
}
#pFocus.focus-loading > .cbody > .dim *{
  pointer-events:none!important;
  user-select:none!important;
}
#pFocus.focus-loading .focusimg img{
  cursor:default!important;
}
/* Dimmed & untouchable state for Reference (#pRef) and Image Detection & Focus (#pFocus) while generating an image — keeps orange header pill with outline while inside stays dark (.off .dim) */
body.img-gen-busy #pRef,
body.img-gen-busy #pFocus,
#pRef.gen-locked,
#pFocus.gen-locked{
  pointer-events:none!important;
  user-select:none!important;
}
body.img-gen-busy #pRef *,
body.img-gen-busy #pFocus *,
#pRef.gen-locked *,
#pFocus.gen-locked *{
  pointer-events:none!important;
  user-select:none!important;
}
body.img-gen-busy #pRef > .cbody,
body.img-gen-busy #pFocus > .cbody > .dim,
body.img-gen-busy #pFocus #focusTabs,
body.img-gen-busy #pFocus #focusMarkWrap,
body.img-gen-busy #pFocus #focusMultiReset,
#pRef.gen-locked > .cbody,
#pFocus.gen-locked > .cbody > .dim,
#pFocus.gen-locked #focusTabs,
#pFocus.gen-locked #focusMarkWrap,
#pFocus.gen-locked #focusMultiReset{
  opacity:.4!important;
  pointer-events:none!important;
  transition:opacity .2s ease;
}
body.img-gen-busy #pFocus .focus-shead-right .focus-pill,
#pFocus.gen-locked .focus-shead-right .focus-pill{
  box-shadow:none!important;
  pointer-events:none!important;
  user-select:none!important;
}
body.img-gen-busy #pFocus .focus-shead-right .focus-pill .vf-sw-lbl,
#pFocus.gen-locked .focus-shead-right .focus-pill .vf-sw-lbl{
  color:#fff!important;
  font-weight:700!important;
}
.gen-img-model-bar{
  background:var(--panel-2);border:1px solid var(--accent);border-radius:9px;
  padding:8px 10px;display:flex;flex-direction:column;justify-content:flex-start;gap:7px;
  box-shadow:0 6px 18px var(--shadow);overflow-y:auto;box-sizing:border-box;
}
.gen-img-model-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.gen-img-model-head .lbl{
  font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);
}
.gen-img-model-close{
  background:transparent;border:1px solid var(--line);border-radius:5px;
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--muted);font-size:14px;line-height:0;padding:0;flex:none;margin-left:auto;
}
.gen-img-model-close:hover{border-color:var(--accent);color:var(--accent)}
.gen-img-model-opts{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;
}
@media (max-width:460px){.gen-img-model-opts{grid-template-columns:1fr}}
.gen-img-model-opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  text-align:left;padding:9px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel);color:var(--fg);
  cursor:pointer;transition:border-color .18s,background .18s,transform .12s;
}
.gen-img-model-opt:hover{
  border-color:var(--accent);background:var(--accent-glow);transform:translateY(-1px);
}
.gen-img-model-opt .gim-top{
  display:flex;align-items:center;gap:6px;width:100%;
}
.gen-img-model-opt .m-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
}
.gen-img-model-opt .m-dot.gemini{background:#4285f4;box-shadow:0 0 6px #4285f4}
.gen-img-model-opt .m-dot.gpt{background:#10a37f;box-shadow:0 0 6px #10a37f}
.gen-img-model-opt b{font-size:12.5px;font-weight:700;color:var(--fg)}
.gen-img-model-opt .gim-tag{
  margin-left:auto;font-family:var(--f-mono);font-size:9.5px;font-weight:600;
  padding:1px 6px;border-radius:99px;border:1px solid var(--line);color:var(--muted);
}
.gen-img-model-opt small{
  font-size:10.5px;color:var(--muted);line-height:1.3;
}

/* PART 5: Centered Result Window for Generated Image / Upscaled Image / Upscaled Video */
.genimg-result-card{
  width:var(--res-card-w,580px)!important;max-width:94vw!important;max-height:92vh;display:flex;flex-direction:column;
}
.genimg-result-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px 0;flex:none;
}
.genimg-result-title-wrap{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.genimg-tag{
  position:static!important;cursor:default;
}
.genimg-tag.is-upscale{
  background:var(--green)!important;color:#fff!important;
}
.genimg-model-pill{
  font-family:var(--f-mono);font-size:10.5px;font-weight:700;color:var(--fg-2);
  padding:2px 9px;border-radius:99px;border:1px solid var(--line);background:var(--panel-2);
}
.genimg-close-x{
  width:30px;height:30px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--fg);font-size:19px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:0;cursor:pointer;padding:0;flex:none;margin-left:auto;
}
.genimg-close-x .vp-x-ico{width:12px;height:12px}
.genimg-close-x:hover{
  background:var(--ax-x);border-color:var(--ax-x);color:#fff;
}
.genimg-result-body{
  padding:12px 16px 16px!important;display:flex;flex-direction:column;gap:11px;overflow-y:auto;
}
.genimg-preview-box{
  position:relative;width:100%;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto;line-height:0;
}
.genimg-preview-box > img,
.genimg-preview-box > video{
  width:100%;height:auto;max-height:64vh;object-fit:contain;display:block;
}
/* Draggable Comparison Slider for Upscaled Image & Upscaled Video */
.res-compare-wrap{
  position:relative;width:100%;height:auto;display:block;user-select:none;touch-action:none;
  line-height:0;overflow:hidden;
}
.res-compare-img{
  display:block;width:100%;height:auto;max-height:64vh;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.res-compare-orig-clip{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  clip-path:inset(0 50% 0 0);
}
.res-compare-orig-clip .res-compare-orig{
  width:100%;height:100%;object-fit:contain;
}
.res-compare-handle{
  position:absolute;top:0;bottom:0;left:50%;width:32px;margin-left:-16px;
  cursor:ew-resize;z-index:6;display:flex;align-items:center;justify-content:center;
}
.res-compare-line{
  position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;
  background:#ffffff;box-shadow:0 0 6px rgba(0,0,0,.75);
}
.res-compare-knob{
  position:relative;width:30px;height:30px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;color:#fff;
  display:grid;place-items:center;font-family:var(--f-mono);font-size:10px;font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.55);
}
/* Top-left Original / Upscaled switch pills */
.res-compare-top-left{
  position:absolute;top:10px;left:10px;z-index:8;
  display:inline-flex;align-items:center;gap:6px;
}
.res-view-pill{
  font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.28);
  background:rgba(18,18,22,.78);color:#e8e4df;cursor:pointer;line-height:1.2;
  backdrop-filter:blur(4px);transition:background .15s,border-color .15s,color .15s;
}
.res-view-pill:hover{
  border-color:var(--accent);color:#fff;
}
.res-view-pill.active{
  background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
/* Top-right Hold Original toggle button */
.res-hold-orig-btn{
  position:absolute;top:10px;right:10px;z-index:8;
  font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.28);
  background:rgba(18,18,22,.78);color:#e8e4df;cursor:pointer;line-height:1.2;
  backdrop-filter:blur(4px);user-select:none;transition:background .12s,border-color .12s,color .12s;
}
.res-hold-orig-btn:hover{
  border-color:var(--accent);color:#fff;
}
.res-hold-orig-btn.holding{
  background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;
}
/* Video still-frame thumbnails row */
.res-video-thumbs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:7px;width:100%;flex:none;
}
.res-vthumb-btn{
  position:relative;aspect-ratio:16 / 9;border-radius:6px;overflow:hidden;
  border:1.5px solid var(--line);background:var(--bg-2);padding:0;cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.res-vthumb-btn img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.res-vthumb-btn span{
  position:absolute;right:4px;bottom:3px;font-family:var(--f-mono);font-size:9px;font-weight:700;
  padding:1px 4px;border-radius:3px;background:rgba(0,0,0,.72);color:#fff;line-height:1.1;
}
.res-vthumb-btn.active{
  border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent);
}
.res-prompt-wrap{
  display:flex;flex-direction:column;gap:5px;width:100%;flex:none;
}
.genimg-result-actions{
  display:flex;flex-direction:column;gap:8px;width:100%;flex:none;
}
.genimg-dl-btn{
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  width:100%;height:40px;min-height:40px;padding:0 14px;font-size:12.5px;text-align:center;box-sizing:border-box;
}
.genimg-upscale-row{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;
}
.genimg-upscale-row > .btn{
  width:100%;height:40px;min-height:40px;padding:0 10px;font-size:11.5px;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;
}
.genwin-up-2x{
  background:var(--green)!important;border:1px solid var(--green)!important;color:#fff!important;
}
.genwin-up-2x:hover:not(:disabled){
  filter:brightness(1.08);
}
.genwin-up-4x{
  background:linear-gradient(100deg,var(--accent) 0 38%,#ffb088 50%,var(--accent) 62% 100%)!important;
  background-size:260% 100%!important;
  border:1px solid var(--accent)!important;color:#fff!important;
  animation:vp-shine 2.8s linear infinite!important;
}
.genwin-up-4x:hover:not(:disabled){
  filter:brightness(1.06);
}
/* Dark ash box with light ash text for disabled scale buttons in Normal mode or locked states */
.upscale-disabled,
.genwin-up-4x.upscale-disabled,
.genwin-up-2x.upscale-disabled,
.upscale-btn-2x.upscale-disabled,
.upscale-btn-4x.upscale-disabled,
body:not(.adv):not(.pro) #genWinUpscale4xBtn,
body:not(.adv):not(.pro) #imgUpscale4xBtn,
body:not(.adv):not(.pro) #vidUpscale4kBtn{
  background:#26282e!important;
  background-image:none!important;
  border:1px solid #3c3f47!important;
  color:#9a9da6!important;
  box-shadow:none!important;
  animation:none!important;
  cursor:not-allowed!important;
  opacity:1!important;
}
:root[data-mode="day"] .upscale-disabled,
:root[data-mode="day"] body:not(.adv):not(.pro) #genWinUpscale4xBtn,
:root[data-mode="day"] body:not(.adv):not(.pro) #imgUpscale4xBtn,
:root[data-mode="day"] body:not(.adv):not(.pro) #vidUpscale4kBtn{
  background:#34373f!important;
  background-image:none!important;
  border-color:#4b4f5a!important;
  color:#d0d3da!important;
}

/* PART 3 & PART 5: Green Upscale Tab & Upscaler Boxes (#pImgUpscale and #pVidUpscale) */
.tab.tab-upscale{
  background:var(--panel);
  color:var(--green);
  border:1px solid var(--green);
}
.tab.tab-upscale[aria-selected="true"]{
  background:var(--green);
  color:#ffffff;
  border-color:var(--green);
}
.tag.tag-upscale{
  background:var(--green);
  color:#ffffff;
}
#pImgUpscale,
#pBgRemove,
#pVidUpscale{
  box-sizing:border-box;
  overflow:hidden;
}
.tgroup.collapsed > #pImgUpscale,
.tgroup.collapsed > #pBgRemove,
.tgroup.collapsed > #pVidUpscale,
#pImgUpscale.min,
#pBgRemove.min,
#pVidUpscale.min{
  height:auto!important;
  min-height:30px!important;
  max-height:none!important;
}
.tgroup.collapsed .upscaler-cbody,
.card.min .upscaler-cbody{
  display:none!important;
}
.upscaler-cbody{
  height:100%;
  box-sizing:border-box;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.upscale-dropzone{
  position:relative;
  min-height:112px;
  flex:1 1 auto;
  border:1.5px dashed var(--line);
  border-radius:9px;
  background:var(--panel-2);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .18s,background .18s;
}
.img-upscale-dropzone{
  height:112px;
  min-height:112px;
  max-height:112px;
  flex:0 0 112px;
}
.vid-upscale-dropzone{
  height:164px;
  min-height:152px;
  max-height:172px;
  flex:1 1 164px;
}
.upscale-dropzone:hover,
.upscale-dropzone.over{
  border-color:var(--green);
  background:var(--green-glow);
}
.upscale-dropzone > img,
.upscale-dropzone > canvas{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  flex:0 0 auto;
  object-fit:contain;
  border-radius:4px;
}
.upscale-dropzone > img[data-fit="width"],
.upscale-dropzone > canvas[data-fit="width"]{
  width:100%;
  height:auto;
  max-width:100%;
  max-height:100%;
}
.upscale-dropzone > img[data-fit="height"],
.upscale-dropzone > canvas[data-fit="height"]{
  height:100%;
  width:auto;
  max-height:100%;
  max-width:100%;
}
.upscale-folder-preview{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 12px;
  width:100%;
  height:100%;
  box-sizing:border-box;
  text-align:center;
}
.upscale-folder-preview[hidden]{
  display:none!important;
}
.upscale-folder-icon{
  width:44px;
  height:36px;
  flex:none;
  display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.32));
}
.upscale-folder-name{
  font-family:var(--f-mono);
  font-size:11.5px;
  font-weight:700;
  color:var(--fg);
  max-width:92%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.25;
}
.upscale-controls-field{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.batch-upscale-btn{
  width:100%;
  height:35px;
  min-height:35px;
  padding:0 12px;
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:var(--panel-2);
  border:1px solid var(--green);
  color:var(--green);
  border-radius:7px;
  cursor:pointer;
  transition:background .16s,color .16s,border-color .16s,box-shadow .16s;
}
.batch-upscale-btn svg{
  width:15px;
  height:15px;
  flex:none;
}
.batch-upscale-btn:hover:not(:disabled),
.batch-upscale-btn.has-folder{
  background:var(--green-glow);
  border-color:var(--green);
  color:#fff;
  box-shadow:0 0 10px var(--green-glow);
}
:root[data-mode="day"] .batch-upscale-btn:hover:not(:disabled),
:root[data-mode="day"] .batch-upscale-btn.has-folder{
  color:var(--green);
}
.upscale-drop-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:14px;
  text-align:center;
  color:var(--fg-2);
  font-family:var(--f-mono);
  font-size:11px;
}
.upscale-drop-empty svg{
  width:24px;
  height:24px;
  color:var(--green);
}
.upscale-drop-empty small{
  color:var(--muted);
  font-size:10px;
}
.upscale-meta-pill{
  position:absolute;
  left:8px;
  bottom:8px;
  background:rgba(0,0,0,.76);
  color:#fff;
  font-family:var(--f-mono);
  font-size:10px;
  font-weight:600;
  padding:2px 7px;
  border-radius:5px;
  pointer-events:none;
}
.upscale-scale-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
}
.upscale-scale-row.single-col{
  grid-template-columns:1fr;
}
.upscale-scale-row > .btn{
  width:100%;
  height:38px;
  min-height:38px;
  padding:0 12px;
  font-size:13px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.upscale-btn-2x{
  background:var(--green);
  border:1px solid var(--green);
  color:#fff;
}
.upscale-btn-2x:hover:not(:disabled):not(.upscale-disabled){
  filter:brightness(1.08);
}
.upscale-btn-4x{
  background:var(--accent);
  border:1px solid var(--accent);
  color:#fff;
}
.upscale-btn-4x:hover:not(:disabled):not(.upscale-disabled){
  background:var(--accent-hover);
  border-color:var(--accent-hover);
}
.vid-upscale-modes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  width:100%;
}
.vid-mode-btn{
  width:100%;
  text-align:center;
  justify-content:center;
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:600;
  padding:6px 8px;
}
.vid-upscale-limit-err{
  background:rgba(229,72,77,.16);
  border:1px solid var(--ax-x);
  color:#ffd6d8;
  border-radius:7px;
  padding:8px 10px;
  font-family:var(--f-mono);
  font-size:11px;
  line-height:1.4;
}
:root[data-mode="day"] .vid-upscale-limit-err{
  background:rgba(217,58,64,.14);
  color:#8a1117;
}
.vid-upscale-max-msg{
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--fg-2);
  border-radius:7px;
  padding:8px 10px;
  font-family:var(--f-mono);
  font-size:11px;
  text-align:center;
}
.upscale-warn-box{
  background:rgba(224,168,0,.14);
  border:1px solid var(--yellow);
  color:var(--fg);
  border-radius:7px;
  padding:7px 9px;
  font-size:11px;
  line-height:1.35;
}
.upscale-loading-box{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:9px 10px;
  border-radius:8px;
  border:1px solid var(--green);
  background:var(--green-glow);
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow:hidden;
}
.upscale-loading-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-width:0;
}
.upscale-loading-top > .spin{
  margin-top:4px;
  flex:0 0 12px;
}
.upscale-loading-lbl{
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:600;
  line-height:1.4;
  color:var(--fg);
  flex:1 1 0%;
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
  padding-top:1px;
}
.upscale-cancel-x{
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  border-radius:5px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--fg);
  font-size:14px;
  font-weight:700;
  line-height:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  margin-left:auto;
  cursor:pointer;
  padding:0;
  flex:0 0 22px;
  box-sizing:border-box;
}
.upscale-cancel-x .vp-x-ico{
  width:10px;
  height:10px;
}
.upscale-cancel-x:hover{
  background:var(--ax-x);
  border-color:var(--ax-x);
  color:#fff;
}
.upscale-prog-track{
  width:100%;
  height:6px;
  border-radius:99px;
  background:var(--panel);
  overflow:hidden;
  border:1px solid var(--line);
}
.upscale-prog-bar{
  height:100%;
  background:var(--green);
  border-radius:99px;
  transition:width .15s ease;
}
.upscale-err-box{
  background:rgba(229,72,77,.15);
  border:1px solid var(--ax-x);
  color:var(--fg);
  border-radius:7px;
  padding:8px 10px;
  font-family:var(--f-mono);
  font-size:11px;
  line-height:1.4;
}
#pImgUpscale.upscale-busy #imgBatchUpscaleBtn,
#pImgUpscale.upscale-busy #imgUpscaleBtnRow,
#pImgUpscale.upscale-busy #imgUpscaleDrop,
#pVidUpscale.upscale-busy #vidBatchUpscaleBtn,
#pVidUpscale.upscale-busy #vidUpscaleBtnRow,
#pVidUpscale.upscale-busy #vidUpscaleModeRow,
#pVidUpscale.upscale-busy #vidUpscaleDrop{
  pointer-events:none!important;
  opacity:.5!important;
}
#batchUpscaleDoneModal{
  z-index:2260;
}
.batch-done-card{
  width:min(460px,94vw)!important;
  max-height:88vh;
  display:flex;
  flex-direction:column;
}
.batch-done-body{
  padding:14px 16px 18px!important;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow-y:auto;
}
.batch-done-lead-box{
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 14px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--panel-2);
}
.batch-done-folder-svg{
  width:42px;
  height:34px;
  flex:none;
  display:block;
}
.batch-done-text-col{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.batch-done-msg{
  margin:0;
  font-size:13.5px;
  font-weight:600;
  color:var(--fg);
  line-height:1.42;
}
.batch-done-folder-tag{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--green);
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.batch-done-folder-view{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border-radius:9px;
  border:1px solid var(--green);
  background:var(--bg-2);
  max-height:240px;
  overflow-y:auto;
}
.batch-done-folder-view[hidden]{
  display:none!important;
}
.batch-done-folder-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
  font-family:var(--f-mono);
  font-size:10.5px;
}
.batch-done-folder-path{
  color:var(--fg);
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.batch-done-folder-count{
  color:var(--green);
  font-weight:700;
  flex:none;
}
.batch-done-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  gap:8px;
}
.batch-done-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:6px;
  border-radius:7px;
  border:1px solid var(--line);
  background:var(--panel);
  text-decoration:none;
  color:var(--fg);
  cursor:pointer;
  transition:border-color .15s,transform .12s;
}
.batch-done-item:hover{
  border-color:var(--green);
  transform:translateY(-1px);
}
.batch-done-item img{
  width:100%;
  height:62px;
  object-fit:contain;
  border-radius:4px;
  background:var(--bg-2);
  display:block;
}
.batch-done-item span{
  font-family:var(--f-mono);
  font-size:9.5px;
  color:var(--fg-2);
  width:100%;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.batch-done-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
}
.batch-done-actions > .btn{
  width:100%;
  height:38px;
  min-height:38px;
  justify-content:center;
  font-size:12.5px;
  font-weight:700;
}
.batch-open-file-btn{
  background:var(--green)!important;
  border-color:var(--green)!important;
  color:#fff!important;
}
.batch-open-file-btn:hover{
  filter:brightness(1.08);
}

/* PART 6: Three-dot Menu at far right of top menu bar & Slide-Over Drawer (User + Settings + History Library) */
.vpmorem{
  position:static;transform:none;
  display:inline-flex;align-items:center;z-index:10;
}
.vpmore-btn{
  width:34px;height:34px;padding:0;display:grid;place-items:center;
  border-radius:7px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--fg);cursor:pointer;transition:border-color .2s,color .2s,background .2s;
}
.vpmore-btn:hover,.vpmore-btn[aria-expanded="true"]{
  border-color:var(--accent);color:var(--accent);background:var(--accent-glow);
}
.vpmore-btn svg{width:18px;height:18px;display:block}
.vpmore-menu{display:none!important}

.vp-drawer-backdrop{
  position:fixed;top:var(--navh,62px);left:0;right:0;bottom:0;z-index:1975;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(1.5px);
  transition:opacity .22s ease;
}
.vp-history-drawer{
  position:fixed;top:var(--navh,62px);right:0;bottom:0;
  width:min(440px,94vw);z-index:1980;
  background:var(--panel);border-left:1px solid var(--edge);
  box-shadow:-12px 0 36px var(--shadow);
  display:flex;flex-direction:column;
  overflow-y:auto;
  transform:translateX(104%);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.vp-history-drawer.open{
  transform:translateX(0);
  pointer-events:auto;
}
.vpd-section{
  display:flex;flex-direction:column;flex:0 0 auto;
  border-bottom:1px solid var(--line);
}
.vpd-hist-sec{
  flex:1 1 auto;min-height:0;border-bottom:0;
}
.vpd-sec-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border:0;background:var(--panel-2);color:var(--fg);
  font-family:var(--f-mono);font-size:12px;font-weight:700;
  cursor:pointer;text-align:left;transition:background .2s,color .2s;
}
.vpd-sec-head:hover{
  background:color-mix(in srgb,var(--accent) 10%,var(--panel-2));
}
.vpd-user-head-left{
  display:flex;align-items:center;gap:9px;min-width:0;
}
.vpd-user-avatar{
  width:26px;height:26px;min-width:26px;border-radius:50%;
  overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.24);border:1.5px solid rgba(255,255,255,.7);
  color:#ffffff;flex:0 0 26px;box-shadow:0 1px 4px rgba(0,0,0,.28);
}
.vpd-user-avatar img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
}
.vpd-user-avatar svg{
  width:15px;height:15px;display:block;
}
.vpd-user-name{
  font-family:var(--f-body);font-size:13.5px;font-weight:700;color:var(--fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vpd-mode-badge{
  font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 8px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel);color:var(--fg-2);flex:none;
}
body.adv #vpDrawerUserHead,
body.pro #vpDrawerUserHead,
#vpDrawerUserHead.adv-active{
  background:linear-gradient(100deg,var(--green) 0 38%,#b7f0c4 50%,var(--green) 62% 100%)!important;
  background-size:260% 100%!important;
  color:var(--green-ink)!important;
  box-shadow:0 2px 0 rgba(0,0,0,.35)!important;
  animation:vp-shine 2.8s linear infinite!important;
}
body.adv #vpDrawerUserHead .vpd-user-name,
body.adv #vpDrawerUserHead .vpd-arrow,
body.pro #vpDrawerUserHead .vpd-user-name,
body.pro #vpDrawerUserHead .vpd-arrow,
#vpDrawerUserHead.adv-active .vpd-user-name,
#vpDrawerUserHead.adv-active .vpd-arrow{
  color:#ffffff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
body.adv #vpDrawerUserHead .vpd-mode-badge,
body.pro #vpDrawerUserHead .vpd-mode-badge,
#vpDrawerUserHead.adv-active .vpd-mode-badge{
  background:rgba(0,0,0,.28)!important;
  border-color:rgba(255,255,255,.5)!important;
  color:#ffffff!important;
}
.vpd-sec-title{
  font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg);
}
.vpd-arrow{
  font-size:12px;line-height:1;color:var(--muted);flex:none;
  transition:transform .2s ease;
}
.vpd-sec-head[aria-expanded="false"] .vpd-arrow{
  transform:rotate(-90deg);
}
.vpd-sec-body{
  background:var(--panel);padding:10px 14px;border-top:1px solid var(--line);
}
.vpd-authm{
  display:block!important;position:static!important;
}
.vpd-authm::after{display:none!important}
.vpd-authm .vpd-inline-menu{
  position:static!important;display:flex!important;flex-direction:column;gap:4px;
  min-width:0!important;width:100%;padding:0;border:0;box-shadow:none;background:transparent;
}
.vpd-reset-list{
  display:flex;flex-direction:column;gap:6px;
}
.vpd-reset-item{
  width:100%;text-align:left;background:var(--panel-2);border:1px solid var(--line);
  border-radius:7px;padding:8px 11px;cursor:pointer;color:var(--fg);
  display:flex;flex-direction:column;gap:2px;transition:background .15s,border-color .15s,color .15s;
}
.vpd-reset-item b{font-size:12.5px;font-weight:700}
.vpd-reset-item small{font-size:11px;color:var(--muted)}
.vpd-reset-item:hover{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.vpd-reset-item:hover small{color:inherit}
.vpd-reset-item.danger.armed{background:var(--ax-x);border-color:var(--ax-x);color:#fff}
.vph-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel-2);
}
.vph-title-group{display:flex;flex-direction:column;gap:2px}
.vph-title{
  font-family:var(--f-mono);font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
}
.vph-sub{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.vph-body{
  flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:14px;
}
.vph-empty{
  padding:28px 16px;text-align:center;color:var(--muted);font-size:12.5px;
  border:1px dashed var(--line);border-radius:10px;background:var(--panel-2);
}
.vph-entry{
  border:1px solid var(--line);border-radius:10px;background:var(--panel-2);
  padding:11px;display:flex;flex-direction:column;gap:10px;
}
.vph-entry-meta{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--f-mono);font-size:10px;color:var(--muted);
}
.vph-entry-meta b{color:var(--fg)}
.vph-imgs{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;
}
.vph-img-col{
  display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;
}
.vph-img-frame{
  width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2);cursor:pointer;
}
.vph-img-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.vph-img-lbl{
  font-family:var(--f-mono);font-size:10.5px;font-weight:700;
  color:var(--fg-2);letter-spacing:.03em;text-align:center;
}
.vph-prompt-wrap{
  display:flex;flex-direction:column;gap:6px;
}
.vph-prompt-box{
  width:100%;min-height:60px;max-height:110px;resize:vertical;
  border-radius:7px;border:1px solid var(--line);background:var(--panel);
  padding:7px 9px;font-family:var(--f-mono);font-size:11px;color:var(--fg);
  line-height:1.4;
}
.vph-prompt-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;
}
.vph-prompt-actions > .btn{
  width:100%;justify-content:center;padding:8px 10px;font-size:11.5px;
}
/* Flat solid buttons for History Delete & Delete Confirmation Modal (no 3D look) */
.vph-del-btn,
.vph-del-confirm-btn{
  background:var(--ax-x)!important;
  background-image:none!important;
  border:1px solid var(--ax-x)!important;
  color:#ffffff!important;
  font-weight:700;
  box-shadow:none!important;
  transform:none!important;
}
.vph-del-btn::before,
.vph-del-confirm-btn::before,
#vpHistDelCancelBtn::before{
  display:none!important;
}
#vpHistDelCancelBtn{
  background:#383b42!important;
  background-image:none!important;
  border:1px solid #525660!important;
  color:#f0eee9!important;
  font-weight:700;
  box-shadow:none!important;
  transform:none!important;
}
:root[data-mode="day"] #vpHistDelCancelBtn{
  background:#d2cdc4!important;
  border-color:#a59f95!important;
  color:#1a1a1a!important;
}
.vph-del-btn:hover,
.vph-del-confirm-btn:hover,
#vpHistDelCancelBtn:hover{
  filter:brightness(1.08);
  box-shadow:none!important;
  transform:none!important;
}
#vpHistDeleteModal{
  z-index:2250;
}
.vph-del-modal-card{
  width:min(410px,92vw)!important;
}
.vph-del-modal-body{
  padding:14px 16px 18px!important;display:flex;flex-direction:column;gap:14px;
}
.vph-del-lead{
  margin:0;font-size:13.5px;color:var(--fg);line-height:1.45;
}
.vph-del-never-row{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  font-family:var(--f-mono);font-size:12px;color:var(--fg-2);
  padding:7px 10px;border-radius:7px;border:1px solid var(--line);background:var(--panel-2);
}
.vph-del-never-row input[type="checkbox"]{
  width:15px;height:15px;accent-color:var(--accent);cursor:pointer;margin:0;
}
.vph-del-modal-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;
}
.vph-del-modal-actions > .btn{
  width:100%;justify-content:center;padding:9px 12px;font-size:12px;
}

/* Click / Active / Busy visual feedback for Download, 2x, 4x, 2K, 4K, History Delete/Cancel & Action Buttons (excludes #keys .tog and .tog.fsubj) */
.btn:not(:disabled):not(.upscale-disabled):active,
.btn.vp-btn-pressed:not(:disabled):not(.upscale-disabled),
.btn.busy,
#imgUpscale2xBtn:not(:disabled):not(.upscale-disabled):active,
#imgUpscale4xBtn:not(:disabled):not(.upscale-disabled):active,
#vidUpscale2kBtn:not(:disabled):not(.upscale-disabled):active,
#vidUpscale4kBtn:not(:disabled):not(.upscale-disabled):active,
#imgBatchUpscaleBtn:not(:disabled):active,
#vidBatchUpscaleBtn:not(:disabled):active,
#genImgDownloadBtn:active,
#genImgDownloadBtn.vp-btn-pressed,
#genWinUpscale2xBtn:not(:disabled):not(.upscale-disabled):active,
#genWinUpscale4xBtn:not(:disabled):not(.upscale-disabled):active,
#genWinUpscale2xBtn.vp-btn-pressed:not(:disabled):not(.upscale-disabled),
#genWinUpscale4xBtn.vp-btn-pressed:not(:disabled):not(.upscale-disabled),
.vph-del-btn:active,
.vph-del-btn.vp-btn-pressed,
#vpHistDelCancelBtn:active,
#vpHistDelCancelBtn.vp-btn-pressed,
#vpHistDelConfirmBtn:active,
#vpHistDelConfirmBtn.vp-btn-pressed{
  background:#2b2d31!important;
  background-image:none!important;
  color:#d0d4dc!important;
  border:1.5px solid #b8bec8!important;
  outline:1px solid #b8bec8!important;
  outline-offset:0px!important;
  box-shadow:none!important;
  transform:none!important;
  animation:none!important;
}
.btn.vp-btn-pressed .spin,
.btn.busy .spin,
.btn:active .spin{
  border-color:rgba(208,212,220,.28)!important;
  border-top-color:#d0d4dc!important;
}

/* 3D Object Multi-Part Color Boxes (1, 2, or 3 side-by-side color boxes, never wrapping vertically) */
.obj-color-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:6px;
  width:100%;
  align-items:center;
}
.obj-color-item{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  height:34px;
  padding:3px 6px;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--panel-2);
  box-sizing:border-box;
  cursor:pointer;
}
.obj-color-item:hover{
  border-color:var(--accent);
}
.obj-color-item input[type=color]{
  -webkit-appearance:none;
  appearance:none;
  width:22px;
  height:22px;
  min-width:22px;
  padding:0;
  border:1px solid var(--edge);
  border-radius:4px;
  background:none;
  cursor:pointer;
  flex:0 0 22px;
}
.obj-color-item input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.obj-color-item input[type=color]::-webkit-color-swatch{border:0;border-radius:3px}
.obj-color-item input[type=color]::-moz-color-swatch{border:0;border-radius:3px}
.obj-color-item span{
  font-family:var(--f-mono);
  font-size:10px;
  font-weight:600;
  color:var(--fg-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Global Drag-and-Drop Overlay Indicator */
body.vp-page-dragover::after{
  content:"Drop image or video anywhere to load & open Upscale";
  position:fixed;inset:12px;z-index:3500;
  border:2.5px dashed var(--green);border-radius:14px;
  background:rgba(15,24,18,.55);backdrop-filter:blur(2px);
  color:#ffffff;font-family:var(--f-mono);font-size:15px;font-weight:700;
  display:grid;place-items:center;pointer-events:none;
  box-shadow:inset 0 0 40px var(--green-glow);
}

/* Cinema 4D Free Camera Bar (styled like an Object Row .objrow, with toggle switch on the right) & Viewport Path Overlay */
.objrow.free-cam-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:6px;
  cursor:pointer;
  background:transparent;
  text-align:left;
  width:100%;
  box-sizing:border-box;
  user-select:none;
  color:var(--fg);
  font-size:13px;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.objrow.free-cam-row:hover{
  border-color:var(--fg-2);
}
.objrow.free-cam-row[data-cam-sel="true"],
.objrow.free-cam-row[aria-pressed="true"]{
  border-color:var(--green);
  box-shadow:inset 0 0 0 1px var(--green);
}
.objrow.free-cam-row .fc-name{
  font-weight:500;
  color:var(--fg);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.objrow.free-cam-row .fc-switch{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--muted);
  font-family:var(--f-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .16s,background .16s,color .16s;
}
.objrow.free-cam-row .fc-switch .fc-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--muted);
  transition:background .16s,box-shadow .16s;
}
.objrow.free-cam-row .fc-switch[aria-checked="true"]{
  border-color:var(--green);
  background:rgba(34,197,94,.22);
  color:#86efac;
}
.objrow.free-cam-row .fc-switch[aria-checked="true"] .fc-dot{
  background:var(--green);
  box-shadow:0 0 6px var(--green);
}
/* Context menu collider active green & hover submenu */
.ctx button.ctx-on-green{
  background:rgba(34,197,94,.22)!important;
  border:1px solid rgba(34,197,94,.55)!important;
  color:#86efac!important;
}
.ctx button.ctx-on-green:hover{
  background:rgba(34,197,94,.34)!important;
  color:#ffffff!important;
}
.ctx .ctx-sub-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
}
.ctx .ctx-sub{
  position:absolute;
  left:calc(100% + 4px);
  top:-4px;
  min-width:185px;
  max-height:260px;
  overflow-y:auto;
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:8px;
  box-shadow:0 12px 32px var(--shadow);
  padding:4px;
  display:none;
  flex-direction:column;
  gap:2px;
  z-index:4100;
}
.ctx .ctx-sub.flip-left{
  left:auto;
  right:calc(100% + 4px);
}
.ctx .ctx-sub-wrap:hover > .ctx-sub,
.ctx .ctx-sub-wrap.open > .ctx-sub{
  display:flex;
}
.ctx .ctx-sub button{
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  text-align:left;
  padding:6px 9px;
  border-radius:5px;
  border:1px solid transparent;
  background:transparent;
  color:var(--fg);
  font-size:12px;
  cursor:pointer;
}
.ctx .ctx-sub button:hover{
  background:var(--panel-2);
  border-color:var(--line);
}
.ctx .ctx-sub button.ticked{
  background:rgba(34,197,94,.22);
  border-color:rgba(34,197,94,.55);
  color:#86efac;
}
.ctx .ctx-sub .tick-box{
  width:14px;
  height:14px;
  border-radius:3px;
  border:1px solid var(--line);
  display:inline-grid;
  place-items:center;
  font-size:10px;
  font-weight:700;
  flex:none;
}
.ctx .ctx-sub button.ticked .tick-box{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
}
.vp-path-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
  display:block;
}
.vp-path-overlay.interactive{
  pointer-events:auto;
}
/* Ensure Image Detection & Focus toggle (#focusOnWrap / #focusOn) is ALWAYS clickable to turn off without waiting for detection */
#pFocus:not(.gen-locked) > .shead,
#pFocus:not(.gen-locked) #focusOnWrap,
#pFocus:not(.gen-locked) #focusOnWrap *{
  pointer-events:auto!important;
  opacity:1!important;
}

/* Bug Fix 2: When an image is dropped, Image Detection & Focus button (#focusOn) is ON, while Focus Marker controls below stay locked until enabled */
#pFocus.marker-controls-locked .fside #focusBox,
#pFocus.marker-controls-locked .fside #subList,
#pFocus.marker-controls-locked .fside #subDetailsWrap,
#pFocus.marker-controls-locked #fpCanvas{
  pointer-events:none!important;
  opacity:.46!important;
  filter:saturate(.5);
}
#pFocus.marker-controls-locked .fside #focusMarkToggleRow,
#pFocus.marker-controls-locked .fside #focusMarkToggleRow *{
  pointer-events:auto!important;
  opacity:1!important;
  filter:none!important;
}

/* Path Memory Button (#vpPathMemory) & Green Playhead Cursor when Path Memory is ON */
#vpPathMemory.path-mem-btn{
  border-color:rgba(34,197,94,.65);
  background:rgba(34,197,94,.16);
  color:#4ade80;
  font-weight:700;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease;
}
#vpPathMemory.path-mem-btn:hover{
  background:rgba(34,197,94,.28);
  border-color:#22c55e;
  color:#ecfdf5;
}
#vpPathMemory.path-mem-btn[aria-pressed="true"]{
  background:var(--green)!important;
  border-color:var(--green)!important;
  color:#052e16!important;
  box-shadow:0 0 12px rgba(34,197,94,.55);
}
body.path-memory-on .phead,
#pTimeline.path-memory-on .phead{
  border-left-color:#22c55e!important;
  filter:drop-shadow(0 0 6px rgba(34,197,94,.75));
}
body.path-memory-on .phead::before,
#pTimeline.path-memory-on .phead::before{
  background:#22c55e!important;
  box-shadow:0 0 10px rgba(34,197,94,.85);
}
body.path-memory-on .gphead,
#pTimeline.path-memory-on .gphead,
body.path-memory-on .trow .tt .ph2,
#pTimeline.path-memory-on .trow .tt .ph2{
  border-left-color:#22c55e!important;
}

/* Remove Background (#pBgRemove) Tab & Panel Next to Upscale in Image Mode */
.tab.tab-bgremove,
.tag.tag-bgremove{
  background:#0d9488!important;
  border-color:#14b8a6!important;
  color:#f0fdfa!important;
  font-weight:700!important;
}
.tab.tab-bgremove[aria-selected="true"]{
  box-shadow:0 0 10px rgba(16,185,129,.35);
}
.bgremove-controls-field{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bgremove-run-btn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-weight:700;
}
.bgremove-result-actions{
  display:flex;
  gap:8px;
}
.bgremove-result-actions .btn{
  flex:1;
}

/* ADOBE-INSPIRED LOADING SCREEN (#vpLoadingScreen) - SOLID DARK, SINGLE MAIN CONTAINER, NO GRADIENTS, NO SUB-BOXES */
.vp-loading-screen{
  position:fixed;
  inset:0;
  z-index:99999;
  background:#0c0d10;
  color:#eef0f5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  transition:opacity .42s ease,visibility .42s ease;
}
html[data-desktop-app="true"] .vp-loading-screen,
body.is-desktop-app .vp-loading-screen{
  background:transparent!important;
  pointer-events:none;
}
html[data-desktop-app="true"] .vp-loading-screen .vpl-shell,
body.is-desktop-app .vp-loading-screen .vpl-shell{
  pointer-events:auto;
}
.vp-loading-screen.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.vpl-shell{
  width:min(1040px,100%);
  background:var(--panel,#15171c);
  border:1px solid var(--edge,#323640);
  border-radius:18px;
  padding:32px;
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(380px,1.12fr);
  gap:32px;
  box-shadow:0 28px 80px rgba(0,0,0,.78);
  align-items:stretch;
}
@media (max-width:860px){
  .vpl-shell{
    grid-template-columns:1fr;
    max-height:94dvh;
    overflow-y:auto;
  }
}
.vpl-left-col{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
  min-width:0;
  padding:4px 0;
}
.vpl-logo-row{
  display:flex;
  align-items:center;
}
.vpl-logo-img{
  height:60px;
  width:auto;
  display:block;
  margin-left:-11.2px;
}
.vpl-tagline-glow{
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
  color:#f8fafc;
  text-shadow:0 0 12px rgba(232,93,43,.45);
}
.vpl-maker-row{
  margin-top:-4px;
}
.vpl-maker-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:16px;
  font-weight:700;
  color:#eef0f5;
  text-decoration:none;
  padding:2px 6px 2px 0;
  border-radius:6px;
  text-shadow:0 0 12px rgba(232,93,43,.45);
  transition:transform .18s ease,color .18s ease;
  cursor:pointer;
}
.vpl-maker-link b{
  color:var(--accent,#e85d2b);
}
.vpl-maker-link:hover{
  transform:translateX(2px);
  color:#ffffff;
}
.vpl-mouse-ico{
  width:17px;
  height:17px;
  color:var(--accent,#e85d2b);
  transition:transform .18s ease;
}
.vpl-maker-link:hover .vpl-mouse-ico{
  transform:translate(2px,-2px);
}
.vpl-desc-text{
  margin:4px 0 0;
  font-size:13.5px;
  line-height:1.62;
  color:#c9cdd6;
}
.vpl-connect-line{
  font-size:14px;
  font-weight:700;
  color:#eef0f5;
  letter-spacing:.01em;
}
.vpl-m-name{
  font-weight:800;
}
.vpl-copy-row{
  font-size:12px;
  font-weight:600;
  color:#8a8f9c;
  letter-spacing:.02em;
}
.vpl-loadbar-wrap{
  margin-top:auto;
  padding-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}
.vpl-loadbar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12.5px;
}
.vpl-loadbar-lbl{
  font-weight:700;
  color:#eef0f5;
  letter-spacing:.02em;
}
.vpl-loadbar-pct{
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:700;
  color:var(--accent,#e85d2b);
}
.vpl-loadbar-track{
  width:100%;
  height:8px;
  background:#0c0d10;
  border:1px solid var(--line,#262930);
  border-radius:999px;
  overflow:hidden;
}
.vpl-loadbar-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:var(--accent,#e85d2b);
  transition:width .22s ease;
}
.vpl-right-col{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
}
.vpl-ad-mount{
  width:100%;
}
.vp-ad-shell{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}
.vp-ad-viewport{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--edge,#323640);
  background:#111318;
  user-select:none;
}
.vp-ad-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .42s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.vp-ad-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
}
.vp-ad-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.vp-ad-controls{
  display:flex;
  align-items:center;
  justify-content:center;
}
.vp-ad-dots{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 14px;
  border-radius:999px;
  background:#111318;
  border:1px solid var(--line,#262930);
  touch-action:none;
  cursor:pointer;
}
.vp-ad-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:0;
}
.vp-ad-dot-core{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4b5262;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.vp-ad-dot:hover .vp-ad-dot-core{
  background:#9ca3af;
}
.vp-ad-dot.active .vp-ad-dot-core{
  background:var(--accent,#e85d2b);
  transform:scale(1.25);
}
.vp-ad-dot.locked .vp-ad-dot-core{
  background:var(--accent,#e85d2b);
  transform:scale(1.35);
  box-shadow:0 0 0 2px #ffffff;
}

@media (prefers-reduced-motion:reduce){.toast{transition:none}.spin{animation-duration:2s}.theme .knob{transition:none} body{transition:none}}

/* ---------- Focus panel (v19): Select Focus Point / Select Focus Subject, detail zoom row ---------- */
/* everything fits inside the Focus box: the detail text shrinks first, nothing scrolls out */
.focus-right{overflow:hidden}
.focus-right > #focusSinglePane,.focus-right > #focusMultiPane{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#focusSinglePane textarea,#focusMultiPane .fmedit{flex:1 1 auto;min-height:34px}
#focusSinglePane textarea{height:auto}
#focusMultiPane .fmedit textarea{flex:1 1 auto;height:100%;min-height:30px}
.fsel-lbl{font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex:none}
.fsel-chips{flex:none;display:flex;flex-wrap:wrap;gap:6px}
.fdet-btn.shown{outline:2px solid var(--sc,var(--green));outline-offset:1px}
.detail-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.cmfield{display:inline-flex;align-items:center;gap:6px;flex:none}
.cmfield input{width:72px}
.cmfield .unit{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.detail-row .zoom-lock{flex:none;white-space:nowrap}

/* loading screen: no glow under the tagline or under "Made by framesbyismail" (website and desktop) */
.vpl-tagline-glow,.vpl-maker-link,.vpl-maker-link b,.vpl-maker-link span,.vpl-mouse-ico{text-shadow:none!important;filter:none!important;box-shadow:none!important}
.vpl-tagline-glow::before,.vpl-tagline-glow::after,.vpl-maker-row::before,.vpl-maker-row::after,.vpl-maker-link::before,.vpl-maker-link::after{content:none!important;display:none!important}
.focus-right{gap:6px}
.focus-right > .sl{flex:none}
.focus-right > .sl .top span{font-size:12px}
.focus-right > #detailRow{flex:none;padding:5px 8px}
.focus-right > #focusSinglePane,.focus-right > #focusMultiPane{gap:4px;padding:7px 8px;overflow:hidden}
#focusSinglePane > .labrow,#focusMultiPane > .labrow{min-height:0}
#focusSinglePane > .labrow .tog{padding:3px 10px;font-size:11px}
#focusSinglePane textarea{flex:1 1 0;min-height:26px;padding:5px 8px}
#focusMultiPane .fmedit{flex:1 1 0;min-height:30px;padding-top:4px}
#focusMultiPane .fmedit textarea{min-height:24px;padding:5px 8px}

/* three-dot menu opens instantly: short slide, no blur behind it */
.vp-history-drawer{transition:transform .12s ease-out;will-change:transform;contain:layout paint}
.vp-drawer-backdrop{backdrop-filter:none!important;transition:none}
.vph-img-frame img{content-visibility:auto}

/* ---------- resizable panels (resize.js) ---------- */
.vp-rs{position:absolute;z-index:40;touch-action:none;user-select:none}
.vp-rs[hidden]{display:none}
.vp-rs-col{top:0;bottom:0;width:10px;cursor:col-resize}
.vp-rs-row{left:10px;right:10px;bottom:-5px;height:10px;cursor:row-resize}
.vp-rs::after{content:"";position:absolute;border-radius:2px;background:var(--accent);opacity:0;transition:opacity .12s}
.vp-rs-col::after{top:0;bottom:0;left:4px;width:2px}
.vp-rs-row::after{left:0;right:0;top:4px;height:2px}
.vp-rs:hover::after,.vp-rs.active::after{opacity:.85}
body.vp-resizing{cursor:row-resize;user-select:none}
body.vp-resizing *{cursor:inherit!important}
.dock .card[id],#iCenter > .view[id],#iCenter > #pairViews,#vCenter > .view[id],#vCenter > #vThree,#vCenter > #pTimeline{position:relative}
.tgroup.collapsed .vp-rs-row{display:none}
/* a panel with its own height scrolls its content: controls keep their size, text stays inside */
.card.vp-sized{display:flex;flex-direction:column;overflow:hidden}
.card.vp-sized > .cbody{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin}
.view.vp-sized{overflow:hidden}
/* the Focus box shrinks its text first; only when it is smaller still does it scroll (never cut off) */
.focus-right{overflow-y:auto;overflow-x:hidden}
/* sized panels: the body always gives way and scrolls (some panels pin their body height elsewhere) */
.card.vp-sized > .cbody{flex:1 1 0!important;min-height:0!important;height:auto!important;max-height:none!important;overflow:auto!important}
/* the Focus text box shrinks first, the panes themselves never cut their content */
.focus-right > #focusSinglePane,.focus-right > #focusMultiPane{min-height:auto;overflow:visible}
.detail-row{flex-wrap:wrap}
/* a narrow Focus panel puts the picture above the controls instead of squeezing them */
#pFocus > .cbody{container-type:inline-size;container-name:vpfocus}
@container vpfocus (max-width:440px){
  .focus-split{grid-template-columns:minmax(0,1fr)!important;height:auto!important;overflow:visible!important}
  .focus-left,.focus-left > .focusimg{width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:4 / 3}
  .focus-right{height:auto!important;overflow:visible!important}
}
#pFocus > .cbody{overflow-y:auto!important;overflow-x:hidden;min-height:0;scrollbar-width:thin}
/* wider columns: the panel frame grows, its controls keep their designed size */
@media (min-width:1251px){
  #iLeft,#vLeft{--vp-base:var(--vp-baseL,330px)}
  #iRight,#vRight{--vp-base:var(--vp-baseR,395px)}
  #iLeft .card > .cbody > *,#iRight .card > .cbody > *,#vLeft .card > .cbody > *,#vRight .card > .cbody > *{max-width:calc(var(--vp-base) - 40px)}
}
/* the Focus controls fill the whole right side of the Focus box (as in v18) */
.focus-right,#focusModeBar{max-width:none}

/* desktop app: its own splash window shows the loading box, so the page does not show a second one */
html[data-desktop-app="true"] .vp-loading-screen{display:none!important}

/* ---------- the middle column stays inside the screen (image and video mode) ---------- */
@media (min-width:1251px){
  /* 3D viewport: the picture and the Focus column share the panel's height; the Focus column scrolls instead of spilling over */
  body.video #pViewport{overflow:hidden}
  body.video #pViewport .viewer{grid-template-rows:minmax(0,1fr);overflow:hidden}
  body.video #pViewport .vpwrap{height:100%;min-height:0;overflow:hidden}
  body.video #pViewport .vpside{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
  body.video #pViewport .vpbar{flex:none;row-gap:4px;padding:6px 10px}
  body.video #pViewport .vpbar .btn{padding-top:5px;padding-bottom:5px}
  body.video #vCenter,body:not(.video) #iCenter{overflow:hidden}
}
/* a narrow timeline keeps its bottom row on one line: icon-only Graph / Reset, no "Video length" label */
#pTimeline{container-type:inline-size;container-name:vptl}
.frames #tlInfo{white-space:nowrap}
@container vptl (max-width:760px){
  .frames{gap:6px;padding-left:8px;padding-right:8px}
  .frames .fside.l .tb span,.frames .durbox label{display:none}
  .frames .fside{min-width:0}
  .frames #tlInfo{font-size:10px}
}
@container vptl (max-width:600px){ .frames #tlInfo{display:none} }
/* image mode: the Orbit box takes about half the middle column (it was a fixed 500 px), the views and Focus share the rest */
@media (min-width:1251px){
  body:not(.video) #pOrbit:not(.min){height:clamp(260px,54%,500px);min-height:0;max-height:none}
  body:not(.video) #pairViews{flex:1 1 0;height:auto;max-height:none;min-height:0}
}

/* Focus point row: "Add to Prompt" never wraps its text; in a narrow Focus panel it moves under the label */
#focusSinglePane .labrow{display:flex;align-items:center;justify-content:space-between;gap:4px 6px;flex-wrap:wrap;min-width:0}
#focusSinglePane .labrow label{white-space:nowrap}
#focusSinglePane .labrow .tog.pin{white-space:nowrap;flex:none;padding:4px 9px;margin-left:auto}