:root { --bg1:#160b1d; /* بنفش خیلی تیره */ --bg2:#2a0f3a; /* بنفش تیره */ --panel:#1b1122cc; /* شیشه‌ای */ --txt:#f5f5f7; --muted:#c9b8d6; --brand:#ffcf3d; /* طلایی */ --brand2:#ff9d00; /* نارنجی/طلایی پررنگ */ --accent:#9d5de8; /* بنفش روشن */ --radius:18px; --shadow:0 10px 35px rgba(0,0,0,.45); }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font-family:"Vazirmatn",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--txt); background: radial-gradient(40px 40px at 10% 15%, rgba(181,117,255,.18), transparent 45%), radial-gradient(60px 60px at 85% 10%, rgba(181,117,255,.12), transparent 55%), radial-gradient(70px 70px at 25% 80%, rgba(181,117,255,.14), transparent 60%), radial-gradient(500px 500px at 50% -20%, var(--bg2), transparent 70%), linear-gradient(180deg, var(--bg2), var(--bg1)); min-height:100dvh; display:flex; align-items:flex-start; justify-content:center; padding:32px 16px 64px; }
.wrap { width:min(980px,100%); }
.hero { display:flex; align-items:center; justify-content:center; gap:12px; text-align:center; margin:8px auto 20px; filter:drop-shadow(0 8px 24px rgba(0,0,0,.45)); }
.hero .logo { font-size:56px; line-height:1; transform:translateY(6px); }
.hero h1 { margin:0; font-weight:900; letter-spacing:.5px; font-size:44px; background:linear-gradient(180deg, var(--brand), var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sub { opacity:.85; color:var(--muted); text-align:center; margin-top:6px; }
.panel { background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 18px 22px; backdrop-filter:blur(6px); }
.form { display:grid; grid-template-columns:1fr 180px auto; gap:10px; align-items:center; }
.form label { font-size:14px; opacity:.9; }
.input, .select, .btn { border-radius:12px; border:1px solid rgba(255,255,255,.15); background:#0f0a14; color:#fff; outline:none; height:44px; padding:0 12px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.input::placeholder { color:#9e8fb0; }
.select { appearance:none; background-image:linear-gradient(45deg, transparent 50%, #cdbcf2 50%), linear-gradient(135deg, #cdbcf2 50%, transparent 50%); background-position:calc(100% - 18px) 18px, calc(100% - 12px) 18px; background-size:6px 6px; background-repeat:no-repeat; }
.btn { background:linear-gradient(180deg, var(--accent), #6f39c9); border:none; padding:0 16px; cursor:pointer; font-weight:800; transition:transform .06s ease, filter .2s ease; white-space:nowrap; }
.btn:hover { filter:brightness(1.08); }
.btn:active { transform:translateY(1px); }
.rules { margin-top:24px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:18px 18px 20px; box-shadow:var(--shadow); }
.rules h2 { margin:0 0 10px; font-size:18px; }
.rules ol { margin:0; padding-inline-start:22px; line-height:1.9; }
.rules li { color:#e9def6; }
@media (max-width:720px) { .hero h1 { font-size:36px; } .hero .logo { font-size:46px; } .form { grid-template-columns:1fr; gap:8px; } .btn { width:100%; } }