:root{--canvas: #f3efe7;--surface: #fffdf8;--ink: #18212b;--muted: #52606d;--navy: #15324a;--navy-2: #0e2637;--orange: #e4552f;--green: #176b4d;--red: #b4232e;--line: #c9c1b5;--shadow: 0 8px 24px rgba(24, 33, 43, .08);--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}.header{padding:20px 5vw;background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.header strong{letter-spacing:.14em}.badge{font:11px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.35)}.badge.online{color:#bff0d8;border-color:#2f8f66}.badge.offline{color:#ffd6c8;border-color:var(--orange)}.layout{max-width:1180px;margin:32px auto;padding:0 24px;display:grid;grid-template-columns:2fr 1fr;gap:24px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:24px;box-shadow:var(--shadow)}.eyebrow{font:12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}h1{font-size:clamp(28px,4vw,44px);margin:8px 0 12px}.screen{min-height:420px;background:var(--navy);color:#fff;padding:32px;border-radius:4px;display:flex;flex-direction:column;justify-content:space-between}.screen h2{font-size:32px;margin:0}.screen .hint{color:#b9c9d5}.scanner{border:3px dashed var(--orange);border-radius:6px;min-height:150px;display:grid;place-items:center;background:var(--navy-2);margin:26px 0;color:#ffe7dc;font:14px var(--mono);letter-spacing:.1em;text-align:center;padding:16px}.scanner.valid{border-color:#34c98a;color:#bff0d8}.scanner.rejected{border-color:var(--red);color:#ffd0d3}.amount{font:700 40px var(--mono);margin:8px 0}label{display:block;font-weight:700;margin-bottom:8px}textarea,input{width:100%;padding:14px;border:1px solid var(--line);border-radius:4px;font:14px var(--mono);background:var(--surface);color:var(--ink);resize:vertical}.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}button{min-height:48px;border:0;border-radius:4px;padding:0 20px;background:var(--orange);color:#fff;font-weight:800;cursor:pointer;transition:transform .05s ease,opacity .15s ease}button:active{transform:translateY(1px)}button.secondary{background:var(--surface);color:var(--navy);border:1px solid var(--navy)}button:disabled{opacity:.4;cursor:not-allowed}.status{padding:14px 16px;border-left:4px solid var(--orange);background:#f9e3dc;margin-top:18px;border-radius:0 4px 4px 0}.status.success{border-color:var(--green);background:#e2f0e8}.status.error{border-color:var(--red);background:#f8e1e3}.log{padding:0;list-style:none;margin:12px 0 0;max-height:320px;overflow:auto}.log li{padding:10px 0;border-bottom:1px solid var(--line);font:12px var(--mono)}.log li .t,small{color:var(--muted)}.scanner-live{margin:8px 0 4px}.scanner-frame{position:relative;width:100%;aspect-ratio:1 / 1;background:var(--navy-2);border-radius:6px;overflow:hidden;display:grid;place-items:center}.scanner-frame video{width:100%;height:100%;object-fit:cover}.scanner-reticle{position:absolute;top:18%;right:18%;bottom:18%;left:18%;border:3px solid var(--orange);border-radius:8px;box-shadow:0 0 0 2000px #0e263759;pointer-events:none}@media(max-width:860px){.layout{grid-template-columns:1fr;margin-top:16px}.screen{min-height:340px}}