:root{--bg:#f4f6fa;--fg:#161a2b;--card:#fff;--bd:#dde1ea;--mut:#5f6580;--pri:#3b6fe0}
@media (prefers-color-scheme:dark){:root{--bg:#0e1020;--fg:#f1f3fb;--card:#181b30;--bd:#2a2e4a;--mut:#a3a8c6}}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--bg);color:var(--fg);font-family:Tajawal,Inter,system-ui,sans-serif}
.card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:28px 22px;text-align:center}
.logo{border-radius:18px}
h1{font-size:1.35rem;margin:14px 0 6px}
.muted{color:var(--mut);margin:0 0 14px;line-height:1.6}
.small{font-size:.85rem}
.codebox{display:flex;gap:8px;align-items:center;justify-content:center;margin:12px 0 18px}
.codebox span{font-weight:700;font-size:1.25rem;letter-spacing:.08em;border:1px dashed var(--bd);border-radius:12px;padding:8px 14px}
.codebox button,.link{background:none;border:0;color:var(--pri);font:inherit;cursor:pointer;padding:8px}
.actions{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.btn{display:block;padding:13px;border-radius:12px;border:1px solid var(--bd);color:var(--fg);text-decoration:none;font-weight:700}
.qr{width:160px;margin:0 auto 14px;background:#fff;padding:6px;border-radius:12px}
.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}
[hidden]{display:none!important}