/* ============================================================
   WIZARD ADS · ASSET VAULT — full-screen media command center
   Obsidian glass · neon indigo/AI gradient · 9:16 cards
   Reuses tokens from styles.css
   ============================================================ */

/* status accents */
:root{
  --st-raw:   #4f9fe0;
  --st-prog:  #2fd3a6;
  --st-rev:   #ffb454;
  --st-ready: #35d6e8;
  --st-pub:   #46d9a0;
  --st-arch:  #707688;
}

/* ---------- root layout : fills space right of global sidebar ---------- */
.vw{
  flex:1 1 auto; min-width:0; display:flex; height:100vh; min-height:0;
  position:relative; isolation:isolate; overflow:hidden;
}

/* ============================================================ COLLECTIONS RAIL */
.vw-col{
  flex:0 0 256px; width:256px; display:flex; flex-direction:column; min-height:0;
  background:var(--glass-rail); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-right:1px solid var(--line);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03), 22px 0 60px -40px rgba(0,0,0,.9);
}
.vw-col-head{ padding:18px 18px 14px; border-bottom:1px solid var(--line-soft); }
.vw-col-head .eyebrow{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:7px; }
.vw-col-head .eyebrow .spark{ color:var(--ai-b); filter:drop-shadow(0 0 6px var(--ai-b)); }
.vw-col-head h2{ margin:9px 0 0; font-size:var(--fs-stat-1); font-weight:var(--fw-black); letter-spacing:-.02em; }
.vw-col-head .cap{ margin-top:3px; font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-3); }

.vw-col-body{ flex:1; overflow-y:auto; min-height:0; padding:14px 12px 16px; }
.vw-col-body .grp{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin:6px 6px 9px; }
.vw-col-body .grp.mt{ margin-top:18px; }

/* smart folder rows */
.col-list{ display:flex; flex-direction:column; gap:3px; }
.col-row{
  display:flex; align-items:center; gap:11px; height:42px; padding:0 11px; border-radius:11px;
  cursor:pointer; color:var(--ink-2); position:relative;
  border:1px solid transparent; transition:background .16s var(--out), color .16s var(--out), transform .2s var(--spring), box-shadow .2s var(--out);
}
.col-row:hover{ background:var(--hover); color:var(--ink); transform:translateX(2px); }
.col-row.on{ color:#fff; background:linear-gradient(100deg,var(--acc-soft),rgba(22,192,216,.06)); border-color:var(--acc-line); box-shadow:0 6px 22px -12px var(--acc-glow), inset 0 0 0 1px rgba(255,255,255,.03); }
.col-row.on::before{ content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3.5px; height:20px; border-radius:4px; background:var(--acc); box-shadow:0 0 14px 1px var(--acc-glow); }
.col-ic{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center; color:var(--ink-2); background:rgba(255,255,255,.04); border:1px solid var(--line-soft); position:relative; transition:.18s var(--out); }
.col-row:hover .col-ic, .col-row.on .col-ic{ color:#fff; }
.col-ic .pip{ position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%; border:2px solid var(--bg); }
.col-row .nm{ flex:1; font-size:var(--fs-base); font-weight:var(--fw-med); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.col-row .badge{ font-size:var(--fs-label); font-weight:var(--fw-black); padding:2px 8px; border-radius:20px; background:rgba(255,255,255,.06); color:var(--ink-2); font-variant-numeric:tabular-nums; min-width:24px; text-align:center; }
.col-row.on .badge{ background:rgba(255,255,255,.14); color:#fff; }

/* status glows for specific folders */
.col-ic.g-rev{ background:rgba(255,180,84,.12); border-color:rgba(255,180,84,.32); color:var(--st-rev); box-shadow:0 0 16px -5px rgba(255,180,84,.55), inset 0 0 10px -4px rgba(255,180,84,.5); }
.col-ic.g-pub{ background:rgba(70,217,160,.12); border-color:rgba(70,217,160,.32); color:var(--st-pub); box-shadow:0 0 16px -5px rgba(70,217,160,.55), inset 0 0 10px -4px rgba(70,217,160,.5); }
.col-row.rev .badge{ background:rgba(255,180,84,.16); color:var(--st-rev); }
.col-row.pub .badge{ background:rgba(70,217,160,.16); color:var(--st-pub); }

/* AI auto tags */
.tag-cloud{ display:flex; flex-wrap:wrap; gap:6px; padding:0 4px; }
.atag{
  display:flex; align-items:center; gap:5px; height:28px; padding:0 11px; border-radius:20px;
  background:var(--well); border:1px solid var(--line); color:var(--ink-2);
  font-size:var(--fs-sub); font-weight:var(--fw-bold); cursor:pointer; white-space:nowrap;
  transition:.16s var(--out);
}
.atag .dot{ width:6px; height:6px; border-radius:50%; background:var(--ai-b); box-shadow:0 0 7px var(--ai-glow); }
.atag:hover{ color:var(--ink); border-color:var(--line-strong); transform:translateY(-1px); }
.atag.on{ background:linear-gradient(120deg,rgba(22,192,216,.22),rgba(46,211,198,.16)); border-color:var(--acc-line); color:#fff; box-shadow:0 4px 18px -8px var(--ai-glow); }

/* storage meter */
.vw-storage{ margin:14px 6px 2px; padding:12px; border-radius:13px; background:var(--panel-2); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.vw-storage .top{ display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-label); font-weight:var(--fw-bold); }
.vw-storage .top .lbl{ color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.vw-storage .top .val{ color:var(--ink-3); font-weight:var(--fw-med); }
.vw-storage .bar{ height:6px; border-radius:6px; background:rgba(0,0,0,.4); margin-top:9px; overflow:hidden; position:relative; }
.vw-storage .bar i{ position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:var(--ai-grad); box-shadow:0 0 12px var(--acc-glow); }

/* ============================================================ MAIN COLUMN */
.vw-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:0;
  background:var(--glass-2); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }

/* command bar */
.vw-cmd{ display:flex; align-items:center; gap:12px; height:66px; flex:0 0 66px; padding:0 18px;
  border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg,rgba(255,255,255,.025),transparent); }

.vw-search{ flex:1; max-width:560px; display:flex; align-items:center; gap:11px; height:42px; padding:0 14px;
  background:rgba(0,0,0,.32); border:1px solid var(--acc-line); border-radius:13px; color:var(--ink); position:relative; overflow:hidden;
  box-shadow:0 0 0 3px rgba(22,192,216,.06), 0 0 26px -10px var(--acc-glow); transition:.22s var(--out); }
.vw-search::before{ content:''; position:absolute; inset:-1px; border-radius:13px; padding:1px; background:var(--ai-grad); opacity:.0;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .25s var(--out); pointer-events:none; }
.vw-search:focus-within{ box-shadow:0 0 0 3px var(--acc-soft), 0 0 36px -8px var(--ai-glow); }
.vw-search:focus-within::before{ opacity:.9; }
.vw-search .si{ color:var(--ai-b); filter:drop-shadow(0 0 7px var(--ai-glow)); flex:0 0 auto; }
.vw-search input{ flex:1; background:none; border:none; outline:none; font-size:var(--fs-body); font-weight:var(--fw-med); color:var(--ink); min-width:0; }
.vw-search input::placeholder{ color:var(--acc-2); opacity:.7; font-weight:var(--fw-med); }
.vw-search .kbd{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); color:var(--ink-3); padding:3px 7px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid var(--line); letter-spacing:.04em; flex:0 0 auto; }
.vw-search .pulse{ position:absolute; left:14px; width:18px; height:18px; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 0 var(--ai-glow); animation:searchpulse 2.8s ease-out infinite; }
@keyframes searchpulse{ 0%{ box-shadow:0 0 0 0 rgba(46,211,198,.4);} 70%{ box-shadow:0 0 0 13px rgba(46,211,198,0);} 100%{ box-shadow:0 0 0 0 rgba(46,211,198,0);} }

.vw-spacer{ flex:1; }

/* dropdown control */
.vw-ddwrap{ position:relative; }
.vw-dd{ display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; border-radius:11px;
  background:var(--well); border:1px solid var(--line); color:var(--ink-2); font-size:var(--fs-base); font-weight:var(--fw-bold); white-space:nowrap;
  transition:.16s var(--out); }
.vw-dd:hover{ color:var(--ink); border-color:var(--line-strong); background:rgba(0,0,0,.38); transform:translateY(-1px); }
.vw-dd.open{ color:#fff; border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft); }
.vw-dd .lbl-dim{ color:var(--ink-4); font-weight:var(--fw-bold); }
.vw-dd .chev{ color:var(--ink-3); transition:transform .2s var(--out); }
.vw-dd.open .chev{ transform:rotate(180deg); }
.vw-menu{ position:absolute; top:46px; right:0; min-width:208px; z-index:60; padding:6px;
  background:var(--glass-3); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border:1px solid var(--line-strong); border-radius:14px; box-shadow:var(--shadow-pop); animation:pop .18s var(--spring); }
.vw-menu .mh{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); padding:6px 10px 7px; }
.vw-mi{ display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; border-radius:9px; cursor:pointer; color:var(--ink-2); font-size:var(--fs-base); font-weight:var(--fw-med); transition:.14s var(--out); }
.vw-mi:hover{ background:var(--hover); color:var(--ink); }
.vw-mi.on{ background:var(--acc-soft); color:#fff; box-shadow:inset 0 0 0 1px var(--acc-line); }
.vw-mi .ck{ margin-left:auto; color:var(--acc-2); opacity:0; }
.vw-mi.on .ck{ opacity:1; }
.vw-mi .ti{ color:var(--ink-3); }
.vw-mi.on .ti{ color:var(--acc-2); }

/* filter popover */
.vw-dd.active{ color:#fff; border-color:var(--acc-line); background:var(--acc-soft); }
.vw-fcount{ min-width:17px; height:17px; padding:0 5px; border-radius:9px; background:var(--acc); color:#fff;
  font-size:var(--fs-eyebrow); font-weight:var(--fw-black); font-family:'JetBrains Mono',monospace; display:grid; place-items:center; }
.vw-filter{ min-width:250px; max-height:min(560px,70vh); overflow-y:auto; }
.vw-fbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 4px 4px; }
.vw-fbar .mh{ padding:6px 6px 4px; }
.vw-fclear{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--acc-2); padding:4px 7px; border-radius:7px; transition:.14s var(--out); }
.vw-fclear:hover{ background:var(--acc-soft); color:#fff; }
.vw-fgrp{ padding:4px 0 6px; border-top:1px solid var(--line-soft); margin-top:2px; }
.vw-fgrp:first-of-type{ border-top:none; margin-top:0; }
.vw-fgh{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); padding:6px 10px 5px; }
.vw-frow{ display:flex; align-items:center; gap:9px; height:34px; padding:0 10px; border-radius:9px; cursor:pointer;
  color:var(--ink-2); font-size:var(--fs-base); font-weight:var(--fw-med); transition:.14s var(--out); }
.vw-frow:hover{ background:var(--hover); color:var(--ink); }
.vw-frow.on{ color:#fff; }
.vw-frow .fl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vw-frow .cb{ flex:0 0 17px; width:17px; height:17px; border-radius:6px; border:1.5px solid var(--line-strong);
  display:grid; place-items:center; color:transparent; transition:.14s var(--out); }
.vw-frow.on .cb{ background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:0 0 12px -2px var(--acc-glow); }
.vw-frow .sdot{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.vw-frow .mav{ width:20px; height:20px; border-radius:50%; flex:0 0 20px; display:grid; place-items:center;
  font-size:var(--fs-micro); font-weight:var(--fw-black); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.fp-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 7px; }

/* view segment */
.vw-seg{ display:flex; gap:2px; background:var(--well); border:1px solid var(--line); border-radius:11px; padding:3px; }
.vw-seg button{ width:34px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--ink-3); transition:.16s var(--out); }
.vw-seg button.on{ background:var(--elev); color:#fff; box-shadow:0 1px 5px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
.vw-seg button.on svg{ filter:drop-shadow(0 0 5px var(--acc-glow)); }
.vw-seg button:hover:not(.on){ color:var(--ink-2); }

/* sub header : collection title + selection actions */
.vw-sub{ display:flex; align-items:center; gap:12px; height:48px; flex:0 0 48px; padding:0 18px; border-bottom:1px solid var(--line-soft); }
.vw-sub .title{ font-size:var(--fs-panel); font-weight:var(--fw-black); letter-spacing:-.01em; display:flex; align-items:center; gap:9px; }
.vw-sub .title .cnt{ font-size:var(--fs-label); font-weight:var(--fw-black); color:var(--ink-3); padding:2px 9px; border-radius:20px; background:rgba(255,255,255,.05); border:1px solid var(--line-soft); font-variant-numeric:tabular-nums; }
.vw-sub .filters{ display:flex; align-items:center; gap:6px; margin-left:6px; }
.fpill{ display:flex; align-items:center; gap:6px; height:26px; padding:0 9px 0 8px; border-radius:8px; background:var(--acc-soft); border:1px solid var(--acc-line); font-size:var(--fs-label); font-weight:var(--fw-bold); color:#fff; }
.fpill .x{ width:15px; height:15px; border-radius:5px; display:grid; place-items:center; color:rgba(255,255,255,.6); }
.fpill .x:hover{ background:rgba(255,255,255,.14); color:#fff; }
.vw-sub .seltxt{ font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-3); }
.vw-sub .seltxt b{ color:var(--acc-2); }

/* ============================================================ GRID (only scroll region) */
.vw-scroll{ flex:1; min-height:0; overflow-y:auto; padding:18px; }
.vw-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; align-content:start; grid-auto-flow:row dense; }
/* uniform tile height + 16:9 spanning two cells → a perfectly even grid with no gaps.
   dense flow backfills the single-cell holes a wide card would otherwise leave. */
.vw-card[data-orient="land"]{ grid-column:span 2; }

/* the 9:16 media card */
.vw-card{ position:relative; border-radius:16px; overflow:hidden; cursor:pointer;
  background:#0c0e16; border:1px solid var(--line);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .3s var(--spring), box-shadow .3s var(--out), border-color .22s var(--out); }
.vw-card:hover{ transform:translateY(-6px) scale(1.022); border-color:var(--line-strong);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.05), 0 0 40px -14px var(--acc-glow); z-index:5; }
.vw-card.on{ border-color:var(--acc-line); box-shadow:0 0 0 1.5px var(--acc-line), 0 26px 60px -20px rgba(0,0,0,.8), 0 0 46px -10px var(--acc-glow); }

.vw-thumb{ position:relative; height:300px; overflow:hidden;
  background:
    radial-gradient(135% 90% at 28% 16%, hsl(var(--ch) 72% 56% / .42), transparent 56%),
    radial-gradient(120% 70% at 82% 96%, hsl(calc(var(--ch) + 40) 70% 50% / .30), transparent 60%),
    repeating-linear-gradient(135deg,#1b1e2b 0 10px,#161924 10px 20px); }
.vw-thumb::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,transparent 26%,transparent 52%,rgba(0,0,0,.74) 100%); }
/* simulated subject light */
.vw-thumb .subj{ position:absolute; inset:0; background:radial-gradient(40% 30% at 50% 38%, hsl(var(--ch) 80% 72% / .28), transparent 70%); mix-blend-mode:screen; }

/* hover playback simulation */
.vw-thumb .sheen{ position:absolute; inset:0; opacity:0; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.10) 50%,transparent 60%); transform:translateX(-60%); }
.vw-card:hover .vw-thumb .sheen{ opacity:1; animation:vwsheen 2.4s linear infinite; }
@keyframes vwsheen{ to{ transform:translateX(60%);} }
.vw-thumb .scan{ position:absolute; left:0; right:0; top:0; height:34%; opacity:0;
  background:linear-gradient(180deg,rgba(22,192,216,.18),transparent); }
.vw-card:hover .vw-thumb .scan{ opacity:1; animation:vwscan 2.2s ease-in-out infinite; }
@keyframes vwscan{ 0%{transform:translateY(-40%)} 100%{transform:translateY(300%)} }
.vw-thumb .pulsebtn{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%) scale(.7); opacity:0;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.16); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.32);
  box-shadow:0 10px 26px -8px rgba(0,0,0,.7), 0 0 22px -4px var(--acc-glow); transition:transform .28s var(--spring), opacity .2s var(--out); }
.vw-card:hover .vw-thumb .pulsebtn{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* progress scrubber (playback) */
.vw-thumb .pbar{ position:absolute; left:9px; right:9px; bottom:9px; height:3px; border-radius:3px; background:rgba(255,255,255,.18); opacity:0; transition:opacity .2s var(--out); z-index:4; }
.vw-card:hover .vw-thumb .pbar{ opacity:1; }
.vw-thumb .pbar i{ display:block; height:100%; border-radius:3px; background:var(--acc); box-shadow:0 0 10px var(--acc-glow); width:30%; animation:vwscrub 2.4s linear infinite; }
@keyframes vwscrub{ 0%{width:4%} 100%{width:98%} }

/* overlays */
.vw-ov{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.ov-tl{ position:absolute; top:9px; left:9px; }
.ov-tr{ position:absolute; top:9px; right:9px; }
.ov-bl{ position:absolute; left:9px; bottom:9px; display:flex; align-items:center; gap:5px; transition:transform .3s var(--spring); }
.ov-br{ position:absolute; right:9px; bottom:9px; }
/* lift the platform stack + metrics clear above the slide-up action bar (no overlap) */
.vw-card:hover .ov-bl, .vw-card:hover .ov-br{ transform:translateY(-47px); }
.vw-card:hover .vw-thumb .pbar{ bottom:57px; }

.st-badge{ display:flex; align-items:center; gap:6px; height:24px; padding:0 9px 0 8px; border-radius:20px;
  background:rgba(8,9,14,.62); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-eyebrow); font-weight:var(--fw-black); letter-spacing:.01em; color:#fff; box-shadow:0 4px 12px -4px rgba(0,0,0,.6); }
.st-badge .dot{ width:7px; height:7px; border-radius:50%; }

.ai-score{ display:flex; align-items:center; gap:4px; height:24px; padding:0 8px; border-radius:8px;
  background:rgba(8,9,14,.55); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-label); font-weight:var(--fw-black); color:#fff; box-shadow:0 4px 12px -4px rgba(0,0,0,.6); }
.ai-score .sp{ color:var(--ai-b); filter:drop-shadow(0 0 5px var(--ai-glow)); }
.ai-score .mono{ font-size:var(--fs-label); }
.ai-score.hi{ border-color:rgba(70,217,160,.45); }
.ai-score.hi .num{ color:var(--good); }
.ai-score.lo .num{ color:var(--ink-2); }

.plat-stack{ display:flex; align-items:center; }
.plat-stack .pi{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; color:#fff; margin-left:-7px;
  background:rgba(8,9,14,.66); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.16); box-shadow:0 3px 9px -3px rgba(0,0,0,.6); }
.plat-stack .pi:first-child{ margin-left:0; }

.metric-mini{ display:flex; align-items:center; gap:8px; height:24px; padding:0 9px; border-radius:8px;
  background:rgba(8,9,14,.6); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-label); font-weight:var(--fw-black); color:#fff; box-shadow:0 4px 12px -4px rgba(0,0,0,.6); }
.metric-mini span{ display:flex; align-items:center; gap:4px; }
.metric-mini .mono{ font-size:var(--fs-label); }
.metric-mini .ic-v{ color:var(--st-ready); }
.metric-mini .ic-c{ color:var(--acc-2); }

.vw-dur{ position:absolute; bottom:9px; left:50%; transform:translateX(-50%); z-index:3;
  background:rgba(8,9,14,.62); backdrop-filter:blur(8px); padding:2px 8px; border-radius:6px; color:rgba(255,255,255,.95);
  font-size:var(--fs-eyebrow); font-weight:var(--fw-bold); opacity:0; transition:opacity .2s var(--out); }
.vw-ar{ position:absolute; bottom:9px; right:9px; z-index:3;
  background:rgba(8,9,14,.62); backdrop-filter:blur(8px); padding:2px 7px; border-radius:6px;
  font-size:var(--fs-eyebrow); font-weight:var(--fw-black); letter-spacing:.02em; color:#fff; opacity:0; transition:opacity .2s var(--out); }
.vw-card:hover .vw-ar{ opacity:1; }

/* quick action bar slides up */
.vw-qa{ position:absolute; left:0; right:0; bottom:0; z-index:6; display:flex; gap:5px; padding:9px;
  background:linear-gradient(180deg,transparent,rgba(6,7,11,.92) 42%);
  transform:translateY(100%); opacity:0; transition:transform .3s var(--spring), opacity .24s var(--out); }
.vw-card:hover .vw-qa{ transform:translateY(0); opacity:1; }
.qa-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:5px; height:31px; border-radius:9px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#fff; font-size:var(--fs-label); font-weight:var(--fw-bold); backdrop-filter:blur(8px);
  transition:.16s var(--out); pointer-events:auto; }
.qa-btn:hover{ background:rgba(255,255,255,.16); transform:translateY(-1px); }
.qa-btn.prim:hover{ background:var(--acc); box-shadow:0 6px 18px -6px var(--acc-glow); border-color:transparent; }
.qa-btn.danger{ flex:0 0 34px; }
.qa-btn.danger:hover{ background:rgba(255,107,125,.22); border-color:rgba(255,107,125,.5); color:var(--bad); }

/* card footer meta */
.vw-cardmeta{ padding:10px 12px 11px; display:flex; align-items:center; gap:9px; }
.vw-cardmeta .nm{ flex:1; min-width:0; font-size:var(--fs-sub); font-weight:var(--fw-bold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vw-cardmeta .sz{ font-size:var(--fs-eyebrow); font-weight:var(--fw-bold); color:var(--ink-4); white-space:nowrap; }

/* ---------- list view ---------- */
.vw-table{ display:flex; flex-direction:column; }
.vw-thead, .vw-trow{ display:grid; grid-template-columns:minmax(0,2.6fr) 96px 110px 84px 1.1fr 96px; align-items:center; gap:14px; }
.vw-thead{ padding:0 14px 10px; font-size:var(--fs-eyebrow); font-weight:var(--fw-black); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); border-bottom:1px solid var(--line-soft); position:sticky; top:-18px; background:linear-gradient(180deg,#0c0e16 70%,transparent); z-index:2; }
.vw-trow{ padding:9px 14px; border-radius:12px; cursor:pointer; border:1px solid transparent; transition:background .14s var(--out), transform .18s var(--spring), box-shadow .18s var(--out); }
.vw-trow:hover{ background:var(--hover); transform:translateX(2px); }
.vw-trow.on{ background:var(--acc-soft); border-color:var(--acc-line); box-shadow:0 0 22px -10px var(--acc-glow); }
.vw-trow .cell-name{ display:flex; align-items:center; gap:12px; min-width:0; }
.vw-trow .tthumb{ width:34px; height:50px; flex:0 0 34px; border-radius:7px; overflow:hidden; position:relative;
  background:radial-gradient(120% 80% at 30% 20%, hsl(var(--ch) 70% 55% / .4), transparent 60%), repeating-linear-gradient(135deg,#1b1e2b 0 7px,#161924 7px 14px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.vw-trow .tn{ min-width:0; }
.vw-trow .tn .n1{ font-size:var(--fs-base); font-weight:var(--fw-bold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vw-trow .tn .n2{ font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--ink-4); margin-top:2px; display:flex; gap:8px; }
.vw-trow .mono{ color:var(--ink-2); }
.t-score{ display:flex; align-items:center; gap:5px; font-size:var(--fs-base); font-weight:var(--fw-black); }
.t-score .sp{ color:var(--ai-b); }
.t-status{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px 0 8px; border-radius:20px; font-size:var(--fs-label); font-weight:var(--fw-black); background:rgba(255,255,255,.05); border:1px solid var(--line); }
.t-status .dot{ width:6px; height:6px; border-radius:50%; }
.t-plats{ display:flex; gap:6px; color:var(--ink-2); }

/* ============================================================ INSPECTOR */
.vw-insp{ flex:0 0 412px; width:412px; display:flex; flex-direction:column; min-height:0;
  background:var(--glass); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border-left:1px solid var(--line);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.03), -28px 0 70px -40px rgba(0,0,0,.9);
  animation:inspIn .3s var(--out) both; }
@keyframes inspIn{ from{ transform:translateY(12px); } to{ transform:none; } }
.vw-insp-head{ display:flex; align-items:center; gap:10px; height:54px; flex:0 0 54px; padding:0 16px; border-bottom:1px solid var(--line-soft); }
.vw-insp-head .h-eyebrow{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.vw-insp-head .h-t{ font-size:var(--fs-base); font-weight:var(--fw-black); margin-top:1px; }
.insp-close{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--ink-3); transition:.16s var(--out); }
.insp-close:hover{ background:var(--hover); color:var(--ink); }

.vw-insp-body{ flex:1; overflow-y:auto; min-height:0; padding:18px 20px 24px; display:flex; flex-direction:column; gap:19px; }
.vw-insp-body > *{ flex-shrink:0; }

/* large preview */
.insp-preview{ position:relative; width:200px; aspect-ratio:var(--ar, 9/16); margin:0 auto; flex:0 0 auto; border-radius:16px; overflow:hidden;
  background:
    radial-gradient(130% 80% at 30% 16%, hsl(var(--ch) 72% 56% / .42), transparent 56%),
    radial-gradient(110% 60% at 80% 96%, hsl(calc(var(--ch) + 40) 70% 50% / .3), transparent 60%),
    repeating-linear-gradient(135deg,#1b1e2b 0 11px,#161924 11px 22px);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.85), 0 0 0 1px var(--line-strong), inset 0 1px 0 rgba(255,255,255,.08), 0 0 40px -14px var(--acc-glow); }
.insp-preview[data-orient="land"]{ width:100%; }
.insp-preview .pv-grad{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 60%,rgba(0,0,0,.7)); }
.insp-preview .pv-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.16); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.32); box-shadow:0 10px 26px -8px rgba(0,0,0,.7), 0 0 24px -4px var(--acc-glow); transition:transform .24s var(--spring); cursor:pointer; }
.insp-preview .pv-play:hover{ transform:translate(-50%,-50%) scale(1.08); }
.insp-preview .pv-tl{ position:absolute; top:10px; left:10px; }
.insp-preview .pv-tr{ position:absolute; top:10px; right:10px; }
.insp-preview .pv-dur{ position:absolute; bottom:10px; right:10px; background:rgba(8,9,14,.62); backdrop-filter:blur(8px); padding:3px 8px; border-radius:6px; font-size:var(--fs-label); font-weight:var(--fw-bold); }

.insp-title{ font-size:var(--fs-lg); font-weight:var(--fw-black); letter-spacing:-.01em; line-height:1.25; word-break:break-word; }
.insp-specs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.spec{ display:flex; align-items:center; gap:5px; height:25px; padding:0 9px; border-radius:7px; background:var(--well); border:1px solid var(--line-soft); font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-2); }
.spec .ic{ color:var(--ink-4); }

/* published metric grid */
.insp-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.imx{ padding:11px 10px; border-radius:12px; background:var(--panel-2); border:1px solid var(--line); text-align:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.imx .v{ font-size:var(--fs-lg); font-weight:var(--fw-black); letter-spacing:-.02em; }
.imx .l{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); margin-top:3px; display:flex; align-items:center; justify-content:center; gap:4px; }

.field-row{ display:flex; flex-direction:column; gap:9px; }
.field-row .fl{ font-size:var(--fs-label); font-weight:var(--fw-black); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); display:flex; align-items:center; gap:7px; }

/* rating widget */
.rate{ display:flex; align-items:center; gap:7px; }
.rate .stars{ display:flex; gap:4px; }
.rate .stars button{ color:var(--ink-4); transition:transform .18s var(--spring), color .14s var(--out); }
.rate .stars button:hover{ transform:scale(1.18); }
.rate .stars button.lit{ color:#ffc24d; filter:drop-shadow(0 0 6px rgba(255,194,77,.6)); }
.rate .rv{ font-size:var(--fs-sub); font-weight:var(--fw-black); color:var(--ink-2); margin-left:3px; }

/* assignment multi-select */
.assign{ position:relative; }
.assign-ctl{ display:flex; align-items:center; gap:8px; min-height:46px; padding:7px 11px; border-radius:12px; flex-wrap:wrap;
  background:var(--well); border:1px solid var(--line); cursor:pointer; transition:.18s var(--out); }
.assign-ctl:hover{ border-color:var(--line-strong); }
.assign-ctl.open{ border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft); }
.assign-ctl .ph{ font-size:var(--fs-base); font-weight:var(--fw-med); color:var(--ink-4); }
.assign-ctl .chev{ margin-left:auto; color:var(--ink-3); }
.mgr-chip{ display:flex; align-items:center; gap:7px; height:28px; padding:2px 9px 2px 3px; border-radius:20px; background:rgba(255,255,255,.06); border:1px solid var(--line); font-size:var(--fs-sub); font-weight:var(--fw-bold); }
.mgr-chip .av{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:var(--fs-micro); font-weight:var(--fw-black); color:#fff; }
.mgr-chip .x{ width:16px; height:16px; border-radius:5px; display:grid; place-items:center; color:var(--ink-3); }
.mgr-chip .x:hover{ background:rgba(255,255,255,.12); color:var(--ink); }
.assign-menu{ position:absolute; left:0; right:0; top:54px; z-index:40; padding:6px;
  background:var(--glass-3); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border:1px solid var(--line-strong); border-radius:14px; box-shadow:var(--shadow-pop); animation:pop .16s var(--spring); }
.assign-mi{ display:flex; align-items:center; gap:10px; height:42px; padding:0 9px; border-radius:10px; cursor:pointer; transition:.14s var(--out); }
.assign-mi:hover{ background:var(--hover); }
.assign-mi .av{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:var(--fs-label); font-weight:var(--fw-black); color:#fff; flex:0 0 30px; box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
.assign-mi .mm{ flex:1; min-width:0; }
.assign-mi .mm .n{ font-size:var(--fs-base); font-weight:var(--fw-bold); }
.assign-mi .mm .r{ font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--ink-4); }
.assign-mi .box{ width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-strong); display:grid; place-items:center; color:transparent; transition:.14s var(--out); }
.assign-mi.on .box{ background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:0 0 12px -3px var(--acc-glow); }

/* tag list */
.insp-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.itag{ display:flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:7px; background:rgba(22,192,216,.12); border:1px solid var(--acc-line); font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink); }
.itag .dot{ width:5px; height:5px; border-radius:50%; background:var(--ai-b); box-shadow:0 0 6px var(--ai-glow); }

/* send to studio footer button */
.vw-insp-foot{ flex:0 0 auto; padding:14px 16px 16px; border-top:1px solid var(--line-soft); background:linear-gradient(0deg,rgba(0,0,0,.2),transparent); }
.send-studio{ width:100%; height:52px; border-radius:14px; background:var(--ai-grad); color:#fff; font-size:var(--fs-body); font-weight:var(--fw-black); letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:10px; position:relative; overflow:hidden;
  box-shadow:0 16px 38px -10px var(--ai-glow), 0 0 30px -6px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.28);
  animation:expglow 3.4s ease-in-out infinite; transition:transform .2s var(--spring), box-shadow .3s var(--out); }
.send-studio:hover{ transform:translateY(-2px); box-shadow:0 22px 50px -10px var(--ai-glow), 0 0 52px -2px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.34); }
.send-studio:active{ transform:translateY(0) scale(.99); }
.send-studio .shine{ position:absolute; inset:0; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%); transform:translateX(-120%); }
.send-studio:hover .shine{ animation:shine 1s ease; }
.vw-insp-foot .sub{ text-align:center; font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--ink-4); margin-top:9px; }

/* empty state */
.vw-empty{ flex:1; display:grid; place-items:center; }
.vw-empty .box{ text-align:center; color:var(--ink-3); }
.vw-empty .ring{ width:64px; height:64px; border-radius:20px; display:grid; place-items:center; margin:0 auto 14px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink-3); }
.vw-empty .t{ font-size:var(--fs-body); font-weight:var(--fw-bold); color:var(--ink-2); }
.vw-empty .s{ font-size:var(--fs-sub); font-weight:var(--fw-med); margin-top:5px; }

@media (max-width:1180px){
  .vw-insp{ flex-basis:368px; width:368px; }
  .vw-col{ flex-basis:224px; width:224px; }
}

/* ============================================================
   AUDIT POLISH PASS — command bar · select · status · bulk · upload
   ============================================================ */

/* ----- nowrap fixes (badges & chips never break to 2 lines) ----- */
.st-badge{ white-space:nowrap; }
.t-status{ white-space:nowrap; }
.vw-fbar .mh{ white-space:nowrap; }

/* widen the list status column so chips sit on one line */
.vw-thead, .vw-trow{ grid-template-columns:minmax(0,2.5fr) 92px 124px 78px 1fr 92px; }

/* ----- command bar : search keeps a usable min-width, no collapse ----- */
.vw-search{ flex:1 1 200px; min-width:124px; }
.vw-clear{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; color:var(--ink-3); flex:0 0 auto; transition:.14s var(--out); }
.vw-clear:hover{ background:var(--hover); color:var(--ink); }
.vw-dd .ddl{ font-weight:var(--fw-bold); }

/* ----- compact sort/filter never push the search out ----- */
.vw-dd{ flex:0 0 auto; }
.vw-seg{ flex:0 0 auto; }

/* ----- Upload button ----- */
.vw-upload{ display:flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-radius:11px; flex:0 0 auto; white-space:nowrap;
  background:var(--ai-grad); color:#fff; font-size:var(--fs-base); font-weight:var(--fw-black); letter-spacing:.01em;
  box-shadow:0 8px 22px -10px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .18s var(--spring), box-shadow .25s var(--out); }
.vw-upload:hover{ transform:translateY(-1px); box-shadow:0 12px 28px -8px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.34); }
.vw-upload:active{ transform:translateY(0) scale(.98); }
@media (max-width:1340px){ .vw-upload .ul{ display:none; } .vw-upload{ padding:0 11px; } }

/* ----- card select checkbox ----- */
.ov-tl{ display:flex; align-items:center; gap:7px; }
.card-pick{ width:24px; height:24px; border-radius:8px; display:grid; place-items:center; flex:0 0 24px; pointer-events:auto; cursor:pointer;
  background:rgba(8,9,14,.55); backdrop-filter:blur(8px); border:1.5px solid rgba(255,255,255,.45); color:transparent;
  opacity:0; transform:scale(.85); transition:.16s var(--out); }
.vw-card:hover .card-pick{ opacity:1; transform:scale(1); }
.card-pick:hover{ border-color:#fff; }
.card-pick.on{ opacity:1; transform:scale(1); background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:0 0 14px -2px var(--acc-glow); }
.vw-card.picked{ border-color:var(--acc-line); box-shadow:0 0 0 2px var(--acc), 0 22px 50px -20px rgba(0,0,0,.8), 0 0 40px -12px var(--acc-glow); }

/* list-row select sits on the thumbnail */
.vw-trow .tthumb{ display:grid; place-items:center; }
.row-pick{ width:20px; height:20px; border-radius:6px; display:grid; place-items:center; pointer-events:auto; cursor:pointer;
  background:rgba(8,9,14,.6); border:1.5px solid rgba(255,255,255,.5); color:transparent; opacity:0; transition:.14s var(--out); }
.vw-trow:hover .row-pick{ opacity:1; }
.row-pick.on{ opacity:1; background:var(--acc); border-color:var(--acc); color:#fff; }
.vw-trow.picked{ background:var(--acc-soft); border-color:var(--acc-line); box-shadow:0 0 22px -10px var(--acc-glow); }

/* ----- pipeline status picker (inspector) ----- */
.stpick{ position:relative; }
.stpick-ctl{ display:flex; align-items:center; gap:9px; width:100%; height:42px; padding:0 12px; border-radius:12px;
  background:var(--well); border:1px solid var(--line); color:var(--ink); font-size:var(--fs-base); font-weight:var(--fw-bold); cursor:pointer; transition:.16s var(--out); }
.stpick-ctl:hover{ border-color:var(--line-strong); }
.stpick-ctl.open{ border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft); }
.stpick-ctl .dot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.stpick-ctl .chev{ margin-left:auto; color:var(--ink-3); transition:transform .2s var(--out); }
.stpick-ctl.open .chev{ transform:rotate(180deg); }
.stpick-menu{ position:absolute; left:0; right:0; top:48px; z-index:40; padding:6px;
  background:var(--glass-3); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border:1px solid var(--line-strong); border-radius:13px; box-shadow:var(--shadow-pop); animation:pop .16s var(--spring); }
.stpick-mi{ display:flex; align-items:center; gap:10px; height:38px; padding:0 11px; border-radius:9px; cursor:pointer; color:var(--ink-2); font-size:var(--fs-base); font-weight:var(--fw-med); transition:.14s var(--out); }
.stpick-mi:hover{ background:var(--hover); color:var(--ink); }
.stpick-mi.on{ background:var(--acc-soft); color:#fff; box-shadow:inset 0 0 0 1px var(--acc-line); }
.stpick-mi .dot{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.stpick-mi .ck{ margin-left:auto; color:var(--acc-2); opacity:0; }
.stpick-mi.on .ck{ opacity:1; }

/* ----- bulk action bar (replaces sub-header when clips are picked) ----- */
.vw-bulk{ display:flex; align-items:center; gap:10px; width:100%; opacity:1; }
.bulk-meta{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; overflow:hidden; }
.bulk-acts{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.vw-bulk .bulk-x{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center; color:var(--ink-2); background:var(--well); border:1px solid var(--line); transition:.14s var(--out); }
.vw-bulk .bulk-x:hover{ color:var(--ink); border-color:var(--line-strong); }
.vw-bulk .bcount{ font-size:var(--fs-panel); font-weight:var(--fw-black); letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
.vw-bulk .bulk-link{ font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--acc-2); padding:4px 8px; border-radius:7px; white-space:nowrap; transition:.14s var(--out); }
.vw-bulk .bulk-link:hover{ background:var(--acc-soft); color:#fff; }
.bulk-btn{ display:flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:10px; white-space:nowrap;
  background:var(--well); border:1px solid var(--line); color:var(--ink-2); font-size:var(--fs-base); font-weight:var(--fw-bold); transition:.16s var(--out); }
.bulk-btn:hover{ color:var(--ink); border-color:var(--line-strong); background:rgba(0,0,0,.3); }
.bulk-btn.open{ color:#fff; border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft); }
.bulk-btn .chev{ color:var(--ink-3); }
.bulk-btn.danger:hover{ color:var(--bad); border-color:rgba(255,107,125,.5); background:rgba(255,107,125,.12); }
.vw-menu .sdot2{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.vw-menu .mav2{ width:22px; height:22px; border-radius:50%; flex:0 0 22px; display:grid; place-items:center; font-size:var(--fs-micro); font-weight:var(--fw-black); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }

/* ----- drag-to-upload drop zone ----- */
.vw-main{ position:relative; }
.vw-drop{ position:absolute; top:66px; left:0; right:0; bottom:0; z-index:40; display:grid; place-items:center;
  background:var(--acc-soft); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); pointer-events:none; animation:pop .16s var(--out); }
.vw-drop::after{ content:''; position:absolute; inset:14px; border-radius:20px; border:2px dashed var(--acc-line); }
.vw-drop .dz{ text-align:center; color:var(--ink); position:relative; }
.vw-drop .ring{ width:76px; height:76px; border-radius:22px; display:grid; place-items:center; margin:0 auto 16px; color:#fff;
  background:var(--ai-grad); box-shadow:0 16px 42px -12px var(--ai-glow); animation:expglow 2.4s ease-in-out infinite; }
.vw-drop .t{ font-size:var(--fs-lg); font-weight:var(--fw-black); letter-spacing:-.01em; }
.vw-drop .s{ font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-3); margin-top:6px; }