:root {
  --bg: #ffffff; --fg: #1a1a1a; --muted: #6b6b6b; --line: #ececec; --card: #fafafa;
  --accent: #16a34a; --accent-ink: #ffffff; --quote: #f3f7f4;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111312; --fg: #f1f1f1; --muted: #a3a3a3; --line: #2a2d2b; --card: #1a1d1b; --accent: #22c55e; --accent-ink: #0b130e; --quote: #17201a; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
.top { padding: 16px; border-bottom: 1px solid var(--line); }
.logo { font-weight: 700; letter-spacing: 0.02em; font-size: 17px; }
main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 20px 16px 32px; }
.status { color: var(--muted); text-align: center; padding: 48px 0; }
.from { margin: 0; color: var(--muted); font-size: 13px; }
h1 { margin: 2px 0 10px; font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
blockquote { margin: 0 0 16px; padding: 10px 14px; background: var(--quote); border-radius: 10px; font-size: 14px; overflow-wrap: anywhere; }
.board { position: relative; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.board img { position: absolute; display: block; user-select: none; -webkit-user-drag: none; }
.board img.flip { transform: scaleX(-1); }
.actions { margin: 18px 0 8px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.btn { appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 999px; padding: 12px 18px; font: inherit; font-weight: 600; cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.6; cursor: default; }
.action-msg { margin: 0; min-height: 1.2em; color: var(--muted); font-size: 13px; text-align: center; }
.install { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px; margin-bottom: 8px; }
.install h2 { font-size: 16px; margin: 12px 0 4px; }
.install p { font-size: 14px; color: var(--muted); }
.pieces-head { font-size: 16px; margin: 24px 0 8px; }
.pieces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.piece { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); min-width: 0; }
.piece img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; }
.piece .info { flex: 1; min-width: 0; }
.piece .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piece .price { color: var(--muted); font-size: 13px; }
.piece a { color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; flex-shrink: 0; }
.piece a:hover { text-decoration: underline; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 16px; border-top: 1px solid var(--line); }