/* ============================================================
   Liquid Glass — слой «жидкого стекла» поверх основной темы.
   Подключается ПОСЛЕ main.css. Работает в обеих темах.
   ============================================================ */

/* --- Цветные пятна позади интерфейса: стекло «преломляет» их через блюр --- */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 12% 8%,  rgba(0,113,227,0.15), transparent 70%),
    radial-gradient(30% 26% at 88% 12%, rgba(191,90,242,0.12), transparent 70%),
    radial-gradient(34% 30% at 78% 86%, rgba(90,200,250,0.13), transparent 70%),
    radial-gradient(26% 22% at 22% 88%, rgba(52,199,89,0.09),  transparent 70%);
  filter: blur(64px);
  transform: translateZ(0);
}
body.theme-student::before {
  background:
    radial-gradient(40% 32% at 15% 6%,  rgba(124,92,255,0.30), transparent 70%),
    radial-gradient(30% 26% at 88% 14%, rgba(79,214,255,0.16), transparent 70%),
    radial-gradient(36% 30% at 80% 88%, rgba(199,125,255,0.18), transparent 70%),
    radial-gradient(24% 22% at 18% 90%, rgba(45,212,167,0.12), transparent 70%);
}

/* --- Стеклянный материал: карточки, модалки, форма входа --- */
.card, .stat-card, .modal, .auth-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.45), rgba(255,255,255,0.05) 45%),
    rgba(255,255,255,0.52);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), var(--shadow-sm);
}
body.theme-student .card,
body.theme-student .stat-card,
body.theme-student .modal,
body.theme-student .auth-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.015) 48%),
    rgba(21,21,31,0.52);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), var(--shadow-sm);
}

/* --- Сайдбар и мобильная шапка --- */
.sidebar {
  background: rgba(255,255,255,0.50);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border-right: 1px solid rgba(255,255,255,0.45);
}
body.theme-student .sidebar {
  background: rgba(12,12,19,0.55);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.mobile-topbar {
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.45);
}
body.theme-student .mobile-topbar {
  background: rgba(12,12,19,0.60);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* --- Подложка модалок: глубокое размытие всего фона --- */
.modal-overlay {
  background: rgba(8,8,16,0.28);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

/* --- Кнопки: вторичные — из стекла, главная — с бликом --- */
.btn-secondary, .btn-outline, .btn-ghost {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.50), rgba(255,255,255,0.10) 55%),
    rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
}
body.theme-student .btn-secondary,
body.theme-student .btn-outline,
body.theme-student .btn-ghost {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 55%),
    rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}
.btn-primary {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 6px 18px rgba(0,113,227,0.30);
}
body.theme-student .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 22px rgba(124,92,255,0.35);
}

/* --- Поля ввода: лёгкая прозрачность --- */
.form-input {
  background: rgba(255,255,255,0.55);
}
body.theme-student .form-input {
  background: rgba(255,255,255,0.06);
}

/* --- Бейджи и прогресс-бары: чуть «стекла» --- */
.badge {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.pbar {
  background: rgba(120,120,140,0.16);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
body.theme-student .pbar {
  background: rgba(255,255,255,0.08);
}

/* --- Ховер карточек: стекло «подсвечивается» --- */
.card-hover:hover {
  border-color: rgba(255,255,255,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), var(--shadow-md);
}
body.theme-student .card-hover:hover {
  border-color: rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), var(--shadow-md);
}

/* --- Плеер и таблицы внутри стекла не должны терять читаемость --- */
.card table { background: transparent; }

/* --- Деградация: без поддержки blur остаётся плотный полупрозрачный фон --- */
@supports not (backdrop-filter: blur(1px)) {
  .card, .stat-card, .modal, .auth-card { background: var(--surface); }
  .sidebar { background: rgba(255,255,255,0.92); }
  body.theme-student .sidebar { background: rgba(12,12,19,0.94); }
}