/* ═══════════════════════════════════════════════════════════════════════════
   LotLifter Lite — design system (Phase 3, 2026-09-01)

   TOKENS (the complete set — everything visual derives from these):
     --bg        #f6f4ef   app background (warm paper)
     --surface   #ffffff   cards / sheets
     --ink       #1d1b17   primary text
     --muted     #837c6e   secondary text
     --line      #e7e2d7   hairlines / borders
     --brand     #304878   LotLifter blue, sampled from logo (headers, primary buttons)
     --accent    #e8842c   LotLifter orange (THE action color — camera, publish)
     --ok        #1e7d43   success
     --warn      #a8620a   attention
     --danger    #bb2424   errors
     --r-lg 20px  --r-md 14px  --r-sm 10px      radii
     --sp 4px base spacing unit (multiples used throughout)
     touch targets >= 44px; bottom-nav center action 62px
   One polished light theme (ruling §26): dark mode deferred, contrast AA.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg:#f6f4ef; --surface:#ffffff; --ink:#1d1b17; --muted:#837c6e;
  --line:#e7e2d7; --brand:#304878; --brand-2:#486090; --accent:#e8842c;
  --accent-2:#f9ede0; --ok:#1e7d43; --ok-2:#e7f4ec; --warn:#a8620a;
  --warn-2:#fdf3e3; --danger:#bb2424; --danger-2:#fdecec;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body { background:var(--bg); color:var(--ink); font-size:16px; line-height:1.45;
  font-family:-apple-system,'SF Pro Text','Segoe UI',Inter,Roboto,system-ui,sans-serif;
  overscroll-behavior-y:none; }
button { font:inherit; }
img { display:block; }

#app { display:flex; flex-direction:column; min-height:100dvh; }

/* ── header ── */
#topbar { position:sticky; top:0; z-index:30; background:var(--brand); color:#fff;
  padding:calc(env(safe-area-inset-top) + 14px) 18px 13px;
  display:flex; align-items:center; gap:10px; }
#topbar .back { background:none; border:none; color:#fff; font-size:24px;
  line-height:1; padding:4px 10px 4px 0; margin-left:-6px; cursor:pointer;
  min-width:44px; min-height:32px; text-align:left; display:none; }
#topTitle { font-weight:800; font-size:18px; letter-spacing:-.01em; flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#topRight { font-size:12px; font-weight:600; opacity:.8; }

#view { flex:1; padding:16px 16px calc(110px + env(safe-area-inset-bottom));
  width:100%; max-width:640px; margin:0 auto; }

/* ── bottom navigation: two destinations · CAMERA action · one destination ── */
#tabs { position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex;
  align-items:flex-end; justify-content:space-around; background:var(--surface);
  border-top:1px solid var(--line);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom)); }
#tabs button { flex:1; background:none; border:none; color:var(--muted);
  font-size:11px; font-weight:700; display:flex; flex-direction:column;
  align-items:center; gap:3px; padding:4px 0 2px; cursor:pointer; min-height:48px; }
#tabs button svg { width:24px; height:24px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#tabs button.on { color:var(--brand); }
#tabs button.cam { flex:0 0 88px; margin-top:-26px; }
#tabs button.cam .camring { width:62px; height:62px; border-radius:50%;
  background:var(--accent); color:#fff; display:flex; align-items:center;
  justify-content:center; box-shadow:0 6px 16px rgba(232,132,44,.4);
  border:4px solid var(--bg); }
#tabs button.cam .camring svg { width:28px; height:28px; }
#tabs button.cam span { color:var(--accent); }

/* ── typography helpers ── */
h2 { font-size:21px; font-weight:800; letter-spacing:-.02em; margin:4px 2px 14px; }
.sec-label { font-size:12px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin:20px 4px 8px; }
.muted { color:var(--muted); font-size:13px; }

/* ── cards ── */
.card { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:16px; margin-bottom:12px; }
.card.tight { padding:0; overflow:hidden; }

/* ── inventory grid (Drafts / Live) ── */
.inv-head { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.inv-head input[type=search] { flex:1; padding:12px 15px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--surface); font:inherit;
  font-size:15px; min-height:44px; }
.inv-count { font-size:13px; color:var(--muted); font-weight:700; white-space:nowrap; }
.inv-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.inv-card { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; cursor:pointer; }
.inv-card .ph { aspect-ratio:1; background:#efece4; position:relative; }
.inv-card .ph img { width:100%; height:100%; object-fit:cover; }
.inv-card .ph .noimg { position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; color:var(--muted); font-size:12px; }
.inv-card .meta { padding:10px 12px 12px; }
.inv-card .t { font-size:13.5px; font-weight:700; line-height:1.3; height:2.6em;
  overflow:hidden; }
.inv-card .p { font-size:15px; font-weight:800; margin-top:5px; }
.inv-card .st { margin-top:6px; }

/* ── status pills ── */
.pill { display:inline-block; font-size:11px; font-weight:800; padding:3px 10px;
  border-radius:999px; }
.pill.ok { background:var(--ok-2); color:var(--ok); }
.pill.warn { background:var(--warn-2); color:var(--warn); }
.pill.err { background:var(--danger-2); color:var(--danger); }
.pill.live { background:var(--ok-2); color:var(--ok); }
.pill.processing { background:#e4edff; color:#1c4fd6; }
.pill.review { background:#2f6fed; color:#fff; }
.pill.dim { background:var(--bg); color:var(--muted); }
.pill.sku { background:var(--bg); color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; }

/* ── listing summary ── */
.hero-wrap { border-radius:var(--r-lg); overflow:hidden; background:#efece4;
  margin-bottom:10px; position:relative; }
.hero-scroll { display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; }
.hero-scroll::-webkit-scrollbar { display:none; }
.hero-scroll img { width:100%; flex:0 0 100%; aspect-ratio:1; object-fit:cover;
  scroll-snap-align:center; }
.hero-dots { position:absolute; bottom:10px; left:0; right:0; display:flex;
  justify-content:center; gap:5px; }
.hero-dots i { width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.55); }
.hero-dots i.on { background:#fff; }
.sum-title { font-size:19px; font-weight:800; letter-spacing:-.01em;
  margin:4px 2px 2px; line-height:1.3; }
.sum-price { font-size:22px; font-weight:900; margin:2px 2px 10px; }
.facts { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.fact { background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:6px 13px; font-size:13px; font-weight:600; }
.fact b { font-weight:800; }

/* ── row list (settings-style rows) ── */
.rowlist { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:12px; }
.rl { display:flex; align-items:center; gap:12px; padding:15px 16px;
  border-bottom:1px solid var(--line); min-height:52px; }
.rl:last-child { border-bottom:none; }
.rl .k { font-size:12px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; flex:0 0 92px; }
.rl .v { flex:1; font-size:15px; font-weight:600; min-width:0;
  word-break:break-word; }
.rl .v.empty { color:var(--muted); font-weight:500; }
.rl.tap { cursor:pointer; }
.rl.tap:active { background:var(--bg); }
.rl .chev { color:var(--muted); font-size:18px; }
.rl.coming { opacity:.5; }

/* ── inputs ── */
label.f { display:block; font-size:12px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; margin:14px 2px 6px; }
input[type=text], input[type=number], input[type=email], input[type=password],
select, textarea { width:100%; padding:13px 15px; border:1.5px solid var(--line);
  border-radius:var(--r-md); background:var(--surface); font:inherit;
  color:var(--ink); min-height:48px; }
textarea { min-height:120px; resize:vertical; }
/* type=search was outside the input rule -> browser default ~13px -> iOS zooms on focus */
input[type=search] { font-size:16px; font-family:inherit; }
/* ── full-screen category picker ── */
.catpanel { position:fixed; inset:0; z-index:60; background:var(--bg); display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); overflow:hidden; max-width:100vw; }
.catpanel .hd { display:flex; align-items:center; gap:6px; padding:6px 8px; background:var(--brand); color:#fff; min-height:52px; }
.catpanel .hd .ttl { flex:1; text-align:center; font-weight:800; font-size:16px; }
.catpanel .hb { background:none; border:0; color:#fff; font:inherit; font-size:16px; font-weight:700; padding:10px 12px; min-width:64px; min-height:44px; cursor:pointer; }
.catpanel .hb:disabled { opacity:.35; cursor:default; }
.catpanel .sub { padding:10px 16px 0; font-size:12px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.05em; word-break:break-word; }
.catpanel .srch { padding:8px 12px; }
.catpanel .srch input { width:100%; box-sizing:border-box; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface); min-height:48px; }
.catpanel .body { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 12px 24px; overscroll-behavior:contain; }
.catrow { width:100%; text-align:left; background:var(--surface); border:0; border-bottom:1px solid var(--line); font:inherit; color:var(--ink); cursor:pointer; }
.catrow:last-child { border-bottom:none; }
.catrow .v { font-size:16px; }
.catrow.cur { background:rgba(47,111,237,.08); }
.catrow .pick { color:var(--brand); font-weight:800; font-size:13px; flex:0 0 auto; }
.catrow.off { opacity:.55; cursor:default; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--brand-2);
  outline-offset:0; border-color:var(--brand-2); }

/* ── buttons ── */
.btn { display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px; border:none; border-radius:var(--r-md);
  background:var(--brand); color:#fff; font-weight:800; font-size:16px;
  cursor:pointer; min-height:52px; }
.btn.accent { background:var(--accent); }
.btn.ghost { background:var(--surface); color:var(--ink);
  border:1.5px solid var(--line); }
.btn.danger-ghost { background:var(--surface); color:var(--danger);
  border:1.5px solid var(--line); }
.btn:disabled { opacity:.55; }
.btn.busy { position:relative; color:transparent; }
.btn.busy::after { content:""; position:absolute; width:20px; height:20px;
  border:3px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:sp .8s linear infinite; }
.btn.ghost.busy::after, .btn.danger-ghost.busy::after {
  border-color:var(--line); border-top-color:var(--muted); }
.btn + .btn { margin-top:10px; }
.sticky-actions { position:fixed; left:0; right:0;
  bottom:calc(78px + env(safe-area-inset-bottom)); padding:10px 16px 6px;
  background:linear-gradient(transparent, var(--bg) 45%); z-index:20; }
.sticky-actions .inner { max-width:640px; margin:0 auto; }
.sticky-actions .btn { box-shadow:0 8px 22px rgba(29,27,23,.18); }

/* ── photos (editor) ── */
.pgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.shot { position:relative; aspect-ratio:1; border-radius:var(--r-sm);
  overflow:hidden; border:1px solid var(--line); background:#efece4;
  cursor:pointer; padding:0; }
.shot img { width:100%; height:100%; object-fit:cover; }
.shot.excluded img { opacity:.32; }
.shot .tag { position:absolute; left:5px; bottom:5px; font-size:9px;
  font-weight:800; background:rgba(29,27,23,.78); color:#fff; padding:3px 7px;
  border-radius:7px; letter-spacing:.02em; }
.shot .tag.cover { background:var(--accent); }
/* PHOTO SEMANTICS (2026-09-18): badges stack top-right so they never fight the COVER tag, and
   a hidden tile's reason gets room to be a short phrase rather than one shouted word. */
.shot .tags { position:absolute; right:4px; top:4px; display:flex; flex-direction:column;
  gap:3px; align-items:flex-end; pointer-events:none; }
.shot .tags .tag { position:static; left:auto; bottom:auto; }
.shot .tag.rev { background:#b4700d; }
.shot .tag.nwt { background:#1f7a4d; }
.shot .tag.cu  { background:#54535a; }
.shot.excluded .tag { max-width:calc(100% - 10px); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; text-transform:none; }
/* the recommendation chip: a report, never an action in itself */
.recchip { display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px;
  margin:0 0 10px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--card); color:var(--ink); font:inherit; text-align:left; }
.recchip b { font-size:13px; font-weight:600; }
.recchip span { font-size:12px; color:var(--muted); }
.rech { font-size:16px; font-weight:600; margin:2px 0 6px; }
.recmuted { font-size:13px; line-height:1.45; color:var(--muted); margin:0 0 12px; }
.recsec { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  margin:10px 0 6px; }
.recshot { flex:0 0 72px; width:72px; }
.recshot img { width:72px; height:72px; object-fit:cover; border-radius:var(--r-sm);
  display:block; background:#f2f0ea; }
.recshot.gen { height:72px; display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--line); border-radius:var(--r-sm); }
.recshot span { display:block; font-size:10px; color:var(--muted); margin-top:4px;
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-note { font-size:13px; line-height:1.45; color:var(--muted); margin:0 0 10px; }
.shot .x { position:absolute; top:5px; right:5px; width:30px; height:30px;
  border-radius:50%; border:none; background:rgba(29,27,23,.72); color:#fff;
  font-size:15px; line-height:1; cursor:pointer; }
.pskel { aspect-ratio:1; border-radius:var(--r-sm); background:
  linear-gradient(100deg, #efece4 40%, #f7f4ee 50%, #efece4 60%);
  background-size:200% 100%; animation:shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }

/* ── camera ── */
#vf-wrap { border-radius:var(--r-lg); overflow:hidden; background:#111;
  aspect-ratio:3/4; position:relative; margin-bottom:12px; }
#vf { width:100%; height:100%; object-fit:cover; }
#vf-fallback { position:absolute; inset:0; display:flex; flex-direction:column;
  gap:10px; align-items:center; justify-content:center; color:#cfc9bd;
  font-size:14px; text-align:center; padding:24px; }
.cam-bar { display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; padding:0 12px; }
.shutter { width:74px; height:74px; border-radius:50%; background:#fff;
  border:5px solid var(--accent); cursor:pointer; }
.shutter:active { transform:scale(.93); }
.cam-side { width:74px; display:flex; justify-content:center; }
.cam-side button { background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--r-md); padding:10px 12px; font-size:12px; font-weight:800;
  color:var(--ink); cursor:pointer; min-height:44px; }
.strip { display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px;
  -webkit-overflow-scrolling:touch; }
.strip .shot { flex:0 0 72px; }

/* ── processing ── */
.proc { text-align:center; padding-top:5vh; }
.proc .thumbs { display:flex; justify-content:center; gap:8px; margin:18px 0; }
.proc .thumbs img { width:56px; height:56px; border-radius:12px;
  object-fit:cover; border:2px solid var(--surface);
  box-shadow:0 3px 10px rgba(0,0,0,.12); }
.stages { max-width:280px; margin:22px auto 0; text-align:left; }
.stage { display:flex; align-items:center; gap:12px; padding:9px 0;
  font-size:15px; font-weight:600; color:var(--muted); }
.stage .dot { width:22px; height:22px; border-radius:50%; flex-shrink:0;
  border:2.5px solid var(--line); display:flex; align-items:center;
  justify-content:center; font-size:12px; color:#fff; }
.stage.done { color:var(--ink); }
.stage.done .dot { background:var(--ok); border-color:var(--ok); }
.stage.now { color:var(--ink); }
.stage.now .dot { border-color:var(--accent); position:relative; }
.stage.now .dot::after { content:""; width:10px; height:10px; border-radius:50%;
  background:var(--accent); animation:pulse 1s infinite alternate; }
@keyframes pulse { from { opacity:.35; } to { opacity:1; } }
.spin { width:42px; height:42px; border:4px solid var(--line);
  border-top-color:var(--accent); border-radius:50%; margin:0 auto;
  animation:sp .9s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }

/* ── bottom sheet ── */
#sheetveil { position:fixed; inset:0; background:rgba(20,18,14,.45); z-index:40;
  display:none; }
#sheet { position:fixed; left:0; right:0; bottom:0; z-index:41;
  background:var(--surface); border-radius:22px 22px 0 0;
  padding:10px 16px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(105%); transition:transform .22s ease; max-height:78dvh;
  overflow-y:auto; }
#sheet.open { transform:none; }
#sheetveil.open { display:block; }
#sheet .grab { width:40px; height:4px; border-radius:2px; background:var(--line);
  margin:2px auto 12px; }
#sheet h3 { font-size:16px; font-weight:800; margin:2px 2px 10px; }
.sheet-opt { display:flex; align-items:center; gap:12px; width:100%;
  background:none; border:none; border-bottom:1px solid var(--line);
  padding:15px 4px; font-size:16px; font-weight:600; color:var(--ink);
  cursor:pointer; text-align:left; min-height:52px; }
.sheet-opt:last-of-type { border-bottom:none; }
.sheet-opt.sel { color:var(--brand); font-weight:800; }
.sheet-opt.danger { color:var(--danger); }
.sheet-filter { width:100%; padding:11px 12px; font-size:16px; border:1.5px solid var(--line);
  border-radius:var(--r-md); margin:0 0 6px; box-sizing:border-box; background:var(--card,#fff); color:var(--ink); }
.sheet-opt .k { color:var(--muted); font-size:13px; font-weight:500; margin-left:auto; }
.sheet-none { color:var(--muted); font-size:13px; padding:12px 4px; }
.sheet-grp[hidden], .sheet-opt[hidden] { display:none; }

/* ── misc ── */
.empty { text-align:center; color:var(--muted); padding:46px 24px; font-size:15px;
  line-height:1.6; }
.empty .big { font-size:17px; font-weight:800; color:var(--ink);
  margin-bottom:6px; }
.checklist .rl .num { width:26px; height:26px; border-radius:50%;
  background:var(--brand); color:#fff; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.checklist .rl.done .num { background:var(--ok); }
#toastL { position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(128px + env(safe-area-inset-bottom)); background:var(--ink);
  color:#fff; padding:12px 20px; border-radius:var(--r-md); font-size:14px;
  font-weight:600; opacity:0; transition:opacity .25s; z-index:60;
  pointer-events:none; max-width:88vw; text-align:center; }
#toastL.show { opacity:1; }
.auth-wrap { max-width:400px; margin:7vh auto 0; }
.auth-logo { text-align:center; margin-bottom:22px; }
.auth-logo .m { font-size:30px; font-weight:900; color:var(--brand);
  letter-spacing:-.03em; }
.auth-logo .s { font-size:14px; color:var(--muted); margin-top:4px; }
a.link { color:var(--brand); font-weight:700; font-size:14px;
  text-decoration:none; }
.center { text-align:center; }
.price-inp { display:flex; align-items:center; gap:8px; }
.price-inp .cur { font-weight:800; font-size:18px; }
/* Used/New + Low/Mid/High price pills (directly under the price) */
.pp { margin-top:10px; }
.pp-segs { display:flex; gap:8px; margin-bottom:8px; }
.pp-seg { flex:1; padding:9px 6px; border-radius:10px; border:1.5px solid var(--line); background:#fff; font-weight:800; font-size:14px; color:#333; cursor:pointer; }
.pp-seg.on { border-color:#2f6fed; background:#2f6fed; color:#fff; }
.pp-seg:disabled { color:#bbb; cursor:default; }
.pp-pills { display:flex; gap:8px; }
.pp-pill { flex:1; padding:9px 4px; border-radius:12px; border:1.5px solid var(--line); background:#fff; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; }
.pp-pill .k { font-size:12px; font-weight:800; color:#555; }
.pp-pill .v { font-size:15px; font-weight:900; color:#111; }
.pp-pill.on { border-color:#2f6fed; background:rgba(47,111,237,.10); }
.pp-pill.on .k, .pp-pill.on .v { color:#2f6fed; }
.pp-pill:disabled { cursor:default; }
.pp-pill:disabled .k, .pp-pill:disabled .v { color:#bbb; }
.pdr { width:100%; background:var(--surface); border:0; text-align:left; font:inherit; color:var(--ink); cursor:pointer; }
#pdRound .pdr:last-of-type { border-bottom:1px solid var(--line); }
.pdradio { width:20px; height:20px; border-radius:50%; border:2px solid var(--line); flex:0 0 auto; background:#fff; }
.pdradio.on { border-color:#2f6fed; box-shadow:inset 0 0 0 5px #2f6fed; }
.or { display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.or:before, .or:after { content:""; flex:1; height:1px; background:var(--line); }
.gbtn { display:flex; justify-content:center; min-height:44px; margin:4px 0 8px; }
.planhero[role=button] { cursor:pointer; }
.nrow.disabled { opacity:.55; cursor:default; }
/* guided tour */
.tour { position:fixed; left:12px; right:12px; z-index:65; background:#1d1b17; color:#fff; border-radius:14px;
  padding:14px 14px 12px; box-shadow:0 10px 30px rgba(0,0,0,.35); max-width:420px; margin:0 auto; }
.tour-h { font-weight:800; font-size:15px; margin-bottom:4px; }
.tour-c { font-size:13.5px; line-height:1.4; opacity:.92; }
.tour-b { display:flex; align-items:center; gap:8px; margin-top:12px; }
.tour-n { font-size:12px; opacity:.7; flex:1; }
.tour-skip { background:none; border:0; color:#fff; opacity:.85; font:inherit; font-weight:700; padding:8px 10px; min-height:40px; }
.tour-next { background:var(--accent); color:#fff; border:0; border-radius:999px; padding:9px 18px; font:inherit; font-weight:800; min-height:40px; }
.tour-hl { outline:3px solid #2f6fed; outline-offset:3px; border-radius:10px; }

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}
/* desktop lite: contained column, roomier grid — never stretched cards */
@media (min-width:760px) {
  #view { max-width:860px; }
  .inv-grid { grid-template-columns:repeat(4, 1fr); }
  .pgrid { grid-template-columns:repeat(5, 1fr); }
  #tabs { max-width:520px; left:50%; transform:translateX(-50%);
    border:1px solid var(--line); border-radius:22px 22px 0 0; }
  .sticky-actions .inner { max-width:860px; }
  #sheet { max-width:520px; left:50%; transform:translateX(-50%) translateY(105%); }
  #sheet.open { transform:translateX(-50%); }
}

/* ── Live pending-import cards: contain long unbreakable text (2026-09-02) ──
   These classes had NO CSS in lite.css, so a long title/SKU/listing-id had no
   min-width:0 or ellipsis and widened the document (horizontal swipe on Live).
   Constrain the flex children exactly like Drafts/Sold cards do. */
.row-card { display:flex; align-items:center; gap:12px; }
.row-card > img, .row-card > .noimg { width:56px; height:56px; flex:0 0 56px;
  border-radius:10px; object-fit:cover; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:11px; }
.row-card .row-main { flex:1 1 auto; min-width:0; }
.row-card .row-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-weight:700; font-size:14px; }
.row-card .row-sub { display:flex; gap:8px; align-items:center; min-width:0;
  font-size:13px; color:var(--muted); }
.row-card .row-sub > * { overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0; }
.row-card .row-sub b { flex:0 0 auto; }
.row-card > .btn { flex:0 0 auto; }
/* defensive only — NOT the sole fix: the shared inventory viewport never scrolls
   sideways even if a future card mis-sizes. clip (not hidden) keeps sticky work. */
#view { overflow-x:clip; }

/* shared inventory pager — Drafts/Live/Sold (2026-09-02) */
.pagerbar { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 8px 30px; }
.prange { color:var(--muted); font-size:13px; font-weight:600; }
.pager { display:flex; align-items:center; gap:4px; flex-wrap:nowrap; max-width:100%; }
.pgbtn { min-width:36px; height:36px; padding:0 7px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); border-radius:9px; font-weight:700;
  font-size:14px; cursor:pointer; flex:0 0 auto; }
.pgbtn.nav { font-size:19px; line-height:1; }
.pgbtn.on { background:var(--brand); color:#fff; border-color:var(--brand); }
.pgbtn:disabled { opacity:.4; cursor:default; }
.pgap { color:var(--muted); padding:0 2px; flex:0 0 auto; }

/* Live-detail gallery thumbnails (2026-09-02) */
.live-thumbs { display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; padding:10px 0 2px; }
.lthumb { flex:0 0 auto; width:60px; height:60px; border-radius:10px; overflow:hidden;
  border:2px solid transparent; background:var(--line); padding:0; cursor:pointer; }
.lthumb.on { border-color:var(--brand); }
.lthumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* Q1: unmistakable active bottom-nav (2026-09-02) — tinted pill + bold blue */
#tabs button { position:relative; }
#tabs button svg, #tabs button span { position:relative; z-index:1; }
#tabs button.on { color:var(--brand); }
#tabs button.on span { font-weight:800; }
#tabs button.on:not(.cam)::before { content:''; position:absolute; top:0; left:50%;
  transform:translateX(-50%); width:52px; height:30px; border-radius:15px;
  background:rgba(48,72,120,.14); z-index:0; }
/* Q2: opening splash (the supplied LotLifter animation) */
#splash { position:fixed; inset:0; z-index:10000; background:#14181d;
  display:flex; align-items:center; justify-content:center; transition:opacity .45s ease; }
#splash video { width:100%; height:100%; object-fit:contain; background:#14181d; }
#splash.gone { opacity:0; pointer-events:none; }
html.nosplash #splash { display:none; }

/* ── Choose Plan: phone-first pricing screen (2026-09-02, v23) — same LotLifter
   design system (blue #304878 primary, orange action, green success). Per-plan
   accents are secondary tints only. ── */
.pricing-page { width:100%; max-width:520px; margin:0 auto; padding:14px 16px 20px; }
.pricing-head { text-align:center; margin-bottom:16px; }
.pricing-logo { height:44px; width:auto; display:block; margin:2px auto 12px; }
.pricing-head h1 { margin:0; font-size:clamp(26px,7.5vw,34px); line-height:1.05;
  letter-spacing:-.02em; color:var(--ink); font-weight:800; }
.pricing-head p { margin:9px auto 0; max-width:330px; font-size:14px; line-height:1.45; color:var(--muted); }
.plan-stack { display:grid; gap:12px; }
.plan-card { position:relative; display:block; width:100%; padding:15px; border-radius:18px; text-align:left;
  background:var(--surface); border:1.5px solid var(--line); font:inherit; color:var(--ink);
  -webkit-tap-highlight-color:transparent; transition:border-color .15s, box-shadow .15s, background .15s;
  cursor:pointer; --pa:var(--brand); --pa2:#eef1f7; }
.plan-card.starter { --pa:var(--ok); --pa2:var(--ok-2); }
.plan-card.plus { --pa:var(--brand); --pa2:#eef1f7; }
.plan-card.pro { --pa:#6d4aa8; --pa2:#efeaf7; }
.plan-card.popular { border-color:var(--pa); box-shadow:0 4px 16px rgba(48,72,120,.10); margin-top:6px; }
.plan-card.selected { border-color:var(--pa); border-width:2px; padding:14.5px;
  background:linear-gradient(0deg,var(--pa2),var(--surface)); box-shadow:0 5px 20px rgba(0,0,0,.07); }
.plan-card .sel-check { position:absolute; top:42px; left:44px; width:19px; height:19px; border-radius:50%; border:2px solid var(--surface);
  background:var(--pa); color:#fff; font-size:11px; font-weight:900; display:none; align-items:center; justify-content:center; }
.plan-card.selected .sel-check { display:flex; }
.plan-main { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.plan-left { display:flex; align-items:center; min-width:0; gap:12px; }
.plan-icon { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:var(--pa2); color:var(--pa); }
.plan-info { min-width:0; display:block; }
.plan-info .pn { display:block; font-size:20px; font-weight:800; line-height:1.1; }
.plan-info .pc { display:block; font-size:15px; font-weight:700; color:var(--ink); margin-top:2px; }
.plan-info .pm { display:block; font-size:12.5px; color:var(--muted); }
.plan-price { flex:0 0 auto; text-align:right; padding-left:8px; }
.plan-price .pp { display:block; font-size:30px; font-weight:800; line-height:1; letter-spacing:-.01em; }
.plan-price .pmo { display:block; margin-top:3px; font-size:12.5px; color:var(--muted); }
.plan-more { margin-top:12px; min-height:40px; border-radius:11px; display:flex; justify-content:center;
  align-items:center; gap:6px; font-weight:700; font-size:13.5px; color:var(--muted); background:var(--bg); }
.plan-more .chev, .included-toggle .chev { transition:transform .2s ease; font-size:16px; line-height:1; display:inline-block; }
.plan-more.open .chev, .included-toggle.open .chev { transform:rotate(180deg); }
.plan-detail { margin-top:10px; padding:11px 12px; border-radius:11px; background:var(--pa2); color:var(--ink);
  font-size:13.5px; line-height:1.5; }
.popular-badge { position:absolute; top:-10px; left:50%; transform:translateX(-50%); white-space:nowrap;
  padding:4px 14px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.04em;
  background:var(--brand); color:#fff; }
.all-included { margin-top:14px; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.included-toggle { width:100%; min-height:60px; display:flex; align-items:center; justify-content:space-between;
  text-align:left; gap:10px; padding:13px 15px; background:none; border:0; font:inherit; color:var(--ink); cursor:pointer; }
.included-toggle strong { display:block; font-size:14.5px; font-weight:800; }
.included-toggle small { display:block; margin-top:2px; color:var(--muted); font-size:12.5px; }
.included-content { padding:2px 15px 14px; display:grid; gap:11px; }
.incl-row { display:flex; align-items:flex-start; gap:10px; font-size:14px; }
.incl-row .ick { flex:0 0 20px; width:20px; height:20px; border-radius:50%; background:var(--ok-2); color:var(--ok);
  display:grid; place-items:center; font-size:11px; font-weight:900; margin-top:1px; }
.incl-row strong { display:block; font-weight:700; }
.incl-row small { display:block; color:var(--muted); font-size:12.5px; margin-top:1px; }
.pricing-action { position:sticky; bottom:0; margin-top:16px; padding:12px 0 max(10px,env(safe-area-inset-bottom));
  background:linear-gradient(0deg,var(--bg) 72%,rgba(246,244,239,0)); }
.pricing-action .btn.accent { width:100%; min-height:52px; border-radius:14px; font-size:16px; font-weight:800; }
.pricing-action small { display:block; margin-top:8px; text-align:center; color:var(--muted); font-size:12.5px; }

/* processing animation media (v24) — aspect matches the 1000x720 asset so cover
   fills exactly (no letterbox, no stretch); phone-capped so status stays above fold */
.proc-stage { width:100%; max-width:400px; margin:0 auto; aspect-ratio:1000/720;
  border-radius:20px; overflow:hidden; background:#14181d; box-shadow:0 6px 22px rgba(0,0,0,.10); }
.proc-media { width:100%; height:100%; object-fit:cover; display:block; }

/* ── Account settings center (v26) — LotLifter blue, green success, restrained ── */
.acct { padding: 8px 0 20px; }
.acct .lead { font-size:14px; color:var(--muted); margin:2px 2px 12px; }
.acct .hint { font-size:12.5px; color:var(--muted); margin:6px 2px 10px; line-height:1.45; }
.nlist { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:4px; }
.nrow { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:52px; padding:11px 14px; background:none; border:0; border-bottom:1px solid var(--line);
  font:inherit; color:var(--ink); text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.nlist .nrow:last-child { border-bottom:0; }
.nrow.disabled { cursor:default; }
.nrow.disabled .nrl { color:var(--muted); }
.nrl { font-size:15px; font-weight:600; min-width:0; display:flex; flex-direction:column; }
.nrl small { font-weight:500; font-size:12px; color:var(--muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nrl.muted { color:var(--muted); font-weight:500; }
.nrr { display:flex; align-items:center; gap:8px; flex:0 0 auto; color:var(--muted); font-size:14px; }
.chev { color:var(--muted); font-size:20px; line-height:1; }
.btn.mini { width:auto; min-height:34px; padding:6px 14px; font-size:13px; }
.planhero, .ebhero { padding:16px; }
.ph-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ph-name { font-size:19px; font-weight:800; }
.ph-sub { font-size:13px; color:var(--muted); margin-top:2px; }
.ph-usage { margin-top:12px; }
.ph-usage-t { font-size:13px; font-weight:600; margin-bottom:6px; }
.bar { height:8px; border-radius:99px; background:var(--bg); overflow:hidden; }
.bar i { display:block; height:100%; background:var(--brand); border-radius:99px; transition:width .3s; }
.polopt { width:100%; display:flex; align-items:center; gap:12px; min-height:54px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; margin-bottom:8px;
  font:inherit; color:var(--ink); text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.polopt .radio { flex:0 0 20px; width:20px; height:20px; border-radius:50%; border:2px solid var(--line); }
.polopt .pn { flex:1 1 auto; font-size:15px; font-weight:600; min-width:0; }
.polopt .tick { flex:0 0 auto; color:var(--brand); font-weight:900; font-size:14px; display:none; }
.polopt.sel { border-color:var(--brand); background:linear-gradient(0deg,#eef1f7,var(--surface)); }
.polopt.sel .radio { border-color:var(--brand); background:var(--brand); box-shadow:inset 0 0 0 3px var(--surface); }
.polopt.sel .tick { display:inline; }
.stickybar { position:sticky; bottom:calc(78px + env(safe-area-inset-bottom)); z-index:20; padding:12px 0 10px;
  background:linear-gradient(0deg,var(--bg) 72%,rgba(246,244,239,0)); margin-top:10px; }
.stickybar .btn.accent { width:100%; min-height:52px; border-radius:14px; font-size:16px; font-weight:800; }

/* publish sheet: per-listing eBay policies (v47) */
.rl.pub-mkt { flex-wrap:wrap; }
.pol-toggle { flex:0 0 auto; background:none; border:1.5px solid var(--line); border-radius:999px; padding:7px 11px;
  font:inherit; font-size:12px; font-weight:800; color:var(--brand); cursor:pointer; white-space:nowrap; }
.pol-toggle .chev { font-size:12px; color:inherit; }
#pubPolPanel { padding-top:4px; }
#pubPolPanel[hidden] { display:none; }
.pol-lab { display:block; font-size:12px; font-weight:800; color:var(--muted); margin:10px 0 6px; }
#pubPolPanel select.pol-sel { margin:0; }
.pol-err { font-size:12px; font-weight:700; color:var(--danger); margin-top:6px; }
.btn:disabled { opacity:.45; pointer-events:none; }
/* v48 freshness chip (Live header): status, not a button */
.fresh-chip { cursor:default; opacity:.9; font-weight:700; }
/* 2026-09-07: the chip's inline SVG had no size rule (rendered at the 300x150 default) */
.sync-chip { display:inline-flex; align-items:center; gap:6px; }
.sync-chip svg { width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* Share LotLifter promo (2026-09-05) */
.promo-card { margin-top:12px; }
.promo-card .promo-media { display:block; width:100%; max-height:220px; object-fit:contain; border-radius:12px; margin-top:10px; background:#f2f0ea; }
/* Item labels (2026-09-05) */
.lbl-day { padding:14px; }
.lbl-day-top { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; margin-bottom:10px; }
.lbl-day-name { font-size:17px; font-weight:800; min-width:0; overflow-wrap:anywhere; }
.lbl-day-top > div:first-child { min-width:0; }
.lbl-pager { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.lbl-pager .btn { flex:0 0 auto; width:auto; min-width:0; min-height:36px; padding:6px 12px; font-size:13px; font-weight:700; border-radius:999px; }
.lbl-pageno { font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap; }
.lbl-head { padding:4px 2px 10px; }
.lbl-actions { display:flex; gap:8px; margin-bottom:10px; }
.lbl-actions .btn { flex:1; padding:10px 8px; font-size:13px; }
.lbl-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); min-width:0; }
.lbl-row:last-child { border-bottom:0; }
.lbl-row.printed { background:rgba(30,125,67,.04); }
.lbl-chk input { width:20px; height:20px; }
.lbl-thumb { width:40px; height:40px; border-radius:8px; object-fit:cover; flex:0 0 40px; background:#f1eee6; }
.lbl-thumb.ph { border:1px dashed var(--line); }
.lbl-main { flex:1; min-width:0; }
.lbl-id { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-weight:800; font-size:14px; letter-spacing:.02em; }
.lbl-title { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lbl-status { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:0 0 auto; }
.lbl-pill { font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; background:#eee; color:var(--muted); white-space:nowrap; }
.lbl-pill.ok { background:#e7f4ec; color:#1e7d43; }
.btn.sm { padding:5px 10px; font-size:12px; }
.lbl-sticky { position:sticky; bottom:76px; display:flex; gap:8px; padding:10px 0; background:var(--bg); }
.lbl-sticky .btn { flex:1; padding:12px 8px; font-size:14px; }
.size-row { display:flex; gap:6px; flex-wrap:wrap; }
.size-btn { flex:1; min-width:84px; padding:10px 6px; border:2px solid var(--line); border-radius:12px; background:var(--bg); text-align:center; cursor:pointer; }
.size-btn.active { border-color:var(--brand); color:var(--brand); }
.size-btn.disabled { opacity:.4; cursor:not-allowed; }
.size-btn .size-dim { font-size:16px; font-weight:900; display:block; }
.size-btn .size-sub { font-size:10px; color:var(--muted); display:block; }
.size-btn .size-warn { font-size:10px; color:#bb2424; display:block; }

/* Drafts WORK QUEUE (2026-09-07): filter chips, select mode, bulk bar */
.qchips { display:flex; gap:6px; overflow-x:auto; padding:0 0 8px; margin:0 -2px 2px; scrollbar-width:none; }
.qchips::-webkit-scrollbar { display:none; }
.qchip { flex:0 0 auto; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; }
.qchip.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.qbar { display:flex; align-items:center; gap:10px; margin:2px 2px 10px; font-size:12.5px; color:var(--muted); }
.qbar .qcount { flex:1; min-width:0; }
.qlink { background:none; border:none; color:var(--accent); font-weight:800; font-size:13px; padding:6px 4px; }
.inv-grid.selmode .inv-card { cursor:pointer; }
.inv-card .qtick { position:absolute; top:8px; left:8px; z-index:2; width:26px; height:26px; border-radius:999px; border:2px solid #fff; background:rgba(29,27,23,.35); color:transparent; font-size:15px; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.inv-card.sel { outline:3px solid var(--brand); outline-offset:-3px; }
.inv-card.sel .qtick { background:var(--brand); color:#fff; border-color:var(--brand); }
.qbulk { position:fixed; left:0; right:0; bottom:calc(78px + env(safe-area-inset-bottom)); z-index:30; display:flex; gap:8px; padding:10px 14px; max-width:640px; margin:0 auto; background:var(--bg); box-shadow:0 -6px 18px rgba(29,27,23,.08); }
.qbulk .btn { flex:1; min-height:46px; font-size:14px; }

/* Printable boards (2026-09-07) */
.bd-rule { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px; font-size:13.5px; margin:0 0 12px; }
.bd-check { margin-top:8px; font-size:12px; color:var(--muted); background:rgba(29,27,23,.04); border-radius:10px; padding:8px 10px; }

/* Help / Report control (2026-09-07): persistent, unobtrusive, above the tab bar */
#helpFab { position:fixed; right:12px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:29; width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:18px; font-weight:900; box-shadow:0 4px 14px rgba(29,27,23,.16); display:none; align-items:center; justify-content:center; cursor:pointer; }
body.authed #helpFab { display:flex; }
body.cam-open #helpFab, body.sheet-open #helpFab { display:none; }
.rp-kinds { display:flex; gap:6px; margin:6px 0 10px; }
.rp-kinds button { flex:1; padding:10px 6px; border-radius:12px; border:1px solid var(--line); background:var(--surface); font-size:12.5px; font-weight:800; }
.rp-kinds button.on { background:var(--brand); color:#fff; border-color:var(--brand); }
.rp-ctx { font-size:12px; color:var(--muted); background:rgba(29,27,23,.04); border-radius:10px; padding:8px 10px; margin:0 0 10px; }
#rpText { width:100%; min-height:96px; font:inherit; font-size:14px; border:1px solid var(--line); border-radius:12px; padding:10px 12px; resize:vertical; }

/* Label type row (2026-09-07) */
.lbl-type { padding-bottom:10px; align-items:center; flex-wrap:wrap; }
.lbl-type-note { flex-basis:100%; font-size:12px; color:var(--muted); padding:2px 2px 0; }

/* GO SHIPPING (2026-09-07) */
.ship-seg { margin-bottom:10px; }
.ship-connline { margin:0 2px 10px; }
.ship-blocked { margin-bottom:12px; }
.ship-ord { position:relative; margin-bottom:10px; }
.ship-ord.pick { cursor:pointer; padding-left:44px; }
.ship-chk { position:absolute; left:12px; top:50%; width:22px; height:22px; margin-top:-11px; border:2px solid var(--line); border-radius:7px; background:var(--surface); }
.ship-ord.sel { border-color:var(--brand); }
.ship-ord.sel .ship-chk { background:var(--brand); border-color:var(--brand); }
.ship-ord.sel .ship-chk::after { content:""; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.ship-pack { margin-bottom:12px; }
.ship-pk-lbl { font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:12px 0 6px; }
.wt-row, .dims-row { display:flex; gap:8px; align-items:center; }
.wt-row label, .dims-row label { flex:1; display:flex; align-items:center; gap:6px; margin:0; }
.wt-row input, .dims-row input { flex:1; min-width:0; padding:12px; }
.dims-row { margin-top:8px; }
.ship-origin { margin:8px 0 0; font-size:13px; }
.ship-prob { color:var(--danger); font-size:13px; font-weight:700; margin-top:6px; }
.rate-pick { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.rate-opt { border:1px solid var(--line); border-radius:12px; margin-bottom:6px; text-align:left; }
.ship-form input { margin-bottom:8px; }
.ship-2col { display:flex; gap:8px; }
.ship-2col input { flex:1; min-width:0; }
.ship-res { margin-bottom:10px; }
.ship-hist { padding:10px 0; border-top:1px solid var(--line); }
.ship-hist .btn.mini { margin-top:6px; }
.trk-ev { padding:6px 0; border-bottom:1px solid var(--line); font-size:13px; }
.sheet-title { font-weight:800; font-size:16px; margin-bottom:8px; }

/* GETTING STARTED (2026-09-08) */
.ob-card { margin:0 0 12px; cursor:pointer; }
.ob-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.ob-head { margin-bottom:12px; }
.ob-stage { display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; }
.ob-stage.done { opacity:.75; }
.ob-mark { flex:0 0 28px; width:28px; height:28px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--muted); }
.ob-stage.done .ob-mark { background:var(--ok); border-color:var(--ok); color:#fff; }
.ob-stage.next .ob-mark { border-color:var(--brand); color:var(--brand); }
.ob-body { flex:1; min-width:0; }
.ob-t { font-weight:800; font-size:15px; }
.ob-opt { font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.ob-detail { font-size:12.5px; font-weight:700; margin-top:4px; }
.ob-stage.done .ob-detail { color:var(--ok); }
.ob-act { margin-top:10px; min-height:44px; }

/* ── PHOTO QUICK ACTIONS + SQUARE CROP (2026-09-12) ── */
.ph-quick { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:0 0 6px; }
.ph-q { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:60px;
  border:1.5px solid var(--line); border-radius:var(--r-md); background:var(--surface); color:var(--ink);
  font:inherit; font-size:12px; font-weight:700; cursor:pointer; padding:6px 2px; }
.ph-q b { font-size:20px; line-height:1; font-weight:800; }
.ph-q.danger { color:var(--danger); }
.ph-q:disabled { opacity:.35; pointer-events:none; }
#cropOv { position:fixed; inset:0; z-index:46; background:var(--bg); display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom); }
.crop-top { display:flex; align-items:center; justify-content:space-between; padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:var(--brand); color:#fff; font-size:16px; }
.crop-top b { font-weight:800; }
.crop-x, .crop-save { background:none; border:none; color:#fff; font:inherit; font-size:15px; font-weight:700; padding:8px 4px; cursor:pointer; min-width:56px; }
.crop-save { color:#ffd9b8; }
.crop-save:disabled { opacity:.45; }
.crop-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px; min-height:0; }
.crop-stage { position:relative; display:inline-block; touch-action:none; user-select:none; -webkit-user-select:none; max-width:100%; }
.crop-stage img { display:block; max-width:100%; max-height:56dvh; pointer-events:none; -webkit-user-drag:none; }
.crop-box { position:absolute; box-sizing:border-box; border:2px solid #fff; border-radius:4px;
  box-shadow:0 0 0 9999px rgba(20,18,14,.58); pointer-events:none; }
.crop-box::after { content:""; position:absolute; inset:33.3% 0; border-top:1px solid rgba(255,255,255,.45); border-bottom:1px solid rgba(255,255,255,.45); }
.crop-hint { font-size:13px; text-align:center; margin-top:10px; padding:0 8px; }
.crop-ctl { padding:8px 14px 14px; border-top:1px solid var(--line); background:var(--surface); }
.crop-presets { justify-content:center; padding-bottom:10px; }
.crop-presets .qchip { min-width:84px; text-align:center; min-height:40px; font-size:14px; }
.crop-size { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.crop-size .btn.mini { min-height:44px; padding:8px 16px; font-size:14px; margin:0; }
.crop-size .muted { font-size:12.5px; text-align:center; }
.crop-ctl .btn.danger-ghost { margin-top:0; }