@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700;800&family=Playfair+Display+SC&family=Freckle+Face&family=Quintessential&family=Inconsolata&family=Alfa+Slab+One&family=Pacifico&family=Great+Vibes&family=Kalam&family=Lobster&family=Arvo&family=Cabin&family=Sacramento&family=Orbitron&family=Amatic+SC&family=Zilla+Slab&family=Permanent+Marker&family=Shadows+Into+Light&display=swap');


/* ═══════════════════════════════════════════════
   BODY
═══════════════════════════════════════════════ */
body {
  max-width: 1000px;
  margin: auto;
  scroll-behavior: smooth;
  font-family: 'Comfortaa', cursive;
  font-size: 15px;
  color: #333;
  background-color: #F0F6FB;
  word-wrap: break-word;
  white-space: normal;
}


/* ═══════════════════════════════════════════════
   HAVOLALAR
═══════════════════════════════════════════════ */
a {
  text-decoration: none;
  color: #507094;
  transition: color .2s;
}
a:hover { color: #3a5570; }


/* ═══════════════════════════════════════════════
   SARLAVHA (TITLE)
═══════════════════════════════════════════════ */
.title {
  position: fixed;
  top: 0; right: 0; left: 0;
  color: var(--title-text-color);
  background: linear-gradient(var(--title-deg), var(--b-white), var(--b));
  padding: 11px 10px;
  text-align: center;
  font-weight: 800;
  font-size: 20px;
  z-index: 1000;
  box-shadow: 0 3px 12px rgba(51,51,51,0.18);
  letter-spacing: 0.3px;
}
.title .t-a {
  color: var(--title-text-color);
  font-weight: 800;
  display: block;
}

.title-contents {
  color: var(--title-text-color);
  background: linear-gradient(var(--title-items-deg), var(--b-white), var(--b));
  padding: 0;
  text-align: center;
  font-weight: 800;
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 1000;
  box-shadow: 0 3px 12px rgba(51,51,51,0.22);
}
.title-contents .t-tab {
  width: 100%;
  text-align: center;
  padding: 0; margin: 0;
}
.title-items {
  text-align: center;
  padding: 8px;
  border-right: 1px solid rgba(51,51,51,0.15);
  transition: background .2s;
}
.title-items:hover { background: rgba(255,255,255,0.12); }
.title-items a {
  color: var(--title-items-icon);
  display: block;
}

.t-height     { height: 40px; }
.t-height-aut { height: 35px; }


/* ═══════════════════════════════════════════════
   AUT TEGI
═══════════════════════════════════════════════ */
.aut {
  padding: 8px 12px;
  color: var(--tag-aut-color);
  background-color: var(--tag-aut);
  border-bottom: 1px solid var(--tag-aut-border);
  border-radius: 0 0 8px 12px;
  font-size: 14px;
  font-family: cursive;
  box-shadow: 0 2px 6px rgba(80,112,148,0.08);
}
.aut_count {
  background: var(--aut-count-b);
  color: var(--aut-count-c);
  font-size: 10px;
  border-radius: 5px;
  padding: 0 5px;
  margin-top: 10px;
  position: absolute;
  font-weight: 600;
  border-bottom: 1px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}


/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.foot {
  margin-top: 2px;
  padding: 10px 8px;
  background-color: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 12px rgba(80,112,148,0.07);
}


/* ═══════════════════════════════════════════════
   XABARLAR (ERR / SUCS)
═══════════════════════════════════════════════ */
.err {
  background: var(--error);
  color: var(--errcolor);
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid var(--errcolor);
  font-size: 14px;
}
.sucs {
  background: var(--success);
  color: var(--succolor);
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid var(--succolor);
  font-size: 14px;
  transition: all 1s ease;
}
.sucs.hide {
  transform: translateY(-20px);
  opacity: 0;
}


/* ═══════════════════════════════════════════════
   MANSAB
═══════════════════════════════════════════════ */
.mansab {
  text-align: center;
  background-color: var(--mansab);
  margin-bottom: 1px;
  border-bottom: 1px solid var(--b);
  padding: 6px;
  font-size: 13px;
  letter-spacing: 0.2px;
}


/* ═══════════════════════════════════════════════
   AVATAR
═══════════════════════════════════════════════ */
.avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  float: left;
  margin: 0 6px;
  background-color: white;
  border: 2px solid #e8eef4;
  box-shadow: 0 2px 8px rgba(80,112,148,0.12);
  transition: transform .2s;
}
.avatar:hover { transform: scale(1.04); }

.not-avatar {
  font-weight: 800;
  background: linear-gradient(160deg, var(--avatar-b-first), var(--avatar-b-second));
  color: white;
  font-size: 20px;
  width: 50px; height: 50px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  float: left;
  margin: 0 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  transition: transform .2s;
}
.not-avatar:hover { transform: scale(1.06); }

.not-avatar-girl {
  font-weight: 800;
  background: linear-gradient(160deg, #FFAB91, #D84315);
  color: white;
  font-size: 20px;
  width: 50px; height: 50px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  float: left;
  margin: 0 6px;
  box-shadow: 0 3px 10px rgba(216,67,21,0.25);
  transition: transform .2s;
}
.not-avatar-girl:hover { transform: scale(1.06); }

/* Story border */
.story-border {
  padding: 3px;
  background: linear-gradient(45deg, #6200ea, #d1c4e9, #8d6e63);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(98,0,234,0.2);
}
.story-border img { display: block; }

.story-border2 {
  border: 3px solid var(--b-white);
  padding: 2px;
  width: 55px; height: 55px;
}

.user-icons {
  max-width: 16px; max-height: 16px;
  margin-right: 3px; margin-bottom: -2px;
  user-select: none;
}


/* ═══════════════════════════════════════════════
   RASMLAR
═══════════════════════════════════════════════ */
.photo-cont {
  background: white;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.photo-img {
  width: 60px; height: 60px;
  border-radius: 10px;
  border: 1px solid #e8eef4;
  padding: 2px;
  transition: transform .2s, box-shadow .2s;
}
.photo-img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(80,112,148,0.18);
}

.userfullphotocont {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  background: white;
  position: relative;
  min-height: 200px;
}
.userfullphoto {
  width: 250px; height: 200px;
  border: 1px solid #e8eef4;
  border-radius: 12px;
  padding: 2px;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
  box-shadow: 0 4px 16px rgba(80,112,148,0.12);
}
.photoLoader {
  border: 4px solid #f0f6fb;
  border-top: 4px solid var(--b);
  border-radius: 50%;
  width: 50px; height: 50px;
  animation: spinPhoto 0.85s linear infinite;
  position: absolute;
}
@keyframes spinPhoto {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════
   ONLINE / OFFLINE
═══════════════════════════════════════════════ */
.online {
  width: 8px; height: 8px;
  background: #ffc048;
  display: inline-block;
  border-radius: 50%;
  margin: 0 5px;
  box-shadow: 0 0 5px #ffc04880;
}
.offline {
  width: 8px; height: 8px;
  background: transparent;
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 50%;
  margin: 0 5px;
}


/* ═══════════════════════════════════════════════
   XABARLAR RO'YXATI
═══════════════════════════════════════════════ */
.mess {
  background: white;
  padding: 9px 7px;
  border-bottom: 1px solid #f0f4f8;
  transition: background .2s;
}
.mess:hover { background: #f6f9fd; }

.new-mess {
  color: #808080;
  background: white;
  padding: 11px 7px;
  border-bottom: 1px solid #f0f4f8;
  transition: background .2s;
}
.new-mess a {
  display: block;
  color: var(--new-mess-a);
  transition: color .2s;
}
.new-mess:hover { background: #f0f4f8; }
.new-mess a:hover { color: var(--new-mess-a); }

.big-mess {
  background: #fff;
  padding: 14px 8px 30px;
  border-bottom: 1px solid #f0f4f8;
}
.online-time {
  color: #aaa;
  font-size: 12px;
}
.komm-javob {
  padding: 5px 8px;
  background: #f4f8fc;
  border-left: 3px solid var(--b);
  border-radius: 0 6px 6px 0;
  margin-bottom: 5px;
  font-size: 13px;
}
.send-icon { float: right; color: var(--b); }
.send-icon i { color: var(--b); }



/* ═══════════════════════════════════════════════
   VAQT, COUNTLAR, TEGLAR
═══════════════════════════════════════════════ */
.vaqt { font-size: 11px; color: #aaa; float: right; }

.count {
  background: var(--index-count-b);
  color: var(--index-count-c);
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.count-plus {
  background: var(--count-plus-bg);
  color: #fff;
  padding: 3px 6px;
  border-radius: 8px;
  float: right;
  font-size: 12px;
  font-weight: 600;
}
.new-blue {
  background: #E1F5FE;
  color: var(--b);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.new_count {
  background: #FF5252;
  color: white;
  font-weight: 600;
  font-size: 12px;
  float: right;
  padding: 1px 7px;
  border-radius: 6px;
  border: 2px solid #FCE4EC;
  box-shadow: 0 2px 6px rgba(255,82,82,0.3);
}


/* ═══════════════════════════════════════════════
   SAHIFALAR (GO / PAGINATION)
═══════════════════════════════════════════════ */
.go-cont {
  background: white;
  padding: 8px 7px;
  border-bottom: 1px solid #f0f4f8;
}
.go_set {
  font-size: 12px;
  background: var(--b);
  border-radius: 5px;
  border: 1px solid #ddd;
  padding: 5px 10px;
  color: #fff;
  margin: 0 2px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(80,112,148,0.2);
}
.go a {
  font-size: 12px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #dce8f0;
  padding: 5px 10px;
  color: #696969;
  margin-right: 3px;
  transition: background .2s, border-color .2s;
}
.go a:hover {
  background: #f0f6fb;
  border-color: #b8ccd8;
}


/* ═══════════════════════════════════════════════
   POST YO'Q
═══════════════════════════════════════════════ */
.not-post {
  padding: 1.2em;
  text-align: center;
  background-color: #fff;
  color: #aaa;
  font-size: 14px;
  border-radius: 8px;
}


/* ═══════════════════════════════════════════════
   GRADIENT ANIMATSIYA
═══════════════════════════════════════════════ */
@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* ═══════════════════════════════════════════════
   MUQOVA
═══════════════════════════════════════════════ */
.muqova {
  background: linear-gradient(180deg, #ffffff 18%, #C0EAC6 60%, #A2BB9E);
  background-size: cover;
  background-position: center;
  min-height: 200px;
  max-height: 220px;
}
.not-muqova {
  width: 100%;
  min-height: 190px;
  background: linear-gradient(180deg, white, var(--muqova));
}


/* ═══════════════════════════════════════════════
   PROFIL INDEKS
═══════════════════════════════════════════════ */
.index-lovers {
  width: 20px; height: 20px;
  margin-bottom: -5px; margin-right: 5px;
}
.index-tab {
  width: 100%;
  background-color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}
.index-td { text-align: center; }

.avatar-index {
  width: 70px; height: 70px;
  border-radius: 50%;
  border: 2px solid #e0ecf4;
  margin-right: 5px;
  margin-top: 40px;
  box-shadow: 0 3px 10px rgba(80,112,148,0.15);
}
.not-avatar-index {
  width: 70px; height: 70px;
  color: white;
  background: linear-gradient(160deg, var(--avatar-b-first), var(--avatar-b-second));
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.not-avatar-index-girl {
  width: 120px; height: 120px;
  color: white;
  background: linear-gradient(160deg, #FFAB91, #D84315);
  border-radius: 12px;
  border: 3px solid #fff;
  margin-top: -70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  box-shadow: 0 6px 18px rgba(216,67,21,0.22);
}


/* ═══════════════════════════════════════════════
   KIRISH MATNI
═══════════════════════════════════════════════ */
.kirishtext {
  text-align: center;
  padding: 9px;
  background-color: #ECF5FF;
  color: #505050;
  border-bottom: 1px solid #B9C4D1;
  font-size: 14px;
  letter-spacing: 0.2px;
}


/* ═══════════════════════════════════════════════
   SOZ (TUGMA)
═══════════════════════════════════════════════ */
.soz {
  text-align: center;
  background-color: var(--b);
  padding: 11px 24px;
  border-radius: 8px;
  color: #fff;
  margin: 0 30px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(80,112,148,0.3);
  transition: filter .2s, box-shadow .2s;
  cursor: pointer;
}
.soz:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 18px rgba(80,112,148,0.38);
}


/* ═══════════════════════════════════════════════
   FOYDALANUVCHI NOMI INDEKS
═══════════════════════════════════════════════ */
.username-index {
  text-align: center;
  background-color: white;
  padding: 10px;
}


/* ═══════════════════════════════════════════════
   INFO TAB
═══════════════════════════════════════════════ */
.info-tab {
  text-align: center;
  width: 100%;
  background: white;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  padding: 10px 0;
}
.info-td { text-align: center; width: 33.33%; }
.info-icon { color: #9ab; }


/* ═══════════════════════════════════════════════
   DO'STLIK TEGLARI
═══════════════════════════════════════════════ */
.friend-type {
  padding: 3px 16px;
  border-radius: 12px;
  background: #E0F2F1;
  color: #26A69A;
  font-weight: 700;
  font-size: 14px;
  margin: 10px 4px;
  display: inline-block;
  border: 1px solid #80CBC4;
}
.green-text {
  padding: 3px 16px;
  border-radius: 12px;
  background: rgba(224,242,241,0.6);
  font-weight: 700;
  font-size: 14px;
  margin: 2px 4px;
  display: inline-block;
  border: 1px solid #26A69A;
  color: #1a7a74;
}
.red-text {
  padding: 3px 16px;
  border-radius: 12px;
  background: rgba(255,205,210,0.35);
  color: #E53935;
  font-weight: 800;
  font-size: 14px;
  margin: 2px 4px;
  display: inline-block;
  border: 1px solid #e53935;
}
.green-text a:nth-child(0) { color: #FFCDD2; }
.red-text a:nth-child(1) { color: #E53935; }

.small-green-text {
  background: var(--small-green-text-b);
  color: var(--small-green-text-c);
  font-size: 11px; border-radius: 10px;
  padding: 2px 10px; margin-right: 3px; font-weight: 600;
}
.small-blue-text {
  background: var(--small-blue-text-b);
  color: var(--small-blue-text-c);
  font-size: 11px; border-radius: 10px;
  padding: 2px 10px; margin-left: 3px; font-weight: 600;
}
.small-red-text {
  background: var(--small-red-text-b);
  color: var(--small-red-text-c);
  font-size: 11px; border-radius: 10px;
  padding: 2px 10px; margin-left: 3px; font-weight: 600;
}


/* ═══════════════════════════════════════════════
   STATUS
═══════════════════════════════════════════════ */
.status {
  background: var(--sts-b);
  color: #37474F;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--b);
  margin: 3px;
  white-space: pre-line;
  box-shadow: 0 2px 8px rgba(80,112,148,0.08);
}
.sts-tab { display: flex; justify-content: space-between; }
.status-td { flex: 1; text-align: center; }
.sts-td-items { margin-top: 4px; color: #9ab; font-size: 22px; transition: color .2s; }
.sts-td-items:hover { color: var(--b); }
.sts-like-red { color: #FF5252; }


/* ═══════════════════════════════════════════════
   FOTO GRID
═══════════════════════════════════════════════ */
.foto-display-grid {
  display: flex;
  justify-content: space-between;
  background: white;
}
.foto-grid {
  flex: 1;
  text-align: center;
  border: 1px solid #f0f4f8;
  padding: 6px;
  transition: background .2s;
}
.foto-grid:hover { background: #f8fbfe; }
.foto-grid-items { font-size: 28px; color: #9ab; transition: color .2s; }
.foto-grid:hover .foto-grid-items { color: var(--b); }


/* ═══════════════════════════════════════════════
   FA GRADIENT IKONA
═══════════════════════════════════════════════ */
.fa-gr-icon {
  background: linear-gradient(45deg, var(--fa-gr-1), var(--fa-gr-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
  padding-right: 3px;
}


/* ═══════════════════════════════════════════════
   INF (MA'LUMOT SATRLARI)
═══════════════════════════════════════════════ */
.inf { margin: 5px 0; color: #6b7c8d; font-size: 15px; }
.inf-icon { margin-right: 5px; color: var(--b); }


/* ═══════════════════════════════════════════════
   GORIZONTAL SCROLL (FOTO)
═══════════════════════════════════════════════ */
.index-foto-scroll { overflow-x: auto; }
.index-foto-scroll::-webkit-scrollbar { width: 0; height: 0; }
.index-foto-td {
  width: 70px; height: 80px;
  border-radius: 8px;
  margin: 0 3px;
  transition: transform .2s;
}
.index-foto-td:hover { transform: scale(1.06); }

.bold-text { font-size: 18px; font-weight: 700; margin: 0 10px 10px; }

.index-foto-scroll-pos { position: relative; }
.shadow-right {
  pointer-events: none;
  position: absolute;
  right: 0; bottom: 0; top: 0;
  padding: 20px; height: 92%;
  box-shadow: inset -22px 0 18px rgba(255,255,255,0.85);
}
.shadow-left {
  pointer-events: none;
  position: absolute;
  left: 0; bottom: 0; top: 0;
  padding: 0 20px; height: 92%;
  box-shadow: inset 22px 0 18px rgba(255,255,255,0.85);
}


/* ═══════════════════════════════════════════════
   MISC
═══════════════════════════════════════════════ */
.by_coding { text-align: center; font-size: 14px; color: #aaa; font-weight: 600; }

.adm-galochka { width: 16px; height: 16px; margin-right: 2px; margin-bottom: -3px; }


/* ═══════════════════════════════════════════════
   CHAT ID TEGLARI
═══════════════════════════════════════════════ */
.chatUserIdBoy {
  padding: 1px 8px;
  background: var(--chatUserIdBoy);
  color: white;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.chatUserIdGirl {
  padding: 1px 8px;
  background: var(--chatUserIdGirl);
  color: white;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.smiles-size { max-width: 80px; max-height: 80px; }


/* ═══════════════════════════════════════════════
   QOR ANIMATSIYASI
═══════════════════════════════════════════════ */
#snow-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}


/* ═══════════════════════════════════════════════
   INTERNET HOLATI
═══════════════════════════════════════════════ */
#connection-status {
  display: none;
  position: fixed;
  top: 50px; left: 0;
  width: 100%;
  background-color: #ff4d4d;
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 15px;
  font-weight: 700;
  z-index: 9999;
  box-shadow: 0 3px 10px rgba(255,77,77,0.3);
  letter-spacing: 0.3px;
}
#connection-status.connectingInternet { background-color: #43a047; }

.index-gift { max-width: 50px; height: 50px; margin-right: 4px; }


/* ═══════════════════════════════════════════════
   NIK SHRIFTLARI
═══════════════════════════════════════════════ */
.nik-style-1  { font-family: "Playfair Display SC", serif; }
.nik-style-2  { font-family: "Freckle Face", cursive; }
.nik-style-3  { font-family: "Press Start 2P", monospace; }
.nik-style-4  { font-family: "Patrick Hand", cursive; }
.nik-style-5  { font-family: "Pacifico", cursive; }
.nik-style-6  { font-family: "Great Vibes", cursive; }
.nik-style-7  { font-family: "Quintessential", cursive; }
.nik-style-8  { font-family: "Alfa Slab One", serif; }
.nik-style-9  { font-family: "Kalam", cursive; }
.nik-style-10 { font-family: "Lobster", cursive; }
.nik-style-11 { font-family: "Arvo", serif; }
.nik-style-12 { font-family: "Cabin", sans-serif; }
.nik-style-13 { font-family: "Sacramento", cursive; }
.nik-style-14 { font-family: "Inconsolata", monospace; }
.nik-style-15 { font-family: "UnifrakturCook", cursive; }
.nik-style-16 { font-family: "Orbitron", sans-serif; }
.nik-style-17 { font-family: "Amatic SC", cursive; }
.nik-style-18 { font-family: "Zilla Slab", serif; }
.nik-style-19 { font-family: "Permanent Marker", cursive; }
.nik-style-20 { font-family: "Shadows Into Light", cursive; }


/* ═══════════════════════════════════════════════
   PREMIUM YULDUZ
═══════════════════════════════════════════════ */
.premium-star {
  background: linear-gradient(135deg, #FA8BFF 0%, #2BD2FF 50%, #2BFF88 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 13px;
  margin-left: 5px;
  animation: sparkle 2s ease-in-out infinite;
}
@keyframes sparkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.8; transform: scale(1.12); }
}