/* stylesheet for /index.html — the shell links it as /css/index.css, stamped with this file's mtime by server.mjs so an edit is never served stale */
:root{
  /* ShotDeck-style: neutral near-black so the photography carries all the colour; one restrained accent */
  --bg:#0d0d0f; --bg2:#161618; --panel:#161719; --panel2:#202126;
  --line:#2a2b2f; --line2:#3b3d42; --txt:#e9eaec; --mut:#9a9ca2; --mut2:#6a6c72;
  --acc:#4a9fd4; --acc2:#74b6e4; --accd:#3a86bb; --accink:#07141d; --danger:#e0555f; --radius:5px;
  --bg-rgb:13,13,15; --ink-rgb:0,0,0; --acc-rgb:74,159,212; --acc2-rgb:116,182,228;
}
/* Google Material Symbols — one metric per glyph, so buttons stop shifting */
.micon{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased;user-select:none;flex:none}
.micon.sm{font-size:18px}.micon.lg{font-size:22px}
*{box-sizing:border-box}
html,body,#root{margin:0;padding:0;min-height:100%}
body{background:var(--bg);color:var(--txt);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--acc);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
header{position:sticky;top:0;z-index:40;background:rgba(var(--bg-rgb),.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{display:grid;grid-template-columns:minmax(auto,1fr) minmax(0,640px) minmax(max-content,1fr);align-items:center;gap:22px;padding:15px 28px;max-width:1820px;margin:0 auto}
.hleft{justify-self:start;min-width:0}
.hright{justify-self:stretch;display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.5px;cursor:pointer;white-space:nowrap}
.logo{width:28px;height:28px;border-radius:5px;background:var(--acc)}
.brand small{color:var(--mut);font-weight:600}
/* big centered search — flex shell holds image-chip, icon, input, attach button on one baseline */
.searchwrap{justify-self:stretch;width:100%;display:flex;align-items:center;gap:10px}
.search{flex:1;min-width:0;position:relative;display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:0 8px 0 15px;transition:.15s}
.search:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.18)}
.search.visual{border-color:rgba(var(--acc-rgb),.55);box-shadow:0 0 0 1px rgba(var(--acc-rgb),.28)}
.search.visual:focus-within{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.20)}
.search .si{color:var(--mut);font-size:22px;flex:none}
.search input{flex:1;min-width:0;background:transparent;border:none;padding:15px 2px;font-size:15.5px;outline:none}
/* archive totals: (i) button + popover */
.statwrap{position:relative;flex:none}
.infobtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--mut);cursor:pointer}
.infobtn .micon{font-size:19px}
.infobtn:hover,.infobtn.on{color:var(--acc2);border-color:var(--acc)}
.statpop{position:absolute;right:0;top:calc(100% + 6px);z-index:70;min-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 44px rgba(0,0,0,.5);padding:5px 5px 8px}
.statrow{display:flex;justify-content:space-between;gap:16px;padding:5px 9px;font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums}
.statrow b{color:var(--txt)}
.statnote{font-size:11px;color:var(--mut2);padding:6px 9px 0}
/* attached-image chip (image + text blended search) */
.imgchip{display:inline-flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:3px 5px 3px 3px;flex:none;max-width:190px}
.imgchip img{width:28px;height:28px;border-radius:7px;object-fit:cover;display:block;flex:none}
.imgchip .nm{font-size:11.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imgchip .rm{cursor:pointer;color:var(--mut);border-radius:6px;padding:1px}
.imgchip .rm:hover{color:var(--danger);background:rgba(244,63,94,.14)}
.attachbtn{flex:none;width:36px;height:36px;border-radius:10px;border:none;background:transparent;color:var(--mut);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.13s}
.attachbtn:hover{color:var(--acc2);background:var(--panel2)}
.attachbtn.on{color:var(--acc2);background:rgba(var(--acc-rgb),.14)}
.attachbtn input{display:none}
/* mode dropdown inside the search bar */
.modemenu{position:relative;flex:none}
.mdiv{width:1px;height:22px;background:var(--line);flex:none}
.modebtn{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 7px 0 11px;border:none;background:var(--panel2);border-radius:11px;color:var(--txt);cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;transition:.13s}
.modebtn:hover{background:var(--line)}
.modebtn .mi{font-size:18px;color:var(--acc2)}
.modebtn .cv{font-size:18px;color:var(--mut)}
.modepop{position:absolute;left:0;top:calc(100% + 9px);z-index:60;min-width:216px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 44px rgba(0,0,0,.5);padding:6px}
.modeopt{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--txt);font-size:13.5px;font-weight:600}
.modeopt:hover{background:var(--panel2)}
.modeopt.on{background:rgba(var(--acc-rgb),.12)}
.modeopt .mi{font-size:20px;color:var(--acc2);flex:none}
.modeopt .lb2{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.modeopt .sub{font-size:11px;color:var(--mut);font-weight:400}
.modeopt .ck{font-size:18px;color:var(--acc2);flex:none}
.modeopt input{display:none}
@media(max-width:560px){.modebtn .mlbl{display:none}}
select.sort{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
@media(max-width:760px){.bar{grid-template-columns:1fr;gap:12px}.hleft,.hright{justify-self:stretch}.hright{justify-content:flex-end}}
.filters{max-width:1680px;margin:0 auto;padding:0 24px 14px;display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:33px;line-height:1;white-space:nowrap;flex:none;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:0 14px;cursor:pointer;font-size:13px;color:var(--mut);transition:.13s;user-select:none}
.chip:hover{color:var(--txt);border-color:var(--line2)}
.chip.on{background:var(--acc);border-color:transparent;color:#fff}
.chip.acc2.on{background:var(--acc2)}
.selwrap{position:relative}
.selwrap select{appearance:none;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:7px 32px 7px 14px;font-size:13px;color:var(--mut);cursor:pointer;max-width:220px}
.selwrap select.set{color:#fff;border-color:var(--acc)}
.selwrap::after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--mut);font-size:11px}
.divider{width:1px;height:22px;background:var(--line)}
.clearbtn{background:none;border:none;color:var(--danger);cursor:pointer;font-size:13px;padding:6px 8px;border-radius:8px}
.clearbtn:hover{background:rgba(244,63,94,.1)}
.wrap{max-width:1680px;margin:0 auto;padding:18px 24px 90px}
/* left-sidebar list layout */
.listlayout{max-width:1680px;margin:0 auto;display:flex;gap:26px;padding:18px 24px 90px;align-items:flex-start}
.listmain{flex:1;min-width:0}
.listmain .wrap,.listmain .resultbar{max-width:none;margin:0;padding-left:0;padding-right:0}
.listmain .wrap{padding-top:10px;padding-bottom:40px}
.sbsection{display:flex;flex-direction:column;gap:9px}
.sblabel{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--mut)}
.selwrap.wide{width:100%}
.selwrap.wide select{max-width:none;width:100%}
/* scrollable searchable filter lists */
.sblabel .sbcnt{color:var(--mut2);font-weight:500;font-size:10.5px}
.sblabel .sbsel{color:var(--acc);cursor:pointer;font-weight:600;text-transform:none;letter-spacing:0;font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.sblabel .sbsel:hover{color:var(--danger)}
.sbsearch{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12.5px;outline:none;margin-bottom:6px}
.sbsearch:focus{border-color:var(--acc)}
.sbchips{max-height:168px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding:2px 2px 4px;align-content:flex-start}
.sbchips .chip{height:29px;font-size:12px;padding:0 10px;max-width:100%;gap:5px}
.sbchips .chip .cn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sbchips .chip .cc{opacity:.55;flex:none;font-size:11px}
.sbempty{padding:6px 4px;color:var(--mut2);font-size:12px;width:100%}
/* type-ahead combobox */
.cb{position:relative}
.cbinput{margin-bottom:0}
.cbtags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cbtag{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:var(--acc);border:1px solid transparent;border-radius:7px;padding:5px 8px;color:#fff}
.cbtagtxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}
.cbx{flex:none;cursor:pointer;opacity:.85;font-size:10.5px;line-height:1;padding:2px 3px;border-radius:5px}
.cbx:hover{opacity:1;background:rgba(255,255,255,.2)}
.cbck{flex:none;width:13px;text-align:center;color:var(--acc2);font-size:11px}
.cbopt.sel{color:var(--txt)}
.cbopt.sel .cn{font-weight:600}
.cbpop{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.5);padding:5px;max-height:280px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.cbopt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;cursor:pointer;font-size:12.5px;color:var(--mut)}
.cbopt.hi{background:rgba(var(--acc-rgb),.16);color:var(--txt)}
.cbopt .cn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbopt .cc{flex:none;opacity:.55;font-size:11px}
@media(max-width:860px){.listlayout{flex-direction:column;gap:14px}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:.18s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 8px 22px rgba(0,0,0,.45)}
.thumb{position:relative;aspect-ratio:16/10;background:var(--bg2);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.3s}
.card:hover .thumb img{transform:scale(1.05)}
.badges{position:absolute;top:9px;left:9px;display:flex;gap:6px;flex-wrap:wrap}
.badge{background:rgba(var(--bg-rgb),.78);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:3px 8px;font-size:11px;font-weight:600}
.badge.vid{color:var(--acc2)}
.batchtag{position:absolute;top:9px;right:9px;background:var(--acc);border-radius:7px;padding:3px 9px;font-size:11px;font-weight:800;letter-spacing:.4px}
.meta{padding:12px 13px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.brandrow{font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--acc2);text-transform:uppercase}
.title{font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dir{font-size:12px;color:var(--mut);margin-top:auto}
.detail{max-width:1680px;margin:0 auto;padding:22px 24px 90px}
.back{display:inline-flex;align-items:center;gap:7px;color:var(--txt);cursor:pointer;padding:9px 15px;border:1px solid var(--line);border-radius:10px;margin-bottom:18px;background:var(--panel);font-weight:600;font-size:13.5px;transition:.14s}
.back:hover{color:#fff;border-color:var(--acc);background:var(--panel2)}
.back:active{transform:translateY(1px)}
.dhead h1{font-size:clamp(20px,3vw,30px);margin:0 0 8px;line-height:1.2}
.dmeta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--mut);font-size:13.5px;margin-bottom:6px}
.dmeta b{color:var(--txt)} .dmeta a{color:var(--acc);border-bottom:1px dashed var(--acc)}
.collnav{display:flex;align-items:center;gap:12px;margin:20px 0 4px;position:sticky;top:0;z-index:20;background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(12px);padding:10px 0;border-bottom:1px solid var(--line)}
.collchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;padding:2px 0}
.collchips::-webkit-scrollbar{display:none}
.collnav .chip.on{background:var(--acc2);border-color:transparent;color:var(--accink);font-weight:700}
.dirbtn.mediadir{border-radius:6px;border:1px solid var(--line);height:33px;padding:0 14px;flex:none}
.section{margin:34px 0 0}
.section h2{font-size:16px;margin:0 0 15px;display:flex;align-items:center;gap:10px}
.section h2 .c{color:var(--mut);font-weight:500;font-size:13px}
/* uniform 4-column grid — every tile the same width & height; images are contained (letterboxed on the dark cell) */
.ugrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:1100px){.ugrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.ugrid{grid-template-columns:repeat(2,1fr)}}
.tile{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.tile img{width:100%;height:100%;object-fit:contain;display:block;transition:.2s}
.tile:hover img{transform:scale(1.03);filter:brightness(1.08)}
.playbtn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25)}
.playbtn div{width:52px;height:52px;border-radius:50%;background:rgba(var(--acc-rgb),.92);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.vlabel{position:absolute;top:8px;left:8px;background:rgba(var(--acc-rgb),.92);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:700;z-index:2}
.lb{position:fixed;inset:0;z-index:100;background:rgba(var(--ink-rgb),.97);display:flex;align-items:center;justify-content:center}
.lb img,.lb video{max-width:94vw;max-height:90vh;object-fit:contain;border-radius:6px;background:#000}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;padding:0;backdrop-filter:blur(4px);transition:.15s}
.lb .nav:hover{background:rgba(0,0,0,.82);border-color:#fff}
.lb .nav .micon{font-size:32px}
.lb .prev{left:22px}.lb .next{right:22px}
.lb .x{position:absolute;top:20px;right:22px;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;padding:0;backdrop-filter:blur(4px);transition:.15s}
.lb .x:hover{background:rgba(0,0,0,.82)}
.lb .x .micon{font-size:22px}
.lb .cap{color:var(--mut);font-size:13px;background:rgba(0,0,0,.5);padding:6px 14px;border-radius:20px;max-width:80vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbtop{position:absolute;top:20px;left:22px;display:flex;gap:10px;z-index:3;align-items:center}
.lb a.dl,.lbgallery{display:inline-flex;align-items:center;gap:7px;border-radius:20px;padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(4px);transition:.13s}
.lb a.dl .micon,.lbgallery .micon{font-size:18px}
.lb a.dl{color:var(--txt);background:rgba(255,255,255,.08);border:1px solid var(--line);font-weight:500}
.lb a.dl:hover{background:rgba(255,255,255,.14)}
.lbgallery{background:rgba(var(--acc-rgb),.92);border:1px solid rgba(var(--acc-rgb),.5);color:#fff}
.lbgallery:hover{background:var(--acc)}
/* progressive lightbox: dim+blur the low-res while a centered spinner shows the full-res is loading */
.lbimg{position:relative;display:flex;align-items:center;justify-content:center}
.lbimg .lbspin{position:absolute;width:34px;height:34px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;pointer-events:none}
.empty{text-align:center;padding:80px 20px;color:var(--mut)} .empty .big{font-size:44px;margin-bottom:10px}
.spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:sp .7s linear infinite;margin:30px auto}
@keyframes sp{to{transform:rotate(360deg)}}
.toTop{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--acc);border:none;cursor:pointer;font-size:20px;color:#fff;z-index:50}
@media(max-width:640px){.masonry{columns:2 150px}.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:11px}}

/* ---- richer additions ---- */
/* flat near-black — no accent glows competing with the imagery */
body{background:var(--bg)}
.tools{display:flex;align-items:center;gap:8px}
.selwrap.sortby select.sort{border-radius:10px 0 0 10px;border-right:none}
.dirbtn{background:var(--panel);border:1px solid var(--line);border-radius:0 10px 10px 0;padding:10px 13px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--txt);white-space:nowrap;transition:.13s}
.dirbtn:hover{border-color:var(--acc)}
.dirbtn .ar{font-size:16px;color:var(--acc);line-height:1}
.resultbar{max-width:1680px;margin:0 auto;padding:16px 24px 2px;display:flex;align-items:center;gap:9px 10px;flex-wrap:wrap;color:var(--mut);font-size:13px}
.resultbar .clearbtn{margin-left:2px}
.resultbar .count b{color:var(--txt);font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:5px 8px 5px 11px;font-size:12px;color:var(--txt);cursor:pointer;transition:.13s}
.pill:hover{border-color:var(--danger)}
.pill .k{color:var(--mut);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px}
.pill .rm{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:11px}
.pill:hover .rm{background:var(--danger);color:#fff}
.imgwrap{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bg2)}
.imgwrap img{width:100%;height:100%;display:block}
.ph{position:absolute;inset:0;background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 50%,var(--panel) 75%);background-size:200% 100%;animation:sh 1.3s infinite}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.fade{opacity:0;transition:opacity .4s ease}
.fade.on{opacity:1}
.cardover{position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--ink-rgb),.9),rgba(var(--ink-rgb),.15) 45%,transparent 70%);opacity:0;transition:.22s;display:flex;align-items:flex-end;padding:12px 13px;pointer-events:none}
.card:hover .cardover{opacity:1}
.cardover .go{color:#fff;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;transform:translateY(6px);transition:.22s}
.card:hover .cardover .go{transform:translateY(0)}
.metarow{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--mut);margin-top:auto;padding-top:2px}
.metarow .agc{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 0 100%}
/* director takes its own line; the counts ("9 sets", "847 assets") wrap to a row beneath it, each on one line */
.metarow{flex-wrap:wrap;row-gap:3px}
.metarow>span:not(.agc){flex:none;white-space:nowrap}
.grid.sk .skcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);position:relative;aspect-ratio:16/13;overflow:hidden}
.grid.sk .skcard::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 50%,var(--panel) 75%);background-size:200% 100%;animation:sh 1.3s infinite}
/* ---- login ---- */
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.loginbox{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:36px 30px;display:flex;flex-direction:column;align-items:center;gap:13px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.loginbox .logo{width:54px;height:54px;border-radius:15px}
.loginbox h1{margin:8px 0 0;font-size:20px;letter-spacing:.6px;font-weight:800}
.loginbox p{margin:0 0 6px;color:var(--mut);font-size:13px}
.loginbox input{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:12px 14px;outline:none;transition:.15s}
.loginbox input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.18)}
.loginbox button{width:100%;background:var(--acc);border:none;border-radius:11px;padding:12px;font-weight:700;cursor:pointer;margin-top:4px;color:#fff}
.loginbox button:disabled{opacity:.6;cursor:default}
.loginbox p b{color:var(--txt)}
.lrow{display:flex;justify-content:space-between;width:100%;font-size:12.5px;margin-top:2px}
.llink{color:var(--mut);cursor:pointer}
.llink:hover{color:var(--acc2)}
.llink.off{color:var(--mut2);cursor:default}
.lerr{width:100%;background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.4);color:#fda4af;border-radius:10px;padding:9px 12px;font-size:13px;text-align:center}
.logout{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:10px;height:40px;padding:0 13px;cursor:pointer;color:var(--mut);font-size:13px;flex:none;white-space:nowrap}
.logout:hover{color:var(--danger);border-color:var(--danger)}
.hlink{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:10px;height:40px;padding:0 13px;color:var(--mut);font-size:13px;flex:none;white-space:nowrap;text-decoration:none}
.hlink:hover{color:var(--acc2);border-color:var(--acc)}
.hlink .micon{font-size:19px}
@media(max-width:900px){.logout span{display:none}.logout{padding:0;width:40px;justify-content:center}}

/* ---- round-robin masonry: reads left-to-right, top-to-bottom ---- */
.masonry2{display:flex;gap:8px;align-items:flex-start}
.mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px}
@media(max-width:640px){.masonry2{gap:8px}.mcol{gap:8px}}

/* ---- filter labels (clarity) ---- */
.filters-lead{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--mut2);padding-right:2px}
.fgroup{display:inline-flex;align-items:center;gap:8px}
.flabel{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mut)}
.ctl-label{font-size:12px;color:var(--mut);white-space:nowrap}
@media(max-width:900px){.ctl-label,.filters-lead{display:none}}

/* ---- card date ---- */
.cdate{font-size:11px;color:var(--mut2);padding:1px 13px 0}

/* ---- confirm modal ---- */
.modalwrap{position:fixed;inset:0;z-index:120;background:rgba(var(--ink-rgb),.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadein .15s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 26px 22px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.modal h3{margin:0 0 8px;font-size:18px}
.modal p{margin:0 0 20px;color:var(--mut);font-size:14px;line-height:1.5}
.modalbtns{display:flex;justify-content:flex-end;gap:10px}
.mbtn{border:1px solid var(--line);background:var(--panel2);color:var(--txt);border-radius:10px;padding:10px 18px;font-weight:600;cursor:pointer;font-size:14px}
.mbtn.ghost:hover{border-color:var(--line2)}
.mbtn.danger{background:var(--danger);border-color:transparent;color:#fff}
.mbtn.danger:hover{filter:brightness(1.08)}

/* ---- visual search controls ---- */
/* segmented mode switch — lives in the sidebar now, stretches full-width */
.segmented{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px}
.seg{flex:1;height:34px;padding:0 10px;border:none;background:transparent;border-radius:8px;cursor:pointer;color:var(--mut);font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:.13s}
.seg:hover{color:var(--txt)}
.seg.on{background:var(--acc);color:#fff}
.seg .micon{font-size:18px}
.seg input{display:none}
.loadmore{background:var(--acc);border:none;color:#fff;border-radius:11px;padding:11px 26px;font-weight:700;cursor:pointer;font-size:14px}
.loadmore:hover{filter:brightness(1.08)}
.loadmore:disabled{opacity:.6;cursor:default}
.btnlbl{font-size:12.5px;font-weight:600}
/* ---- filter controls (sort / has video / batch / comboboxes — inside the filters modal) ---- */
.sbctl{display:flex;flex-direction:column;gap:8px}
.sbsort{display:flex;gap:0}
.sbsort .selwrap{flex:1;min-width:0}
.sbsort .selwrap select.sort{width:100%;max-width:none;border-radius:10px 0 0 10px;border-right:none;padding:9px 30px 9px 12px}
.sbsort .dirbtn{border-radius:0 10px 10px 0;flex:none}
.badge.match{color:var(--accink);background:var(--acc2);border-color:transparent;font-weight:800}
.epill{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:6px;height:34px;padding:0 12px;cursor:pointer;color:var(--txt);font-size:12.5px;font-variant-numeric:tabular-nums;flex:none}
.epill:hover{border-color:var(--acc)}
.toggbtn{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer;display:flex;align-items:center;gap:7px;font-size:13px;color:var(--mut);white-space:nowrap;transition:.13s}
.toggbtn:hover{border-color:var(--acc);color:var(--txt)}
.toggbtn.on{color:var(--txt);border-color:var(--line2)}
.toggbtn .edot{background:var(--mut2)}
.edot{width:8px;height:8px;border-radius:50%;background:var(--mut2)}
.edot.on{background:var(--acc2);box-shadow:0 0 0 0 rgba(var(--acc2-rgb),.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--acc2-rgb),.5)}70%{box-shadow:0 0 0 7px rgba(var(--acc2-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--acc2-rgb),0)}}
.vbanner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 15px;margin-bottom:16px;background:var(--panel);border:1px solid var(--line);border-radius:6px}
.vbanner .vlabel2{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.5px;font-size:12.5px}
.vlabel2{font-weight:600}.vcount{color:var(--mut);font-size:13px}.vbanner .clearbtn{margin-left:auto}
/* search-index warmup banner (fresh-boot: index loading in the worker thread) */
.spinner.sm{width:15px;height:15px;border-width:2px;margin:0;flex:none}
.idxwarm{display:flex;align-items:center;gap:11px;padding:11px 15px;margin-bottom:16px;font-size:13px;background:rgba(var(--acc-rgb),.10);border:1px solid rgba(var(--acc-rgb),.35);border-radius:6px;color:var(--txt)}
.idxwarm b{font-weight:600}

/* ---- embedding dashboard ---- */
.ehead{font-size:16px;margin:28px 0 12px}
.activelist{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.achip{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 14px;cursor:pointer}
.achip:hover{border-color:var(--acc)}
.achip .aname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.achip .aprog{width:120px;height:7px;border-radius:6px;background:var(--panel2);overflow:hidden;flex:none}
.achip .aprog span{display:block;height:100%;background:var(--acc)}
.achip .acount{color:var(--mut);font-size:12px;font-variant-numeric:tabular-nums;flex:none;width:96px;text-align:right}
/* ---- video match + playback ---- */
.lb img.lblo{filter:blur(8px) brightness(.72);transform:scale(1.01)}
/* grouped search results — flat: title + divider, images below (no boxed card) */
.resgroup{margin:0 0 40px}
.rghead{display:flex;align-items:baseline;gap:12px;padding:0 0 11px;cursor:pointer;border-bottom:1px solid var(--line);margin-bottom:16px}
.rghead:hover .rgname{color:var(--acc)} .rghead:hover .rgopen{opacity:1}
.rgbrand{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--acc2)}
.rgname{font-size:17px;font-weight:700;color:var(--txt);transition:.13s}
.rgdir{font-size:12.5px;color:var(--mut)}
.rgopen{margin-left:auto;font-size:12px;color:var(--acc);opacity:.5;transition:.15s;white-space:nowrap}
.resset{margin-bottom:18px}
.rssethead{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);margin:0 0 9px;display:flex;align-items:center;gap:8px}
.rssethead span{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:1px 8px;font-size:11px;color:var(--txt)}
.csheet{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:10px}
.stile{position:relative;border-radius:8px;overflow:hidden;background:var(--bg2);cursor:pointer;flex:none}
.stile .stimg{width:100%;height:100%;object-fit:cover;display:block;transition:.15s}
.stile:hover .stimg{filter:brightness(1.08)}
.vplace{position:absolute;inset:0;width:100%;background:linear-gradient(135deg,var(--bg2),var(--bg));display:flex;align-items:center;justify-content:center}
.tile .vplace{position:absolute;inset:0}
.stile .stscore{position:absolute;left:0;right:0;bottom:0;padding:10px 7px 5px;background:linear-gradient(to top,rgba(var(--ink-rgb),.85),transparent);color:#fff;font-size:11px;font-weight:700;opacity:0;transition:.15s;text-align:right}
.stile:hover .stscore{opacity:1}
/* lightbox footer: one flow column pinned to the bottom (action chips · size · tags · dupes · caption) */
.lbfoot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:9px;padding:26px 16px 16px;background:linear-gradient(to top,rgba(var(--ink-rgb),.72),transparent);pointer-events:none}
.lbfoot>*{pointer-events:auto;margin:0}
.lbchips{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
.lbchip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--txt);border-radius:9px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px);transition:.13s}
.lbchip:hover{background:rgba(255,255,255,.16)}
.lbchip.act{background:rgba(var(--acc-rgb),.9);border-color:transparent;color:#fff}
.lbchip.act:hover{background:var(--acc)}
.lbchip .micon{font-size:16px}
.lbsizes{display:inline-flex;gap:2px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:3px;backdrop-filter:blur(6px)}
.lbsz{min-width:30px;height:26px;padding:0 8px;border:none;background:transparent;color:var(--mut);border-radius:6px;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.3px;transition:.12s}
.lbsz:hover{color:var(--txt)}
.lbsz.on{background:rgba(255,255,255,.16);color:#fff}
.lbdupes{display:flex;flex-wrap:wrap;gap:7px 9px;justify-content:center;align-items:center;max-width:84vw;color:var(--mut);font-size:12px}
.lbduphead{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.lbduphead b{color:#fff;font-weight:700}
.lbduphead .micon{color:var(--acc2)}
.lbdupmut{opacity:.7}
.lbduplist{display:inline-flex;flex-wrap:wrap;gap:7px;justify-content:center}
.lbdup{display:inline-flex;align-items:center;gap:4px;background:rgba(var(--acc2-rgb),.16);border:1px solid rgba(var(--acc2-rgb),.45);color:#ece7ff;border-radius:6px;padding:4px 11px;font-size:12px;cursor:pointer;backdrop-filter:blur(6px)}
.lbdup:hover{background:var(--acc2);color:var(--accink)}
.lbdup .micon{font-size:14px}
.lbdup.exact{background:rgba(var(--acc-rgb),.92);border-color:transparent;color:#fff;font-weight:700}
.lbdup.exact:hover{background:var(--acc);color:#fff}
.lbtags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:80vw}
.lbtag{background:rgba(var(--acc-rgb),.22);border:1px solid rgba(var(--acc-rgb),.5);color:#ece7ff;border-radius:6px;padding:4px 11px;font-size:12px;cursor:pointer;backdrop-filter:blur(6px)}
.lbtag:hover{background:var(--acc);color:#fff}
.vtile{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--bg2),var(--bg))}
.vtile video{width:100%;height:100%;object-fit:cover;display:block}
.badge.vidmatch{color:#fff;background:var(--acc);border-color:transparent;font-weight:700}
.vwrap{position:relative;display:flex;align-items:center;justify-content:center;max-width:94vw;max-height:90vh}
.vprep{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(var(--ink-rgb),.72);color:var(--txt);font-size:14px;border-radius:6px}
/* ---- icon alignment (Material Symbols) across buttons ---- */
.back .micon{font-size:20px;color:var(--acc2)}
.dirbtn .ar.micon{font-size:18px}
.logout .micon{font-size:19px}
.clearbtn .micon{font-size:16px;vertical-align:-3px}
.playbtn div .micon{font-size:28px;color:#fff}
.vprep.vnop{max-width:340px;text-align:center;line-height:1.5;font-size:12px}
.playbtn.nop{background:rgba(0,0,0,.62);padding:10px}
.playbtn.nop span{font-size:10.5px;line-height:1.45;text-align:center;color:var(--mut);letter-spacing:.2px}
.vlabel .micon{font-size:14px;vertical-align:-2px}
.toTop .micon{font-size:22px}
.badge .micon{font-size:14px;vertical-align:-2px}
.metarow .agc .micon{font-size:15px;vertical-align:-3px}
.pill .rm .micon{font-size:12px}
.cbx .micon,.cbtag .cbx .micon{font-size:14px}
.empty .big .micon{font-size:46px;color:var(--mut2)}
.vbanner .vlabel2 .micon{font-size:18px;vertical-align:-4px;color:var(--acc2)}
.go .micon{font-size:16px;vertical-align:-3px}
.loadmore .micon{font-size:17px;vertical-align:-3px}
.chip .micon{font-size:16px}
.rgopen .micon,.dl .micon{vertical-align:-3px}
.lbdupes .micon{font-size:15px;vertical-align:-3px}
/* ---- right-side inspector panel (docked, replaces the full-screen lightbox) ---- */
:root{--panelw:min(560px,44vw)}
body.panel-open{padding-right:var(--panelw)}                 /* push the page over so the grid stays fully visible & clickable */
body{transition:padding-right .18s ease}
.inspector{position:fixed;top:0;right:0;bottom:0;width:var(--panelw);z-index:60;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-14px 0 44px rgba(0,0,0,.5);animation:slidein .18s ease}
@keyframes slidein{from{transform:translateX(24px);opacity:.3}to{transform:translateX(0);opacity:1}}
.insphead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line);flex:none}
.inspnav{display:flex;align-items:center;gap:7px}
.insbtn{width:34px;height:34px;border-radius:6px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.13s;padding:0}
.insbtn:hover{border-color:var(--acc);color:#fff}
.insbtn.off{opacity:.45}
.insbtn.off:hover{opacity:1}
.insbtn .micon{font-size:20px}
.inspcount{color:var(--mut);font-size:12.5px;font-variant-numeric:tabular-nums;margin-left:5px}
.inspscroll{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
.inspmedia{background:#000;display:flex;align-items:center;justify-content:center;min-height:220px;max-height:64vh;flex:none}
.inspmedia .lbimg{width:100%}
.inspmedia .lbimg img{max-width:100%;max-height:64vh;object-fit:contain;display:block;margin:0 auto;border-radius:0}
.inspmedia .vwrap,.inspmedia video{max-width:100%;max-height:64vh}
.inspmeta{padding:14px;display:flex;flex-direction:column;gap:13px}
.inspname{font-size:12.5px;color:var(--mut);word-break:break-word;font-variant-numeric:tabular-nums}
.inspactions{display:flex;gap:8px;flex-wrap:wrap}
/* re-skin the shared chips for the (lighter) panel surface, left-aligned in flow */
.inspmeta .lbchips,.inspmeta .lbtags{justify-content:flex-start}
.inspmeta .lbdupes{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;max-width:none;position:static;transform:none}
.inspmeta .lbchip{background:var(--panel2);border-color:var(--line);color:var(--txt);backdrop-filter:none}
.inspmeta .lbchip:hover{background:var(--line)}
.inspmeta .lbchip.act{background:var(--acc);border-color:transparent;color:#fff}
.inspmeta .lbchip.act:hover{background:var(--accd)}
.inspmeta .lbsizes{background:var(--bg2);border-color:var(--line);backdrop-filter:none}
.inspmeta .lbsz.on{background:var(--acc);color:#fff}
.inspmeta .lbtag{background:var(--panel2);border:1px solid var(--line);color:var(--mut);backdrop-filter:none}
.inspmeta .lbtag:hover{background:var(--acc);color:#fff;border-color:transparent}
.inspmeta .lbdup{backdrop-filter:none}
.inspmeta .lbgallery{background:var(--acc);border-color:transparent}
.inspmeta .lbgallery:hover{background:var(--accd)}
.inspmeta .lbduplist{justify-content:flex-start}
/* ================= 3-pane workspace (v3 layout) ================= */
#root{display:flex;flex-direction:column;height:100vh;overflow:hidden}
header{position:static;flex:none}
.bar{padding:11px 18px}
.hleft{display:flex;align-items:center;gap:10px}
.workspace{flex:1;min-height:0;display:flex;align-items:stretch;overflow:hidden;width:100%}
.dragger{flex:none;width:6px;cursor:col-resize;background:transparent;transition:background .12s}
.dragger:hover{background:var(--acc)}
.draggerh{flex:none;height:6px;cursor:row-resize;background:transparent;transition:background .12s}
.draggerh:hover{background:var(--acc)}
.middle{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;padding:16px 18px}
.mgrid{max-width:1500px;margin:0 auto}
.rmasonry{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
/* right panel: 40% preview / 60% gallery */
.rpane{flex:none;width:clamp(420px,46vw,720px);display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--panel);overflow:hidden}
.rphead{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line)}
.rptitle{min-width:0;display:flex;flex-direction:column;line-height:1.25;overflow:hidden}
.rptitle b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpbrand{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--acc2)}
.rpdate{font-size:11px;color:var(--mut);display:inline-flex;align-items:center;gap:3px;margin-top:1px}
.rpdate .micon{font-size:13px}
/* set chips live in the header, under the date */
.rphead .rptitle{flex:1}
.rphead:has(.collchips){align-items:flex-start}
.rptitle .collchips{flex-wrap:wrap;overflow:visible;gap:6px;margin-top:8px}
.rptitle .chip{height:26px;font-size:11.5px;padding:0 10px}
.rptop{flex:2 1 0;min-height:0;display:flex;flex-direction:column;border-bottom:1px solid var(--line);overflow:hidden}
.rpbot{flex:3 1 0;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden}
.rphbtns{display:flex;gap:6px;flex:none}
/* recent-searches dropdown */
.searchwrap{position:relative}
.histpop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 44px rgba(0,0,0,.5);padding:5px;max-height:340px;overflow-y:auto}
.histhead{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mut2);padding:6px 9px 4px}
.histrow{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:6px;cursor:pointer;color:var(--txt);font-size:13.5px}
.histrow:hover{background:var(--panel2)}
.histrow .micon{color:var(--mut)}
.hq{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx{color:var(--mut2);opacity:0;padding:2px;border-radius:4px}
.histrow:hover .hx{opacity:.9}
.hx:hover{color:var(--danger);background:rgba(224,85,95,.14)}
/* columns layout: gallery-list column + full-height image column */
.rpane .rpcols{flex:1;min-height:0;display:flex;overflow:hidden}
.rpstack{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
/* focus layout: the pane is a layer over the whole workspace (the grid stays mounted and scrolled underneath),
   and similar shots are a column of their own instead of an overlay on the gallery grid */
.workspace{position:relative}
.rpane.focus{position:absolute;inset:0;width:auto;z-index:20;border-left:none}
.rpane.focus .rpgrid:not(.simgrid){grid-template-columns:repeat(3,1fr)}
.rpsimcol{flex:none;min-width:0;display:flex;flex-direction:column;border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--panel);overflow:hidden}
.modepill{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;flex:none;background:var(--panel)}
.modepill button{background:none;border:0;padding:0 11px;height:36px;font-size:12.5px;font-weight:600;color:var(--mut);cursor:pointer}
.modepill button:hover{color:var(--txt)}
.modepill button.on{background:var(--panel2);color:var(--txt)}
.rpgalcol{flex:none!important;border-right:1px solid var(--line);max-width:calc(100% - 6px)}
.rpsimcol{max-width:calc(100% - 6px)}
/* the last column left standing once the preview is hidden */
.rpfill{flex:1 1 0!important;width:auto!important;border-right:none}
.rpimgcol{flex:1;min-width:0;display:flex;flex-direction:column;background:#000;overflow:hidden}
.rpimgcol .apv{height:100%}
.rpimgcol .apmeta{max-height:42%}
/* asset preview */
.apv{display:flex;flex-direction:column;height:100%;overflow:hidden}
.apmedia{flex:1;min-height:0;background:#000;display:flex;align-items:center;justify-content:center}
.apmedia .lbimg{width:100%;height:100%}
.apmedia .lbimg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;margin:0 auto}
.apmedia .vwrap,.apmedia video{max-width:100%;max-height:100%}
.apmeta{flex:none;max-height:52%;overflow-y:auto;padding:10px 13px;display:flex;flex-direction:column;gap:9px}
.aprow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.apname{font-size:12px;color:var(--mut);word-break:break-word;flex:1;min-width:0}
.apbtns{display:flex;gap:6px;flex:none}
.apmeta .lbchips,.apmeta .lbtags{justify-content:flex-start}
.apmeta .lbdupes{position:static;transform:none;flex-direction:column;align-items:flex-start;justify-content:flex-start;max-width:none;gap:7px}
.apmeta .lbchip{background:var(--panel2);border-color:var(--line);color:var(--txt);backdrop-filter:none}
.apmeta .lbchip.act{background:var(--acc);border-color:transparent;color:#fff}
.apmeta .lbsizes{background:var(--bg2);border-color:var(--line);backdrop-filter:none}
.apmeta .lbsz.on{background:var(--acc);color:#fff}
.apmeta .lbtag{background:var(--panel2);border:1px solid var(--line);color:var(--mut);backdrop-filter:none}
.apmeta .lbtag:hover{background:var(--acc);color:#fff;border-color:transparent}
.apmeta .lbdup{backdrop-filter:none}
/* bottom gallery grid + collection chips */
.rpbothead{flex:none;display:flex;align-items:center;gap:7px 10px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line)}
.rpbothead .collchips{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.rpbothead .chip{height:26px;font-size:11.5px;padding:0 10px}
.rpcount{font-size:11.5px;color:var(--mut);white-space:nowrap;flex:none}
.rpgrid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:10px 0 0;align-content:start;overflow-y:auto}
.gtwrap{min-width:0}
.gtwrap .tile{width:100%}
/* similar overlay over the 60% */
.simoverlay{position:absolute;inset:0;z-index:5;background:var(--panel);display:flex;flex-direction:column;animation:fadein .12s ease}
.simhead{flex:none;display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.simhead .rpcount{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 7px;margin-left:6px}
.simgrid{padding:0}
.rpgrid.simgrid{grid-template-columns:repeat(3,1fr)}
/* embed dashboard modal */
@media(max-width:900px){.rpane{position:fixed;top:0;right:0;bottom:0;width:min(100vw,560px);z-index:80}}
/* on-demand full-screen asset view (from the inspector's full-screen button) */
.fsview{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.97);display:flex;align-items:center;justify-content:center;cursor:zoom-out;animation:fadein .12s ease}
.fsview img{max-width:96vw;max-height:96vh;object-fit:contain}
/* small game-style loading spinner, pinned bottom-right while the full-res decodes */
.fsview .fsload{position:fixed;bottom:20px;right:20px;width:22px;height:22px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;pointer-events:none}
.fsview .fsx{position:fixed;top:18px;right:18px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.fsview .fsx:hover{background:rgba(255,255,255,.2)}
.fsview .fsdl{position:fixed;top:18px;right:64px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.fsview .fsdl:hover{background:rgba(255,255,255,.2)}
/* highlighted tile — the asset currently open in the inspector */
/* selection ring: an overlay element on top of the image, so it's always fully visible and never clipped by the scroll container */
.tile{position:relative}
.hlring{position:absolute;inset:0;border:3px solid var(--acc);border-radius:6px;pointer-events:none;z-index:5;box-shadow:0 0 0 1px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.35);animation:hlflash .45s ease}
@keyframes hlflash{0%{border-color:var(--acc2)}100%{border-color:var(--acc)}}
.panel-open .toTop{right:calc(var(--panelw) + 22px)}
/* gallery quick-look panel */
.card.hl{outline:3px solid var(--acc);outline-offset:2px}
.insptitle{font-size:17px;font-weight:700;line-height:1.25;word-break:break-word;margin:1px 0 2px}
.inspmedia.inspcover{background:var(--bg2)}
.inspmedia.inspcover img{max-height:40vh}
/* in-panel gallery grid (browse the whole gallery without leaving the panel) */
.inspgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding:2px 14px 16px}
.inspgt{aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.inspgt img{width:100%;height:100%;object-fit:cover;display:block;transition:.15s}
.inspgt:hover img{filter:brightness(1.1);transform:scale(1.03)}
.inspgv{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg2),var(--bg));color:var(--mut)}
.inspgv .micon{font-size:30px}
.inspmeta .lbtag.on{background:var(--acc);color:#fff;border-color:transparent}
@media(max-width:760px){:root{--panelw:100vw} body.panel-open{padding-right:0} .inspector{width:100vw;border-left:none} .panel-open .toTop{right:22px}}
/* ---- drag-and-drop image search overlay ---- */
.dropzone{position:fixed;inset:0;z-index:150;background:rgba(var(--bg-rgb),.78);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;pointer-events:none;animation:fadein .12s ease}
.dzbox{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--acc2);border:2.5px dashed rgba(var(--acc-rgb),.7);border-radius:18px;padding:44px 60px;background:rgba(var(--acc-rgb),.06)}
.dzbox .micon{font-size:52px}
.dztxt{font-size:16px;font-weight:700;letter-spacing:.3px;color:var(--txt)}
/* ---- references basket ---- */
.stbasket{position:absolute;bottom:8px;right:8px;z-index:3;width:26px;height:26px;border-radius:7px;border:1px solid rgba(255,255,255,.18);background:rgba(var(--bg-rgb),.72);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;backdrop-filter:blur(6px);transition:.12s}
.tile:hover .stbasket{display:inline-flex}
.stbasket:hover{background:var(--acc);border-color:transparent}
.stbasket.on{display:inline-flex;background:var(--acc);border-color:transparent}
.stbasket .micon{font-size:15px}
/* find-similar on a tile (similar-shots column): bottom-left twin of the basket button */
.stsim{position:absolute;bottom:8px;left:8px;z-index:3;width:26px;height:26px;border-radius:7px;border:1px solid rgba(255,255,255,.18);background:rgba(var(--bg-rgb),.72);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;backdrop-filter:blur(6px)}
.tile:hover .stsim{display:inline-flex}
.stsim:hover{background:var(--acc);border-color:transparent}
.stsim .micon{font-size:15px}
.basketbar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:90;display:flex;align-items:center;gap:14px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:8px 10px 8px 15px;box-shadow:0 12px 40px rgba(0,0,0,.55);max-width:min(780px,94vw)}
.bkhead{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--txt);white-space:nowrap;flex:none}
.bkhead b{color:var(--acc2)}
.bkstrip{display:flex;align-items:center;gap:6px;overflow:hidden;flex:1;min-width:0}
.bkthumb{position:relative;width:38px;height:38px;border-radius:6px;overflow:hidden;background:var(--bg2);flex:none;display:flex;align-items:center;justify-content:center;color:var(--mut2)}
.bkthumb img{width:100%;height:100%;object-fit:cover;display:block}
.bkthumb .bkrm{position:absolute;top:0;right:0;width:16px;height:16px;border:none;background:rgba(0,0,0,.62);color:#fff;border-radius:0 0 0 6px;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.bkthumb:hover .bkrm{display:flex}
.bkrm .micon{font-size:12px}
.bkmore{font-size:12px;color:var(--mut);flex:none;padding:0 2px}
.bkactions{display:flex;align-items:center;gap:6px;flex:none}
.bkzip{display:inline-flex;align-items:center;gap:6px;background:var(--acc);border:none;color:#fff;border-radius:9px;padding:9px 14px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.bkzip:hover{filter:brightness(1.08)}
.bkzip:disabled{opacity:.6;cursor:default}
.bkclear{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--mut);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.bkclear:hover{color:var(--danger);border-color:var(--danger)}
.bkhead .micon,.bkzip .micon,.bkclear .micon{font-size:16px}
@media(max-width:560px){.bkstrip{display:none}}
/* ---- projects strip (keyword matches shown above shot results) ---- */
.projstrip{margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--line)}
.pshead{font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:7px;margin-bottom:10px}
.pshead b{color:var(--txt);text-transform:none;letter-spacing:0}
.pshead .micon{color:var(--acc2);font-size:16px}
.psrow{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.psrow::-webkit-scrollbar{height:7px}
.pscard{flex:none;width:150px;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;transition:.14s}
.pscard:hover{border-color:var(--acc);transform:translateY(-2px)}
.psthumb{aspect-ratio:16/10;background:var(--bg2);overflow:hidden}
.psthumb img{width:100%;height:100%;object-fit:cover;display:block}
.psmeta{padding:7px 9px 9px}
.psbrand{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--acc2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psname{font-size:12px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- filters modal (tune button in the search box), active-filter chips, the browse bar ---- */
.filtbtn{position:relative}
.fbadge{position:absolute;top:2px;right:2px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--acc);color:#fff;font-size:10px;font-weight:800;line-height:15px;text-align:center}
.filtmodal{width:min(760px,94vw);max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.filtmodal .rphead .clearbtn{font-size:12.5px}
.filtbody{flex:1;min-height:0;overflow-y:auto;padding:16px 18px 24px}
.filtcols{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
.filtcol{display:flex;flex-direction:column;gap:16px;min-width:0}
@media(max-width:640px){.filtcols{grid-template-columns:1fr}}
.filtfoot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-top:1px solid var(--line);color:var(--mut);font-size:12.5px}
.afilters{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
.aflead{color:var(--mut);font-size:12px;margin-right:2px}
.afchip{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 5px 0 9px;border-radius:6px;background:rgba(var(--acc-rgb),.16);border:1px solid rgba(var(--acc-rgb),.4);color:var(--txt);font-size:12px;font-weight:600;max-width:220px}
.afchip .aft{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afx{cursor:pointer;opacity:.7;font-size:14px;border-radius:4px}
.afx:hover{opacity:1;color:var(--danger)}
.vnote{color:var(--mut2);font-size:12px;font-style:italic}
.browsebar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}