:root { --bg:#f4f5f7; --card:#fff; --ink:#1d2329; --muted:#6b7480; --line:#e3e6ea; --accent:#0f7b6c; --accent2:#e9f6f3; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; background:var(--bg); color:var(--ink); }
header.top { display:flex; align-items:center; gap:16px; padding:14px 28px; background:#14191e; color:#fff; }
.brand { color:#fff; text-decoration:none; font-weight:700; font-size:18px; }
.logo { color:#4dd6b8; }
.tag { color:#9aa4ae; font-size:13px; }
main { max-width:1400px; margin:24px auto; padding:0 24px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:20px; }
h2 { margin:0 0 12px; font-size:20px; }
.muted { color:var(--muted); } .small { font-size:13px; }
code { background:#f0f2f4; padding:1px 5px; border-radius:4px; font-size:12px; }
.drop { display:block; border:2px dashed #c9d0d6; border-radius:12px; padding:30px; text-align:center; cursor:pointer; background:#fafbfc; transition:.15s; }
.drop.over { border-color:var(--accent); background:var(--accent2); }
.drop input { display:none; }
.big { font-size:18px; font-weight:600; margin-bottom:4px; }
.row { display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; margin-top:16px; }
.row label { display:flex; flex-direction:column; font-size:13px; color:var(--muted); gap:4px; }
.row label.chk, label.chk { flex-direction:row; align-items:center; gap:6px; color:var(--ink); font-size:14px; }
input[type=text] { padding:8px 10px; border:1px solid var(--line); border-radius:8px; min-width:220px; font-size:14px; }
input[type=range] { accent-color: var(--accent); }
.btn { display:inline-block; padding:8px 14px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); text-decoration:none; cursor:pointer; font-size:14px; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.small { padding:5px 10px; font-size:13px; }
.btn.disabled { opacity:.4; pointer-events:none; }
.pill { display:inline-block; margin-top:10px; padding:3px 10px; border-radius:99px; background:var(--accent2); color:var(--accent); font-size:13px; }
.pill.src { margin:0; background:#eef1f4; color:#4b5560; }
.hidden { display:none !important; }
table.shoots { width:100%; border-collapse:collapse; }
.shoots th, .shoots td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); font-size:14px; }
.shoots th { color:var(--muted); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.status { font-size:12px; padding:2px 8px; border-radius:99px; background:#eef1f4; color:#4b5560; text-transform:capitalize; }
.status.done { background:#e3f5ec; color:#137a43; } .status.failed, .status.done_with_errors { background:#fde8e8; color:#b42318; }
.status.processing, .status.grouping, .status.queued { background:#fff4e0; color:#a15c00; }
.progress { position:relative; height:10px; background:#eef1f4; border-radius:99px; overflow:hidden; margin-top:10px; }
.progress.big { height:22px; width:320px; margin:0; }
.progress .bar { position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,#14a38b,#0f7b6c); transition:width .4s; }
.progress span { position:relative; font-size:12px; padding-left:10px; line-height:22px; color:#123; }
.head { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.head-right { display:flex; gap:14px; align-items:center; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(560px, 1fr)); gap:20px; }
.photo { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.ba { position:relative; aspect-ratio:3/2; background:#20262c; overflow:hidden; user-select:none; }
.ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.after-wrap { position:absolute; inset:0; }
.handle { position:absolute; top:0; bottom:0; width:2px; background:#fff; box-shadow:0 0 6px rgba(0,0,0,.5); transform:translateX(-1px); pointer-events:none; }
.handle span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; color:#333; font-size:10px; padding:6px 8px; border-radius:99px; white-space:nowrap; box-shadow:0 1px 6px rgba(0,0,0,.3); }
.ba-range { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
.lbl { position:absolute; top:10px; font-size:12px; color:#fff; background:rgba(0,0,0,.45); padding:3px 8px; border-radius:6px; pointer-events:none; }
.lbl.l { left:10px; } .lbl.r { right:10px; }
.busy { position:absolute; inset:0; background:rgba(20,25,30,.55); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; gap:10px; }
.spinner { width:34px; height:34px; border:3px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.meta { padding:12px 16px 4px; }
.title { display:flex; gap:10px; align-items:center; }
.controls { padding:4px 16px 8px; }
.controls summary { cursor:pointer; color:var(--accent); font-size:14px; padding:6px 0; }
.ctl { display:grid; grid-template-columns:150px 1fr; align-items:center; gap:10px; margin:6px 0; font-size:13px; }
.ctl output { color:var(--muted); margin-left:6px; font-variant-numeric:tabular-nums; }
.btns { display:flex; gap:10px; margin-top:10px; }
.actions { padding:6px 16px 16px; }
.err { color:#b42318; }

.pickers { display:flex; gap:10px; justify-content:center; margin-top:14px; }
.pickers input { display:none; }
.notice { margin-top:12px; padding:10px 14px; border-radius:8px; background:#fff4e0; color:#7a4500; font-size:14px; }
input[type=email] { padding:8px 10px; border:1px solid var(--line); border-radius:8px; min-width:220px; font-size:14px; }
.btn:disabled { opacity:.45; cursor:default; }
.shootprog { margin-top:18px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:#fbfcfd; }
.shootprog .ptxt { font-size:18px; font-weight:600; margin:2px 0 8px; }
.shootprog.compact { margin:0; padding:10px 14px; min-width:420px; }
.shootprog.compact .ptxt { font-size:15px; margin:0 0 6px; }
.progress.xl { height:16px; margin:0 0 6px; }
.modal { position:fixed; inset:0; background:rgba(15,20,25,.55); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal-card { background:#fff; border-radius:16px; padding:30px 34px; width:min(560px, 92vw); box-shadow:0 20px 60px rgba(0,0,0,.3); text-align:center; }
.modal-card h3 { margin:6px 0 6px; font-size:22px; }
.modal-ico { width:54px; height:54px; margin:0 auto; border-radius:50%; background:#e3f5ec; color:#137a43; font-size:30px; line-height:54px; }
.mbtns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:18px 0 8px; }
.big-btn { padding:12px 22px; font-size:16px; font-weight:600; }
.mfail { text-align:left; background:#fde8e8; color:#7a1a12; border-radius:8px; padding:10px 14px; font-size:13px; max-height:180px; overflow:auto; }
.mfail ul { margin:6px 0 0; padding-left:18px; }
/* carousel */
.zipbox { display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.carousel { padding:16px; }
.stage-wrap { display:flex; align-items:center; gap:10px; }
.main-img { position:relative; flex:1; background:#14191e; border-radius:10px; overflow:hidden; aspect-ratio:3/2; max-height:68vh; display:flex; align-items:center; justify-content:center; }
.main-img img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.nav { width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:28px; line-height:40px; cursor:pointer; color:#333; flex:none; }
.nav:hover { background:var(--accent2); }
.badge { position:absolute; top:12px; left:12px; background:rgba(0,0,0,.6); color:#fff; padding:5px 10px; border-radius:6px; font-size:13px; }
.badge.staged { background:#6b3fd1; }
.slidebar { display:flex; align-items:center; gap:16px; margin:12px 4px 6px; flex-wrap:wrap; }
.slidebar .left { flex:1 1 280px; min-width:0; }
.slidebar .right { display:flex; gap:8px; align-items:center; }
.variants { display:flex; gap:6px; flex-wrap:wrap; }
.chip { border:1px solid var(--line); background:#fff; border-radius:99px; padding:4px 11px; font-size:13px; cursor:pointer; }
.chip.on { border-color:var(--accent); background:var(--accent2); color:var(--accent); }
.chip.staged { border-color:#c9b8f2; color:#5b34b8; } .chip.staged.on { background:#efe9fd; border-color:#6b3fd1; }
.chip.pending { color:#a15c00; border-style:dashed; } .chip.failed { color:#b42318; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg button { border:0; background:#fff; padding:7px 12px; cursor:pointer; font-size:14px; }
.seg button.on { background:#14191e; color:#fff; }
.thumbs { display:flex; gap:8px; overflow-x:auto; padding:8px 2px 6px; scroll-snap-type:x proximity; }
.thumb { position:relative; flex:none; width:132px; height:88px; border:2px solid transparent; border-radius:8px; padding:0; overflow:hidden; background:#20262c; cursor:pointer; scroll-snap-align:center; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent2); }
.thumb.failed { border-color:#e5a3a3; }
.thumb .n { position:absolute; left:4px; bottom:3px; font-size:11px; color:#fff; background:rgba(0,0,0,.55); padding:0 5px; border-radius:4px; }
.thumb .st { position:absolute; right:5px; top:3px; font-size:13px; color:#fff; text-shadow:0 0 3px #000; }
.keys { margin:2px 4px 8px; }
/* vibe picker */
.vibe-card { width:min(680px, 94vw); text-align:left; }
.vibes { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:14px 0; }
.vibe { position:relative; display:flex; align-items:center; gap:10px; border:2px solid var(--line); background:#fff; border-radius:10px; padding:12px; font-size:15px; font-weight:600; cursor:pointer; text-align:left; }
.vibe.on { border-color:#6b3fd1; background:#f5f1fe; }
.vibe em { position:absolute; top:-9px; right:8px; font-style:normal; font-size:11px; background:#6b3fd1; color:#fff; padding:1px 7px; border-radius:99px; }
.sw { width:28px; height:28px; border-radius:6px; flex:none; }
.sw-boho_chic { background:linear-gradient(135deg,#be6e46,#d9b48f 50%,#8a9a5b); }
.sw-modern { background:linear-gradient(135deg,#222,#9a9a9a 50%,#eee); }
.sw-scandinavian { background:linear-gradient(135deg,#f3efe7,#d8c7a9 50%,#b9c0c4); }
.sw-farmhouse { background:linear-gradient(135deg,#8c6e50,#efe8dc 50%,#2b2b2b); }
.sw-coastal { background:linear-gradient(135deg,#f2ead8,#9cc3d8 50%,#3d6f8f); }
.sw-mid_century { background:linear-gradient(135deg,#7a4b2a,#d9a32e 50%,#2b7c7a); }
.vibe-row { margin-top:4px; }
.vibe-row select { padding:7px; border-radius:8px; border:1px solid var(--line); }
.step { font-weight:600; font-size:14px; margin:14px 0 8px; display:flex; align-items:center; gap:8px; }
.stepn { width:22px; height:22px; border-radius:50%; background:#6b3fd1; color:#fff; font-size:12px; display:inline-flex; align-items:center; justify-content:center; }
.roomchips { display:flex; flex-wrap:wrap; gap:7px; }
.rchip { border:1.5px solid var(--line); background:#fff; border-radius:99px; padding:6px 13px; font-size:14px; cursor:pointer; }
.rchip:hover { border-color:#c9b8f2; }
.rchip.on { border-color:#6b3fd1; background:#f5f1fe; color:#4b2a9c; font-weight:600; }
.vibes { margin-top:0; }
.vibe-row { display:flex; align-items:flex-end; gap:16px; }

/* =====================================================================================
   AreaHDR dark theme: near-black, faint grid, one cyan accent (+ warm amber for staging).
   Photos always sit on neutral grey (#262626 / #1c1c1c), never tinted.
   ===================================================================================== */
:root { --bg:#0e0e0f; --card:#161718; --card2:#1b1c1e; --ink:#f1f1f1; --muted:#a3a6aa; --line:#2a2b2d;
        --accent:#ffffff; --accent2:rgba(255,255,255,.12); --glow:0 0 0 1px rgba(255,255,255,.35), 0 0 18px rgba(255,255,255,.25);
        --warm:#d6dbe0; --warm2:rgba(214,219,224,.13); --danger:#ff6b6b; --ok:#e8e8e8;
        --mono:"JetBrains Mono","SFMono-Regular","Cascadia Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace; --photo:#262626; }
html { background:var(--bg); }
body { color:var(--ink);
  background-color:var(--bg);
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
                   radial-gradient(1200px 600px at 70% -10%, rgba(255,255,255,.08), transparent 60%);
  background-size:40px 40px, 40px 40px, auto; background-attachment:fixed; }
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:100;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px); }
h2, h3, .brand, .ptxt, .phase, .mono, .stepn, .step, .thumb .n, .badge, .status, .keys, #filecount, table.shoots th { font-family:var(--mono); }
h2 { letter-spacing:.03em; text-transform:none; }
a { color:var(--accent); }
header.top { background:rgba(14,14,15,.85); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.15); backdrop-filter:blur(6px); }
.brand { color:var(--ink); letter-spacing:.05em; } .brand .hdr, .logo { color:var(--accent); text-shadow:0 0 12px rgba(255,255,255,.6); }
.tag { color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.04em; }
.card { background:linear-gradient(180deg, var(--card2), var(--card)); border-color:var(--line); box-shadow:0 0 0 1px rgba(255,255,255,.015) inset; }
code { background:#202123; color:#d6d9dc; }
.drop { background:rgba(255,255,255,.025); border-color:#3d3e41; }
.drop:hover, .drop.over { border-color:var(--accent); background:var(--accent2); box-shadow:var(--glow); }
.drop .big { font-family:var(--mono); letter-spacing:.02em; }
input[type=text], input[type=email], select, textarea { background:#111213; color:var(--ink); border:1px solid #38393c; border-radius:8px; padding:7px 9px; }
input:focus, select:focus, .btn:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
input[type=range] { accent-color:var(--accent); } input[type=checkbox] { accent-color:var(--accent); }
.btn { background:#1c1d1f; color:var(--ink); border-color:#38393c; }
.btn:hover { border-color:var(--accent); box-shadow:var(--glow); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#0b0b0b; font-weight:700; box-shadow:0 0 16px rgba(255,255,255,.35); }
.btn.primary:hover { background:#ffffff; }
.btn.warm { background:var(--warm); border-color:var(--warm); color:#0b0b0b; font-weight:700; box-shadow:0 0 16px rgba(214,219,224,.35); }
.btn.warm:hover { background:#ffffff; box-shadow:0 0 0 1px rgba(214,219,224,.5), 0 0 22px rgba(214,219,224,.35); }
.btn:disabled, .btn.disabled { opacity:.45; box-shadow:none; cursor:not-allowed; }
.pill { background:var(--accent2); color:var(--accent); } .pill.src { background:#202123; color:var(--muted); }
.status { background:#202123; color:var(--muted); letter-spacing:.03em; }
.status.done { background:rgba(255,255,255,.12); color:var(--ok); }
.status.failed, .status.done_with_errors { background:rgba(255,107,107,.12); color:var(--danger); }
.status.processing, .status.grouping, .status.queued, .status.uploading { background:var(--accent2); color:var(--accent); }
table.shoots td, table.shoots th { border-color:var(--line) !important; } table.shoots th { color:var(--muted); font-size:12px; font-weight:500; }
.notice { background:var(--warm2); color:#e6e6e6; border:1px solid rgba(214,219,224,.3); }
/* progress: glowing animated bar */
.shootprog { background:#121314; border-color:#2c2d30; }
.shootprog .ptxt { font-size:17px; color:var(--ink); letter-spacing:.01em; }
.shootprog .phase { color:var(--accent); letter-spacing:.08em; text-transform:uppercase; font-size:11px; }
.progress { background:#232426; height:12px; box-shadow:inset 0 0 0 1px #2c2d30; }
.progress .bar { background:linear-gradient(90deg, #7d8287, var(--accent) 70%, #ffffff); box-shadow:0 0 12px rgba(255,255,255,.7), 0 0 28px rgba(255,255,255,.35); border-radius:99px; }
.shootprog.active .progress .bar::after { content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.0) 0 14px, rgba(255,255,255,.22) 14px 22px, rgba(255,255,255,0) 22px 36px);
  background-size:200% 100%; animation:flow 1.1s linear infinite; }
.shootprog.active .progress .bar { animation:pulse 2.2s ease-in-out infinite; }
.shootprog.complete .progress .bar { background:linear-gradient(90deg, #8d9297, var(--ok)); box-shadow:0 0 14px rgba(255,255,255,.6); }
@keyframes flow { from { background-position:0 0; } to { background-position:-72px 0; } }
@keyframes pulse { 50% { box-shadow:0 0 18px rgba(255,255,255,.95), 0 0 40px rgba(255,255,255,.45); } }
/* modals */
.modal { background:rgba(0,0,0,.72); backdrop-filter:blur(3px); }
.modal-card { background:linear-gradient(180deg,#1c1d1f,#141516); border:1px solid #36373a; color:var(--ink); box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(255,255,255,.08); }
.modal-ico { background:var(--accent2); color:var(--accent); box-shadow:var(--glow); }
.mfail { background:rgba(255,107,107,.08); color:#f0c9c9; border:1px solid rgba(255,107,107,.25); }
/* carousel: photos on neutral grey only */
.main-img, .thumb, .ba, .photo .ba { background:var(--photo) !important; }
.main-img { box-shadow:0 0 0 1px #2c2c2c; }
.busy { background:rgba(0,0,0,.55); }
.nav { background:#1c1d1f; color:var(--ink); border-color:#38393c; }
.nav:hover { background:#1c1d1f; border-color:var(--accent); box-shadow:var(--glow); color:var(--accent); }
.badge { background:rgba(0,0,0,.72); border:1px solid #333; }
.badge.staged { background:rgba(0,0,0,.72); color:var(--warm); border-color:var(--warm); box-shadow:0 0 12px rgba(214,219,224,.35); }
.chip { background:#1c1d1f; color:var(--ink); border-color:#38393c; }
.chip.on { background:var(--accent2); color:var(--accent); border-color:var(--accent); box-shadow:var(--glow); }
.chip.staged { color:var(--warm); border-color:rgba(214,219,224,.45); }
.chip.staged.on { background:var(--warm2); border-color:var(--warm); box-shadow:0 0 0 1px rgba(214,219,224,.4), 0 0 16px rgba(214,219,224,.25); }
.chip.pending { color:var(--warm); } .chip.failed { color:var(--danger); }
.seg { border-color:#38393c; } .seg button { background:#1c1d1f; color:var(--muted); }
.seg button.on { background:var(--accent); color:#0b0b0b; font-weight:700; }
.thumb { border-color:#2a2b2d; } .thumb.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 14px rgba(255,255,255,.45); }
.thumb.failed { border-color:var(--danger); }
.thumb .st { color:var(--warm); }
details.controls summary { color:var(--muted); font-family:var(--mono); font-size:13px; }
/* staging picker (warm secondary) */
.step { color:var(--ink); letter-spacing:.06em; text-transform:uppercase; font-size:12px; }
.stepn { background:var(--warm); color:#0b0b0b; box-shadow:0 0 10px rgba(214,219,224,.5); }
.rchip { background:#1c1d1f; color:var(--ink); border-color:#38393c; }
.rchip:hover { border-color:var(--warm); }
.rchip.on { background:var(--warm2); color:var(--warm); border-color:var(--warm); box-shadow:0 0 0 1px rgba(214,219,224,.35), 0 0 14px rgba(214,219,224,.25); }
.vibe { background:#1c1d1f; color:var(--ink); border-color:#38393c; }
.vibe:hover { border-color:var(--warm); }
.vibe.on { background:var(--warm2); border-color:var(--warm); color:#f4f4f4; box-shadow:0 0 16px rgba(214,219,224,.25); }
.vibe em { background:var(--warm); color:#0b0b0b; font-weight:700; }
.muted { color:var(--muted); }
/* staging picker: scrolling card rows (warm secondary accent) */
.vibe-card { width:min(880px, 95vw); max-height:92vh; overflow:auto; text-align:left; padding:26px 28px; }
.vibe-head { display:flex; align-items:center; justify-content:space-between; }
.vibe-head h3 { margin:0; }
.xbtn { background:none; border:0; color:var(--muted); font-size:26px; cursor:pointer; line-height:1; }
.xbtn:hover { color:var(--ink); }
.step { margin:18px 0 8px; color:var(--muted); }
.scroller { position:relative; display:flex; align-items:center; gap:8px; }
.srow { display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity; padding:6px 4px 8px; flex:1; scrollbar-width:thin; scrollbar-color:#38393c transparent; }
.sarrow { flex:none; width:34px; height:34px; border-radius:50%; border:1px solid #38393c; background:#1c1d1f; color:var(--ink); font-size:20px; cursor:pointer; }
.sarrow:hover { border-color:var(--warm); color:var(--warm); box-shadow:0 0 12px rgba(214,219,224,.3); }
.card-pick { flex:none; width:150px; padding:0; border:1.5px solid #38393c; border-radius:10px; background:#151617; overflow:hidden; cursor:pointer; scroll-snap-align:start; color:var(--muted); transition:border-color .15s, box-shadow .15s, transform .15s; }
.card-pick img { display:block; width:100%; height:96px; object-fit:cover; background:var(--photo); }
.card-pick span { display:block; padding:7px 6px 8px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-pick:hover { border-color:rgba(214,219,224,.6); transform:translateY(-1px); }
.card-pick.on { border-color:var(--warm); color:var(--warm); box-shadow:0 0 0 1px var(--warm), 0 0 18px rgba(214,219,224,.45); }
.pchip { flex:none; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1.5px solid #38393c; border-radius:8px; background:#151617; color:var(--muted); font-size:13px; cursor:pointer; white-space:nowrap; }
.pchip i { width:16px; height:16px; border-radius:4px; border:1px solid rgba(255,255,255,.25); }
.pchip:hover { border-color:rgba(214,219,224,.6); }
.pchip.on { border-color:var(--warm); color:var(--warm); box-shadow:0 0 0 1px var(--warm), 0 0 14px rgba(214,219,224,.4); }
.vibe-foot { display:flex; align-items:center; gap:16px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(214,219,224,.35); }
.vibe-foot label { display:flex; align-items:center; gap:8px; color:var(--muted); }
.deploy { display:flex; width:100%; justify-content:center; align-items:center; gap:12px; margin-top:12px; padding:16px; font-family:var(--mono); font-size:17px; letter-spacing:.1em; text-transform:uppercase; border-radius:10px; }
.deploy .ico { font-size:20px; }

/* =====================================================================================
   AREA CREATIVE brand: monochrome (white type on charcoal / concrete), restrained white glow,
   Lexend Exa (wide geometric, close to the wordmark) for headings & stats, Inter for body.
   Fonts are self-hosted (SIL OFL). Concrete texture is a darkened crop of the brand photo.
   ===================================================================================== */
@font-face { font-family:"Lexend Exa"; src:url("/static/fonts/LexendExa.ttf") format("truetype"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/static/fonts/Inter.ttf") format("truetype"); font-weight:100 900; font-display:swap; }
:root { --bg:#0e0e0f; --card:rgba(24,24,25,.86); --card2:rgba(30,30,32,.88); --ink:#f1f1f1; --muted:#a3a6aa; --line:#2e2f31;
        --accent:#ffffff; --accent2:rgba(255,255,255,.08); --glow:0 0 0 1px rgba(255,255,255,.45), 0 0 18px rgba(255,255,255,.14);
        --warm:#d6dbe0; --warm2:rgba(214,219,224,.08); --danger:#e08a8a; --ok:#e8e8e8;
        --mono:"Lexend Exa","Inter",-apple-system,"Segoe UI",sans-serif; --photo:#262626; }
body { font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background-color:var(--bg);
  background-image:linear-gradient(180deg, rgba(14,14,15,.35), rgba(14,14,15,.9) 70%), url("/static/brand/concrete.jpg");
  background-size:cover, cover; background-position:center top; background-attachment:fixed; }
body::after { background:none; }
h2, h3 { font-family:var(--mono); font-weight:500; letter-spacing:.06em; }
.ptxt, .stepn, .step, .badge, .status, table.shoots th, .card-pick span, .phase { font-family:var(--mono); }
.mono, .keys, #filecount, .thumb .n, #pickedsum { font-family:"Inter",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.ptxt { font-variant-numeric:tabular-nums; font-weight:400; letter-spacing:.03em; }
a { color:#e6e6e6; }
/* header: AREA CREATIVE logo + AreaHDR product name */
header.top { background:rgba(12,12,13,.78); border-bottom:1px solid #2a2b2d; box-shadow:none; padding:12px 28px; }
.brand { display:flex; align-items:center; gap:16px; color:#fff; text-decoration:none; }
.brand .logo-img { height:34px; width:auto; display:block; }
.brand .sep { width:1px; height:30px; background:#4a4b4e; }
.brand .product { font-family:var(--mono); font-weight:500; font-size:16px; letter-spacing:.14em; color:#fff; text-transform:none; text-shadow:0 0 14px rgba(255,255,255,.18); }
.brand .product b { font-weight:300; color:#cfd2d5; }
.tag { font-family:"Inter",sans-serif; letter-spacing:.06em; color:#8d9094; font-size:12px; text-transform:uppercase; }
.card { backdrop-filter:blur(2px); border-color:#2a2b2d; box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 40px rgba(0,0,0,.35); }
code { background:#1f2022; color:#d6d9dc; }
.drop { border-color:#47484b; background:rgba(255,255,255,.02); }
.drop .big { font-family:var(--mono); font-weight:400; letter-spacing:.05em; }
/* buttons: primary = solid white, staging = outlined white (restrained glow) */
.btn { border-radius:6px; }
.btn.primary { background:#f4f4f4; border-color:#f4f4f4; color:#0b0b0b; box-shadow:0 0 18px rgba(255,255,255,.12); }
.btn.primary:hover { background:#fff; box-shadow:0 0 22px rgba(255,255,255,.25); }
.btn.warm { background:transparent; border:1px solid #d9dcdf; color:#f4f4f4; font-weight:600; box-shadow:0 0 14px rgba(255,255,255,.06); }
.btn.warm:hover { background:rgba(255,255,255,.06); box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 0 20px rgba(255,255,255,.16); }
.deploy { font-family:var(--mono); font-weight:500; letter-spacing:.14em; border-radius:6px; }
/* progress: monochrome glow, animated sheen while active */
.progress { background:#232426; box-shadow:inset 0 0 0 1px #313235; }
.progress .bar { background:linear-gradient(90deg, #6f7378, #d9dcdf 70%, #ffffff); box-shadow:0 0 10px rgba(255,255,255,.35), 0 0 24px rgba(255,255,255,.12); }
@keyframes pulse { 50% { box-shadow:0 0 14px rgba(255,255,255,.55), 0 0 32px rgba(255,255,255,.2); } }
.shootprog.complete .progress .bar { background:linear-gradient(90deg, #bfc3c7, #ffffff); box-shadow:0 0 14px rgba(255,255,255,.45); }
.shootprog .phase { color:#bfc3c7; letter-spacing:.14em; }
/* status pills: monochrome; errors keep a muted red so they stay recognisable */
.status { background:#232426; color:#bfc3c7; }
.status.done { background:rgba(255,255,255,.1); color:#fff; }
.status.processing, .status.grouping, .status.queued, .status.uploading { background:rgba(255,255,255,.06); color:#d6d9dc; }
.status.failed, .status.done_with_errors { background:rgba(224,138,138,.12); color:var(--danger); }
.mfail { background:rgba(224,138,138,.07); color:#f0c9c9; border-color:rgba(224,138,138,.25); }
.modal-card { background:linear-gradient(180deg, rgba(30,30,32,.97), rgba(20,20,21,.97)); border-color:#3a3b3e; }
.modal-ico { background:rgba(255,255,255,.08); color:#fff; }
/* carousel & picker accents (photos stay on neutral grey) */
.badge.staged { color:#fff; border-color:#d9dcdf; box-shadow:0 0 12px rgba(255,255,255,.18); }
.chip.staged { color:#e6e6e6; border-color:#5a5b5e; } .chip.pending { color:#bfc3c7; }
.stepn { background:#fff; color:#0b0b0b; box-shadow:none; }
.card-pick, .pchip { border-radius:6px; }
.card-pick.on, .pchip.on, .rchip.on, .vibe.on { color:#fff; border-color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.75), 0 0 18px rgba(255,255,255,.2); background:rgba(255,255,255,.06); }
.card-pick:hover, .pchip:hover, .sarrow:hover { border-color:#bfc3c7; color:#fff; box-shadow:0 0 10px rgba(255,255,255,.12); }
.vibe-foot { border-top-color:#3a3b3e; }
.thumb.on { border-color:#fff; box-shadow:0 0 0 1px #fff, 0 0 14px rgba(255,255,255,.3); }
.seg button.on { background:#f4f4f4; color:#0b0b0b; }
.thumb .st { color:#fff; }

.videobox { display:inline-flex; gap:6px; align-items:center; }
.videobox select { padding:7px; border-radius:8px; border:1px solid var(--line); background:#14191e; color:#e8f6ff; box-shadow:0 0 8px rgba(80,200,255,.25); }

/* ---------- Quick stage entry point (home) */
.entry-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:20px; align-items:stretch; }
.entry-grid > .card { margin-bottom:20px; }
.quick { position:relative; overflow:hidden; display:flex; flex-direction:column; border-color:rgba(255,255,255,.22);
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 55%), var(--card); box-shadow:0 0 24px rgba(255,255,255,.06); }
.quick::before { content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); }
.quick-kicker { font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.quick-drop { flex:1; display:flex; align-items:center; justify-content:center; min-height:180px; }
.quick-icon { font-size:28px; margin-bottom:6px; text-shadow:0 0 14px rgba(255,255,255,.6); }
.quick-drop .btn { margin-top:12px; }
.qthumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.qthumb { width:64px; height:48px; border-radius:6px; overflow:hidden; border:1px solid var(--line); background:var(--photo); display:flex; align-items:center; justify-content:center; font:11px var(--mono); color:var(--muted); }
.qthumb img { width:100%; height:100%; object-fit:cover; }
.quick-row { margin-top:12px; }
.quick-row label { flex:1; } .quick-row input[type=text] { min-width:0; width:100%; }
#qstatus { margin-top:10px; }
@media (max-width: 900px) {
  .entry-grid { grid-template-columns:1fr; gap:0; }
  main { padding:0 12px; margin:14px auto; }
  header.top { padding:12px 14px; flex-wrap:wrap; } header.top .tag { display:none; }
  .quick-drop { min-height:140px; }
  .quick-row .btn.primary { width:100%; padding:12px; }
  table.shoots { display:block; overflow-x:auto; }
}