/* نیازی — همه‌چیز از توکن‌های سیستمِ طراحی */
@font-face{font-family:Vazirmatn;font-style:normal;font-display:swap;font-weight:300;src:url(/fonts/vazirmatn-arabic-300-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Vazirmatn;font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/vazirmatn-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Vazirmatn;font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/vazirmatn-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Vazirmatn;font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/vazirmatn-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Vazirmatn;font-style:normal;font-display:swap;font-weight:800;src:url(/fonts/vazirmatn-arabic-800-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  --surface:#f6f5f1;--surface-raised:#fff;--surface-sunken:#faf8f3;--line:#e6e2d8;--line-soft:#efece5;
  --ink:#16171b;--ink-muted:#5e6068;--ink-faint:#6f717b;
  --navy:#1f2b52;--navy-deep:#18213f;--on-navy:#fff;--on-navy-muted:#c3cae0;--gold:#e6c27a;--gold-ink:#7a5a1e;--gold-soft:#f3ecdd;
  --sell:#2c8460;--sell-deep:#175a3f;--sell-soft:#e2f2ea;--sell-ink:#1d6b4b;
  --buy:#b7454a;--buy-deep:#85292f;--buy-soft:#f8e7e7;--buy-ink:#a33a3f;
  --amber-soft:#fbf4e6;--amber-ink:#8a5c10;--amber-line:#c08a2e;--warn-soft:#fff4e5;--warn-ink:#8a4b00;--warn-line:#e0a23b;
  --info-soft:#e3ebfa;--info-ink:#2f55b8;--focus:#1f2b52;
  --r-sm:10px;--r-md:14px;--r-lg:22px;--r-xl:26px;--font:Vazirmatn,Tahoma,"Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
body{min-height:100dvh;overscroll-behavior-y:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-appearance:none;appearance:none;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hidden{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#app{max-width:520px;margin:0 auto;min-height:100dvh;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
#app.no-nav{padding-bottom:24px}
.page{padding:calc(14px + env(safe-area-inset-top)) 18px 18px;display:flex;flex-direction:column;gap:14px;animation:fade .15s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.top{display:flex;align-items:center;gap:10px;min-height:44px}
.top h1{font-size:22px;font-weight:800;margin:0;flex:1 1 auto;line-height:1.3}
.sub{font-size:12px;color:var(--ink-faint)}
.icon-btn{width:42px;height:42px;border-radius:999px;background:var(--surface-raised);border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0}
.icon-btn svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sec-title{font-size:13px;font-weight:800;color:var(--ink-muted);padding:0 4px;margin-top:4px}

/* کارت‌ها و ردیف‌ها */
.card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.card.pad{padding:14px 16px}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;width:100%;text-align:right}
.row+.row{border-top:1px solid var(--line-soft)}
.row .grow{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.row .t{font-size:15px;font-weight:700;line-height:1.5}
.row .m{font-size:12px;color:var(--ink-muted)}
.code{font-size:11px;font-weight:500;color:var(--ink-faint);margin-inline-start:6px}
.avatar{width:42px;height:42px;border-radius:999px;background:var(--gold-soft);color:var(--gold-ink);display:grid;place-items:center;font-weight:800;font-size:16px;flex-shrink:0}
.chev{width:16px;height:16px;stroke:#ada593;fill:none;stroke-width:2.2;stroke-linecap:round;flex-shrink:0}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-size:11px;font-weight:700;border-radius:6px;padding:1px 7px}
.chip.debt{background:var(--sell-soft);color:var(--sell-ink)}
.chip.cred{background:var(--buy-soft);color:var(--buy-ink)}
.chip.zero{background:#f3f1eb;color:var(--ink-faint)}
.chip.info{background:var(--info-soft);color:var(--info-ink)}
.chip.wait{background:var(--amber-soft);color:var(--amber-ink)}
.empty{padding:26px 16px;text-align:center;color:var(--ink-faint);font-size:13px}

/* دکمه‌ها */
.btn{height:48px;padding:0 18px;border-radius:var(--r-md);font-size:15px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s ease,opacity .12s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--navy);color:var(--on-navy)}
.btn.outline{background:var(--surface-raised);border:1.5px solid var(--line)}
.btn.danger{background:var(--surface-raised);border:1.5px solid #e9c4c6;color:var(--buy-ink)}
.btn.block{width:100%;height:56px;font-size:17px;border-radius:18px}
.btn.sm{height:38px;padding:0 14px;font-size:13px;border-radius:12px}
.btn[disabled]{opacity:.45;pointer-events:none}
.seg{display:flex;background:#ece8df;border-radius:14px;padding:4px;gap:3px}
.seg button{flex:1 1 0;height:38px;border-radius:11px;font-size:13px;font-weight:600;color:var(--ink-faint);transition:background .15s}
.seg button.on{background:var(--surface-raised);color:var(--ink);font-weight:800;box-shadow:0 1px 4px rgba(22,23,27,.12)}
.pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px}
.pills::-webkit-scrollbar{display:none}
.pill{flex-shrink:0;height:34px;padding:0 13px;border-radius:999px;border:1px solid #e2dfd6;background:var(--surface-raised);font-size:12px;font-weight:700;color:#3d3f46}
.pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
.sw{width:46px;height:28px;border-radius:999px;background:#d9d5cc;position:relative;flex-shrink:0;transition:background .15s}
.sw i{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .15s}
.sw.on{background:var(--sell)}
.sw.on i{transform:translateX(-18px)}

/* فرم */
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:13px;font-weight:700;color:var(--ink-muted)}
.input{height:52px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface-raised);padding:0 14px;font-size:16px;outline:none;width:100%}
.input:focus{border-color:var(--focus);box-shadow:0 0 0 3px var(--info-soft)}
.input.amount{font-size:20px;font-weight:800}
.input.ltr{direction:ltr;text-align:left}
textarea.input{height:84px;padding:10px 14px;resize:none;line-height:1.7}
select.input{-webkit-appearance:none;appearance:none}
.hint{font-size:12px;color:var(--ink-faint);line-height:1.8}
.search{display:flex;align-items:center;gap:8px;height:48px;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-md);padding:0 14px}
.search input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font-size:15px}
.search svg{width:18px;height:18px;stroke:var(--ink-faint);fill:none;stroke-width:2;stroke-linecap:round}

/* خانه */
.hello{display:flex;align-items:center;gap:12px}
.hello .me{width:44px;height:44px;border-radius:22px;border:1.5px solid #b8893a;background:#fff;color:var(--gold-ink);display:grid;place-items:center;font-weight:800;font-size:18px}
.price{background:var(--navy);border-radius:var(--r-xl);padding:18px 20px;color:#fff;position:relative;overflow:hidden;text-align:right;width:100%}
.price::before,.price::after{content:"";position:absolute;border-radius:999px;border:1.5px solid rgba(230,194,122,.22)}
.price::before{width:150px;height:150px;left:-50px;top:-50px}.price::after{width:80px;height:80px;left:-14px;top:-14px}
.price .l{font-size:13px;color:var(--on-navy-muted);display:flex;justify-content:space-between}
.price .v{font-size:38px;font-weight:300;color:var(--gold);line-height:1.2;margin:4px 0}
.price .g{display:flex;gap:20px;border-top:1px solid #364370;padding-top:10px;margin-top:6px;font-size:12px;color:#aeb6d0}
.price .g b{display:block;font-size:16px;color:#fff;font-weight:700}
.trade{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trade button{height:106px;border-radius:var(--r-lg);color:#fff;padding:16px 18px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;position:relative;overflow:hidden}
.trade button::before{content:"";position:absolute;width:110px;height:110px;border-radius:999px;border:1px solid rgba(255,255,255,.14);top:-34px;left:-34px}
.trade b{font-size:25px;font-weight:800;line-height:1.3}.trade span{font-size:12px;opacity:.8}
.trade .sell{background:linear-gradient(155deg,var(--sell),var(--sell-deep))}
.trade .buy{background:linear-gradient(155deg,var(--buy),var(--buy-deep))}
.acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:14px;column-gap:8px}
.acts button{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:13px;font-weight:500}
.acts .ic{width:60px;height:60px;border-radius:21px;display:grid;place-items:center}
.acts svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notice{display:flex;align-items:center;gap:12px;border-radius:18px;padding:12px 14px;width:100%;text-align:right}
.notice.amber{background:var(--amber-soft);color:var(--amber-ink)}
.notice.red{background:var(--buy-soft);color:var(--buy-ink)}
.notice.blue{background:var(--info-soft);color:var(--info-ink)}
.notice b{font-weight:800}
.notice .grow{flex:1 1 auto}

/* نوارِ پایین */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface-raised);border-radius:24px 24px 0 0;box-shadow:0 -6px 18px rgba(31,43,82,.08);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;height:calc(78px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);max-width:520px;margin:0 auto}
.nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:#6b6e78;position:relative}
.nav a.on{color:var(--navy);font-weight:800}
.nav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav .home{justify-self:center;width:72px;height:72px;margin-top:-38px;border-radius:999px;background:var(--navy);border:5px solid var(--surface);box-shadow:0 8px 18px rgba(31,43,82,.3);display:grid;place-items:center}
.nav .home span{width:56px;height:56px;border-radius:999px;border:1.5px solid var(--gold);display:grid;place-items:center}
.nav .home svg{stroke:var(--gold);width:26px;height:26px}
.badge{position:absolute;top:-4px;left:calc(50% - 22px);min-width:18px;height:18px;border-radius:9px;background:#d45452;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px}

/* مانده‌ها */
.bal{background:var(--navy);border-radius:var(--r-lg);padding:14px 16px;color:#fff}
.bal .h{font-size:12px;color:var(--on-navy-muted);font-weight:600}
.bal .r{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0}
.bal .r+.r{border-top:1px solid #364370}
.bal .r span{color:#dde2f0;font-size:14px}
.bal .r b{font-size:17px;font-weight:700}
.bal .tag{font-size:11px;font-weight:700;margin-inline-end:6px}
.bal .tag.debt{color:#9ee0bd}.bal .tag.cred{color:#f2a3a6}
.bal .tot{display:flex;justify-content:space-between;border-top:1px solid #364370;padding-top:9px;margin-top:2px;font-size:12px;color:var(--on-navy-muted)}
.bal .tot b{color:var(--gold);font-size:15px}
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.quick button{min-height:66px;border-radius:16px;background:var(--surface-raised);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:700;color:var(--navy);padding:6px}
.quick svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tl{display:flex;flex-direction:column;border-right:2px solid var(--line);margin-right:8px;padding-right:14px}
.tl div{position:relative;padding:7px 0;font-size:12px;line-height:1.8}
.tl div::before{content:"";position:absolute;right:-21px;top:13px;width:10px;height:10px;border-radius:5px;background:var(--navy)}
.tl b{font-weight:800}.tl .w{color:var(--ink-faint)}

/* کاشی‌های «بیشتر» */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tiles button,.tiles a{position:relative;min-height:94px;border-radius:18px;background:var(--surface-raised);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 6px;font-size:12px;font-weight:700;line-height:1.5;text-align:center}
.tiles .ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center}
.tiles svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tiles .badge{top:8px;left:8px}
.t-gold{background:var(--gold-soft);color:var(--gold-ink)}.t-blue{background:var(--info-soft);color:var(--info-ink)}.t-green{background:var(--sell-soft);color:var(--sell-ink)}.t-red{background:var(--buy-soft);color:var(--buy-ink)}.t-navy{background:#eef1f8;color:var(--navy)}.t-gray{background:#f3f1eb;color:var(--ink-muted)}.t-violet{background:#ece5f8;color:#6740b5}.t-sky{background:#e0eef6;color:#1f6f94}.t-sand{background:#f6ead3;color:#9a6a14}

/* کادرِ پایین (sheet) */
.scrim{position:fixed;inset:0;background:rgba(22,23,27,.42);z-index:40;animation:fade .15s}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:520px;margin:0 auto;max-height:92dvh;overflow-y:auto;background:var(--surface-raised);border-radius:26px 26px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;box-shadow:0 -10px 30px rgba(0,0,0,.15);animation:up .2s ease}
@keyframes up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
.sheet .grab{align-self:center;width:40px;height:5px;border-radius:3px;background:#e2dfd6;flex-shrink:0}
.sheet h2{font-size:19px;font-weight:800;margin:0}
.sheet .foot{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));background:var(--surface-raised);padding:8px 0 calc(8px + env(safe-area-inset-bottom));margin-bottom:calc(-18px - env(safe-area-inset-bottom));display:flex;gap:8px}
.line{border:1.5px solid var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:8px}

/* ورود */
.login{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px;gap:18px}
.login .logo{width:76px;height:76px;border-radius:999px;background:var(--navy);display:grid;place-items:center;border:5px solid #fff;box-shadow:0 8px 18px rgba(31,43,82,.25)}
.login .logo span{width:60px;height:60px;border-radius:999px;border:1.5px solid var(--gold);display:grid;place-items:center;color:var(--gold);font-weight:800;font-size:24px}
.who{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;width:100%}
.who button{background:var(--surface-raised);border:1px solid var(--line);border-radius:18px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:700}
.dots{display:flex;gap:12px;justify-content:center;height:18px}
.dots i{width:14px;height:14px;border-radius:7px;border:2px solid var(--navy);transition:background .1s}
.dots i.f{background:var(--navy)}
.dots.err{animation:shake .3s}
@keyframes shake{25%{transform:translateX(8px)}75%{transform:translateX(-8px)}}
.pinpad{display:grid;grid-template-columns:repeat(3,76px);gap:14px;justify-content:center;direction:ltr}
.pinpad button{width:76px;height:76px;border-radius:999px;background:var(--surface-raised);border:1px solid var(--line);font-size:26px;font-weight:500}
.pinpad button:active{background:var(--gold-soft)}
.pinpad .ok{background:var(--navy);color:#fff;border-color:var(--navy)}

.toast{position:fixed;top:calc(14px + env(safe-area-inset-top));left:18px;right:18px;max-width:484px;margin:0 auto;z-index:60;background:var(--navy);color:#fff;border-radius:16px;padding:12px 16px;font-size:14px;font-weight:700;box-shadow:0 10px 24px rgba(31,43,82,.3);animation:fade .15s}
.toast.err{background:var(--buy-deep)}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--navy);animation:sp .7s linear infinite;margin:30px auto}
@keyframes sp{to{transform:rotate(360deg)}}
.diff{display:flex;flex-direction:column;gap:3px;font-size:13px;background:var(--surface-sunken);border-radius:12px;padding:8px 10px}
.diff s{color:var(--buy-ink)}.diff ins{text-decoration:none;color:var(--sell-ink);font-weight:800}
.ver{text-align:center;font-size:11px;color:var(--ink-faint);padding:8px}
.price .l .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-end:6px;vertical-align:middle}
.dot.ok{background:#4cc38a;box-shadow:0 0 0 3px rgba(76,195,138,.18)}.dot.warn{background:#e8a23a}.dot.man{background:#9aa3bd}
.price .g>div{flex:1}.price .g>div+div{border-inline-start:1px solid #364370;padding-inline-start:12px}