:root { --bg:#f6f7f9; --fg:#1d2330; --muted:#6b7280; --accent:#1f6feb; --card:#fff; --err:#c62828; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.wrap { max-width: 720px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border-radius: 12px; padding: 16px; margin: 12px 0; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn, button { display:inline-block; background:var(--accent); color:#fff; border:0; border-radius:8px; padding:10px 16px; font-size:16px; text-decoration:none; }
input[type=text], input:not([type]) { width:100%; padding:10px; font-size:16px; border:1px solid #d0d7de; border-radius:8px; }
label { display:block; margin-bottom:8px; }
.check { display:flex; gap:8px; align-items:flex-start; }
.err { color: var(--err); min-height: 1.4em; }
.alert { background: #fdecea; color: var(--err); border: 1px solid var(--err); }
.hint { color: var(--muted); font-size: 14px; }
.frames { display:flex; gap:6px; overflow-x:auto; }
.frames img { height: 160px; border-radius: 6px; }
/* F6: the preview keeps its aspect ratio inside 100% x 60vh; app.js lays the canvas exactly over the image */
.tapbox { position: relative; }
.tapbox img { display:block; margin: 0 auto; width:auto; height:auto; max-width:100%; max-height:60vh; }
.tapbox canvas { position:absolute; top:0; left:0; cursor:pointer; }
#tap .row { margin-top: 10px; }
.status { font-weight: 600; margin: 6px 0; }
.status:empty { display: none; }
button.secondary { background:#e8eaef; color:var(--fg); }
button:disabled { opacity: .5; }
.summary { font-size: 18px; }
.unsure { border-top: 1px solid #e5e7eb; margin-top: 8px; padding-top: 8px; }
.confirm img { max-width: 200px; display:block; margin: 6px 0; }
progress { width: 100%; }
.spinner { display:inline-block; width:12px; height:12px; margin-right:8px; border:2px solid #d0d7de; border-top-color:var(--accent); border-radius:50%; animation: spin 1s linear infinite; vertical-align:-1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.frame { margin: 0; flex: none; text-align: center; }
.frame figcaption { font-size: 13px; color: var(--muted); }
.exercise { border-left: 3px solid #e5e7eb; padding-left: 12px; margin-top: 8px; }
.exercise h4 { margin: 4px 0; }