*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  --bg:#0f0f0f;--bg2:#1a1a1a;--bg3:#242424;
  --card:#1e1e1e;--border:#2a2a2a;
  --text:#fff;--muted:#888;
  --blue:#4da3ff;--purple:#c36eff;--pink:#ff6b9d;
  --gold:#ffd700;--green:#4cd964;--red:#ff3b30;
  --r:16px;
  --shadow:0 2px 12px rgba(0,0,0,.4);
}

/* ── Light theme ── */
body.light{
  --bg:#f0f2f5;--bg2:#ffffff;--bg3:#e8eaed;
  --card:#ffffff;--border:#e0e0e0;
  --text:#0f0f0f;--muted:#666;
  --shadow:0 2px 12px rgba(0,0,0,.08);
}
body.light .header{
  background:var(--bg);border-bottom-color:var(--border);
}
body.light .svc-card{
  background:#fff;border-color:#e8e8e8;
}
body.light .bottom-nav{
  background:#fff;border-color:#e0e0e0;
  box-shadow:0 -2px 20px rgba(0,0,0,.08);
}
body.light .nav-btn{color:#999}
body.light .nav-btn.on{color:var(--blue)}
body.light .pkg-row{background:#fff;border-color:#e8e8e8}
body.light .pkg-row.sel .pkg-amount,
body.light .pkg-row.sel .pkg-per { color: #fff; }
body.light .pkg-row.sel.pkg-stars   { background: #1e1a00; }
body.light .pkg-row.sel.pkg-premium { background: #150028; }
body.light .pkg-row.sel.pkg-gift    { background: #001a0a; }
body.light .order-item{background:#fff;border-color:#e8e8e8}
body.light .hfilter-btn{background:#f0f2f5;border-color:#ddd;color:#666}
body.light .pstat-card{background:#f0f2f5;border-color:#e0e0e0}
body.light .profile-menu{background:#fff}
body.light .pmenu-item{border-bottom-color:#f0f2f5}
body.light .page-hd{background:var(--bg)}
.username-wrap{
  background:#242424;border:1px solid #2a2a2a;border-radius:12px;
  display:flex;align-items:center;min-height:44px;
  transition:border-color .2s,background .2s;overflow:hidden;
}
body.light .username-wrap{background:#f0f2f5;border-color:#ddd}
body.light #chip-avatar{background:#c0c8d0}
body.light #prod-target{color:#111}
body.light #custom-amount-box{background:#f0f2f5;border-color:#ddd}
body.light .prod-order-bar{background:rgba(240,242,245,.95);border-top-color:#e0e0e0}
body.light .quick-amt{background:#f0f2f5;border-color:#ddd;color:#333}
body.light .f-input{background:#f0f2f5;border-color:#ddd;color:#111}
body.light #topup-methods > div,
body.light #topup-selected-method{background:#fff;border-color:#e8e8e8}
body.light #topup-info{background:#fff;border-color:#e8e8e8;color:#555}
body.light .order-icon-wrap.order-icon-stars   {background:#fff8e1}
body.light .order-icon-wrap.order-icon-premium {background:#f3e5f5}
body.light .order-icon-wrap.order-icon-gift    {background:#e8f5e9}
body.light #history-stats{background:linear-gradient(135deg,#e8f5e9,#f1f8e9);border-color:#c8e6c9}
body.light #hstat-total{color:#2e7d32}
body.light #hstat-spent{color:#1565c0}

/* Light modeda input va matn ranglari */
body.light #prod-target { color: #111; }
body.light #custom-amount-input { color: #111; }
body.light #username-wrap .logo-arrow,
body.light #username-wrap span[style*="color:#555"] { color: #999 !important; }
body.light .svc-card .logo-arrow { color: #bbb !important; }
body.light .svc-card [style*="color:#888"] { color: #666 !important; }
body.light [style*="color:#555"] { color: #999; }
body.light [style*="color:#666"] { color: #777; }
body.light [style*="color:#888"] { color: #666; }
/* balance header tugmasi qorang'i fonda — matn har doim oq */
body.light #prod-total { color: var(--text); }
body.light .page-title { color: var(--text); }
body.light .prod-step-label { color: var(--text); }
body.light #chip-avatar { background: #ddd; }
body.light #custom-amount-total { background:#e8f0ff; border-color:#b0c4ff; }
body.light #custom-calc { color: #1a56c4; }

/* ── Lucide icons ── */
.lc-icon { width:20px;height:20px;stroke-width:2;display:inline-flex;flex-shrink:0;vertical-align:middle }
.pmenu-icon .lc-icon { width:22px;height:22px;color:var(--blue) }
.pmenu-arr-icon { width:16px;height:16px;color:var(--muted);flex-shrink:0 }

/* Settings block */
.settings-block{
  margin:12px 16px;padding:18px 16px;
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;
}
.settings-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.settings-row:last-child{border-bottom:none}
.settings-lbl{font-size:14px;font-weight:600;color:var(--text)}
.settings-btns{display:flex;gap:6px}
.theme-btn,.lang-btn{
  padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;
  border:1.5px solid var(--border);background:var(--bg3);
  color:var(--muted);cursor:pointer;transition:all .15s;
}
.theme-btn.theme-on,.lang-btn.lang-on{
  background:var(--blue);border-color:var(--blue);color:#fff;
}

body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  min-height:100vh;max-width:480px;margin:0 auto;
  padding-bottom:100px;overflow-x:hidden;
}

/* ── Screens ── */
.screen{display:none;animation:fadeUp .25s ease}
.screen.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Loading ── */
#loading{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;height:100vh;gap:16px;
}
.spin{
  width:36px;height:36px;border:3px solid var(--border);
  border-top-color:var(--blue);border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Header ── */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;position:sticky;top:0;
  background:var(--bg);z-index:50;border-bottom:1px solid var(--border);
}
.logo{display:flex;align-items:center;gap:8px}
.logo-box{
  width:36px;height:36px;background:var(--blue);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;
}
.logo-arrow{color:var(--muted);font-size:20px;line-height:1}
.btn-fill{
  background:var(--green);color:#fff;border:none;
  padding:9px 18px;border-radius:30px;font-size:14px;font-weight:600;
  cursor:pointer;transition:opacity .15s;
}
.btn-fill:active{opacity:.8}

/* ── Balance ── */
.balance-card{
  margin:14px 20px;padding:20px;
  background:linear-gradient(135deg,#1a2a4a,#0d1a30);
  border-radius:var(--r);border:1px solid #1e3a6e;
}
.bal-label{font-size:12px;color:var(--muted);margin-bottom:5px}
.bal-amount{font-size:30px;font-weight:800}
.bal-amount small{font-size:15px;color:var(--muted);margin-left:4px;font-weight:400}

/* ── Section ── */
.section{padding:0 20px;margin-bottom:6px}
.sec-title{
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;
}

/* ── Product cards (home) ── */
.prod-list{display:flex;flex-direction:column;gap:10px}
.prod-card{
  background:var(--card);border-radius:var(--r);padding:16px;
  display:flex;align-items:center;gap:14px;cursor:pointer;
  border:1px solid var(--border);transition:transform .12s,background .12s;
}
.prod-card:active{transform:scale(.98);background:var(--bg3)}
.prod-icon{
  width:54px;height:54px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;
}
.prod-icon.stars  {background:linear-gradient(135deg,#1a1a00,#3a3000)}
.prod-icon.premium{background:linear-gradient(135deg,#1a0030,#2d004d)}
.prod-icon.gift   {background:linear-gradient(135deg,#001a10,#002a18)}
.prod-info{flex:1}
.prod-name{font-size:16px;font-weight:600;margin-bottom:3px}
.prod-desc{font-size:13px;color:var(--muted)}
.prod-arr{color:var(--muted);font-size:22px;line-height:1}

/* ── Page header ── */
.page-hd{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px 10px;
}

/* ── Products screen ── */
.prod-hero {
  margin: 12px 16px 20px;
  border-radius: 20px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.prod-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: inherit;
  opacity: .08;
}
.prod-hero-anim {
  width: 100px;
  height: 100px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.prod-hero-title {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  position: relative;
  z-index: 1;
}
.prod-hero-desc {
  font-size: 13px;
  color: #aaa;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Hero variants */
.prod-hero-stars   { background: linear-gradient(145deg,#1c1600,#2e2400); border: 1px solid #3d3000; }
.prod-hero-premium { background: linear-gradient(145deg,#140028,#22004a); border: 1px solid #44008a; }
.prod-hero-gift    { background: linear-gradient(145deg,#001a0e,#002c18); border: 1px solid #005030; }

.prod-hero-icon-stars   { background: linear-gradient(135deg,#2e2400,#4a3c00); box-shadow: 0 4px 24px rgba(255,210,0,.25); }
.prod-hero-icon-premium { background: linear-gradient(135deg,#220048,#3a0080); box-shadow: 0 4px 24px rgba(180,80,255,.25); }
.prod-hero-icon-gift    { background: linear-gradient(135deg,#003018,#005028); box-shadow: 0 4px 24px rgba(76,217,100,.25); }

/* 3-column price grid */
.prod-grid-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 16px;
  margin-bottom: 16px;
}
.pcard {
  background: #1a1a1a;
  border-radius: 16px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid #272727;
  transition: border-color .15s, transform .12s, background .12s;
  position: relative;
}
.pcard:active { transform: scale(.96); }
.pcard.sel    { background: #111; }
.pcard.hot    { border-color: #3a2e00; }
.pcard.hot.sel{ border-color: var(--gold); }

/* sel glow per type */
.pcard-stars.sel   { border-color: var(--gold);   box-shadow: 0 0 0 1px var(--gold),   0 4px 16px rgba(255,215,0,.15); }
.pcard-premium.sel { border-color: var(--purple);  box-shadow: 0 0 0 1px var(--purple), 0 4px 16px rgba(195,110,255,.15); }
.pcard-gift.sel    { border-color: var(--green);   box-shadow: 0 0 0 1px var(--green),  0 4px 16px rgba(76,217,100,.15); }

.pcard-badge {
  position: absolute;
  top: -1px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 800;
  padding: 3px 8px; border-radius: 0 0 8px 8px;
  white-space: nowrap;
}
.pcard-badge-stars   { background: var(--gold);   color: #000; }
.pcard-badge-premium { background: var(--purple);  color: #fff; }
.pcard-badge-gift    { background: var(--green);   color: #000; }

.pcard-num  { font-size: 22px; font-weight: 800; margin: 8px 0 2px; }
.pcard-unit { font-size: 11px; color: #666; margin-bottom: 8px; }
.pcard-price{ font-size: 12px; font-weight: 700; }
.pcard-price-stars   { color: var(--gold); }
.pcard-price-premium { color: var(--purple); }
.pcard-price-gift    { color: var(--green); }

/* Step label */
.prod-step-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 6px;
}

/* Horizontal package row */
.pkg-row {
  background: #1a1a1a;
  border: 1.5px solid #272727;
  border-radius: 10px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color .15s, background .12s, transform .1s;
  position: relative;
}
.pkg-row:active { transform: scale(.985); }

.pkg-row.sel.pkg-stars   { border-color: var(--gold);   background: #1e1a00; }
.pkg-row.sel.pkg-premium { border-color: var(--purple);  background: #150028; }
.pkg-row.sel.pkg-gift    { border-color: var(--green);   background: #001a0a; }

.pkg-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  overflow: hidden;
}
.pkg-icon-stars   { background: linear-gradient(135deg,#2a2000,#3d3000); }
.pkg-icon-premium { background: linear-gradient(135deg,#1e0040,#320068); }
.pkg-icon-gift    { background: linear-gradient(135deg,#001f10,#003820); }

.pkg-info { flex: 1; }
.pkg-amount { font-size: 13px; font-weight: 700; margin-bottom: 0; color: var(--text); }
.pkg-per    { font-size: 11px; color: var(--muted); }

.pkg-price-wrap { text-align: right; flex-shrink: 0; }
.pkg-price { font-size: 13px; font-weight: 800; }
.pkg-price-stars   { color: var(--gold); }
.pkg-price-premium { color: var(--purple); }
.pkg-price-gift    { color: var(--green); }
.pkg-per-unit { font-size: 10px; color: #555; margin-top: 1px; }

.pkg-radio {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid #333;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s;
}
.pkg-row.sel .pkg-radio { background: var(--pkg-accent); border-color: var(--pkg-accent); }
.pkg-radio-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  opacity: 0; transition: opacity .15s;
}
.pkg-row.sel .pkg-radio-dot { opacity: 1; }

.pkg-hot-badge {
  position: absolute;
  top: -1px; right: 10px;
  font-size: 9px; font-weight: 800;
  padding: 2px 7px;
  border-radius: 0 0 6px 6px;
  display: flex; align-items: center; gap: 3px;
}
.pkg-hot-stars   { background: var(--gold);   color: #000; }
.pkg-hot-premium { background: var(--purple);  color: #fff; }
.pkg-hot-gift    { background: var(--green);   color: #000; }

/* Sticky order bar */
.prod-order-bar {
  position: sticky;
  bottom: 76px;
  margin: 12px 16px 0;
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 10px 10px 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  backdrop-filter: blur(12px);
}
.prod-order-btn {
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s, transform .12s;
  flex-shrink: 0;
}
.prod-order-btn:active { opacity: .85; transform: scale(.97); }
.prod-order-btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-back{
  width:36px;height:36px;background:var(--bg3);border:none;
  border-radius:10px;color:var(--text);font-size:22px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;line-height:1;
}
.page-title{font-size:20px;font-weight:700}

/* ── Price grid ── */
.price-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;padding:0 20px;
}
.price-card{
  background:var(--card);border-radius:var(--r);padding:16px;
  text-align:center;cursor:pointer;
  border:2px solid var(--border);transition:border-color .15s,transform .12s;
}
.price-card:active{transform:scale(.97)}
.price-card.sel{border-color:var(--blue)}
.price-card.hot{border-color:var(--gold)}
.badge{
  display:inline-block;font-size:10px;font-weight:700;
  background:var(--gold);color:#000;
  padding:2px 8px;border-radius:20px;margin-bottom:8px;
}
.price-num{font-size:24px;font-weight:800;margin-bottom:3px}
.price-unit{font-size:12px;color:var(--muted);margin-bottom:10px}
.price-cost{font-size:15px;font-weight:700;color:var(--blue)}

/* ── Form ── */
.form-wrap{padding:16px 20px 0}
.f-label{font-size:13px;color:var(--muted);margin-bottom:7px;display:block}
.f-input{
  width:100%;background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;color:var(--text);font-size:15px;
  outline:none;transition:border-color .15s;
}
.f-input:focus{border-color:var(--blue)}
.f-input::placeholder{color:var(--muted)}

/* ── Total row ── */
.total-row{
  display:flex;justify-content:space-between;align-items:center;
  margin:14px 20px;padding:14px 16px;
  background:var(--bg3);border-radius:var(--r);
}
.total-lbl{color:var(--muted);font-size:14px}
.total-val{font-size:18px;font-weight:700}

/* ── Buttons ── */
.btn{
  width:100%;border:none;padding:16px;border-radius:14px;
  font-size:16px;font-weight:700;cursor:pointer;transition:opacity .15s;
}
.btn:active{opacity:.85}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-blue  {background:var(--blue);color:#fff}
.btn-purple{background:var(--purple);color:#fff}
.btn-pink  {background:var(--pink);color:#fff}
.btn-wrap{padding:0 20px 24px}

/* ── Orders ── */
.order-item{
  background:var(--card);border-radius:14px;padding:14px 12px 14px 14px;
  margin-bottom:10px;border:1px solid var(--border);
  display:flex;align-items:center;gap:12px;
  transition:border-color .15s;
}
.order-icon-wrap{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.order-icon-wrap.order-icon-stars   {background:#2a2000}
.order-icon-wrap.order-icon-premium {background:#1a0d3a}
.order-icon-wrap.order-icon-gift    {background:#0d2a0d}
.order-info{flex:1;min-width:0}
.order-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.order-meta{font-size:12px;color:var(--muted);margin-top:2px}
.order-repeat-btn{
  flex-shrink:0;width:34px;height:34px;border-radius:10px;
  background:#1e1e1e;border:1px solid #2a2a2a;
  color:#888;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.order-repeat-btn:active{background:#2a2a2a;color:#fff}
.status-chip{
  font-size:11px;font-weight:700;padding:3px 9px;
  border-radius:20px;white-space:nowrap;flex-shrink:0;
}
.s-pending   {background:#2a2000;color:var(--gold)}
.s-processing{background:#001a3a;color:var(--blue)}
.s-completed {background:#001800;color:var(--green)}
.s-cancelled {background:#1a0000;color:var(--red)}

/* History filter */
.hfilter-btn{
  flex-shrink:0;background:#1a1a1a;border:1.5px solid #2a2a2a;
  border-radius:20px;padding:7px 14px;font-size:12px;font-weight:600;
  color:#666;cursor:pointer;white-space:nowrap;transition:all .15s;
  display:flex;align-items:center;gap:5px;
}
.hfilter-btn.hfilter-on{
  background:#1e3a5a;border-color:#4da3ff;color:#4da3ff;
}

/* ── Referral ── */
.ref-hero{
  margin:14px 20px;padding:22px 20px;text-align:center;
  background:linear-gradient(135deg,#0d1f3a,#1a0d3a);
  border-radius:var(--r);border:1px solid #1e3a6e;
}
.ref-hero h2{font-size:20px;font-weight:700;margin-bottom:8px}
.ref-hero p{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:18px}
.ref-link-box{
  display:flex;align-items:center;gap:10px;
  background:var(--bg);border-radius:12px;padding:12px 14px;
}
.ref-link-txt{flex:1;font-size:12px;color:var(--blue);word-break:break-all;text-align:left}
.btn-copy{
  background:var(--blue);color:#fff;border:none;
  padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;
  white-space:nowrap;
}
.ref-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 20px 14px}
.stat-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:16px;text-align:center;
}
.stat-val{font-size:26px;font-weight:800;color:var(--blue)}
.stat-lbl{font-size:12px;color:var(--muted);margin-top:4px}

/* ── Topup ── */
.method-list{display:flex;flex-direction:column;gap:10px;padding:0 20px}
.method-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:16px;
  display:flex;align-items:center;gap:14px;cursor:pointer;
  transition:border-color .15s;
}
.method-card:active{border-color:var(--blue)}
.method-icon{font-size:30px}
.method-name{font-size:15px;font-weight:600}
.method-desc{font-size:12px;color:var(--muted);margin-top:3px}

/* ── Empty state ── */
.empty{
  text-align:center;padding:48px 20px;
  color:var(--muted);font-size:14px;
}
.empty-ico{font-size:48px;margin-bottom:12px}

/* ── Toast ── */
#toast{
  position:fixed;top:72px;left:50%;transform:translateX(-50%);
  background:var(--bg3);color:var(--text);
  padding:11px 20px;border-radius:30px;font-size:14px;font-weight:500;
  border:1px solid var(--border);z-index:999;
  opacity:0;pointer-events:none;transition:opacity .25s;white-space:nowrap;
}
#toast.show{opacity:1}

/* ── Bottom nav ── */
.bottom-nav{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  width:auto;background:var(--bg2);
  border:1px solid var(--border);
  border-radius:50px;
  display:flex;align-items:center;padding:6px 10px;z-index:100;
  box-shadow:0 4px 24px rgba(0,0,0,.5);
  gap:16px;
}
.nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px;cursor:pointer;color:var(--muted);
  font-size:11px;font-weight:500;border:none;background:none;
  transition:color .15s;border-radius:10px;
}
.nav-btn.on{color:var(--blue)}
.nav-btn svg{width:22px;height:22px}
.nav-logo-btn{
  width:46px;height:46px;background:var(--blue);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  font-weight:800;color:#fff;margin:0 4px;flex-shrink:0;cursor:pointer;
  transition:opacity .15s,transform .1s;text-align:center;
}
.nav-logo-btn:active{opacity:.75;transform:scale(.93)}
.nav-logo-btn span{font-size:9px;font-weight:800;display:block;line-height:1.3}

/* ── Alert ── */
.alert{
  margin:10px 20px;padding:13px 16px;border-radius:12px;
  font-size:14px;font-weight:500;
}
.alert-ok {background:#001800;color:var(--green);border:1px solid #004400}
.alert-err{background:#1a0000;color:var(--red);border:1px solid #440000}

/* ── User Avatar (header) ── */
.user-avatar-wrap{
  display:flex;align-items:center;gap:8px;
  cursor:pointer;text-decoration:none;
}
.user-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--blue);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;color:#fff;flex-shrink:0;
  border:2px solid rgba(255,255,255,0.15);
}
.user-avatar img{width:100%;height:100%;object-fit:cover}

/* ── Profile screen ── */
.profile-hero{
  display:flex;flex-direction:column;align-items:center;
  padding:24px 20px 20px;gap:10px;
}
.profile-avatar{
  width:86px;height:86px;border-radius:50%;
  background:var(--blue);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:36px;font-weight:700;color:#fff;
  border:3px solid var(--border);
}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-name{font-size:20px;font-weight:700}
.profile-username{font-size:14px;color:var(--muted)}

/* ── Profile new design ── */
.prf-menu-card{
  margin:0 16px 12px;
  background:var(--card);border-radius:18px;
  border:1px solid var(--border);overflow:hidden;
}
.prf-row{
  display:flex;align-items:center;gap:14px;
  padding:13px 16px;cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.prf-row:active{background:var(--bg3)}
.prf-icon-wrap{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.prf-icon{width:20px;height:20px;color:#fff;stroke-width:2}
.prf-label{flex:1;font-size:15px;font-weight:500;color:var(--text)}
.prf-value{font-size:14px;font-weight:600;color:var(--muted);flex-shrink:0}
.prf-chevron{width:16px;height:16px;color:var(--border);flex-shrink:0;stroke-width:2.5}

.lang-pick-btn{
  display:flex;align-items:center;gap:14px;width:100%;
  background:none;border:none;border-bottom:1px solid var(--border);
  padding:16px 20px;cursor:pointer;font-size:16px;font-weight:500;color:var(--text);
  transition:background .12s;
}
.lang-pick-btn:active{background:var(--bg3)}
body.light .lang-pick-btn{border-bottom-color:#f0f0f0;color:#111}
body.light #lang-modal{background:#fff;border-color:#e0e0e0}

body.light .prf-menu-card{background:#fff;border-color:#e8e8e8}
body.light .prf-row{border-bottom-color:#f0f0f0}
body.light .prf-row:active{background:#f5f5f5}
body.light .lang-pick-btn{border-bottom-color:#f0f0f0}

/* Eski stillar (backward compat) */
.profile-stats{display:none}
.profile-menu{display:none}

/* ── Arrow bounce ── */
.logo-arrow {
  display:inline-block;
  animation: arrowBounce 1.2s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%,100% { transform: translateX(0); }
  50%      { transform: translateX(-5px); }
}
@keyframes expandBounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* ── Avatar pulse ── */
#header-avatar {
  animation: avatarPulse 2s ease-in-out infinite;
}
@keyframes avatarPulse {
  0%,100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(77,163,255,0.5); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(77,163,255,0); }
}

/* ── Lottie player transparent background ── */
lottie-player {
  background: transparent !important;
  --lottie-player-background: transparent;
}

/* ── Service cards ── */
.svc-card {
  background: #1a1a1a;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  overflow: visible;
  transition: transform .12s, background .12s;
  position: relative;
  padding-right: 12px;
}
.svc-card.svc-pressed { transform: scale(.98); background: #222; }

/* Animated glowing border via outline box-shadow */
.svc-stars  { animation: borderStars  2.4s ease-in-out infinite; }
.svc-premium{ animation: borderPrem   2.4s ease-in-out infinite; animation-delay: .4s; }
.svc-gift   { animation: borderGift   2.4s ease-in-out infinite; animation-delay: .8s; }

/* Card arrows — same bounce but staggered */
.svc-stars  .logo-arrow { animation-delay: 0s; }
.svc-premium .logo-arrow{ animation-delay: .4s; }
.svc-gift   .logo-arrow { animation-delay: .8s; }

@keyframes borderStars {
  0%,100% { box-shadow: 0 0 0 1.5px #3a2e00, 0 4px 18px rgba(255,200,0,.06); }
  50%      { box-shadow: 0 0 0 1.5px #ffd700, 0 4px 24px rgba(255,215,0,.22); }
}
@keyframes borderPrem {
  0%,100% { box-shadow: 0 0 0 1.5px #2a0050, 0 4px 18px rgba(180,80,255,.06); }
  50%      { box-shadow: 0 0 0 1.5px #c36eff, 0 4px 24px rgba(195,110,255,.22); }
}
@keyframes borderGift {
  0%,100% { box-shadow: 0 0 0 1.5px #003020, 0 4px 18px rgba(80,220,140,.06); }
  50%      { box-shadow: 0 0 0 1.5px #4cd964, 0 4px 24px rgba(76,217,100,.22); }
}

/* Icon containers */
.svc-icon-wrap {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin: 12px 0 12px 12px;
}
.svc-icon-stars  { background: linear-gradient(135deg,#241c00,#3d3000); }
.svc-icon-premium{ background: linear-gradient(135deg,#1a0035,#30005a); }
.svc-icon-gift   { background: linear-gradient(135deg,#001f10,#003020); }

/* Number input spinner o'chirish */
#custom-amount-input::-webkit-outer-spin-button,
#custom-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#custom-amount-input { -moz-appearance: textfield; }

/* ── Quick amount buttons ── */
.quick-amt {
  background:#1e1e1e;border:1px solid #2a2a2a;border-radius:10px;
  color:#fff;font-size:13px;font-weight:600;padding:10px 4px;
  cursor:pointer;transition:border-color .15s,background .15s;width:100%;
}
.quick-amt:active { background:#242424;border-color:#4da3ff; }

/* ── Premium package styles ── */
.pkg-prem-row {
  flex-wrap: wrap;
  padding: 14px 14px 12px;
}

/* Premium icon wrapper */
.pkg-prem-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg,#1a0035,#30005a);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Popular highlight ring */
.pkg-prem-popular {
  border-color: #c36eff !important;
  box-shadow: 0 0 0 1px #c36eff, 0 4px 20px rgba(195,110,255,.2);
}

/* Savings badge */
.pkg-save-badge {
  position: absolute;
  top: -1px;
  right: 14px;
  background: linear-gradient(135deg,#4cd964,#36c050);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 0 0 8px 8px;
  letter-spacing: .3px;
}

/* Strikethrough original price */
.pkg-orig-price {
  font-size: 11px;
  color: var(--muted);
  text-decoration: line-through;
  text-align: right;
  margin-top: 2px;
  opacity: .75;
}

/* ── Premium features block ── */
.prem-features {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-top: 4px;
}
.prem-feat-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 12px;
}
.prem-feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.prem-feat-item {
  font-size: 12px;
  color: var(--text);
  background: var(--bg3);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}

/* Admin redirect rows */
.pkg-prem-admin {
  opacity: .88;
  border-style: dashed;
}
.pkg-prem-admin:active { transform: scale(.985); }

/* Admin badge button */
.pkg-admin-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--purple);
  background: rgba(195,110,255,.12);
  border: 1px solid rgba(195,110,255,.3);
  border-radius: 20px;
  padding: 5px 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Light mode overrides */
body.light .prem-features { background:#fff; border-color:#e8e8e8; }
body.light .prem-feat-item { background:#f0f2f5; }
body.light .pkg-prem-popular {
  border-color: #9040d0 !important;
  box-shadow: 0 0 0 1px #9040d0, 0 4px 20px rgba(144,64,208,.15);
}
body.light .pkg-admin-btn {
  color: #7b2fff;
  background: rgba(123,47,255,.1);
  border-color: rgba(123,47,255,.25);
}

/* ── Gift modal ── */
#gift-modal textarea:focus,
#gift-modal input:focus {
  border-color: var(--green) !important;
  outline: none;
}
body.light #gift-modal { background: #fff; }
body.light #gift-modal input,
body.light #gift-modal textarea {
  background: #f0f2f5;
  border-color: #ddd;
  color: #0f0f0f;
}

/* Izoh toggle row */
.gm-note-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 13px 16px;
  cursor: pointer;
  user-select: none;
  transition: border-color .2s;
}
.gm-note-toggle-row:active { opacity: .85; }
.gm-note-toggle-row:has(.gm-toggle-on) { border-color: var(--green); }

/* Toggle switch */
.gm-toggle {
  width: 44px; height: 24px;
  background: #333;
  border-radius: 12px;
  position: relative;
  flex-shrink: 0;
  transition: background .2s;
}
.gm-toggle-on { background: var(--green); }
.gm-toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.gm-toggle-on .gm-toggle-knob { transform: translateX(20px); }

body.light .gm-note-toggle-row { background: #f5f5f5; border-color: #e0e0e0; }
body.light .gm-toggle { background: #ccc; }

/* ── Gift grid ── */
.gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gift-card {
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 12px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .12s, transform .1s;
  overflow: hidden;
}
.gift-card:active { transform: scale(.96); }
.gift-card.gift-sel {
  border-color: var(--green);
  background: #001a0a;
  box-shadow: 0 0 0 1px var(--green), 0 4px 16px rgba(76,217,100,.2);
}

/* Limited badge */
.gift-badge {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: linear-gradient(90deg,#ff9500,#ff6b00);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  padding: 3px 0;
  letter-spacing: .5px;
  border-radius: 14px 14px 0 0;
}
.gift-limited { border-color: #ff9500; }
.gift-limited.gift-sel { border-color: var(--green); }

/* Thumbnail */
.gift-img-wrap {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.gift-limited .gift-img-wrap { margin-top: 10px; }
.gift-thumb {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 8px;
}
.gift-thumb-ph {
  font-size: 48px;
  line-height: 1;
}

/* Name & price */
.gift-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin-bottom: 4px;
  line-height: 1.2;
}
.gift-price {
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
}

/* Light mode */
/* Products screen balance pill */
.prod-balance-pill {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
}
body.light .prod-balance-pill {
  background: #1a1a1a;
  border-color: #333;
  color: #fff;
}

body.light .gift-card { background: #fff; border-color: #e8e8e8; }
body.light .gift-card.gift-sel { background: #001a0a; border-color: var(--green); }
body.light .gift-card.gift-sel .gift-name { color: #fff; }
body.light .gift-limited { border-color: #ff9500; }