/* Jabree Hub: Clips as a Finder window (files.js) and the folder importer (import.js) */
:root{ --fx-sel:#2f6fe4; --fx-sel-soft:rgba(47,111,228,.14); --fx-hilite:rgba(18,18,18,.07);
  --fx-fold-front:#7cbaf4; --fx-fold-back:#5aa3ec; --fx-fold-hi:#b4dbff; --fx-side:#f6f4f0; }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --fx-sel:#3b7bea; --fx-sel-soft:rgba(59,123,234,.22); --fx-hilite:rgba(255,255,255,.08);
  --fx-fold-front:#4f9be8; --fx-fold-back:#3a84d4; --fx-fold-hi:#86c0f7; --fx-side:#1f1d1b; }}
:root[data-theme="dark"]{ --fx-sel:#3b7bea; --fx-sel-soft:rgba(59,123,234,.22); --fx-hilite:rgba(255,255,255,.08);
  --fx-fold-front:#4f9be8; --fx-fold-back:#3a84d4; --fx-fold-hi:#86c0f7; --fx-side:#1f1d1b; }

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.main:has(.fx){padding-bottom:24px}

/* ---------- Window ---------- */
.fx{display:grid;grid-template-columns:216px minmax(0,1fr);height:calc(100dvh - 60px);min-height:520px;background:var(--panel);border-radius:14px;box-shadow:var(--lift);overflow:hidden;position:relative}
:where(.fx,.fx-menu,.imp,#impHost) svg{width:18px;height:18px;flex:none}

/* Sidebar */
.fx-side{background:var(--fx-side);border-right:1px solid var(--line);overflow-y:auto;padding:12px 8px 16px;display:flex;flex-direction:column;gap:1px}
.fx-sh{font-size:11px;font-weight:600;color:var(--ink-3);padding:12px 10px 4px}
.fx-sh:first-child{padding-top:4px}
.fx-si{display:flex;align-items:center;gap:8px;width:100%;min-width:0;border:0;background:none;border-radius:7px;padding:5px 8px;font:inherit;font-size:13.5px;color:var(--ink);text-align:left;cursor:default}
.fx-si:hover{background:var(--fx-hilite)}
.fx-si[aria-current="true"]{background:var(--sel);font-weight:500}
.fx-sic{display:grid;place-items:center;color:var(--fx-sel)}
.fx-sic svg{width:16px;height:16px}
.fx-sil{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-cnt{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.fx-hid{display:inline-grid;place-items:center;color:var(--ink-3)}
.fx-hid svg{width:13px;height:13px}
.fx-tr{display:flex;align-items:center;padding-left:calc(var(--d) * 13px)}
.fx-tr .fx-si{flex:1}
.fx-tw{width:16px;height:22px;flex:none;border:0;background:none;padding:0;display:grid;place-items:center;color:var(--ink-3)}
.fx-tw svg{width:11px;height:11px;transition:transform .15s}
.fx-tw.open svg{transform:rotate(90deg)}
.fx .over,.fx-si.over{background:var(--fx-sel)!important;color:#fff!important}
.fx-si.over .fx-sic,.fx-si.over .fx-cnt{color:#fff}

/* Toolbar */
.fx-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.fx-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.fx-nav{display:flex;gap:2px}
.fx-tb{height:32px;min-width:32px;border:0;background:none;border-radius:8px;display:inline-grid;grid-auto-flow:column;place-items:center;gap:6px;color:var(--ink-2);padding:0 7px;font:inherit;font-size:13px;font-weight:500}
.fx-tb:hover:not(:disabled){background:var(--tile);color:var(--ink)}
.fx-tb:disabled{opacity:.3}
.fx-tb.on{background:var(--ink);color:var(--canvas)}
.fx-title{font-size:15px;font-weight:600;margin:0;flex:1;min-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
.fx-tools{display:flex;align-items:center;gap:6px}
.fx-seg{display:inline-flex;background:var(--tile);border-radius:8px;padding:2px;gap:1px}
.fx-seg button{width:30px;height:26px;border:0;background:none;border-radius:6px;display:grid;place-items:center;color:var(--ink-2)}
.fx-seg button svg{width:16px;height:16px}
.fx-seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1),var(--ring)}
.fx-sort select{height:30px;border:0;background:var(--tile);border-radius:8px;padding:0 8px;font:inherit;font-size:13px;color:var(--ink)}
.fx-q{display:flex;align-items:center;gap:6px;background:var(--tile);border-radius:8px;height:30px;padding:0 9px;width:170px;color:var(--ink-3)}
.fx-q svg{width:14px;height:14px}
.fx-q input{border:0;background:none;outline:none;font:inherit;font-size:13px;width:100%;min-width:0;color:var(--ink)}
.fx-q:focus-within{box-shadow:0 0 0 2px var(--fx-sel-soft),0 0 0 1px var(--fx-sel)}
.cta.fx-upl{height:34px;font-size:13.5px;padding-left:14px;gap:8px}
.cta.fx-upl .go{width:26px;height:26px}
.cta.fx-upl .go svg{width:14px;height:14px}
.fx-crumbs.mob,.fx-locs{display:none}

/* Who can see this folder */
.fx-share{display:flex;align-items:center;gap:10px;padding:7px 14px;font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--line);background:var(--canvas)}
.fx-share svg{width:16px;height:16px;color:var(--success)}
.fx-share.off{background:var(--warn-soft)}
.fx-share.off svg{color:var(--warn)}
.fx-share span{flex:1;min-width:0}
.fx-link{border:0;background:none;padding:0;font:inherit;font-size:13px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.switch{position:relative;width:38px;height:22px;flex:none;display:inline-block}
.switch input{position:absolute;inset:0;opacity:0;margin:0;z-index:1;cursor:pointer}
.switch .tr{position:absolute;inset:0;border-radius:22px;background:var(--line-2);transition:background .18s}
.switch .tr::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.switch input:checked+.tr{background:var(--success)}
.switch input:checked+.tr::after{transform:translateX(16px)}
.switch input:focus-visible+.tr{outline:2px solid var(--fx-sel);outline-offset:2px}

/* Icons view */
.fx-body{flex:1;overflow:auto;padding:12px 14px 20px;position:relative;outline:none;min-height:0}
.fx-body.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:4px 6px;align-content:start}
.fx-it{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border-radius:8px;user-select:none;-webkit-user-select:none;cursor:default;outline:none;min-width:0}
.fx-ic{width:88px;height:76px;display:grid;place-items:center;border-radius:7px;position:relative}
.fx-it.sel .fx-ic{background:var(--fx-hilite)}
.fx-fold{width:72px;height:58px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.1))}
.fx-th{position:relative;display:grid;place-items:center}
.fx-th img{display:block;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.14);object-fit:cover;background:var(--tile)}
.fx-th.v img{height:68px;width:auto;max-width:78px}
.fx-th.h img{width:78px;height:auto;max-height:68px}
.fx-th.doc{width:50px;height:62px;background:var(--panel);border-radius:4px;box-shadow:0 0 0 1px var(--line-2),0 2px 5px rgba(0,0,0,.08);color:var(--ink-3)}
.fx-th.doc svg{width:30px;height:30px;stroke-width:1.2}
.fx-th.vid{width:48px;height:64px;border-radius:5px;background:linear-gradient(160deg,#3a3734,#1d1b19);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.fx-th.vid svg{width:20px;height:20px;opacity:.85}
.fx-mi .fx-th.vid{width:16px;height:20px;border-radius:2px}
.fx-mi .fx-th.vid svg{width:9px;height:9px}
.fx-th.doc em{position:absolute;bottom:7px;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.04em;color:var(--ink-2)}
.fx-badge{position:absolute;right:3px;bottom:3px;font:600 9.5px/1.3 var(--f-mono);background:rgba(0,0,0,.62);color:#fff;border-radius:4px;padding:1px 4px;pointer-events:none}
.fx-fav{position:absolute;top:2px;right:4px;color:#ff4d6d;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.fx-fav svg,.fx-favs svg{width:12px;height:12px}
.fx-favs{color:#ff4d6d;display:inline-grid;margin-left:2px}
.fx-fhid{position:absolute;right:6px;bottom:8px;width:20px;height:20px;border-radius:50%;background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.2);display:grid;place-items:center;color:var(--ink-2)}
.fx-fhid svg{width:12px;height:12px}
.fx-prog{position:absolute;left:12px;right:12px;bottom:6px;height:4px;border-radius:4px;background:rgba(0,0,0,.25);overflow:hidden}
.fx-prog i{display:block;height:100%;background:#fff}
.fx-nm{max-width:100%;text-align:center;font-size:12.5px;line-height:1.25;color:var(--ink)}
.fx-nm>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;padding:1px 5px;border-radius:4px}
.fx-it.sel .fx-nm>span{background:var(--fx-sel);color:#fff}
.fx-sub{font-size:11px;color:var(--ink-3);white-space:nowrap}
.fx-ren{font:inherit;font-size:12.5px;width:120px;max-width:100%;text-align:center;border:0;outline:2px solid var(--fx-sel);border-radius:4px;padding:2px 4px;background:var(--panel);color:var(--ink)}
.fx-it.dragging{opacity:.45}
.fx-it.over{background:none!important}
.fx-it.over .fx-ic{background:var(--fx-sel-soft);box-shadow:inset 0 0 0 2px var(--fx-sel)}
.fx-it.busy{opacity:.75}

/* List view */
.fx-body.list{padding:0;--cols:minmax(0,1fr) 112px 84px 150px}
.fx-lh{position:sticky;top:0;display:grid;grid-template-columns:var(--cols);background:var(--panel);border-bottom:1px solid var(--line);z-index:1}
.fx-lh button{display:flex;align-items:center;gap:4px;text-align:left;font:inherit;font-size:12px;font-weight:600;color:var(--ink-2);padding:6px 10px;border:0;background:none;border-left:1px solid var(--line)}
.fx-lh button:first-child{border-left:0;padding-left:38px}
.fx-lh button.on{color:var(--ink)}
.fx-lh svg{width:11px;height:11px}
.fx-body.list .fx-it{display:grid;grid-template-columns:var(--cols);align-items:center;padding:0 0 0 8px;height:30px;font-size:13px;border-radius:0;gap:0}
.fx-body.list .fx-it:nth-child(even of .fx-it){background:var(--canvas)}
.fx-body.list .fx-it.sel{background:var(--fx-sel)!important;color:#fff}
.fx-body.list .fx-it.sel .fx-c2,.fx-body.list .fx-it.sel .fx-c3,.fx-body.list .fx-it.sel .fx-c4,.fx-body.list .fx-it.sel .fx-where,.fx-body.list .fx-it.sel .fx-hid,.fx-body.list .fx-it.sel .fx-nm{color:#fff}
.fx-c1{display:flex;align-items:center;gap:8px;min-width:0}
.fx-mi{width:22px;height:22px;flex:none;display:grid;place-items:center}
.fx-mi .fx-fold{width:20px;height:17px;filter:none}
.fx-mi .fx-th img{max-width:22px;max-height:22px;width:auto;height:auto;border-radius:2px}
.fx-mi .fx-th.doc{width:16px;height:20px}
.fx-mi .fx-th.doc svg{width:14px;height:14px}
.fx-mi .fx-th.doc em,.fx-mi .fx-badge{display:none}
.fx-body.list .fx-nm{text-align:left;font-size:13px;min-width:0}
.fx-body.list .fx-nm>span{-webkit-line-clamp:1;padding:0;background:none!important;color:inherit!important;overflow-wrap:normal;white-space:nowrap;text-overflow:ellipsis;display:block}
.fx-body.list .fx-ren{text-align:left;width:min(320px,100%)}
.fx-where{font-size:11.5px;color:var(--ink-3);margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.fx-c2,.fx-c3,.fx-c4{padding:0 10px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;font-size:12.5px}

/* Status and path bar */
.fx-status{display:flex;align-items:center;gap:12px;padding:5px 12px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-2);min-height:32px;background:var(--panel)}
.fx-crumbs{display:flex;align-items:center;gap:1px;min-width:0;flex:1;overflow:hidden}
.fx-cr{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:3px 6px;border-radius:5px;font:inherit;color:inherit;white-space:nowrap;min-width:0;flex-shrink:1}
.fx-cr span{overflow:hidden;text-overflow:ellipsis;max-width:180px}
.fx-cr svg{width:13px;height:13px;color:var(--fx-sel)}
.fx-cr:hover{background:var(--tile)}
.fx-cr[aria-current="true"]{color:var(--ink);font-weight:600;flex-shrink:0}
.fx-crs{display:inline-grid;color:var(--ink-3)}
.fx-crs svg{width:9px;height:9px}
.fx-count{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Empty, drop */
.fx-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:80px 20px;color:var(--ink-3)}
.fx-empty>svg{width:42px;height:42px;stroke-width:1.2}
.fx-empty b{color:var(--ink);font-size:15px;font-weight:600}
.fx-empty span{max-width:380px;font-size:13.5px;line-height:1.45}
.fx-empty .cta{margin-top:10px}
.fx-drophint{position:absolute;inset:0;display:none;place-items:center;background:var(--fx-sel-soft);border:2px dashed var(--fx-sel);border-radius:14px;pointer-events:none;z-index:5}
.fx.dropping .fx-drophint{display:grid}
.fx-drophint>div{background:var(--panel);border-radius:16px;padding:20px 28px;box-shadow:var(--lift);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;max-width:320px}
.fx-drophint svg{width:34px;height:34px;color:var(--fx-sel)}
.fx-drophint span{font-size:13px;color:var(--ink-2)}
.fx-dragghost{position:fixed;top:-100px;left:-100px;background:var(--fx-sel);color:#fff;padding:4px 10px;border-radius:12px;font:600 12px var(--f-body)}

/* Right-click menu */
.fx-menu{position:fixed;z-index:95;width:220px;background:color-mix(in srgb,var(--panel) 90%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border-radius:10px;box-shadow:0 0 0 .5px rgba(0,0,0,.2),0 12px 32px rgba(0,0,0,.22);padding:5px;font-size:13.5px;animation:pop .12s ease-out}
.fx-menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:5px 10px;border-radius:5px;color:var(--ink);font:inherit}
.fx-menu button:hover,.fx-menu button:focus-visible{background:var(--fx-sel);color:#fff;outline:none}
.fx-menu button.danger{color:var(--danger)}
.fx-menu button.danger:hover{background:var(--danger);color:#fff}
.fx-menu hr{border:0;border-top:1px solid var(--line-2);margin:4px 8px}

/* Move sheet */
.fx-mvlist{border:1px solid var(--line);border-radius:12px;max-height:50vh;overflow:auto;padding:4px}
.fx-mv{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:7px 10px 7px calc(10px + var(--d) * 18px);border-radius:8px;font:inherit;font-size:14px;color:var(--ink);text-align:left}
.fx-mv svg{width:17px;height:17px;color:var(--fx-sel);flex:none}
.fx-mv span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-mv:hover:not(:disabled){background:var(--tile)}
.fx-mv.on{background:var(--fx-sel)!important;color:#fff}
.fx-mv.on svg{color:#fff}
.fx-mv:disabled{opacity:.35}
.fx-mv .fx-hid{margin-left:auto}

/* ---------- Import sheet ---------- */
@media (min-width:861px){.modal:has(.imp-wrap){width:min(760px,calc(100% - 32px))}}
.imp-lead{margin:0;color:var(--ink-2);font-size:14px;line-height:1.45}
.imp-tree{border:1px solid var(--line);border-radius:12px;max-height:46vh;overflow:auto;padding:4px 0}
.imp-row{display:flex;align-items:center;gap:6px;padding:3px 10px 3px calc(6px + var(--d) * 18px);min-height:40px}
.imp-row:nth-child(even){background:var(--canvas)}
.imp-row.off .imp-nm,.imp-row.off .imp-ic,.imp-row.off .imp-who{opacity:.38}
.imp-ck{width:18px;display:grid;place-items:center}
.imp-ck input{width:16px;height:16px;margin:0;accent-color:var(--fx-sel)}
.imp-ic{display:grid;place-items:center;color:var(--fx-sel)}
.imp-ic svg{width:18px;height:18px}
.imp-nm{flex:1;min-width:0;display:flex;flex-direction:column}
.imp-nm b{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-nm span{font-size:12px;color:var(--ink-3)}
.imp-who{height:30px;border:0;background:var(--tile);border-radius:8px;font:inherit;font-size:12.5px;max-width:170px;padding:0 6px;color:var(--ink)}
.imp-eye{width:32px;height:32px;flex:none;border:0;background:none;border-radius:8px;display:grid;place-items:center;color:var(--success)}
.imp-eye svg{width:17px;height:17px}
.imp-eye.hid{color:var(--ink-3)}
.imp-eye:hover:not(:disabled){background:var(--tile)}
.imp-opt{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.4}
.imp-opt input{margin:2px 0 0;accent-color:var(--fx-sel)}
.imp-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.imp-sum{flex:1;font-size:13.5px;color:var(--ink-2);min-width:200px}
.imp-sum b{color:var(--ink)}
.imp-foot .cta:disabled{opacity:.4}

/* Progress, bottom right */
#impHost{position:fixed;right:20px;bottom:24px;z-index:86;width:min(380px,calc(100vw - 24px));display:flex;justify-content:flex-end;pointer-events:none}
#impHost>*{pointer-events:auto}
.imp{width:100%;background:var(--panel);border-radius:18px;box-shadow:var(--lift);padding:12px 14px 14px 16px;display:flex;flex-direction:column;gap:8px}
.imp-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.imp-h b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-h .iconbtn{width:30px;height:30px;flex:none}
.imp-h .iconbtn svg{width:15px;height:15px}
.imp .dlbar{height:6px;border-radius:6px;background:var(--tile);overflow:hidden}
.imp .dlbar i{display:block;height:100%;background:var(--fx-sel);transition:width .3s}
.imp-s{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.imp-cur{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp-err{font-size:12.5px;color:var(--danger)}
.imp-a{display:flex;align-items:center;gap:10px}
.imp-a .hint{font-size:12px}
.imp-mini{display:flex;align-items:center;gap:8px;background:var(--panel);border:0;border-radius:999px;box-shadow:var(--lift);padding:5px 14px 5px 5px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.imp-ring{width:26px;height:26px;border-radius:50%;background:conic-gradient(var(--fx-sel) calc(var(--p) * 1%),var(--tile) 0);-webkit-mask:radial-gradient(circle,transparent 7px,#000 7.5px);mask:radial-gradient(circle,transparent 7px,#000 7.5px)}

/* ---------- Phones and narrow windows ---------- */
@media (max-width:1080px){ .fx{grid-template-columns:190px minmax(0,1fr)} .fx-q{width:130px} .fx-sort{display:none} }
@media (max-width:860px){
  .main:has(.fx){padding-bottom:120px}
  .fx{display:block;height:auto;min-height:0;box-shadow:none;background:none;border-radius:0;overflow:visible}
  .fx-side{display:none}
  .fx-bar{padding:0 0 10px;border:0;gap:8px}
  .fx-title{order:0;flex-basis:100%;font-size:28px;letter-spacing:-.025em;padding:2px 0 4px}
  .fx-tools{display:contents}
  .fx-q{order:1;flex:1 1 100%;width:auto;height:38px;border-radius:12px}
  .fx-nav{order:2}
  .fx-seg{order:3;margin-left:auto}
  .fx-sort{order:4}
  .fx-tools .fx-tb{order:5}
  .fx-upl,.fx-tools [data-fxact="importDir"]{display:none!important}
  .fx-q input{font-size:16px}
  .fx-sort{display:block}
  .fx-crumbs.desk{display:none}
  .fx-crumbs.mob{display:flex;order:6;flex-basis:100%;overflow-x:auto;font-size:13px;color:var(--ink-2)}
  .fx-locs{display:flex;order:7;flex-basis:100%;gap:6px;overflow-x:auto;padding-bottom:2px}
  .fx-locs button{border:0;background:var(--tile);border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
  .fx-locs button svg{width:14px;height:14px}
  .fx-locs button[aria-current="true"]{background:var(--ink);color:var(--canvas)}
  .fx-share{border-radius:12px;border:0;margin-bottom:8px}
  .fx-body{overflow:visible;padding:4px 0}
  .fx-body.icons{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
  .fx-body.list{--cols:minmax(0,1fr) 72px;border-radius:12px;overflow:hidden;background:var(--panel)}
  .fx-body.list .fx-it{height:48px}
  .fx-mi{width:34px;height:34px}
  .fx-mi .fx-th img{max-width:34px;max-height:34px}
  .fx-mi .fx-fold{width:30px;height:25px}
  .fx-c2,.fx-c4,.fx-lh button:nth-child(2),.fx-lh button:nth-child(4){display:none}
  .fx-status{border:0;padding:14px 0;justify-content:center;background:none}
  .fx-pickbar{position:fixed;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom,0px));background:var(--panel);box-shadow:var(--lift);border-radius:20px;padding:8px;display:flex;gap:8px;justify-content:center;z-index:31}
  .fx.picking .fx-it .fx-ic::after{content:"";position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35);background:rgba(0,0,0,.15)}
  .fx.picking .fx-it.sel .fx-ic::after{background:var(--fx-sel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
  .fx-drophint{border-radius:12px}
  #impHost{left:12px;right:12px;width:auto;bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:861px){ .fx-pickbar{display:none} }

/* ---------- Preview (Quick Look) ---------- */
.ql{position:fixed;inset:0;z-index:70;background:rgba(14,13,12,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);color:#f3f0ea;animation:fade .15s ease}
.ql svg{width:19px;height:19px;flex:none}
.ql-top{display:flex;align-items:center;gap:6px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px}
.ql-t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px}
.ql-t b{font-size:14.5px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ql-t span{font-size:12px;color:rgba(243,240,234,.6);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ql-b{position:relative;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#f3f0ea;display:grid;place-items:center;flex:none}
.ql-b:hover{background:rgba(255,255,255,.18)}
.ql-b.on{color:#ff4d6d}
.ql-b i{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;border-radius:8px;background:#f3f0ea;color:#121212;font:600 10px/16px var(--f-body);font-style:normal;padding:0 4px}
.ql-stage{position:relative;display:grid;place-items:center;padding:8px 72px;min-height:0;overflow:hidden}
.ql-m{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.45);background:#000;display:block}
video.ql-m{max-height:calc(100dvh - 140px)}
img.ql-m{max-height:calc(100dvh - 140px)}
.ql-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#f3f0ea;display:grid;place-items:center}
.ql-nav:hover{background:rgba(255,255,255,.22)}
.ql-nav.l{left:14px}.ql-nav.r{right:14px}
.ql-none{display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(243,240,234,.7);text-align:center}
.ql-none svg{width:46px;height:46px;stroke-width:1.2}
.ql-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));font-size:12.5px;color:rgba(243,240,234,.7);font-variant-numeric:tabular-nums}
.ql-dot{opacity:.5}
@media (max-width:860px){
  .ql-stage{padding:0}
  .ql-m{border-radius:0;box-shadow:none}
  video.ql-m,img.ql-m{max-height:calc(100dvh - 150px)}
  .ql-nav{display:none}
}

/* ---------- Library structure (files.js, library.js) ---------- */
.tabbar.three{grid-template-columns:repeat(3,1fr)}
.fx.solo{grid-template-columns:minmax(0,1fr)}
.fx-acts{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.fx-acts button{border:0;background:var(--tile);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.fx-acts button[aria-pressed="true"]{background:var(--ink);color:var(--canvas)}
.fx-card{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--canvas)}
.fx-card .av{width:44px;height:44px;font-size:15px;flex:none}
.fx-cardi{width:44px;height:44px;border-radius:12px;background:var(--fx-sel-soft);color:var(--fx-sel);display:grid;place-items:center;flex:none}
.fx-cardi svg{width:22px;height:22px}
.fx-cardt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fx-cardt b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.fx-cardt>span{font-size:13px;color:var(--ink-2)}
.fx-cardt .iglink{color:inherit}
.fx-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.fx-tags i{font-style:normal;font-size:11.5px;font-weight:500;background:var(--tile);border-radius:999px;padding:2px 8px;color:var(--ink-2)}
.fx-notes{font-size:13px;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fx-new{display:inline-block;font-size:11px;font-weight:700;background:var(--fx-sel);color:#fff;border-radius:999px;padding:1px 7px;vertical-align:1px;letter-spacing:.02em}
.fx-newt{position:absolute;left:3px;top:3px;font:700 9px/1.4 var(--f-body);letter-spacing:.06em;background:var(--fx-sel);color:#fff;border-radius:4px;padding:1px 4px;pointer-events:none;z-index:1}
.fx-newt.in{position:static;display:inline-block;margin-left:6px;flex:none}
.fx-newd{position:absolute;right:8px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--fx-sel);box-shadow:0 0 0 2px var(--panel)}
.fx-newc{min-width:18px;height:18px;border-radius:9px;background:var(--fx-sel);color:#fff;font:700 11px/18px var(--f-body);text-align:center;padding:0 5px}
.fx-newc.on{position:absolute;right:6px;top:4px;box-shadow:0 0 0 2px var(--panel)}
.fx-fbadge{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);color:#fff;opacity:.9;display:grid;place-items:center;pointer-events:none}
.fx-fbadge svg{width:20px;height:20px}
.fx-ath{width:64px;height:64px;border-radius:50%;background:linear-gradient(150deg,var(--clay1-hi),var(--clay2));color:var(--clay-ink);display:grid;place-items:center;font-weight:600;font-size:20px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.fx-mh{grid-column:1/-1;font-size:12.5px;font-weight:600;color:var(--ink-2);padding:14px 4px 4px;border-bottom:1px solid var(--line);margin-bottom:4px}
.fx-mh:first-child{padding-top:2px}
.fx-body.list .fx-mh{padding:10px 12px 6px;margin:0;background:var(--panel);position:sticky;top:31px;z-index:1}
.fx-mv em{font-style:normal;color:var(--ink-3);font-size:12.5px;margin-left:6px}
.fx-mv.on em{color:#fff}

/* Preview with its panel */
.ql-body{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;position:relative}
.ql.withp .ql-body{grid-template-columns:minmax(0,1fr) 380px}
.ql-b.act{background:#f3f0ea;color:#121212}
.ql-panel{background:var(--panel);color:var(--ink);display:flex;flex-direction:column;min-height:0;border-radius:16px 0 0 16px;margin:0 0 0 8px;overflow:hidden}
.ql-panel svg{width:16px;height:16px}
.ql-scrim{display:none}
.ql-tabs{display:flex;align-items:center;gap:4px;padding:10px 10px 0 14px;border-bottom:1px solid var(--line)}
.ql-tabs button{border:0;background:none;padding:10px 8px;font:inherit;font-size:14px;font-weight:500;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.ql-tabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.ql-tabs .ql-pclose{margin-left:auto;width:32px;height:32px;border-radius:50%;padding:0;display:grid;place-items:center;border:0;margin-bottom:6px}
.ql-tabs .ql-pclose:hover{background:var(--tile)}
.ql-cmts{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:14px}
.ql-cmts .tschip{margin-right:6px}
.ql-compose{position:relative;display:flex;gap:8px;align-items:center;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.ql-compose .tinput{flex:1;min-width:0;border:0;background:var(--tile);border-radius:999px;height:40px;padding:0 14px;font:inherit;font-size:15px;color:var(--ink);outline:none}
.ql-compose .tinput:focus{box-shadow:0 0 0 2px var(--ink)}
.ql-compose .tschip{flex:none;height:32px;padding:0 9px;border-radius:999px;margin:0;opacity:.55}
.ql-compose .tschip.on{background:var(--cta);color:var(--on-cta);opacity:1}
.ql-compose .tpop{bottom:62px}
.ql-det{flex:1;overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:14px}
.ql-det .linkbtn{text-align:left;font-size:13.5px}
.ql-panel .chips .chip,.up2 .chips .chip,#shForm .chips .chip{background:var(--panel);color:var(--ink-2);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.ql-panel .chips .chip[aria-pressed="true"],.up2 .chips .chip.on,#shForm .chips .chip.on{background:var(--cta);color:var(--on-cta);box-shadow:none}

/* Recent */
.rc-day{margin-top:22px}
.rc-day h2{font-size:15px;font-weight:600;margin:0 4px 10px;color:var(--ink-2)}
.rc-g{background:var(--panel);border-radius:18px;box-shadow:var(--ring);margin-bottom:10px;overflow:hidden}
.rc-g.hasnew{box-shadow:inset 0 0 0 1.5px var(--fx-sel-soft),var(--ring)}
.rc-g summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer}
.rc-g summary::-webkit-details-marker{display:none}
.rc-g summary .av{width:38px;height:38px;flex:none}
.rc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rc-t b{font-size:15px;font-weight:600}
.rc-t>span{font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-when{font-size:12.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.rc-chev{display:grid;color:var(--ink-3);transition:transform .15s}
.rc-chev svg{width:16px;height:16px}
.rc-g[open] .rc-chev{transform:rotate(180deg)}
.rc-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 8px;padding:0 10px 8px;border-top:1px solid var(--line)}
.rc-f{display:flex;align-items:center;gap:10px;border:0;background:none;padding:8px 6px;border-radius:10px;text-align:left;font:inherit;color:var(--ink);min-width:0}
.rc-f:hover{background:var(--tile)}
.rc-th{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:8px;overflow:hidden;background:var(--tile)}
.rc-th .fx-th img{width:44px;height:44px;max-width:none;max-height:none;object-fit:cover;border-radius:0;box-shadow:none}
.rc-th .fx-th.vid,.rc-th .fx-th.doc{width:44px;height:44px;border-radius:0}
.rc-th .fx-th.doc em,.rc-th .fx-badge{display:none}
.rc-th svg{width:18px;height:18px}
.rc-n{flex:1;min-width:0;display:flex;flex-direction:column}
.rc-n b{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-n span{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-a{display:flex;gap:8px;padding:0 16px 12px}
.rc-a:empty{display:none}

/* Team upload sheet */
@media (min-width:861px){.modal:has(.up2),.modal:has(#shForm){width:min(620px,calc(100% - 32px))}}
.up2-drop.over{outline:2px dashed var(--fx-sel);outline-offset:-6px}
.up2-fields{display:flex;flex-direction:column;gap:14px}
.up2-dest{align-self:flex-start}
.gi-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.up2-sum{font-size:13px;color:var(--ink-2);background:var(--canvas);border-radius:12px;padding:10px 12px;line-height:1.4}
.pp-add{border:0!important;background:var(--panel)!important;border-radius:999px;height:30px;padding:0 12px!important;font-size:13px!important;text-align:left!important;min-width:140px;flex:0 1 180px!important;box-shadow:inset 0 0 0 1px var(--line-2)}
.group .gi.stack .chips{gap:6px}

@media (max-width:860px){
  .fx-acts{padding:4px 0 10px;border:0}
  .fx-card{border-radius:14px;border:0;margin-bottom:8px;background:var(--panel)}
  .ql.withp .ql-body{grid-template-columns:minmax(0,1fr)}
  .ql-panel{position:absolute;left:0;right:0;bottom:0;height:72%;margin:0;border-radius:24px 24px 0 0;z-index:3;box-shadow:0 -10px 40px rgba(0,0,0,.35)}
  .ql-scrim{display:block;position:absolute;inset:0;z-index:2;background:rgba(0,0,0,.35)}
  .rc-files{grid-template-columns:minmax(0,1fr)}
  .rc-when{display:none}
}

/* "Locations" in the sidebar opens the top level */
.fx-shb{border:0;background:none;font:inherit;font-size:11px;font-weight:600;color:var(--ink-3);text-align:left;border-radius:6px;cursor:pointer;margin:0 0 0 -2px;padding-left:12px}
.fx-shb:hover{color:var(--ink);background:var(--fx-hilite)}
.fx-shb[aria-current="true"]{color:var(--ink)}

/* Drag to select */
.fx-marquee{position:absolute;z-index:3;pointer-events:none;border:1px solid var(--info);background:color-mix(in srgb,var(--info) 14%,transparent);border-radius:3px}
.fx-body.marqueeing{user-select:none;-webkit-user-select:none;cursor:default}
.fx-body.marqueeing .fx-it{pointer-events:none}

/* Storage used: bottom of the sidebar on a computer, in the status bar on a phone */
.fx-store{margin-top:auto;display:flex;align-items:center;gap:6px;padding:10px 10px 2px;font-size:12.5px;color:var(--ink-3);cursor:default}
.fx-store b{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.fx-store svg,.fx-store-m svg{width:13px;height:13px;flex:none}
.fx-store-m{display:none}
@media (max-width:860px){ .fx-store-m{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:12px;color:var(--ink-3)} .fx-store-m b{color:var(--ink-2);font-weight:600} }