/* ═══ v2.css — the camera layout ═══════════════════════════════════════════════

   One surface: the picture in the middle, the contact sheet on the left, the
   filmstrip (the stack) and its dials underneath, and a single Done. Everything
   here is scoped to `html.lr-v2`; the classic layout is untouched when the
   class is absent, and the v2 chrome is display:none there.

   Tokens come from style.css (--text, --glass-*, --rim, --r-*), which the dark
   and black themes already override, so the three themes fall out of the same
   rules. The strip is film — dark in every theme, like film is.
   ═══════════════════════════════════════════════════════════════════════════ */

html.lr-v2 {
  --v2-rail-w: 276px;
  --v2-deck-h: 96px;                    /* measured by js at runtime */
  --v2-top: calc(var(--header-h) + var(--safe-top));
  --v2-surface: rgba(255, 255, 255, 0.55);
  --v2-line: rgba(120, 140, 200, 0.22);
  --v2-card: rgba(255, 255, 255, 0.72);
  --v2-film: #171a24;
  --v2-solid: #f3f5fb;                  /* phones: no blur behind the deck */
  --v2-cta: var(--cta);
}
html[data-theme="dark"].lr-v2 {
  --v2-surface: rgba(8, 9, 14, 0.78);
  --v2-line: rgba(255, 255, 255, 0.10);
  --v2-card: rgba(255, 255, 255, 0.06);
  --v2-film: #07080c;
  --v2-solid: #000;
}
/* Black: every surface is the ground. Hairlines do the separating. */
html[data-theme="black"].lr-v2 {
  --v2-surface: rgba(0, 0, 0, 0.92);
  --v2-line: rgba(255, 255, 255, 0.16);
  --v2-card: rgba(255, 255, 255, 0.035);
  --v2-film: #000;
  --v2-solid: #000;
}

/* ── Which layout is on ─────────────────────────────────────────────────────── */
html:not(.lr-v2) .v2-ui { display: none !important; }
/* On a phone the editor is three regions — photo, strip, bottom — and nothing
   else: no status strip, no hardware keys. The PDA stays the launcher for PEN,
   the DAW and Explore, one tap behind the suite button, and its chrome comes
   back the moment one of those is up. */
html.lr-v2 body.pda-on[data-pda-at="editor"] .pda-status,
html.lr-v2 body.pda-on[data-pda-at="editor"] .pda-keys { display: none; }
html.lr-v2 body.pda-on[data-pda-at="editor"] { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
html.lr-v2 .v2-try-btn { display: none !important; }

/* Classic keeps a door to the new layout, styled like its neighbours. */
.v2-try-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1.5px solid rgba(140, 120, 240, 0.45);
  background: linear-gradient(180deg, rgba(150, 130, 250, 0.16), rgba(120, 100, 240, 0.08));
  color: var(--text); font: 700 11px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
}
.v2-try-btn:hover { transform: translateY(-1px); }

/* ── The classic chrome steps aside ─────────────────────────────────────────── */
html.lr-v2 .header-actions > *:not(.v2-keep) { display: none !important; }
html.lr-v2 #toggle-left,
html.lr-v2 .sidebar-left,
html.lr-v2 .sidebar-right,
html.lr-v2 .canvas-toolbar,
html.lr-v2 #filmstrip,
html.lr-v2 .knob-rail,
html.lr-v2 #knob-bubble,
html.lr-v2 #splash,
html.lr-v2 .empty-state,
html.lr-v2 #vedit-toggle, html.lr-v2 #vedit { display: none !important; }   /* the welcome card is the empty state; the sequence pages are the video editor */

/* ── Frame: the picture gets the middle, edge to edge ───────────────────────── */
html.lr-v2 .canvas-area {
  top: var(--v2-top);
  left: calc(var(--v2-rail-w) + var(--safe-left));
  right: 0;
  bottom: var(--v2-deck-h);
}
/* On a desktop the picture sits in a frame — a hairline and a radius, the same
   edge the strip and the dials have — so the four regions read as four. */
@media (min-width: 861px) {
  html.lr-v2 .canvas-area { margin: 10px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--v2-line); }
}
/* Zoom, bottom-right of the picture. */
html.lr-v2 .v2-zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 11px;
  border-radius: var(--r-pill); border: 1.5px solid rgba(255,255,255,0.8); background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18); color: var(--text); font: 700 11px/1 var(--font); cursor: pointer;
}
html.lr-v2 .v2-zoom .v2-i { width: 12px; height: 12px; color: var(--text-muted); }
html.lr-v2 .v2-zoom[hidden] { display: none; }
html[data-theme="dark"].lr-v2 .v2-zoom { background: rgba(20, 24, 40, 0.82); border-color: rgba(255,255,255,0.22); }
html[data-theme="black"].lr-v2 .v2-zoom { background: rgba(0, 0, 0, 0.86); border-color: rgba(255,255,255,0.28); }
/* Sound, sitting to the left of the zoom chip and wearing the same glass. */
html.lr-v2 .v2-sound {
  position: absolute; right: 78px; bottom: 12px; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border-radius: var(--r-pill); border: 1.5px solid rgba(255,255,255,0.8); background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18); color: var(--text); cursor: pointer;
}
html.lr-v2 .v2-sound .v2-i { width: 14px; height: 14px; color: var(--text-muted); }
html.lr-v2 .v2-sound.on .v2-i { color: var(--accent, #f0334f); }
html.lr-v2 .v2-sound[hidden] { display: none; }
html[data-theme="dark"].lr-v2 .v2-sound { background: rgba(20, 24, 40, 0.82); border-color: rgba(255,255,255,0.22); }
html[data-theme="black"].lr-v2 .v2-sound { background: rgba(0, 0, 0, 0.86); border-color: rgba(255,255,255,0.28); }
html.lr-v2 .preview-canvas { border-radius: 6px; box-shadow: 0 18px 48px rgba(20, 30, 70, 0.28); }

/* ── Header ─────────────────────────────────────────────────────────────────── */
html.lr-v2 .header { gap: 14px; }
html.lr-v2 .v2-brand { flex: none; }
html.lr-v2 .v2-hmid { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; }
html.lr-v2 .v2-hmid > .v2-cam { flex: 0 1 auto; min-width: 0; }
html.lr-v2 .v2-hmid > .v2-pages { flex: none; }
@media (max-width: 1180px) {
  html.lr-v2.lr-seq .v2-seqchip .v2-cam-n { display: none; }
  html.lr-v2.lr-seq .v2-seq-x span { display: none; }
  html.lr-v2.lr-seq .v2-seq-x { width: 30px; height: 30px; padding: 0; justify-content: center; flex: none; }
}
@media (max-width: 860px) { html.lr-v2 .v2-hmid { gap: 6px; } }
html.lr-v2 .v2-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
html.lr-v2 .v2-suite-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 9px 0 7px; border-radius: var(--r-pill);
  border: 1.5px solid var(--v2-line); background: var(--v2-card);
  color: var(--text-muted); font: 600 11px/1 var(--font); cursor: pointer;
}
html.lr-v2 .v2-suite-btn svg { width: 14px; height: 14px; }
html.lr-v2 .v2-suite-btn:hover { color: var(--text); border-color: rgba(120, 140, 200, 0.5); }

html.lr-v2 .v2-cam {
  display: inline-flex; align-items: center; gap: 6px; max-width: 42vw;
  height: 32px; padding: 0 12px 0 14px; border-radius: var(--r-pill);
  border: 1.5px solid var(--glass-border); background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--rim);
  color: var(--text); font: 700 12px/1 var(--font); cursor: text; white-space: nowrap;
}
html.lr-v2 .v2-cam-name { overflow: hidden; text-overflow: ellipsis; }
html.lr-v2 .v2-cam.untitled .v2-cam-name { color: var(--text-muted); font-weight: 600; }
html.lr-v2 .v2-cam-n { color: var(--text-muted); font-weight: 500; }
html.lr-v2 .v2-cam .v2-i { width: 13px; height: 13px; color: var(--text-muted); }
html.lr-v2 .v2-cam-edit {
  height: 32px; width: min(360px, 42vw); padding: 0 14px; border-radius: var(--r-pill);
  border: 1.5px solid rgba(100, 130, 240, 0.7); background: #fff; color: var(--text);
  font: 700 12px/1 var(--font); outline: none;
}
html[data-theme="dark"] .v2-cam-edit { background: #161a28; }
html[data-theme="black"] .v2-cam-edit { background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,0.16); }

html.lr-v2 .v2-hact { display: flex; align-items: center; gap: 8px; }
.v2-ib {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--v2-line); background: var(--v2-card); color: var(--text);
  cursor: pointer; padding: 0;
}
.v2-ib:hover:not(:disabled) { border-color: rgba(120, 140, 200, 0.55); }
.v2-ib:disabled { opacity: 0.35; cursor: default; }
.v2-ib .v2-i { width: 16px; height: 16px; }
.v2-photo-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px 0 10px; border-radius: var(--r-pill);
  border: 1.5px solid var(--glass-border); background: var(--glass-bg); color: var(--text);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: var(--rim);
  font: 700 11.5px/1 var(--font); letter-spacing: 0.04em; cursor: pointer; white-space: nowrap; margin-right: 4px;
}
.v2-photo-btn .v2-i { width: 15px; height: 15px; }
.v2-photo-btn:hover { transform: translateY(-1px); }
.v2-done-btn {
  height: 34px; padding: 0 22px; border: none; border-radius: var(--r-pill);
  background: var(--v2-cta); color: #fff; font: 700 12px/1 var(--font); letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 8px 22px rgba(190, 20, 60, 0.38); cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s;
}
.v2-done-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 10px 26px rgba(190, 20, 60, 0.5); }
.v2-done-btn:active { transform: scale(0.97); }
.v2-avatar {
  width: 34px; height: 34px; border-radius: 50%; padding: 0; overflow: hidden;
  border: 1.5px solid var(--glass-border); background: var(--glass-bg); color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--rim);
}
.v2-avatar svg { width: 18px; height: 18px; }
/* Signed out: a plain pill beside the avatar (desktop; the phone has the
   account tab in its bar). Ghost, not glossy — Done is the hero up here. */
.v2-signin-btn {
  height: 34px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1.5px solid var(--glass-border); background: var(--glass-bg); color: var(--text);
  font: 700 12px/1 var(--font); letter-spacing: 0.02em; cursor: pointer; box-shadow: var(--rim);
  transition: transform 0.12s;
}
.v2-signin-btn:hover { transform: translateY(-1px); }
.v2-signin-btn[hidden], html.lr-v2-m .v2-signin-btn, html.lr-v2.lr-seq .v2-signin-btn { display: none; }
.v2-avatar .acct-trigger-av { width: 100%; height: 100%; }
.v2-avatar .acct-trigger-ini { font: 700 13px/1 var(--font); }

/* ── Rail: cameras + contact sheet ──────────────────────────────────────────── */
html.lr-v2 .v2-rail {
  position: fixed; top: var(--v2-top); bottom: 0; left: 0;
  width: calc(var(--v2-rail-w) + var(--safe-left));
  padding: 10px 12px 0 calc(12px + var(--safe-left));
  z-index: 10; display: flex; flex-direction: column; gap: 10px; min-height: 0;
  background: var(--v2-surface);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-right: 1px solid var(--v2-line);
}
.v2-cap {
  font: 800 10.5px/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
  display: flex; align-items: baseline; gap: 6px; padding: 2px 2px 0;
}
.v2-cap-sub { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11px; }
/* Section headings inside the contact sheet span the whole grid row. */
.v2-grid > .v2-sec { grid-column: 1 / -1; padding: 10px 2px 0; }
.v2-grid > .v2-sec:first-child { padding-top: 2px; }
.v2-grid > .v2-sec[hidden] { display: none; }

.v2-cams { display: flex; flex-direction: column; gap: 8px; flex: none; padding-bottom: 10px; border-top: 1px solid var(--v2-line); padding-top: 10px; }
.v2-cams .v2-cap-sub { font-size: 10.5px; }
.v2-cams-row { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: none; }
.v2-cams-row::-webkit-scrollbar { display: none; }
.v2-cams-msg { font: 500 11px/1.4 var(--font); color: var(--text-muted); padding: 6px 2px; }
/* A camera is a card: its name, its cover, what it is made of, how much it
   has been shot through. The whole card is the "use". */
.v2-camcard {
  flex: none; width: 156px; display: flex; flex-direction: column; gap: 5px; padding: 9px 10px 8px;
  border: 1px solid var(--v2-line); border-radius: 12px; background: var(--v2-card);
  cursor: pointer; color: var(--text); text-align: left; min-width: 0;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
@media (hover: hover) { .v2-camcard:hover { transform: translateY(-1px); border-color: rgba(120, 140, 200, 0.55); } }
.v2-camcard.in { border-color: var(--sel); box-shadow: 0 0 0 2px rgba(var(--sel-rgb), 0.3); }
.v2-camcard-top { display: flex; align-items: flex-start; gap: 8px; width: 100%; }
.v2-camcard-name { flex: 1; min-width: 0; font: 800 12px/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px; }
.v2-camcard-cover {
  width: 40px; height: 40px; flex: none; border-radius: 8px; overflow: hidden; display: grid; place-items: center;
  background: var(--v2-line);
}
.v2-camcard-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-camcard-cover .v2-i { width: 18px; height: 18px; color: var(--text-muted); }
.v2-camcard-parts {
  font: 500 10.5px/1.35 var(--font); color: var(--text); width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v2-camcard-parts em { font-style: normal; font-weight: 600; color: var(--text-muted); margin-right: 3px; }
.v2-camcard-meta { font: 500 10px/1 var(--font); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
/* "Build one" and "All cameras": dashed, centred, quieter. */
.v2-camcard-build, .v2-camcard-more {
  border-style: dashed; align-items: center; justify-content: center; gap: 4px; min-height: 96px; color: var(--text-muted);
  font: 700 11px/1 var(--font);
}
.v2-camcard-build .v2-i, .v2-camcard-more .v2-i { width: 18px; height: 18px; }
.v2-camcard-build small, .v2-camcard-more small { font: 500 10px/1.3 var(--font); text-align: center; }
@media (hover: hover) { .v2-camcard-build:hover, .v2-camcard-more:hover { color: var(--text); } }

.v2-sheet { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.v2-search {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border-radius: var(--r-sm); border: 1.5px solid var(--v2-line); background: var(--v2-card); color: var(--text-muted);
}
.v2-search:focus-within { border-color: rgba(100, 130, 240, 0.6); }
.v2-search .v2-i { width: 15px; height: 15px; flex: none; }
.v2-search input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font: 500 12px/1 var(--font); color: var(--text);
}
.v2-search input::placeholder { color: var(--text-muted); }
.v2-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.v2-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: none; }
.v2-search { flex: none; }
.v2-chipb {
  height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  border: 1.5px solid var(--v2-line); background: var(--v2-card); color: var(--text);
  font: 600 11px/1 var(--font); cursor: pointer;
}
.v2-chipb.on { background: #2a3a5e; border-color: #2a3a5e; color: #fff; }
html[data-theme="dark"] .v2-chipb.on, html[data-theme="black"] .v2-chipb.on { background: #e7ecfb; border-color: #e7ecfb; color: #10141f; }
.v2-chip-cams[hidden] { display: none; }

.v2-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 10px; align-content: start;
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 2px 2px 12px; margin: 0 -2px;
  scrollbar-width: thin;
}
.v2-grid[hidden] { display: none; }
.v2-card { position: relative; }
.v2-card[hidden] { display: none; }
.v2-card-pick {
  display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0; border: none; background: none;
  cursor: pointer; text-align: left; color: var(--text);
}
.v2-card-pick canvas {
  width: 100%; aspect-ratio: 160 / 110; height: auto; display: block; border-radius: 8px;
  border: 1.5px solid var(--v2-line); background: var(--v2-card);
  transition: transform 0.12s, border-color 0.12s;
}
@media (hover: hover) { .v2-card-pick:hover canvas { transform: translateY(-1px); border-color: rgba(120, 140, 200, 0.6); } }
.v2-card.in .v2-card-pick canvas { border-color: var(--sel); box-shadow: 0 0 0 2px rgba(var(--sel-rgb), 0.35); }
.v2-card-name { font: 700 11px/1.15 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-card-grp { font: 500 10px/1 var(--font); color: var(--text-muted); margin-top: -2px; }
.v2-card-check {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--sel); color: #fff; display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25); pointer-events: none;
}
.v2-card-check .v2-i { width: 12px; height: 12px; }
.v2-card-check.on { display: inline-flex; }
.v2-card-fav {
  position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; padding: 0;
  border: none; background: rgba(255,255,255,0.8); color: #8a94b8; display: none; align-items: center; justify-content: center; cursor: pointer;
}
.v2-card-fav .v2-i { width: 12px; height: 12px; }
.v2-card-fav.on { display: inline-flex; }
/* Hover reveals are gated: on a touch screen a :hover rule that shows an
   element makes iOS spend the FIRST tap on the hover and only the second on
   the click — every card and frame needed two taps. */
@media (hover: hover) { .v2-card:hover .v2-card-fav { display: inline-flex; } }
.v2-card-fav.on { color: #ffb02e; }
.v2-card-fav.on .v2-i { fill: currentColor; }
.v2-sheet-note { font: 500 10.5px/1.35 var(--font); color: var(--text-muted); text-align: center; padding: 0 4px 10px; }

/* ── Deck: the filmstrip and the dials ──────────────────────────────────────── */
html.lr-v2 .v2-deck {
  position: fixed; left: calc(var(--v2-rail-w) + var(--safe-left)); right: 0; bottom: 0; z-index: 12;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 14px calc(10px + var(--safe-bottom));
  background: var(--v2-surface);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-top: 1px solid var(--v2-line);
}
.v2-strip {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 88px;
  padding: 12px 12px; border-radius: 10px; background: var(--v2-film);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.v2-strip::-webkit-scrollbar { display: none; }
/* Sprocket holes, top and bottom. The background stays put while the frames scroll. */
.v2-strip {
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 6px, transparent 6px 14px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 6px, transparent 6px 14px);
  background-size: 100% 4px, 100% 4px;
  background-position: 6px 3px, 6px calc(100% - 3px);
  background-repeat: repeat-x;
}
.v2-frame {
  position: relative; flex: none; width: 92px; height: 64px; border-radius: 4px; overflow: hidden;
  border: 2px solid rgba(255,255,255,0.16); background: #2a2e3b; cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; touch-action: pan-x;
}
.v2-frame canvas { width: 100%; height: 100%; display: block; }
.v2-frame-label {
  position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px);
  padding: 2px 5px; border-radius: 4px; background: rgba(10, 12, 20, 0.72); color: #f2f5ff;
  font: 700 10px/1.15 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
@media (hover: hover) { .v2-frame:hover { border-color: rgba(255,255,255,0.45); } }
.v2-frame.sel { border-color: #ff7b54; box-shadow: 0 0 0 2px rgba(255,123,84,0.45), 0 6px 18px rgba(0,0,0,0.4); }
.v2-frame.dragging { z-index: 3; opacity: 0.9; transform: scale(1.04); box-shadow: 0 10px 24px rgba(0,0,0,0.5); transition: none; }
.v2-frame.drop-before { box-shadow: -6px 0 0 -2px var(--sel); }
.v2-frame.drop-after  { box-shadow:  6px 0 0 -2px var(--sel); }
.v2-frame-x {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; padding: 0;
  border: none; background: rgba(10, 12, 20, 0.72); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer;
}
.v2-frame-x .v2-i { width: 11px; height: 11px; }
.v2-frame.sel .v2-frame-x { display: inline-flex; }
@media (hover: hover) { .v2-frame:hover .v2-frame-x { display: inline-flex; } }
.v2-frame-add {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 2px dashed rgba(255,255,255,0.3); background: transparent; color: rgba(255,255,255,0.8);
  font: 700 10px/1 var(--font); width: 64px;
}
.v2-frame-add .v2-i { width: 18px; height: 18px; }
@media (hover: hover) { .v2-frame-add:hover { border-color: rgba(255,255,255,0.7); color: #fff; } }
.v2-strip-hint {
  margin-left: auto; padding-left: 12px; flex: none; display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.55); font: 500 11px/1 var(--font); white-space: nowrap;
}
.v2-strip-hint .v2-i { width: 14px; height: 14px; }

/* The dials are a card of their own — a frame around the controls, the way
   the strip is a frame around the looks — and each dial is one row: name,
   track, number. Read left to right like a mixing desk, not a settings page. */
.v2-dials {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px;
  border: 1px solid var(--v2-line); background: var(--v2-card); border-radius: 12px;
}
.v2-dials[hidden] { display: none; }
.v2-dials-more .v2-i { width: 12px; height: 12px; transition: transform 0.15s; }
.v2-dials-more.open .v2-i { transform: rotate(180deg); }
.v2-dials-more[hidden] { display: none; }
.v2-dials-head { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.v2-dials-grab { display: none; }
.v2-dials-name { font: 800 13px/1 var(--font); color: var(--text); }
.v2-dials-grp { font: 500 11px/1 var(--font); color: var(--text-muted); }
.v2-dials-sp { flex: 1; }
.v2-mini {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  border: 1.5px solid var(--v2-line); background: transparent; color: var(--text-muted);
  font: 600 11px/1 var(--font); cursor: pointer;
}
.v2-mini:hover:not(:disabled) { color: var(--text); border-color: rgba(120, 140, 200, 0.55); }
.v2-mini:disabled { opacity: 0.45; cursor: default; }
.v2-mini .v2-i { width: 13px; height: 13px; }
.v2-mini-danger:hover { color: #e0483e; border-color: rgba(224, 72, 62, 0.5); }
.v2-dials-body { max-height: 150px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding: 2px 2px 4px; }
.v2-dials.tall .v2-dials-body { max-height: 46vh; }

/* The hosted control panel, laid out as a row of dials rather than a column. */
html.lr-v2 .v2-dials-body .ctrl-panel {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 26px; align-items: start;
  padding: 0; margin: 0; background: none; border: none; box-shadow: none;
}
html.lr-v2 .v2-dials-body .ctrl-panel.hidden { display: none; }
html.lr-v2 .v2-dials-body .panel-title-row, html.lr-v2 .v2-dials-body .ctrl-panel > .panel-title { display: none; }
html.lr-v2 .v2-dials-body .control { margin: 0 0 4px; }
html.lr-v2 .v2-dials-body .control label, html.lr-v2 .v2-dials-body .control-label { font-size: 11px; }
/* A slider dial: label · track · value on one line. Anything that is not a
   plain slider (a select, a toggle, a colour) keeps the stacked layout. */
html.lr-v2 .v2-dials-body .control:has(> input[type="range"]) {
  display: grid; grid-template-columns: minmax(64px, max-content) 1fr 34px; align-items: center; gap: 0 10px;
  min-height: 30px; margin: 0;
}
html.lr-v2 .v2-dials-body .control:has(> input[type="range"]) > label {
  margin: 0; text-transform: none; letter-spacing: 0; font: 600 11.5px/1.2 var(--font); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.lr-v2 .v2-dials-body .control:has(> input[type="range"]) > input[type="range"] { width: 100%; margin: 0; }
html.lr-v2 .v2-dials-body .control:has(> input[type="range"]) > .control-value { width: 34px; font: 600 11px/1 var(--font); color: var(--text-muted); text-align: right; }
html.lr-v2 .v2-dials-body .control.v2-folded { display: none; }
html.lr-v2 .v2-dials-body .hint { grid-column: 1 / -1; margin: 2px 0 0; font-size: 11px; }
html.lr-v2 .v2-dials-body .btn-full { max-width: 240px; }

/* ── Over the picture ───────────────────────────────────────────────────────── */
html.lr-v2 .v2-chip {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 10px; max-width: 46%;
  border-radius: var(--r-pill); border: 1.5px solid rgba(255,255,255,0.8); background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18); color: var(--text); font: 600 11.5px/1 var(--font); cursor: pointer;
}
html[data-theme="dark"].lr-v2 .v2-chip { background: rgba(20, 24, 40, 0.82); border-color: rgba(255,255,255,0.22); }
html[data-theme="black"].lr-v2 .v2-chip { background: rgba(0, 0, 0, 0.86); border-color: rgba(255,255,255,0.28); }
html.lr-v2 .v2-chip[hidden] { display: none; }
html.lr-v2 .v2-chip .v2-i { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
html.lr-v2 .v2-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

html.lr-v2 .v2-wipe { position: absolute; z-index: 4; pointer-events: none; }
html.lr-v2 .v2-wipe[hidden] { display: none; }
html.lr-v2 .v2-wipe-line {
  position: absolute; top: 0; bottom: 0; left: var(--wipe, 0%); width: 2px; margin-left: -1px;
  background: rgba(255,255,255,0.95); box-shadow: 0 0 0 1px rgba(0,0,0,0.25); display: none;
}
html.lr-v2 .v2-wipe.open .v2-wipe-line { display: block; }
html.lr-v2 .v2-wipe-grip {
  position: absolute; top: 50%; left: var(--wipe, 0%); transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; padding: 0; pointer-events: auto; cursor: ew-resize;
  border: 1.5px solid rgba(255,255,255,0.9); background: rgba(20, 24, 40, 0.62); color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35); display: inline-flex; align-items: center; justify-content: center;
  touch-action: none; opacity: 0.55; transition: opacity 0.15s;
}
html.lr-v2 .v2-wipe-grip .v2-i { width: 17px; height: 17px; }
html.lr-v2 .v2-wipe:hover .v2-wipe-grip, html.lr-v2 .v2-wipe.open .v2-wipe-grip { opacity: 1; }
html.lr-v2 .v2-wipe-tag {
  position: absolute; top: 10px; padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(20, 24, 40, 0.62); color: #fff; font: 700 10px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; display: none;
}
html.lr-v2 .v2-wipe.open .v2-wipe-tag { display: block; }
html.lr-v2 .v2-wipe-before { left: 10px; }
html.lr-v2 .v2-wipe-after  { right: 10px; }

html.lr-v2 .v2-bubble {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 6;
  padding: 7px 14px; border-radius: var(--r-pill); background: rgba(14, 21, 32, 0.8); color: #fff;
  font: 700 13px/1 var(--font); pointer-events: none;
}
html.lr-v2 .v2-bubble[hidden] { display: none; }

html.lr-v2 .v2-welcome {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6;
  width: min(440px, calc(100% - 32px)); padding: 24px 24px 18px; border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.86); border: 2px solid var(--glass-border);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: var(--rim), 0 20px 60px rgba(20, 30, 70, 0.3);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--text);
}
html[data-theme="dark"].lr-v2 .v2-welcome { background: rgba(18, 22, 36, 0.78); }
html[data-theme="black"].lr-v2 .v2-welcome { background: rgba(0, 0, 0, 0.86); }
html.lr-v2 .v2-welcome[hidden] { display: none; }
html.lr-v2 .v2-welcome-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
html.lr-v2 .v2-welcome-x .v2-i { width: 14px; height: 14px; }
html.lr-v2 .v2-welcome-x[hidden] { display: none; }   /* the empty state cannot be dismissed — there is nothing behind it */
html.lr-v2 .v2-welcome-t { font: 800 19px/1.15 var(--font); }
html.lr-v2 .v2-welcome-s { font: 500 13px/1.3 var(--font); color: var(--text-muted); margin-top: -6px; }
html.lr-v2 .v2-welcome-b { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
html.lr-v2 .v2-welcome-n { font: 500 11px/1.3 var(--font); color: var(--text-muted); }

.v2-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1.5px solid var(--glass-border); background: var(--glass-bg); color: var(--text);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--rim);
  font: 700 12px/1 var(--font); cursor: pointer; white-space: nowrap; transition: transform 0.12s;
}
.v2-btn:hover { transform: translateY(-1px); }
.v2-btn:active { transform: scale(0.97); }
.v2-btn .v2-i { width: 15px; height: 15px; }
.v2-btn-primary { background: #2a3a5e; border-color: #2a3a5e; color: #fff; box-shadow: none; }
html[data-theme="dark"] .v2-btn-primary, html[data-theme="black"] .v2-btn-primary { background: #e7ecfb; border-color: #e7ecfb; color: #10141f; }
.v2-btn-cta { background: var(--v2-cta); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 8px 22px rgba(190, 20, 60, 0.38); }

/* ── Menus ──────────────────────────────────────────────────────────────────── */
.v2-menu {
  position: fixed; z-index: 2147483000; min-width: 290px; max-width: min(360px, calc(100vw - 16px)); padding: 6px;
  border-radius: 14px; border: 1.5px solid var(--glass-border); background: rgba(255,255,255,0.86);
  backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--rim), 0 16px 48px rgba(20, 30, 70, 0.22); color: var(--text);
}
html[data-theme="dark"] .v2-menu { background: rgba(20, 24, 38, 0.92); }
html[data-theme="black"] .v2-menu { background: rgba(0, 0, 0, 0.94); }
.v2-menu[hidden] { display: none; }
.v2-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 9px;
  border: none; background: none; color: var(--text); font: 600 12px/1.2 var(--font); cursor: pointer; text-align: left; text-decoration: none;
}
.v2-menu-item:hover:not(:disabled) { background: rgba(120, 140, 200, 0.14); }
.v2-menu-item:disabled { opacity: 0.5; cursor: default; }
.v2-menu-item.on { background: rgba(var(--sel-rgb), 0.14); }
.v2-menu-item.danger { color: #e0483e; }
.v2-menu-item svg { width: 18px; height: 18px; flex: none; color: var(--text-muted); }
.v2-menu-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-menu-item em { font: 500 10.5px/1 var(--font); font-style: normal; color: var(--text-muted); white-space: nowrap; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.v2-menu-thumb { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex: none; }
.v2-menu-sep { height: 1px; margin: 5px 6px; background: var(--v2-line); }

/* ── Done ───────────────────────────────────────────────────────────────────── */
.v2-done-ov {
  position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(28, 38, 88, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.v2-done-ov[hidden] { display: none; }
.v2-done {
  width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 18px 14px;
  border-radius: var(--r-card); border: 2px solid var(--glass-border); background: rgba(255,255,255,0.9);
  backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: var(--rim), 0 24px 70px rgba(20, 30, 70, 0.32); color: var(--text);
  display: flex; flex-direction: column; gap: 10px;
}
html[data-theme="dark"] .v2-done { background: rgba(18, 22, 36, 0.94); }
html[data-theme="black"] .v2-done { background: rgba(0, 0, 0, 0.96); }
.v2-done-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.v2-done-thumb { width: 64px; height: 48px; border-radius: 6px; background: #111; flex: none; }
.v2-done-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v2-done-title strong { font: 800 14px/1.15 var(--font); }
.v2-done-title span { font: 500 12px/1 var(--font); color: var(--text-muted); }
.v2-done-title small { font: 500 11px/1.2 var(--font); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-done-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--v2-line); background: var(--v2-card);
}
.v2-done-hero { border-color: rgba(var(--sel-rgb), 0.35); }
.v2-done-note { flex: 1; min-width: 120px; font: 500 11px/1.3 var(--font); color: var(--text-muted); }
.v2-done-link { border: none; background: none; padding: 2px 4px 0; }
.v2-tog {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 6px; border-radius: var(--r-pill);
  border: 1.5px solid var(--v2-line); background: transparent; color: var(--text-muted); font: 600 11px/1 var(--font); cursor: pointer;
}
.v2-tog i { width: 22px; height: 12px; border-radius: 6px; background: rgba(120,140,200,0.3); position: relative; transition: background 0.15s; }
.v2-tog i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.v2-tog.on { color: var(--text); border-color: rgba(var(--sel-rgb), 0.5); }
.v2-tog.on i { background: var(--sel); }
.v2-tog.on i::after { left: 12px; }

/* ── Live view keeps its own chrome ─────────────────────────────────────────── */
html.lr-v2 body.live-view .v2-chip, html.lr-v2 body.live-view .v2-wipe, html.lr-v2 body.live-view .v2-welcome { display: none !important; }

/* ═══ Phone: the same anatomy, stacked ═══════════════════════════════════════ */
@media (max-width: 860px) {
  html.lr-v2 { --v2-rail-w: 0px; }
  html.lr-v2 .canvas-area { left: 0; }
  html.lr-v2 .header { padding-left: calc(10px + var(--safe-left)); padding-right: calc(10px + var(--safe-right)); gap: 8px; }
  html.lr-v2 .v2-brand .logo { display: none; }
  html.lr-v2 .v2-suite-btn { height: 34px; width: 34px; padding: 0; justify-content: center; }
  html.lr-v2 .v2-suite-btn span, html.lr-v2 .v2-suite-btn .v2-i { display: none; }
  html.lr-v2 .v2-suite-btn svg { width: 18px; height: 18px; }
  html.lr-v2 .v2-cam { max-width: none; flex: 1; min-width: 0; justify-content: center; }
  html.lr-v2 .v2-cam-n { display: none; }
  html.lr-v2 .v2-hact { gap: 6px; }
  html.lr-v2 .v2-hact .v2-ib:nth-child(3) { display: none; }   /* redo: undo is enough on a phone */
  html.lr-v2 .v2-photo-btn { width: 34px; padding: 0; justify-content: center; margin: 0; }
  html.lr-v2 .v2-photo-btn span { display: none; }
  html.lr-v2 .v2-done-btn { padding: 0 16px; }

  /* The rail is gone; the sheet lives in the deck, under the strip. The deck
     is solid here: a 330px backdrop-filter over a repainting canvas is the
     single most expensive thing a phone GPU can be asked to composite. */
  html.lr-v2 .v2-rail { display: none; }
  html.lr-v2 .v2-deck { left: 0; padding: 6px 8px calc(8px + var(--safe-bottom)); gap: 6px;
    background: var(--v2-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
  html.lr-v2 .v2-cam, html.lr-v2 .v2-photo-btn, html.lr-v2 .v2-avatar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  html.lr-v2 .v2-strip { min-height: 76px; padding: 10px 10px; gap: 8px; }
  html.lr-v2 .v2-frame { width: 78px; height: 54px; }
  html.lr-v2 .v2-frame-add { width: 54px; }
  html.lr-v2 .v2-strip-hint { display: none; }

  html.lr-v2 .v2-deck .v2-sheet { flex: none; height: 236px; gap: 6px; }
  html.lr-v2 .v2-deck .v2-sheet > .v2-cap { display: none; }
  html.lr-v2 .v2-deck .v2-search { height: 32px; }
  html.lr-v2 .v2-deck .v2-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  html.lr-v2 .v2-deck .v2-chips::-webkit-scrollbar { display: none; }
  html.lr-v2 .v2-deck .v2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-bottom: 6px; }
  html.lr-v2 .v2-deck .v2-cams { display: none; }
  html.lr-v2 .v2-deck .v2-cams-row { display: flex; flex-wrap: wrap; overflow: auto; gap: 10px; }
  html.lr-v2 .v2-deck .v2-sheet-note { display: none; }
  /* Cameras on a phone: the grid swaps for the camera cards. */
  html.lr-v2 .v2-deck .v2-sheet .v2-cams-row[hidden] { display: none; }

  /* One bottom area, two states. */
  html.lr-v2[data-v2-bottom="adjust"] .v2-deck .v2-sheet { display: none; }
  html.lr-v2[data-v2-bottom="pick"] .v2-dials { display: none; }
  html.lr-v2 .v2-dials-head { min-height: 28px; }
  html.lr-v2 .v2-dials-grab {
    display: inline-flex; position: absolute; left: 50%; top: 2px; transform: translateX(-50%);
    width: 44px; height: 14px; border: none; background: none; padding: 0; cursor: pointer;
  }
  html.lr-v2 .v2-dials-grab span { width: 40px; height: 4px; border-radius: 2px; background: rgba(120,140,200,0.45); margin: auto; }
  html.lr-v2 .v2-dials { position: relative; padding-top: 10px; }
  html.lr-v2 .v2-dials-body { max-height: 190px; }
  html.lr-v2 .v2-dials.tall .v2-dials-body { max-height: 50vh; }
  html.lr-v2 .v2-dials-body .ctrl-panel { grid-template-columns: 1fr; gap: 0; }
  html.lr-v2 .v2-dials-body .control { margin-bottom: 8px; }
  html.lr-v2 .v2-dials-body .control input[type="range"] { height: 8px; }
  html.lr-v2 .v2-dials-body .control input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }

  html.lr-v2 .v2-chip { top: 8px; left: 8px; height: 28px; max-width: 60%; }
  html.lr-v2 .v2-welcome { padding: 18px 16px 14px; }
  html.lr-v2 .v2-welcome-t { font-size: 17px; }

  /* Live view on a phone is the digicam chassis; the deck gets out of its way. */
  html.lr-v2 body.live-view .v2-deck { display: none; }
  html.lr-v2 body.live-view .canvas-area { left: 0; right: 0; bottom: 0; top: 0; }
}

/* ── Done: format & size, the roll ──────────────────────────────────────────── */
.v2-seg { display: inline-flex; border: 1.5px solid var(--v2-line); border-radius: var(--r-pill); overflow: hidden; height: 28px; }
.v2-seg button { border: none; background: transparent; color: var(--text-muted); font: 600 11px/1 var(--font); padding: 0 10px; cursor: pointer; }
.v2-seg button.on { background: #2a3a5e; color: #fff; }
html[data-theme="dark"] .v2-seg button.on, html[data-theme="black"] .v2-seg button.on { background: #e7ecfb; color: #10141f; }
.v2-done-roll { gap: 8px; }
.v2-done-keep { gap: 8px; }
.v2-done-name {
  flex: 1 1 140px; min-width: 0; height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1.5px solid var(--v2-line); background: rgba(255, 255, 255, 0.55); color: var(--text);
  font: 700 12px/1 var(--font); outline: none; -webkit-appearance: none;
}
.v2-done-name::placeholder { color: var(--text-muted); font-weight: 600; }
.v2-done-name:focus { border-color: rgba(var(--sel-rgb), 0.7); }
.v2-done-name:disabled { opacity: 0.5; }
html[data-theme="dark"] .v2-done-name, html[data-theme="black"] .v2-done-name { background: rgba(255, 255, 255, 0.06); }
.v2-done-keep .v2-done-note { flex-basis: 100%; }
.v2-done-rollhead { flex-basis: 100%; display: flex; align-items: baseline; gap: 8px; }
.v2-done-rollhead strong { font: 800 12px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; }
.v2-done-roll .v2-done-note { flex-basis: 100%; }

/* ── The shelf: every camera, one page ──────────────────────────────────────── */
.v2-cap-link { margin-left: auto; border: none; background: none; color: var(--text-muted); font: 600 11px/1 var(--font); cursor: pointer; letter-spacing: 0; text-transform: none; padding: 0 2px; }
.v2-cap-link:hover { color: var(--text); }
.v2-shelf {
  width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: hidden; display: flex; flex-direction: column;
  border-radius: var(--r-card); border: 2px solid var(--glass-border); background: rgba(255,255,255,0.92);
  backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: var(--rim), 0 24px 70px rgba(20, 30, 70, 0.32); color: var(--text);
}
html[data-theme="dark"] .v2-shelf { background: rgba(18, 22, 36, 0.95); }
html[data-theme="black"] .v2-shelf { background: rgba(0, 0, 0, 0.96); }
.v2-shelf-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid var(--v2-line); }
.v2-shelf-head strong { font: 800 15px/1 var(--font); letter-spacing: 0.04em; }
.v2-shelf-head .v2-search { flex: 1; min-width: 0; }
.v2-shelf-body { overflow-y: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 16px; }
.v2-shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; margin-top: 8px; }
.v2-shelf-grid .v2-camcard { width: auto; }
.v2-shelf-title { display: flex; align-items: baseline; gap: 8px; flex: none; }
.v2-shelf-title strong { font: 800 15px/1 var(--font); letter-spacing: 0.02em; }
.v2-shelf-title span { font: 500 11px/1 var(--font); color: var(--text-muted); }
.v2-shelf-note { margin: 0; font: 500 11px/1.4 var(--font); color: var(--text-muted); }
@media (max-width: 860px) {
  .v2-shelf { max-height: calc(100vh - 16px); }
  .v2-shelf-head { flex-wrap: wrap; }
  .v2-shelf-head .v2-search { order: 3; flex-basis: 100%; }
}

/* ── The question: cameras first, or the editor ────────────────────────────── */
html.lr-v2 .v2-ask { width: min(520px, calc(100% - 32px)); }
.v2-ask-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 4px; }
.v2-ask-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 14px 14px 12px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--v2-line); background: var(--v2-card); color: var(--text);
  font: 500 11.5px/1.35 var(--font); transition: transform 0.12s, border-color 0.12s;
}
.v2-ask-opt strong { font: 800 13px/1.15 var(--font); }
.v2-ask-opt span:last-child { color: var(--text-muted); }
.v2-ask-ico { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--v2-cta); color: #fff; }
.v2-ask-ico svg { width: 18px; height: 18px; }
@media (hover: hover) { .v2-ask-opt:hover { transform: translateY(-1px); border-color: rgba(120, 140, 200, 0.6); } }
@media (max-width: 480px) { .v2-ask-opts { grid-template-columns: 1fr; } }

/* ── The sequence: Edit · Look · Deliver ───────────────────────────────────────
   The video editor is pages of this layout, not a window. The picture stays
   put; the page changes what sits under it. js/sequence.js owns the nodes. */
.v2-pages { display: inline-flex; border: 1.5px solid var(--glass-border); border-radius: var(--r-pill); overflow: hidden; height: 32px; background: var(--glass-bg); box-shadow: var(--rim); flex: none; }
.v2-pages[hidden] { display: none; }
.v2-pages button { border: none; background: transparent; color: var(--text-muted); font: 700 12px/1 var(--font); padding: 0 14px; cursor: pointer; }
.v2-pages button[aria-selected="true"] { background: var(--text); color: var(--accent-fg, #fff); }
html[data-theme="dark"] .v2-pages button[aria-selected="true"], html[data-theme="black"] .v2-pages button[aria-selected="true"] { background: #e7ecfb; color: #10141f; }
.v2-seqchip { cursor: default; }
.v2-seqchip .v2-i { width: 14px; height: 14px; color: var(--text-muted); }
.v2-seq-x { margin-left: 6px; }
.v2-seq-x[hidden] { display: none; }
html.lr-v2 .v2-cam[hidden] { display: none; }

/* Media rail (Edit page). */
.v2-media { display: flex; flex-direction: column; gap: 8px; flex: none; }
.v2-media[hidden] { display: none; }
.v2-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v2-mediacard { display: flex; flex-direction: column; gap: 4px; padding: 0; border: none; background: none; color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.v2-mediacard-art { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--v2-line); background: var(--v2-card); }
.v2-mediacard-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-mediacard-art .v2-i { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; color: var(--text-muted); }
.v2-mediacard-art i { position: absolute; right: 4px; bottom: 4px; padding: 2px 5px; border-radius: 4px; background: rgba(10,12,20,0.72); color: #fff; font: 700 10px/1 var(--font); font-style: normal; }
.v2-mediacard-name { font: 700 11px/1.15 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-mediacard.still { opacity: 0.55; }
@media (hover: hover) { .v2-mediacard:hover .v2-mediacard-art { border-color: rgba(120, 140, 200, 0.6); } }
.v2-media-add { min-height: 56px; }
.v2-media-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.v2-media-chips .v2-mini .v2-cap-sub { margin-left: 4px; }
.v2-sticker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.v2-sticker { aspect-ratio: 1; padding: 2px; border: 1.5px solid var(--v2-line); border-radius: 8px; background: var(--v2-card); cursor: pointer; display: grid; place-items: center; }
.v2-sticker canvas { width: 100%; height: 100%; display: block; }
@media (hover: hover) { .v2-sticker:hover { border-color: rgba(120, 140, 200, 0.6); transform: translateY(-1px); } }
/* On the Edit page the rail scrolls as a whole, the media grid keeps to a third
   of the height with its own scroll, and the cameras follow as a list — every
   one a drop target. Forty clips must not push the pickers off the screen. */
html.lr-seq[data-v2-page="edit"] .v2-rail { overflow-y: auto; scrollbar-width: thin; padding-bottom: 16px; }
html.lr-seq[data-v2-page="edit"] .v2-media-grid { max-height: 34vh; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
html.lr-seq[data-v2-page="edit"] .v2-cams { flex: none; }
html.lr-seq[data-v2-page="edit"] .v2-cams-row { flex-direction: column; overflow-x: hidden; overflow-y: visible; padding-bottom: 12px; }
html.lr-seq[data-v2-page="edit"] .v2-cams-row .v2-camcard { width: 100%; }
html.lr-v2:not(.lr-seq) .v2-rail .v2-cams-row .v2-camcard { width: 140px; padding: 8px 9px 7px; }
html.lr-v2:not(.lr-seq) .v2-rail .v2-cams-row .v2-camcard-cover { width: 34px; height: 34px; }
html.lr-seq[data-v2-page="edit"] .v2-cams-row .v2-camcard-more { min-height: 44px; flex-direction: row; }
html.lr-seq[data-v2-page="edit"] .v2-cams .v2-cap-sub::after { content: ' · drag one onto a clip'; }
.v2-media-chips .v2-mini.on { color: var(--text); border-color: rgba(var(--sel-rgb), 0.7); }
html.lr-seq[data-v2-page="edit"] .v2-sheet { display: none; }
html.lr-seq[data-v2-page="edit"] .v2-strip, html.lr-seq[data-v2-page="edit"] .v2-dials { display: none; }

/* Transport. */
.v2-transport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2-transport[hidden] { display: none; }
.v2-tp-play { width: 32px; height: 32px; }
.v2-tp-time { font: 600 12px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--text); min-width: 96px; }
.v2-tp-time i { font-style: normal; color: var(--text-muted); }
.v2-tp-sep { width: 1px; height: 18px; background: var(--v2-line); }
.v2-tp-zoom button { min-width: 30px; }

/* The lanes, as a card. */
.v2-tlcard { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border: 1px solid var(--v2-line); background: var(--v2-card); border-radius: 12px; }
.v2-tlcard[hidden] { display: none; }
.v2-tlcard.drop { border-color: var(--sel); box-shadow: 0 0 0 2px rgba(var(--sel-rgb), 0.3); }
.v2-tlcard-head { display: flex; align-items: center; gap: 10px; }
.v2-tlcard-body { border-radius: 8px; overflow: hidden; max-height: min(310px, 42vh); overflow-y: auto; }
@media (max-height: 760px) { .v2-tlcard-body { max-height: min(254px, 36vh); } }
html.lr-v2 .tle.tle-embedded { position: static; max-height: none; box-shadow: none; border: 0; background: var(--tle-bg); border-radius: 8px; z-index: auto; }
html.lr-v2 .tle.tle-embedded .tle-body { padding: 0; }
.v2-camcard.dragging, .v2-mediacard.dragging { opacity: 0.6; }
.v2-mediacard { cursor: grab; }

/* Inspector: a column on the right, desktop only. */
.v2-insp {
  position: fixed; top: var(--v2-top); right: 0; bottom: var(--v2-deck-h); width: var(--v2-insp-w, 270px); z-index: 10;
  padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto;
  background: var(--v2-surface); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-left: 1px solid var(--v2-line);
}
.v2-insp[hidden] { display: none; }
html.lr-v2.lr-seq[data-v2-page="edit"] .canvas-area { right: var(--v2-insp-w, 270px); }
@media (max-width: 1060px) { html.lr-v2.lr-seq[data-v2-page="edit"] .canvas-area { right: 0; } .v2-insp { display: none !important; } }
.v2-insp-empty { font: 500 12px/1.4 var(--font); color: var(--text-muted); }
.v2-insp-sec { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--v2-line); background: var(--v2-card); border-radius: 12px; }
.v2-insp-sec[hidden] { display: none; }
.v2-insp-head { display: flex; align-items: center; gap: 6px; }
.v2-insp-head strong { font: 800 12px/1 var(--font); }
.v2-insp-row { display: flex; justify-content: space-between; font: 500 12px/1.2 var(--font); color: var(--text-muted); }
.v2-insp-row b { font: 600 12px/1.2 var(--font); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.v2-insp-look { display: flex; flex-direction: column; gap: 3px; font: 500 11px/1.35 var(--font); color: var(--text); }
.v2-insp-look em { font-style: normal; font-weight: 600; color: var(--text-muted); margin-right: 4px; }
.v2-insp-open { height: 32px; justify-content: center; }
.v2-insp-layer[hidden] { display: none; }
/* The timeline's own properties strip, adopted into the inspector. */
.v2-insp-layer .tle-props { display: flex; flex-direction: column; gap: 8px; padding: 0; background: none; border: 0; }
.v2-insp-layer .tle-field { display: flex; flex-direction: column; gap: 4px; font: 600 11px/1.2 var(--font); color: var(--text-muted); }
.v2-insp-layer .tle-field > span { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
.v2-insp-layer .tle-range { width: 100%; }
.v2-insp-layer .tle-sel-in, .v2-insp-layer .tle-text-in { width: 100%; border-radius: 8px; border: 1.5px solid var(--v2-line); background: rgba(255,255,255,0.5); color: var(--text); font: 600 12px/1.3 var(--font); padding: 6px 8px; }
html[data-theme="dark"] .v2-insp-layer .tle-sel-in, html[data-theme="black"] .v2-insp-layer .tle-sel-in,
html[data-theme="dark"] .v2-insp-layer .tle-text-in, html[data-theme="black"] .v2-insp-layer .tle-text-in { background: rgba(255,255,255,0.06); }
.v2-insp-layer .tle-keyrow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.v2-insp-layer .tle-btn { height: 26px; padding: 0 10px; border-radius: var(--r-pill); border: 1.5px solid var(--v2-line); background: transparent; color: var(--text-muted); font: 600 11px/1 var(--font); cursor: pointer; }
.v2-insp-layer .tle-btn.on { color: var(--text); border-color: rgba(var(--sel-rgb), 0.7); }
.v2-insp-layer .tle-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.v2-insp-layer .tle-swatch.on { border-color: var(--text); }
.v2-insp-layer .tle-color { width: 26px; height: 22px; border: none; background: none; padding: 0; }
.v2-insp-layer .tle-art-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.v2-insp-layer .tle-art { border: 1.5px solid var(--v2-line); border-radius: 8px; background: transparent; padding: 3px; cursor: pointer; }
.v2-insp-layer .tle-art.on { border-color: var(--sel); }

/* Clip row (Look page). */
.v2-cliprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--v2-line); background: var(--v2-card); border-radius: 12px; }
.v2-cliprow[hidden] { display: none; }
.v2-cliprow > .v2-ib { width: 26px; height: 26px; }
.v2-cliprow > [data-a="prev"] .v2-i { transform: rotate(90deg); }
.v2-cliprow > [data-a="next"] .v2-i { transform: rotate(-90deg); }
.v2-cliprow-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 60%; }
.v2-cliprow-list::-webkit-scrollbar { display: none; }
.v2-clipthumb { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px; border: 2px solid transparent; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer; }
.v2-clipthumb canvas, .v2-clipthumb-ph { width: 64px; height: 36px; border-radius: 4px; background: var(--v2-line); display: grid; place-items: center; font: 700 11px/1 var(--font); }
.v2-clipthumb.adjust .v2-clipthumb-ph { border: 1.5px dashed var(--text-muted); background: transparent; }
.v2-clipthumb small { font: 600 10px/1 var(--font); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-clipthumb.sel { border-color: #ff7b54; color: var(--text); }
html.lr-seq[data-v2-page="look"] .v2-media { display: none; }

/* Deliver: a progress bar in the hero row. */
.v2-prog { flex-basis: 100%; height: 6px; border-radius: 999px; background: var(--v2-line); overflow: hidden; }
.v2-prog[hidden] { display: none; }
.v2-prog i { display: block; height: 100%; width: 0; background: var(--v2-cta); transition: width 0.2s; }

/* Phone: the sequence as a list, and the trim page. */
.v2-seqlist { display: flex; flex-direction: column; gap: 8px; }
.v2-seqlist[hidden] { display: none; }
.v2-seqlist-items { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.v2-seqitem { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--v2-line); background: var(--v2-card); border-radius: 10px; }
.v2-seqitem.sel { border-color: #ff7b54; box-shadow: 0 0 0 2px rgba(255,123,84,0.35); }
.v2-seqitem.adjust { border-style: dashed; }
.v2-seqitem-art { width: 52px; height: 30px; border-radius: 4px; background: var(--v2-line); overflow: hidden; flex: none; }
.v2-seqitem-art canvas { width: 100%; height: 100%; display: block; }
.v2-seqitem-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v2-seqitem-txt strong { font: 700 12px/1.15 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-seqitem-txt small { font: 500 10.5px/1.2 var(--font); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-seqitem-acts { display: flex; gap: 2px; flex: none; }
.v2-seqitem-acts .v2-ib { width: 26px; height: 26px; }
.v2-seqitem-acts [data-a="up"] .v2-i { transform: rotate(180deg); }
.v2-seqlist-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.v2-seqlist-pages { display: flex; gap: 8px; }
.v2-seqlist-pages .v2-btn { flex: 1; justify-content: center; height: 38px; }
.v2-trim { display: flex; flex-direction: column; gap: 8px; }
.v2-trim[hidden] { display: none; }
.v2-trim-back { width: 26px; height: 26px; margin-right: 4px; }
.v2-trim-back .v2-i { transform: rotate(90deg); }
.v2-trim-nums { display: flex; justify-content: space-between; font: 600 11px/1 var(--font); color: var(--text); font-variant-numeric: tabular-nums; }
.v2-trim-strip { position: relative; display: flex; height: 44px; border-radius: 6px; overflow: hidden; border: 1px solid var(--v2-line); background: var(--v2-line); }
.v2-trim-strip canvas { flex: 1; height: 100%; min-width: 0; display: block; }
.v2-trim-shade { position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,0.55); pointer-events: none; }
.v2-trim-shade-l { left: 0; } .v2-trim-shade-r { right: 0; }
.v2-trim-range { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 8px; font: 600 11px/1 var(--font); color: var(--text-muted); }
.v2-trim-range input { width: 100%; }

/* Phone: the sequence chrome fits the header, the transport keeps the essentials. */
@media (max-width: 860px) {
  html.lr-v2.lr-seq .v2-photo-btn, html.lr-v2.lr-seq .v2-hact > .v2-ib { display: none; }
  html.lr-v2.lr-seq .v2-seqchip, html.lr-v2.lr-seq .v2-cam { display: none !important; }
  .v2-pages { height: 30px; }
  .v2-pages button { padding: 0 10px; font-size: 11.5px; }
  .v2-seq-x span { display: none; }
  .v2-seq-x { width: 30px; height: 30px; padding: 0; justify-content: center; margin-left: 2px; }
  .v2-transport [data-a="dup"], .v2-transport [data-a="adj"], .v2-transport [data-a="track"] { display: none; }
  .v2-transport { gap: 6px; }
  .v2-tp-time { min-width: 0; }
}

/* ── After the first three days of the event stream ──────────────────────────
   Own photo is the whole game: the header's Photo button leads while the
   sample is up, and a nudge lands on the picture after the second look. */
.v2-photo-btn.v2-btn-lead {
  background: var(--v2-cta); border-color: transparent; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 8px 22px rgba(190, 20, 60, 0.38);
}
.v2-photo-btn.v2-btn-lead .v2-i { color: #fff; }
.v2-nudge {
  position: absolute; left: 12px; right: 12px; bottom: 52px; z-index: 6;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px;
  border-radius: 14px; border: 1.5px solid var(--glass-border); background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--rim), 0 12px 32px rgba(20, 30, 70, 0.28); color: var(--text); font: 600 12px/1.3 var(--font);
}
.v2-nudge[hidden] { display: none; }
.v2-nudge > span { flex: 1; min-width: 140px; }
.v2-nudge .v2-btn { height: 32px; }
.v2-nudge > .v2-ib { width: 28px; height: 28px; }
@media (min-width: 861px) { .v2-nudge { left: auto; right: 16px; bottom: 56px; max-width: 420px; } }
/* Signed out, the Done sheet asks once instead of twice. */
.v2-done-signin { gap: 8px; }
.v2-done-signin .v2-btn .v2-i, .v2-done-signin .v2-btn svg { width: 15px; height: 15px; }
.v2-done-slot:empty { display: none; }
/* A camera's cover on your own photo. */
.v2-camcard-cover.on-photo canvas { width: 100%; height: 100%; display: block; }

/* ── The empty state: the door, not a sample ────────────────────────────────
   No photo loaded: the picture area is a drop target with the card in the
   middle. The card is the welcome card, grown into the first screen. */
html.lr-v2 .canvas-area.v2-empty::before {
  content: ''; position: absolute; inset: 14px; border-radius: 14px; pointer-events: none;
  border: 2px dashed var(--v2-line);
}
html.lr-v2 .canvas-area.v2-empty.drag-over::before { border-color: var(--sel); background: rgba(var(--sel-rgb), 0.06); }
html.lr-v2 .v2-welcome-mark { width: 44px; height: 44px; color: var(--text-muted); margin-bottom: -2px; }
html.lr-v2 .v2-welcome-mark svg { width: 100%; height: 100%; }
html.lr-v2 .v2-welcome-t { font-size: 22px; }
html.lr-v2 .v2-welcome-why { max-width: 340px; color: var(--text); opacity: 0.8; margin-top: 2px; }
html.lr-v2 .v2-welcome .v2-btn-cta { height: 36px; padding: 0 18px; }
@media (max-width: 860px) { html.lr-v2 .canvas-area.v2-empty::before { inset: 10px; } html.lr-v2 .v2-welcome-t { font-size: 20px; } }

/* ── The Cherry Update: splash + tour ───────────────────────────────────────
   The splash is the Done sheet's card with a list; the tour is a ring cut
   out of a scrim (one box-shadow the size of the screen) and a card beside
   it. Both sit above the shell's windows. Light, dark and black through the
   tokens. */
.v2-cherry-ov {
  position: fixed; inset: 0; z-index: 2147482400; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(28, 38, 88, 0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
html[data-theme="dark"] .v2-cherry-ov, html[data-theme="black"] .v2-cherry-ov { background: rgba(0, 0, 0, 0.55); }
.v2-cherry {
  width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 22px 18px;
  border-radius: var(--r-card); border: 2px solid var(--glass-border); background: rgba(255,255,255,0.92);
  backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: var(--rim), 0 24px 70px rgba(20, 30, 70, 0.32); color: var(--text);
  display: flex; flex-direction: column; gap: 8px;
}
html[data-theme="dark"] .v2-cherry { background: rgba(14, 17, 24, 0.96); }
html[data-theme="black"] .v2-cherry { background: rgba(0, 0, 0, 0.97); }
.v2-cherry-brand { display: flex; align-items: center; gap: 8px; font: 800 11px/1 var(--font); letter-spacing: 0.16em; color: var(--text); }
.v2-cherry-brand svg { width: 20px; height: 20px; }
.v2-cherry-when { font: 700 10.5px/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cta-ink, #8e0e3a); margin-top: 8px; }
html[data-theme="dark"] .v2-cherry-when, html[data-theme="black"] .v2-cherry-when { color: #ff7a8c; }
.v2-cherry-t { margin: 0; font: 800 26px/1.1 var(--font); letter-spacing: -0.02em; }
.v2-cherry-lede { margin: 0 0 6px; font: 500 13px/1.45 var(--font); color: var(--text-muted); }
.v2-cherry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v2-cherry-list li { display: flex; gap: 10px; align-items: flex-start; }
.v2-cherry-list i { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--v2-cta); box-shadow: 0 0 0 3px rgba(190, 20, 60, 0.18); }
.v2-cherry-list b { display: block; font: 700 13px/1.3 var(--font); }
.v2-cherry-list span { display: block; font: 500 12px/1.4 var(--font); color: var(--text-muted); }
.v2-cherry-ask { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--glass-border); }
.v2-cherry-ask p { margin: 0 0 10px; font: 600 13px/1.4 var(--font); }
.v2-cherry-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v2-cherry-never { margin-left: auto; border: none; background: none; padding: 6px 2px; font: 600 12px/1 var(--font); color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.v2-cherry-never:hover { color: var(--text); }

.v2-tour-scrim { position: fixed; inset: 0; z-index: 2147482500; }
.v2-tour-ring {
  position: fixed; z-index: 2147482501; border-radius: 14px; pointer-events: none;
  border: 2px solid var(--sel, #d61f4d);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(var(--sel-rgb, 214, 31, 77), 0.25);
  transition: left 0.28s cubic-bezier(.22,1,.36,1), top 0.28s cubic-bezier(.22,1,.36,1), width 0.28s cubic-bezier(.22,1,.36,1), height 0.28s cubic-bezier(.22,1,.36,1);
}
.v2-tour-tip {
  position: fixed; z-index: 2147482502; padding: 16px 16px 14px; border-radius: 16px;
  border: 2px solid var(--glass-border); background: rgba(255,255,255,0.96); color: var(--text);
  box-shadow: var(--rim), 0 20px 60px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; gap: 6px;
  transition: left 0.28s cubic-bezier(.22,1,.36,1), top 0.28s cubic-bezier(.22,1,.36,1);
}
html[data-theme="dark"] .v2-tour-tip { background: rgba(14, 17, 24, 0.97); }
html[data-theme="black"] .v2-tour-tip { background: rgba(0, 0, 0, 0.97); }
.v2-tour-n { font: 700 10.5px/1 var(--font); letter-spacing: 0.12em; color: var(--text-muted); }
.v2-tour-t { font: 800 16px/1.2 var(--font); letter-spacing: -0.01em; }
.v2-tour-b { margin: 0; font: 500 13px/1.45 var(--font); color: var(--text-muted); }
.v2-tour-b2 { color: var(--text); }
.v2-tour-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.v2-tour-btns .v2-btn { height: 32px; }
.v2-tour-skip { margin-left: auto; border: none; background: none; padding: 6px 2px; font: 600 12px/1 var(--font); color: var(--text-muted); cursor: pointer; }
.v2-tour-skip:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .v2-tour-ring, .v2-tour-tip { transition: none; } }