:root{
  --night:#171335; --night-2:#241d54; --night-3:#332a6b;
  --paper:#f4f3fb; --panel:#ffffff;
  --ink:#211d3d; --muted:#6f6a93; --line:#e7e4f2;
  --teal:#23b4a3; --teal-600:#1a9a8b; --teal-050:#e9f8f5;
  --gold:#ffc267; --gold-600:#eea63a; --gold-050:#fff6e6;
  --sky:#bfe9ff;
  --danger:#e2574c; --danger-bg:#fdecea;
  --good:#2fa98f; --good-bg:#e7f6f1; --info-bg:#e6f6ff;
  --r:16px; --r-sm:10px;
  --shadow:0 10px 30px -12px rgba(28,20,70,.25);
  --shadow-sm:0 4px 14px -8px rgba(28,20,70,.35);
}

*{box-sizing:border-box}
html{direction:rtl}
body{
  margin:0; font-family:"Vazirmatn",Tahoma,system-ui,sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal-600); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .4em; line-height:1.4; font-weight:800}
p{margin:0 0 1em}
.container{max-width:1080px; margin:0 auto; padding:0 20px}

/* ---------- Top bar ---------- */
.topline{height:5px;background:linear-gradient(90deg,var(--teal),var(--gold))}
.nav{background:var(--panel); box-shadow:var(--shadow-sm); position:sticky; top:0; z-index:30}
.nav .container{display:flex; align-items:center; justify-content:space-between; height:66px; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.25rem; color:var(--ink)}
.brand .dot{width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--gold),var(--teal));
  box-shadow:0 0 0 4px var(--teal-050)}
.brand b{color:var(--teal-600)}
.menu{display:flex; align-items:center; gap:22px; font-size:.98rem}
.menu a{color:var(--ink); font-weight:600}
.menu a.active{color:var(--teal-600)}
.nav .cta-login{margin:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:1rem;
  padding:12px 22px; border-radius:var(--r-sm); transition:.15s; text-decoration:none}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-teal{background:var(--teal); color:#fff}
.btn-teal:hover{background:var(--teal-600); color:#fff}
.btn-gold{background:var(--gold); color:#5a3d09}
.btn-gold:hover{background:var(--gold-600)}
.btn-ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line)}
.btn-block{width:100%}
.btn-lg{padding:15px 30px; font-size:1.08rem}

/* ---------- Hero ---------- */
.hero{background:
  radial-gradient(1200px 300px at 80% -20%,rgba(255,194,103,.18),transparent),
  linear-gradient(160deg,var(--night),var(--night-2) 60%,var(--night-3));
  color:#fff; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; inset:0;
  background-image:radial-gradient(1.4px 1.4px at 20% 30%,#fff5 40%,transparent),
   radial-gradient(1.4px 1.4px at 70% 20%,#fff6 40%,transparent),
   radial-gradient(1.2px 1.2px at 40% 70%,#fff4 40%,transparent),
   radial-gradient(1.6px 1.6px at 85% 60%,#fff5 40%,transparent),
   radial-gradient(1.2px 1.2px at 55% 45%,#fff4 40%,transparent);
  opacity:.7; pointer-events:none}
.hero .container{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr;
  gap:36px; align-items:center; padding-top:64px; padding-bottom:64px}
.hero h1{font-size:2.5rem; line-height:1.35}
.hero .lead{font-size:1.15rem; color:#d7d2f5; max-width:44ch}
.hero .lead b{color:var(--gold)}
.orb{aspect-ratio:1; border-radius:50%; position:relative;
  background:radial-gradient(circle at 35% 30%,#fff,var(--gold) 25%,var(--teal) 70%,var(--night-3));
  box-shadow:0 30px 80px -20px rgba(255,194,103,.5), inset 0 0 60px rgba(255,255,255,.25);
  max-width:340px; margin-inline:auto}
.orb::before{content:"﷽"; display:none}
.moon{position:absolute; inset:auto 18% 20% auto; width:64%; height:64%; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fffdf6,#ffe6b0 60%,#f4c877);
  box-shadow:inset -18px -12px 0 -2px rgba(0,0,0,.06)}

/* ---------- Sections / cards ---------- */
main{padding:44px 0}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:26px}
.card > .card-top{height:5px;background:linear-gradient(90deg,var(--teal),var(--gold))}
.card-body{padding:26px}
.card h2{font-size:1.35rem; display:flex; align-items:center; gap:10px}
.section-head{display:flex; align-items:center; gap:10px; margin-bottom:14px}

.notice{border-radius:var(--r-sm); padding:16px 18px; margin:0 0 20px;
  background:var(--info-bg); border:1px solid #c9ebff; color:#0f5f86}
.notice.warn{background:var(--gold-050); border-color:#ffe2ac; color:#8a5a12}
.notice.teal{background:var(--teal-050); border-color:#bfeae3; color:#0d6a5e}
.notice ul{margin:.4em 0 0; padding-inline-start:1.2em}
.notice .em{color:var(--danger); font-weight:700}

.banner{background:var(--night-2); color:#eee; border-radius:var(--r);
  padding:22px; text-align:center; font-size:1.05rem; margin-bottom:26px}

.flash{border-radius:var(--r-sm); padding:14px 18px; margin-bottom:18px; font-weight:600}
.flash.ok{background:var(--good-bg); color:#12715c; border:1px solid #b8e6d8}
.flash.err{background:var(--danger-bg); color:#a5271d; border:1px solid #f3c3bd}
.flash.info{background:var(--info-bg); color:#0f5f86; border:1px solid #c9ebff}

/* ---------- Forms ---------- */
label{display:block; font-weight:700; margin-bottom:8px}
.input,textarea.input{width:100%; padding:13px 15px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); font-family:inherit; font-size:1rem; background:#fff; color:var(--ink)}
.input:focus,textarea.input:focus{outline:none; border-color:var(--teal);
  box-shadow:0 0 0 4px var(--teal-050)}
textarea.input{min-height:150px; resize:vertical}
.field{margin-bottom:20px}
.help{color:var(--muted); font-size:.9rem; margin-top:6px}
.err-text{color:var(--danger); font-size:.9rem; margin-top:6px}
.counter{background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:2px 10px; font-size:.85rem; color:var(--muted)}

/* choice cards (free/premium & packages) */
.choices{display:grid; gap:14px}
.choice{display:flex; align-items:center; gap:14px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); padding:16px 18px; cursor:pointer; transition:.15s; background:#fff}
.choice:hover{border-color:var(--teal)}
.choice input{width:20px;height:20px;accent-color:var(--teal)}
.choice.sel{border-color:var(--teal); background:var(--teal-050)}
.choice .grow{flex:1}
.choice .title{font-weight:800}
.choice .star{color:var(--gold-600)}
.price{font-weight:800; font-size:1.25rem}
.price .old{color:var(--danger); text-decoration:line-through; font-size:.85rem; font-weight:600; display:block}
.price .unit{color:var(--muted); font-size:.8rem; font-weight:600}

/* ---------- Panel layout ---------- */
.panel-grid{display:grid; grid-template-columns:1fr 320px; gap:26px; align-items:start}
.side{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.side .card-top{height:5px;background:linear-gradient(90deg,var(--teal),var(--gold))}
.side-body{padding:22px; text-align:center}
.avatar{width:120px;height:120px;border-radius:50%;margin:6px auto 12px;
  background:radial-gradient(circle at 50% 35%,var(--sky),#7fd3ef);
  display:flex;align-items:end;justify-content:center;overflow:hidden}
.avatar span{font-size:70px;line-height:1}
.side .phone{font-weight:800;font-size:1.15rem;letter-spacing:1px}
.stat{display:flex;justify-content:space-between;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:11px 14px;margin-top:12px}
.badge{background:var(--good);color:#fff;border-radius:6px;padding:2px 12px;font-size:.85rem;font-weight:700}
.side-menu{margin-top:16px;display:grid;gap:10px}
.side-menu a{display:flex;align-items:center;gap:8px;justify-content:center;
  border:1.5px solid var(--gold);color:var(--ink);border-radius:var(--r-sm);
  padding:11px;font-weight:700;background:#fff}
.side-menu a.active{background:var(--gold);color:#5a3d09}
.side-menu a:hover{text-decoration:none;background:var(--gold-050)}
.side-menu form{margin:0}
.side-menu button{width:100%}

/* ---------- Table ---------- */
table{width:100%;border-collapse:collapse}
th,td{padding:13px 14px;text-align:center;border-bottom:1px solid var(--line)}
thead th{background:var(--paper);color:var(--muted);font-weight:700}
.empty{padding:34px;text-align:center;color:var(--muted)}
.pill{border-radius:20px;padding:3px 12px;font-size:.85rem;font-weight:700}
.pill.ok{background:var(--good-bg);color:#12715c}
.pill.fail{background:var(--danger-bg);color:#a5271d}
.pill.pending{background:var(--gold-050);color:#8a5a12}

/* ---------- Result ---------- */
.result{background:linear-gradient(160deg,#fff,var(--teal-050));border:1px solid #cdeee8;
  border-radius:var(--r);padding:26px;white-space:pre-wrap;line-height:2.1;font-size:1.05rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{background:var(--night-2);color:#fff;border-radius:20px;padding:4px 14px;font-size:.9rem}

/* ---------- Trust / footer ---------- */
.trust{display:flex;align-items:center;gap:20px;justify-content:space-between;
  background:var(--teal-050);border:1px solid #cdeee8;border-radius:var(--r);padding:18px 22px;margin-bottom:26px}
.trust .stars{color:var(--gold);font-size:1.15rem;letter-spacing:2px}
.trust .enamad{width:92px;height:92px;border:1px solid var(--line);border-radius:10px;
  background:#fff;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.75rem;text-align:center}
.trust .small{color:var(--gold-600);font-size:.85rem}
footer{background:#eafaf7;border-top:1px solid #cdeee8;padding:22px 0;text-align:center;color:var(--muted)}
footer b{color:var(--teal-600)}

/* auth boxes */
.auth-wrap{max-width:430px;margin:10px auto}
.tabs{display:flex;gap:8px;margin-bottom:18px}
.tabs .t{flex:1;text-align:center;padding:10px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-weight:700;color:var(--muted)}
.tabs .t.active{border-color:var(--teal);color:var(--teal-600);background:var(--teal-050)}
.center{text-align:center}
.mt{margin-top:16px}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .hero .container{grid-template-columns:1fr;text-align:center}
  .orb{max-width:250px}
  .hero .lead{margin-inline:auto}
  .panel-grid{grid-template-columns:1fr}
  .menu{display:none}
}