:root { --bg:#0b1220; --fg:#f7f8fa; --muted:#a2acc0; --card:#121a2d; --brand:#14582F; --radius:18px; }
*{box-sizing:border-box}
body{ margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
.wrap{ max-width:960px; margin:0 auto; padding:24px; }
.card{ background:var(--card); border-radius:var(--radius); padding:28px; box-shadow:0 14px 36px rgba(0,0,0,.35); }
h1{ margin:0 0 8px; font-size:clamp(28px,4vw,40px); }
.lead{ color:var(--muted); margin:0 0 16px; }
.grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 16px; border-radius:12px; background:#1d2845; color:var(--fg); text-decoration:none; border:1px solid rgba(255,255,255,.08); }
.btn:hover{ border-color:rgba(255,255,255,.25); }
.badge{ display:inline-block; padding:4px 10px; border-radius:999px; background:rgba(20,88,47,.14); color:#c5f2d6; border:1px solid rgba(20,88,47,.35); font-size:12px; }
.qr-area{ margin-top:18px; display:grid; gap:16px; grid-template-columns:1fr; }
.qr-item{ position:relative; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px; text-align:center; background:#0f1730; }
.qr-item img.qr{ width:100%; height:auto; border-radius:12px; background:#fff; }
.qr-logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:170px; height:170px; border-radius:44px; background:#fff; padding:12px; box-shadow:0 0 0 8px #fff, 0 10px 30px rgba(0,0,0,.22); }
.qr-logo img{ width:100%; height:100%; display:block; border-radius:28px; }
hr.sep{ border:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); margin:18px 0; }
.alert{ background:#0f1730; border:1px solid rgba(255,255,255,.12); padding:12px 14px; border-radius:12px; }
.small.muted{ color:var(--muted); font-size:13px; }
.center{ text-align:center; }