/* ==========================================================================
   TERAN ILDIZ — refresh-pro.css   (v28.3)  "ILLUMINATED LIBRARY"
   To'liq vizual yangilash: kartalar, tugmalar, sarlavhalar va kategoriya
   paneli tubdan yangilanadi — boyitilgan chuqurlik, nozik oltin detallar,
   ishonchli tipografiya, imzo sifatida oltin romb.

   QOIDA: barcha rang CSS o'zgaruvchilari (--gold, --ink, --cat ...) orqali
          ishlaydi → 9 ta mavzu ham, barcha funksiya ham saqlanadi.
          HTML/JS tegmaydi. Eng oxirida yuklanadi (kaskadda g'olib).
   ========================================================================== */


/* ──────────────────────────────────────────────────────────
   1) KARTA — yangi forma, chuqurlik, "illuminatsiya"
   ────────────────────────────────────────────────────────── */
.card {
  border-radius: 18px;
  border-color: var(--bdr-1);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 8px 24px -14px rgba(0,0,0,.6);
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--gold) 40%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--gold) 24%, transparent) inset,
      0 18px 40px -16px rgba(0,0,0,.72),
      0 10px 34px -18px color-mix(in srgb, var(--gold) 55%, transparent);
  }
}

/* Muqova — yorqinroq, glossy, chuqur */
.cov { border-bottom-color: var(--bdr-1); }
.cov::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 32%),
    radial-gradient(ellipse at 50% 30%, transparent 36%, rgba(0,0,0,.38));
}
/* Yuqori aksent chizig'i — biroz porloqroq */
.cov::before { height: 3px; opacity: .88; }
/* Markaziy ikon — kattaroq, kategoriya rangida nur bilan */
.cov-ic {
  font-size: clamp(36px, 7vw, 58px);
  filter:
    drop-shadow(0 4px 16px rgba(0,0,0,.5))
    drop-shadow(0 0 22px color-mix(in srgb, var(--cat, var(--gold)) 28%, transparent));
}
.cov-glow { width: 152px; height: 152px; opacity: .42; }
@media (hover: hover) { .card:hover .cov-glow { opacity: .64; } }


/* ──────────────────────────────────────────────────────────
   2) KARTA MATNI — ishonchli tipografik ierarxiya
   ────────────────────────────────────────────────────────── */
/* Eyebrow (kategoriya) — nozik, keng harf oralig'i */
.cbadge {
  font-size: 9.5px;
  letter-spacing: 1.1px;
  opacity: .92;
  gap: 6px;
}
/* Sarlavha — kattaroq, zich, aniq */
.cttl {
  font-size: clamp(15px, 2.4vw, 18px);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -.2px;
}
.cdsc { color: var(--txt); opacity: .82; }


/* ──────────────────────────────────────────────────────────
   3) "O'QISH" TUGMASI — endi yaqqol ko'rinadi (soft-gold, tactile)
      Avval shaffof edi (ko'zga tashlanmasdi). Endi oltin-tusli,
      hoverda to'liq oltinga to'ladi. Barcha mavzuda kontrastli.
   ────────────────────────────────────────────────────────── */
.cbtn {
  padding: 8px 16px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--gold) 20%, transparent),
      color-mix(in srgb, var(--gold) 9%, transparent));
  border-color: color-mix(in srgb, var(--gold) 42%, transparent);
  color: var(--ink);
  font-weight: 700;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 4px 14px -9px color-mix(in srgb, var(--gold) 60%, transparent);
}
.cbtn i { color: var(--gold); font-size: 10px; }
@media (hover: hover) {
  .cbtn:hover {
    background: linear-gradient(135deg, var(--gold-hi), var(--gold));
    border-color: var(--gold);
    color: var(--bg);
    box-shadow: 0 7px 22px -8px color-mix(in srgb, var(--gold) 70%, transparent);
  }
  .cbtn:hover i { color: var(--bg); }
}

/* Amal ikonlari (Saqlash/Yuklash/Ulashish) — toza, bitta ajratuvchi chiziq */
.card .cab-bar { border-top: none; padding-top: 6px; }
.card .cab-bar .cab-btn {
  border-color: var(--bdr-1);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
@media (hover: hover) {
  .card .cab-bar .cab-btn:hover {
    border-color: color-mix(in srgb, var(--gold) 45%, transparent);
    color: var(--gold-hi);
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    transform: translateY(-2px);
  }
}


/* ──────────────────────────────────────────────────────────
   4) SAHIFA SARLAVHASI — bolder + IMZO (oltin romb)
   ────────────────────────────────────────────────────────── */
.pttl { font-weight: 600; letter-spacing: -.6px; }
.pkicker { gap: 10px; font-size: 11px; letter-spacing: 2.6px; opacity: .95; }
/* Avval oddiy chiziq edi — endi nozik oltin romb (Islom geometriyasi ruhi) */
.pkicker::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 70%, transparent);
}
/* Sarlavha tagidagi aksent — biroz nafis */
.phd::after { height: 2px; width: 56px; }


/* ──────────────────────────────────────────────────────────
   5) KATEGORIYA PANELI — faol pill porlaydi
   ────────────────────────────────────────────────────────── */
#catbar .nc.on {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold)) !important;
  border-color: transparent !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 4px 16px -6px color-mix(in srgb, var(--gold) 58%, transparent) !important;
}


/* ──────────────────────────────────────────────────────────
   6) NAVBAR TUGMALARI — nozik "tactile" tuyg'u
   ────────────────────────────────────────────────────────── */
.nb {
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 2px 8px -5px rgba(0,0,0,.45) !important;
}
@media (hover: hover) {
  .nb:hover {
    background: color-mix(in srgb, var(--gold) 12%, var(--chrome-bg-2)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.08) inset,
      0 4px 14px -6px color-mix(in srgb, var(--gold) 45%, transparent) !important;
  }
}


/* ──────────────────────────────────────────────────────────
   7) "BO'SH" HOLAT — chiroyliroq
   ────────────────────────────────────────────────────────── */
.empty i { color: var(--gold); opacity: .5; }