/* ════════════════════════════════════════════════════════════════
   Leo — "TONG" dizayni (21.09.2026)
   Yorug' havo: qum-oq zamin, qora tush, marjon urg'u, suzuvchi
   shaftoli/osmon dog'lari. Instrument Serif — sarlavha va katta
   raqamlar, Onest — matn. style.css dan KEYIN yuklanadi: sinflar
   o'zgarmaydi, faqat ko'rinish va harakat.
   ════════════════════════════════════════════════════════════════ */

:root {
  --fon:        #F3EFE7;
  --fon-2:      #FFFFFF;
  --fon-3:      #EBE6DC;
  --chegara:    #E6E0D4;
  --chegara-2:  #D9D2C4;
  --matn:       #1E1C1A;
  --matn-2:     #6F6A62;
  --asosiy:     #1E1C1A;        /* to'ldirilgan tugmalar — qora tush */
  --asosiy-2:   #E2673A;        /* urg'u — marjon */
  --asosiy-xira:#E2673A1A;
  --asosiy-matn:#F3EFE7;
  --yashil:     #1F7A4D;
  --qizil:      #C0392B;
  --sariq:      #B8801F;
  --radius:     18px;

  --dog-1:      #FFD7B3;        /* shaftoli */
  --dog-2:      #CFE3FF;        /* osmon */
  --soya:       0 14px 30px -22px rgba(30, 28, 26, .45);
  --soya-2:     0 18px 40px -24px rgba(30, 28, 26, .35);

  --shr-matn:   "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shr-son:    "Instrument Serif", Georgia, "Times New Roman", serif;
  --tez:        200ms;
  --orta:       420ms;
  --sekin:      620ms;
  --egri:       cubic-bezier(.2, .7, .2, 1);
}

/* Tong · tun — iliq qorong'i (tungi rejim tanlansa) */
html[data-tema="tun"] {
  --fon:        #1A1816;
  --fon-2:      #242120;
  --fon-3:      #2C2826;
  --chegara:    #35302C;
  --chegara-2:  #443E38;
  --matn:       #F3EFE7;
  --matn-2:     #A9A39A;
  --asosiy:     #F3EFE7;
  --asosiy-2:   #F0865C;
  --asosiy-xira:#F0865C22;
  --asosiy-matn:#1E1C1A;
  --yashil:     #7ED09A;
  --qizil:      #F09A8A;
  --sariq:      #E2B466;
  --dog-1:      #4A2E1E;
  --dog-2:      #1F2C44;
  --soya:       0 14px 30px -18px rgba(0, 0, 0, .7);
  --soya-2:     0 18px 40px -20px rgba(0, 0, 0, .6);
}

html, body { font-family: var(--shr-matn); font-size: 15px; }

/* ── Suzuvchi rang dog'lari (butun ilova orqasida) ── */
body::before, body::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  border-radius: 50%; will-change: transform;
}
body::before {
  left: -90px; top: -60px; width: 300px; height: 300px;
  background: radial-gradient(circle at 40% 40%, var(--dog-1), transparent 70%);
  animation: tong-suz 11s ease-in-out infinite;
}
body::after {
  right: -110px; top: 34%; width: 340px; height: 340px;
  background: radial-gradient(circle at 50% 50%, var(--dog-2), transparent 70%);
  animation: tong-suz-2 13s ease-in-out infinite;
}
@keyframes tong-suz   { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-18px, 14px) scale(1.06); } }
@keyframes tong-suz-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(16px, -12px) scale(1.04); } }

/* Kirish sahifasi qutisi dog'lar ustida tursin */
.quti { position: relative; z-index: 1; }

/* ── Sarlavha ── */
.sarlavha {
  border-bottom: none; padding: 12px 18px 10px;
  background: transparent;
}
.belgi { width: 38px; height: 38px; position: relative; }
.belgi::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid var(--asosiy-2);
  animation: tong-halqa 2.4s ease-out infinite;
}
@keyframes tong-halqa { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
.belgi img, .belgi svg { border-radius: 50%; position: relative; }
.nom strong { font-family: var(--shr-son); font-weight: 400; font-size: 26px; letter-spacing: -.01em; line-height: 1; }
.nom span { font-size: 11.5px; }
.tepa-tugma {
  background: var(--fon-2); border: none; border-radius: 14px;
  min-width: 42px; height: 42px; box-shadow: var(--soya);
  position: relative; transition: transform var(--tez) var(--egri);
}
.tepa-tugma:active { background: var(--fon-2); transform: scale(.94); }
#tugma-xabarnoma svg { transform-origin: 50% 10%; }
#tugma-xabarnoma:has(.nishon:not([hidden])) svg { animation: tong-qongiroq 2.6s 1s ease-in-out infinite; }
@keyframes tong-qongiroq {
  0%, 100% { transform: rotate(0); } 12% { transform: rotate(14deg); }
  24% { transform: rotate(-12deg); } 36% { transform: rotate(8deg); } 48% { transform: rotate(-4deg); }
}
.nishon {
  position: absolute; top: -5px; right: -5px;
  background: var(--asosiy-2); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 99px;
}

/* ── Suhbat ── */
.suhbat { gap: 14px; padding: 14px 16px 8px; }
.puf { padding: 11px 15px; font-size: 14.5px; line-height: 1.45; }
.men .puf {
  background: var(--matn); color: var(--fon);
  border-radius: 18px 18px 4px 18px;
}
.leo .puf {
  background: var(--fon-2); border: none; box-shadow: var(--soya);
  border-radius: 18px 18px 18px 4px;
}
.xabar { animation: tong-kir var(--orta) var(--egri) both; }
@keyframes tong-kir { from { opacity: 0; transform: translateY(10px); } }

.salom h1 { font-family: var(--shr-son); font-weight: 400; font-size: 32px; }
.salom p { font-family: var(--shr-son); font-style: italic; font-size: 17px; }
.misol { border: none; background: var(--fon-2); box-shadow: var(--soya); border-radius: 16px; color: var(--matn); }

.yozmoqda span { background: var(--asosiy-2); }

/* ── Kartalar (suhbat + hisobot) ── */
.karta, .blok, .fayl-karta, .taglik {
  border: none; border-radius: 20px; box-shadow: var(--soya-2);
}
.karta.kirim, .karta.chiqim { border-left: none; }
.karta.kirim .karta-summa { color: var(--yashil); }
.karta.chiqim .karta-summa { color: var(--qizil); }
.karta-summa { font-size: 26px; font-weight: 400; }
.karta-tugmalar .ha { background: var(--asosiy); color: var(--asosiy-matn); border-radius: 99px; }
.karta-tugmalar button { border-radius: 99px; }

.blok-bosh { font-family: var(--shr-son); font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 18px; color: var(--matn); }
.katta { font-size: 42px; font-weight: 400; letter-spacing: -.02em; animation: tong-son .9s .15s var(--egri) both; }
@keyframes tong-son { from { opacity: 0; letter-spacing: .25em; } to { opacity: 1; letter-spacing: -.02em; } }
.juft .son { font-size: 22px; font-weight: 400; }

/* Birinchi blok — qora kassa kartasi */
.ekran .varaq > .blok:first-child { background: var(--matn); color: var(--fon); }
.ekran .varaq > .blok:first-child .blok-bosh { color: var(--fon); opacity: .7; }
.ekran .varaq > .blok:first-child .kichik-izoh { color: var(--fon); opacity: .65; }
.ekran .varaq > .blok:first-child .katta.musbat { color: var(--fon); }
.ekran .varaq > .blok:first-child .katta.manfiy { color: #F0A191; }
html[data-tema="tun"] .ekran .varaq > .blok:first-child { background: var(--fon-2); color: var(--matn); }
html[data-tema="tun"] .ekran .varaq > .blok:first-child .blok-bosh,
html[data-tema="tun"] .ekran .varaq > .blok:first-child .kichik-izoh,
html[data-tema="tun"] .ekran .varaq > .blok:first-child .katta.musbat { color: var(--matn); }

.ulush, .qarz-ulush > div {
  background: var(--asosiy-2); border-radius: 99px; height: 6px;
  transform-origin: left; animation: tong-bar .9s .4s var(--egri) both;
}
.qarz-ulush { height: 6px; border-radius: 99px; background: var(--fon-3); }
@keyframes tong-bar { from { transform: scaleX(0); } }

.oylar button { border: none; background: var(--fon-2); border-radius: 99px; box-shadow: var(--soya); font-weight: 500; }
.oylar button.faol { background: var(--asosiy); color: var(--asosiy-matn); }

.yozuv:active, .qator:active, .qarz-qator:active, .xotira-qator:active { background: var(--fon-3); border-radius: 12px; }

/* ── Kirish maydoni ── */
.kirish { border-top: none; background: transparent; padding: 8px 16px 10px; }
#matn {
  border: none; border-radius: 22px; background: var(--fon-2);
  box-shadow: 0 12px 30px -16px rgba(30, 28, 26, .5); padding: 12px 18px;
}
#matn:focus { box-shadow: 0 12px 30px -16px rgba(30, 28, 26, .5), 0 0 0 2px var(--asosiy-2); }
.dumaloq { border: none; background: var(--fon-2); box-shadow: var(--soya); width: 46px; height: 46px; }
.dumaloq.asosiy { background: var(--asosiy-2); border-color: var(--asosiy-2); color: #fff; }
.dumaloq.yozyapti { background: var(--qizil); }

/* ── Pastki menyu ── */
.menyu { border-top: none; background: transparent; padding: 6px 10px calc(env(safe-area-inset-bottom) + 8px); gap: 4px; }
.menyu::before { display: none; }
.menyu-tugma {
  border-radius: 99px; padding: 7px 2px; font-weight: 500; font-size: 10.5px;
  transition: background var(--orta) var(--egri), color var(--orta) var(--egri), transform var(--tez) var(--egri);
}
.menyu-tugma svg { width: 19px; height: 19px; }
.menyu-tugma.faol { background: var(--asosiy); color: var(--asosiy-matn); }
.menyu-tugma:active { transform: scale(.94); }

/* ── Pastdan chiqadigan taglik ── */
.taglik { border-radius: 28px 28px 0 0; animation: tong-taglik var(--sekin) cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tong-taglik { from { transform: translateY(100%); } }
.taglik-tutqich { background: var(--chegara-2); width: 44px; height: 5px; border-radius: 99px; }
.taf-summa { font-size: 34px; font-weight: 400; }
.taf-sana { font-family: var(--shr-son); font-style: italic; font-size: 18px; color: var(--matn); }
.taglik-yop, .tahrir-tugmalar button { border-radius: 99px; }
.tahrir-tugmalar button.asosiy { background: var(--asosiy); color: var(--asosiy-matn); }

/* ── Eslatma / qarz qatorlari ── */
.qator, .qarz-qator, .xotira-qator { border-radius: 16px; }
.qarz-summa { font-size: 20px; font-weight: 400; }
.qidiruv-nomlar button { border-radius: 99px; }
.qidiruv-nomlar button.tanlangan { background: var(--asosiy); color: var(--asosiy-matn); }

/* ── Bildirishnoma paneli ── */
.xn-kun { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--matn-2); }

/* ── Yuklanmoqda shimmer ── */
.yuklanmoqda::after { background: linear-gradient(90deg, transparent, rgba(226, 103, 58, .12), transparent); }

/* Sarlavha/menyu shaffofligi (Nafas ustida) — Tong da fon dog'lari ko'rinsin */
.sarlavha, .kirish, .menyu { background: color-mix(in srgb, var(--fon) 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .sarlavha, .kirish, .menyu { background: var(--fon); }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .belgi::before, #tugma-xabarnoma svg,
  .katta, .ulush, .qarz-ulush > div, .xabar, .taglik { animation: none !important; }
}