/* ═══════════════════════════════════════════════════════
   ATPROO EDA AI — Animated Background
   Yuklash: eng OXIRIDA (profile-premium.css'dan keyin)
   <link rel="stylesheet" href="css/animated-background.css">

   MAQSAD: Butun sayt (welcome, auth, asosiy ilova) uchun
   zamonaviy, sekin harakatlanuvchi gradient fon. Mavjud
   yashil/ko'k (#00e5a0 / #4f8eff) rang sxemasi saqlanadi —
   faqat fon "jonlantiriladi".
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   ASOSIY SABAB TUZATISH:
   design-system.css'da @media(prefers-color-scheme:light) qoidasi bor —
   agar foydalanuvchi tizimi "Light mode"da bo'lsa, --t1/--t2/--t3 kabi
   matn ranglari deyarli QORA qilib qo'yiladi, lekin fon (!important bilan)
   baribir qorong'i qoladi -> qora matn qora fon ustida = ko'rinmaydi.
   Bu Profile/Home/Settings'dagi "xira matn" muammosining ASL sababi edi.

   Ilova faqat dark-theme uchun mo'ljallangan, shuning uchun tizim
   sozlamasidan qat'iy nazar token'larni doim qorong'i qiymatga qaytaramiz.
   ═══════════════════════════════════════════════════════ */
:root {
  --bg:      #0F1117 !important;
  --bg2:     #161B27 !important;
  --bg3:     #1C2333 !important;
  --bg4:     #232B3E !important;
  --t1:      #F0F4FF !important;
  --t2:      #8899BB !important;
  --t3:      #505878 !important;
  --surface:  rgba(255,255,255,0.04) !important;
  --surface2: rgba(255,255,255,0.07) !important;
  --border:   rgba(255,255,255,0.07) !important;
  --border2:  rgba(255,255,255,0.12) !important;
}


/* ═══════════════════════════════════════════════════════
   FIX: butun sayt foni endi HERO BANNER bilan bir xil darajada
   yorqin (avval intensivlik .06–.16 oralig'ida edi, hero banner
   esa .4–.5 — shuning uchun faqat hero banner "porlab" ko'rinardi,
   qolgan barcha sahifalar juda xira/tekis qorong'i ko'rinardi).
   Baza rangi ham hero bannerning binafsha-to'q ko'k ohangiga
   moslashtirildi (#0a0a1a tekis qora o'rniga #1a0b3d/#12163f).
   ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   FIX (rang sxemasi): avval fon BINAFSHA-ustunlik qilardi (indigo/
   violet), bu esa brendning asosiy rangi (#00e5a0 yashil) va
   foydalanuvchi ko'rsatgan referens dizayn (shimoliy chiroq/aurora,
   yashil ustunlik) bilan mos kelmasdi. Endi fon YASHIL-EMERALD
   ustunlikka o'tkazildi — binafsha faqat engil urg'u sifatida qoldi.
   ═══════════════════════════════════════════════════════ */
html, body {
  background: #081410 !important;
  background-image:
    radial-gradient(ellipse 90% 70% at 15% -10%, rgba(0,229,160,.30), transparent 62%),
    radial-gradient(ellipse 80% 70% at 110% 8%, rgba(16,185,129,.28), transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 115%, rgba(52,211,153,.22), transparent 62%),
    radial-gradient(ellipse 55% 55% at 88% 82%, rgba(79,142,255,.14), transparent 60%),
    radial-gradient(ellipse 45% 45% at 8% 90%, rgba(139,92,246,.10), transparent 58%),
    linear-gradient(160deg, #06231c 0%, #0a1f22 40%, #0a1a24 75%, #081018 100%) !important;
  background-attachment: fixed;
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  animation: bgDrift 26s ease-in-out infinite alternate;
}

/* ── Yulduzlar (star field) — butun ilova ortida, doim ko'rinadi ── */
.star-field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 168px 33px, rgba(255,255,255,0.84), transparent),
    radial-gradient(1px 1px at 67px 62px, rgba(255,255,255,0.84), transparent),
    radial-gradient(2px 2px at 178px 194px, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 113px 13px, rgba(255,255,255,0.46), transparent),
    radial-gradient(2px 2px at 64px 134px, rgba(255,255,255,0.42), transparent),
    radial-gradient(2px 2px at 55px 188px, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 119px 155px, rgba(255,255,255,0.89), transparent),
    radial-gradient(1.5px 1.5px at 6px 45px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 44px 60px, rgba(255,255,255,0.46), transparent),
    radial-gradient(1px 1px at 102px 29px, rgba(255,255,255,0.91), transparent),
    radial-gradient(1px 1px at 159px 72px, rgba(255,255,255,0.84), transparent),
    radial-gradient(1.5px 1.5px at 142px 36px, rgba(255,255,255,0.45), transparent),
    radial-gradient(2px 2px at 80px 165px, rgba(255,255,255,0.93), transparent),
    radial-gradient(1px 1px at 97px 152px, rgba(255,255,255,0.82), transparent),
    radial-gradient(1px 1px at 16px 174px, rgba(255,255,255,0.86), transparent),
    radial-gradient(1px 1px at 25px 64px, rgba(255,255,255,0.63), transparent),
    radial-gradient(1px 1px at 121px 167px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 95px 58px, rgba(255,255,255,0.82), transparent),
    radial-gradient(1px 1px at 179px 170px, rgba(255,255,255,0.77), transparent),
    radial-gradient(1px 1px at 48px 141px, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 102px 74px, rgba(255,255,255,0.53), transparent),
    radial-gradient(1px 1px at 88px 19px, rgba(255,255,255,0.89), transparent),
    radial-gradient(1px 1px at 85px 107px, rgba(255,255,255,0.44), transparent),
    radial-gradient(1px 1px at 150px 188px, rgba(255,255,255,0.53), transparent);
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: .65;
  animation: starTwinkle 4s ease-in-out infinite alternate;
}
@keyframes starTwinkle { 0% { opacity: .45; } 100% { opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .star-field { animation: none; } }

/* ── Yengil "lazer" chiziqlari — butun ilova ustida, juda shaffof ── */
.light-streaks {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.light-streaks span {
  position: absolute; height: 1px; width: 160%; left: -30%;
  background: linear-gradient(90deg, transparent, rgba(0,229,160,.4), rgba(52,211,153,.22), transparent);
}
.light-streaks span:nth-child(1) { top: 12%;  transform: rotate(-8deg); }
.light-streaks span:nth-child(2) { top: 45%;  transform: rotate(5deg); opacity: .7; }
.light-streaks span:nth-child(3) { top: 78%;  transform: rotate(-4deg); opacity: .5; }

@keyframes bgDrift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
  50%  { background-position: 20% 15%, 80% 20%, 55% 85%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%; }
}

/* Harakat sezgir foydalanuvchilar uchun statik holatga qaytarish */
@media (prefers-reduced-motion: reduce) {
  html, body { animation: none; }
}

/* ── Ambient orb'lar (mavjud .amb/.a1/.a2/.a3) — barchasi harakatlansin ── */
.amb {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  opacity: .7;
  will-change: transform;
}

.a1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(0,229,160,.38), transparent 70%);
  top: -120px; left: -100px;
  animation: ambDrift1 16s ease-in-out infinite alternate;
}
.a2 {
  width: 580px; height: 580px;
  background: radial-gradient(circle, rgba(16,185,129,.32), transparent 70%);
  bottom: -170px; right: -120px;
  animation: ambDrift2 20s ease-in-out infinite alternate;
}
.a3 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(79,142,255,.26), transparent 70%);
  top: 38%; left: 28%;
  animation: ambDrift3 13s ease-in-out infinite alternate;
}

@keyframes ambDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, 30px) scale(1.08); }
}
@keyframes ambDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-35px, -25px) scale(1.06); }
}
@keyframes ambDrift3 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(25px, -35px) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .a1, .a2, .a3 { animation: none; }
}

/* ── Asosiy konteynerlar shaffof bo'lishi kerak, fon ko'rinib tursin ──
   MUHIM: welcome-dashboard.css bu elementlarga !important bilan qattiq
   fon bergan, shuning uchun biz ham !important bilan yengamiz.
   FIX: #onboarding-screen ro'yxatda yo'q edi (integration.css unga qattiq
   var(--bg) bergan) — shuning uchun onboarding qadamlari (masalan "Asosiy
   maqsadingiz nima?") tekis qorong'i fonda ko'rinardi, umumiy yorqin fon
   u yerda ko'rinmasdi. */
#app, #auth-screen, #onboarding-screen, .content, main#content, #main-wrap, .main-wrap {
  background: transparent !important;
}

/* ── FIX: design-system.css #hero-greeting'ni (ID) juda xira (--t3)
   qilib qo'ygan edi — bu qoida onboarding uchun mo'ljallangan bo'lib,
   xato ravishda asosiy dashboard'dagi bir xil ID'ga ham tegib turibdi. ── */
#hero-greeting {
  color: rgba(255,255,255,.75) !important;
  font-weight: 600 !important;
}
#hero-name {
  color: #fff !important;
}

/* ── Sidebar ham umumiy fon orqali ko'rinsin (muzlatilgan-oyna effekti) ──
   Avval #sb-desktop butunlay QATTIQ #161B27 fon edi — bu yangi yorqin
   umumiy fon bilan keskin kontrast hosil qilib, sidebar alohida "quti"dek
   ko'rinardi. Topbar va pastki mobil panel allaqachon shu xil frosted-glass
   effektiga ega edi (integration.css/dashboard.css) — endi sidebar ham mos. */
#sb-desktop {
  background: rgba(6, 20, 18, .58) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

/* Kartalar/panellar fon ustida yaxshi o'qilishi uchun ozgina shaffoflik +
   blur qoldiramiz (ular allaqachon rgba fon ishlatadi, shu bilan mos) */
.card, .prof-hero, .plan-card, .chart-card, .ai-rec-card,
.water-card, .streak-card, .meal-planner-card, .body-progress-card,
.body-card, .meals-card, .achievements-card {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}