/* ───────────────────────────────────────────────
   FieldCut — Frameless / Floating — auto-push enabled
   B&W ramp · orange (#FF2E00) accent on PRIMARY ACTION + SELECTION only
   Delight (sans, words, never all-caps) + Spline Sans Mono (numbers/codes, always caps)
   Light + Dark via [data-theme=light]; dark is default.
   ─────────────────────────────────────────────── */

/* fonts — self-hosted, identical files to hdwOS, zero external requests */
@font-face{font-family:'BG';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/BasisGrotesqueMono-Regular.woff2') format('woff2'),url('fonts/BasisGrotesqueMono-Regular.ttf') format('truetype')}
@font-face{font-family:'Delight';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Delight-Regular.woff2') format('woff2'),url('Delight-Regular.otf') format('opentype')}
@font-face{font-family:'Delight';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Delight-Medium.woff2') format('woff2')}

/* ── TOKENS ── (names are fixed: inline styles + JS reference them.
   VALUES are the hdwOS design system: layered translucent greys over a
   near-black canvas, liquid glass chrome, 12px controls / 20px boxes,
   4/8 spacing, spring motion, soft diffused elevation.) */
:root{
  /* DARK (default) — hdwOS layered greys, never flat black */
  --bg:#0a0a0a;          /* canvas */
  --sf:#1c1c1c;          /* raised surface: modals, dropdowns, panels */
  --s2:#1c1c1c;          /* quiet hover surface */
  --s3:#262626;          /* active pill / kbd / chip */
  --br:rgba(255,255,255,.10);   /* hairline */
  --bh:rgba(255,255,255,.20);   /* hover / stronger line */
  --tx:#ededed;          /* primary text */
  --di:#9e9e9e;          /* secondary text */
  --mu:#6b6b6b;          /* muted labels */
  --ac:#ff2e00;          /* ACCENT — primary action + selection only */
  --ac2:#ff2e00;
  --ad:rgba(255,46,0,.14);
  --ab:rgba(255,46,0,.38);
  --ok:#4ec77a;--er:#ff6b6b;--wn:#e0a437;
  --sb-w:208px;--rb-w:212px;
  --rad:20px;--rad-sm:12px;--rad-pill:999px;
  --glass:rgba(26,26,26,.6);--glass-thick:rgba(22,22,22,.78);
  --glass-fx:blur(20px) saturate(180%);
  --hairline:rgba(255,255,255,.14);
  --sh1:0 1px 3px rgba(0,0,0,.3);
  --sh2:0 8px 28px rgba(0,0,0,.24);
  --sh3:0 18px 56px rgba(0,0,0,.36);
  --tile:0 4px 14px rgba(0,0,0,.32);
  --tile-h:0 12px 32px rgba(0,0,0,.44);
  --glow:0 6px 18px rgba(255,46,0,.22);
  --hair:inset 0 1px 0 rgba(255,255,255,.04);
  --ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --dur:.2s;--dur-slow:.32s;
}
[data-theme=light]{
  --bg:#f4f4f4;          /* hdwOS light canvas */
  --sf:#fdfdfd;          /* cards float via shadow */
  --s2:#f7f7f7;          /* quiet hover surface */
  --s3:#ebebeb;          /* active pill / kbd / chip */
  --br:rgba(0,0,0,.10);  /* hairline */
  --bh:rgba(0,0,0,.20);  /* hover / stronger line */
  --tx:#1c1c1c;          /* primary text */
  --di:#5f5f5f;          /* secondary text */
  --mu:#9c9c9c;          /* muted labels */
  --ad:rgba(255,46,0,.10);
  --ab:rgba(255,46,0,.30);
  --ok:#178a42;--er:#d62b2b;--wn:#b06f00;
  --glass:rgba(255,255,255,.6);--glass-thick:rgba(255,255,255,.8);
  --hairline:rgba(0,0,0,.08);
  --sh1:0 1px 3px rgba(0,0,0,.06);
  --sh2:0 8px 28px rgba(0,0,0,.08);
  --sh3:0 18px 56px rgba(0,0,0,.14);
  --tile:0 4px 14px rgba(0,0,0,.08);
  --tile-h:0 12px 32px rgba(0,0,0,.14);
  --hair:inset 0 1px 0 rgba(255,255,255,.6);
}

*{box-sizing:border-box;margin:0;padding:0}
*:focus{outline:none}
*:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
html,body{height:100%;overflow:hidden}
html{min-width:760px}
body{font-family:'Delight',system-ui,sans-serif;background:var(--bg);color:var(--tx);letter-spacing:.01em;font-size:13px;transition:background .18s,color .18s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
input,textarea,button{font-family:'Delight',system-ui,sans-serif}
input,textarea{text-transform:none;letter-spacing:normal}
::selection{background:var(--ab);color:#fff}

/* ── BUTTONS ── (hdwOS: 12px controls, press = scale .96, spring feel) */
/* primary action = the one filled orange control */
.ba{background:var(--ac);border:none;color:#fff;font-size:13px;letter-spacing:.01em;padding:10px 22px;cursor:pointer;white-space:nowrap;border-radius:var(--rad-sm);transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);box-shadow:var(--glow)}
.ba:hover{filter:brightness(1.06)}
.ba:active{transform:scale(.96)}
.ba:disabled{opacity:.34;cursor:not-allowed;filter:none;box-shadow:none}
/* secondary = quiet bordered surface */
.bg{background:var(--s2);border:1px solid var(--br);color:var(--di);font-size:13px;letter-spacing:.01em;padding:9px 16px;cursor:pointer;white-space:nowrap;border-radius:var(--rad-sm);transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.bg:hover{background:var(--s3);color:var(--tx)}
.bg:active{transform:scale(.96)}
/* toggle chips — pills, hdwOS chip language */
.bs{background:transparent;border:none;color:var(--di);font-size:12.5px;padding:7px 15px;cursor:pointer;white-space:nowrap;flex-shrink:0;border-radius:var(--rad-pill);transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.bs:hover{color:var(--tx);background:var(--s2)}
.bs:active{transform:scale(.96)}
.bs.on{background:var(--s3);color:var(--tx)}            /* active = neutral filled pill, NOT orange */
.bs.danger{color:var(--er)}
.bs.danger:hover{background:rgba(255,107,107,.12);color:var(--er)}
.ob{background:var(--ac);border:none;color:#fff;font-size:13px;letter-spacing:.01em;padding:11px 24px;cursor:pointer;margin-top:6px;border-radius:var(--rad-sm);box-shadow:var(--glow);transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease)}
.ob:hover{filter:brightness(1.06)}
.ob:active{transform:scale(.96)}
.icon-btn{background:none;border:none;color:var(--di);cursor:pointer;font-size:16px;padding:4px 8px;transition:color .12s;line-height:1;border-radius:var(--rad-sm)}
.icon-btn:hover{color:var(--tx)}
.bi{width:24px;height:24px;background:transparent;border:none;color:var(--mu);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .12s,background .12s;line-height:1;flex-shrink:0;border-radius:var(--rad-pill)}
.bi:hover{color:var(--tx);background:var(--s2)}

/* ── OVERLAYS / CARDS (floating) ── */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);display:none;align-items:center;justify-content:center;z-index:600}
.ov.op{display:flex;animation:ovIn .16s ease}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.card{background:var(--glass-thick);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--hairline);border-radius:var(--rad);padding:26px;min-width:300px;max-width:460px;width:92%;box-shadow:var(--sh3);animation:cardIn var(--dur-slow) var(--spring)}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.card h3{font-size:16px;margin-bottom:7px;letter-spacing:.01em;color:var(--tx)}
.card p{font-size:11.5px;color:var(--mu);margin-bottom:16px;line-height:1.7;text-transform:none;letter-spacing:normal}
.card input{width:100%;background:var(--bg);border:1px solid var(--br);border-radius:var(--rad-pill);color:var(--tx);font-size:12px;padding:10px 14px;outline:none;margin-bottom:12px;text-transform:none;letter-spacing:normal;transition:border-color .12s,box-shadow .12s}
.card input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ad)}
.rw{display:flex;gap:8px;justify-content:flex-end}

/* ── LOADING ── */
#loading{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:900;gap:20px}
#loading.op{display:flex}
.ld-logo svg{width:46px;height:46px;fill:var(--tx)}
.ld-title{font-size:12px;color:var(--di);letter-spacing:.04em}
.ld-bar-wrap{width:220px;height:2px;background:var(--br);border-radius:var(--rad-pill);overflow:hidden}
.ld-bar{height:100%;background:var(--ac);width:0%;transition:width .1s}
.ld-info{font-size:11px;color:var(--mu);letter-spacing:.02em;text-align:center;min-height:14px}
.ld-timer{font-size:22px;color:var(--tx);letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* ── APP SHELL ── (liquid glass topbar — content scrolls beneath it) */
#app{display:flex;flex-direction:column;height:100vh;position:relative}
.top{display:flex;align-items:center;padding:0 16px;height:56px;background:var(--glass);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);flex-shrink:0;position:absolute;top:0;left:0;right:0;z-index:50;gap:0;border-bottom:1px solid var(--hairline)}
.logo svg{width:22px;height:22px;fill:var(--tx);display:block;flex-shrink:0}
.top-wordmark{font-size:16px;color:var(--tx);flex-shrink:0;margin-left:8px;margin-right:4px;letter-spacing:.01em}
.top-div{width:1px;height:14px;background:var(--br);flex-shrink:0;margin:0 10px}
/* overflow-x:auto is the permanent safety net — on any window narrower than
   the nav's natural width, it scrolls instead of bleeding over the logo and
   Open/Export buttons (justify-content:center + no shrink protection used to
   let the row overflow its box and visually collide with its neighbors). */
.top-c{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.top-c::-webkit-scrollbar{display:none}
@media (max-width:1180px){
  .top-c{justify-content:flex-start}
  .top-grp-lbl{display:none}
}
@media (max-width:900px){
  .top-slider-lbl{display:none}
}
.top-collapse-btn{background:none;border:1px solid var(--br);color:var(--mu);width:22px;height:22px;border-radius:var(--rad-sm);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:8px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.top-collapse-btn:hover{background:var(--s2);color:var(--tx)}
.top-collapse-btn.collapsed{transform:rotate(-90deg)}
body.top-collapsed .top-c,body.top-collapsed #top-div-main{display:none}
.top-grp{display:flex;align-items:center;gap:3px}
.top-slider-wrap{display:flex;align-items:center;gap:7px;flex-shrink:0;margin-right:2px}
.top-slider-lbl{font-size:9px;color:var(--mu);letter-spacing:.06em;font-family:'BG',monospace;text-transform:uppercase}
.tp{font-size:12px;color:var(--tx);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.02em}
.tr{display:flex;align-items:center;gap:8px;flex-shrink:0}
.thm-wrap{display:flex;align-items:center;gap:6px;cursor:pointer;flex-shrink:0}
.thm-ico{width:13px;height:13px;flex-shrink:0;opacity:.4;transition:opacity .2s;fill:var(--di)}
.thm-ico.act{opacity:1;fill:var(--tx)}
.thm{width:26px;height:3px;background:var(--br);position:relative;flex-shrink:0;border-radius:var(--rad-pill)}
.thm-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:var(--tx);transition:left .2s;left:0%}
[data-theme=light] .thm-dot{left:100%}
.pbar{height:2px;background:var(--br);flex-shrink:0;display:none;position:absolute;top:56px;left:0;right:0;z-index:49}
.pbf{height:100%;background:var(--ac);width:0%;transition:width .1s}
.ws{display:flex;flex:1;overflow:hidden;position:relative;min-height:0;gap:8px;padding:0 14px}

/* ── SIDEBARS (frameless, slide under the glass topbar) ── */
.sb{width:var(--sb-w);flex-shrink:0;background:transparent;display:flex;flex-direction:column;overflow:hidden;position:relative;min-width:150px;max-width:340px;padding-right:6px;padding-top:56px;border-right:1px solid var(--br)}
.rb{width:var(--rb-w);flex-shrink:0;background:transparent;display:flex;flex-direction:column;overflow:hidden;position:relative;min-width:160px;max-width:360px;padding-left:6px;padding-top:56px;border-left:1px solid var(--br)}
.rh{position:absolute;top:0;width:7px;height:100%;cursor:col-resize;z-index:10;background:transparent}
.rh:hover{background:var(--bh);opacity:.4}
.sb .rh{right:0}.rb .rh{left:0}
.ph{padding:0 6px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:6px}
.pt{font-size:11px;letter-spacing:.02em;color:var(--mu);flex-shrink:0}
.ps{flex:1;overflow-y:auto;padding:4px 0}

/* ── SOURCE TREE ── */
.ti{display:flex;align-items:center;font-size:12px;color:var(--di);cursor:pointer;min-height:27px;transition:background .08s,color .08s;letter-spacing:.01em;border-radius:var(--rad-sm)}
.ti:hover{background:var(--s2);color:var(--tx)}
.ti.act{background:var(--s2);color:var(--tx);box-shadow:inset 2px 0 0 var(--tx)}
.tg{width:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--mu);transition:transform .12s}
.tg.op{transform:rotate(90deg)}
.ti-ic{font-size:11px;flex-shrink:0;margin-right:5px}
.tn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc{font-size:10px;color:var(--mu);padding-right:9px;flex-shrink:0}
.tch{display:none}.tch.op{display:block}

/* ── CONTEXTUAL TRAY (shows only when items are selected) ── */
.mn{flex:1;display:flex;flex-direction:column;overflow:hidden;background:transparent;min-width:0;padding-top:56px}
.tb{display:none;align-items:center;background:var(--glass);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);flex-shrink:0;overflow:visible;position:relative;padding:8px 14px;gap:6px;border-bottom:1px solid var(--hairline);border-radius:0 0 var(--rad-sm) var(--rad-sm)}
.tb.has-sel{display:flex;animation:tbIn .14s ease}
@keyframes tbIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.tb-seg{display:flex;align-items:center;gap:5px;flex-shrink:0}
.tb-seg.grow{flex:1;min-width:200px;justify-content:flex-end}
.si{font-size:11px;color:var(--mu);flex-shrink:0;letter-spacing:.01em;white-space:nowrap}
.si b{color:var(--di);font-weight:400}
.kh{font-size:10px;color:var(--mu);letter-spacing:.02em;flex-shrink:0;display:flex;align-items:center;gap:5px}
.kh kbd{background:var(--s2);padding:2px 6px;font-size:9px;color:var(--di);border-radius:var(--rad-sm)}
.top-grp-lbl{font-size:8px;color:var(--mu);letter-spacing:.12em;font-family:'BG',monospace;text-transform:uppercase;flex-shrink:0;padding:0 1px;margin-right:3px;user-select:none}
.sort-arrow{font-size:15px;opacity:.65;line-height:1}
.sort-dd-btn{font-size:12.5px;color:var(--di);cursor:pointer;letter-spacing:.01em;white-space:nowrap;display:flex;align-items:center;gap:5px;user-select:none;padding:6px 12px;border-radius:var(--rad-pill);transition:background .12s,color .12s}
.sort-dd-btn:hover{color:var(--tx);background:var(--s2)}
/* position:fixed + top/left set from JS at open-time (positionDropdown()) —
   .top-c scrolls horizontally now, and a plain absolute-positioned dropdown
   would get clipped by that ancestor's overflow. Fixed positioning escapes it. */
.sort-dd-drop{position:fixed;background:var(--glass-thick);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--hairline);border-radius:var(--rad-sm);min-width:110px;z-index:400;display:none;flex-direction:column;box-shadow:var(--sh2);padding:5px;overflow:hidden}
.lb-open .sort-dd-drop{display:none!important}
.sort-dd-drop.op{display:flex}
.sort-dd-opt{padding:8px 12px;font-size:12px;color:var(--di);cursor:pointer;letter-spacing:.01em;transition:background .08s,color .08s;white-space:nowrap;border-radius:var(--rad-sm)}
.sort-dd-opt:hover{background:var(--s2);color:var(--tx)}
.sort-dd-opt.on{color:var(--tx);background:var(--s2)}
.tslider{-webkit-appearance:none;appearance:none;width:72px;height:3px;background:var(--br);outline:none;cursor:pointer;flex-shrink:0;border-radius:var(--rad-pill)}
.tslider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--tx);cursor:pointer}
.tslider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--tx);border:none}

/* ── GRID ── */
.gw{flex:1;overflow-y:auto;padding:6px 6px 14px;-webkit-overflow-scrolling:touch}
.es{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;color:var(--mu);text-align:center}
.ei{width:56px;height:56px;margin-bottom:4px}
.et{font-size:15px;color:var(--tx);letter-spacing:.01em}
.ev{font-size:12px;line-height:1.9;letter-spacing:.01em;color:var(--di)}
.dgrp{font-size:11px;color:var(--mu);letter-spacing:.02em;padding:14px 4px 7px;margin-bottom:4px}
.dgrp:not(:first-child){margin-top:14px}
.ig{display:grid;gap:14px;margin-bottom:4px;animation:thumbIn .18s ease both}

/* ── CELL (floating tile) ── */
/* ── ANIMATION KEYFRAMES ── */
@keyframes thumbIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
@keyframes sfBounce{0%,100%{transform:scale(1)}28%{transform:scale(1.2)}58%{transform:scale(.94)}78%{transform:scale(1.07)}}
@keyframes selRing{0%{box-shadow:inset 0 0 0 2px var(--ac),0 0 0 0 var(--ab)}60%{box-shadow:inset 0 0 0 2px var(--ac),0 0 0 7px transparent}100%{box-shadow:inset 0 0 0 2px var(--ac),var(--tile-h)}}
.ic{position:relative;cursor:pointer;overflow:hidden;background:var(--s2);aspect-ratio:1;border-radius:var(--rad-sm);box-shadow:var(--tile);transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.ic:hover{transform:translateY(-2px);box-shadow:var(--tile-h);z-index:1}
.ic:active{transform:scale(.97)}
.ic img,.ic video{width:100%;height:100%;display:block;pointer-events:none;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.ic img.th{animation:thumbIn .2s ease both}
.ic:hover img,.ic:hover video{transform:scale(1.04)}
.ic.mode-crop img,.ic.mode-crop video{object-fit:cover}
/* selection = orange ring + lift + brief ring-pulse */
.ic.sel{box-shadow:inset 0 0 0 3px var(--ac),var(--tile-h);transform:translateY(-4px);animation:selRing .32s ease both}
/* folder-colour outline on sorted thumbnails */
.ic.sf-colored{box-shadow:inset 0 0 0 2px var(--sf-col,var(--br)),var(--tile)}
.ic.sf-colored.sel{box-shadow:inset 0 0 0 3px var(--ac),inset 0 0 0 5px var(--sf-col,var(--br)),var(--tile-h)}
/* flag indicators — left-edge stripe via inset shadow */
.ic.flag-pick{box-shadow:inset 3px 0 0 var(--ok),var(--tile)}
.ic.flag-reject{box-shadow:inset 3px 0 0 var(--er),var(--tile)}
.ic.sel.flag-pick{box-shadow:inset 3px 0 0 var(--ok),inset 0 0 0 3px var(--ac),var(--tile-h)}
.ic.sel.flag-reject{box-shadow:inset 3px 0 0 var(--er),inset 0 0 0 3px var(--ac),var(--tile-h)}
.ic.sf-colored.flag-pick{box-shadow:inset 3px 0 0 var(--ok),inset 0 0 0 2px var(--sf-col,var(--br)),var(--tile)}
.ic.sf-colored.flag-reject{box-shadow:inset 3px 0 0 var(--er),inset 0 0 0 2px var(--sf-col,var(--br)),var(--tile)}
.ic-name{position:absolute;bottom:6px;left:8px;font-size:9.5px;color:#fff;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 16px);z-index:3;pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.7)}
/* selection marker — circle, fills solid orange, NO tick */
.ic-sel{position:absolute;top:8px;right:8px;width:20px;height:20px;border:1.5px solid rgba(255,255,255,.85);background:rgba(0,0,0,.25);border-radius:50%;z-index:3;cursor:pointer;transition:background .12s,border-color .12s;flex-shrink:0;backdrop-filter:blur(2px)}
.ic.sel .ic-sel{background:var(--ac);border-color:var(--ac)}
.ic-exp{display:none}
/* sort tag = folder colour background */
.st{position:absolute;bottom:6px;right:6px;display:flex;align-items:center;gap:4px;background:var(--stc,var(--ac));color:#fff;font-size:9px;padding:3px 7px;border-radius:var(--rad-pill);z-index:2;pointer-events:none;max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.02em;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.st .st-dot{display:none}
.dupbadge{position:absolute;top:8px;left:8px;background:var(--wn);color:#000;font-size:9px;padding:2px 6px;z-index:2;letter-spacing:.04em;pointer-events:none;border-radius:var(--rad-sm)}
.vp{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--s2);gap:5px}
.vp-icon{font-size:22px;opacity:.45}.vp-ext{font-size:9px;color:var(--mu);letter-spacing:.04em}

/* ── RIGHT PANEL: new folder + sort folders ── */
.nr{padding:6px 6px;display:flex;gap:6px;flex-shrink:0}
.nr input{flex:1;background:var(--s2);border:none;border-radius:var(--rad-pill);color:var(--tx);font-size:12px;padding:8px 12px;outline:none;min-width:0;text-transform:none;letter-spacing:normal}
.nr input:focus{box-shadow:0 0 0 2px var(--ad)}
.nr button{background:var(--s3);border:none;color:var(--tx);font-size:15px;padding:2px 12px;cursor:pointer;flex-shrink:0;border-radius:var(--rad-pill);transition:background .12s}
.nr button:hover{background:var(--bh)}
.sfi{display:flex;align-items:center;gap:9px;padding:8px 9px;cursor:pointer;transition:background .1s,box-shadow .1s,transform .1s;position:relative;border-radius:var(--rad-sm)}
.sfi:hover{background:var(--s2)}
.sfi.sf-active{background:var(--s2);box-shadow:inset 2px 0 0 var(--tx)}
.sfi.drag-over{background:var(--ad);box-shadow:inset 0 0 0 1.5px var(--ac)}
.sfi.sf-bounce{animation:sfBounce .52s cubic-bezier(.36,.07,.19,.97) both;transform-origin:center}
.sfn{flex:1;font-size:13px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.01em;text-transform:none}
.sfn-inp{flex:1;background:transparent;border:none;border-bottom:1px solid var(--ac);color:var(--tx);font-size:13px;outline:none;padding:0;letter-spacing:.01em}
.sfc{font-size:10px;color:var(--mu);flex-shrink:0;min-width:20px;text-align:center;padding:1px 6px;background:var(--s2);border-radius:var(--rad-pill);cursor:pointer;transition:all .1s;font-variant-numeric:tabular-nums}
.sfc:hover{color:var(--tx);background:var(--s3)}
.sf-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px var(--bg)}
.sfhk{font-size:8px;color:var(--mu);background:var(--s2);border-radius:var(--rad-sm);padding:1px 5px;line-height:14px;flex-shrink:0;letter-spacing:0;font-variant-numeric:tabular-nums}
.sfia{display:none;gap:2px;flex-shrink:0}
.sfi:hover .sfia{display:flex}
.sfib{background:none;border:none;color:var(--mu);font-size:13px;cursor:pointer;padding:1px 5px;transition:color .1s,background .1s;border-radius:var(--rad-sm);line-height:1}
.sfib:hover{color:var(--tx);background:var(--s3)}
.sfe{padding:16px 10px;font-size:11px;color:var(--mu);line-height:1.9;letter-spacing:.01em}
.sfi.sub{padding-left:24px}.sfi.sub2{padding-left:38px}

/* ── FOLDER ⋯ MENU ── */
.fmenu{position:fixed;z-index:999;background:var(--glass-thick);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--hairline);border-radius:var(--rad-sm);min-width:184px;padding:6px;box-shadow:var(--sh2);display:flex;flex-direction:column;animation:cardIn .12s ease}
.fmenu button{background:none;border:none;color:var(--di);font-family:'Delight',sans-serif;font-size:12.5px;text-align:left;padding:8px 11px;cursor:pointer;letter-spacing:.01em;border-radius:var(--rad-sm);transition:background .08s,color .08s}
.fmenu button:hover{background:var(--s2);color:var(--tx)}
.fmenu button.danger{color:var(--er)}
.fmenu button.danger:hover{background:rgba(255,91,91,.12)}

/* ── EXPORT DROPDOWN ── */
.exp-wrap{position:relative;flex-shrink:0}
.exp-drop{position:absolute;right:0;top:calc(100% + 6px);background:var(--glass-thick);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--hairline);border-radius:var(--rad-sm);min-width:230px;z-index:200;display:none;flex-direction:column;box-shadow:var(--sh2);padding:5px;overflow:hidden}
.exp-drop.op{display:flex}
.exp-opt{padding:10px 12px;font-size:12px;color:var(--di);cursor:pointer;letter-spacing:.01em;display:flex;flex-direction:column;gap:3px;transition:background .08s,color .08s;border-radius:var(--rad-sm)}
.exp-opt:hover{background:var(--s2);color:var(--tx)}
.exp-opt.on{color:var(--tx);background:var(--s2)}
.exp-opt span{font-size:10px;color:var(--mu);text-transform:none;letter-spacing:normal;line-height:1.5}

/* ── LIGHTBOX ── */
#lb{position:fixed;inset:0;background:var(--bg);z-index:800;display:none;flex-direction:column}
#lb.op{display:flex}
.lbt{display:flex;align-items:center;padding:12px 18px;flex-shrink:0;gap:12px;background:transparent}
.lbn{font-size:12px;color:var(--tx);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.02em}
.lbct{font-size:10px;color:var(--mu);letter-spacing:.04em;flex-shrink:0}
.lbb{flex:1;display:flex;overflow:hidden;position:relative;background:transparent;min-height:0;max-height:calc(100vh - 110px)}
.lbiw{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in;padding:0 56px}
.lbiw.zoomed{cursor:zoom-out;overflow:auto}
#lbi{max-width:100%;max-height:100%;object-fit:contain;display:block;transform-origin:center;transition:opacity .15s ease;pointer-events:none;border-radius:var(--rad-sm)}
#lbi.lb-selected{outline:3px solid var(--ac);outline-offset:-3px}
#lbi.ld{opacity:.15}
.vid-wrap{display:none;flex-direction:column;position:absolute;inset:0}
.vid-wrap.op{display:flex}
#lbv{flex:1;width:100%;min-height:0;object-fit:contain;background:#000;outline:none;display:block;border-radius:var(--rad-sm)}
.vc{display:flex;align-items:center;gap:10px;padding:9px 16px;background:var(--glass-thick);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--hairline);border-radius:var(--rad-pill);flex-shrink:0;margin:8px 16px 0}
.vc-play{background:var(--ac);border:none;color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;flex-shrink:0}
.vc-play:hover{filter:brightness(1.06)}
.vc-time{font-size:10px;color:var(--mu);letter-spacing:.02em;flex-shrink:0;white-space:nowrap}
.vc-prog{flex:1;position:relative;height:4px;background:var(--s3);border-radius:var(--rad-pill);cursor:pointer;min-width:60px}
.vc-prog-fill{height:100%;background:var(--ac);pointer-events:none;max-width:100%;border-radius:var(--rad-pill)}
.vc-prog-thumb{position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:var(--ac);pointer-events:none}
.vc-vol{width:54px;height:4px;-webkit-appearance:none;appearance:none;background:var(--s3);outline:none;cursor:pointer;flex-shrink:0;border-radius:var(--rad-pill)}
.vc-vol::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--tx)}
.vc-vol::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--tx);border:none}
.vc-spd-wrap{position:relative;flex-shrink:0}
.vc-spd-btn{background:var(--s2);border:none;color:var(--di);font-size:10px;padding:5px 11px;cursor:pointer;letter-spacing:.02em;white-space:nowrap;display:flex;align-items:center;gap:3px;border-radius:var(--rad-pill)}
.vc-spd-btn:hover{color:var(--tx);background:var(--s3)}
.vc-spd-drop{position:absolute;bottom:calc(100% + 6px);right:0;background:var(--glass-thick);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--hairline);border-radius:var(--rad-sm);min-width:74px;z-index:900;display:none;flex-direction:column;padding:4px;box-shadow:var(--sh2)}
.vc-spd-drop.op{display:flex}
.vc-spd-opt{padding:6px 10px;font-size:11px;color:var(--di);cursor:pointer;letter-spacing:.02em;transition:background .07s,color .07s;border-radius:var(--rad-sm)}
.vc-spd-opt:hover{background:var(--s2);color:var(--tx)}
.vc-spd-opt.on{color:var(--tx);background:var(--s2)}
.vc-btn{background:none;border:none;color:var(--di);font-size:11px;cursor:pointer;padding:4px 6px;letter-spacing:.02em;transition:color .1s;flex-shrink:0;border-radius:var(--rad-sm)}
.vc-btn:hover{color:var(--tx)}
.vc-btn.on{color:var(--tx)}
.la{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--di);width:52px;height:100px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:36px;transition:color .1s,background .1s;z-index:2;padding:0;border-radius:var(--rad-sm)}
.la:hover{color:var(--tx)}
.la:disabled{opacity:.15;cursor:default}
#lbp{left:8px}#lbn2{right:8px}
.lbbar{padding:10px 16px;flex-shrink:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:transparent}
.lbbl{display:flex;align-items:center;gap:7px;flex:1;flex-wrap:wrap}
.lbrl{font-size:9px;color:var(--mu);letter-spacing:.06em;flex-shrink:0}
.lbsb{background:transparent;border:none;color:var(--di);font-size:11px;padding:6px 13px;cursor:pointer;white-space:nowrap;letter-spacing:.01em;flex-shrink:0;border-radius:var(--rad-pill);transition:background .1s,color .1s}
.lbsb:hover{background:var(--s2);color:var(--tx)}
.lbsb.on{border:none;color:var(--tx);background:var(--s3)}
.lbfb{display:flex;align-items:center;gap:5px;background:var(--s2);border:none;color:var(--di);font-size:11px;padding:6px 12px;cursor:pointer;white-space:nowrap;letter-spacing:.01em;transition:all .1s;border-radius:var(--rad-pill)}
.lbfb:hover{color:var(--tx);background:var(--s3)}
.lbfb.on{background:var(--s3);color:var(--tx)}
.lbfb .st-dot{width:8px;height:8px;border-radius:50%;background:var(--stc,var(--ac));flex-shrink:0}
/* lightbox flag buttons — legacy outline style (used for Compare close button) */
.lb-flag-btn{background:none;border:1px solid var(--br);color:var(--di);font-size:11px;padding:5px 12px;cursor:pointer;border-radius:var(--rad-pill);transition:all .12s;letter-spacing:.01em;font-family:'Delight',sans-serif}
.lb-flag-btn:hover{color:var(--tx);background:var(--s2)}
/* filled flag pill — pick / reject buttons in tray and lightbox */
.flag-pill{display:inline-flex;align-items:center;gap:7px;background:var(--s2);border:1px solid var(--br);color:var(--di);font-size:11.5px;padding:6px 16px;cursor:pointer;border-radius:var(--rad-pill);transition:background .13s,color .13s,border-color .13s;letter-spacing:.01em;font-family:'Delight',sans-serif;white-space:nowrap;flex-shrink:0}
.flag-pill:hover{background:var(--s3);color:var(--tx);border-color:var(--bh)}
.flag-pill.pick{background:rgba(79,255,145,.18);border-color:var(--ok);color:var(--ok)}
.flag-pill.reject{background:rgba(255,91,91,.18);border-color:var(--er);color:var(--er)}
.lbsel-badge{display:none;align-items:center;gap:5px;background:var(--ad);padding:4px 8px 4px 10px;font-size:10px;color:var(--ac);letter-spacing:.04em;flex-shrink:0;border-radius:var(--rad-pill)}
.lbsel-badge.op{display:flex}
.lbsel-badge button{background:none;border:none;color:var(--ac);cursor:pointer;font-size:11px;padding:0 0 0 2px;line-height:1}
.lbbr{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.lbbr span{font-size:9px;color:var(--mu);letter-spacing:.02em;display:flex;align-items:center;gap:3px}
.lbbr kbd{background:var(--s2);padding:1px 5px;font-size:9px;color:var(--di);border-radius:var(--rad-sm)}

/* ── COMPARE OVERLAY ── */
@keyframes cmpPaneIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
#cmp{position:fixed;inset:0;background:var(--bg);z-index:820;display:none;flex-direction:column}
#cmp.op{display:flex}
.cmp-top{height:50px;display:flex;align-items:center;padding:0 18px;gap:14px;border-bottom:1px solid var(--br);flex-shrink:0}
.cmp-title{font-size:12px;color:var(--tx);letter-spacing:.01em}
.cmp-hint{font-size:10px;color:var(--mu);flex:1;letter-spacing:.02em}
.cmp-row{display:flex;flex:1;gap:1px;overflow:hidden;background:var(--br)}
.cmp-pane{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;padding:14px;background:var(--bg);transition:background .14s;gap:0;animation:cmpPaneIn .22s ease both}
.cmp-pane:hover{background:var(--s2)}
.cmp-pane.picked{background:rgba(79,255,145,.06);outline:inset 0 0 0 2px var(--ok)}
.cmp-pane.flag-pick{box-shadow:inset 4px 0 0 var(--ok)}
.cmp-pane.flag-reject{box-shadow:inset 4px 0 0 var(--er)}
.cmp-img{max-width:100%;max-height:calc(100% - 48px);object-fit:contain;border-radius:var(--rad-sm);display:block;pointer-events:none}
.cmp-meta{position:absolute;bottom:10px;left:10px;right:10px;display:flex;align-items:center;gap:7px;pointer-events:none}
.cmp-name{font-size:9.5px;color:var(--di);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;letter-spacing:.01em}
.cmp-flag-pill{font-size:9px;padding:2px 8px;border-radius:var(--rad-pill);letter-spacing:.04em;flex-shrink:0;font-family:'BG',monospace;text-transform:uppercase}
.cmp-flag-pill.pick{background:rgba(79,255,145,.85);color:#000}
.cmp-flag-pill.reject{background:rgba(255,91,91,.85);color:#fff}
.cmp-kbd{position:absolute;top:10px;left:10px;font-size:8px;color:var(--mu);font-family:'BG',monospace;letter-spacing:.06em;opacity:.5;pointer-events:none}

/* ── FOLDER DRAWER ── */
#fd{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:700;display:none;align-items:flex-end;justify-content:center}
#fd.op{display:flex}
.fdd{width:100%;max-width:920px;max-height:66vh;background:var(--glass-thick);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--hairline);border-bottom:none;border-radius:var(--rad) var(--rad) 0 0;display:flex;flex-direction:column;box-shadow:var(--sh3)}
.fdh{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--br);flex-shrink:0;gap:10px}
.fdt{font-size:13px;flex:1;letter-spacing:.01em;color:var(--tx)}.fdcnt{font-size:10px;color:var(--mu)}
.fdgw{flex:1;overflow-y:auto;padding:12px}
.fdg{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.fdc2{aspect-ratio:1;position:relative;cursor:pointer;overflow:hidden;background:var(--s2);border-radius:var(--rad-sm)}
.fdc2 img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .15s;pointer-events:none}
.fdc2:hover img{transform:scale(1.05)}
.fdl{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.72));font-size:9px;color:rgba(255,255,255,.8);padding:10px 5px 4px;opacity:0;transition:opacity .1s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;letter-spacing:.02em}
.fdc2:hover .fdl{opacity:1}
.fdhint{font-size:10px;color:var(--mu);padding:8px 16px;border-top:1px solid var(--br);flex-shrink:0;letter-spacing:.02em}

/* ── CONTEXT MENU ── */
.ctx{position:fixed;background:var(--glass-thick);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--hairline);border-radius:var(--rad-sm);padding:5px;min-width:200px;z-index:999;box-shadow:var(--sh2);display:none}
.ci{padding:8px 11px;font-size:12px;color:var(--di);cursor:pointer;display:flex;align-items:center;gap:8px;letter-spacing:.01em;transition:background .07s,color .07s;border-radius:var(--rad-sm)}
.ci:hover{background:var(--s2);color:var(--tx)}
.ci.red{color:var(--tx)}
.chr{height:1px;background:var(--br);margin:4px 6px}

/* ── TOAST ── */
.ts{position:fixed;bottom:40px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--glass-thick);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--hairline);border-radius:var(--rad-pill);color:var(--tx);font-size:11.5px;padding:11px 20px;z-index:9999;opacity:0;transition:all .2s cubic-bezier(.2,.7,.3,1);pointer-events:none;letter-spacing:.01em;max-width:360px;white-space:nowrap;text-align:center;box-shadow:var(--sh2)}
.ts.sh{opacity:1;transform:translateX(-50%) translateY(0);z-index:9999}
.ts.ok{border-color:var(--ok);color:var(--ok)}.ts.er{border-color:var(--er);color:var(--er)}.ts.wn{border-color:var(--wn);color:var(--wn)}

.dv{width:1px;height:14px;background:var(--br);flex-shrink:0}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bh);border-radius:var(--rad-pill);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--bh)}

.ts-item{padding:9px 13px;cursor:pointer;border-bottom:1px solid var(--br);transition:background .08s}
.ts-item:last-child{border-bottom:none}
.ts-item:hover{background:var(--s2)}
.ts-q{font-family:'Delight',sans-serif;font-size:11.5px;color:var(--tx);letter-spacing:.01em;text-transform:none}
.ts-a{font-family:'Delight',sans-serif;font-size:10px;color:var(--ok);letter-spacing:.01em;margin-top:3px;display:none;text-transform:none;line-height:1.6}

/* ── HOW TO USE ── */
#htu-panel{display:none;position:fixed;bottom:100px;right:16px;width:372px;max-height:78vh;background:var(--glass-thick);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--hairline);border-radius:var(--rad);z-index:601;font-family:'Delight',sans-serif;overflow:hidden;flex-direction:column;box-shadow:var(--sh3)}
#htu-panel.op{display:flex}
.htu-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--br);flex-shrink:0}
.htu-title{font-size:13px;letter-spacing:.01em;color:var(--tx)}
.htu-version{font-size:9px;color:var(--mu);letter-spacing:.04em;margin-left:8px}
.htu-tabs{display:flex;border-bottom:1px solid var(--br);flex-shrink:0;padding:6px 8px;gap:4px}
.htu-tab{flex:1;padding:7px 0;font-size:11px;color:var(--di);cursor:pointer;letter-spacing:.01em;text-align:center;transition:all .1s;border-radius:var(--rad-pill)}
.htu-tab:hover{color:var(--tx);background:var(--s2)}
.htu-tab.on{color:var(--tx);background:var(--s3)}
.htu-body{flex:1;overflow-y:auto;padding:0}
.htu-section{padding:14px 16px;border-bottom:1px solid var(--br)}
.htu-section:last-child{border-bottom:none}
.htu-step{display:flex;gap:11px;margin-bottom:12px;align-items:flex-start}
.htu-step:last-child{margin-bottom:0}
.htu-num{width:20px;height:20px;background:var(--s3);color:var(--tx);font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;border-radius:50%}
.htu-step-text{font-size:11px;color:var(--di);line-height:1.7;letter-spacing:.01em;text-transform:none}
.htu-step-text b{color:var(--tx);letter-spacing:.01em}
.htu-kb-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.htu-kb-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.htu-kb-key{background:var(--s2);padding:3px 8px;font-size:9px;color:var(--di);letter-spacing:.02em;flex-shrink:0;min-width:30px;text-align:center;border-radius:var(--rad-sm)}
.htu-kb-desc{font-size:10px;color:var(--mu);letter-spacing:.01em;text-transform:none}
.htu-feat-row{display:flex;align-items:flex-start;gap:9px;padding:6px 0;border-bottom:1px solid var(--br)}
.htu-feat-row:last-child{border-bottom:none}
.htu-feat-icon{font-size:15px;flex-shrink:0;margin-top:1px}
.htu-feat-info{flex:1}
.htu-feat-name{font-size:11px;color:var(--tx);letter-spacing:.01em}
.htu-feat-desc{font-size:10px;color:var(--mu);line-height:1.6;text-transform:none;letter-spacing:.01em;margin-top:2px}
.htu-anim{width:100%;height:160px;background:var(--bg);border-bottom:1px solid var(--br);flex-shrink:0;position:relative;overflow:hidden}
.htu-anim-label{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--mu);letter-spacing:.04em;white-space:nowrap}

/* ── FOOTER ── */

/* touch feedback */


/* responsive */
.ws{min-height:0}
.sb{min-width:150px}.rb{min-width:160px}.mn{min-width:220px}

/* device gate — hdwOS language: Delight for words, mono only for code/URL */
#mob-gate-screen{display:none;position:fixed;inset:0;background:var(--bg);z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px 28px calc(env(safe-area-inset-bottom,0px) + 28px);text-align:center;font-family:'Delight',sans-serif}
.mgate-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.mgate-logo{width:26px;height:26px;fill:var(--ac)}
.mgate-wordmark{font-size:17px;color:var(--tx);letter-spacing:.01em}
.mgate-title{font-size:24px;color:var(--tx);letter-spacing:0;line-height:1.3;max-width:300px}
.mgate-sub{font-size:13px;color:var(--di);line-height:1.7;max-width:300px;margin-bottom:14px}
.mgate-foot{display:flex;flex-direction:column;gap:5px;margin-top:26px}
.mgate-foot-t{font-size:12px;color:var(--di)}
.mgate-foot-s{font-size:11px;color:var(--mu);line-height:1.6;max-width:260px}
.mgate-foot-url{font-size:10px;color:var(--mu);font-family:'BG',monospace;letter-spacing:.06em;margin-top:8px;text-transform:uppercase}
#mob-gate-code::placeholder{font-family:'Delight',sans-serif;letter-spacing:.02em;font-size:14px;text-transform:none;color:var(--mu)}
@media (max-width:600px),(pointer:coarse) and (max-width:768px),(pointer:coarse) and (max-height:500px){
  #mob-gate-screen{display:flex!important}
  #app{display:none!important}
}
body.browse-only [data-desktop-only]{opacity:.4;pointer-events:none;cursor:not-allowed}

/* ═══════════ SESSION ═══════════ */
.sess-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-top:1px solid var(--br);flex-shrink:0;cursor:pointer}
.sess-head:hover{background:var(--s2)}
.sess-head-title{font-size:10px;letter-spacing:.06em;color:var(--mu)}
.sess-head-right{display:flex;align-items:center;gap:7px}
.sess-online-pill{font-size:8px;background:rgba(79,255,145,.12);color:var(--ok);border:1px solid rgba(79,255,145,.25);padding:2px 7px;letter-spacing:.04em;border-radius:var(--rad-pill)}
.sess-collapse-ico{font-size:10px;color:var(--mu);transition:transform .15s}
.sess-collapse-ico.closed{transform:rotate(-90deg)}
.sess-screen{padding:18px 14px;display:flex;flex-direction:column;gap:0}
.sess-screen.hidden{display:none!important}
.sess-idle-title{font-size:13px;color:var(--tx);letter-spacing:.01em;margin-bottom:6px}
.sess-idle-desc{font-size:11px;color:var(--mu);letter-spacing:.01em;line-height:1.7;text-transform:none;margin-bottom:18px}
.sess-idle-btns{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.sess-cut-name-wrap{padding:0 0 16px;flex-shrink:0}
.sess-cut-name-label{font-size:10px;color:var(--mu);letter-spacing:.03em;margin-bottom:6px}
.sess-cut-name-hint{font-size:10px;color:var(--mu);letter-spacing:.01em;margin-top:5px;line-height:1.5;text-transform:none}
.sess-cut-name-inp{width:100%;background:var(--s2);border:none;color:var(--tx);font-family:'Delight',sans-serif;font-size:13px;padding:10px 14px;outline:none;letter-spacing:.01em;box-sizing:border-box;border-radius:var(--rad-pill);transition:box-shadow .1s;text-transform:none}
.sess-cut-name-inp:focus{box-shadow:0 0 0 2px var(--ad)}
.sess-step-back{background:none;border:none;color:var(--mu);font-family:'Delight',sans-serif;font-size:11px;letter-spacing:.01em;cursor:pointer;padding:0;text-align:left;margin-bottom:14px;display:flex;align-items:center;gap:4px}
.sess-step-back:hover{color:var(--tx)}
.sess-step-eyebrow{font-size:9px;color:var(--mu);letter-spacing:.04em;margin-bottom:10px}
.sess-step-q{font-size:16px;color:var(--tx);letter-spacing:.01em;line-height:1.5;margin-bottom:18px;text-transform:none}
.sess-step-inp{width:100%;background:var(--s2);border:none;color:var(--tx);font-family:'BG',monospace;font-size:14px;padding:12px 14px;outline:none;text-transform:uppercase;letter-spacing:.16em;box-sizing:border-box;margin-bottom:6px;border-radius:var(--rad-pill);transition:box-shadow .1s}
.sess-step-inp:focus{box-shadow:0 0 0 2px var(--ad)}
.sess-step-inp.phrase{text-transform:none;letter-spacing:.04em;font-size:13px}
.sess-step-inp.name-inp{text-transform:none;letter-spacing:.04em;font-size:14px;font-family:'Delight',sans-serif}
.sess-step-hint{font-size:9px;color:var(--mu);letter-spacing:.01em;text-transform:none;margin-bottom:16px;min-height:12px}
.sess-step-err{font-size:9px;color:var(--er);letter-spacing:.01em;text-transform:none;margin-bottom:10px;min-height:12px}
.sess-step-next{width:100%;margin-top:4px}
.sess-active-screen{padding:0;display:flex;flex-direction:column}
.sess-link-section{padding:14px;border-bottom:1px solid var(--br)}
.sess-link-label{font-size:9px;color:var(--mu);letter-spacing:.06em;margin-bottom:7px}
.sess-link-row{display:flex;gap:6px;align-items:stretch}
.sess-link-box{flex:1;font-size:10px;color:var(--di);background:var(--s2);padding:9px 11px;letter-spacing:.01em;text-transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4;border-radius:var(--rad-pill)}
.sess-copy-btn{background:var(--ac);border:none;color:#fff;font-family:'Delight',sans-serif;font-size:11px;padding:0 14px;cursor:pointer;letter-spacing:.01em;flex-shrink:0;white-space:nowrap;transition:filter .1s;border-radius:var(--rad-pill)}
.sess-copy-btn:hover{filter:brightness(1.06)}
.sess-code-section{padding:14px;border-bottom:1px solid var(--br);text-align:center}
.sess-code-label{font-size:9px;color:var(--mu);letter-spacing:.06em;margin-bottom:10px}
.sess-code-display{font-size:32px;color:var(--tx);letter-spacing:.3em;font-family:'BG',monospace;line-height:1;margin-bottom:12px}
.sess-pw-label{font-size:9px;color:var(--mu);letter-spacing:.06em;margin-bottom:6px}
.sess-pw-display{font-size:12px;color:var(--tx);letter-spacing:.01em;text-transform:none;background:var(--s2);padding:9px 12px;line-height:1.4;border-radius:var(--rad-pill)}
.sess-share-hint{font-size:9px;color:var(--mu);letter-spacing:.01em;text-transform:none;margin-top:8px;line-height:1.6}
.sess-thumb-section{padding:11px 14px;border-bottom:1px solid var(--br)}
.sess-thumb-label{font-size:9px;color:var(--mu);letter-spacing:.04em;margin-bottom:6px;display:flex;justify-content:space-between}
.sess-thumb-bar-wrap{height:3px;background:var(--br);overflow:hidden;border-radius:var(--rad-pill)}
.sess-thumb-bar{height:100%;background:var(--ok);width:0%;transition:width .15s}
.sess-metrics-section{padding:11px 14px;border-bottom:1px solid var(--br)}
.sess-metrics-row{display:flex;gap:0;font-size:9px;color:var(--di);letter-spacing:.01em;justify-content:space-between}
.sess-metric{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1}
.sess-metric-val{font-size:15px;color:var(--tx);letter-spacing:.01em}
.sess-metric-key{font-size:8px;color:var(--mu);letter-spacing:.06em}
.sess-devices-section{padding:11px 14px;border-bottom:1px solid var(--br)}
.sess-devices-label{font-size:9px;color:var(--mu);letter-spacing:.06em;margin-bottom:8px}
.sess-dev{display:flex;align-items:center;gap:9px;padding:5px 0;border-bottom:1px solid var(--br)}
.sess-dev:last-child{border-bottom:none}
.sess-dev-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:opacity .3s}
.sess-dev-name{font-size:10px;color:var(--di);letter-spacing:.01em;text-transform:none;flex:1}
.sess-dev-badge{font-size:8px;color:var(--mu);letter-spacing:.04em;flex-shrink:0}
.sess-dev-badge.host{color:var(--di)}
.sess-dev-badge.submitted{color:var(--ok)}
.sess-activity-section{border-bottom:1px solid var(--br)}
.sess-activity-toggle{width:100%;background:none;border:none;color:var(--mu);font-family:'Delight',sans-serif;font-size:11px;padding:10px 14px;cursor:pointer;letter-spacing:.01em;text-align:left;display:flex;align-items:center;justify-content:space-between}
.sess-activity-toggle:hover{color:var(--tx)}
.sess-activity-log{max-height:110px;overflow-y:auto;padding:0 14px 8px;display:none}
.sess-activity-log.open{display:block}
.al-entry{display:flex;gap:8px;padding:4px 0;border-bottom:1px solid var(--br)}
.al-entry:last-child{border-bottom:none}
.al-time{font-size:8px;color:var(--mu);flex-shrink:0;letter-spacing:.02em}
.al-text{font-size:9px;color:var(--di);letter-spacing:.01em;text-transform:none;line-height:1.5}
.sess-action-section{padding:14px}
.sess-status-txt{font-size:9px;color:var(--mu);letter-spacing:.04em;text-align:center;padding:8px 14px}
.sess-inp{width:100%;background:var(--s2);border:none;color:var(--tx);font-family:'BG',monospace;font-size:11px;padding:9px 11px;outline:none;text-transform:uppercase;letter-spacing:.08em;box-sizing:border-box;margin-bottom:4px;border-radius:var(--rad-pill)}
.sess-inp:focus{box-shadow:0 0 0 2px var(--ad)}
.sess-inp.normal{text-transform:none;letter-spacing:.01em;font-size:10px;font-family:'Delight',sans-serif}
.sess-inp-label{font-size:8px;color:var(--mu);letter-spacing:.04em;margin-bottom:3px}
#sess-join-status{font-size:9px;color:var(--er);letter-spacing:.01em;min-height:14px;text-transform:none}
.sess-divider{height:1px;background:var(--br);margin:4px 0}

/* ═══════════ v2 FEATURES ═══════════ */
/* like heart — INK, never accent */
.ic-like{position:absolute;top:8px;left:8px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(255,255,255,.9);background:rgba(0,0,0,.3);border-radius:50%;z-index:3;cursor:pointer;opacity:0;transform:scale(.85);transition:opacity .12s,transform .12s,color .12s;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.ic:hover .ic-like{opacity:1;transform:scale(1)}
.ic-like:hover{color:#fff}
.ic-like.on{opacity:1;transform:scale(1);color:#fff;background:rgba(0,0,0,.5)}
.st{display:flex;align-items:center;gap:4px}
.undo-count{margin-left:5px;font-size:10px;color:var(--di);font-variant-numeric:tabular-nums}
.undo-count:empty{display:none}
#undo-btn:disabled{opacity:.34;cursor:default}
#undo-btn:not(:disabled){color:var(--di)}
/* lightbox like — ink */
.lblike{background:var(--s2);border:none;color:var(--di);width:32px;height:30px;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;flex-shrink:0;border-radius:var(--rad-pill);transition:all .12s}
.lblike:hover{color:var(--tx);background:var(--s3)}
.lblike.on{background:var(--s3);color:var(--tx)}
.lbfb-unsort{margin-left:4px}
/* colour picker */
.mbox{background:var(--glass-thick);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--hairline);border-radius:var(--rad);padding:22px;min-width:300px;max-width:380px;width:92%;box-shadow:var(--sh3);animation:cardIn .18s cubic-bezier(.2,.7,.3,1)}
.mh{font-size:15px;letter-spacing:.01em;color:var(--tx);margin-bottom:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-box .cp-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:16px}
.cp-sw{width:100%;aspect-ratio:1;border:1px solid rgba(128,128,128,.2);border-radius:50%;cursor:pointer;padding:0;transition:transform .1s,box-shadow .1s;position:relative}
.cp-sw:hover{transform:scale(1.12)}
.cp-sw.on{box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--tx)}
.cp-row{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.cp-row input[type=color]{width:36px;height:36px;padding:0;border:1px solid var(--br);border-radius:var(--rad-sm);background:var(--bg);cursor:pointer;flex-shrink:0}
.cp-row input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.cp-row input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}
.cp-row input[type=text]{flex:1;background:var(--bg);border:1px solid var(--br);border-radius:var(--rad-pill);color:var(--tx);font-size:12px;padding:9px 12px;outline:none;text-transform:none;letter-spacing:.01em;transition:border-color .12s,box-shadow .12s}
.cp-row input[type=text]:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ad)}
.cp-actions{display:flex;gap:8px;justify-content:flex-end}
/* export settings */
#exps-summary{font-size:11.5px;color:var(--mu);margin-bottom:16px;text-transform:none;letter-spacing:.01em;line-height:1.6}
.exps-field{margin-bottom:16px}
.exps-field>label,.exps-lbl{display:block;font-size:11px;color:var(--mu);letter-spacing:.01em;margin-bottom:8px}
.exps-seg{display:flex;gap:6px;flex-wrap:wrap;background:var(--s2);padding:4px;border-radius:var(--rad-pill)}
.exps-seg .bs{flex:1;min-width:0;text-align:center;justify-content:center}
.exps-dest-label{font-size:10px;color:var(--mu);margin-top:8px;text-transform:none;letter-spacing:.01em;line-height:1.5}
#exps-name{width:100%;background:var(--bg);border:1px solid var(--br);border-radius:var(--rad-pill);color:var(--tx);font-size:12px;padding:10px 14px;outline:none;text-transform:none;letter-spacing:.01em;transition:border-color .12s,box-shadow .12s}
#exps-name:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ad)}
/* export summary */
#expsum-body{margin-bottom:16px}
.exsum-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--br);font-size:12px;color:var(--di);letter-spacing:.01em}
.exsum-row:last-child{border-bottom:none}
.exsum-row b{color:var(--tx);font-weight:500;font-variant-numeric:tabular-nums;font-size:14px}
.exsum-row.err{color:var(--er)}
.exsum-row.err b{color:var(--er)}
/* duplicate review */
.fd-tab{font-size:11px}
.fd-tab.on{background:var(--s3);color:var(--tx)}
#fddupn{font-variant-numeric:tabular-nums;opacity:.8}
.fdreview{flex:1;overflow-y:auto;padding:12px 16px}
.fdr-empty{font-size:11px;color:var(--mu);text-align:center;padding:40px 0;letter-spacing:.01em}
.fdr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--br)}
.fdr-top span{font-size:11px;color:var(--di);letter-spacing:.01em}
.fdr-grp{margin-bottom:16px;background:var(--s2);border-radius:var(--rad);padding:12px}
.fdr-grp-h{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.fdr-name{font-size:11px;color:var(--tx);letter-spacing:.01em;text-transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.fdr-cnt{font-size:9px;color:var(--wn);letter-spacing:.04em;flex-shrink:0}
.fdr-items{display:flex;gap:10px;overflow-x:auto;padding-bottom:3px}
.fdr-item{width:132px;flex-shrink:0;background:var(--bg);border:1px solid var(--br);border-radius:var(--rad-sm);overflow:hidden;display:flex;flex-direction:column}
.fdr-thumb{width:100%;aspect-ratio:1;background:var(--s3);overflow:hidden;position:relative}
.fdr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fdr-meta{font-size:9px;color:var(--mu);padding:7px;letter-spacing:.02em;display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--br)}
.fdr-like{color:var(--tx)}
.fdr-acts{display:flex;flex-direction:column;gap:5px;padding:8px}
.fdr-acts .bs{width:100%;text-align:center;justify-content:center;font-size:10px;padding:6px;background:var(--s3)}

/* ═══════════ MONO RESERVE — numbers / codes / metadata, ALWAYS caps ═══════════ */
.tc,.sfc,.sfhk,.undo-count,.si b,.lbct,.vc-time,.vc-spd-btn,.ld-timer,
.sess-metric-val,.sess-code-display,.sess-pw-display,.sess-step-inp,.sess-inp,
.fdr-cnt,.fdcnt,.exsum-row b,.dupbadge,
.ic-name,.lbn,.fdl,.fdr-meta,
.kh kbd,.lbbr kbd,.htu-kb-key,.htu-num,.sfhk,
#main-metrics span,#mob-prog,.mob-done-tally,#sess-thumb-count,.mob-step,#simstat{
  font-family:'BG',monospace;
}
.tc,.sfc,.sfhk,.undo-count,.si b,.lbct,.vc-time,.vc-spd-btn,.ld-timer,
.sess-metric-val,.sess-code-display,.fdr-cnt,.fdcnt,.exsum-row b,.dupbadge,
.fdl,.fdr-meta,.kh kbd,.lbbr kbd,.htu-kb-key{
  text-transform:uppercase;
}
/* filenames stay lowercase — only codes/metrics go all-caps */
.ic-name,.lbn{text-transform:none;letter-spacing:.01em}

/* ── GUIDE / FIX UTIL BAR (bottom of right sidebar) ── */
.rb-util-bar{padding:6px 8px;display:flex;gap:5px;flex-shrink:0}
.rb-util-btn{flex:1;background:none;border:none;color:var(--mu);font-size:12px;letter-spacing:.01em;cursor:pointer;transition:color .12s,background .12s;border-radius:var(--rad-pill);font-family:'Delight',system-ui,sans-serif;padding:6px 10px}
.rb-util-btn:hover{color:var(--tx);background:var(--s2)}

/* ── MOSAIC MODE — true masonry columns, no forced rows ── */
.ig.mode-mosaic{
  display:block!important;
  columns:var(--mosaic-w,130px) auto;
  column-gap:8px;
}
.ig.mode-mosaic .ic{
  break-inside:avoid;
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:auto!important;
  margin-bottom:8px;
  transform:none!important;
}
.ig.mode-mosaic .ic:hover{transform:none!important}
.ig.mode-mosaic .ic img,.ig.mode-mosaic .ic video{
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  aspect-ratio:auto!important;
  display:block;
}
/* Give placeholder a 4:3 slot while image loads — overrides inline height:100% */
.ig.mode-mosaic .ic .ph2{
  width:100%!important;
  height:0!important;
  padding-bottom:75%;
  background:var(--bg);
}

/* ── LEFT SIDEBAR COLLAPSE ── */
.sb{transition:width .22s cubic-bezier(.4,0,.2,1),min-width .22s,padding .22s,opacity .18s}
.sb.sb-collapsed{width:0!important;min-width:0!important;padding:0!important;overflow:hidden;opacity:0;pointer-events:none}
/* collapse toggle — sits on the mn (main) left edge */
.sb-tog-inner{background:none;border:none;color:var(--mu);font-size:12px;cursor:pointer;padding:5px 7px;border-radius:var(--rad-sm);transition:color .12s,background .12s;flex-shrink:0;line-height:1}
.sb-tog-inner:hover{color:var(--tx);background:var(--s2)}
.sb-expand{position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:44px;background:var(--s2);border:none;border-right:1px solid var(--br);color:var(--mu);font-size:10px;cursor:pointer;align-items:center;justify-content:center;z-index:10;padding:0;border-radius:0 var(--rad-sm) var(--rad-sm) 0;display:none}
.sb-expand:hover{color:var(--tx);background:var(--s3)}

/* ── SESSION JOIN SPLASH SCREEN ── */
#join-splash{position:fixed;inset:0;background:var(--bg);z-index:9990;display:none;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:48px 32px}
#join-splash.op{display:flex;animation:ovIn .25s ease}
#join-splash .js-logo{width:40px;height:40px;fill:var(--ac);margin-bottom:28px}
#join-splash .js-hey{font-size:28px;color:var(--tx);letter-spacing:-.01em;margin-bottom:10px;text-align:center}
#join-splash .js-sub{font-size:15px;color:var(--di);letter-spacing:.01em;text-align:center;max-width:360px;line-height:1.6;margin-bottom:40px}
#join-splash .js-sub b{color:var(--tx);font-weight:400}
#join-splash .js-field{width:100%;max-width:320px;margin-bottom:14px}
#join-splash .js-label{font-size:11px;color:var(--mu);letter-spacing:.04em;margin-bottom:7px}
#join-splash .js-inp{width:100%;background:var(--bg);border:1px solid var(--br);border-radius:var(--rad-pill);color:var(--tx);font-size:14px;padding:12px 18px;outline:none;font-family:'Delight',system-ui,sans-serif;text-transform:none;letter-spacing:normal;transition:border-color .12s,box-shadow .12s}
#join-splash .js-inp:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ad)}
[data-theme=light] #join-splash .js-inp{background:var(--s2)}
#join-splash .js-err{font-size:11px;color:var(--er);min-height:16px;margin-bottom:10px;text-align:center}
#join-splash .js-btn{background:var(--ac);border:none;color:#fff;font-size:14px;padding:12px 32px;border-radius:var(--rad-pill);cursor:pointer;box-shadow:var(--glow);transition:filter .14s,transform .1s;font-family:'Delight',system-ui,sans-serif;width:100%;max-width:320px;margin-top:4px}
#join-splash .js-btn:hover{filter:brightness(1.07)}
#join-splash .js-btn:disabled{opacity:.4;cursor:default;filter:none}
#join-splash .js-step{font-size:10px;color:var(--mu);letter-spacing:.08em;text-align:center;margin-bottom:28px}
#join-splash .js-loading{font-size:11px;color:var(--mu);letter-spacing:.04em;text-align:center;margin-top:20px}

/* ── OPEN-FOLDER WARNING OVERLAY ── */
#warn-open-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:700}
#warn-open-ov.op{display:flex;animation:ovIn .14s ease}
.warn-card{background:var(--glass-thick);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--hairline);border-radius:var(--rad);padding:30px;width:92%;max-width:380px;box-shadow:var(--sh3)}
.warn-card .wc-icon{font-size:28px;margin-bottom:16px;display:block;text-align:center}
.warn-card h3{font-size:16px;margin-bottom:10px;letter-spacing:.01em;color:var(--tx);text-align:center}
.warn-card p{font-size:13px;color:var(--di);margin-bottom:24px;line-height:1.8;text-align:center;letter-spacing:normal;text-transform:none}
.warn-card .rw{justify-content:center;gap:10px}

/* ── DUPLICATE REVIEW MODAL (Apple Photos style) ── */
.dup-ov{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:8500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:20px}
.dup-ov.op{display:flex;animation:ovIn .18s ease}
.dup-panel{background:var(--glass-thick);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--hairline);border-radius:var(--rad);width:100%;max-width:700px;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--sh3);overflow:hidden;animation:dupIn .22s cubic-bezier(.2,.8,.3,1)}
@keyframes dupIn{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.dup-hdr{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 22px 16px;border-bottom:1px solid var(--br);flex-shrink:0}
.dup-hdr-left{display:flex;flex-direction:column;gap:3px}
.dup-title{font-size:16px;color:var(--tx);letter-spacing:.005em}
.dup-subtitle{font-size:11px;color:var(--mu);letter-spacing:.02em}
.dup-close{background:var(--s2);border:none;color:var(--di);font-size:14px;cursor:pointer;width:28px;height:28px;border-radius:var(--rad-sm);display:flex;align-items:center;justify-content:center;transition:color .12s,background .12s;flex-shrink:0;margin-top:2px}
.dup-close:hover{color:var(--tx);background:var(--s3)}
.dup-body{flex:1;overflow-y:auto;padding:16px 20px 8px;display:flex;flex-direction:column;gap:20px}
.dup-grp{display:flex;flex-direction:column;gap:10px}
.dup-grp-lbl{font-size:9.5px;color:var(--mu);letter-spacing:.08em;font-family:'BG',monospace;text-transform:uppercase}
.dup-items{display:flex;gap:10px;flex-wrap:wrap}
.dup-item{flex:1;min-width:110px;max-width:180px;cursor:pointer;border-radius:var(--rad-sm);border:2px solid var(--br);transition:border-color .15s,box-shadow .15s;overflow:hidden;background:var(--s2)}
.dup-item:hover{border-color:var(--bh)}
.dup-item.keep{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok)}
.dup-img-wrap{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:var(--s2)}
.dup-img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .18s}
.dup-img[src=""]{opacity:0}
.dup-badge{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#000;font-size:12px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .14s;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.dup-item.keep .dup-badge{opacity:1}
.dup-meta{padding:7px 9px 8px;display:flex;flex-direction:column;gap:2px}
.dup-meta-size{font-size:9.5px;color:var(--di);letter-spacing:.02em}
.dup-meta-path{font-size:9px;color:var(--mu);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dup-keep-tag{font-size:9px;color:var(--ok);letter-spacing:.04em;font-family:'BG',monospace;text-transform:uppercase;display:none;margin-top:1px}
.dup-item.keep .dup-keep-tag{display:block}
.dup-footer{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--br);flex-shrink:0}
.dup-footer-info{flex:1;font-size:11px;color:var(--mu);line-height:1.5}
.dup-footer-info b{color:var(--di);font-weight:400}

/* ── VIDEO THUMBNAIL INLINE PLAY BUTTON ── */
.vp-play-btn{position:absolute;bottom:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);border:none;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .12s,transform .1s;line-height:1;padding:0}
.vp-play-btn:hover{background:rgba(0,0,0,.82);transform:scale(1.1)}
/* Lightbox video: click anywhere on video toggles play */
#lbv{cursor:pointer}

/* ── CLIP EDITOR ── */
#clip-ov{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:8600;display:none;align-items:center;justify-content:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:20px}
#clip-ov.op{display:flex;animation:ovIn .18s ease}
.clip-panel{background:var(--sf);border:1px solid var(--br);border-radius:var(--rad);width:100%;max-width:980px;height:88vh;max-height:680px;display:flex;flex-direction:column;box-shadow:var(--sh3);overflow:hidden;animation:dupIn .22s cubic-bezier(.2,.8,.3,1);position:relative}
.clip-hdr{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--br);flex-shrink:0}
.clip-icon{font-size:14px;color:var(--ac)}
.clip-title{font-size:10px;color:var(--tx);letter-spacing:.1em;text-transform:uppercase}
.clip-fname{font-size:10px;color:var(--mu);letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;flex:1}
.clip-close{background:none;border:none;color:var(--mu);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;margin-left:auto;flex-shrink:0}
.clip-close:hover{color:var(--tx)}
.clip-body{display:flex;flex:1;min-height:0;overflow:hidden}

/* Left column */
.clip-left{flex:1;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--br);overflow:hidden}
.clip-vid-area{flex:1;min-height:0;background:#000;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;overflow:hidden}
#ce-vid{max-width:100%;max-height:100%;width:auto;height:auto;display:block;pointer-events:none}
.ce-play-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;color:rgba(255,255,255,.5);pointer-events:none;transition:opacity .2s}
.clip-vid-area:hover .ce-play-hint{opacity:.8}

/* Timeline */
.clip-tl-wrap{flex-shrink:0;padding:8px 12px 4px;border-top:1px solid var(--br);background:var(--s2)}
.clip-timeline{position:relative;height:34px;background:var(--bg);border:1px solid var(--br);cursor:crosshair;overflow:hidden;border-radius:2px}
.clip-tl-track{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent calc(20%-1px),var(--br) calc(20%-1px),var(--br) 20%);opacity:.3;pointer-events:none}
#ce-segs{position:absolute;inset:0;pointer-events:none}
.clip-tl-seg{position:absolute;top:0;bottom:0;background:rgba(255,46,0,.3);border-left:2px solid var(--ac);border-right:2px solid var(--ac);pointer-events:none}
.clip-tl-inzone{position:absolute;top:0;bottom:0;background:rgba(255,200,0,.2);border-left:2px solid #ffb400;display:none;pointer-events:none}
.clip-tl-ph{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.8);pointer-events:none;left:0%}
.clip-tl-labels{display:flex;justify-content:space-between;font-size:8px;color:var(--mu);letter-spacing:.03em;padding:3px 1px;font-family:'BG',monospace}

/* Controls row */
.clip-ctrl-row{display:flex;align-items:center;gap:5px;padding:7px 12px;border-top:1px solid var(--br);flex-shrink:0;background:var(--sf)}
.cctl{background:var(--s2);border:1px solid var(--br);color:var(--tx);cursor:pointer;font-size:10px;padding:0 8px;height:24px;font-family:'BG',monospace;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;transition:background .1s;min-width:24px;flex-shrink:0}
.cctl:hover{background:var(--s3)}
.cctl.in,.cctl.out{color:var(--ac);border-color:var(--ac);font-weight:700;font-size:12px;min-width:26px}
.cctl.play{min-width:32px}
.cctl-div{width:1px;height:16px;background:var(--br);flex-shrink:0;margin:0 2px}
.ce-time{font-size:9px;color:var(--tx);letter-spacing:.06em;font-family:'BG',monospace;white-space:nowrap;flex-shrink:0}
.ce-hint{font-size:9px;color:var(--mu);letter-spacing:.03em;white-space:nowrap;text-align:right}

/* Right column */
.clip-right{width:210px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden}
.clip-right-hdr{padding:10px 14px 8px;font-size:8px;color:var(--mu);letter-spacing:.12em;border-bottom:1px solid var(--br);flex-shrink:0;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.clip-right-hdr span{background:var(--ac);color:#fff;font-size:8px;padding:1px 6px;letter-spacing:.04em;min-width:16px;text-align:center}
.clip-list{flex:1;overflow-y:auto;min-height:0;padding:8px}
.clip-empty{font-size:9px;color:var(--mu);letter-spacing:.04em;line-height:1.8;padding:8px 2px}
.clip-item{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--br);margin-bottom:5px;background:var(--bg)}
.clip-num{width:18px;height:18px;background:var(--ac);color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'BG',monospace}
.clip-item-info{flex:1;min-width:0}
.clip-range{font-size:9px;color:var(--tx);letter-spacing:.04em;font-family:'BG',monospace}
.clip-dur{font-size:8px;color:var(--mu);margin-top:2px;letter-spacing:.03em}
.clip-del{background:none;border:none;color:var(--mu);cursor:pointer;font-size:12px;padding:2px 4px;line-height:1;flex-shrink:0}
.clip-del:hover{color:var(--er)}
.clip-right-foot{padding:10px 14px;border-top:1px solid var(--br);flex-shrink:0}
.ce-extract{width:100%;height:32px;font-size:9px;letter-spacing:.08em}

/* Progress overlay */
.clip-prog{position:absolute;inset:0;background:rgba(10,10,10,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:10;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.clip-prog-msg{font-size:11px;color:var(--tx);letter-spacing:.06em}
.clip-prog-track{width:220px;height:3px;background:var(--br);border-radius:2px}
.clip-prog-fill{height:100%;background:var(--ac);border-radius:2px;width:0%}
.clip-prog-done{display:flex;flex-direction:column;align-items:center;gap:10px;animation:ovIn .25s ease}
.clip-prog-check{font-size:32px;color:var(--ok)}
.clip-prog-done span{font-size:10px;color:var(--mu);letter-spacing:.05em;text-align:center;max-width:240px;line-height:1.6}

/* Clip badge on grid thumbnails — scissors icon, no background square */
.clip-badge{position:absolute;top:5px;left:6px;color:rgba(255,255,255,.92);font-size:16px;pointer-events:none;z-index:3;text-shadow:0 1px 5px rgba(0,0,0,.95);line-height:1}

/* ── NLE FULL-SCREEN CLIP EDITOR ── */
#nle-ov{position:fixed;inset:0;background:var(--bg);z-index:8700;display:none;flex-direction:column;overflow:hidden}
#nle-ov.op{display:flex;animation:ovIn .18s ease}

/* Guide bar */
.nle-guide{display:flex;align-items:center;gap:10px;padding:9px 20px;border-bottom:1px solid var(--br);background:var(--bg);flex-shrink:0;min-height:38px}
.nle-guide-dots{display:flex;gap:5px;align-items:center;flex-shrink:0}
.nle-gdot{width:7px;height:7px;border-radius:50%;background:var(--br);transition:background .25s}
.nle-gdot.active{background:var(--ac)}
.nle-gdot.done{background:var(--ok)}
.nle-guide-step{font-size:9px;color:var(--ac);font-family:'BG',monospace;flex-shrink:0}
.nle-guide-sep{color:var(--br);flex-shrink:0}
.nle-guide-msg{font-size:12px;color:var(--tx);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .2s}

/* Header */
.nle-hdr{display:flex;align-items:center;gap:10px;padding:0 20px;height:52px;border-bottom:1px solid var(--br);background:var(--bg);flex-shrink:0}
.nle-hdr-icon{font-size:15px;color:var(--ac);flex-shrink:0}
.nle-hdr-label{font-size:12px;color:var(--mu);flex-shrink:0}
.nle-hdr-fname{font-size:12px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.nle-time-disp{font-size:11px;color:var(--mu);font-family:'BG',monospace;flex-shrink:0}
.nle-close-btn{width:30px;height:30px;background:var(--s2);border:1px solid var(--br);color:var(--mu);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s,color .12s,border-color .12s;border-radius:var(--rad-sm);line-height:1}
.nle-close-btn:hover{background:var(--s3);color:var(--tx);border-color:var(--bh)}

/* Body layout */
.nle-body{flex:1;min-height:0;display:flex;overflow:hidden}

/* Left column */
.nle-left{flex:1;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--br)}
.nle-vid-wrap{flex:1;min-height:0;background:#000;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;overflow:hidden}
#nle-vid{max-width:100%;max-height:100%;width:auto;height:auto;display:block;pointer-events:none}
.nle-play-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:56px;color:rgba(255,255,255,.25);pointer-events:none;transition:opacity .18s}
.nle-vid-wrap:hover .nle-play-hint{opacity:.65}
.nle-in-badge{position:absolute;top:14px;left:14px;background:var(--ac);color:#fff;font-size:10px;padding:5px 12px;font-family:'BG',monospace;display:none;border-radius:var(--rad-pill);box-shadow:var(--glow)}
.nle-in-badge.vis{display:block}
.nle-preview-banner{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.68);color:#fff;font-size:11px;padding:7px 18px;border-radius:var(--rad-pill);pointer-events:none;display:none;white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12)}
.nle-preview-banner.vis{display:block}

/* Transport row */
.nle-transport{display:flex;align-items:center;gap:6px;padding:10px 20px;border-top:1px solid var(--br);background:var(--bg);flex-shrink:0}
.nle-skip-btn{background:var(--s2);border:1px solid var(--br);color:var(--mu);cursor:pointer;font-size:11px;height:30px;padding:0 11px;display:flex;align-items:center;gap:3px;transition:background .12s,color .12s,border-color .12s;font-family:'BG',monospace;flex-shrink:0;letter-spacing:.02em;border-radius:var(--rad-sm)}
.nle-skip-btn span{font-size:8px;color:var(--mu)}
.nle-skip-btn:hover{background:var(--s3);color:var(--tx);border-color:var(--bh)}
.nle-play-btn{width:36px;height:36px;background:var(--ac);border:none;color:#fff;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:filter .14s,transform .1s;letter-spacing:0;border-radius:50%;box-shadow:var(--glow)}
.nle-play-btn:hover{filter:brightness(1.14);transform:scale(1.06)}
.nle-play-btn:active{transform:scale(.92)}
.nle-tran-hint{font-size:9px;color:var(--mu);margin-left:auto;flex-shrink:0}

/* Mark buttons */
.nle-mark-zone{display:flex;border-top:1px solid var(--br);flex-shrink:0;background:var(--bg);padding:10px 20px;gap:10px}
.nle-mark-div{display:none}
.nle-mark-btn{flex:1;height:52px;background:var(--s2);border:1px solid var(--br);color:var(--tx);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;transition:background .14s,color .14s,border-color .14s,transform .08s;font-family:'Delight',sans-serif;border-radius:var(--rad-sm)}
.nle-mark-btn:disabled{opacity:.28;cursor:not-allowed}
.nle-mark-btn:not(:disabled):hover{background:var(--s3);border-color:var(--bh)}
.nle-mark-btn:not(:disabled):active{transform:scale(.97)}
.nle-mark-label{font-size:13px}
.nle-mark-key{background:var(--bg);border:1px solid var(--br);color:var(--mu);font-family:'BG',monospace;font-size:9px;padding:2px 8px;font-style:normal;position:absolute;top:8px;right:10px;border-radius:var(--rad-sm);transition:background .18s,color .18s,border-color .18s}
.nle-mark-btn.pulse .nle-mark-key{background:rgba(255,46,0,.1);border-color:rgba(255,46,0,.35);color:var(--ac)}
@keyframes nlePulse{0%,100%{background:var(--s2);border-color:var(--br)}50%{background:rgba(255,46,0,.07);border-color:rgba(255,46,0,.38)}}
.nle-mark-btn.pulse{color:var(--ac);animation:nlePulse 1.6s ease-in-out infinite}

/* Right panel */
.nle-right{width:288px;flex-shrink:0;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.nle-right-hdr{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 12px;font-size:12px;color:var(--tx);border-bottom:1px solid var(--br);flex-shrink:0}
.nle-clip-count{background:var(--ac);color:#fff;font-size:9px;padding:2px 8px;font-family:'BG',monospace;min-width:20px;text-align:center;border-radius:var(--rad-pill);box-shadow:var(--glow)}
.nle-clip-list{flex:1;min-height:0;overflow-y:auto;padding:10px}
.nle-clip-empty{display:flex;flex-direction:column;align-items:center;padding:32px 16px;gap:8px;text-align:center}
.nle-empty-icon{font-size:24px;color:var(--br)}
.nle-clip-empty span:not(.nle-empty-icon){font-size:11px;color:var(--mu);line-height:1.6}
.nle-empty-sub{font-size:10px!important;color:var(--br)!important}

/* Clip cards */
.nle-card{display:flex;gap:10px;padding:10px;border:1px solid var(--br);margin-bottom:8px;background:var(--sf);transition:border-color .14s,background .14s;cursor:pointer;border-radius:var(--rad-sm)}
.nle-card:hover{border-color:rgba(255,46,0,.3);background:var(--s2)}
.nle-card.previewing{border-color:var(--ac);background:rgba(255,46,0,.06)}
.nle-card-thumb{width:80px;height:48px;background:var(--s2);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:var(--rad-sm)}
.nle-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.nle-card-thumb-ph{font-size:20px;color:var(--br)}
.nle-card-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.nle-card-num{font-size:9px;color:var(--mu);font-family:'BG',monospace;margin-bottom:3px}
.nle-card-range{font-size:11px;color:var(--tx);font-family:'BG',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nle-card-dur{font-size:10px;color:var(--mu);margin-top:3px}
.nle-card-actions{display:flex;flex-direction:column;gap:3px;flex-shrink:0;align-self:flex-start;margin-top:1px}
.nle-card-del{background:none;border:none;color:var(--mu);cursor:pointer;font-size:12px;padding:3px 6px;line-height:1;transition:color .12s,background .12s;border-radius:var(--rad-sm)}
.nle-card-del:hover{color:var(--er);background:var(--s2)}

/* Extract button */
.nle-right-foot{padding:12px 16px;border-top:1px solid var(--br);flex-shrink:0}
.nle-extract-btn{width:100%;height:42px;background:var(--ac);border:none;color:#fff;cursor:pointer;font-size:12px;transition:filter .14s,transform .1s,opacity .15s;border-radius:var(--rad-pill);box-shadow:var(--glow)}
.nle-extract-btn:not(:disabled):hover{filter:brightness(1.12)}
.nle-extract-btn:not(:disabled):active{transform:scale(.97)}
.nle-extract-btn:disabled{opacity:.28;cursor:not-allowed;box-shadow:none}

/* Timeline scrubber */
.nle-tl-section{flex-shrink:0;background:var(--bg);border-top:1px solid var(--br);padding:12px 20px 10px}
.nle-tl{position:relative;width:100%;height:72px;background:var(--s2);border:1px solid var(--br);cursor:ew-resize;overflow:hidden;user-select:none;border-radius:var(--rad-sm)}
.nle-tl-thumb-strip{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.55}
.nle-tl-thumb-strip img{position:absolute;top:0;height:100%;object-fit:cover;pointer-events:none}
.nle-tl-bg{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent calc(10%-1px),var(--br) calc(10%-1px),var(--br) 10%);opacity:.15;pointer-events:none}
#nle-tl-segs{position:absolute;inset:0;pointer-events:none}
.nle-tl-seg{position:absolute;top:0;bottom:0;background:rgba(255,46,0,.22);border-left:2px solid var(--ac);border-right:2px solid var(--ac);pointer-events:none}
.nle-tl-inzone{position:absolute;top:0;bottom:0;background:rgba(255,180,0,.14);border-left:2px solid #ffb400;display:none;pointer-events:none}
.nle-tl-ph{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.75);pointer-events:none;left:0%}
.nle-tl-labels{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:0 5px 3px;font-size:8px;color:var(--mu);font-family:'BG',monospace;pointer-events:none}
.nle-tl-hint{font-size:9px;color:var(--mu);margin-top:5px;text-align:center}

/* Extract progress overlay */
.nle-prog-ov{position:absolute;inset:0;background:rgba(0,0,0,.88);z-index:10;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nle-prog-box{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:320px}
.nle-prog-msg{font-size:13px;color:var(--tx)}
.nle-prog-track{width:320px;height:3px;background:var(--br);border-radius:var(--rad-pill);overflow:hidden}
.nle-prog-fill{height:100%;background:var(--ac);width:0%;border-radius:var(--rad-pill)}
.nle-prog-done{display:flex;flex-direction:column;align-items:center;gap:12px;animation:ovIn .25s ease}
.nle-prog-check{font-size:40px;color:var(--ok)}
.nle-prog-done>span{font-size:11px;color:var(--mu);text-align:center;max-width:280px;line-height:1.7}

/* Destination picker sheet */
.nle-dest-sheet{position:absolute;inset:0;background:rgba(0,0,0,.78);z-index:11;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nle-dest-inner{background:var(--glass-thick);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--hairline);border-radius:var(--rad);padding:24px;width:420px;max-width:90vw;max-height:78vh;overflow-y:auto;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh3);animation:cardIn .18s cubic-bezier(.2,.7,.3,1)}
.nle-dest-title{font-size:15px;color:var(--tx);margin-bottom:2px}
.nle-dest-sub{font-size:11px;color:var(--mu);margin-bottom:4px}
.nle-dest-opt{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--br);background:var(--s2);color:var(--tx);cursor:pointer;font-size:12px;transition:background .12s,border-color .12s;text-align:left;width:100%;border-radius:var(--rad-sm);font-family:'Delight',sans-serif}
.nle-dest-opt:hover{background:var(--s3);border-color:var(--bh)}
.nle-dest-opt-icon{font-size:18px;flex-shrink:0;color:var(--mu);line-height:1}
.nle-dest-opt-name{font-size:12px;color:var(--tx)}
.nle-dest-opt-desc{font-size:10px;color:var(--mu);margin-top:3px;line-height:1.5}
.nle-dest-sep{font-size:9px;color:var(--mu);font-family:'BG',monospace;padding:6px 0 2px}
.nle-dest-new-btn{background:transparent;border:1px dashed var(--br);color:var(--mu);cursor:pointer;font-size:11px;padding:11px 16px;width:100%;text-align:left;transition:background .12s,color .12s,border-color .12s;font-family:'Delight',sans-serif;border-radius:var(--rad-sm)}
.nle-dest-new-btn:hover{background:var(--s2);color:var(--tx);border-color:var(--bh)}
.nle-dest-new-form{display:none;flex-direction:column;gap:8px}
.nle-dest-new-form.vis{display:flex}
.nle-dest-new-input{background:var(--bg);border:1px solid var(--br);border-radius:var(--rad-pill);color:var(--tx);font-size:12px;padding:10px 16px;outline:none;font-family:'Delight',sans-serif;transition:border-color .15s,box-shadow .15s;width:100%;box-sizing:border-box}
.nle-dest-new-input:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(255,46,0,.1)}
.nle-dest-new-row{display:flex;gap:8px}

/* ── SIMILAR GROUPING ─────────────────────────────── */
#simbar{display:none;align-items:center;gap:10px;padding:10px 16px;background:var(--glass);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border-bottom:1px solid var(--hairline);flex-shrink:0;border-radius:0 0 var(--rad-sm) var(--rad-sm)}
#simstat{font-size:11px;color:var(--mu);letter-spacing:.04em}
.simbar-sp{flex:1}
.simbar-lbl{font-size:10px;color:var(--mu);letter-spacing:.08em;text-transform:uppercase}
#simth{width:130px;accent-color:var(--ac)}
#simbar .bs{border:1px solid var(--br)}
.sim-hd{display:flex;align-items:center;gap:12px;padding:14px 4px 7px;margin-bottom:4px;cursor:default}
.sim-hd:not(:first-child){margin-top:18px}
.sim-hd-t{font-size:11px;color:var(--tx);letter-spacing:.02em}
.sim-hd-un .sim-hd-t{color:var(--mu)}
.sim-hd-btns{display:flex;gap:6px;opacity:.55;transition:opacity .12s}
.sim-hd:hover .sim-hd-btns{opacity:1}
.sim-hd-btns .bs{border:1px solid var(--br);font-size:10.5px;padding:3px 10px}
.sim-merge-src{outline:1px solid var(--ac);outline-offset:2px}
.sim-kick{position:absolute;top:6px;left:6px;z-index:5;width:22px;height:22px;border:1px solid var(--hairline);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--tx);font-size:10px;cursor:pointer;border-radius:8px;opacity:0;transition:opacity .12s;line-height:1}
.ic:hover .sim-kick{opacity:1}
.sim-kick:hover{border-color:var(--ac);color:var(--ac)}

/* ── MOBILE GUEST MODE ────────────────────────────── */
.mob-gate-join{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:4px;padding:20px;border:1px solid var(--hairline);border-radius:var(--rad);max-width:320px;width:100%;box-shadow:var(--sh2);background:var(--s2)}
#mob-gate-code{background:var(--s3);border:1px solid var(--br);border-radius:var(--rad-sm);color:var(--tx);font-size:16px;letter-spacing:.35em;text-align:center;padding:13px 8px;width:100%;box-sizing:border-box;outline:none;font-family:'BG',monospace;text-transform:uppercase}
#mob-gate-code:focus{border-color:var(--ac)}
.mob-btn{background:var(--ac);color:#fff;border:none;border-radius:var(--rad-sm);font-size:14px;letter-spacing:.04em;padding:14px 28px;width:100%;cursor:pointer;font-family:'Delight',sans-serif;transition:transform var(--dur) var(--ease);box-shadow:var(--glow)}
.mob-btn:active{transform:scale(.96)}
.mob-btn:disabled{opacity:.5}
.mob-btn.ghost{background:transparent;border:1px solid var(--br);color:var(--tx);width:auto;box-shadow:none}
.mob-err{font-size:10px;color:var(--er);letter-spacing:.03em;min-height:14px;text-transform:none}
.mob-screen{display:none;position:fixed;inset:0;background:var(--bg);z-index:10000;flex-direction:column;font-family:'Delight',sans-serif}
.mob-top{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 12px;flex-shrink:0}
.mob-brand{font-size:13px;color:var(--ac);letter-spacing:.1em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mob-step{font-size:10px;color:var(--mu);letter-spacing:.08em}
.mob-x{background:transparent;border:1px solid var(--br);border-radius:var(--rad-sm);color:var(--mu);width:40px;height:40px;font-size:13px;cursor:pointer;flex-shrink:0}
.mob-join-body{display:flex;flex-direction:column;gap:14px;padding:8vh 28px 0;max-width:340px;width:100%;margin:0 auto;box-sizing:border-box}
.mob-join-title{font-size:22px;color:var(--tx);letter-spacing:.01em;margin-bottom:10px}
.mob-field{display:flex;flex-direction:column;gap:6px}
.mob-field label{font-size:10px;color:var(--mu);letter-spacing:.1em;text-transform:uppercase}
.mob-field input{background:var(--s2);border:1px solid var(--br);border-radius:var(--rad-sm);color:var(--tx);font-size:16px;padding:14px;outline:none;font-family:'Delight',sans-serif}
.mob-field input:focus{border-color:var(--ac)}
#mob-stage{flex:1;position:relative;margin:6px 16px;touch-action:none;min-height:0}
.mcard{position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;background:var(--s2);border:1px solid var(--br);border-radius:var(--rad);overflow:hidden;display:flex;align-items:center;justify-content:center;will-change:transform;box-shadow:var(--sh2)}
.mcard img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:-webkit-none;user-select:none}
.mcard-wait{font-size:11px;color:var(--mu);letter-spacing:.06em}
.mcard-name{position:absolute;bottom:0;left:0;right:0;padding:22px 12px 10px;font-size:10px;color:rgba(255,255,255,.85);letter-spacing:.03em;background:linear-gradient(transparent,rgba(0,0,0,.65));font-family:'BG',monospace;pointer-events:none}
.mcard-had{position:absolute;top:10px;left:10px;font-size:9px;letter-spacing:.05em;padding:4px 9px;background:rgba(0,0,0,.6);border-radius:var(--rad-pill);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
.mcard-had.pick{color:var(--ok)}
.mcard-had.reject{color:var(--er)}
.mlabel{position:absolute;top:18px;font-size:11px;letter-spacing:.14em;padding:7px 15px;border:none;border-radius:var(--rad-pill);opacity:0;pointer-events:none;font-family:'BG',monospace;text-transform:uppercase;box-shadow:var(--sh1)}
.mlabel.pick{left:14px;background:var(--ok);color:#06210f;transform:rotate(-5deg)}
.mlabel.reject{right:14px;background:var(--er);color:#fff;transform:rotate(5deg)}
.mob-acts{display:flex;justify-content:center;gap:18px;padding:14px 0 6px;flex-shrink:0}
.mob-act{width:56px;height:56px;border-radius:50%;border:1px solid var(--br);background:var(--s2);font-size:20px;cursor:pointer;color:var(--tx);display:flex;align-items:center;justify-content:center}
.mob-act.pick{color:var(--ok);border-color:var(--ok)}
.mob-act.reject{color:var(--er);border-color:var(--er)}
.mob-act.skip{color:var(--mu)}
.mob-act:disabled{opacity:.3}
.mob-act:active{transform:scale(.92)}
.mob-hint{text-align:center;font-size:9px;color:var(--mu);letter-spacing:.08em;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
.mob-done-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 32px;text-align:center}
.mob-done-check{width:56px;height:56px;border:1px solid var(--ok);border-radius:50%;color:var(--ok);font-size:24px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.mob-done-title{font-size:20px;color:var(--tx)}
.mob-done-tally{font-size:12px;color:var(--tx);letter-spacing:.04em}
.mob-done-sub{font-size:10px;color:var(--mu);letter-spacing:.03em;line-height:1.8;max-width:240px}
body.mob-live #mob-gate-screen{display:none!important}
body.mob-live #join-splash{display:none!important}

/* mobile deck polish */
.mob-spin{width:14px;height:14px;border:1.5px solid var(--br);border-top-color:var(--ac);border-radius:50%;display:inline-block;margin-right:8px;vertical-align:-3px;animation:mobspin .8s linear infinite}
@keyframes mobspin{to{transform:rotate(360deg)}}
.mob-act{width:50px;height:50px;font-size:17px}
.mob-act.pick,.mob-act.reject{width:64px;height:64px;font-size:22px}

#mob-gate-screen{gap:14px}

/* similar scan mode picker */
.simov-modes{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.simov-mode{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--s2);border:1px solid var(--br);border-radius:var(--rad-sm);padding:14px 16px;cursor:pointer;font-family:'Delight',sans-serif;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.simov-mode:hover{background:var(--s3);border-color:var(--bh)}
.simov-mode:active{transform:scale(.97)}
.simov-mode-t{font-size:13.5px;color:var(--tx)}
.simov-mode-d{font-size:11px;color:var(--mu);line-height:1.6}

/* ── PHONE: DECK | PICKS TABS ── */
.mob-tabs{display:flex;gap:6px;padding:0 18px 10px;flex-shrink:0}
.mob-tab{flex:1;padding:9px 0;font-size:12.5px;color:var(--di);background:var(--s2);border:1px solid var(--br);border-radius:var(--rad-sm);cursor:pointer;font-family:'Delight',sans-serif;text-align:center;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.mob-tab:active{transform:scale(.96)}
.mob-tab.on{background:var(--s3);color:var(--tx);border-color:var(--bh)}
.mob-picks-n{font-family:'BG',monospace;font-size:10px;color:var(--ok);margin-left:5px}
#mob-picks{flex:1;display:none;overflow-y:auto;padding:4px 16px calc(env(safe-area-inset-bottom,0px) + 16px);min-height:0}
.mob-picks-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mpk{position:relative;aspect-ratio:1;border-radius:var(--rad-sm);overflow:hidden;background:var(--s2);border:1px solid var(--br);box-shadow:var(--sh1);transition:transform .28s var(--ease),opacity .28s var(--ease)}
.mpk img{width:100%;height:100%;object-fit:cover;display:block}
.mpk-name{position:absolute;bottom:0;left:0;right:0;padding:14px 8px 6px;font-size:8.5px;color:rgba(255,255,255,.85);font-family:'BG',monospace;background:linear-gradient(transparent,rgba(0,0,0,.65));pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpk.out{transform:translateX(-40px) scale(.85);opacity:0}
.mob-picks-empty{text-align:center;color:var(--mu);font-size:12px;padding:60px 20px;line-height:1.8}
/* picks full-view overlay */
#mob-pk-view{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:10010;flex-direction:column;align-items:center;justify-content:center;padding:24px}
#mob-pk-view.op{display:flex}
#mob-pk-img{max-width:100%;max-height:80vh;border-radius:var(--rad);box-shadow:var(--sh3)}
#mob-pk-name{font-size:10px;color:var(--di);font-family:'BG',monospace;margin-top:12px}