:root{
  --bg0:#0b2f2a;
  --bg1:#0c3a33;
  --bg2:#08241f;
  --card: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --green:#22c55e;
  --green2:#16a34a;
  --shadow: 0 18px 45px rgba(0,0,0,.35);
  --r: 18px;
  --r2: 22px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  color: var(--text);
  overflow-x:hidden;

  /* background image (optional) + gradients */
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(34,197,94,.18), transparent 55%),
    radial-gradient(1000px 650px at 80% 25%, rgba(16,185,129,.14), transparent 58%),
    radial-gradient(900px 620px at 35% 90%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2) 70%, #061c18);
}

body:after{
  content:"";
  position:fixed; inset:0;
  background-image: url("/assets/bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: .65;
  pointer-events:none;
  z-index:0;
}
body:before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(120px 120px at 25% 30%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(180px 180px at 60% 40%, rgba(255,255,255,.05), transparent 62%),
    radial-gradient(220px 220px at 78% 60%, rgba(0,0,0,.18), transparent 62%),
    radial-gradient(260px 260px at 35% 75%, rgba(0,0,0,.22), transparent 65%);
  opacity:.9;
  pointer-events:none;
  mix-blend-mode: overlay;
  z-index:1;
}

.wrap{
  max-width: 420px;
  margin:0 auto;
  padding: 18px 16px 96px;
  position:relative;
  z-index:2;
  opacity:0;
  transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
}

/* Loader */
.loader-screen{
  position:fixed; inset:0;
  display:grid; place-items:center;
  z-index:50;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(34,197,94,.18), transparent 55%),
    radial-gradient(900px 650px at 80% 35%, rgba(16,185,129,.14), transparent 58%),
    linear-gradient(180deg, var(--bg1), #07231f 70%, #061c18);
  transition: opacity .45s ease, transform .45s ease;
}
.loader-box{ display:flex; flex-direction:column; align-items:center; gap:18px; transform: translateY(-6px); }
.app-icon{
  width:92px; height:92px; border-radius:24px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  display:grid; place-items:center; overflow:hidden;
}
.app-icon svg{ width:86px; height:46px; }
.dots{ display:flex; gap:8px; margin-top:6px; }
.dot{ width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,.35); animation: pulse 1.05s infinite ease-in-out; }
.dot:nth-child(2){ animation-delay:.15s; }
.dot:nth-child(3){ animation-delay:.30s; }
@keyframes pulse{ 0%,100%{ transform:translateY(0); opacity:.35; } 50%{ transform:translateY(-4px); opacity:.95; } }
.loader-hidden{ opacity:0; transform: scale(.985); pointer-events:none; }

/* Topbar */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 6px 2px 12px; }
.user{ display:flex; align-items:center; gap:10px; min-width:0; }
.avatar{
  width:34px; height:34px; border-radius:50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
  overflow:hidden;
  display:grid; place-items:center;
  position:relative;
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:none; }
.avatarFallback{ display:grid; place-items:center; }
.uname{
  font-weight:800; font-size:16px; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width: 260px;
}
.profile-btn{
  width:38px; height:38px; border-radius:12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 24px rgba(0,0,0,.22);
  display:grid; place-items:center;
  cursor:pointer;
}

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.card.simple{ padding:16px; color: var(--muted); font-weight:800; }

.balance{ padding:16px; }
.label{ font-size:12px; letter-spacing:.8px; text-transform:uppercase; color: rgba(255,255,255,.60); margin-bottom: 6px; }
.money{ font-size:34px; font-weight:900; line-height:1.05; display:flex; gap:8px; align-items:baseline; }
.som{ font-size:18px; font-weight:800; color: rgba(255,255,255,.75); }

.actions{ display:flex; gap:12px; margin-top:14px; }
.btn{
  flex:1; border:0; border-radius:16px;
  padding:12px 14px; font-weight:900; font-size:14px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow: 0 14px 24px rgba(0,0,0,.18);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary{
  background: linear-gradient(180deg, var(--green), var(--green2));
  border: 1px solid rgba(0,0,0,.10);
  color: rgba(0,0,0,.86);
}
.btn:active{ transform: translateY(1px); }

.section-title{ margin:14px 2px 8px; color: rgba(255,255,255,.80); font-weight:900; font-size:14px; }

.tile{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 14px;
  border-radius: var(--r2);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  gap:12px;
  margin-top:10px;
}
.tile .left{ display:flex; gap:12px; align-items:center; min-width:0; }
.ic{
  width:36px; height:36px; border-radius:14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  display:grid; place-items:center;
  flex:0 0 auto;
}
.ttext{ min-width:0; }
.ttext b{ display:block; font-size:14px; margin-bottom:2px; }
.ttext span{ display:block; color: rgba(255,255,255,.62); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.arrow{ opacity:.65; flex:0 0 auto; }

.ref-link{
  margin-top:10px;
  display:flex; gap:10px; align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 22px rgba(0,0,0,.22);
}
.ref-link code{
  flex:1;
  color: rgba(255,255,255,.82);
  font-size:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.copy{
  width:44px; height:44px;
  border-radius:16px;
  background: linear-gradient(180deg, var(--green), var(--green2));
  border: 1px solid rgba(0,0,0,.10);
  color: rgba(0,0,0,.86);
  display:grid; place-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Screens */
.screen{ display:none; animation: fadeIn .18s ease; }
.screen.active{ display:block; }
@keyframes fadeIn{ from{ opacity:.5; transform: translateY(2px);} to{ opacity:1; transform: translateY(0);} }

/* Bottom nav (demo items will be injected by JS) */
.bottom-nav{
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 24px));
  z-index: 40;
  padding: 10px 10px;
  border-radius: 22px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  display:flex;
  justify-content:space-between;
  gap: 4px;
}
.nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 18px;
  color: rgba(255,255,255,.65);
  font-size: 11px;
  font-weight: 900;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.nav-item svg{ opacity:.78; }
.nav-item.active{
  color: var(--green);
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.22);
}
.nav-item.active svg{ opacity: 1; }

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 16px 32px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 60;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Modal */
.modal{ position:fixed; inset:0; z-index:70; display:none; }
.modal.show{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.modal-sheet{
  position:absolute;
  left:50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 24px));
  border-radius: 22px;
  background: rgba(20,40,36,.88);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow:hidden;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding: 14px 14px; border-bottom: 1px solid rgba(255,255,255,.10); }
.modal-title{ font-weight: 900; }
.modal-close{ background: rgba(255,255,255,.10); color: var(--text); border:1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 8px 10px; cursor:pointer; }
.modal-body{ padding: 12px 14px 16px; }
.profileRow{ display:flex; justify-content:space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.10); }
.profileRow:last-child{ border-bottom: 0; }
.pKey{ color: rgba(255,255,255,.65); font-weight: 900; }
.pVal{ font-weight: 900; }



/* ===== PROFILE SCREEN ===== */
#screen-profile{ padding-top: 6px; }

.profile-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 14px;
  border-radius: 22px;
}

.ph-avatar{
  width:58px; height:58px;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 28px rgba(0,0,0,.20);
  overflow:hidden;
  position:relative;
  display:grid; place-items:center;
}

.ph-avatar img{ width:100%; height:100%; object-fit:cover; display:none; }
.ph-fallback{ display:grid; place-items:center; }

.ph-edit{
  position:absolute;
  right: -8px;
  bottom: -8px;
  width:28px; height:28px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--green), var(--green2));
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 20px rgba(0,0,0,.25);
  display:grid; place-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

.ph-info{ min-width:0; flex:1; }
.ph-username{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.ph-sub{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.60);
  font-weight: 800;
  font-size: 12px;
}
.ph-phone{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: rgba(255,255,255,.60);
}
.ph-phone:before{
  content:"";
  width: 18px;
  height: 18px;
  border-radius: 10px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.20);
  display:inline-block;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
}

.profile-tile{ margin-top: 14px; }


/* ===== PROFILE SCREEN (fine-tune) ===== */
#screen-profile .card{
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
}

#screen-profile .profile-head{
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
}

#screen-profile .profile-tile{
  margin-top: 12px;              /* biroz zichroq */
  padding: 14px 14px;
}

#screen-profile .profile-tile .ic{
  width: 40px; height: 40px;     /* skreendagidek kattaroq */
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}

#screen-profile .profile-tile .ttext b{
  font-size: 14px;
  font-weight: 900;
}

#screen-profile .profile-tile .ttext span{
  font-size: 12px;
  max-width: 260px;
}

#screen-profile .ph-avatar{
  box-shadow: 0 16px 30px rgba(0,0,0,.22);
}

#screen-profile .ph-edit{
  width: 30px; height: 30px;     /* skreendagi kabi biroz yirik */
  right: -6px;
  bottom: -6px;
}

#screen-profile .ph-phone{
  opacity: .95;
}

#screen-profile .ph-phone:before{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.22);
}


/* =========================
   PROFILE = EXACT SCREEN LOOK
========================= */

/* Profile ochilganda topbar yo‘q (skreendagidek) */
body.is-profile .topbar{ display:none; }

/* Profile’da yuqoridan biroz yaqinroq */
body.is-profile .wrap{ padding-top: 12px; }

/* Profile head kartasi – skreendagi kabi “shiny” */
#screen-profile .profile-head{
  padding: 16px 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 45px rgba(0,0,0,.30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-height: 84px;
  position: relative;
  overflow: hidden;
}

/* kartaga yengil “shine” */
#screen-profile .profile-head:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(260px 140px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(220px 140px at 85% 30%, rgba(34,197,94,.10), transparent 62%);
  pointer-events:none;
  opacity:.9;
}

/* avatar – skreendagi kabi yirikroq + yumshoq ring */
#screen-profile .ph-avatar{
  width:62px; height:62px;
  border-radius: 20px;
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(34,197,94,.28);
  box-shadow: 0 16px 30px rgba(0,0,0,.22);
}

/* edit tugma – skreendagi kabi */
#screen-profile .ph-edit{
  width:30px; height:30px;
  right:-6px; bottom:-6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--green), var(--green2));
  border: 1px solid rgba(0,0,0,.14);
}

/* username – skreendagi kabi katta va qalin */
#screen-profile .ph-username{
  font-size: 16px;
  font-weight: 950;
}

/* telefon status – italic (skreendagi kabi) */
#screen-profile .ph-phone{
  font-style: italic;
  opacity: .92;
}

/* ========== Profile tiles ========== */
/* skreendagidek: tile balandroq, yumshoq gradient, border aniqroq */
#screen-profile .profile-tile{
  margin-top: 14px;
  padding: 16px 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}

/* icon blok – skreendagi kabi “outline” */
#screen-profile .profile-tile .ic{
  width:44px; height:44px;
  border-radius: 14px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

/* textlar */
#screen-profile .profile-tile .ttext b{
  font-size: 14px;
  font-weight: 950;
}
#screen-profile .profile-tile .ttext span{
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

/* arrow – aniqroq */
#screen-profile .profile-tile .arrow{
  opacity: .75;
}

/* bosilganda feedback */
#screen-profile .profile-tile:active{
  transform: translateY(1px);
}


/* ===== Phone icon look (profile) ===== */
#screen-profile .ph-phone{
  position: relative;
  padding-left: 26px;
  cursor: pointer;
}
#screen-profile .ph-phone:before{
  content:"";
  position:absolute;
  left:0; top:50%;
  transform: translateY(-50%);
  width:18px; height:18px;
  border-radius: 10px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.22);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
}
#screen-profile .ph-phone:after{
  content:"";
  position:absolute;
  left:5px; top:50%;
  transform: translateY(-50%);
  width:9px; height:9px;
  background: rgba(34,197,94,.95);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 3.1 5.2 2 2 0 0 1 5.1 3h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.4 2.1L9.1 10.7a16 16 0 0 0 4.2 4.2l1.2-1.2a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 3.1 5.2 2 2 0 0 1 5.1 3h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.4 2.1L9.1 10.7a16 16 0 0 0 4.2 4.2l1.2-1.2a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}

/* ===== Avatar picker sheet (matches your screenshot) ===== */
.sheet-modal{ position:fixed; inset:0; z-index:80; display:none; }
.sheet-modal.show{ display:block; }
.sheet-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }

.sheet{
  position:absolute;
  left:50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 24px));
  border-radius: 22px;
  background: rgba(20,40,36,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow:hidden;
  padding-bottom: 14px;
}
.sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 14px 10px;
}
.sheet-title{ font-weight: 950; font-size: 18px; }
.sheet-x{
  width:42px; height:42px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-size:18px;
}
.sheet-sub{
  padding: 0 14px 12px;
  color: rgba(255,255,255,.62);
  font-weight: 800;
}

.avatar-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 10px 14px 14px;
}
.avatar-pill{
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 999px;
  overflow:hidden;
  border: 2px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  box-shadow: 0 14px 24px rgba(0,0,0,.22);
  cursor:pointer;
  padding:0;
}
.avatar-pill img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-pill:active{ transform: translateY(1px); }

.sheet-actions{ padding: 0 14px; }
.upload-btn{
  display:block;
  text-align:center;
  font-weight: 950;
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  cursor:pointer;
}
.upload-btn input{ display:none; }