:root{--bg:#0b1220;--card:#0f1b33;--muted:#98a2b3;--txt:#e6e8ee;--pri:#4f8cff;--ok:#16a34a;--bad:#ef4444}
*{box-sizing:border-box}
body{margin:0;font-family:Vazirmatn,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:radial-gradient(1200px 500px at 80% -10%, #1b3b7a 0%, transparent 60%), var(--bg);color:var(--txt);direction:rtl}
.container{max-width:980px;margin:40px auto;padding:0 16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:20px;backdrop-filter: blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
h1{font-size:24px;margin:0 0 10px}
p{color:var(--muted);margin:0 0 18px;line-height:1.9}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:720px){.grid{grid-template-columns:1fr}}
label{display:block;margin:8px 0 6px;font-weight:700}
input,select{width:100%;padding:11px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(15,27,51,.7);color:var(--txt);outline:none}
input:focus,select:focus{border-color:rgba(79,140,255,.7);box-shadow:0 0 0 4px rgba(79,140,255,.15)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:11px 14px;background:var(--pri);color:white;cursor:pointer;font-weight:800}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.secondary{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.hr{height:1px;background:rgba(255,255,255,.1);margin:18px 0}
.notice{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--muted)}
.notice.ok{border-color:rgba(22,163,74,.35);color:#bbf7d0}
.notice.bad{border-color:rgba(239,68,68,.35);color:#fecaca}
.preview{display:none;text-align:center;margin-top:18px}
.preview img{max-width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.14)}
.small{font-size:12px;color:var(--muted)}
a.link{color:#c7d2fe;text-decoration:none}
a.link:hover{text-decoration:underline}