:root {
  --ink: #1b1a17; --paper: #f6f1e7; --card: #fffdf8; --line: #ddd4c2; --muted: #6b6558;
  --thread: #d9482b; --thread-ink: #fff; --linen: #2c4a6e; --ok: #2f6b3f; --warn: #9a5b00; --bad: #8f2a1a;
  --shadow: 0 1px 2px rgba(27,26,23,.08), 0 6px 20px rgba(27,26,23,.06);
}
[data-theme="dark"] {
  --ink: #efe9dc; --paper: #151412; --card: #1e1d1a; --line: #37342d; --muted: #a39b8a;
  --thread: #ef6a4c; --thread-ink: #1b1a17; --linen: #8fb0d8; --ok: #7bc48e; --warn: #e3a64a; --bad: #f08a76;
  --shadow: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", "Noto Sans", "Noto Sans CJK TC", sans-serif; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.top { display: flex; align-items: center; gap: 1rem; padding: .8rem clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.25rem; color: inherit; text-decoration: none; }
.tag { margin: 0; color: var(--muted); flex: 1; min-width: 14rem; }
.tools { display: flex; gap: .5rem; align-items: center; }
main { max-width: 74rem; margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 3rem; display: grid; gap: 1.25rem; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem 1.5rem; box-shadow: var(--shadow); }
h2 { margin: 0 0 1rem; font-size: 1.15rem; display: flex; gap: .6rem; align-items: center; }
h3 { margin: 0; font-size: 1.05rem; }
.n { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: .9rem; }
.drops { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 1.1rem; display: grid; gap: .25rem; cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop:focus-visible, .drop.over { border-color: var(--thread); background: color-mix(in srgb, var(--thread) 7%, transparent); outline: none; }
.drop span { color: var(--muted); font-size: .92rem; }
.drop em { font-style: normal; color: var(--linen); font-weight: 600; min-height: 1.3em; }
.notes { margin: .8rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; font-size: .92rem; }
.notes li { padding: .35rem .6rem; border-radius: 8px; background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.notes li.bad { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
button, .btn, select, input[type=number] { font: inherit; color: inherit; border-radius: 9px; border: 1px solid var(--line); background: var(--card); padding: .5rem .9rem; }
button, .btn { cursor: pointer; text-decoration: none; display: inline-block; }
button:hover:not(:disabled), .btn:hover { border-color: var(--ink); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--thread); color: var(--thread-ink); border-color: var(--thread); font-weight: 600; }
button.ghost { background: transparent; }
:focus-visible { outline: 3px solid var(--linen); outline-offset: 2px; }
.check { display: inline-flex; gap: .4rem; align-items: center; }
.private, .hint { color: var(--muted); font-size: .9rem; margin: .8rem 0 0; }
#progress { display: flex; gap: .8rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
progress { width: min(24rem, 100%); height: .9rem; accent-color: var(--thread); }
.error { color: var(--bad); font-weight: 600; }
.split { display: grid; grid-template-columns: 17rem 1fr; gap: 1.25rem; margin-top: 1rem; }
.split > * { min-width: 0; }
.rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; align-content: start; max-height: 38rem; overflow: auto; }
.rlist li button { width: 100%; display: grid; grid-template-columns: 3.6rem 1fr; gap: .2rem .7rem; text-align: left; align-items: center; padding: .45rem; }
.rlist li button[aria-current=true] { border-color: var(--thread); box-shadow: 0 0 0 2px color-mix(in srgb, var(--thread) 30%, transparent); }
.rlist img { width: 3.6rem; height: 4.8rem; object-fit: cover; border-radius: 4px; background: var(--paper); grid-row: span 2; }
.rlist .name { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-block; padding: .1rem .6rem; border-radius: 99px; font-size: .8rem; font-weight: 700; border: 1px solid currentColor; }
.badge.clear { color: var(--ok); } .badge.check { color: var(--warn); } .badge.none { color: var(--bad); } .badge.done { color: var(--linen); }
.detail-head { display: flex; gap: .8rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.reason { color: var(--muted); margin: .3rem 0 .8rem; font-size: .92rem; }
.tabs { display: flex; gap: .4rem; margin-bottom: .6rem; flex-wrap: wrap; }
.tabs button[aria-selected=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stage { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; min-height: 12rem; align-items: start; }
.stage figure { margin: 0; display: grid; gap: .3rem; }
.stage figcaption { color: var(--muted); font-size: .85rem; }
.stage img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.stage.one { grid-template-columns: 1fr; max-width: 40rem; }
.stage .msg { grid-column: 1 / -1; color: var(--muted); padding: 2rem 1rem; text-align: center; border: 1px dashed var(--line); border-radius: 8px; }
.cands { margin-top: 1rem; }
.lbl { font-size: .85rem; color: var(--muted); }
.strip { display: flex; gap: .6rem; overflow-x: auto; padding: .4rem 0; }
.strip button { flex: 0 0 auto; width: 6.4rem; padding: .3rem; text-align: center; font-size: .8rem; }
.strip button[aria-pressed=true] { border-color: var(--thread); box-shadow: 0 0 0 2px color-mix(in srgb, var(--thread) 30%, transparent); }
.strip img { width: 100%; aspect-ratio: 5/7; object-fit: cover; border-radius: 4px; display: block; background: var(--paper); }
#page-input { width: 5.5rem; }
#done .btn { margin: .4rem .5rem 0 0; background: var(--ink); color: var(--paper); border-color: var(--ink); }
footer { text-align: center; color: var(--muted); font-size: .85rem; padding-bottom: 2rem; }
footer a { color: var(--linen); }
@media (max-width: 760px) { .split { grid-template-columns: minmax(0, 1fr); } .rlist { max-height: 14rem; grid-auto-flow: column; grid-auto-columns: 14rem; overflow-x: auto; } .stage { grid-template-columns: 1fr; } }
img { transition: opacity .2s; }
img.pending { opacity: 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.demo { margin: 0; padding: .6rem clamp(1rem, 4vw, 2.5rem); background: var(--ink); color: var(--paper); font-size: .92rem; }
@media (hover: none) { .keys { display: none; } }
.keys { margin-top: .2rem; }
.drop.off { opacity: .55; }
.load-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; }
.summary { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; color: var(--linen); font-weight: 600; }
#load.compact { padding-block: .8rem; }
#load.compact h2, #load.compact .summary { margin-bottom: 0; }
#load.compact .drops, #load.compact .row, #load.compact .private { display: none; }
#zoom-open { margin-left: auto; }
.stage img.zoomable { cursor: zoom-in; }
dialog#zoom { width: min(96vw, 110rem); height: 94vh; max-width: none; max-height: none; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); overflow: hidden; }
dialog#zoom[open] { display: flex; flex-direction: column; }
dialog#zoom::backdrop { background: rgba(10, 9, 8, .72); }
.zoom-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
.zoom-body { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; background: var(--line); }
.zoom-body figure { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--card); }
.zoom-body figcaption { padding: .3rem .8rem; color: var(--muted); font-size: .85rem; }
.zoom-pane { flex: 1; min-height: 0; overflow: auto; background: #fff; }
.zoom-pane img { display: block; max-width: none; }
@media (max-width: 760px) { .zoom-body { grid-auto-flow: row; grid-auto-rows: minmax(0, 1fr); } }