:root{
  --bg:#0e1420; --card:#171f30; --card2:#1c2537; --text:#f2f4f8; --muted:#8a93a6;
  --blue1:#2ab8f0; --blue2:#1f6fe0; --gold:#f2c14e; --purple:#a06bf0; --pink:#f0609e;
  --danger:#f0546a; --success:#3fd07a; --radius:18px;
}
body.theme-light{
  --bg:#f2f4f8; --card:#ffffff; --card2:#eef1f6; --text:#12131a; --muted:#666f80;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); padding-bottom:86px; overflow-x:hidden;
  transition:background .3s ease, color .3s ease;
}
.page{display:none; padding:14px 14px 10px; animation:fadeIn .35s ease;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

.topbar{display:flex; align-items:center; justify-content:space-between; padding:6px 2px 14px;}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:20px; letter-spacing:.5px;}
.brand-logo{width:28px; height:28px; border-radius:8px; object-fit:cover;}
.page-title{font-weight:800; font-size:20px;}
.hidden{display:none;}

/* ===== Umumiy ikona o'lchamlari ===== */
.nav-icon svg, .menu-icon svg, .settings-icon svg{display:block;}
.nav-icon svg{width:20px; height:20px;}
.menu-arrow svg, .settings-arrow svg{width:18px; height:18px;}
.menu-icon svg{width:22px; height:22px;}
.settings-icon svg{width:19px; height:19px;}
.screen-title svg{width:19px; height:19px; display:inline-block; vertical-align:-4px; margin-right:2px;}
.service-option svg, .order-row svg{width:16px; height:16px; display:inline-block; vertical-align:-3px; margin-right:3px;}

.balance-card{
  position:relative; overflow:hidden; border-radius:22px; padding:22px 20px;
  background:linear-gradient(135deg, var(--blue1), var(--blue2));
  box-shadow:0 12px 30px rgba(31,111,224,.35);
  margin-bottom:18px;
}
.balance-glow{
  position:absolute; width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.18); top:-60px; right:-40px;
  animation:pulse 3.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1); opacity:.5;} 50%{transform:scale(1.15); opacity:.9;}}
.balance-label{color:rgba(255,255,255,.85); font-size:12px; letter-spacing:1.5px; font-weight:700;}
.balance-value{color:#fff; font-size:34px; font-weight:800; margin-top:6px;}
.balance-value small{font-size:16px; font-weight:600; opacity:.85;}
.btn-topup{
  margin-top:16px; border:none; background:rgba(255,255,255,.22); color:#fff;
  padding:11px 18px; border-radius:14px; font-weight:700; font-size:14px; cursor:pointer;
  backdrop-filter:blur(4px); transition:transform .15s ease, background .2s ease;
}
.btn-topup:active{transform:scale(.96); background:rgba(255,255,255,.32);}

.menu-list{display:flex; flex-direction:column; gap:12px;}
.menu-card{
  display:flex; align-items:center; gap:14px; background:var(--card);
  border-radius:16px; padding:14px 16px; cursor:pointer; border:1px solid transparent;
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
.menu-card:active{transform:scale(.98);}
.border-gold{border-color:rgba(242,193,78,.35);}
.border-purple{border-color:rgba(160,107,240,.35);}
.border-pink{border-color:rgba(240,96,158,.35);}
.menu-icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:var(--card2); flex:0 0 auto;
}
.menu-icon.ic-gold{color:var(--gold); background:rgba(242,193,78,.14);}
.menu-icon.ic-purple{color:var(--purple); background:rgba(160,107,240,.14);}
.menu-icon.ic-pink{color:var(--pink); background:rgba(240,96,158,.14);}
.menu-text{flex:1;}
.menu-title{font-weight:700; font-size:15px;}
.menu-sub{font-size:12.5px; color:var(--muted); margin-top:2px;}
.menu-arrow{color:var(--muted); flex:0 0 auto;}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.grid-item{
  background:var(--card); border-radius:16px; overflow:hidden; cursor:pointer;
  transition:transform .15s ease; animation:fadeIn .4s ease;
}
.grid-item:active{transform:scale(.97);}
.grid-item img, .grid-item video{width:100%; height:120px; object-fit:cover; background:var(--card2); display:block;}
.grid-item .gi-noimg{
  width:100%; height:120px; display:flex; align-items:center; justify-content:center;
  background:var(--card2); color:var(--muted);
}
.grid-item .gi-noimg svg{width:30px; height:30px;}
.grid-item .gi-body{padding:10px 12px;}
.gi-name{font-weight:700; font-size:14px;}
.gi-price{color:var(--gold); font-weight:700; font-size:13px; margin-top:4px;}
.preview-media{width:100%; max-height:220px; object-fit:cover; border-radius:14px; margin-bottom:14px; background:var(--card2); display:block;}

.top-list{display:flex; flex-direction:column; gap:10px;}
.top-row{
  display:flex; align-items:center; gap:12px; background:var(--card);
  border-radius:14px; padding:10px 14px; animation:fadeIn .3s ease;
}
.top-rank{width:26px; font-weight:800; color:var(--muted); text-align:center;}
.top-row:nth-child(1) .top-rank{color:var(--gold);}
.top-row:nth-child(2) .top-rank{color:#c9ccd6;}
.top-row:nth-child(3) .top-rank{color:#d99356;}
.top-photo{width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--card2);}
.top-name{flex:1; font-weight:600; font-size:14px;}
.top-balance{font-weight:700; color:var(--blue1); font-size:13.5px;}

.profile-head{display:flex; flex-direction:column; align-items:center; padding:16px 0 24px;}
.profile-ring{
  width:92px; height:92px; border-radius:50%; padding:3px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--blue1), var(--purple), var(--pink));
  box-shadow:0 8px 22px rgba(31,111,224,.3);
}
.profile-photo{width:100%; height:100%; border-radius:50%; object-fit:cover; background:var(--card2); border:3px solid var(--bg); display:block;}
.profile-name{font-weight:800; font-size:18px; margin-top:12px;}
.profile-sub{color:var(--muted); font-size:13px; margin-top:2px;}
.profile-id-chip{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:6px 12px;
  background:var(--card2); border-radius:20px; color:var(--muted); font-size:12px; font-weight:600;
  cursor:pointer; transition:transform .15s ease, color .2s ease;
}
.profile-id-chip:active{transform:scale(.95);}
.profile-id-chip svg{width:13px; height:13px;}

/* ===== Sozlamalar guruhlari (Profil) ===== */
.settings-group{margin-bottom:20px;}
.settings-label{
  font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.6px; margin:0 4px 8px;
}
.settings-card{background:var(--card); border-radius:16px; overflow:hidden;}
.settings-row{
  display:flex; align-items:center; gap:12px; padding:13px 14px; cursor:pointer;
  border-bottom:1px solid rgba(128,128,128,.10); transition:background .15s ease;
}
.settings-row:last-child{border-bottom:none;}
.settings-row:active{background:var(--card2);}
.settings-row.no-arrow{cursor:default;}
.settings-row.no-arrow:active{background:transparent;}
.settings-icon{
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; flex:0 0 auto;
}
.settings-icon.ic-blue{color:var(--blue1); background:rgba(42,184,240,.14);}
.settings-icon.ic-purple2{color:var(--purple); background:rgba(160,107,240,.14);}
.settings-icon.ic-pink2{color:var(--pink); background:rgba(240,96,158,.14);}
.settings-icon.ic-gray{color:var(--muted); background:var(--card2);}
.settings-text{flex:1; min-width:0;}
.settings-title{font-weight:600; font-size:14px;}
.settings-arrow{color:var(--muted); flex:0 0 auto;}

/* Switch (Bildirishnoma) */
.switch{
  width:44px; height:26px; border-radius:20px; background:var(--card2); position:relative;
  flex:0 0 auto; transition:background .25s ease; border:1px solid rgba(128,128,128,.18);
}
.switch .switch-knob{
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.3); transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.switch.on{background:linear-gradient(135deg, var(--blue1), var(--blue2)); border-color:transparent;}
.switch.on .switch-knob{transform:translateX(18px);}

/* Segmented control (Mavzu) */
.segmented{
  position:relative; display:flex; background:var(--card2); border-radius:12px; padding:3px;
  flex:0 0 auto; gap:2px;
}
.segmented-opt{
  position:relative; z-index:1; border:none; background:transparent; color:var(--muted);
  width:34px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:color .25s ease;
}
.segmented-opt svg{width:15px; height:15px;}
.segmented-opt.active{color:#fff;}
.segmented-thumb{
  position:absolute; top:3px; left:3px; width:34px; height:30px; border-radius:9px;
  background:linear-gradient(135deg, var(--blue1), var(--blue2)); transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  z-index:0;
}
.segmented-thumb.is-light{transform:translateX(36px);}

.bottom-nav{
  position:fixed; left:10px; right:10px; bottom:10px; display:flex;
  background:var(--card); border-radius:22px; padding:8px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 0; border-radius:16px; color:var(--muted); font-size:11px; font-weight:700;
  cursor:pointer; transition:all .25s ease;
}
.nav-item .nav-icon{font-size:19px; transition:transform .25s ease;}
.nav-item.active{color:#fff; background:linear-gradient(135deg, var(--blue1), var(--blue2)); box-shadow:0 6px 16px rgba(31,111,224,.4);}
.nav-item.active .nav-icon{transform:translateY(-1px) scale(1.1);}

/* ===== Alohida to'liq ekran oynalar (har bir amal — o'z oynasi) ===== */
#screenLayer{position:relative; z-index:55;}
.screen{
  position:fixed; inset:0; background:var(--bg); z-index:60;
  transform:translateX(100%); transition:transform .28s cubic-bezier(.22,.9,.32,1);
  overflow-y:auto; padding-bottom:40px;
}
.screen.show{transform:translateX(0);}
.screen-topbar{
  display:flex; align-items:center; gap:12px; padding:16px 14px 12px;
  position:sticky; top:0; background:var(--bg); z-index:2;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.screen-back{
  width:36px; height:36px; border-radius:12px; background:var(--card); display:flex;
  align-items:center; justify-content:center; font-size:18px; cursor:pointer; flex:0 0 auto;
  transition:transform .15s ease;
}
.screen-back:active{transform:scale(.9);}
.screen-title{font-weight:800; font-size:17px;}
.screen-body{padding:16px 14px 30px; animation:fadeIn .3s ease .05s both;}
.screen-body input, .screen-body select, .screen-body textarea{
  width:100%; background:var(--card2); border:1px solid rgba(255,255,255,.08); color:var(--text);
  padding:13px 14px; border-radius:12px; font-size:14px; margin-bottom:10px; outline:none;
}
.screen-body button.primary{
  width:100%; padding:14px; border:none; border-radius:14px; font-weight:700; font-size:14.5px;
  background:linear-gradient(135deg, var(--blue1), var(--blue2)); color:#fff; cursor:pointer;
  transition:transform .15s ease; margin-top:4px;
}
.screen-body button.primary:active{transform:scale(.97);}
.field-hint{color:var(--muted); font-size:12.5px; margin:-4px 0 12px;}
.service-option{
  display:flex; justify-content:space-between; align-items:center; padding:12px 14px;
  background:var(--card2); border-radius:12px; margin-bottom:8px; cursor:pointer; border:1px solid transparent;
}
.service-option.selected{border-color:var(--blue1); background:rgba(42,184,240,.12);}
.card-option{padding:12px 14px; background:var(--card2); border-radius:12px; margin-bottom:8px; cursor:pointer; border:1px solid transparent;}
.card-option.selected{border-color:var(--blue1);}
.order-row{background:var(--card2); border-radius:12px; padding:10px 12px; margin-bottom:8px; font-size:13px;}

.toast{
  position:fixed; top:16px; left:50%; transform:translateX(-50%) translateY(-30px);
  background:var(--card2); color:var(--text); padding:12px 18px; border-radius:14px;
  font-size:13.5px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.4); z-index:100;
  opacity:0; transition:all .3s ease; max-width:88%; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.error{background:var(--danger); color:#fff;}
.toast.success{background:var(--success); color:#fff;}

/* ===== TOPUP TABS & AUTO-PAY STYLES ===== */
.topup-tabs{display:flex; gap:8px; margin-bottom:12px; background:var(--card2); padding:4px; border-radius:14px;}
.topup-tab{flex:1; padding:10px 8px; border:none; background:transparent; color:var(--muted); font-size:13px; font-weight:700; border-radius:10px; cursor:pointer; transition:all .2s;}
.topup-tab.active{background:linear-gradient(135deg, var(--blue1), var(--blue2)); color:#fff; box-shadow:0 4px 12px rgba(42,184,240,.3);}
.quick-chips{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
.chip-btn{flex:1; min-width:65px; padding:8px 10px; background:var(--card2); border:1px solid rgba(255,255,255,.08); color:var(--text); border-radius:10px; font-size:12.5px; font-weight:600; cursor:pointer;}
.chip-btn:active{transform:scale(.95);}
.auto-card-details{background:var(--card2); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:14px; margin-top:10px;}
.auto-pay-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:13.5px;}
.auto-pay-label{color:var(--muted); font-size:12.5px;}
.auto-pay-val-wrap{display:flex; align-items:center; gap:8px;}
.btn-copy{padding:4px 9px; background:rgba(255,255,255,.08); border:none; border-radius:8px; color:var(--text); font-size:12px; cursor:pointer;}
.btn-copy:active{background:var(--blue1); color:#fff;}
.auto-pay-notice{background:rgba(242,181,68,.12); color:var(--warn); border-radius:10px; padding:10px 12px; font-size:12.5px; margin:12px 0; line-height:1.4;}
.auto-pay-status-box{display:flex; align-items:center; gap:12px; background:rgba(42,184,240,.08); border-radius:12px; padding:12px; margin-top:8px;}
.auto-pay-spinner{width:22px; height:22px; border:3px solid rgba(42,184,240,.3); border-top-color:var(--blue1); border-radius:50%; animation:spin 1s linear infinite; flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg);}}
.auto-pay-timer-wrap{text-align:center; color:var(--muted); font-size:13px; margin-top:12px;}