:root { --bg:#FFFFFF; --bg2:#F5F5F7; --paper:#FDFCFA; --ink:#1D1D1F; --soft:#6E665C; --faint:#A69C8E;
    --hair:rgba(29,29,31,.1); --hair2:rgba(29,29,31,.18); --green:#5C7A52; --red:#B3261E;
    --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--bg2); color:var(--ink); font-family:var(--display); -webkit-font-smoothing:antialiased; }
  .wrap { width:min(560px, 100% - 40px); margin:0 auto; padding:34px 0 80px; }
  .brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.05em; font-size:21px; text-decoration:none; color:inherit; }
  .brand img { width:24px; height:24px; display:block; }
  h1 { font-size:clamp(34px,7vw,44px); line-height:1; letter-spacing:-.045em; font-weight:800; margin:34px 0 12px; }
  .lede { font:400 14.5px/1.6 var(--mono); color:var(--soft); margin:0 0 26px; max-width:46ch; }
  .sheet { background:var(--paper); box-shadow:0 24px 50px -24px rgba(14,13,12,.3), 0 0 0 1px rgba(14,13,12,.05); padding:24px 22px; margin-bottom:18px; position:relative; }
  .sheet::after { content:""; position:absolute; left:0; right:0; bottom:-9px; height:9px; background:var(--paper);
    clip-path:polygon(0 0,100% 0,100% 100%,96% 0,92% 100%,88% 0,84% 100%,80% 0,76% 100%,72% 0,68% 100%,64% 0,60% 100%,56% 0,52% 100%,48% 0,44% 100%,40% 0,36% 100%,32% 0,28% 100%,24% 0,20% 100%,16% 0,12% 100%,8% 0,4% 100%,0 0); }
  .k { font:600 10.5px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin-bottom:14px; }
  .rule { border-top:2px dashed #D9D1C4; margin:16px 0; }
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; padding:0 22px; border:0; background:var(--ink); color:#fff; cursor:pointer;
    font:600 12.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; transition:transform .2s, box-shadow .2s; }
  .btn:hover { transform:translateY(-1px); box-shadow:0 14px 30px -14px rgba(14,13,12,.6); }
  .btn:disabled { opacity:.45; cursor:default; transform:none; box-shadow:none; }
  .btn.ghost { background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--hair2); }
  input[type=text] { width:100%; min-height:50px; padding:0 14px; border:0; background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--hair2);
    font:500 13px/1 var(--mono); letter-spacing:.02em; }
  input[type=text]:focus { outline:0; box-shadow:inset 0 0 0 1.5px var(--ink); }
  .or { text-align:center; font:500 10.5px/1 var(--mono); letter-spacing:.2em; color:var(--faint); margin:14px 0; }
  .row { display:flex; justify-content:space-between; gap:12px; font:500 12px/1.5 var(--mono); padding:8px 0; }
  .row .m { color:var(--soft); }
  .row b { color:var(--green); font-weight:600; white-space:nowrap; }
  .qr { display:grid; place-items:center; padding:18px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair); margin:6px 0 14px; }
  .qr img, .qr canvas { display:block; }
  .link { font:500 11px/1.5 var(--mono); color:var(--soft); word-break:break-all; padding:12px 14px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair); }
  .cap { margin-top:14px; }
  .bar { height:6px; background:var(--hair); margin-top:8px; overflow:hidden; }
  .bar i { display:block; height:100%; background:var(--green); width:0; transition:width .6s cubic-bezier(.2,.75,.2,1); }
  .status { font:500 12px/1.6 var(--mono); color:var(--soft); margin-top:12px; min-height:1.6em; }
  .status.bad { color:var(--red); }
  .status.ok { color:var(--green); }
  .fine { font:400 11px/1.7 var(--mono); color:var(--faint); margin-top:26px; }
  [hidden] { display:none !important; }
  .brands { display:flex; flex-wrap:wrap; gap:8px; }
  .brands span { font:600 11.5px/1 var(--mono); letter-spacing:.04em; padding:8px 11px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair2); }
  .brands span b { color:var(--green); margin-left:6px; font-weight:700; }
  .brands.dim span { color:var(--faint); box-shadow:inset 0 0 0 1px var(--hair); }
  .sheet.soon { background:var(--ink); color:#fff; } .sheet.soon .k { color:rgba(255,255,255,.55); } .sheet.soon .status { color:rgba(255,255,255,.85); font-size:13px; }
  .sheet.soon::after { background:var(--ink); }
  .two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  @media (max-width:420px) { .two { grid-template-columns:1fr; } }