:root { --bg: #0b0f14; --panel: #121821; --border: #2b3a4c; --text: #e6edf3; --muted: #8b98a5; --accent: #3b82f6; --down: #ea3943; color-scheme: dark; }
@media (prefers-color-scheme: light) { :root { --bg: #f5f7fa; --panel: #fff; --border: #cfd8e3; --text: #0f172a; --muted: #5b6b7d; --accent: #2563eb; --down: #d92d3a; color-scheme: light; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.6 -apple-system, BlinkMacSystemFont, 'SF Arabic', 'Segoe UI', system-ui, sans-serif; }
body { display: grid; place-items: center; padding: 20px; }
.box { width: min(360px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px; text-align: center; }
.mark { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 12px; display: grid; place-items: center; color: #fff; font-size: 22px; background: linear-gradient(135deg, #16c784, #3b82f6); }
h1 { font-size: 20px; margin: 0 0 4px; }
p { color: var(--muted); margin: 0 0 18px; font-size: 13px; }
.pin { display: flex; gap: 8px; justify-content: center; direction: ltr; margin-bottom: 14px; }
.pin input { width: 44px; height: 54px; text-align: center; font: 700 22px ui-monospace, Menlo, monospace; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text); outline: none; }
.pin input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
button { width: 100%; height: 42px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: 600 15px inherit; cursor: pointer; }
button:disabled { opacity: .6; cursor: default; }
.err { color: var(--down); min-height: 22px; font-size: 13px; margin-top: 10px; }