/* ============================================================
   Sim Top — DIZAYN YAXSHILASH QATLAMI (enhance.css)
   Eng oxirida yuklanadi — mavjud uslublarni buzmaydi, ustiga qo'shadi.
   1) Fluid (clamp) tipografiya — telefon va kompyuterda mukammal o'qiladi
   2) Qo'shimcha animatsiyali fon (aurora + yaltiroq zarralar)
   3) Gradient jonli sarlavhalar
   4) Kartalar uchun nafis kirish/hover effektlari
   ============================================================ */

/* ─── Umumiy matn silliqligi ─── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.1px;
}

/* Uzun matnlar telefonkda sig'masa ham chiroyli ko'chsin */
h1, h2, h3, p, span, a, button, label, li {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================================
   1) FLUID TIPOGRAFIYA — clamp(min, ideal, max)
   ============================================================ */

/* Hero / kirish sarlavhalari */
.login-brand-name {
  font-size: clamp(2.4rem, 1.4rem + 4.5vw, 4.2rem) !important;
  line-height: 0.95 !important;
}
.login-brand-tagline {
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.15rem) !important;
  line-height: 1.45 !important;
}
.login-box h1,
.auth-view h1 {
  font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2rem) !important;
  line-height: 1.15 !important;
}
.sub-login {
  font-size: clamp(0.9rem, 0.85rem + 0.35vw, 1rem) !important;
}

/* Sahifa sarlavhalari */
.page-header h1 {
  font-size: clamp(1.4rem, 1.05rem + 1.7vw, 2rem) !important;
  line-height: 1.2 !important;
}
.page-header p {
  font-size: clamp(0.88rem, 0.82rem + 0.4vw, 1rem) !important;
}
.dashboard-welcome h2 {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.3rem) !important;
  line-height: 1.18 !important;
}

/* Panellar / kartalar sarlavhalari */
.panel h2,
.panel h3,
.section-head h3 {
  font-size: clamp(1.02rem, 0.95rem + 0.45vw, 1.2rem) !important;
}
.service-card h3 {
  font-size: clamp(0.98rem, 0.92rem + 0.4vw, 1.12rem) !important;
}
.panel .sub {
  font-size: clamp(0.83rem, 0.79rem + 0.3vw, 0.95rem) !important;
}

/* Tugmalar / navigatsiya / balans — barmoq bilan qulay, o'qish oson */
.btn {
  font-size: clamp(0.9rem, 0.86rem + 0.3vw, 1rem) !important;
}
.nav-label {
  font-size: clamp(0.9rem, 0.86rem + 0.25vw, 0.98rem) !important;
}
.balance-pill strong {
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.5rem) !important;
}
.mobile-bal {
  font-size: clamp(0.85rem, 0.8rem + 0.4vw, 1rem) !important;
}

/* ============================================================
   2) ANIMATSIYALI FON — qo'shimcha qatlamlar
   .bg-animation ichidagi mavjud orblar saqlanadi; ustiga
   aurora to'lqini va yaltiroq zarralar qo'shamiz (HTML o'zgarmaydi).
   ============================================================ */

/* Aurora — yuqoridan oqib o'tuvchi rangli to'lqin */
.bg-animation::before {
  content: "";
  position: absolute;
  inset: -20% -20% auto -20%;
  height: 70%;
  background:
    radial-gradient(ellipse 50% 60% at 30% 0%, rgba(59, 130, 246, 0.1), transparent 70%),
    radial-gradient(ellipse 45% 55% at 70% 10%, rgba(56, 189, 248, 0.07), transparent 70%);
  filter: blur(40px);
  opacity: 0.55;
  animation: auroraSweep 18s ease-in-out infinite alternate;
}

/* Yaltiroq zarralar (yulduzchalar) — mayda nuqtalar miltillaydi */
.bg-animation::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 28% 68%, rgba(200, 220, 255, 0.4), transparent),
    radial-gradient(2px 2px at 47% 35%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 63% 78%, rgba(200, 200, 255, 0.35), transparent),
    radial-gradient(2px 2px at 78% 28%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 88% 60%, rgba(180, 220, 255, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 38% 88%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(2px 2px at 7% 50%, rgba(200, 220, 255, 0.35), transparent);
  background-repeat: no-repeat;
  opacity: 0.35;
  animation: twinkle 6s ease-in-out infinite;
}

[data-theme="light"] .bg-animation::after { opacity: 0.18; }
[data-theme="light"] .bg-animation::before { opacity: 0.6; }

[data-theme="dark"] .bg-animation::before,
:root:not([data-theme="light"]) .bg-animation::before {
  opacity: 0.35;
}

[data-theme="dark"] .bg-animation::after,
:root:not([data-theme="light"]) .bg-animation::after {
  opacity: 0.28;
}

/* Mavjud orblar biroz jonliroq */
.bg-orb { opacity: 0.5; }

@keyframes auroraSweep {
  0%   { transform: translateX(-6%) translateY(-2%) scaleY(1); opacity: 0.7; }
  50%  { transform: translateX(5%)  translateY(2%)  scaleY(1.12); opacity: 1; }
  100% { transform: translateX(-3%) translateY(-1%) scaleY(0.96); opacity: 0.8; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.6; }
}

/* ============================================================
   3) GRADIENT JONLI SARLAVHALAR (faqat eng yirik sarlavhalar)
   ============================================================ */
.login-hero h2 {
  background: linear-gradient(110deg, var(--text) 0%, var(--accent3) 35%, var(--accent2) 65%, var(--text) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: titleShine 8s linear infinite;
}

/* Bosh sahifa sarlavhalari — solid tiniq matn (gradient emas) */
.dashboard-welcome h2,
.dash-hero h2,
.page-header h1 {
  -webkit-text-fill-color: unset;
  background: none;
  color: inherit;
  animation: none;
}

[data-theme="light"] .service-card:hover {
  box-shadow: 0 12px 28px rgba(47, 107, 255, 0.12) !important;
}

@keyframes titleShine {
  0%   { background-position: 0% center; }
  100% { background-position: 220% center; }
}

/* ============================================================
   4) KARTALAR — nafis kirish va hover
   ============================================================ */
.panel,
.service-card {
  animation: cardRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.service-card {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s ease, border-color 0.28s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45),
              0 0 0 1px rgba(99, 102, 241, 0.18);
}

@keyframes cardRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Asosiy tugma — yumshoq porlash hover */
.btn-auth-submit,
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-auth-submit::after,
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
}
.btn-auth-submit:hover::after,
.btn-primary:hover::after {
  left: 140%;
}

/* ============================================================
   5) MOBIL (TELEGRAM ICHIDA) — qo'shimcha o'qiluvchanlik
   ============================================================ */
@media (max-width: 640px) {
  body { line-height: 1.55; }
  .page-header { padding: 1.25rem 0 1rem; }
  .panel { padding: 1.1rem 1.05rem; }
  /* Juda kichik ekranlarda balans katta va aniq */
  .balance-pill strong { font-size: clamp(1.2rem, 1rem + 3vw, 1.6rem) !important; }
}

/* Harakatni kamaytirish rejimi — barcha yangi animatsiyalar o'chadi */
@media (prefers-reduced-motion: reduce) {
  .bg-animation::before,
  .bg-animation::after,
  .login-brand-name,
  .dashboard-welcome h2,
  .panel,
  .service-card {
    animation: none !important;
  }
}