:root {
  --bg:#dff5fd; --surface:#f6fcff; --surface-2:#e9f5fa; --text:#07366b; --muted:#42678c; --line:#c1dfec;
  --accent:#075fe1; --accent-ink:#fff; --good:#08735d; --warning:#925206; --danger:#a93143; --radius:22px;
  --font:Vazirmatn,system-ui,sans-serif; --sky:#e5f7ff; --water-top:#6ddcff; --water-bottom:#238af6;
}
:root[data-theme="dark"] {
  --bg:#071c37; --surface:#102b4b; --surface-2:#173557; --text:#e0f5ff; --muted:#a4c8e2; --line:#294865;
  --accent:#8bdfff; --accent-ink:#05213f; --good:#90e9d3; --warning:#ffcf83; --danger:#ffabb3;
  --sky:#0c2b4b; --water-top:#126ab8; --water-bottom:#043772;
}
body { overscroll-behavior-y:contain; }
button { transition:transform .16s ease,background .16s ease; }
button:active:not(:disabled) { transform:scale(.96); }
.app-shell { max-width:560px; background:var(--bg); isolation:isolate; }
.app-header { padding:calc(10px + max(env(safe-area-inset-top),var(--host-safe-top,0px))) 23px 0; position:relative; z-index:4; background:var(--bg); }
.fluid-brandline { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:45px; }
.fluid-brand { display:flex; gap:8px; align-items:center; min-width:0; }
.fluid-brand>svg { width:24px; height:28px; flex:none; }
.fluid-brand>strong { font-size:12px; font-weight:650; overflow-wrap:anywhere; }
.fluid-tools { display:flex; gap:2px; }
.fluid-icon,.fluid-language { min-width:44px; min-height:44px; border:0; background:transparent; display:inline-flex; justify-content:center; align-items:center; }
.fluid-language { font-size:11px; font-weight:700; }
.only-icon>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.app-nav { position:static; padding:9px 0 0; display:flex; justify-content:space-between; gap:15px; max-width:none; border:0; background:transparent; box-shadow:none; backdrop-filter:none; }
.app-nav button { flex:none; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; position:relative; min-height:44px; padding:7px 0 11px; background:transparent; color:var(--muted); font-size:12px; border:0; border-radius:0; }
.app-nav button[aria-current] { color:var(--text); font-weight:750; background:none; box-shadow:none; }
.app-nav button i { width:17px; height:3px; margin-top:9px; border-radius:10px; background:var(--text); position:absolute; bottom:2px; }
.app-main { min-height:0; padding:0; }
.fluid-canvas { position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:calc(100dvh - 112px); padding:32px 24px 13px; background:var(--sky); isolation:isolate; touch-action:pan-y; }
.fluid-atmosphere { position:absolute; inset:0; z-index:-2; background:radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--surface) 55%,transparent),transparent 57%),linear-gradient(var(--bg),var(--sky)); }
.fluid-liquid { height:var(--fill); position:absolute; width:100%; left:0; bottom:0; min-height:0; z-index:-1; pointer-events:none; }
.fluid-water { position:absolute; inset:20px 0 0; background:linear-gradient(175deg,var(--water-top) 0%,var(--water-bottom) 100%); }
.fluid-wave { position:absolute; bottom:calc(100% - 32px); width:200%; height:61px; max-width:none; transform-origin:50% 100%; }
.fluid-wave path { fill:var(--water-top); }
.wave-back { left:-50%; bottom:calc(100% - 26px); opacity:.35; animation:fluid-drift 14s ease-in-out infinite alternate-reverse; }
.wave-front { left:-50%; animation:fluid-drift 12s ease-in-out infinite alternate; }
.fluid-water-shine { position:absolute; inset:0; opacity:.23; background:linear-gradient(120deg,transparent 15%,#fff4 35%,transparent 52%); }
@keyframes fluid-drift { from { transform:translateX(-12%) scaleY(.82); } to { transform:translateX(12%) scaleY(1.12); } }
.fluid-ruler { position:absolute; inset:17px 9px 16px auto; display:flex; flex-direction:column; justify-content:space-between; opacity:.45; font-size:8px; direction:ltr; pointer-events:none; color:var(--text); }
.fluid-ruler span { display:flex; align-items:center; gap:5px; }
.fluid-ruler span:after { content:''; width:7px; height:1px; background:currentColor; }
.fluid-ruler i { width:4px; height:1px; background:currentColor; margin-left:auto; }
.fluid-hero { text-align:center; flex:1; min-height:343px; }
.fluid-status { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:650; min-height:27px; padding:2px 10px; background:color-mix(in srgb,var(--surface) 68%,transparent); border-radius:30px; }
.fluid-status-dot { width:5px; height:5px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 9%,transparent); }
.tone-warning .fluid-status-dot { background:var(--warning); }
.tone-critical .fluid-status-dot { background:var(--danger); }
.tone-warning .fluid-status,.tone-critical .fluid-status { color:var(--warning); }
.tone-critical .fluid-status { color:var(--danger); }
.fluid-usage-alert { font-size:10px; }
.fluid-kicker { font-size:13px; font-weight:550; margin-top:24px; }
.fluid-metric { display:flex; justify-content:center; align-items:baseline; gap:5px; margin-top:3px; line-height:1.1; letter-spacing:-5px; }
.fluid-metric strong { font-size:clamp(65px,22vw,99px); font-weight:550; letter-spacing:-6px; line-height:1.22; }
.fluid-metric>span { font-size:12px; font-weight:600; letter-spacing:0; }
[dir="rtl"] .fluid-metric { flex-direction:column; align-items:center; gap:0; }
[dir="rtl"] .fluid-metric>span { margin-top:-5px; }
.fluid-allowance { font-size:10px; margin-top:10px; color:var(--muted); }
.fluid-allowance>span { opacity:.5; padding:0 3px; }
.fluid-connection { display:flex; justify-content:center; gap:9px; margin-top:27px; }
.fluid-primary { border:0; background:var(--text); color:var(--bg); min-height:54px; padding:0 23px; display:flex; align-items:center; gap:10px; border-radius:99px; font-size:12px; font-weight:650; box-shadow:0 5px 12px #00376b15; }
.fluid-qr { width:54px; height:54px; border:1px solid color-mix(in srgb,var(--text) 18%,transparent); background:color-mix(in srgb,var(--surface) 35%,transparent); color:var(--text); border-radius:50%; display:grid; place-items:center; }
.fluid-quick-links { display:flex; justify-content:center; flex-wrap:wrap; }
.fluid-text-button { border:0; background:transparent; min-height:44px; padding:0 6px; font-size:10px; display:flex; align-items:center; gap:5px; }
.fluid-text-button .icon { width:14px; height:14px; }
.fluid-bottom { margin-top:22px; position:relative; }
.fluid-facts { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:15px 0; border-top:1px solid color-mix(in srgb,var(--text) 14%,transparent); border-bottom:1px solid color-mix(in srgb,var(--text) 14%,transparent); }
.fluid-facts>div,.fluid-auto { display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; }
.fluid-facts>div { border-inline-end:1px solid color-mix(in srgb,var(--text) 16%,transparent); }
.fluid-facts span { font-size:9px; font-weight:500; letter-spacing:.5px; }
.fluid-facts strong { font-size:12px; font-weight:650; }
.fluid-auto { border:0; padding:0; background:none; min-height:44px; }
.fluid-auto strong { display:flex; align-items:center; gap:7px; }
.fluid-auto i { width:22px; height:13px; border-radius:12px; background:color-mix(in srgb,var(--text) 25%,transparent); padding:3px; display:inline-flex; }
.fluid-auto i:after { content:''; width:7px; height:7px; border-radius:50%; background:var(--surface); }
.fluid-auto i.on { background:var(--text); justify-content:flex-end; }
.fluid-account-controls { display:flex; align-items:center; justify-content:center; gap:22px; margin:8px 0 1px; direction:ltr; }
.fluid-arrow { border:0; min-width:44px; min-height:44px; display:grid; place-items:center; background:none; }
.fluid-prev svg { transform:rotate(180deg); }
.fluid-arrow:disabled { opacity:.3; cursor:default; }
.fluid-page-count { font-size:11px; letter-spacing:2px; }
.fluid-page-count b { font-weight:800; }
.fluid-account-picker { width:100%; min-height:70px; background:color-mix(in srgb,var(--surface) 84%,transparent); border:1px solid color-mix(in srgb,var(--surface) 95%,transparent); border-radius:20px; padding:10px 13px; display:flex; align-items:center; gap:10px; text-align:start; box-shadow:0 4px 20px #00408207; }
.fluid-picker-mark { width:35px; height:35px; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 8%,transparent); border-radius:50%; flex:none; }
.fluid-picker-text { display:flex; flex-direction:column; min-width:0; flex:1; gap:1px; }
.fluid-picker-text strong { font-size:12px; font-weight:700; overflow-wrap:anywhere; }
.fluid-picker-text>span { font-size:9px; color:var(--muted); overflow-wrap:anywhere; }
.fluid-picker-search { display:flex; align-items:center; flex-direction:column; gap:2px; font-size:8px; }
.fluid-swipe-hint { text-align:center; font-size:9px; margin-top:11px; padding-bottom:max(env(safe-area-inset-bottom),var(--host-safe-bottom,0px)); opacity:.7; }
.is-inactive .fluid-atmosphere { background:radial-gradient(ellipse at 50% 80%,color-mix(in srgb,var(--danger) 9%,var(--bg)),transparent 75%); }
.is-inactive .fluid-status { color:var(--danger); }
.metric-word { margin-top:15px; letter-spacing:-2px; }
.metric-word strong { font-size:57px; line-height:1.6; letter-spacing:-2px; }
.is-unlimited .fluid-atmosphere { background:radial-gradient(ellipse at 0% 70%,color-mix(in srgb,var(--water-top) 55%,var(--bg)),transparent 70%),radial-gradient(ellipse at 100% 90%,var(--water-top),transparent 70%); }
.is-unlimited .fluid-metric strong { font-size:126px; line-height:1; }
.fluid-empty-canvas { min-height:calc(100dvh - 112px); background:linear-gradient(var(--bg),var(--sky)); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:30px 24px; }
.fluid-empty-symbol { width:76px; margin-bottom:25px; color:var(--accent); opacity:.65; }
.fluid-empty-content { width:100%; text-align:center; }
.fluid-empty-content .empty { padding:10px 0; border:0; background:none; }
.fluid-error { margin-top:12px; }
.fluid-tray { position:fixed; z-index:10; top:115px; bottom:0; inset-inline:0; max-width:560px; margin:auto; background:var(--surface); overflow-y:auto; overscroll-behavior:contain; padding:24px 22px calc(24px + env(safe-area-inset-bottom)); border-radius:29px 29px 0 0; border:1px solid var(--line); box-shadow:0 -25px 55px #082f5a22; animation:fluid-tray-in .3s ease both; }
@keyframes fluid-tray-in { from { transform:translateY(30px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.fluid-tray-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:20px; }
.fluid-tray-title p { font-size:9px; letter-spacing:1px; color:var(--muted); margin-bottom:5px; }
.fluid-tray-title h2 { font-size:22px; font-weight:650; }
.fluid-tray .list-controls { margin-bottom:18px; }
.search-box { background:var(--surface-2); border-color:transparent; border-radius:14px; }
.search-box input { font-size:12px; }
.fluid-tray .control-row { gap:6px; flex-wrap:wrap; }
.segmented { background:var(--surface-2); border-radius:12px; }
.segmented button { font-size:10px; padding:7px 9px; min-height:38px; }
.sort-select { font-size:11px; border-radius:10px; }
.fluid-account-option { display:flex; align-items:center; gap:10px; width:100%; border:0; border-bottom:1px solid var(--line); background:none; padding:17px 2px; text-align:start; }
.fluid-account-option.selected { color:var(--accent); }
.fluid-account-no { font-size:10px; color:var(--muted); align-self:flex-start; padding-top:3px; }
.fluid-account-names { display:flex; flex-direction:column; min-width:0; flex:1; }
.fluid-account-names strong { font-size:12px; overflow-wrap:anywhere; }
.fluid-account-names>span { font-size:9px; color:var(--muted); overflow-wrap:anywhere; }
.fluid-option-state { font-size:9px; max-width:65px; }
.fluid-option-state.good { color:var(--good); }
.fluid-option-state.critical { color:var(--danger); }
.fluid-option-state.warning { color:var(--warning); }
.fluid-tray .load-more { margin-top:20px; }
.fluid-secondary { padding:24px 22px 35px; min-height:calc(100dvh - 112px); background:var(--surface); }
.fluid-secondary .page-title { margin-bottom:23px; }
.fluid-secondary .page-title h1 { font-size:31px; font-weight:580; }
.fluid-secondary .wallet-card { background:linear-gradient(130deg,var(--bg),var(--water-top)); color:var(--text); border:0; border-radius:26px; box-shadow:none; padding:24px; }
.fluid-secondary .wallet-card .muted,.fluid-secondary .wallet-card .small { color:inherit; }
.fluid-secondary .wallet-card .balance { font-weight:550; font-size:38px; }
.fluid-secondary .transaction { box-shadow:none; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding-inline:0; }
.fluid-secondary .category-card { border:1px solid var(--line); border-radius:22px; box-shadow:none; background:var(--surface-2); }
.fluid-secondary .category-card:hover { border-color:var(--accent); }
.fluid-secondary .plan-card { box-shadow:none; border-radius:22px; }
.btn { border-radius:16px; font-size:12px; }
.primary { box-shadow:none; }
dialog.sheet { border-radius:28px 28px 0 0; background:var(--surface); color:var(--text); }
.sheet-header { border-bottom:1px solid var(--line); }
.sheet-header h2 { font-weight:600; }
.sheet-body { padding-bottom:24px; }
.sheet-body .detail-usage { background:var(--bg); border-radius:23px; }
.progress { border-radius:8px; }
.toast { background:var(--text); color:var(--bg); border-radius:18px; bottom:22px; box-shadow:0 10px 35px #00396b25; }
:root[data-theme="dark"] .fluid-allowance { color:#b9d7f4; }
:root[data-theme="dark"] .fluid-primary { background:#e0f5ff; color:#07366b; }
:root[data-theme="dark"] .fluid-tray { box-shadow:0 -25px 55px #00112866; }
@media (min-width:561px) { .fluid-canvas { padding-inline:42px; } .fluid-ruler { right:18px; } .app-header { padding-inline:34px; } }
@media (max-width:374px) { .app-header { padding-inline:20px; } .fluid-canvas { padding:24px 22px 12px; } .fluid-kicker { margin-top:20px; } .fluid-metric strong { font-size:77px; } .fluid-hero { min-height:325px; } .fluid-bottom { margin-top:16px; } .fluid-primary { padding:0 19px; } .fluid-tray { padding-inline:18px; } }
@media (min-height:820px) { .fluid-canvas { padding-top:45px; } .fluid-kicker { margin-top:30px; } .fluid-connection { margin-top:33px; } .fluid-facts { padding-block:20px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }