:root { --bg:#f6f3ee; --card:#fff; --ink:#2b2433; --soft:#7a7186; --line:#e6dfd3; --gold:#c8862a; --goldInk:#fff; --ok:#2f8f5b; --bad:#b4472f; }
[hidden] { display:none !important; }
@media (prefers-color-scheme: dark) { :root { --bg:#1b1722; --card:#262030; --ink:#f1ecf7; --soft:#a79db6; --line:#3a3246; --gold:#d99a3c; --goldInk:#1b1722; --ok:#58c48a; --bad:#e9806a; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
main { max-width:520px; margin:0 auto; padding:24px 16px 48px; }
h1 { font-size:24px; margin:8px 0 6px; }
h2 { font-size:17px; margin:28px 0 10px; }
h3 { font-size:15px; margin:16px 0 6px; }
p { margin:6px 0; }
.soft { color:var(--soft); font-size:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:10px 0; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.row input { flex:1; min-width:0; }
.name { font-weight:700; font-size:17px; }
.price { font-weight:700; font-size:17px; }
button { font:inherit; border:0; border-radius:10px; padding:10px 16px; background:var(--gold); color:var(--goldInk); font-weight:700; cursor:pointer; white-space:nowrap; }
button[disabled] { opacity:.45; cursor:default; }
button.plain { background:transparent; color:var(--ink); border:1px solid var(--line); font-weight:400; }
input { font:inherit; width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); }
.codebox { border:2px dashed var(--gold); border-radius:12px; padding:14px 8px 10px; margin:10px 0 8px; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.code { font:700 27px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:1.5px; word-break:break-all; -webkit-user-select:all; user-select:all; }
.codebox .soft { font-size:12px; margin-top:4px; }
button.wide { width:100%; padding:13px 16px; font-size:17px; }
button.done { background:var(--ok); color:#fff; }
.card.fresh { border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,134,42,.25); }
.ok { color:var(--ok); } .bad { color:var(--bad); }
.types { display:flex; gap:8px; margin:6px 0 2px; }
.types label { border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:14px; }
.types input { width:auto; margin-right:4px; }
#qrImg { display:block; width:220px; max-width:60vw; height:auto; margin:10px auto; border-radius:10px; }
ol { padding-left:20px; margin:6px 0; }
footer { margin-top:32px; }