/* Zaddr app — shared styles. Same world as zaddr.net: black, gold, system
   type, monospace for anything that is a value. */
:root{
  --bg:#000; --panel:#0a0a0a; --line:#1e1e1e; --line2:#2c2c2c;
  --ink:#f2f2f2; --dim:#a6a6a6; --faint:#6a6a6a; --ghost:#333;
  --gold:#f4b728; --ok:#4ad07f; --bad:#ff5c5c;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;min-height:100dvh}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}
.top{display:flex;align-items:center;gap:16px;padding:0 clamp(18px,3vw,40px);height:64px;border-bottom:1px solid var(--line)}
.top .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3em;font-size:13px}
.top .brand img{height:20px;width:auto;image-rendering:pixelated}
.top .sp{margin-left:auto}
.top nav{display:flex;gap:22px;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.top nav a:hover{color:var(--ink)}
.top nav a.gold{color:var(--gold)}
.wrap{max-width:720px;margin:0 auto;padding:clamp(28px,5vw,64px) clamp(18px,3vw,40px) 80px}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
h1{font-size:clamp(34px,6vw,56px);line-height:1;letter-spacing:-.04em;font-weight:800;margin:14px 0 16px;text-wrap:balance}
h1 .g{color:var(--gold)}
.sub{color:var(--dim);font-size:18px;margin:0 0 28px;max-width:52ch}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:#000;border:1px solid var(--gold);font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;padding:16px 26px;cursor:pointer;transition:background .15s}
.btn:hover{background:#ffc94a}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:rgba(244,183,40,.1)}
.btn.plain{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.plain:hover{border-color:#666}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.card{border:1px solid var(--line);background:var(--panel);padding:clamp(18px,3vw,28px)}
label{display:block;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:18px 0 8px}
input,textarea{width:100%;background:#000;border:1px solid var(--line2);color:var(--ink);font:400 15px/1.5 var(--mono);padding:12px 14px;outline:0}
input:focus,textarea:focus{border-color:var(--gold)}
input.bad,textarea.bad{border-color:var(--bad)}
textarea{min-height:88px;resize:vertical}
.hint{font:400 12.5px/1.5 var(--mono);color:var(--faint);margin:8px 0 0}
.hint.bad{color:var(--bad)} .hint.ok{color:var(--ok)}
.at{color:var(--faint)}
.badge{display:inline-block;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;border:1px solid var(--line2);color:var(--dim);margin:0 6px 6px 0}
.badge.approved{color:var(--ok);border-color:var(--ok)}
.badge.early{color:var(--gold);border-color:var(--gold)}
.qr{background:#fff;padding:12px;display:inline-block;line-height:0}
.qr svg{width:220px;height:220px;display:block}
.addr{font:400 12.5px/1.6 var(--mono);color:var(--dim);word-break:break-all}
.kv{display:grid;grid-template-columns:140px 1fr;gap:10px 16px;font-size:14px;margin:0;padding:0}
.kv dt{font:500 11px/1.9 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0}
.kv dd{margin:0;color:var(--dim)}
.foot{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);font:400 11px/1.8 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

[hidden]{display:none!important}