:root{
  --ink:#0b0d10; --ink-2:#111418; --panel:#14181d; --panel-2:#1a1f26; --line:#2a3037;
  --silver:#c0c5ca; --silver-hi:#f1f3f5; --silver-lo:#8d939a;
  --text:#dadde0; --muted:#aab0b6;
  --ok:#6fd3a0; --warn:#e9c46a; --bad:#f08a8a;
  --radius:20px; --ease:cubic-bezier(.2,.8,.2,1);
  --nav-h:68px;
}
@property --angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; color:var(--text); background:var(--ink);
  font-family:'Vazirmatn',Tahoma,sans-serif; line-height:1.8; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 480px at 90% -6%, rgba(192,197,202,.13), transparent 60%),
    radial-gradient(700px 480px at 0% 30%, rgba(192,197,202,.06), transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3,h4,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }
img{ max-width:100%; display:block; }
.mono,.num{ font-family:'JetBrains Mono',monospace; direction:ltr; unicode-bidi:isolate; }
:focus-visible{ outline:2px solid var(--silver); outline-offset:3px; border-radius:8px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- shell ---------- */
.shell{ display:grid; grid-template-columns:268px minmax(0,1fr); min-height:100vh; }
.side{
  position:sticky; top:0; height:100vh; padding:24px 18px; display:flex; flex-direction:column; gap:22px;
  background:linear-gradient(180deg,#0e1115,#0b0d10); border-left:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:12px; padding:4px 6px; }
.brand img{ width:46px; height:46px; border-radius:50%; border:2px solid var(--silver); box-shadow:0 0 18px rgba(192,197,202,.25); }
.brand b{ display:block; font-family:'JetBrains Mono',monospace; letter-spacing:2px; color:#fff; font-size:14px; line-height:1.3; }
.brand span{ font-size:12px; color:var(--muted); }
.nav{ display:flex; flex-direction:column; gap:6px; }
.nav a{
  display:flex; align-items:center; gap:12px; min-height:46px; padding:0 14px; border-radius:14px; font-weight:600; color:var(--muted);
  border:1px solid transparent; transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease);
}
.nav a svg{ width:20px; height:20px; flex:0 0 auto; }
.nav a:hover{ color:#fff; background:rgba(192,197,202,.07); transform:translateX(-3px); }
.nav a[aria-current="page"]{ color:#0b0d10; background:linear-gradient(135deg,#f1f3f5,#aeb4ba 55%,#d7dbdf); }
.side-foot{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.side-foot a,.side-foot button{
  display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--line);
  background:transparent; color:var(--muted); font-weight:600; font-size:13.5px; transition:.25s;
}
.side-foot a:hover,.side-foot button:hover{ color:#0b0d10; background:var(--silver); border-color:var(--silver); }

.main{ min-width:0; padding:28px clamp(16px,3vw,40px) 60px; }
.topbar{ display:none; }
.demo-banner{
  display:flex; gap:10px; align-items:center; margin-bottom:20px; padding:10px 16px; border-radius:14px; font-size:13px;
  background:rgba(233,196,106,.08); border:1px dashed rgba(233,196,106,.5); color:#e9d9a6;
}
.view{ animation:rise .6s var(--ease) both; max-width:1040px; margin:0 auto; }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes orbit{ to{ --angle:360deg; } }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(192,197,202,.55); } 50%{ box-shadow:0 0 0 9px rgba(192,197,202,0); } }
@keyframes sweep{ 0%,55%{ left:-60%; } 100%{ left:130%; } }

.page-title{ display:flex; align-items:end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.page-title h1{ font-size:clamp(22px,3vw,30px); font-weight:900; color:#fff; line-height:1.5; }
.page-title p{ color:var(--muted); font-size:14px; }

/* ---------- cards ---------- */
.card{
  position:relative; isolation:isolate; background:linear-gradient(180deg,#171b21,var(--panel)); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(18px,2.6vw,26px); box-shadow:0 26px 50px -34px #000;
}
.edge::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; z-index:-1; pointer-events:none;
  background:conic-gradient(from var(--angle), transparent 0 62%, rgba(192,197,202,.15) 72%, #f1f3f5 86%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:orbit 7s linear infinite; opacity:.55; transition:opacity .4s;
}
.edge:hover::before{ opacity:1; animation-duration:3s; }
.grid{ display:grid; gap:16px; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.lift{ transition:transform .45s var(--ease), border-color .3s; }
.lift:hover{ transform:translateY(-5px); border-color:var(--silver-lo); }
.label{ font-size:12.5px; color:var(--silver-lo); font-weight:600; }
.big{ font-family:'JetBrains Mono',monospace; font-weight:700; color:#fff; font-size:clamp(28px,4vw,40px); line-height:1.2; direction:rtl; }
.big small{ font-family:'Vazirmatn'; font-size:13px; color:var(--muted); font-weight:500; margin-inline-start:6px; }

/* hero */
.hero{ overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;
  background:radial-gradient(420px 220px at 12% -10%, rgba(192,197,202,.2), transparent 70%), linear-gradient(150deg,#0b0d10,#1b2026); }
.hero::after{ content:""; position:absolute; top:0; bottom:0; width:38%; left:-60%; z-index:-1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent); animation:sweep 6s ease-in-out infinite; }
.hero h2{ font-size:clamp(20px,2.8vw,26px); font-weight:900; color:#fff; }
.hero p{ color:var(--muted); font-size:14px; margin-top:4px; }
.chip{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:700;
  color:#0b0d10; background:linear-gradient(135deg,#f1f3f5,#aeb4ba 55%,#d7dbdf); }
.ring{ position:relative; width:112px; height:112px; }
.ring svg{ position:absolute; inset:0; width:100%; height:100%; }
.ring .a{ transform-origin:50% 50%; animation:spin 22s linear infinite; }
.ring .b{ transform-origin:50% 50%; animation:spin 14s linear infinite reverse; }
.ring div{ position:absolute; inset:14px; border-radius:50%; display:grid; place-items:center; text-align:center; line-height:1.15;
  background:radial-gradient(circle at 30% 25%,#2a3037,#0f1215 72%); box-shadow:inset 0 0 0 1px rgba(192,197,202,.35), 0 0 30px rgba(192,197,202,.15); }
.ring b{ font-family:'JetBrains Mono',monospace; font-size:22px; color:#fff; display:block; }
.ring small{ font-size:10.5px; color:var(--muted); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 22px; border-radius:14px; border:1.5px solid transparent;
  font-weight:700; font-size:14px; transition:transform .25s var(--ease), box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-primary{ background:linear-gradient(135deg,#f1f3f5,#aeb4ba 55%,#d7dbdf); color:#0b0d10; box-shadow:0 12px 28px -14px rgba(192,197,202,.6); }
.btn-ghost{ background:transparent; color:var(--silver); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--silver); background:rgba(192,197,202,.08); }
.btn-danger{ background:transparent; color:var(--bad); border-color:rgba(240,138,138,.4); }
.btn-sm{ min-height:38px; padding:0 14px; font-size:13px; border-radius:11px; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.spread{ justify-content:space-between; }

/* status pills */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid var(--line); background:var(--ink-2); }
.pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill.ok{ color:var(--ok); } .pill.warn{ color:var(--warn); } .pill.bad{ color:var(--bad); } .pill.info{ color:var(--silver); }

/* orders */
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.filters button{ min-height:40px; padding:0 18px; border-radius:999px; border:1px solid var(--line); background:var(--ink-2); font-weight:700; font-size:13px; color:var(--muted); transition:.25s; }
.filters button[aria-pressed="true"]{ background:linear-gradient(135deg,#f1f3f5,#aeb4ba 55%,#d7dbdf); color:#0b0d10; border-color:transparent; }
.order{ display:grid; gap:14px; }
.order-head{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; }
.order-head b{ color:#fff; font-size:16px; }
.mini-tl{ display:flex; align-items:center; gap:0; }
.mini-tl i{ flex:1; height:4px; background:var(--line); border-radius:4px; margin-inline:3px; position:relative; overflow:hidden; }
.mini-tl i.on::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--silver-lo),var(--silver-hi)); transform-origin:right; animation:grow .9s var(--ease) both; }
@keyframes grow{ from{ transform:scaleX(0); } }
.thumbs{ display:flex; gap:8px; }
.thumb{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--ink-2); border:1px solid var(--line); color:var(--silver); }
.thumb svg{ width:24px; height:24px; }

.tl{ list-style:none; margin:0; padding:0; position:relative; }
.tl li{ position:relative; padding:0 44px 22px 0; min-height:52px; }
.tl li::before{ content:""; position:absolute; right:15px; top:30px; bottom:-2px; width:2px; background:var(--line); }
.tl li:last-child::before{ display:none; }
.tl li.done::before{ background:var(--silver); }
.tl .dot{ position:absolute; right:0; top:0; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--ink-2); border:2px solid var(--line); color:var(--silver-lo); }
.tl .dot svg{ width:16px; height:16px; }
.tl li.done .dot{ background:var(--silver); border-color:var(--silver); color:#0b0d10; }
.tl li.now .dot{ border-color:var(--silver-hi); color:#fff; animation:pulse 2.2s ease-in-out infinite; }
.tl b{ color:#fff; display:block; line-height:1.5; padding-top:3px; }
.tl small{ color:var(--muted); font-size:12.5px; }
.tl li:not(.done):not(.now) b{ color:var(--silver-lo); }

.kv{ display:grid; gap:0; }
.kv > div{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.kv > div:last-child{ border-bottom:none; }
.kv span:first-child{ color:var(--muted); }
.kv b{ color:#fff; }
.copy{ display:inline-flex; align-items:center; gap:8px; border:1px dashed var(--silver-lo); background:rgba(192,197,202,.06); color:var(--silver-hi); border-radius:10px; padding:4px 10px; min-height:36px; }

/* list rows */
.list{ display:grid; gap:0; }
.li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); animation:rise .5s var(--ease) both; animation-delay:calc(var(--i,0)*45ms); }
.li:last-child{ border-bottom:none; }
.ic{ width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; background:var(--ink-2); border:1px solid var(--line); }
.ic svg{ width:20px; height:20px; }
.ic.in{ color:var(--ok); } .ic.out{ color:var(--bad); } .ic.pt{ color:var(--silver-hi); }
.li .t{ flex:1; min-width:0; } .li .t b{ display:block; color:#fff; font-weight:600; line-height:1.6; } .li .t small{ color:var(--muted); font-size:12.5px; }
.amt{ font-family:'JetBrains Mono',monospace; font-weight:700; direction:ltr; white-space:nowrap; }
.amt.in{ color:var(--ok); } .amt.out{ color:var(--bad); } .amt.pt{ color:var(--silver-hi); }

/* wallet */
.wallet{ overflow:hidden; background:radial-gradient(420px 220px at 90% -10%, rgba(192,197,202,.22), transparent 70%), linear-gradient(150deg,#0b0d10,#1b2026); }
.wallet::after{ content:""; position:absolute; top:0; bottom:0; width:38%; left:-60%; z-index:-1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent); animation:sweep 6s ease-in-out infinite; }

/* club */
.progress{ height:10px; border-radius:999px; background:var(--line); overflow:hidden; margin:14px 0 8px; }
.progress i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--silver-lo),var(--silver-hi)); transform-origin:right; animation:grow 1.2s var(--ease) .2s both; }
.levels{ display:flex; justify-content:space-between; font-size:12px; color:var(--silver-lo); font-weight:600; }
.levels .on{ color:#fff; }
.reward{ display:flex; flex-direction:column; gap:10px; }
.reward h3{ font-size:16px; color:#fff; }
.reward p{ font-size:13px; color:var(--muted); flex:1; }
.cost{ font-family:'JetBrains Mono',monospace; color:var(--silver-hi); font-weight:700; }

/* forms */
.form{ display:grid; gap:16px; }
.field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:8px; color:#fff; }
.field input,.field textarea{
  width:100%; min-height:48px; padding:10px 16px; border-radius:14px; border:1px solid var(--line); background:var(--ink-2); outline:none; transition:border-color .25s, box-shadow .25s;
}
.field textarea{ min-height:84px; resize:vertical; }
.field input:focus,.field textarea:focus{ border-color:var(--silver); box-shadow:0 0 0 3px rgba(192,197,202,.2); }
.field input[readonly]{ color:var(--silver-lo); }
.field small{ display:block; color:var(--silver-lo); margin-top:6px; font-size:12px; }
.addr{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); }
.addr:last-child{ border-bottom:none; }
.addr b{ color:#fff; } .addr p{ color:var(--muted); font-size:13.5px; }
.empty{ text-align:center; padding:34px 10px; color:var(--muted); }
.empty svg{ width:42px; height:42px; color:var(--silver-lo); margin:0 auto 10px; }

/* login */
.login{ min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.login-card{ width:100%; max-width:440px; text-align:center; padding:clamp(24px,5vw,40px); animation:rise .8s var(--ease) both; }
.login-card .logo{ width:84px; height:84px; margin:0 auto 18px; border-radius:50%; border:3px solid var(--silver); box-shadow:0 0 30px rgba(192,197,202,.3); }
.login-card h1{ font-size:24px; font-weight:900; color:#fff; margin-bottom:6px; }
.login-card .sub{ color:var(--muted); font-size:14px; margin-bottom:24px; }
.steps{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:12px; text-align:right; }
.steps li{ display:flex; gap:12px; align-items:flex-start; font-size:14px; }
.steps li span{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; border:1.5px solid var(--silver); color:var(--silver-hi); }
.code-input{ text-align:center !important; font-family:'JetBrains Mono',monospace; font-size:26px !important; letter-spacing:12px; direction:ltr; min-height:58px !important; }
.err{ color:var(--bad); font-size:13px; min-height:22px; margin-top:8px; }

/* toasts */
.toasts{ position:fixed; z-index:50; bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:grid; gap:8px; width:min(92vw,420px); pointer-events:none; }
.toast{ pointer-events:auto; padding:12px 16px; border-radius:14px; background:#1d232a; border:1px solid var(--silver-lo); color:#fff; font-size:14px; box-shadow:0 18px 40px -16px #000; animation:rise .4s var(--ease) both; }
.toast.bad{ border-color:var(--bad); }

/* skeleton */
.sk{ border-radius:14px; background:linear-gradient(100deg,#171b21 30%,#222830 50%,#171b21 70%); background-size:200% 100%; animation:sk 1.2s linear infinite; min-height:90px; }
@keyframes sk{ to{ background-position:-200% 0; } }

/* modal */
.modal{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px; background:rgba(5,6,8,.72); backdrop-filter:blur(4px); animation:fade .25s both; }
@keyframes fade{ from{ opacity:0; } }
.modal .card{ width:100%; max-width:420px; animation:rise .4s var(--ease) both; }
.modal h3{ color:#fff; font-size:18px; margin-bottom:8px; }

/* ---------- mobile ---------- */
@media (max-width:960px){
  .shell{ display:block; }
  .side{ position:fixed; z-index:40; inset:auto 0 0 0; height:auto; padding:0 8px env(safe-area-inset-bottom); flex-direction:row; gap:0; border:0; border-top:1px solid var(--line);
    background:rgba(11,13,16,.92); backdrop-filter:blur(14px); }
  .side .brand,.side .side-foot{ display:none; }
  .nav{ flex-direction:row; width:100%; gap:2px; }
  .nav a{ flex:1; flex-direction:column; justify-content:center; gap:2px; min-height:var(--nav-h); padding:6px 2px; border-radius:12px; font-size:11.5px; }
  .nav a:hover{ transform:none; }
  .nav a[aria-current="page"]{ background:none; color:#fff; }
  .nav a[aria-current="page"] svg{ color:#0b0d10; background:linear-gradient(135deg,#f1f3f5,#aeb4ba); border-radius:10px; padding:3px; width:30px; height:26px; }
  .main{ padding-bottom:calc(var(--nav-h) + 40px + env(safe-area-inset-bottom)); padding-top:14px; }
  .topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .topbar .brand img{ width:38px; height:38px; }
  .topbar button{ min-height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--muted); font-weight:600; font-size:13px; }
}
@media (max-width:700px){
  .g3{ grid-template-columns:1fr; } .g2{ grid-template-columns:1fr; }
  .hero{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .ring{ order:-1; }
  .page-title{ align-items:start; }
}
@media (min-width:701px) and (max-width:960px){ .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}