:root { --red:#d52b1e; --dark:#1b2a4a; --bg:#faf7f2; --card:#fff; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans TC", sans-serif; background:var(--bg); color:#222; }
header { background:var(--dark); color:#fff; padding:16px; text-align:center; }
.brand { font-size:26px; font-weight:800; }
.subtitle { opacity:.85; margin:4px 0 10px; }
.progress-wrap { background:#ffffff33; height:12px; border-radius:6px; overflow:hidden; max-width:420px; margin:8px auto; }
#progress-bar { background:var(--red); height:100%; width:0%; transition:width .4s; }
#progress-text { font-weight:700; }
.demo-toggle { display:block; margin:10px auto 4px; font-size:14px; }
.gps { font-size:13px; opacity:.9; margin:6px 0; }
main { max-width:640px; margin:0 auto; padding:16px; }
h2 { font-size:20px; }
.btn { display:inline-block; border:none; border-radius:10px; padding:12px 18px; font-size:16px; cursor:pointer; margin:6px 4px; text-decoration:none; }
.btn.primary { background:var(--red); color:#fff; font-weight:700; }
.btn.secondary { background:#e8e4dc; color:#222; }
.btn.danger { background:#fff; color:#b00; border:1px solid #b00; font-size:14px; }
.spot { background:var(--card); border-radius:12px; padding:14px; margin:10px 0; box-shadow:0 1px 4px #0001; cursor:pointer; }
.spot.done { border-left:6px solid #2e9e5b; }
.spot h3 { margin:0 0 4px; font-size:17px; }
.spot .meta { font-size:13px; color:#666; }
.chip { display:inline-block; background:#ffe9e6; color:var(--red); border-radius:20px; padding:2px 10px; font-size:13px; font-weight:700; }
.pose-box { background:#fff7d6; border:1px dashed #d9a400; border-radius:10px; padding:12px; margin:12px 0; font-size:17px; }
.file-btn { text-align:center; }
#photo-preview, #done-photo { width:100%; border-radius:12px; margin-top:10px; }
#q-options button { display:block; width:100%; text-align:left; margin:6px 0; padding:12px; border-radius:10px; border:1px solid #ccc; background:#fff; font-size:16px; cursor:pointer; }
#q-options button.correct { background:#dff5e4; border-color:#2e9e5b; }
#q-options button.wrong { background:#fde3e0; border-color:#b00; }
.stamp { display:inline-block; width:30%; margin:1%; text-align:center; font-size:13px; }
.stamp .box { border:2px dashed #bbb; border-radius:50%; height:84px; display:flex; align-items:center; justify-content:center; font-size:30px; background:#fff; }
.stamp.done .box { border:2px solid #2e9e5b; background:#dff5e4; }
.hidden { display:none !important; }
.stamp-done { font-size:20px; font-weight:800; color:#2e9e5b; }
footer { text-align:center; font-size:12px; color:#888; padding:20px; }
.addr { color:#666; font-size:14px; }