:root { --bg:#0b0b12; --gold:#d4af37; --ivory:#f5efe0; }
body { background: radial-gradient(ellipse at top, #1d1a12 0%, var(--bg) 55%), var(--bg); color: var(--ivory); font-family: 'Vazirmatn', sans-serif; min-height: 100vh; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; background-image: repeating-linear-gradient(45deg, rgba(212,175,55,.03) 0 1px, transparent 1px 22px); }
.mono { font-family: 'JetBrains Mono', monospace; }
.eyebrow { font-family:'Playfair Display'; font-style:italic; letter-spacing:.4em; color:var(--gold); font-size:.75rem; }
.hero { font-size: clamp(4rem, 14vw, 7rem); font-weight:900; line-height:1.1; background: linear-gradient(100deg,#8a6d1f,#f3dd8a,#d4af37,#8a6d1f); background-size:200%; -webkit-background-clip:text; color:transparent; animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: 200% 0; } }
.goldline { width:120px; height:1px; margin:18px auto 0; background: linear-gradient(90deg,transparent,var(--gold),transparent); }
.chip { border:1px solid rgba(212,175,55,.4); padding:6px 14px; border-radius:999px; font-family:'JetBrains Mono'; background:rgba(212,175,55,.06); }
.chain { color:var(--gold); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.3; transform:scale(1.3);} }
.track { position:relative; height:4px; background:rgba(255,255,255,.08); border-radius:4px; margin-top:48px; }
.fill { position:absolute; right:0; top:0; height:100%; background:linear-gradient(270deg,#8a6d1f,var(--gold)); border-radius:4px; transition: width .8s cubic-bezier(.2,.9,.3,1.2); }
.gazelle { position:absolute; top:-34px; transition: right .8s cubic-bezier(.2,.9,.3,1.2); transform: scaleX(-1); }
.card { background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.01)); border:1px solid rgba(212,175,55,.15); border-radius:1.25rem; padding:1.4rem; backdrop-filter: blur(8px); transition: box-shadow .3s, border-color .3s; }
.card:hover { box-shadow: 0 0 40px -12px rgba(212,175,55,.35); border-color: rgba(212,175,55,.35); }
.card.done { border-color: rgba(212,175,55,.5); }
.title2 { font-weight:800; font-size:1.15rem; color:#f3dd8a; }
.num { width:40px; height:40px; flex-shrink:0; border-radius:50%; border:1px solid var(--gold); color:var(--gold); font-weight:900; transition:.3s; }
.done .num { background:var(--gold); color:var(--bg); }
.inp { background: rgba(0,0,0,.4); border:1px solid rgba(212,175,55,.25); border-radius:.75rem; padding:.6rem .9rem; color:var(--ivory); outline:none; }
.inp:focus { border-color: var(--gold); }
select.inp option { background:#15131b; }
.gbtn { border:1px solid var(--gold); color:var(--gold); border-radius:.6rem; padding:.35rem .8rem; transition:.2s; white-space:nowrap; }
.gbtn:hover { background: rgba(212,175,55,.12); }
.gbtn.solid { background: var(--gold); color: var(--bg); font-weight:800; padding:.6rem 1.3rem; }
.tip { margin-top:.75rem; font-size:.85rem; line-height:1.9; border-right:2px solid var(--gold); padding-right:.8rem; opacity:.85; }
.rec { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; background: rgba(0,0,0,.35); padding:.7rem .9rem; border-radius:.75rem; font-size:.85rem; }
.tag { font-size:.65rem; background: rgba(212,175,55,.15); color:var(--gold); padding:2px 8px; border-radius:6px; font-weight:800; }
.warn { margin-top:.8rem; background: rgba(180,90,30,.12); border:1px solid rgba(220,140,50,.35); padding:.9rem; border-radius:.75rem; font-size:.85rem; line-height:1.9; }
.res { margin-top:1rem; padding:1rem; border-radius:.9rem; border:1px solid; }
.res.ok { border-color:#4ade80; background:rgba(74,222,128,.08); }
.res.wait { border-color:#f59e0b; background:rgba(245,158,11,.08); }
.res.bad { border-color:#f87171; background:rgba(248,113,113,.08); }
.faq { border-bottom:1px solid rgba(212,175,55,.12); }
.fade { opacity:0; animation: up .7s forwards; }
@keyframes up { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform:none; } }