:root { --ink:#211f1b; --muted:#776f63; --paper:#f2ede1; --paper2:#fbf8ef; --line:#d8cdbb; --red:#9c3f33; --gold:#a9823f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:14px/1.65 "Noto Serif SC","Songti SC","SimSun",serif; }
.wrap { max-width:1180px; margin:0 auto; padding:28px 22px 60px; }
header { display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid var(--line); padding-bottom:14px; }
.brand { font-size:30px; letter-spacing:.2em; }
.sub { color:var(--muted); font-size:12px; letter-spacing:.12em; margin-top:4px; }
.tabs { display:flex; gap:6px; margin:22px 0; }
.tabs button { background:transparent; border:1px solid var(--line); color:var(--muted); padding:8px 18px; font:inherit; cursor:pointer; }
.tabs button.active { background:var(--ink); color:var(--paper2); border-color:var(--ink); }
.grid { display:grid; grid-template-columns:1.1fr .9fr; gap:16px; }
.card { background:var(--paper2); border:1px solid var(--line); padding:18px; }
h2 { font-size:15px; font-weight:normal; letter-spacing:.12em; margin:0 0 12px; border-left:3px solid var(--red); padding-left:10px; }
label { display:block; color:var(--muted); font-size:12px; margin:12px 0 4px; }
select,input { width:100%; padding:9px 11px; background:#fffdf7; border:1px solid var(--line); font:inherit; color:var(--ink); }
button.primary { width:100%; margin-top:16px; padding:11px; background:var(--ink); color:var(--paper2); border:1px solid var(--ink); font:inherit; letter-spacing:.1em; cursor:pointer; }
button.primary:hover { background:var(--red); border-color:var(--red); }
button.primary:disabled { opacity:.5; cursor:default; }
.code { font-size:44px; letter-spacing:.35em; text-align:center; padding:18px 8px 8px; color:var(--red); min-height:70px; }
.preview { min-height:300px; background:#171613; border:1px solid #2b2823; position:relative; overflow:hidden; display:grid; place-items:center; }
.preview video { width:100%; height:100%; min-height:300px; object-fit:contain; display:none; }
.preview .scan { position:absolute; inset:18px; border:1px solid #3d382f; pointer-events:none; }
.preview .label { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#a6a093; pointer-events:none; }
.preview .label b { display:block; color:#efe8d8; font-size:17px; font-weight:normal; letter-spacing:.1em; }
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
.stat { border:1px solid var(--line); padding:9px 11px; background:#f7f2e7; }
.stat .k { color:var(--muted); font-size:11px; }
.stat .v { font-size:19px; margin-top:2px; }
.ok { color:#3d6b4f; }
.bad { color:var(--red); }
.note { color:var(--muted); font-size:12px; margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
@media (max-width:820px) { .grid { grid-template-columns:1fr; } }