/* Persian Font: put file at /miniapp/assets/fonts/Anjoman-FaNum-Regular.woff */
@font-face{
  font-family: "AnjomanFaNum";
  src: url("./fonts/Anjoman-FaNum-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#0b0f17;
  --card:#121826;
  --muted:#9aa4b2;
  --text:#e6edf3;
  --border:#1f2a3a;
  --primary:#1f6feb;
  --danger:#ff5d5d;
  --success:#23c55e;
  --shadow: 0 18px 45px rgba(0,0,0,.35);
  --radius:18px;
  --navH:74px;
  --inputBg: rgba(11,15,23,.35);
  --inputBg2: rgba(11,15,23,.45);
  --inputBg3: rgba(11,15,23,.5);
  --glass: rgba(18,24,38,.75);
  --glass2: rgba(18,24,38,.92);
  --glass3: rgba(18,24,38,.78);
  --glass4: rgba(18,24,38,.7);
  --glass5: rgba(18,24,38,.65);
  --gridLine: rgba(255,255,255,0.06);
  --radial1: rgba(139,92,246,0.18);
  --radial2: rgba(59,130,246,0.16);
  --headerA: rgba(11,15,23,.88);
  --headerB: rgba(11,15,23,.55);
  --headerC: rgba(11,15,23,0);
}

/* Light theme (day) */
html[data-theme="light"]{
  --bg:#f4f6fb;
  --card:#ffffff;
  --muted:#475569;
  --text:#0f172a;
  --border:#e2e8f0;
  --primary:#2563eb;
  --danger:#ef4444;
  --success:#16a34a;
  --shadow: 0 18px 45px rgba(15,23,42,.10);

  --inputBg: rgba(15,23,42,.05);
  --inputBg2: rgba(15,23,42,.07);
  --inputBg3: rgba(15,23,42,.09);
  --glass: rgba(255,255,255,.78);
  --glass2: rgba(255,255,255,.92);
  --glass3: rgba(255,255,255,.85);
  --glass4: rgba(255,255,255,.75);
  --glass5: rgba(255,255,255,.68);

  --gridLine: rgba(229,231,235,0.8);
  --radial1: rgba(139,92,246,0.30);
  --radial2: rgba(59,130,246,0.30);
  --headerA: rgba(244,246,251,.92);
  --headerB: rgba(244,246,251,.65);
  --headerC: rgba(244,246,251,0);
}



html,html,body{background:var(--bg);}
body{
  width:100%;
  margin:0;
  padding:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:"AnjomanFaNum", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}


.bg-layer{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:var(--bg);
  background-image:
    linear-gradient(to right, var(--gridLine) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gridLine) 1px, transparent 1px),
    radial-gradient(circle 500px at 20% 20%, var(--radial1), transparent 60%),
    radial-gradient(circle 500px at 80% 80%, var(--radial2), transparent 60%);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
}

button,input,textarea,select{
  font-family:"AnjomanFaNum", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
svg{
  width:1em;
  height:1em;
  flex:0 0 auto;
  display:block;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "AnjomanFaNum", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans Arabic", "Vazirmatn", sans-serif;
  background:var(--bg);
  color:var(--text);
}
button,input,textarea,select{font-family:inherit}
a{color:inherit}

.app{
  position:relative;
  z-index:1;
  max-width:720px;
  margin:0 auto;
  min-height:100%;
  padding-bottom: calc(var(--navH) + 22px);
}

.header{
  padding:18px 16px 8px;
  position:sticky;
  top:0;
  background: linear-gradient(to bottom, var(--headerA), var(--headerB), var(--headerC));
  backdrop-filter: blur(8px);
  z-index:10;
}
.headerRow{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.moonBtn{
  position:absolute;
  left:16px;
  top:0;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--glass4);
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pageTitle{
  margin:6px 0 0;
  font-size:34px;
  font-weight:800;
  letter-spacing:-.4px;
  text-align:center;
}
.subLine{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.content{padding:10px 16px 0}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:var(--glass4);
  color:var(--text);
  padding:10px 12px;
  border-radius:999px;
}

.searchRow{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
.search{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:var(--glass5);
  padding:10px 12px;
  border-radius:999px;
}
.search input{
  flex:1;
  border:0;
  outline:0;
  background:transparent; /* prevent inner dark strip on Telegram WebView */
  color:var(--text);
  font-size:14px;
  caret-color:var(--text);
  appearance:none;
  -webkit-appearance:none;
  box-shadow:none;
}
.iconBtn{
  width:44px;height:44px;
  padding:0;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--glass5);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.iconBtn svg{width:20px;height:20px;display:block;}

.card{
  background:var(--glass);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.list{display:flex;flex-direction:column;gap:12px;margin-top:14px}

.serviceItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
}
.serviceLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.avatar{
  width:44px;height:44px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #60a5fa, #8b5cf6);
  display:grid;
  place-items:center;
  font-weight:900;
}
.badgeDot{
  width:10px;
  height:10px;
  border-radius:50%;
  position:relative;
  flex:0 0 auto;
  --dotColor: var(--success);
  background: var(--dotColor);
}

/* Active (green) pulse */
.badgeDot.pulse{
  --dotColor: var(--success);
}
.badgeDot.pulse::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background: var(--dotColor);
  opacity:.55;
  transform: scale(1);
  animation: dotPulse 1.25s ease-out infinite;
  will-change: transform, opacity;
}

/* Expired (red) pulse */
.badgeDot.expiredPulse{
  --dotColor: var(--danger);
}
.badgeDot.expiredPulse::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background: var(--dotColor);
  opacity:.55;
  transform: scale(1);
  animation: dotPulse 1.25s ease-out infinite;
  will-change: transform, opacity;
}

/* Other states */
.badgeDot.warn{
  --dotColor:#f59e0b;
}
.badgeDot.off{
  --dotColor:#64748b;
}

@keyframes dotPulse{
  0%{ transform: scale(1); opacity:.55; }
  100%{ transform: scale(3); opacity:0; }
}
  70%{ box-shadow:0 0 0 10px rgba(255,93,93,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,93,93,0); }
}
.svcMeta{min-width:0}
.svcName{
  font-weight:800;
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.svcSub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.detailBtn{
  border:1px solid var(--border);
  background:var(--inputBg2);
  color:var(--text);
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:700;
}

.hidden{display:none !important}
.sectionTitle{
  margin:16px 0 10px;
  font-size:18px;
  font-weight:900;
}

.topInfo{
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.topInfo .small{color:var(--muted); font-size:12px}

.statusPill{
  padding:8px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  border:1px solid var(--border);
  background:var(--inputBg3);
}
.statusPill.on{color:var(--success)}
.statusPill.off{color:#94a3b8}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.statBox{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--inputBg);
}
.statLabel{color:var(--muted);font-size:12px}
.statValue{margin-top:6px;font-size:18px;font-weight:900}
.statValue.danger{color:var(--danger)}
.statValue.success{color:var(--success)}

.donutWrap{
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.donut{
  width:min(240px, 70vw);
  height:min(240px, 70vw);
  display:grid;
  place-items:center;
  position:relative;
}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut .center{
  position:absolute;
  text-align:center;
}
.donut .center .pct{font-size:30px;font-weight:900;line-height:1}
.donut .center .cap{margin-top:2px;color:var(--muted);font-size:12px}

.kv{
  padding:14px;
}
.kvRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-top:1px solid rgba(31,42,58,.65);
}
.kvRow:first-child{border-top:0}
.kvKey{color:var(--muted);font-size:12px}
.kvVal{font-weight:800; font-size:13px; text-align:left; direction:ltr}
.kvVal.rtl{direction:rtl; text-align:right}
.kvVal.small{font-weight:700;color:var(--muted)}

.linkBox{
  padding:14px;
}
.linkRow{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:10px;
}
.linkInput{
  flex:1;
  border:1px solid var(--border);
  background:var(--inputBg);
  color:var(--text);
  padding:12px 12px;
  border-radius:14px;
  font-size:12px;
  direction:ltr;
}
.actionMini{
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--inputBg);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
}

.toast{
  position:fixed;
  left:50%;
  bottom: calc(var(--navH) + 18px);
  transform:translateX(-50%);
  background:var(--glass2);
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
  color:var(--text);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:30;
}
.toast.show{opacity:1}

.nav{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  width:min(680px, calc(100% - 26px));
  height:var(--navH);
  border-radius:22px;
  border:1px solid var(--border);
  background:var(--glass3);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  justify-content:space-around;
  padding:10px 10px;
  z-index:20;
  backdrop-filter: blur(10px);
}
.navBtn{
  flex:1;
  height:56px;
  margin:0 6px;
  border-radius:18px;
  border:0;
  background:var(--bg);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
}
.navBtn svg{width:18px;height:18px}
.navBtn.active{
  background:var(--inputBg2);
  border:1px solid rgba(31,42,58,.85);
  color:var(--text);
}
.navBtn span{font-size:13px;font-weight:800}

.errBox{
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,93,93,.35);
  background:rgba(255,93,93,.08);
  color:#ffd0d0;
  font-size:13px;
}

.walletCard{
  padding:14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.walletLabel{color:var(--muted);font-size:12px}
.walletValue{font-size:34px;font-weight:900}
.walletHint{color:var(--muted);font-size:12px;margin-top:4px}

.txItem{padding:12px 14px; display:flex; justify-content:space-between; gap:10px}
.txLeft{min-width:0}
.txType{font-weight:900}
.txMeta{color:var(--muted);font-size:12px;margin-top:3px}
.txAmt{font-weight:900; direction:ltr}
.txAmt.pos{color:var(--success)}
.txAmt.neg{color:var(--danger)}

.profileHead{
  padding:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.bigAvatar{
  width:84px;height:84px;
  border-radius:50%;
  overflow:hidden;
  background: radial-gradient(circle at 30% 30%, #60a5fa, #8b5cf6);
  display:grid;
  place-items:center;
  font-size:38px;
  font-weight:900;
}
.profileName{font-size:28px;font-weight:900}
.infoList{padding:12px 14px}
.infoRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 0;
  border-top:1px solid rgba(31,42,58,.65);
}
.infoRow:first-child{border-top:0}
.infoKey{color:var(--muted);font-size:12px}
.infoVal{
  font-weight:800;
  font-size:13px;
  direction:ltr;
  text-align:left;
  display:flex;
  align-items:center;
  gap:8px;
}
.copyMini{
  width:28px;height:28px;border-radius:10px;
  border:1px solid rgba(31,42,58,.9);
  background:var(--inputBg);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
}

@media (max-width:420px){
  .pageTitle{font-size:30px}
  .donut{width:200px;height:200px}
}

.search svg{width:18px;height:18px;color:var(--muted)}

.iconBtn svg{width:18px;height:18px}

.bigAvatar img{width:100%;height:100%;object-fit:cover;display:block}

.donutTitle{
  font-weight:900;
  font-size:18px;
  margin:4px 0 10px;
  text-align:right;
}
.donutLegend{
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin:12px 0 6px;
  color:var(--text);
  font-weight:700;
  padding:0 14px;
}
.donutLegend .item{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13px}
.donutLegend .dot{
  width:10px;height:10px;border-radius:999px;display:inline-block
}
.donutLegend .dot.used{background:var(--danger)}
.donutLegend .dot.rem{background:var(--success)}

.moneyNum{font-weight:900; unicode-bidi:plaintext;}
.moneyUnit{margin-right:6px;
  display:inline-block;
  direction:rtl;
}


.moonBtn svg{width:18px;height:18px;display:block}

.txRight{direction:ltr;unicode-bidi:plaintext;text-align:left}

/* ---------------- Skeleton Loading (Shimmer) ---------------- */
.skeleton{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.11);
  border-radius: 12px;
}
html[data-theme="light"] .skeleton{
  background: rgba(15,23,42,0.14);
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-120%);
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  );
  animation: skeletonShimmer 1.1s infinite;
  will-change: transform;
}
html[data-theme="light"] .skeleton::after{
  background: linear-gradient(90deg,
    transparent,
    rgba(15,23,42,0.14),
    transparent
  );
}
@keyframes skeletonShimmer{
  100%{ transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce){
  .skeleton::after{ animation: none; }
}

/* Services skeleton cards */
.skelSvcCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.skelSvcLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.skelDot{ width:10px; height:10px; border-radius:50%; }
.skelAvatar{ width:42px; height:42px; border-radius:999px; }
.skelLines{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.skelLine1{ width:160px; max-width:44vw; height:14px; border-radius:10px; }
.skelLine2{ width:110px; max-width:34vw; height:12px; border-radius:10px; opacity:.9; }
.skelBtn{ width:70px; height:34px; border-radius:12px; flex:0 0 auto; }

/* Wallet skeleton */
.skelWalletValue{ width:140px; height:22px; border-radius:12px; }
.skelWalletHint{ width:190px; height:12px; border-radius:10px; margin-top:8px; opacity:.9; }
.skelTxLine1{ width:120px; height:14px; border-radius:10px; }
.skelTxLine2{ width:160px; height:12px; border-radius:10px; opacity:.9; }

/* Account skeleton */
.skelBigAvatar{ width:58px; height:58px; border-radius:999px; }
.skelAccName{ width:160px; height:16px; border-radius:10px; }
.skelInfoRow{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.skelInfoRow:last-child{ border-bottom:none; }
.skelInfoKey{ width:90px; height:12px; border-radius:10px; opacity:.9; }
.skelInfoVal{ width:160px; height:12px; border-radius:10px; }



/* User line skeleton */
.skelUserLine{width:180px;height:16px;border-radius:10px}
@media (max-width:360px){.skelUserLine{width:140px}}


/* WebKit autofill (Telegram iOS/Android WebView) */
.search input:-webkit-autofill,
.search input:-webkit-autofill:hover,
.search input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text);
  transition: background-color 99999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px transparent inset;
}