:root{
  --bg:#0e1116;
  --brand:#0088cc;
  --brand2:#37b2ff;
  --card:#0f172a;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --ring:rgba(56,189,248,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,136,204,.18), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(55,178,255,.14), transparent 60%),
    linear-gradient(180deg,#0b1220 0%,#0a0f1a 100%);
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("/assets/images/binary-network-faint.webp");
  background-size:cover;
  background-position:center;
  opacity:.08;
  pointer-events:none;
  filter:grayscale(100%) contrast(1.05);
}
.app-shell{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:16px;
}
.card{
  width:100%;
  max-width:420px;
  background:linear-gradient(180deg,rgba(17,24,39,.82),rgba(15,23,42,.86));
  backdrop-filter:saturate(120%) blur(8px);
  border:1px solid rgba(148,163,184,.18);
  border-radius:22px;
  box-shadow:0 20px 60px rgba(2,6,23,.55), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.hdr{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px;
  background:
    linear-gradient(180deg,rgba(0,136,204,.85),rgba(55,178,255,.85));
  color:#fff;
}
.hdr .t{font-weight:700;font-size:18px;letter-spacing:.2px}
.body{padding:20px}
form{display:flex;flex-direction:column;gap:14px}
label{font-size:13px;color:var(--muted)}
input,select{
  width:100%;
  padding:13px 14px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(2,6,23,.4);
  color:var(--text);
  font-size:15px;
  outline:none;
  transition:.2s ease;
}
input::placeholder{color:#94a3b8cc}
input:focus,select:focus{
  border-color:#38bdf8;
  box-shadow:0 0 0 6px var(--ring);
  background:rgba(2,6,23,.55);
}
.btn{
  display:inline-flex;justify-content:center;align-items:center;gap:8px;
  padding:13px 14px;border-radius:14px;border:0;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  color:#fff;font-weight:700;cursor:pointer;letter-spacing:.2px;
  transition:transform .08s ease, filter .2s ease;
}
.btn:active{transform:translateY(1px)}
.muted{color:var(--muted);font-size:13px}
.links{
  display:flex;justify-content:space-between;align-items:center;margin-top:10px
}
.a{color:#7dd3fc;text-decoration:none;font-weight:600}
.a:hover{filter:brightness(1.15)}
.err{margin-top:6px;color:#fda4af;font-size:13px}
.list{display:flex;flex-direction:column;gap:12px}
.cell{
  display:flex;gap:12px;align-items:center;padding:14px;
  border:1px solid rgba(148,163,184,.18);
  background: rgb(2 6 23 / 4%);
  border-radius:16px;transition:transform .08s ease, border-color .2s ease
}
.cell:hover{transform:translateY(-1px);border-color:#38bdf8}
.ava{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(180deg,#0ea5e9,#60a5fa);
  display:grid;place-items:center;font-weight:800;color:#0b1220
}
.title{font-weight:700}
.subtitle{font-size:13px;color:var(--muted)}
.footer{
  padding:12px 16px;border-top:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.35);
  display:flex;justify-content:space-between;gap:10px
}
.ghost{background:#111827;color:#e5e7eb;border:1px solid rgba(148,163,184,.22)}
@media (max-width:420px){.card{border-radius:20px}}
.app-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.container {
  width: 100%;
  max-width: 420px; /* mobil o‘lcham */
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(16,24,40,.12);
  overflow: hidden;
  border: 1px solid #eef2f7;
}

/* parol input + ko‘zcha */
.password-field {
  position: relative;
}
.password-field input {
  width: 100%;
  padding-right: 40px; /* o‘ng tomonda icon uchun joy */
}
.password-field .toggle-eye {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #94a3b8;
  font-size: 16px;
}
.password-field .toggle-eye:hover {
  color: #0088cc;
}
html,body{color:#0f172a;font-size:16px}
.hdr .t{font-size:20px}
label{color:#1f2937;font-size:14px}
.body{padding:22px}
input,select{background:#fff;color:#0f172a;border-color:#cbd5e1}
input::placeholder{color:#6b7280}
.btn{font-size:16px}
.a{color:#0ea5e9}
.err{color:#dc2626}
.links{gap:10px}
.container{background:#ffffff}
.password-field {
  position: relative;
}
.password-field input {
  width: 100%;
  padding-right: 42px; /* icon uchun joy */
}
.password-field .toggle-eye {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #94a3b8;
  font-size: 18px;
}
.password-field .toggle-eye:hover {
  color: #0088cc;
}
.divider{display:flex;align-items:center;gap:10px;margin:12px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:rgba(148,163,184,.35)}
.oauth-group{display:flex;flex-direction:column;gap:10px}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(148,163,184,.35);background:#fff;color:#0f172a;font-weight:600;cursor:pointer}
.oauth-btn:active{transform:translateY(1px)}
.oauth-btn svg{width:18px;height:18px}
.oauth-btn.google{border-color:#e5e7eb;background:#fff}
.actions{margin-top:12px}
.btn.full{width:100%}
:root{
  --bg1:#f6f9ff; --bg2:#eef3f8;
  --brand:#0088cc; --brand2:#2fb4ff;
  --text:#0f172a; --muted:#6b7280;
  --card:#ffffff; --line:#e5e7eb; --ring:#bfdbfe;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:
    radial-gradient(900px 420px at -10% -10%, rgba(0,136,204,.08), transparent 60%),
    radial-gradient(700px 380px at 110% 10%, rgba(47,180,255,.06), transparent 60%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
}

/* center shell */
.app-shell{min-height:100svh;display:grid;place-items:center;padding:16px}

/* main container as card */
.container{
  width:100%; max-width:420px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px; overflow:hidden;
  box-shadow:0 20px 50px rgba(16,24,40,.12);
}

/* header */
.hdr{display:flex;align-items:center;gap:10px;padding:16px;
  background:linear-gradient(180deg,var(--brand),var(--brand2)); color:#fff}
.hdr .t{font-weight:700;font-size:18px;letter-spacing:.2px}

/* body */
.body{padding:20px}
form{display:flex;flex-direction:column;gap:14px}
label{font-size:13px;color:var(--muted)}

/* inputs */
input,select{
  width:100%; padding:13px 14px;
  border:1px solid var(--line);
  background:#f8fafc; color:var(--text);
  border-radius:14px; font-size:15px; outline:none; transition:.18s ease;
}
input::placeholder{color:#94a3b8}
input:focus,select:focus{border-color:#60a5fa; box-shadow:0 0 0 5px rgba(96,165,250,.25); background:#fff}

/* password eye */
.password-field{position:relative}
.password-field input{padding-right:44px}
.password-field .toggle-eye{
  position:absolute; top:50%; right:12px; transform:translateY(-50%);
  cursor:pointer; color:#94a3b8; font-size:18px
}
.password-field .toggle-eye:hover{color:var(--brand)}

/* buttons */
.btn{
  display:inline-flex;justify-content:center;align-items:center;gap:8px;
  padding:13px 14px; border-radius:14px; border:0; cursor:pointer;
  font-weight:700; letter-spacing:.2px; transition:transform .08s ease, filter .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn.primary{color:#fff; background:linear-gradient(180deg,var(--brand),var(--brand2))}
.btn.outline{background:#fff; color:var(--text); border:1px solid var(--line)}
.btn.block{width:100%}

/* links, muted, error */
.a{color:var(--brand); text-decoration:none; font-weight:600}
.a:hover{filter:brightness(1.1)}
.muted{color:var(--muted); font-size:13px}
.err{color:#dc2626; font-size:13px}

/* divider */
.divider{display:flex;align-items:center;gap:10px;margin:10px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.divider span{color:var(--muted);font-size:12px}

/* oauth */
.oauth-group{display:flex;flex-direction:column;gap:10px}
.oauth-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%; padding:12px 14px; border-radius:14px;
  border:1px solid var(--line); background:#fff; color:var(--text); font-weight:600; cursor:pointer
}
.oauth-btn:active{transform:translateY(1px)}
.oauth-btn svg{width:18px;height:18px}

/* footer area with language */
.auth-footer{padding:14px 20px;border-top:1px solid var(--line);background:#fafcff}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lang-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--text); font-weight:600; text-decoration:none;
}
.lang-btn .fa{font-size:14px}
.flex-between {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:var(--muted);
  margin-bottom:4px;
}

a.forgot {
  font-size:12px;
  font-weight:500;
  color:var(--brand);
  text-decoration:none;
}
a.forgot:hover {
  text-decoration:underline;
}



/* --- Compact language list --- */
.lang-list { gap: 8px; }
.lang-list .cell{
  padding: 8px 12px;          /* ixcham */
  border-radius: 12px;
  gap: 10px;
  cursor: pointer;
  transition: transform .08s ease, border-color .2s ease, background .2s ease;
}
.lang-list .cell:hover{ transform: translateY(-1px); }

.lang-list .ava{
  width: 28px; height: 28px;  /* kichik flag */
  border-radius: 50%;
  font-size: 14px;
  display: grid; place-items:center;
}

.lang-list .title{ font-size: 14px; font-weight: 600; line-height: 1.1; }
.lang-list .subtitle{ font-size: 12px; opacity: .8; margin-top: 2px; }

/* check belgisi – faqat tanlanganda ko‘rinsin */
.lang-list .fa{
  margin-left: auto;
  font-size: 14px;
  opacity: 0;
  transition: opacity .15s ease;
}
.lang-list .cell.selected .fa{ opacity: 1; }

/* nozik hover/selected holat */
.lang-list .cell:hover{ border-color: #38bdf8; }
.lang-list .cell.selected{ border-color: #38bdf8; }
/* === BUBBLE LOADER === */
#app-loader{
  position:fixed; inset:0; z-index:9999; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,136,204,.15), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(55,178,255,.12), transparent 60%),
    linear-gradient(180deg,#0b1220 0%,#0a0f1a 100%);
  animation: windShift 10s linear infinite;
  opacity:1; transition:opacity .6s ease, transform .6s ease;
}
#app-loader::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: url("/sys/upfile/loader-bg.jpg"); /* Shamol rasmini shu yerga qo‘ying */
  background-size:cover; background-position:center;
  opacity:.08; filter:grayscale(100%) contrast(1.05);
}
#app-loader.hide{ opacity:0; pointer-events:none; }

#loader-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.loader-brand{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:#e5e7eb; opacity:.08; font-size:clamp(24px, 8vw, 72px);
  user-select:none; pointer-events:none;
}

/* yengil shamol effekti */
@keyframes windShift{
  0%{ background-position: 0 0, 0 0, 0 0; }
  100%{ background-position: 600px 0, -600px 0, 0 0; }
}
/* === BUBBLE LOADER === */
#app-loader{
  position:fixed; inset:0; z-index:9999; overflow:hidden;
  /* ... sizdagi background ... */
  opacity:1; transition:opacity .4s ease, transform .4s ease; /* <-- 0.4s */
}
#app-loader.hide{ opacity:0; pointer-events:none; }
/* ===== Shell: container markazda (agar hali bo'lmasa) ===== */
.container { max-width: 430px; margin: 0 auto; }

/* ===== Telegram-like sticky header ===== */
.tg-header{
  position: sticky; top: 0; z-index: 1000;
  height: 56px; display: flex; align-items: center; gap: 12px;
  padding: 0 12px;
  background: rgba(18,18,18,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tg-header .hdr-title{
  flex: 1; text-align: center; font-weight: 700; font-size: 16px; letter-spacing:.2px;
  color: var(--fg,#fff); pointer-events: none;
}
.hdr-btn{
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .12s ease, background .12s ease;
}
.hdr-btn i{ font-size: 14px; opacity: .9; }
.hdr-btn:active{ transform: scale(.96); background: rgba(255,255,255,.1); }

/* ===== Content under header ===== */
.tg-content{ padding: 10px 10px 84px; }

/* Compact search */
.search.compact{ padding:6px 10px; border-radius: 12px; }
.search.compact input{ font-size: 14px; }

/* ===== Chat list (reuse) ===== */
.chat-list .chat{ display:flex; align-items:center; gap:12px; padding:10px 12px; }
.chat-list .chat + .chat{ border-top:1px solid rgba(255,255,255,.06); }
.chat-list .ava{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,#5db0ff,#8a7dff);
  color:#fff; font-weight:700; display:grid; place-items:center; overflow:hidden; flex:0 0 44px;
}
.chat-list .ava img{ width:100%; height:100%; object-fit:cover; }
.chat-list .ava span{ font-size:14px; }
.chat-list .grow{ flex:1; min-width:0; }
.chat-list .row{ display:flex; align-items:center; gap:8px; }
.chat-list .row.between{ justify-content:space-between; }
.chat-list .title{ font-size:14px; font-weight:700; }
.chat-list .subtitle{ font-size:12px; opacity:.78; }
.chat-list .time{ font-size:11px; opacity:.6; }
.badge{
  min-width:18px; height:18px; padding:0 6px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#2dd4bf,#0ea5e9);
}
.ellipsis{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* Empty state */
.empty{ text-align:center; padding:40px 0 24px; opacity:.9; }
.empty .fa-inbox{ font-size:38px; opacity:.5; margin-bottom:10px; }
.empty .muted{ font-size:14px; opacity:.8; }

/* Tabbar bottom (optional) */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index: 900;
  max-width:430px; margin:0 auto;
  display:flex; background:rgba(18,18,18,.78);
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(255,255,255,.08);
}
.tabbar .tab{
  flex:1; text-align:center; padding:8px 0 10px; font-size:11px;
  display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center;
  color:#cfd3da; text-decoration:none;
}
.tabbar .tab i{ font-size:16px; opacity:.9; }
.tabbar .tab.active{ color:#fff; font-weight:700; }