/* =====================================================
   LingoNOX — Soft AI Theme (2025)
   ===================================================== */

:root {
  /* ФОНОВЫЕ ПОВЕРХНОСТИ */
  --bg: #f5f8ff;
  --bg-2: #ffffff;
  --panel: #ffffff;

  /* ТЕКСТ */
  --text: #0f172a;
  --text-strong: #0a0e17;
  --muted: #76829a;

  /* ВЫДЕЛЕНИЕ / АКЦЕНТ */
  --brand: #3d74ff;
  --brand-2: #5a8bff;
  --brand-light: #e8efff;
  --focus: #8db4ff;

  /* КАРТОЧКИ */
  --card-bg: #ffffff;
  --card-muted-bg: #f2f5ff;
  --card-border: #e6e9f3;

  /* УСПЕХ / ПРОГРЕСС */
  --progress-track: #e5e8f2;
  --progress-fill: #3d74ff;
  --progress-glow: rgba(61,116,255,.25);

  /* САЙДБАР */
  --sidebar: #ffffff;
  --nav-link: #7b8aa6;
  --nav-link-active-bg: #e8efff;
  --nav-link-active-text: #3d74ff;

  --overlay: rgba(0,0,0,.35);
}

/* =====================================================
   DARK MODE
   ===================================================== */
body.dark-mode {
  --bg: #0d1117;
  --panel: #161b22;
  --text: #e6edf3;
  --muted: #9aa7b8;

  --card-bg: #161b22;
  --card-muted-bg: #1d2330;
  --card-border: #2d3546;

  --brand: #4f8aff;
  --brand-2: #7da8ff;
  --brand-light: #1d2a43;

  --progress-track: #2a3344;
  --progress-fill: #4f8aff;
  --progress-glow: rgba(79,138,255,.45);
}

/* =====================================================
   BASE
   ===================================================== */

body {
  margin: 0;
  background: linear-gradient(180deg, #f5f8ff, #ffffff);
  color: var(--text);
  font-family: Inter, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.main {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 18px calc(100px + env(safe-area-inset-bottom));
}

/* =====================================================
   LINKS / TEXT
   ===================================================== */

a {
  color: var(--brand);
  text-decoration: none;
}
a:hover { opacity: .8; }

/* =====================================================
   CARDS
   ===================================================== */

.card, 
.section-wrapper,
.section-card,
.lesson-card,
.block-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  padding: 18px 16px;
  transition: transform .15s ease, box-shadow .2s ease;
}

.card:active,
.section-card:active {
  transform: scale(.98);
}

/* ИКОНКИ КАРТОЧЕК */
.card-icon,
.block-card img,
.lesson-icon {
  background: linear-gradient(135deg, #eff4ff, #dce7ff);
  border-radius: 16px;
  padding: 10px;
  width: 46px !important;
  height: 46px !important;
  box-shadow: 0 4px 12px rgba(61,116,255,.15);
}

/* =====================================================
   BUTTONS
   ===================================================== */
.button-primary,
.card-button {
  background: var(--brand);
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  height: 52px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(61,116,255,.25);
  transition: background .2s ease, transform .1s ease;
}

.button-primary:hover { background: var(--brand-2); }
.button-primary:active { transform: scale(.97); }

/* =====================================================
   PROGRESS BARS
   ===================================================== */
.progress-container {
  background: var(--progress-track);
  border-radius: 20px;
  overflow: hidden;
  height: 10px;
}

.progress-bar {
  height: 10px;
  background: linear-gradient(90deg, #7da8ff, var(--brand) 40%);
  box-shadow:
    inset 0 0 1px rgba(255,255,255,.5),
    0 0 12px var(--progress-glow);
  border-radius: 20px;
}

/* =====================================================
   BOTTOM NAV — обновлённый и улучшенный
   ===================================================== */

.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 72px;

  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(0,0,0,.06);

  display: flex;
  justify-content: space-around;
  align-items: center;

  padding: 0 10px env(safe-area-inset-bottom);
  z-index: 9999;
}

.bottom-nav .nav-item {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: var(--muted);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  font-size: 13px;
  transition: opacity .25s, color .25s;
}

.bottom-nav .nav-item.active {
  color: var(--brand);
}

.nav-icon-wrapper {
  width: 4px;
  height: 4px;
  border-radius: 48px;

  background: rgba(0,0,0,0.04);
  display: flex;
  justify-content: center;
  align-items: center;

  transition: background .25s;
}

.nav-item.active .nav-icon-wrapper {
  background: rgba(61,116,255,0.18);
  box-shadow: 0 4px 12px rgba(61,116,255,0.25);
}

.nav-icon {
  width: 56px;
  height: 56px;
  opacity: .55;
  transition: opacity .25s;
}

.nav-item.active .nav-icon {
  opacity: 1;
}

/* Для десктопа */
@media (min-width: 900px) {
  .bottom-nav {
    max-width: 900px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* FLOATING CENTER BUTTON (если понадобится) */
.center-button {
  background: var(--brand);
  box-shadow: 0 10px 24px rgba(61,116,255,.35);
  border-radius: 18px;
  width: 58px;
  height: 58px;
  padding: 0;
}