:root { --bg:#f3f4f6; --card:#fff; --ink:#111827; --muted:#6b7280; --line:#d1d5db; --accent:#1f2937; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.4 system-ui,sans-serif; background:var(--bg); color:var(--ink);
  padding-bottom: env(safe-area-inset-bottom); }
header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
  background:var(--accent); color:#fff; position:sticky; top:0; z-index:2; }
h1 { margin:0; font-size:1.2rem; } h2 { margin:0 0 8px; font-size:1.05rem; }
main { max-width:560px; margin:0 auto; padding:12px; display:grid; gap:12px; }
.card { background:var(--card); border-radius:12px; padding:14px; box-shadow:0 1px 2px rgba(0,0,0,.08); display:grid; gap:10px; }
label { display:grid; gap:4px; font-size:.9rem; color:var(--muted); }
input, select { font:inherit; padding:12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; width:100%; }
button { font:inherit; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink); min-height:48px; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); flex:1; font-weight:600; }
button.primary.alt { background:#fff; color:var(--accent); }
button.ghost { background:transparent; }
header .ghost { color:#fff; border-color:rgba(255,255,255,.4); min-height:40px; }
button:disabled { opacity:.45; }
.row { display:flex; gap:8px; flex-wrap:wrap; }
.types { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.types button { border:3px solid transparent; color:#fff; font-weight:600; text-align:left; }
.types button.on { border-color:var(--ink); box-shadow:0 0 0 2px #fff inset; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chips button { min-height:36px; padding:6px 12px; border-radius:999px; }
.hint { color:var(--muted); font-size:.9rem; margin:0; }
.log { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.log li { padding:8px 10px; border-radius:8px; background:#f9fafb; font-size:.85rem; word-break:break-all; }
.log li.ok { border-left:4px solid #16a34a; } .log li.err { border-left:4px solid #dc2626; }
.log li.busy { border-left:4px solid #f59e0b; }
.log button { min-height:32px; padding:2px 10px; margin-top:4px; }
dialog { border:0; border-radius:12px; width:min(92vw,480px); padding:16px; }
dialog form { display:grid; gap:10px; }
.pick { list-style:none; margin:0; padding:0; display:grid; gap:6px; max-height:40vh; overflow:auto; }
.pick button { width:100%; text-align:left; }
[hidden] { display:none !important; }
.hint.warn { color:#b91c1c; font-weight:600; }
.dlg { display:grid; gap:10px; }
.bar { align-items:center; }
.bar .hint { flex:1; }
.bar button { min-height:36px; padding:4px 10px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.thumb { position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; background:#e5e7eb; border:3px solid transparent; padding:0; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb.sel { border-color:#111827; box-shadow:0 0 0 2px #fff inset; }
.thumb.flag { border-color:#dc2626; }
.thumb.done { opacity:.55; }
.thumb .tag { position:absolute; left:0; right:0; bottom:0; padding:2px 4px; font-size:.7rem; font-weight:600; color:#fff; text-align:left; line-height:1.15; background:#6b7280; }
.thumb .st { position:absolute; top:4px; right:4px; background:#fff; border-radius:999px; padding:0 6px; font-size:.8rem; font-weight:700; }
.review { max-height:40vh; overflow:auto; }
/* Review pop-up: same dark color as the main Upload button so it is obvious this is the final step. */
#reviewDlg { background:#1f2937; color:#fff; }
#reviewDlg::backdrop { background:rgba(17,24,39,.6); }
#reviewDlg .hint { color:#cbd5e1; }
#reviewDlg .log li { background:rgba(255,255,255,.1); color:#fff; }
#reviewDlg #reviewYes { background:#dbeafe; color:#1f2937; border-color:#dbeafe; }
#reviewDlg #reviewNo { background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.hbtns { display:flex; gap:6px; }
/* ---- tutorial ---- */
#tour { position:fixed; inset:0; z-index:1000; }
#tour.dim { background:rgba(0,0,0,.65); }
#tourSpot { position:fixed; border-radius:8px; pointer-events:none; box-shadow:0 0 0 9999px rgba(0,0,0,.65); outline:3px solid #fbbf24; transition:top .25s, left .25s, width .25s, height .25s; }
#tour.dim #tourSpot { display:none; }
#tourSpot.pulse { animation:tourPulse 1.1s ease-in-out infinite; }
@keyframes tourPulse { 0%,100% { outline-offset:0; } 50% { outline-offset:8px; } }
@media (prefers-reduced-motion: reduce) { #tourSpot.pulse { animation:none; } #tourSpot { transition:none; } }
#tourCard { position:fixed; max-height:calc(100vh - 24px); overflow:auto; background:#fff; color:var(--ink); border-radius:12px; padding:14px 16px; box-shadow:0 12px 40px #0008; }
#tourCard h3 { margin:2px 0 6px; font-size:1.05rem; }
#tourCard p { margin:0 0 12px; }
#tourCard .row { align-items:center; flex-wrap:nowrap; }
#tourCard .spacer { flex:1; }