:root{color-scheme:dark;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#0d130f;color:#f5f7ef}
*{box-sizing:border-box}
body{margin:0;background:#0d130f}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
a{color:inherit;text-decoration:none}
.app{width:min(100%,500px);min-height:100dvh;margin:0 auto;padding:12px 14px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:9px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}
.brand{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:850;letter-spacing:.11em;white-space:nowrap}
.brand b{color:#d5f86c}
.mark{display:grid;place-items:center;flex:none;width:36px;height:36px;background:#d5f86c;border-radius:10px;color:#15200f;font-size:27px;font-weight:950;font-style:italic;letter-spacing:-.12em;padding-right:4px}
.demo-tag{border:1px solid #516a43;color:#d5f86c;border-radius:99px;padding:4px 7px;font-size:10px;font-weight:800;letter-spacing:.08em}
.context{display:flex;align-items:baseline;gap:7px;white-space:nowrap;overflow:hidden;font-size:15px}
.context strong{font-size:17px;overflow:hidden;text-overflow:ellipsis}
.context span{color:#b6c5af;font-size:13px;overflow:hidden;text-overflow:ellipsis}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tabs button{height:42px;border-radius:10px;border:1px solid #42523c;background:#233021;color:#f3f6eb;font-weight:750}
.tabs button[aria-selected=true]{background:#d5f86c;border-color:#d5f86c;color:#15200f}
#screen{flex:1;min-height:0}
.card{border:1px solid #344331;border-radius:15px;background:#192019;padding:14px;margin:0}
.card h1{font-size:23px;line-height:1.1;margin:0 0 8px;letter-spacing:-.025em}
.card h2{font-size:16px;margin:0 0 7px}
.muted{color:#b7c4b1}
.small{font-size:12px}
.intro{margin:0 0 10px;color:#b7c4b1;font-size:13px;line-height:1.35}
.result{border:1px solid #3b5634;border-radius:12px;background:#101a11;padding:13px;margin:0 0 10px}
.result.success{background:#102410;border-color:#3d7433}
.result.warning{background:#261e0d;border-color:#806615}
.result.danger{background:#2a1919;border-color:#915446}
.result.center{text-align:center;padding:22px 15px}
.result.center .symbol{margin:2px auto 9px}
.symbol{display:grid;place-items:center;width:42px;height:42px;border-radius:99px;border:2px solid #d5f86c;color:#d5f86c;font-size:29px;font-weight:800}
.warning .symbol{border-color:#ffd056;color:#ffd056}
.danger .symbol{border-color:#fa9b8c;color:#fa9b8c}
.result-title{display:block;font-weight:800;font-size:20px;line-height:1.15;margin:3px 0 5px}
.warning .result-title{color:#ffd056}
.danger .result-title{color:#fa9b8c}
.result-code{display:block;color:#d5f86c;font-size:clamp(31px,9vw,43px);line-height:1.08;letter-spacing:.01em;font-weight:900;margin:4px 0 6px;overflow-wrap:anywhere}
.result-code.mini{font-size:26px}
.result p{margin:5px 0;color:#ecf2e7;line-height:1.3}
.result p:last-child{margin-bottom:0}
.result .detail{font-size:13px;color:#bdcbb7}
.notice{display:flex;align-items:center;gap:9px;border-left:3px solid #d5f86c;border-radius:8px;background:#283724;color:#e6efd8;padding:9px 10px;margin:0 0 10px;font-size:13px;line-height:1.3}
.notice.warning{border-color:#ffd056;background:#342a17;color:#ffdda0}
.notice.success{border-color:#8cefaa;background:#203c27;color:#c8f8d0}
.form-label{display:block;color:#edf4e7;font-size:12px;font-weight:750;margin:10px 0 6px}
.qr-input{display:block;width:100%;height:42px;border-radius:9px;border:1px solid #435540;background:#101710;color:#f5f7ef;padding:8px 10px;outline:0}
.qr-input:focus{border-color:#d5f86c}
.qr-input::placeholder{color:#869482}
.scanner{height:145px;display:grid;place-items:center;gap:0;border:1px solid #4a5d46;border-radius:10px;background:#111912;margin:8px 0 10px;color:#d5f86c;text-align:center;overflow:hidden}
.scanner video{display:block;width:100%;height:100%;object-fit:contain;grid-area:1/1;background:#050a06}
.scanner video[hidden]{display:none}
.scanner:has(video:not([hidden])){height:clamp(260px,52dvh,460px)}
.scanner:has(video:not([hidden])) .scanner-icon,.scanner:has(video:not([hidden])) span:last-child{display:none}
.scanner-icon{font-size:66px;font-weight:200;line-height:.9}
.scanner span:last-child{font-size:12px;color:#d1dbca;margin-top:-23px}
.row{display:flex;gap:8px;margin:0 0 9px}
.row>*{flex:1;min-width:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:43px;padding:8px 11px;border-radius:9px;border:1px solid #53664d;background:#263321;color:#f5f7ef;font-weight:750;text-align:center;font-size:14px}
.btn.primary{background:#d5f86c;border-color:#d5f86c;color:#15200f}
.btn.outline-warning{background:transparent;border-color:#c69b24;color:#ffda78}
.btn.full{width:100%}
.btn.slim{min-height:38px}
.btn.plain{border:0;background:transparent;color:#d5f86c;min-height:32px}
.code-field{border:1px solid #435540;border-radius:9px;background:#111811;padding:8px 10px;color:#e7f0df;margin:0 0 10px;font-size:13px}
.code-field span{display:block;color:#aebfa6;font-size:11px;margin-bottom:3px}
.choices{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 6px}
.choices button{min-height:37px;padding:6px 9px;border-radius:8px;border:1px solid #455641;background:#121b13;color:#f5f7ef;font-size:12px;font-weight:700}
.choices button[aria-pressed=true]{border-color:#d5f86c;background:#2b3a1d;color:#d5f86c}
.compact-result{margin:0 0 8px;padding:10px 12px}
.compact-result .result-code{font-size:clamp(29px,8vw,39px);margin:2px 0 0}
.compact-result .detail{display:block;margin-top:2px}
.below{margin-top:8px}
.compare{display:grid;grid-template-columns:1fr 20px 1fr;gap:4px;align-items:center;text-align:center}
.compare strong{display:block;color:#d5f86c;font-size:21px;white-space:nowrap}
.compare small{color:#b9c6b2}
.compare .arrow{color:#d5f86c;font-size:22px}
.more{margin-top:7px}
.more button{width:100%}
.more-menu{border:1px solid #3c4c39;border-radius:9px;padding:4px;margin-top:5px;background:#101710}
.more-menu button{display:block;width:100%;border:0;background:transparent;color:#e5eee0;text-align:left;padding:8px 10px;font-size:13px}
.more-menu button+button{border-top:1px solid #344331}
.demo-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;color:#9fad99;font-size:10px;line-height:1.2}
.demo-footer span{max-width:230px}
.footer-actions{display:flex;align-items:center;gap:6px;flex:none}
.demo-footer button,.demo-footer a{display:inline-flex;align-items:center;justify-content:center;flex:none;border:1px solid #4d6344;background:#263321;border-radius:8px;color:#d5f86c;min-height:35px;padding:5px 8px;font-weight:750;font-size:11px;text-align:center}
.drawer{position:fixed;inset:0;z-index:10;display:flex;align-items:end;justify-content:center}
.drawer[hidden]{display:none}
.drawer-shade{position:absolute;inset:0;background:#000a}
.drawer-panel{position:relative;background:#1a2219;border:1px solid #52664a;border-radius:19px 19px 0 0;width:min(100%,500px);max-height:min(82dvh,750px);overflow:auto;padding:15px 16px calc(18px + env(safe-area-inset-bottom))}
.drawer-head{display:flex;align-items:center;justify-content:space-between}
.drawer-head h2{font-size:21px;margin:0}
.drawer-head button{border:0;background:transparent;color:#f5f7ef;font-size:29px;line-height:1}
.drawer-panel p{font-size:13px;color:#b9c5b4;margin:4px 0 14px}
.case-group h3{color:#d5f86c;font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin:16px 0 6px}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.case-grid button,.quick-cases button{min-height:39px;border:1px solid #475940;background:#263222;border-radius:8px;color:#f4f7ec;padding:6px 8px;text-align:left;font-size:12px}
.quick-cases{display:grid;gap:7px}
button:focus-visible,a:focus-visible{outline:2px solid #b5a0ff;outline-offset:2px}
@media(max-height:700px){.app{gap:6px;padding-top:7px}.context{font-size:13px}.context strong{font-size:15px}.tabs button{height:38px}.card{padding:10px}.card h1{font-size:20px}.scanner{height:105px}.result.center{padding:14px 12px}.result-code{font-size:32px}.choices button{min-height:33px}.btn{min-height:39px}.notice{padding:7px 9px}.demo-footer button{min-height:31px}}
@media(max-width:365px){.context span{font-size:11px}.choices button{font-size:11px;padding:5px 7px}.brand{font-size:11px}.row{gap:5px}.btn{font-size:12px;padding:6px}.demo-footer{font-size:9px}.demo-footer button,.demo-footer a{font-size:10px;padding:5px}}