:root {
  /* HOME/CHOOSER surfaces — charcoal stack with a faint violet tonal lift (premium depth) */
  --bg: #0d0b12;
  --bg2: #16131d;
  --card: #1e1a28;
  --line: rgba(255,255,255,0.08);
  --text: #f4f2f8;
  --muted: #9d97ab;        /* genuinely muted secondary — the premium tell */
  --violet: #7a5cff;       /* richer brand accent for a dark UI; CTA + selection */
  --ink: #15162a;          /* dark text for bright tiles/buttons */
  /* per-tool category hues (COLOR = MEANING across cards/tiles/ticks — never reassign) */
  --cut: #ff7a45;
  --crop: #36a4ff;
  --join: #34c77b;
  --conv: #a877ff;
  --thumb: #ff5c93;
  --files: #14c0cf;
  --sound: #ffb300;
  --turn: #6d78ff;
  --r: 22px;
  /* brand gradient — the ONE loud thing (hero CTA + selection glow), matches the logo sweep */
  --grad-brand: linear-gradient(135deg, #6a47d6 0%, #18c7e0 100%);
  --accent-soft: rgba(122,92,255,0.16);
  --accent-ring: rgba(122,92,255,0.45);
  --glow-accent: 0 6px 20px rgba(122,92,255,0.42);
  --glow-accent-sm: 0 2px 10px rgba(122,92,255,0.32);
  /* hairlines + radii + elevation + spacing + motion (additive) */
  --hairline-top: rgba(255,255,255,0.08);
  --hairline-inset: inset 0 1px 0 rgba(255,255,255,0.05);
  --border-strong: rgba(255,255,255,0.14);
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --shadow-resting: 0 1px 2px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.28);
  --shadow-hover:   0 4px 10px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.38);
  --shadow-floating: 0 8px 18px rgba(0,0,0,.48), 0 24px 56px rgba(0,0,0,.46);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --tap-min:44px;
  --ls-tight:-.02em; --ls-snug:-.01em; --ls-wide:.07em;
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:320ms;
  --ease-out:cubic-bezier(.4,1,.6,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  /* dark "real editor" panel tokens (tonal violet lift, lighter overlay hairlines) */
  --ed-win: #16131d; --ed-panel: #1e1a28; --ed-stage: #0a0810; --ed-line: rgba(255,255,255,0.09);
  --ed-tx: #f0eef6; --ed-tx2: #8c8699; --ed-acc: #7a5cff;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }
/* cross-platform fallbacks (older Edge/WebView/Safari) so the design never collapses */
@supports not (height: 100dvh) { html, body { height: 100vh; } }
@supports not (background: color-mix(in srgb, red, blue)) {
  .seltool .stic { background: rgba(122,92,255,.16); color: var(--violet); }
  .fmts.seg .fmt.on { background: var(--violet); color:#fff; }
  .choocard { border-left-color: var(--violet); }
  .ccic { background: rgba(122,92,255,.16); color: var(--violet); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .selbar { background: #16131d; } #ggrid .gcheck { background: rgba(10,8,16,.85); } .sheet { background: rgba(8,8,14,.92); }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
/* MASTER PAGE LOCK — the app fills the viewport and the page itself NEVER scrolls, on any device.
   Each panel scrolls internally instead (the clip bin, the tool panel). This is what makes it
   read as a real editor app, not a web page. */
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: radial-gradient(120% 80% at 50% -10%, #241f3a 0%, var(--bg) 60%);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", system-ui, "Baloo 2", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 18px 16px 40px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--violet); color: #fff; padding: 10px 16px; border-radius: 12px; text-decoration: none; }
.skip:focus { left: 8px; }
.screen { animation: pop .22s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- HOME ---------- */
.brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 10px 0 22px; }
.blogo { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(150deg, #241f42, #15162a); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(106,71,214,.40), inset 0 0 0 1px rgba(255,255,255,.07); }
.bname { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.appver { font-size: 12px; font-weight: 700; color: var(--muted); background: rgba(255,255,255,.08); padding: 2px 8px; border-radius: 8px; margin-left: 7px; letter-spacing: .02em; }
.hi { text-align: center; font-size: 26px; font-weight: 800; margin: 6px 0 4px; letter-spacing: -.02em; }
.sub { text-align: center; color: var(--muted); font-size: 16px; margin: 0 0 22px; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  border: none; cursor: pointer; text-decoration: none; text-align: left;
  border-radius: var(--r); padding: 20px 18px; color: var(--ink);
  min-height: 132px; justify-content: flex-end; position: relative; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.34);
  transition: transform .12s ease, filter .12s ease;
}
.tile:active { transform: scale(.96); filter: brightness(1.06); }
.tic { position: absolute; top: 16px; left: 16px; opacity: .96; }
.tlabel { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.thint { font-size: 13.5px; font-weight: 600; opacity: .9; }
.c-cut  { background: linear-gradient(150deg, #ff9a5a, var(--cut)); }
.c-crop { background: linear-gradient(150deg, #5bb6ff, var(--crop)); }
.c-join { background: linear-gradient(150deg, #4ad98e, var(--join)); }
.c-conv { background: linear-gradient(150deg, #bb93ff, var(--conv)); }
.c-thumb{ background: linear-gradient(150deg, #ff7eaa, var(--thumb)); }
.c-files{ background: linear-gradient(150deg, #34d2df, var(--files)); }
.c-sound{ background: linear-gradient(150deg, #ffd166, var(--sound)); }
.c-turn { background: linear-gradient(150deg, #9aa2ff, var(--turn)); }

/* ---------- TOOL SCREENS ---------- */
.thead { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; }
.back { width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.back:active { background: var(--bg2); }
.thead h2 { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -.01em; }

.pick, .addmore {
  width: 100%; border: 2px dashed rgba(255,255,255,.22); background: rgba(255,255,255,.04);
  color: #fff; border-radius: var(--r); padding: 22px; font-size: 18px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
}
.pick:active, .addmore:active { transform: scale(.98); }
.addmore { padding: 14px; font-size: 15px; margin-top: 6px; }

.work { margin-top: 8px; }
.vid { width: 100%; max-height: 50vh; background: #000; border-radius: 18px; display: block; }
.tip { color: var(--muted); font-size: 16px; font-weight: 600; text-align: center; margin: 16px 0 12px; }
.note { color: var(--muted); font-size: 13.5px; text-align: center; margin: 10px 0 0; }
.editing { color: var(--muted); font-size: 14px; font-weight: 600; margin: -4px 0 12px; text-align: center; }

/* ---- folder bar (where files are saved) ---- */
.folderbar { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 14px 0 4px; }
.fbtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fblabel { font-size: 12px; color: var(--muted); }
.fbpath { font-size: 13px; font-weight: 700; word-break: break-all; }
.fbopen { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 700; cursor: pointer; }
.fbopen:active { transform: scale(.97); }
.savedline { background: rgba(52,199,123,.12); border: 1px solid rgba(52,199,123,.45); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--text); margin: 0 0 14px; word-break: break-all; line-height: 1.55; text-align: left; }

/* ---- phone-style gallery of your videos (lives at the bottom) ---- */
.gallery { margin: 24px 0 8px; }
.ghead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ghead .spacer { flex: 1 1 auto; }
.gtitle { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.ghexport { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; background: var(--violet); color: #fff; border: none; border-radius: 11px; padding: 9px 14px; font-size: 13.5px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(106,71,214,.32); }
.ghexport:hover { filter: brightness(1.08); }
.ghexport:active { transform: scale(.97); }
.ghint { color: var(--muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ggrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gtile { cursor: pointer; position: relative; border-radius: 16px; transition: transform .12s ease; }
.gtile:active { transform: scale(.975); }
.gthumb { position: relative; aspect-ratio: 16/10; background: #07080f; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); transition: border-color .12s ease, box-shadow .12s ease; }
.gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gthumb::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 60%, rgba(0,0,0,.5) 100%); }
.gtile.on .gthumb { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet); }
.gdur { position: absolute; bottom: 7px; right: 7px; z-index: 2; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.gplay { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.gplay svg { margin-left: 2px; }
.gcheck { position: absolute; top: 7px; left: 7px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); background: rgba(0,0,0,.4); cursor: pointer; padding: 0; transition: transform .1s ease; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 900; line-height: 1; }
.gcheck:active { transform: scale(.9); }
.gcheck.ck { background: var(--violet); border-color: #fff; }
.gdel { position: absolute; top: 7px; right: 7px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .12s ease, transform .1s ease; }
.gdel:hover, .gdel:active { background: #e5484d; transform: scale(1.1); }
.ginfo { position: absolute; bottom: 7px; left: 7px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; font-size: 15px; font-weight: 800; font-family: Georgia, serif; cursor: pointer; padding: 0; }
.ginfo.set { background: var(--conv); }
.gname { padding: 9px 4px 2px; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* edit-type symbols on a saved clip's thumbnail (bottom-left; duration chip owns bottom-right) */
.gedits { position: absolute; left: 7px; bottom: 7px; z-index: 2; display: flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 8px; background: rgba(0,0,0,.64); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; max-width: calc(100% - 64px); overflow: hidden; }
.gedits i { font-style: normal; font-size: 12.5px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.gedits b { color: #fff; font: 700 11px/1 system-ui; padding-left: 1px; }
/* 3 status ticks UNDER the thumb: Title / About / Cover (filled when generated) */
.gmeta { display: flex; gap: 5px; padding: 7px 4px 0; }
.gm { width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; font: 800 11px/1 system-ui; border: 1.5px dashed rgba(255,255,255,.28); background: rgba(255,255,255,.04); color: rgba(255,255,255,.42); }
.gm.on { border-style: solid; border-color: transparent; color: #1a1a1a; }
.gm.t.on { background: var(--join); } .gm.d.on { background: var(--sound); } .gm.c.on { background: var(--thumb); color: #fff; }
.jnum { position: absolute; top: 6px; left: 6px; width: 28px; height: 28px; border-radius: 50%; background: var(--join); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.45); z-index: 3; }

/* ===== premium media-bin card: at rest = thumbnail + name + duration ONLY.
   The merge-select circle, delete trash and "Edited" pill appear on HOVER (desktop) so the bin reads clean. ===== */
.gthumb, .gtile { border-radius: 12px; }
.gdur { background: rgba(0,0,0,.66); border-radius: 7px; }
.gcheck, .gdel, .gedited { opacity: 0; transform: translateY(-2px); transition: opacity .14s ease, transform .14s ease; pointer-events: none; }
.gtile.on .gthumb { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet); }
@media (hover: hover) and (pointer: fine) {
  .gtile:hover .gcheck, .gtile:hover .gdel, .gtile:hover .gedited { opacity: 1; transform: none; pointer-events: auto; }
  /* a merge-picked clip keeps its number; an edited clip keeps its ✓ pill — even at rest */
  .gtile:has(.gcheck.ck) .gcheck, .gtile.edited .gedited { opacity: 1; transform: none; pointer-events: auto; }
  .gtile.on .gthumb { box-shadow: 0 0 0 2px var(--violet), 0 8px 22px rgba(106,71,214,.30); }
}
/* touch (mobile / coarse pointer): no hover → keep everything visible so nothing is unreachable */
@media (hover: none), (pointer: coarse) { .gcheck, .gdel, .gedited { opacity: 1; transform: none; pointer-events: auto; } }
/* ===== modern file-manager: the SELECT check is ALWAYS visible (a clean ring → filled when picked) ===== */
#ggrid .gcheck { opacity: 1 !important; transform: none !important; pointer-events: auto !important; width: 26px; height: 26px; border: 2px solid rgba(255,255,255,.72); background: rgba(0,0,0,.40); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); font-size: 13px; }
#ggrid .gcheck.ck { background: var(--violet); border-color: #fff; box-shadow: 0 2px 8px rgba(106,71,214,.5); }
#ggrid .gtile:has(.gcheck.ck) .gthumb { box-shadow: 0 0 0 2px var(--violet); border-color: var(--violet); }
/* file size · modified time, muted, under the name */
.gmetaline { padding: 1px 4px 2px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmetaline:empty { display: none; }
/* Select-all chip in the bin header */
.gh-selall { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 800; cursor: pointer; }
.gh-selall:hover { background: var(--card); border-color: var(--violet); }
/* bottom floating action pill — appears when 1+ clips checked */
.selbar { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 8px); z-index: 40; display: flex; align-items: center; gap: 8px; max-width: min(720px, calc(100vw - 24px)); background: #1b1d2e; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 8px 10px 8px 8px; box-shadow: 0 16px 44px rgba(0,0,0,.55); opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.selbar:not([hidden]) { opacity: 1; transform: translate(-50%, 0); }
.sb-x { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; border: none; background: rgba(255,255,255,.07); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.sb-x:hover { background: rgba(255,255,255,.14); }
.sb-count { font-size: 15px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 2px; }
.sb-sp { flex: 1 1 auto; min-width: 6px; }
.sb-act { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 13px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); font-size: 13.5px; font-weight: 800; cursor: pointer; }
.sb-act:hover { background: rgba(255,255,255,.12); }
.sb-act.join { background: var(--join); border-color: transparent; color: #07120c; box-shadow: 0 6px 16px rgba(52,199,123,.35); }
.sb-act.danger:hover { background: #e5484d; border-color: transparent; color: #fff; }
/* ACTION LABELS (owner 6 Jul: icon-only bar was confusing — "pata nahi chalta kis se kya hoga, context ke liye
   kispe click karna hai"). Every action now shows its label UNDER the icon (stacked, compact), so it's obvious.
   The bar scrolls sideways if many actions are visible; the ✕ close stays pinned at the left. */
@media all /* ONE-UI: phone rules apply at every width (A-5a) */ {
  /* WRAP so every labelled action stays visible (no button hides off-screen — that was the confusion). */
  .selbar { flex-wrap: wrap; justify-content: center; gap: 6px; row-gap: 7px; }
  .selbar .sb-sp { display: none; }
  .selbar .sb-act { flex-direction: column; align-items: center; gap: 3px; min-height: 48px; padding: 6px 11px; font-size: 10px; line-height: 1.05; }
  .selbar .sb-act span { display: block; font-size: 9.5px; font-weight: 800; white-space: nowrap; letter-spacing: .01em; }
}
@media all /* ONE-UI: phone rules apply at every width (A-5a) */ { .selbar { bottom: calc(74px + env(safe-area-inset-bottom)); } }   /* sit ABOVE the mobile bottom nav */
/* the ✨ Auto-context action is the CONTEXT button (batch) — give it a distinct purple fill so it's unmistakable */
#selBarAutoCtx.sb-act { background: linear-gradient(135deg, #7c3aed, #4f46e5); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(99,102,241,.4); }
#selBarAutoCtx.sb-act:hover { background: linear-gradient(135deg, #8b4bf0, #5b53f0); }
.batchbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--card); border: 2px solid var(--violet); border-radius: 14px; padding: 12px 14px; margin: 14px 0; box-shadow: 0 8px 22px rgba(124,92,255,.18); position: sticky; bottom: 10px; z-index: 6; }
.batchbar #batchInfo { flex: 1 1 100%; }
.btn.c-join { background: linear-gradient(150deg, #4ad98e, var(--join)); }
#saveMeta textarea, #infoSheet textarea { width: 100%; }

/* selected-video compact editor: video plays + small tools + title/description, all in one card */
.selpanel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin: 16px 0 10px; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.selvidwrap { border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.selvid { width: 100%; aspect-ratio: 16 / 9; max-height: 420px; object-fit: contain; display: block; background: #000; }
.selname { font-size: 15px; font-weight: 800; margin: 11px 2px 12px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seltools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
/* BIG icon tools — a colored icon tile + a label below, easy to read at a glance */
.seltool { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px 9px; min-width: 80px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font-size: 13px; font-weight: 800; letter-spacing: -.01em; cursor: pointer; transition: transform .1s ease, border-color .12s ease, background .12s ease; }
.seltool .stic { width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center; color: var(--tc, var(--violet)); background: color-mix(in srgb, var(--tc, var(--violet)) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc, var(--violet)) 30%, transparent); }
.seltool .stic svg { width: 24px; height: 24px; }
.seltool .stlbl { line-height: 1; }
.seltool:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.22); }
.seltool:active { transform: scale(.96); }
.sdot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.selchips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.selchips:empty { display: none; }
.selpanel .seclbl { margin-top: 4px; }
.selpanel input, .selpanel textarea { width: 100%; }
.selpanel .do { margin-top: 14px; }
.selpanel .do.ghost { margin-top: 8px; }
/* when a video is selected, the compact editor IS the workspace — hide the big "what to do" tiles */
#s-home.editing > .hi, #s-home.editing > .sub, #s-home.editing .tiles { display: none; }
/* "My videos" is a FILE MANAGER, not a tool launcher — the legacy big tool tiles + "What do you want to do?"
   headers never belong here (you pick a tool AFTER tapping a clip). Hide them at EVERY width. */
body.ed #s-home .tiles, body.ed #s-home > .hi, body.ed #s-home > .sub { display: none; }

/* video plays in the Save dialog so you can watch it while writing the title/description */
.savevid { margin: 2px 0 16px; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.savevid video { width: 100%; max-height: 230px; display: block; background: #000; }

/* film-strip of all your videos inside every tool — tap one to switch which video you edit */
.clipstrip { margin: 0 0 16px; }
.cliphint { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 9px; }
.clipscroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.clipscroll::-webkit-scrollbar { height: 7px; }
.clipscroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.clipthumb { flex: 0 0 auto; width: 100px; border: none; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.clipimg { position: relative; width: 100px; aspect-ratio: 16/10; border-radius: 11px; overflow: hidden; background: #07080f; border: 2px solid var(--line); display: block; transition: border-color .12s ease; }
.clipimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clipthumb.on .clipimg { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet); }
.clipthumb:active .clipimg { transform: scale(.96); }
.clipbadge { position: absolute; bottom: 0; left: 0; right: 0; background: var(--violet); color: #fff; font-size: 10.5px; font-weight: 800; text-align: center; padding: 2px 0; letter-spacing: .02em; }
.clipname { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; text-align: center; }
.clipthumb.on .clipname { color: var(--text); font-weight: 700; }

/* homepage chooser — 3 scenarios, clean, no gallery */
.chooser { display: flex; flex-direction: column; gap: 13px; margin-top: 8px; }
.choocard { display: flex; align-items: center; gap: 15px; text-align: left; text-decoration: none; cursor: pointer; border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: 17px; color: var(--text); transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.choocard:hover { border-color: var(--violet); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.choocard:active { transform: scale(.985); }
.ccic { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.cc-join .ccic { background: rgba(52,199,123,.16); color: var(--join); }
.cc-many .ccic { background: rgba(168,119,255,.16); color: var(--conv); }
.cc-one .ccic { background: rgba(54,164,255,.16); color: var(--crop); }
.cc-myfiles .ccic { background: rgba(20,192,207,.16); color: var(--files); }
.cctxt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cctxt b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.cctxt span { font-size: 13px; color: var(--muted); line-height: 1.42; }

/* workspace header + finish bar */
.wshead { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; }
.wshead h2 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.finishbar { margin: 18px 0 8px; }
.finishbar .do { margin-top: 0; }

/* URL upload bar (chooser) + extra add options (workspace) */
.urlbar { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 5px 5px 5px 14px; color: var(--muted); }
.urlbar svg { flex: 0 0 auto; }
.urlbar input { flex: 1; min-width: 0; background: none; border: none; color: var(--text); font-size: 16px; padding: 10px 4px; outline: none; }   /* 16px unconditional — iOS Safari zooms on focus for any input < 16px */
.urlbar input::placeholder { color: var(--muted); }
.urlgo { flex: 0 0 auto; background: var(--violet); color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-size: 14px; font-weight: 800; cursor: pointer; }
.urlgo:active { transform: scale(.96); }
.addrow { display: flex; gap: 8px; margin-top: 8px; }
/* NEW-PIPELINE (owner 5 Jul): uploading is a FILE MANAGER action only. Video Cloud fills itself from
   FM (after edit+context — adding straight here would bypass the context gate), and My Videos is a
   posted-record view. So hide every "Add video / ZIP / Link / +" entry point in those two spaces. */
body[data-curspace="videocloud"] #addBtn, body[data-curspace="videocloud"] .addrow, body[data-curspace="videocloud"] [data-addvideo],
body[data-curspace="myvideos"] #addBtn, body[data-curspace="myvideos"] .addrow, body[data-curspace="myvideos"] [data-addvideo] { display: none !important; }
.addchip { flex: 1; background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
.addchip:active { transform: scale(.97); }
/* settings link (chooser) + settings screen */
.setlink { display: flex; align-items: center; gap: 7px; width: fit-content; margin: 18px auto 0; background: none; border: none; color: var(--muted); font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 8px 12px; border-radius: 10px; }
.setlink:hover { color: var(--text); background: rgba(255,255,255,.05); }
.setwrap { max-width: 600px; margin: 0 auto; }
.setwrap input, .setwrap textarea { width: 100%; }
.prov { min-width: 130px; }
.prov.on { border-color: var(--violet); background: rgba(124,92,255,.16); }

/* AI metadata box (write a story → title/description/tags) */
.aibox { margin: 4px 0 2px; padding: 13px; border-radius: 14px; background: rgba(124,92,255,.08); border: 1px solid rgba(124,92,255,.3); }
.aibox .seclbl { margin-top: 0; color: var(--text); }
.aibox textarea { width: 100%; font-size: 16px; }   /* #selSummary + #selInstr: 16px kills iOS focus-zoom */
.aigen { width: 100%; margin-top: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--violet); color: #fff; border: none; border-radius: 12px; padding: 12px; font-size: 14.5px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 16px rgba(106,71,214,.32); }
.aigen:hover { filter: brightness(1.08); }
.aigen:active { transform: scale(.98); }
.aiinstr { margin-top: 9px; }
.aiinstr summary { font-size: 12.5px; color: var(--muted); cursor: pointer; padding: 3px 0; list-style: revert; }
.aiinstr textarea { width: 100%; margin-top: 7px; }
.aitags { font-size: 12.5px; color: var(--muted); margin-top: 9px; line-height: 1.5; word-break: break-word; }
.aitags:empty { display: none; }
/* "Edited" status badge on a gallery tile — shows clearly which clips are done */
.gedited { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2; background: var(--join); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 8px; box-shadow: 0 2px 7px rgba(0,0,0,.45); white-space: nowrap; }
.gedited.note { background: rgba(40,42,60,.92); color: #d7d9e6; font-weight: 700; }

/* ---- edit steps panel (stack changes, save once) ---- */
.changes { background: var(--card); border: 2px solid var(--violet); border-radius: var(--r); padding: 16px; margin: 16px 0; box-shadow: 0 8px 22px rgba(124,92,255,.18); }
.chd { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.chlist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip2 { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; font-size: 14px; font-weight: 700; }
.changes .do { margin-top: 0; }
.changes .do.ghost { margin-top: 10px; }

/* big DO button */
.do {
  width: 100%; border: none; border-radius: 18px; padding: 18px; margin-top: 18px;
  background: var(--violet); color: #fff; font-size: 19px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
  box-shadow: 0 10px 24px rgba(124,92,255,.34);
}
.do:active { transform: scale(.98); }
.do:disabled { opacity: .45; box-shadow: none; }
.do.ghost { background: transparent; border: 2px solid var(--line); color: var(--text); box-shadow: none; }
.do.c-cut, .do.c-crop, .do.c-join, .do.c-conv, .do.c-thumb, .do.c-sound, .do.c-turn { color: var(--ink); }
.do.c-cut { background: var(--cut); box-shadow: 0 10px 24px rgba(255,122,69,.34); }
.do.c-crop { background: var(--crop); box-shadow: 0 10px 24px rgba(54,164,255,.34); }
.do.c-join { background: var(--join); box-shadow: 0 10px 24px rgba(52,199,123,.34); }
.do.c-conv { background: var(--conv); box-shadow: 0 10px 24px rgba(168,119,255,.34); }
.do.c-thumb { background: var(--thumb); box-shadow: 0 10px 24px rgba(255,92,147,.34); }
.do.c-sound { background: var(--sound); box-shadow: 0 10px 24px rgba(255,179,0,.34); }
.do.c-turn { background: var(--turn); box-shadow: 0 10px 24px rgba(109,120,255,.34); }

/* trim track — inset from the screen edges so the round handles sit OUT of the phone's
   edge-swipe-back gesture zone (handle touch was triggering browser "back" on mobile). */
.trk { position: relative; height: 64px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); margin: 4px 32px 6px; touch-action: none; overscroll-behavior: none; }
.sel { position: absolute; top: 0; bottom: 0; background: rgba(255,122,69,.22); border: 3px solid var(--cut); border-radius: 14px; box-sizing: border-box; }
.hd { position: absolute; top: 50%; width: 30px; height: 56px; margin: -28px 0 0 -15px; border-radius: 12px; background: var(--cut); border: 3px solid #fff; cursor: ew-resize; touch-action: none; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.times { text-align: center; font-size: 16px; color: var(--muted); }
.times b { color: var(--text); }

/* crop shapes + box */
.shapes, .fmts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 14px; }
.shape, .fmt {
  border: 2px solid var(--line); background: var(--card); color: var(--text);
  border-radius: 14px; padding: 12px 18px; font-size: 16px; font-weight: 800; cursor: pointer; min-width: 74px;
}
.shape.on { border-color: var(--crop); background: rgba(54,164,255,.16); }
.fmt.on { border-color: var(--conv); background: rgba(168,119,255,.16); }
.alvl.on { border-color: var(--sound); background: rgba(255,179,0,.18); }
.rdir.on { border-color: var(--turn); background: rgba(109,120,255,.18); }
.rotstage { position: relative; overflow: hidden; border-radius: 18px; background: #000; display: flex; align-items: center; justify-content: center; min-height: 200px; }
.rotstage #rotateVid { transition: transform .25s ease; max-height: 46vh; }
.cropstage { position: relative; line-height: 0; border-radius: 18px; overflow: hidden; background: #000; }
.cropstage .vid { border-radius: 0; }
.cbox { position: absolute; border: 3px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); cursor: move; touch-action: none; box-sizing: border-box; }
.cg { position: absolute; width: 26px; height: 26px; background: #fff; border-radius: 7px; box-shadow: 0 0 0 3px var(--crop); }
.cg[data-g=nw]{left:-13px;top:-13px}.cg[data-g=ne]{right:-13px;top:-13px}.cg[data-g=sw]{left:-13px;bottom:-13px}.cg[data-g=se]{right:-13px;bottom:-13px}

/* merge list */
.mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mlist li { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
.mlist .num { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; background: var(--join); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mlist .mname { flex: 1; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlist .mbtn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font-size: 18px; cursor: pointer; }
.mlist .mbtn.rm { color: #ff7a7a; }

/* thumbnail frames */
.frames { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fr { position: relative; cursor: pointer; }
.fr img { width: 100%; border-radius: 14px; border: 3px solid transparent; display: block; }
.fr.on img { border-color: var(--thumb); box-shadow: 0 0 0 4px rgba(255,92,147,.3); }
.fr .pk { position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; border-radius: 50%; background: var(--thumb); color: #fff; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.45); }

/* live screenshots for the photo tool */
.shotbtn { margin-top: 12px; }
.shots { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 12px; }
.shot { position: relative; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
/* contain, not cover: a capture slot must show the WHOLE frame you just took, letterboxed if need be —
   cropping it made a reel screenshot unrecognisable and two different moments look identical. */
.shot img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.shot.empty { border-style: dashed; }
.shotn { position: absolute; top: 5px; left: 5px; width: 24px; height: 24px; border-radius: 50%; background: var(--thumb); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.shotn.dim { background: transparent; color: var(--muted); }
.shotx { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; cursor: pointer; }
.renamelbl { display: block; margin-top: 14px; font-size: 13px; color: var(--muted); font-weight: 600; }
.renamelbl input { margin-top: 6px; }

/* save dialog + folder picker + join order grid */
.cardscroll { max-height: 92vh; overflow-y: auto; }
.seclbl { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin: 16px 0 8px; text-align: left; }
.jgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jtile { background: var(--card); border: 2px solid var(--line); border-radius: 16px; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .1s; }
.jtile.picked { border-color: var(--join); }
.jtile:active { transform: scale(.985); }
.jthumb { position: relative; aspect-ratio: 16/10; background: #000; }
.jthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jdur { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 7px; }
.jplaybtn { position: absolute; top: 6px; left: 6px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.jplaybtn:active { background: rgba(0,0,0,.85); }
.jorder { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; background: var(--join); color: #fff; font-size: 23px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(0,0,0,.55); pointer-events: none; }
.jtap { position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 7px; pointer-events: none; }
.jname { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 10px 10px; }
.joinadd { gap: 10px; margin-top: 14px; flex-wrap: nowrap; }
.joinadd .pick { flex: 1; padding: 14px; font-size: 15px; }
.fplist { max-height: 40vh; overflow-y: auto; margin: 10px 0; display: flex; flex-direction: column; gap: 5px; }
.fpfolder { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); cursor: pointer; font-size: 14px; font-weight: 600; text-align: left; color: var(--text); width: 100%; }
.fpfolder:hover { background: var(--card); }
#playVid { width: 100%; border-radius: 14px; margin-bottom: 14px; max-height: 60vh; background: #000; }

/* busy + done sheets */
.sheet { position: fixed; inset: 0; background: rgba(8,8,14,.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 50; overflow-y: auto; }
.sheet .card { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 22px; width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; text-align: center; }
.sheet h3 { font-size: 22px; margin: 8px 0 14px; font-weight: 800; }
.sheet video, .sheet img { width: 100%; border-radius: 16px; margin-bottom: 14px; max-height: 38vh; object-fit: contain; background: #000; }
.spin { width: 56px; height: 56px; margin: 4px auto 12px; border-radius: 50%; border: 6px solid rgba(255,255,255,.14); border-top-color: var(--violet); animation: sp 1s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.bigp { font-size: 30px; font-weight: 800; }
.tick { width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; background: var(--join); display: flex; align-items: center; justify-content: center; }
.sheet .do { margin-top: 12px; }
#busyMsg { color: var(--muted); margin: 4px 0 0; }

/* ===== file manager (shared, simple) ===== */
.fmtop { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.fmgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fmtile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; cursor: pointer; position: relative; }
.fmtile .thumb { width: 100%; aspect-ratio: 16/10; background: #000; object-fit: cover; display: block; }
.fmtile .ph { width: 100%; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; background: #16182a; }
.fmtile .nm { padding: 9px 10px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmtile.sel { outline: 3px solid var(--violet); outline-offset: -3px; }
.fmtile .badge { position: absolute; top: 8px; left: 8px; background: var(--violet); color: #fff; min-width: 24px; height: 24px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.fmextract { position: absolute; top: 8px; right: 8px; background: var(--conv); color: #fff; border: 0; border-radius: 9px; padding: 5px 10px; font-size: 12px; font-weight: 800; cursor: pointer; }
/* per-tile Download / Rename actions — bottom-right, big tap targets, dark icons on light pill */
.fmact { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 2; }
.fmbtn { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.94); border: 1px solid rgba(0,0,0,0.12); border-radius: 11px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.28); }
.fmbtn:hover { background: #fff; }
.fmbtn:active { transform: scale(0.94); }
.fmbtn svg { display: block; }
/* on a .zip tile the Extract pill already sits top-right → drop the actions below it */
.fmextract ~ .fmact { top: 48px; }
.fmsel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; bottom: 0; background: var(--bg2); padding: 12px; border-radius: 16px; border: 1px solid var(--line); margin-top: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--violet); color: #fff; border: none; border-radius: 14px; padding: 12px 16px; font-size: 15px; font-weight: 800; cursor: pointer; text-decoration: none; }
.btn.ghost { background: var(--card); border: 1px solid var(--line); color: var(--text); }
.btn.sm { padding: 9px 13px; font-size: 13px; }
.muted { color: var(--muted); } .small { font-size: 13px; } .spacer { flex: 1; }
.prog { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-top: 12px; }
.list { list-style: none; margin: 8px 0 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 5px 0; }
input, select { background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 12px; font-size: 16px; width: 100%; outline: none; }   /* app-wide form-field default is 16px so ANY input never triggers iOS focus-zoom */
.bar { height: 10px; background: var(--bg2); border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--violet); transition: width .3s; }


header.appbar, nav.deskrail { display: none; }


/* transient toast (e.g. after a stage-merge) */
.vetoast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 24px);
  max-width: min(560px, 92vw); z-index: 2000;
  background: #1b1d2e; color: #f3f4fb; border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 13px 18px; font-size: 14px; line-height: 1.45;
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.vetoast.show { opacity: 1; transform: translate(-50%, 0); }

/* auto-crop button stands out from the shape presets */
.shape.auto { background: var(--crop, #3a86ff); color: #fff; border-color: transparent; font-weight: 800; }

/* multi-piece trim (D09): committed keep-bands on the track + the piece list */
.trimbands { position: absolute; inset: 0; pointer-events: none; }
.tband { position: absolute; top: 0; bottom: 0; background: rgba(52,199,123,.32); border: 2px solid var(--join); border-radius: 12px; box-sizing: border-box; }
.trimpieces { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 2px; }
.tpiece { display: inline-flex; align-items: center; gap: 6px; background: rgba(52,199,123,.14); border: 1px solid rgba(52,199,123,.5); color: var(--text); font-size: 12.5px; font-weight: 700; padding: 4px 6px 4px 10px; border-radius: 10px; }
.tprm { border: none; background: rgba(255,255,255,.12); color: #fff; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; cursor: pointer; line-height: 1; }
.tprm:active { background: rgba(255,90,90,.7); }

/* save-dialog thumbnail row + status colors + shape button */
.thumbrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 8px; }
.thumbrow #saveThumbStatus { flex: 1 1 140px; }
.small.ok { color: var(--join); font-weight: 800; }
.small.warn { color: var(--sound); font-weight: 800; }
.btn.c-thumb { background: linear-gradient(150deg, #ff7eaa, var(--thumb)); color: #fff; }

/* file-name input with a fixed extension chip in the save dialog */
.fnamerow { display: flex; align-items: stretch; margin: 2px 0 4px; }
.fnamerow input { flex: 1 1 auto; border-radius: 12px 0 0 12px; }
.fnameext { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0 13px; background: var(--bg2); border: 1px solid var(--line); border-left: none; border-radius: 0 12px 12px 0; color: var(--muted); font-weight: 800; font-size: 14px; }

/* ===== WIDE desktop only (>=900px): no-scroll 2-pane workspace (editor | library).
   Below 900px (small UTM / narrow window) the layout stays single-column & SCROLLABLE
   so nothing ever gets cut off. ===== */


/* save dialog: "More options" collapsible (keeps the box simple by default) */
.moreopts { margin: 8px 0 2px; border-top: 1px solid var(--line); }
.moreopts > summary { cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 800; color: var(--muted); padding: 11px 2px; display: flex; align-items: center; gap: 7px; }
.moreopts > summary::-webkit-details-marker { display: none; }
.moreopts > summary::before { content: "▸"; font-size: 11px; transition: transform .15s ease; }
.moreopts[open] > summary { color: var(--text); }
.moreopts[open] > summary::before { transform: rotate(90deg); }
.moreopts .seclbl:first-of-type { margin-top: 2px; }

/* ===== stable save dialog: header + scrolling body + pinned footer ===== */
.sheet .savecard { display: flex; flex-direction: column; max-height: 88vh; overflow: visible; max-width: 520px; }
.sheet .savecard > h3 { flex: 0 0 auto; margin: 2px 0 14px; }
.savebody { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 4px; text-align: left; display: flex; flex-direction: column; }
/* phone flow: video on top → "Tell me about your video" box right under it → then file name / cover / folder */
.savebody > * { flex-shrink: 0; }   /* scroll the column instead of squashing the video (overflow:hidden → min-height:0 would collapse it) */
.savebody > .savevid { order: 0; }
.savebody > #saveMeta { order: 1; }
.savebody > .savecol-a { order: 2; }
.savecard .savevid video { max-height: 170px; }
.saveactions { flex: 0 0 auto; display: flex; gap: 10px; padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--line); }
.saveactions .do { margin-top: 0; width: auto; }
.saveactions [data-dosave] { flex: 2 1 0; }
.saveactions [data-closesave] { flex: 1 1 0; }

/* desktop: two calm columns so the box doesn't scroll */

/* the editor hides its standalone folderbar in .ed desktop mode — but the SAVE dialog needs its own */
#saveSheet .folderbar { display: flex; }

/* folder tiles in the gallery — tap to go inside; videos inside work like the gallery */
.gfolder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; aspect-ratio: 16/10; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.045); color: var(--text); cursor: pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.gfolder:active { transform: scale(.975); }
.gfolder:hover { border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.075); }
.gfolder .gficon { font-size: 30px; line-height: 1; }
.gfolder .gfname { font-size: 13.5px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; }
.gfolder.up { background: rgba(106,71,214,.14); border-color: rgba(106,71,214,.34); }
.gfolder.up .gficon, .gfolder.up .gfname { color: #cdbcff; }
.gfolder.new { border-style: dashed; color: var(--muted); }
.gfolder.new .gficon { color: var(--muted); }

/* ===== kid-simple, BIGGER save / prompt / title / description ===== */
.seclbl.big { font-size: 15.5px; font-weight: 800; margin-top: 12px; display: block; }
.askhelp { margin: 2px 0 9px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.savecard .seclbl { font-size: 14.5px; }
.savecard textarea, .savecard input, .selpanel textarea { font-size: 16px; line-height: 1.5; padding: 13px 14px; border-radius: 13px; }
.savecard #saveStory, .selpanel #selSummary { min-height: 92px; }
.savecard #saveDesc { min-height: 84px; }
.aibox { padding: 16px; border-radius: 18px; }
.aibox .askhelp { margin-top: 0; }
.aigen.big { padding: 15px; font-size: 16.5px; font-weight: 800; border-radius: 14px; margin-top: 11px; gap: 9px; }
.savecard .saveactions .do { font-size: 17px; padding: 16px; }
/* the optional "how to write" stays quiet so it never confuses a first-time user */
.aiinstr summary { font-size: 12.5px; opacity: .8; }

/* make the BIG labels actually win inside the save card (beat .savecard .seclbl) */
.savecard .seclbl.big, .selpanel .seclbl.big { font-size: 16px; font-weight: 800; }

/* "new folder" row inside the platform folder picker */
.fpfolder.fpnew { color: var(--violet); font-weight: 800; border: 1px dashed rgba(106,71,214,.45); }

/* ===== mobile bottom tab bar (Phase 1 — same destinations as the desktop rail) ===== */
.botnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; background: var(--bg2); border-top: 1px solid var(--line); padding: 6px 4px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.botitem { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; color: var(--muted); font-size: 11px; font-weight: 700; padding: 5px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.botitem svg { opacity: .9; }
.botitem.active { color: var(--text); }
.botitem:active { transform: scale(.94); color: var(--text); }
body { padding-bottom: 66px; }            /* room for the bar so it never covers content (mobile) */
/* When ANY sheet/modal is open it owns the whole screen: hide the bottom tab bar + top bar so the
   sheet's bottom buttons (Save now / Cancel) and its top header aren't clipped behind the fixed nav.
   (The sheets live inside .wrap, which is position:fixed → its own stacking context, so the body-level
   nav/topbar paint OVER the sheet otherwise.) */
body:has(.sheet:not([hidden])) .botnav,
body:has(.sheet:not([hidden])) .mtopbar { display: none !important; }

/* ===================== Phase 2: ONE-PAGE editor ===================== */
/* the pinned preview — stays at the top while the tool panels change below it */
#editStage { position: relative; line-height: 0; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line); }
#editStage .selvid { border-radius: 0; aspect-ratio: 16/9; }
#editStage.tall .selvid { aspect-ratio: auto; }
.selpanel #editStage { position: sticky; top: 0; z-index: 5; margin-bottom: 12px; }
/* properties panel empty-state: before any tool is picked, gently point at the tool row */
body.ed #s-home.editing #selPanel:not(.toolopen) #toolHost::after {
  content: "Pick a tool above to begin\A Cut · Crop · Turn · Sound · Photo"; white-space: pre-line; display: block; text-align: center;
  color: var(--ed-tx2); font-size: 13px; line-height: 1.7; padding: 34px 18px; opacity: .8;
}
/* the active tool's controls — header reads as an app section with a per-tool accent strip */
.toolhdr { font-weight: 800; font-size: 15px; margin: 6px 0 8px; color: var(--text); }
body.ed #s-home.editing .ed-props .toolhdr { height: 34px; display: flex; align-items: center; margin: -12px -12px 12px; padding: 0 12px; background: var(--ed-win); border-bottom: 1px solid rgba(255,255,255,.07); border-left: 3px solid var(--violet); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ed-tx); }
body.ed #s-home.editing .ed-props .toolhdr[hidden] { display: none; }
.toolpanel[hidden] { display: none; }
.toolpanel:not([hidden]) { display: block; animation: pop .18s ease; }
/* sticky Cancel / Apply bar — the primary action while a tool is open */
.toolbar { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 10px 0 4px; position: sticky; bottom: 0; z-index: 8; background: var(--bg); }
.toolbar .do { margin-top: 0; width: 100%; min-width: 0; padding: 14px; font-size: 16px; }
/* STATE B: a tool is open → dim the tray, spotlight the active tool, hide Save until done */
/* a tool being open NO LONGER locks the others — click any tool to switch straight to it (big-editor behavior) */
#selPanel.toolopen .seltool { pointer-events: auto !important; opacity: 1; }
#selPanel.toolopen .seltool.active { border-color: var(--violet); background: rgba(106,71,214,.14); box-shadow: 0 0 0 1px var(--violet); }
#selPanel.toolopen .seltool.active .stic { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc, var(--violet)) 55%, transparent); }
/* the "Details" action is a clip-level thing → hide it while a tool drawer is open */
#selPanel.toolopen [data-details] { display: none; }
/* Export button: the small "to My videos" line sits under the label without growing the bar */
.ed-foot [data-savefinal] small { display: block; font-size: 10px; font-weight: 700; opacity: .82; margin-top: 1px; }
body.ed #s-home.editing .ed-foot [data-details] { flex: 0 0 auto; width: auto; margin: 0; }
#selPanel.toolopen [data-clearedits], #selPanel.toolopen .aibox { display: none; }
/* desktop 3-panel + narrow-desktop 2-panel keep Save persistent (own foot cell); only MOBILE hides it for room */
@media all /* ONE-UI: phone rules apply at every width (A-5a) */ { #selPanel.toolopen [data-savefinal] { display: none; } }
/* watermark box list */
.wmboxes { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.wmbox { display: flex; align-items: center; justify-content: space-between; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 700; }
.wmbox button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 17px; line-height: 1; }
.wmstrength { display: flex; align-items: center; gap: 10px; }
.wmstrength input[type=range] { flex: 1; }

/* ===================== mobile APP shell ===================== */
.mtopbar { display: none; }
@keyframes slidein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media all /* ONE-UI: phone rules apply at every width (A-5a) */ {
  /* My videos = a clean file manager: hide the legacy "What do you want to do?" tool tiles + the old
     batch/finish bars (the floating #selBar replaces them); show ONLY the video gallery + Add row */
  body.ed #s-home .tiles, body.ed #s-home .hi, body.ed #s-home .sub { display: none; }
  body.ed #s-home #batchBar, body.ed #s-home .finishbar { display: none; }
  /* fixed top app bar */
  .mtopbar { display: flex; align-items: center; gap: 4px; position: fixed; top: 0; left: 0; right: 0; z-index: 45;
    height: calc(54px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0;
    background: var(--bg2); border-bottom: 1px solid var(--line); }
  .mtopbar .mtitle { flex: 1; text-align: center; font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtopbar .mback, .mtopbar .mact { width: 42px; height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--text); cursor: pointer; border-radius: 12px; }
  .mtopbar .mback:active, .mtopbar .mact:active { background: rgba(255,255,255,.10); transform: scale(.92); }
  .mtopbar.nohome .mback { visibility: hidden; }
  /* only the content scrolls — between the fixed top bar and the fixed bottom nav */
  /* the body is locked → the content area scrolls INSIDE .wrap, between the fixed top bar and bottom nav */
  .wrap { position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    max-width: none; margin: 0; padding: calc(62px + env(safe-area-inset-top)) 14px calc(74px + env(safe-area-inset-bottom)); }
  body { padding-bottom: 0; }
  /* in-page headers are replaced by the top bar…
     EXCEPT the wizard picker + publish screens: body.wiz hides the top bar, so their own wshead
     (with its back arrow) is the ONLY back affordance there — never hide it (har jagah back). */
  .brand, .wshead, .thead { display: none; }
  #s-wizpick .wshead, #s-wizpub .wshead { display: flex; }
  /* declutter the workspace top */
  #s-home #folderbar { display: none; }
  /* app-like slide between screens */
  .screen { animation: slidein .24s ease; }

  /* ===== MOBILE editor: stacked no-scroll — a fixed pane between the top bar and the bottom nav ===== */
  body.ed #s-home.editing { position: fixed; top: calc(54px + env(safe-area-inset-top)); left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; overflow: hidden; background: var(--ed-win); z-index: 30; }
  body.ed #s-home.editing #selPanel:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; background: none; border: none; box-shadow: none; }
  body.ed #s-home.editing .ed-stage { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 8px 10px 4px; min-height: 0; }
  body.ed #s-home.editing .clipstrip { display: block; flex: 0 0 auto; width: 100%; margin: 0 0 6px; }
  body.ed #s-home.editing #editStage { position: relative; top: auto; margin: 0; width: auto; max-width: 100%; box-shadow: none; border: 1px solid var(--ed-line); background: var(--ed-stage); }
  body.ed #s-home.editing .selname { color: var(--ed-tx2); font-size: 12.5px; margin: 5px 0 0; text-align: center; }
  body.ed #s-home.editing .ed-props { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--ed-panel); border-top: 1px solid var(--ed-line); }
  /* tools in ONE horizontal-scroll row (no wrap) so they don't eat the controls' vertical room */
  body.ed #s-home.editing #seltools { flex: 0 0 auto; order: 0; margin: 0; padding: 8px 12px; gap: 7px; display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; justify-content: flex-start; border-top: 1px solid var(--ed-line); border-bottom: 1px solid var(--ed-line); background: var(--ed-panel); -webkit-overflow-scrolling: touch; }
  body.ed #s-home.editing #seltools .seltool { flex: 0 0 auto; min-width: 62px; padding: 6px 7px 5px; gap: 5px; font-size: 11px; }
  body.ed #s-home.editing #seltools .seltool .stic { width: 34px; height: 34px; border-radius: 11px; }
  body.ed #s-home.editing #seltools .seltool .stic svg { width: 20px; height: 20px; }
  body.ed #s-home.editing .ed-props #toolHost { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 11px 13px; }
  body.ed #s-home.editing .ed-props #toolBar { flex: 0 0 auto; padding: 10px 13px; border-top: 1px solid var(--ed-line); margin: 0; background: var(--ed-panel); }
  body.ed #s-home.editing .ed-foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 9px 13px; border-top: 1px solid var(--ed-line); }
  body.ed #s-home.editing .ed-foot .selchips { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 7px; margin: 0; }
  body.ed #s-home.editing .ed-foot .aibox { display: none; }
  /* stack the two action buttons FULL-WIDTH on phones so "Export video" never gets clipped at the edge */
  body.ed #s-home.editing .ed-foot [data-details] { flex: 1 1 100%; width: 100%; margin: 0; justify-content: center; }
  body.ed #s-home.editing .ed-foot [data-savefinal] { flex: 1 1 100%; width: 100%; margin: 0; padding: 14px 16px; justify-content: center; }
  body.ed #s-home.editing .ed-foot [data-clearedits] { display: none; }
  body.ed #s-home.editing .gallery, body.ed #s-home.editing .finishbar, body.ed #s-home.editing #batchBar,
  body.ed #s-home.editing #addBtn, body.ed #s-home.editing .addrow { display: none; }
}

/* ===================== custom video player (no browser chrome) ===================== */
/* RETIRED custom player chrome — the editor video now uses the browser's NATIVE controls (same as the
   add-context page): built-in seek/volume/fullscreen, no hover-scrub bug. Keep the rules below only so
   the markup stays harmless if ever re-enabled; both bars are force-hidden. */
#editStage .vctrl, #editStage .vbig { display: none !important; }
#editStage .vctrl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; align-items: center; gap: 10px; padding: 22px 13px 12px; line-height: 1;
  background: linear-gradient(transparent, rgba(0,0,0,.66)); opacity: 1; transition: opacity .2s ease; }
#editStage .vmini { width: 36px; height: 36px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: none; background: rgba(255,255,255,.16); color: #fff; border-radius: 50%; cursor: pointer; padding: 0; }
#editStage .vmini:active { transform: scale(.9); }
/* Fat, easy-to-grab seek bar. The bar itself is 10px, but a taller transparent ::before gives a ~30px
   touch strip so a finger can grab and drag it precisely to line up a screenshot. */
#editStage .vbar { flex: 1; height: 10px; border-radius: 5px; background: rgba(255,255,255,.32); cursor: pointer; position: relative; touch-action: none; }
#editStage .vbar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 30px; }
#editStage .vfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; background: var(--violet); pointer-events: none; }
#editStage .vfill::after { content: ""; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.6), 0 0 0 2px var(--violet); }
#editStage .vtime { color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#editStage .vbig { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 66px; height: 66px; border: none; border-radius: 50%; background: rgba(0,0,0,.42); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 6; }
#editStage .vbig svg { margin-left: 3px; }
#editStage.paused .vbig { display: inline-flex; }
#editStage .selvid { cursor: pointer; }
/* hide the player chrome while drawing a crop / watermark box */
#editStage.boxing .vctrl, #editStage.boxing .vbig { display: none; }

/* when a tool is open on MOBILE only, shrink the preview so its controls + Apply/Cancel bar always fit.
   The desktop 3-panel and narrow-desktop 2-panel size the stage in their own column, so no shrink there. */
@media all /* ONE-UI: phone rules apply at every width (A-5a) */ { #selPanel.toolopen .selvid { max-height: 46vh; } }
/* on MOBILE only, once a tool is open the clip filmstrip is hidden so the tool's controls get the room
   (the clip name still shows below the preview, and Cancel returns to the strip). 2-panel keeps it for switching. */
@media all /* ONE-UI: phone rules apply at every width (A-5a) */ { body.ed #s-home.editing #selPanel.toolopen .clipstrip { display: none; } }

/* Photo tool — frame-step nudger: 4 big, tap-friendly buttons to move the preview to the exact moment. */
.framestep { display: flex; gap: 7px; margin: 11px 0; }
.framestep .fstep { flex: 1; min-height: 44px; padding: 0 6px; border: 1px solid var(--line); border-radius: 11px; background: var(--card, #fff);
  color: var(--ink, #1a1a1a); font-size: 14px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.framestep .fstep:active { transform: scale(.94); background: color-mix(in srgb, var(--thumb, #e0913a) 16%, var(--card, #fff)); border-color: var(--thumb, #e0913a); }
body.ed .framestep .fstep { background: var(--ed-win, #241d2e); color: var(--ed-tx, #ece7f5); border-color: var(--ed-line, rgba(255,255,255,.12)); }

/* ============================================================================
   PREMIUM POLISH (design-only, appended last so it wins by source order).
   Restyles existing selectors — touches NO data-* handler, NO layout band,
   NO 34dvh cap, NO page-lock. Pure depth/color/motion. ===========================*/

/* --- chooser cards: category accent + lift --- */
.choocard { box-shadow: var(--shadow-resting), var(--hairline-inset); border-left: 3px solid color-mix(in srgb, var(--cc, var(--violet)) 60%, var(--line)); }
.choocard:hover { transform: translateY(-2px); border-color: var(--cc, var(--violet)); box-shadow: var(--shadow-hover); }
.cc-one { --cc: var(--crop); } .cc-join { --cc: var(--join); } .cc-many { --cc: var(--conv); } .cc-myfiles { --cc: var(--files); }
.choocard .ccic { background: color-mix(in srgb, var(--cc, var(--violet)) 16%, transparent); color: var(--cc, var(--violet)); }
.urlbar { box-shadow: var(--hairline-inset); }
.setlink:hover { color: var(--text); }

/* --- appbar: depth + the one gradient CTA --- */
header.appbar { box-shadow: 0 1px 0 var(--hairline-top); }
.appbar .abact.prim { background: var(--grad-brand); border-color: transparent; box-shadow: var(--glow-accent-sm); }
.appbar .abact.prim:hover { background: var(--grad-brand); filter: brightness(1.07); }
.appbar .ablogo { box-shadow: var(--glow-accent-sm), inset 0 0 0 1px rgba(255,255,255,.07); }

/* --- file-manager bin: calm cards, one lift, accent selection, glass bar --- */
.gtile { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .gtile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
  .gtile:hover .gthumb { border-color: var(--border-strong); box-shadow: none; }
}
#ggrid .gtile:has(.gcheck.ck) .gthumb { box-shadow: 0 0 0 2px var(--violet); border-color: var(--violet); }
#ggrid .gcheck.ck { box-shadow: var(--glow-accent-sm); }
.gedited { box-shadow: var(--shadow-resting); }
.gfolder { box-shadow: var(--hairline-inset); }
.selbar { background: rgba(22,19,29,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-floating); }
.gh-selall:hover { border-color: var(--violet); }

/* --- editor: program monitor + per-tool active color + premium inspector --- */
body.ed #s-home.editing .ed-stage { background: radial-gradient(130% 100% at 50% 32%, #17131f 0%, var(--ed-stage) 80%); }
body.ed #s-home.editing #editStage { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 18px 44px -8px rgba(0,0,0,.7); }
body.ed #s-home.editing .selname { display: inline-flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) auto 0; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.05); border: 1px solid var(--ed-line); }
.seltool:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--tc, var(--violet)) 40%, var(--ed-line)); }
#selPanel.toolopen .seltool.active { border-color: var(--tc, var(--violet)); background: color-mix(in srgb, var(--tc, var(--violet)) 14%, transparent); box-shadow: 0 0 0 1px var(--tc, var(--violet)), 0 6px 16px -6px var(--tc, var(--violet)); }
#selPanel.toolopen .seltool.active .stic { background: color-mix(in srgb, var(--tc, var(--violet)) 26%, var(--ed-win)); color: #fff; }
body.ed #s-home.editing .ed-props .toolhdr { border-left-color: var(--tc, var(--violet)); }
.toolbar { background: var(--ed-panel); }
.do.c-conv, .do[data-savefinal] { box-shadow: var(--glow-accent), var(--hairline-inset); }
.do.ghost { box-shadow: none; }
.hd { box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.cg { box-shadow: 0 0 0 3px var(--crop), 0 2px 6px rgba(0,0,0,.5); }

/* --- segmented control skin: opt-in via .fmts.seg, doesn't touch .fmt/.on JS --- */
.fmts.seg { display: flex; gap: 2px; flex-wrap: nowrap; padding: 4px; background: var(--ed-win); border: 1px solid var(--ed-line); border-radius: var(--r-md); }
.fmts.seg .fmt { flex: 1 1 0; min-width: 0; border: none; background: transparent; box-shadow: none; padding: 9px 8px; border-radius: var(--r-sm); color: var(--ed-tx2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.fmts.seg .fmt.on { background: color-mix(in srgb, var(--tc, var(--violet)) 90%, #fff); color: #0d0e12; box-shadow: 0 2px 8px -2px rgba(0,0,0,.5); }

/* --- save sheet: floating depth + AI hero --- */
.sheet .savecard { box-shadow: var(--shadow-floating); }
.aigen.big, [data-savegen].big { background: var(--grad-brand); box-shadow: var(--glow-accent-sm); }
.saveactions [data-dosave] { box-shadow: var(--glow-accent); }

/* === drag-and-drop add overlay — an EASIER way to add a video; no existing control removed === */
.dropzone { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dropzone[hidden] { display: none; }
@supports not (background: color-mix(in srgb, white, black)) { .dropzone { background: rgba(13,11,18,.82); } }
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) { .dropzone { background: rgba(13,11,18,.9); } }
.dz-card { display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none;
  padding: 40px 52px; border-radius: 22px; color: var(--text); text-align: center; font-weight: 800; font-size: 18px;
  border: 2.5px dashed var(--violet); background: color-mix(in srgb, var(--violet) 13%, var(--card)); box-shadow: var(--shadow-floating); }
@supports not (background: color-mix(in srgb, white, black)) { .dz-card { background: #241a3a; } }
.dz-card svg { color: var(--violet); }
@media (prefers-reduced-motion: no-preference) {
  .dz-card { animation: dzpop .18s cubic-bezier(.2,.9,.3,1.2); }
  @keyframes dzpop { from { transform: scale(.93); opacity: .5 } to { transform: scale(1); opacity: 1 } }
}

/* === "Ready to publish" copy-paste sheet (after export) === */
.pubcard { max-width: 560px; }
.pubrow { margin: 13px 0; text-align: left; }
.pubrow .seclbl { margin: 0 0 5px; display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
.publine { display: flex; gap: 8px; align-items: stretch; }
.publine input, .publine textarea { flex: 1 1 auto; min-width: 0; padding: 11px 12px; font-size: 16px; line-height: 1.45;
  border-radius: 11px; border: 1px solid var(--line); background: #15121d; color: var(--text); resize: vertical; font-family: inherit; }
.copybtn { flex: 0 0 auto; width: 44px; display: grid; place-items: center; border-radius: 11px;
  border: 1px solid var(--line); background: rgba(122,92,255,.14); color: var(--violet); cursor: pointer; transition: background .12s, transform .1s; }
.copybtn:active { transform: scale(.93); }
.copybtn.done { background: rgba(52,199,123,.2); color: #34c77b; border-color: rgba(52,199,123,.4); }
.pubsec { margin: 20px 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--violet); border-top: 1px solid var(--line); padding-top: 14px; display: flex; align-items: center; gap: 10px; }
.aigen.sm { margin-left: auto; font-size: 12px; font-weight: 700; padding: 6px 12px; border: none; border-radius: 9px; background: var(--grad-brand, #7a5cff); color: #fff; cursor: pointer; text-transform: none; letter-spacing: 0; }
.aigen.sm[disabled] { opacity: .6; }

/* =========================================================================
   FILE MANAGER — mobile-app list (Design 4: soft card rows)
   line-by-line · left checkbox · small thumbnail · name + size · type icon
   tap a row = watch + AI-context overlay · touch-hold = multi-select
   ========================================================================= */
#ggrid { display: flex; flex-direction: column; gap: 8px; }

/* sort bar (per-space sort chips) */
.sortbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 2px 0 10px; }
.sortbar .sortlbl { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-right: 2px; }
.sortchip { background: var(--card); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .12s, background .12s, color .12s; }
.sortchip:active { transform: scale(.96); }
.sortchip.on { background: rgba(122,92,255,.14); border-color: var(--violet); color: #cdbcff; }

/* Video Cloud / My Videos — tag filter bar (country / language / category / position) */
.tagfilterbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 10px; }
.tagfilterbar .sortlbl { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-right: 2px; }
.tagfilter { width: auto; max-width: 46%; background: var(--card); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 6px 28px 6px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent;
  appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239a93a8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.tagfilter.on { background-color: rgba(122,92,255,.14); border-color: var(--violet); color: #cdbcff; }
.tagfilterclear { padding: 6px 12px; }

/* ✨ Auto-suggest context (grok-vision) button — sits under the context box */
.autoctxbtn { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 2px; padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(122,92,255,.18), rgba(255,120,200,.14)); border: 1px solid var(--violet); color: #d7c9ff;
  font-size: 13px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: filter .12s, transform .1s; }
.autoctxbtn:hover { filter: brightness(1.12); }
.autoctxbtn:active { transform: scale(.97); }
.autoctxbtn:disabled { opacity: .7; cursor: default; }

/* folders render as rows at the top of the list (reset the old square-tile rule) */
.gfolder { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; aspect-ratio: auto;
  gap: 11px; width: 100%; text-align: left; min-height: 46px;
  padding: 9px 12px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
  color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gfolder .gficon { flex: 0 0 auto; width: 26px; text-align: center; font-size: 18px; color: var(--violet); }
.gfolder .gfname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfolder.up .gficon { color: var(--muted); }
.gfolder.new { color: var(--violet); border-style: dashed; background: rgba(122,92,255,.05); }
.gfolder:active { transform: scale(.99); }

/* a file row = a soft card */
.frow { display: flex; align-items: center; gap: 11px; min-height: 60px; padding: 8px 10px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-resting);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s var(--ease-out), border-color .12s ease, box-shadow .12s ease, background .12s ease; }
.frow:active { transform: scale(.985); }
.frow.pickedrow { border-color: var(--violet); box-shadow: 0 0 0 1.5px var(--violet), var(--shadow-resting); background: rgba(122,92,255,.10); }

.fckbox { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid rgba(255,255,255,.42); background: rgba(0,0,0,.22); color: #fff; font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; line-height: 1; transition: transform .1s ease, background .12s ease; }
.fckbox:active { transform: scale(.86); }
.fckbox.ck { background: var(--violet); border-color: #fff; box-shadow: 0 2px 8px rgba(122,92,255,.55); }

.fthumb { flex: 0 0 auto; position: relative; width: 58px; height: 44px; border-radius: 9px; overflow: hidden;
  background: #07080f; border: 1px solid var(--line); }
.fthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fthumb .fplay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.92); pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.fthumb .fdur { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.72); color: #fff;
  font-size: 9.5px; font-weight: 700; padding: 0 3px; border-radius: 4px; font-variant-numeric: tabular-nums; }
/* 🔍 magnifier — opens the real cover full-size (the 58x44 card thumb is too small to judge the auto collage) */
.fthumb .fzoom { position: absolute; right: 2px; top: 2px; width: 19px; height: 19px; display: flex; align-items: center;
  justify-content: center; padding: 0; border: none; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.fthumb .fzoom:hover, .fthumb .fzoom:active { background: rgba(124,92,255,.92); }
/* full-screen cover preview */
.coverlb { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; }
.coverlb-bg { position: absolute; inset: 0; background: rgba(4,3,10,.9); backdrop-filter: blur(3px); }
.coverlb-inner { position: relative; z-index: 1; max-width: 94vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.coverlb-inner img { max-width: 94vw; max-height: 78vh; width: auto; height: auto; border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.6); background: #07080f; }
.coverlb-name { color: #d8d2ea; font-size: 13px; font-weight: 600; max-width: 90vw; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coverlb-x { position: absolute; top: -6px; right: -6px; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: #fff; color: #111; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.5); }

.fmeta { flex: 1 1 auto; min-width: 0; }
.fname { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsub { margin-top: 2px; display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsub > span { flex: 0 0 auto; }
.ftype { display: inline-flex; align-items: center; gap: 3px; color: var(--files); font-weight: 800; letter-spacing: .02em; }
.fedited { color: var(--join); font-weight: 700; }
.fnoted { display: none; align-items: center; gap: 3px; color: var(--turn); font-weight: 700; }
.frow.noted .fnoted { display: inline-flex; }
/* spoken-language chip — shown on every analyzed video like the duration (Hindi / Bengali / Unknown) */
.flangtag { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; border-radius: 999px; font-size: 10.5px;
  font-weight: 800; line-height: 17px; color: #fff; background: linear-gradient(135deg, #2b6cb0, #6b46c1); letter-spacing: .01em; }
.flangtag.unk { background: rgba(255,255,255,.08); color: var(--muted); font-weight: 700; }
.flangtag.setlang { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.flangtag.setlang:hover, .flangtag.setlang:focus { filter: brightness(1.15); outline: none; }
/* quick language picker */
.langpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.langpick { padding: 11px 8px; border-radius: 11px; border: 1px solid var(--line); background: var(--card, #141019); color: var(--text, #fff);
  font-size: 13px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.langpick:hover { border-color: #7c5cff; }
.langpick.on { background: linear-gradient(135deg, #2b6cb0, #6b46c1); border-color: transparent; color: #fff; }

.fdel { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: none; background: transparent;
  color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, color .12s; }
.fdel:active { background: rgba(255,90,90,.16); color: #ff6b6b; }

/* ===== tap a row → fullscreen player + per-video AI context note ===== */
.vplayer { align-items: flex-start; }
.vpcard { text-align: left; width: 100%; max-width: 460px; padding: 14px 14px 16px; }
.vphead { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.vpx { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; border: none; background: rgba(255,255,255,.07);
  color: var(--text); display: grid; place-items: center; cursor: pointer; }
.vpx:active { transform: scale(.92); }
.vptitle { min-width: 0; }
.vpname { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpmeta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vpvidwrap { width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #000; margin-bottom: 13px; }
.vpvidwrap video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.vplbl { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.vplbl span { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.vpctx { width: 100%; box-sizing: border-box; font-size: 16px; line-height: 1.5; padding: 12px 13px; border-radius: 13px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text); resize: vertical; min-height: 92px; font-family: inherit; }
.vpctx:focus { outline: none; border-color: var(--violet); }
.vpsaved { margin-top: 8px; font-size: 12.5px; color: var(--join); font-weight: 700; }
.vprow { display: flex; gap: 9px; margin-top: 14px; }
.vpbtn { flex: 1 1 0; min-height: 46px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.06);
  color: var(--text); font-size: 14px; font-weight: 800; cursor: pointer; transition: transform .1s ease, filter .12s ease; }
.vpbtn:active { transform: scale(.97); }
.vpbtn[disabled] { opacity: .55; }
.vpbtn.save { background: var(--violet); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(122,92,255,.4); }
.vpbtn.edit { background: var(--cut); border-color: transparent; color: #2a1206; }
/* on phones, clear the fixed top bar so the overlay header isn't crowded */
@media all /* ONE-UI: phone rules apply at every width (A-5a) */ { .vplayer { align-items: flex-start; padding-top: calc(60px + env(safe-area-inset-top)); } }

/* Settings language dropdown — match the other settings inputs */
.setinput, #setLang { width: 100%; box-sizing: border-box; font-size: 16px; padding: 12px 13px; border-radius: 12px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text); font-family: inherit;
  -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239d97ab' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px; }
.setinput:focus, #setLang:focus { outline: none; border-color: var(--violet); }

/* ===== mobile sheet polish (from the 22 Jun audit) — safe, additive, mobile-only ===== */
@media all /* ONE-UI: phone rules apply at every width (A-5a) */ {
  /* cards never clipped on short / notched phones (nav is already hidden when a sheet is open) */
  .sheet .card { max-height: min(94vh, calc(100dvh - 12px)); }
  /* publish page: input + copy button must fit a 375px screen without horizontal overflow */
  .pubcard { padding: 14px 12px; }
  .publine { gap: 6px; }
  .publine input, .publine textarea { padding: 10px 11px; font-size: 16px; }   /* 16px so these never trigger iOS focus-zoom */
  .copybtn { width: 46px; min-width: 46px; height: 46px; flex-shrink: 0; }
  /* result/done sheet: cap the preview so the action buttons stay reachable */
  #done video, #done img { max-height: 34vh; }
  /* player overlay buttons keep a 46px tap target on narrow phones */
  .vprow { flex-wrap: wrap; }
  /* MAIN action row → clean 2-up wrap on phones (owner 19 Jul: folder ke andar buttons mobile me cram
     ho rahe the). 4 in-folder buttons (Add to merge / Move out / Convert / Edit) make a tidy 2×2; the
     2-button rows (Save+Edit, Publish+Edit) sit side-by-side; a lone button fills the row. No more
     3-line-wrapped squished buttons — every option is clearly readable + a big tap target. */
  .vpactions { display: flex; flex-wrap: wrap; gap: 9px; }
  .vpactions .vpbtn { flex: 1 1 calc(50% - 5px); min-width: calc(50% - 5px); width: auto; min-height: 54px; }
}
@media (max-width: 380px) {
  .vprow:not(.vpactions) { flex-direction: column; }
  .vprow:not(.vpactions) .vpbtn { width: 100%; }
}

/* ===================== EDITING WIZARD ===================== */
/* the wizard owns the whole screen — hide the bottom nav + top bar throughout */
body.wiz .botnav, body.wiz .mtopbar { display: none !important; }

.wpsub { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 2px 0 14px; }
.wpall { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; margin-bottom: 12px;
  border-radius: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text);
  font-size: 14.5px; font-weight: 700; cursor: pointer; }
.wpall-cb { width: 24px; height: 24px; border-radius: 7px; border: 2px solid rgba(255,255,255,.35); display: grid; place-items: center; color: transparent; flex: 0 0 auto; }
.wpall.on .wpall-cb { background: var(--violet); border-color: var(--violet); color: #fff; }

.wplist { display: flex; flex-direction: column; gap: 9px; padding-bottom: 92px; }
.wptool { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 11px 13px; text-align: left;
  border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer;
  transition: border-color .12s, background .12s; }
.wptool:active { transform: scale(.99); }
.wptool .wtcb { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.32);
  display: grid; place-items: center; color: transparent; }
.wptool.on { border-color: var(--violet); background: rgba(122,92,255,.10); }
.wptool.on .wtcb { background: var(--violet); border-color: var(--violet); color: #fff; }
.wptool .wtic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.05); }
.wptool .wttxt { min-width: 0; }
.wptool .wttxt b { display: block; font-size: 14.5px; }
.wptool .wttxt span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* sticky footer shared by the picker + publish screens */
.wpfoot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg2); border-top: 1px solid var(--line); }
.wpfoot .do { width: 100%; margin: 0; }
/* clear the FIXED two-button footer (Export + Save-only ≈ 130px) so the last rows (Thumbnail: Auto,
   Categories: Auto ▾) — and an EXPANDED category list — are never hidden behind it (owner 10 Jul:
   "thumbnail aur categories ... kat jata hai"). 96px only cleared a single-button footer. */
.pubopts { padding-bottom: 180px; }

/* wizard STEP chrome (fixed, over the editor) */
.wizhead { position: fixed; top: 0; left: 0; right: 0; z-index: 46; display: flex; align-items: center; gap: 8px;
  height: calc(54px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0; background: var(--bg2); border-bottom: 1px solid var(--line); }
.wizx { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border: none; background: none; color: var(--text); cursor: pointer; border-radius: 12px; }
.wizprog { flex: 1; text-align: center; min-width: 0; }
.wizprog .wizstep { display: block; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.wizprog .wiztool { display: block; font-size: 15px; font-weight: 800; color: var(--text); }
.wizfoot { position: fixed; bottom: 0; left: 0; right: 0; z-index: 46; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--bg2); border-top: 1px solid var(--line); }
.wizfoot .wizskip { flex: 0 0 auto; background: none; border: none; color: var(--muted); font-size: 13.5px; font-weight: 700; padding: 13px 10px; cursor: pointer; }
.wizfoot .wizskip.all { color: var(--conv, #7c6cff); white-space: nowrap; }   /* guided wizard: bail straight to the context step */
.wizfoot .wizsave { flex: 1; margin: 0; }

/* during a tool STEP, hide the editor's normal chrome (wizard chrome replaces it) + give room for the fixed footer */
body.wiz #s-home .wshead, body.wiz #s-home .seltools, body.wiz #s-home .ed-foot,
body.wiz #s-home .toolbar, body.wiz #s-home #gallery, body.wiz #s-home #folderbar,
body.wiz #s-home #addBtn, body.wiz #s-home .addrow, body.wiz #s-home #finishBar, body.wiz #s-home #batchBar { display: none !important; }
body.wiz #s-home { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }

/* publish option cards */
.pubopts { display: flex; flex-direction: column; gap: 10px; }
.pubopt { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 66px; padding: 13px; text-align: left;
  border-radius: 15px; border: 2px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; transition: border-color .12s, background .12s; }
.pubopt .poic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.05); color: var(--violet); }
.pubopt .potxt { min-width: 0; }
.pubopt .potxt b { display: block; font-size: 15.5px; }
.pubopt .potxt span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.pubopt.on { border-color: var(--violet); background: rgba(122,92,255,.10); }
.wizsched { margin-top: 14px; }
.wizsched .seclbl { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }

/* publish — Automatic sub-box (when + which sites) */
#wizAutoBox { margin-top: 4px; }
.wizfield { margin-top: 16px; }
.wizfield .seclbl { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.wizwhen { display: flex; gap: 8px; }
.whenbtn { flex: 1; min-height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; }
.whenbtn.on { border-color: var(--violet); background: rgba(122,92,255,.13); color: #fff; }
.wizsites { display: flex; flex-direction: column; gap: 8px; }
.siterow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); }
.siterow.unlinked { opacity: .6; }
/* NEW-PIPELINE: a site that already got this video — shown, not selectable (re-post block) */
.siterow.posted { opacity: .62; }
.siterow.posted .sitedone { flex: 0 0 auto; width: 24px; text-align: center; }
.siterow.posted .sitename small { color: var(--ok, #38c172); font-weight: 700; }
/* EDIT-POST: the posted site is now a selectable "Update" row (fix its thumbnail) */
.siterow.updating { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 8%, var(--card)); flex-wrap: wrap; }
.updbadge { color: var(--violet); font-weight: 800; background: color-mix(in srgb, var(--violet) 16%, transparent); padding: 1px 7px; border-radius: 999px; }
/* per-site thumbnail — a PROMINENT full-width band (preview + label) so it's never missed */
.sitethumb-band { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); cursor: pointer; text-align: left; }
.sitethumb-band.chosen { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, var(--card)); }
.sitethumb-band.needpick { border-color: var(--warn, #e0a24a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn, #e0a24a) 35%, transparent); }
/* same "you still need this" flash on the in-player picker's capture button (the band it replaced) */
#vpStpShotBtn.needpick { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn, #e0a24a) 55%, transparent); }
/* player: 📸 Thumbnails ⇄ 📝 Context switch — two separate options, one section visible at a time (25 Jul) */
.vpmoderow { display: flex; gap: 8px; margin: 2px 0 12px; }
.vpmodebtn { flex: 1 1 0; min-height: 46px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--muted); font-weight: 800; font-size: 14px; cursor: pointer; }
.vpmodebtn.on { background: var(--violet); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(122,92,255,.4); }
.vpmodebtn:active { transform: scale(.97); }
.sitethumb-band .stb-img { flex: 0 0 auto; width: 56px; height: 34px; object-fit: cover; border-radius: 7px; background: #000; }
.sitethumb-band .stb-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.sitethumb-band .stb-txt b { font-size: 13.5px; font-weight: 800; }
.sitethumb-band .stb-txt small { font-size: 11.5px; color: var(--muted); }
.sitethumb-band .stb-go { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--violet); white-space: nowrap; }
/* thumbnail picker (25 Jul) — header / scrolling body / footer instead of one long scroller, so the exits
   (‹ and ✕) and the Done row are ALWAYS on screen on a phone. The card itself no longer scrolls; .stpbody does. */
/* .sheet .stpcard, not .stpcard — `.sheet .card` (2 classes) sets padding/overflow-y and would otherwise win */
.sheet .stpcard { max-width: 480px; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.stphead { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--line); background: var(--card); }
.stphead h3 { flex: 1; min-width: 0; margin: 0; font-size: 17.5px; font-weight: 800; text-align: center; }
.stphead-btn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); font-size: 17px; font-weight: 800; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.stphead-btn:active { transform: scale(.93); }
.stpbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 18px 6px; }
.stpfoot { flex: 0 0 auto; display: flex; gap: 9px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--card); }
/* .do is width:100%, so without a zero basis the auto-width Cancel would out-size the flex:1 primary */
.stpfoot .do { margin-top: 0; flex: 1 1 0; width: auto; min-width: 0; padding: 16px 10px; font-size: 17px; }
/* toggle switch (admin) */
.tgl { flex: 0 0 auto; width: 50px; height: 30px; border-radius: 999px; border: none; background: var(--line); position: relative; cursor: pointer; transition: background .15s; }
.tgl .tgl-dot { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s; }
.tgl.on { background: var(--violet); }
.tgl.on .tgl-dot { transform: translateX(20px); }
/* structured video tags picker (context step) */
.vtagpick { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.vtagrow .vtaglbl { font-size: 12.5px; font-weight: 800; color: var(--muted); margin-bottom: 6px; }
.vtagchips { display: flex; flex-wrap: wrap; gap: 7px; }
.vtagchip { border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 12.5px; font-weight: 700; padding: 7px 11px; border-radius: 999px; cursor: pointer; }
.vtagchip.on { background: var(--violet); border-color: var(--violet); color: #fff; }
.sitecb { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; border: 2px solid rgba(255,255,255,.3); background: transparent; color: transparent; display: grid; place-items: center; cursor: pointer; }
.sitecb.on { background: var(--violet); border-color: var(--violet); color: #fff; }
.sitename { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sitename small { color: var(--muted); font-weight: 500; }
.sitelang { flex: 0 0 auto; width: auto; min-width: 124px; padding: 8px 30px 8px 11px; font-size: 13px; }
.nosite { font-size: 13.5px; color: var(--muted); padding: 13px; border-radius: 12px; border: 1px dashed var(--line); }
.linkbtn { background: none; border: none; color: var(--violet); font-weight: 800; cursor: pointer; padding: 0; }

/* ============================================================================
   PORTED FEATURE STYLES (2 Jul) — auth banner, publish-multi wizard, context
   step + quick-tags, status badges, folder rows, history, upload manager.
   Additive only: nothing above is overridden except where a selector is new.
   ============================================================================ */

/* ---- super-admin "Acting as" banner (F5) ---- */
#impBanner { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 100000; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 20px); background: linear-gradient(135deg, #d8a72a, #a9791a); color: #1a1206; font-size: 13px; font-weight: 800; padding: 7px 7px 7px 14px; border-radius: 999px; box-shadow: 0 8px 26px rgba(0,0,0,.45); }
#impBanner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#impBanner button { flex: 0 0 auto; background: #1a1206; color: #ffd97a; border: none; border-radius: 999px; padding: 5px 15px; font-size: 12.5px; font-weight: 800; cursor: pointer; }
#impBanner button:hover { filter: brightness(1.15); }

/* ---- language selector on the chooser (A7) ---- */
.langsw { display: flex; width: fit-content; margin: 18px auto 4px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); }
.langsw button { border: none; background: none; color: var(--muted); font-size: 13px; font-weight: 700; padding: 8px 18px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.langsw button + button { border-left: 1px solid var(--line); }
.langsw button.on { background: linear-gradient(135deg, var(--violet, #7c5cff), #6a47d6); color: #fff; }
.langsw button:not(.on):hover { background: rgba(255,255,255,.06); color: var(--text); }

/* ---- publish-status badges (D7/D8): ✅ Posted · ⏰ Scheduled · 📝 Saved · Ready-to-publish ---- */
.fstatus { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.pstat { font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; line-height: 1.6; white-space: nowrap; }
.pstat.posted { color: #34c77b; background: rgba(52,199,123,.14); }
.pstat.sched { color: #ffb300; background: rgba(255,179,0,.14); }
.pstat.saved { color: var(--muted); background: rgba(255,255,255,.06); }
.pstat.ready { color: #34c77b; background: rgba(52,199,123,.16); border: 1px solid rgba(52,199,123,.4); }
.pstat.needs { color: var(--muted); background: rgba(255,255,255,.05); border: 1px dashed var(--line); }

/* ---- hidden niche category — admin-only chip on the video row (C7) ---- */
.fcatline { margin-top: 4px; }
.fcat { display: inline-block; max-width: 100%; padding: 1px 9px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: .82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.fcats { display: inline-block; max-width: 100%; padding: 2px 10px; border-radius: 999px; background: rgba(124,92,255,.14); border: 1px solid rgba(124,92,255,.5); color: #cbb8ff; font-weight: 700; font-size: .82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.fcats.setcats { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fcats.setcats:hover, .fcats.setcats:focus { background: rgba(124,92,255,.24); outline: none; }

/* ---- folder ROWS (G19): left-aligned, same select box as videos + ⋯ menu + drag-drop ---- */
button.gfrow { width: 100%; font: inherit; color: var(--text); text-align: left; }
.gfrow { cursor: pointer; }
.fthumb-fold { width: 58px; height: 44px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; border: none; cursor: pointer;
  background: linear-gradient(135deg, rgba(122,92,255,.30), rgba(25,200,214,.18)); color: #b9a6ff; }
.fthumb-fold.new, .fthumb-fold.up { font-size: 23px; font-weight: 800; color: var(--muted); background: rgba(255,255,255,.06); }
.fckbox.spacer { visibility: hidden; }
.gfrow .gfdots { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; border: none; background: rgba(255,255,255,.06); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.gfrow .gfdots:hover { background: rgba(255,255,255,.13); color: var(--text); }
.gfrow.dragging { opacity: .45; }
.gfrow.dropok { border-color: var(--violet, #7c5cff); background: rgba(106,71,214,.22); box-shadow: 0 0 0 2px var(--violet, #7c5cff); }
.fmenu-sheet { position: fixed; inset: 0; z-index: 200; background: rgba(8,8,14,.55); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; }
.fmenu-card { width: 100%; max-width: 460px; margin: 0 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 18px 18px 0 0; padding: 8px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 -12px 44px rgba(0,0,0,.55); }
.fmenu-head { font-size: 13.5px; font-weight: 800; padding: 12px 14px 6px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmenu-card button { text-align: left; padding: 15px 16px; border: none; background: rgba(255,255,255,.05); border-radius: 13px; color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; }
.fmenu-card button:hover { background: rgba(255,255,255,.1); }
.fmenu-card button.danger { color: #ff6b6b; }
.fmenu-card button.ghost { color: var(--muted); background: none; text-align: center; }

/* ---- publish step: which-video header + per-site language/category + single/multi toggle (D10) ---- */
.wizpubvid { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 4px 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.wizpubvid[hidden] { display: none; }
.wizpubvid img { width: 64px; height: 40px; object-fit: cover; border-radius: 9px; flex: 0 0 auto; background: #000; }
.wpv-meta { min-width: 0; }
.wpv-name { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpv-ctx { font-size: 12px; color: var(--muted); margin-top: 2px; }
.wpv-ctx.warn { color: #ffb300; }
.sitecat { flex: 0 0 auto; width: auto; min-width: 130px; max-width: 180px; padding: 8px 30px 8px 11px; font-size: 16px; }
.sitemode { display: flex; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.sitemode .smbtn { flex: 1; border: none; background: none; color: var(--muted); font-size: 14px; font-weight: 800; padding: 11px 10px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.sitemode .smbtn + .smbtn { border-left: 1px solid var(--line); }
.sitemode .smbtn.on { background: linear-gradient(135deg, var(--violet, #7c5cff), #6a47d6); color: #fff; }
/* ---- MULTI category per site (owner 2 Jul): compact "Categories ▾" summary → checkable chip list ---- */
.catmulti { flex: 1 1 100%; min-width: 0; }
.catmulti-sum { width: 100%; text-align: left; padding: 9px 12px; font-size: 16px; font-weight: 600; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); cursor: pointer; }
.catmulti.open .catmulti-sum { border-color: var(--violet); }
.catmulti-list { margin-top: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: flex; flex-wrap: wrap; gap: 7px; }
.catmulti-list[hidden] { display: none; }
.catmulti-auto { flex: 1 1 100%; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.catmulti-auto b { color: var(--text); }
.catchip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.catchip small { color: var(--muted); font-weight: 600; }
.catchip .catchip-ck { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 5px; border: 2px solid rgba(255,255,255,.28); display: grid; place-items: center; color: transparent; }
.catchip.on { background: linear-gradient(135deg, var(--violet, #7c5cff), #6a47d6); border-color: transparent; color: #fff; }
.catchip.on .catchip-ck { background: #fff; border-color: #fff; color: var(--violet, #7c5cff); }
.catchip.on small { color: rgba(255,255,255,.75); }
@media all /* ONE-UI: phone rules apply at every width (A-5a) */ { .siterow { flex-wrap: wrap; } .siterow .sitelang, .siterow .sitecat { flex: 1 1 45%; max-width: none; } }

/* ---- REQUIRED-context step before publish (C1/G23 — wizneedctx) + quick-tags cascade ---- */
body.wizneedctx #wizPubOpts, body.wizneedctx #wizAutoBox, body.wizneedctx #s-wizpub .wpfoot, body.wizneedctx #autoPubDisabled, body.wizneedctx #wizSiteNote { display: none !important; }
/* ---- FILE MANAGER wizard finish (wizfmctx): context-only, NO publish machinery at all (owner 2 Jul) ---- */
body.wizfmctx #wizPubOpts, body.wizfmctx #wizAutoBox, body.wizfmctx #s-wizpub .wpfoot, body.wizfmctx #autoPubDisabled, body.wizfmctx #wizSiteNote { display: none !important; }
/* one-line hint at the top of the tool picker */
.wppickhint { margin: 0 0 12px; font-size: 13px; color: var(--muted); text-align: center; }
.wizctxfix { margin: 12px 0 4px; padding: 13px; border-radius: 14px; border: 1px solid rgba(255,179,0,.45); background: rgba(255,179,0,.08); }
.wizctxfix[hidden] { display: none; }
.wizctxfix-lbl { display: block; font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.wizctxfix-lbl span { display: block; font-size: 12px; font-weight: 600; color: #ffb300; margin-top: 2px; }
.wizctxfix-ta { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.5; padding: 11px 12px; border-radius: 11px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text); }
.wizctxfix-ta:focus { outline: none; border-color: #ffb300; }
.wizctxfix-vid { width: 100%; max-height: 150px; object-fit: contain; border-radius: 10px; background: #000; margin-bottom: 9px; display: block; }
.wizctx-next { width: 100%; margin-top: 14px; }
.tagpick { margin-top: 11px; display: flex; flex-direction: column; gap: 9px; }
.tagpick-g { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.tagpick-lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-right: 3px; flex: 0 0 auto; }
.tagchip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tagchip.on { background: linear-gradient(135deg, #ff9f43, #ff6b6b); color: #1a1208; border-color: transparent; font-weight: 800; }
.tagchip.loc { border-color: rgba(106,71,214,.4); }
.tagchip.skiploc { font-style: italic; color: var(--muted); }
.tagpick-g.cascade { padding: 8px 9px; border-radius: 10px; background: rgba(106,71,214,.10); border: 1px dashed rgba(106,71,214,.4); }
.tagpairs { display: flex; flex-wrap: wrap; gap: 7px; }
.tagpair { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: linear-gradient(135deg, #ff9f43, #ff6b6b); color: #1a1208; font-size: 13px; font-weight: 800; }
.tagpair-x { border: none; background: rgba(0,0,0,.18); color: #1a1208; width: 19px; height: 19px; border-radius: 50%; font-size: 11px; cursor: pointer; line-height: 1; }
.tagpick-manual { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.tagman { flex: 1 1 130px; min-width: 0; font-size: 16px; padding: 8px 11px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); }
.tagchip.addman { background: rgba(255,159,67,.16); color: #ffb673; font-weight: 800; }

/* ---- admin auto-upload toggle OFF (D2): hide Automatic, show the note ---- */
body[data-auto-off] #autoPubOpt, body[data-auto-off] #wizAutoBox { display: none; }
body[data-auto-off] #autoPubDisabled { display: block; }
body.wizneedctx[data-auto-off] #autoPubDisabled { display: none !important; }

/* ---- saved-context chips under the player (C2/C8) ---- */
.ctxchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.ctxchip { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctxchip.note { color: var(--text); background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.ctxchip.pair { color: #1a1208; background: linear-gradient(135deg, #ff9f43, #ff6b6b); }

/* ---- "Published to" + history panel in the player overlay (D11/C8) ---- */
.vppub { margin-top: 10px; padding: 11px 12px; border-radius: 13px; border: 1px solid var(--line); background: rgba(52,199,123,.05); }
.vppub[hidden] { display: none; }
.vppub-h { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.vppub-row { font-size: 13px; line-height: 1.7; color: var(--text); }
.vppub-row b { font-weight: 800; }
.vppub-row a { color: var(--violet); font-weight: 700; text-decoration: none; }
.vpbtn.ghost { background: none; border: 1px solid var(--line); color: var(--muted); margin-top: 10px; }
.vpbtn.pub { background: linear-gradient(135deg, #18c7e0, #0f9fb8); color: #04161a; }
.vphist { margin-top: 10px; padding: 12px 13px; border-radius: 13px; border: 1px solid var(--line); background: var(--bg2);
  display: flex; flex-direction: column; gap: 12px; max-height: 300px; overflow: auto; }
.vphist[hidden] { display: none; }
.vphist-sec { display: flex; flex-direction: column; gap: 8px; }
.vphist-h { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.vphist-ctx, .vphist-pub { padding: 9px 11px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.vphist-pub { background: rgba(52,199,123,.06); }
.vphist-who { font-weight: 800; color: var(--text); margin-right: 8px; }
.vphist-when { font-size: 11px; color: var(--muted); }
.vphist-txt { font-size: 14px; line-height: 1.55; color: var(--text); margin-top: 4px; }
.vphist-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.vphist-link { margin-top: 4px; }
.vphist-link a, .vphist-pub a { color: var(--violet); font-weight: 700; text-decoration: none; }
.vphist-note { font-size: 12.5px; color: var(--muted); font-style: italic; }
.vphist-load { font-size: 13px; color: var(--muted); }

/* ---- UPLOAD MANAGER strip (NEW 2 Jul): per-file %, non-blocking, ZIP two-step ---- */
.upstrip { position: fixed; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 90; width: min(360px, calc(100vw - 24px));
  background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 44px rgba(0,0,0,.5); overflow: hidden; }
@media all /* ONE-UI: phone rules apply at every width (A-5a) */ { .upstrip { bottom: calc(74px + env(safe-area-inset-bottom)); } }   /* sit ABOVE the mobile bottom nav */
.up-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; background: rgba(255,255,255,.04); }
.up-title { font-size: 13px; font-weight: 800; color: var(--text); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-sub { font-size: 11.5px; color: var(--muted); flex: 0 0 auto; }
.up-clear { flex: 0 0 auto; border: none; background: rgba(255,255,255,.08); color: var(--muted); border-radius: 8px; padding: 4px 10px; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.up-min { flex: 0 0 auto; border: none; background: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 2px 4px; }
.up-list { max-height: 42vh; overflow: auto; padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 6px; }
.up-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.up-item.error { border-color: rgba(255,107,107,.55); background: rgba(255,107,107,.07); }
.up-item.done { opacity: .8; }
.up-ic { flex: 0 0 auto; font-size: 17px; }
.up-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.up-name { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-bar { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.10); overflow: hidden; }
.up-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--violet, #7c5cff), #19c8d6); transition: width .25s ease; }
.up-item.extracting .up-fill { background: linear-gradient(90deg, #ff9f43, #ff6b6b); animation: upPulse 1.1s ease-in-out infinite; }
.up-item.done .up-fill { background: #34c77b; }
.up-item.error .up-fill { background: #ff6b6b; }
@keyframes upPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.up-state { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-retry { flex: 0 0 auto; border: none; background: rgba(255,159,67,.18); color: #ffb673; border-radius: 8px; padding: 5px 10px; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.up-x { flex: 0 0 auto; border: none; background: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.upstrip.collapsed .up-list { display: none; }

/* ============================================================================
   ONE UI EVERYWHERE (A-5a / A9 — "desktop version hata do, ek hi rakho").
   The desktop shell (appbar + rail + 2-pane editor + hidden botnav) is DELETED.
   Wide screens render the SAME phone UI as a centered column; the fixed bars
   (top bar, bottom nav, wizard header/footer, publish footer, editing pane)
   are capped to the same column width so everything lines up.
   ============================================================================ */
@media (min-width: 700px) {
  .wrap, .mtopbar, .botnav, .wizhead, .wizfoot, .wpfoot,
  body.ed #s-home.editing { max-width: 520px; margin-left: auto; margin-right: auto; }
  .selbar { max-width: min(520px, calc(100vw - 24px)); }
  .upstrip { right: max(12px, calc(50vw - 254px)); }   /* hug the column, not the far screen edge */
  body { background: #0a0b12; }                        /* quiet gutter around the column */
  .wrap { border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--bg); }
}

/* A11: per-tool edit badges on the SMALL row thumbnail (compact variant of .gedits) */
.fthumb .gedits { left: 2px; top: 2px; bottom: auto; gap: 1px; padding: 1px 4px; border-radius: 6px; max-width: calc(100% - 4px); }
.fthumb .gedits i { font-size: 9px; }
.fthumb .gedits b { font-size: 9px; }

/* ---- E4: Video Cloud ADMIN filter bar (category / uploader / published) ---- */
.catfilter { margin: 4px 0 10px; }
.cf-head { display: flex; align-items: center; gap: 9px; }
.cf-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg2); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cf-toggle.act { color: #ffb673; border-color: rgba(255,159,67,.4); background: rgba(255,159,67,.10); }
.cf-toggle b { color: var(--text); }
.cf-clear { padding: 7px 11px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cf-body { margin-top: 9px; padding: 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--bg2); display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.cf-sel { flex: 1 1 150px; min-width: 140px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.cf-grp { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cf-lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.cf-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cf-chip.on { background: linear-gradient(135deg, var(--violet, #7c5cff), #19c8d6); color: #fff; border-color: transparent; }

/* per-user websites list (Settings) + account row */
.siteslist { display: flex; flex-direction: column; gap: 9px; }
.ubtn2 { flex: 0 0 auto; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text, #fff); font-size: 13px; font-weight: 700; cursor: pointer; }
.ubtn2:active { transform: scale(.96); }
.ubtn2.danger { color: #ff6b6b; border-color: rgba(255,107,107,.35); }

/* ---- ✨ Title & tags in the player overlay (pre-generated before publish — owner 2 Jul) ---- */
.vpmetabox { margin-top: 12px; padding: 12px 13px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.vpmetabox .vplbl { margin-bottom: 8px; }
.vpmeta-in { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.5; padding: 11px 12px; border-radius: 11px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text); margin-top: 8px; }
.vpmeta-in:focus { outline: none; border-color: var(--violet); }
.vpbtn.gen { background: linear-gradient(150deg, #ff7eaa, var(--thumb, #e0559a)); color: #fff; }
.vpbtn.gen[disabled] { opacity: .45; cursor: not-allowed; }
#vpGenHint { margin-top: 7px; color: #ffb300; }

/* saved title on the publish sheet — this is EXACTLY what will be posted */
.wpv-title { font-size: 13.5px; font-weight: 800; color: var(--text); margin-top: 3px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- RankMath SEO indicator (overlay) + "SEO ✓" chip (publish sheet) ---- */
.vpseoline { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.vpseoline.ok { color: #34c77b; }
.vpseoline.warn { color: #ffb300; }
.vpseoretry { border: 1px solid rgba(255,179,0,.5); background: rgba(255,179,0,.12); color: #ffb300; border-radius: 8px; padding: 3px 10px; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; margin-left: 4px; }
.wpv-seochip { display: inline-block; vertical-align: 1px; font-size: 10px; font-weight: 800; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px; color: #34c77b; background: rgba(52,199,123,.14); border: 1px solid rgba(52,199,123,.4); }
.wpv-seochip[hidden] { display: none; }

/* ===================== FOLDER MERGE BOARD ===================== */
/* the order ⭘/number button that replaces the checkbox inside a File-Manager folder */
.mergeord { font-weight: 900; font-size: 15px; color: var(--muted, #8a8594); border: 2px solid var(--line); background: transparent; }
.mergeord.on { color: #fff; background: var(--violet, #6a47d6); border-color: var(--violet, #6a47d6); }
.frow.inmerge { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--violet, #6a47d6) 60%, transparent); }
/* sticky merge bar above the bottom nav */
.mergebar { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 44;
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--bg2, #16131d);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0,0,0,.35); }
.mergebar .mb-order { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.mergebar .mb-chip { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; white-space: nowrap; padding: 6px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--violet, #6a47d6) 55%, transparent); background: color-mix(in srgb, var(--violet, #6a47d6) 15%, transparent); color: var(--text, #eee); cursor: pointer; }
.mergebar .mb-go { min-height: 46px; border: none; border-radius: 13px; font-size: 15.5px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--violet, #6a47d6), #8a63ff); cursor: pointer; }
.mergebar .mb-go:disabled { opacity: .5; background: var(--card, #241d2e); color: var(--muted, #8a8594); cursor: default; }
.mergebar .mb-actions { display: flex; gap: 8px; }
.mergebar .mb-actions .mb-go { flex: 1; }
/* leave room so the last rows aren't hidden behind the merge bar */
body.mergeboard #s-home .glist, body.mergeboard #gallery { padding-bottom: 140px; }
/* HIDE the sticky merge bar whenever a clip is open for editing/context — the bar belongs ONLY on the
   folder GRID, never over the wizard/edit/context screen. */
body.wiz .mergebar { display: none !important; }
/* clear-all the manual merge order (never get stuck with stale picks) */
.mergebar .mb-clear { flex: 0 0 auto; align-self: center; font-size: 12px; font-weight: 800; white-space: nowrap; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted, #9a94a5); cursor: pointer; }
/* publish-page category strip (see + add/edit categories before posting) */
.wizpubcats { margin: 10px 0 4px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--card, #241d2e); }
.wizpubcats .wpc-head { font-size: 13.5px; font-weight: 900; color: var(--text, #eee); }
.wizpubcats .wpc-head .wpc-sub { font-size: 11.5px; font-weight: 600; color: var(--muted, #9a94a5); }
.wizpubcats .wpc-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.wizpubcats .wpc-chip { font-size: 12.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--violet, #6a47d6) 45%, transparent); background: color-mix(in srgb, var(--violet, #6a47d6) 14%, transparent); color: var(--text, #eee); }
.wizpubcats .wpc-none { font-size: 12.5px; color: var(--muted, #9a94a5); }
.wizpubcats .wpc-edit { min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--violet, #6a47d6); background: transparent; color: var(--violet, #a488ff); font-size: 13px; font-weight: 800; cursor: pointer; }
/* thumbnail FILMSTRIP — tap a server-rendered frame, no in-browser scrub (owner's biggest struggle) */
.filmstrip { margin: 6px 0 10px; }
.filmstrip .film-hint { font-size: 12.5px; font-weight: 700; color: var(--muted, #9a94a5); margin-bottom: 7px; }
.filmstrip .film-row { display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 5px; }
.filmstrip .film-fr { flex: 0 0 auto; position: relative; width: 116px; padding: 0; border: 2px solid transparent; border-radius: 9px; overflow: hidden; background: #000; cursor: pointer; }
.filmstrip .film-fr img { display: block; width: 116px; height: 66px; object-fit: cover; }
.filmstrip .film-fr > span { position: absolute; right: 3px; bottom: 3px; font-size: 10.5px; font-weight: 800; color: #fff; background: rgba(0,0,0,.62); padding: 1px 5px; border-radius: 5px; }
.filmstrip .film-fr.picked { border-color: var(--violet, #6a47d6); }
.filmstrip .film-fr.picked::after { content: "✓"; position: absolute; top: 3px; left: 4px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; background: var(--violet, #6a47d6); border-radius: 999px; }
/* shape-choice modal */
.shapeask { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); padding: 20px; }
.shapeask .sa-card { width: 100%; max-width: 360px; background: var(--bg2, #17131f); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.shapeask .sa-h { font-size: 19px; font-weight: 900; }
.shapeask .sa-sub { font-size: 13px; color: var(--muted, #9a94a5); margin: 4px 0 14px; }
.shapeask .sa-opt { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; gap: 2px;
  min-height: 58px; padding: 11px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--card, #241d2e); color: var(--text, #eee); cursor: pointer; }
.shapeask .sa-opt b { font-size: 16px; } .shapeask .sa-opt span { font-size: 12.5px; color: var(--muted, #9a94a5); }
.shapeask .sa-opt:active { border-color: var(--violet, #6a47d6); background: color-mix(in srgb, var(--violet, #6a47d6) 16%, var(--card, #241d2e)); }
.shapeask .sa-cancel { width: 100%; min-height: 44px; border: none; background: none; color: var(--muted, #9a94a5); font-size: 14px; font-weight: 700; cursor: pointer; }
.vpbtn.merge { background: linear-gradient(135deg, var(--violet, #6a47d6), #8a63ff); color: #fff; border: none; font-weight: 800; }
.vpbtn.merge[hidden], .vpbtn[hidden] { display: none; }

/* "this clip is already in Video Cloud" — deliberately the loudest line on the card */
.fdupe { margin-top: 4px; font-size: 12px; font-weight: 800; line-height: 1.35; color: #ff6b6b;
  background: rgba(255,77,77,.12); border: 1px solid rgba(255,77,77,.42); border-radius: 8px; padding: 5px 8px; }
/* file/folder timestamps (desktop-style "added / edited") */
.fdates { margin-top: 3px; font-size: 11px; color: var(--muted, #8a8594); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* MULTI-THUMBNAIL manager: the strip of already-saved thumbnails, shown BIG above the scrubber so you can
   see them while picking the next one and never repeat a frame. */
.stpadded { margin: 2px 0 10px; }
.stpadded-head { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 7px; }
.stpadded-strip { display: flex; gap: 9px; flex-wrap: wrap; }
/* A saved thumbnail is shown as ALL of its frames in a line — that is literally what the collage will be.
   Fixed HEIGHT with auto width: every panel keeps its own aspect ratio, so nothing is cropped and the tile
   grows to 1 / 2 / 3 panels on its own (owner 25 Jul: "pura screenshot dikhna chahiye"). */
.stpadded-tile { position: relative; display: flex; gap: 2px; width: 168px; aspect-ratio: 16/9; border-radius: 11px; overflow: hidden; background: #000; border: 1px solid var(--violet); }
/* equal panels via a ZERO flex-basis — sizing from the frames' intrinsic width instead would collapse every
   panel to its min-width, since a captured frame is ~360-1080px wide inside a 168px tile. contain, never
   cover: the whole frame has to be recognisable or two different moments look the same. */
.stpadded-tile img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: contain; background: #000; }
.stpadded-n { position: absolute; top: 5px; left: 5px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--violet); color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.stpadded-x { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.62); color: #fff; font-size: 12px; cursor: pointer; }
/* File-Manager card: how many distinct thumbnails this video has (green at ≥2 = ready, amber below). */
.fthumbs { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 12px; }
.fthumbs.ok { color: var(--join, #3ad29f); }
.fthumbs.few { color: var(--warn, #e0a24a); }

/* AI DOWN / OUT-OF-CREDIT — deliberately the loudest thing on screen. The failure it reports is silent by
   nature: last time the balance ran out, nothing said so and hollow results reached a live site. */
#aiDownBar { position: fixed; top: 0; left: 0; right: 0; z-index: 100001; padding: 9px 14px;
  background: linear-gradient(135deg, #b3231f, #7d1512); color: #fff; font-size: 13px; font-weight: 700;
  line-height: 1.4; text-align: center; box-shadow: 0 4px 18px rgba(0,0,0,.45); }
#aiDownBar .aidown-sub { font-weight: 500; font-size: 12px; opacity: .92; margin-top: 3px; }
body:has(#aiDownBar) .mtopbar { top: 58px; }

/* =====================================================================================
   v2 — POST SHEET · VIDEO CLOUD FILTERS · MY VIDEOS QUEUE (VKEDITOR-V2-CONTRACT.md)
   New, self-contained block — mirrors the existing tokens (--violet/--card/--line/.do/.sheet)
   rather than inventing a second visual language. Phone-first; a real desktop widening sits in
   its own @media block at the end so it can be reviewed/rolled back on its own.
   ===================================================================================== */

/* ---- Video Cloud shelf: the ONE primary action per card ---- */
.fpost { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px;
  border-radius: 999px; border: none; background: var(--grad-brand); color: #fff; font: inherit; font-size: 12.5px;
  font-weight: 800; cursor: pointer; box-shadow: var(--glow-accent-sm); -webkit-tap-highlight-color: transparent; }
.fpost:active { transform: scale(.95); }
.fpost svg { flex: 0 0 auto; }

/* ---- Video Cloud / File Manager admin filter bar (reuses .sortchip/.tagfilter look) ---- */
.vcfilterbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 10px; }
.vcfilterbar .sortlbl { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-right: 2px; }

/* ---- My Videos tabs (Posted / Queued) ---- */
.mvtabs { display: flex; gap: 6px; margin: 2px 0 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 13px; padding: 4px; }
.mvtab { flex: 1 1 0; padding: 9px 10px; border-radius: 10px; border: none; background: transparent; color: var(--muted);
  font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mvtab.on { background: var(--card); color: var(--text); box-shadow: var(--shadow-resting); }

/* ---- Queue panel (My Videos → Queued) ---- */
.queuepanel { display: flex; flex-direction: column; gap: 10px; }
.qsitebar { display: flex; align-items: center; }
.qsitebar select { width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font: inherit; font-size: 15px; }
.qsitename { font-weight: 800; font-size: 15px; padding: 4px 2px; }
.qmeta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--muted); font-weight: 700; }
.qlist { display: flex; flex-direction: column; gap: 8px; }
.qfailhead { margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #ffb673; }
.qitem { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.qitem.posting { border-color: rgba(122,92,255,.5); box-shadow: 0 0 0 1.5px rgba(122,92,255,.35); }
.qitem.failed { border-color: rgba(255,90,90,.4); background: rgba(255,90,90,.06); }
.qitem.dragging { opacity: .5; }
.qitem.dropok { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet); }
.qdrag { flex: 0 0 auto; width: 18px; text-align: center; color: var(--muted); cursor: grab; font-size: 15px; touch-action: none; }
.qthumb { flex: 0 0 auto; width: 52px; height: 40px; border-radius: 8px; object-fit: cover; background: #000; }
.qmid { flex: 1 1 auto; min-width: 0; }
.qtitle { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qsub { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.qstate { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.qstate.pending { color: var(--muted); background: rgba(255,255,255,.06); }
.qstate.posting { color: #cdbcff; background: rgba(122,92,255,.16); }
.qstate.failed { color: #ff8a8a; background: rgba(255,90,90,.14); }
.qerr { font-size: 11px; color: #ff8a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.qactions { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }
.qbtn { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg2); color: var(--text);
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }
.qbtn:disabled { opacity: .35; }
.qbtn.primary { background: rgba(122,92,255,.16); border-color: var(--violet); color: #cdbcff; width: auto; white-space: nowrap; }
.qbtn.danger { color: #ff8a8a; }
.qbtn.danger:active { background: rgba(255,90,90,.16); }

/* ---- Post sheet (video → site → thumbnail → Queue/Now) — reuses .sheet/.card ---- */
.pscard { max-width: 440px; display: flex; flex-direction: column; padding: 0; overflow: hidden; max-height: 90vh; }
.pshead { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pshead h3 { margin: 0; font-size: 17px; }
.psbody { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; text-align: left; }
.psvideo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.psvideo img { width: 64px; height: 48px; border-radius: 9px; object-fit: cover; background: #000; margin: 0; }
.psvname { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psstep-lbl { display: block; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; }
.pssites { display: flex; flex-direction: column; gap: 8px; }
.pssite { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 13px;
  border: 1.5px solid var(--line); background: var(--bg2); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; }
.pssite.on { border-color: var(--violet); background: rgba(122,92,255,.12); box-shadow: 0 0 0 1px var(--violet); }
.pssite-tag { font-size: 11px; font-weight: 800; color: #34c77b; background: rgba(52,199,123,.14); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pspickbtn:disabled { opacity: .5; }
.ps-err { color: #ff8a8a; }
.psfoot { flex: 0 0 auto; display: flex; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.psfoot .do { margin-top: 0; flex: 1 1 0; }

/* =====================================================================================
   v2 desktop — a REAL breakpoint for the three target screens (Video Cloud shelf, post
   sheet, My Videos queue), not a stretched phone column. Deliberately narrow in scope: it
   widens the shell + grid + sheets that this build touched, it does NOT attempt the fuller
   render-seam extraction (multi-pane, keyboard nav) the frontend assessment (§9) flagged as
   its own, larger, follow-up project. Source order matters: this sits AFTER the existing
   @media (min-width:700px) "ONE UI" column cap, so it wins at >=900px.
   ===================================================================================== */
@media (min-width: 900px) and (pointer: fine) {
  .wrap, .mtopbar, .botnav, .wizhead, .wizfoot, .wpfoot, body.ed #s-home.editing { max-width: 1080px; }
  .selbar { max-width: min(1080px, calc(100vw - 24px)); }
  /* the shelf grows real columns instead of one long phone-style list. #ggrid's OWN id rule
     (styles.css ~818: "display:flex; flex-direction:column" — a deliberate, pre-existing full-
     width row list) outranks the earlier `.ggrid{display:grid}` class rule by specificity, so a
     desktop column layout has to win on the SAME id selector, not fight it with a class alone —
     confirmed live: `.ggrid{grid-template-columns:...}` alone left `#ggrid` computed as flex/column
     with zero visible change at 1440px. Wrap instead of grid: keeps every row's own internal
     flex layout (thumb|meta|actions) intact, just lets rows sit side by side. */
  #ggrid { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
  #ggrid > .frow { flex: 1 1 360px; max-width: calc(50% - 8px); }
  /* sheets/cards get real width instead of a phone-width column centered in empty space */
  .sheet .card { max-width: 480px; }
  .sheet .pscard { max-width: 560px; }
  .sheet .stpcard { max-width: 640px; }
  .sheet .savecard { max-width: 620px; }
  /* the queue list reads as two columns of shorter rows instead of one long phone-style list */
  .qlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 8px; align-content: start; }
  .qfailhead { grid-column: 1 / -1; }
  /* hover affordance on the shelf's Post button (this file already uses hover-vs-touch elsewhere) */
  .fpost:hover { filter: brightness(1.08); }
  .qbtn:hover:not(:disabled) { border-color: var(--violet); }
  .pssite:hover { border-color: var(--violet); }
}