:root { --neon: #a8ff2e; --bg: #070b07; --card: #0b120b; --text: #eaffc7; --muted: #9fb38a; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; font-family: Vazir, system-ui, sans-serif; background: radial-gradient(circle at top, #182418, var(--bg)); color: var(--text); } .page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; } .logo img { width: 200px; margin-bottom: 28px; } .auth-card { width: 100%; max-width: 360px; background: radial-gradient(circle at top, #1a2a1a, var(--card)); border: 2px solid var(--neon); border-radius: 28px; padding: 22px; box-shadow: 0 14px 34px rgba(168,255,46,.25); } /* Tabs */ .tabs { display: flex; margin-bottom: 18px; } .tab { flex: 1; height: 42px; border: none; background: transparent; color: var(--muted); border-bottom: 2px solid transparent; font-size: 13px; cursor: pointer; } .tab.active { color: var(--neon); border-color: var(--neon); } /* Steps */ .step { display: none; } .step.active { display: block; } .step input, .step button { width: 100%; } /* Inputs */ .step input { height: 50px; border-radius: 14px; border: 2px solid var(--neon); background: transparent; color: var(--text); padding: 0 12px; font-size: 13px; margin-bottom: 12px; } .step input::placeholder { color: var(--muted); } /* Button */ .primary { height: 52px; border-radius: 16px; border: none; background: radial-gradient(circle, #dfff9a, var(--neon)); color: #0b120b; font-size: 14px; cursor: pointer; } /* OTP */ .hint, .timer { font-size: 12px; text-align: center; color: var(--muted); } .otp { display: flex; justify-content: center; gap: 10px; margin: 12px 0; } .otp input { width: 56px; height: 56px; padding: 0; border-radius: 14px; border: 2px solid var(--neon); background: transparent; text-align: center; font-size: 20px; color: var(--text); } /* Links */ .link { font-size: 12px; text-align: center; color: var(--muted); } .link a { color: var(--neon); text-decoration: none; } /* Alerts */ .alert { display: none; padding: 12px; border-radius: 10px; margin-bottom: 12px; text-align: center; font-size: 13px; } .alert.success { background: #1e3b1e; color: #a8ff2e; } .alert.warning { background: #3b341e; color: #ffe58a; } .alert.error { background: #3b1e1e; color: #ff9a9a; } =========================== /