:root { --ink: #f2f2f5; --muted: #a3a3b2; --card: #24242c; --line: #3a3a46; --ok: #2f9e55; --fix: #d9822b; --no: #b23b3b; --accent: #6b5bd6; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #17171c; color: var(--ink); padding-bottom: 76px; }
.top { padding: 16px 18px 8px; max-width: 1400px; margin: 0 auto; }
h1 { margin: 0 0 4px; font-size: 22px; }
.hint { margin: 0 0 12px; color: var(--muted); font-size: 13px; max-width: 760px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.tabs { display: flex; gap: 6px; overflow-x: auto; }
.tabs button, .bgs button, .bar button, .choice button, dialog button { font: inherit; border: 1px solid var(--line); background: #2c2c36; color: var(--ink); border-radius: 8px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.tabs button.on, .bgs button.on { background: var(--accent); border-color: var(--accent); }
main { max-width: 1400px; margin: 0 auto; padding: 0 18px; }
section.group { margin: 18px 0 8px; }
section.group > h2 { font-size: 17px; margin: 0 0 4px; }
section.group > p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
details.group > summary { cursor: pointer; font-size: 17px; font-weight: 600; margin: 18px 0 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.card.s-ok { border-color: var(--ok); } .card.s-fix { border-color: var(--fix); } .card.s-no { border-color: var(--no); opacity: .8; }
.pics { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pics.two { grid-template-columns: 1fr 1fr; }
.pic { display: flex; flex-direction: column; gap: 4px; }
.pic .label { font-size: 12px; color: var(--muted); }
.large { display: block; width: 100%; max-width: 360px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; margin: 0 auto; }
.large img { width: 100%; height: 100%; object-fit: contain; display: block; }
.real { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.real img { width: 100px; height: 100px; border-radius: 6px; }
.meta { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.meta b { font-size: 14px; } .meta span { color: var(--muted); font-size: 12px; }
.prev { font-size: 12.5px; background: #2e2a22; border-left: 3px solid var(--fix); padding: 6px 8px; border-radius: 6px; color: #f0dcc0; }
.note { font-size: 12.5px; color: var(--muted); margin: 0; }
.choice { display: flex; gap: 6px; flex-wrap: wrap; }
.choice button.on[data-s="ok"] { background: var(--ok); border-color: var(--ok); }
.choice button.on[data-s="fix"] { background: var(--fix); border-color: var(--fix); }
.choice button.on[data-s="no"] { background: var(--no); border-color: var(--no); }
.card textarea { width: 100%; min-height: 54px; font: inherit; border-radius: 8px; border: 1px solid var(--line); background: #1c1c22; color: var(--ink); padding: 6px 8px; display: none; }
.card.s-fix textarea { display: block; }
.card textarea.missing { border-color: var(--no); box-shadow: 0 0 0 2px #b23b3b55; }
body.bg-dark .large, body.bg-dark .real img { background: #101014; }
body.bg-light .large, body.bg-light .real img { background: #f4f4f6; }
body.bg-checker .large, body.bg-checker .real img { background: repeating-conic-gradient(#c9c9cf 0% 25%, #ffffff 0% 50%) 50% / 20px 20px; }
.bar { position: fixed; left: 0; right: 0; bottom: 0; background: #1f1f27ee; border-top: 1px solid var(--line); padding: 10px 18px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; backdrop-filter: blur(6px); }
.bar #counts { font-size: 13px; color: var(--muted); }
.bar .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bar .primary { background: var(--accent); border-color: var(--accent); }
dialog { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; width: min(680px, 94vw); }
dialog textarea { width: 100%; font: 12px/1.4 ui-monospace, Consolas, monospace; background: #15151a; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
dialog menu { display: flex; gap: 6px; justify-content: flex-end; padding: 0; margin: 10px 0 0; }
@media (max-width: 640px) {
  .grid, .grid.wide { grid-template-columns: 1fr; }
  .top, main { padding-left: 10px; padding-right: 10px; }
  .large { max-width: 100%; }
  body { padding-bottom: 96px; }
  .bar { padding: 6px 10px; gap: 4px; }
  .bar #counts { font-size: 11px; width: 100%; }
  .bar button { padding: 5px 9px; font-size: 13px; }
}