/* =====================================================================
   AreaHDR v2 UI — Vercel-inspired (pure black, Geist, 1px borders, crisp white type).
   Loaded after style.css; overrides tokens + components. No third-party assets except Geist (OFL, see fonts/Geist-OFL.txt).
   ===================================================================== */
@font-face { font-family:"Geist"; src:url("/static/fonts/Geist-Variable.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("/static/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
:root {
  --bg:#000; --card:#0a0a0a; --card2:#0a0a0a; --ink:#ededed; --ink-2:#a1a1a1; --muted:#8f8f8f; --line:#1f1f1f; --line-2:#2e2e2e;
  --accent:#fff; --accent2:rgba(255,255,255,.08); --glow:none; --photo:#1a1a1a; --warm:#ededed; --danger:#ff6166; --ok:#ededed;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:8px; --r:12px; --r-lg:16px; --ease:cubic-bezier(.22,1,.36,1); --t:180ms;
  --glass:rgba(10,10,10,.72);
}
html, body { background:#000 !important; background-image:none !important; }
body { font:14px/1.55 var(--sans) !important; color:var(--ink); -webkit-font-smoothing:antialiased; letter-spacing:-.006em; }
body::after, body::before { display:none !important; }
h1, h2, h3, .brand .product, .drop .big, .deploy, .step, .stepn, .ptxt, .phase, .badge, .status, table.shoots th, .card-pick span, .quick-kicker, .tag, details.controls summary
  { font-family:var(--sans) !important; text-shadow:none !important; }
.mono, .keys, #filecount, .thumb .n, #pickedsum, code, .ptxt { font-family:var(--mono) !important; font-variant-numeric:tabular-nums; }
h2 { font-size:20px; font-weight:600; letter-spacing:-.02em; margin:0 0 8px; text-transform:none; }
h3 { font-size:18px; font-weight:600; letter-spacing:-.015em; }
a { color:var(--ink); text-underline-offset:3px; }
a:hover { color:#fff; }
::selection { background:#fff; color:#000; }

/* ---------- top nav */
header.top { position:sticky; top:0; z-index:40; height:64px; padding:0 24px; gap:16px; background:rgba(0,0,0,.72) !important;
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line) !important; box-shadow:none !important; }
.brand { display:flex; align-items:center; gap:12px; }
.brand .logo-img { height:22px; width:auto; }
.brand .sep { width:1px; height:20px; background:var(--line-2); transform:rotate(18deg); }
.brand .product { font-size:15px !important; font-weight:600 !important; letter-spacing:-.01em !important; color:#fff !important; }
.brand .product b { font-weight:600 !important; color:var(--ink-2) !important; }
.tag { font-size:13px !important; letter-spacing:0 !important; text-transform:none !important; color:var(--muted) !important; }
header.top form button { height:32px; padding:0 12px !important; border-radius:var(--r-sm) !important; border:1px solid var(--line-2) !important; color:var(--ink) !important;
  background:transparent !important; font:500 13px var(--sans); transition:background var(--t) var(--ease), border-color var(--t) var(--ease); }
header.top form button:hover { background:#111 !important; border-color:#444 !important; }

main { max-width:1200px; margin:0 auto; padding:40px 24px 80px; }

/* ---------- hero (home) */
.hero { position:relative; padding:56px 0 40px; text-align:left; isolation:isolate; }
.hero::before { content:""; position:absolute; inset:-40px -24px 0; z-index:-1;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 60% 70% at 50% 0%, #000 30%, transparent 75%); opacity:.55; }
.hero::after { content:""; position:absolute; left:50%; top:-120px; width:720px; height:360px; transform:translateX(-50%); z-index:-1;
  background:radial-gradient(closest-side, rgba(255,255,255,.10), transparent); filter:blur(20px); }
.hero h1 { font-size:clamp(32px, 5vw, 48px); line-height:1.05; font-weight:600; letter-spacing:-.045em; margin:0 0 12px; color:#fff; }
.hero p { margin:0; font-size:16px; color:var(--ink-2); max-width:560px; }
.hero .eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; height:28px; padding:0 12px; border:1px solid var(--line-2);
  border-radius:999px; font:500 12px var(--mono); color:var(--ink-2); background:rgba(255,255,255,.02); }
.hero .eyebrow i { width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.12); }

/* ---------- cards / glass panels */
.card { background:var(--card) !important; border:1px solid var(--line) !important; border-radius:var(--r-lg) !important; box-shadow:none !important;
  padding:24px !important; margin-bottom:24px !important; transition:border-color var(--t) var(--ease); }
.card:hover { border-color:var(--line-2) !important; }
.entry-grid { gap:16px !important; grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr) !important; }
.entry-grid > .card { margin-bottom:24px !important; }
.card h2 + .muted, .card > p.muted { color:var(--ink-2); }
.quick { background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--card) !important; }
.quick::before { background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent) !important; opacity:.6; }
.quick-kicker { font:500 12px var(--mono) !important; letter-spacing:0 !important; text-transform:none !important; color:var(--ink-2) !important; }
.quick-icon { text-shadow:none !important; font-size:20px !important; width:40px; height:40px; line-height:38px; margin:0 auto 12px !important; border:1px solid var(--line-2); border-radius:12px; }

/* ---------- drop zones */
.drop { border:1px dashed var(--line-2) !important; background:transparent !important; border-radius:var(--r) !important; padding:40px 24px !important; box-shadow:none !important;
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease); }
.drop:hover { border-color:#555 !important; background:rgba(255,255,255,.015) !important; }
.drop.over { border-style:solid !important; border-color:#fff !important; background:rgba(255,255,255,.04) !important; }
.drop .big { font-size:16px !important; font-weight:600 !important; letter-spacing:-.01em !important; color:#fff; margin-bottom:4px; }
.drop .muted { font-size:13px; }
.pickers { display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap; }

/* ---------- buttons, inputs */
.btn { height:36px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 14px !important; border-radius:var(--r-sm) !important;
  background:#0a0a0a !important; color:var(--ink) !important; border:1px solid var(--line-2) !important; box-shadow:none !important; font:500 14px var(--sans) !important;
  letter-spacing:-.01em; transition:background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease), opacity var(--t); }
.btn:hover { background:#141414 !important; border-color:#454545 !important; }
.btn:active { transform:scale(.98); }
.btn.primary, .btn.warm.deploy { background:#ededed !important; color:#0a0a0a !important; border-color:#ededed !important; font-weight:500 !important; }
.btn.primary:hover, .btn.warm.deploy:hover { background:#fff !important; border-color:#fff !important; }
.btn.warm { background:#0a0a0a !important; color:#fff !important; border-color:var(--line-2) !important; }
.btn.small { height:28px; padding:0 10px !important; font-size:13px !important; }
.btn:disabled, .btn.disabled { opacity:.4 !important; transform:none; }
.deploy { height:44px !important; font-size:14px !important; letter-spacing:-.01em !important; text-transform:none !important; border-radius:var(--r-sm) !important; margin-top:16px !important; }
.deploy .ico { display:none; }
input[type=text], input[type=email], input[type=password], select, textarea { height:36px; background:#0a0a0a !important; color:var(--ink) !important;
  border:1px solid var(--line-2) !important; border-radius:var(--r-sm) !important; padding:0 12px !important; font:14px var(--sans) !important;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
input:hover, select:hover { border-color:#454545 !important; }
input:focus, select:focus, textarea:focus { outline:none !important; border-color:#8f8f8f !important; box-shadow:0 0 0 3px rgba(255,255,255,.08) !important; }
.btn:focus-visible, button:focus-visible, a:focus-visible { outline:2px solid #fff !important; outline-offset:2px !important; }
input[type=range] { accent-color:#ededed; height:auto; }
input[type=checkbox] { accent-color:#ededed; width:16px; height:16px; }
.row { gap:16px 24px !important; margin-top:24px !important; }
.row label { color:var(--ink-2) !important; font-size:13px !important; gap:8px !important; }
.row label.chk, label.chk { color:var(--ink) !important; }

/* ---------- pills, status, tables */
.pill { border-radius:999px; background:rgba(255,255,255,.06) !important; color:var(--ink) !important; border:1px solid var(--line-2); font:500 12px var(--mono); padding:2px 10px; }
.pill.src { background:transparent !important; color:var(--ink-2) !important; }
.status { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px !important; border-radius:999px !important; font:500 12px var(--sans) !important;
  letter-spacing:0 !important; text-transform:capitalize; background:transparent !important; border:1px solid var(--line-2); color:var(--ink-2) !important; }
.status::before { content:""; width:6px; height:6px; border-radius:50%; background:#666; }
.status.done { color:var(--ink) !important; } .status.done::before { background:#3ecf8e; }
.status.processing::before, .status.grouping::before, .status.queued::before, .status.uploading::before { background:#f5a623; animation:pulse 1.4s var(--ease) infinite; }
.status.failed, .status.done_with_errors { color:var(--danger) !important; } .status.failed::before, .status.done_with_errors::before { background:var(--danger); }
@keyframes pulse { 50% { opacity:.35; } }
table.shoots { border-collapse:separate !important; border-spacing:0; }
.shoots th { font:500 12px var(--sans) !important; text-transform:none !important; letter-spacing:0 !important; color:var(--muted) !important; border-bottom:1px solid var(--line) !important; padding:10px 12px !important; }
.shoots td { padding:14px 12px !important; border-bottom:1px solid var(--line) !important; font-size:14px; }
.shoots tbody tr { transition:background var(--t) var(--ease); }
.shoots tbody tr:hover { background:#0f0f0f; }
.shoots td a:not(.btn) { color:#fff; text-decoration:none; font-weight:500; }
.shoots td a:not(.btn):hover { text-decoration:underline; }

/* ---------- progress (bar + ring) */
.progress { height:6px !important; background:#1a1a1a !important; border-radius:999px !important; border:0 !important; box-shadow:none !important; }
.progress .bar { background:#ededed !important; box-shadow:none !important; border-radius:999px; transition:width .5s var(--ease) !important; }
.progress .bar::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform:translateX(-100%); animation:shimmer 1.6s infinite; }
.complete .progress .bar::after { display:none; }
@keyframes shimmer { to { transform:translateX(100%); } }
.shootprog { background:#0a0a0a !important; border:1px solid var(--line) !important; border-radius:var(--r) !important; padding:16px !important; }
.ptxt { font-size:20px !important; font-weight:500 !important; letter-spacing:-.02em !important; color:#fff; }
.phase { font:500 12px var(--mono) !important; text-transform:none !important; letter-spacing:0 !important; color:var(--ink-2) !important; }

/* ---------- shoot header */
.card.head { position:sticky; top:72px; z-index:30; background:var(--glass) !important; backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  padding:16px 20px !important; }
.card.head h2 { font-size:20px; margin:4px 0 2px; }
.card.head a.muted { color:var(--ink-2); text-decoration:none; } .card.head a.muted:hover { color:#fff; }
.zipbox { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* ---------- photo-first carousel */
.card.carousel { padding:0 !important; overflow:hidden; background:#0a0a0a !important; }
.stage-wrap { position:relative; display:block !important; background:var(--photo); }
.main-img { aspect-ratio:3/2; max-height:calc(100vh - 220px); width:100%; background:var(--photo) !important; border:0 !important; border-radius:0 !important; display:flex; align-items:center; justify-content:center; }
.main-img img { width:100%; height:100%; object-fit:contain; animation:fadein .28s var(--ease); }
@keyframes fadein { from { opacity:0; transform:scale(.995); } to { opacity:1; transform:none; } }
.nav { position:absolute !important; top:50%; transform:translateY(-50%); z-index:5; width:40px !important; height:40px !important; border-radius:999px !important;
  background:rgba(0,0,0,.55) !important; color:#fff !important; border:1px solid rgba(255,255,255,.15) !important; backdrop-filter:blur(10px); font-size:22px !important; line-height:36px !important;
  opacity:0; transition:opacity var(--t) var(--ease), background var(--t) var(--ease); }
.nav.prev { left:16px; } .nav.next { right:16px; }
.stage-wrap:hover .nav, .nav:focus-visible { opacity:1; }
.nav:hover { background:rgba(0,0,0,.8) !important; }
.badge { top:16px !important; left:16px !important; border-radius:999px !important; background:rgba(0,0,0,.6) !important; backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15) !important; font:500 12px var(--sans) !important; letter-spacing:0 !important; text-transform:none !important; padding:4px 10px !important; box-shadow:none !important; }
/* floating toolbar */
.slidebar { position:relative; display:flex !important; flex-wrap:wrap; align-items:center; gap:12px 16px !important; padding:12px 16px !important; margin:0 !important;
  border-top:1px solid var(--line); background:rgba(10,10,10,.85); backdrop-filter:blur(16px); }
.slidebar .right { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-left:auto; }
.slidebar .left b { font-weight:600; letter-spacing:-.01em; }
.seg { display:inline-flex; padding:2px; gap:2px; border:1px solid var(--line-2) !important; border-radius:999px !important; background:#0a0a0a !important; overflow:visible !important; }
.seg button { height:28px; padding:0 12px !important; border:0 !important; border-radius:999px !important; background:transparent !important; color:var(--ink-2) !important;
  font:500 13px var(--sans) !important; cursor:pointer; transition:background var(--t) var(--ease), color var(--t) var(--ease); }
.seg button.on { background:#ededed !important; color:#0a0a0a !important; box-shadow:none !important; }
.variants { display:flex; gap:6px; flex-wrap:wrap; }
.variants button, .variants .chip, .chip { height:28px; border-radius:999px !important; border:1px solid var(--line-2) !important; background:transparent !important;
  color:var(--ink-2) !important; font:500 12px var(--sans) !important; padding:0 12px !important; transition:all var(--t) var(--ease); }
.variants .on, .chip.on { background:#fff !important; color:#000 !important; border-color:#fff !important; }
.thumbs { padding:12px 16px !important; gap:8px !important; border-top:1px solid var(--line); scrollbar-width:thin; }
.thumb { border-radius:10px !important; border:1px solid var(--line-2) !important; background:var(--photo) !important; overflow:hidden; transition:transform var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t); opacity:.7; }
.thumb:hover { opacity:1; transform:translateY(-2px); }
.thumb.on { opacity:1; border-color:#fff !important; box-shadow:0 0 0 1px #fff !important; }
.keys { padding:0 16px 12px; color:var(--muted) !important; font-size:12px !important; }
details.controls { padding:0 16px 16px !important; border-top:1px solid var(--line); }
details.controls summary { color:var(--ink-2) !important; font:500 13px var(--sans) !important; padding:12px 0 !important; }
.videobox { display:inline-flex; gap:8px; align-items:center; }
.videobox select { height:32px; }

/* skeleton loader (busy states, empty images) */
.busy { background:linear-gradient(100deg, #141414 30%, #1f1f1f 50%, #141414 70%) !important; background-size:300% 100% !important; animation:skeleton 1.4s linear infinite; }
.busy .spinner { width:20px !important; height:20px !important; border-width:2px !important; border-color:rgba(255,255,255,.15) !important; border-top-color:#fff !important; }
@keyframes skeleton { from { background-position:100% 0; } to { background-position:0 0; } }
.main-img img:not([src]), .main-img img[src=""] { visibility:hidden; }

/* ---------- modals -> side panel / bottom sheet */
.modal { background:rgba(0,0,0,.6) !important; backdrop-filter:blur(4px); animation:fade var(--t) var(--ease); }
@keyframes fade { from { opacity:0; } }
.modal-card { background:#0a0a0a !important; border:1px solid var(--line-2) !important; border-radius:var(--r-lg) !important; box-shadow:0 24px 64px rgba(0,0,0,.6) !important; color:var(--ink); }
.modal-ico { background:#111 !important; border:1px solid var(--line-2); color:#fff !important; box-shadow:none !important; }
#vibemodal { justify-content:flex-end !important; align-items:stretch !important; }
#vibemodal .vibe-card { width:min(560px, 100vw) !important; max-width:none !important; height:100vh; max-height:none !important; margin:0 !important; border-radius:0 !important;
  border-width:0 0 0 1px !important; padding:24px !important; overflow-y:auto; text-align:left; background:rgba(10,10,10,.92) !important; backdrop-filter:blur(20px) saturate(160%);
  animation:slidein .26s var(--ease); }
@keyframes slidein { from { transform:translateX(24px); opacity:0; } }
.vibe-head h3 { font-size:18px !important; letter-spacing:-.015em !important; }
.xbtn { width:32px; height:32px; border-radius:var(--r-sm); border:1px solid var(--line-2) !important; background:transparent !important; color:var(--ink) !important; }
.step { margin:24px 0 12px !important; font:500 13px var(--sans) !important; letter-spacing:0 !important; text-transform:none !important; color:#fff !important; }
.srow { gap:12px !important; padding:4px 2px 8px !important; scroll-snap-type:x mandatory; }
.card-pick { scroll-snap-align:start; border-radius:var(--r) !important; border:1px solid var(--line-2) !important; background:#111 !important; overflow:hidden;
  box-shadow:none !important; transition:transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease) !important; }
.card-pick:hover { transform:translateY(-3px); border-color:#555 !important; box-shadow:0 12px 24px rgba(0,0,0,.5) !important; }
.card-pick.on { border-color:#fff !important; box-shadow:0 0 0 1px #fff !important; }
.card-pick img { background:var(--photo); }
.card-pick span { font:500 12px var(--sans) !important; letter-spacing:0 !important; text-transform:none !important; color:var(--ink-2); padding:8px 10px 10px !important; text-align:left !important; }
.card-pick.on span { color:#fff; }
.sarrow { width:32px !important; height:32px !important; border-radius:999px !important; border:1px solid var(--line-2) !important; background:#0a0a0a !important; color:#fff !important; }
.pchip { height:32px; border-radius:999px !important; border:1px solid var(--line-2) !important; background:transparent !important; color:var(--ink-2) !important;
  font:500 13px var(--sans) !important; padding:0 12px 0 6px !important; display:inline-flex; align-items:center; gap:8px; transition:all var(--t) var(--ease); }
.pchip i { width:20px !important; height:20px !important; border-radius:999px !important; border:1px solid rgba(255,255,255,.15); }
.pchip[aria-pressed=true] { background:#fff !important; color:#000 !important; border-color:#fff !important; }
.vibe-foot { border-top:1px solid var(--line) !important; padding-top:16px !important; margin-top:24px !important; }

/* ---------- quick stage + login */
.qthumb { border-radius:8px !important; border-color:var(--line-2) !important; }
.login { margin:12vh auto !important; max-width:400px !important; padding:32px !important; background:rgba(10,10,10,.8) !important; border:1px solid var(--line-2) !important;
  border-radius:var(--r-lg) !important; backdrop-filter:blur(16px); box-shadow:0 24px 64px rgba(0,0,0,.6); }
.login h2 { font-size:24px; letter-spacing:-.03em; margin-bottom:4px; }
.login input { height:40px; } .login button { height:40px; border-radius:var(--r-sm) !important; background:#ededed !important; font:500 14px var(--sans) !important; transition:background var(--t); }
.login button:hover { background:#fff !important; }
.login .err { color:var(--danger) !important; }

/* ---------- mobile-first adjustments */
@media (max-width: 900px) {
  header.top { height:56px; padding:0 16px !important; }
  main { padding:24px 16px 64px !important; }
  .hero { padding:24px 0 24px; } .hero p { font-size:15px; }
  .entry-grid { grid-template-columns:1fr !important; gap:0 !important; }
  .card { padding:20px !important; border-radius:var(--r) !important; }
  .card.head { position:static; } .head { flex-direction:column; align-items:stretch !important; } .head-right { flex-direction:column; align-items:stretch !important; }
  .nav { opacity:1; width:36px !important; height:36px !important; }
  .slidebar .right { margin-left:0; width:100%; } .slidebar .right .btn { flex:1 1 auto; }
  #vibemodal { align-items:flex-end !important; }
  #vibemodal .vibe-card { width:100vw !important; height:88vh; border-width:1px 0 0 0 !important; border-radius:20px 20px 0 0 !important; animation:sheetup .28s var(--ease); }
  #vibemodal .vibe-card::before { content:""; display:block; width:36px; height:4px; border-radius:2px; background:#3a3a3a; margin:-8px auto 16px; }
  .row label, .row .btn.primary { width:100%; } .row input[type=text], .row input[type=email] { width:100%; min-width:0 !important; }
}
@keyframes sheetup { from { transform:translateY(32px); opacity:0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* ---------- fixes after first screenshot pass */
.card.head { position:relative !important; top:auto !important; }
.shootprog.compact { padding:10px 14px !important; min-width:260px; }
.shootprog.compact .ptxt { font-size:13px !important; font-family:var(--sans) !important; letter-spacing:0 !important; }
.shootprog.compact .psub { font-size:12px; }
.card.head .mono { font:12px var(--mono) !important; color:var(--muted); }
.zipbox label.chk { font-size:13px !important; color:var(--ink-2) !important; }
.card-pick { width:148px !important; }
#vibemodal { padding:0 !important; overflow:hidden; }
#vibemodal .vibe-card { box-sizing:border-box; }
.scroller { min-width:0; display:flex; align-items:center; gap:8px; }
.scroller .srow { min-width:0; flex:1; }
@media (max-width: 900px) {
  #vibemodal .vibe-card { width:100% !important; max-width:100% !important; padding:20px 16px !important; }
  .card-pick { width:120px !important; }
  .sarrow { display:none !important; }
  .shootprog.compact { min-width:0; }
}

/* ---------- guided start screen: one question at a time, centered, "magic" fade */
.start-stage { min-height:calc(100vh - 64px - 120px); display:grid; place-items:center; }
.start-q { width:100%; max-width:1040px; text-align:center; }
.start-q[hidden] { display:none; }
.start-q h1 { font-size:clamp(28px, 4.5vw, 44px); line-height:1.1; font-weight:600; letter-spacing:-.04em; color:#fff; margin:0 0 12px; outline:none; }
.start-q > p.muted { font-size:16px; color:var(--ink-2); margin:0 0 40px; }
#step2 h1 { margin-bottom:40px; }
.m-in { opacity:0; animation:magic-in 550ms cubic-bezier(.22,1,.36,1) forwards; animation-delay:var(--d, 0ms); }
@keyframes magic-in { from { opacity:0; filter:blur(10px); transform:translateY(12px); } to { opacity:1; filter:blur(0); transform:none; } }
.start-q.leaving { animation:magic-out 300ms cubic-bezier(.4,0,1,1) forwards; }
@keyframes magic-out { to { opacity:0; filter:blur(8px); transform:translateY(-8px); } }
.start-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; text-align:left; }
.start-grid.two { grid-template-columns:repeat(2, minmax(0,1fr)); max-width:720px; margin:0 auto; }
.start-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:200px; padding:24px; text-align:left;
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg); color:var(--ink); text-decoration:none; cursor:pointer; font:inherit;
  transition:transform var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.start-card:hover { transform:translateY(-3px); border-color:#555; background:#0f0f0f; box-shadow:0 16px 32px rgba(0,0,0,.5); }
.start-card:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.start-card b { margin-top:auto; font-size:20px; font-weight:600; letter-spacing:-.02em; color:#fff; }
.start-card .muted { font-size:14px; color:var(--ink-2); }
.start-ico { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-2); border-radius:12px; font-size:18px; color:#fff; background:#111; }
.start-last { display:none; position:absolute; top:24px; right:24px; height:22px; padding:0 10px; border-radius:999px; border:1px solid var(--line-2);
  font:500 12px var(--mono); color:#fff; align-items:center; }
.start-card.last { border-color:#fff; box-shadow:0 0 0 1px #fff; }
.start-card.last .start-last { display:inline-flex; }
.linkbtn { background:none; border:0; color:var(--ink-2); font:500 14px var(--sans); cursor:pointer; padding:4px 0; }
.linkbtn:hover { color:#fff; }
.start-skip { margin-top:40px; color:var(--muted); } .start-skip a { color:var(--ink-2); font-size:14px; } .start-skip a:hover { color:#fff; }
.flowbar { display:flex; align-items:center; gap:16px; margin:0 0 16px; font-size:14px; }
.flowbar a { color:var(--ink-2); text-decoration:none; } .flowbar a:hover { color:#fff; } .flowbar #flowlabel { color:#fff; font-weight:500; flex:1; }
body.flow-shoot .entry-grid, body.flow-stage .entry-grid, body.flow-twilight .entry-grid { grid-template-columns:1fr !important; max-width:820px; }
body[class*="flow-"] .hero { display:none; }
body[class*="flow-"] main { padding-top:32px; }
@media (max-width: 900px) {
  .start-stage { min-height:calc(100vh - 56px - 96px); }
  .start-q > p.muted { margin-bottom:24px; } #step2 h1 { margin-bottom:24px; }
  .start-grid, .start-grid.two { grid-template-columns:1fr; gap:12px; }
  .start-card { min-height:0; padding:16px 20px; flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:16px; }
  .start-card b { margin-top:0; font-size:17px; flex:1; }
  .start-card .muted { flex-basis:100%; padding-left:60px; margin-top:-8px; }
  .start-last { position:static; }
  .start-skip { margin-top:24px; }
}
@media (prefers-reduced-motion: reduce) { .m-in { opacity:1 !important; filter:none !important; transform:none !important; } }
#qvideo { display:inline-flex; width:auto; margin:0 0 16px; }
body[class*="flow-"] .entry-grid, body[class*="flow-"] .flowbar { margin-left:auto; margin-right:auto; max-width:820px; }
@media (max-width: 900px) { .start-card.last .start-last { display:none; } }

/* ---------- look picker */
.lookbtn .dot { width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#fff,#8f8f8f); }
#lookmodal .look-card { width:min(1040px, 96vw) !important; max-width:none !important; max-height:90vh; overflow:auto; text-align:left; padding:24px !important;
  background:rgba(10,10,10,.9) !important; backdrop-filter:blur(20px) saturate(160%); animation:magic-in .35s var(--ease); }
.look-head { position:sticky; top:-24px; z-index:2; display:flex; align-items:center; gap:16px; margin:-24px -24px 0; padding:20px 24px; background:rgba(10,10,10,.85);
  backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.look-head h3 { margin:0; flex:1; }
.look-group { margin:24px 0 12px; font:500 13px var(--sans); color:var(--ink-2); }
.xbadge { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; border:1px solid rgba(255,255,255,.35); color:#fff;
  font:500 12px var(--mono); background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); }
.look-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
.look-pick { display:flex; flex-direction:column; gap:6px; padding:8px 8px 14px; text-align:left; background:#0d0d0d; border:1px solid var(--line-2); border-radius:var(--r-lg);
  color:var(--ink); cursor:pointer; font:inherit; transition:transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.look-pick:hover { transform:translateY(-3px); border-color:#555; box-shadow:0 16px 32px rgba(0,0,0,.5); }
.look-pick:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.look-pick.on { border-color:#fff; box-shadow:0 0 0 1px #fff; }
.look-pick.excl { border-color:#3a3a3a; background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 60%), #0d0d0d; }
.look-img { position:relative; display:block; aspect-ratio:3/2; border-radius:10px; overflow:hidden; background:var(--photo); }
.look-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.look-pick:hover .look-img img { transform:scale(1.03); }
.look-def { position:absolute; right:8px; bottom:8px; height:22px; padding:0 10px; display:inline-flex; align-items:center; border-radius:999px; font:500 11px var(--sans);
  background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(8px); }
.look-check { position:absolute; right:8px; top:8px; width:24px; height:24px; border-radius:50%; display:none; align-items:center; justify-content:center;
  background:#fff; color:#000; font-size:13px; font-weight:700; }
.look-pick.on .look-check { display:flex; }
.look-name { display:flex; align-items:center; gap:8px; padding:4px 6px 0; }
.look-name b { font-size:15px; font-weight:600; letter-spacing:-.01em; }
.look-name i { font-style:normal; height:22px; padding:0 8px; display:inline-flex; align-items:center; border-radius:999px; border:1px solid var(--line-2); font:500 11px var(--sans); color:var(--ink-2); }
.look-desc { padding:0 6px; font-size:13px; color:var(--ink-2); line-height:1.4; }
@media (max-width: 900px) {
  #lookmodal { align-items:flex-end !important; padding:0 !important; }
  #lookmodal .look-card { width:100% !important; max-height:90vh; border-radius:20px 20px 0 0 !important; padding:16px !important; }
  .look-head { margin:-16px -16px 0; padding:16px; top:-16px; flex-wrap:wrap; }
  .look-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .look-desc { display:none; }
}