html{scroll-behavior:smooth}
body{font-family:'Vazirmatn',sans-serif;margin:0;overflow-x:hidden;background:#0d0a07;-webkit-tap-highlight-color:transparent}
.display{font-family:'Amiri','Vazirmatn',serif;font-weight:700}
.thin{font-weight:300}
.gold-text{background:linear-gradient(180deg,#fff1c8 0%,#e2b866 45%,#a8742c 75%,#f0d08a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.pbtn{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:var(--btn);color:var(--btnText);font-size:16px;display:flex;align-items:center;justify-content:center}
input[type=range]{accent-color:var(--accent)}
.glass{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 20px 50px -24px rgba(0,0,0,.5)}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn{min-height:50px;border-radius:14px;padding:0 20px;font-weight:700;transition:transform .15s,box-shadow .3s,background .3s}
.btn:active{transform:scale(.98)}
.btn-ghost{background:var(--glass);border:1px solid var(--line);color:inherit}
.field{width:100%;min-height:50px;border-radius:12px;padding:12px 14px;background:var(--fieldbg);border:1px solid var(--line);color:inherit;font-family:inherit;font-size:16px}
.field::placeholder{color:currentColor;opacity:.4}
.yr{min-height:48px;border-radius:12px;font-weight:700;border:1px solid var(--line);background:var(--fieldbg);transition:all .25s;color:inherit}
.yr.on{background:var(--accent);color:var(--btnText);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.step-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:1px solid var(--line);transition:all .3s}
.step-dot.on{background:var(--accent);color:var(--btnText);border-color:var(--accent)}
@keyframes rise{0%{transform:translateY(0);opacity:0}20%{opacity:.7}100%{transform:translateY(-90vh);opacity:0}}
.mote{position:absolute;bottom:-10px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:rise linear infinite}
@keyframes flicker{0%,100%{transform:translateX(-50%) scale(1,1) rotate(-1deg)}33%{transform:translateX(-50%) scale(.96,1.06) rotate(1.5deg)}66%{transform:translateX(-50%) scale(1.03,.97) rotate(-1.5deg)}}
.flame{position:absolute;left:50%;bottom:100%;margin-bottom:4px;width:16px;height:28px;border-radius:50% 50% 50% 50%/65% 65% 35% 35%;background:radial-gradient(ellipse at 50% 75%,#fff 0,#fff4c2 25%,#ffb347 60%,rgba(255,120,0,0) 76%);animation:flicker 2.2s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 0 8px #ffb347);transition:width .6s,height .6s,filter .6s}
.flame.bright{width:22px;height:40px;filter:drop-shadow(0 0 22px #ffd27a) brightness(1.15)}
.cglow{position:absolute;left:50%;top:30%;width:180px;height:180px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,206,120,.35),transparent 65%);pointer-events:none;transition:opacity .8s,transform .8s}
.cglow.bright{transform:translate(-50%,-50%) scale(1.5);background:radial-gradient(circle,rgba(255,206,120,.6),transparent 65%)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spark{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}40%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}
@keyframes illum{from{opacity:0;filter:brightness(.2)}to{opacity:1;filter:none}}
@keyframes numIn{from{opacity:0;filter:blur(10px);transform:scale(.94)}to{opacity:1;filter:none;transform:none}}
@keyframes float{0%{transform:translate(-50%,0);opacity:0}25%{opacity:1}100%{transform:translate(-50%,-90px);opacity:0}}
.pt{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffe2a0;box-shadow:0 0 8px #ffcf70;animation:float 2.4s ease-out forwards;pointer-events:none}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.ring-spin{animation:spin 90s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
.safe-top{padding-top:env(safe-area-inset-top)}
.safe-bottom{padding-bottom:calc(env(safe-area-inset-bottom) + 16px)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;transition:none!important}}