:root{color-scheme:dark;--bg:#0f1b2d;--text:#f7f5f1;--muted:#cad4df;--green:#3fa796;--line:#344458;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);min-height:100svh}button,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #e8622c;outline-offset:4px}[hidden]{display:none!important}
main{width:min(100%,480px);margin:auto;padding:calc(18px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}.brand{display:flex;align-items:center;justify-content:space-between}.brand a{text-decoration:none;font-weight:850;font-size:22px;line-height:1.05;letter-spacing:.3px}.accent{width:36px;height:3px;background:#e8622c}.intro h1{margin:0 0 4px;font-size:clamp(26px,7vw,32px);letter-spacing:-.8px;line-height:1.15}.intro p{margin:0;color:var(--muted);font-size:16px;line-height:1.45}h2{font-size:19px;line-height:1.3;margin:0}p{line-height:1.5}.panel{padding:18px;background:#16243a;border:1px solid #2a3b50;border-radius:16px}.panel>p{font-size:14px;color:var(--muted);margin:10px 0 14px}form{display:flex;flex-direction:column;gap:10px}label{font-size:13px;color:var(--muted)}textarea{resize:vertical;min-height:72px;max-height:160px;width:100%;padding:12px;background:var(--bg);border:1px solid #59758a;border-radius:10px;color:white;font-size:16px}textarea::placeholder{color:#9bafc3}.primary,.secondary{min-height:46px;padding:12px 15px;border-radius:10px;font-weight:700;font-size:15px;line-height:1.25;text-align:center}.primary{background:var(--green);color:#081c26;border:1px solid var(--green)}.secondary{background:transparent;color:var(--text);border:1px solid #59758a}.primary:disabled{opacity:.65;cursor:wait}.registration{display:block;margin-top:16px;font-size:14px;text-underline-offset:4px}.text-button{border:0;background:transparent;color:#bbc9d7;text-decoration:underline;text-underline-offset:4px;min-height:38px;padding:8px 4px;font-size:13px}.panel .text-button{display:block;margin:8px auto 0}.customer-card{border-radius:18px;background:#fff;color:#101820;display:flex;flex-direction:column;align-items:center;padding:14px 16px 18px;gap:3px}#qr{display:block;width:min(68vw,264px,38svh);height:auto;aspect-ratio:1;image-rendering:pixelated}.number{font-size:clamp(29px,8vw,36px);font-variant-numeric:tabular-nums;letter-spacing:1px;line-height:1.1}.card-label{color:#4d5a69;font-size:10px;letter-spacing:2px;margin-top:4px}.demo-label{font-size:11px;letter-spacing:1px;color:#8c3e17;font-weight:750}.card-status{font-size:13px;color:#a6d9d0;line-height:1.4;margin:0;min-height:18px}.install-suggestion{display:grid;grid-template-columns:48px 1fr;gap:10px 12px;background:#16243a;border:1px solid #2a3b50;border-radius:14px;padding:14px}.install-suggestion img{border-radius:12px}.install-suggestion h2{font-size:15px;margin-bottom:3px}.install-suggestion p{font-size:12px;line-height:1.4;margin:0;color:var(--muted)}.install-suggestion button{grid-column:1/-1;min-height:44px}.card-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.card-actions .secondary{width:100%}footer{border-top:1px solid var(--line);padding-top:8px}footer>a{min-height:40px;display:flex;align-items:center;gap:10px;text-decoration:none;font-size:14px}footer>a span:first-child{color:#e8622c;font-size:23px}footer>a span:last-child{margin-left:auto;color:#a6d9d0;font-size:24px}footer p{font-size:11px;line-height:1.5;color:#abbccd;margin:4px 0 0}.error{font-size:14px;padding:12px;margin:0;border:1px solid #aa6250;background:#482b2c;color:#ffd2c2;border-radius:10px}.small{font-size:12px;color:var(--muted)}dialog{background:#16243a;color:var(--text);border:1px solid #59758a;border-radius:18px;padding:0;width:min(92vw,420px);max-height:85svh}dialog::backdrop{background:#050c18bf}.dialog-content{padding:24px;display:flex;flex-direction:column;gap:14px}.dialog-content p{margin:0}.dialog-content ol{padding-left:22px;line-height:1.65;margin:0}.dialog-content li+li{margin-top:9px}.dialog-content strong{color:#a6d9d0}
#qr{width:min(68vw,264px,38svh)!important;height:auto!important}
@media(max-height:750px){main{gap:10px;padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom))}.brand a{font-size:19px}.intro h1{font-size:25px}.intro p{font-size:14px}.install-suggestion{padding:10px;gap:8px}.customer-card{padding:8px 12px 12px}#qr{width:min(64vw,240px,32svh)!important}.number{font-size:29px}footer p{font-size:10px}}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s}button:hover{filter:brightness(1.1)}}
.has-card main{gap:10px;padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}.has-card .brand a{font-size:19px}.has-card .intro h1{font-size:26px}.has-card .intro p{font-size:14px}.has-card .customer-card{padding:8px 12px 12px}.has-card #qr{width:min(62vw,240px,30svh)!important}.has-card .number{font-size:29px}.has-card .install-suggestion{padding:10px;grid-template-columns:36px 1fr;gap:8px 10px}.has-card .install-suggestion img{width:36px;height:36px;border-radius:9px}.has-card .install-suggestion h2{font-size:14px}.has-card .install-suggestion p{display:none}.has-card .install-suggestion>div{align-self:center}.has-card .install-suggestion button{min-height:42px}.has-card .card-actions{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:8px}.has-card .card-actions .secondary{font-size:12px;min-height:42px}.has-card .footer-note{display:none}.has-card footer{padding-top:4px}.has-card footer>a{min-height:34px}#card-settings{color:#bbc9d7;font-size:12px}#card-settings summary{display:flex;align-items:center;justify-content:center;border:1px solid #344458;border-radius:10px;cursor:pointer;min-height:42px;padding:10px 8px}#card-settings[open]{grid-column:1/-1}#card-settings .text-button{width:100%}
@media(max-height:750px){.has-card main{gap:8px}.has-card .card-status{font-size:12px}.has-card #qr{width:min(62vw,240px,28svh)!important}}
.has-card footer{display:flex;align-items:center;gap:10px}.has-card footer>a{flex:1;font-size:12px}.has-card footer>a span:last-child{display:none}.has-card footer .privacy-link{display:block;margin:0;font-size:11px}.has-card footer .privacy-link a{display:inline-flex;align-items:center;min-height:34px}