:root { --bg: #05060a; --line: rgba(255,255,255,.1); --fg: #f4f5f8; --muted: #a6a9b8; --dim: #6a6d7c; --bad: #ff5d5d; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(80% 60% at 50% 0%, rgba(123,97,255,.14), transparent 70%), var(--bg); color: var(--fg); font: 400 15px/1.7 "IBM Plex Sans Arabic", system-ui, sans-serif; }
.card { position: relative; overflow: hidden; width: min(420px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; padding: 34px 26px 28px; border-radius: 28px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.card::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg,#ff4d4d,#ffad33,#f5ea2b,#3ddc84,#2eaaff,#7b61ff); }
.logo { width: 96px; }
h1 { margin: 0; font-size: 22px; font-weight: 600; }
p { margin: 0; color: var(--muted); }
.gbtn { min-height: 44px; display: grid; place-items: center; }
.err { color: var(--bad); }
small { color: var(--dim); font-size: 12.5px; }
[hidden] { display: none !important; }