@font-face {
  font-family: "IRANSans";
  src: url("/static/fonts/IRANSans-web.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:root {
  color-scheme: dark;
  --nav-h: 92px;
  --bg: #071012;
  --surface: rgba(16,27,30,.62);
  --surface-strong: rgba(18,31,35,.78);
  --line: rgba(255,255,255,.14);
  --text: #edf7f5;
  --muted: #9ab0ad;
  --nav: rgba(13,24,27,.72);
  --accent: #14b8a6;
  --accent-2: #38bdf8;
  --shadow: 0 18px 44px rgba(0,0,0,.24);
  --glass-blur: blur(20px) saturate(145%);
}
body[data-theme="light"] {
  color-scheme: light;
  --bg: #eef7f5;
  --surface: rgba(255,255,255,.58);
  --surface-strong: rgba(255,255,255,.78);
  --line: rgba(8,47,73,.13);
  --text: #102321;
  --muted: #5b716d;
  --nav: rgba(255,255,255,.72);
  --accent: #0d9488;
  --accent-2: #0284c7;
  --shadow: 0 18px 44px rgba(15,61,58,.12);
}
* { box-sizing: border-box; }
html { min-height: 100%; overscroll-behavior-y: none; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: "IRANSans",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(56,189,248,.24), transparent 25rem),
    radial-gradient(circle at 88% 18%, rgba(20,184,166,.23), transparent 22rem),
    radial-gradient(circle at 48% 92%, rgba(245,158,11,.13), transparent 24rem),
    linear-gradient(180deg,#0a1518 0,var(--bg) 48%,#050b0d 100%);
  color: var(--text);
  letter-spacing: 0;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}
body[data-theme="light"] {
  background:
    radial-gradient(circle at 18% 8%, rgba(56,189,248,.28), transparent 24rem),
    radial-gradient(circle at 88% 16%, rgba(20,184,166,.23), transparent 22rem),
    radial-gradient(circle at 50% 92%, rgba(245,158,11,.14), transparent 24rem),
    linear-gradient(180deg,#f7fffd 0,var(--bg) 52%,#eaf5f2 100%);
}
button { font: inherit; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.boot-loader { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; align-content: center; gap: 12px; background: radial-gradient(circle at 50% 32%,rgba(20,184,166,.22),transparent 18rem),linear-gradient(180deg,rgba(7,16,18,.96),rgba(5,11,13,.98)); backdrop-filter: blur(18px) saturate(140%); transition: opacity .18s ease, visibility .18s ease; }
body[data-theme="light"] .boot-loader { background: radial-gradient(circle at 50% 32%,rgba(20,184,166,.2),transparent 18rem),linear-gradient(180deg,rgba(247,255,253,.96),rgba(238,247,245,.98)); }
.boot-loader.done { opacity: 0; visibility: hidden; }
.boot-logo { width: 74px; height: 74px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg,var(--accent),var(--accent-2)); color: #032523; font-size: 32px; font-weight: 900; box-shadow: 0 24px 56px rgba(20,184,166,.24); }
.dance-mascot { position: relative; width: 86px; height: 94px; animation: mascotGroove 1.05s ease-in-out infinite; filter: drop-shadow(0 24px 34px rgba(20,184,166,.22)); }
.dance-mascot span { position: absolute; display: block; }
.dance-mascot .head { width: 30px; height: 30px; border-radius: 50%; right: 28px; top: 4px; background: linear-gradient(135deg,#5eead4,#38bdf8); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.dance-mascot .body { width: 42px; height: 42px; right: 22px; top: 34px; border-radius: 16px 16px 20px 20px; background: linear-gradient(135deg,var(--accent),var(--accent-2)); transform-origin: 50% 10%; animation: bodyPulse 1.05s ease-in-out infinite; }
.dance-mascot .arm { width: 11px; height: 38px; top: 36px; border-radius: 999px; background: #7dd3fc; transform-origin: 50% 6px; }
.dance-mascot .arm-left { right: 15px; transform: rotate(35deg); animation: armLeft 1.05s ease-in-out infinite; }
.dance-mascot .arm-right { right: 60px; transform: rotate(-35deg); animation: armRight 1.05s ease-in-out infinite; }
.dance-mascot .leg { width: 12px; height: 32px; top: 70px; border-radius: 999px; background: #5eead4; transform-origin: 50% 4px; }
.dance-mascot .leg-left { right: 31px; transform: rotate(14deg); animation: legLeft 1.05s ease-in-out infinite; }
.dance-mascot .leg-right { right: 47px; transform: rotate(-14deg); animation: legRight 1.05s ease-in-out infinite; }
.boot-title { font-weight: 900; font-size: 16px; }
.boot-bar { width: min(220px,56vw); height: 7px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); border: 1px solid var(--line); }
.boot-bar span { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--accent),var(--accent-2)); animation: bootProgress 1.15s ease-in-out infinite; }
@keyframes bootProgress { 0% { transform: translateX(145%); } 55% { transform: translateX(0); width: 72%; } 100% { transform: translateX(-145%); width: 42%; } }
@keyframes mascotGroove { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes bodyPulse { 0%,100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(5deg) scale(1.04); } }
@keyframes armLeft { 0%,100% { transform: rotate(46deg); } 50% { transform: rotate(12deg); } }
@keyframes armRight { 0%,100% { transform: rotate(-46deg); } 50% { transform: rotate(-12deg); } }
@keyframes legLeft { 0%,100% { transform: rotate(18deg); } 50% { transform: rotate(-6deg); } }
@keyframes legRight { 0%,100% { transform: rotate(-18deg); } 50% { transform: rotate(6deg); } }
.app { position: relative; min-height: 100vh; padding: 18px 16px calc(78px + env(safe-area-inset-bottom)); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mark { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg,rgba(20,184,166,.24),rgba(56,189,248,.2)); color: #5eead4; font-weight: 900; border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: var(--glass-blur); }
body[data-theme="light"] .mark { color: #0f766e; }
.brand b { display: block; font-size: 15px; }
.brand span { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.ghost-btn { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); display: grid; place-items: center; box-shadow: var(--shadow); backdrop-filter: var(--glass-blur); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 28px 0 12px; }
.section-title h1, .section-title h2 { margin: 0; font-size: 21px; }
.sorts { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.sorts button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); padding: 8px 12px; font-weight: 800; backdrop-filter: var(--glass-blur); }
.sorts .active { color: #042f2e; background: linear-gradient(135deg,#5eead4,#7dd3fc); border-color: transparent; box-shadow: 0 10px 24px rgba(20,184,166,.18); }
main.app > section { transition: opacity .38s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1), filter .38s cubic-bezier(.22,1,.36,1); will-change: opacity, transform, filter; }
main.app > section.view-active { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); pointer-events: auto; }
main.app > section.view-idle { position: absolute; inset-inline: 16px; opacity: 0; transform: translateY(14px) scale(.985); filter: blur(3px); pointer-events: none; }
.list { display: grid; gap: 10px; }
.card { border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg,var(--surface-strong),var(--surface)); padding: 14px; box-shadow: var(--shadow); backdrop-filter: var(--glass-blur); }
.product-head, .service-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.product h3, .service h3 { margin: 0; font-size: 17px; }
.sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.badges { display: flex; gap: 7px; flex-wrap: wrap; margin: 12px 0; }
.badge { border-radius: 999px; padding: 5px 9px; background: rgba(255,255,255,.08); color: var(--muted); border: 1px solid var(--line); font-size: 12px; font-weight: 800; backdrop-filter: var(--glass-blur); }
.badge.ok { background: rgba(20,184,166,.16); color: #5eead4; }
.badge.warn { background: rgba(245,158,11,.15); color: #fbbf24; }
.badge.bad { background: rgba(251,113,133,.15); color: #fda4af; }
.buy { width: 100%; min-height: 48px; border: 0; border-radius: 8px; background: linear-gradient(135deg,var(--accent),var(--accent-2)); color: #032523; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 14px 28px rgba(20,184,166,.2); }
.buy svg { width: 20px; height: 20px; }
.progress { height: 9px; border-radius: 999px; background: #223033; overflow: hidden; margin-top: 12px; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg,#f59e0b,#14b8a6); border-radius: inherit; }
.empty { min-height: 48vh; display: grid; place-items: center; text-align: center; color: var(--muted); }
.empty b { color: var(--text); display: block; margin-bottom: 6px; font-size: 19px; }
.profile-card { display: grid; gap: 14px; padding: 16px; }
.profile-head { display: flex; align-items: center; gap: 12px; }
.avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,var(--accent),var(--accent-2)); color: #05201e; font-size: 26px; font-weight: 900; box-shadow: 0 12px 24px rgba(20,184,166,.18); }
.profile-title { min-width: 0; }
.profile-title b { display: block; font-size: 19px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-title span { display: block; color: var(--muted); font-size: 13px; direction: ltr; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-panel { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; border: 1px solid rgba(94,234,212,.24); border-radius: 8px; background: linear-gradient(135deg,rgba(20,184,166,.18),rgba(56,189,248,.1)); padding: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.wallet-icon { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; background: rgba(20,184,166,.16); color: #5eead4; }
.wallet-icon svg { width: 25px; height: 25px; }
.wallet-panel span { display: block; color: #a7f3d0; font-size: 12px; margin-bottom: 5px; }
.wallet-panel b { display: block; font-size: 32px; line-height: 1; direction: ltr; text-align: right; }
.profile-stat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.profile-stat-grid div { min-height: 74px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.07); padding: 12px; backdrop-filter: var(--glass-blur); }
.profile-stat-grid span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.profile-stat-grid b { display: block; font-size: 20px; }
.profile-list { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row span { color: var(--muted); }
.profile-action { width: 100%; min-height: 48px; border: 0; border-radius: 8px; background: linear-gradient(135deg,var(--accent),var(--accent-2)); color: #032523; font-weight: 900; margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 14px 28px rgba(20,184,166,.2); }
.profile-action svg { width: 20px; height: 20px; }
.nav { position: fixed; right: 0; left: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--nav); border-top: 1px solid var(--line); backdrop-filter: var(--glass-blur); box-shadow: 0 -18px 34px rgba(0,0,0,.14); }
.nav button { min-height: 58px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 800; display: grid; place-items: center; gap: 3px; }
.nav button svg { width: 23px; height: 23px; }
.nav button span { font-size: 12px; }
.nav .active { background: rgba(20,184,166,.15); color: #5eead4; }
body[data-theme="light"] .nav .active { color: #0f766e; }
.toast { position: fixed; right: 50%; transform: translateX(50%); width: min(520px,calc(100vw - 32px)); top: calc(14px + env(safe-area-inset-top)); z-index: 70; display: none; padding: 12px 14px; border-radius: 8px; background: var(--surface-strong); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: var(--glass-blur); }
.toast.show { display: block; }
.toast.success { background: rgba(6,78,59,.92); border-color: rgba(94,234,212,.36); color: #d1fae5; }
.toast.error { background: rgba(127,29,29,.94); border-color: rgba(252,165,165,.42); color: #fee2e2; }
.toast.info { background: var(--surface-strong); color: var(--text); }
.toast b { display: block; font-size: 13px; line-height: 1.7; }
.toast span { display: block; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.7; margin-top: 2px; }
.toast.info span { color: var(--muted); }
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; align-items: end; padding: 16px; background: rgba(0,0,0,.42); backdrop-filter: blur(10px); }
.sheet { width: min(520px,100%); margin: 0 auto; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg,var(--surface-strong),var(--surface)); box-shadow: 0 24px 70px rgba(0,0,0,.36); backdrop-filter: var(--glass-blur); padding: 14px; display: grid; gap: 12px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-head h3 { margin: 0; font-size: 18px; }
.sheet-head span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.amount-field { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.amount-field input { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.08); color: var(--text); font: inherit; font-size: 20px; font-weight: 900; direction: ltr; text-align: left; padding: 10px 12px; outline: none; }
body[data-theme="light"] .amount-field input { background: rgba(255,255,255,.68); }
.amount-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20,184,166,.16); }
.gateway-list { display: grid; gap: 8px; }
.gateway { width: 100%; min-height: 66px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.07); color: var(--text); display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; text-align: right; padding: 10px; }
.gateway svg { width: 24px; height: 24px; color: var(--accent); justify-self: center; }
.gateway b { display: block; font-size: 14px; }
.gateway small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.gateway.active { border-color: rgba(94,234,212,.5); background: linear-gradient(135deg,rgba(20,184,166,.18),rgba(56,189,248,.11)); }
.gateway.disabled { opacity: .48; cursor: not-allowed; }
.payment-details { display: grid; gap: 9px; border: 1px solid rgba(94,234,212,.28); border-radius: 8px; background: linear-gradient(145deg,rgba(20,184,166,.14),rgba(56,189,248,.08)); padding: 12px; }
.payment-details-head,.payment-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.payment-details-head b { font-size: 15px; }
.payment-details-head span,.payment-row span,.payment-address span,.payment-details small { color: var(--muted); font-size: 12px; }
.payment-row { min-height: 38px; border-bottom: 1px solid var(--line); }
.payment-row button,.payment-address button { border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 900; direction: ltr; text-align: left; padding: 0; min-width: 0; }
.payment-address { display: grid; gap: 7px; }
.payment-address button { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.07); padding: 10px; }
.payment-address b { display: block; overflow-wrap: anywhere; line-height: 1.6; font-size: 12px; }
.purchase-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.purchase-summary div,.total-line { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.07); padding: 11px; }
.purchase-summary span,.total-line span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.purchase-summary b,.total-line b { display: block; font-size: 16px; direction: ltr; text-align: right; }
.total-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.total-line span { margin: 0; }
.total-line b { font-size: 24px; color: #5eead4; }
body[data-theme="light"] .total-line b { color: #0f766e; }
.app { scrollbar-width: none; -ms-overflow-style: none; }
.app::-webkit-scrollbar { width: 0; height: 0; display: none; }
[hidden] { display: none !important; }
@media (min-width: 620px) {
  body { height: 100dvh; min-height: 100dvh; overflow: hidden; display: block; padding-bottom: 0; }
  .app {
    width: 520px;
    height: calc(100dvh - var(--nav-h));
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    padding-bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
  }
  .app::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .nav { position: fixed; right: calc((100vw - 520px) / 2); left: calc((100vw - 520px) / 2); bottom: 0; width: auto; margin: 0; border-inline: 1px solid var(--line); border-radius: 0; }
}