/* =============================================
   MathPracticum v5 — Redesigned Premium UI
   Dark math-themed design with deep indigo/teal
   Large touch targets, crisp typography
   ============================================= */

:root {
  /* ── TonFrench Light palette ── */
  --bg:       #f7f9fc;
  --bg2:      #eef2f8;
  --bg3:      #e4eaf3;
  --bg4:      #d9e2ef;

  --surface:  rgba(30,150,228,0.06);
  --surface2: rgba(30,150,228,0.10);
  --surface3: rgba(30,150,228,0.15);

  --border:   rgba(30,150,228,0.14);
  --border2:  rgba(30,150,228,0.22);
  --border3:  rgba(30,150,228,0.32);

  /* Brand accent — TonFrench cyan */
  --accent:   #1e96e4;
  --accent2:  #35B1FA;
  --accent3:  #7dd0fd;
  --accent-g: linear-gradient(135deg,#1e96e4,#35B1FA);
  --accent-g2:linear-gradient(135deg,#1565a8,#2FAAD4);

  /* Status colors */
  --gold:     #f59e0b;
  --gold-l:   #fcd34d;
  --green:    #10b981;
  --green-l:  #34d399;
  --red:      #ef4444;
  --red-l:    #f87171;
  --orange:   #f97316;
  --pink:     #ec4899;
  --blue:     #1e96e4;
  --blue-l:   #35B1FA;
  --teal:     #0ea5c9;
  --teal-l:   #2FAAD4;
  --purple:   #1e96e4;

  /* Card background */
  --card:     #ffffff;

  /* Text */
  --text:     #1a202c;
  --text2:    #4a5568;
  --text3:    #718096;

  /* Radii */
  --radius:   12px;
  --radius-lg:18px;
  --radius-xl:24px;

  /* Effects */
  --glow:     0 0 48px rgba(30,150,228,0.20);
  --shadow:   0 12px 40px rgba(30,100,180,0.12);
  --shadow-sm:0 4px 20px rgba(30,100,180,0.08);
  --shadow-card: 0 2px 12px rgba(30,100,180,0.10);
  --transition:0.2s cubic-bezier(0.4,0,0.2,1);

  --sidebar-w:260px;
  --topbar-h: 84px;
}

/* ─── RESET ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:15px; -webkit-text-size-adjust:100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Montserrat", "Inter", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  /* overflow-x: clip вместо hidden — clip не создаёт scroll container
     и не ломает position:sticky у дочерних элементов (в отличие от hidden) */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background 0.35s ease, color 0.35s ease;
}

/* Smooth theme transitions for all dashboard elements */
.shell, .sidebar, .topbar, .content, .glass,
.nav-link, .card, .info-card, .hero-main,
.topbar-user-chip, .streak-badge, .xp-badge,
.page-section, .panel-card, .stat-card,
#globalSearch, .search-dropdown {
  transition: background 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Ambient background glow */
body::before {
  content:"";
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 8% -5%, rgba(30,150,228,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 95% 105%, rgba(20,184,166,0.09) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(30,150,228,0.04) 0%, transparent 70%);
  pointer-events:none;
}

/* ─── GLASS SURFACES ─── */
.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.glass-hi {
  background: var(--surface2);
  border: 1px solid var(--border2);
  backdrop-filter: blur(28px);
}
.glass-raised {
  background: linear-gradient(145deg, rgba(30,150,228,0.09), rgba(30,150,228,0.04));
  border: 1px solid var(--border2);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.10); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.18); }

/* ─── TYPOGRAPHY ─── */
h1 { font-size: clamp(1.9rem,4vw,2.7rem); font-weight:900; line-height:1.12; letter-spacing:-0.03em; }
h2 { font-size: clamp(1.25rem,2.8vw,1.75rem); font-weight:700; letter-spacing:-0.015em; }
h3 { font-size:1.05rem; font-weight:600; letter-spacing:-0.01em; }
.eyebrow {
  font-size:0.68rem; font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent2); margin-bottom:6px;
}
.section-head { margin-bottom:22px; }
.section-head h2 { margin-top:4px; }

/* ─── LAYOUT SHELL ─── */
/* ─── SHELL: no sidebar, full-width topbar layout ─── */
.shell { display:flex; flex-direction:column; height:100vh; overflow:hidden; position:relative; z-index:1; }

/* Sidebar hidden (kept for JS compatibility but invisible) */
.sidebar { display: none !important; }
.brand-row { display:flex; align-items:center; gap:10px; margin-bottom:22px; padding:0 4px; }
.logo-tile {
  width:40px; height:40px; border-radius:11px;
  background: var(--accent-g2);
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; font-weight:900; color:#fff; flex-shrink:0;
  box-shadow: 0 4px 18px rgba(30,150,228,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.brand-title { font-size:0.92rem; font-weight:800; color:var(--text); line-height:1.2; }
.brand-sub { font-size:0.62rem; color:var(--text3); margin-top:1px; }

/* User mini */
.user-mini {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--radius);
  background:var(--surface2); border:1px solid var(--border);
  margin-bottom:20px; cursor:pointer; transition:var(--transition);
  text-decoration:none; color:inherit;
}
.user-mini:hover { border-color:var(--border2); background:var(--surface3); }
.user-avatar {
  width:36px; height:36px; border-radius:50%;
  background: var(--accent-g);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.9rem; color:#fff; flex-shrink:0;
  box-shadow: 0 2px 10px rgba(30,150,228,0.4);
}
.user-name { font-size:0.83rem; font-weight:700; color:var(--text); }
.user-grade { font-size:0.68rem; color:var(--text3); }

/* Nav */
.nav { display:flex; flex-direction:column; gap:3px; flex:1; }
.nav-link {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  color:var(--text2); font-size:0.83rem; font-weight:500;
  text-decoration:none; transition:var(--transition);
  position:relative; min-height:42px;
}
.nav-link:hover { background:var(--surface2); color:var(--text); }
.nav-link.active {
  background: linear-gradient(135deg, rgba(30,150,228,0.2), rgba(53,177,250,0.1));
  color: var(--accent2);
  font-weight:700;
  border:1px solid rgba(30,150,228,0.22);
}
.nav-link.active .nav-icon { color:var(--accent2); }
.nav-icon { width:20px; height:20px; text-align:center; font-size:1rem; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.nav-svg { color:inherit; }
.nav-svg svg { width:18px; height:18px; display:block; stroke:currentColor; }
.search-icon { display:inline-flex; align-items:center; justify-content:center; }
.search-icon svg { stroke:var(--text3); }
.nav-section-label {
  font-size:0.6rem; font-weight:800; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text3);
  padding:12px 12px 4px; margin-top:4px;
}

/* Sidebar bottom */
.sidebar-bottom { margin-top:auto; padding-top:14px; border-top:1px solid var(--border); }
.goal-label { font-size:0.68rem; color:var(--text3); margin-bottom:5px; }
.goal-bar { height:4px; background:rgba(30,150,228,0.09); border-radius:4px; overflow:hidden; margin-bottom:10px; }
.goal-fill { height:100%; background:var(--accent-g); border-radius:4px; transition:width 0.7s ease; }
.ghost-btn {
  background:none; border:1px solid var(--border2); color:var(--text2);
  padding:8px 14px; border-radius:9px; font-size:0.76rem; cursor:pointer;
  transition:var(--transition); width:100%; text-align:center; font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px;
}
.ghost-btn:hover { border-color:var(--accent); color:var(--accent2); background:rgba(30,150,228,0.07); }
.ghost-btn.wide { display:flex; justify-content:center; }
.ghost-btn.small { font-size:0.72rem; padding:6px 10px; min-height:32px; }

/* ─── CONTENT AREA — full width, scrollable ─── */
.content { flex:1; min-width:0; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; }

/* ─── TOPBAR ─── */
.topbar {
  height: var(--topbar-h);
  display:flex; align-items:center; gap:12px;
  padding:0 26px;
  border-bottom: 1px solid rgba(30,150,228,0.15);
  position:sticky; top:0; z-index:40;
  background: rgba(247,249,252,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 rgba(30,150,228,0.18),
              0 8px 32px -4px rgba(30,100,180,0.08);
}
/* Soft gradient bleed downward from topbar into the page */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 48px;
  background: linear-gradient(to bottom,
    rgba(247,249,252,0.85) 0%,
    rgba(247,249,252,0.40) 40%,
    transparent 100%);
  pointer-events: none;
  z-index: -1;
}
.search-wrap { position:relative; flex:1; max-width:420px; }
.search-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:0.95rem; pointer-events:none; }
#globalSearch {
  width:100%; padding:11px 14px 11px 40px;
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  border-radius:12px; color:var(--text); font-size:0.86rem; outline:none;
  transition:var(--transition); height:46px;
}
#globalSearch:focus { border-color:var(--accent); background:rgba(30,150,228,0.10); }
#globalSearch::placeholder { color:var(--text3); }
.search-dropdown {
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  border-radius:var(--radius); z-index:200;
  overflow:hidden; box-shadow:var(--shadow);
}
.search-result-row {
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; cursor:pointer; transition:var(--transition);
  border-bottom:1px solid var(--border);
}
.search-result-row:hover { background:var(--surface2); }
.search-result-icon { font-size:1rem; flex-shrink:0; }
.search-result-label { font-size:0.83rem; font-weight:500; flex:1; }
.search-result-sub { font-size:0.7rem; color:var(--text3); }
.search-empty { padding:14px; font-size:0.83rem; color:var(--text3); text-align:center; }

/* Dashboard logo (in topbar) */
.dash-logo-link {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; flex-shrink: 0;
}
.dash-logo-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--accent-g2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 900; color: #fff; flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(30,150,228,0.4);
}
.dash-logo-text {
  font-size: 15px; font-weight: 800; color: var(--text);
  letter-spacing: -0.3px;
  display: none; /* hidden on smaller screens */
}
@media (min-width: 1100px) {
  .dash-logo-text { display: block; }
}

/* Mobile hamburger in dashboard */
.hamburger-btn { display: none; }
.mob-search-btn { display: none; }
.topbar-left { display: none; align-items: center; gap: 8px; flex-shrink: 0; }
.topbar-section-title { display: none; font-size: 0.9rem; font-weight: 700; color: var(--text); }

/* Dashboard mobile dropdown nav */
.dash-mobile-nav {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(247,249,252,0.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(30,150,228,0.14);
  padding: 8px 12px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(30,100,180,0.12);
}
.dash-mobile-nav.open { display: flex; flex-direction: column; gap: 2px; }
.dash-mob-link {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--text);
  text-decoration: none; transition: background 0.15s;
  font-family: "Montserrat", system-ui, sans-serif;
}
.dash-mob-link:hover,
.dash-mob-link.active { background: rgba(30,150,228,0.10); color: var(--accent); }

/* Admin icon button */
.admin-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--text3); text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.admin-icon-btn:hover { background: rgba(30,150,228,0.1); color: var(--accent); }

.topbar-actions { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
.streak-badge, .xp-badge {
  padding:8px 16px; border-radius:22px;
  font-size:0.82rem; font-weight:700; white-space:nowrap;
  cursor:pointer; transition:var(--transition); min-height:40px;
  display:flex; align-items:center; gap:5px;
}
.streak-badge { background:rgba(245,158,11,0.13); color:var(--gold-l); border:1px solid rgba(245,158,11,0.25); }
.xp-badge { background:rgba(30,150,228,0.13); color:var(--accent2); border:1px solid rgba(30,150,228,0.25); }
.streak-badge:hover { background:rgba(245,158,11,0.22); }
.xp-badge:hover { background:rgba(30,150,228,0.22); }
.topbar-clickable { text-decoration:none; cursor:pointer; transition:var(--transition); }
.topbar-clickable:hover { opacity:0.8; }
.brand-link { text-decoration:none; color:inherit; display:flex; align-items:center; gap:10px; }
.user-mini-link { text-decoration:none; color:inherit; }

/* ─── PAGE SECTIONS ─── */
.page-section {
  padding: 28px 28px 44px;
  /* overflow handled by .content parent */
}
.hidden { display:none !important; }

/* ─── PANEL CARD ─── */
.panel-card {
  border-radius:var(--radius-lg);
  padding:20px;
}
.stack-list { display:flex; flex-direction:column; gap:10px; }

/* ─── BUTTONS ─── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px; border-radius:10px;
  font-size:0.83rem; font-weight:600;
  border:none; cursor:pointer; transition:var(--transition);
  text-decoration:none; white-space:nowrap;
  font-family:inherit; min-height:40px;
  -webkit-tap-highlight-color: transparent;
}
.btn-accent {
  background: var(--accent-g); color:#fff;
  box-shadow: 0 4px 18px rgba(30,150,228,0.4);
}
.btn-accent:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(30,150,228,0.55); }
.btn-accent:active { transform:translateY(0); }
.btn-primary {
  background:rgba(30,150,228,0.15); color:var(--accent2);
  border:1px solid rgba(30,150,228,0.3);
}
.btn-primary:hover { background:rgba(30,150,228,0.25); }
.btn-outline {
  background:transparent; color:var(--text2);
  border:1px solid var(--border2);
}
.btn-outline:hover { color:var(--text); border-color:var(--border3); background:var(--surface2); }
.btn-sm { padding:7px 14px; font-size:0.78rem; min-height:34px; }
.btn-xs { padding:5px 10px; font-size:0.72rem; border-radius:8px; min-height:28px; }
.btn-green { background:rgba(16,185,129,0.14); color:var(--green-l); border:1px solid rgba(16,185,129,0.28); }
.btn-green:hover { background:rgba(16,185,129,0.24); }

.primary-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:13px;
  background: var(--accent-g); color:#fff;
  font-size:0.92rem; font-weight:700;
  text-decoration:none; transition:var(--transition);
  box-shadow: 0 4px 26px rgba(30,150,228,0.45);
  border:none; cursor:pointer; font-family:inherit;
  -webkit-tap-highlight-color: transparent;
  min-height:48px;
}
.primary-btn:hover { transform:translateY(-2px); box-shadow:0 8px 36px rgba(30,150,228,0.60); }
.primary-btn:active { transform:translateY(0); }

/* ─── HOME NEW LAYOUT ─── */
.home-hero-row {
  display:grid; grid-template-columns:1fr 290px;
  gap:20px; margin-bottom:24px;
  align-items: stretch;
}
.hero-main {
  border-radius:var(--radius-xl); padding:28px 36px;
  position:relative; overflow:hidden;
}
.hero-main::before {
  content:"∑";
  position:absolute; right:-16px; top:-24px;
  font-size:200px; font-weight:900;
  color:rgba(30,150,228,0.045);
  line-height:1; pointer-events:none;
  user-select:none;
}
.hero-eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.pill {
  padding:5px 13px; border-radius:20px;
  background:rgba(30,150,228,0.14); color:var(--accent2);
  font-size:0.72rem; font-weight:700; letter-spacing:0.05em;
  border:1px solid rgba(30,150,228,0.25);
}
.pill-grade { background:rgba(16,185,129,0.13); color:var(--green-l); border-color:rgba(16,185,129,0.25); }
.pill-gold { background:rgba(245,158,11,0.13); color:var(--gold-l); border-color:rgba(245,158,11,0.25); }
.hero-desc { color:var(--text2); font-size:1rem; margin:14px 0 24px; max-width:520px; line-height:1.7; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }

/* Hero stats */
.hero-stats-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; border-top:1px solid var(--border); padding-top:22px; margin-top:8px;
}
.hero-stat { text-align:center; padding:0 8px; }
.hero-stat + .hero-stat { border-left:1px solid var(--border); }
.hero-stat-num {
  font-size:1.65rem; font-weight:900;
  background:var(--accent-g); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1;
}
.hero-stat-label { font-size:0.7rem; color:var(--text3); margin-top:5px; font-weight:500; letter-spacing:0.02em; }

/* Right column */
.home-right-col { display:flex; flex-direction:column; gap:14px; min-width:0; }
.info-card {
  border-radius:var(--radius-lg); padding:18px 20px;
  display:flex; flex-direction:column; gap:6px; flex:1;
  min-height:0;
}
.card-label { font-size:0.68rem; font-weight:800; letter-spacing:0.10em; text-transform:uppercase; color:var(--text3); }
.card-title { font-size:0.68rem; font-weight:800; letter-spacing:0.10em; text-transform:uppercase; color:var(--text3); }
.card-module-name { font-size:0.88rem; font-weight:600; color:var(--text); }
.card-desc { font-size:0.83rem; color:var(--text2); line-height:1.5; }
.rank-big-num {
  font-size:2.5rem; font-weight:900;
  background:var(--accent-g); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text; line-height:1;
}
.rank-sub { font-size:0.74rem; color:var(--text3); }
.progress-big-num {
  font-size:2.2rem; font-weight:900;
  background:var(--accent-g); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text; line-height:1;
}
.progress-big-lbl { font-size:0.74rem; color:var(--text3); }
.progress-total { font-size:0.7rem; color:var(--text3); margin-top:4px; }
.progress-label { font-size:0.7rem; color:var(--text3); }
.progress-nums { font-size:0.82rem; color:var(--text2); }
.progress-bar { height:6px; background:rgba(30,150,228,0.09); border-radius:6px; overflow:hidden; }
.progress-bar-lg { height:8px; }
.progress-fill { height:100%; background:var(--accent-g); border-radius:6px; transition:width 0.8s cubic-bezier(0.4,0,0.2,1); }

/* ─── TODAY ─── */
.today-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.week-day { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0; }
.week-day-name { font-size:0.68rem; color:var(--text3); font-weight:600; }
.week-day-bar { height:48px; display:flex; align-items:flex-end; }
.week-day-fill { width:22px; background:rgba(30,150,228,0.09); border-radius:4px; min-height:4px; transition:height 0.5s ease; }
.week-day-active .week-day-fill { background:var(--accent-g); }
.week-day-today .week-day-name { color:var(--accent2); font-weight:800; }
.week-day-num { font-size:0.68rem; color:var(--text3); }

/* Rec cards */
.rec-card {
  border-radius:var(--radius); padding:14px 16px;
  display:flex; align-items:center; gap:10px;
  font-size:0.83rem;
}

/* Route cards */
.route-card {
  border-radius:var(--radius-lg); padding:18px 20px;
  display:flex; gap:14px; align-items:flex-start;
  transition:var(--transition); cursor:pointer;
}
.route-card:hover { border-color:var(--border2); transform:translateY(-1px); }
.route-icon { font-size:1.6rem; }
.route-title { font-size:0.92rem; font-weight:700; margin-bottom:4px; }
.route-desc { font-size:0.78rem; color:var(--text3); }

/* Heatmap */
.heatmap { display:grid; grid-template-columns:repeat(10,1fr); gap:4px; padding:4px; }
.heatmap-cell {
  aspect-ratio:1; border-radius:3px;
  background:rgba(255,255,255,0.05);
  transition:var(--transition); cursor:default;
}
.heatmap-cell.level-1 { background:rgba(30,150,228,0.22); }
.heatmap-cell.level-2 { background:rgba(30,150,228,0.45); }
.heatmap-cell.level-3 { background:rgba(30,150,228,0.70); }
.heatmap-cell.level-4 { background:#1e96e4; box-shadow:0 0 8px rgba(30,150,228,0.6); }
.heatmap-legend { display:flex; align-items:center; gap:6px; margin-top:12px; font-size:0.7rem; color:var(--text3); }
.heat-cell { width:12px; height:12px; border-radius:2px; }

/* ─── MAP / MODULE LIST ─── */
.toolbar {
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:12px 16px; border-radius:var(--radius); margin-bottom:18px;
}
.toolbar select, .toolbar input {
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  border-radius:9px; color:var(--text); font-size:0.82rem;
  padding:7px 11px; outline:none; transition:var(--transition);
  font-family:inherit;
}
.toolbar select:focus, .toolbar input:focus { border-color:var(--accent); }
.toolbar select option { background:var(--bg3); }

.module-layout { display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }
.module-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.module-card {
  border-radius:var(--radius-lg); padding:18px;
  cursor:pointer; transition:var(--transition);
  position:relative; overflow:hidden;
  -webkit-tap-highlight-color: transparent;
}
.module-card::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,transparent 70%,rgba(30,150,228,0.05));
  pointer-events:none;
}
.module-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.module-card.active { border-color:rgba(30,150,228,0.4); background:rgba(30,150,228,0.07); }
.module-card.completed { border-color:rgba(16,185,129,0.28); }
.module-card.in-progress { border-color:rgba(245,158,11,0.70); background:rgba(245,158,11,0.04); }
.module-card-header { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.module-grade-badge {
  font-size:0.62rem; font-weight:800; padding:3px 8px; border-radius:6px;
  background:rgba(30,150,228,0.14); color:var(--accent2);
}
.module-block-badge { font-size:0.62rem; color:var(--text3); font-weight:500; }
.module-card-title { font-size:0.84rem; font-weight:700; color:var(--text); margin-bottom:10px; line-height:1.4; }
.module-progress-bar { height:4px; background:rgba(30,150,228,0.09); border-radius:4px; overflow:hidden; margin-bottom:6px; }
.module-progress-fill { height:100%; background:var(--accent-g); border-radius:4px; transition:width 0.6s ease; }
.module-meta { font-size:0.68rem; color:var(--text3); }
.module-open-btn { width:100%; margin-top:10px; justify-content:center; }

/* Detail card */
.detail-card { border-radius:var(--radius-xl); padding:24px; }
.sticky-detail { position:sticky; top:12px; }
.detail-meta { font-size:0.76rem; color:var(--text3); margin-bottom:14px; }
.detail-theory { font-size:0.83rem; color:var(--text2); line-height:1.75; margin:14px 0; }
.detail-close { margin-bottom:16px; }

/* ─── PRACTICE ─── */
.practice-grid { display:grid; grid-template-columns:1fr 290px; gap:20px; align-items:start; }
.practice-main { flex:1; }
.practice-header { margin-bottom:18px; padding-bottom:15px; border-bottom:1px solid var(--border); }
.practice-meta { font-size:0.76rem; color:var(--text3); margin-top:4px; }
.practice-sidebar { display:flex; flex-direction:column; gap:14px; }

/* Theory block */
.theory-section { margin-bottom:22px; }
/* overflow:visible (not hidden) — an ancestor with overflow:hidden clips any
   absolutely-positioned child that pokes above/beside its box, e.g. the
   .lg-tooltip on formula parts. Rounded corners are applied directly on the
   header (which is the only child with a visible background) instead. */
.theory-wrap { border-radius:var(--radius-lg); overflow:visible; }
/* Corner-radius fix (complaint #2): .theory-wrap's rounded corner is drawn
   on the OUTER edge of its 1px border, so the mathematically-correct radius
   for a concentric curve on the header sitting just inside that border is
   (--radius-lg - border-width), not the same --radius-lg value. Reusing the
   parent's full radius left the header's curve very slightly "wider" than
   the wrap's own curve, so a hairline sliver of the wrap's border/background
   poked out right at the top-left/top-right corner points — a visible
   sharp-edged notch when zoomed in, even though it reads as invisible at
   normal zoom. Subtracting 1px makes both curves concentric and removes it. */
.theory-header { border-top-left-radius:calc(var(--radius-lg) - 1px); border-top-right-radius:calc(var(--radius-lg) - 1px); }
/* Unified section header: icon-badge + title, CENTERED (matches the
   page-level .map-practice-header centering rule) — the toggle button is
   pulled to the right edge with position:absolute so the title group stays
   truly centered regardless of button width. Larger icon+title than before
   (point 4: "enlarge header title"). */
.theory-header {
  padding:18px 52px;
  background:rgba(30,150,228,0.1);
  border-bottom:1px solid var(--border);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  position:relative; gap: 10px; min-height:52px;
}
.theory-header:hover { background:rgba(30,150,228,0.14); }
.theory-header-title-group { display:flex; align-items:center; gap:12px; min-width:0; }
.theory-header-title {
  font-size:1.08rem; font-weight:900; color:var(--accent2);
  letter-spacing:.02em; text-transform:uppercase;
}
.theory-toggle { flex-shrink:0; position:absolute; right:14px; top:50%; transform:translateY(-50%); }
@media (max-width: 640px) {
  .theory-header { padding:16px 14px 16px 44px; }
  .theory-toggle { right:8px; }
}
.theory-body { padding:20px 22px; font-size:0.9rem; color:var(--text2); line-height:1.9; }
.theory-body p { margin-bottom:12px; }
.theory-body .example-box {
  background:rgba(30,150,228,0.07); border:1px solid rgba(30,150,228,0.18);
  border-radius:11px; padding:14px 16px; margin:14px 0;
}
.theory-body .example-label {
  font-size:0.68rem; font-weight:800; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--accent2); margin-bottom:6px;
}
.theory-body .formula-block {
  background:rgba(0,0,0,0.25); border-radius:9px; padding:11px 15px;
  font-family:monospace; font-size:0.9rem; margin:12px 0;
  text-align:center;
}
.theory-img { width:100%; max-height:200px; object-fit:contain; border-radius:10px; margin:12px 0; background:rgba(30,150,228,0.05); }
.theory-steps { counter-reset:step; padding:0; list-style:none; }
.theory-steps li {
  counter-increment:step; position:relative; padding:8px 14px 8px 46px;
  margin-bottom:6px;
}
.theory-steps li::before {
  content:counter(step); position:absolute; left:0; top:6px;
  width:30px; height:30px; border-radius:50%;
  background:var(--accent-g); display:flex; align-items:center; justify-content:center;
  font-size:0.72rem; font-weight:800; color:#fff;
  box-shadow:0 2px 10px rgba(30,150,228,0.45);
}
.source-link {
  display:inline-flex; align-items:center; gap:4px;
  font-size:0.72rem; color:var(--accent2); text-decoration:none;
  padding:4px 9px; border-radius:7px; border:1px solid rgba(30,150,228,0.2);
  margin:2px; transition:var(--transition);
}
.source-link:hover { background:rgba(30,150,228,0.1); }
.theory-sources { display:flex; flex-wrap:wrap; gap:4px; padding:10px 18px; border-top:1px solid var(--border); }

/* Явная граница между теорией и практикой — виден переход, а не слитный поток.
   Показывается только когда есть и теория, и задания (см. renderTaskList). */
/* Complaint #11: the "ПРАКТИКА" chip visually sits embedded ON TOP of the
   white practice-card edge below it — negative bottom margin pulls the
   whole divider row down so its centre line lands right on the card's top
   border, and z-index keeps the pill chip drawn above that card edge.
   practice-main gets matching extra top padding so task content never
   collides with the overlapping chip. */
/* Complaint #11: this row used to be a "line — chip — line" divider, but
   now the chip is meant to float alone (no flanking sticks) — the row is
   kept centred purely for layout, ::before/::after removed entirely. */
.theory-practice-divider {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 26px 0 -13px; position: relative; z-index: 3;
}
.theory-practice-divider-label {
  flex-shrink: 0; padding: 9px 22px; border-radius: 999px;
  background: var(--accent-g); color: #fff;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  /* Dropped the "0 0 0 4px var(--bg)" solid ring — in dark theme --bg reads
     as a near-black outline around the chip, which is exactly the "ugly
     black outline" being complained about. Pure glow only, no ring. */
  box-shadow: 0 6px 20px rgba(30,150,228,.45);
}
.practice-main { padding-top: 26px !important; }

/* Task list — unified card pattern, matching .lg-quiz-item (mini-practice):
   number inline with the prompt text on the same line ("1. log₂x"), review/
   status icons anchored to the TOP-RIGHT corner instead of a separate
   left-aligned header row. */
.task-list { display:flex; flex-direction:column; gap:14px; }
.task-item {
  border-radius:var(--radius-lg); padding:20px 22px;
  transition:var(--transition); position:relative;
}
.task-item.glass {
  background: var(--card);
  border: none;
  box-shadow: 0 2px 14px rgba(0,0,0,.07);
}
.task-item.task-solved.glass {
  background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(16,185,129,.02));
  box-shadow: inset 0 0 0 2px rgba(16,185,129,.35), 0 2px 14px rgba(0,0,0,.07);
}
.task-item.task-mistake.glass {
  box-shadow: inset 0 0 0 2px rgba(239,68,68,.28), 0 2px 14px rgba(0,0,0,.07);
}
/* Top-right corner cluster: status icon + review/hint button */
.task-corner {
  position:absolute; top:16px; right:18px;
  display:flex; align-items:center; gap:8px; z-index:2;
}
.task-num { font-size:1.08rem; font-weight:800; color:var(--accent2); }
.task-diff {
  padding:3px 9px; border-radius:7px; font-size:0.65rem; font-weight:800;
  letter-spacing:0.07em; text-transform:uppercase;
}
.diff-база { background:rgba(16,185,129,0.14); color:var(--green-l); }
.diff-стандарт { background:rgba(59,130,246,0.14); color:var(--blue-l); }
.diff-повышенный { background:rgba(249,115,22,0.14); color:var(--orange); }
.diff-егэ, .diff-егэ-профиль { background:rgba(236,72,153,0.14); color:var(--pink); }
.diff-огэ { background:rgba(20,184,166,0.14); color:var(--teal-l); }
.task-skill { font-size:0.68rem; color:var(--text3); }
.task-status-icon { font-size:1rem; font-weight:800; }
.task-status-icon.solved { color:var(--green-l); }
.task-status-icon.mistake { color:var(--red-l); }
.task-prompt { font-size:1.08rem; color:var(--text); line-height:1.75; margin-bottom:16px; padding-right:118px; }
.task-prompt .prompt-formula {
  background:rgba(0,0,0,0.2); border-radius:9px; padding:11px 15px;
  margin:10px 0; font-size:1.12rem; text-align:center;
}

/* ── Choice buttons for A/B/C/D tasks ─────────────────────────────────── */
.task-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 8px 0 12px;
}
.task-choice-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border2);
  border-radius: 12px;
  color: var(--text);
  /* round-8: шрифт вариантов = шрифт текста задания (.task-prompt) */
  font-size: 1.08rem;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s, background .18s, transform .14s, box-shadow .18s;
}
.task-choice-btn::before {
  /* sweep highlight on hover */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(30,150,228,.10) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .45s ease;
  pointer-events: none;
}
.task-choice-btn:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(30,150,228,.14); }
.task-choice-btn:hover::before { transform: translateX(120%); }
.task-choice-btn:active { transform: translateY(0) scale(.985); }
.task-choice-btn.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(30,150,228,.14), rgba(30,150,228,.05));
  box-shadow: 0 0 0 2px rgba(30,150,228,.25), 0 6px 18px rgba(30,150,228,.18);
}
.task-choice-btn.correct-choice {
  border-color: #22c55e;
  background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(34,197,94,.04));
  animation: choiceCorrectPop .45s cubic-bezier(.34,1.56,.64,1);
}
.task-choice-btn.wrong-choice {
  border-color: #ef4444;
  background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(239,68,68,.03));
  animation: choiceWrongShake .4s ease;
}
@keyframes choiceCorrectPop { 0% { transform: scale(1); } 45% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes choiceWrongShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 60% { transform: translateX(6px); } }
.task-choice-label {
  min-width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #35B1FA, #1379BD); color: #fff;
  border-radius: 8px; font-weight: 800; font-size: 0.8rem; flex-shrink: 0;
  box-shadow: 0 2px 7px rgba(19,121,189,.35), inset 0 1px 2px rgba(255,255,255,.35);
  transition: transform .18s, background .18s;
}
.task-choice-btn:hover .task-choice-label { transform: scale(1.08) rotate(-3deg); }
.task-choice-btn.active .task-choice-label { transform: scale(1.1); }
.task-choice-btn.correct-choice .task-choice-label { background: linear-gradient(145deg, #4ade80, #16a34a); }
.task-choice-btn.wrong-choice .task-choice-label { background: linear-gradient(145deg, #f87171, #dc2626); }
.task-choice-btn.correct-choice::after {
  content: "✓"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-weight: 900; color: #22c55e; font-size: 1rem;
}
.task-choice-btn.wrong-choice::after {
  content: "✗"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-weight: 900; color: #ef4444; font-size: 1rem;
}
.task-choice-text { line-height: 1.45; padding-right: 18px; }
/* Round-9 RULE: choice-task action buttons = regular-task action buttons.
   Same row (.task-input-wrap), same classes, same sizes, same left alignment.
   No dividers, no stretched widths, no side placement — identical layout. */
.task-choice-grid--block { margin-bottom: 12px; }
.task-choice-actions { margin-top: 2px; }

/* Input */
.task-input-wrap { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.task-input {
  flex:1; min-width:130px; padding:11px 15px;
  background:var(--surface); border:1.5px solid var(--border2);
  border-radius:11px; color:var(--text); font-size:0.92rem; outline:none;
  transition:var(--transition); font-family:inherit; min-height:46px;
}
.task-input:focus { border-color:var(--accent); background:rgba(30,150,228,0.07); }
.task-input.input-error { border-color:var(--red); animation:shake 0.35s ease; }
@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  60%{transform:translateX(6px)}
  80%{transform:translateX(-3px)}
}

/* Complaint #12/#11: symbol picker for inequality/interval/set answers — a
   row of small tappable chips (>,≥,≤,≠,∞,∈,∪,brackets…) that insert at the
   cursor. .symbol-toolbar (per-task, still used by Exam Mode's own modal)
   and .shared-symbol-panel (complaint #11 — ONE panel for the whole trainer
   view, toggled via #symbolToggleBtn) share the same button styling. */
.symbol-toolbar, .shared-symbol-panel {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.shared-symbol-panel {
  padding: 12px; margin: 0 0 10px; border-radius: 12px;
  background: var(--surface); border: 1.5px solid var(--border2);
  animation: symbolPanelIn .16s ease;
}
@keyframes symbolPanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.symbol-btn {
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 1.5px solid var(--border2); border-radius: 8px;
  background: var(--surface); color: var(--text2);
  font-size: 0.95rem; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: var(--transition);
}
.symbol-btn:hover { background: var(--surface2); border-color: var(--border3); color: var(--text); transform: translateY(-1px); }
.symbol-btn:active { transform: translateY(0) scale(.94); }
.shared-symbol-panel .symbol-btn { background: var(--card); }

/* Row holding "Проверить всё" (Phase B: used to also hold the shared
   symbol-panel toggle button — that's now per-task, see .task-symbols-btn
   in .task-corner — so this row is just the check-all action now). */
.task-list-actions-row {
  display: flex; gap: 10px; margin-top: 6px;
}
.task-list-actions-row .check-all-btn { margin-top: 0; flex: 1; }

/* Check / hint buttons — large enough for touch, unified with .lg-quiz-check-btn */
.check-btn, .hint-btn {
  min-height:46px; min-width:100px;
  font-size:0.85rem; font-weight:700;
}
.check-btn.btn-accent { box-shadow: 0 3px 14px rgba(30,150,228,.32); }
/* Round-8 click-reliability: check/hint buttons must NOT move under the
   pointer on hover — a translateY at the moment of pointerdown could shift
   the hit-target and swallow the click. Feedback via shadow/brightness only. */
.check-btn:hover, .hint-btn:hover { transform: none !important; }
.check-btn.btn-accent:hover { box-shadow: 0 6px 22px rgba(30,150,228,.5); filter: brightness(1.06); }
.check-btn:active, .hint-btn:active { transform: none !important; filter: brightness(.95); }

/* Result — same feedback language as .lg-quiz-feedback (colored text + soft bg, no hard border) */
.task-result {
  margin-top:12px; padding:13px 16px; border-radius:11px;
  font-size:0.84rem; line-height:1.6;
}
.result-correct { background:rgba(16,185,129,0.09); color:var(--green-l); }
.result-wrong { background:rgba(239,68,68,0.07); color:var(--red-l); }
.result-message { font-weight:700; }
.result-solution { margin-top:8px; color:var(--text2); font-weight:400; }
/* Complaint #13: after 2 wrong attempts we reveal the answer — still red
   (this was NOT a correct submission) but with a slightly stronger tint
   and a small badge so it reads as "here's the answer", not "try again". */
.task-result.result-revealed { background:rgba(239,68,68,0.1); box-shadow: inset 0 0 0 1.5px rgba(239,68,68,.22); }
.task-result.result-revealed .result-message::before {
  content: "🔓 "; 
}
.task-result.result-revealed .result-solution { color: var(--red-l); opacity: .85; }

/* Complaint #17: "Проверить всё" — sits at the end of the task list,
   full-width, visually distinct as a summary action (not just another
   per-task button). Hidden via .hidden once every task is solved. */
.check-all-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin-top: 6px; padding: 15px 20px;
  font-size: 0.98rem; font-weight: 800; letter-spacing: .01em;
  border-radius: 13px;
  box-shadow: 0 4px 18px rgba(30,150,228,.28);
}
.check-all-btn:hover { box-shadow: 0 8px 26px rgba(30,150,228,.38); transform: translateY(-1px); }
.check-all-btn svg { flex-shrink: 0; }

/* Hints */
.task-hints { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
/* Phase B fix: the pale amber (#fcd34d text on a near-invisible 8% tint)
   was hard to read in the (default) light theme — text-to-background
   contrast was only ~1.35:1. Deepened the text to amber-800 and the tint
   to 14% for AA-safe readability without going full alert-orange/bright.
   Dark theme already read fine with --gold-l (≈9-10:1 on the dark tint),
   so it's left untouched there. */
.hint-text {
  background:rgba(245,158,11,0.14); border:1px solid rgba(245,158,11,0.32);
  border-radius:9px; padding:10px 14px; font-size:0.85rem; line-height:1.55;
  color:#92400e;
}
[data-theme="dark"] .hint-text { color:var(--gold-l); }

/* Solution wrap — Phase B fix: was undersized (0.84rem) and low-contrast
   (--text2 on a barely-tinted background), reading as an afterthought next
   to the 1.08rem task prompt above it. Bumped size/weight and added a
   visible green ring (matching .task-solved's own ring) so a solved task's
   answer reads with the same visual weight as the rest of the card. */
.task-solution-wrap {
  margin-top:12px; padding:13px 16px;
  background:linear-gradient(135deg, rgba(16,185,129,0.11), rgba(16,185,129,0.04));
  border-radius:12px; box-shadow: inset 0 0 0 1.5px rgba(16,185,129,.24);
  font-size:0.98rem; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
}
.solution-label { color:var(--green-l); font-weight:800; font-size:0.98rem; }
.solution-val { color:var(--text); font-weight:700; font-size:1rem; }
.solution-val .katex { font-size:1.05em; }

/* Error bank */
.error-row { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:11px; }
.error-text { font-size:0.80rem; color:var(--text2); flex:1; }

/* Mastery */
.mastery-title { font-size:0.83rem; font-weight:600; margin-bottom:8px; color:var(--text); }
.mastery-bar { height:8px; background:rgba(30,150,228,0.09); border-radius:8px; overflow:hidden; }
.mastery-fill { height:100%; border-radius:8px; transition:width 0.8s cubic-bezier(0.4,0,0.2,1); }
.mastery-low { background:linear-gradient(90deg,var(--red),var(--orange)); }
.mastery-mid { background:linear-gradient(90deg,var(--orange),var(--gold)); }
.mastery-complete { background:linear-gradient(90deg,var(--green),var(--teal)); }
.mastery-badge { margin-top:10px; font-size:0.83rem; color:var(--green-l); font-weight:700; }

/* Review queue */
.review-row { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:11px; }

/* ─── VIDEOS ─── */
.video-filters { margin-bottom:18px; }
.video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.video-card {
  border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
  transition:var(--transition);
  display:flex; flex-direction:column;
  background:var(--card);
  border:2px solid var(--border2);
}
.video-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 28px rgba(30,150,228,.18); }
.video-thumb-wrap { position:relative; flex-shrink:0; }
.video-thumb {
  width:100%; aspect-ratio:16/9; background:var(--bg3);
  object-fit:cover; display:block;
}
.video-play-icon {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; background:rgba(30,150,228,0.85);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:#fff; box-shadow:0 4px 22px rgba(30,150,228,0.55);
  transition:var(--transition);
}
.video-thumb { position:relative; }
.video-card:hover .video-play-icon { transform:translate(-50%,-50%) scale(1.12); }
.video-info { padding:14px 16px; flex:1; display:flex; flex-direction:column; gap:5px; }
.video-title { font-size:0.86rem; font-weight:700; margin-bottom:4px; color:var(--text); }
.video-desc { font-size:0.75rem; color:var(--text2); line-height:1.5; flex:1; }
.video-meta { font-size:0.72rem; color:var(--text3); margin-top:4px; }
.video-focus { display:flex; gap:5px; flex-wrap:wrap; margin-top:7px; }
.video-focus-tag {
  padding:2px 8px; border-radius:20px; font-size:0.65rem; font-weight:600;
  background:rgba(59,130,246,0.12); border:1px solid rgba(59,130,246,0.22);
  color:var(--blue-l);
}

/* ─── MODULE EMOJI ─── */
.module-emoji { font-size:1.1rem; }

/* ─── TOAST ─── */
.toast-container {
  position:fixed; bottom:24px; right:24px; z-index:9000;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  padding:13px 18px; border-radius:13px;
  font-size:0.84rem; font-weight:600; max-width:360px;
  pointer-events:auto; transform:translateX(130%); opacity:0;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow:var(--shadow);
}
.toast.toast-visible { transform:translateX(0); opacity:1; }
.toast-success { background:#0d2d1f; border:1px solid rgba(16,185,129,0.35); color:var(--green-l); }
.toast-error { background:#2d0f0f; border:1px solid rgba(239,68,68,0.35); color:var(--red-l); }
.toast-info { background:#dde6f4; border:1px solid rgba(30,150,228,0.3); color:var(--accent2); }

/* ─── SVG ICON SYSTEM ─── */
.mp-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--icon-size,1em); height:var(--icon-size,1em);
  vertical-align:middle; flex-shrink:0;
}
.mp-icon svg { width:100%; height:100%; display:block; }
.mp-icon-svg { display:inline-flex; align-items:center; justify-content:center; }
.nav-icon.mp-icon-svg, .tab-icon.mp-icon-svg { width:22px; height:22px; }
.nav-icon.mp-icon-svg svg, .tab-icon.mp-icon-svg svg { width:22px; height:22px; }

/* ─── EMPTY STATE ─── */
.empty-state { color:var(--text3); font-size:0.83rem; padding:20px 0; text-align:center; }

/* ─── LEADERBOARD ─── */
.lb-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.lb-tab { padding:7px 16px; border-radius:20px; font-size:0.78rem; font-weight:700; cursor:pointer; border:1px solid var(--border2); color:var(--text2); background:none; transition:var(--transition); font-family:inherit; }
.lb-tab.active, .lb-tab-btn.active { background:var(--accent-g); border-color:transparent; color:#fff; }
.lb-podium { display:flex; gap:12px; justify-content:center; padding:22px 16px; flex-wrap:wrap; }
.podium-card { border-radius:var(--radius-lg); padding:16px 18px; text-align:center; min-width:120px; }
.podium-rank { font-size:1.6rem; line-height:1; margin-bottom:6px; }
.podium-name { font-size:0.82rem; font-weight:700; color:var(--text); }
.podium-xp { font-size:0.72rem; color:var(--text3); margin-top:4px; }
.lb-table-head, .lb-row {
  display:grid; grid-template-columns:44px 1fr 80px 75px 70px;
  gap:8px; align-items:center; padding:12px 16px;
}
.lb-table-head { font-size:0.7rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--text3); border-bottom:1px solid var(--border); }
.lb-row { border-radius:11px; transition:var(--transition); cursor:pointer; }
.lb-row:hover { background:var(--surface2); }
.lb-row.me { background:rgba(30,150,228,0.1); }
.lb-col-rank { font-weight:800; font-size:0.9rem; }
.lb-col-name { font-size:0.83rem; font-weight:600; }
.lb-col-xp { font-size:0.82rem; font-weight:700; color:var(--accent2); text-align:right; }
.lb-col-solved { font-size:0.78rem; color:var(--text2); text-align:right; }
.lb-col-streak { font-size:0.78rem; color:var(--gold-l); text-align:right; }
.lb-col-league { font-size:0.78rem; color:var(--text3); text-align:right; }

/* ─── STATS ─── */
.stats-blocks {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:12px; margin-bottom:20px;
}
.stats-block { border-radius:var(--radius-lg); padding:16px 18px; }
.stat-mini-val { font-size:1.8rem; font-weight:900; background:var(--accent-g); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.stat-mini-lbl { font-size:0.7rem; color:var(--text3); margin-top:4px; font-weight:500; }
.skill-grid { display:flex; flex-direction:column; gap:8px; }
.skill-row { display:grid; grid-template-columns:120px 1fr 50px 80px; gap:10px; align-items:center; }
.skill-name { font-size:0.8rem; color:var(--text2); }
.skill-detail { font-size:0.72rem; color:var(--text3); text-align:right; }

/* Cabinet */
.cabinet-stats-6 {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:12px; margin-bottom:20px;
}
.exam-forecast { border-radius:var(--radius-lg); padding:20px; }
.forecast-score { font-size:3rem; font-weight:900; background:var(--accent-g); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.forecast-label { font-size:0.76rem; color:var(--text3); }
.forecast-bars { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.forecast-bar-row { display:grid; grid-template-columns:70px 1fr 40px; gap:8px; align-items:center; font-size:0.75rem; }
.forecast-bar-label { color:var(--text3); }
.forecast-bar-val { color:var(--text2); text-align:right; }

/* Grade quick nav */
.grade-quick-nav { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:22px; }
.grade-quick-btn {
  border-radius:var(--radius); padding:16px 8px; text-align:center;
  cursor:pointer; transition:var(--transition);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  -webkit-tap-highlight-color: transparent; min-height:72px;
}
.grade-quick-btn:hover { border-color:var(--border2); transform:translateY(-1px); }
.grade-quick-btn.active { border-color:rgba(30,150,228,0.4); background:rgba(30,150,228,0.08); }
.grade-quick-num { font-size:1.6rem; font-weight:900; background:var(--accent-g); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.grade-quick-lbl { font-size:0.62rem; color:var(--text3); font-weight:600; }

/* Grade picker */
.grade-picker-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.grade-option {
  padding:14px 8px; border-radius:var(--radius); text-align:center;
  cursor:pointer; transition:var(--transition); border:1.5px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  min-height:70px; -webkit-tap-highlight-color: transparent;
}
.grade-option:hover { border-color:var(--border2); }
.grade-option.selected { border-color:var(--accent); background:rgba(30,150,228,0.1); }
.grade-opt-num { font-size:1.4rem; font-weight:900; background:var(--accent-g); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grade-opt-lbl { font-size:0.6rem; color:var(--text3); }

/* Wizard */
.wizard-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:500; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); padding:16px; }
.wizard-card { max-width:480px; width:100%; border-radius:var(--radius-xl); overflow:hidden; }
.wizard-inner { padding:32px 36px; }
.wizard-title { font-size:1.6rem; font-weight:900; letter-spacing:-0.02em; margin-bottom:8px; }
.wizard-desc { font-size:0.9rem; color:var(--text2); line-height:1.65; margin-bottom:24px; }
.wizard-step { display:flex; flex-direction:column; gap:14px; }
.wizard-field { display:flex; flex-direction:column; gap:6px; }
.wizard-label { font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text3); }
.wizard-input, .wizard-select {
  padding:12px 15px; background:rgba(30,150,228,0.09);
  border:1.5px solid var(--border2); border-radius:11px;
  color:var(--text); font-size:0.9rem; outline:none;
  transition:var(--transition); font-family:inherit; width:100%;
  min-height:48px;
}
.wizard-input:focus, .wizard-select:focus { border-color:var(--accent); background:rgba(30,150,228,0.08); }
.wizard-select option { background:var(--bg3); }
.wizard-actions { display:flex; gap:12px; margin-top:20px; justify-content:flex-end; }
.wizard-progress { display:flex; gap:6px; margin-bottom:20px; }
.wizard-dot { height:4px; border-radius:4px; background:rgba(255,255,255,0.12); flex:1; transition:background 0.3s; }
.wizard-dot.active { background:var(--accent-g); }

/* Two-column grid */
.two-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Rule (universal, math typography): KaTeX-rendered formulas are never
   upper-cased. Any ancestor that uses text-transform:uppercase as a LABEL
   style (section titles, category labels, badges) must not visually
   capitalize math letters (lg, ln, x, y, a, b...) inside a nested $formula$ —
   math notation is not decorative text. This resets the inherited transform
   on the KaTeX root itself, regardless of which uppercase ancestor it sits in. */
.katex, .katex * { text-transform: none !important; }

/* ─── INFOGRAPHIC CSS SYSTEM ─── */

/* Formula card */
/* Rule: base alignment for formula/definition-style cards is CENTRED (matches
   .lg-formula-interactive) — text-align:center by default. .inf-label keeps
   uppercase because it is a category LABEL ("ОСОБЫЕ ОБОЗНАЧЕНИЯ"), never
   apply uppercase to .inf-main/.inf-sub — that is live math content
   (lg, ln, x, y, a, b...) and must render exactly as authored, lowercase. */
.inf-formula-card {
  background: linear-gradient(135deg, rgba(30,150,228,0.1) 0%, rgba(30,150,228,0.05) 100%);
  box-shadow: 0 3px 18px rgba(30,150,228,.1);
  border-radius:var(--radius-lg); padding:20px 22px; margin:14px 0;
  position:relative; overflow:hidden;
  text-align: center;
}
.inf-label { font-size:0.68rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent2); margin-bottom:10px; }
.inf-main { font-size:1.2rem; font-weight:800; color:var(--text); letter-spacing:0.01em; margin-bottom:6px; line-height:1.3; text-transform:none; }
.inf-sub { font-size:0.8rem; color:var(--text2); line-height:1.55; text-transform:none; }

/* Rules grid */
.inf-rules {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
  gap:10px; margin:14px 0;
}
.inf-rule-item, .inf-rule {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px;
  display:flex; align-items:flex-start; gap:12px;
  transition:var(--transition);
}
.inf-rule-item:hover, .inf-rule:hover { border-color:var(--border2); }
.inf-rule-icon {
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.78rem; font-weight:900; color:#fff;
  background: var(--accent-g);
}
.inf-rule-icon.purple { background:linear-gradient(135deg,#1e96e4,#35B1FA); }
.inf-rule-icon.blue   { background:linear-gradient(135deg,#3b82f6,#06b6d4); }
.inf-rule-icon.green  { background:linear-gradient(135deg,#10b981,#14b8a6); }
.inf-rule-icon.gold   { background:linear-gradient(135deg,#f59e0b,#f97316); }
.inf-rule-icon.teal   { background:linear-gradient(135deg,#14b8a6,#0ea5e9); }
.inf-rule-icon.red    { background:linear-gradient(135deg,#ef4444,#f97316); }
.inf-rule-title { font-size:0.8rem; font-weight:700; color:var(--text); margin-bottom:3px; }
.inf-rule-formula { font-size:0.78rem; font-weight:700; color:var(--accent2); font-family:monospace; margin-bottom:3px; }
.inf-rule-body, .inf-rule-text { font-size:0.76rem; color:var(--text2); line-height:1.5; }

/* Steps flow */
.inf-steps {
  display:flex; flex-direction:column;
  border-radius:var(--radius-lg); border:1px solid var(--border);
  overflow:hidden; margin:14px 0;
}
.inf-step {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 18px; transition:var(--transition);
  border-bottom:1px solid var(--border);
}
.inf-step:last-child { border-bottom:none; }
.inf-step:hover { background:var(--surface); }
.inf-step-num {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background: var(--accent-g);
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; font-weight:900; color:#fff;
  box-shadow: 0 2px 10px rgba(30,150,228,0.4);
  margin-top:1px;
}
.inf-step-content { flex:1; }
.inf-step-title { font-size:1.02rem; font-weight:700; color:var(--text); margin-bottom:3px; }
.inf-step-desc { font-size:0.95rem; color:var(--text2); line-height:1.6; }
.inf-step-code {
  font-family:monospace; font-size:0.78rem; color:var(--accent2);
  background:rgba(30,150,228,0.08); border-radius:6px;
  padding:2px 8px; margin-top:5px; display:inline-block;
}

/* Comparison table */
.inf-compare {
  display:grid; border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; margin:14px 0;
}
.inf-compare-head, .inf-compare-head-cell {
  background:rgba(30,150,228,0.1); padding:10px 14px;
  font-size:0.72rem; font-weight:800; color:var(--accent2);
  letter-spacing:0.05em; border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
}
.inf-compare-head:last-child, .inf-compare-head-cell:last-child { border-right:none; }
.inf-compare-cell {
  padding:10px 14px; font-size:0.8rem; color:var(--text2);
  border-bottom:1px solid var(--border); border-right:1px solid var(--border);
  line-height:1.5;
}
.inf-compare-cell:last-child { border-right:none; }

/* Cards with big values */
.inf-cards {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:10px; margin:14px 0;
}
.inf-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); padding:18px 16px; text-align:center;
  transition:var(--transition); cursor:default;
}
.inf-card:hover { border-color:var(--border2); transform:translateY(-2px); }
.inf-card-title { font-size:0.78rem; font-weight:700; color:var(--text); margin-bottom:8px; }
.inf-card-value {
  font-size:1.55rem; font-weight:900;
  background:var(--accent-g); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:5px; line-height:1;
}
.inf-card-value.purple-g { background:linear-gradient(135deg,#1e96e4,#35B1FA); -webkit-background-clip:text; background-clip:text; }
.inf-card-value.green-g  { background:linear-gradient(135deg,#10b981,#14b8a6); -webkit-background-clip:text; background-clip:text; }
.inf-card-value.gold-g   { background:linear-gradient(135deg,#f59e0b,#f97316); -webkit-background-clip:text; background-clip:text; }
.inf-card-value.blue-g   { background:linear-gradient(135deg,#3b82f6,#14b8a6); -webkit-background-clip:text; background-clip:text; }
.inf-card-value.red-g    { background:linear-gradient(135deg,#ef4444,#f97316); -webkit-background-clip:text; background-clip:text; }
.inf-card-label, .inf-card-desc { font-size:0.71rem; color:var(--text3); line-height:1.45; }

/* Section title with lines */
.inf-section-title {
  display:flex; align-items:center; gap:12px; margin:20px 0 12px;
}
.inf-section-title::before, .inf-section-title::after {
  content:""; flex:1; height:1px; background:var(--border);
}
/* Support both direct text and span child */
.inf-section-title,
.inf-section-title span {
  font-size:0.68rem; font-weight:800; color:var(--text3);
  letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap;
}

/* Badge row */
.inf-badge-row { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.inf-badge {
  padding:5px 13px; border-radius:20px; font-size:0.72rem; font-weight:700;
  border:1px solid; white-space:nowrap;
}
.inf-badge.base     { background:rgba(16,185,129,0.12);  border-color:rgba(16,185,129,0.3);  color:var(--green-l); }
.inf-badge.standard { background:rgba(59,130,246,0.12);  border-color:rgba(59,130,246,0.3);  color:var(--blue-l); }
.inf-badge.advanced { background:rgba(245,158,11,0.12);  border-color:rgba(245,158,11,0.3);  color:var(--gold-l); }
.inf-badge.oge      { background:rgba(239,68,68,0.12);   border-color:rgba(239,68,68,0.3);   color:var(--red-l); }
.inf-badge.ege      { background:rgba(30,150,228,0.14);  border-color:rgba(30,150,228,0.3);  color:var(--accent2); }

/* Note boxes */
.inf-note {
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 16px; border-radius:var(--radius); margin:12px 0;
  justify-content:center; text-align:center;
}
.inf-note.warn  { background:none; }
.inf-note.info  { background:none; }
.inf-note.error { background:none; }
.inf-note.tip   { background:none; }
.inf-note-icon  { font-size:1.1rem; flex-shrink:0; margin-top:2px; }
.inf-note-body  { flex:1; }
.inf-note-title { font-size:0.92rem; font-weight:700; margin-bottom:3px; }
.inf-note.warn  .inf-note-title { color:var(--gold-l); }
.inf-note.info  .inf-note-title { color:var(--blue-l); }
.inf-note.error .inf-note-title { color:var(--red-l); }
.inf-note.tip   .inf-note-title { color:var(--green-l); }
.inf-note-text  { font-size:0.94rem; color:var(--text2); line-height:1.65; }

/* Theory hero */
.theory-hero {
  border-radius:var(--radius-lg); padding:22px 24px;
  display:flex; align-items:center; gap:18px; margin-bottom:18px;
  border:1px solid var(--border2);
}
.theory-hero-icon {
  font-size:2.2rem; line-height:1; flex-shrink:0;
  width:58px; height:58px; display:flex; align-items:center; justify-content:center;
  background:rgba(30,150,228,0.12); border-radius:var(--radius);
  border:1px solid rgba(30,150,228,0.2);
}
.theory-hero-title { font-size:1.15rem; font-weight:800; color:var(--text); margin-bottom:4px; }
.theory-hero-sub { font-size:0.82rem; color:var(--text2); }

/* Scale visualization */
.inf-scale { display:flex; gap:4px; margin:14px 0; align-items:flex-end; }
.inf-scale-item { display:flex; flex-direction:column; align-items:center; gap:4px; }
.inf-scale-dot { width:10px; height:10px; border-radius:50%; background:var(--bg3); border:2px solid currentColor; margin-bottom:24px; }
.inf-scale-label { font-size:0.68rem; font-weight:700; }

/* Column layouts */
.inf-cols-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.inf-cols-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.inf-cols-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

/* ─── MOBILE TABBAR — REDESIGNED ─── */
/* ══════════════════════════════════════════
   MOBILE APP SHELL — BOTTOM TABBAR
══════════════════════════════════════════ */

/* --- Tabbar container --- */
.mobile-tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  /* Solid + blur for iOS/Android glass effect */
  background: rgba(10,13,28,0.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(30,150,228,0.09);
  /* Safe area inset for notch phones */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -1px 0 rgba(30,150,228,0.05), 0 -16px 40px rgba(30,100,180,0.09);
  /* GPU-accelerate */
  will-change: transform;
  transform: translateZ(0);
}
.mobile-tabbar-inner {
  display: flex;
  align-items: stretch;
  height: 58px;
  padding: 0 4px;
  position: relative;
}

/* --- Tab pill indicator (slides behind active tab) --- */
.tab-pill-indicator {
  position: absolute;
  top: 8px;
  height: 38px;
  border-radius: 14px;
  background: rgba(30,150,228,0.18);
  border: 1px solid rgba(30,150,228,0.25);
  transition: left 0.28s cubic-bezier(0.34,1.56,0.64,1), width 0.28s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
  z-index: 0;
  will-change: left, width;
}

/* --- Tab buttons --- */
.tab-btn, .tab-link {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; flex: 1;
  /* iOS 44pt minimum touch target */
  min-height: 58px;
  padding: 6px 2px;
  color: rgba(148,163,184,0.75);
  font-size: 0.6rem; font-weight: 700;
  cursor: pointer; border: none; background: transparent;
  text-decoration: none;
  border-radius: 14px;
  letter-spacing: 0.02em;
  /* No tap flash */
  -webkit-tap-highlight-color: transparent;
  outline: none;
  touch-action: manipulation;
  position: relative;
  z-index: 1;
  /* Smooth color transition */
  transition: color 0.2s ease, transform 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

/* Active state */
.tab-btn.active, .tab-link.active {
  color: #35B1FA;
}
.tab-btn.active .tab-icon-wrap { transform: translateY(-1px); }

/* Press feedback */
.tab-btn:active, .tab-link:active {
  transform: scale(0.93);
  color: var(--accent2);
}

/* Icon wrapper */
.tab-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
/* Badge on tab icon */
.tab-badge {
  position: absolute;
  top: -4px; right: -5px;
  background: #ef4444;
  color: #fff;
  font-size: 0.55rem; font-weight: 900;
  border-radius: 8px; padding: 1px 4px;
  min-width: 14px; text-align: center;
  line-height: 1.3;
  border: 1.5px solid rgba(10,13,28,0.97);
}
.tab-badge:empty, .tab-badge[data-count="0"] { display: none; }

.tab-icon {
  font-size: 1.25rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
}
.tab-icon svg { width: 22px; height: 22px; display: block; stroke: currentColor; }
.tab-label { font-size: 0.59rem; line-height: 1; font-weight: 700; }

/* Active icon scale bounce */
.tab-btn.active .tab-icon-wrap { transform: translateY(-2px) scale(1.1); }

/* Light theme */
[data-theme="light"] .mobile-tabbar {
  background: rgba(248,250,255,0.97);
  border-top-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .tab-btn, [data-theme="light"] .tab-link { color: #94a3b8; }
[data-theme="light"] .tab-btn.active, [data-theme="light"] .tab-link.active { color: #1e96e4; }
[data-theme="light"] .tab-pill-indicator { background: rgba(30,150,228,0.12); }

/* ══════════════════════════════════════════
   RESPONSIVE — DESKTOP ADJUSTMENTS
══════════════════════════════════════════ */
@media (max-width:1280px) {
  .home-hero-row { grid-template-columns:1fr 270px; }
  .module-layout { grid-template-columns:1fr; }
  .sticky-detail { position:static; }
}

/* ══════════════════════════════════════════
   TABLET (≤1020px) — show tabbar, hide sidebar
══════════════════════════════════════════ */
@media (max-width:1020px) {
  .sidebar { display:none; }
  .home-hero-row { grid-template-columns:1fr; }
  .home-right-col { flex-direction:row; }
  .practice-grid { grid-template-columns:1fr; }
  .today-grid { grid-template-columns:1fr; }
  .two-grid { grid-template-columns:1fr; }
  .lb-table-head, .lb-row { grid-template-columns:40px 1fr 80px 70px; }
  .lb-col-solved, .lb-col-league { display:none; }
  .lb-podium { gap:10px; }
  .mobile-tabbar { display:flex; }
  /* Bottom padding to clear tabbar + safe area */
  .page-section { padding:18px 18px calc(58px + env(safe-area-inset-bottom,0px) + 16px); }
  /* Topbar: fixed position on mobile */
  .topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 150;
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* Content needs top offset for fixed topbar */
  .content { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
  /* Topbar mobile elements */
  .topbar-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .topbar-section-title { display: block !important; }
  .topbar-logo-sm { display: block !important; }
  .hamburger-btn { display: flex; }
  .mob-search-btn { display: flex; }
  /* Hide search bar by default on mobile, shown via .search-active */
  .search-wrap { display: none; }
  .search-wrap.search-active { display: flex; flex: 1; }
  /* Hide topbar nav links on mobile — hamburger shows dashMobileNav instead */
  .topbar-nav { display: none; }
  /* Show dash-logo-text on tablet */
  .dash-logo-text { display: none; }
  /* Topbar position for dashboard (no sidebar) */
  .topbar { position: sticky; }
}

/* ══════════════════════════════════════════
   PHABLET (≤640px) — 2-col layouts → 1-col
══════════════════════════════════════════ */
@media (max-width:640px) {
  .grade-picker-grid { grid-template-columns:repeat(3,1fr); }
  .grade-quick-nav { grid-template-columns:repeat(3,1fr); }
  .hero-stats-row { grid-template-columns:repeat(2,1fr); }
  .hero-stat:nth-child(3) { border-left:none; border-top:1px solid var(--border); }
  .hero-stat:nth-child(4) { border-top:1px solid var(--border); }
  .home-right-col { flex-direction:column; }
  .stats-blocks { grid-template-columns:repeat(2,1fr) !important; }
  .cabinet-stats-6 { grid-template-columns:repeat(2,1fr); }
  .hero-main { padding:24px 22px; }
  .video-grid { grid-template-columns:1fr 1fr; }
  .wizard-card { max-width:100%; }
  .wizard-inner { padding:22px; }
  .wizard-title { font-size:1.45rem; }
  .lb-podium { flex-direction:column; align-items:center; }
  .skill-row { grid-template-columns:100px 1fr 40px; }
  .skill-detail { display:none; }
  .grade-quick-btn { padding:14px 8px; }
  .grade-quick-num { font-size:1.55rem; }
  .inf-cols-3 { grid-template-columns:1fr 1fr; }
  .inf-cols-4 { grid-template-columns:1fr 1fr; }
}

/* ══════════════════════════════════════════
   PHONE (≤480px) — App-like mobile UI
══════════════════════════════════════════ */
@media (max-width:480px) {
  /* ── BASE ── */
  html { font-size: 14px; }
  body {
    /* Prevent rubber-band scroll on body itself */
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  /* ── APP SHELL ── */
  .shell { display: block; width: 100%; height: 100%; overflow: hidden; }

  /* Main content area: fills between topbar and tabbar, scrolls independently */
  .content {
    width: 100%;
    min-width: 0;
    /* Full height minus topbar and tabbar */
    height: 100%;
    overflow: hidden;
    /* GPU layer */
    will-change: transform;
    transform: translateZ(0);
  }

  /* ── TOPBAR (fixed, compact) ── */
  .topbar {
    height: 52px !important;
    padding: 0 10px !important;
    gap: 6px;
    /* Solid on mobile */
    background: rgba(10,13,28,0.97) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .topbar-left { display: flex !important; align-items: center; gap: 6px; flex-shrink: 0; }
  .topbar-logo-sm { font-size: 1.25rem; font-weight: 900; color: var(--accent2); display: block !important; }
  .topbar-section-title {
    font-size: 0.9rem; font-weight: 700; color: var(--text);
    display: block !important; white-space: nowrap;
    max-width: 120px; overflow: hidden; text-overflow: ellipsis;
  }
  .hamburger-btn { display: none !important; } /* sidebar hidden on phone */

  /* Search bar: hidden by default, full-width when expanded */
  .search-wrap { display: none; position: absolute; left: 0; right: 0; top: 0; height: 52px; padding: 8px 12px; z-index: 5; background: rgba(10,13,28,0.99); }
  .search-wrap.search-active { display: flex !important; align-items: center; }
  #globalSearch { font-size: 0.88rem; padding: 8px 10px 8px 32px; height: 36px; }

  .topbar-actions { gap: 4px; }
  .mob-search-btn {
    display: flex !important; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.06); border: none; color: var(--text2);
    cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
  }
  /* Hide badges on smallest phones (save space) */
  .streak-badge { display: none; }
  .xp-badge { font-size: 0.7rem; padding: 4px 8px; min-height: 30px; }
  .topbar-user-chip { max-width: 36px; overflow: hidden; }
  .topbar-user-info { display: none; } /* only avatar on phone */
  .topbar-user-avatar { width: 32px !important; height: 32px !important; font-size: 0.8rem !important; flex-shrink: 0; }
  .topbar-theme-btn { display: none; } /* theme in settings only */

  /* ── SECTIONS: native-scroll containers ── */
  .page-section {
    /* Each section fills the scroll area */
    padding: 10px 14px calc(64px + env(safe-area-inset-bottom, 0px));
    /* Momentum scroll */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* No bounce at edges */
    overscroll-behavior-y: contain;
    /* GPU compositing */
    will-change: scroll-position;
    /* Full height of content area */
    height: 100%;
    box-sizing: border-box;
  }

  /* ── TABBAR: app-style ── */
  .mobile-tabbar-inner { height: 52px; }
  .tab-btn, .tab-link { min-height: 52px; padding: 4px 2px; gap: 2px; }
  .tab-icon { width: 24px; height: 24px; }
  .tab-icon svg { width: 20px; height: 20px; }
  .tab-label { font-size: 0.55rem; }
  .tab-badge { top: -3px; right: -4px; font-size: 0.5rem; }

  /* ── HERO ── */
  h1 { font-size: 1.45rem !important; }
  h2 { font-size: 1.15rem; }
  h3 { font-size: 0.95rem; }
  .hero-main { padding: 16px 14px; border-radius: 14px; }
  .hero-eyebrow { flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
  .pill { font-size: 0.62rem; padding: 3px 8px; }
  .hero-desc { font-size: 0.82rem; margin-bottom: 14px; }
  .hero-cta-row, .hero-cta { flex-direction: column; gap: 8px; }
  .primary-btn, .btn-map, .ghost-btn { width: 100%; font-size: 0.87rem; padding: 12px; }

  /* ── STATS ROWS ── */
  .hero-stats-row { grid-template-columns: repeat(2,1fr); gap: 6px; }
  .hero-stat { padding: 8px 10px; }
  .hero-stat-num { font-size: 1.25rem; }
  .hero-stat-label { font-size: 0.6rem; }

  /* ── HOME RIGHT COL ── */
  .home-right-col { flex-direction: column; gap: 10px; }
  .info-card { min-height: 100px; padding: 12px 14px; }
  .prog-big-pct { font-size: 2rem; }
  .rank-big { font-size: 2rem; }

  /* ── MODULES ── */
  .module-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .module-card { padding: 13px 14px; }
  .module-card-title { font-size: 0.88rem; }
  .module-card-desc { font-size: 0.75rem; -webkit-line-clamp: 2; }
  .module-bar-chart { height: 22px; }

  /* ── PRACTICE TASKS ── */
  .practice-grid { grid-template-columns: 1fr !important; }
  .task-item { padding: 14px; }
  .task-prompt { font-size: 0.9rem; line-height: 1.6; }
  .task-choice-btn { font-size: 0.9rem; line-height: 1.55; padding: 8px 12px; }
  .task-input {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
    padding: 12px 14px;
    min-height: 48px;
    border-radius: 12px;
  }
  .check-btn, .hint-btn { min-height: 48px; font-size: 0.88rem; border-radius: 12px; }
  .task-input-wrap { gap: 8px; flex-direction: column; }
  .task-input-wrap .btn { width: 100%; }

  /* ── THEORY ── */
  .theory-body { font-size: 0.83rem; padding: 12px 14px; }
  .theory-header { padding: 12px 14px; }
  .th-def-block, .th-theorem-block, .th-warning-block, .th-note-block, .th-example-block { padding: 12px 14px; }
  .th-svg-wrap svg { max-width: 100%; height: auto; }
  .inf-rules { grid-template-columns: 1fr; }
  .inf-cards { grid-template-columns: 1fr 1fr; }
  .inf-formula-card { padding: 14px; }
  .inf-cols-2, .inf-cols-3, .inf-cols-4 { grid-template-columns: 1fr; }
  .theory-hero { flex-direction: column; text-align: center; padding: 16px; gap: 10px; }
  .theory-hero-icon { margin: 0 auto; }

  /* ── GRIDS ── */
  .today-grid { grid-template-columns: 1fr; gap: 8px; }
  .two-grid { grid-template-columns: 1fr; gap: 8px; }
  .stats-blocks { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .stats-v2-card { padding: 12px; }
  .cabinet-stats-6 { grid-template-columns: repeat(2,1fr) !important; gap: 8px; }
  .skill-row { grid-template-columns: 90px 1fr 36px; }
  .skill-detail { display: none; }

  /* ── LEADERBOARD ── */
  .lb-table-head, .lb-row { grid-template-columns: 28px 1fr 60px; gap: 4px; }
  .lb-col-solved, .lb-col-league, .lb-col-streak { display: none; }
  .lb-podium { flex-direction: row; justify-content: center; gap: 6px; padding: 12px 8px; }
  .lb-v2-podium-cell { padding: 10px 8px; min-width: 0; flex: 1; }
  .lb-v2-pod-name { font-size: 0.68rem; }
  .lb-v2-pod-xp { font-size: 0.65rem; }
  .lb-period-tabs { gap: 4px; }
  .lb-period-btn { padding: 5px 10px; font-size: 0.75rem; }

  /* ── VIDEOS ── */
  .video-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .video-card-body { padding: 10px 12px; }
  .video-card-title { font-size: 0.8rem; }

  /* ── CABINET ── */
  .cabinet-v2-hero { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .cabinet-v2-tab-btn { font-size: 0.72rem; padding: 7px 10px; }
  .cabinet-v2-name { font-size: 1.05rem; }
  .kaiten-board { flex-direction: column; gap: 10px; }
  .kaiten-col { min-width: 0; width: 100%; }

  /* ── STATS EXAM GRID ── */
  .exam-num-grid { grid-template-columns: repeat(5,1fr); gap: 6px; }
  .exam-num-cell { padding: 6px 2px; border-radius: 8px; }
  .exam-num { font-size: 0.88rem; }
  .exam-lbl { display: none; } /* too small on phone */

  /* ── CARDS & GLASS ── */
  .glass.panel-card, .card { padding: 12px 14px; border-radius: 14px; }

  /* ── WIZARD ── */
  .wizard-card { max-width: 100%; border-radius: 18px; }
  .wizard-inner { padding: 18px 16px; }
  .wizard-title { font-size: 1.3rem; }

  /* ── INPUTS: prevent iOS zoom (min 16px font-size) ── */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  textarea, select {
    font-size: 16px !important;
  }

  /* ── TOAST: above tabbar ── */
  .toast-container {
    bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 8px);
    right: 10px; left: 10px;
  }
  .toast { max-width: 100%; font-size: 0.82rem; padding: 10px 14px; }

  /* ── BUTTONS: larger tap area ── */
  .btn { font-size: 0.85rem; padding: 10px 16px; min-height: 44px; border-radius: 11px; }
  .btn-sm { font-size: 0.78rem; padding: 8px 12px; min-height: 38px; }
  .btn-xs { font-size: 0.72rem; padding: 5px 10px; min-height: 30px; }

  /* ── OVERFLOW ── */
  pre, code { font-size: 0.72rem; overflow-x: auto; word-break: break-word; -webkit-overflow-scrolling: touch; }
  table { width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .section-head { margin-bottom: 12px; }
  .section-head h2 { font-size: 1.05rem; }
}

/* ── TINY SCREENS (320px) ── */
@media (max-width:360px) {
  html { font-size: 12.5px; }
  .grade-quick-nav { grid-template-columns: repeat(2,1fr); }
  .hero-stats-row { grid-template-columns: 1fr 1fr; }
  .stats-blocks { grid-template-columns: 1fr 1fr !important; }
  .page-section { padding: 8px 10px calc(60px + env(safe-area-inset-bottom,0px)); }
  .topbar { padding: 0 8px !important; }
  .exam-num-grid { grid-template-columns: repeat(5,1fr); gap: 4px; }
  .video-grid { grid-template-columns: 1fr; }
}

/* ── LANDSCAPE PHONE ── */
@media (max-width:812px) and (orientation:landscape) {
  .mobile-tabbar-inner { height: 46px; }
  .tab-btn, .tab-link { min-height: 46px; }
  .tab-label { display: none; }
  .page-section { padding-bottom: calc(50px + env(safe-area-inset-bottom,0px)); }
}

/* ─── TABLET (641px – 1020px) ─── */
@media (min-width:641px) and (max-width:1020px) {
  .page-section { padding:18px 22px 44px; }
  .home-hero-row { grid-template-columns:1fr; gap:14px; }
  .home-right-col { flex-direction:row; gap:14px; }
  .practice-grid { grid-template-columns:repeat(2,1fr); }
  .today-grid { grid-template-columns:repeat(2,1fr); }
  .stats-blocks { grid-template-columns:repeat(3,1fr) !important; }
  .grade-quick-nav { grid-template-columns:repeat(5,1fr); }
  .video-grid { grid-template-columns:repeat(2,1fr); }
  .lb-podium { gap:12px; }
  .cabinet-stats-6 { grid-template-columns:repeat(3,1fr); }
}

/* ─── LANDSCAPE PHONE ─── */
@media (max-width:812px) and (orientation:landscape) {
  .page-section { padding:10px 18px 66px; }
  .hero-main { padding:16px 20px; }
  .hero-stats-row { grid-template-columns:repeat(4,1fr); }
  .mobile-tabbar { padding:3px 0 env(safe-area-inset-bottom,3px); }
  .tab-btn, .tab-link { min-height:44px; padding:4px 2px; }
  .tab-icon { font-size:1.1rem; }
  .tab-label { display:none; }
  .tab-btn.active::after, .tab-link.active::after { display:none; }
}

/* ══════════════════════════════════════════════════════
   TOPBAR USER CHIP + THEME TOGGLE
══════════════════════════════════════════════════════ */
.topbar-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: rgba(30,150,228,.12);
  border: 1px solid rgba(30,150,228,.25);
  border-radius: 44px;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
  margin-left: 4px;
}
.topbar-user-chip:hover {
  background: rgba(30,150,228,.22);
  border-color: rgba(30,150,228,.5);
  box-shadow: 0 0 16px rgba(30,150,228,.18);
}
.topbar-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e96e4, #35B1FA);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(30,150,228,.35);
}
.topbar-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.topbar-user-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-user-grade {
  font-size: 0.72rem;
  color: var(--text2);
}
.topbar-theme-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--accent2);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
  flex-shrink: 0;
  margin-left: 4px;
}
.topbar-theme-btn:hover {
  background: rgba(30,150,228,0.10);
  transform: rotate(20deg);
}
.topbar-theme-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Topbar center nav links — desktop only */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.topbar-nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text2);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  font-family: "Montserrat", system-ui, sans-serif;
  white-space: nowrap;
}
.topbar-nav-link:hover {
  background: rgba(30,150,228,0.10);
  color: var(--accent2);
}
.topbar-nav-link.active {
  background: rgba(30,150,228,0.12);
  color: var(--accent);
  font-weight: 700;
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg: #f0f4ff;
  --surface: #e8edf8;
  --card: #ffffff;
  --border: rgba(30,150,228,.2);
  --border2: rgba(0,0,0,.08);
  --text: #1a1f36;
  --text2: #4a5568;
  --text3: #9aa5b4;
  /* Complaint #12 fix: was #1e96e4 (indigo/purple) — the odd one out, since
     every other theme uses the brand blue for --accent. This is what made the
     sidebar active-item left indicator strip (.v2-nav-item.active::before,
     which reads var(--accent)) render purple in light theme while everything
     else on the site is blue. Aligned to the brand blue used elsewhere. */
  --accent: #1e96e4;
  --accent2: #1e96e4;
  --glow: rgba(30,150,228,.15);
}
[data-theme="light"] .glass {
  background: rgba(255,255,255,.85);
  border-color: rgba(30,150,228,.15);
}
[data-theme="light"] .sidebar {
  background: rgba(240,244,255,.95);
}
[data-theme="light"] .topbar {
  background: rgba(255,255,255,.95);
  box-shadow: 0 1px 0 rgba(30,150,228,.12), 0 24px 48px -12px rgba(240,244,255,0.9);
}
[data-theme="light"] .topbar::after {
  background: linear-gradient(to bottom,
    rgba(240,244,255,0.75) 0%,
    rgba(240,244,255,0.30) 40%,
    transparent 100%);
}
[data-theme="light"] #globalSearch {
  background: rgba(240,244,255,.95);
  color: #1a1f36;
}
[data-theme="light"] .nav-link {
  color: #4a5568;
}
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
  background: rgba(30,150,228,.1);
  color: #1e96e4;
}
[data-theme="light"] .brand-title { color: #1e96e4; }
[data-theme="light"] .brand-sub { color: #9aa5b4; }
[data-theme="light"] .stats-block,
[data-theme="light"] .stat-mini-card,
[data-theme="light"] .panel-card,
[data-theme="light"] .info-card,
[data-theme="light"] .hero-main {
  background: rgba(255,255,255,.9);
  border-color: rgba(30,150,228,.15);
}
[data-theme="light"] .topbar-user-chip {
  background: rgba(30,150,228,.08);
  border-color: rgba(30,150,228,.2);
}
[data-theme="light"] .topbar-theme-btn {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.1);
}
[data-theme="light"] .mobile-tabbar {
  background: rgba(255,255,255,.95);
  border-top: 1px solid rgba(0,0,0,.08);
}
[data-theme="light"] .tab-btn { color: #9aa5b4; }
[data-theme="light"] .tab-btn.active { color: #1e96e4; }

/* ── NON-TRANSPARENT SEARCH ── */
#globalSearch {
  background: rgba(10, 14, 26, 0.95) !important;
}
[data-theme="light"] #globalSearch {
  background: rgba(240,244,255,.98) !important;
  border-color: rgba(30,150,228,.2) !important;
}

/* ══════════════════════════════════════════════════════
   CABINET TABS
══════════════════════════════════════════════════════ */
.cabinet-tabs {
  display: flex;
  gap: 6px;
  margin: 18px 0 0 0;
  padding: 4px;
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--border2);
  width: fit-content;
}
.cabinet-tab-btn {
  padding: 9px 18px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
  font-family: inherit;
  position: relative;
}
.cabinet-tab-btn:hover { background: rgba(30,150,228,.1); color: var(--text); }
.cabinet-tab-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 12px rgba(30,150,228,.3);
}
.cabinet-tab-content { margin-top: 16px; }
.cabinet-tab-content.hidden { display: none !important; }

/* HW tab badge */
.hw-tab-badge {
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  margin-left: 4px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════
   HOMEWORK LIST (cabinet)
══════════════════════════════════════════════════════ */
.hw-tab-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.hw-list { display: flex; flex-direction: column; gap: 10px; }
.hw-list-item {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  border-left: 3px solid transparent;
  transition: box-shadow .2s;
}
.hw-list-item:hover { box-shadow: 0 2px 16px rgba(30,150,228,.1); }
.hw-pending { border-left-color: #1e96e4; }
.hw-overdue { border-left-color: #ef4444; background: rgba(248,113,113,.05); }
.hw-done { border-left-color: #22c55e; opacity: .8; }
.hw-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.hw-item-title { font-weight: 700; font-size: 0.95rem; }
.hw-item-desc { font-size: 0.85rem; color: var(--text2); margin-bottom: 6px; line-height: 1.5; }
.hw-item-meta { font-size: 0.75rem; color: var(--text3); }

/* ══════════════════════════════════════════════════════
   IMPROVED STAT ICONS — Twemoji-enhanced
══════════════════════════════════════════════════════ */
.stats-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin: 0 auto 10px;
  position: relative;
}
.stats-icon img.emoji {
  width: 32px !important;
  height: 32px !important;
  vertical-align: middle;
}
.stat-mini-icon {
  font-size: 1.6rem;
  margin-bottom: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin: 0 auto 8px;
}
.stat-mini-icon img.emoji {
  width: 26px !important;
  height: 26px !important;
  vertical-align: middle;
}

/* Stats block icon color backgrounds */
.stats-icon-green  { background: rgba(74, 222, 128, 0.15); }
.stats-icon-amber  { background: rgba(245, 158, 11, 0.15); }
.stats-icon-orange { background: rgba(249, 115, 22, 0.15); }
.stats-icon-purple { background: rgba(111,195,247, 0.15); }
.stats-icon-blue   { background: rgba(56, 189, 248, 0.15); }
.stats-icon-red    { background: rgba(248, 113, 113, 0.15); }
.stats-icon-gold   { background: rgba(251, 191, 36, 0.15); }

/* ══════════════════════════════════════════════════════
   COLORED AVATARS — leaderboard & podium
══════════════════════════════════════════════════════ */
.lb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-right: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  letter-spacing: -0.02em;
}
.podium-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  margin: 0 auto 6px;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  border: 3px solid rgba(255,255,255,.15);
}

/* ══════════════════════════════════════════════════════
   TOPBAR USER AVATAR — colored initial
══════════════════════════════════════════════════════ */
#topbarUserAvatar {
  background: linear-gradient(135deg, #1e96e4, #35B1FA);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* Twemoji global: prevent layout shift */
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
  display: inline-block;
}

/* ══════════════════════════════════════════════════════
   CABINET HERO AVATAR
══════════════════════════════════════════════════════ */
.cabinet-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
.cabinet-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e96e4, #35B1FA);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(30,150,228,0.4);
  border: 3px solid rgba(255,255,255,0.15);
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
  letter-spacing: -0.03em;
}
.cabinet-info { flex: 1; min-width: 0; }
.cabinet-info h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 4px; }
.cabinet-grade { font-size: 0.82rem; color: var(--text2); }

/* Twemoji in theme toggle */
#themeToggle img.emoji {
  width: 20px !important;
  height: 20px !important;
  vertical-align: middle;
  pointer-events: none;
}

/* ═══ HERO — layout with illustration on right ════════════════════════════ */
.hero-body-row {
  display: flex;
  align-items: center;
  gap: 24px;
}
.hero-text-col { flex: 1; min-width: 0; }

/* ═══ CANVAS BG — ensure content stays on top ════════════════════════════ */
#site-anim-bg { z-index: 0 !important; }
.sidebar, .topbar, .main-content, .mobile-tabbar { position: relative; z-index: 2; }
.page-section { position: relative; z-index: 1; }

/* Section lock overlay — covers locked section */
.section-lock-overlay {
  position: absolute !important;
  inset: 0;
  background: rgba(5,8,15,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 500 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lockFadeIn 0.3s ease;
}
@keyframes lockFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.section-lock-content {
  text-align: center;
  padding: 48px 40px;
  max-width: 420px;
}
.section-lock-content .lock-icon {
  font-size: 3.5rem;
  margin-bottom: 18px;
  display: block;
  animation: lockBounce 2s ease-in-out infinite;
}
@keyframes lockBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.05); }
}
.section-lock-content .lock-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.section-lock-content .lock-msg {
  color: var(--text2);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ═══ HERO ILLUSTRATION — right side ═════════════════════════════════════ */
.hero-illus-col {
  flex-shrink: 0;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-illus {
  width: 148px;
  height: 148px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5.5rem;
  line-height: 1;
  border: 1.5px solid rgba(30,150,228,0.25);
  background: radial-gradient(ellipse at center, rgba(30,150,228,0.14), rgba(30,150,228,0.04));
  box-shadow: 0 0 40px rgba(30,150,228,0.15), 0 0 80px rgba(30,150,228,0.07);
  animation: heroFloat 3s ease-in-out infinite;
  user-select: none;
  cursor: default;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.hero-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;  /* always side-by-side */
  align-items: center;
  margin-bottom: 26px;
}
.hero-cta-row .primary-btn { flex-shrink: 0; }
.btn-map {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1.5px solid rgba(30,150,228,0.45);
  background: rgba(30,150,228,0.10);
  color: var(--accent2);
  transition: var(--transition);
  min-width: 160px;
  justify-content: center;
  font-family: inherit;
  flex-shrink: 0;
}
.btn-map:hover {
  background: rgba(30,150,228,0.20);
  border-color: rgba(30,150,228,0.7);
  transform: translateY(-2px);
}
@media (max-width: 700px) {
  .hero-illus-col { display: none; }
  .hero-cta-row { flex-wrap: wrap; }
  .btn-map { min-width: 0; flex-shrink: 1; }
  .hero-cta-row .primary-btn { flex-shrink: 1; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════
   SITE OVERHAUL 7.0 — New Styles
═══════════════════════════════════════════════════════ */

/* ── SIDEBAR: narrower ── */
:root { --sidebar-w: 210px; }

/* ── LIGHT THEME: isolated variables (admin sets cfg.darkAccent / cfg.lightAccent) ── */
/* Applied via JS applyConfig() — nothing extra needed here since we removed compat fields */

/* ── GRADE QUICK NAV: compact smaller buttons ── */
.grade-quick-nav { gap: 8px; margin-bottom: 16px; }
.grade-quick-btn {
  background: var(--surface);
  border: 1.5px solid var(--border2);
  padding: 10px 6px !important;
  min-height: 56px !important;
  gap: 2px;
  border-radius: 10px !important;
}
.grade-quick-btn:hover { border-color: var(--border3); transform: translateY(-1px); }
.grade-quick-btn.active {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(30,150,228,0.5) !important;
  box-shadow: 0 2px 16px rgba(30,150,228,0.18);
}
.grade-quick-btn.active .grade-quick-num {
  background: linear-gradient(135deg,#1565a8,#1e96e4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grade-quick-btn.active .grade-quick-lbl { color: #1565a8; }
[data-theme="light"] .grade-quick-btn.active {
  background: rgba(30,150,228,0.12) !important;
  border-color: rgba(79,70,229,0.4) !important;
}
/* Make number smaller */
.grade-quick-num { font-size: 1.25rem !important; }
.grade-quick-lbl { font-size: 0.58rem !important; }
.grade-quick-bar {
  width: 75%;
  height: 3px;
  background: rgba(30,150,228,0.12);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 2px;
}
.grade-quick-fill {
  height: 100%;
  background: var(--accent-g);
  border-radius: 3px;
  transition: width 0.6s ease;
}
.grade-quick-pct { font-size: 0.55rem; color: var(--text3); }

/* ── HOME: Activity row ── */
.home-activity-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.home-activity-card { padding: 20px; }
.activity-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text);
}
.home-weekly-chart {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 72px;
}
.hw-bar-cell {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  flex: 1;
  gap: 5px;
}
.hw-bar-fill-wrap {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: flex-end;
}
.hw-bar-fill {
  width: 100%;
  background: rgba(30,150,228,0.2);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.5s ease;
}
.hw-bar-fill.hw-bar-active { background: var(--accent-g); }
.hw-bar-fill.hw-bar-today { background: linear-gradient(180deg,var(--green-l),var(--green)); }
.hw-bar-day {
  font-size: 0.6rem;
  color: var(--text3);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.hw-bar-num {
  font-size: 0.6rem;
  color: var(--text3);
  text-align: center;
}
.hw-bar-cell.hw-today .hw-bar-day { color: var(--accent2); font-weight: 800; }

/* OGE/EGE linear chart */
.home-type-chart { display: flex; flex-direction: column; gap: 10px; }
.type-chart-row {
  display: grid;
  grid-template-columns: 55px 1fr 42px;
  gap: 8px;
  align-items: center;
  font-size: 0.78rem;
}
.type-chart-label { color: var(--text2); font-weight: 600; }
.type-chart-bar-bg {
  height: 10px;
  background: rgba(30,150,228,0.09);
  border-radius: 6px;
  overflow: hidden;
}
.type-chart-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.type-chart-val { color: var(--text3); font-size: 0.72rem; text-align: right; }
.type-oge .type-chart-bar-fill { background: linear-gradient(90deg,#14b8a6,#06b6d4); }
.type-ege .type-chart-bar-fill { background: linear-gradient(90deg,#1e96e4,#35B1FA); }
.type-school .type-chart-bar-fill { background: linear-gradient(90deg,#10b981,#34d399); }
.type-olymp .type-chart-bar-fill { background: linear-gradient(90deg,#f59e0b,#f97316); }
@media (max-width: 768px) {
  .home-activity-row { grid-template-columns: 1fr; }
}

/* ── MAP: uniform cards ── */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 14px;
  align-items: stretch;
}
.module-card {
  display: flex;
  flex-direction: column;
  min-height: 185px;
}
.module-card-title { flex: 1; }
.module-card.completed {
  border-color: rgba(16,185,129,0.55) !important;
  background: rgba(16,185,129,0.06) !important;
}
.module-card.completed .module-progress-fill {
  background: linear-gradient(90deg,var(--green),var(--teal)) !important;
}
.module-card.in-progress {
  border-color: rgba(245,158,11,0.4) !important;
  background: rgba(245,158,11,0.04) !important;
}
.module-completed-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--green-l);
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 20px;
  padding: 2px 8px;
  margin-top: 6px;
}

/* ── MAP: remove detail card, use grid-only layout ── */
.module-layout { display: block; }
#moduleDetailWrap { display: none !important; }

/* ── MAP: embedded practice ── */
/* Rule: the lesson's page-level header (breadcrumb + title + meta) is
   always centred — this is the top-of-page identity block for the whole
   lesson, distinct from in-theory section headers (rule 7), which stay
   left-aligned inside their card. Back-button/exam-button are pulled to
   the outer edges with position:absolute so the middle titleWrap can be
   truly centred regardless of button width differences. */
.map-practice-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 14px;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.map-practice-header #backToMapBtn { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.map-practice-title-wrap { flex: 0 1 auto; max-width: 60%; }
.map-practice-title-wrap h3 { margin-bottom: 2px; }
.map-practice-header .exam-launch-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .map-practice-header { flex-direction: column; }
  .map-practice-header #backToMapBtn,
  .map-practice-header .exam-launch-btn { position: static; transform: none; }
}

/* ── Lesson title (complaint #1b): the identity of the whole lesson page —
   much bigger and bolder than a plain h3, with a gradient accent word-mark
   feel; meta line right below stays smaller but clearer. ── */
#practiceModuleTitle {
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 6px;
}
.practice-meta {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text3);
  margin-top: 4px;
  letter-spacing: .01em;
}
@media (max-width: 640px) {
  #practiceModuleTitle { font-size: 1.4rem; }
  .practice-meta { font-size: 0.82rem; }
}

/* ── Back-to-map button (complaint #1b): a real pill button with icon
   chip + label, distinct hover/active affordance, instead of the generic
   outline button used everywhere else on the site. ── */
.map-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--border2);
  background: var(--surface2);
  color: var(--text2);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.map-back-btn:hover {
  border-color: var(--accent2);
  color: var(--accent2);
  background: rgba(53,177,250,.1);
  transform: translateX(-2px);
}
.map-back-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(53,177,250,.14);
  color: var(--accent2);
  flex-shrink: 0;
  transition: var(--transition);
}
.map-back-btn-icon svg { width: 13px; height: 13px; }
.map-back-btn:hover .map-back-btn-icon { background: var(--accent2); color: #fff; transform: translateX(-1px); }
.map-back-btn-label { white-space: nowrap; }
@media (max-width: 640px) {
  .map-back-btn-label { display: none; }
  .map-back-btn { padding: 8px; }
}

/* ── PRACTICE: top panels ── */
.practice-top-panels {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.practice-top-card { padding: 16px 18px; cursor: default; }
.practice-top-clickable { cursor: pointer; transition: var(--transition); }
.practice-top-clickable:hover { border-color: var(--border2); transform: translateY(-1px); }
.practice-top-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.practice-top-card-header h4 {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.practice-panel-icon { font-size: 1rem; }
.practice-panel-badge {
  font-size: 0.65rem;
  font-weight: 800;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  display: none;
}
.practice-panel-badge.visible { display: inline-block; }
@media (max-width: 768px) {
  .practice-top-panels { grid-template-columns: 1fr; }
}

/* ── PRACTICE: module status bar ── */
.practice-module-status {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.practice-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
}
.practice-status-done {
  background: rgba(16,185,129,0.12);
  color: var(--green-l);
  border: 1px solid rgba(16,185,129,0.3);
}
.practice-status-progress {
  background: rgba(245,158,11,0.12);
  color: var(--gold-l);
  border: 1px solid rgba(245,158,11,0.3);
}
.practice-reset-btn {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(239,68,68,0.3);
  color: var(--red-l);
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
  font-weight: 600;
}
.practice-reset-btn:hover {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.5);
}

/* Complaint #16: %-completion indicator (left) + green progress-bar strip
   (middle), placed before "Сбросить прогресс" in the same status row.
   The bar reuses the exact .module-progress-bar/.module-progress-fill
   visual spec from the course-map module cards (style.css ~13100) — same
   track height/radius/background, green gradient fill regardless of %,
   per the explicit "green progress-bar strip" request. */
.practice-pct-indicator {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
}
.practice-pct-label {
  font-size: 0.76rem; font-weight: 600; color: var(--text3);
}
.practice-pct-num {
  font-size: 0.85rem; font-weight: 800; color: var(--accent2);
  min-width: 2.4em;
}
.practice-pct-num.pct-done { color: var(--green-l); }
.practice-progress-bar {
  /* Complaint #2 fix: max-width:220px capped the bar far short of the
     available space next to "Сбросить прогресс" (resetBtn uses
     margin-left:auto, so the bar was the only element that could have
     grown to fill the gap). flex:1 1 140px already grows correctly —
     removing the cap lets it actually fill the row. */
  flex: 1 1 140px;
  height: 6px;
  background: var(--surface3);
  border-radius: 100px;
  overflow: hidden;
}
.practice-progress-fill {
  height: 100%;
  background: linear-gradient(90deg,#10b981,#34d399);
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

/* ── PRACTICE: full-width layout ── */
.practice-full-wrap { width: 100%; }
.practice-full-wrap .practice-main { width: 100%; }

/* ── PRACTICE: per-task review button ── */
.task-review-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(30,150,228,0.25);
  background: rgba(30,150,228,0.07);
  color: var(--accent2);
  cursor: pointer;
  transition: var(--transition);
  margin-left: auto;
  flex-shrink: 0;
}
.task-review-btn:hover {
  background: rgba(30,150,228,0.18);
  border-color: rgba(30,150,228,0.5);
  transform: scale(1.08);
}
.task-review-btn.in-review {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.35);
  color: var(--gold-l);
}
.task-review-btn svg { width:14px; height:14px; display:block; }

/* Phase B: per-task "Символы" button — same 30×30 rounded-square icon
   pattern as .task-review-btn (so the two sit as a matched pair in the
   top-right corner), placed immediately to its LEFT via DOM order (see
   app.js renderTaskList — it's inserted before the review button in
   .task-corner, and flexbox lays them out left-to-right in that order).
   Native title="Символы" tooltip on hover, no persistent active state
   (unlike the review button) — it just opens the shared symbol panel. */
.task-symbols-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid rgba(30,150,228,0.25);
  background: rgba(30,150,228,0.07);
  color: var(--accent2);
  cursor: pointer; transition: var(--transition);
  flex-shrink: 0;
}
.task-symbols-btn:hover { background: rgba(30,150,228,0.18); border-color: rgba(30,150,228,0.5); transform: scale(1.08); }
.task-symbols-btn.symbols-active { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.task-symbols-btn svg { width:14px; height:14px; display:block; }

/* ── PRACTICE: sub-page (review/error/fav-theory full list) ──────────────
   Complaint #1/#10 fix: opening a chip now hides #practiceMainContent (see
   app.js openReviewPage/openErrorPage/openFavTheoryPage), so this block is
   the ONLY thing visible inside the practice view — i.e. a real dedicated
   page, not an inline reveal buried further down a long scrollable doc. */
.practice-sub-page { margin-top: 4px; animation: subPageFadeIn .18s ease; }
@keyframes subPageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sub-page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.sub-page-header h3 { margin: 0; }
.sub-page-back-btn {
  display: inline-flex; align-items: center; gap: 7px;
}
.sub-page-back-btn svg { flex-shrink: 0; }

/* ── CONFIRMATION DIALOG ── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,100,180,0.10);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.confirm-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow);
}
.confirm-icon { font-size: 2.5rem; margin-bottom: 14px; text-align: center; }
.confirm-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; text-align: center; }
.confirm-msg { font-size: 0.88rem; color: var(--text2); margin-bottom: 22px; text-align: center; line-height: 1.6; }
.confirm-btns { display: flex; gap: 10px; justify-content: center; }
.confirm-yes { background: var(--red); color:#fff; border:none; padding:10px 26px; border-radius:10px; font-size:0.9rem; font-weight:700; cursor:pointer; font-family:inherit; }
.confirm-no { background: var(--surface2); color:var(--text); border:1px solid var(--border2); padding:10px 26px; border-radius:10px; font-size:0.9rem; font-weight:700; cursor:pointer; font-family:inherit; }

/* ── SUBSCRIPTIONS SECTION ── */
.subs-hero {
  text-align: center;
  padding: 28px 20px 18px;
  margin-bottom: 28px;
}
.subs-hero-title { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 8px; }
.subs-hero-sub { color: var(--text2); font-size: 1rem; }
.subs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}
.subs-card {
  border-radius: var(--radius-xl);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.subs-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.subs-card.popular {
  border-color: rgba(30,150,228,0.55) !important;
  background: rgba(30,150,228,0.07) !important;
}
.subs-popular-label {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--accent-g);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}
.subs-plan-icon { font-size: 2rem; }
.subs-plan-name { font-size: 1.05rem; font-weight: 800; }
.subs-price { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; background: var(--accent-g); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
.subs-price-period { font-size: 0.72rem; color: var(--text3); font-weight: 500; }
.subs-divider { height: 1px; background: var(--border); }
.subs-features { display: flex; flex-direction: column; gap: 8px; }
.subs-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
  color: var(--text2);
}
.subs-feature-check { color: var(--green-l); font-size: 0.9rem; flex-shrink: 0; }
.subs-feature-x { color: var(--text3); font-size: 0.9rem; flex-shrink: 0; }
.subs-btn {
  margin-top: auto;
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.subs-btn-primary { background: var(--accent-g); color: #fff; box-shadow: 0 4px 18px rgba(30,150,228,0.4); }
.subs-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.subs-btn-outline { background: transparent; border: 1.5px solid var(--border2); color: var(--text2); }
.subs-btn-outline:hover { border-color: var(--accent); color: var(--accent2); background: rgba(30,150,228,0.05); }
@media (max-width: 900px) { .subs-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto 28px; } }

/* ── STATS: improved ── */
.stats-blocks { grid-template-columns: repeat(3,1fr); }
.stats-block-v2 {
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.stats-block-v2 .stat-mini-val { font-size: 2rem; }
.stats-block-v2 .stat-mini-lbl { font-size: 0.72rem; color: var(--text3); }

/* ── LEADERBOARD: improved ── */
.lb-table-head, .lb-row { grid-template-columns: 44px 1fr 80px 75px 70px 60px; }
.lb-col-league { display: block; }

/* ── REGISTER LINK in sidebar ── */
.sidebar-register-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 0.78rem;
  color: var(--accent2);
  text-decoration: none;
  transition: var(--transition);
  margin-top: 8px;
}
.sidebar-register-link:hover { background: rgba(30,150,228,0.1); }

/* ══════════════════════════════════════════════════════════════════
   LOGIN MODAL
══════════════════════════════════════════════════════════════════ */
.login-modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,8,15,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: lmFadeIn 0.35s ease;
  padding: 24px;
}
@keyframes lmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.login-modal-card {
  background: var(--card);
  border: 1px solid rgba(30,150,228,0.25);
  border-radius: 24px;
  padding: 40px 36px;
  width: 100%; max-width: 420px;
  box-shadow: 0 24px 80px rgba(30,100,180,0.10), 0 0 60px rgba(30,150,228,0.12);
  animation: lmSlideUp 0.35s cubic-bezier(0.4,0,0.2,1);
}
@keyframes lmSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.login-modal-brand {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.login-modal-logo {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg,#1e96e4,#35B1FA);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 900; color: #fff;
  box-shadow: 0 4px 16px rgba(30,150,228,0.4);
  flex-shrink: 0;
}
.login-modal-title {
  font-size: 1.15rem; font-weight: 800;
  background: linear-gradient(135deg,var(--accent2),var(--accent3));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-modal-sub { font-size: 0.78rem; color: var(--text3); margin-top: 2px; }
.login-modal-tabs {
  display: flex; gap: 4px;
  background: var(--surface); border-radius: 12px; padding: 4px;
  margin-bottom: 24px;
}
.lm-tab {
  flex: 1; padding: 9px; border: none; border-radius: 9px;
  font-size: 0.86rem; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--text2);
  transition: var(--transition); font-family: inherit;
}
.lm-tab.active {
  background: rgba(30,150,228,0.18);
  color: var(--accent2);
}
.lm-tab-content { display: flex; flex-direction: column; gap: 0; }
.lm-tab-content.hidden { display: none; }
.lm-field { margin-bottom: 16px; }
.lm-field label {
  display: block; font-size: 0.75rem; font-weight: 600;
  color: var(--text3); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.lm-field input {
  width: 100%; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 10px; color: var(--text);
  font-size: 0.95rem; font-family: inherit; outline: none;
  transition: border-color 0.2s;
}
.lm-field input:focus { border-color: var(--accent); background: rgba(30,150,228,0.06); }
.lm-field input::placeholder { color: var(--text3); }
.lm-error {
  padding: 10px 12px; border-radius: 8px; font-size: 0.83rem;
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25);
  color: var(--red-l); margin-bottom: 12px;
}
.lm-submit-btn {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: #fff; font-size: 1rem; font-weight: 700;
  border: none; border-radius: 12px; cursor: pointer;
  font-family: inherit; transition: opacity 0.2s, transform 0.2s;
  margin-bottom: 10px; box-shadow: 0 4px 20px rgba(30,150,228,0.4);
}
.lm-submit-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.lm-guest-btn {
  width: 100%; padding: 11px;
  background: transparent; border: 1px solid var(--border2);
  border-radius: 10px; color: var(--text2); font-size: 0.85rem;
  cursor: pointer; font-family: inherit; transition: var(--transition);
}
.lm-guest-btn:hover { background: var(--surface2); border-color: var(--border3); color: var(--text); }
.lm-register-info {
  text-align: center; padding: 12px 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.lm-register-icon { font-size: 2.5rem; }
.lm-register-info p { font-size: 0.86rem; color: var(--text2); line-height: 1.6; }
.lm-register-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 22px; border-radius: 10px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: #fff; font-weight: 700; font-size: 0.9rem;
  text-decoration: none; transition: opacity 0.2s;
}
.lm-register-link:hover { opacity: 0.9; }
.lm-divider { height: 1px; background: var(--border); margin: 16px 0; }
.lm-already { font-size: 0.83rem; color: var(--text2); text-align: center; }
.lm-switch-btn {
  background: none; border: none; color: var(--accent2);
  font-weight: 700; cursor: pointer; font-size: inherit;
  text-decoration: underline; padding: 0;
}

/* ══════════════════════════════════════════════════════════════════
   CABINET REDESIGN v2
══════════════════════════════════════════════════════════════════ */
.cabinet-v2-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg,
    rgba(30,150,228,0.12) 0%,
    rgba(53,177,250,0.08) 50%,
    rgba(6,182,212,0.06) 100%);
  border: 1px solid rgba(30,150,228,0.22);
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}
.cabinet-v2-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(30,150,228,0.10), transparent);
  pointer-events: none;
}
.cabinet-v2-avatar-wrap { position: relative; flex-shrink: 0; }
.cabinet-v2-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 900; color: #fff;
  box-shadow: 0 4px 24px rgba(30,150,228,0.4);
  border: 3px solid rgba(255,255,255,0.15);
}
.cabinet-v2-badge {
  position: absolute; bottom: -2px; right: -2px;
  width: 26px; height: 26px;
  border-radius: 50%; background: var(--card);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; border: 2px solid var(--card);
}
.cabinet-v2-info { min-width: 0; }
.cabinet-v2-name {
  font-size: 1.4rem; font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 4px;
}
.cabinet-v2-meta {
  font-size: 0.85rem; color: var(--text2); margin-bottom: 10px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.cabinet-v2-meta-sep { color: var(--text3); }
.cabinet-v2-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.cabinet-logout-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 10px;
  border: 1px solid rgba(239,68,68,0.25);
  background: rgba(239,68,68,0.08);
  color: var(--red-l); font-size: 0.8rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: var(--transition); white-space: nowrap;
}
.cabinet-logout-btn:hover { background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.4); }
.cabinet-v2-login-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 10px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: #fff; font-size: 0.82rem; font-weight: 700;
  cursor: pointer; font-family: inherit; border: none;
  transition: var(--transition); white-space: nowrap;
  box-shadow: 0 2px 12px rgba(30,150,228,0.3);
}
.cabinet-v2-login-btn:hover { opacity: 0.9; }

/* Quick stats row inside hero */
.cabinet-v2-quick-stats {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin-top: 14px;
}
.cabinet-v2-qs-item { text-align: center; }
.cabinet-v2-qs-val {
  font-size: 1.5rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
}
.cabinet-v2-qs-lbl { font-size: 0.65rem; color: var(--text3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.cabinet-v2-qs-divider { width: 1px; background: var(--border); align-self: stretch; }

/* Cabinet tabs v2 */
.cabinet-v2-tabs {
  display: flex; gap: 4px;
  background: var(--surface); border-radius: 14px; padding: 4px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.cabinet-v2-tab-btn {
  flex: 1; min-width: 100px; padding: 10px 14px;
  border: none; border-radius: 10px;
  font-size: 0.83rem; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--text2);
  transition: var(--transition); font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
}
.cabinet-v2-tab-btn.active {
  background: linear-gradient(135deg,rgba(30,150,228,0.22),rgba(53,177,250,0.15));
  color: var(--accent2);
  box-shadow: 0 2px 8px rgba(30,150,228,0.15);
}
.cabinet-v2-tab-badge {
  background: var(--red-l); color: #fff;
  border-radius: 10px; font-size: 0.65rem; font-weight: 800;
  padding: 1px 6px; line-height: 1.4;
}

/* Stat cards grid (6) */
.cabinet-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.cabinet-stat-card {
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  transition: var(--transition);
}
.cabinet-stat-card:hover { border-color: var(--border2); background: var(--surface2); }
.cabinet-stat-top { display: flex; align-items: center; justify-content: space-between; }
.cabinet-stat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.cabinet-stat-icon.green { background: rgba(16,185,129,0.15); }
.cabinet-stat-icon.purple { background: rgba(30,150,228,0.15); }
.cabinet-stat-icon.orange { background: rgba(245,158,11,0.15); }
.cabinet-stat-icon.amber { background: rgba(251,191,36,0.15); }
.cabinet-stat-icon.red { background: rgba(239,68,68,0.15); }
.cabinet-stat-icon.gold { background: rgba(245,158,11,0.15); }
.cabinet-stat-val {
  font-size: 1.6rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
}
.cabinet-stat-lbl { font-size: 0.72rem; color: var(--text2); font-weight: 500; }

/* League badge in hero */
.cabinet-league-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 700;
}
.cabinet-league-badge.bronze { background: rgba(205,127,50,0.15); color: #cd7f32; border: 1px solid rgba(205,127,50,0.25); }
.cabinet-league-badge.silver { background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid rgba(148,163,184,0.25); }
.cabinet-league-badge.gold { background: rgba(245,158,11,0.15); color: #fcd34d; border: 1px solid rgba(245,158,11,0.25); }
.cabinet-league-badge.platinum { background: rgba(53,177,250,0.15); color: #6FC3F7; border: 1px solid rgba(53,177,250,0.25); }
.cabinet-league-badge.diamond { background: rgba(6,182,212,0.15); color: #22d3ee; border: 1px solid rgba(6,182,212,0.25); }

/* Forecast card */
.forecast-card {
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.forecast-title { font-size: 0.88rem; font-weight: 700; margin-bottom: 14px; }

/* ══════════════════════════════════════════════════════════════════
   STATS REDESIGN v2
══════════════════════════════════════════════════════════════════ */
.stats-v2-hero {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stats-v2-card {
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: var(--transition);
}
.stats-v2-card:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.stats-v2-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: 2px 2px 0 0;
}
.stats-v2-card.accent::before { background: var(--accent-g); }
.stats-v2-card.green::before { background: linear-gradient(90deg,var(--green),var(--green-l)); }
.stats-v2-card.gold::before { background: linear-gradient(90deg,var(--gold),var(--gold-l)); }
.stats-v2-card.teal::before { background: linear-gradient(90deg,var(--teal),var(--teal-l)); }
.stats-v2-card.red::before { background: linear-gradient(90deg,var(--red),var(--red-l)); }
.stats-v2-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.stats-v2-icon.accent { background: rgba(30,150,228,0.15); }
.stats-v2-icon.green { background: rgba(16,185,129,0.15); }
.stats-v2-icon.gold { background: rgba(245,158,11,0.15); }
.stats-v2-icon.teal { background: rgba(20,184,166,0.15); }
.stats-v2-icon.red { background: rgba(239,68,68,0.15); }
.stats-v2-val {
  font-size: 2rem; font-weight: 900;
  letter-spacing: -0.04em; line-height: 1;
}
.stats-v2-lbl { font-size: 0.72rem; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* Section panel */
.stats-v2-panel {
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.stats-v2-panel-title {
  font-size: 0.9rem; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}

/* Skill bars */
.skill-row-v2 {
  display: grid;
  grid-template-columns: 140px 1fr 44px 40px;
  gap: 10px; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.skill-row-v2:last-child { border-bottom: none; }
.skill-name-v2 { color: var(--text2); font-weight: 500; }
.skill-bar-v2-track {
  height: 6px; border-radius: 6px; background: var(--surface2); overflow: hidden;
}
.skill-bar-v2-fill {
  height: 100%; border-radius: 6px;
  background: var(--accent-g); transition: width 0.6s ease;
}
.skill-bar-v2-fill.strong { background: linear-gradient(90deg,var(--green),var(--green-l)); }
.skill-bar-v2-fill.weak { background: linear-gradient(90deg,var(--red),var(--orange)); }
.skill-pct-v2 { font-weight: 700; color: var(--text); font-size: 0.8rem; text-align: right; }
.skill-detail-v2 { font-size: 0.7rem; color: var(--text3); text-align: right; }

/* Progress bar v2 */
.progress-row-v2 {
  display: grid;
  grid-template-columns: 70px 1fr 48px;
  gap: 12px; align-items: center; margin-bottom: 12px;
  font-size: 0.83rem;
}
.progress-row-v2:last-child { margin-bottom: 0; }
.progress-lbl-v2 { color: var(--text2); font-weight: 600; }
.progress-track-v2 { height: 8px; border-radius: 8px; background: var(--surface2); overflow: hidden; }
.progress-fill-v2 {
  height: 100%; border-radius: 8px;
  background: var(--accent-g); transition: width 0.6s ease;
}
.progress-pct-v2 { font-weight: 700; color: var(--text); text-align: right; font-size: 0.8rem; }

/* Activity v2 */
.activity-chart-v2 {
  display: flex; gap: 8px; align-items: flex-end;
  height: 90px;
}
.activity-col-v2 {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; flex: 1;
}
.activity-bar-v2-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; }
.activity-bar-v2 {
  width: 100%; min-height: 4px; border-radius: 4px 4px 0 0;
  background: rgba(30,150,228,0.12); transition: height 0.5s ease;
}
.activity-bar-v2.active { background: var(--accent-g); }
.activity-bar-v2.today { background: linear-gradient(180deg,var(--green-l),var(--green)); }
.activity-day-v2 { font-size: 0.6rem; color: var(--text3); font-weight: 600; }
.activity-num-v2 { font-size: 0.6rem; color: var(--text3); }
.activity-col-v2.is-today .activity-day-v2 { color: var(--accent2); font-weight: 800; }

/* ══════════════════════════════════════════════════════════════════
   LEADERBOARD REDESIGN v2
══════════════════════════════════════════════════════════════════ */
.lb-v2-tabs {
  display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap;
}
.lb-v2-tab {
  padding: 8px 18px; border-radius: 20px;
  font-size: 0.82rem; font-weight: 700;
  border: 1.5px solid var(--border2);
  background: var(--surface); color: var(--text2);
  cursor: pointer; font-family: inherit; transition: var(--transition);
}
.lb-v2-tab.active {
  background: rgba(30,150,228,0.18);
  border-color: rgba(30,150,228,0.4);
  color: var(--accent2);
}

/* Podium v2 */
.lb-v2-podium {
  display: flex; align-items: flex-end;
  justify-content: center; gap: 12px;
  margin-bottom: 28px;
  padding: 0 12px;
}
.lb-v2-podium-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; flex: 1; max-width: 160px;
}
.lb-v2-podium-cell.is-me .lb-v2-pod-avatar {
  box-shadow: 0 0 0 3px var(--accent), 0 0 20px rgba(30,150,228,0.4);
}
.lb-v2-pod-medal { font-size: 1.6rem; }
.lb-v2-pod-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; color: #fff;
  border: 2px solid rgba(30,150,228,0.12);
  transition: var(--transition);
}
.lb-v2-pod-name {
  font-size: 0.8rem; font-weight: 700;
  text-align: center; max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-v2-pod-xp { font-size: 0.72rem; color: var(--accent2); font-weight: 700; }
.lb-v2-pod-stand {
  width: 100%; border-radius: 8px 8px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; color: rgba(255,255,255,0.55);
}
.lb-v2-podium-cell:nth-child(1) .lb-v2-pod-stand { /* 2nd place */
  height: 75px;
  background: linear-gradient(180deg,rgba(148,163,184,0.25),rgba(148,163,184,0.1));
  border: 1px solid rgba(148,163,184,0.2);
}
.lb-v2-podium-cell:nth-child(2) .lb-v2-pod-stand { /* 1st place */
  height: 110px;
  background: linear-gradient(180deg,rgba(245,158,11,0.25),rgba(245,158,11,0.08));
  border: 1px solid rgba(245,158,11,0.25);
}
.lb-v2-podium-cell:nth-child(3) .lb-v2-pod-stand { /* 3rd place */
  height: 55px;
  background: linear-gradient(180deg,rgba(205,127,50,0.2),rgba(205,127,50,0.06));
  border: 1px solid rgba(205,127,50,0.18);
}

/* Leaderboard table v2 */
.lb-v2-table-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.lb-v2-head, .lb-v2-row {
  display: grid;
  grid-template-columns: 48px 1fr 90px 80px 75px 70px;
  align-items: center; gap: 0;
}
.lb-v2-head {
  background: var(--surface2);
  padding: 10px 16px;
  font-size: 0.7rem; font-weight: 700;
  color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em;
}
.lb-v2-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  font-size: 0.84rem;
}
.lb-v2-row:last-child { border-bottom: none; }
.lb-v2-row:hover { background: var(--surface); }
.lb-v2-row.is-me { background: rgba(30,150,228,0.08); }
.lb-v2-row.is-top { background: var(--surface); }
.lb-v2-rank { font-weight: 800; font-size: 0.9rem; color: var(--text2); }
.lb-v2-rank.is-top { color: var(--gold-l); }
.lb-v2-name-cell { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.lb-v2-avatar-sm {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem; color: #fff;
}
.lb-v2-name-txt {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-v2-me-badge {
  font-size: 0.62rem; font-weight: 800;
  background: rgba(30,150,228,0.2); color: var(--accent2);
  padding: 2px 7px; border-radius: 8px; flex-shrink: 0;
}
.lb-v2-xp { font-weight: 700; color: var(--accent2); }
.lb-v2-solved { color: var(--text2); }
.lb-v2-streak { color: var(--gold-l); font-weight: 600; }
.lb-v2-league-sm {
  font-size: 0.7rem; font-weight: 700; padding: 3px 8px;
  border-radius: 8px; text-align: center;
}
.lb-v2-league-sm.bronze { background: rgba(205,127,50,0.15); color: #cd7f32; }
.lb-v2-league-sm.silver { background: rgba(148,163,184,0.15); color: #94a3b8; }
.lb-v2-league-sm.gold { background: rgba(245,158,11,0.15); color: #fcd34d; }
.lb-v2-league-sm.platinum { background: rgba(53,177,250,0.15); color: #6FC3F7; }
.lb-v2-league-sm.diamond { background: rgba(6,182,212,0.15); color: #22d3ee; }

@media (max-width: 640px) {
  .lb-v2-head, .lb-v2-row { grid-template-columns: 36px 1fr 70px 60px; }
  .lb-v2-head > :nth-child(5),
  .lb-v2-row > :nth-child(5),
  .lb-v2-head > :nth-child(6),
  .lb-v2-row > :nth-child(6) { display: none; }
  .cabinet-v2-hero { grid-template-columns: auto 1fr; }
  .cabinet-v2-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .cabinet-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-v2-hero { grid-template-columns: repeat(2, 1fr); }
}


/* ═══════════════════════════════════════════
   KAITEN 3-COLUMN HW BOARD
═══════════════════════════════════════════ */
.kaiten-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
  padding-top: 4px;
}
.kaiten-col {
  background: rgba(30,150,228,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  min-height: 220px;
  transition: box-shadow .2s;
}
.kaiten-col.kaiten-dragover {
  box-shadow: 0 0 0 2px var(--accent);
  background: rgba(30,150,228,0.07);
}
.kaiten-col-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1;
}
.kaiten-todo { background: rgba(30,150,228,0.12); }
.kaiten-wip  { background: rgba(245,158,11,0.12); }
.kaiten-done { background: rgba(34,197,94,0.12); }
.kaiten-col-icon { font-size: 1.1rem; }
.kaiten-col-title { font-weight: 700; font-size: 0.88rem; flex: 1; }
.kaiten-col-count {
  min-width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30,150,228,0.12); border-radius: 20px;
  font-size: 0.72rem; font-weight: 700; color: var(--text2);
}
.kaiten-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.kaiten-card {
  background: var(--card);
  border: 2px solid var(--border2);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: grab;
  transition: box-shadow .15s, transform .15s, opacity .15s;
  position: relative;
}
.kaiten-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.3); transform: translateY(-1px); }
.kaiten-card.kaiten-dragging { opacity: 0.4; transform: scale(0.97); cursor: grabbing; }
.kaiten-card-title { font-weight: 600; font-size: 0.87rem; margin-bottom: 5px; line-height: 1.4; }
.kaiten-card-desc {
  font-size: 0.75rem; color: var(--text2);
  margin-bottom: 7px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kaiten-card-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.kaiten-due { font-size: 0.7rem; color: var(--text3); }
.kaiten-due-late { color: #f87171 !important; font-weight: 700; }
.kaiten-overdue-badge {
  font-size: 0.68rem; color: #f87171; background: rgba(248,113,113,.12);
  border: 1px solid rgba(248,113,113,.25); border-radius: 6px; padding: 1px 6px;
}
.kaiten-module-badge {
  font-size: 0.68rem; color: #35B1FA; background: rgba(53,177,250,.1);
  border: 1px solid rgba(53,177,250,.2); border-radius: 6px; padding: 1px 6px;
}
.kaiten-from { font-size: 0.68rem; color: var(--text3); }
.kaiten-card-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.kaiten-move-btn {
  font-size: 0.68rem; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.05);
  color: var(--text2); cursor: pointer; transition: background .15s, color .15s;
}
.kaiten-move-btn:hover { background: rgba(30,150,228,0.15); color: var(--accent2); border-color: rgba(30,150,228,.4); }
.kaiten-move-wip:hover { background: rgba(245,158,11,.15); color: #fbbf24; border-color: rgba(245,158,11,.4); }
.kaiten-move-done:hover { background: rgba(34,197,94,.15); color: #4ade80; border-color: rgba(34,197,94,.4); }
.kaiten-empty { color: var(--text3); font-size: 0.82rem; text-align: center; padding: 24px 12px; }

/* Mobile: stack columns */
@media (max-width: 680px) {
  .kaiten-board { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════
   MOBILE ADAPTATION OVERHAUL v2 — comprehensive fixes
═══════════════════════════════════════════════════════ */

/* ── Hamburger menu button (shown on mobile) ── */
.hamburger-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  cursor: pointer; flex-shrink: 0;
  transition: background .2s;
}
.hamburger-btn:hover { background: rgba(30,150,228,0.15); }
.hamburger-btn span {
  display: block; width: 18px; height: 2px;
  background: var(--text); border-radius: 2px;
  position: relative;
}
.hamburger-btn span::before,
.hamburger-btn span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 2px; background: var(--text); border-radius: 2px;
}
.hamburger-btn span::before { top: -5px; }
.hamburger-btn span::after  { top: 5px; }

/* Sidebar mobile overlay */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 199;
  background: rgba(30,100,180,0.10);
  backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

@media (max-width: 1020px) {
  .hamburger-btn { display: flex; }

  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    display: flex !important;
    position: fixed;
    left: -240px;
    top: 0; bottom: 0;
    width: 220px;
    z-index: 200;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding-top: calc(var(--topbar-h) + 8px);
    box-shadow: none;
  }
  .sidebar.sidebar-open {
    left: 0;
    box-shadow: 4px 0 32px rgba(30,100,180,0.10);
  }

  /* Topbar: compact on tablet */
  .topbar { padding: 0 16px; gap: 10px; }
}

@media (max-width: 640px) {
  /* Topbar mobile */
  .topbar { padding: 0 12px; height: 54px !important; gap: 8px; }
  .topbar-logo { display: none; }
  .topbar-logo-sm { display: flex !important; font-size: 1.1rem; font-weight: 900; color: var(--accent2); }
  .search-wrap { flex: 1; min-width: 0; max-width: none; }
  #globalSearch { height: 36px; font-size: 0.78rem; padding: 7px 10px 7px 30px; }
  .search-icon { left: 8px; font-size: 0.8rem; }
  .streak-badge, .xp-badge { font-size: 0.68rem; padding: 4px 8px; min-height: 30px; }
  .topbar-user-chip { padding: 4px 10px 4px 4px; gap: 6px; }
  .topbar-user-chip .chip-name { display: none; }

  /* Cabinet hero mobile */
  .cabinet-v2-hero {
    grid-template-columns: 1fr !important;
    gap: 14px;
    text-align: center;
  }
  .cabinet-v2-avatar { margin: 0 auto; }
  .cabinet-v2-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .cabinet-v2-actions .btn { width: 100%; justify-content: center; }
  .cabinet-v2-quick { justify-content: center; }

  /* Cabinet stat grid mobile */
  .cabinet-stat-grid { grid-template-columns: repeat(2,1fr) !important; gap: 8px; }
  .cabinet-stat-card { padding: 12px; }
  .cabinet-stat-num { font-size: 1.4rem; }

  /* Cabinet tabs mobile */
  .cabinet-v2-tabs { gap: 4px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .cabinet-v2-tab-btn { font-size: 0.75rem; padding: 7px 12px; white-space: nowrap; }

  /* Stats v2 hero mobile */
  .stats-v2-hero { grid-template-columns: repeat(2,1fr) !important; gap: 8px; }
  .stats-v2-card { padding: 14px; }
  .stats-v2-num { font-size: 1.5rem; }

  /* Stats panel mobile */
  .stats-v2-panel { padding: 14px; }
  .stats-v2-panel-title { font-size: 0.82rem; flex-wrap: wrap; gap: 6px; }

  /* Skill rows mobile */
  .skill-row-v2 { grid-template-columns: 1fr; gap: 4px; }
  .skill-label-v2 { font-size: 0.75rem; }

  /* Leaderboard v2 mobile */
  .lb-v2-podium { gap: 8px; flex-wrap: wrap; justify-content: center; }
  .lb-v2-podium-cell { min-width: 80px; }
  .lb-v2-pod-name { font-size: 0.68rem; }
  .lb-v2-row { grid-template-columns: 36px 1fr 60px 50px; font-size: 0.78rem; }
  .lb-v2-row > :nth-child(5),
  .lb-v2-row > :nth-child(6) { display: none; }
  .lb-v2-table-head { grid-template-columns: 36px 1fr 60px 50px; font-size: 0.7rem; }
  .lb-v2-tabs { flex-wrap: wrap; gap: 4px; }
  .lb-v2-tab { font-size: 0.72rem; padding: 7px 12px; }

  /* Login modal mobile */
  .login-modal-card { padding: 24px 18px; max-width: 96vw; border-radius: 16px; }
  .login-modal-brand { gap: 8px; margin-bottom: 16px; }
  .login-modal-logo { width: 44px; height: 44px; font-size: 1.4rem; }
  .login-modal-title { font-size: 1.05rem; }

  /* Section head mobile */
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Module layout mobile */
  .module-layout { grid-template-columns: 1fr !important; }
  .module-detail-card { border-radius: 12px; padding: 16px; }

  /* Hero CTA mobile */
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .primary-btn, .hero-cta-row .btn-map { width: 100%; text-align: center; }

  /* Practice grid mobile */
  .practice-grid { grid-template-columns: 1fr !important; }

  /* Task item mobile */
  .task-item { padding: 14px; border-radius: 12px; }
  .task-prompt { font-size: 0.9rem; }
  .task-input-wrap { flex-direction: column; }
  .task-input-wrap .task-input { width: 100%; }
  .task-input-wrap .check-btn { width: 100%; }

  /* Video grid mobile */
  .video-grid { grid-template-columns: 1fr !important; }

  /* Two-grid mobile */
  .two-grid { grid-template-columns: 1fr !important; }

  /* Theory hero mobile */
  .theory-hero { flex-direction: column; padding: 18px; gap: 12px; }

  /* Onboarding wizard mobile */
  .wizard-card { padding: 0; border-radius: 16px; max-width: 95vw; }
  .wizard-inner { padding: 20px 18px; }

  /* Grade picker mobile */
  .grade-picker-grid { grid-template-columns: repeat(3,1fr); gap: 8px; }

  /* Home hero row mobile */
  .home-hero-row { grid-template-columns: 1fr !important; gap: 12px; }
  .home-right-col { flex-direction: column; }

  /* Infographic mobile */
  .inf-formula-row { grid-template-columns: 1fr !important; }
  .inf-compare-table { font-size: 0.72rem; }
  .inf-cols-2, .inf-cols-3, .inf-cols-4 { grid-template-columns: 1fr; }
}

/* ── Extra small: 320px ── */
@media (max-width: 360px) {
  .cabinet-stat-grid { grid-template-columns: 1fr 1fr !important; }
  .stats-v2-hero { grid-template-columns: 1fr 1fr !important; }
  .cabinet-v2-quick > * { font-size: 0.68rem; }
  .kaiten-board { grid-template-columns: 1fr; }
  .kaiten-card-actions { flex-direction: column; }
}

/* ── Touch targets ── */
@media (hover: none) and (pointer: coarse) {
  .btn, .tab-btn, .tab-link, .nav-btn, .ghost-btn,
  .primary-btn, .lm-submit-btn, .kaiten-move-btn {
    min-height: 44px;
  }
  .check-btn, .hint-btn { min-height: 48px; }
  .mobile-tabbar .tab-btn, .mobile-tabbar .tab-link { min-height: 52px; }
  .kaiten-card { cursor: default; }
  .kaiten-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .kaiten-move-btn { padding: 6px 12px; font-size: 0.75rem; min-height: 36px; }
}


/* ══════════════════════════════════════════════════════════
   SECTION TRANSITIONS — smooth fade/slide between pages
══════════════════════════════════════════════════════════ */
.page-section {
  animation: none;
}
.page-section.section-enter {
  animation: sectionFadeIn 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.page-section.section-exit {
  animation: sectionFadeOut 0.18s cubic-bezier(0.4, 0, 0.6, 1) both;
  pointer-events: none;
}
@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sectionFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* ══════════════════════════════════════════════════════════
   XP FLY ANIMATION + BADGE PULSE
══════════════════════════════════════════════════════════ */
.xp-fly-label {
  font-family: var(--font, sans-serif);
  font-weight: 800;
  font-size: 1.05rem;
  color: #fbbf24;
  text-shadow: 0 2px 10px rgba(251,191,36,0.5), 0 1px 3px rgba(30,100,180,0.09);
  pointer-events: none;
  user-select: none;
  z-index: 99999;
  letter-spacing: 0.02em;
}
@keyframes xpPulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(251,191,36,0.5); }
  50%  { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(251,191,36,0); }
  100% { transform: scale(1); }
}
.xp-badge-pulse {
  animation: xpPulse 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════
   PREMIUM KAITEN BOARD — redesigned, no garish emoji
══════════════════════════════════════════════════════════ */
.kaiten-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
  padding-top: 6px;
}
.kaiten-col {
  background: rgba(15,18,35,0.6);
  border: 1px solid rgba(30,150,228,0.09);
  border-radius: 16px;
  overflow: hidden;
  min-height: 240px;
  transition: box-shadow 0.2s, border-color 0.2s;
  backdrop-filter: blur(8px);
}
.kaiten-col.kaiten-dragover {
  box-shadow: 0 0 0 2px var(--accent2), 0 8px 32px rgba(30,150,228,0.18);
  border-color: var(--accent2);
}
.kaiten-col-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky; top: 0; z-index: 1;
  backdrop-filter: blur(12px);
}
/* Status strip — left border accent instead of emoji */
.kaiten-col--todo { border-top: 3px solid #1e96e4; }
.kaiten-col--wip  { border-top: 3px solid #f59e0b; }
.kaiten-col--done { border-top: 3px solid #22c55e; }
.kaiten-todo { background: rgba(30,150,228,0.10); }
.kaiten-wip  { background: rgba(245,158,11,0.10); }
.kaiten-done { background: rgba(34,197,94,0.10); }

/* Status dot replaces emoji icon */
.kaiten-col-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.kaiten-col--todo .kaiten-col-dot { background: #35B1FA; box-shadow: 0 0 6px rgba(53,177,250,0.6); }
.kaiten-col--wip  .kaiten-col-dot { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.6); }
.kaiten-col--done .kaiten-col-dot { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.6); }

.kaiten-col-title { font-weight: 700; font-size: 0.83rem; letter-spacing: 0.03em; text-transform: uppercase; flex: 1; color: var(--text); }
.kaiten-col-count {
  min-width: 22px; height: 22px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border-radius: 20px;
  font-size: 0.72rem; font-weight: 700; color: var(--text2);
}
.kaiten-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 40px; }

/* Premium card — full perimeter border, color coded by column */
.kaiten-card {
  background: var(--card);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 14px 16px 14px 18px;
  cursor: grab;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
  position: relative;
  overflow: hidden;
}
.kaiten-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 14px 0 0 14px;
  background: rgba(30,150,228,0.12);
  transition: background 0.18s;
}
.kaiten-col--todo .kaiten-card { border-color: rgba(30,150,228,0.35); }
.kaiten-col--todo .kaiten-card::before { background: #1e96e4; }
.kaiten-col--wip  .kaiten-card { border-color: rgba(245,158,11,0.35); }
.kaiten-col--wip  .kaiten-card::before { background: #f59e0b; }
.kaiten-col--done .kaiten-card { border-color: rgba(34,197,94,0.35); }
.kaiten-col--done .kaiten-card::before { background: #22c55e; }
.kaiten-card:hover {
  box-shadow: 0 6px 24px rgba(30,100,180,0.08);
  transform: translateY(-2px);
}
.kaiten-col--todo .kaiten-card:hover { border-color: rgba(30,150,228,0.65); }
.kaiten-col--wip  .kaiten-card:hover { border-color: rgba(245,158,11,0.65); }
.kaiten-col--done .kaiten-card:hover { border-color: rgba(34,197,94,0.65); }
.kaiten-card.kaiten-dragging { opacity: 0.35; transform: scale(0.96) rotate(-1deg); cursor: grabbing; }
.kaiten-card-title { font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; line-height: 1.45; color: var(--text); padding-left: 10px; }
.kaiten-card-desc {
  font-size: 0.75rem; color: var(--text2); margin-bottom: 8px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding-left: 10px;
}
.kaiten-card-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; padding-left: 10px; }

/* Minimal text badges — no emoji */
.kaiten-due { font-size: 0.68rem; color: var(--text3); background: rgba(255,255,255,0.05); border-radius: 4px; padding: 2px 6px; }
.kaiten-due-late { color: #f87171 !important; background: rgba(248,113,113,.08) !important; font-weight: 700; }
.kaiten-overdue-badge {
  font-size: 0.66rem; color: #f87171; background: rgba(248,113,113,.10);
  border: 1px solid rgba(248,113,113,.22); border-radius: 4px; padding: 2px 7px; font-weight: 600;
}
.kaiten-module-badge {
  font-size: 0.66rem; color: #7dd0fd; background: rgba(165,180,252,.08);
  border: 1px solid rgba(165,180,252,.18); border-radius: 4px; padding: 2px 7px;
}
.kaiten-from { font-size: 0.66rem; color: var(--text3); background: rgba(30,150,228,0.05); border-radius: 4px; padding: 2px 6px; }
.kaiten-card-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-left: 10px; }
.kaiten-move-btn {
  font-size: 0.68rem; padding: 4px 10px; border-radius: 6px;
  border: 1px solid rgba(30,150,228,0.12); background: rgba(30,150,228,0.05);
  color: var(--text3); cursor: pointer; transition: all 0.15s; letter-spacing: 0.01em;
}
.kaiten-move-btn:hover { background: rgba(30,150,228,0.18); color: #7dd0fd; border-color: rgba(53,177,250,.4); }


.kaiten-empty {
  color: var(--text3); font-size: 0.8rem; text-align: center;
  padding: 28px 16px; letter-spacing: 0.01em; line-height: 1.6;
}

/* Mobile: stack columns */
@media (max-width: 680px) {
  
}

/* ══════════════════════════════════════════════════════════
   LIGHT THEME — v2 elements complete fix
══════════════════════════════════════════════════════════ */
/* Kaiten board light */
[data-theme="light"] .kaiten-col {
  background: rgba(255,255,255,0.85);
  border-color: rgba(30,150,228,0.12);
}
[data-theme="light"] .kaiten-todo { background: rgba(30,150,228,0.06); }
[data-theme="light"] .kaiten-wip  { background: rgba(245,158,11,0.06); }
[data-theme="light"] .kaiten-done { background: rgba(34,197,94,0.06); }
[data-theme="light"] .kaiten-col-header { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .kaiten-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.07);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .kaiten-card:hover {
  box-shadow: 0 4px 16px rgba(30,150,228,0.12);
  border-color: rgba(30,150,228,0.2);
}
[data-theme="light"] .kaiten-move-btn {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
  color: #4a5568;
}
[data-theme="light"] .kaiten-module-badge {
  color: #1565a8; background: rgba(79,70,229,0.07);
  border-color: rgba(79,70,229,0.15);
}
[data-theme="light"] .kaiten-col-count { background: rgba(0,0,0,0.06); }
[data-theme="light"] .kaiten-empty { color: #9aa5b4; }

/* Stats v2 light */
[data-theme="light"] .stats-v2-hero .stats-v2-card,
[data-theme="light"] .stats-v2-card {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(30,150,228,0.12);
}
[data-theme="light"] .stats-v2-panel {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(30,150,228,0.12);
}
[data-theme="light"] .stats-v2-panel-title { color: #1a1f36; }
[data-theme="light"] .skill-row-v2 { border-bottom-color: rgba(0,0,0,0.05); }
[data-theme="light"] .skill-row-v2:hover { background: rgba(30,150,228,0.04); }

/* Leaderboard v2 light */
[data-theme="light"] .lb-v2-row {
  background: rgba(255,255,255,0.8);
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .lb-v2-row:hover { background: rgba(30,150,228,0.05); }
[data-theme="light"] .lb-v2-header { background: rgba(240,244,255,0.9); border-color: rgba(30,150,228,0.12); }
[data-theme="light"] .lb-v2-rank-badge { background: rgba(0,0,0,0.06); color: #4a5568; }

/* Cabinet v2 light */
[data-theme="light"] .cabinet-v2-hero,
[data-theme="light"] .cabinet-v2-tabs {
  background: rgba(255,255,255,0.8);
  border-color: rgba(30,150,228,0.12);
}
[data-theme="light"] .cabinet-v2-tab-btn {
  color: #4a5568;
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .cabinet-v2-tab-btn.active {
  background: rgba(30,150,228,0.1);
  color: #1565a8;
  border-color: rgba(30,150,228,0.25);
}
[data-theme="light"] .cabinet-stat-card {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(30,150,228,0.1);
}

/* Login modal light */
[data-theme="light"] .login-modal-overlay { background: rgba(240,244,255,0.85); }
[data-theme="light"] .login-modal {
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(30,150,228,0.15);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
[data-theme="light"] .lm-tab { color: #4a5568; }
[data-theme="light"] .lm-tab.active { color: #1565a8; border-bottom-color: #1565a8; }
[data-theme="light"] .lm-input { background: rgba(240,244,255,0.9); border-color: rgba(30,150,228,0.2); color: #1a1f36; }
[data-theme="light"] .lm-input:focus { border-color: #1e96e4; }
[data-theme="light"] .lm-submit-btn { background: linear-gradient(135deg,#1e96e4,#1e96e4); }
[data-theme="light"] .lm-guest-btn { color: #4a5568; border-color: rgba(0,0,0,0.12); }

/* Cabinet tab content light */
[data-theme="light"] .cabinet-tab-content { color: #1a1f36; }
[data-theme="light"] .forecast-card {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(30,150,228,0.12);
}

/* ══════════════════════════════════════════════════════════
   EXAM MODE — timed test overlay
══════════════════════════════════════════════════════════ */
.exam-mode-overlay {
  position: fixed; inset: 0; z-index: 5000;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.exam-mode-overlay.hidden { display: none; }
.exam-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.exam-title {
  font-weight: 800; font-size: 1.1rem; letter-spacing: 0.02em;
  color: var(--text);
  flex: 1;
}
.exam-timer {
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-size: 1.4rem; font-weight: 800;
  color: #4ade80;
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: 10px; padding: 6px 16px;
  letter-spacing: 0.08em;
  transition: color 0.3s, background 0.3s, border-color 0.3s;
  min-width: 90px; text-align: center;
}
.exam-timer.exam-timer-warn {
  color: #f59e0b; background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.3);
  animation: timerPulse 1s ease-in-out infinite;
}
.exam-timer.exam-timer-critical {
  color: #f87171; background: rgba(248,113,113,0.12);
  border-color: rgba(248,113,113,0.35);
  animation: timerPulse 0.5s ease-in-out infinite;
}
@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.exam-progress-bar {
  width: 100%; height: 3px;
  background: var(--border);
  position: relative;
}
.exam-progress-fill {
  height: 100%; background: linear-gradient(90deg,#1e96e4,#35B1FA);
  transition: width 1s linear;
  border-radius: 2px;
}
.exam-body { flex: 1; padding: 24px; max-width: 860px; margin: 0 auto; width: 100%; }
.exam-task-card {
  background: var(--card);
  box-shadow: 0 2px 14px rgba(0,0,0,.07);
  border-radius: 14px; padding: 20px 24px;
  margin-bottom: 16px;
}
.exam-task-num {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 8px;
}
.exam-task-text {
  font-size: 0.95rem; line-height: 1.6; color: var(--text);
  margin-bottom: 14px;
}
.exam-task-diff {
  font-size: 0.68rem; padding: 2px 8px; border-radius: 4px; font-weight: 700;
  display: inline-block; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em;
}
.exam-diff-base { background: rgba(34,197,94,0.12); color: #4ade80; }
.exam-diff-std  { background: rgba(30,150,228,0.12); color: #7dd0fd; }
.exam-diff-hard { background: rgba(245,158,11,0.12); color: #fbbf24; }
.exam-task-input {
  background: var(--surface);
  border: 1.5px solid var(--border2);
  border-radius: 9px; padding: 9px 12px;
  color: var(--text); font-size: 0.92rem;
  width: 100%; max-width: 280px;
  outline: none; transition: border-color 0.18s;
}
.exam-task-input:focus { border-color: var(--accent); }
.exam-task-input.exam-answered { box-shadow: inset 0 0 0 1.5px rgba(34,197,94,.5); background: rgba(34,197,94,0.05); }
.exam-footer {
  position: sticky; bottom: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.exam-answered-count { font-size: 0.82rem; color: var(--text2); }
.exam-submit-btn {
  background: linear-gradient(135deg,#1565a8,#2FAAD4);
  color: #fff; border: none; border-radius: 10px;
  padding: 10px 28px; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: opacity 0.18s, transform 0.18s;
  letter-spacing: 0.02em;
}
.exam-submit-btn:hover { opacity: 0.88; transform: translateY(-1px); }

/* Exam result modal */
.exam-result-modal {
  position: fixed; inset: 0; z-index: 6000;
  background: rgba(8,10,20,0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.exam-result-modal.hidden { display: none; }
.exam-result-card {
  background: var(--card);
  border: 1px solid var(--border2);
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  border-radius: 20px; padding: 40px 48px;
  max-width: 480px; width: 100%; text-align: center;
}
.exam-result-score {
  font-size: 4rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg,#1e96e4,#6FC3F7);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.exam-result-label {
  font-size: 0.9rem; color: var(--text2); margin-bottom: 24px; line-height: 1.5;
}
.exam-result-details { text-align: left; margin-bottom: 28px; }
.exam-result-row {
  display: flex; justify-content: space-between; padding: 8px 0;
  color: var(--text);
  border-bottom: 1px solid var(--border); font-size: 0.85rem;
}
.exam-result-row:last-child { border-bottom: none; }
.exam-result-close {
  background: rgba(30,150,228,0.15); border: 1px solid rgba(30,150,228,0.3);
  color: var(--accent); border-radius: 10px; padding: 10px 24px;
  font-size: 0.9rem; font-weight: 700; cursor: pointer;
  transition: background 0.18s;
}
.exam-result-close:hover { background: rgba(30,150,228,0.25); }

/* Exam mode button (in map view) — solid gradient fill (not a faint tint) so
   it reads as a distinct, prominent call-to-action rather than a secondary
   toggle button next to the lesson title. */
.exam-launch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  border: none;
  color: #1c1006; border-radius: 10px;
  padding: 9px 18px; font-size: 0.82rem; font-weight: 800;
  cursor: pointer; transition: all 0.18s; letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(245,158,11,.35);
}
.exam-launch-btn::before { content: "🏆"; font-size: 0.95em; }
/* Root-cause fix (point 4): CSS transform does not stack across rules — this
   hover rule's translateY(-1px) used to REPLACE (not add to) the button's
   own vertical-centering translateY(-50%) set by
   .map-practice-header .exam-launch-btn, so on hover the button visibly
   jumped out of its centred position. Combine both offsets in one value so
   centring is preserved while still lifting slightly on hover. */
.exam-launch-btn:hover { box-shadow: 0 6px 20px rgba(245,158,11,.5); transform: translateY(-1px); }
.map-practice-header .exam-launch-btn:hover { transform: translateY(calc(-50% - 1px)); }

/* Sound toggle button */
.sound-toggle-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 5px 10px;
  cursor: pointer; color: var(--text3); font-size: 0.75rem;
  transition: all 0.18s; display: inline-flex; align-items: center; gap: 5px;
}
.sound-toggle-btn:hover { border-color: rgba(255,255,255,0.22); color: var(--text2); }
.sound-toggle-btn.sound-on { color: #4ade80; border-color: rgba(74,222,128,0.3); }

/* Forgot password link */
.forgot-pass-link {
  font-size: 0.75rem; color: var(--text3); cursor: pointer;
  text-decoration: none; display: inline-block; margin-top: 6px;
}
.forgot-pass-link:hover { color: var(--accent2); }

/* ══════════════════════════════════════════════════════════
   ADMIN PASSWORD RESET BUTTON
══════════════════════════════════════════════════════════ */
.user-reset-pass-btn {
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25);
  color: #fbbf24; border-radius: 6px; padding: 3px 8px;
  font-size: 0.68rem; font-weight: 700; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.user-reset-pass-btn:hover { background: rgba(245,158,11,0.2); }


/* ══════════════════════════════════════════════
   v10 VISUAL OVERHAUL
══════════════════════════════════════════════ */

/* ─── Topbar: slightly taller ─────────────────── */
:root { --topbar-h: 64px; }

/* ─── Grade Quick Nav: number + "класс" on same line ─── */
.grade-quick-header-row {
  display: flex; align-items: baseline; gap: 3px;
  justify-content: center; line-height: 1; margin-bottom: 4px;
}
.grade-quick-num {
  font-size: 1.45rem !important; font-weight: 900;
  background: var(--accent-g); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
}
.grade-quick-lbl {
  font-size: 0.68rem !important; font-weight: 700; letter-spacing: 0.01em;
  /* Match gradient of the numbers */
  background: var(--accent-g); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
/* Progress bar only - no percentage text */
.grade-quick-pct { display: none !important; }
/* Smaller compact buttons */
.grade-quick-btn { padding: 10px 6px !important; min-height: 60px !important; }
.grade-quick-bar { margin-top: 4px !important; height: 3px !important; border-radius: 3px !important; }

/* ─── Home quick row ─────────────────────────── */
.home-quick-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-bottom: 24px;
}
.home-quick-card {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 16px; padding: 18px 20px;
  display: flex; align-items: center; gap: 16px;
  cursor: pointer; transition: all 0.2s;
}
.home-quick-card:hover { border-color: rgba(30,150,228,0.4); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(30,150,228,0.15); }
.home-quick-icon { font-size: 1.8rem; }
.home-quick-val { font-size: 1.5rem; font-weight: 800; color: var(--accent2); }
.home-quick-lbl { font-size: 0.75rem; color: var(--text2); font-weight: 500; margin-top: 2px; }

/* ─── Cabinet Hero: avatar photo support ─────── */
.cabinet-v2-avatar.has-photo {
  background: none !important; color: transparent;
}

/* ─── Cabinet Tabs v10 ───────────────────────── */
.cabinet-v2-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: rgba(30,150,228,0.05); border-radius: 14px;
  margin-bottom: 20px; border: 1px solid var(--border2);
  overflow-x: auto; scrollbar-width: none;
}
.cabinet-v2-tabs::-webkit-scrollbar { display: none; }
.cabinet-v2-tab-btn {
  flex: 1; min-width: 110px; padding: 10px 16px;
  border: none !important; outline: none !important;
  background: transparent; color: var(--text2);
  font-size: 0.82rem; font-weight: 600; border-radius: 10px;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.cabinet-v2-tab-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.cabinet-v2-tab-btn.active {
  background: rgba(30,150,228,0.15); color: var(--accent2);
  border: none !important;
}

/* ─── HW Summary Strip (hidden, replaced by full card outline) ── */
.hw-summary-strip { display: none !important; }
.hw-summary-strip-x {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 18px;
}
.hw-summary-item {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 14px; padding: 14px; text-align: center;
  position: relative; overflow: hidden;
}
.hw-summary-item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 14px 14px 0 0;
}
.hw-summary-item.todo::before { background: #f59e0b; }
.hw-summary-item.wip::before  { background: #1e96e4; }
.hw-summary-item.done::before { background: #22c55e; }
.hw-summary-item.total::before{ background: var(--text3); }
.hw-summary-num { font-size: 1.6rem; font-weight: 800; }
.hw-summary-item.todo .hw-summary-num { color: #f59e0b; }
.hw-summary-item.wip  .hw-summary-num { color: #35B1FA; }
.hw-summary-item.done .hw-summary-num { color: #22c55e; }
.hw-summary-item.total .hw-summary-num { color: var(--text2); }
.hw-summary-lbl { font-size: 0.7rem; color: var(--text3); font-weight: 500; margin-top: 2px; }

/* ─── Kaiten: open module button ─────────────── */
.kaiten-open-module-btn {
  width: 100%; padding: 8px 12px; margin: 8px 0 4px;
  background: rgba(30,150,228,0.12); border: 1px solid rgba(30,150,228,0.3);
  color: var(--accent2); border-radius: 8px; font-size: 0.78rem;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.kaiten-open-module-btn:hover { background: rgba(30,150,228,0.2); }

/* ─── Achievements v2 ─────────────────────────── */
.ach-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 8px;
}
.ach-page-title { font-size: 1.3rem; font-weight: 800; }
.ach-page-sub { font-size: 0.82rem; color: var(--accent2); font-weight: 600; }

.achievement-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.ach-v2-card {
  position: relative; border-radius: 20px; padding: 20px 14px 16px;
  text-align: center; border: 1px solid var(--border2);
  transition: all 0.3s; cursor: default; overflow: hidden;
  background: var(--card);
}
.ach-v2-card.unlocked {
  background: linear-gradient(135deg, rgba(30,150,228,0.08), rgba(53,177,250,0.08));
  border-color: rgba(30,150,228,0.4);
  box-shadow: 0 4px 24px rgba(30,150,228,0.15), inset 0 0 0 1px rgba(30,150,228,0.2);
}
.ach-v2-card.locked { opacity: 0.5; filter: grayscale(0.6); }
.ach-v2-card.unlocked:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(30,150,228,0.25); }

/* Rarity glow */
.ach-v2-glow {
  position: absolute; inset: 0; border-radius: 20px;
  opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(circle at 50% 0%, rgba(30,150,228,0.2), transparent 70%);
  pointer-events: none;
}
.ach-v2-card.unlocked .ach-v2-glow { opacity: 1; }

.ach-v2-icon-wrap { position: relative; display: inline-block; margin-bottom: 8px; }
.ach-v2-icon { font-size: 2.4rem; line-height: 1; display: block; }
.ach-v2-check {
  position: absolute; bottom: -4px; right: -8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #22c55e; color: #fff;
  font-size: 0.65rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card);
}
.ach-v2-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.ach-v2-desc { font-size: 0.72rem; color: var(--text2); line-height: 1.4; margin-bottom: 6px; }
.ach-v2-xp {
  font-size: 0.72rem; font-weight: 700; color: #f59e0b;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25);
  border-radius: 6px; padding: 2px 8px; display: inline-block;
}
.ach-v2-lock-hint { font-size: 0.68rem; color: var(--text3); }

/* ─── Achievement Popup ──────────────────────── */
.ach-popup-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.35s;
  pointer-events: none;
}
.ach-popup-overlay.visible { opacity: 1; pointer-events: all; }
.ach-popup-card {
  position: relative; background: linear-gradient(135deg, #0f1623, #1a1f35);
  border: 1px solid rgba(30,150,228,0.5);
  border-radius: 28px; padding: 40px 32px 32px;
  text-align: center; max-width: 340px; width: 90%;
  box-shadow: 0 0 0 1px rgba(30,150,228,0.09), 0 32px 64px rgba(30,100,180,0.10), 0 0 80px rgba(30,150,228,0.25);
  transform: scale(0.85); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  overflow: hidden;
}
.ach-popup-overlay.visible .ach-popup-card { transform: scale(1); }
.ach-popup-sparks { position: absolute; inset: 0; pointer-events: none; }
.ach-spark {
  position: absolute; top: 50%; left: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color, #f59e0b);
  animation: sparkFly 0.8s ease-out var(--delay, 0s) both;
}
@keyframes sparkFly {
  0% { transform: translate(-50%,-50%) rotate(var(--angle)) translateY(0) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) rotate(var(--angle)) translateY(-80px) scale(0); opacity: 0; }
}
.ach-popup-icon { font-size: 4rem; margin-bottom: 12px; display: block; animation: achIconPop 0.5s 0.2s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes achIconPop { from { transform: scale(0) rotate(-20deg); } to { transform: scale(1) rotate(0); } }
.ach-popup-label {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em;
  color: #f59e0b; margin-bottom: 8px;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25);
  border-radius: 20px; padding: 4px 12px; display: inline-block;
}
.ach-popup-title { font-size: 1.5rem; font-weight: 900; margin-bottom: 8px; background: var(--accent-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ach-popup-desc { font-size: 0.85rem; color: var(--text2); margin-bottom: 14px; line-height: 1.5; }
.ach-popup-xp {
  font-size: 1rem; font-weight: 800; color: #f59e0b;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
  border-radius: 12px; padding: 6px 16px; display: inline-block; margin-bottom: 20px;
}
.ach-popup-close {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none; color: #fff; font-size: 0.9rem; font-weight: 700;
  padding: 12px 32px; border-radius: 12px; cursor: pointer;
  width: 100%; transition: opacity 0.2s;
}
.ach-popup-close:hover { opacity: 0.9; }

/* ─── Settings Tab ────────────────────────────── */
.settings-panel { display: flex; flex-direction: column; gap: 20px; }
.settings-section {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 18px; overflow: hidden;
}
.settings-section-title {
  padding: 14px 20px 12px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text3);
  border-bottom: 1px solid var(--border2);
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; gap: 16px;
  border-bottom: 1px solid rgba(30,150,228,0.05);
  transition: background 0.15s;
}
.settings-row:last-child { border-bottom: none; }
.settings-row:hover { background: rgba(255,255,255,0.02); }
.settings-row-left { flex: 1; min-width: 0; }
.settings-row-label { font-size: 0.88rem; font-weight: 600; margin-bottom: 2px; }
.settings-row-desc { font-size: 0.75rem; color: var(--text3); }
.settings-row-right { flex-shrink: 0; }
.settings-select {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 10px; color: var(--text); padding: 8px 12px;
  font-size: 0.85rem; outline: none; cursor: pointer;
}
.settings-track-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.settings-track-btn {
  padding: 7px 14px; border-radius: 8px; font-size: 0.78rem; font-weight: 600;
  border: 1px solid var(--border2); background: var(--surface); color: var(--text2);
  cursor: pointer; transition: all 0.2s;
}
.settings-track-btn.active {
  background: rgba(30,150,228,0.15); border-color: rgba(30,150,228,0.4); color: var(--accent2);
}
.settings-toggle {
  position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer;
}
.settings-toggle input { opacity: 0; width: 0; height: 0; }
.settings-toggle-slider {
  position: absolute; inset: 0; background: var(--surface);
  border: 1px solid var(--border2); border-radius: 13px; transition: 0.3s;
}
.settings-toggle-slider::before {
  content: ""; position: absolute; width: 20px; height: 20px;
  border-radius: 50%; background: var(--text3);
  top: 2px; left: 2px; transition: 0.3s;
}
.settings-toggle input:checked + .settings-toggle-slider { background: rgba(30,150,228,0.2); border-color: rgba(30,150,228,0.5); }
.settings-toggle input:checked + .settings-toggle-slider::before { transform: translateX(20px); background: var(--accent2); }

/* Avatar upload */
.avatar-upload-label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.avatar-upload-preview {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700; color: var(--text2);
  overflow: hidden; flex-shrink: 0;
}
.avatar-upload-btn {
  font-size: 0.8rem; font-weight: 600; color: var(--accent2);
  text-decoration: underline; cursor: pointer;
}
.settings-actions { padding: 8px 0 4px; }
.settings-save-btn {
  width: 100%; padding: 14px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none; color: #fff; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; transition: opacity 0.2s;
}
.settings-save-btn:hover { opacity: 0.9; }

/* ─── Notifications Tab ───────────────────────── */
.notif-page {}
.notif-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.notif-page-title { font-size: 1.3rem; font-weight: 800; }
.notif-clear-btn {
  padding: 7px 14px; border-radius: 8px; font-size: 0.78rem; font-weight: 600;
  border: 1px solid var(--border2); background: var(--surface); color: var(--text2);
  cursor: pointer; transition: all 0.2s;
}
.notif-clear-btn:hover { border-color: rgba(248,113,113,0.4); color: #f87171; }
.notif-list { display: flex; flex-direction: column; gap: 8px; }
.notif-empty {
  text-align: center; padding: 48px 20px; color: var(--text3);
}
.notif-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.notif-item {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 14px; padding: 14px 16px;
  cursor: pointer; transition: all 0.2s; position: relative;
}
.notif-item.unread { border-color: rgba(30,150,228,0.3); background: rgba(30,150,228,0.05); }
.notif-item.unread::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px;
  width: 3px; background: var(--accent2); border-radius: 0 3px 3px 0;
}
.notif-item:hover { background: rgba(30,150,228,0.05); }
.notif-item-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: 0.88rem; font-weight: 600; margin-bottom: 3px; }
.notif-item-msg { font-size: 0.78rem; color: var(--text2); line-height: 1.4; }
.notif-item-time { font-size: 0.7rem; color: var(--text3); margin-top: 4px; }
.notif-item-action {
  flex-shrink: 0; padding: 6px 12px; border-radius: 8px;
  background: rgba(30,150,228,0.12); border: 1px solid rgba(30,150,228,0.3);
  color: var(--accent2); font-size: 0.75rem; font-weight: 600; cursor: pointer;
  align-self: center; transition: all 0.2s; white-space: nowrap;
}
.notif-item-action:hover { background: rgba(30,150,228,0.2); }

/* ─── Stats Section Visual Overhaul ──────────── */
.stats-charts-row { margin-bottom: 16px; }
.stats-solved-panel, .stats-types-panel {
  position: relative; overflow: hidden;
}
.stats-v2-panel {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 18px; padding: 20px;
  margin-bottom: 16px;
}
.stats-v2-panel-title {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text2); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.stats-v2-hero {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 12px;
  margin-bottom: 20px;
}
.stats-v2-card {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 16px; padding: 18px 14px;
  display: flex; flex-direction: column; align-items: center;
  position: relative; overflow: hidden; transition: all 0.2s;
}
.stats-v2-card:hover { transform: translateY(-2px); border-color: rgba(30,150,228,0.3); }
.stats-v2-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 16px 16px 0 0;
}
.stats-v2-card.green::before  { background: #22c55e; }
.stats-v2-card.gold::before   { background: #f59e0b; }
.stats-v2-card.orange::before { background: #f97316; }
.stats-v2-card.accent::before { background: #1e96e4; }
.stats-v2-card.teal::before   { background: #06b6d4; }
.stats-v2-icon { font-size: 1.6rem; margin-bottom: 8px; }
.stats-v2-val { font-size: 1.5rem; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.stats-v2-lbl { font-size: 0.68rem; color: var(--text2); font-weight: 500; text-align: center; }

/* ─── Map / Module Cards: contrast on filter change ── */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px; }
.module-card {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 18px; padding: 18px; cursor: pointer;
  transition: all 0.25s; position: relative; overflow: hidden;
}
.module-card:hover { border-color: rgba(30,150,228,0.4); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(30,150,228,0.15); }
/* Ensure module cards are always readable regardless of grade/section */
.module-card .module-title { color: var(--text) !important; font-weight: 700 !important; }
.module-card .module-meta  { color: var(--text2) !important; }
.module-card .module-block-badge {
  background: rgba(30,150,228,0.12); color: var(--accent2);
  border: 1px solid rgba(30,150,228,0.25); border-radius: 6px;
  padding: 2px 8px; font-size: 0.68rem; font-weight: 600;
}
/* Track-based top border color */
.module-card[data-track="school"]::before  { content:""; position:absolute; top:0;left:0;right:0;height:3px;background:#1e96e4;border-radius:18px 18px 0 0; }
.module-card[data-track="oge"]::before    { content:""; position:absolute; top:0;left:0;right:0;height:3px;background:#22c55e;border-radius:18px 18px 0 0; }
.module-card[data-track="ege"]::before    { content:""; position:absolute; top:0;left:0;right:0;height:3px;background:#f59e0b;border-radius:18px 18px 0 0; }
.module-card[data-track="olymp"]::before  { content:""; position:absolute; top:0;left:0;right:0;height:3px;background:#ec4899;border-radius:18px 18px 0 0; }

/* ─── Practice panels: Mastery / Review / Error bank ── */
.practice-top-panels {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 14px;
  margin-bottom: 18px;
}
.practice-top-card {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 18px; padding: 16px;
  position: relative; overflow: hidden;
}
.practice-top-card-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.practice-top-card-header h4 { font-size: 0.9rem; font-weight: 700; flex: 1; }
.practice-panel-badge {
  background: rgba(30,150,228,0.15); color: var(--accent2);
  border: 1px solid rgba(30,150,228,0.3); border-radius: 8px;
  padding: 2px 8px; font-size: 0.72rem; font-weight: 700; min-width: 24px;
  text-align: center;
}
.practice-top-clickable { cursor: pointer; transition: all 0.2s; }
.practice-top-clickable:hover { border-color: rgba(30,150,228,0.4); box-shadow: 0 4px 16px rgba(30,150,228,0.12); }

/* ─── Review/Error: remove from review button ─── */
.task-review-remove-btn {
  font-size: 0.7rem; padding: 3px 10px; border-radius: 6px;
  background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3);
  color: #f87171; cursor: pointer; transition: all 0.15s; margin-left: 6px;
}
.task-review-remove-btn:hover { background: rgba(248,113,113,0.2); }

/* ─── Light theme fixes for new elements ─────── */
[data-theme="light"] .home-quick-card { background: #fff; border-color: var(--border-l); }
[data-theme="light"] .home-quick-card:hover { border-color: #1e96e4; }
[data-theme="light"] .hw-summary-item { background: #fff; border-color: var(--border-l); }
[data-theme="light"] .ach-v2-card { background: #fff; border-color: var(--border-l); }
[data-theme="light"] .ach-v2-card.unlocked { background: linear-gradient(135deg,rgba(30,150,228,0.05),rgba(53,177,250,0.05)); border-color: rgba(30,150,228,0.3); }
[data-theme="light"] .settings-section { background: #fff; border-color: var(--border-l); }
[data-theme="light"] .settings-select { background: #f5f5f5; border-color: var(--border-l); color: #111; }
[data-theme="light"] .settings-track-btn { background: #f5f5f5; border-color: var(--border-l); color: #555; }
[data-theme="light"] .notif-item { background: #fff; border-color: var(--border-l); }
[data-theme="light"] .notif-item.unread { background: rgba(30,150,228,0.04); border-color: rgba(30,150,228,0.25); }
[data-theme="light"] .stats-v2-card { background: #fff; border-color: var(--border-l); }
[data-theme="light"] .stats-v2-panel { background: #fff; border-color: var(--border-l); }
[data-theme="light"] .module-card { background: #fff; border-color: var(--border-l); }
[data-theme="light"] .cabinet-v2-tabs { background: rgba(0,0,0,0.04); border-color: var(--border-l); }
[data-theme="light"] .cabinet-v2-tab-btn.active { background: rgba(30,150,228,0.1); border-color: rgba(30,150,228,0.3); }

/* ─── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
  .home-quick-row { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .home-quick-card { padding: 12px; }
  .home-quick-val { font-size: 1.2rem; }
  .hw-summary-strip { grid-template-columns: repeat(2,1fr); }
  .stats-v2-hero { grid-template-columns: repeat(3,1fr); }
  .achievement-grid-v2 { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); }
  
  .cabinet-v2-tab-btn { min-width: 90px; font-size: 0.75rem; padding: 8px 10px; }
}
@media (max-width: 480px) {
  .home-quick-row { grid-template-columns: 1fr 1fr; }
  .hw-summary-strip { grid-template-columns: repeat(4,1fr); }
  .hw-summary-num { font-size: 1.2rem; }
  .stats-v2-hero { grid-template-columns: repeat(2,1fr); }
  .achievement-grid-v2 { grid-template-columns: repeat(2,1fr); }
}

/* ═══════════════════════════════════════════════════════
   v11 ADDITIONS
═══════════════════════════════════════════════════════ */

/* ─── Kaiten Card: full border outline ─────────────── */
.kaiten-card {
  border: 1.5px solid var(--border2) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.kaiten-card:hover {
  border-color: rgba(30,150,228,0.4) !important;
  box-shadow: 0 4px 16px rgba(30,150,228,0.12) !important;
}

/* ─── Achievement hover date tooltip ───────────────── */
.ach-v2-icon-wrap { position: relative; display: inline-block; }
.ach-v2-date-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  background: rgba(17,17,27,0.96); color: #e2e8f0;
  font-size: 0.7rem; font-weight: 600; padding: 5px 10px;
  border-radius: 8px; pointer-events: none; opacity: 0;
  transition: opacity 0.18s; z-index: 30;
  border: 1px solid rgba(30,150,228,0.12);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.ach-v2-date-tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(17,17,27,0.96);
}
.ach-v2-icon-wrap:hover .ach-v2-date-tooltip { opacity: 1; }

/* ─── Floating Notifications ────────────────────────── */
#floatingNotifContainer {
  position: fixed; bottom: 20px; right: 20px;
  z-index: 9999; display: flex; flex-direction: column;
  gap: 10px; pointer-events: none;
  max-width: 340px; width: calc(100vw - 40px);
}
.floating-notif {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  display: flex; align-items: flex-start; gap: 12px;
  pointer-events: all; cursor: pointer;
  animation: floatIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
  position: relative; overflow: hidden;
  border-left: 3px solid var(--accent2);
}
.floating-notif::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,rgba(30,150,228,0.05),transparent);
  pointer-events: none;
}
.floating-notif.exiting { animation: floatOut 0.25s ease forwards; }
@keyframes floatIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes floatOut {
  to { transform: translateX(120%); opacity: 0; }
}
.fn-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.fn-body { flex: 1; min-width: 0; }
.fn-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 2px; }
.fn-msg { font-size: 0.75rem; color: var(--text2); line-height: 1.3; }
.fn-close {
  flex-shrink: 0; width: 24px; height: 24px;
  border-radius: 50%; background: rgba(255,255,255,0.08);
  border: none; color: var(--text3); font-size: 1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s; line-height: 1;
}
.fn-close:hover { background: rgba(248,113,113,0.15); color: #f87171; }

/* ─── Stats v11: full border on ALL stat elements ───── */
.stats-v2-card { border: 1.5px solid var(--border2) !important; }
.stats-v2-panel { border: 1.5px solid var(--border2) !important; }
.skill-chart-wrap { border: 1.5px solid var(--border2); border-radius: 18px; padding: 20px; margin-bottom: 16px; background: var(--card); }
.activity-chart-wrap { border: 1.5px solid var(--border2); border-radius: 18px; padding: 20px; margin-bottom: 16px; background: var(--card); }
.progress-bars-wrap { border: 1.5px solid var(--border2); border-radius: 18px; padding: 20px; margin-bottom: 16px; background: var(--card); }

/* ─── Stats: Line Chart for ОГЭ/ЕГЭ ─────────────────── */
.stats-line-chart-wrap {
  background: var(--card); border: 1.5px solid var(--border2);
  border-radius: 18px; padding: 20px; margin-bottom: 16px;
}
.stats-line-chart-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.stats-line-chart-title {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text2);
}
.stats-line-filter-btns { display: flex; gap: 6px; }
.stats-line-filter-btn {
  padding: 5px 14px; border-radius: 8px; font-size: 0.75rem; font-weight: 600;
  border: 1px solid var(--border2); background: var(--surface); color: var(--text2);
  cursor: pointer; transition: all 0.2s;
}
.stats-line-filter-btn.active {
  background: rgba(30,150,228,0.15); border-color: rgba(30,150,228,0.4); color: var(--accent2);
}
#statsLineChartCanvas { display: block; width: 100%; height: 220px; }

/* ─── Global Progress & Leader Rank cards: improved layout ─── */
.home-info-cards-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 24px;
}
.info-card.glass {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--border2);
}
.prog-card-label {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text3); margin-bottom: 4px;
}
.prog-big-pct {
  font-size: 2.4rem; font-weight: 900; line-height: 1;
  background: var(--accent-g); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.prog-sub-line {
  font-size: 0.75rem; color: var(--text2); font-weight: 500;
}
.prog-bar-wrap { margin: 6px 0; }
.prog-bar-track {
  height: 8px; background: rgba(30,150,228,0.09);
  border-radius: 4px; overflow: hidden;
}
.prog-bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 0.6s ease;
}
.prog-total-line { font-size: 0.7rem; color: var(--text3); }
.prog-action-btn {
  margin-top: auto; padding: 9px 0; border-radius: 10px;
  background: rgba(30,150,228,0.12); border: 1px solid rgba(30,150,228,0.25);
  color: var(--accent2); font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s; text-align: center;
}
.prog-action-btn:hover { background: rgba(30,150,228,0.2); }

/* Rank card improved */
.rank-card-icon { font-size: 2.2rem; margin-bottom: 2px; }
.rank-big { font-size: 2.4rem; font-weight: 900; line-height: 1;
  background: var(--accent-g); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.rank-of-total { font-size: 0.75rem; color: var(--text2); margin-top: 2px; }

/* ─── Map: Review queue improved panel ──────────── */
.review-queue-panel {
  background: var(--card); border: 1.5px solid rgba(30,150,228,0.25);
  border-radius: 18px; padding: 20px; margin-bottom: 18px;
}
.review-queue-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.review-queue-title {
  font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.review-queue-count {
  background: rgba(30,150,228,0.15); color: var(--accent2);
  border: 1px solid rgba(30,150,228,0.3); border-radius: 20px;
  padding: 2px 10px; font-size: 0.78rem; font-weight: 700;
}
.review-start-btn {
  padding: 9px 20px; border-radius: 10px; font-size: 0.85rem; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none; color: #fff; cursor: pointer; transition: opacity 0.2s;
}
.review-start-btn:hover { opacity: 0.9; }
.review-task-panel {
  margin-top: 16px; border-top: 1px solid var(--border2); padding-top: 16px;
}
.review-task-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(30,150,228,0.05);
}
.review-task-item:last-child { border-bottom: none; }
.review-task-text { flex: 1; font-size: 0.83rem; line-height: 1.4; color: var(--text2); }
.review-task-actions { display: flex; gap: 6px; flex-shrink: 0; }
.review-task-solve-btn {
  padding: 5px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 600;
  background: rgba(30,150,228,0.12); border: 1px solid rgba(30,150,228,0.3);
  color: var(--accent2); cursor: pointer; transition: all 0.2s;
}
.review-task-solve-btn:hover { background: rgba(30,150,228,0.2); }
.review-task-remove-btn {
  padding: 5px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 600;
  background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25);
  color: #f87171; cursor: pointer; transition: all 0.2s;
}
.review-task-remove-btn:hover { background: rgba(248,113,113,0.2); }

/* ─── Light theme updates ───────────────────────── */
[data-theme="light"] .cabinet-v2-tab-btn.active { border: none !important; background: rgba(30,150,228,0.12); }
[data-theme="light"] .kaiten-card { border-color: var(--border-l) !important; }
[data-theme="light"] .floating-notif { background: #fff; border-color: var(--border-l); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
[data-theme="light"] .stats-line-chart-wrap { background: #fff; border-color: var(--border-l); }
[data-theme="light"] .skill-chart-wrap { background: #fff; border-color: var(--border-l); }
[data-theme="light"] .review-queue-panel { background: #fff; border-color: rgba(30,150,228,0.2); }

/* ═══════════════════════════════════════════════════
   v12 — Practice Panels Visual Improvements
═══════════════════════════════════════════════════ */

/* Mastery card — beautiful redesign */
.mastery-title {
  font-size: 0.78rem; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px;
}
.mastery-pct-row {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px;
}
.mastery-pct-big {
  font-size: 2.2rem; font-weight: 900;
  background: var(--accent-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1;
}
.mastery-pct-label { font-size: 0.82rem; color: var(--text3); }
.mastery-bar {
  height: 10px; background: rgba(30,150,228,0.09); border-radius: 10px;
  overflow: hidden; margin-bottom: 8px;
}
.mastery-fill {
  height: 100%; border-radius: 10px;
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}
.mastery-fill.mastery-low    { background: linear-gradient(90deg,#f97316,#fbbf24); }
.mastery-fill.mastery-mid    { background: linear-gradient(90deg,#1e96e4,#35B1FA); }
.mastery-fill.mastery-complete { background: linear-gradient(90deg,#22c55e,#16a34a); }
.mastery-solved-row {
  display: flex; justify-content: space-between;
  font-size: 0.75rem; color: var(--text3);
}
.mastery-solved-row b { color: var(--text2); }
.mastery-badge {
  margin-top: 10px; font-size: 0.82rem; font-weight: 700; color: #22c55e;
  background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3);
  border-radius: 8px; padding: 6px 10px; text-align: center;
}

/* Practice top cards — colored accent strips */
.practice-top-card { overflow: hidden; position: relative; }
.practice-top-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 18px 18px 0 0;
}
.practice-top-card:nth-child(1)::before { background: linear-gradient(90deg,#1e96e4,#35B1FA); }
.practice-top-card:nth-child(2)::before { background: linear-gradient(90deg,#f59e0b,#fb923c); }
.practice-top-card:nth-child(3)::before { background: linear-gradient(90deg,#f87171,#ef4444); }

/* Review queue inside practice panel */
.review-queue-mini-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border2); font-size: 0.8rem;
}
.review-queue-mini-item:last-child { border-bottom: none; }
.review-mini-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #f59e0b;
}
.review-mini-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }

/* Error bank inside practice panel */
.error-bank-mini-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border2); font-size: 0.8rem;
}
.error-bank-mini-item:last-child { border-bottom: none; }
.error-mini-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #f87171;
}
.error-mini-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }

/* Geometry Canvas */
.geo-canvas-wrap {
  background: var(--surface); border: 1.5px solid var(--border2);
  border-radius: 14px; padding: 12px; margin: 12px 0;
}
.geo-canvas-toolbar {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border2);
}
.geo-tool-btn {
  padding: 5px 10px; border-radius: 7px; font-size: 0.78rem; font-weight: 600;
  border: 1.5px solid var(--border2); background: var(--surface); color: var(--text2);
  cursor: pointer; transition: all .15s;
}
.geo-tool-btn:hover, .geo-tool-btn.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.geo-canvas-el {
  background: #eef2f8; border-radius: 10px; cursor: crosshair;
  width: 100%; display: block; touch-action: none;
}
[data-theme="light"] .geo-canvas-el { background: #f8f9ff; }
.geo-canvas-footer {
  display: flex; gap: 8px; margin-top: 8px; align-items: center;
}
.geo-color-row { display: flex; gap: 5px; }
.geo-color-dot {
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform .12s;
}
.geo-color-dot.active { transform: scale(1.25); border-color: #fff; }

/* Admin WYSIWYG live preview */
.wysiwyg-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px;
}
.wysiwyg-editor-pane {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 12px; padding: 14px; min-height: 400px; overflow-y: auto;
}
.wysiwyg-preview-pane {
  background: var(--card); border: 1px solid rgba(30,150,228,0.25);
  border-radius: 12px; padding: 16px; min-height: 400px; overflow-y: auto;
  font-size: 0.88rem; line-height: 1.6;
}
.wysiwyg-preview-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent2); margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.wysiwyg-preview-label::after {
  content: ""; flex: 1; height: 1px; background: rgba(30,150,228,0.2);
}
.wysiwyg-formula-input {
  background: rgba(30,150,228,0.06); border: 1px solid rgba(30,150,228,0.25);
  border-radius: 8px; padding: 10px 12px; font-family: monospace; font-size: 0.82rem;
  color: var(--text); width: 100%; box-sizing: border-box; resize: vertical;
  min-height: 60px; margin-bottom: 8px;
}
.wysiwyg-formula-preview {
  background: rgba(30,150,228,0.04); border-radius: 8px; padding: 10px;
  text-align: center; font-size: 1.1rem; min-height: 48px;
  border: 1px dashed rgba(30,150,228,0.2);
}
.block-drag-handle {
  cursor: grab; padding: 4px 6px; border-radius: 5px; color: var(--text3);
  font-size: 1rem; transition: color .12s;
}
.block-drag-handle:hover { color: var(--accent2); }
.block-drag-handle:active { cursor: grabbing; }
.theory-block-item {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--border2);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
  transition: box-shadow .18s, border-color .18s;
}
.theory-block-item.dragging { opacity: 0.4; }
.theory-block-item.drag-over { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(30,150,228,0.25); }
.theory-block-body { flex: 1; min-width: 0; }
.theory-block-type-badge {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 6px; background: rgba(30,150,228,0.12);
  color: var(--accent2); margin-bottom: 6px; display: inline-block;
}

/* Admin badge colors */
.badge-yellow { background: rgba(245,158,11,0.15) !important; color: #f59e0b !important; border-color: rgba(245,158,11,0.3) !important; }

/* ── v13: Responsive WYSIWYG split ───────────────────────────── */
@media (max-width: 900px) {
  .wysiwyg-split {
    grid-template-columns: 1fr;
  }
  .wysiwyg-editor-pane,
  .wysiwyg-preview-pane {
    min-height: 280px;
  }
}

/* Block reorder buttons */
.block-reorder-btn {
  background: none; border: 1px solid var(--border2);
  color: var(--text3); border-radius: 5px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.72rem; padding: 0; line-height: 1;
  transition: background .12s, color .12s;
}
.block-reorder-btn:hover:not(:disabled) {
  background: rgba(30,150,228,0.12); color: var(--accent2); border-color: var(--accent);
}
.block-reorder-btn:disabled { opacity: 0.25; cursor: default; }
.block-reorder-col {
  display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; align-self: flex-start; padding-top: 2px;
}

/* Canvas block admin mini-preview */
.canvas-block-preview-wrap {
  margin-top: 10px; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(30,150,228,0.25);
  background: var(--surface);
}
.canvas-block-preview-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px; background: rgba(30,150,228,0.08);
  font-size: 0.72rem; font-weight: 600; color: var(--accent2);
}
.canvas-block-preview-bar button {
  font-size: 0.7rem; padding: 2px 8px; border-radius: 5px;
  background: rgba(30,150,228,0.15); border: 1px solid rgba(30,150,228,0.3);
  color: var(--accent2); cursor: pointer;
}
.canvas-block-preview-bar button:hover { background: rgba(30,150,228,0.28); }

/* ═══════════════════════════════════════════════════════════════
   v14: PRACTICE CHIPS + THEORY NOTEBOOK + SVG SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* ── Practice progress chips row ─────────────────────────────── */
.practice-chips-row {
  display: flex; gap: 10px; margin: 0 0 18px; flex-wrap: wrap;
}
.pchip {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1.5px solid var(--border2);
  border-radius: 14px; padding: 10px 14px; flex: 1; min-width: 140px;
  position: relative; overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .14s;
}
.pchip-clickable { cursor: pointer; }
.pchip-clickable:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30,150,228,.12); transform: translateY(-1px); }
.pchip-clickable:active { transform: translateY(0); }
.pchip-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.pchip-body { flex: 1; min-width: 0; }
.pchip-label { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); margin-bottom: 2px; }
.pchip-val { font-size: 0.95rem; font-weight: 800; color: var(--text); line-height: 1.2; }
.pchip-arrow { font-size: 1.2rem; color: var(--text3); flex-shrink: 0; transition: transform .14s; }
.pchip-clickable:hover .pchip-arrow { transform: translateX(3px); color: var(--accent2); }

/* Favourite-theory chip (complaint #2 — replaces the removed "Освоение"
   chip): gold star icon distinguishes it at a glance from the blue review
   chip and the red error chip. */
.pchip-favtheory .pchip-icon { color: #f59e0b; }
.pchip-favtheory .pchip-icon svg { fill: none; }
.pchip-favtheory.pchip-active .pchip-icon svg { fill: #f59e0b; }
.pchip-favtheory.pchip-active .pchip-val { color: #f59e0b; }
.pchip-active { border-color: rgba(30,150,228,.5) !important; }
.pchip-review.pchip-active .pchip-val { color: var(--accent2); }
.pchip-errors.pchip-active .pchip-val { color: #f87171; }

/* Pulse highlight when jumping to a favourited theory card via the chip */
@keyframes lgFavPulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(0,0,0,.07); }
  40% { box-shadow: 0 0 0 4px rgba(245,158,11,.35), 0 4px 18px rgba(0,0,0,.07); }
}
.lg-fav-pulse { animation: lgFavPulse 1.1s ease; }

@media (max-width: 600px) {
  .practice-chips-row { gap: 8px; }
  .pchip { min-width: 0; padding: 8px 10px; }
  .pchip-val { font-size: 0.85rem; }
}

/* ── Theory notebook: improved body typography ────────────────── */
.theory-body {
  font-size: 1.08rem !important;
  line-height: 1.85 !important;
  color: var(--text2);
  max-width: 780px;
}
.theory-body > * + * { margin-top: 0; }
.theory-body p { margin-bottom: 14px; }
.theory-body h3 { font-size: 1.2rem; font-weight: 800; color: var(--text); margin: 22px 0 10px; }
.theory-body h4 { font-size: 1.02rem; font-weight: 700; color: var(--text); margin: 18px 0 8px; }

/* ── Универсальный паттерн «лейбл сверху + полноценный заголовок под ним» ──
   Rule (universal, applies to every lesson): any named block/section
   (определение, теорема, категория обозначений, крупный раздел теории)
   gets a small uppercase colour-coded LABEL line ("ОПРЕДЕЛЕНИЕ", "ТЕОРЕМА",
   "РАЗДЕЛ") directly above a full, larger, centred HEADING that actually
   names the concrete content ("Логарифм числа по основанию",
   "Формула перехода к новому основанию", "Основные свойства логарифмов").
   Never a bare generic label alone, never a heading without its label —
   both lines together. Modifier classes set the label colour per block type. */
.lh-label-heading { text-align: center; margin: 26px 0 18px; }
/* Complaint #5 fix: .lh-label-heading's own margin-top:26px was designed
   for use as a stand-alone section separator BETWEEN blocks — but when it
   sits as the first child inside an already-padded box (.th-def-block,
   .th-theorem-block, .th-warning-block, .th-note-block, .th-example-block),
   that margin stacks on top of the box's own padding-top, roughly doubling
   the empty space above the label and making the box read as oversized /
   bottom-heavy. Zero it out in that context; the box's own padding is
   already the correct breathing room. */
.th-def-block > .lh-label-heading:first-child,
.th-theorem-block > .lh-label-heading:first-child,
.th-warning-block > .lh-label-heading:first-child,
.th-note-block > .lh-label-heading:first-child,
.th-example-block > .lh-label-heading:first-child {
  margin-top: 0;
}
/* Label row: divider line — label — divider line, matching the
   ".theory-practice-divider" pattern exactly (complaint #5: one consistent
   colour across every section heading + flanking lines both sides). */
.lh-label {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 0.66rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 8px; color: var(--accent2);
}
.lh-label::before,
.lh-label::after {
  /* Complaint #4: dividers read as too short/stubby — raise the cap so the
     flex:1 1 auto lines actually get to stretch out further on either side
     of the label instead of staying pinned near the text. */
  content: ""; flex: 1 1 auto; height: 1px; max-width: 160px;
  background: linear-gradient(90deg, transparent, var(--border2), var(--border2), transparent);
}
.lh-heading { font-size: 1.38rem; font-weight: 800; color: var(--text); margin: 0; line-height: 1.35; }
/* Legacy per-section colour modifiers (.lh-purple/.lh-red/.lh-green/.lh-gold)
   intentionally removed — every heading now shares one accent colour. */
/* Связующий поясняющий текст между блоками — не декоративная заглушка, а
   содержательное объяснение "зачем это здесь"/"как связано с предыдущим". */
.th-connect-prose {
  font-size: 0.98rem; color: var(--text2); line-height: 1.75;
  text-align: center; max-width: 680px; margin: 4px auto 18px;
}

/* ── Definition block ─────────────────────────────────────────── */
/* Rule: accent blocks default to the theme's plain surface, no colour-tint
   wash — the block-type label (colour-accented small caps) is enough to mark
   it as "definition"; a coloured background on every block makes the page
   flicker/"рябит" when many blocks stack in sequence. */
/* Complaint #3: drop the flat gray border-contour look — use a soft
   colour-tinted gradient + glow background instead, same treatment family
   as .th-note-block ("Совет"), just tinted in the block's own accent hue
   (blue for a definition) instead of gold. */
/* ТЗ (2026-08-26): «Где пригодится» и «Проверь себя» — БЕЗ фоновой
   обводки/заливки блока: прозрачная секция, только label-заголовок.
   Используется в data27/data29 (классы генераторов extra27.py / gen29.py). */
.th-extra-block {
  background: none;
  border: none;
  box-shadow: none;
  padding: 6px 0;
  margin: 18px 0;
  position: relative;
  text-align: center;
}
.th-extra-block > .lh-label-heading:first-child { margin-top: 0; }
.th-extra-block p { margin: 0 auto; max-width: 700px; font-size: 1.05rem; color: var(--text2); line-height: 1.75; }

/* ═══ Таблица «Частые ошибки» (ТЗ №7): слева неправильно, справа правильно ═══ */
.mp-traps { margin: 22px 0; }
.mp-traps-head {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 10px;
}
.mp-traps-ico { font-size: 1.2rem; }
.mp-traps-title { font-weight: 800; font-size: 1.08rem; color: var(--gold-l, #e2b13c); letter-spacing: .3px; }
.mp-traps-table {
  width: 100%; max-width: 780px; margin: 0 auto; border-collapse: separate; border-spacing: 0;
  font-size: .95rem; line-height: 1.55; table-layout: fixed;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 3px 16px rgba(0,0,0,.10);
}
.mp-traps-table th {
  padding: 10px 14px; font-weight: 800; font-size: .98rem; text-align: center;
}
.mp-traps-table td { text-align: center; }
.mp-traps-table td .katex-display { margin: 0; }
.mp-traps-table th.tt-bad  { background: rgba(224,92,92,.16);  color: #e05c5c; border-bottom: 2px solid rgba(224,92,92,.45); }
.mp-traps-table th.tt-good { background: rgba(61,191,110,.14); color: #3dbf6e; border-bottom: 2px solid rgba(61,191,110,.45); }
.mp-traps-table td { padding: 10px 14px; vertical-align: top; }
.mp-traps-table td.tt-bad-cell  { background: rgba(224,92,92,.06); border-right: 1px solid rgba(224,92,92,.18); }
.mp-traps-table td.tt-good-cell { background: rgba(61,191,110,.05); }
.mp-traps-table tbody tr + tr td { border-top: 1px solid rgba(120,140,160,.16); }
@media (max-width: 620px) {
  .mp-traps-table { font-size: .86rem; }
  .mp-traps-table th, .mp-traps-table td { padding: 8px 9px; }
}

.th-def-block {
  background: linear-gradient(135deg, rgba(30,150,228,.10), rgba(30,150,228,.03));
  box-shadow: 0 3px 16px rgba(30,150,228,.08);
  border: none;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 16px 0;
  position: relative;
  text-align: center;
}
.th-def-block::before {
  content: "ОПРЕДЕЛЕНИЕ";
  display: block;
  font-size: 0.58rem; font-weight: 900; letter-spacing: .14em;
  color: #1e96e4; margin-bottom: 7px;
}
/* When markup already supplies its own .lh-label-heading, suppress the
   generic ::before fallback label to avoid a duplicate "ОПРЕДЕЛЕНИЕ ОПРЕДЕЛЕНИЕ". */
.th-def-block.has-label::before { display: none; }
.th-def-block p { margin: 0 auto; max-width: 700px; font-size: 1.12rem; color: var(--text); line-height: 1.8; }

/* ── Theorem block ────────────────────────────────────────────── */
/* Rule: a theorem/formula-statement block is ALWAYS centred and ALWAYS names
   the exact statement it holds — never a bare generic "ТЕОРЕМА" heading.
   Default ::before text is a fallback only; markup should add class
   "has-label" + an explicit .th-block-label naming the concrete statement
   ("Теорема: формула перехода к новому основанию", "Аксиома: ...", etc). */
/* Complaint #3: same treatment family as .th-note-block ("Совет") — soft
   gradient + glow, no hard border — tinted in the theorem's own accent
   blue (#35B1FA) instead of gold. */
.th-theorem-block {
  background: linear-gradient(135deg, rgba(53,177,250,.11), rgba(53,177,250,.03));
  box-shadow: 0 3px 16px rgba(53,177,250,.09);
  border: none;
  border-radius: 14px; padding: 20px 22px; margin: 30px 0 18px;
  text-align: center;
}
.th-theorem-block::before {
  content: "📜 ТЕОРЕМА";
  display: block;
  font-size: 0.58rem; font-weight: 900; letter-spacing: .14em;
  color: #35B1FA; margin-bottom: 8px;
}
.th-theorem-block.has-label::before { display: none; }
.th-block-label {
  font-size: 0.62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: #35B1FA; margin-bottom: 10px; text-align: center;
}
.th-theorem-block p { margin: 0 0 6px; font-size: 1.05rem; color: var(--text); text-align: center; }
.th-theorem-proof {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed rgba(53,177,250,.3);
  font-size: 0.82rem; color: var(--text2);
}
.th-theorem-proof-toggle {
  font-size: 0.75rem; color: #35B1FA; cursor: pointer;
  background: none; border: none; padding: 0; margin-top: 8px;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ── Warning / common mistake block ──────────────────────────── */
/* Rule: "typical mistake" sections are not a flat red alarm panel — plain
   surface background, colour reserved for the label + the wrong/right chips
   below (softer on-brand tint, no hard border — see .th-compare-cell). */
.th-warning-block {
  background: none;
  box-shadow: none;
  border-radius: 12px;
  padding: 14px 0; margin: 16px 0;
}
.th-warning-block::before {
  content: "⚠️ ТИПИЧНАЯ ОШИБКА";
  display: block;
  font-size: 0.58rem; font-weight: 900; letter-spacing: .14em;
  color: #f87171; margin-bottom: 7px;
}
/* When markup supplies its own .lh-label-heading (point 12), suppress the
   generic ::before fallback label — same has-label convention as .th-def-block. */
.th-warning-block.has-label::before { display: none; }
.th-warning-block p { margin: 0; font-size: 1.02rem; color: var(--text); text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; }
.th-wrong  { color: #f87171; font-weight: 700; }
.th-right  { color: #10b981; font-weight: 700; }
.th-cross  { color: #f87171; }
.th-check  { color: #10b981; }

/* ── Note / tip block ────────────────────────────────────────── */
/* Rule (point 13, EdTech style): a tip is a calm highlighted card, not a
   flat text block — soft gold surface (distinct from the warning block's
   red and the theorem's blue), rounded icon badge instead of a plain emoji
   glyph, content centred to match the rest of the label+heading pattern. */
.th-note-block {
  background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(245,158,11,.03));
  box-shadow: 0 3px 16px rgba(245,158,11,.08);
  border-radius: 14px;
  padding: 18px 22px; margin: 16px 0;
  text-align: center;
}
.th-note-block::before {
  content: "💡 СОВЕТ";
  display: block;
  font-size: 0.58rem; font-weight: 900; letter-spacing: .14em;
  color: #f59e0b; margin-bottom: 7px;
}
.th-note-block.has-label::before { display: none; }
.th-note-block .lh-label-heading { margin-top: 0; }
.th-note-block p { margin: 0 auto; font-size: 1.03rem; color: var(--text2); max-width: 680px; line-height: 1.75; }

/* ── Example block (re-redesigned again - complaint #8) ─────────────────── */
/* Rule: previous version used a left-rail stepper with CIRCULAR numbered
   badges — but text badges ("Задача", "✓") don't fit a circle, they get
   squashed into an ugly oval. Fix: every step is a clean CENTERED column
   (no left rail, no connecting border-line down the side); each step's
   label is a small auto-width PILL badge (handles "Задача"/numbers/"✓"
   equally well) sitting above its centered content line; steps are
   separated by a thin dashed rule instead of a solid rail; the final
   ("✓") step gets its own soft green highlight panel to visually close
   the example with a clear "ответ" result. */
.th-example-block {
  background: var(--surface2, rgba(255,255,255,.02));
  border-radius: 16px; padding: 22px 26px 20px; margin: 16px 0 20px;
  text-align: center;
}
.th-example-block::before {
  /* Complaint #7 fix: removed the pencil emoji (✏️) — plain text label. */
  content: "ПРИМЕР";
  display: block;
  font-size: 0.6rem; font-weight: 900; letter-spacing: .14em;
  color: var(--accent2); margin-bottom: 16px; text-align: center;
}
.th-example-step {
  display: flex; flex-direction: row; align-items: flex-start; gap: 14px;
  padding: 10px 0;
}
.th-example-step:not(:last-child) { border-bottom: none; }
.th-example-step:first-child { padding-top: 0; }
.th-example-step-n {
  font-size: 0.66rem; font-weight: 800; color: #fff;
  letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 22px; padding: 0 10px; border-radius: 999px;
  background: var(--accent-g); box-shadow: 0 2px 8px rgba(30,150,228,.35);
  flex-shrink: 0; margin-top: 3px;
}
.th-example-step:last-child .th-example-step-n {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 2px 8px rgba(16,185,129,.4);
}
.th-example-step-t { font-size: 1.04rem; color: var(--text2); max-width: 620px; line-height: 1.7; flex: 1; }
.th-example-step:last-child { margin-top: 4px; padding-top: 14px; }
.th-example-step:last-child .th-example-step-t { color: var(--text); font-weight: 700; font-size: 1.1rem; }

/* ── Formula display row ─────────────────────────────────────── */
.th-formula-row {
  text-align: center; padding: 12px 0; margin: 10px 0;
  font-size: 1.15rem;
}

/* ── SVG figure system ───────────────────────────────────────── */
.th-svg-wrap {
  display: flex; flex-direction: column; align-items: center;
  margin: 18px 0; gap: 8px;
}
.th-svg-wrap svg {
  max-width: 100%; height: auto;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border2);
  padding: 10px;
}
.th-svg-caption {
  font-size: 0.84rem; color: var(--text3); text-align: center;
  font-style: italic; letter-spacing: .02em;
}
.svg-lbl {
  font-size: 13px; fill: var(--text); font-family: "Georgia", serif;
  font-style: italic;
}
.svg-lbl-sm { font-size: 11px; fill: var(--text3); font-family: sans-serif; }
.svg-accent { stroke: #1e96e4; }
.svg-green  { stroke: #10b981; }
.svg-red    { stroke: #f87171; }

/* ── Compare: right / wrong side by side (redesigned - complaint #10) ────── */
/* Rule: exactly ONE border source per cell (the inset ring below) - no
   double/triple stacked borders. Interactivity: a hover-lift + brighter ring
   + scaling head-chip makes the cells feel like real interactive comparison
   tiles instead of static text blocks. */
.th-compare-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0;
}
.th-compare-cell {
  border-radius: 12px; padding: 14px 16px;
  font-size: 0.98rem; line-height: 1.65;
  transition: transform .18s ease, box-shadow .18s ease;
  /* Root-cause fix (point 12): a grid cell's default min-width is "auto",
     which lets its content (in particular a wide inline KaTeX formula)
     refuse to shrink and overflow/misalign past the cell's own edge on
     narrow screens. min-width:0 lets the cell shrink to the grid track,
     overflow-wrap lets any residual long run wrap instead of spilling out. */
  min-width: 0; overflow-wrap: break-word;
}
.th-compare-cell .katex-display { overflow-x: auto; overflow-y: hidden; margin: 4px 0; }
@media (max-width: 640px) {
  .th-compare-row { grid-template-columns: 1fr; }
}
.th-compare-cell.wrong {
  background: rgba(248,113,113,.07); box-shadow: inset 0 0 0 1.5px rgba(248,113,113,.25);
}
.th-compare-cell.right {
  background: rgba(16,185,129,.07); box-shadow: inset 0 0 0 1.5px rgba(16,185,129,.25);
}
.th-compare-cell.wrong:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(248,113,113,.45), 0 6px 18px rgba(248,113,113,.15); }
.th-compare-cell.right:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(16,185,129,.45), 0 6px 18px rgba(16,185,129,.15); }
.th-compare-cell-head {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.62rem; font-weight: 900; letter-spacing: .08em; margin-bottom: 10px;
  text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
  transition: transform .18s ease;
}
.th-compare-cell.wrong .th-compare-cell-head { color: #f87171; background: rgba(248,113,113,.14); }
.th-compare-cell.right .th-compare-cell-head { color: #10b981; background: rgba(16,185,129,.14); }
.th-compare-cell:hover .th-compare-cell-head { transform: scale(1.06); }

/* ── "Which one is correct?" mistake quiz (complaint #10) ───────────────
   Rule: the reference lesson's compare rows must not be a passive
   read-only "here's wrong, here's right" reveal — that's not real
   interactivity, just a formatted static text block. Scoped to
   .th-warning-block.has-label (the fully-authored g10-log pattern with
   real .th-compare-cell-head badges) so legacy simpler .th-compare-row
   markup in other lessons is untouched. Before the student clicks, the
   real ❌/✅ verdict badge is swapped for a neutral "Вариант 1/2" label via
   ::before so the answer isn't given away; clicking either cell "locks in"
   a guess, reveals the true verdict badges, and gives immediate visual
   feedback (pulse if correct, shake + highlight-the-real-answer if not). */
/* Explanatory prose between theory blocks — plain centred paragraph, no
   background, no left bar (anti-AI-slop rule from Bob's supervisor). */
.th-expl {
  max-width: 720px; margin: 22px auto; text-align: center;
  font-size: 1.06rem; line-height: 1.85; color: var(--text2);
}
.th-expl b { color: var(--text); }
/* Разделение «сплошняка»: орнамент между соседними абзацами теории */
.th-expl + .th-expl { position: relative; padding-top: 26px; }
.th-expl + .th-expl::before {
  content: '✦ ✦ ✦';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  font-size: .68rem; letter-spacing: .9em; padding-left: .9em;
  color: rgba(30, 150, 228, .5);
}
/* Буквица у первого абзаца после заголовка/героя — приём журнальной вёрстки */
.th-expl:first-of-type::first-letter {
  font-size: 1.9em; font-weight: 800; color: #1379BD;
  line-height: 1; padding-right: 2px;
}

.lg-mistake-prompt {
  text-align: center; font-size: 0.98rem; font-weight: 700; color: var(--text2);
  margin: 14px 0 10px;
}
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row:not(.is-revealed) .th-compare-cell {
  cursor: pointer;
}
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row:not(.is-revealed) .th-compare-cell-head {
  display: none;
}
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row:not(.is-revealed) .th-compare-cell::before {
  content: "Вариант 1";
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.62rem; font-weight: 900; letter-spacing: .08em; margin-bottom: 10px;
  text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
  background: var(--surface3); color: var(--text2);
}
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row:not(.is-revealed) .th-compare-cell:last-child::before {
  content: "Вариант 2";
}
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row:not(.is-revealed) .th-compare-cell.wrong,
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row:not(.is-revealed) .th-compare-cell.right {
  background: var(--surface2, rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1.5px var(--border2);
}
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row.is-revealed .th-compare-cell {
  cursor: default;
}
.th-compare-cell.was-wrong-picked {
  animation: lgMistakeShake .4s ease;
}
@keyframes lgMistakeShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.th-compare-cell.was-correct-picked {
  animation: lgMistakeCorrectPulse .5s ease;
}
@keyframes lgMistakeCorrectPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); box-shadow: inset 0 0 0 1.5px rgba(16,185,129,.5), 0 8px 22px rgba(16,185,129,.3); }
  100% { transform: scale(1); }
}

/* ── Quick-check: мгновенная проверка с подстановкой чисел ────── */
.th-quickcheck-block {
  background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(245,158,11,.03));
  box-shadow: 0 3px 16px rgba(245,158,11,.09);
  border-radius: 12px;
  padding: 14px 18px; margin: 16px 0;
}
.th-quickcheck-block::before {
  content: "⚡ ПРОВЕРЬ СЕБЯ";
  display: block;
  font-size: 0.58rem; font-weight: 900; letter-spacing: .14em;
  color: #f59e0b; margin-bottom: 8px;
}
.th-quickcheck-item {
  display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px;
  font-size: 1.02rem; color: var(--text);
}
.th-quickcheck-item:last-child { margin-bottom: 0; }
.th-quickcheck-q { font-weight: 700; color: var(--text); flex-shrink: 0; }
.th-quickcheck-a { color: #10b981; font-weight: 700; }

/* ── Формула с цветными подписями частей (infographic) ───────── */
.th-formula-parts {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; margin: 18px 0; padding: 18px;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 14px;
}
.th-formula-parts-eq { font-size: 1.3rem; }
.th-formula-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.th-formula-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text2);
}
.th-formula-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}

/* ── AI Generate button in admin ────────────────────────────── */
.ai-gen-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg,rgba(30,150,228,.18),rgba(53,177,250,.18));
  border: 1.5px solid rgba(30,150,228,.4);
  border-radius: 9px; padding: 7px 14px;
  font-size: 0.78rem; font-weight: 700; color: var(--accent2);
  cursor: pointer; transition: all .18s;
}
.ai-gen-btn:hover { background: linear-gradient(135deg,rgba(30,150,228,.3),rgba(53,177,250,.3)); border-color: var(--accent); }
.ai-gen-btn:disabled { opacity: .55; cursor: wait; }
.ai-gen-btn .spin { display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-gen-status {
  font-size: 0.75rem; color: var(--text3); padding: 4px 0; min-height: 20px;
}

/* ── Module list inline emoji picker ────────────────────────── */
.mod-list-item-emoji {
  font-size: 1.3rem; cursor: pointer; border-radius: 7px;
  padding: 3px 5px; transition: background .12s;
  line-height: 1;
}
.mod-list-item-emoji:hover { background: rgba(30,150,228,.15); }
.quick-emoji-picker {
  position: absolute; z-index: 200; background: var(--card);
  border: 1.5px solid var(--border2); border-radius: 12px;
  padding: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.45);
  display: grid; grid-template-columns: repeat(8,1fr); gap: 3px;
  max-width: 260px;
}
.quick-emoji-picker .qe-btn {
  font-size: 1.2rem; cursor: pointer; border: none; background: none;
  border-radius: 6px; padding: 4px;
  transition: background .1s;
}
.quick-emoji-picker .qe-btn:hover { background: rgba(30,150,228,.18); }

/* ══════════════════════════════════════════════════════════════════════════
   v15: GLOBAL IMPROVEMENTS
══════════════════════════════════════════════════════════════════════════ */

/* ── Topbar: proper desktop proportions ── */
@media (min-width:1021px) {
  .topbar { height: 60px; padding: 0 26px; gap: 10px; }
  .topbar-actions { gap: 10px; flex-shrink: 0; }
  .search-wrap { max-width: 380px; }
  #globalSearch { height: 42px; font-size: 0.85rem; }
}
.streak-badge, .xp-badge { padding: 6px 12px !important; font-size: 0.78rem !important; min-height: 36px !important; }
.topbar-user-chip {
  padding: 4px 10px 4px 4px !important;
  border-radius: 22px !important;
  height: 40px !important;
  gap: 7px !important;
  white-space: nowrap;
  overflow: hidden;
  max-width: 160px;
}
.topbar-user-avatar { width: 30px !important; height: 30px !important; font-size: 0.75rem !important; flex-shrink: 0; }
.topbar-user-name { font-size: 0.78rem !important; }
.topbar-user-grade { font-size: 0.65rem !important; }
.topbar-theme-btn { width: 36px !important; height: 36px !important; font-size: 1rem !important; flex-shrink: 0; }
@media (max-width: 640px) {
  .chip-name { display: none !important; }
}

/* ── Hide grade quick nav on home (will be removed from HTML too) ── */
#gradeQuickNav { display: none !important; }

/* ── Home hero right cards: improved ── */
.home-right-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#globalProgressCard, #leaderRankCard {
  border-radius: 18px;
  padding: 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1.5px solid var(--border2);
}
.prog-card-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); margin-bottom: 4px; }
.prog-big-pct { font-size: 2.6rem; font-weight: 900; background: var(--accent-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.prog-sub-line { font-size: 0.8rem; color: var(--text2); margin-bottom: 8px; }

.prog-bar-track { height: 8px; background: var(--border); border-radius: 8px; overflow: hidden; }
.prog-bar-fill { height: 100%; background: var(--accent-g); border-radius: 8px; transition: width 0.8s cubic-bezier(.4,0,.2,1); }
.prog-total-line { font-size: 0.72rem; color: var(--text3); margin-top: 4px; }
.prog-action-btn {
  margin-top: auto; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--border2);
  background: rgba(30,150,228,.1); color: var(--accent2); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: background .18s; text-align: center;
}
.prog-action-btn:hover { background: rgba(30,150,228,.2); }
.rank-big { font-size: 2.8rem; font-weight: 900; background: linear-gradient(135deg,#f59e0b,#f97316); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.rank-of-total { font-size: 0.8rem; color: var(--text2); margin-bottom: 6px; }

/* ── Grade progress breakdown in right card ── */
.grade-prog-bars { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.grade-prog-row { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; }
.grade-prog-label { width: 42px; color: var(--text3); font-weight: 600; flex-shrink: 0; }
.grade-prog-track { flex: 1; height: 5px; background: var(--border); border-radius: 5px; overflow: hidden; }
.grade-prog-fill { height: 100%; border-radius: 5px; transition: width 0.6s ease; }
.grade-prog-pct { width: 30px; text-align: right; color: var(--text2); flex-shrink: 0; }

/* ══ MODULE CARD v15: full color border ══ */
.module-card {
  border: 2.5px solid transparent !important;
  background-clip: padding-box;
  transition: transform .18s, box-shadow .18s, border-color .18s !important;
}
/* top-only track color via ::before pseudo */
.module-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 0;
}
.module-card[data-track="school"]   { border-color: rgba(30,150,228,0.70) !important; }
.module-card[data-track="oge"]      { border-color: rgba(34,197,94,0.70) !important; }
.module-card[data-track="ege"]      { border-color: rgba(245,158,11,0.70) !important; }
.module-card[data-track="olymp"]    { border-color: rgba(239,68,68,0.70) !important; }

/* Active = currently working on: bright glow — NO dark background overlay */
.module-card.in-progress {
  border-color: rgba(245,158,11,0.90) !important;
  background: transparent !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.25), 0 4px 16px rgba(245,158,11,0.12) !important;
}
.module-card.in-progress .module-card-title { color: #fbbf24 !important; }

/* Completed: green shimmer — no dark tint */
.module-card.completed {
  border-color: rgba(16,185,129,0.85) !important;
  background: transparent !important;
  box-shadow: 0 0 0 1px rgba(16,185,129,0.18) !important;
}

/* Bar chart inside module card — compact but bold */
.module-bar-chart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 18px; margin: 6px 0 2px;
}
.module-bar-chart-col {
  flex: 1; border-radius: 2px 2px 0 0;
  transition: height .4s ease, background .3s;
  min-height: 4px;
  min-width: 4px;
}

/* Map banner image */
.map-banner-img {
  width: 100%; max-height: 200px; object-fit: cover;
  border-radius: 18px; margin-bottom: 18px;
  display: block;
}
.map-banner-wrap {
  position: relative; margin-bottom: 18px;
  border-radius: 18px; overflow: hidden;
}
.map-banner-wrap img { width: 100%; max-height: 200px; object-fit: cover; display: block; }
.map-banner-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 24px 16px;
  background: linear-gradient(to top, rgba(247,249,252,0.8) 0%, transparent 100%);
}
.map-banner-title { font-size: 1.2rem; font-weight: 800; color: #fff; }
.map-banner-sub { font-size: 0.82rem; color: rgba(255,255,255,.75); margin-top: 4px; }

/* ══ VIDEO section v15 ══ */
.video-filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px;
  padding: 12px 16px;
}
.video-search-wrap { position: relative; flex: 1; min-width: 160px; }
.video-search-wrap input { width: 100%; }
#videoSearchInput { height: 40px; padding: 8px 14px 8px 38px; }
.video-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text3); pointer-events: none; font-size: 0.9rem; }

/* ══ VIDEO SECTION v15+: card with image on top, description below ══ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.video-card {
  border-radius: 16px; overflow: hidden; border: 2px solid var(--border2);
  background: var(--card); cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  display: flex; flex-direction: column;
}
.video-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(30,150,228,.18); border-color: var(--accent); }
.video-thumb {
  width: 100%; aspect-ratio: 16/9; background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; position: relative; overflow: hidden; flex-shrink: 0;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); opacity: 0; transition: opacity .18s;
}
.video-card:hover .video-play-overlay { opacity: 1; }
.video-play-btn { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.video-play-btn svg { width: 22px; height: 22px; fill: #1e96e4; margin-left: 3px; }
.video-card-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.video-card-title { font-size: 0.9rem; font-weight: 700; color: var(--text); line-height: 1.35; }
.video-card-desc { font-size: 0.78rem; color: var(--text2); line-height: 1.55; flex: 1; }
.video-card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.video-grade-badge { font-size: 0.62rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; background: rgba(30,150,228,.15); color: var(--accent2); }
.video-block-badge { font-size: 0.62rem; color: var(--text3); }
.video-empty { text-align: center; color: var(--text3); padding: 40px 20px; font-size: 0.88rem; }

/* ══ CABINET homework: colored border on kaiten cols + cards ══ */
.kaiten-col--todo { border: 2.5px solid rgba(30,150,228,.45) !important; border-radius: 14px; }
.kaiten-col--wip  { border: 2.5px solid rgba(245,158,11,.5) !important; border-radius: 14px; }
.kaiten-col--done { border: 2.5px solid rgba(16,185,129,.5) !important; border-radius: 14px; }
.kaiten-card {
  border: 2px solid var(--border2) !important;
  border-radius: 12px !important;
  background: var(--card) !important;
}
.kaiten-card:hover { border-color: var(--accent) !important; box-shadow: 0 4px 16px rgba(30,150,228,.2) !important; }
.kaiten-open-module-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px;
  background: rgba(30,150,228,.15); color: var(--accent2);
  border: 1px solid rgba(30,150,228,.3); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: background .15s; margin: 6px 0 2px; width: 100%;
  justify-content: center; text-decoration: none;
}
.kaiten-open-module-btn:hover { background: rgba(30,150,228,.28); }

/* ══ STATS: OGE/EGE task grid ══ */
.exam-tasks-section {
  background: var(--card); border: 1.5px solid var(--border2);
  border-radius: 18px; padding: 20px; margin-top: 20px;
}
.exam-tasks-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.exam-tasks-title { font-weight: 700; font-size: 0.95rem; }
.exam-tab-btns { display: flex; gap: 6px; }
.exam-tab-btn {
  padding: 5px 14px; border-radius: 8px; font-size: 0.78rem; font-weight: 700;
  border: 1.5px solid var(--border2); background: transparent; color: var(--text3); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.exam-tab-btn.active { background: rgba(30,150,228,.15); color: var(--accent2); border-color: var(--accent); }
.exam-num-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
}
.exam-num-cell {
  border-radius: 10px; padding: 10px 6px; text-align: center; cursor: pointer;
  border: 1.5px solid var(--border2); background: var(--surface);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative;
}
.exam-num-cell:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(30,150,228,.18); border-color: var(--accent); }
.exam-num-label { font-size: 0.7rem; font-weight: 700; color: var(--text3); margin-bottom: 3px; }
.exam-num-pct { font-size: 1.0rem; font-weight: 900; color: var(--text); }
.exam-num-cell.num-solved { border-color: rgba(16,185,129,.55) !important; background: rgba(16,185,129,.07) !important; }
.exam-num-cell.num-solved .exam-num-pct { color: #10b981; }
.exam-num-cell.num-weak { border-color: rgba(248,113,113,.6) !important; background: rgba(248,113,113,.07) !important; }
.exam-num-cell.num-weak .exam-num-pct { color: #f87171; }
.exam-num-cell.num-empty { opacity: 0.6; }
.exam-num-tooltip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border2); border-radius: 8px;
  padding: 5px 10px; font-size: 0.72rem; color: var(--text); white-space: nowrap;
  z-index: 10; pointer-events: none; display: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.exam-num-cell:hover .exam-num-tooltip { display: block; }

/* ══ LEADERBOARD: daily filter ══ */
.lb-period-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.lb-period-btn {
  padding: 5px 14px; border-radius: 9px; font-size: 0.8rem; font-weight: 700;
  border: 1.5px solid var(--border2); background: transparent; color: var(--text3); cursor: pointer;
  transition: background .15s, color .15s;
}
.lb-period-btn.active { background: rgba(30,150,228,.15); color: var(--accent2); border-color: var(--accent); }

/* ══ Map search + track filter in video section ══ */
@media (max-width: 600px) {
  .video-grid { grid-template-columns: 1fr 1fr; }
  .exam-num-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 400px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* ══ EXAM GRID: full section layout ══ */
.exam-grid-section {
  background: var(--card); border-radius: 18px; padding: 20px 22px;
  border: 1px solid var(--border2); margin-bottom: 20px;
}
.exam-grid-title {
  font-size: 1.1rem; font-weight: 800; margin-bottom: 18px; color: var(--text);
}
.exam-section-block { margin-bottom: 22px; }
.exam-section-block:last-child { margin-bottom: 0; }
.exam-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-radius: 10px; background: var(--surface);
  margin-bottom: 12px; gap: 10px;
}
.exam-section-label { font-weight: 800; font-size: 0.95rem; color: var(--text); }
.exam-section-count { font-size: 0.78rem; color: var(--text3); font-weight: 600; }
.exam-num-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px;
}
.exam-num-cell {
  border-radius: 10px; padding: 8px 4px 7px; text-align: center; cursor: pointer;
  border: 1.5px solid var(--border2); background: var(--surface);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
}

.exam-num { font-size: 1.05rem; font-weight: 900; color: var(--text); line-height: 1; }
.exam-lbl { font-size: 0.58rem; color: var(--text3); line-height: 1.2; text-align: center; }
.exam-pct-badge {
  position: absolute; top: -6px; right: -6px;
  background: #f97316; color: #fff; font-size: 0.6rem; font-weight: 700;
  border-radius: 6px; padding: 1px 4px; line-height: 1.3;
}
.exam-check {
  position: absolute; top: -5px; right: -5px;
  background: #10b981; color: #fff; font-size: 0.65rem; font-weight: 800;
  border-radius: 6px; padding: 1px 4px; line-height: 1.3;
}
.exam-num-cell.num-solved {
  border-color: rgba(16,185,129,.55) !important;
  background: rgba(16,185,129,.08) !important;
}
.exam-num-cell.num-solved .exam-num { color: #10b981; }

.exam-num-cell.num-weak .exam-num { color: #f87171; }
.exam-num-cell.num-gray { opacity: 0.55; }

/* ══ Exam parts within OGE/EGE blocks ══ */
.exam-part-block { margin-bottom: 14px; }
.exam-part-block:last-child { margin-bottom: 0; }
.exam-part-name {
  font-size: 0.78rem; font-weight: 700; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.exam-part-score {
  font-size: 0.68rem; color: var(--text3); font-weight: 500;
  background: var(--surface); border-radius: 6px; padding: 1px 6px;
}

/* ══ Kaiten DZ column borders ══ */
.kaiten-col { border-radius: 14px !important; border-width: 2px !important; border-style: solid !important; }
.kaiten-col--todo { border-color: rgba(148,163,184,.3) !important; }
.kaiten-col--wip  { border-color: rgba(245,158,11,.4) !important; }
.kaiten-col--done { border-color: rgba(16,185,129,.4) !important; }
.kaiten-card { border: 1.5px solid var(--border2) !important; border-radius: 10px !important; }

/* ══ In-progress module glow ══ */
.module-card.in-progress {
  border-color: rgba(245,158,11,0.85) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.18), 0 8px 32px rgba(245,158,11,0.15) !important;
}
.module-card.completed {
  border-color: rgba(16,185,129,0.75) !important;
  background: linear-gradient(135deg, var(--card), rgba(16,185,129,0.04)) !important;
}

/* ══ Topbar improvements ══ */
.topbar-user-chip { max-width: 180px !important; }


/* ══ MOBILE VIEWPORT HEIGHT FIX (iOS safe area + keyboard) ══ */
:root { --real-vh: 1vh; }

/* Use real viewport height on mobile */
@media (max-width:1020px) {
  .shell, .content {
    height: calc(var(--real-vh, 1vh) * 100);
    max-height: calc(var(--real-vh, 1vh) * 100);
  }
  .page-section {
    /* Account for topbar (52px) + tabbar (58px) + safe areas */
    max-height: calc(var(--real-vh, 1vh) * 100 - 52px - 58px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    height: calc(var(--real-vh, 1vh) * 100 - 52px - 58px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}

/* ══ Section transition — smooth cross-fade ══ */
.section-enter { animation: sectionFadeIn 0.22s ease forwards; }
.section-exit  { animation: sectionFadeOut 0.16s ease forwards; }
@keyframes sectionFadeIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sectionFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* ══ Improved swipe transition visual feedback ══ */
@media (max-width:480px) {
  .page-section { scroll-behavior: smooth; }
}


/* ══════════════════════════════════════════════════════════════════════
   LANDING PAGE — MathPracticum Design System
   Единый шрифт: Montserrat • Бренд: HSL 200 85% 55% (cyan-blue)
   Скругления: 36px карточки / 34px кнопки / 32px мелкие
   Анимации: fade-in + slide-up при скролле • hover 300ms
══════════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap");

/* ─── CSS Variables ─── */
:root {
  --lp-primary:      200 85% 55%;
  --lp-primary-h:    hsl(200,85%,55%);
  --lp-primary-d:    hsl(200,85%,44%);
  --lp-primary-bg:   hsl(200 85% 55% / 0.10);
  --lp-primary-glow: 0 0 40px hsl(200 85% 55% / 0.35);
  --lp-text:         hsl(220,25%,12%);
  --lp-text-muted:   hsl(210,15%,50%);
  --lp-border:       hsl(210,20%,88%);
  --lp-card-bg:      #fff;
  --lp-section-bg:   hsl(200 85% 55% / 0.06);
  --lp-radius-lg:    2.25rem;
  --lp-radius-btn:   34px;
  --lp-radius-sm:    32px;

  /* Level colours */
  --lp-green:  hsl(145,55%,42%);
  --lp-yellow: hsl(38,92%,50%);
  --lp-orange: hsl(24,90%,52%);
  --lp-red:    hsl(4,82%,56%);
}
[data-theme="dark"] .lp-root,
.dark .lp-root {
  --lp-text:       hsl(220,20%,92%);
  --lp-text-muted: hsl(210,15%,60%);
  --lp-border:     hsl(220,20%,28%);
  --lp-card-bg:    hsl(220,20%,16%);
  --lp-section-bg: hsl(200 85% 55% / 0.08);
}

/* ─── Landing root ─── */
.lp-root {
  font-family: "Montserrat", "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--lp-card-bg);
  color: var(--lp-text);
  min-height: 100vh;
  overflow-x: clip;
}

/* ─── Fade-in animation ─── */
.lp-fade-in {
  opacity: 0;
  transform: translateY(15px) scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1),
              transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.lp-fade-in.lp-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ─── HEADER ─── */
.lp-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 68px;
  background: hsl(var(--background, 0 0% 100%) / 0.85);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--lp-border);
  transition: background 0.3s, box-shadow 0.3s;
}
.lp-header.scrolled {
  box-shadow: 0 2px 24px hsl(200 85% 55% / 0.10);
}
.lp-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.lp-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
}
.lp-logo-sigma {
  width: 40px; height: 40px;
  background: var(--lp-primary-h);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 900; color: #fff;
  line-height: 1;
}
.lp-logo-text {
  font-size: 1.2rem; font-weight: 800;
  color: var(--lp-text);
  letter-spacing: -0.02em;
}
.lp-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  justify-content: center;
}
/* Monochrome SVG nav icons — same line-art style as course cards */
.lp-nav-svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-right: 0.4rem;
  stroke: currentColor;
  transition: stroke 0.25s;
}
.lp-nav-link {
  font-size: 1rem;       /* bigger, more prominent */
  font-weight: 700;
  color: var(--lp-text);
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  border-radius: 10px;
  transition: color 0.25s, background 0.25s;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.01em;
  gap: 0;
}
.lp-nav-link:hover {
  color: var(--lp-primary-h);
  background: var(--lp-primary-bg);
}
.lp-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.lp-theme-btn {
  width: 38px; height: 38px;
  border: 2px solid var(--lp-border);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--lp-text-muted);
  font-size: 1rem;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.lp-theme-btn:hover {
  border-color: var(--lp-primary-h);
  color: var(--lp-primary-h);
  background: var(--lp-primary-bg);
}

/* Header buttons */
.lp-btn-login {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--lp-border);
  border-radius: var(--lp-radius-btn);
  background: transparent;
  color: var(--lp-text);
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.3s, color 0.3s, background 0.3s, box-shadow 0.3s, padding 0.3s;
  white-space: nowrap;
}
.lp-btn-login:hover {
  border-color: var(--lp-primary-h);
  color: var(--lp-primary-h);
  background: var(--lp-primary-bg);
  box-shadow: var(--lp-primary-glow);
}
.lp-btn-register {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.3rem;
  border: 2px solid var(--lp-primary-h);
  border-radius: var(--lp-radius-btn);
  background: var(--lp-primary-h);
  color: #fff;
  font-family: inherit; font-size: 0.9rem; font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s, box-shadow 0.3s;
  white-space: nowrap;
}
.lp-btn-register:hover {
  background: var(--lp-primary-d);
  box-shadow: var(--lp-primary-glow);
}
/* Register — outline contour, identical look to Login but primary-colored border */
.lp-btn-register--outline {
  background: transparent;
  border-color: var(--lp-primary-h);
  color: var(--lp-primary-h);
  font-weight: 700;
}
.lp-btn-register--outline:hover {
  background: var(--lp-primary-h);
  color: #fff;
  box-shadow: var(--lp-primary-glow);
}

/* Mobile nav */
.lp-hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  background: transparent; border: 2px solid var(--lp-border);
  border-radius: 10px; cursor: pointer;
  transition: border-color 0.3s;
}
.lp-hamburger span {
  display: block; width: 20px; height: 2px;
  background: var(--lp-text);
  border-radius: 2px;
  transition: background 0.3s;
}
.lp-hamburger:hover { border-color: var(--lp-primary-h); }
.lp-hamburger:hover span { background: var(--lp-primary-h); }

.lp-mobile-menu {
  display: none;
  position: fixed;
  top: 68px; right: 0;
  width: min(320px, 90vw);
  height: calc(100vh - 68px);
  background: var(--lp-card-bg);
  border-left: 1px solid var(--lp-border);
  z-index: 999;
  flex-direction: column;
  padding: 1.5rem;
  gap: 0.5rem;
  box-shadow: -8px 0 40px hsl(200 85% 55% / 0.10);
  overflow-y: auto;
}
.lp-mobile-menu.open { display: flex; }
.lp-mobile-menu .lp-nav-link {
  font-size: 1rem; padding: 0.6rem 1rem;
  display: block;
}
.lp-mob-actions {
  display: flex; flex-direction: column; gap: 0.75rem;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--lp-border);
}
.lp-mob-actions .lp-btn-login,
.lp-mob-actions .lp-btn-register {
  justify-content: center; width: 100%;
}

/* ─── HERO ─── */
.lp-hero {
  min-height: 100vh;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, hsl(200,70%,42%) 0%, hsl(200,60%,50%) 100%);
  padding-top: 68px;
}
.lp-hero-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.lp-wave-orb {
  position: absolute;
  border-radius: 50%;
  background: hsl(200,70%,65%,0.18);
  animation: lp-orb-float 20s ease-in-out infinite;
}
.lp-wave-orb:nth-child(1) {
  width: 600px; height: 600px;
  top: -150px; left: -100px;
  animation-delay: 0s;
}
.lp-wave-orb:nth-child(2) {
  width: 400px; height: 400px;
  top: 50%; right: -80px;
  animation-delay: -7s;
  background: hsl(200,70%,70%,0.12);
}
.lp-wave-orb:nth-child(3) {
  width: 300px; height: 300px;
  bottom: -80px; left: 30%;
  animation-delay: -13s;
  background: hsl(200,80%,60%,0.15);
}
@keyframes lp-orb-float {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(30px,-40px) scale(1.05); }
  66%      { transform: translate(-20px,20px) scale(0.97); }
}

/* Floating math symbols */
/* Floating math formulas — trig identities + expressions */
.lp-math-float {
  position: absolute;
  color: hsl(0 0% 100% / 0.13);
  font-family: "Courier New", "Consolas", monospace;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
  line-height: 1.2;
  animation: lp-sym-float 18s ease-in-out infinite;
}
/* Size modifiers */
.lp-mf--lg { font-size: 1rem;   letter-spacing: 0.03em; }
.lp-mf--md { font-size: 1.3rem; }
.lp-mf--sm { font-size: 1.6rem; }

/* Position each formula */
.lp-math-float:nth-child(1)  { top:8%;   left:3%;   animation-delay:0s;   animation-duration:20s; }
.lp-math-float:nth-child(2)  { top:75%;  left:6%;   animation-delay:-5s;  animation-duration:16s; }
.lp-math-float:nth-child(3)  { top:20%;  right:4%;  animation-delay:-8s;  animation-duration:19s; }
.lp-math-float:nth-child(4)  { top:60%;  right:8%;  animation-delay:-3s;  animation-duration:14s; }
.lp-math-float:nth-child(5)  { bottom:8%;left:18%;  animation-delay:-12s; animation-duration:22s; }
.lp-math-float:nth-child(6)  { top:40%;  left:8%;   animation-delay:-6s;  animation-duration:17s; }
.lp-math-float:nth-child(7)  { top:85%;  right:20%; animation-delay:-9s;  animation-duration:15s; }
.lp-math-float:nth-child(8)  { top:5%;   right:22%; animation-delay:-2s;  animation-duration:21s; }
.lp-math-float:nth-child(9)  { top:50%;  left:42%;  animation-delay:-15s; animation-duration:18s; }
.lp-math-float:nth-child(10) { bottom:20%;right:3%; animation-delay:-4s;  animation-duration:13s; }
.lp-math-float:nth-child(11) { top:30%;  right:30%; animation-delay:-7s;  animation-duration:20s; }
.lp-math-float:nth-child(12) { bottom:35%;left:30%; animation-delay:-11s; animation-duration:16s; }

@keyframes lp-sym-float {
  0%   { transform: translateY(0)     rotate(0deg);  opacity: 0.6; }
  25%  { transform: translateY(-14px) rotate(2deg);  opacity: 1;   }
  50%  { transform: translateY(-22px) rotate(-2deg); opacity: 0.8; }
  75%  { transform: translateY(-10px) rotate(1deg);  opacity: 1;   }
  100% { transform: translateY(0)     rotate(0deg);  opacity: 0.6; }
}

.lp-hero-content {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 800px;
  padding: 3rem 2rem;
  color: #fff;
}
.lp-hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: hsl(0 0% 100% / 0.15);
  border: 1px solid hsl(0 0% 100% / 0.25);
  border-radius: var(--lp-radius-sm);
  padding: 0.4rem 1rem;
  font-size: 0.85rem; font-weight: 600;
  color: #fff; margin-bottom: 1.5rem;
  backdrop-filter: blur(8px);
}
.lp-hero-title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 1.25rem;
}
.lp-hero-title span {
  color: hsl(200,100%,88%);
}
.lp-hero-sub {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 500;
  color: hsl(0 0% 100% / 0.85);
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 560px;
  margin-left: auto; margin-right: auto;
}
.lp-hero-btns {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 3rem;
}
.lp-cta-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 2rem;
  background: #fff;
  color: var(--lp-primary-h);
  border: 2px solid #fff;
  border-radius: var(--lp-radius-btn);
  font-family: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: background 0.3s, box-shadow 0.3s, padding 0.3s, color 0.3s;
}
.lp-cta-primary:hover {
  background: hsl(200,100%,94%);
  box-shadow: 0 8px 32px hsl(0 0% 0% / 0.2);
}
.lp-cta-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 2rem;
  background: transparent;
  color: #fff;
  border: 2px solid hsl(0 0% 100% / 0.6);
  border-radius: var(--lp-radius-btn);
  font-family: inherit; font-size: 1rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background 0.3s, border-color 0.3s, padding 0.3s;
}
.lp-cta-secondary:hover {
  background: hsl(0 0% 100% / 0.12);
  border-color: #fff;
}

/* Stats bar */
.lp-stats-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 2.5rem; flex-wrap: wrap;
  background: hsl(0 0% 100% / 0.12);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(0 0% 100% / 0.2);
  border-radius: var(--lp-radius-lg);
  padding: 1.5rem 3rem;
  margin-top: 1rem;
}
.lp-stat-item {
  text-align: center;
}
.lp-stat-num {
  display: block;
  font-size: 2.2rem; font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
}
.lp-stat-label {
  display: block;
  font-size: 0.8rem; font-weight: 500;
  color: hsl(0 0% 100% / 0.75);
  margin-top: 0.25rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.lp-stat-divider {
  width: 1px; height: 40px;
  background: hsl(0 0% 100% / 0.25);
}

/* ─── SECTION COMMONS ─── */
.lp-section {
  background: var(--lp-section-bg);
  padding: 5rem 2rem;
}
.lp-section-alt {
  background: var(--lp-card-bg);
  padding: 5rem 2rem;
}
.lp-container {
  max-width: 1200px;
  margin: 0 auto;
}
.lp-section-label {
  display: inline-block;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lp-primary-h);
  background: var(--lp-primary-bg);
  border: 1px solid hsl(var(--lp-primary) / 0.25);
  border-radius: var(--lp-radius-sm);
  padding: 0.3rem 1rem;
  margin-bottom: 1rem;
}
.lp-section-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800; letter-spacing: -0.03em;
  color: var(--lp-text);
  margin-bottom: 0.75rem;
  line-height: 1.15;
}
.lp-section-sub {
  font-size: 1.05rem; font-weight: 400;
  color: var(--lp-text-muted);
  line-height: 1.6;
  max-width: 560px; margin: 0 auto 3rem;
}
.lp-section-head {
  text-align: center;
}

/* ─── FEATURES ─── */
.lp-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.lp-feature-card {
  background: var(--lp-card-bg);
  border: 2px solid var(--lp-border);
  border-radius: var(--lp-radius-lg);
  padding: 2rem;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  cursor: default;
}
.lp-feature-card:hover {
  border-color: var(--lp-primary-h);
  box-shadow: var(--lp-primary-glow);
  transform: translateY(-3px);
}
.lp-feature-icon {
  width: 56px; height: 56px;
  background: var(--lp-primary-bg);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.75rem;
  transition: transform 0.3s;
}
.lp-feature-card:hover .lp-feature-icon {
  transform: scale(1.12);
}
.lp-feature-title {
  font-size: 1.15rem; font-weight: 700;
  color: var(--lp-text); margin-bottom: 0.5rem;
}
.lp-feature-desc {
  font-size: 0.9rem; line-height: 1.6;
  color: var(--lp-text-muted);
}

/* ─── COURSES ─── */
.lp-courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
.lp-course-card {
  background: var(--lp-card-bg);
  border: 2px solid var(--lp-border);
  border-radius: var(--lp-radius-lg);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}
.lp-course-card:hover {
  transform: translateY(-4px);
}
.lp-course-card-top {
  height: 6px;
}
.lp-course-green  .lp-course-card-top { background: var(--lp-green);  }
.lp-course-yellow .lp-course-card-top { background: var(--lp-yellow); }
.lp-course-orange .lp-course-card-top { background: var(--lp-orange); }
.lp-course-red    .lp-course-card-top { background: var(--lp-red);    }
.lp-course-green:hover  { box-shadow: 0 0 40px hsl(145 55% 42% / 0.3); }
.lp-course-yellow:hover { box-shadow: 0 0 40px hsl(38  92% 50% / 0.3); }
.lp-course-orange:hover { box-shadow: 0 0 40px hsl(24  90% 52% / 0.3); }
.lp-course-red:hover    { box-shadow: 0 0 40px hsl(4   82% 56% / 0.3); }
.lp-course-body {
  padding: 1.5rem;
}
.lp-course-badge {
  display: inline-flex; align-items: center;
  font-size: 0.75rem; font-weight: 800;
  padding: 0.3rem 0.8rem;
  border-radius: var(--lp-radius-sm);
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}
.lp-course-green  .lp-course-badge { background: hsl(145 55% 42% / 0.12); color: var(--lp-green);  border: 1px solid hsl(145 55% 42% / 0.3); }
.lp-course-yellow .lp-course-badge { background: hsl(38  92% 50% / 0.12); color: var(--lp-yellow); border: 1px solid hsl(38  92% 50% / 0.3); }
.lp-course-orange .lp-course-badge { background: hsl(24  90% 52% / 0.12); color: var(--lp-orange); border: 1px solid hsl(24  90% 52% / 0.3); }
.lp-course-red    .lp-course-badge { background: hsl(4   82% 56% / 0.12); color: var(--lp-red);    border: 1px solid hsl(4   82% 56% / 0.3); }
.lp-course-title {
  font-size: 1.2rem; font-weight: 800;
  color: var(--lp-text); margin-bottom: 0.5rem;
}
.lp-course-desc {
  font-size: 0.88rem; line-height: 1.55;
  color: var(--lp-text-muted); margin-bottom: 1rem;
}
.lp-course-topics {
  list-style: none; padding: 0; margin: 0 0 1.25rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.lp-course-topics li {
  font-size: 0.85rem; color: var(--lp-text-muted);
  display: flex; align-items: center; gap: 0.5rem;
}
.lp-course-topics li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%; flex-shrink: 0;
}
.lp-course-green  .lp-course-topics li::before { background: var(--lp-green);  }
.lp-course-yellow .lp-course-topics li::before { background: var(--lp-yellow); }
.lp-course-orange .lp-course-topics li::before { background: var(--lp-orange); }
.lp-course-red    .lp-course-topics li::before { background: var(--lp-red);    }
.lp-course-meta {
  display: flex; gap: 1rem; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--lp-text-muted);
  margin-bottom: 1.25rem;
}
.lp-course-meta span { display: flex; align-items: center; gap: 0.3rem; }
.lp-course-btn {
  display: block; width: 100%; text-align: center;
  padding: 0.65rem 1rem;
  border: 2px solid var(--lp-border);
  border-radius: var(--lp-radius-btn);
  background: transparent;
  font-family: inherit; font-size: 0.9rem; font-weight: 700;
  color: var(--lp-text);
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.lp-course-btn:hover {
  border-color: var(--lp-primary-h);
  color: var(--lp-primary-h);
  background: var(--lp-primary-bg);
}

/* ─── VIDEOS ─── */
.lp-videos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.lp-video-featured {
  position: relative;
  border-radius: var(--lp-radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 3px solid hsl(var(--lp-primary) / 0.5);
  cursor: pointer;
  background: hsl(220,20%,10%);
  transition: box-shadow 0.3s, transform 0.3s;
}
.lp-video-featured:hover {
  box-shadow: var(--lp-primary-glow);
  transform: scale(1.01);
}
.lp-video-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.lp-video-featured:hover .lp-video-thumb {
  transform: scale(1.04);
}
.lp-video-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: hsl(0 0% 0% / 0.3);
}
.lp-video-play-btn {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--lp-primary-h);
  box-shadow: 0 8px 32px hsl(0 0% 0% / 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
}
.lp-video-featured:hover .lp-video-play-btn {
  transform: scale(1.1);
  box-shadow: 0 12px 40px hsl(0 0% 0% / 0.4);
}
.lp-video-overlay-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
  background: linear-gradient(transparent, hsl(0 0% 0% / 0.8));
  color: #fff;
}
.lp-video-overlay-title {
  font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem;
}
.lp-video-overlay-meta {
  font-size: 0.8rem; color: hsl(0 0% 100% / 0.7);
  display: flex; gap: 0.75rem; flex-wrap: wrap;
}
.lp-video-overlay-badge {
  display: inline-block;
  background: var(--lp-primary-h);
  color: #fff; font-size: 0.7rem; font-weight: 700;
  padding: 0.2rem 0.6rem; border-radius: 20px;
  margin-bottom: 0.5rem;
}
.lp-videos-mini {
  display: flex; flex-direction: column; gap: 1rem;
}
.lp-video-mini-card {
  display: flex; gap: 1rem;
  background: var(--lp-card-bg);
  border: 2px solid var(--lp-border);
  border-radius: var(--lp-radius-lg);
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.lp-video-mini-card:hover {
  border-color: var(--lp-primary-h);
  box-shadow: var(--lp-primary-glow);
}
.lp-video-mini-thumb {
  width: 90px; height: 60px;
  border-radius: 12px; overflow: hidden;
  flex-shrink: 0; position: relative;
  background: hsl(220,20%,12%);
}
.lp-video-mini-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.lp-video-mini-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #fff;
  background: hsl(0 0% 0% / 0.35);
}
.lp-video-mini-info { flex: 1; min-width: 0; }
.lp-video-mini-title {
  font-size: 0.88rem; font-weight: 700;
  color: var(--lp-text);
  margin-bottom: 0.3rem;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.lp-video-mini-badge {
  font-size: 0.7rem; font-weight: 700;
  background: var(--lp-primary-bg);
  color: var(--lp-primary-h);
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  border: 1px solid hsl(var(--lp-primary) / 0.25);
}
.lp-video-mini-meta {
  font-size: 0.75rem; color: var(--lp-text-muted);
  margin-top: 0.4rem;
  display: flex; gap: 0.5rem;
}
.lp-videos-cta {
  text-align: center; margin-top: 2.5rem;
}

/* ─── HOW-TO / ROADMAP ─── */
.lp-howto-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  position: relative;
}
.lp-howto-step {
  background: var(--lp-card-bg);
  border: 2px solid var(--lp-border);
  border-radius: var(--lp-radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
  position: relative;
}
.lp-howto-step:hover {
  box-shadow: 0 0 40px hsl(var(--lp-primary) / 0.3);
  transform: translateY(-4px);
  border-color: var(--lp-primary-h);
}
.lp-howto-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--lp-primary-h);
  color: #fff;
  font-size: 1.4rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
}
.lp-howto-icon {
  font-size: 1.75rem; margin-bottom: 0.75rem;
  color: var(--lp-primary-h);
  transition: transform 0.3s;
}
.lp-howto-step:hover .lp-howto-icon {
  transform: scale(1.15);
}
.lp-howto-title {
  font-size: 1rem; font-weight: 700;
  color: var(--lp-text); margin-bottom: 0.5rem;
}
.lp-howto-desc {
  font-size: 0.85rem; line-height: 1.55;
  color: var(--lp-text-muted);
}

/* ─── REVIEWS ─── */
.lp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.lp-review-card {
  background: var(--lp-card-bg);
  border: 2px solid var(--lp-border);
  border-top: 4px solid var(--lp-primary-h);
  border-radius: var(--lp-radius-lg);
  padding: 1.75rem;
  transition: box-shadow 0.3s, transform 0.3s;
}
.lp-review-card:hover {
  box-shadow: var(--lp-primary-glow);
  transform: translateY(-4px);
}
.lp-review-author {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.25rem;
}
.lp-review-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--lp-primary-bg);
  border: 2px solid var(--lp-primary-h);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 800;
  color: var(--lp-primary-h);
  flex-shrink: 0;
}
.lp-review-name {
  font-size: 0.95rem; font-weight: 700;
  color: var(--lp-text);
}
.lp-review-level {
  font-size: 0.72rem; font-weight: 700;
  color: var(--lp-primary-h);
  background: var(--lp-primary-bg);
  border: 1px solid hsl(var(--lp-primary) / 0.25);
  border-radius: 20px;
  padding: 0.15rem 0.6rem;
  display: inline-block; margin-top: 0.2rem;
}
.lp-review-text {
  font-size: 0.9rem; line-height: 1.65;
  color: var(--lp-text-muted);
}

/* ─── FAQ ─── */
.lp-faq-list {
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.lp-faq-item {
  background: var(--lp-card-bg);
  border: 2px solid var(--lp-border);
  border-radius: var(--lp-radius-lg);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.lp-faq-item:hover,
.lp-faq-item.open {
  border-color: var(--lp-primary-h);
  box-shadow: 0 0 24px hsl(var(--lp-primary) / 0.15);
}
.lp-faq-question {
  width: 100%; text-align: left;
  padding: 1.25rem 1.5rem;
  background: transparent; border: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  font-family: inherit; font-size: 0.95rem; font-weight: 700;
  color: var(--lp-text); cursor: pointer;
  transition: color 0.3s;
}
.lp-faq-question:hover { color: var(--lp-primary-h); }
.lp-faq-item.open .lp-faq-question { color: var(--lp-primary-h); }
.lp-faq-arrow {
  color: var(--lp-text-muted);
  transition: transform 0.3s, color 0.3s;
  flex-shrink: 0; font-size: 0.9rem;
}
.lp-faq-item.open .lp-faq-arrow {
  transform: rotate(180deg);
  color: var(--lp-primary-h);
}
.lp-faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
}
.lp-faq-item.open .lp-faq-answer {
  max-height: 400px;
}
.lp-faq-answer-inner {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.9rem; line-height: 1.65;
  color: var(--lp-text-muted);
  border-top: 1px solid var(--lp-border);
  padding-top: 1rem;
}

/* ─── SUPPORT ─── */
.lp-support-card {
  background: var(--lp-card-bg);
  border: 2px solid var(--lp-border);
  border-radius: var(--lp-radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  max-width: 640px; margin: 0 auto;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.lp-support-card:hover {
  border-color: var(--lp-primary-h);
  box-shadow: var(--lp-primary-glow);
}
.lp-support-icon {
  width: 72px; height: 72px;
  background: var(--lp-primary-bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin: 0 auto 1.5rem;
  color: var(--lp-primary-h);
}
.lp-support-title {
  font-size: 1.5rem; font-weight: 800;
  color: var(--lp-text); margin-bottom: 0.75rem;
}
.lp-support-desc {
  font-size: 0.95rem; color: var(--lp-text-muted);
  line-height: 1.6; margin-bottom: 1.75rem;
}
.lp-support-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: var(--lp-primary-h);
  color: #fff; border: 2px solid var(--lp-primary-h);
  border-radius: var(--lp-radius-btn);
  font-family: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: background 0.3s, box-shadow 0.3s, padding 0.3s;
}
.lp-support-btn:hover {
  background: var(--lp-primary-d);
  box-shadow: var(--lp-primary-glow);
}

/* ═══════════════════════════════════════════════════════════════
   COOKIE BANNER — полностью в дизайн-системе сайта
   Те же переменные: --lp-card-bg, --lp-border, --lp-primary-h
   Скругления: var(--lp-radius-lg) как у карточек курсов
   Кнопки: капсульные, монохромная SVG-иконка
   ═══════════════════════════════════════════════════════════════ */
.lp-cookie-banner {
  position: fixed;
  bottom: 1.75rem;
  left: 50%;
  z-index: 9999;
  display: none;
  width: calc(100% - 3rem);
  max-width: 680px;
}
.lp-cookie-banner.visible {
  display: block;
  animation: lp-cookie-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes lp-cookie-slide-in {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}
.lp-cookie-card {
  background: var(--lp-card-bg);
  border: 1.5px solid var(--lp-border);
  border-radius: 18px;
  padding: 1rem 1.4rem;
  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.1), 0 1px 4px hsl(0 0% 0% / 0.05);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
}
.lp-cookie-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--lp-primary-bg);
  border-radius: 10px;
  color: var(--lp-primary-h);
}
.lp-cookie-text-block {
  flex: 1;
  min-width: 0;
}
.lp-cookie-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--lp-text);
  margin-bottom: 0.15rem;
  font-family: inherit;
}
.lp-cookie-desc {
  font-size: 0.77rem;
  color: var(--lp-text-muted);
  line-height: 1.5;
  margin: 0;
  font-family: inherit;
}
.lp-cookie-link {
  color: var(--lp-primary-h);
  text-decoration: underline;
}
.lp-cookie-btns {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  align-items: center;
}
/* Отклонить — outline-капсула, как lp-btn-login */
.lp-cookie-decline {
  padding: 0.45rem 1rem;
  background: transparent;
  border: 1.5px solid var(--lp-border);
  color: var(--lp-text-muted);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--lp-radius-btn);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  white-space: nowrap;
}
.lp-cookie-decline:hover {
  border-color: var(--lp-primary-h);
  color: var(--lp-primary-h);
  background: var(--lp-primary-bg);
}
/* Принять — filled-капсула, как lp-btn-register */
.lp-cookie-accept {
  padding: 0.45rem 1.1rem;
  background: var(--lp-primary-h);
  color: #fff;
  border: 1.5px solid var(--lp-primary-h);
  border-radius: var(--lp-radius-btn);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.lp-cookie-accept:hover {
  background: var(--lp-primary-d);
  box-shadow: var(--lp-primary-glow);
}
@media (max-width: 600px) {
  .lp-cookie-banner { width: calc(100% - 2rem); bottom: 1rem; }
  .lp-cookie-card   { flex-wrap: wrap; gap: 0.75rem; padding: 1rem; }
  .lp-cookie-icon   { display: none; }
  .lp-cookie-btns   { width: 100%; justify-content: flex-end; }
}
/* ─── FOOTER ─── */
.lp-footer {
  background: hsl(var(--lp-primary) / 0.04);
  border-top: 1px solid var(--lp-border);
  padding: 4rem 2rem 2rem;
}
.lp-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1200px; margin: 0 auto;
}
.lp-footer-brand {}
.lp-footer-logo {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1rem; text-decoration: none;
}
.lp-footer-desc {
  font-size: 0.85rem; line-height: 1.65;
  color: var(--lp-text-muted);
}
.lp-footer-col-title {
  font-size: 0.85rem; font-weight: 800;
  color: var(--lp-text);
  text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 1rem;
}
.lp-footer-links {
  display: flex; flex-direction: column; gap: 0.6rem;
  list-style: none; padding: 0; margin: 0;
}
.lp-footer-links a {
  font-size: 0.875rem; color: var(--lp-text-muted);
  text-decoration: none;
  transition: color 0.3s;
}
.lp-footer-links a:hover { color: var(--lp-primary-h); }
.lp-footer-bottom {
  max-width: 1200px; margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lp-border);
  text-align: center;
  font-size: 0.82rem; color: var(--lp-text-muted);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .lp-nav { display: none; }
  .lp-hamburger { display: flex; }
  .lp-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .lp-videos-grid { grid-template-columns: 1fr; }
  .lp-videos-mini { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .lp-section, .lp-section-alt { padding: 3.5rem 1.25rem; }
  .lp-hero-content { padding: 2rem 1.25rem; }
  .lp-stats-bar { gap: 1.25rem; padding: 1.25rem 1.5rem; }
  .lp-stat-divider { display: none; }
  .lp-stat-num { font-size: 1.6rem; }
  .lp-hero-btns { flex-direction: column; gap: 0.75rem; }
  .lp-cta-primary, .lp-cta-secondary { width: 100%; justify-content: center; }
  .lp-features-grid { grid-template-columns: 1fr; }
  .lp-courses-grid { grid-template-columns: 1fr; }
  .lp-howto-steps { grid-template-columns: 1fr 1fr; }
  .lp-videos-mini { grid-template-columns: 1fr; }
  .lp-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .lp-reviews-grid { grid-template-columns: 1fr; }
  .lp-header-inner { padding: 0 1.25rem; }
  .lp-section-title { font-size: 1.75rem; }
}
@media (max-width: 480px) {
  .lp-howto-steps { grid-template-columns: 1fr; }
  .lp-hero-title { font-size: 2rem; }
  .lp-stats-bar { flex-direction: column; gap: 1rem; }
  .lp-cookie-card { flex-direction: column; }
}


/* ════════════════════════════════════════════
   НАШИ ПРОДУКТЫ — Task 8
════════════════════════════════════════════ */
.lp-products-section { background: hsl(var(--background)); }
.lp-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.lp-product-card {
  background: hsl(var(--card, 0 0% 100%));
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid hsl(var(--border));
  box-shadow: 0 4px 20px rgba(30,100,180,0.08);
  transition: transform 0.25s, box-shadow 0.25s;
}
.lp-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(30,100,180,0.14);
}
.lp-product-img {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.lp-prod-map { background: linear-gradient(135deg, #1e96e4, #35B1FA); }
.lp-prod-practice { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.lp-prod-video { background: linear-gradient(135deg, #1e96e4, #35B1FA); }
.lp-prod-analytics { background: linear-gradient(135deg, #10b981, #34d399); }
.lp-prod-illus { width: 80px; height: 60px; }
.lp-product-body { padding: 20px 22px 22px; }
.lp-product-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tf-text);
  margin-bottom: 8px;
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-product-desc {
  font-size: 0.86rem;
  color: var(--tf-text2);
  line-height: 1.6;
  margin-bottom: 14px;
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-product-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--tf-cyan-dark);
  text-decoration: none;
  transition: color 0.2s, gap 0.2s;
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-product-link:hover { color: var(--tf-cyan); gap: 8px; }

/* ════════════════════════════════════════════
   КАК РАБОТАЕТ — 6 шагов в сетке (Task 9)
════════════════════════════════════════════ */
.lp-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .lp-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-steps-grid { grid-template-columns: 1fr; } }
.lp-step-card2 {
  background: #fff;
  border-radius: 16px;
  padding: 24px 22px;
  border: 1.5px solid rgba(30,150,228,0.12);
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.lp-step-card2:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(30,100,180,0.12); }
.lp-step-icon2 { font-size: 2rem; margin-bottom: 8px; }
.lp-step-num2 {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--tf-cyan);
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-step-title2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tf-text);
  margin-bottom: 8px;
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-step-desc2 {
  font-size: 0.84rem;
  color: var(--tf-text2);
  line-height: 1.6;
  font-family: "Montserrat", system-ui, sans-serif;
}

/* ════════════════════════════════════════════
   ОТЗЫВЫ СТУДЕНТОВ — Task 9
════════════════════════════════════════════ */
.lp-reviews-section { background: hsl(var(--background)); }
.lp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.lp-review-card {
  background: #fff;
  border-radius: 18px;
  padding: 26px 24px;
  border: 1.5px solid rgba(30,150,228,0.12);
  box-shadow: 0 4px 20px rgba(30,100,180,0.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-review-stars { color: #f59e0b; font-size: 1rem; letter-spacing: 2px; }
.lp-review-text {
  font-size: 0.9rem;
  color: var(--tf-text);
  line-height: 1.65;
  flex: 1;
  font-style: italic;
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-review-author { display: flex; align-items: center; gap: 12px; }
.lp-review-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #1e96e4, #35B1FA);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; color: #fff; flex-shrink: 0;
}
.lp-av-pink { background: linear-gradient(135deg, #ec4899, #f472b6); }
.lp-av-green { background: linear-gradient(135deg, #10b981, #34d399); }
.lp-review-name { font-size: 0.88rem; font-weight: 700; color: var(--tf-text); font-family: "Montserrat", system-ui, sans-serif; }
.lp-review-meta { font-size: 0.76rem; color: var(--tf-text2); font-family: "Montserrat", system-ui, sans-serif; }

/* ════════════════════════════════════════════
   БОТ-АССИСТЕНТ — Task 9
════════════════════════════════════════════ */
.lp-bot-section { background: hsl(var(--background)); }
.lp-bot-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 860px) {
  .lp-bot-inner { grid-template-columns: 1fr; gap: 36px; }
}
.lp-bot-desc {
  font-size: 1rem;
  color: var(--tf-text2);
  line-height: 1.7;
  margin-bottom: 22px;
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-bot-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--tf-text);
  font-weight: 500;
}
.lp-bot-check {
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(30,150,228,0.12);
  align-items: center; justify-content: center;
  color: var(--tf-cyan-dark);
  font-size: 12px;
  font-weight: 700;
  margin-right: 8px;
  flex-shrink: 0;
}
.lp-bot-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: 999px;
  background: #229ED9;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-bot-cta:hover {
  background: #1a8fcc;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(34,158,217,0.4);
}
/* Chat window mock */
.lp-chat-window {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 16px 48px rgba(30,100,180,0.14);
  overflow: hidden;
  border: 1.5px solid rgba(30,150,228,0.12);
  max-width: 380px;
  margin: 0 auto;
}
.lp-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #1e96e4, #35B1FA);
  color: #fff;
}
.lp-chat-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900;
}
.lp-chat-name { font-size: 0.9rem; font-weight: 700; font-family: "Montserrat", system-ui, sans-serif; }
.lp-chat-status { font-size: 0.72rem; opacity: 0.85; font-family: "Montserrat", system-ui, sans-serif; color: #a8f0b8; }
.lp-chat-messages { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.lp-chat-msg { display: flex; }
.lp-msg-user { justify-content: flex-end; }
.lp-chat-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.84rem;
  line-height: 1.5;
  font-family: "Montserrat", system-ui, sans-serif;
  background: #f0f7ff;
  color: var(--tf-text);
  border-radius: 16px 16px 16px 4px;
}
.lp-bubble-task { background: rgba(30,150,228,0.08); border: 1px solid rgba(30,150,228,0.15); }
.lp-bubble-user {
  background: linear-gradient(135deg, #1e96e4, #35B1FA);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.lp-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(30,150,228,0.1);
}
.lp-chat-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(30,150,228,0.2);
  border-radius: 999px;
  font-size: 0.84rem;
  outline: none;
  font-family: "Montserrat", system-ui, sans-serif;
  background: #f7f9fc;
  color: var(--tf-text);
}
.lp-chat-send {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--tf-cyan);
  color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
  transition: background 0.2s;
}
.lp-chat-send:hover { background: var(--tf-cyan-dark); }

/* ════════════════════════════════════════════════════════════
   NEW COURSES SECTION — 4 cards with colored borders
════════════════════════════════════════════════════════════ */
.lp-courses-section { background: hsl(var(--primary) / 0.06); }
.lp-courses-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 860px) { .lp-courses-grid2 { grid-template-columns: 1fr; } }

.lp-course-card2 {
  background: hsl(var(--background));
  border: 3px solid var(--cc, hsl(var(--primary)));
  border-radius: 20px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 4px 24px var(--cc-glow, rgba(30,150,228,0.1));
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}
.lp-course-card2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 60%, var(--cc-glow, rgba(30,150,228,0.05)) 100%);
  pointer-events: none;
}
.lp-course-card2:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px var(--cc-glow, rgba(30,150,228,0.2));
}

.lp-cc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.lp-cc-badge {
  color: #fff;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 8px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.lp-cc-sub {
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-cc-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: hsl(var(--foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  margin: 0 0 8px;
}
.lp-cc-desc {
  font-size: 14px;
  color: hsl(var(--muted-foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  line-height: 1.5;
  margin-bottom: 16px;
}
.lp-cc-topics {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-cc-topics li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-cc-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.lp-cc-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-cc-meta span { display: flex; align-items: center; gap: 5px; }
.lp-cc-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}
@media (max-width: 420px) { .lp-cc-btns { grid-template-columns: 1fr; } }

.lp-cc-btn-primary {
  background: var(--btn-c, hsl(var(--primary)));
  color: #fff;
  border: 2px solid var(--btn-c, hsl(var(--primary)));
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: "Montserrat", system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.22s;
  white-space: nowrap;
  text-align: center;
}
.lp-cc-btn-primary:hover {
  background: transparent;
  color: var(--btn-c, hsl(var(--primary)));
  box-shadow: 0 0 24px var(--cc-glow, rgba(30,150,228,0.4));
}
.lp-cc-btn-outline {
  background: transparent;
  color: var(--btn-c, hsl(var(--primary)));
  border: 2px solid var(--btn-c, hsl(var(--primary)));
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: "Montserrat", system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.22s;
  white-space: nowrap;
  text-align: center;
}
.lp-cc-btn-outline:hover {
  background: var(--btn-c, hsl(var(--primary)));
  color: #fff;
  box-shadow: 0 0 24px var(--cc-glow, rgba(30,150,228,0.4));
}

/* ════════════════════════════════════════════════════════════
   NEW VIDEOS SECTION — player + info card
════════════════════════════════════════════════════════════ */
.lp-videos-section { background: hsl(var(--background)); }
.lp-video2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .lp-video2-grid { grid-template-columns: 1fr; }
}

/* Player left column */
.lp-video2-player { display: flex; flex-direction: column; gap: 0; }
.lp-video2-genre-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: hsl(var(--primary));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: "Montserrat", system-ui, sans-serif;
  padding: 5px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  align-self: flex-start;
}

.lp-video2-thumb {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
  cursor: pointer;
  background: linear-gradient(135deg, hsl(var(--primary) / 0.15), hsl(var(--primary) / 0.05));
}
.lp-video2-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s;
}
.lp-video2-thumb:hover .lp-video2-overlay { background: rgba(0,0,0,0.1); }
.lp-video2-play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: hsl(var(--primary));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 32px hsl(var(--primary) / 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.lp-video2-play:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 40px hsl(var(--primary) / 0.6);
}

/* Math poster */
.lp-video2-poster {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, hsl(200,60%,22%) 0%, hsl(200,70%,30%) 100%);
}
.lp-video2-poster-inner {
  text-align: center;
  padding: 20px;
  position: relative;
  width: 100%;
}
.lp-video2-formula {
  font-size: clamp(18px, 4vw, 28px);
  font-weight: 800;
  color: rgba(255,255,255,0.95);
  font-family: "Georgia", serif;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.lp-video2-formula-sub {
  font-size: clamp(13px, 2.5vw, 18px);
  color: rgba(255,255,255,0.7);
  font-family: "Georgia", serif;
  margin-bottom: 12px;
}
.lp-video2-graph {
  width: 100%;
  max-width: 200px;
  opacity: 0.7;
}

/* Playlist */
.lp-video2-playlist {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  overflow: hidden;
  margin-top: 12px;
}
.lp-v2-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.18s;
  border-bottom: 1px solid hsl(var(--border));
}
.lp-v2-item:last-child { border-bottom: none; }
.lp-v2-item:hover { background: hsl(var(--accent)); }
.lp-v2-active { background: hsl(var(--primary) / 0.08); }
.lp-v2-num {
  font-size: 13px;
  font-weight: 700;
  color: hsl(var(--primary));
  font-family: "Montserrat", system-ui, sans-serif;
  width: 24px;
  flex-shrink: 0;
}
.lp-v2-info { flex: 1; min-width: 0; }
.lp-v2-title {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-v2-meta {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  margin-top: 2px;
}

/* Right info card */
.lp-video2-card {
  background: hsl(var(--background));
  border: 1.5px solid hsl(var(--border));
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 4px 32px rgba(30,100,180,0.08);
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
}
.lp-video2-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 40px rgba(33,150,243,0.25);
}
.lp-v2c-title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.lp-v2c-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: hsl(var(--foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  margin: 0;
  line-height: 1.3;
}
.lp-v2c-badges {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.lp-v2c-badge-level {
  background: #4A90E2;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 8px;
  border: 2px solid #4A90E2;
  font-family: "Montserrat", system-ui, sans-serif;
  transition: all 0.2s;
  cursor: default;
}
.lp-v2c-badge-level:hover {
  background: #fff;
  color: #4A90E2;
}
.lp-v2c-badge-type {
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  font-size: 13px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 8px;
  border: 2px solid hsl(var(--primary) / 0.3);
  font-family: "Montserrat", system-ui, sans-serif;
  transition: all 0.2s;
  cursor: default;
}
.lp-v2c-badge-type:hover {
  background: #4A90E2;
  color: #fff;
  border-color: #4A90E2;
}
.lp-v2c-desc {
  font-size: 14px;
  color: hsl(var(--muted-foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  line-height: 1.6;
  margin-bottom: 0;
}
.lp-v2c-divider {
  border: none;
  border-top: 1px solid hsl(var(--muted-foreground) / 0.2);
  margin: 14px 0;
}
.lp-v2c-features {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}
.lp-v2c-feat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  flex: 1;
  min-width: 80px;
}
.lp-v2c-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.lp-v2c-btn-primary {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4A90E2;
  color: #fff;
  border: 2px solid #4A90E2;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Montserrat", system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.22s;
}
.lp-v2c-btn-primary:hover {
  background: #fff;
  color: #4A90E2;
  box-shadow: 0 0 30px rgba(74,144,226,0.5);
  transform: scale(1.03);
}
.lp-v2c-btn-outline {
  flex: 1;
  min-width: 120px;
  background: transparent;
  color: hsl(var(--foreground));
  border: 2px solid hsl(var(--border));
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Montserrat", system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.22s;
  text-align: center;
}
.lp-v2c-btn-outline:hover {
  border-color: #4A90E2;
  color: #4A90E2;
  box-shadow: 0 0 24px rgba(74,144,226,0.3);
  transform: scale(1.03);
}

/* ════════════════════════════════════════════════════════════
   NEW HOW-TO (Roadmap) — numbered steps
════════════════════════════════════════════════════════════ */
.lp-howto-section { background: hsl(var(--primary) / 0.06); }
.lp-howto-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 860px) { .lp-howto-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-howto-steps { grid-template-columns: 1fr; } }

.lp-howto-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: hsl(var(--background));
  border: 1.5px solid hsl(var(--border));
  border-radius: 16px;
  padding: 20px;
  transition: transform 0.22s, box-shadow 0.22s;
}
.lp-howto-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 32px hsl(var(--primary) / 0.15);
}
.lp-howto-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  font-family: "Montserrat", system-ui, sans-serif;
  flex-shrink: 0;
}
.lp-howto-body { flex: 1; min-width: 0; }
.lp-howto-icon {
  color: hsl(var(--primary));
  margin-bottom: 8px;
}
.lp-howto-title {
  font-size: 15px;
  font-weight: 800;
  color: hsl(var(--foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  margin: 0 0 6px;
}
.lp-howto-desc {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  line-height: 1.5;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   NEW REVIEWS — no stars, no quotes, Quote icon
════════════════════════════════════════════════════════════ */

.lp-reviews-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 680px) { .lp-reviews-grid2 { grid-template-columns: 1fr; } }

.lp-review-card2 {
  background: hsl(var(--background));
  border: 1.5px solid hsl(var(--border));
  border-radius: 18px;
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.22s, box-shadow 0.22s;
}
.lp-review-card2:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 40px hsl(var(--primary) / 0.15);
}
.lp-review-quote-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  opacity: 0.5;
}
.lp-review-text2 {
  font-size: 14px;
  line-height: 1.6;
  color: hsl(var(--foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  margin: 0;
  padding-right: 32px;
}
.lp-review-author2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.lp-review-avatar2 {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  font-family: "Montserrat", system-ui, sans-serif;
  flex-shrink: 0;
}
.lp-review-name2 {
  font-size: 14px;
  font-weight: 700;
  color: hsl(var(--foreground));
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-review-meta2 {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════
   BOT SECTION — phone mockup + description
════════════════════════════════════════════════════════════ */
.lp-bot-section { background: hsl(var(--primary) / 0.06); }
.lp-bot-inner2 {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .lp-bot-inner2 {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .lp-phone-wrap { display: flex; justify-content: center; }
}

/* Phone mockup */
.lp-phone-wrap { perspective: 1000px; }
.lp-phone-frame {
  width: 260px;
  background: hsl(var(--foreground));
  border-radius: 36px;
  padding: 12px;
  box-shadow:
    0 0 0 2px hsl(var(--border)),
    0 24px 64px rgba(0,0,0,0.25);
  transition: transform 0.35s;
  position: relative;
}
.lp-phone-frame:hover { transform: scale(1.04) rotateY(-3deg); }
.lp-phone-frame::before {
  content: "";
  position: absolute;
  top: 16px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 6px;
  background: hsl(var(--muted));
  border-radius: 3px;
}
.lp-phone-screen {
  background: #0f1923;
  border-radius: 26px;
  overflow: hidden;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  padding-top: 28px;
}
.lp-phone-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 10px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lp-phone-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(200,85%,55%), hsl(195,90%,65%));
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: #fff;
  font-family: "Georgia", serif;
  flex-shrink: 0;
}
.lp-phone-name {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.9);
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-phone-online {
  font-size: 10px; color: #4ade80;
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-phone-msgs {
  flex: 1; padding: 12px 12px 8px;
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
}
.lp-pm { display: flex; }
.lp-pm-bot { justify-content: flex-start; }
.lp-pm-user { justify-content: flex-end; }
.lp-pm-bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.45;
  font-family: "Montserrat", system-ui, sans-serif;
  word-break: break-word;
}
.lp-pm-bot .lp-pm-bubble {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
  border-radius: 4px 14px 14px 14px;
}
.lp-pm-task {
  background: rgba(30,150,228,0.2) !important;
  color: rgba(255,255,255,0.9) !important;
  border-left: 3px solid hsl(200,85%,55%);
  font-style: italic;
}
.lp-pm-answer {
  background: hsl(200,85%,55%) !important;
  color: #fff !important;
  border-radius: 14px 4px 14px 14px !important;
  font-weight: 700;
}
.lp-phone-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.lp-phone-input-placeholder {
  flex: 1;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-phone-send-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: hsl(200,85%,55%);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.lp-phone-send-btn:hover { transform: scale(1.1); }

/* Bot description right side */
.lp-bot-desc2 { display: flex; flex-direction: column; gap: 0; }
.lp-bot-title2 { text-align: left !important; margin-bottom: 12px !important; }
.lp-bot-lead {
  font-size: 15px;
  color: hsl(var(--muted-foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  line-height: 1.6;
  margin-bottom: 24px;
}
.lp-bot-feats2 {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lp-bot-feats2 li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.lp-bf-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: hsl(var(--primary) / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--primary));
  flex-shrink: 0;
}
.lp-bf-title {
  font-size: 14px;
  font-weight: 700;
  color: hsl(var(--foreground));
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-bf-desc {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  margin-top: 2px;
}
.lp-bot-cta2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: hsl(var(--primary));
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  font-family: "Montserrat", system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.22s;
  align-self: flex-start;
}
.lp-bot-cta2:hover {
  background: hsl(var(--primary) / 0.85);
  box-shadow: 0 0 32px hsl(var(--primary) / 0.4);
  transform: scale(1.04);
}

/* ════════════════════════════════════════════════════════════
   CTA BLOCK before footer
════════════════════════════════════════════════════════════ */
.lp-cta-block {
  position: relative;
  padding: 80px 24px;
  overflow: hidden;
  background: linear-gradient(
    160deg,
    var(--tf-hero-start) 0%,
    var(--tf-hero-mid) 50%,
    var(--tf-hero-end) 100%
  );
  text-align: center;
}
.lp-cta-block-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lp-cta-block-inner {
  position: relative;
  z-index: 2;
}
.lp-cta-block-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  font-family: "Montserrat", system-ui, sans-serif;
  margin: 0 0 12px;
}
.lp-cta-block-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.8);
  font-family: "Montserrat", system-ui, sans-serif;
  margin: 0 0 32px;
}
.lp-cta-block-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.lp-cta-block-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: hsl(var(--primary));
  border: 2px solid #fff;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  font-family: "Montserrat", system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.22s, box-shadow 0.22s;
}
.lp-cta-block-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(255,255,255,0.4);
}
.lp-cta-block-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  font-family: "Montserrat", system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.22s, box-shadow 0.22s, background 0.22s;
}
.lp-cta-block-secondary:hover {
  background: rgba(255,255,255,0.15);
  transform: scale(1.05);
  border-color: rgba(255,255,255,0.9);
}

/* ════════════════════════════════════════════════════════════
   FOOTER 2.0
════════════════════════════════════════════════════════════ */
.lp-footer2 {
  background: hsl(var(--background));
  border-top: 1px solid hsl(var(--border));
  padding: 56px 0 0;
}
.lp-footer2-top {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid hsl(var(--border));
}
@media (max-width: 760px) {
  .lp-footer2-top { grid-template-columns: 1fr; }
}
.lp-footer2-brand { display: flex; flex-direction: column; gap: 12px; }
.lp-footer2-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-footer2-sigma {
  font-size: 22px;
  font-weight: 900;
  font-family: "Georgia", serif;
}
.lp-footer2-brand-name {
  font-size: 18px;
  font-weight: 800;
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-footer2-tagline {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  line-height: 1.5;
  margin: 0;
}
.lp-footer2-socials {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.lp-footer2-social {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1.5px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: all 0.2s;
}
.lp-footer2-social:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.08);
}
.lp-footer2-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 560px) { .lp-footer2-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .lp-footer2-cols { grid-template-columns: 1fr; } }

.lp-footer2-col { display: flex; flex-direction: column; gap: 8px; }
.lp-footer2-col-title {
  font-size: 13px;
  font-weight: 800;
  color: hsl(var(--foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.lp-footer2-link {
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  font-family: "Montserrat", system-ui, sans-serif;
  text-decoration: none;
  transition: color 0.18s;
}
.lp-footer2-link:hover { color: hsl(var(--primary)); }
.lp-footer2-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  gap: 12px;
  flex-wrap: wrap;
}
.lp-footer2-copy {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  font-family: "Montserrat", system-ui, sans-serif;
}
.lp-footer2-made {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  font-family: "Montserrat", system-ui, sans-serif;
}

/* ── Video playlist: hover cursor + transition for card content ── */
.lp-v2-item { cursor: pointer; transition: background 0.2s ease; }
.lp-v2-active { background: hsl(var(--primary) / 0.12) !important; border-left: 3px solid hsl(var(--primary)); }
.lp-v2-active .lp-v2-num { color: hsl(var(--primary)); }
#lpVideoCard { transition: opacity 0.3s ease, transform 0.3s ease; }

/* ── Phone chat: .lp-pm-msg is the row wrapper (created dynamically by JS) ── */
.lp-pm-msg {
  display: flex;
  opacity: 0;
  animation: pmFadeIn 0.35s ease forwards;
}
.lp-pm-msg.lp-pm-bot  { justify-content: flex-start; }
.lp-pm-msg.lp-pm-user { justify-content: flex-end; }

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

/* ── Toast notification ── */
#_globalToast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: hsl(200, 85%, 45%); color: #fff;
  padding: 12px 24px; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  z-index: 99999; pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  max-width: 90vw; text-align: center;
}

/* ── CTA block buttons: no jump on hover, smooth scale only ── */
.lp-cta-block-primary,
.lp-cta-block-secondary {
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.lp-cta-block-primary:hover  { transform: scale(1.04); }
.lp-cta-block-secondary:hover { transform: scale(1.04); }

/* ── Footer links: pointer cursor ── */
.lp-footer2-cols a,
#lpFooterSupport, #lpFooterPrivacy, #lpFooterTerms {
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   v24 — Lower Landing Redesign
   Sections: Howto / Reviews / FAQ / CTA / Support / Footer
   All on bg-primary/0.1 except footer (bg-background)
   ═══════════════════════════════════════════════════════════════ */

/* ── v24 Common Section ── */
.v24-section {
  background: hsl(var(--primary) / 0.08);
  padding: 80px 0;
}

.v24-section-head {
  text-align: center;
  margin-bottom: 56px;
}

.v24-section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 12px;
  line-height: 1.2;
}

.v24-section-sub {
  font-size: 1.05rem;
  color: hsl(var(--muted-foreground));
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Howto: 5-step cards ── */
.v24-howto-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 48px; /* room for floating number bubble */
}

.v24-howto-card {
  position: relative;
  background: hsl(var(--card));
  border: 2px solid hsl(var(--primary) / 0.2);
  border-radius: 16px;
  padding: 40px 20px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.v24-howto-card:hover {
  border-color: hsl(var(--primary));
  transform: scale(1.05);
  box-shadow: 0 0 30px hsl(var(--primary) / 0.4);
}

.v24-howto-num {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  transition: transform 0.3s ease-out;
}

.v24-howto-card:hover .v24-howto-num {
  transform: translateX(-50%) scale(1.1);
}

.v24-howto-icon {
  width: 32px;
  height: 32px;
  color: hsl(var(--primary));
  margin: 0 auto 12px;
  display: block;
  stroke: hsl(var(--primary));
}

.v24-howto-step-title {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 8px;
}

.v24-howto-step-desc {
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
  margin: 0;
}

/* ── Reviews: 3-col grid ── */
.v24-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.v24-review-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: default;
  transition: all 0.3s ease-out;
}

.v24-review-card:hover {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 25px hsl(var(--primary) / 0.25);
  transform: translateY(-4px);
}

.v24-review-text {
  font-size: 0.95rem;
  color: hsl(var(--foreground));
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.v24-review-divider {
  border-top: 1px solid hsl(var(--border));
  padding-top: 16px;
  margin-top: auto;
}

.v24-review-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.v24-review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.v24-review-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: hsl(var(--foreground));
  line-height: 1.3;
}

.v24-review-meta {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}

/* ── FAQ ── */
.v24-faq-list {
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.v24-faq-item {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.v24-faq-item:hover {
  border-color: hsl(var(--primary) / 0.5);
}

.v24-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.97rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  text-align: left;
  transition: color 0.2s ease;
}

.v24-faq-trigger:hover {
  color: hsl(var(--primary));
}

.v24-faq-trigger.open {
  color: hsl(var(--primary));
}

.v24-faq-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  transition: transform 0.3s ease;
}

.v24-faq-trigger.open .v24-faq-arrow {
  transform: rotate(180deg);
}

.v24-faq-content {
  padding: 0 20px 18px;
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.65;
}

.v24-faq-content.hidden {
  display: none;
}

/* ── CTA Section ── */
.v24-cta-section {
  background: hsl(var(--primary) / 0.08);
  padding: 80px 0;
}

.v24-cta-card {
  background: hsl(var(--card));
  border: 2px solid hsl(var(--primary) / 0.3);
  border-radius: 24px;
  padding: 64px 48px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  cursor: default;
  transition: box-shadow 0.5s ease;
}

.v24-cta-card:hover {
  box-shadow: 0 0 60px hsl(var(--primary) / 0.4);
}

.v24-cta-title {
  font-size: clamp(1.6rem, 4vw, 2.75rem);
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 16px;
  line-height: 1.2;
}

.v24-cta-sub {
  font-size: 1.05rem;
  color: hsl(var(--muted-foreground));
  margin: 0 0 36px;
  line-height: 1.6;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.v24-cta-btns {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.v24-cta-btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: none;
  border-radius: 10px;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
}

.v24-cta-btn-primary:hover {
  padding: 14px 40px;
  box-shadow: 0 4px 20px hsl(var(--primary) / 0.45);
}

.v24-cta-btn-secondary {
  background: transparent;
  color: hsl(var(--primary));
  border: 2px solid hsl(var(--primary));
  border-radius: 10px;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 160px;
}

.v24-cta-btn-secondary:hover {
  padding: 14px 40px;
  background: hsl(var(--primary) / 0.08);
}

/* ── Support Section ── */
.v24-support-section {
  background: hsl(var(--primary) / 0.08);
  padding: 64px 0;
}

.v24-support-inner {
  text-align: center;
  margin-bottom: 40px;
}

.v24-support-icon {
  width: 48px;
  height: 48px;
  stroke: hsl(var(--primary));
  margin: 0 auto 16px;
  display: block;
}

.v24-support-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 8px;
}

.v24-support-sub {
  font-size: 0.95rem;
  color: hsl(var(--muted-foreground));
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

.v24-support-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.v24-support-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.v24-support-card:hover {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.05);
  transform: scale(1.05);
}

.v24-support-card-icon {
  width: 28px;
  height: 28px;
  stroke: hsl(var(--primary));
  transition: transform 0.3s ease;
}

.v24-support-card:hover .v24-support-card-icon {
  transform: scale(1.15);
}

.v24-support-card-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: hsl(var(--foreground));
}

.v24-support-card-value {
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
}

/* ── Footer (bg-background, only block not on blue) ── */
.v24-footer {
  background: hsl(var(--background));
  border-top: 1px solid hsl(var(--border));
}

.v24-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.v24-footer-top {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 56px 0 40px;
}

.v24-footer-brand {}

.v24-footer-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.v24-footer-logo svg {
  width: 24px;
  height: 24px;
  stroke: hsl(var(--primary));
}

.v24-footer-tagline {
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 220px;
}

.v24-footer-socials {
  display: flex;
  gap: 12px;
}

.v24-footer-social {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: hsl(var(--primary) / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.v24-footer-social:hover {
  background: hsl(var(--primary) / 0.2);
}

.v24-footer-social svg {
  width: 16px;
  height: 16px;
  stroke: hsl(var(--muted-foreground));
  transition: stroke 0.2s ease;
}

.v24-footer-social:hover svg {
  stroke: hsl(var(--primary));
}

.v24-footer-col {}

.v24-footer-col-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}

.v24-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v24-footer-col ul li a,
.v24-footer-col ul li button,
.v24-footer-col ul li span[role="button"] {
  font-size: 0.87rem;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
  display: inline-block;
}

.v24-footer-col ul li a:hover,
.v24-footer-col ul li button:hover,
.v24-footer-col ul li span[role="button"]:hover {
  color: hsl(var(--primary));
}

.v24-footer-bottom {
  border-top: 1px solid hsl(var(--border));
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.v24-footer-copy {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}

.v24-footer-made {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}

/* ── v24 Responsive ── */
@media (max-width: 1024px) {
  .v24-howto-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .v24-section {
    padding: 56px 0;
  }

  .v24-howto-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .v24-reviews-grid {
    grid-template-columns: 1fr;
  }

  .v24-support-cards {
    grid-template-columns: 1fr;
    max-width: 360px;
  }

  .v24-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 40px 0 32px;
  }

  .v24-footer-brand {
    grid-column: 1 / -1;
  }

  .v24-cta-card {
    padding: 40px 24px;
  }

  .v24-cta-btns {
    flex-direction: column;
    align-items: center;
  }

  .v24-cta-btn-primary,
  .v24-cta-btn-secondary {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 480px) {
  .v24-howto-grid {
    grid-template-columns: 1fr;
  }

  .v24-footer-top {
    grid-template-columns: 1fr;
  }

  .v24-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v25 — Courses / Bot / Roadmap sections
   Промты 1, 2, 3 из TonFrench, адаптированы под MathPracticum
   ═══════════════════════════════════════════════════════════════ */

/* ── v25 Common section (same as v24) ── */
.v25-section {
  background: hsl(var(--primary) / 0.08);
  padding: 80px 0;
}
.v25-section-head {
  text-align: center;
  margin-bottom: 56px;
}
.v25-section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 12px;
  line-height: 1.2;
}
.v25-section-sub {
  font-size: 1.05rem;
  color: hsl(var(--muted-foreground));
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   COURSES — 2-col grid, coloured 4px border, glow, badge
   ═══════════════════════════════════════════════════════════════ */
.v25-courses-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.v25-course-card {
  background: hsl(var(--card));
  border-radius: 32px;        /* усиленное скругление */
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 4px solid transparent;
  background-clip: padding-box;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, opacity 0.55s ease;
  cursor: default;
  /* cascade reveal: start hidden */
  opacity: 0;
  transform: translateY(24px);
}
/* cascade reveal: become visible */
.v25-course-card.v25-card-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Hover: фон мягко подсвечивается цветом уровня */
.v25-course-card.v25-card-visible:hover {
  transform: translateY(-4px);
}

/* Colour variants */
.v25-course-card--emerald { border-color: #10B981; }
.v25-course-card--blue    { border-color: #3B82F6; }
.v25-course-card--orange  { border-color: #F97316; }
.v25-course-card--purple  { border-color: #1e96e4; }

/* Hover: цветной bg-tint + усиленная тень (интерактивность без scale) */
.v25-course-card--emerald.v25-card-visible:hover {
  background: hsl(152 76% 97%);
  box-shadow: 0 8px 32px rgba(16,185,129,0.2), 0 0 0 1px rgba(16,185,129,0.12);
}
.v25-course-card--blue.v25-card-visible:hover {
  background: hsl(214 100% 97%);
  box-shadow: 0 8px 32px rgba(59,130,246,0.2), 0 0 0 1px rgba(59,130,246,0.12);
}
.v25-course-card--orange.v25-card-visible:hover {
  background: hsl(24 100% 97%);
  box-shadow: 0 8px 32px rgba(249,115,22,0.2), 0 0 0 1px rgba(249,115,22,0.12);
}
.v25-course-card--purple.v25-card-visible:hover {
  background: hsl(270 100% 97%);
  box-shadow: 0 8px 32px rgba(53,177,250,0.2), 0 0 0 1px rgba(53,177,250,0.12);
}
/* Dark mode hover tints */
[data-theme="dark"] .v25-course-card--emerald.v25-card-visible:hover { background: hsl(152 40% 10%); }
[data-theme="dark"] .v25-course-card--blue.v25-card-visible:hover    { background: hsl(214 40% 10%); }
[data-theme="dark"] .v25-course-card--orange.v25-card-visible:hover  { background: hsl(24 40% 10%);  }
[data-theme="dark"] .v25-course-card--purple.v25-card-visible:hover  { background: hsl(270 40% 10%); }

.v25-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.v25-badge {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  padding: 6px 16px;
  border-radius: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.v25-badge--emerald { background: #10B981; }
.v25-badge--blue    { background: #3B82F6; }
.v25-badge--orange  { background: #F97316; }
.v25-badge--purple  { background: #1e96e4; }

.v25-card-title-wrap { flex: 1; }
.v25-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 4px;
}
.v25-card-subtitle {
  font-size: 0.82rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  margin: 0;
}
.v25-card-desc {
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  margin: 0;
}

.v25-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.v25-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.v25-feat-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.v25-feat-icon--emerald { stroke: #10B981; color: #10B981; }
.v25-feat-icon--blue    { stroke: #3B82F6; color: #3B82F6; }
.v25-feat-icon--orange  { stroke: #F97316; color: #F97316; }
.v25-feat-icon--purple  { stroke: #1e96e4; color: #1e96e4; }
.v25-feature span {
  font-size: 0.87rem;
  color: hsl(var(--foreground));
  line-height: 1.45;
}

.v25-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid hsl(var(--border));
  padding-top: 16px;
}
.v25-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
}
.v25-stat svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: hsl(var(--muted-foreground));
}
.v25-stat-emoji {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.v25-card-btns,
.v25-btns {
  display: flex;
  flex-wrap: nowrap;   /* keep buttons on one line */
  gap: 10px;
  margin-top: auto;    /* push to bottom of card */
}

.v25-btn-primary, .v25-btn-secondary {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border-radius: 10px;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.v25-btn-icon { width: 15px; height: 15px; flex-shrink: 0; }

/* Primary buttons: colour fill → white text, hover: white bg + colour text + glow */
.v25-btn--emerald.v25-btn-primary { background: #10B981; color: #fff; border: 2px solid #10B981; }
.v25-btn--blue.v25-btn-primary    { background: #3B82F6; color: #fff; border: 2px solid #3B82F6; }
.v25-btn--orange.v25-btn-primary  { background: #F97316; color: #fff; border: 2px solid #F97316; }
.v25-btn--purple.v25-btn-primary  { background: #1e96e4; color: #fff; border: 2px solid #1e96e4; }

.v25-btn--emerald.v25-btn-primary:hover { background: #fff; color: #10B981; box-shadow: 0 4px 18px rgba(16,185,129,0.35); transform: scale(1.04); }
.v25-btn--blue.v25-btn-primary:hover    { background: #fff; color: #3B82F6; box-shadow: 0 4px 18px rgba(59,130,246,0.35); transform: scale(1.04); }
.v25-btn--orange.v25-btn-primary:hover  { background: #fff; color: #F97316; box-shadow: 0 4px 18px rgba(249,115,22,0.35); transform: scale(1.04); }
.v25-btn--purple.v25-btn-primary:hover  { background: #fff; color: #1e96e4; box-shadow: 0 4px 18px rgba(53,177,250,0.35); transform: scale(1.04); }

/* Secondary buttons: white bg + colour border, hover: colour text + glow */
.v25-btn--emerald.v25-btn-secondary { background: #fff; color: #000; border: 2px solid #10B981; }
.v25-btn--blue.v25-btn-secondary    { background: #fff; color: #000; border: 2px solid #3B82F6; }
.v25-btn--orange.v25-btn-secondary  { background: #fff; color: #000; border: 2px solid #F97316; }
.v25-btn--purple.v25-btn-secondary  { background: #fff; color: #000; border: 2px solid #1e96e4; }

.v25-btn--emerald.v25-btn-secondary:hover { color: #10B981; box-shadow: 0 4px 18px rgba(16,185,129,0.25); transform: scale(1.04); }
.v25-btn--blue.v25-btn-secondary:hover    { color: #3B82F6; box-shadow: 0 4px 18px rgba(59,130,246,0.25); transform: scale(1.04); }
.v25-btn--orange.v25-btn-secondary:hover  { color: #F97316; box-shadow: 0 4px 18px rgba(249,115,22,0.25); transform: scale(1.04); }
.v25-btn--purple.v25-btn-secondary:hover  { color: #1e96e4; box-shadow: 0 4px 18px rgba(53,177,250,0.25); transform: scale(1.04); }

/* dark mode secondary buttons */
[data-lp-theme="dark"] .v25-btn-secondary {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}

/* ═══════════════════════════════════════════════════════════════
   BOT SECTION — 2-col: phone mockup + features
   ═══════════════════════════════════════════════════════════════ */
.v25-bot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Phone mockup */
.v25-bot-phone-wrap {
  display: flex;
  justify-content: center;
}
.v25-bot-phone {
  background: hsl(var(--card));
  border: 2px solid hsl(var(--border));
  border-radius: 28px;
  overflow: hidden;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.v25-phone-header {
  background: hsl(var(--muted));
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid hsl(var(--border));
}
.v25-phone-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: hsl(var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v25-phone-avatar-icon {
  width: 18px;
  height: 18px;
  stroke: hsl(var(--primary-foreground));
}
.v25-phone-info { flex: 1; }
.v25-phone-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: hsl(var(--foreground));
}
.v25-phone-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}
.v25-phone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  animation: v25PulseDot 1.5s infinite;
  flex-shrink: 0;
}
@keyframes v25PulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

.v25-chat-messages {
  height: 440px;
  overflow-y: auto;
  padding: 16px;
  background: hsl(var(--muted) / 0.3);
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}

/* Message animation */
@keyframes v25MsgFadeIn {
  0%   { opacity: 0; transform: translateY(12px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.v25-msg-anim {
  animation: v25MsgFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.v25-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 0.83rem;
  line-height: 1.55;
}
.v25-msg--bot {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  color: hsl(var(--foreground));
}
.v25-msg--user {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

/* Chat action buttons */
.v25-chat-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: flex-start;
  width: 100%;
}
.v25-chat-actions-label {
  font-size: 0.72rem;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  padding: 0 4px;
}
.v25-chat-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: #2196F3;
  color: #fff;
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
}
.v25-act-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Phone input bar */
.v25-phone-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: hsl(var(--muted));
  border-top: 1px solid hsl(var(--border));
}
.v25-phone-input-field {
  flex: 1;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
  font-family: inherit;
  outline: none;
}
.v25-phone-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: hsl(var(--primary));
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.v25-phone-send svg {
  width: 16px;
  height: 16px;
  stroke: hsl(var(--primary-foreground));
}

/* Right column: features */
.v25-bot-features {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.v25-bot-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.v25-bot-feat-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: hsl(var(--primary) / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v25-bot-feat-icon {
  width: 24px;
  height: 24px;
  stroke: hsl(var(--primary));
}
.v25-bot-feat-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 6px;
}
.v25-bot-feat-desc {
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  margin: 0;
}
.v25-bot-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 14px 32px;
  background: #4A90E2;
  color: #fff;
  border: 2px solid #4A90E2;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-start;
}
.v25-bot-cta-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* ═══════════════════════════════════════════════════════════════
   ROADMAP — 2/3-col grid, floating number, large icon, hover glow
   ═══════════════════════════════════════════════════════════════ */
.v25-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.v25-roadmap-card {
  position: relative;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  padding: 48px 20px 28px;
  text-align: center;
  cursor: default;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.v25-roadmap-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
}

.v25-roadmap-num {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.v25-roadmap-icon-wrap {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.v25-roadmap-icon {
  width: 56px;
  height: 56px;
  stroke: hsl(var(--primary));
  display: block;
}

.v25-roadmap-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 10px;
}
.v25-roadmap-desc {
  font-size: 0.87rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.55;
  margin: 0;
}

/* ── v25 Responsive ── */
@media (max-width: 1024px) {
  .v25-courses-grid {
    grid-template-columns: 1fr;
  }
  .v25-roadmap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .v25-bot-grid {
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .v25-bot-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .v25-roadmap-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .v25-card-btns {
    flex-direction: column;
  }
  .v25-btn-primary,
  .v25-btn-secondary {
    min-width: 100%;
  }
}

@media (max-width: 480px) {
  .v25-roadmap-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   v26 — Reviews redesign + icon/card radius fixes
   ============================================================ */

/* --- v25 fixes: roadmap icon wrap → rounded-full --- */
.v25-roadmap-icon-wrap {
  border-radius: 50% !important;
  background: hsl(var(--primary) / 0.08);
  border: 2px solid hsl(var(--primary) / 0.18);
}

/* --- v25 fix: course card — ensure border-radius visible with colored border --- */
.v25-course-card {
  overflow: hidden;
  border-radius: 18px !important;
}

/* --- v26 Reviews Grid --- */
.v26-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
@media (max-width: 900px) {
  .v26-reviews-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- v26 Review Card --- */
.v26-review-card {
  position: relative;
  background: hsl(var(--card));
  border-radius: 16px;
  border: 1px solid hsl(var(--border));
  border-top: 4px solid hsl(var(--primary));
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  /* scroll animation */
  opacity: 0;
  transform: translateY(24px);
  animation: v26ReviewIn 0.55s ease forwards;
}
@keyframes v26ReviewIn {
  to { opacity: 1; transform: translateY(0); }
}
.v26-review-card:hover {
  box-shadow: 0 8px 40px rgba(33, 150, 243, 0.22);
  transform: translateY(-4px);
}

/* --- Quote icon — absolute top-right --- */
.v26-review-quote {
  position: absolute;
  top: 16px;
  right: 18px;
  color: hsl(var(--primary) / 0.18);
  pointer-events: none;
  line-height: 0;
}
.v26-review-quote svg {
  width: 32px;
  height: 32px;
  stroke: hsl(var(--primary));
  opacity: 0.22;
}

/* --- Review body text --- */
.v26-review-text {
  font-size: 0.91rem;
  line-height: 1.65;
  color: hsl(var(--foreground));
  margin: 0;
  flex: 1;
}

/* --- Review header: avatar + name --- */
.v26-review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.v26-review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid hsl(var(--primary) / 0.25);
}

.v26-review-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  line-height: 1.3;
}

.v26-review-role {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}

/* ============================================================
   v27 — Hero bigger, pill buttons, roadmap no-border icons,
          course feature-pill radius, video no-nums, emoji wrap
   ============================================================ */

/* --- Hero: taller on desktop --- */
.lp-hero {
  min-height: 92vh !important;
  padding-top: 120px !important;
  padding-bottom: 100px !important;
}
@media (max-width: 768px) {
  .lp-hero {
    min-height: auto !important;
    padding-top: 90px !important;
    padding-bottom: 60px !important;
  }
}

/* --- Кнопки курсов: максимальная скруглённость (pill) --- */
.v25-btn-primary,
.v25-btn-secondary {
  border-radius: 999px !important;
}

/* --- Feature-tags / badge в карточках — более скруглённые --- */
.v25-badge {
  border-radius: 999px !important;
}
.v25-feature {
  border-radius: 999px !important;
}

/* --- Roadmap icon-wrap: без обводки (уже задан в v26, override border) --- */
.v25-roadmap-icon-wrap {
  border: none !important;
  background: hsl(var(--primary) / 0.1) !important;
}

/* --- Video playlist: hide num column, expand info --- */
.lp-v2-num {
  display: none !important;
}
.lp-v2-item {
  gap: 0 !important;
}

/* --- Emoji SVG wrapper in bot messages --- */
.v27-emoji-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 2px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* --- Reviews v27: header on top — ensure correct flex order --- */
.v26-review-card {
  /* quote absolute, header then text in flex column */
}
.v26-review-header {
  order: 1;
}
.v26-review-text {
  order: 2;
}

/* --- Nav кнопка Пройти тест: такие же pill --- */
.lp-btn-login {
  border-radius: 999px !important;
}

/* ============================================================
   TEST MODAL (v27) — Всплывающий тест-модал
   ============================================================ */

.tm-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  padding: 16px;
  animation: tmFadeIn 0.25s ease;
}
@keyframes tmFadeIn { from { opacity:0 } to { opacity:1 } }

.tm-dialog {
  position: relative;
  background: hsl(var(--card));
  border-radius: 24px;
  border: 1px solid hsl(var(--border));
  padding: 36px 36px 32px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  animation: tmSlideUp 0.3s cubic-bezier(0.22,1,0.36,1);
}
@keyframes tmSlideUp {
  from { opacity:0; transform: translateY(32px) scale(0.97) }
  to   { opacity:1; transform: translateY(0) scale(1) }
}

/* Close button */
.tm-close {
  position: absolute; top: 16px; right: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  background: hsl(var(--muted-foreground)/0.12);
  border: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1;
  color: hsl(var(--foreground));
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.tm-close:hover { background: hsl(var(--muted-foreground)/0.25); }

/* Logo row */
.tm-logo-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px;
}
.tm-logo-icon { width: 22px; height: 22px; stroke: hsl(var(--primary)); }
.tm-logo-text { font-size: 0.9rem; font-weight: 700; color: hsl(var(--primary)); }

/* Title / sub */
.tm-title {
  font-size: 1.55rem; font-weight: 800;
  color: hsl(var(--foreground)); margin: 0 0 8px;
}
.tm-sub {
  font-size: 0.9rem; color: hsl(var(--muted-foreground));
  line-height: 1.55; margin: 0 0 24px;
}

/* Section label */
.tm-section { margin-bottom: 18px; }
.tm-label {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: hsl(var(--muted-foreground));
  margin-bottom: 10px;
}

/* Chip grid */
.tm-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tm-chip {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid hsl(var(--border));
  background: transparent;
  color: hsl(var(--foreground));
  font-size: 0.85rem; font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
}
.tm-chip:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.tm-chip--active {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: #fff !important;
  box-shadow: 0 0 0 3px hsl(var(--primary)/0.22);
}

/* Start button */
.tm-btn-start {
  display: block; width: 100%; margin-top: 24px;
  padding: 14px 24px; border-radius: 999px;
  background: hsl(var(--primary)); color: #fff;
  border: none; cursor: pointer;
  font-size: 1rem; font-weight: 700;
  transition: opacity 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px hsl(var(--primary)/0.35);
}
.tm-btn-start:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.tm-btn-start:not(:disabled):hover {
  box-shadow: 0 6px 28px hsl(var(--primary)/0.55);
  opacity: 0.92;
}

/* STEP 2: question */
.tm-progress-bar {
  height: 6px; background: hsl(var(--border));
  border-radius: 999px; margin-bottom: 20px; overflow: hidden;
}
.tm-progress-fill {
  height: 100%; background: hsl(var(--primary));
  border-radius: 999px;
  transition: width 0.35s ease;
}
.tm-qnum {
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground)); margin-bottom: 14px;
}
.tm-question {
  font-size: 1.15rem; font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 20px; line-height: 1.4;
}
.tm-choices {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 20px;
}
.tm-choice {
  width: 100%; padding: 13px 18px;
  border-radius: 14px;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-size: 0.95rem; text-align: left;
  cursor: pointer;
  transition: all 0.18s;
}
.tm-choice:hover:not(:disabled) {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary)/0.06);
}
.tm-choice--correct {
  border-color: #22c55e !important;
  background: rgba(34,197,94,0.1) !important;
  color: #15803d !important;
}
.tm-choice--wrong {
  border-color: #ef4444 !important;
  background: rgba(239,68,68,0.08) !important;
  color: #dc2626 !important;
}
.tm-btn-next {
  display: none; margin: 0 auto; padding: 12px 32px;
  border-radius: 999px;
  background: hsl(var(--primary)); color: #fff;
  border: none; cursor: pointer;
  font-size: 0.95rem; font-weight: 700;
  transition: opacity 0.2s;
}
.tm-btn-next:hover { opacity: 0.88; }

/* STEP 3: results */
.tm-result-icon {
  font-size: 3.5rem; text-align: center; margin-bottom: 8px;
}
.tm-result-title {
  font-size: 1.5rem; font-weight: 800;
  color: hsl(var(--foreground));
  text-align: center; margin: 0 0 16px;
}
.tm-score-ring {
  position: relative; width: 120px; height: 120px;
  margin: 0 auto 20px;
}
.tm-ring-svg { width: 100%; height: 100%; }
#tmRingFill {
  transition: stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1), stroke 0.5s;
}
.tm-score-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800;
  color: hsl(var(--foreground));
}
.tm-result-sub {
  font-size: 0.92rem; color: hsl(var(--muted-foreground));
  text-align: center; line-height: 1.55; margin: 0 0 16px;
}
.tm-weak-topics { margin-bottom: 24px; text-align: center; }
.tm-weak-label {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: hsl(var(--muted-foreground));
  margin-bottom: 10px;
}
.tm-weak-chip {
  display: inline-block; padding: 5px 12px;
  border-radius: 999px; margin: 4px;
  background: hsl(var(--primary)/0.1);
  color: hsl(var(--primary));
  font-size: 0.8rem; font-weight: 600;
  border: 1px solid hsl(var(--primary)/0.25);
}
.tm-result-btns {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.tm-btn-course {
  padding: 13px 28px; border-radius: 999px;
  background: hsl(var(--primary)); color: #fff;
  border: none; cursor: pointer;
  font-size: 0.95rem; font-weight: 700;
  box-shadow: 0 4px 20px hsl(var(--primary)/0.35);
  transition: opacity 0.2s;
}
.tm-btn-course:hover { opacity: 0.88; }
.tm-btn-retry {
  padding: 13px 24px; border-radius: 999px;
  background: transparent;
  border: 1.5px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-size: 0.92rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.2s;
}
.tm-btn-retry:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }

@media (max-width: 540px) {
  .tm-dialog { padding: 24px 20px 20px; }
  .tm-title { font-size: 1.3rem; }
}

/* ============================================================
   v28 — Nav sticky blur, Войти+Тест, courses radius,
         video wide, roadmap no-bg, reviews hover, fonts
   ============================================================ */

/* --- Nav: усиленная полупрозрачность + тень при скролле --- */
.lp-header {
  background: hsl(var(--background) / 0.55) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid hsl(var(--border) / 0.5) !important;
}
.lp-header.scrolled {
  background: hsl(var(--background) / 0.72) !important;
  box-shadow: 0 2px 32px rgba(0,0,0,0.13) !important;
}

/* --- Кнопка "Пройти тест" в nav (рядом с Войти) --- */
.lp-btn-test {
  padding: 8px 18px;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.12);
  border: 1.5px solid hsl(var(--primary) / 0.35);
  color: hsl(var(--primary));
  font-size: 0.88rem; font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.lp-btn-test:hover {
  background: hsl(var(--primary));
  color: #fff;
  border-color: hsl(var(--primary));
}

/* --- Курсы: более закруглённые карточки --- */
.v25-course-card {
  border-radius: 28px !important;
}

/* --- Видео: убрать правую панель, плеер на полную --- */
.lp-video2-grid {
  grid-template-columns: 1fr !important;
  max-width: 820px;
  margin: 0 auto;
}
.lp-video2-right {
  display: none !important;
}
.lp-video2-player {
  width: 100%;
}
.lp-video2-thumb {
  aspect-ratio: 16/9;
  border-radius: 20px;
  overflow: hidden;
}

/* --- Roadmap: убрать голубой фон/бордер иконок --- */
.v25-roadmap-icon-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- Отзывы: hover поднимается (убираем старый translateY из v26) --- */
.v26-review-card {
  transition: box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1) !important;
}
.v26-review-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 16px 48px rgba(33,150,243,0.28) !important;
}

/* --- Отзывы: убрать border аватара --- */
.v26-review-avatar {
  border: none !important;
}

/* --- Отзывы: увеличить шрифт имени и роли --- */
.v26-review-name {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}
.v26-review-role {
  font-size: 0.88rem !important;
  margin-top: 3px !important;
}

/* ============================================================
   v29 — фиксы: sticky nav, убрана кнопка Пройти тест
   ============================================================ */

/* lp-header — fixed с высоким z-index.
   position:fixed работает безотказно на всех секциях независимо от overflow/transform на родителях. */
.lp-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}

/* lp-btn-test скрыт если убрали из HTML */
.lp-btn-test { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   v29 REVIEWS
   ═══════════════════════════════════════════════════════════════ */
.v29-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .v29-reviews-grid { grid-template-columns: 1fr; } }

.v29-review-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 20px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow .25s, transform .25s;
}
.v29-review-card:hover { transform: translateY(-4px); }
.v29-review-card--emerald { border-top: 3px solid #10B981; }
.v29-review-card--emerald:hover { box-shadow: 0 0 36px rgba(16,185,129,.35); }
.v29-review-card--blue    { border-top: 3px solid #3B82F6; }
.v29-review-card--blue:hover    { box-shadow: 0 0 36px rgba(59,130,246,.35); }
.v29-review-card--purple  { border-top: 3px solid #1e96e4; }
.v29-review-card--purple:hover  { box-shadow: 0 0 36px rgba(53,177,250,.35); }

.v29-review-stars { display: flex; gap: 4px; }
.v29-review-stars svg { width: 16px; height: 16px; color: #FBBF24; }

.v29-review-text {
  font-size: .95rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.65;
  flex: 1;
}
.v29-review-author { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.v29-review-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.v29-review-avatar--emerald { background: #10B981; }
.v29-review-avatar--blue    { background: #3B82F6; }
.v29-review-avatar--purple  { background: #1e96e4; }
.v29-review-name { font-size: .9rem; font-weight: 600; color: hsl(var(--foreground)); }
.v29-review-label { font-size: .8rem; color: hsl(var(--muted-foreground)); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   v29 FAQ
   ═══════════════════════════════════════════════════════════════ */
.v29-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v29-faq-item {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s;
}
.v29-faq-item:hover { border-color: hsl(var(--primary) / .5); }
.v29-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .97rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  text-align: left;
  font-family: inherit;
}
.v29-faq-trigger:hover { color: hsl(var(--primary)); }
.v29-faq-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  transition: transform .25s;
  color: hsl(var(--muted-foreground));
}
.v29-faq-item.open .v29-faq-icon { transform: rotate(180deg); color: hsl(var(--primary)); }
.v29-faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  font-size: .92rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.65;
  padding: 0 20px;
}
.v29-faq-item.open .v29-faq-body { max-height: 200px; padding: 0 20px 18px; }

/* ═══════════════════════════════════════════════════════════════
   v29 FOOTER
   ═══════════════════════════════════════════════════════════════ */
.v29-footer {
  background: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
  padding: 60px 0 0;
}
.v29-footer-inner {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}
@media (max-width: 900px) {
  .v29-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 540px) {
  .v29-footer-inner { grid-template-columns: 1fr; gap: 28px; }
}
.v29-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 800;
  color: hsl(var(--foreground));
  margin-bottom: 12px;
}
.v29-footer-logo svg { width: 36px; height: 36px; }
.v29-footer-tagline {
  font-size: .85rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  margin: 0 0 20px;
}
.v29-footer-tg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: hsl(var(--primary) / .12);
  border: 1px solid hsl(var(--primary) / .3);
  border-radius: 10px;
  color: hsl(var(--primary));
  font-size: .87rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, box-shadow .2s;
}
.v29-footer-tg:hover { background: hsl(var(--primary) / .22); box-shadow: 0 0 20px hsl(var(--primary) / .25); }
.v29-footer-tg svg { width: 18px; height: 18px; }

.v29-footer-col-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: hsl(var(--foreground));
  margin-bottom: 14px;
}
.v29-footer-link {
  display: block;
  font-size: .88rem;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  margin-bottom: 10px;
  transition: color .15s;
}
.v29-footer-link:hover { color: hsl(var(--primary)); }

.v29-footer-bottom {
  border-top: 1px solid hsl(var(--border));
  padding: 20px 0;
  text-align: center;
  font-size: .82rem;
  color: hsl(var(--muted-foreground));
}

/* ─── VIDEO SECTION REDESIGN (split-screen) ─── */
.lp-vid-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 40px;
}
@media (max-width: 768px) {
  .lp-vid-split { grid-template-columns: 1fr; gap: 24px; }
}

.lp-vid-player-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 48px hsl(0 0% 0% / 0.18);
}

.lp-vid-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, hsl(var(--primary) / .85) 0%, hsl(225 80% 28%) 60%, hsl(260 70% 22%) 100%);
}

.lp-vid-poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 22px;
}

.lp-vid-graph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-vid-formula {
  font-family: "Courier New", Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.lp-vid-formula-sub {
  font-family: "Courier New", Consolas, monospace;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  position: relative;
  z-index: 1;
  margin-top: 4px;
}

.lp-vid-timer {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 2;
}

.lp-vid-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  border: 2px solid rgba(255,255,255,0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  z-index: 3;
}
.lp-vid-play-btn:hover {
  background: rgba(255,255,255,0.35);
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 32px rgba(255,255,255,0.3);
}

/* Right card */
.lp-vid-card {
  background: hsl(var(--card));
  border-radius: 24px;
  border: 1.5px solid hsl(var(--border));
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.06);
}

.lp-vid-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.lp-vid-card-icon {
  width: 24px;
  height: 24px;
  color: hsl(var(--primary));
  flex-shrink: 0;
  margin-top: 2px;
}

.lp-vid-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  line-height: 1.3;
  margin: 0;
}

.lp-vid-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lp-vid-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.lp-vid-tag--level {
  background: hsl(var(--primary) / .12);
  color: hsl(var(--primary));
}

.lp-vid-tag--type {
  background: hsl(152 76% 90%);
  color: hsl(152 60% 30%);
}
[data-theme="dark"] .lp-vid-tag--type {
  background: hsl(152 40% 15%);
  color: hsl(152 60% 60%);
}

.lp-vid-desc {
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.65;
  margin: 0;
}

.lp-vid-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid hsl(var(--border));
  padding-top: 14px;
}

.lp-vid-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
}
.lp-vid-stat svg { color: hsl(var(--primary)); flex-shrink: 0; }

.lp-vid-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.lp-vid-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: hsl(var(--primary));
  color: #fff;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.lp-vid-btn-primary:hover {
  background: hsl(var(--primary) / .85);
  box-shadow: 0 0 20px hsl(var(--primary) / .4);
}

.lp-vid-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: transparent;
  color: hsl(var(--foreground));
  border: 1.5px solid hsl(var(--border));
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.lp-vid-btn-outline:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  background: hsl(var(--primary) / .06);
}

/* ─── TELEGRAM BOT SECTION ─── */
.lp-tg-section {
  background: hsl(var(--muted) / .35);
}

.lp-tg-split {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .lp-tg-split { grid-template-columns: 1fr; gap: 32px; }
}

/* Phone mockup */
.lp-tg-phone-wrap {
  display: flex;
  justify-content: center;
}

.lp-tg-phone {
  width: 320px;
  max-width: 100%;
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  border-radius: 24px;
  box-shadow: 0 20px 60px hsl(0 0% 0% / 0.12), 0 4px 16px hsl(0 0% 0% / 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lp-tg-phone-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: hsl(204 100% 46%);
  color: #fff;
}

.lp-tg-phone-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-tg-bot-name {
  font-weight: 700;
  font-size: 0.95rem;
  display: block;
}
.lp-tg-bot-status {
  font-size: 0.75rem;
  opacity: 0.8;
}

.lp-tg-chat {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: hsl(var(--background));
  min-height: 280px;
  overflow: hidden;
}

.lp-tg-msg { display: flex; flex-direction: column; }
.lp-tg-msg--user { align-items: flex-end; }
.lp-tg-msg--bot  { align-items: flex-start; }

.lp-tg-bubble {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.lp-tg-bubble--user {
  background: hsl(204 100% 46%);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.lp-tg-bubble--bot {
  background: hsl(var(--muted) / .7);
  color: hsl(var(--foreground));
  border-bottom-left-radius: 4px;
}
[data-theme="dark"] .lp-tg-bubble--bot { background: hsl(var(--muted)); }

.lp-tg-bubble--highlight {
  background: hsl(var(--primary) / .12);
  color: hsl(var(--primary));
  font-weight: 600;
}

.lp-tg-time {
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
  margin-top: 3px;
  padding: 0 2px;
}

.lp-tg-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.lp-tg-action-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card));
  font-size: 0.78rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.lp-tg-action-btn:hover {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / .08);
}

.lp-tg-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}

.lp-tg-input-fake {
  flex: 1;
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
  padding: 7px 12px;
  background: hsl(var(--muted) / .5);
  border-radius: 999px;
}

.lp-tg-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.lp-tg-send-btn:hover { background: hsl(var(--primary) / .8); }

/* Features list (right column) */
.lp-tg-features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lp-tg-feat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.lp-tg-feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: hsl(var(--primary) / .1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--primary));
  flex-shrink: 0;
}

.lp-tg-feat-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  display: block;
  margin-bottom: 4px;
}

.lp-tg-feat-desc {
  font-size: 0.87rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  margin: 0;
}

.lp-tg-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  background: hsl(204 100% 46%);
  color: #fff;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  align-self: flex-start;
  margin-top: 8px;
}
.lp-tg-open-btn:hover {
  background: hsl(204 100% 38%);
  box-shadow: 0 4px 20px hsl(204 100% 46% / .35);
}

/* ─── REVIEWS — 3-column grid (screenshot style) ─── */
.lp-reviews-section {
  background: hsl(var(--muted) / .2);
}

.lp-reviews-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .lp-reviews-grid3 { grid-template-columns: 1fr; gap: 16px; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .lp-reviews-grid3 { grid-template-columns: repeat(2, 1fr); }
}

.lp-review3-card {
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  border-radius: 24px;
  padding: 28px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 20px hsl(0 0% 0% / 0.05);
  transition: transform 0.25s, box-shadow 0.25s;
}
.lp-review3-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px hsl(0 0% 0% / 0.1);
}

.lp-review3-stars {
  color: #F59E0B;
  font-size: 1rem;
  letter-spacing: 2px;
}

.lp-review3-text {
  font-size: 0.92rem;
  color: hsl(var(--foreground));
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.lp-review3-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid hsl(var(--border));
  padding-top: 14px;
}

.lp-review3-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-review3-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: hsl(var(--foreground));
}

.lp-review3-meta {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}


/* ─── VIDEO CARD BADGE + FORMULA BLOCK ─── */
.lp-vid-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lp-vid-badge-error {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid #FCD34D;
}
[data-theme="dark"] .lp-vid-badge-error {
  background: hsl(45 80% 20%);
  color: #FDE68A;
  border-color: hsl(45 60% 35%);
}

.lp-vid-badge-duration {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: hsl(var(--muted) / .6);
  color: hsl(var(--muted-foreground));
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

/* KaTeX-style formula block inside video card */
.lp-vid-formula-block {
  background: hsl(var(--muted) / .5);
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-theme="dark"] .lp-vid-formula-block { background: hsl(var(--muted) / .3); }

.lp-vid-katex-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lp-vid-katex {
  font-family: "Courier New", Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.lp-vid-katex--result {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / .1);
  padding: 2px 8px;
  border-radius: 6px;
}

.lp-vid-katex-label {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Mobile: stack vid buttons */
@media (max-width: 480px) {
  .lp-vid-btns { flex-direction: column; }
  .lp-vid-btn-primary, .lp-vid-btn-outline { width: 100%; justify-content: center; }
}

/* ─── HOWTO SECTION — TIMELINE STYLE ─── */
.lp-howto-section { background: hsl(var(--background)); }

.lp-howto-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 48px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.lp-howto-step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.lp-howto-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.lp-howto-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  position: relative;
  z-index: 1;
}
.lp-howto-circle--blue    { background: linear-gradient(135deg,#3B82F6,#60A5FA); }
.lp-howto-circle--emerald { background: linear-gradient(135deg,#10B981,#34D399); }
.lp-howto-circle--orange  { background: linear-gradient(135deg,#F97316,#FB923C); }
.lp-howto-circle--tg      { background: linear-gradient(135deg,#0088cc,#29b6f6); }
.lp-howto-circle--purple  { background: linear-gradient(135deg,#1e96e4,#6FC3F7); }

.lp-howto-connector {
  width: 2px;
  flex: 1;
  min-height: 40px;
  background: linear-gradient(to bottom, hsl(var(--border)), transparent);
  margin: 6px 0;
}

.lp-howto-step-body {
  padding-bottom: 40px;
  flex: 1;
}
.lp-howto-step--last .lp-howto-step-body { padding-bottom: 0; }

.lp-howto-step-num {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 6px;
}

.lp-howto-step-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 8px;
  line-height: 1.3;
}

.lp-howto-step-desc {
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.65;
  margin: 0 0 12px;
}

.lp-howto-step-chip {
  display: inline-block;
  padding: 5px 12px;
  background: hsl(var(--primary) / .1);
  color: hsl(var(--primary));
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

@media (max-width: 600px) {
  .lp-howto-circle { width: 42px; height: 42px; }
  .lp-howto-circle svg { width: 18px; height: 18px; }
  .lp-howto-step-title { font-size: 1rem; }
  .lp-howto-step-body { padding-bottom: 28px; }
}

/* ─── CTA SECTION ENHANCED ─── */
.lp-cta-card-enhanced {
  position: relative;
  overflow: hidden;
}

.lp-cta-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.lp-cta-sym {
  position: absolute;
  font-family: "Courier New", monospace;
  font-weight: 700;
  color: rgba(255,255,255,0.08);
  font-size: 4rem;
  user-select: none;
}
.lp-cta-sym--1 { top: 10%;  left: 5%;   font-size: 5rem; }
.lp-cta-sym--2 { top: 60%;  left: 2%;   font-size: 3.5rem; }
.lp-cta-sym--3 { top: 20%;  right: 8%;  font-size: 4.5rem; }
.lp-cta-sym--4 { bottom: 10%; right: 3%; font-size: 6rem; }
.lp-cta-sym--5 { top: 50%;  right: 20%; font-size: 3rem; }

.lp-cta-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.lp-cta-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lp-cta-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: rgba(255,255,255,0.95);
  line-height: 1;
}

.lp-cta-stat-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}

.lp-cta-stat-sep {
  font-size: 1.5rem;
  color: rgba(255,255,255,0.3);
  align-self: center;
}

.v24-cta-title, .v24-cta-sub, .v24-cta-btn-primary, .v24-cta-btn-secondary {
  position: relative;
  z-index: 1;
}

.v24-cta-btns { position: relative; z-index: 1; }
.v24-cta-btns button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lp-cta-note {
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  margin: 16px 0 0;
  text-align: center;
}


/* ════════════════════════════════════════════
   SESSION D — Visual enrichment of all sections
   ════════════════════════════════════════════ */

/* ── Video: Mini lesson cards row ───────────────────────── */
.lp-vid-lessons-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.lp-vid-lesson-card {
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
  position: relative;
}
.lp-vid-lesson-card:hover {
  border-color: hsl(var(--primary)/.5);
  box-shadow: 0 4px 20px hsl(var(--primary)/.12);
  transform: translateY(-2px);
}
.lp-vid-lesson-card--active {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary)/.15);
}
.lp-vid-lesson-thumb {
  border-radius: 10px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.lp-vid-lesson-thumb--blue   { background: linear-gradient(135deg,#3B82F6,#1e96e4); }
.lp-vid-lesson-thumb--emerald { background: linear-gradient(135deg,#10B981,#059669); }
.lp-vid-lesson-thumb--orange  { background: linear-gradient(135deg,#F97316,#EF4444); }
.lp-vid-lesson-thumb--purple  { background: linear-gradient(135deg,#1e96e4,#1379BD); }
.lp-vid-lesson-play-mini {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 10px;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.6;
}
.lp-vid-lesson-info { display: flex; flex-direction: column; gap: 3px; }
.lp-vid-lesson-tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
}
.lp-vid-lesson-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  line-height: 1.35;
  margin: 0;
}
.lp-vid-lesson-dur {
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
}
.lp-vid-lesson-now {
  position: absolute;
  top: 8px;
  right: 8px;
  background: hsl(var(--primary));
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.lp-vid-all-row {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.lp-vid-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: hsl(var(--primary));
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.2s;
}
.lp-vid-all-link:hover { background: hsl(var(--primary)/.08); }

/* ── TG: Stats strip ─────────────────────────────────────── */
.lp-tg-stats-strip {
  display: flex;
  align-items: center;
  gap: 0;
  background: hsl(var(--muted)/.5);
  border-radius: 16px;
  padding: 14px 20px;
  margin-bottom: 24px;
}
.lp-tg-stat-item { flex: 1; text-align: center; }
.lp-tg-stat-num {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
}
.lp-tg-stat-lbl {
  display: block;
  font-size: 0.72rem;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}
.lp-tg-stat-div {
  width: 1px;
  height: 32px;
  background: hsl(var(--border));
}
/* TG feature icon colors */
.lp-tg-feat-icon--blue   { background: #EFF6FF; color: #3B82F6; }
.lp-tg-feat-icon--emerald { background: #ECFDF5; color: #10B981; }
.lp-tg-feat-icon--orange  { background: #FFF7ED; color: #F97316; }
.lp-tg-feat-icon--purple  { background: #EAF6FE; color: #1e96e4; }
/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  .lp-tg-feat-icon--blue   { background: #1e3a5f; color: #60A5FA; }
  .lp-tg-feat-icon--emerald { background: #052e16; color: #34D399; }
  .lp-tg-feat-icon--orange  { background: #431407; color: #FB923C; }
  .lp-tg-feat-icon--purple  { background: #0b3a5c; color: #6FC3F7; }
}
.lp-tg-cta-note {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 8px;
  line-height: 1.4;
}

/* ── Reviews: Summary bar ────────────────────────────────── */
.lp-reviews-summary {
  display: flex;
  align-items: center;
  gap: 40px;
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  border-radius: 24px;
  padding: 28px 36px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.lp-reviews-rating-big {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.lp-reviews-rating-num {
  font-size: 3.5rem;
  font-weight: 900;
  color: hsl(var(--foreground));
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lp-reviews-stars-big {
  font-size: 1.2rem;
  color: #F59E0B;
  letter-spacing: 2px;
}
.lp-reviews-rating-count {
  display: block;
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  margin-top: 3px;
}
.lp-reviews-summary-bars {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-reviews-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
}
.lp-reviews-bar-label {
  width: 28px;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}
.lp-reviews-bar-track {
  flex: 1;
  height: 8px;
  background: hsl(var(--muted)/.5);
  border-radius: 999px;
  overflow: hidden;
}
.lp-reviews-bar-fill {
  height: 100%;
  background: #F59E0B;
  border-radius: 999px;
  transition: width 0.6s ease;
}
.lp-reviews-bar-fill--dim { background: hsl(var(--muted)); }
.lp-reviews-bar-pct {
  width: 32px;
  text-align: right;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}
.lp-reviews-summary-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-reviews-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}
.lp-reviews-badge svg { color: #10B981; flex-shrink: 0; }

/* Review card enhancements */
.lp-review3-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.lp-review3-verified {
  font-size: 0.72rem;
  font-weight: 600;
  color: #10B981;
  background: #ECFDF5;
  border-radius: 999px;
  padding: 2px 10px;
}
.lp-review3-result-chip {
  display: inline-block;
  margin: 10px 0 14px;
  font-size: 0.75rem;
  font-weight: 700;
  background: linear-gradient(135deg,#FEF3C7,#FDE68A);
  color: #92400E;
  border-radius: 999px;
  padding: 4px 14px;
}
.lp-review3-result-chip--blue {
  background: linear-gradient(135deg,#DBEAFE,#BFDBFE);
  color: #1E40AF;
}
.lp-review3-result-chip--emerald {
  background: linear-gradient(135deg,#D1FAE5,#A7F3D0);
  color: #065F46;
}
.lp-review3-card--featured {
  border-color: hsl(var(--primary)/.4);
  box-shadow: 0 0 0 3px hsl(var(--primary)/.1), 0 8px 32px hsl(var(--primary)/.1);
  transform: translateY(-4px);
}

/* ── FAQ: Category pills ─────────────────────────────────── */
.lp-faq-cats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 32px;
}
.lp-faq-cat {
  background: hsl(var(--muted)/.5);
  border: 1.5px solid hsl(var(--border));
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.2s;
}
.lp-faq-cat:hover {
  border-color: hsl(var(--primary)/.4);
  color: hsl(var(--primary));
  background: hsl(var(--primary)/.06);
}
.lp-faq-cat--active {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: white;
}
.lp-faq-cat--active:hover { color: white; }

/* FAQ question row with icon */
.lp-faq-q-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-faq-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lp-faq-icon--blue   { background: #EFF6FF; color: #3B82F6; }
.lp-faq-icon--emerald { background: #ECFDF5; color: #10B981; }
.lp-faq-icon--orange  { background: #FFF7ED; color: #F97316; }
.lp-faq-icon--purple  { background: #EAF6FE; color: #1e96e4; }
.lp-faq-icon--tg      { background: #E8F4FD; color: #229ED9; }

/* ── Responsive: lessons row ─────────────────────────────── */
@media (max-width: 900px) {
  .lp-vid-lessons-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .lp-vid-lessons-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .lp-vid-lesson-thumb { height: 44px; }
  .lp-reviews-summary {
    flex-direction: column;
    gap: 24px;
    padding: 20px;
  }
  .lp-reviews-summary-bars { min-width: 100%; }
  .lp-tg-stats-strip { gap: 0; }
}


/* ════════════════════════════════════════════════════════════════════════════
   APP REDESIGN v2 — Sidebar layout, topbar, animated icons, dashboard
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Keyframe Animations ─────────────────────────────────────────────────── */
@keyframes fire-pulse {
  0%,100% { transform: scaleY(1) scaleX(1); filter: brightness(1); }
  25%      { transform: scaleY(1.08) scaleX(0.96); filter: brightness(1.15); }
  50%      { transform: scaleY(0.96) scaleX(1.04); filter: brightness(1.05); }
  75%      { transform: scaleY(1.05) scaleX(0.97); filter: brightness(1.12); }
}
@keyframes bolt-glow {
  0%,100% { filter: drop-shadow(0 0 2px rgba(251,191,36,0.3)); }
  50%      { filter: drop-shadow(0 0 6px rgba(251,191,36,0.8)); }
}
@keyframes trophy-bounce {
  0%,100% { transform: translateY(0); }
  30%      { transform: translateY(-4px); }
  60%      { transform: translateY(-2px); }
}
@keyframes float-sym {
  0%,100% { transform: translateY(0) rotate(0deg); opacity: 0.07; }
  50%      { transform: translateY(-12px) rotate(8deg); opacity: 0.13; }
}
@keyframes count-up-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes dng-bar-grow {
  from { width: 0%; }
}
@keyframes dropdown-appear {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes widget-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── v2 Shell Layout ─────────────────────────────────────────────────────── */
.v2-shell {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  width: 100%;
  position: relative;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.v2-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface, #1a1a2e);
  border-right: 1px solid var(--border, rgba(255,255,255,0.08));
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.28s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.v2-sidebar::-webkit-scrollbar { width: 4px; }
.v2-sidebar::-webkit-scrollbar-track { background: transparent; }
.v2-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.v2-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
  text-decoration: none;
  flex-shrink: 0;
}
.v2-sidebar-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.v2-sidebar-brand-text {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--text1, #f1f5f9);
  white-space: nowrap;
}

.v2-sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  gap: 2px;
}

.v2-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text2, #94a3b8);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid transparent;
}
.v2-nav-item:hover {
  background: var(--hover, rgba(30,150,228,0.1));
  color: var(--text1, #f1f5f9);
  transform: translateX(2px);
}
.v2-nav-item.active,
.v2-nav-item[aria-current="page"] {
  background: rgba(30,150,228,0.15);
  color: var(--accent, #1e96e4);
  font-weight: 600;
  border-color: rgba(30,150,228,0.2);
}
.v2-nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent, #1e96e4);
}
.v2-nav-item--muted {
  opacity: 0.55;
  font-size: 0.8rem;
}
.v2-nav-item--muted:hover { opacity: 0.85; }

.v2-nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}
.v2-nav-label { flex: 1; }

.v2-sidebar-bottom {
  padding: 8px 10px 16px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.07));
  flex-shrink: 0;
}

/* Sidebar overlay (mobile) */
.v2-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.28s ease;
  backdrop-filter: blur(2px);
}
.v2-sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* ── Main content area ───────────────────────────────────────────────────── */
.v2-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ── Topbar v2 ───────────────────────────────────────────────────────────── */
.v2-topbar {
  height: 60px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--surface, rgba(15,15,30,0.92));
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Hamburger button */
.v2-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background 0.2s;
}
.v2-hamburger:hover { background: var(--hover, rgba(255,255,255,0.08)); }
.v2-hamburger-line {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text1, #f1f5f9);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
.v2-hamburger.open .v2-hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.v2-hamburger.open .v2-hamburger-line:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
.v2-hamburger.open .v2-hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile logo in topbar */
.v2-topbar-logo-mobile {
  display: none;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text1, #f1f5f9);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Search bar */
.v2-search {
  flex: 1;
  max-width: 380px;
  position: relative;
}
.v2-search input {
  width: 100%;
  height: 36px;
  background: var(--bg2, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 10px;
  padding: 0 12px 0 36px;
  color: var(--text1, #f1f5f9);
  font-size: 0.85rem;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}
.v2-search input::placeholder { color: var(--text3, #64748b); }
.v2-search input:focus {
  border-color: var(--accent, #1e96e4);
  background: var(--bg2, rgba(255,255,255,0.09));
}
.v2-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3, #64748b);
  pointer-events: none;
}

/* Right cluster */
.v2-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Badge (streak + XP) */
.v2-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--bg2, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  text-decoration: none;
  transition: background 0.18s, transform 0.15s, border-color 0.18s;
  cursor: pointer;
  white-space: nowrap;
}
.v2-badge:hover {
  background: var(--hover, rgba(30,150,228,0.12));
  border-color: rgba(30,150,228,0.3);
  transform: translateY(-1px);
}
.v2-badge-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v2-badge-val {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text1, #f1f5f9);
  min-width: 12px;
  text-align: center;
}
.v2-badge-unit {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text2, #94a3b8);
  letter-spacing: 0.02em;
}

/* Fire icon animation */
.v2-icon-fire svg,
.icon-fire {
  animation: fire-pulse 2.4s ease-in-out infinite;
  transform-origin: bottom center;
}
/* Bolt icon animation */
.v2-icon-xp svg,
.icon-bolt {
  animation: bolt-glow 1.8s ease-in-out infinite;
}

/* Theme toggle */
.v2-theme-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: none;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2, #94a3b8);
  transition: background 0.18s, color 0.18s, transform 0.2s;
  flex-shrink: 0;
}
.v2-theme-btn:hover {
  background: var(--hover, rgba(255,255,255,0.08));
  color: var(--text1, #f1f5f9);
  transform: rotate(15deg);
}
/* Show sun in dark mode, moon in light mode */
[data-theme="dark"]  .v2-theme-sun  { display: block; }
[data-theme="dark"]  .v2-theme-moon { display: none; }
[data-theme="light"] .v2-theme-sun  { display: none; }
[data-theme="light"] .v2-theme-moon { display: block; }
/* Default (dark) */
.v2-theme-sun  { display: block; }
.v2-theme-moon { display: none; }
/* Smooth morph effect */
.v2-theme-sun, .v2-theme-moon {
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

/* User chip */
.v2-topbar-user {
  position: relative;
  flex-shrink: 0;
}
.v2-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: 20px;
  background: var(--bg2, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  outline: none;
}
.v2-user-chip:hover,
.v2-user-chip:focus-visible {
  background: var(--hover, rgba(30,150,228,0.1));
  border-color: rgba(30,150,228,0.3);
}
.v2-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent, #1e96e4);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.v2-user-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 0;
  line-height: 1.1;
}
.v2-user-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text1, #f1f5f9);
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-user-grade {
  font-size: 0.68rem;
  color: var(--text3, #64748b);
  white-space: nowrap;
}
.v2-user-chevron {
  color: var(--text3, #64748b);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.v2-user-chip[aria-expanded="true"] .v2-user-chevron {
  transform: rotate(180deg);
}

/* User dropdown */
.v2-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 200px;
  background: var(--surface, #1e1e35);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2);
  z-index: 200;
  overflow: hidden;
  animation: dropdown-appear 0.18s cubic-bezier(0.34,1.56,0.64,1);
  padding: 6px;
}
.v2-user-dropdown.hidden { display: none; }
.v2-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--text2, #94a3b8);
  font-size: 0.83rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.v2-dropdown-item:hover {
  background: var(--hover, rgba(255,255,255,0.07));
  color: var(--text1, #f1f5f9);
}
.v2-dropdown-divider {
  height: 1px;
  background: var(--border, rgba(255,255,255,0.07));
  margin: 4px 0;
}
.v2-dropdown-logout {
  color: #ef4444;
}
.v2-dropdown-logout:hover {
  background: rgba(239,68,68,0.1);
  color: #ef4444;
}

/* ── Dashboard Welcome Banner ────────────────────────────────────────────── */
.dash-welcome {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent, #1e96e4) 0%, var(--accent2, #35B1FA) 50%, var(--accent3, #06b6d4) 100%);
  padding: 0;
  margin-bottom: 20px;
  min-height: 180px;
  isolation: isolate;
}
/* Subtle frosted overlay */
.dash-welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 100%);
  pointer-events: none;
}

/* Floating math symbols decoration */
.dash-welcome-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.dw-sym {
  position: absolute;
  font-size: 3.5rem;
  font-weight: 900;
  color: #fff;
  opacity: 0.07;
  font-family: "Georgia", serif;
  animation: float-sym 4s ease-in-out infinite;
  user-select: none;
}
.dw-sym--1 { top: -10px; left:  5%;  font-size: 4rem;  animation-delay: 0s; }
.dw-sym--2 { top:  20px; right: 28%; font-size: 3rem;  animation-delay: 0.7s; }
.dw-sym--3 { bottom: 10px; left: 22%; font-size: 2.8rem; animation-delay: 1.4s; }
.dw-sym--4 { top: 10px; right: 8%;  font-size: 3.5rem; animation-delay: 2.1s; }
.dw-sym--5 { bottom: -5px; left: 42%; font-size: 2.4rem; animation-delay: 0.35s; }
.dw-sym--6 { top: 30%; left: 2%;   font-size: 2rem;  animation-delay: 2.8s; }

.dash-welcome-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 28px 20px;
}

.dash-welcome-text {
  flex: 1;
  min-width: 0;
}
.dash-welcome-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.dash-welcome-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.dash-welcome-sub {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.8);
  margin: 0 0 18px;
  max-width: 420px;
  line-height: 1.5;
}

.dash-welcome-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dw-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: #fff;
  color: var(--accent, #1e96e4);
  border: none;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.dw-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  background: #f0f0ff;
}
.dw-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
  backdrop-filter: blur(8px);
}
.dw-btn-outline:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.7);
  transform: translateY(-2px);
}

/* Illustration */
.dash-welcome-illus {
  flex-shrink: 0;
  opacity: 0.92;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.2));
  display: flex;
  align-items: center;
}
@media (max-width: 680px) {
  .dash-welcome-illus { display: none; }
  .dash-welcome-inner { padding: 22px 20px 16px; }
}

/* Stats row inside welcome banner */
.dash-welcome .hero-stats-row {
  position: relative;
  z-index: 1;
  padding: 0 28px 20px;
}

/* ── Stat Widgets Row ────────────────────────────────────────────────────── */
.dash-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.dash-widget {
  background: var(--surface, #1e1e35);
  border: 1px solid var(--border, rgba(255,255,255,0.07));
  border-radius: 18px;
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  animation: widget-in 0.4s ease both;
  position: relative;
  overflow: hidden;
}
.dash-widget:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  border-color: var(--accent, #1e96e4);
}
.dash-widget:nth-child(1) { animation-delay: 0.05s; }
.dash-widget:nth-child(2) { animation-delay: 0.10s; }
.dash-widget:nth-child(3) { animation-delay: 0.15s; }
.dash-widget:nth-child(4) { animation-delay: 0.20s; }

.dw-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.dw-icon-wrap--blue    { background: rgba(30,150,228,0.15); color: #35B1FA; }
.dw-icon-wrap--green   { background: rgba(34,197,94,0.15);  color: #4ade80; }
.dw-icon-wrap--amber   { background: rgba(245,158,11,0.15); color: #fbbf24; }
.dw-icon-wrap--cyan    { background: rgba(6,182,212,0.15);  color: #22d3ee; }

.dw-body { flex: 1; }
.dw-val {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text1, #f1f5f9);
  line-height: 1;
  letter-spacing: -0.03em;
  animation: count-up-fade 0.5s ease both;
}
.dw-label {
  font-size: 0.75rem;
  color: var(--text3, #64748b);
  font-weight: 500;
  margin-top: 4px;
}
.dw-delta {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  display: inline-block;
}
.dw-delta--up   { background: rgba(34,197,94,0.15); color: #4ade80; }
.dw-delta--down { background: rgba(239,68,68,0.12); color: #f87171; }
.dw-delta--neu  { background: rgba(148,163,184,0.12); color: #94a3b8; }

/* ── Next Goal Strip ─────────────────────────────────────────────────────── */
.dash-next-goal {
  background: var(--surface, #1e1e35);
  border: 1px solid var(--border, rgba(255,255,255,0.07));
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 20px;
  animation: widget-in 0.4s 0.25s ease both;
}
.dng-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.dng-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(30,150,228,0.15);
  color: var(--accent, #1e96e4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dng-body {
  flex: 1;
  min-width: 180px;
}
.dng-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text3, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.dng-val {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text2, #94a3b8);
  line-height: 1.4;
}
.dng-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 160px;
}
.dng-bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg2, rgba(255,255,255,0.07));
  border-radius: 4px;
  overflow: hidden;
}
.dng-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #1e96e4), var(--accent2, #35B1FA));
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
  animation: dng-bar-grow 1s ease both;
}
.dng-pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent, #1e96e4);
  min-width: 32px;
  text-align: right;
}

/* ── v2 Progress / Rank cards ────────────────────────────────────────────── */
.v2-progress-card .progress-bar-track {
  height: 9px;
  border-radius: 5px;
  background: var(--bg2, rgba(255,255,255,0.07));
  overflow: hidden;
}
.v2-progress-card .progress-bar-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--accent, #1e96e4), var(--accent2, #35B1FA));
  transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}
.v2-rank-card .lb-rank-badge {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 0.8rem;
}

/* ── Course Map Grid Redesign ────────────────────────────────────────────── */
.module-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 18px !important;
}
.module-card,
.lesson-card {
  border-radius: 20px !important;
  border: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
  background: var(--surface, #1e1e35) !important;
  padding: 18px 20px !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
  cursor: pointer;
}
.module-card:hover,
.lesson-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.28) !important;
  border-color: rgba(30,150,228,0.35) !important;
}
.module-card.completed,
.lesson-card.done {
  border-color: rgba(34,197,94,0.3) !important;
}
.lessons-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 12px !important;
}

/* ── Video Cards Redesign ────────────────────────────────────────────────── */
.videos-grid,
.video-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 18px !important;
}
.video-card {
  border-radius: 18px !important;
  overflow: hidden !important;
  background: var(--surface, #1e1e35) !important;
  border: 1px solid var(--border, rgba(255,255,255,0.07)) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
  cursor: pointer;
}
.video-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.3) !important;
  border-color: rgba(30,150,228,0.3) !important;
}
.video-card-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, var(--accent, #1e96e4), var(--accent2, #35B1FA));
  position: relative;
  overflow: hidden;
  border-radius: 18px 18px 0 0 !important;
}
.video-card-thumb-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(30,150,228,0.25), rgba(53,177,250,0.2));
  border-radius: 18px 18px 0 0;
  font-size: 2.5rem;
}
.video-card-body {
  padding: 14px 16px !important;
}
.video-card-title {
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: var(--text1, #f1f5f9) !important;
  margin: 0 0 6px !important;
  line-height: 1.35 !important;
}
.video-card-meta {
  font-size: 0.75rem !important;
  color: var(--text3, #64748b) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.video-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.2s;
}
.video-card:hover .video-card-play { opacity: 1; }
.video-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--accent, #1e96e4);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.85);
  transition: transform 0.2s;
}
.video-card:hover .video-play-btn { transform: scale(1); }

/* ── Light mode overrides ────────────────────────────────────────────────── */
[data-theme="light"] .v2-sidebar {
  background: #f8fafc;
  border-right-color: #e2e8f0;
}
[data-theme="light"] .v2-nav-item { color: #475569; }
[data-theme="light"] .v2-nav-item:hover { background: rgba(30,150,228,0.08); color: #1e293b; }
[data-theme="light"] .v2-nav-item.active { background: rgba(30,150,228,0.1); color: #1e96e4; border-color: rgba(30,150,228,0.2); }
[data-theme="light"] .v2-sidebar-brand-text { color: #1e293b; }
[data-theme="light"] .v2-topbar {
  background: rgba(248,250,252,0.95);
  border-bottom-color: #e2e8f0;
}
[data-theme="light"] .v2-search input { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; }
[data-theme="light"] .v2-search input:focus { border-color: #1e96e4; background: #fff; }
[data-theme="light"] .v2-badge { background: #f1f5f9; border-color: #e2e8f0; }
[data-theme="light"] .v2-badge:hover { background: rgba(30,150,228,0.08); }
[data-theme="light"] .v2-badge-val { color: #1e293b; }
[data-theme="light"] .v2-user-chip { background: #f1f5f9; border-color: #e2e8f0; }
[data-theme="light"] .v2-user-name { color: #1e293b; }
[data-theme="light"] .v2-user-dropdown { background: #fff; border-color: #e2e8f0; box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
[data-theme="light"] .v2-dropdown-item { color: #475569; }
[data-theme="light"] .v2-dropdown-item:hover { background: #f8fafc; color: #1e293b; }
[data-theme="light"] .dash-widget { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .dash-next-goal { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .dw-icon-wrap--blue  { background: #e3f2fd; color: #1e96e4; }
[data-theme="light"] .dw-icon-wrap--green { background: #dcfce7; color: #16a34a; }
[data-theme="light"] .dw-icon-wrap--amber { background: #fef3c7; color: #d97706; }
[data-theme="light"] .dw-icon-wrap--cyan  { background: #cffafe; color: #0891b2; }
[data-theme="light"] .dw-val { color: #1e293b; }
[data-theme="light"] .v2-hamburger-line { background: #1e293b; }
[data-theme="light"] .v2-theme-btn { border-color: #e2e8f0; color: #475569; }
[data-theme="light"] .v2-theme-btn:hover { background: #f1f5f9; color: #1e293b; }
[data-theme="light"] .v2-sidebar-bottom { border-top-color: #e2e8f0; }
[data-theme="light"] .v2-sidebar-brand { border-bottom-color: #e2e8f0; }

/* ── Mobile Responsive (≤1020px) ─────────────────────────────────────────── */
@media (max-width: 1020px) {
  .v2-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    transform: translateX(-100%);
    z-index: 150;
    box-shadow: none;
  }
  .v2-sidebar.sidebar-open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0,0,0,0.4);
    animation: slide-in-left 0.28s cubic-bezier(0.4,0,0.2,1);
  }
  .v2-hamburger { display: flex; }
  .v2-topbar-logo-mobile { display: flex; align-items: center; }
  .v2-search { max-width: 220px; }
  .v2-user-info { display: none; }
  .v2-user-chevron { display: none; }
  .v2-user-chip { padding: 4px; }
  .v2-sidebar-overlay.active {
    display: block;
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .v2-topbar { padding: 0 12px; gap: 6px; }
  .v2-search { max-width: 140px; }
  .v2-badge { padding: 5px 8px; }
  .v2-badge-unit { display: none; }
  .dash-welcome-title { font-size: 1.25rem; }
  .dash-welcome-sub { font-size: 0.8rem; }
  .dash-welcome-inner { padding: 18px 16px 14px; }
  .dash-widgets { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dw-val { font-size: 1.4rem; }
  .module-grid { grid-template-columns: 1fr !important; }
  .lessons-grid { grid-template-columns: 1fr !important; }
  .videos-grid, .video-grid { grid-template-columns: 1fr !important; }
  .dng-progress-wrap { min-width: 120px; }
}

@media (max-width: 375px) {
  .dash-welcome { min-height: 150px; }
  .dash-welcome-btns { flex-direction: column; }
  .dw-btn-primary, .dw-btn-outline { width: 100%; justify-content: center; }
  .v2-search { display: none; }
  .dash-widgets { grid-template-columns: repeat(2, 1fr); }
}

/* ── Trophy hover bounce (leaderboard icon) ──────────────────────────────── */
.v2-nav-item:hover .icon-trophy,
.icon-trophy:hover {
  animation: trophy-bounce 0.5s ease;
}


/* ════════════════════════════════════════════════════════════════════════════
   HOME LAYOUT v2.1 — Main grid, shortcuts, banner text/stat fixes
   Theory full-width fix
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Banner text colour fixes ────────────────────────────────────────────── */
/* Force all text on gradient banner to be white — not bleed into bg */
.dash-welcome-eyebrow { color: rgba(255,255,255,0.78) !important; }
.dash-welcome-title   { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.dash-welcome-sub     { color: rgba(255,255,255,0.82) !important; }

/* Hero stats inside banner — white palette */
.dash-welcome .hero-stats-row {
  margin-top: 4px;
  padding: 16px 28px 22px;
  border-top: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.1);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 640px) {
  .dash-welcome .hero-stats-row { grid-template-columns: repeat(2,1fr); padding: 12px 16px 16px; }
}
.dash-welcome .hero-stat { text-align: center; padding: 0 12px; }
.dash-welcome .hero-stat + .hero-stat { border-left: 1px solid rgba(255,255,255,0.2); }
.dash-welcome .hero-stat-num {
  font-size: 1.55rem;
  font-weight: 900;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  line-height: 1;
}
.dash-welcome .hero-stat-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* ── Home main grid (2 col) ──────────────────────────────────────────────── */
.home-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}
.home-left-col,
.home-right-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ── 3 quick-action shortcut tiles ──────────────────────────────────────── */
.home-shortcuts-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-shortcut {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface, #1e1e35);
  border: 1px solid var(--border, rgba(255,255,255,0.07));
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  color: var(--text1, #f1f5f9);
}
.home-shortcut:hover {
  transform: translateX(3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  border-color: var(--accent, #1e96e4);
  background: var(--hover, rgba(30,150,228,0.08));
}
.hsc-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hsc-icon--blue   { background: rgba(30,150,228,0.15); color: #35B1FA; }
.hsc-icon--purple { background: rgba(53,177,250,0.15); color: #6FC3F7; }
.hsc-icon--green  { background: rgba(34,197,94,0.15);  color: #4ade80; }
.hsc-body { flex: 1; min-width: 0; }
.hsc-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text1, #f1f5f9);
  line-height: 1.2;
}
.hsc-sub {
  font-size: 0.72rem;
  color: var(--text3, #64748b);
  margin-top: 2px;
}
.hsc-arrow {
  color: var(--text3, #64748b);
  flex-shrink: 0;
  transition: transform 0.18s ease, color 0.18s ease;
}
.home-shortcut:hover .hsc-arrow {
  transform: translateX(3px);
  color: var(--accent, #1e96e4);
}

/* Light mode overrides for shortcuts */
[data-theme="light"] .home-shortcut {
  background: #fff;
  border-color: #e2e8f0;
  color: #1e293b;
}
[data-theme="light"] .home-shortcut:hover {
  background: #f8faff;
  border-color: #1e96e4;
}
[data-theme="light"] .hsc-icon--blue   { background: #e3f2fd; color: #1e96e4; }
[data-theme="light"] .hsc-icon--purple { background: #f3e8ff; color: #1379BD; }
[data-theme="light"] .hsc-icon--green  { background: #dcfce7; color: #16a34a; }
[data-theme="light"] .hsc-title { color: #1e293b; }

/* Responsive collapse */
@media (max-width: 900px) {
  .home-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .home-shortcuts-grid { flex-direction: row; flex-wrap: wrap; }
  .home-shortcut { flex: 1; min-width: 140px; }
  .hsc-sub { display: none; }
}

/* ── Theory section — full width fix ────────────────────────────────────── */
.theory-section,
.theory-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.theory-body {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 20px 24px !important;
}
.theory-body > * {
  max-width: 100% !important;
}
/* Theory content blocks - full width */
.theory-body h3,
.theory-body h4,
.theory-body p,
.theory-body ul,
.theory-body ol,
.theory-body table,
.theory-body .example-box,
.theory-body .formula-block,
.theory-body .math-block {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Theory container inside panel */

.practice-full-wrap .practice-main {
  width: 100%;
  padding: 18px 20px !important;
  box-sizing: border-box;
}
/* Remove any constraining max-width on the panel */
.glass.panel-card.practice-main {
  max-width: 100% !important;
  width: 100% !important;
}

/* ── Improved example/formula boxes in theory ────────────────────────────── */
.theory-body .example-box {
  background: rgba(30,150,228,0.07) !important;
  border: 1px solid rgba(30,150,228,0.2) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin: 14px 0 !important;
  width: 100%;
}
.theory-body .formula-block {
  background: var(--bg, rgba(0,0,0,0.22)) !important;
  border-left: 3px solid var(--accent, #1e96e4) !important;
  border-radius: 10px !important;
  padding: 12px 18px !important;
  font-size: 1rem !important;
  font-family: "Courier New", monospace !important;
  width: 100%;
  overflow-x: auto;
}
/* Rule-box (blue highlight box shown in screenshot) */
.theory-body .rule-box,
.theory-body [class*="rule"],
.theory-body [class*="tip"],
.theory-body blockquote {
  background: rgba(59,130,246,0.09);
  border: 1px solid rgba(59,130,246,0.22);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 14px 0;
  width: 100%;
  box-sizing: border-box;
}
/* Tables in theory */
.theory-body table {
  border-collapse: collapse;
  width: 100%;
}
.theory-body th,
.theory-body td {
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  padding: 8px 12px;
  font-size: 0.83rem;
}
.theory-body th {
  background: rgba(30,150,228,0.1);
  font-weight: 700;
}

/* Light mode theory */
[data-theme="light"] .theory-body { color: #334155 !important; }
[data-theme="light"] .theory-body .example-box {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}
[data-theme="light"] .theory-body .formula-block {
  background: #f8fafc !important;
  border-left-color: #1e96e4 !important;
}
[data-theme="light"] .theory-body .rule-box,
[data-theme="light"] .theory-body blockquote {
  background: #eff6ff;
  border-color: #93c5fd;
}



/* ════════════════════════════════════════════════════════════════════════════
   DARK THEME — Full :root variable override
   All CSS variables remapped for dark mode.
   Controls via [data-theme="dark"] on <html>
   Smooth 0.25s transition on all colour-bearing properties.
   ════════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* Backgrounds */
  --bg:       #0e1117;
  --bg2:      #151b26;
  --bg3:      #1c2437;
  --bg4:      #232d42;

  /* Surfaces (glass / card overlays) */
  --surface:  rgba(30,150,228,0.08);
  --surface2: rgba(30,150,228,0.13);
  --surface3: rgba(30,150,228,0.20);

  /* Borders */
  --border:   rgba(30,150,228,0.18);
  --border2:  rgba(30,150,228,0.28);
  --border3:  rgba(30,150,228,0.40);

  /* Brand accent — unchanged in dark */
  --accent:   #35B1FA;
  --accent2:  #60C8FC;
  --accent3:  #93DAFD;
  --accent-g: linear-gradient(135deg,#1e96e4,#35B1FA);
  --accent-g2:linear-gradient(135deg,#1565a8,#2FAAD4);

  /* Card background */
  --card:     #151b26;

  /* Text — inverted */
  --text:     #e8edf5;
  --text2:    #a0aec0;
  --text3:    #718096;

  /* Effects — darker shadow */
  --glow:     0 0 48px rgba(30,150,228,0.25);
  --shadow:   0 12px 40px rgba(0,0,0,0.45);
  --shadow-sm:0 4px 20px rgba(0,0,0,0.30);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.35);
}

/* Smooth colour transitions when switching theme */
body,
.v2-sidebar,
.v2-topbar,
.v2-content,
.info-card,
.glass,
.panel-card,
.module-card,
.video-card,
.lp-vid-card,
.stats-v2-panel,
.lb-v2-table-wrap,
.dash-next-goal,
.home-shortcut,
.cabinet-v2-tab-btn,
.home-plan-card,
.home-activity-card,
select, input, textarea {
  transition:
    background var(--transition),
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition);
}

/* Dark sidebar & topbar fill */
[data-theme="dark"] .v2-sidebar {
  background: var(--bg2);
  border-right-color: var(--border);
}
[data-theme="dark"] .v2-topbar {
  background: rgba(14, 17, 23, 0.92);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .glass {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .panel-card,
[data-theme="dark"] .info-card {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .v2-shell {
  background: var(--bg);
}
[data-theme="dark"] .v2-content {
  background: var(--bg);
}
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] textarea {
  background: var(--bg2);
  color: var(--text);
  border-color: var(--border2);
}
[data-theme="dark"] select option {
  background: var(--bg2);
  color: var(--text);
}
[data-theme="dark"] .toolbar {
  background: var(--surface);
  border-color: var(--border);
}
/* Nav items */
[data-theme="dark"] .v2-nav-item {
  color: var(--text2);
}
[data-theme="dark"] .v2-nav-item:hover,
[data-theme="dark"] .v2-nav-item.active {
  background: var(--surface2);
  color: var(--accent2);
}
/* Section headers */
[data-theme="dark"] .section-head h2,
[data-theme="dark"] .section-head .eyebrow {
  color: var(--text);
}
[data-theme="dark"] .eyebrow {
  color: var(--accent2);
}
/* Badges */
[data-theme="dark"] .module-grade-badge {
  background: var(--surface2);
  color: var(--accent2);
}
[data-theme="dark"] .module-block-badge {
  background: var(--surface);
  color: var(--text2);
}
/* Module cards */
[data-theme="dark"] .module-card {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .module-card:hover {
  background: var(--bg3);
  border-color: var(--accent);
}
[data-theme="dark"] .module-card-title {
  color: var(--text);
}
[data-theme="dark"] .module-meta {
  color: var(--text3);
}
/* Video cards */
[data-theme="dark"] .video-card {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .video-card-title {
  color: var(--text);
}
[data-theme="dark"] .video-card-meta {
  color: var(--text3);
}
/* Stats panels */
[data-theme="dark"] .stats-v2-panel {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .stats-v2-panel-title {
  color: var(--text2);
}
/* Leaderboard */
[data-theme="dark"] .lb-v2-table-wrap {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .lb-v2-head {
  background: var(--surface);
  color: var(--text3);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .lb-row {
  border-bottom-color: var(--border);
}
[data-theme="dark"] .lb-row:hover {
  background: var(--surface);
}
/* Period + league tabs */
[data-theme="dark"] .lb-period-btn,
[data-theme="dark"] .lb-v2-tab {
  background: var(--surface);
  color: var(--text2);
  border-color: var(--border);
}
[data-theme="dark"] .lb-period-btn.active,
[data-theme="dark"] .lb-v2-tab.active {
  background: var(--accent-g);
  color: #fff;
}
/* Shortcut tiles */
[data-theme="dark"] .home-shortcut {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .home-shortcut:hover {
  background: var(--bg3);
  border-color: var(--accent);
}
[data-theme="dark"] .hsc-title { color: var(--text); }
[data-theme="dark"] .hsc-sub   { color: var(--text3); }
/* Next goal strip */
[data-theme="dark"] .dash-next-goal {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .dng-label { color: var(--text3); }
[data-theme="dark"] .dng-val   { color: var(--text); }
[data-theme="dark"] .dng-bar-track { background: var(--surface3); }
/* Cabinet tabs */
[data-theme="dark"] .cabinet-v2-tab-btn {
  background: var(--surface);
  color: var(--text2);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .cabinet-v2-tab-btn.active {
  background: var(--card);
  color: var(--accent2);
  border-bottom-color: var(--accent);
}
/* Kaiten board */
[data-theme="dark"] .kaiten-col {
  background: var(--bg2);
  border-color: var(--border);
}
[data-theme="dark"] .kaiten-card {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
/* Inputs in forms */
[data-theme="dark"] .inp {
  background: var(--bg2);
  border-color: var(--border2);
  color: var(--text);
}
[data-theme="dark"] .inp::placeholder { color: var(--text3); }
/* Card labels */
[data-theme="dark"] .card-label { color: var(--text3); }
/* Plan cards (new home cards) */
[data-theme="dark"] .home-plan-card,
[data-theme="dark"] .home-activity-card {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .home-plan-card .hpc-title,
[data-theme="dark"] .home-activity-card .hac-title {
  color: var(--text);
}
[data-theme="dark"] .home-plan-card .hpc-sub,
[data-theme="dark"] .home-activity-card .hac-sub {
  color: var(--text3);
}
/* Subscriptions */
[data-theme="dark"] .sub-plan-card {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .sub-plan-card .sp-price { color: var(--text); }
[data-theme="dark"] .sub-plan-card .sp-name  { color: var(--text2); }
[data-theme="dark"] .sub-feature-item        { color: var(--text2); }
/* v2 topbar badge chips */
[data-theme="dark"] .v2-badge-chip {
  background: var(--surface2);
  border-color: var(--border2);
}
[data-theme="dark"] .v2-badge-chip span { color: var(--text); }
/* Dropdown */
[data-theme="dark"] .topbar-user-dropdown {
  background: var(--bg2);
  border-color: var(--border2);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .topbar-dropdown-item {
  color: var(--text2);
}
[data-theme="dark"] .topbar-dropdown-item:hover {
  background: var(--surface);
  color: var(--text);
}
/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border3); }


/* ════════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v3 — Landing tokens applied to all app sections
   Palette: --accent #1e96e4, --accent2 #35B1FA, glass surfaces
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Global text bleed fix ───────────────────────────────────────────────── */
/* Ensure all text inherits theme-aware colour by default */
.v2-content *,
.v2-sidebar *,
.v2-topbar * {
  -webkit-text-fill-color: unset;
}
.page-section { color: var(--text); }
.page-section h1,
.page-section h2,
.page-section h3,
.page-section h4 { color: var(--text); }
.page-section p   { color: var(--text2); }

/* ── Section header upgrade ──────────────────────────────────────────────── */
.section-head {
  margin-bottom: 24px;
}
.section-head h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.section-head .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  background: linear-gradient(90deg, rgba(30,150,228,0.12), rgba(53,177,250,0.08));
  border: 1px solid rgba(30,150,228,0.22);
  border-radius: 100px;
  padding: 4px 12px;
  margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════════════════════
   HOME — Plan card + Activity card
   ════════════════════════════════════════════════════════════════════════════ */

.home-plan-card,
.home-activity-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 260px;
  flex: 1;
}

/* Header row */
.hpc-header, .hac-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hpc-icon, .hac-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-g);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.hpc-head-text, .hac-head-text {
  flex: 1;
  min-width: 0;
}
.hpc-title, .hac-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hpc-sub, .hac-sub {
  font-size: 0.72rem;
  color: var(--text3);
  margin-top: 2px;
}

/* ── Plan card ring ──────────────────────────────────────────────────────── */
.hpc-ring-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hpc-ring-label {
  font-size: 0.7rem;
  color: var(--text3);
  margin-top: 4px;
  text-align: center;
  width: 80px;
}
/* Tasks list */
.hpc-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.hpc-task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text2);
}
.hpc-task-item.hpc-task-done { color: var(--text3); text-decoration: line-through; }
.hpc-task-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  flex-shrink: 0;
}
.hpc-task-dot--done {
  background: var(--accent-g);
  border-color: transparent;
}

/* ── Activity card bars ──────────────────────────────────────────────────── */
.hac-streak-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(249,115,22,0.1);
  border: 1px solid rgba(249,115,22,0.25);
  border-radius: 100px;
  padding: 3px 9px 3px 7px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #f97316;
  white-space: nowrap;
}
.hac-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: flex-end;
  gap: 4px;
  height: 72px;
  flex: 1;
}
.hac-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
}
.hac-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(30,150,228,0.4), rgba(30,150,228,0.15));
  min-height: 4px;
  transition: height 0.6s cubic-bezier(0.4,0,0.2,1);
}
.hac-bar--today {
  background: var(--accent-g);
  box-shadow: 0 0 12px rgba(30,150,228,0.4);
}
.hac-day {
  font-size: 0.62rem;
  color: var(--text3);
  text-align: center;
}
.hac-day--today {
  color: var(--accent);
  font-weight: 700;
}
.hac-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.hac-stat { text-align: center; }
.hac-stat-num {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.hac-stat-label {
  font-size: 0.63rem;
  color: var(--text3);
  margin-top: 3px;
}

/* ════════════════════════════════════════════════════════════════════════════
   COURSE MAP — Module cards redesign (landing style)
   ════════════════════════════════════════════════════════════════════════════ */

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding-bottom: 24px;
}

.module-card {
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  box-shadow: var(--shadow-card) !important;
}
.module-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--module-accent, var(--accent-g));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.module-card[data-track="ege"]::before   { background: linear-gradient(90deg,#f59e0b,#fcd34d); }
.module-card[data-track="oge"]::before   { background: linear-gradient(90deg,#10b981,#34d399); }
.module-card[data-track="olymp"]::before { background: linear-gradient(90deg,#ef4444,#f97316); }
.module-card[data-track="school"]::before { background: var(--accent-g); }
.module-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 40px rgba(30,100,180,0.18) !important;
  border-color: var(--accent) !important;
}
.module-card.active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(30,150,228,0.18), var(--shadow-card) !important;
}

.module-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.module-grade-badge {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(30,150,228,0.12);
  color: var(--accent);
  border: 1px solid rgba(30,150,228,0.22);
  border-radius: 100px;
  padding: 2px 9px;
  white-space: nowrap;
}
.module-block-badge {
  font-size: 0.65rem;
  font-weight: 600;
  background: var(--surface);
  color: var(--text3);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 2px 8px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-emoji { font-size: 1.2rem; margin-left: auto; }

.module-card-title {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.35;
  flex: 1;
}

.module-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 28px;
}
.module-bar-chart-col {
  flex: 1;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
  min-width: 0;
}

.module-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--surface3);
  border-radius: 100px;
  overflow: hidden;
}
.module-progress-fill {
  height: 100%;
  background: var(--accent-g);
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.module-card.completed .module-progress-fill { background: linear-gradient(90deg,#10b981,#34d399); }

.module-meta {
  font-size: 0.72rem !important;
  color: var(--text3) !important;
  font-weight: 500;
}
.module-completed-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(16,185,129,0.12);
  color: #10b981;
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 100px;
  padding: 2px 8px;
}

.module-open-btn {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.78rem !important;
  padding: 7px 16px !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
}

/* Map toolbar upgrade */
.toolbar.glass {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 20px;
}
.toolbar select,
.toolbar input {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 12px;
  font-size: 0.8rem;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.toolbar select:hover,
.toolbar input:hover,
.toolbar select:focus,
.toolbar input:focus {
  border-color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════════════════
   VIDEOS — Cards + section redesign
   ════════════════════════════════════════════════════════════════════════════ */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  padding-bottom: 24px;
}

.video-card {
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  box-shadow: var(--shadow-card) !important;
  display: flex;
  flex-direction: column;
}
.video-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 40px rgba(30,100,180,0.18) !important;
  border-color: var(--accent) !important;
}

/* Thumbnail area */
.video-card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--bg3), var(--bg4));
  overflow: hidden;
}
.video-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Play button overlay */
.video-card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-card:hover .video-card-thumb::after {
  background: rgba(0,0,0,0.15);
}
.video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(30,150,228,0.85);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform 0.2s, background 0.2s;
  box-shadow: 0 4px 16px rgba(30,150,228,0.4);
}
.video-card:hover .video-play-btn {
  transform: translate(-50%,-50%) scale(1.12);
  background: var(--accent);
}
.video-duration-badge {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.03em;
}
.video-type-badge {
  position: absolute;
  top: 8px; left: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}
.video-type-badge--oge  { background: rgba(16,185,129,0.85); color: #fff; }
.video-type-badge--ege  { background: rgba(245,158,11,0.85); color: #fff; }
.video-type-badge--base { background: rgba(30,150,228,0.85); color: #fff; }

/* Card body */
.video-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.video-card-title {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.video-card-meta-chip {
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--text3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
}
.video-card-grade {
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--accent);
}

/* Video filters bar */
.video-filters {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  margin-bottom: 20px;
}
.video-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 0 12px;
}
.video-search-wrap .video-search-icon {
  font-size: 0.85rem;
  opacity: 0.5;
}
.video-search-wrap input {
  border: none !important;
  background: transparent !important;
  padding: 7px 0 !important;
  color: var(--text);
  font-size: 0.8rem;
  flex: 1;
  outline: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   STATS — Section redesign
   ════════════════════════════════════════════════════════════════════════════ */

.stats-v2-hero {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stats-v2-block {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}
.stats-v2-block::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.stats-v2-block--blue::before   { background: var(--accent-g); }
.stats-v2-block--green::before  { background: linear-gradient(90deg,#10b981,#34d399); }
.stats-v2-block--gold::before   { background: linear-gradient(90deg,#f59e0b,#fcd34d); }
.stats-v2-block--purple::before { background: linear-gradient(90deg,#1e96e4,#35B1FA); }
.stats-v2-block--orange::before { background: linear-gradient(90deg,#f97316,#fb923c); }
.stats-v2-block:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(30,100,180,0.15); border-color: var(--accent); }

.stats-v2-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-g);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1rem;
  margin-bottom: 2px;
}
.stats-v2-icon--green  { background: linear-gradient(135deg,#10b981,#34d399); }
.stats-v2-icon--gold   { background: linear-gradient(135deg,#f59e0b,#fcd34d); color: #1a202c; }
.stats-v2-icon--purple { background: linear-gradient(135deg,#1e96e4,#35B1FA); }
.stats-v2-icon--orange { background: linear-gradient(135deg,#f97316,#fb923c); }

.stats-v2-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text) !important;
  line-height: 1;
  letter-spacing: -0.03em;
}
.stats-v2-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text3) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stats-v2-panel {
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 18px 16px !important;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card) !important;
}
.stats-v2-panel-title {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--text2) !important;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

/* ════════════════════════════════════════════════════════════════════════════
   LEADERBOARD — Redesign
   ════════════════════════════════════════════════════════════════════════════ */

.lb-period-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.lb-period-btn {
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1.5px solid var(--border2);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  transition: all 0.18s;
}
.lb-period-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.lb-period-btn.active {
  background: var(--accent-g);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(30,150,228,0.30);
}

.lb-v2-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.lb-v2-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  transition: all 0.18s;
}
.lb-v2-tab:hover { border-color: var(--accent); color: var(--accent); }
.lb-v2-tab.active { background: var(--accent-g); border-color: transparent; color: #fff; box-shadow: 0 4px 16px rgba(30,150,228,0.25); }

.lb-v2-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 24px;
  padding: 24px 16px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.lb-podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.lb-podium-slot--1 { order: 2; }
.lb-podium-slot--2 { order: 1; }
.lb-podium-slot--3 { order: 3; }
.lb-podium-crown {
  font-size: 1.5rem;
  line-height: 1;
}
.lb-podium-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  border: 3px solid rgba(255,255,255,0.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.lb-podium-slot--1 .lb-podium-avatar { width: 64px; height: 64px; font-size: 1.4rem; border-color: #f59e0b; box-shadow: 0 4px 24px rgba(245,158,11,0.4); }
.lb-podium-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
  max-width: 80px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-podium-xp {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
}
.lb-podium-bar {
  width: 64px;
  border-radius: 8px 8px 0 0;
  background: var(--accent-g);
  opacity: 0.7;
}
.lb-podium-slot--1 .lb-podium-bar { height: 60px; opacity: 1; width: 72px; }
.lb-podium-slot--2 .lb-podium-bar { height: 40px; background: linear-gradient(180deg,var(--text3),var(--border3)); }
.lb-podium-slot--3 .lb-podium-bar { height: 28px; background: linear-gradient(180deg,#f97316,#fbbf24); }

.lb-v2-table-wrap {
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-card) !important;
}
.lb-v2-head {
  display: grid;
  grid-template-columns: 44px 1fr 80px 70px 60px 80px;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text3) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lb-row {
  display: grid;
  grid-template-columns: 44px 1fr 80px 70px 60px 80px;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background 0.15s;
  color: var(--text);
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--surface); }
.lb-row.lb-row--me {
  background: rgba(30,150,228,0.08) !important;
  border-color: rgba(30,150,228,0.18);
}
.lb-rank-num {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text3);
  text-align: center;
}
.lb-rank-num--1 { color: #f59e0b; }
.lb-rank-num--2 { color: var(--text3); }
.lb-rank-num--3 { color: #f97316; }
.lb-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.lb-user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.lb-user-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-cell {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text2);
  text-align: center;
}
.lb-league-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--surface);
  color: var(--text2);
  border: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════════════════════════
   SUBSCRIPTIONS — Redesign
   ════════════════════════════════════════════════════════════════════════════ */

.sub-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding-bottom: 24px;
}

.sub-plan-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.sub-plan-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(30,100,180,0.18); border-color: var(--accent); }
.sub-plan-card--featured {
  background: linear-gradient(135deg, #1565a8 0%, #1e96e4 60%, #35B1FA 100%);
  border-color: transparent;
  color: #fff;
}
.sub-plan-card--featured .sp-name,
.sub-plan-card--featured .sp-price,
.sub-plan-card--featured .sp-price-sub,
.sub-plan-card--featured .sub-feature-item { color: rgba(255,255,255,0.9); }
.sub-plan-card--featured .sub-feature-item--check::before { filter: brightness(3); }

.sub-plan-badge {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg,#f59e0b,#fcd34d);
  color: #1a202c;
  padding: 3px 10px;
  border-radius: 100px;
}

.sp-header { display: flex; flex-direction: column; gap: 4px; }
.sp-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.sp-tagline {
  font-size: 0.75rem;
  color: var(--text3);
}
.sp-price-wrap { display: flex; align-items: baseline; gap: 4px; }
.sp-price {
  font-size: 2rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.04em;
  line-height: 1;
}
.sp-price-sub {
  font-size: 0.75rem;
  color: var(--text3);
}

.sub-features-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.sub-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text2);
}
.sub-feature-item::before {
  content: "";
  width: 16px; height: 16px;
  flex-shrink: 0;
  background: rgba(16,185,129,0.15);
  border: 1.5px solid rgba(16,185,129,0.4);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%2310b981' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
.sub-feature-item--locked::before {
  background-color: var(--surface);
  border-color: var(--border2);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5.5V4a2 2 0 1 1 4 0v1.5' stroke='%23718096' stroke-width='1.2' stroke-linecap='round'/%3E%3Crect x='2.5' y='5' width='7' height='5' rx='1' fill='%23718096' opacity='.4'/%3E%3C/svg%3E");
}

.sub-cta-btn {
  width: 100%;
  padding: 12px 0;
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--accent-g);
  color: #fff;
  box-shadow: 0 4px 16px rgba(30,150,228,0.30);
}
.sub-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(30,150,228,0.40); }
.sub-plan-card--featured .sub-cta-btn {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255,255,255,0.4);
  box-shadow: none;
  color: #fff;
}
.sub-plan-card--featured .sub-cta-btn:hover {
  background: rgba(255,255,255,0.3);
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE responsive
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .module-grid { grid-template-columns: 1fr; }
  .video-grid  { grid-template-columns: 1fr; }
  .stats-v2-hero { grid-template-columns: repeat(2,1fr); }
  .lb-v2-head  { grid-template-columns: 36px 1fr 70px 60px; }
  .lb-row      { grid-template-columns: 36px 1fr 70px 60px; }
  .lb-v2-head  > div:nth-child(4),
  .lb-v2-head  > div:nth-child(5),
  .lb-row      > div:nth-child(4),
  .lb-row      > div:nth-child(5) { display: none; }
  .sub-plans-grid { grid-template-columns: 1fr; }
  .hac-bars { height: 56px; }
  .lb-v2-podium { padding: 16px; gap: 8px; }
}

@media (max-width: 480px) {
  .stats-v2-hero { grid-template-columns: 1fr 1fr; }
  .home-plan-card, .home-activity-card { min-height: auto; }
}


/* ════════════════════════════════════════════════════════════════════════════
   LEADERBOARD — existing class aliases → new design tokens
   ════════════════════════════════════════════════════════════════════════════ */

/* Table wrapper */
#leaderboardRows {
  background: var(--card);
}

/* Row */
.lb-v2-row {
  display: grid;
  grid-template-columns: 44px 1fr 80px 70px 60px 90px;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background 0.15s;
  color: var(--text);
}

.lb-v2-row.is-me {
  background: rgba(30,150,228,0.08) !important;
  border-left: 3px solid var(--accent);
}
.lb-v2-row.is-top { }

/* Rank number */
.lb-v2-rank {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text3);
  text-align: center;
}
.lb-v2-rank.is-top { font-size: 1.1rem; }

/* Name cell */
.lb-v2-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lb-v2-avatar-sm {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.lb-v2-name-txt {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-v2-me-badge {
  font-size: 0.62rem;
  font-weight: 700;
  background: var(--accent-g);
  color: #fff;
  border-radius: 100px;
  padding: 1px 6px;
  flex-shrink: 0;
}

/* Data cells */
.lb-v2-xp,
.lb-v2-solved,
.lb-v2-streak {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text2);
  text-align: center;
}
.lb-v2-xp { color: var(--accent); }

/* League chip */
.lb-v2-league-sm {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--surface);
  color: var(--text2);
  border: 1px solid var(--border);
}

/* League tabs */





/* Podium */
.lb-v2-podium {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 12px; margin-bottom: 20px;
  padding: 24px 16px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.lb-v2-podium-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.lb-v2-pod-medal { font-size: 1.4rem; line-height: 1; }
.lb-v2-pod-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 800; color: #fff;
  border: 2.5px solid rgba(255,255,255,0.25);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.lb-v2-podium-cell:nth-child(1) .lb-v2-pod-avatar,
.lb-v2-podium-cell.is-first .lb-v2-pod-avatar {
  width: 60px; height: 60px; font-size: 1.3rem;
  border-color: #f59e0b;
  box-shadow: 0 4px 24px rgba(245,158,11,0.4);
}
.lb-v2-pod-name {
  font-size: 0.72rem; font-weight: 700; color: var(--text);
  max-width: 80px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-v2-pod-xp { font-size: 0.68rem; font-weight: 600; color: var(--accent); }
.lb-v2-pod-stand {
  border-radius: 6px 6px 0 0;
  background: var(--accent-g);
  opacity: 0.65;
  width: 60px;
}

/* Leaderboard responsive */
@media (max-width: 640px) {
  .lb-v2-row { grid-template-columns: 36px 1fr 70px 60px; }
  .lb-v2-row > div:nth-child(5),
  .lb-v2-row > div:nth-child(6) { display: none; }
  .lb-v2-head > div:nth-child(5),
  .lb-v2-head > div:nth-child(6) { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SUBSCRIPTIONS — renderSubscriptions patches
   ════════════════════════════════════════════════════════════════════════════ */

/* Ensure subscriptions content grid layout */
#subscriptionsContent .sub-plans-grid,
#subscriptionsContent .subs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* Override old sub card styles if any */
.sub-card, .plan-card {
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 24px 20px !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text) !important;
}
.sub-card h3, .plan-card h3, .sub-card .plan-name, .plan-card .plan-name {
  color: var(--text) !important;
}
.sub-card .plan-price, .plan-card .plan-price,
.sub-card .price, .plan-card .price {
  color: var(--text) !important;
  font-size: 1.8rem !important;
  font-weight: 900 !important;
}
.sub-card .plan-feature, .plan-card .plan-feature,
.sub-card li, .plan-card li {
  color: var(--text2) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   STATS — fix old stats card classes
   ════════════════════════════════════════════════════════════════════════════ */

.stats-v2-card {
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 18px 16px !important;
  box-shadow: var(--shadow-card) !important;
}
.stats-v2-val {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  line-height: 1 !important;
}
.stats-v2-lbl {
  font-size: 0.72rem !important;
  color: var(--text3) !important;
  font-weight: 600 !important;
}

/* Progress bars in stats */
.progress-bar-wrap {
  background: var(--surface3) !important;
  border-radius: 100px;
  overflow: hidden;
}
.progress-bar-fill {
  background: var(--accent-g) !important;
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.progress-label { color: var(--text2) !important; }
.progress-pct   { color: var(--accent) !important; }


/* ════════════════════════════════════════════════════════════════════════════
   FINAL DESIGN SYSTEM v4
   All new tokens, hero, topbar, home 2-grid, smart search
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Landing-identical hero gradient ──────────────────────────────────────── */
:root {
  --hero-bg-light: linear-gradient(135deg, hsl(200,70%,38%) 0%, hsl(200,60%,48%) 60%, hsl(210,65%,52%) 100%);
  --hero-bg-dark:  linear-gradient(135deg, hsl(200,55%,20%) 0%, hsl(200,50%,28%) 60%, hsl(210,55%,32%) 100%);
  --hero-text:     #ffffff;
  --hero-sub:      rgba(255,255,255,0.80);
  --hero-border:   rgba(255,255,255,0.18);
}

/* ── Topbar: transparent + blur ──────────────────────────────────────────── */
.v2-topbar {
  position: sticky !important;
  top: 0;
  z-index: 200;
  background: rgba(var(--bg-rgb, 247,249,252), 0.78) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .v2-topbar {
  background: rgba(14,17,23, 0.82) !important;
}
/* Topbar actions: gap tight, order managed by HTML */
.v2-topbar-actions,
.topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ── Search capsule redesign ─────────────────────────────────────────────── */
.v2-search,
.search-wrap {
  flex: 1 1 0 !important;
  max-width: 400px !important;
  min-width: 160px !important;
  position: relative !important;
}
.v2-search .search-icon,
.search-wrap .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  pointer-events: none;
  display: flex;
  align-items: center;
  z-index: 1;
}
.v2-search input,
.search-wrap input[type="text"],
#globalSearch {
  width: 100% !important;
  height: 36px !important;
  padding: 0 16px 0 40px !important;
  border-radius: 100px !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--border2) !important;
  color: var(--text) !important;
  font-size: 0.82rem !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.v2-search input::placeholder,
.search-wrap input::placeholder,
#globalSearch::placeholder {
  color: var(--text3) !important;
}
.v2-search input:focus,
.search-wrap input:focus,
#globalSearch:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(30,150,228,0.15) !important;
  background: var(--card) !important;
}

/* ── Smart search dropdown ───────────────────────────────────────────────── */
.search-dropdown,
#searchDropdown {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0; right: 0 !important;
  background: var(--card) !important;
  border: 1.5px solid var(--border2) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18), 0 4px 16px rgba(30,100,180,0.10) !important;
  z-index: 9999 !important;
  overflow: hidden;
  max-height: 480px;
  overflow-y: auto;
}
.search-group-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px 6px;
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  color: var(--text);
}
.search-result-item:hover {
  background: var(--surface) !important;
}
.search-result-item:active { background: var(--surface2); }
.sri-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--accent-g);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  font-size: 0.85rem;
}
.sri-icon--video    { background: linear-gradient(135deg,#1e96e4,#35B1FA); }
.sri-icon--task     { background: linear-gradient(135deg,#10b981,#34d399); }
.sri-icon--topic    { background: var(--accent-g); }
.sri-body { flex: 1; min-width: 0; }
.sri-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sri-name mark {
  background: rgba(30,150,228,0.22);
  color: var(--accent);
  border-radius: 3px;
  padding: 0 1px;
  font-weight: 700;
}
.sri-meta {
  font-size: 0.67rem;
  color: var(--text3);
  margin-top: 1px;
}
.sri-tag {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--surface);
  color: var(--text3);
  border: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
}
.sri-tag--oge    { background: rgba(16,185,129,0.1); color: #10b981; border-color: rgba(16,185,129,0.25); }
.sri-tag--ege    { background: rgba(245,158,11,0.1); color: #f59e0b; border-color: rgba(245,158,11,0.25); }
.sri-tag--olymp  { background: rgba(239,68,68,0.1);  color: #ef4444; border-color: rgba(239,68,68,0.25); }
/* Empty state */
.search-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text3);
}
.search-empty-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  opacity: 0.4;
  display: block;
}
.search-empty-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 4px;
}
.search-empty-hint {
  font-size: 0.72rem;
  color: var(--text3);
}
/* Scrollbar in dropdown */
.search-dropdown::-webkit-scrollbar { width: 4px; }
.search-dropdown::-webkit-scrollbar-track { background: transparent; }
.search-dropdown::-webkit-scrollbar-thumb { background: var(--border3); border-radius: 2px; }

/* ── Hero block — landing gradient ──────────────────────────────────────── */
.dash-welcome {
  background: var(--hero-bg-light) !important;
  border-radius: var(--radius-xl) !important;
  padding: 32px 36px !important;
  margin-bottom: 20px !important;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .dash-welcome {
  background: var(--hero-bg-dark) !important;
}
/* Ambient orbs */
.dw-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.dw-orb--1 {
  width: 300px; height: 300px;
  background: rgba(255,255,255,0.08);
  top: -80px; right: -60px;
}
.dw-orb--2 {
  width: 200px; height: 200px;
  background: rgba(255,255,255,0.05);
  bottom: -60px; left: 30%;
}
/* Hero inner layout */
.dash-welcome-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* League pill */
.dw-league-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin-bottom: 10px;
  backdrop-filter: blur(4px);
  letter-spacing: 0.03em;
}
/* Title */
.dash-welcome-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  font-weight: 700 !important;
  color: var(--hero-text) !important;
  -webkit-text-fill-color: var(--hero-text) !important;
  line-height: 1.15 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.02em;
}
.dash-welcome-title strong {
  font-weight: 900;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
/* Sub */
.dash-welcome-sub {
  font-size: 0.88rem !important;
  color: var(--hero-sub) !important;
  -webkit-text-fill-color: var(--hero-sub) !important;
  margin-bottom: 20px !important;
  max-width: 360px;
}
/* CTA buttons */

.dw-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  background: rgba(255,255,255,0.22);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  letter-spacing: 0.01em;
}
.dw-btn-primary:hover {
  background: rgba(255,255,255,0.32);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.dw-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.dw-btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-1px);
}

/* ── Rank widget (right side of hero) ────────────────────────────────────── */
.dw-rank-widget {
  flex-shrink: 0;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 28px;
  padding: 20px 24px;
  text-align: center;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dw-rank-trophy { margin-bottom: 4px; opacity: 0.9; }
.dw-rank-num {
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.04em;
}
.dw-rank-sub {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}
.dw-rank-league {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  margin-top: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 100px;
  padding: 3px 10px;
  letter-spacing: 0.02em;
}
/* 4 mini stats inside rank widget */
.dw-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-top: 10px;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 10px;
}
.dw-mini-stat { text-align: center; }
.dw-mini-val {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.dw-mini-lbl {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Remove old eyebrow on hero */
.dash-welcome-eyebrow { display: none !important; }
/* Hide old hero deco symbols */
.dash-welcome-deco { display: none !important; }
.dw-sym { display: none !important; }
/* Hide old hero illustration */
.dash-welcome-illus { display: none !important; }
/* Hide old hero stats strip */
.hero-stats-row { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   HOME 2-COL GRID (DZ + Activity)
   ════════════════════════════════════════════════════════════════════════════ */

.home-two-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .home-two-grid { grid-template-columns: 1fr; }
}

/* ── Base card ───────────────────────────────────────────────────────────── */
.h2g-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
  min-height: 260px;
  /* Hover lift effect */
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.22s cubic-bezier(0.4,0,0.2,1),
              border-color 0.2s;
}
.h2g-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(30,100,180,0.14);
  border-color: var(--accent);
}
[data-theme="dark"] .h2g-card {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .h2g-card:hover {
  border-color: var(--accent2);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}

/* ── Card header row ─────────────────────────────────────────────────────── */
.h2g-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.h2g-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.h2g-icon--blue  { background: var(--accent-g); }
.h2g-icon--green { background: linear-gradient(135deg,#10b981,#34d399); }
.h2g-head-body { flex: 1; min-width: 0; }
.h2g-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h2g-sub {
  font-size: 0.72rem;
  color: var(--text3);
  margin-top: 1px;
}
.h2g-count-badge {
  background: var(--accent-g);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 100px;
  padding: 2px 9px;
  min-width: 22px;
  text-align: center;
}

/* ── DZ card body ────────────────────────────────────────────────────────── */
.h2g-dz-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.h2g-dz-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text3);
  font-size: 0.8rem;
  padding: 16px 0;
  text-align: center;
}
.h2g-dz-task {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.h2g-dz-topic-label {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text3);
}
.h2g-dz-topic {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.h2g-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.h2g-progress-track {
  flex: 1;
  height: 7px;
  background: var(--surface3);
  border-radius: 100px;
  overflow: hidden;
}
.h2g-progress-fill {
  height: 100%;
  background: var(--accent-g);
  border-radius: 100px;
  /* Animate fill on load */
  width: 0%;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.h2g-progress-pct {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 32px;
  text-align: right;
}
.h2g-dz-deadline {
  font-size: 0.7rem;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── DZ card actions ─────────────────────────────────────────────────────── */
.h2g-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
}
.h2g-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.18s;
  letter-spacing: 0.01em;
}
.h2g-btn--primary {
  background: var(--accent-g);
  color: #fff;
  box-shadow: 0 4px 14px rgba(30,150,228,0.28);
}
.h2g-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 22px rgba(30,150,228,0.38);
}
.h2g-btn--ghost {
  background: var(--surface);
  color: var(--text2);
  border: 1.5px solid var(--border2);
}
.h2g-btn--ghost:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--accent);
}

/* ── Activity card bar chart ─────────────────────────────────────────────── */
.h2g-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(249,115,22,0.10);
  border: 1px solid rgba(249,115,22,0.24);
  border-radius: 100px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #f97316;
  white-space: nowrap;
  flex-shrink: 0;
}
.h2g-bar-chart {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: flex-end;
  gap: 5px;
  height: 80px;
  padding: 4px 0 0;
}
.h2g-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 5px;
}
.h2g-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, rgba(30,150,228,0.5), rgba(30,150,228,0.2));
  /* Animate height on load */
  transition: height 0.7s cubic-bezier(0.4,0,0.2,1);
}
.h2g-bar--today {
  background: var(--accent-g);
  box-shadow: 0 0 10px rgba(30,150,228,0.35);
}
.h2g-bar-col--today .h2g-bar {
  background: var(--accent-g);
}
.h2g-day-lbl {
  font-size: 0.6rem;
  color: var(--text3);
  text-align: center;
  white-space: nowrap;
}
.h2g-day-lbl--today {
  color: var(--accent);
  font-weight: 700;
}
/* Stats bottom row */
.h2g-stats-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.h2g-mini-stat { text-align: left; }
.h2g-mini-stat--center { text-align: center; border-left: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0 8px; }
.h2g-mini-num {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}
.h2g-mini-lbl {
  font-size: 0.62rem;
  color: var(--text3);
  margin-top: 2px;
}

/* ── Dark mode cards ─────────────────────────────────────────────────────── */

[data-theme="dark"] .h2g-title { color: var(--text); }
[data-theme="dark"] .h2g-sub   { color: var(--text3); }
[data-theme="dark"] .h2g-dz-topic { color: var(--text); }
[data-theme="dark"] .h2g-progress-track { background: var(--surface3); }
[data-theme="dark"] .h2g-btn--ghost {
  background: var(--surface);
  color: var(--text2);
  border-color: var(--border2);
}
[data-theme="dark"] .h2g-bar {
  background: linear-gradient(180deg, rgba(53,177,250,0.5), rgba(53,177,250,0.15));
}
[data-theme="dark"] .h2g-bar--today { background: var(--accent-g); }

/* ── Topbar badge chips ──────────────────────────────────────────────────── */
.v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 100px;
  background: var(--surface);
  border: 1.5px solid var(--border2);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
  cursor: pointer;
}
.v2-badge:hover {
  background: var(--surface2);
  border-color: var(--accent);
  transform: translateY(-1px);
}
/* Theme btn */
.v2-theme-btn,
.topbar-theme-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
  flex-shrink: 0;
}
.v2-theme-btn:hover,
.topbar-theme-btn:hover {
  background: var(--surface2);
  border-color: var(--accent);
  transform: rotate(20deg) translateY(-1px);
}
/* Sun/moon logic */
.v2-theme-sun  { display: none; }
.v2-theme-moon { display: block; }



/* User chip */
.v2-user-chip,
.topbar-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 5px;
  border-radius: 100px;
  background: var(--surface);
  border: 1.5px solid var(--border2);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.v2-user-chip:hover,
.topbar-user-chip:hover {
  background: var(--surface2);
  border-color: var(--accent);
}
.v2-user-avatar,
.topbar-user-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-g);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.v2-user-name,
.topbar-user-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-user-grade,
.topbar-user-grade {
  font-size: 0.65rem;
  color: var(--text3);
  line-height: 1;
}

/* ── Mobile topbar adjustments ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .v2-search, .search-wrap {
    display: none !important; /* collapsed; icon shown in sidebar instead */
  }
  .v2-topbar-actions { gap: 4px !important; }
  .chip-name, .v2-user-info, .topbar-user-info { display: none !important; }
  .v2-user-chip, .topbar-user-chip { padding: 4px !important; border-radius: 50% !important; }
  .dw-rank-widget { display: none; } /* rank in hero hidden on very small */
  .dash-welcome { padding: 20px 18px !important; }
}
@media (max-width: 480px) {
  .home-two-grid { grid-template-columns: 1fr !important; }
  .dash-welcome-title { font-size: 1.55rem !important; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .v2-search, .search-wrap { max-width: 220px !important; }
}

/* ── Visual Polish: Micro-animations ────────────────────────────────────── */

/* Progress bar fill animation on page load */
@keyframes progress-fill-in {
  from { width: 0%; }
}
.h2g-progress-fill[data-animated] {
  animation: progress-fill-in 0.9s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* Bar chart height animation */
@keyframes bar-grow {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}

/* Button hover — all brand buttons */
.dw-btn-primary,
.dw-btn-outline,
.h2g-btn,
.v2-badge,
.v2-theme-btn {
  will-change: transform;
}

/* Card hover glow for dark mode */
[data-theme="dark"] .h2g-card:hover {
  box-shadow: 0 0 0 1px rgba(53,177,250,0.2), 0 12px 32px rgba(0,0,0,0.35);
}

/* ── Home section padding ────────────────────────────────────────────────── */
#home.page-section {
  padding-top: 0 !important;
}
.v2-content, .v2-main {
  padding: 20px 24px 32px !important;
}
@media (max-width: 640px) {
  .v2-content, .v2-main { padding: 12px 12px 24px !important; }
}


/* ════════════════════════════════════════════════════════════════════════════
   SESSION 4 — Final Overhaul CSS
   Agents: UI/UX Designer · Frontend Architect · Data Viz · QA Engineer
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. COOKIE BANNER — App matches Landing style ────────────────────────── */
/* Replace old dark cookie banner with landing-style floating card */
#cookieBanner {
  display: none;
  position: fixed;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: calc(100% - 3rem);
  max-width: 680px;
}
#cookieBanner.cookie-visible {
  display: block;
  animation: cookie-slide-in 0.45s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes cookie-slide-in {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}
#cookieBanner.cookie-hiding {
  animation: cookie-slide-out 0.35s ease forwards;
}
@keyframes cookie-slide-out {
  to { opacity: 0; transform: translateX(-50%) translateY(16px); }
}
.cookie-banner-inner {
  background: var(--card);
  border: 1.5px solid var(--border2);
  border-radius: 18px;
  padding: 1rem 1.4rem;
  box-shadow: 0 4px 32px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
}
.cookie-banner-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--surface);
  border-radius: 10px;
  color: var(--accent);
}
.cookie-banner-text { flex: 1; min-width: 0; }
.cookie-banner-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.15rem;
}
.cookie-banner-desc {
  font-size: 0.77rem;
  color: var(--text3);
  line-height: 1.5;
  margin: 0;
}
.cookie-policy-link { color: var(--accent); text-decoration: underline; }
.cookie-banner-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  align-items: center;
}
.cookie-settings-btn {
  padding: 0.45rem 1rem;
  background: transparent;
  border: 1.5px solid var(--border2);
  color: var(--text3);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 100px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  white-space: nowrap;
}
.cookie-settings-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface);
}
.cookie-accept-btn {
  padding: 0.45rem 1.1rem;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.cookie-accept-btn:hover {
  background: var(--accent2);
  box-shadow: 0 4px 16px rgba(30,150,228,0.35);
}
@media (max-width: 600px) {
  #cookieBanner { width: calc(100% - 2rem); bottom: 1rem; }
  .cookie-banner-inner { flex-wrap: wrap; gap: 0.75rem; padding: 1rem; }
  .cookie-banner-icon { display: none; }
  .cookie-banner-actions { width: 100%; justify-content: flex-end; }
}
[data-theme="dark"] .cookie-banner-inner {
  box-shadow: 0 4px 32px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
}

/* ── 2. HERO — Animated orbs + contrast "Карта курса" button ─────────────── */
/* Animated ambient orbs */
.dw-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: orb-float 18s ease-in-out infinite alternate;
}
.dw-orb--1 {
  width: 300px; height: 300px;
  background: rgba(255,255,255,0.08);
  top: -80px; right: -60px;
  animation-duration: 20s;
  animation-delay: 0s;
}
.dw-orb--2 {
  width: 200px; height: 200px;
  background: rgba(255,255,255,0.055);
  bottom: -60px; left: 30%;
  animation-duration: 14s;
  animation-delay: -7s;
}
@keyframes orb-float {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(12px, -16px) scale(1.04); }
  66%  { transform: translate(-8px, 8px) scale(0.97); }
  100% { transform: translate(16px, -8px) scale(1.02); }
}

/* Math formula deco on hero background */
.dash-welcome::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='160'%3E%3Ctext x='10' y='40' font-family='Georgia,serif' font-size='14' fill='rgba(255,255,255,0.05)'%3Esin²x + cos²x = 1%3C/text%3E%3Ctext x='140' y='90' font-family='Georgia,serif' font-size='12' fill='rgba(255,255,255,0.04)'%3E∫ f(x)dx%3C/text%3E%3Ctext x='20' y='130' font-family='Georgia,serif' font-size='11' fill='rgba(255,255,255,0.04)'%3Ea² + b² = c²%3C/text%3E%3Ctext x='200' y='40' font-family='Georgia,serif' font-size='13' fill='rgba(255,255,255,0.035)'%3Ex = (-b±√D)/2a%3C/text%3E%3C/svg%3E");
  background-size: 320px 160px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

/* "Карта курса" outline button — contrast white bg on hero */
.dw-btn-outline {
  background: rgba(255,255,255,0.18) !important;
  border: 1.5px solid rgba(255,255,255,0.55) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  backdrop-filter: blur(8px) !important;
  font-weight: 700 !important;
}
.dw-btn-outline:hover {
  background: rgba(255,255,255,0.30) !important;
  border-color: rgba(255,255,255,0.75) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
  transform: translateY(-2px) !important;
}

/* ── 3. SCROLL FIX — Single browser scrollbar, no inner overflow ─────────── */
/* Override the internal scroll on .content → let page scroll naturally */
.shell {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}
.content {
  overflow-y: visible !important;
  overflow-x: hidden !important;
  flex: 1 !important;
}
/* Keep sidebar and topbar sticky, not page-scroll fixed */
.v2-sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex-shrink: 0 !important;
}
body {
  overflow-x: hidden;
  overflow-y: auto;
}
/* On mobile, content uses natural flow */
@media (max-width: 768px) {
  .shell { overflow: visible !important; height: auto !important; }
  .content { overflow: visible !important; }
}

/* ── 4. PERSONALIZED ACTIVITY CHART — Track card styles ─────────────────── */
.h2g-track-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.h2g-track-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1.5px solid;
}
.h2g-track-badge--oge  { background: rgba(16,185,129,0.12); color: #10b981; border-color: rgba(16,185,129,0.3); }
.h2g-track-badge--ege  { background: rgba(245,158,11,0.12); color: #f59e0b; border-color: rgba(245,158,11,0.3); }
.h2g-track-badge--school { background: rgba(30,150,228,0.12); color: var(--accent); border-color: rgba(30,150,228,0.3); }
.h2g-track-badge--olymp { background: rgba(239,68,68,0.1); color: #ef4444; border-color: rgba(239,68,68,0.25); }
.h2g-track-tip {
  font-size: 0.72rem;
  color: var(--text3);
  font-style: italic;
}

/* ── 5. STATS — OGE/EGE split bar charts with 0-100% axis ───────────────── */
.stats-split-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .stats-split-charts { grid-template-columns: 1fr; }
}
.stats-exam-chart-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 18px 20px;
  transition: box-shadow 0.22s, transform 0.22s;
}
.stats-exam-chart-card:hover {
  box-shadow: 0 8px 32px rgba(30,100,180,0.12);
  transform: translateY(-1px);
}
.sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sec-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}
.sec-badge {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sec-badge--oge { background: rgba(16,185,129,0.15); color: #10b981; }
.sec-badge--ege { background: rgba(245,158,11,0.15); color: #f59e0b; }
.sec-overall {
  font-size: 0.72rem;
  color: var(--text3);
}
/* Bar chart rows inside stats */
.sec-bar-list { display: flex; flex-direction: column; gap: 7px; }
.sec-bar-row {
  display: grid;
  grid-template-columns: 90px 1fr 36px;
  align-items: center;
  gap: 8px;
}
.sec-bar-label {
  font-size: 0.68rem;
  color: var(--text2);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sec-bar-track {
  height: 8px;
  background: var(--surface2);
  border-radius: 100px;
  overflow: visible;
  position: relative;
}
.sec-bar-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.9s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}
.sec-bar-fill--oge { background: linear-gradient(90deg,#10b981,#34d399); }
.sec-bar-fill--ege { background: linear-gradient(90deg,#f59e0b,#fcd34d); }
/* Tooltip on bar */
.sec-bar-fill::after {
  content: attr(data-pct) "%";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translate(100%,-50%);
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}
.sec-bar-row:hover .sec-bar-fill::after { opacity: 1; }
.sec-bar-val {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text2);
  text-align: right;
}
/* Y-axis markers (0 - 50 - 100%) */
.sec-axis {
  display: flex;
  justify-content: space-between;
  padding: 0 0 4px;
  font-size: 0.58rem;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
[data-theme="dark"] .stats-exam-chart-card { border-color: var(--border2); }
[data-theme="dark"] .sec-bar-track { background: var(--surface3); }

/* ── 6. VIDEO CARDS — Redesigned with track badges + KaTeX hints ─────────── */
/* Override old video-card with clean capsule design */
.video-card {
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), box-shadow 0.22s, border-color 0.2s !important;
}
.video-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 36px rgba(30,100,180,0.16) !important;
  border-color: var(--accent) !important;
}
.video-thumb {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, hsl(220,30%,18%), hsl(230,35%,22%)) !important;
  border-radius: 0 !important;
}
.video-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.35s !important;
}
.video-card:hover .video-thumb img { transform: scale(1.04) !important; }
/* Fallback thumbnail — math-themed gradient placeholder */
.vfb {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, hsl(220,40%,22%), hsl(210,50%,28%)) !important;
  font-size: 0 !important; /* hide emoji if any */
  position: absolute !important;
  inset: 0 !important;
}
.vfb::after {
  content: "▶";
  font-size: 2.5rem;
  color: rgba(255,255,255,0.5);
}
.video-play-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.2) !important;
  opacity: 0 !important;
  transition: opacity 0.22s !important;
}
.video-card:hover .video-play-overlay { opacity: 1 !important; }
.video-play-btn {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.95) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
  transform: scale(0.9) !important;
  transition: transform 0.2s !important;
}
.video-card:hover .video-play-btn { transform: scale(1.05) !important; }
.video-play-btn svg { width: 24px !important; height: 24px !important; fill: var(--accent) !important; margin-left: 3px !important; }
/* Track badge overlay on thumb */
.video-track-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 3px 9px !important;
  border-radius: 100px !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  z-index: 3 !important;
}
.video-track-badge--oge  { background: rgba(16,185,129,0.85); color: #fff; }
.video-track-badge--ege  { background: rgba(245,158,11,0.85); color: #fff; }
.video-track-badge--school { background: rgba(30,150,228,0.85); color: #fff; }
.video-track-badge--olymp { background: rgba(53,177,250,0.85); color: #fff; }
/* Duration badge */
.video-duration-badge {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  background: rgba(0,0,0,0.72) !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  backdrop-filter: blur(4px) !important;
  z-index: 3 !important;
}
.video-card-body {
  padding: 14px 16px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
.video-card-title {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.video-card-desc {
  font-size: 0.75rem !important;
  color: var(--text3) !important;
  line-height: 1.5 !important;
  flex: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.video-card-meta {
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  margin-top: 6px !important;
  align-items: center !important;
}
.video-grade-badge {
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 100px !important;
  background: var(--surface2) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border2) !important;
}
.video-block-badge {
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  color: var(--text3) !important;
  padding: 2px 8px !important;
  border-radius: 100px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
/* KaTeX formula hint badge */
.video-formula-hint {
  font-size: 0.58rem !important;
  color: var(--accent2) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 100px !important;
  padding: 2px 8px !important;
  font-family: "KaTeX_Main", "Computer Modern", Georgia, serif !important;
  font-style: italic !important;
  letter-spacing: 0.01em !important;
}
/* Empty state video */
.video-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 24px !important;
  color: var(--text3) !important;
  font-size: 0.88rem !important;
  gap: 10px !important;
  grid-column: 1 / -1 !important;
}
[data-theme="dark"] .video-card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,0.45) !important;
}
[data-theme="dark"] .vfb {
  background: linear-gradient(135deg, hsl(220,30%,14%), hsl(210,40%,18%)) !important;
}

/* ── 7. LEADERBOARD — Cards with podium accents ──────────────────────────── */
/* Already mostly done in session 2; micro-polish here */
.lb-v2-row { border-radius: 14px !important; }
.lb-v2-row--me {
  border: 2px solid var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(30,150,228,0.12) !important;
}

/* ── 8. SUBSCRIPTIONS — Capsule style ───────────────────────────────────── */
/* Micro-tweak: ensure sub-plan card uses rounded-24 */
.sub-plan-card, .plan-card, .pricing-card {
  border-radius: 24px !important;
}

/* ── 9. VISUAL POLISH — Progress bar animation trigger ───────────────────── */
.h2g-progress-fill {
  transition: width 0.9s cubic-bezier(0.4,0,0.2,1) !important;
}
/* Bar animation: animated gradient for active bar */
.h2g-progress-fill--active {
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent)) !important;
  background-size: 200% !important;
  animation: bar-shimmer 2s linear infinite !important;
}
@keyframes bar-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── 10. THEME SYNC — Ensure no color zalipanie ─────────────────────────── */
/* Force instant transitions off during theme change, re-enable after */
[data-theme-transitioning] *,
[data-theme-transitioning] *::before,
[data-theme-transitioning] *::after {
  transition-duration: 0ms !important;
}


/* ── SESSION 4 PATCH: Cookie banner pixel-identical to Landing ───────────── */
/* Override app-cookie variables to exactly match lp-cookie variables        */
/* This makes #cookieBanner visually identical to #lpCookieBanner             */

/* Landing banner also needs transform on outer element (same as app) */
.lp-cookie-banner {
  transform: translateX(-50%);
}

/* App cookie banner: override all vars to match landing exactly */
.cookie-banner-inner {
  background: var(--lp-card-bg) !important;
  border: 1.5px solid var(--lp-border) !important;
  border-radius: 18px !important;
  padding: 1rem 1.4rem !important;
  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.10), 0 1px 4px hsl(0 0% 0% / 0.05) !important;
}
.cookie-banner-icon {
  background: var(--lp-primary-bg) !important;
  border-radius: 10px !important;
  color: var(--lp-primary-h) !important;
  width: 40px !important;
  height: 40px !important;
}
.cookie-banner-icon svg {
  stroke: var(--lp-primary-h) !important;
  width: 22px !important;
  height: 22px !important;
}
.cookie-banner-title {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--lp-text) !important;
  margin-bottom: 0.15rem !important;
}
.cookie-banner-desc {
  font-size: 0.77rem !important;
  color: var(--lp-text-muted) !important;
  line-height: 1.5 !important;
}
.cookie-policy-link {
  color: var(--lp-primary-h) !important;
}
/* Отклонить button — identical to .lp-cookie-decline */
.cookie-settings-btn {
  padding: 0.45rem 1rem !important;
  background: transparent !important;
  border: 1.5px solid var(--lp-border) !important;
  color: var(--lp-text-muted) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  border-radius: var(--lp-radius-btn) !important;
  transition: border-color 0.2s, color 0.2s, background 0.2s !important;
}
.cookie-settings-btn:hover {
  border-color: var(--lp-primary-h) !important;
  color: var(--lp-primary-h) !important;
  background: var(--lp-primary-bg) !important;
}
/* Принять button — identical to .lp-cookie-accept */
.cookie-accept-btn {
  padding: 0.45rem 1.1rem !important;
  background: var(--lp-primary-h) !important;
  color: #fff !important;
  border: 1.5px solid var(--lp-primary-h) !important;
  border-radius: var(--lp-radius-btn) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  transition: background 0.2s, box-shadow 0.2s !important;
}
.cookie-accept-btn:hover {
  background: var(--lp-primary-d) !important;
  box-shadow: var(--lp-primary-glow) !important;
}
/* Dark theme: same as landing dark vars */
[data-theme="dark"] .cookie-banner-inner {
  background: var(--lp-card-bg) !important;
  border-color: var(--lp-border) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.30) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SESSION 5 — Border-radius + Leaderboard + Subscription upgrades
   ═══════════════════════════════════════════════════════════════════ */

/* ── #8/#12: Module map cards — 24px radius + hover lift ─────────── */
.module-card {
  border-radius: 24px !important;
}
.module-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(30,150,228,0.16) !important;
}

/* ── #11/#12: Video cards — 24px radius ──────────────────────────── */
.video-card {
  border-radius: 24px !important;
}

/* ── #12: h2g cards (home) ─────────────────────────────────────────── */
.h2g-card {
  border-radius: 24px !important;
}

/* ── #10/#12: Leaderboard rows — capsule style 14px ──────────────── */
.lb-v2-row {
  border-radius: 14px !important;
  margin-bottom: 6px !important;
  border-bottom: none !important;
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  padding: 10px 14px !important;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s !important;
}
.lb-v2-row:hover {
  transform: translateX(3px) !important;
  box-shadow: 0 3px 12px rgba(30,150,228,0.12) !important;
  border-color: var(--border2) !important;
  background: var(--surface) !important;
}
.lb-v2-row.is-me {
  background: rgba(30,150,228,0.07) !important;
  border-color: rgba(30,150,228,0.35) !important;
  font-weight: 600 !important;
}
.lb-v2-table-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 0 !important;
}

/* ── #10: Leaderboard head — clean header ────────────────────────── */
.lb-v2-head {
  padding: 8px 14px !important;
  margin-bottom: 8px !important;
  border-radius: 10px !important;
  background: var(--surface) !important;
}

/* ── #10/#12: Subscription cards — 28px radius, active ring ─────── */
.sub-plan-card {
  border-radius: 28px !important;
}
.sub-plan-card--featured {
  box-shadow: 0 8px 40px rgba(30,150,228,0.28), 0 2px 8px rgba(30,150,228,0.15) !important;
  transform: scale(1.02) !important;
}
.sub-plan-card--featured:hover {
  transform: scale(1.04) translateY(-2px) !important;
}

/* ── #12: Stats exam chart cards ────────────────────────────────────── */
.stats-exam-chart-card {
  border-radius: 24px !important;
}
.stats-v2-panel {
  border-radius: 24px !important;
}
.stats-v2-block {
  border-radius: 20px !important;
}

/* ── #8: Map bar chart within module card ────────────────────────── */
.module-progress-fill {
  border-radius: 4px !important;
}
.module-progress-track {
  border-radius: 4px !important;
}

/* ── Pchip icons — ensure SVG display ────────────────────────────── */
.pchip-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important; /* hide any residual text */
}
.pchip-icon svg {
  display: block !important;
  flex-shrink: 0 !important;
}

/* ── Video search icon — SVG alignment ───────────────────────────── */
.video-search-icon {
  display: flex !important;
  align-items: center !important;
  font-size: 0 !important;
}
.video-search-icon svg {
  display: block !important;
}

/* ── Stat panel titles — SVG alignment ───────────────────────────── */
.stats-v2-panel-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SESSION 5 — Final Completion: All 15 Checklist Items
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── #2 / #8: Module cards — 24px radius, hover lift ─────────────────────── */
.module-card {
  border-radius: 24px !important;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.22s cubic-bezier(0.4,0,0.2,1),
              border-color 0.2s !important;
}
.module-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 40px rgba(30,100,180,0.16) !important;
  border-color: var(--accent) !important;
}
.module-card.completed:hover { border-color: rgba(16,185,129,0.6) !important; }

/* Module progress bar — inside each card */
.module-progress-fill {
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── #9: OGE/EGE split charts refinement ─────────────────────────────────── */
.stats-split-charts {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}
@media (max-width: 768px) {
  .stats-split-charts { grid-template-columns: 1fr !important; }
}
.stats-exam-chart-card {
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 24px !important;
  padding: 20px !important;
  box-shadow: var(--shadow-card) !important;
}
.sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sec-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}
.sec-badge {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 100px;
  color: #fff;
}
.sec-badge--oge { background: linear-gradient(90deg, #10b981, #34d399); }
.sec-badge--ege { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.sec-overall { font-size: 0.78rem; color: var(--text3); font-weight: 600; }
.sec-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.58rem;
  color: var(--text3);
  margin-bottom: 10px;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--border);
}
.sec-bar-list { display: flex; flex-direction: column; gap: 6px; }
.sec-bar-row {
  display: grid;
  grid-template-columns: 68px 1fr 36px;
  align-items: center;
  gap: 8px;
  position: relative;
}
.sec-bar-row:hover .sec-bar-fill::after { opacity: 1 !important; }
.sec-bar-label {
  font-size: 0.65rem;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sec-bar-track {
  height: 7px;
  background: var(--surface2, rgba(30,150,228,0.07));
  border-radius: 100px;
  overflow: visible;
  position: relative;
}
.sec-bar-fill {
  height: 100%;
  border-radius: 100px;
  width: 0%;
  transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}
.sec-bar-fill::after {
  content: attr(data-pct)"%";
  position: absolute;
  right: 0;
  top: -22px;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 5px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  z-index: 10;
}
.sec-bar-fill--oge { background: linear-gradient(90deg, #10b981, #34d399); }
.sec-bar-fill--ege { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.sec-bar-val {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text2);
  text-align: right;
}

/* ── #10: Leaderboard — capsule rows, visual accents, dynamic indicator ───── */
.lb-v2-row {
  border-radius: 14px !important;
  margin-bottom: 4px !important;
  transition: background 0.15s, box-shadow 0.15s !important;
}
.lb-v2-row.is-me {
  background: rgba(30,150,228,0.10) !important;
  border: 1.5px solid rgba(30,150,228,0.25) !important;
  border-radius: 14px !important;
}
.lb-v2-row.is-top {
  background: rgba(245,158,11,0.06) !important;
}
.lb-v2-row:hover {
  background: var(--surface) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
}
/* Dynamic indicator (delta) column */
.lb-delta {
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.lb-delta--up   { color: #10b981; }
.lb-delta--down { color: #ef4444; }
.lb-delta--same { color: var(--text3); }

/* Period tabs — capsule style */
.lb-period-btn {
  border-radius: 100px !important;
  padding: 6px 18px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  border: 1.5px solid var(--border2) !important;
  background: transparent !important;
  color: var(--text2) !important;
  cursor: pointer !important;
  transition: background 0.18s, color 0.18s, border-color 0.18s !important;
}
.lb-period-btn.active,
.lb-period-btn:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.lb-period-tabs {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}

/* ── #10: Subscriptions — capsule buttons, SVG checklist, visual polish ───── */
.subs-btn {
  border-radius: 100px !important;
  padding: 13px 20px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
}
.subs-plan-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.subs-feature-check {
  color: #10b981 !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.subs-feature-x {
  color: var(--text3) !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
/* School card in subscriptions */
.subs-school-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 0;
}
.subs-school-icon {
  flex-shrink: 0;
  display: flex;
}
@media (max-width: 640px) {
  .subs-school-card { flex-direction: column; text-align: center; }
  .subs-school-icon { justify-content: center; }
}

/* ── #11: Video section — 24px cards, vfb improvements ───────────────────── */

/* Video search icon SVG alignment */
.video-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.video-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}
#videoSearchInput {
  padding-left: 32px !important;
}

/* ── #12: Consistent roundings across all interactive elements ────────────── */
/* Buttons — capsule */
.h2g-btn { border-radius: 100px !important; }
.subs-btn { border-radius: 100px !important; }
.lb-period-btn { border-radius: 100px !important; }
.cookie-accept-btn, .cookie-settings-btn { border-radius: var(--lp-radius-btn, 34px) !important; }
/* Cards — 24px */

.subs-card { border-radius: 24px !important; }
.subs-school-card { border-radius: 24px !important; }



/* Panels */
.stats-v2-panel { border-radius: 20px !important; }
.stats-v2-block { border-radius: 18px !important; }
/* Search dropdown */
.search-dropdown { border-radius: 18px !important; }
/* Cookie banner card */
.cookie-banner-inner { border-radius: 18px !important; }
/* Map practice chips */
.pchip { border-radius: 16px !important; }
/* Topbar search */
#globalSearch, .topbar-search-input { border-radius: 100px !important; }
/* Filter selects */
.toolbar select, .toolbar input { border-radius: 10px !important; }

/* ── #3: Hero button contrast ─────────────────────────────────────────────── */
.dw-btn-outline {
  background: rgba(255,255,255,0.18) !important;
  border: 1.5px solid rgba(255,255,255,0.55) !important;
  color: #fff !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
}
.dw-btn-outline:hover {
  background: rgba(255,255,255,0.28) !important;
  border-color: rgba(255,255,255,0.8) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18) !important;
}

/* ── #3: Orb animation — ensure hardware-accelerated ─────────────────────── */
.dw-orb {
  will-change: transform !important;
  transform: translateZ(0);
}
.dw-orb--1 {
  animation: orb-float 20s ease-in-out infinite alternate !important;
  animation-delay: 0s !important;
}
.dw-orb--2 {
  animation: orb-float 14s ease-in-out infinite alternate !important;
  animation-delay: -7s !important;
}
@keyframes orb-float {
  0%   { transform: translate(0px, 0px) scale(1) translateZ(0); }
  25%  { transform: translate(15px, -20px) scale(1.05) translateZ(0); }
  50%  { transform: translate(-10px, 10px) scale(0.96) translateZ(0); }
  75%  { transform: translate(8px, -8px) scale(1.03) translateZ(0); }
  100% { transform: translate(18px, -12px) scale(1.02) translateZ(0); }
}

/* ── #13: Pchip icons — SVG alignment ────────────────────────────────────── */
.pchip-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important; /* hide any leftover emoji text */
}
.pchip-icon svg { flex-shrink: 0; }

/* Grade quick-nav SVG icons alignment */
.grade-quick-nav-card .grade-emoji,
[class*="grade-nav"] [class*="emoji"] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  color: var(--accent);
}

/* ── #7: Scroll — ensure sidebar sticky and content natural flow ──────────── */
@media (min-width: 769px) {
  .v2-shell {
    display: flex !important;
    flex-direction: row !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
  }
  .v2-sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    flex-shrink: 0 !important;
  }
  .content {
    flex: 1 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    min-height: 100vh !important;
  }
}

/* ── #14: Adaptive layout — 375px / 768px / 1440px ──────────────────────── */
/* 375px — single column everything */
@media (max-width: 400px) {
  .stats-split-charts { grid-template-columns: 1fr !important; }
  .subs-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }
  .home-two-grid { grid-template-columns: 1fr !important; }
  .dw-rank-widget { display: none !important; }
  .v2-topbar { padding: 0 8px !important; gap: 4px !important; }
  .sec-bar-row { grid-template-columns: 55px 1fr 30px !important; }
  .subs-school-card { flex-direction: column !important; padding: 16px !important; }
}
/* 768px — tablet adjustments */
@media (max-width: 768px) {
  
  .subs-grid { grid-template-columns: 1fr 1fr !important; }
  .lb-v2-row { font-size: 0.8rem !important; }
}
/* 1440px — large screen: wider grid */
@media (min-width: 1280px) {
  .subs-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .stats-split-charts { grid-template-columns: 1fr 1fr !important; }
  .module-grid, #moduleGrid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }
}

/* ── Stats panels: SVG icon alignment ────────────────────────────────────── */

.stats-v2-panel-title svg {
  flex-shrink: 0 !important;
  opacity: 0.7;
}

/* ── Exam grid section: clean ─────────────────────────────────────────────── */
.exam-grid-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── Bar chart in home activity card improvements ─────────────────────────── */
.h2g-bar {
  border-radius: 6px 6px 2px 2px !important;
  transition: height 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}
.h2g-bar--today {
  background: var(--accent-g) !important;
  box-shadow: 0 2px 10px rgba(30,150,228,0.3) !important;
}

/* ── Map search input icon fix ────────────────────────────────────────────── */
.toolbar input#mapSearch {
  padding-left: 12px !important;
  border-radius: 10px !important;
}

/* ── Dark mode refinements ────────────────────────────────────────────────── */
[data-theme="dark"] .stats-exam-chart-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .subs-school-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .lb-v2-row.is-me {
  background: rgba(30,150,228,0.12) !important;
  border-color: rgba(30,150,228,0.3) !important;
}
[data-theme="dark"] .subs-card {
  background: var(--card) !important;
}

/* ── SESSION 5 PATCH: Sidebar brand → clickable home link ── */
a.v2-sidebar-brand {
  cursor: pointer !important;
  text-decoration: none !important;
  transition: opacity 0.18s ease, background 0.18s ease !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
}
a.v2-sidebar-brand:hover {
  opacity: 0.82 !important;
  background: rgba(30, 150, 228, 0.08) !important;
}
a.v2-sidebar-brand:active {
  opacity: 0.65 !important;
  background: rgba(30, 150, 228, 0.14) !important;
}

/* ══════════════════════════════════════════════════════════════
   SESSION 6 — Fix #1: Topbar hard-fixed + zero white glow
   Fix #2: Hero math formula background
   ══════════════════════════════════════════════════════════════ */

/* ── FIX 1A: Topbar — position:sticky, no white glow ────────── */
.topbar,
.v2-topbar,
.topbar.v2-topbar,
.topbar.v2-topbar.glass {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 200 !important;

  /* Clean backdrop — no white */
  background: rgba(14, 17, 23, 0.85) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;

  /* Kill all shadows completely */
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* ── FIX 1B: Kill the white gradient bleed (::after pseudo) ─── */
.topbar::after,
.v2-topbar::after {
  display: none !important;
  content: none !important;
  background: none !important;
  height: 0 !important;
}

/* ── FIX 1C: Light theme — no white bg, no white shadows ─────── */
[data-theme="light"] .topbar,
[data-theme="light"] .v2-topbar,
[data-theme="light"] .topbar.v2-topbar {
  background: rgba(248, 250, 252, 0.88) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(30, 150, 228, 0.12) !important;
}
[data-theme="light"] .topbar::after,
[data-theme="light"] .v2-topbar::after {
  display: none !important;
  content: none !important;
}

/* ── FIX 1D: Glass class must NOT override backdrop on topbar ── */
.topbar.glass,
.v2-topbar.glass {
  background: rgba(14, 17, 23, 0.85) !important;
  box-shadow: none !important;
}
[data-theme="light"] .topbar.glass,
[data-theme="light"] .v2-topbar.glass {
  background: rgba(248, 250, 252, 0.88) !important;
}

/* ── FIX 1E: v2-main must NOT create scroll context ─────────── */
/* Topbar stays sticky relative to v2-main column, that's correct */
/* Ensure v2-main doesn't cut the sticky with overflow:hidden */
.v2-main {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* ── FIX 2A: Math symbol bg — container ─────────────────────── */
.dw-math-bg {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 0 !important;        /* below content (z-index:1) */
  user-select: none !important;
}

/* ── FIX 2B: Each symbol — slow drift, 3-5% opacity ─────────── */
.dw-math-bg .dw-sym {
  position: absolute !important;
  font-family: "Georgia", "Times New Roman", serif !important;
  font-weight: 900 !important;
  color: #fff !important;
  opacity: 0.04 !important;     /* 4% — atmosphere, not distraction */
  animation: dw-sym-drift 20s ease-in-out infinite !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 0 !important;
  will-change: transform !important;
}

/* Each symbol: unique position + size + timing */
.dw-sym--1  { top: 8%;   left: 3%;   font-size: 2.8rem; animation-duration: 22s !important; animation-delay: 0s !important; }
.dw-sym--2  { top: 15%;  left: 18%;  font-size: 2.2rem; animation-duration: 18s !important; animation-delay: -4s !important; }
.dw-sym--3  { top: 55%;  left: 6%;   font-size: 2.4rem; animation-duration: 25s !important; animation-delay: -8s !important; }
.dw-sym--4  { top: 10%;  right: 30%; font-size: 2rem;   animation-duration: 20s !important; animation-delay: -2s !important; }
.dw-sym--5  { bottom: 12%; left: 28%; font-size: 2.6rem; animation-duration: 17s !important; animation-delay: -6s !important; }
.dw-sym--6  { top: 65%;  left: 12%;  font-size: 1.6rem; animation-duration: 23s !important; animation-delay: -11s !important; }
.dw-sym--7  { bottom: 8%; left: 45%; font-size: 2.2rem; animation-duration: 19s !important; animation-delay: -3s !important; }
.dw-sym--8  { top: 5%;   left: 38%;  font-size: 1.8rem; animation-duration: 24s !important; animation-delay: -9s !important; }
.dw-sym--9  { bottom: 20%; left: 55%; font-size: 1.4rem; animation-duration: 16s !important; animation-delay: -14s !important; }
.dw-sym--10 { top: 40%;  left: 2%;   font-size: 1.5rem; animation-duration: 21s !important; animation-delay: -7s !important; }

/* ── FIX 2C: Right half guard — don't overlap rank widget ─────
   Rank widget is on the right ~40%. Symbols on right side
   are capped at right:30% so they never touch the widget.    */
.dw-sym--4 { right: 30% !important; left: auto !important; }

/* ── FIX 2D: Content always on top ──────────────────────────── */
.dash-welcome-inner {
  position: relative !important;
  z-index: 2 !important;        /* strictly above dw-math-bg z:0 */
}
.dw-orb {
  z-index: 1 !important;        /* orbs between symbols and content */
}

/* ── FIX 2E: Slow drift keyframes (15-25s feel) ─────────────── */
@keyframes dw-sym-drift {
  0%   { transform: translateY(0px)   rotate(0deg)   scale(1);    opacity: 0.03; }
  25%  { transform: translateY(-14px) rotate(6deg)   scale(1.04); opacity: 0.05; }
  50%  { transform: translateY(-8px)  rotate(-4deg)  scale(0.97); opacity: 0.04; }
  75%  { transform: translateY(-18px) rotate(8deg)   scale(1.02); opacity: 0.05; }
  100% { transform: translateY(0px)   rotate(0deg)   scale(1);    opacity: 0.03; }
}

/* ── Mobile: reduce symbol count visibility ──────────────────── */
@media (max-width: 480px) {
  .dw-sym--6,
  .dw-sym--7,
  .dw-sym--8,
  .dw-sym--9,
  .dw-sym--10 {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SESSION 7 — Global Refactor:
   1) Header fixed (true position:fixed), search full-width, logo icon-only
   2) Hero formulas 5-10% opacity, contrast map-button
   3) Theme black-screen fix
   4) Single scroll
   5) Section roundings + stats/video/leaders polish
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. HEADER — TRUE position:fixed + glass backdrop, zero white glow
   ───────────────────────────────────────────────────────────────────────── */
.topbar,
.v2-topbar,
.topbar.v2-topbar,
.topbar.v2-topbar.glass {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 300 !important;
  height: 60px !important;
  min-height: 60px !important;

  /* Clean glass — dark mode */
  background: rgba(12, 15, 22, 0.82) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

  /* Zero white glow */
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;

  /* Layout: logo | search-grows | actions */
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

/* Light theme topbar — no white box-shadow */
[data-theme="light"] .topbar,
[data-theme="light"] .v2-topbar,
[data-theme="light"] .topbar.v2-topbar {
  background: rgba(248, 250, 252, 0.86) !important;
  border-bottom: 1px solid rgba(30, 150, 228, 0.13) !important;
  box-shadow: none !important;
}

/* Kill ALL ::after gradient bleeds */
.topbar::after,
.v2-topbar::after,
[data-theme="light"] .topbar::after,
[data-theme="light"] .v2-topbar::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Glass override must not fight topbar */
.topbar.glass,
.v2-topbar.glass {
  background: rgba(12, 15, 22, 0.82) !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
[data-theme="light"] .topbar.glass,
[data-theme="light"] .v2-topbar.glass {
  background: rgba(248, 250, 252, 0.86) !important;
}

/* Sidebar: stay below fixed topbar (sidebar itself is sticky top:0 height:100vh) */
.v2-sidebar {
  top: 0 !important;
  height: 100vh !important;
}

/* v2-main: compensate for fixed header with padding-top */
.v2-main {
  padding-top: 60px !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* v2-content (inner scroll area) — single scroll from body */
.v2-content,
#mainContent > .v2-content {
  overflow-y: visible !important;
  overflow-x: visible !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. LOGO — icon only, NO text, NO hover effects
   ───────────────────────────────────────────────────────────────────────── */
.v2-topbar-logo-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  border-radius: 10px !important;
  transition: none !important;  /* no hover animation */
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  cursor: pointer !important;
  width: 36px !important;
  height: 36px !important;
}
/* Explicitly NO hover/active/focus effects */
.v2-topbar-logo-icon:hover,
.v2-topbar-logo-icon:active,
.v2-topbar-logo-icon:focus {
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Hide old mobile logo variants */
.v2-topbar-logo-mobile,
.dash-logo-text {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. SEARCH — full width between logo and actions
   ───────────────────────────────────────────────────────────────────────── */
.v2-search,
.search-wrap.v2-search {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;    /* remove old 380px cap */
  width: auto !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. HERO FORMULAS — 5-10% opacity, slow float
   ───────────────────────────────────────────────────────────────────────── */
.dw-math-bg .dw-sym {
  opacity: 0.07 !important;      /* 7% — visible but atmospheric */
  animation: dw-sym-drift 20s ease-in-out infinite !important;
  font-size: 2.4rem !important;
}
/* Stagger sizes so it looks like lp-math-float */
.dw-sym--1  { font-size: 3rem !important;   opacity: 0.08 !important; }
.dw-sym--2  { font-size: 2rem !important;   opacity: 0.06 !important; }
.dw-sym--3  { font-size: 2.6rem !important; opacity: 0.07 !important; }
.dw-sym--4  { font-size: 1.8rem !important; opacity: 0.05 !important; }
.dw-sym--5  { font-size: 2.8rem !important; opacity: 0.08 !important; }
.dw-sym--6  { font-size: 1.6rem !important; opacity: 0.06 !important; }
.dw-sym--7  { font-size: 2.2rem !important; opacity: 0.07 !important; }
.dw-sym--8  { font-size: 1.9rem !important; opacity: 0.05 !important; }
.dw-sym--9  { font-size: 1.5rem !important; opacity: 0.06 !important; }
.dw-sym--10 { font-size: 1.7rem !important; opacity: 0.07 !important; }

/* Content strictly above formulas */
.dash-welcome-inner { z-index: 3 !important; position: relative !important; }
.dw-orb            { z-index: 1 !important; }
.dw-math-bg        { z-index: 0 !important; }

/* ─────────────────────────────────────────────────────────────────────────
   5. HERO BUTTON — «Карта курса» contrast (white bg, blue text)
   ───────────────────────────────────────────────────────────────────────── */
.dw-btn-outline {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 2px solid rgba(255, 255, 255, 0.65) !important;
  color: #fff !important;
  font-weight: 700 !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}
.dw-btn-outline:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  border-color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. THEME FIX — light mode: instant white background, no black flash
   ───────────────────────────────────────────────────────────────────────── */
/* Default (no data-theme = dark) */
:root, [data-theme="dark"] {
  --bg-root: #0e1017;
}
/* Light: body background must be white immediately */
[data-theme="light"] {
  --bg-root: #f7f9fc;
}
[data-theme="light"] body,
[data-theme="light"] html {
  background-color: #f7f9fc !important;
}
[data-theme="light"] .v2-shell {
  background-color: #f7f9fc !important;
}
/* During theme transition — suppress transition on background only */
[data-theme-transitioning] * {
  transition: none !important;
}
/* But allow color/border transitions to resume normally after */

/* ─────────────────────────────────────────────────────────────────────────
   7. SCROLL FIX — single browser scrollbar
   ───────────────────────────────────────────────────────────────────────── */
html, body {
  overflow-y: auto !important;
  height: auto !important;
}
.v2-shell {
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
}
.v2-main {
  height: auto !important;
  min-height: calc(100vh - 60px) !important;
  overflow: visible !important;
}
/* All page-sections: natural height */
.page-section {
  overflow: visible !important;
  height: auto !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   8. MODULE CARDS — 36px radius everywhere (upgrade from 24px)
   ───────────────────────────────────────────────────────────────────────── */
.module-card,
.video-card,
.h2g-card,
.subs-card,
.stats-exam-chart-card,
.panel-card,
.stats-v2-panel {
  border-radius: 24px !important;  /* 24px per spec; 36px for hero cards */
}
.dash-welcome,
.home-two-grid .h2g-card {
  border-radius: 24px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   9. STATISTICS — OGE/EGE split: stronger separation, axis labels
   ───────────────────────────────────────────────────────────────────────── */
.stats-split-charts {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin-top: 16px !important;
}
@media (max-width: 768px) {
  
}
.stats-exam-chart-card {
  border-radius: 24px !important;
  padding: 22px !important;
  border: 1px solid var(--border) !important;
}
/* OGE bars: emerald */
.sec-bar-fill--oge {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%) !important;
  border-radius: 0 4px 4px 0 !important;
}
/* EGE bars: amber */
.sec-bar-fill--ege {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%) !important;
  border-radius: 0 4px 4px 0 !important;
}
/* Tooltip on hover */

.sec-bar-fill::after {
  content: attr(data-pct)"%";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  white-space: nowrap;
}
.sec-bar-fill {
  position: relative !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   10. VIDEO — covers, track badges, KaTeX hints
   ───────────────────────────────────────────────────────────────────────── */
.video-card {
  border-radius: 24px !important;
  overflow: hidden !important;
}
.video-thumb {
  border-radius: 16px 16px 0 0 !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: linear-gradient(135deg, #1e3a5f 0%, #0ea5e9 100%);
}
/* Fallback cover when no thumbnail */
.vfb {
  border-radius: 16px 16px 0 0 !important;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e3a5f 0%, #0ea5e9 100%);
  position: relative;
  overflow: hidden;
}
.vfb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30,58,95,0.9), rgba(14,165,233,0.8));
}
.video-track-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 100px !important;
  background: rgba(30,150,228,0.15) !important;
  border: 1px solid rgba(30,150,228,0.3) !important;
  color: var(--accent) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   11. LEADERBOARD + SUBSCRIPTIONS — capsule style, top-3 highlight
   ───────────────────────────────────────────────────────────────────────── */
.lb-v2-row {
  border-radius: 14px !important;
  margin-bottom: 6px !important;
  transition: background 0.15s !important;
}
.lb-v2-row:hover {
  background: rgba(30,150,228,0.06) !important;
}
.lb-v2-row.is-me {
  background: rgba(30,150,228,0.10) !important;
  border: 1.5px solid rgba(30,150,228,0.28) !important;
}
/* Top-3 gold/silver/bronze */
.lb-v2-row[data-rank="1"] .lb-rank-num { color: #f59e0b !important; font-weight: 900 !important; }
.lb-v2-row[data-rank="2"] .lb-rank-num { color: #94a3b8 !important; font-weight: 900 !important; }
.lb-v2-row[data-rank="3"] .lb-rank-num { color: #cd7c34 !important; font-weight: 900 !important; }

.lb-period-btn {
  border-radius: 100px !important;
  font-size: 0.78rem !important;
  padding: 6px 16px !important;
}
.lb-period-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(30,150,228,0.3) !important;
}
/* Delta indicator */
.lb-delta--up   { color: #10b981 !important; font-size: 0.72rem !important; }
.lb-delta--down { color: #ef4444 !important; font-size: 0.72rem !important; }
.lb-delta--same { color: var(--text3) !important; font-size: 0.72rem !important; }

/* Subscriptions */

.subs-btn {
  border-radius: 100px !important;
  min-width: 110px !important;
}
.subs-card--popular {
  border: 2px solid var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(30,150,228,0.10) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   12. ADAPTIVE — 375px / 768px / 1440px
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .dash-welcome-title { font-size: 1.4rem !important; }
  .dw-rank-widget { display: none !important; }
  .home-two-grid { grid-template-columns: 1fr !important; }
  .v2-topbar-logo-icon { width: 30px !important; height: 30px !important; }
  .dw-sym--6, .dw-sym--7, .dw-sym--8, .dw-sym--9, .dw-sym--10 { display: none !important; }
}
@media (max-width: 768px) {
  
  .home-two-grid { grid-template-columns: 1fr !important; }
  .dw-btn-outline { display: none !important; }  /* map btn hidden on small */
}
@media (min-width: 1280px) {
  .v2-search, .search-wrap.v2-search { max-width: 560px !important; }
  .stats-split-charts { gap: 28px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   13. SIDEBAR brand link — remove hover glow (per spec §2)
   ───────────────────────────────────────────────────────────────────────── */
a.v2-sidebar-brand:hover,
a.v2-sidebar-brand:active {
  opacity: 1 !important;
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SESSION 8 — Brand Header, Sticky Nav, Background Customization
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. SIDEBAR BRAND HEADER — Math bold + Practicum light, 34px icon
   ───────────────────────────────────────────────────────────────────────── */
.v2-sidebar-brand-wrap {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
  margin-bottom: 8px;
}

a.v2-sidebar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 20px 16px 18px !important;
  text-decoration: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  background: none !important;
  cursor: pointer !important;
  /* Hover: opacity shift only — no background highlight */
  transition: opacity 0.2s ease !important;
}
a.v2-sidebar-brand:hover {
  opacity: 0.78 !important;
  background: none !important;
}
a.v2-sidebar-brand:active {
  opacity: 0.6 !important;
  background: none !important;
}

.v2-sidebar-logo {
  width: 34px !important;
  height: 34px !important;
  flex-shrink: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(30,150,228,0.25) !important;
}

/* Brand title: Math bold + Practicum thin */
.v2-sidebar-brand-title {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}
.v2-brand-math {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--text1, #f1f5f9) !important;
  letter-spacing: -0.02em !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  line-height: 1.2 !important;
}
.v2-brand-practicum {
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  color: var(--text3, #64748b) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  line-height: 1.2 !important;
}

/* Visual gap between brand and search (24px total = 18px pad bottom + 8px wrap margin) */
.v2-sidebar-brand-wrap {
  padding-bottom: 0 !important;
}

/* Light theme brand text */
[data-theme="light"] .v2-brand-math {
  color: #1e293b !important;
}
[data-theme="light"] .v2-brand-practicum {
  color: #64748b !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. SIDEBAR NAV — sticky with inner scroll, no jumps
   ───────────────────────────────────────────────────────────────────────── */
.v2-sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;   /* outer: no overflow */
}

/* Nav gets all remaining space, scrolls internally if needed */
.v2-sidebar-nav {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 180px) !important; /* brand ≈100px + bottom ≈80px */
  padding: 8px 10px !important;
  gap: 2px !important;
  /* Thin custom scrollbar — only shown when needed */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.12) transparent !important;
}
.v2-sidebar-nav::-webkit-scrollbar {
  width: 3px !important;
}
.v2-sidebar-nav::-webkit-scrollbar-track {
  background: transparent !important;
}
.v2-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14) !important;
  border-radius: 3px !important;
}
[data-theme="light"] .v2-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12) !important;
}

/* Bottom actions: pinned at bottom */
.v2-sidebar-bottom {
  flex-shrink: 0 !important;
  border-top: 1px solid var(--border, rgba(255,255,255,0.07)) !important;
  padding: 8px 10px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. SETTINGS: BACKGROUND CUSTOMIZATION — capsule design
   ───────────────────────────────────────────────────────────────────────── */

/* Preset grid: 3 cols with capsule cards */
.bg-preset-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}
@media (max-width: 480px) {
  .bg-preset-grid { grid-template-columns: 1fr 1fr !important; }
}

.bg-preset-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 10px 6px !important;
  border-radius: 18px !important;
  border: 2px solid var(--border, rgba(255,255,255,0.1)) !important;
  background: var(--card, rgba(255,255,255,0.04)) !important;
  cursor: pointer !important;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s !important;
  font-size: 0.72rem !important;
  color: var(--text2) !important;
  font-weight: 500 !important;
}
.bg-preset-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(30,150,228,0.4) !important;
  box-shadow: 0 4px 14px rgba(30,150,228,0.15) !important;
}
.bg-preset-card.active {
  border-color: var(--accent, #1e96e4) !important;
  box-shadow: 0 0 0 3px rgba(30,150,228,0.18) !important;
  color: var(--accent, #1e96e4) !important;
}

/* Thumbnail previews */
.bg-preset-thumb {
  width: 100% !important;
  height: 52px !important;
  border-radius: 12px !important;
  display: block !important;
}
.bg-preset--default {
  background: #0e1017 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.bg-preset--dark-grad {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
}
.bg-preset--light {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}
.bg-preset--ocean {
  background: linear-gradient(135deg, #0c4a6e 0%, #0ea5e9 60%, #38bdf8 100%) !important;
}
.bg-preset--forest {
  background: linear-gradient(135deg, #14532d 0%, #16a34a 60%, #4ade80 100%) !important;
}
.bg-preset--math {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(30,150,228,0.06) 18px, rgba(30,150,228,0.06) 20px),
    linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}
[data-theme="light"] .bg-preset--default {
  background: #f7f9fc !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

/* Color picker row */
.bg-custom-row {
  margin-bottom: 8px !important;
}
.bg-picker-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Swatch: colored square with hidden native input */
.bg-color-swatch {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  border: 2px solid var(--border) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  transition: border-color 0.18s !important;
}
.bg-color-swatch:hover {
  border-color: var(--accent) !important;
}
.bg-color-swatch input[type="color"] {
  width: 60px !important;
  height: 60px !important;
  border: none !important;
  padding: 0 !important;
  margin: -8px !important;
  cursor: pointer !important;
  background: none !important;
}

/* HEX input capsule */
.bg-hex-wrap {
  display: flex !important;
  align-items: center !important;
  background: var(--card, rgba(255,255,255,0.06)) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 100px !important;
  padding: 0 14px !important;
  height: 40px !important;
  gap: 2px !important;
  transition: border-color 0.18s !important;
}
.bg-hex-wrap:focus-within {
  border-color: var(--accent) !important;
}
.bg-hex-hash {
  color: var(--text3) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  font-family: monospace !important;
  flex-shrink: 0 !important;
}
.bg-hex-input {
  background: none !important;
  border: none !important;
  outline: none !important;
  color: var(--text1) !important;
  font-size: 0.9rem !important;
  font-family: monospace !important;
  font-weight: 500 !important;
  width: 72px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Apply button — capsule accent */
.bg-apply-btn {
  background: var(--accent, #1e96e4) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 0 20px !important;
  height: 40px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.18s, transform 0.12s !important;
  flex-shrink: 0 !important;
}
.bg-apply-btn:hover {
  background: #1580cc !important;
  transform: translateY(-1px) !important;
}
.bg-apply-btn:active {
  transform: translateY(0) !important;
}

/* Reset button — outline capsule */
.bg-reset-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: none !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 100px !important;
  padding: 0 16px !important;
  height: 36px !important;
  font-size: 0.8rem !important;
  color: var(--text2) !important;
  cursor: pointer !important;
  transition: border-color 0.18s, color 0.18s !important;
}
.bg-reset-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. ADAPTIVE — mobile sidebar brand compact
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .v2-brand-math    { font-size: 0.95rem !important; }
  .v2-brand-practicum { display: none !important; }  /* icon + "Math" only on small screens */
  .v2-sidebar-logo  { width: 30px !important; height: 30px !important; }
  a.v2-sidebar-brand { gap: 10px !important; padding: 16px 12px 14px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   5. CUSTOM BG applied to .v2-shell
   ───────────────────────────────────────────────────────────────────────── */
.v2-shell[data-bg] {
  transition: background 0.4s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 9 — FINAL OVERRIDE BLOCK
   Fixes: brand header over nav, sticky sidebar, 36px capsule preset cards
   This block is LAST in the file — wins over all previous rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   ЗАДАНИЕ 1: Брендовый хедер — над навигацией, премиальный вид
   Structure: .v2-sidebar (flex column) → .v2-sidebar-brand-wrap → a.v2-sidebar-brand
                                        → nav.v2-sidebar-nav
   ──────────────────────────────────────────────────────────────────────────── */

/* Sidebar: flex column, sticky, no outer scroll */
.v2-sidebar {
  display: flex !important;
  flex-direction: column !important;
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow: hidden !important;     /* outer: hidden — nav scrolls inside */
  overflow-x: hidden !important;
}

/* Brand wrap: pinned at top, never shrinks, separator below */
.v2-sidebar-brand-wrap {
  flex: 0 0 auto !important;       /* never shrinks, never grows */
  flex-shrink: 0 !important;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Brand link: horizontal flex, logo + title side by side */
a.v2-sidebar-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 16px 16px !important;
  text-decoration: none !important;
  background: transparent !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  /* Gap from nav below = padding-bottom(16) + border(1) + nav-padding-top(8) = 25px */
  transition: opacity 0.18s ease !important;
}
a.v2-sidebar-brand:hover {
  opacity: 0.72 !important;
  background: transparent !important;
  transform: none !important;
}
a.v2-sidebar-brand:active {
  opacity: 0.55 !important;
  background: transparent !important;
}

/* Logo icon: 34px blue square with Σ */
.v2-sidebar-logo {
  width: 34px !important;
  height: 34px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  overflow: visible !important;
  box-shadow: 0 3px 10px rgba(30,150,228,0.3) !important;
}

/* Brand title: vertical stack Math / Practicum */
.v2-sidebar-brand-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
  line-height: 1 !important;
}

/* "Math" — bold, large */
.v2-brand-math {
  display: block !important;
  font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--text1, #f1f5f9) !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/* "Practicum" — thin, uppercase, subdued */
.v2-brand-practicum {
  display: block !important;
  font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text3, #64748b) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Light theme overrides */


[data-theme="light"] .v2-sidebar-brand-wrap {
  border-bottom-color: rgba(0,0,0,0.1) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   ЗАДАНИЕ 2: Sticky nav — меню зафиксировано, внутренний скролл
   ──────────────────────────────────────────────────────────────────────────── */

/* Nav: takes all remaining height, scrolls if needed */
nav.v2-sidebar-nav {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /*
    Brand-wrap height ≈ 70px (padding 18+16 + 34px logo + border)
    Bottom bar height ≈ 72px
    Total offset: ~142px → use 150px for safety
  */
  max-height: calc(100vh - 150px) !important;
  padding: 8px 10px !important;
  /* Thin elegant scrollbar — only visible when content overflows */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.1) transparent !important;
}
nav.v2-sidebar-nav::-webkit-scrollbar {
  width: 3px !important;
}
nav.v2-sidebar-nav::-webkit-scrollbar-track {
  background: transparent !important;
}
nav.v2-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.13) !important;
  border-radius: 3px !important;
}
[data-theme="light"] nav.v2-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1) !important;
}

/* Bottom block: pinned to bottom, never shrinks */
.v2-sidebar-bottom {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  border-top: 1px solid var(--border, rgba(255,255,255,0.07)) !important;
  padding: 8px 10px 14px !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   ЗАДАНИЕ 3: Кастомизация фона — капсульный стиль (36px radius)
   ──────────────────────────────────────────────────────────────────────────── */

/* Preset grid */
.bg-preset-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 22px !important;
}
@media (max-width: 600px) {
  .bg-preset-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Preset card — CAPSULE 36px as required */
.bg-preset-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 8px 12px !important;
  border-radius: 36px !important;   /* ← ТЗ: 36px capsule */
  border: 2px solid var(--border, rgba(255,255,255,0.1)) !important;
  background: var(--card, rgba(255,255,255,0.04)) !important;
  cursor: pointer !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: var(--text2, #94a3b8) !important;
  user-select: none !important;
  outline: none !important;
}
.bg-preset-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(30,150,228,0.45) !important;
  box-shadow: 0 6px 18px rgba(30,150,228,0.14) !important;
}
.bg-preset-card:active {
  transform: translateY(0) !important;
}
.bg-preset-card.active {
  border-color: var(--accent, #1e96e4) !important;
  box-shadow: 0 0 0 3px rgba(30,150,228,0.2), 0 4px 12px rgba(30,150,228,0.18) !important;
  color: var(--accent, #1e96e4) !important;
  font-weight: 700 !important;
}

/* Thumbnail inside card */
.bg-preset-thumb {
  width: 100% !important;
  height: 54px !important;
  border-radius: 24px !important;  /* inner radius slightly less than card */
  display: block !important;
  transition: opacity 0.15s !important;
}
.bg-preset-card:hover .bg-preset-thumb { opacity: 0.9 !important; }

.bg-preset--default   { background: #0e1017 !important; border: 1px solid rgba(255,255,255,0.1) !important; }

.bg-preset--light     { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important; border: 1px solid rgba(0,0,0,0.07) !important; }


.bg-preset--math      { background: repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(30,150,228,0.07) 18px, rgba(30,150,228,0.07) 20px), linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; }


/* Label */
.bg-preset-label {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

/* Color picker row */
.bg-custom-row { margin-bottom: 10px !important; }


/* Color swatch button (44px, shows native color picker) */
.bg-color-swatch {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  border: 2px solid var(--border) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  position: relative !important;
}
.bg-color-swatch:hover {
  border-color: var(--accent, #1e96e4) !important;
  box-shadow: 0 0 0 3px rgba(30,150,228,0.2) !important;
}
.bg-color-swatch input[type="color"] {
  position: absolute !important;
  inset: -6px !important;
  width: calc(100% + 12px) !important;
  height: calc(100% + 12px) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  background: none !important;
  opacity: 1 !important;
}

/* HEX capsule input wrap */
.bg-hex-wrap {
  display: flex !important;
  align-items: center !important;
  background: var(--card, rgba(255,255,255,0.06)) !important;
  border: 1.5px solid var(--border, rgba(255,255,255,0.1)) !important;
  border-radius: 100px !important;  /* full capsule */
  padding: 0 14px !important;
  height: 44px !important;
  gap: 3px !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  flex: 1 !important;
  min-width: 120px !important;
  max-width: 180px !important;
}
.bg-hex-wrap:focus-within {
  border-color: var(--accent, #1e96e4) !important;
  box-shadow: 0 0 0 3px rgba(30,150,228,0.15) !important;
}
.bg-hex-hash {
  color: var(--text3, #64748b) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  font-family: "Courier New", monospace !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}
.bg-hex-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--text1, #f1f5f9) !important;
  font-size: 0.88rem !important;
  font-family: "Courier New", monospace !important;
  font-weight: 600 !important;
  width: 72px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Apply button — full capsule */
.bg-apply-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--accent, #1e96e4) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 100px !important;  /* full capsule */
  padding: 0 22px !important;
  height: 44px !important;
  font-size: 0.83rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.18s, transform 0.12s, box-shadow 0.18s !important;
  box-shadow: 0 2px 10px rgba(30,150,228,0.3) !important;
}
.bg-apply-btn:hover {
  background: #1580cc !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(30,150,228,0.4) !important;
}


/* Reset button — outline capsule */
.bg-reset-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: transparent !important;
  border: 1.5px solid var(--border, rgba(255,255,255,0.12)) !important;
  border-radius: 100px !important;  /* full capsule */
  padding: 0 18px !important;
  height: 38px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--text2, #94a3b8) !important;
  cursor: pointer !important;
  margin-top: 6px !important;
  transition: border-color 0.18s, color 0.18s, background 0.18s !important;
}
.bg-reset-btn:hover {
  border-color: rgba(239,68,68,0.5) !important;
  color: #ef4444 !important;
  background: rgba(239,68,68,0.06) !important;
}

/* The .v2-shell target for background application */
.v2-shell[data-bg] {
  transition: background 0.35s ease !important;
}

/* Mobile: compact brand */
@media (max-width: 768px) {
  .v2-brand-practicum { display: none !important; }
  a.v2-sidebar-brand  { padding: 14px 12px 12px !important; gap: 10px !important; }
  .v2-sidebar-logo    { width: 30px !important; height: 30px !important; }
  .v2-brand-math      { font-size: 0.95rem !important; }
}

/* ═══ END SESSION 9 FINAL OVERRIDE ════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 12 — DEFINITIVE DASHBOARD LAYOUT
   This block is LAST in style.css → wins over ALL prior !important rules
   of same specificity (last-declaration rule in CSS cascade).
   Rules use !important to beat earlier !important blocks.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SIDEBAR: fixed full-height column, 280px ── */
.v2-sidebar {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 280px !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;   /* outer: no scroll; nav scrolls inside */
  z-index: 50 !important;
}

/* ── MAIN CONTENT: pushed right by sidebar width ── */
.v2-main {
  margin-left: 280px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding-top: 0 !important;   /* kill old padding-top:60px from S5-era rule */
  height: auto !important;
}

/* ── TOPBAR: sticky inside main, 70px, z-index below sidebar ── */
.v2-topbar {
  position: sticky !important;
  top: 0 !important;
  height: 70px !important;
  min-height: 70px !important;
  z-index: 40 !important;
  /* width auto — inherits from main (already offset by 280px) */
}

/* ── SIDEBAR INNER: brand never shrinks, nav scrolls ── */
.v2-sidebar .v2-sidebar-brand-wrap {
  flex: 0 0 auto !important;
  overflow: visible !important;
}
.v2-sidebar nav.v2-sidebar-nav {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.v2-sidebar .v2-sidebar-bottom {
  flex: 0 0 auto !important;
}

/* ── BRAND LINK: row layout, full text visible ── */
.v2-sidebar a.v2-sidebar-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 24px 24px 20px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  background: transparent !important;
  border-bottom: none !important;
  border-radius: 0 !important;
}
.v2-sidebar a.v2-sidebar-brand:hover {
  opacity: 0.75 !important;
  background: transparent !important;
  transform: none !important;
}

/* ── BRAND LOGO: 32x32px ── */
.v2-sidebar .v2-sidebar-logo {
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

/* ── BRAND TITLE: visible, correct sizes ── */
.v2-sidebar .v2-sidebar-brand-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  overflow: visible !important;
}
.v2-sidebar .v2-brand-math {
  display: block !important;
  font-size: 1.18rem !important;   /* ~20px */
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--text1, #f1f5f9) !important;
  white-space: nowrap !important;
  overflow: visible !important;
  line-height: 1.2 !important;
}
.v2-sidebar .v2-brand-practicum {
  display: block !important;
  font-size: 0.6rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--text3, #64748b) !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Light theme brand readability */
[data-theme="light"] .v2-sidebar .v2-brand-math {
  color: #1e293b !important;
}
[data-theme="light"] .v2-sidebar .v2-brand-practicum {
  color: #64748b !important;
}

/* ── NAV ITEMS: aligned with brand at left=24px ──
   nav padding-left:14px + item padding-left:10px = 24px = brand padding-left ✓ */
.v2-sidebar nav.v2-sidebar-nav {
  padding: 12px 14px !important;
}
.v2-sidebar nav.v2-sidebar-nav a.v2-nav-item {
  padding: 10px 10px !important;
}
.v2-sidebar .v2-sidebar-bottom {
  padding: 8px 14px 16px !important;
}
.v2-sidebar .v2-sidebar-bottom a.v2-nav-item {
  padding: 10px 10px !important;
}

/* ── PAGE SECTIONS: 28px top padding for Hero gap ── */
.v2-main .page-section {
  padding: 28px 28px 44px !important;
}

/* ── SHELL: flex-row wrapper ── */
.v2-shell {
  display: flex !important;
  flex-direction: row !important;
  min-height: 100vh !important;
  width: 100% !important;
  position: relative !important;
}

/* ── Z-INDEX STACK: sidebar(50) > topbar(40) > content(1) > bg(-1) ── */
#mpAnimBgCanvas {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* ── MOBILE (≤900px): sidebar as overlay, main full-width ── */
@media (max-width: 900px) {
  .v2-sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
    z-index: 200 !important;
  }
  .v2-sidebar.v2-sidebar--open {
    transform: translateX(0) !important;
  }
  .v2-main {
    margin-left: 0 !important;
  }
  .v2-sidebar .v2-brand-practicum {
    display: none !important;
  }
  .v2-sidebar a.v2-sidebar-brand {
    padding: 18px 20px 16px !important;
  }
}
/* ═══ END SESSION 12 DEFINITIVE LAYOUT ════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 13 — SIDEBAR INTEGRATION: Search · Stats · Profile
   Topbar removed; all elements moved into sidebar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SIDEBAR SEARCH ──────────────────────────────────────────────────────── */
.v2-sidebar-search {
  flex: 0 0 auto;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
}
.v2-sidebar-search .search-wrap.v2-search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--input-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 10px;
  padding: 0 10px;
  transition: border-color 0.18s, box-shadow 0.18s;
  width: 100%;
}
.v2-sidebar-search .search-wrap.v2-search:focus-within {
  border-color: rgba(30,150,228,0.5);
  box-shadow: 0 0 0 3px rgba(30,150,228,0.12);
}
.v2-sidebar-search .search-icon {
  color: var(--text-muted, rgba(148,163,184,0.7));
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 6px;
}
.v2-sidebar-search #globalSearch {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text, #e2e8f0);
  font-size: 13px;
  padding: 9px 0;
  width: 100%;
}
.v2-sidebar-search #globalSearch::placeholder {
  color: var(--text-muted, rgba(148,163,184,0.55));
  font-size: 12.5px;
}
/* Search dropdown — opens downward inside sidebar */
.v2-sidebar-search .search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 120;
  border-radius: 10px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--card-bg, rgba(18,18,30,0.98));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

/* ── STATS ROW: Streak + XP + Theme ─────────────────────────────────────── */
.v2-sidebar-stats {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 10px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.07));
}
/* Stat badges — compact pill style */
.v2-sidebar-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
  flex-shrink: 0;
}
.v2-sidebar-stat-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
/* Streak — warm gradient */
.v2-sidebar-stat-badge.streak-badge {
  background: linear-gradient(135deg, rgba(255,107,53,0.2) 0%, rgba(245,158,11,0.2) 100%);
  border: 1px solid rgba(255,107,53,0.3);
  color: #fb923c;
}
.v2-sidebar-stat-badge.streak-badge:hover {
  background: linear-gradient(135deg, rgba(255,107,53,0.3) 0%, rgba(245,158,11,0.3) 100%);
}
/* XP — gold gradient */
.v2-sidebar-stat-badge.xp-badge {
  background: linear-gradient(135deg, rgba(253,224,71,0.18) 0%, rgba(245,158,11,0.2) 100%);
  border: 1px solid rgba(253,224,71,0.3);
  color: #fbbf24;
}
.v2-sidebar-stat-badge.xp-badge:hover {
  background: linear-gradient(135deg, rgba(253,224,71,0.28) 0%, rgba(245,158,11,0.3) 100%);
}
.v2-badge-unit {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.8;
  margin-left: 1px;
}
/* Theme toggle button in sidebar */
.v2-sidebar-theme-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  background: var(--input-bg, rgba(255,255,255,0.06));
  color: var(--text, #e2e8f0);
  cursor: pointer;
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
  flex-shrink: 0;
}
.v2-sidebar-theme-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}
/* Hide sun/moon based on theme */
:root[data-theme="dark"] .v2-sidebar-theme-btn .v2-theme-sun { display: block; }
:root[data-theme="dark"] .v2-sidebar-theme-btn .v2-theme-moon { display: none; }
:root[data-theme="light"] .v2-sidebar-theme-btn .v2-theme-sun { display: none; }
:root[data-theme="light"] .v2-sidebar-theme-btn .v2-theme-moon { display: block; }

/* ── USER PROFILE CHIP — sidebar bottom ─────────────────────────────────── */
.v2-sidebar-profile {
  position: relative;
  width: 100%;
}
.v2-sidebar-user-chip {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
  background: var(--input-bg, rgba(255,255,255,0.04)) !important;
  cursor: pointer !important;
  transition: background 0.18s, border-color 0.18s !important;
  text-align: left !important;
  color: var(--text, #e2e8f0) !important;
}
.v2-sidebar-user-chip:hover {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
.v2-sidebar-user-chip .v2-user-avatar {
  flex-shrink: 0;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1e96e4, #35B1FA) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  overflow: hidden !important;
}
.v2-sidebar-user-chip .v2-user-info {
  flex: 1 1 auto;
  min-width: 0;
}
.v2-sidebar-user-chip .v2-user-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text, #e2e8f0);
}
.v2-sidebar-user-chip .v2-user-grade {
  font-size: 11px;
  color: var(--text-muted, rgba(148,163,184,0.7));
  white-space: nowrap;
}
.v2-sidebar-user-chip .v2-user-chevron {
  flex-shrink: 0;
  color: var(--text-muted, rgba(148,163,184,0.5));
  transition: transform 0.2s;
}
.v2-sidebar-user-chip[aria-expanded="true"] .v2-user-chevron {
  transform: rotate(180deg);
}

/* Sidebar user dropdown — opens UPWARD */
.v2-sidebar-user-dropdown {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  z-index: 120 !important;
  border-radius: 12px !important;
  background: var(--card-bg, rgba(18,18,30,0.98)) !important;
  border: 1px solid var(--border, rgba(255,255,255,0.12)) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.2) !important;
  padding: 6px 0 !important;
  min-width: 0 !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
.v2-sidebar-user-dropdown .v2-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text, #e2e8f0);
  text-decoration: none;
  transition: background 0.14s;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  border-radius: 0;
}
.v2-sidebar-user-dropdown .v2-dropdown-item:hover {
  background: rgba(255,255,255,0.07);
}
.v2-sidebar-user-dropdown .v2-dropdown-item.v2-dropdown-logout {
  color: #f87171;
}
.v2-sidebar-user-dropdown .v2-dropdown-divider {
  height: 1px;
  background: var(--border, rgba(255,255,255,0.07));
  margin: 4px 0;
}

/* ── LIGHT THEME OVERRIDES — sidebar sections ───────────────────────────── */
:root[data-theme="light"] .v2-sidebar-search .search-wrap.v2-search {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
}
:root[data-theme="light"] .v2-sidebar-search #globalSearch {
  color: #1e293b;
}
:root[data-theme="light"] .v2-sidebar-search #globalSearch::placeholder {
  color: rgba(100,116,139,0.6);
}
:root[data-theme="light"] .v2-sidebar-stat-badge.streak-badge {
  background: linear-gradient(135deg, rgba(255,107,53,0.12) 0%, rgba(245,158,11,0.12) 100%);
  border-color: rgba(255,107,53,0.25);
}
:root[data-theme="light"] .v2-sidebar-stat-badge.xp-badge {
  background: linear-gradient(135deg, rgba(234,179,8,0.12) 0%, rgba(245,158,11,0.12) 100%);
  border-color: rgba(234,179,8,0.25);
  color: #b45309;
}
:root[data-theme="light"] .v2-sidebar-theme-btn {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
  color: #334155;
}
:root[data-theme="light"] .v2-sidebar-user-chip {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.09) !important;
}
:root[data-theme="light"] .v2-sidebar-user-chip:hover {
  background: rgba(0,0,0,0.07) !important;
}
:root[data-theme="light"] .v2-sidebar-user-chip .v2-user-name { color: #1e293b; }
:root[data-theme="light"] .v2-sidebar-user-chip .v2-user-grade { color: #64748b; }
:root[data-theme="light"] .v2-sidebar-user-dropdown {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.1) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06) !important;
}
:root[data-theme="light"] .v2-sidebar-user-dropdown .v2-dropdown-item {
  color: #1e293b;
}
:root[data-theme="light"] .v2-sidebar-user-dropdown .v2-dropdown-item:hover {
  background: rgba(0,0,0,0.05);
}

/* ── ADMIN PANEL LINK — in settings tab ─────────────────────────────────── */
.settings-section--admin .settings-admin-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(30,150,228,0.15), rgba(53,177,250,0.15));
  border: 1px solid rgba(30,150,228,0.3);
  color: #38bdf8;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
  white-space: nowrap;
}
.settings-section--admin .settings-admin-link:hover {
  background: linear-gradient(135deg, rgba(30,150,228,0.25), rgba(53,177,250,0.25));
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(30,150,228,0.25);
}
:root[data-theme="light"] .settings-section--admin .settings-admin-link {
  color: #0369a1;
  background: linear-gradient(135deg, rgba(3,105,161,0.1), rgba(14,165,233,0.1));
  border-color: rgba(3,105,161,0.25);
}

/* ── TOPBAR REMOVED — ensure main has no top offset ─────────────────────── */
.v2-main { padding-top: 0 !important; margin-top: 0 !important; }
.v2-topbar { display: none !important; }

/* ═══ END SESSION 13 SIDEBAR INTEGRATION ═══════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 14 — Sidebar polish: collapsible, profile full-width, search fix,
   hero padding, brand contrast, no divider between search and nav.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SEARCH: remove visible border, invisible until focus ───────────────── */
.v2-sidebar-search .search-wrap.v2-search {
  border-color: transparent !important;
  background: rgba(255,255,255,0.05) !important;
}
.v2-sidebar-search .search-wrap.v2-search:focus-within {
  border-color: rgba(30,150,228,0.45) !important;
  box-shadow: 0 0 0 3px rgba(30,150,228,0.1) !important;
}
:root[data-theme="light"] .v2-sidebar-search .search-wrap.v2-search {
  background: rgba(0,0,0,0.04) !important;
  border-color: transparent !important;
}
:root[data-theme="light"] .v2-sidebar-search .search-wrap.v2-search:focus-within {
  border-color: rgba(14,165,233,0.5) !important;
}

/* ── NO divider between search and nav — remove border-bottom, use padding ── */
.v2-sidebar-search {
  border-bottom: none !important;
  padding-bottom: 6px !important;
}

/* ── PROFILE CHIP: full width, prominent ─────────────────────────────────── */
.v2-sidebar-profile {
  width: 100%;
}
.v2-sidebar-user-chip {
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  transition: background 0.18s, border-color 0.18s, transform 0.15s !important;
}
.v2-sidebar-user-chip:hover {
  background: rgba(255,255,255,0.11) !important;
  border-color: rgba(255,255,255,0.16) !important;
  transform: translateY(-1px) !important;
}
.v2-sidebar-user-chip .v2-user-avatar {
  width: 36px !important;
  height: 36px !important;
  font-size: 15px !important;
}
:root[data-theme="light"] .v2-sidebar-user-chip {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.1) !important;
}
:root[data-theme="light"] .v2-sidebar-user-chip:hover {
  background: rgba(0,0,0,0.08) !important;
}

/* ── BRAND-WRAP: flex row so collapse btn sits on right ──────────────────── */
.v2-sidebar-brand-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-right: 12px !important;
}

/* ── COLLAPSE TOGGLE BUTTON ──────────────────────────────────────────────── */
.v2-sidebar-collapse-btn {
  display: none; /* hidden on mobile */
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  background: var(--input-bg, rgba(255,255,255,0.05));
  color: var(--text-muted, rgba(148,163,184,0.7));
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.15s;
  padding: 0;
  margin-left: 6px;
}
.v2-sidebar-collapse-btn:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text, #e2e8f0);
}
@media (min-width: 901px) {
  .v2-sidebar-collapse-btn { display: flex; }
}
/* Icons: show close (left chevron) when expanded, open (right chevron) when collapsed */
.v2-sidebar-collapse-btn .collapse-icon-close { display: block; }
.v2-sidebar-collapse-btn .collapse-icon-open  { display: none; }
.v2-sidebar--collapsed .v2-sidebar-collapse-btn .collapse-icon-close { display: none; }
.v2-sidebar--collapsed .v2-sidebar-collapse-btn .collapse-icon-open  { display: block; }
:root[data-theme="light"] .v2-sidebar-collapse-btn {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
  color: #64748b;
}

/* ── COLLAPSED SIDEBAR STATE ─────────────────────────────────────────────── */
/* Sidebar width transition */
.v2-sidebar {
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  overflow: hidden !important;
}
.v2-sidebar--collapsed {
  width: 72px !important;
}
/* Main content expands when sidebar is collapsed */
.v2-main {
  transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
.v2-shell--sidebar-collapsed .v2-main {
  margin-left: 72px !important;
}

/* When collapsed: hide all text labels, badges, profile info */
.v2-sidebar--collapsed .v2-nav-label,
.v2-sidebar--collapsed .v2-sidebar-brand-title,
.v2-sidebar--collapsed .v2-user-info,
.v2-sidebar--collapsed .v2-user-chevron,
.v2-sidebar--collapsed .v2-badge-val,
.v2-sidebar--collapsed .v2-badge-unit,
.v2-sidebar--collapsed .v2-sidebar-search,
.v2-sidebar--collapsed .v2-sidebar-stats,
.v2-sidebar--collapsed .v2-sidebar-profile .v2-user-info,
.v2-sidebar--collapsed .v2-sidebar-profile .v2-user-chevron {
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Collapsed nav items: center the icon */
.v2-sidebar--collapsed nav.v2-sidebar-nav a.v2-nav-item {
  justify-content: center !important;
  padding: 10px 0 !important;
}
.v2-sidebar--collapsed .v2-nav-icon {
  margin: 0 auto !important;
}

/* Collapsed brand: center the Σ logo */
.v2-sidebar--collapsed .v2-sidebar-brand {
  padding: 20px 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}
.v2-sidebar--collapsed .v2-sidebar-brand-wrap {
  justify-content: center !important;
  padding-right: 0 !important;
}
.v2-sidebar--collapsed .v2-sidebar-collapse-btn {
  display: none !important;
}

/* Collapsed profile chip: only avatar centered */
.v2-sidebar--collapsed .v2-sidebar-bottom {
  align-items: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.v2-sidebar--collapsed .v2-sidebar-user-chip {
  justify-content: center !important;
  padding: 10px 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 50% !important;
  width: auto !important;
}
.v2-sidebar--collapsed .v2-sidebar-user-chip:hover {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 50% !important;
  transform: none !important;
}
.v2-sidebar--collapsed .v2-sidebar-profile {
  width: auto;
  display: flex;
  justify-content: center;
}

/* Collapsed: floating toggle visible on sidebar edge */

/* A small toggle at the bottom of collapsed sidebar */
.v2-sidebar-expand-btn {
  display: none;
  position: fixed;
  top: 50%;
  left: 72px;
  transform: translateY(-50%);
  z-index: 55;
  width: 20px;
  height: 40px;
  background: var(--sidebar-bg, #0f172a);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-left: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, rgba(148,163,184,0.7));
  transition: background 0.18s, color 0.18s;
}
.v2-sidebar-expand-btn:hover { background: rgba(255,255,255,0.07); color: #e2e8f0; }
.v2-shell--sidebar-collapsed .v2-sidebar-expand-btn { display: flex; }
@media (max-width: 900px) {
  .v2-sidebar-expand-btn { display: none !important; }
}

/* ── HERO TOP PADDING — ensure breathing room at top ─────────────────────── */
.v2-main > section#home.page-section:first-of-type,
.v2-main section#home.page-section {
  padding-top: 40px !important;
}

/* ═══ END SESSION 14 ════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 16 — COLLAPSED SIDEBAR REDESIGN
   Goal: Linear/Vercel quality — centered icons, no black squares,
   custom CSS tooltips, round collapse button in footer.
   Strategy: all rules use !important with high specificity to beat S14 block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. SIDEBAR WIDTH TRANSITION (reinforced) ─────────────────────────────── */
:root body div.v2-shell aside.v2-sidebar {
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  overflow: hidden !important;
  /* S16 fix: do NOT override background — let original S8-S12 sidebar colour stand */
}
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed {
  width: 72px !important;
}
:root body div.v2-shell.v2-shell--sidebar-collapsed main.v2-main {
  margin-left: 72px !important;
  transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── 2. BRAND HEADER IN COLLAPSED ────────────────────────────────────────── */
/* Hide text, hide old collapse btn from header, center logo */
.v2-sidebar--collapsed .v2-sidebar-brand-wrap {
  justify-content: center !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
}
.v2-sidebar--collapsed .v2-sidebar-brand {
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
  flex: none !important;
  width: 100% !important;
}
.v2-sidebar--collapsed .v2-sidebar-logo {
  margin: 0 auto !important;
}
.v2-sidebar--collapsed .v2-sidebar-brand-title {
  display: none !important;
}
/* Old collapse button in header — hide it in collapsed AND expanded state: we relocate it to footer */
.v2-sidebar-collapse-btn {
  display: none !important;
}
/* Old floating expand button — nuke it */
.v2-sidebar-expand-btn {
  display: none !important;
}

/* ── 3. SEARCH — hide in collapsed ────────────────────────────────────────── */
.v2-sidebar--collapsed .v2-sidebar-search {
  display: none !important;
}

/* ── 4. NAV ITEMS IN COLLAPSED — icons centered, 44px tall ──────────────── */
.v2-sidebar--collapsed nav.v2-sidebar-nav {
  padding: 8px 8px !important;
}
.v2-sidebar--collapsed nav.v2-sidebar-nav a.v2-nav-item {
  justify-content: center !important;
  padding: 0 !important;
  width: 100% !important;
  height: 44px !important;
  border-radius: 12px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
.v2-sidebar--collapsed nav.v2-sidebar-nav a.v2-nav-item .v2-nav-label {
  display: none !important;
}
.v2-sidebar--collapsed nav.v2-sidebar-nav a.v2-nav-item .v2-nav-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  width: 22px !important;
  height: 22px !important;
}
/* Active indicator — left strip */
.v2-sidebar--collapsed nav.v2-sidebar-nav a.v2-nav-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 20px !important;
  background: #3b82f6 !important;
  border-radius: 3px !important;
}

/* ── 5. CUSTOM CSS TOOLTIPS (no browser title) ────────────────────────────── */
/* Each .v2-nav-item has a data-tooltip attribute we add via HTML.
   We render the tooltip as a pseudo-element on a wrapper.
   Because pseudo-elements can't read data-* directly in pure CSS without
   attr(), we use a different approach: add .s16-tip span inside each nav item */
/* DEFAULT: always hidden — expanded mode shows nav labels, no tooltips needed */
.s16-tip {
  display: none !important;
}
/* Collapsed + hover: show tooltip to the right */
.v2-sidebar--collapsed nav.v2-sidebar-nav a.v2-nav-item:hover .s16-tip {
  display: flex !important;
  position: fixed !important;  /* fixed so it escapes overflow:hidden */
  left: 80px !important;
  align-items: center !important;
  gap: 0 !important;
  z-index: 999 !important;
  pointer-events: none !important;
}
/* Arrow */
.s16-tip::before {
  content: "" !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  background: #1e293b !important;
  transform: rotate(45deg) !important;
  flex-shrink: 0 !important;
  margin-right: -3px !important;
  border-radius: 1px !important;
}
/* Label bubble */
.s16-tip span {
  display: block !important;
  background: #1e293b !important;
  color: #f1f5f9 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
  letter-spacing: 0.01em !important;
}
:root[data-theme="light"] .s16-tip::before { background: #ffffff !important; }
:root[data-theme="light"] .s16-tip span {
  background: #ffffff !important;
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

/* ── 6. BOTTOM / PROFILE / COLLAPSE BTN ──────────────────────────────────── */
.v2-sidebar--collapsed .v2-sidebar-bottom {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 0 12px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}
:root[data-theme="light"] .v2-sidebar--collapsed .v2-sidebar-bottom {
  border-top-color: #e2e8f0 !important;
}
/* Hide stats row (streak/XP/theme) in collapsed */
.v2-sidebar--collapsed .v2-sidebar-stats {
  display: none !important;
}
/* Profile: only avatar, centered, circular */
.v2-sidebar--collapsed .v2-sidebar-profile {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
.v2-sidebar--collapsed .v2-sidebar-user-chip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 2px solid rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  background: transparent !important;
  transition: border-color 0.15s, background 0.15s !important;
  cursor: pointer !important;
  position: relative !important;
}
.v2-sidebar--collapsed .v2-sidebar-user-chip:hover {
  border-color: rgba(59,130,246,0.5) !important;
  background: rgba(59,130,246,0.08) !important;
}
.v2-sidebar--collapsed .v2-sidebar-user-chip .topbar-user-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.v2-sidebar--collapsed .v2-sidebar-user-chip .v2-user-info,
.v2-sidebar--collapsed .v2-sidebar-user-chip .v2-user-chevron {
  display: none !important;
}
/* Avatar tooltip */
.v2-sidebar--collapsed .v2-sidebar-user-chip:hover::after {
  content: attr(data-tooltip) !important;
  position: fixed !important;
  left: 80px !important;
  background: #1e293b !important;
  color: #f1f5f9 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
  z-index: 999 !important;
  pointer-events: none !important;
}

/* ── 7. NEW COLLAPSE TOGGLE BUTTON IN FOOTER ─────────────────────────────── */
/* A round button, shown always in expanded state in the footer,
   and always in collapsed state in the footer */
.s16-collapse-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.05) !important;
  color: rgba(148,163,184,0.8) !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
  padding: 0 !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}
.s16-collapse-btn:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.25) !important;
}
:root[data-theme="light"] .s16-collapse-btn {
  border-color: #e2e8f0 !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
}
:root[data-theme="light"] .s16-collapse-btn:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}
/* Chevron icon directions */
.s16-collapse-btn .s16-chev-left  { display: block; }
.s16-collapse-btn .s16-chev-right { display: none;  }
.v2-sidebar--collapsed .s16-collapse-btn .s16-chev-left  { display: none;  }
.v2-sidebar--collapsed .s16-collapse-btn .s16-chev-right { display: block; }
/* Hide on mobile */
@media (max-width: 900px) {
  .s16-collapse-btn { display: none !important; }
}

/* ── 8. EXPANDED SIDEBAR bottom — keep stats/theme visible ───────────────── */
/* When NOT collapsed, bottom area stays as S14 designed */

/* ── 9. TOOLTIP vertical positioning fix ────────────────────────────────────
   We use JS to set top dynamically. As CSS fallback, center approx. */
.s16-tip {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ═══ END SESSION 16 ════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 17 — SIDEBAR POLISH (all 7 TZ points)
   Last-declaration wins over all prior !important blocks of equal specificity.
   Uses :root body div.v2-shell specificity where needed to beat inline <style>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §1  LOGO: "MathPracticum" in ONE line ────────────────────────────────── */
/* Collapse the vertical flex-column into a single inline row */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-brand-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0 !important;
  line-height: 1 !important;
}
/* "Math" — bold, 16px, full colour */
:root body div.v2-shell aside.v2-sidebar .v2-brand-math {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #f1f5f9 !important;
  display: inline !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
/* "Practicum" — normal weight, same size, slightly muted */
:root body div.v2-shell aside.v2-sidebar .v2-brand-practicum {
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: #94a3b8 !important;
  display: inline !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-brand-math    { color: #1e293b !important; }
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-brand-practicum { color: #64748b !important; }

/* ── §2  LOGO ICON: 36×36px, shadow, perfectly centred ──────────────────── */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-logo {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(37,99,235,0.35), 0 1px 3px rgba(0,0,0,0.3) !important;
  flex-shrink: 0 !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-logo svg {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
}

/* ── §3  SEARCH: clean input, no dark artefact ───────────────────────────── */
/* Remove any background on the wrapper element itself */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search {
  padding: 6px 10px 8px !important;
  background: transparent !important;
  border-bottom: none !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
  box-shadow: none !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap:focus-within {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(59,130,246,0.4) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap {
  background: rgba(0,0,0,0.05) !important;
  border-color: transparent !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap:focus-within {
  background: #fff !important;
  border-color: rgba(59,130,246,0.45) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
}

/* ── §4 + §5  PROFILE CHIP: avatar+name+grade LEFT | streak+xp+theme RIGHT ─ */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-user-chip {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px 11px !important;
  border-radius: 12px !important;
  width: 100% !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  transition: background 0.18s, border-color 0.18s !important;
  cursor: pointer !important;
  text-align: left !important;
  color: #e2e8f0 !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-user-chip:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.15) !important;
  transform: none !important;
}
/* Avatar 32px */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-user-chip .v2-user-avatar,
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-user-chip .topbar-user-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%) !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}
/* Name+grade text block */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-user-chip .v2-user-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-user-chip .v2-user-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-user-chip .v2-user-grade {
  font-size: 11px !important;
  color: #64748b !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
/* Hide the chevron inside the chip — it takes up space */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-user-chip .v2-user-chevron {
  display: none !important;
}
/* Light theme */
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-user-chip {
  background: rgba(0,0,0,0.03) !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-user-chip:hover {
  background: #f1f5f9 !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-user-chip .v2-user-name { color: #0f172a !important; }
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-user-chip .v2-user-grade { color: #94a3b8 !important; }

/* Stats row: streak 🔥 + XP ⚡ + theme btn — make more compact, sit below chip */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-stats {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 0 2px !important;
  border-top: none !important;
}
/* Streak badge: warm orange */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-stat-badge.streak-badge {
  background: rgba(251,146,60,0.12) !important;
  border: 1px solid rgba(251,146,60,0.25) !important;
  color: #fb923c !important;
  border-radius: 20px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
/* XP badge: amber */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-stat-badge.xp-badge {
  background: rgba(251,191,36,0.12) !important;
  border: 1px solid rgba(251,191,36,0.25) !important;
  color: #fbbf24 !important;
  border-radius: 20px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
/* Theme button: round */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-theme-btn {
  margin-left: auto !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s, transform 0.15s !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-theme-btn:hover {
  background: rgba(255,255,255,0.13) !important;
  transform: none !important;
  box-shadow: none !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-theme-btn {
  border-color: #e2e8f0 !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-theme-btn:hover {
  background: #e2e8f0 !important;
}

/* ── §6  NAV ITEMS: uniform 40px, rounded-xl, proper spacing ────────────── */
:root body div.v2-shell aside.v2-sidebar nav.v2-sidebar-nav {
  padding: 4px 8px !important;
  gap: 2px !important;
  display: flex !important;
  flex-direction: column !important;
}
:root body div.v2-shell aside.v2-sidebar nav.v2-sidebar-nav a.v2-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
:root body div.v2-shell aside.v2-sidebar nav.v2-sidebar-nav a.v2-nav-item:hover {
  background: rgba(255,255,255,0.07) !important;
  color: #f1f5f9 !important;
}
:root body div.v2-shell aside.v2-sidebar nav.v2-sidebar-nav a.v2-nav-item.active {
  background: rgba(59,130,246,0.12) !important;
  color: #60a5fa !important;
}
:root body div.v2-shell aside.v2-sidebar nav.v2-sidebar-nav a.v2-nav-item .v2-nav-icon {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
}
:root body div.v2-shell aside.v2-sidebar nav.v2-sidebar-nav a.v2-nav-item .v2-nav-label {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Light theme nav */
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar nav.v2-sidebar-nav a.v2-nav-item { color: #64748b !important; }
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar nav.v2-sidebar-nav a.v2-nav-item:hover { background: #f1f5f9 !important; color: #1e293b !important; }
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar nav.v2-sidebar-nav a.v2-nav-item.active { background: rgba(59,130,246,0.1) !important; color: #2563eb !important; }

/* ── §7  COLLAPSE BUTTON: round, in footer, Chevron ─────────────────────── */
/* s16-collapse-btn already exists in HTML — just refine its appearance */
:root body div.v2-shell aside.v2-sidebar .s16-collapse-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  margin: 6px auto 2px !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
  padding: 0 !important;
}
:root body div.v2-shell aside.v2-sidebar .s16-collapse-btn:hover {
  background: rgba(255,255,255,0.13) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.22) !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s16-collapse-btn {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s16-collapse-btn:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}
@media (max-width: 900px) {
  :root body div.v2-shell aside.v2-sidebar .s16-collapse-btn { display: none !important; }
}

/* ── §7b  BOTTOM AREA: clean layout, no extra border-top from stats row ──── */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-bottom {
  flex-shrink: 0 !important;
  padding: 8px 10px 10px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-bottom {
  border-top-color: #e2e8f0 !important;
}

/* ═══ END SESSION 17 ════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 18 — SIDEBAR FINAL POLISH
   Strategy: All selectors use :root body div.v2-shell aside.v2-sidebar
   specificity (4+ levels) to beat inline <style id="mp-layout-critical">
   (same specificity, but S18 loads AFTER inline <style> → wins by order).
   ─────────────────────────────────────────────────────────────────────────
   HTML changes in this session:
   • .v2-sidebar-bottom replaced with .s18-bottom
   • New .s18-profile-row: flex-row, justify-between
     └─ .s18-avatar-btn (left): avatar + name/grade column
     └─ .s18-badges-group (right): streak + xp + theme btn
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ §1  LOGO — "MathPracticum" in ONE horizontal line ══════════════════════
   The inline <style> sets brand-title to flex-column (no !important).
   We use HIGHER specificity to guarantee win regardless of load order.       */
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-sidebar-brand-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-brand-math {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: #f1f5f9 !important;
  display: inline !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  text-transform: none !important;
}
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-brand-practicum {
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: #94a3b8 !important;
  display: inline !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-brand-math {
  color: #1e293b !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-brand-practicum {
  color: #64748b !important;
}

/* ══ §2  LOGO ICON — 36×36px, rounded-xl, blue glow ════════════════════════ */
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-sidebar-logo {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(30,100,228,0.38), 0 1px 3px rgba(0,0,0,0.28) !important;
  flex-shrink: 0 !important;
}
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-sidebar-logo svg {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
}

/* ══ §3  SEARCH — clean, no dark artefact ═══════════════════════════════════ */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search {
  background: transparent !important;
  padding: 6px 10px 8px !important;
  border-bottom: none !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap {
  background: rgba(255,255,255,0.065) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap:focus-within {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(59,130,246,0.42) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
}



/* ══ §4  NAV ITEMS — uniform 40px, rounded-xl ═══════════════════════════════ */
:root body div.v2-shell aside.v2-sidebar nav.v2-sidebar-nav {
  padding: 4px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
}

:root body div.v2-shell aside.v2-sidebar nav.v2-sidebar-nav a.v2-nav-item:hover {
  background: rgba(255,255,255,0.075) !important;
  color: #e2e8f0 !important;
}
:root body div.v2-shell aside.v2-sidebar nav.v2-sidebar-nav a.v2-nav-item.active {
  background: rgba(59,130,246,0.13) !important;
  color: #60a5fa !important;
}


/* Light theme */




/* ══ §5  BOTTOM SECTION — new .s18-bottom layout ════════════════════════════ */
:root body div.v2-shell aside.v2-sidebar .s18-bottom {
  flex-shrink: 0 !important;
  padding: 8px 10px 10px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s18-bottom {
  border-top-color: #e2e8f0 !important;
}

/* ══ §6  PROFILE ROW — avatar+name LEFT | badges+theme RIGHT ════════════════ */
:root body div.v2-shell aside.v2-sidebar .s18-profile-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  position: relative !important;
}

/* Avatar button (left side) — no box, just avatar + name column */
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 6px 4px 4px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: #e2e8f0 !important;
  text-align: left !important;
  transition: background 0.15s !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn:hover {
  background: rgba(255,255,255,0.07) !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s18-avatar-btn {
  color: #1e293b !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s18-avatar-btn:hover {
  background: #f1f5f9 !important;
}

/* Avatar circle — 32px gradient */
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .v2-user-avatar,
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .topbar-user-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Name + grade column */
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .s18-name-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .v2-user-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .v2-user-grade {
  font-size: 11px !important;
  color: #64748b !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s18-avatar-btn .v2-user-name {
  color: #0f172a !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s18-avatar-btn .v2-user-grade {
  color: #94a3b8 !important;
}

/* ══ §7  BADGES GROUP (right side) — streak + xp + theme ════════════════════ */
:root body div.v2-shell aside.v2-sidebar .s18-badges-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  border-top: none !important;
  margin-top: 0 !important;
}

/* Streak badge — orange pill */
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .streak-badge {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(251,146,60,0.13) !important;
  border: 1px solid rgba(251,146,60,0.28) !important;
  color: #fb923c !important;
  border-radius: 20px !important;
  padding: 3px 7px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .streak-badge:hover {
  background: rgba(251,146,60,0.22) !important;
}

/* XP badge — amber pill */
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .xp-badge {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(251,191,36,0.13) !important;
  border: 1px solid rgba(251,191,36,0.28) !important;
  color: #fbbf24 !important;
  border-radius: 20px !important;
  padding: 3px 7px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .xp-badge:hover {
  background: rgba(251,191,36,0.22) !important;
}

/* Theme toggle button — small round button */
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .v2-sidebar-theme-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
}
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .v2-sidebar-theme-btn:hover {
  background: rgba(255,255,255,0.14) !important;
  color: #e2e8f0 !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s18-badges-group .v2-sidebar-theme-btn {
  border-color: #e2e8f0 !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s18-badges-group .v2-sidebar-theme-btn:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

/* ══ §8  COLLAPSE BUTTON — 32px round circle ═════════════════════════════════ */
:root body div.v2-shell aside.v2-sidebar .s16-collapse-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  margin: 2px auto 0 !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.2s !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
:root body div.v2-shell aside.v2-sidebar .s16-collapse-btn:hover {
  background: rgba(255,255,255,0.13) !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,0.22) !important;
}


/* Hide on mobile */
@media (max-width: 900px) {
  
}

/* ══ §9  COLLAPSED STATE — new .s18-bottom structure ════════════════════════ */
/* In collapsed mode: profile row becomes just the avatar (centered) */
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .s18-bottom {
  padding: 10px 0 12px !important;
  align-items: center !important;
}
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .s18-profile-row {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
}
/* Avatar button in collapsed: only show avatar as circle, hide name block and badges */
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .s18-avatar-btn {
  flex: none !important;
  padding: 4px !important;
  border-radius: 50% !important;
  justify-content: center !important;
}
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .s18-name-block,
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .v2-user-info {
  display: none !important;
}
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .s18-badges-group {
  display: none !important;
}
/* Avatar tooltip in collapsed state */
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .s18-avatar-btn:hover::after {
  content: attr(data-tooltip) !important;
  position: fixed !important;
  left: 80px !important;
  background: #1e293b !important;
  color: #f1f5f9 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
  z-index: 999 !important;
  pointer-events: none !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .s18-avatar-btn:hover::after {
  background: #ffffff !important;
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

/* ══ §10  SIDEBAR WIDTH TRANSITIONS (reinforce) ══════════════════════════════ */
:root body div.v2-shell aside.v2-sidebar {
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}



/* ══ §11  HIDE OLD s17/s16 STAT WIRING on new elements (prevent double) ═════ */
/* Prevent old .v2-sidebar-bottom rules applying to .s18-bottom children */
:root body div.v2-shell aside.v2-sidebar .s18-bottom .v2-sidebar-stats {
  border-top: none !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

/* ══ §12  BRAND LINK PADDING ═════════════════════════════════════════════════ */
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand {
  padding: 16px 16px 14px !important;
  gap: 12px !important;
}

/* ══ §13  DROPDOWN POSITION (upward from profile row) ═══════════════════════ */
:root body div.v2-shell aside.v2-sidebar .s18-profile-row .v2-user-dropdown {
  position: absolute !important;
  bottom: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;
}

/* ═══ END SESSION 18 ════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 19 — 3 critical sidebar fixes
   1. Search — no black border, soft bg, focus ring only
   2. Logo text — full bold 700 uniform, 18px
   3. Sigma icon — 40×40, blue gradient, shadow-lg
   Strategy: deepest specificity chain available, placed last → wins.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: SEARCH — kill every possible border source ──────────────────────
   The black outline comes from multiple layered rules setting
   border: 1px solid ... — we nuke ALL of them with !important at this level. */

/* Wrapper: no border, no background artefact */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap,
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap.v2-search {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: rgba(148,163,184,0.1) !important;  /* muted slate, same in dark/light */
  border-radius: 12px !important;
  transition: background 0.18s, box-shadow 0.18s !important;
}

/* Focus — only a soft blue ring, still no solid border */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap:focus-within,
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap.v2-search:focus-within {
  border: none !important;
  outline: none !important;
  background: rgba(148,163,184,0.14) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18) !important;
}

/* Light theme — white-ish soft bg */
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap,
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap.v2-search {
  border: none !important;
  box-shadow: none !important;
  background: rgba(15,23,42,0.06) !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap:focus-within,
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap.v2-search:focus-within {
  border: none !important;
  background: rgba(15,23,42,0.08) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18) !important;
}

/* Search section container — remove bottom border line */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search {
  border-bottom: none !important;
  background: transparent !important;
}

/* ── FIX 2: LOGO TEXT — all bold 700, 18px, single colour ──────────────────
   Both spans become visually identical weight/size.
   "Math" keeps white; "Practicum" gets same weight so it feels balanced.    */

:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-sidebar-brand-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0 !important;
  white-space: nowrap !important;
}

/* "Math" — bold 700, 18px, near-white */
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-brand-math {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: #f1f5f9 !important;
  display: inline !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  text-transform: none !important;
}

/* "Practicum" — same weight/size as "Math", slightly muted colour */
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-brand-practicum {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: #94a3b8 !important;
  display: inline !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-transform: none !important;
}

/* Light theme — slate-800 colour for both */

:root[data-theme="light"] body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-brand-practicum {
  color: #475569 !important;
}

/* ── FIX 3: SIGMA ICON — 40×40px, gradient blue, shadow-lg ─────────────────
   SVG in HTML already updated to 40×40 viewBox with blue gradient.
   Here we make sure the container clips correctly and provides the shadow.   */

:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-sidebar-logo {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* shadow-lg shadow-blue-500/30 equivalent */
  box-shadow:
    0 4px 6px -1px rgba(37,99,235,0.30),
    0 10px 25px -3px rgba(37,99,235,0.22),
    0 1px 3px rgba(0,0,0,0.20) !important;
  flex-shrink: 0 !important;
}

:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-sidebar-logo svg {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
}

/* Brand link gap — match larger icon */
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand {
  gap: 12px !important;
  padding: 18px 16px 15px !important;
}

/* ═══ END SESSION 19 ════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 20 — SEARCH FINAL FIX
   ROOT CAUSE (diagnosed):
   • Line ~1742: `#globalSearch { background: rgba(10,14,26,0.95) !important }`
     → near-black fill ON THE INPUT itself (not the wrapper) = black rectangle
   • Line ~13751: `#globalSearch { border: 1.5px solid var(--border2) !important }`
     → border directly on <input> element
   S18–S19 only overrode .search-wrap — missed the input directly.
   Fix: target the sidebar's #globalSearch directly, remove bg + border + shadow.
   Also fix width: sidebar container gets full-width padding treatment.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. NUKE dark background + border on the INPUT directly ─────────────────
   Specificity: aside.v2-sidebar #globalSearch beats bare #globalSearch (line 1742)
   Same specificity as line 13751's .search-wrap input but we're LAST → we win.  */
:root body div.v2-shell aside.v2-sidebar #globalSearch {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #e2e8f0 !important;
  font-size: 13px !important;
  padding: 9px 0 !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;  /* no radius on input itself; wrapper handles it */
  -webkit-appearance: none !important;
}
:root body div.v2-shell aside.v2-sidebar #globalSearch:focus {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
:root body div.v2-shell aside.v2-sidebar #globalSearch::placeholder {
  color: rgba(148,163,184,0.6) !important;
}

/* Light theme — dark text, same no-border rule */
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar #globalSearch {
  color: #1e293b !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar #globalSearch::placeholder {
  color: rgba(100,116,139,0.7) !important;
}

/* ── 2. WRAPPER: full-width, soft bg, rounded, no border ────────────────────
   .search-wrap is the visual container — this is where styling lives.
   Width: 100% of .v2-sidebar-search (which has padding 0 10px).
   Result: input fills sidebar from edge-padding to edge-padding.             */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search {
  padding: 6px 10px 8px !important;
  background: transparent !important;
  border-bottom: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap,
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap.v2-search {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;         /* kill the 400px cap from S14 */
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 0 10px 0 10px !important;
  border-radius: 12px !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: rgba(148,163,184,0.1) !important;
  transition: background 0.18s, box-shadow 0.18s !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap:focus-within,
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap.v2-search:focus-within {
  background: rgba(148,163,184,0.15) !important;
  border: none !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25) !important;
}

/* Light theme wrapper */
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap,
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap.v2-search {
  background: rgba(15,23,42,0.07) !important;
  border: none !important;
  box-shadow: none !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap:focus-within,
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap.v2-search:focus-within {
  background: rgba(15,23,42,0.10) !important;
  border: none !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25) !important;
}

/* Search icon — subtle colour, no interference */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-icon {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 7px !important;
  color: rgba(148,163,184,0.65) !important;
  pointer-events: none !important;
}

/* ═══ END SESSION 20 ════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 21 — LOGO · SEARCH · PROFILE POLISH
   1. Logo — single colour + unified weight 700, 22px
   2. Search — proper left-padding so text never overlaps icon
   3. Profile — avatar 40px, name 16px/700, grade 13px, icons 22px/14px/600
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: LOGO — single unified colour, 22px, 700 ─────────────────────────
   Both .v2-brand-math and .v2-brand-practicum become visually identical.
   Dark theme: both #f1f5f9 (near-white). Light theme: both #1e293b (near-black).
   letter-spacing: -0.02em for tighter, more professional look.               */

:root body div.v2-shell aside.v2-sidebar .v2-sidebar-brand-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0 !important;
  white-space: nowrap !important;
}

:root body div.v2-shell aside.v2-sidebar .v2-brand-math,
:root body div.v2-shell aside.v2-sidebar .v2-brand-practicum {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #f1f5f9 !important;           /* single colour — dark theme */
  display: inline !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  text-transform: none !important;
}

/* Light theme: same weight/size, dark near-black colour for both */
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-brand-math,
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-brand-practicum {
  color: #1e293b !important;
}

/* Brand link — slightly more room for the bigger text */
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand {
  gap: 12px !important;
  padding: 16px 16px 13px !important;
  align-items: center !important;
}

/* ── FIX 2: SEARCH — fix icon-overlap on input text ─────────────────────────
   ROOT CAUSE of "поиск в поиске":
   .search-icon is a SIBLING <span> inside .search-wrap, positioned with
   margin-right. But #globalSearch has padding: 9px 0 (from S13/S20), meaning
   the text starts at x=0 inside the input — right where the icon sits.
   FIX: give the input a proper padding-left large enough to clear the icon.
   Icon width ~15px + margin-right 7px + some breathing = 40px total.
   The wrapper keeps its existing look; only the input offset changes.         */

/* Icon — position it absolutely so input padding can target it precisely */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap {
  position: relative !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap .search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  color: rgba(148,163,184,0.6) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
  margin-right: 0 !important;           /* margin was for flex layout; now absolute */
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap .search-icon {
  color: #94a3b8 !important;
}

/* Input — left padding clears the absolute icon (12px left + ~16px icon + 6px gap = 38px) */
:root body div.v2-shell aside.v2-sidebar #globalSearch {
  padding: 10px 12px 10px 40px !important; /* left: 40px keeps text clear of icon */
  height: 38px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* Wrapper container — make icon clearance work correctly */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search {
  padding: 8px 10px 10px !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap,
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap.v2-search {
  padding: 0 !important;       /* no horizontal padding on wrapper; icon is absolute */
  background: rgba(148,163,184,0.1) !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap:focus-within,
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap.v2-search:focus-within {
  background: rgba(148,163,184,0.15) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.22) !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap,
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap.v2-search {
  background: rgba(15,23,42,0.07) !important;
  border: none !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap:focus-within {
  background: rgba(15,23,42,0.10) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.22) !important;
}

/* ── FIX 3: PROFILE — avatar 40px · name 16/700 · grade 13px · icons 22px ───
   Everything in one specificity-heavy block (same chain as S18/S20).          */

/* Avatar — up from 32px → 40px */
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .v2-user-avatar,
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .topbar-user-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  font-size: 15px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%) !important;
}

/* Name — up from 13px/600 → 16px/700 */
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .v2-user-name,
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .topbar-user-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Grade — 13px, muted slate */
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .v2-user-grade,
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .topbar-user-grade {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  line-height: 1.2 !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s18-avatar-btn .v2-user-grade,
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s18-avatar-btn .topbar-user-grade {
  color: #94a3b8 !important;
}

/* Avatar btn — more gap for the larger avatar */
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn {
  gap: 10px !important;
  padding: 4px 6px 4px 4px !important;
}

/* Streak badge — icon 22px, text 14px/600 */
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .streak-badge {
  gap: 4px !important;
  padding: 4px 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
}
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .streak-badge .v2-badge-icon svg,
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .streak-badge .icon-fire {
  width: 22px !important;
  height: 22px !important;
}

/* XP badge — icon 22px, text 14px/600 */
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .xp-badge {
  gap: 4px !important;
  padding: 4px 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
}
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .xp-badge .v2-badge-icon svg,
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .xp-badge .icon-bolt {
  width: 22px !important;
  height: 22px !important;
}

/* XP unit text — same 14px/600 */
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .xp-badge .v2-badge-unit {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Theme toggle — 40×40px round (was 28px) */
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .v2-sidebar-theme-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
}
/* Theme icon itself — 22px */
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .v2-sidebar-theme-btn svg {
  width: 22px !important;
  height: 22px !important;
}

/* Gap between badges — 8px (was 4px) */
:root body div.v2-shell aside.v2-sidebar .s18-badges-group {
  gap: 8px !important;
}

/* Light theme badge adjustments (inherit from S18 + these overrides) */
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s18-badges-group .v2-sidebar-theme-btn {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s18-badges-group .v2-sidebar-theme-btn:hover {
  background: #e2e8f0 !important;
}

/* ═══ END SESSION 21 ════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 24 — SIDEBAR 12-POINT FIX
   Пункты 1-12: лого 26px/44px, поиск 48px, nav без полоски,
   профиль avatar-only, кнопки collapse/expand, сворачивание, аватар.
   Анимированный фон НЕ трогаем.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   §1 — ЛОГОТИП: 26px/700, единый цвет, Σ 44×44px
   ══════════════════════════════════════════════════════════════════════════ */

/* Оба спана — одинаковый размер, вес и цвет */
:root body div.v2-shell aside.v2-sidebar .v2-brand-math,
:root body div.v2-shell aside.v2-sidebar .v2-brand-practicum {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #f1f5f9 !important;
  line-height: 1.15 !important;
  display: inline !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  text-transform: none !important;
}


/* Brand title — row, baseline */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-brand-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0 !important;
  white-space: nowrap !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Контейнер лого 44×44 */
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-sidebar-logo {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow:
    0 4px 6px -1px rgba(37,99,235,0.30),
    0 8px 20px -3px rgba(37,99,235,0.20) !important;
}
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-sidebar-logo svg {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
}

/* Brand link — flex row, gap 14px, центровка */
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 12px 12px 14px !important;
  text-decoration: none !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Brand wrap — flex row, выравнивание collapse-кнопки справа */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-brand-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding-right: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   §2 — КНОПКА СКРЫТИЯ: справа от лого (развёрнут) / внизу (свёрнут)
   ══════════════════════════════════════════════════════════════════════════ */

/* Inline collapse btn (в brand-wrap, справа) — 28×28, круглая */
:root body div.v2-shell aside.v2-sidebar .s24-collapse-inline-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  transition: background 0.15s, color 0.15s !important;
}
:root body div.v2-shell aside.v2-sidebar .s24-collapse-inline-btn:hover {
  background: rgba(255,255,255,0.16) !important;
  color: #e2e8f0 !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s24-collapse-inline-btn {
  background: rgba(15,23,42,0.06) !important;
  color: #64748b !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s24-collapse-inline-btn:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

/* Когда свёрнут — inline кнопка скрыта, в бренд-враппе текст скрыт */
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .s24-collapse-inline-btn {
  display: none !important;
}
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .v2-sidebar-brand-title {
  display: none !important;
}

/* Footer expand btn (в .s18-bottom) — виден только когда свёрнут */
:root body div.v2-shell aside.v2-sidebar .s24-footer-expand-btn {
  display: none !important; /* скрыт по умолчанию */
}
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .s24-footer-expand-btn {
  display: flex !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  margin: 6px auto 8px !important;
  flex-shrink: 0 !important;
  transition: background 0.15s, color 0.15s !important;
}
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .s24-footer-expand-btn:hover {
  background: rgba(255,255,255,0.16) !important;
  color: #e2e8f0 !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .s24-footer-expand-btn {
  background: rgba(15,23,42,0.06) !important;
  color: #64748b !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .s24-footer-expand-btn:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   §3 — СВОРАЧИВАНИЕ 280 → 72px, плавная анимация
   ══════════════════════════════════════════════════════════════════════════ */

:root body div.v2-shell aside.v2-sidebar {
  transition: width 0.3s ease-in-out, min-width 0.3s ease-in-out !important;
  overflow: hidden !important;
}
:root body div.v2-shell main.v2-main {
  transition: margin-left 0.3s ease-in-out !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   §4 — ПОИСК: 48px, без рамки, иконка абсолютная, padding-left 48px
   ══════════════════════════════════════════════════════════════════════════ */

/* Обёртка */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap,
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap.v2-search {
  height: 48px !important;
  border: none !important;
  box-shadow: none !important;
  background: rgba(148,163,184,0.10) !important;
  border-radius: 12px !important;
  position: relative !important;
  padding: 0 !important;
  overflow: visible !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap:focus-within {
  background: rgba(148,163,184,0.16) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25) !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap {
  background: rgba(15,23,42,0.07) !important;
  border: none !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap:focus-within {
  background: rgba(15,23,42,0.10) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25) !important;
}

/* Иконка лупы — абсолютная, left 14px */
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap .search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap .search-icon svg {
  width: 18px !important;
  height: 18px !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-sidebar-search .search-wrap .search-icon {
  color: #64748b !important;
}

/* Инпут — 48px, padding-left 48px */
:root body div.v2-shell aside.v2-sidebar #globalSearch {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 48px !important;
  padding: 0 14px 0 48px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #e2e8f0 !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  line-height: 1 !important;
  -webkit-appearance: none !important;
}

:root body div.v2-shell aside.v2-sidebar #globalSearch::placeholder {
  color: rgba(148,163,184,0.65) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar #globalSearch {
  color: #1e293b !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar #globalSearch::placeholder {
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   §5 — NAV: убрать любую полоску слева (border-left)
   ══════════════════════════════════════════════════════════════════════════ */

:root body div.v2-shell aside.v2-sidebar .v2-nav-item,
:root body div.v2-shell aside.v2-sidebar .v2-nav-item:hover,
:root body div.v2-shell aside.v2-sidebar .v2-nav-item.active,
:root body div.v2-shell aside.v2-sidebar .v2-nav-item:focus {
  border-left: none !important;
  border-left-width: 0 !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}
/* Активный — только bg-blue-50/10 + синий текст, без полоски */
:root body div.v2-shell aside.v2-sidebar .v2-nav-item.active {
  background: rgba(59,130,246,0.10) !important;
  color: #3b82f6 !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-nav-item.active {
  background: #eff6ff !important;
  color: #2563eb !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-nav-item.active .v2-nav-icon,
:root body div.v2-shell aside.v2-sidebar .v2-nav-item.active .v2-nav-icon svg {
  color: #3b82f6 !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-nav-item.active .v2-nav-icon,
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-nav-item.active .v2-nav-icon svg {
  color: #2563eb !important;
}
/* Hover — subtle, без полоски */
:root body div.v2-shell aside.v2-sidebar .v2-nav-item:hover:not(.active) {
  background: rgba(255,255,255,0.06) !important;
  border-left: none !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .v2-nav-item:hover:not(.active) {
  background: #f1f5f9 !important;
  border-left: none !important;
}
/* Размеры nav items */
:root body div.v2-shell aside.v2-sidebar .v2-nav-item {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 16px !important;
  margin: 0 !important;
}
:root body div.v2-shell aside.v2-sidebar .v2-sidebar-nav {
  padding: 4px 8px !important;
  gap: 2px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   §6 — ПРОФИЛЬ: только аватар + 3 иконки, скрыть имя/класс
   ══════════════════════════════════════════════════════════════════════════ */

/* Имя и класс — скрыты полностью */
:root body div.v2-shell aside.v2-sidebar .s18-name-block,
:root body div.v2-shell aside.v2-sidebar .v2-user-info,
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .v2-user-name,
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .topbar-user-name,
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .v2-user-grade,
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .topbar-user-grade {
  display: none !important;
}

/* Аватар — 40px, градиент blue, без свечения/тени/кольца */
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .v2-user-avatar,
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn .topbar-user-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  filter: none !important;
}

/* Кнопка аватара — компактная, без лишнего padding */
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn {
  gap: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  overflow: visible !important;
}
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn:hover {
  background: transparent !important;
}
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn:hover .v2-user-avatar,
:root body div.v2-shell aside.v2-sidebar .s18-avatar-btn:hover .topbar-user-avatar {
  opacity: 0.85 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Profile row — компактная высота */
:root body div.v2-shell aside.v2-sidebar .s18-profile-row {
  padding: 4px 10px 4px 10px !important;
  min-height: 52px !important;
  gap: 8px !important;
  align-items: center !important;
  display: flex !important;
}
:root body div.v2-shell aside.v2-sidebar .s18-bottom {
  padding-bottom: 2px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Тема-кнопка — чистая, без свечения */
:root body div.v2-shell aside.v2-sidebar .s18-badges-group .v2-sidebar-theme-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.07) !important;
  border: none !important;
  box-shadow: none !important;
}
:root[data-theme="light"] body div.v2-shell aside.v2-sidebar .s18-badges-group .v2-sidebar-theme-btn {
  background: #f1f5f9 !important;
  border: none !important;
  box-shadow: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
   §7 — ТЕМА LIGHT/DARK для body (контраст)
   ════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] body { background: #f8fafc !important; }
:root[data-theme="dark"] body, :root:not([data-theme="light"]) body { background: #0f172a !important; }

/* ══════════════════════════════════════════════════════════════════════════
   END SESSION 24
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   SESSION 25 — BLOCK 1: Collapsed logo 32×32px centered
   ══════════════════════════════════════════════════════════════════════════ */

/* §1 — Collapsed brand-wrap: center the logo, remove padding, fix height */
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed .v2-sidebar-brand-wrap {
  justify-content: center !important;
  padding: 0 !important;
  height: 64px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* §2 — Collapsed brand link: center block, remove flex gap */
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed a.v2-sidebar-brand {
  justify-content: center !important;
  padding: 0 !important;
  gap: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

/* §3 — Collapsed logo container: shrink to 32×32px */
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed a.v2-sidebar-brand .v2-sidebar-logo {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* §4 — Collapsed SVG: 32×32px */
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed a.v2-sidebar-brand .v2-sidebar-logo svg {
  width: 32px !important;
  height: 32px !important;
}

/* §5 — Hide brand title text in collapsed mode (belt+suspenders) */
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed a.v2-sidebar-brand .v2-sidebar-brand-title {
  display: none !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* §6 — Hide inline collapse button in collapsed mode (already in S24, belt+suspenders) */


/* §7 — CSS contrast variables (pt 21-22) */
:root {
  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --border-color: #e2e8f0;
}
:root[data-theme="dark"] {
  --bg-page: #0f172a;
  --bg-card: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --border-color: #334155;
}
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* §8 — Animated bg canvas: guaranteed z-index separation */


/* §9 — Density slider row in abg controls */
.abg-ctrl-row--density .abg-ctrl-label::before { content: ""; }

/* ══════════════════════════════════════════════════════════════════════════
   END SESSION 25
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   SESSION 26 — BG canvas visibility + card redesign CSS
   ══════════════════════════════════════════════════════════════════════════ */

/* §1 — Html element carries page background (body is transparent when anim runs) */
:root[data-theme="light"] html { background: #f8fafc; }
:root[data-theme="dark"] html,
:root:not([data-theme="light"]) html { background: #0f172a; }

/* §2 — Animated BG canvases: always visible above html bg, below shell */
#site-anim-bg,
#mpAnimBgCanvas {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  /* z-index: 1 set by JS; here we ensure baseline */
  z-index: 1 !important;
}

/* §3 — Shell and content must sit above the canvas */
.v2-shell {
  position: relative;
  z-index: 2;
}
.v2-sidebar {
  z-index: 110 !important; /* above canvas (1) and shell (2) */
}

/* §4 — Module grid: 3→2→1 columns */
#moduleGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}
@media (max-width: 900px) {
  #moduleGrid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  #moduleGrid { grid-template-columns: 1fr !important; }
}

/* §5 — Hide old bar-chart neboskryob when S26 cards are present */
.s26-module-card .module-bar-chart { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   END SESSION 26
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   SESSION 27 — Full Course Map Redesign
   ══════════════════════════════════════════════════════════════════════════ */

/* §1 — Grid: equal-height cards via align-items:stretch */
#moduleGrid.s27-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}
@media (max-width: 1100px) { #moduleGrid.s27-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px)  { #moduleGrid.s27-grid { grid-template-columns: 1fr !important; } }

/* §2 — S27 Card: full height flex column, equal stretch */
.s27-card {
  background: var(--bg-card, var(--surface, #1e293b));
  border-radius: 20px;
  padding: 20px;
  border: 1.5px solid var(--border-color, rgba(255,255,255,0.08));
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 100%;   /* stretch to row height */
  box-sizing: border-box;
}
:root[data-theme="light"] .s27-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.07);
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}
.s27-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  border-color: rgba(59,130,246,0.35) !important;
}
:root[data-theme="light"] .s27-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.12); }

/* Completed: green border */
.s27-card.s27-completed {
  border-color: rgba(16,185,129,0.55) !important;
}
.s27-card.s27-completed:hover { border-color: #10b981 !important; }

/* Active (currently in practice) */
.s27-card.s27-active {
  border-color: rgba(30,150,228,0.55) !important;
  box-shadow: 0 0 0 2px rgba(30,150,228,0.2) !important;
}

/* In-progress: amber */
.s27-card.s27-in-progress { border-color: rgba(245,158,11,0.55) !important; }

/* §3 — Top accent stripe 3px */
.s27-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 20px 20px 0 0;
}
.s27-card[data-subject="algebra"]::before   { background: #f59e0b; }
.s27-card[data-subject="geometry"]::before  { background: #3b82f6; }
.s27-card[data-subject="stats"]::before     { background: #35B1FA; }
.s27-card[data-subject="functions"]::before { background: #f59e0b; }
.s27-card[data-subject="default"]::before   { background: #1e96e4; }
.s27-card[data-subject="physics"]::before   { background: #22aa5a; }
/* Track fallback when no subject */
.s27-card[data-track="oge"]::before    { background: #22c55e; }
.s27-card[data-track="ege"]::before    { background: #f59e0b; }
.s27-card[data-track="olymp"]::before  { background: #ef4444; }

/* §4 — Card header row */
.s27-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding-top: 4px; /* account for ::before stripe */
}
.s27-badges { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; }
.s27-badge {
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.5;
  white-space: nowrap; flex-shrink: 0;
}
.s27-badge--grade { background: rgba(59,130,246,0.15); color: #60a5fa; }
.s27-badge--block { background: rgba(148,163,184,0.12); color: #94a3b8; }
.s27-badge--rec   { background: rgba(245,158,11,0.15); color: #fbbf24; }
:root[data-theme="light"] .s27-badge--grade { background: rgba(59,130,246,0.12); color: #2563eb; }
:root[data-theme="light"] .s27-badge--block { background: rgba(100,116,139,0.1); color: #475569; }
:root[data-theme="light"] .s27-badge--rec   { background: rgba(245,158,11,0.1); color: #d97706; }

/* §5 — Header action buttons (star + icon + info) */
.s27-header-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.s27-btn-fav {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: #64748b; transition: color 0.2s, transform 0.15s;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.s27-btn-fav:hover { color: #f59e0b; transform: scale(1.15); }
.s27-btn-fav.s27-fav-active { color: #f59e0b; }
.s27-btn-fav.s27-fav-active svg { fill: #f59e0b; }

/* §6 — Topic icon 44×44 */
.s27-topic-icon {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.s27-topic-icon svg { width: 22px; height: 22px; stroke: #fff; }
.s27-topic-icon .s27-done-badge {
  position: absolute; top: -4px; right: -4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #10b981; display: flex; align-items: center; justify-content: center;
}
.s27-topic-icon .s27-done-badge svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 3; }

/* Icon gradient themes */
.s27-icon--algebra   { background: linear-gradient(135deg,#f59e0b,#d97706); }
.s27-icon--geometry  { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.s27-icon--stats     { background: linear-gradient(135deg,#35B1FA,#1379BD); }
.s27-icon--functions { background: linear-gradient(135deg,#f59e0b,#d97706); }
.s27-icon--power     { background: linear-gradient(135deg,#ef4444,#dc2626); }
.s27-icon--trig      { background: linear-gradient(135deg,#06b6d4,#0891b2); }
.s27-icon--default   { background: linear-gradient(135deg,#1e96e4,#2563eb); }
.s27-icon--physics   { background: linear-gradient(135deg,#22aa5a,#15803d); }

/* §7 — Info button */
.s27-btn-info {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: #64748b; transition: color 0.2s;
  display: flex; align-items: center;
}
.s27-btn-info:hover { color: #94a3b8; }

/* §8 — Title + description */
.s27-card-title {
  font-size: 0.9rem; font-weight: 700;
  color: var(--text, #f1f5f9);
  line-height: 1.4; margin-bottom: 6px;
}
:root[data-theme="light"] .s27-card-title { color: #0f172a; }
.s27-card-desc {
  font-size: 0.76rem; color: var(--text2, #94a3b8);
  line-height: 1.5; margin-bottom: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
:root[data-theme="light"] .s27-card-desc { color: #475569; }

/* §9 — Spacer pushes progress + button to bottom */
.s27-card-spacer { flex: 1; }

/* §10 — Progress row */
.s27-progress-wrap {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; margin-bottom: 10px;
}
.s27-progress-track {
  flex: 1; height: 8px;
  background: rgba(148,163,184,0.18); border-radius: 999px; overflow: hidden;
}
:root[data-theme="light"] .s27-progress-track { background: #e2e8f0; }
.s27-progress-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.65s ease-out;
  min-width: 0;
}
.s27-progress-text {
  font-size: 11px; color: #94a3b8; font-weight: 500;
  min-width: 80px; text-align: right; white-space: nowrap;
}
:root[data-theme="light"] .s27-progress-text { color: #64748b; }

/* §11 — CTA button */
.s27-btn-start {
  width: 100%; padding: 10px 16px; border-radius: 999px;
  background: #2563eb; color: #fff;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: none; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.s27-btn-start:hover { background: #1d4ed8; transform: scale(1.02); }
.s27-btn-start--done { background: #059669 !important; }
.s27-btn-start--done:hover { background: #047857 !important; }

/* §12 — Toolbar redesign */
.s27-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 16px; padding: 12px 14px;
  background: var(--surface, #1e293b); border-radius: 16px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.07));
}
:root[data-theme="light"] .s27-toolbar { background: #f8fafc; border-color: #e2e8f0; }
.s27-toolbar select {
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: var(--text, #f1f5f9);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 13px; cursor: pointer; outline: none;
}
:root[data-theme="light"] .s27-toolbar select {
  background: #fff; color: #1e293b; border-color: #e2e8f0;
}
.s27-search-wrap {
  position: relative; flex: 1; min-width: 160px;
}
.s27-search-wrap svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke: #94a3b8; pointer-events: none;
}
.s27-search-wrap input {
  width: 100%; padding: 8px 14px 8px 36px;
  border-radius: 999px; height: 38px;
  background: rgba(255,255,255,0.06); color: var(--text, #f1f5f9);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 13px; outline: none; box-sizing: border-box;
}
:root[data-theme="light"] .s27-search-wrap input {
  background: #fff; color: #1e293b; border-color: #e2e8f0;
}
.s27-search-wrap input::placeholder { color: #94a3b8; }
.s27-search-wrap input:focus { border-color: rgba(59,130,246,0.4); }
.s27-fav-filter-btn {
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.05); color: #94a3b8;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 13px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: all 0.2s;
}
.s27-fav-filter-btn:hover { color: #f59e0b; border-color: rgba(245,158,11,0.3); }
.s27-fav-filter-btn.s27-fav-filter-active { color: #f59e0b; border-color: rgba(245,158,11,0.45); background: rgba(245,158,11,0.08); }
:root[data-theme="light"] .s27-fav-filter-btn { background: #fff; color: #64748b; border-color: #e2e8f0; }

/* §13 — "Continue learning" banner */
.s27-continue-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; margin-bottom: 14px;
  border-radius: 16px;
  background: rgba(59,130,246,0.08);
  border: 2px solid rgba(59,130,246,0.3);
  cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
}
.s27-continue-banner:hover { border-color: #3b82f6; box-shadow: 0 4px 16px rgba(59,130,246,0.18); }
:root[data-theme="light"] .s27-continue-banner { background: #eff6ff; border-color: #93c5fd; }
.s27-continue-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#3b82f6,#2563eb); }
.s27-continue-icon svg { width: 22px; height: 22px; stroke: #fff; }
.s27-continue-body { flex: 1; min-width: 0; }
.s27-continue-label { font-size: 11px; font-weight: 600; color: #60a5fa; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.s27-continue-title { font-size: 0.88rem; font-weight: 700; color: var(--text, #f1f5f9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="light"] .s27-continue-title { color: #0f172a; }
.s27-continue-meta { font-size: 0.75rem; color: #94a3b8; margin-top: 2px; }
.s27-continue-btn {
  padding: 8px 16px; border-radius: 999px;
  background: #2563eb; color: #fff; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; flex-shrink: 0;
  transition: background 0.2s;
}
.s27-continue-btn:hover { background: #1d4ed8; }

/* §14 — Stats bar */
.s27-stats-bar {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  padding: 14px 18px; margin-bottom: 14px;
  background: var(--surface, #1e293b); border-radius: 14px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.07));
  font-size: 13px; color: var(--text2, #94a3b8);
}
:root[data-theme="light"] .s27-stats-bar { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
.s27-stats-bar-item { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.s27-stats-bar-item strong { color: var(--text, #f1f5f9); font-weight: 700; }
:root[data-theme="light"] .s27-stats-bar-item strong { color: #0f172a; }
.s27-stats-bar-sep { color: rgba(148,163,184,0.4); }

/* §15 — Tooltip */
.s27-tooltip {
  position: fixed; z-index: 9999;
  background: #1e293b; color: #f1f5f9;
  padding: 10px 13px; border-radius: 10px;
  font-size: 12px; line-height: 1.55;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  pointer-events: none;
  max-width: 220px;
  border: 1px solid rgba(255,255,255,0.1);
  opacity: 0; transition: opacity 0.15s;
}
:root[data-theme="light"] .s27-tooltip { background: #1e293b; }
.s27-tooltip.visible { opacity: 1; }
.s27-tooltip-title { font-weight: 700; margin-bottom: 5px; font-size: 12px; }
.s27-tooltip-row { display: flex; align-items: center; gap: 5px; color: #94a3b8; }
.s27-tooltip-row strong { color: #f1f5f9; }

/* ══════════════════════════════════════════════════════════════════════════
   END SESSION 27
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   SESSION 28 — Course Map Redesign: Hero, Two-col, Card Preview, Full Border
   ══════════════════════════════════════════════════════════════════════════ */

/* §1 — Hero Section (ЭТАП 1: новый компактный hero, заменяет старый .s28-hero) */
@keyframes s1HeroIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.s1-hero {
  max-width: 1200px;
  margin: 0 auto 24px auto;
  padding: 36px 48px;
  border-radius: 24px; /* rounded-3xl */
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); /* тёмная тема (по умолчанию) */
  position: relative;
  /* Анимация появления: только transform/opacity — не вызывает reflow/repaint layout */
  animation: s1HeroIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
:root[data-theme="light"] .s1-hero {
  background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%); /* светлая тема */
}
.s1-hero-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.s1-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #2563eb; /* text-blue-600 */
  width: 28px;
  height: 28px;
}
.s1-hero-title {
  font-size: 32px;
  font-weight: 800;
  color: #ffffff; /* text-white (тёмная тема) */
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
:root[data-theme="light"] .s1-hero-title { color: #0f172a; } /* text-slate-900 */
.s1-hero-sub {
  font-size: 15px;
  color: #94a3b8; /* text-slate-500 на тёмной теме */
  margin: 8px 0 0 0;
  font-weight: 400;
  line-height: 1.6;
}
:root[data-theme="light"] .s1-hero-sub { color: #64748b; } /* text-slate-500 */
.s1-hero-sub-line { display: block; }
.s1-hero-sub-dot {
  color: #64748b; /* text-slate-300 на тёмном фоне — приглушённый разделитель */
  opacity: 0.6;
}
:root[data-theme="light"] .s1-hero-sub-dot { color: #cbd5e1; } /* text-slate-300 */

/* Адаптивность: padding уменьшается на планшете/мобильном */
@media (max-width: 1024px) {
  .s1-hero { padding: 32px 32px; }
}
@media (max-width: 720px) {
  .s1-hero { padding: 24px 20px; border-radius: 16px; }
  .s1-hero-title { font-size: 26px; }
  .s1-hero-sub { font-size: 14px; }
}

/* §2 — Two-column continue + achievements */
.s28-top-row {
  max-width: 1200px;
  margin: 0 auto 24px auto;
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.s28-continue-col {
  flex: 0 0 35%;
  max-width: 35%;
  background: rgba(30,64,120,0.3);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}
:root[data-theme="light"] .s28-continue-col {
  background: #eff6ff;
  border-color: rgba(59,130,246,0.2);
}
.s28-continue-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: -6px;
}
:root[data-theme="light"] .s28-continue-label { color: #2563eb; }
.s28-continue-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.s28-continue-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s28-continue-icon svg { width: 24px; height: 24px; }
.s28-continue-info { flex: 1; min-width: 0; }
.s28-continue-name {
  font-size: 17px;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
:root[data-theme="light"] .s28-continue-name { color: #0f172a; }
.s28-continue-meta {
  font-size: 13px;
  color: #64748b;
}
:root[data-theme="light"] .s28-continue-meta { color: #475569; }
.s28-continue-btn {
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
  align-self: flex-end;
  flex-shrink: 0;
}
.s28-continue-btn:hover { background: #1d4ed8; transform: translateY(-1px); }

.s28-achievements-col {
  flex: 0 0 40%;
  max-width: 40%;
  background: var(--bg-card, var(--surface, #1e293b));
  border: 1px solid var(--border-color, rgba(255,255,255,0.07));
  border-radius: 20px;
  padding: 24px;
  box-sizing: border-box;
}
:root[data-theme="light"] .s28-achievements-col {
  background: #ffffff;
  border-color: #e2e8f0;
}
.s28-ach-title {
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
:root[data-theme="light"] .s28-ach-title { color: #64748b; }
.s28-ach-title span { color: #f1f5f9; }
:root[data-theme="light"] .s28-ach-title span { color: #0f172a; }
.s28-ach-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.s28-ach-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.s28-ach-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.s28-ach-icon.earned { opacity: 1; }
.s28-ach-icon.locked { opacity: 0.35; filter: grayscale(0.8); }
.s28-ach-body { flex: 1; min-width: 0; }
.s28-ach-name {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 2px;
}
:root[data-theme="light"] .s28-ach-name { color: #0f172a; }
.s28-ach-status {
  font-size: 11px;
  color: #64748b;
}
.s28-ach-status.s28-earned { color: #4ade80; }
:root[data-theme="light"] .s28-ach-status.s28-earned { color: #16a34a; }

@media (max-width: 720px) {
  .s28-top-row { flex-direction: column; }
  .s28-continue-col, .s28-achievements-col { flex: unset; max-width: 100%; }
  /* .s1-hero адаптивность вынесена в §1 (Этап 1) */
}

/* §3 — S28 Card: Full border, preview area, subject colors */
.s28-card {
  background: var(--bg-card, var(--surface, #1e293b));
  border-radius: 16px;
  border: 2px solid #3b82f6; /* default: blue, overridden per subject */
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  min-height: 440px;
  /* remove old ::before stripe */
}
.s28-card::before { display: none !important; }
:root[data-theme="light"] .s28-card {
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

/* Subject border colors */
.s28-card[data-subject="algebra"]  { border-color: #f59e0b; }
.s28-card[data-subject="geometry"] { border-color: #3b82f6; }
.s28-card[data-subject="stats"]    { border-color: #35B1FA; }
.s28-card[data-subject="other"]    { border-color: #64748b; }
.s28-card[data-subject="physics"]  { border-color: #22aa5a; }

/* Hover — brighter border + rise */
.s28-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.28); }
.s28-card[data-subject="algebra"]:hover  { border-color: #fbbf24; }
.s28-card[data-subject="geometry"]:hover { border-color: #60a5fa; }
.s28-card[data-subject="stats"]:hover    { border-color: #6FC3F7; }
.s28-card[data-subject="other"]:hover    { border-color: #94a3b8; }
.s28-card[data-subject="physics"]:hover  { border-color: #4ade80; }
:root[data-theme="light"] .s28-card:hover { box-shadow: 0 14px 36px rgba(0,0,0,0.13); }

/* §4 — Preview Area */
.s28-preview {
  height: 160px;
  position: relative;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Subject-based gradients */
.s28-card[data-subject="algebra"]  .s28-preview { background: linear-gradient(135deg, #d97706 0%, #b45309 40%, #92400e 100%); }
.s28-card[data-subject="geometry"] .s28-preview { background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 40%, #1e3a8a 100%); }
.s28-card[data-subject="stats"]    .s28-preview { background: linear-gradient(135deg, #35B1FA 0%, #1379BD 55%, #0b3a5c 100%); }
.s28-card[data-subject="other"]    .s28-preview { background: linear-gradient(135deg, #0f766e 0%, #0e7490 40%, #1e40af 100%); }
.s28-card[data-subject="physics"]  .s28-preview { background: linear-gradient(135deg, #16a34a 0%, #15803d 40%, #14532d 100%); }
.s28-preview-svg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}
.s28-preview-svg svg { max-width: 100%; max-height: 100%; }
/* Генерированные обложки-картинки: во всю площадь превью, без отступов */
.s28-preview-svg:has(> img) { padding: 0; }
.s28-preview-svg > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* §5 — Fav star button (inside preview) */
.s28-fav-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.2s, transform 0.15s;
  padding: 0;
}
.s28-fav-btn:hover { background: rgba(0,0,0,0.4); transform: scale(1.12); }
.s28-fav-btn svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  transition: fill 0.18s, stroke 0.18s;
}
.s28-fav-btn.active svg { fill: #f59e0b; stroke: #f59e0b; }

/* §6 — Card body */
.s28-card-body {
  padding: 16px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* §7 — Badges row */
.s28-badges-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}
.s28-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.s28-badge-grade { background: rgba(59,130,246,0.15); color: #60a5fa; }
:root[data-theme="light"] .s28-badge-grade { background: rgba(59,130,246,0.1); color: #1d4ed8; }
.s28-badge-block { background: rgba(148,163,184,0.12); color: #94a3b8; }
:root[data-theme="light"] .s28-badge-block { background: rgba(100,116,139,0.1); color: #475569; }
.s28-badge-oge  { background: rgba(16,185,129,0.15); color: #34d399; }
:root[data-theme="light"] .s28-badge-oge { background: #d1fae5; color: #065f46; }
.s28-badge-ege  { background: rgba(239,68,68,0.13); color: #f87171; }
:root[data-theme="light"] .s28-badge-ege { background: #fee2e2; color: #b91c1c; }
/* ЕГЭ (база) — визуально отличается от «профиль» приглушённым розовым тоном,
   чтобы на карточке было сразу видно, какой вариант экзамена у темы */
.s28-badge-ege-base { background: rgba(53,177,250,0.13); color: #6FC3F7; }
:root[data-theme="light"] .s28-badge-ege-base { background: #e3f2fd; color: #1379BD; }
.s28-badge-olymp { background: rgba(245,158,11,0.15); color: #fbbf24; }
:root[data-theme="light"] .s28-badge-olymp { background: #fef3c7; color: #92400e; }

/* §8 — Card title & desc */
.s28-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.3em * 3);
}
:root[data-theme="light"] .s28-card-title { color: #0f172a; }
.s28-card-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: auto;
}
:root[data-theme="light"] .s28-card-desc { color: #64748b; }

/* SESSION 30 — единая высота карточек + тег номера урока.
   ТЗ №9: min-height уменьшен с 460 до auto — карточки сужены,
   большой отступ между описанием и прогресс-баром убран. */
.s28-card { min-height: 0; }
#moduleGrid.s28-grid { align-items: stretch !important; }
.s28-badge-lesson {
  background: rgba(148,163,184,0.12);
  color: #94a3b8;
  font-weight: 600;
}
:root[data-theme="light"] .s28-badge-lesson { background: rgba(100,116,139,0.1); color: #475569; }

/* §9 — Progress bar 8px */
.s28-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
.s28-progress-track {
  flex: 1;
  height: 8px;
  background: rgba(148,163,184,0.18);
  border-radius: 999px;
  overflow: hidden;
}
:root[data-theme="light"] .s28-progress-track { background: #e2e8f0; }
.s28-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #059669);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.s28-progress-text {
  font-size: 13px;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
}

/* §10 — Action button 44px */
.s28-btn-start {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  background: #2563eb;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.s28-btn-start:hover { background: #1d4ed8; transform: translateY(-1px); }
.s28-btn-start.done { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
.s28-btn-start.done:hover { background: rgba(16,185,129,0.25); }
:root[data-theme="light"] .s28-btn-start.done { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }

/* §11 — Grid override */
#moduleGrid.s28-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 1100px) {
  #moduleGrid.s28-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  #moduleGrid.s28-grid { grid-template-columns: 1fr !important; }
}

/* §12 — Fav filter button with star icon */
.s28-fav-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  color: var(--text, #f1f5f9);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
}
.s28-fav-filter-btn:hover {
  background: rgba(148,163,184,0.08);
  border-color: rgba(148,163,184,0.4);
}
.s28-fav-filter-btn svg {
  width: 15px; height: 15px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}
.s28-fav-filter-btn.active {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.45);
  color: #fbbf24;
}
.s28-fav-filter-btn.active svg { fill: #f59e0b; stroke: #f59e0b; }
:root[data-theme="light"] .s28-fav-filter-btn {
  border-color: #e2e8f0;
  color: #64748b;
  background: #ffffff;
}
:root[data-theme="light"] .s28-fav-filter-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
:root[data-theme="light"] .s28-fav-filter-btn.active {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}
:root[data-theme="light"] .s28-fav-filter-btn.active svg { fill: #f59e0b; stroke: #f59e0b; }

/* §13 — Header zone wrapper */
.s28-header-zone {
  max-width: 1200px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   END SESSION 28
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   SESSION 29 — Course Map Full Redesign v2
   Hero dedup · Stats · Decor · Dropdown filters · Neutral border · Glow hover
   Info-btn tooltip · Search improved · Achievements progress bars
   ══════════════════════════════════════════════════════════════════════════ */

/* §1 — Hide original section-head to prevent duplication */
#mapView > .section-head { display: none !important; }

/* §2/§3 (S29) — УДАЛЕНО на Этапе 1: старая анимация s29HeroIn, декоративные
   символы Σ ∫ π √ (.s29-hero-decor) и бейджи статистики (.s29-hero-stats)
   больше не создаются в JS (upgradeHero() стал no-op). Новая анимация
   и оформление hero — см. .s1-hero* в блоке SESSION 28 §1 выше. */

/* §4 — Dropdown filter styles */
.s29-filters-bar {
  max-width: 1200px;
  margin: 0 auto 18px auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}
.s29-dropdown-wrap {
  position: relative;
  display: inline-flex;
}
.s29-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  color: var(--text, #f1f5f9);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
:root[data-theme="light"] .s29-dropdown-trigger {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #374151;
}
.s29-dropdown-trigger:hover {
  border-color: rgba(59,130,246,0.5);
}
:root[data-theme="light"] .s29-dropdown-trigger:hover { border-color: #93c5fd; }
.s29-dropdown-trigger.open {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.s29-dropdown-chevron {
  width: 15px; height: 15px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
  transition: transform 0.18s;
}
.s29-dropdown-trigger.open .s29-dropdown-chevron { transform: rotate(180deg); }
.s29-dropdown-trigger.has-value { border-color: rgba(59,130,246,0.5); color: #60a5fa; }
:root[data-theme="light"] .s29-dropdown-trigger.has-value { color: #1d4ed8; border-color: #93c5fd; }

/* Dropdown panel */
.s29-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  z-index: 200;
  overflow: hidden;
  animation: s29DropIn 0.15s ease both;
}
:root[data-theme="light"] .s29-dropdown-panel {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
@keyframes s29DropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.s29-dropdown-option {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text, #e2e8f0);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
:root[data-theme="light"] .s29-dropdown-option { color: #374151; }
.s29-dropdown-option:hover {
  background: rgba(59,130,246,0.08);
}
:root[data-theme="light"] .s29-dropdown-option:hover { background: #f0f9ff; }
.s29-dropdown-option.selected {
  background: rgba(59,130,246,0.15);
  color: #60a5fa;
  font-weight: 600;
}
:root[data-theme="light"] .s29-dropdown-option.selected {
  background: #eff6ff;
  color: #1d4ed8;
}

/* §5 — Improved search */
.s29-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 180px;
  max-width: 280px;
}
.s29-search-icon {
  position: absolute;
  left: 11px;
  width: 17px; height: 17px;
  stroke: #64748b;
  fill: none;
  pointer-events: none;
  flex-shrink: 0;
}
.s29-search-input {
  width: 100%;
  padding: 9px 40px 9px 34px;
  border-radius: 12px;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  color: var(--text, #f1f5f9);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
:root[data-theme="light"] .s29-search-input {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #374151;
}
.s29-search-input::placeholder { color: #64748b; }
.s29-search-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.s29-search-hotkey {
  position: absolute;
  right: 9px;
  font-size: 11px;
  color: #64748b;
  background: rgba(148,163,184,0.15);
  border-radius: 4px;
  padding: 2px 5px;
  pointer-events: none;
  font-family: monospace;
  line-height: 1.4;
}
:root[data-theme="light"] .s29-search-hotkey { background: #f1f5f9; color: #94a3b8; }

/* Search autocomplete dropdown */
.s29-search-autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  z-index: 300;
  overflow: hidden;
  animation: s29DropIn 0.12s ease both;
}
:root[data-theme="light"] .s29-search-autocomplete {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.s29-autocomplete-item {
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text, #e2e8f0);
  cursor: pointer;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  gap: 8px;
}
:root[data-theme="light"] .s29-autocomplete-item { color: #374151; }
.s29-autocomplete-item:hover { background: rgba(59,130,246,0.08); }
:root[data-theme="light"] .s29-autocomplete-item:hover { background: #f0f9ff; }
.s29-autocomplete-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
  background: rgba(59,130,246,0.12);
  color: #60a5fa;
}
:root[data-theme="light"] .s29-autocomplete-icon { background: #eff6ff; color: #1d4ed8; }

/* §6 — Neutral card border (override S28 subject colors) */
.s28-card {
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.16);
}
:root[data-theme="light"] .s28-card {
  border-color: rgba(0,0,0,0.07) !important;
}

/* §7 — Glow hover override */
.s28-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(59,130,246,0.3) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25), 0 12px 32px rgba(0,0,0,0.22) !important;
}
:root[data-theme="light"] .s28-card:hover {
  border-color: rgba(59,130,246,0.25) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.18), 0 12px 32px rgba(0,0,0,0.1) !important;
}

/* §8 — Info "i" button (left of preview) */
.s29-info-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.18s;
  padding: 0;
  backdrop-filter: blur(4px);
}
.s29-info-btn:hover { background: rgba(0,0,0,0.4); }
.s29-info-btn svg {
  width: 16px; height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* Info tooltip */
.s29-info-tooltip {
  position: fixed;
  z-index: 9999;
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.55;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
  pointer-events: none;
  max-width: 230px;
  min-width: 180px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
}
.s29-info-tooltip.visible {
  opacity: 1;
  transform: translateX(0);
}
.s29-info-tooltip-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
  color: #f1f5f9;
}
.s29-info-tooltip-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  font-size: 12px;
  margin-bottom: 4px;
}
.s29-info-tooltip-item::before {
  content: "·";
  color: #3b82f6;
  font-size: 16px;
  line-height: 1;
}
.s29-info-tooltip-meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 11px;
  color: #475569;
  display: flex;
  gap: 12px;
}
.s29-info-tooltip-meta span { display: flex; align-items: center; gap: 4px; }

/* §9 — Achievement progress bars (28px icons) */
.s28-ach-icon {
  width: 40px !important;
  height: 40px !important;
  font-size: 22px !important;
}
.s29-ach-bar-wrap {
  height: 4px;
  border-radius: 999px;
  background: rgba(148,163,184,0.18);
  margin-top: 5px;
  overflow: hidden;
}
:root[data-theme="light"] .s29-ach-bar-wrap { background: #e2e8f0; }
.s29-ach-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: #f59e0b;
  transition: width 0.5s ease;
}
.s28-ach-item.earned .s29-ach-bar-fill { background: #22c55e; }
.s29-ach-lock {
  font-size: 11px;
  opacity: 0.5;
  margin-left: auto;
  flex-shrink: 0;
}
/* Glow for earned achievements */
.s28-ach-item.earned .s28-ach-icon {
  box-shadow: 0 0 12px rgba(245,158,11,0.35);
}

/* §10 — Continue card styled like a module card */
.s29-continue-card {
  background: var(--bg-card, #1e293b);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
:root[data-theme="light"] .s29-continue-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.07);
}
.s29-continue-preview {
  height: 140px;
  position: relative;
  flex-shrink: 0;
}
.s29-continue-preview-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.s29-continue-body-card {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.s29-continue-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(59,130,246,0.14);
  color: #60a5fa;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  width: fit-content;
}
:root[data-theme="light"] .s29-continue-badge { background: #eff6ff; color: #1d4ed8; }
.s29-continue-title-card {
  font-size: 18px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
}
:root[data-theme="light"] .s29-continue-title-card { color: #0f172a; }
.s29-continue-meta-card {
  font-size: 13px;
  color: #64748b;
}
.s29-continue-btn-card {
  align-self: flex-start;
  height: 40px;
  padding: 0 20px;
  border-radius: 12px;
  background: #2563eb;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 0.18s, transform 0.15s;
  margin-top: 4px;
}
.s29-continue-btn-card:hover { background: #1d4ed8; transform: translateY(-1px); }

/* Override s28-continue-col to use card style */
.s28-continue-col {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   END SESSION 29
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   SESSION 30 — Пирамидальный Hero + фиксированные фильтры
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Pyramidal Hero — «парящая карточка» (Floating Elements) ───────────── */
.s30-hero {
  max-width: 1200px;
  margin: 0 auto 32px;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: visible;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 14px rgba(0,0,0,0.08);
  transform: translateY(-5px);
  transition: box-shadow 0.3s ease;
  /* Карточка и текст статичны — «парят» только фоновые blobs (см. ниже) */
}
:root[data-theme="light"] .s30-hero {
  box-shadow: 0 20px 60px rgba(30,41,59,0.10), 0 4px 14px rgba(30,41,59,0.05);
}

/* Декоративные размытые blobs позади контента — создают глубину */
.s30-hero::before,
.s30-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.55;
}
.s30-hero::before {
  width: 260px; height: 260px;
  top: -80px; left: 6%;
  background: radial-gradient(circle, rgba(30,150,228,0.55), transparent 70%);
  animation: s30BlobDrift1 14s ease-in-out infinite;
}
.s30-hero::after {
  width: 300px; height: 300px;
  bottom: -100px; right: 8%;
  background: radial-gradient(circle, rgba(59,130,246,0.5), transparent 70%);
  animation: s30BlobDrift2 18s ease-in-out infinite;
}
:root[data-theme="light"] .s30-hero::before,
:root[data-theme="light"] .s30-hero::after { opacity: 0.35; }

@keyframes s30BlobDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(24px, 18px) scale(1.08); }
  66%      { transform: translate(-14px, 10px) scale(0.94); }
}
@keyframes s30BlobDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-20px, -16px) scale(1.1); }
  75%      { transform: translate(16px, -8px) scale(0.92); }
}

/* Третий, более мягкий и медленный blob — по центру, для глубины */
.s30-hero-blob3 {
  position: absolute;
  z-index: -1;
  top: 50%; left: 50%;
  width: 420px; height: 220px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(53,177,250,0.25), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  opacity: 0.45;
  animation: s30BlobDrift3 22s ease-in-out infinite;
}
:root[data-theme="light"] .s30-hero-blob3 { opacity: 0.25; }
@keyframes s30BlobDrift3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-46%, -54%) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .s30-hero, .s30-hero::before, .s30-hero::after, .s30-hero-blob3 {
    animation: none !important;
  }
}

.s30-title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.s30-context {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #64748b;
}

.s30-progress {
  margin-top: 24px;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
}

.s30-progress-text {
  font-size: 14px;
  font-weight: 600;
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.s30-progress-cold {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
}

.s30-mini-bar {
  width: 120px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.s30-mini-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #22c55e, #10b981 55%, #34d399);
  transition: width 0.4s ease;
  position: relative;
}

.s30-mini-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent, transparent 9px, rgba(255,255,255,0.28) 9px, rgba(255,255,255,0.28) 11px);
  pointer-events: none;
}

.s30-mini-bar-tooltip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1e293b;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

.s30-mini-bar-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1e293b;
}

.s30-mini-bar:hover .s30-mini-bar-tooltip,
.s30-mini-bar:focus-visible .s30-mini-bar-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

:root[data-theme="light"] .s30-mini-bar-tooltip { background: #0f172a; }
:root[data-theme="light"] .s30-mini-bar-tooltip::after { border-top-color: #0f172a; }

.s30-progress-caption {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  transition: opacity 0.15s ease, max-height 0.15s ease;
}

.s30-progress-done-text {
  color: #10b981;
  font-weight: 600;
}

/* ── 100% checkmark badge (achievement style) ──────────────────────────── */
.s30-check-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #10b981;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(16,185,129,0.4);
  animation: s30PopIn 0.3s ease;
  flex-shrink: 0;
}

@keyframes s30PopIn {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ── Filter bar (below hero) ────────────────────────────────────────────── */
.s30-filters-bar {
  max-width: 1200px;
  margin: 0 auto 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 40px;
}

.s30-search-wrap {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 320px;
}

.s30-search-input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  background: var(--bg-card, #1e293b);
  color: var(--text, #f1f5f9);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.s30-search-input::placeholder { color: #64748b; }

.s30-search-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.s30-filter-btn {
  height: 40px;
  width: 168px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  background: var(--bg-card, #1e293b);
  color: var(--text, #f1f5f9);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.s30-filter-btn:hover {
  border-color: rgba(59,130,246,0.5);
}

.s30-filter-btn.active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
  font-weight: 600;
}

.s30-filter-btn-label {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.s30-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  stroke: currentColor;
  fill: none;
  color: #64748b;
  transition: transform 0.18s ease;
}

.s30-dropdown-trigger.open .s30-chevron {
  transform: rotate(180deg);
}

.s30-dropdown-trigger.active .s30-chevron { color: #1d4ed8; }

.s30-dropdown-wrap {
  position: relative;
  flex-shrink: 0;
}

.s30-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  padding: 6px;
  display: none;
  z-index: 40;
  animation: s30DropIn 0.15s ease both;
}

@keyframes s30DropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.s30-dropdown-panel.open {
  display: block;
}

.s30-dropdown-option {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--text, #e2e8f0);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s ease;
}

.s30-dropdown-option:hover {
  background: rgba(59,130,246,0.08);
}

.s30-dropdown-option.selected {
  background: rgba(59,130,246,0.15);
  color: #60a5fa;
  font-weight: 600;
}

.s30-fav-btn {
  width: auto;
  min-width: 168px;
  padding: 0 16px;
  overflow: visible;
  text-overflow: unset;
}

.s30-fav-star {
  flex-shrink: 0;
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: inherit; /* совпадает с текстом кнопки — без «двух цветов» */
}

.s30-fav-btn.active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
  font-weight: 600;
}

.s30-fav-btn.active .s30-fav-star svg {
  fill: #f59e0b;
  stroke: #f59e0b;
}

.s30-sort-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  background: var(--bg-card, #1e293b);
  color: var(--text, #f1f5f9);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.s30-sort-btn:hover {
  border-color: rgba(59,130,246,0.5);
}

/* ── Info "i" button — единый спек 28×28 с .s28-fav-btn/.s29-info-btn ───── */
.s30-info-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  padding: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}
.s30-info-btn:hover { background: rgba(0,0,0,0.4); transform: scale(1.12); }
.s30-info-btn svg {
  width: 16px; height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* ── Info tooltip (без кнопки «Подробнее») ──────────────────────────────── */
.s30-info-tooltip {
  position: fixed;
  width: 300px;
  background: rgba(15,23,42,0.95);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.45);
  z-index: 200;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.s30-info-tooltip.visible {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.2s;
}

.s30-info-tooltip-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.s30-info-tooltip-meta {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 12px;
}

.s30-info-tooltip-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 0 0 12px;
}

.s30-info-tooltip-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s30-info-tooltip-list li {
  font-size: 13px;
  color: #cbd5e1;
  padding-left: 14px;
  position: relative;
}

.s30-info-tooltip-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #64748b;
}

.s30-info-tooltip-stats {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: #64748b;
}

/* ── Light theme overrides ──────────────────────────────────────────────── */
:root[data-theme="light"] .s30-title { color: #0f172a; }
:root[data-theme="light"] .s30-context { color: #64748b; }
:root[data-theme="light"] .s30-progress-text { color: #334155; }
:root[data-theme="light"] .s30-progress-cold { color: #94a3b8; }
:root[data-theme="light"] .s30-mini-bar { background: #e2e8f0; }
:root[data-theme="light"] .s30-filter-btn:hover,
:root[data-theme="light"] .s30-sort-btn:hover { border-color: #93c5fd; }
:root[data-theme="light"] .s30-dropdown-panel { box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
:root[data-theme="light"] .s30-dropdown-option:hover { background: #f0f9ff; }
:root[data-theme="light"] .s30-dropdown-option.selected { background: #eff6ff; color: #1d4ed8; }
:root[data-theme="light"] .s30-chevron { color: #94a3b8; }

/* ── Responsive (mobile) ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .s30-hero { padding: 24px 20px; }
  .s30-title { font-size: 28px; }
  .s30-context { font-size: 14px; margin-top: 12px; }
  .s30-progress { min-height: 32px; margin-top: 20px; }
  .s30-progress-text { font-size: 13px; }
  .s30-filters-bar { padding: 0 16px; }
  .s30-filter-btn { width: 140px; }
  .s30-fav-btn { width: auto; min-width: 150px; padding: 0 14px; }
  .s30-info-tooltip { width: 260px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   END SESSION 30
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   SESSION 30+ — Фильтры в одну строку, золотое избранное, кнопка «Наверх»
   ══════════════════════════════════════════════════════════════════════════ */

/* R10-5: фильтры МОГУТ переноситься на вторую строку — поиск больше НЕ
   сжимается до 70-90px и не обрезается. Поиск всегда получает достойную
   ширину; если фильтрам не хватает места, они уходят на следующую строку. */
/* ТЗ №7 (2026-08-26): ВСЕ фильтры строго В ОДИН РЯД — без переносов
   и «съезжания». Поиск и дропдауны сжимаются, но не переносятся. */
.s30-filters-bar {
  flex-wrap: nowrap !important;
  overflow: visible !important;
  padding: 0 !important; /* flush-align с карточками снизу */
  gap: 10px !important;
  justify-content: flex-start !important;
}

/* Поиск — компактное поле слева от «Все классы», в ОДНОЙ строке
   с фильтрами. Сжимается при нехватке места, при фокусе расширяется. */
.s30-search-wrap {
  position: relative !important;
  flex: 1 1 170px !important;
  width: auto;
  min-width: 100px !important;
  max-width: 230px !important;
  transition: flex-basis .2s ease, max-width .2s ease;
}
.s30-search-wrap:focus-within {
  max-width: 280px !important;
}
/* Легаси-класс s30-narrow */
.s30-filters-bar.s30-narrow .s30-search-wrap {
  flex: 1 1 200px !important;
  min-width: 120px !important;
}

/* Группа «класс/предмет/экзамены/избранные/сортировка» — сразу СПРАВА от
   поиска (на одном уровне); может слегка сжиматься, но не переносится. */
.s30-filters-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 0;
  flex: 0 1 auto;
  min-width: 0;
}
.s30-filters-right .s30-filter-btn { white-space: nowrap; }

/* ТЗ (2026-08-26): кнопка выгрузки статистики ученика — справа от
   фильтров, на одном уровне с ними, всегда видна. */
.s30-stats-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: none;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1.5px solid rgba(30,150,228,.45);
  background: linear-gradient(135deg, rgba(30,150,228,.18), rgba(53,177,250,.08));
  color: var(--accent2, #35B1FA);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.s30-stats-btn:hover {
  background: linear-gradient(135deg, rgba(30,150,228,.28), rgba(53,177,250,.14));
  box-shadow: 0 4px 18px rgba(30,150,228,.25);
  transform: translateY(-1px);
}
.s30-stats-btn svg { width: 17px; height: 17px; flex: none; }

/* ── Отчёт ученика (модалка) — ТЗ 2026-08-26 ─────────────────────── */
.mprep-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(2,6,16,.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 18px; overflow-y: auto;
}
.mprep-box {
  width: min(1100px, 100%);
  background: var(--card, #0d1526);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  padding: 26px 28px 30px;
  position: relative;
}
.mprep-actions { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 6px; }
.mprep-dl { font-weight: 800; }
.mprep-close {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(148,163,184,.08); color: var(--text, #e2e8f0);
  font-size: 16px; cursor: pointer;
}
.mprep-close:hover { background: rgba(224,92,92,.15); color: #e05c5c; }
.mprep-title { font-size: 24px; font-weight: 900; color: var(--text, #f1f5f9); }
.mprep-sub { color: var(--text2, #94a3b8); margin-top: 4px; font-size: 14px; }
.mprep-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin: 20px 0 22px;
}
.mprep-card {
  background: rgba(30,150,228,.06);
  border: 1px solid rgba(30,150,228,.16);
  border-radius: 14px; padding: 14px 14px; text-align: center;
}
.mprep-card-num { font-size: 23px; font-weight: 900; color: var(--accent2, #35b1fa); }
.mprep-card-num span { font-size: 13px; color: var(--text2, #94a3b8); font-weight: 600; }
.mprep-good .mprep-card-num { color: #3dbf6e; }
.mprep-bad .mprep-card-num { color: #e05c5c; }
.mprep-warn .mprep-card-num { color: #eab308; }
.mprep-card-lbl { font-size: 12px; color: var(--text2, #94a3b8); margin-top: 4px; line-height: 1.4; }
.mprep-content { overflow-x: auto; }
.mprep-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mprep-table th {
  padding: 9px 8px; color: var(--text2, #94a3b8); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid rgba(148,163,184,.2); text-align: center;
  white-space: nowrap;
}
.mprep-table td { padding: 9px 8px; border-bottom: 1px solid rgba(148,163,184,.1); text-align: center; color: var(--text, #e2e8f0); }
.mprep-row-done td { background: rgba(61,191,110,.05); }
.mprep-st { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.mprep-st-done { background: rgba(61,191,110,.15); color: #3dbf6e; }
.mprep-st-prog { background: rgba(53,177,250,.15); color: #35b1fa; }
.mprep-st-none { background: rgba(148,163,184,.12); color: #94a3b8; }
.mprep-cell-good { color: #3dbf6e; font-weight: 800; }
.mprep-cell-bad { color: #e05c5c; font-weight: 800; }
.mprep-cell-warn { color: #eab308; font-weight: 800; }
.mprep-pct { color: var(--text3, #64748b); font-size: 12px; }

/* ТЗ №7: фильтры внутри отчёта + бейджи предмета/экзамена + прогресс-бар */
.mprep-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin: 6px 0 14px; padding: 12px 16px;
  background: var(--bg-card2, rgba(30,150,228,.06));
  border: 1px solid var(--border-color, rgba(120,140,160,.18));
  border-radius: 12px;
}
.mprep-flt-lbl {
  font-size: 12.5px; color: var(--text3, #94a3b8); font-weight: 700;
  display: inline-flex; align-items: center; gap: 7px;
}
.mprep-flt {
  background: var(--bg-card, #101a2c); color: var(--text, #e2e8f0);
  border: 1px solid var(--border-color, #2a3a58); border-radius: 8px;
  padding: 6px 10px; font-size: 13px; cursor: pointer;
}
.mprep-flt:focus { outline: none; border-color: var(--accent2, #35b1fa); }
.mprep-flt-count { margin-left: auto; font-size: 12.5px; color: var(--text3, #64748b); font-weight: 700; }
.mprep-subj {
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
.mprep-subj-alg  { background: rgba(53,177,250,.14);  color: #35b1fa; }
.mprep-subj-geo  { background: rgba(46,192,141,.14);  color: #2ec08d; }
.mprep-subj-phys { background: rgba(232,121,166,.14); color: #e879a6; }
.mprep-subj-stat { background: rgba(226,177,60,.16);  color: #e2b13c; }
.mprep-exam {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; white-space: nowrap; margin: 1px;
  background: rgba(148,163,184,.12); color: var(--text3, #a8b6c8);
}
.mprep-solved { min-width: 86px; }
.mprep-bar { height: 4px; background: rgba(120,140,160,.2); border-radius: 99px; margin-top: 4px; overflow: hidden; }
.mprep-bar i { display: block; height: 100%; background: linear-gradient(90deg, #1e96e4, #3dbf6e); border-radius: 99px; }

@media (max-width: 720px) {
  .mprep-box { padding: 18px 14px 22px; }
  .mprep-table { font-size: 12px; }
  .mprep-filters { gap: 8px; }
  .mprep-flt-count { flex: 1 1 100%; margin-left: 0; }
}

.s30-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  display: flex;
  color: var(--text-muted, #94a3b8);
  pointer-events: none;
}
.s30-search-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.s30-search-input {
  padding-left: 40px !important;
}

/* «Избранные» — фиксированная ширина, но достаточная, чтобы текст не обрезался */
.s30-fav-btn {
  width: auto !important;
  min-width: 168px;
  padding: 0 16px;
  white-space: nowrap;
  overflow: visible !important;
  text-overflow: unset !important;
}
/* Complaint #15: icon-only variant — no text label anymore, so the button
   collapses to a fixed square matching .s30-sort-btn right next to it. */
.s30-fav-btn.s30-fav-btn-icon-only {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px;
  padding: 0 !important;
  justify-content: center;
}

@media (max-width: 640px) {
  /* R10-5/R10-6: на мобильных поиск занимает всю ширину первой строки,
     фильтры переносятся ниже — ничего не обрезается */
  .s30-filters-bar { flex-wrap: wrap !important; padding: 0 !important; overflow: visible !important; }
  .s30-search-wrap { flex: 1 1 100% !important; max-width: 100% !important; min-width: 100% !important; }
  /* R13-1: .s30-filters-right раньше имел flex-shrink:0 и вылезал за экран
     (532px в контейнере 295px). Теперь занимает всю ширину строки и
     переносит кнопки внутри себя. */
  .s30-filters-right {
    margin-left: 0 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .s30-dropdown-wrap { flex: 1 1 45% !important; min-width: 0 !important; max-width: 100% !important; }
  .s30-dropdown-wrap .s30-filter-btn { width: 100% !important; }
  .s30-filter-btn { width: auto !important; min-width: 0 !important; max-width: 100% !important; flex: 1 1 45%; }
  .s30-fav-btn { min-width: 0 !important; }
}

/* 2. Типографика фильтров — Montserrat везде */
.s30-filter-btn, .s30-search-input, .s30-dropdown-option, .s30-sort-btn {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 500 !important;
}

/* 3. Золотая кнопка «Избранное» (в барре и на карточках) */
.s30-fav-btn, .s29-fav-filter-btn, .s28-fav-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 12px;
  background: rgba(245, 158, 11, 0.08);
  border: 1.5px solid rgba(245, 158, 11, 0.25);
  color: #92400e; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.18s ease;
  white-space: nowrap; flex-shrink: 0;
}
.s30-fav-btn:hover, .s29-fav-filter-btn:hover, .s28-fav-filter-btn:hover {
  background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}
.s30-fav-btn.active, .s29-fav-filter-btn.active, .s28-fav-filter-btn.active {
  background: #fef3c7; border-color: #f59e0b; color: #92400e; font-weight: 700;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15), 0 2px 8px rgba(245, 158, 11, 0.2);
  animation: favPulse 0.4s ease;
}
.s30-fav-btn .s30-fav-star svg, .s29-fav-filter-btn svg, .s28-fav-filter-btn svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  flex-shrink: 0; transition: fill 0.18s, stroke 0.18s;
}
.s30-fav-btn.active .s30-fav-star svg, .s29-fav-filter-btn.active svg, .s28-fav-filter-btn.active svg {
  fill: #f59e0b; stroke: #f59e0b;
}
:root[data-theme="light"] .s30-fav-btn, :root[data-theme="light"] .s29-fav-filter-btn, :root[data-theme="light"] .s28-fav-filter-btn {
  background: rgba(245, 158, 11, 0.06); border-color: rgba(245, 158, 11, 0.2); color: #92400e;
}
:root[data-theme="light"] .s30-fav-btn.active, :root[data-theme="light"] .s29-fav-filter-btn.active, :root[data-theme="light"] .s28-fav-filter-btn.active {
  background: #fef3c7; border-color: #f59e0b; color: #92400e;
}
@keyframes favPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* Звезда (favorite) и Info на карточках — единый спек 28×28, без цветных фонов
   (точное соответствие ТЗ: rgba(0,0,0,0.2)+blur(4px), белый stroke, hover 0.4,
   активная звезда — #f59e0b; светлая тема НЕ меняет фон/цвет). */
.s28-fav-btn, .s27-btn-fav, .s29-info-btn, .s30-info-btn {
  position: absolute; top: 10px; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(4px);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 3; transition: background 0.2s ease, transform 0.15s ease; padding: 0;
}
.s28-fav-btn, .s27-btn-fav { left: 10px; }
.s29-info-btn, .s30-info-btn { right: 10px; }
.s28-fav-btn:hover, .s27-btn-fav:hover, .s29-info-btn:hover, .s30-info-btn:hover { background: rgba(0, 0, 0, 0.4); transform: scale(1.12); }
.s28-fav-btn svg, .s27-btn-fav svg, .s29-info-btn svg, .s30-info-btn svg {
  width: 16px; height: 16px; stroke: #fff; fill: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); transition: fill 0.18s, stroke 0.18s;
}
.s28-fav-btn.active svg, .s27-btn-fav.s27-fav-active svg { fill: #f59e0b; stroke: #f59e0b; }

/* 4. Кнопка «Наверх» (scroll to top) */
.s30-scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.25s ease;
}
[data-theme="dark"] .s30-scroll-top {
  background: #1e293b;
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  color: #f1f5f9;
}
.s30-scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.s30-scroll-top:hover {
  background: #f0f9ff;
  border-color: #93c5fd;
  transform: translateY(-2px);
}
[data-theme="dark"] .s30-scroll-top:hover {
  background: rgba(59,130,246,0.15);
  border-color: rgba(59,130,246,0.5);
}
.s30-scroll-top svg {
  width: 20px;
  height: 20px;
  stroke: #3b82f6;
  fill: none;
  stroke-width: 2.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   END SESSION 30+
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   ЭТАЛОННЫЙ УРОК: ЛОГАРИФМЫ — виджеты и декор (reference lesson widgets)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Мини-hero внутри теории: плавающие символы на градиенте ─────────── */
.lg-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 28px 24px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(249,115,22,.10), rgba(30,150,228,.10));
  border: 1px solid var(--border2);
  text-align: center;
}
.lg-hero-symbol {
  position: absolute;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
  opacity: .10;
  pointer-events: none;
  will-change: transform;
  animation: lgSymbolFloat 9s ease-in-out infinite;
}
.lg-hero-symbol.orange { color: #f97316; }
.lg-hero-symbol:nth-child(1) { top: 8%;  left: 6%;  font-size: 2.6rem; animation-delay: 0s; }
.lg-hero-symbol:nth-child(2) { top: 55%; left: 14%; font-size: 1.8rem; animation-delay: 1.4s; animation-duration: 11s; }
.lg-hero-symbol:nth-child(3) { top: 18%; right: 9%; font-size: 3rem;   animation-delay: .6s;  animation-duration: 10s; }
.lg-hero-symbol:nth-child(4) { top: 62%; right: 16%;font-size: 2rem;   animation-delay: 2s;   animation-duration: 8s; }
.lg-hero-symbol:nth-child(5) { top: 38%; left: 46%; font-size: 1.6rem; animation-delay: .9s;  animation-duration: 12s; }
@keyframes lgSymbolFloat {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  50%      { transform: translate(0,-14px) rotate(4deg); }
}
.lg-hero-content { position: relative; z-index: 1; }
.lg-hero-title {
  font-size: 1.5rem; font-weight: 900; color: var(--text);
  background: linear-gradient(135deg, #f97316, var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.lg-hero-sub { font-size: 0.88rem; color: var(--text2); }
@media (prefers-reduced-motion: reduce) { .lg-hero-symbol { animation: none; } }

/* ── Интерактивная формула определения с тултипами на частях ─────────── */
/* Rule: no bordered/framed box around a centred formula-with-tooltips widget
   — plain surface, no border, no outline (some browsers draw a default
   focus/active outline on a focusable-looking inline element, which reads
   as an unwanted purple ring — explicitly suppressed here). Extra top
   padding reserves room so the tooltip (which pops upward) never gets
   visually cramped against the block edge; the real clipping fix is on the
   ancestor (.theory-wrap overflow). A small "i"-hint badge floats near the
   formula so users notice parts are hoverable before they discover it by
   accident. */
.lg-formula-interactive {
  display: flex; justify-content: center; margin: 34px 0 8px; padding: 20px 20px 20px;
  background: var(--surface); border: none; outline: none; border-radius: 14px;
  font-size: 1.5rem; flex-wrap: wrap; gap: 4px; position: relative;
}
/* Complaint #9: the hint is now a real clickable control (not static text) —
   clicking it triggers a guided "tour" that flashes each formula part in
   sequence via JS (see initLgFormulaHint in app.js), so users who don't
   discover hover-to-reveal on their own get an explicit, animated demo. */
.lg-formula-hint {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 0.76rem; color: var(--accent2); text-align: center; margin: 0 auto 18px;
  cursor: pointer; border: none; background: rgba(53,177,250,.1);
  padding: 7px 16px; border-radius: 999px; width: fit-content;
  transition: background .15s ease, transform .15s ease; font-family: inherit;
}
.lg-formula-hint:hover { background: rgba(53,177,250,.18); transform: translateY(-1px); }
.lg-formula-hint:active { transform: translateY(0); }
/* Complaint #14 fix: wrap the "i" icon in a circular badge — same visual
   language as the course-map module cards' .s30-info-btn (circle icon
   button) — instead of a bare stroke-only glyph sitting flush against
   the text. Sits to the LEFT of the hint text (source order + flex). */
.lg-hint-icon {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: rgba(53,177,250,.22);
}
.lg-formula-hint svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--accent2); animation: lgHintPulse 2.2s ease-in-out infinite; }
@keyframes lgHintPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.lg-fpart {
  position: relative; cursor: help; border-radius: 6px; padding: 2px 3px;
  outline: none; transition: background .15s ease;
}
.lg-fpart:hover { background: rgba(53,177,250,.14); }
/* JS-triggered "tour" highlight — a brighter flash pulse distinct from the
   plain :hover tint, so the guided demo reads as an active spotlight. */
.lg-fpart.lg-fpart-tour {
  background: rgba(53,177,250,.28);
  box-shadow: 0 0 0 2px rgba(53,177,250,.35);
}
.lg-fpart .lg-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: #1e293b; color: #f1f5f9; font-size: 0.72rem; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  /* Complaint #3 fix: without an explicit width, this absolutely-positioned
     element was computing its box width from the (much narrower) relative
     ancestor .lg-fpart instead of sizing to its own text content, so only
     the first ~54px of text got a matching dark background — the rest
     rendered pale/unreadable outside the box. width:max-content forces
     correct content-based sizing (site-wide fix for every .lg-tooltip). */
  width: max-content; max-width: min(280px, 80vw);
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 20;
}
.lg-fpart .lg-tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1e293b;
}
.lg-fpart:hover .lg-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Complaint #4: the click-triggered "tour" (see initLgFormulaHint in app.js)
   only added the .lg-fpart-tour spotlight class to flash each part in
   sequence — but the tooltip bubble's visibility was wired to :hover only,
   so the tour highlighted parts one by one without ever popping up the
   explanation text, defeating the point of a guided demo. Reusing the same
   opacity/transform as :hover on .lg-fpart-tour makes each tour step both
   highlight AND reveal its tooltip. */
.lg-fpart.lg-fpart-tour .lg-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── ОДЗ блок — центрирован, без обводки-рамки ────────────────────────── */
/* Rule: no left border, no inset "ring" that visually reads as a frame —
   only a soft background wash for the block, and everything centred
   (title + item row), matching the base centred-alignment rule below. */
.lg-odz-block {
  background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(249,115,22,.04));
  box-shadow: none;
  border-radius: 14px; padding: 18px 20px; margin: 16px 0;
  text-align: center;
}
.lg-odz-title {
  font-size: 0.94rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: #f59e0b; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.lg-odz-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lg-odz-item {
  background: var(--card); border-radius: 10px; padding: 9px 16px;
  font-size: 1.08rem; box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* ── SVG-диаграмма степень↔логарифм со скролл-анимацией стрелок ──────── */
/* Complaint #6: the diagram used to be hard-capped at 360px (inline
   style="max-width:360px" on the <svg>) inside a ~1000px-wide theory
   column — every card around it went edge-to-edge while this one sat
   small and text-dense, reading as "disproportionate". Scoped to
   .lg-diagram-wrap (not the shared .th-svg-wrap used by other lessons'
   diagrams) so only this specific figure grows to fill its card; the
   SVG's viewBox scaling keeps strokes/text crisp and proportional as it
   stretches, unlike a canvas which would blur. */
.lg-diagram-wrap { margin: 20px 0; }
.lg-diagram-wrap .th-svg-wrap svg { max-width: 480px; width: 100%; }
.lg-diagram-hint { margin-top: -2px; }
.lg-diagram-wrap svg .lg-arrow-path {
  stroke-dasharray: 140; stroke-dashoffset: 140;
  transition: stroke-dashoffset 1.1s ease;
}
.lg-diagram-wrap.is-visible svg .lg-arrow-path { stroke-dashoffset: 0; }
.lg-diagram-wrap svg .lg-arrow-path.d2 { transition-delay: .3s; }

/* ── Interactive arrows (complaint #6) ──────────────────────────────────
   Rule: no bare static arrow — the whole group is a hoverable/focusable
   "button" (wide invisible .lg-arrow-hit stroke makes it easy to catch the
   pointer along the thin visible line), on hover/focus the visible path
   thickens slightly and a small white pulse dot animates once along its
   length (driven by initLgArrowInteractive in app.js via
   getPointAtLength) to visually reinforce "this is a live transition",
   not just a static diagram connector. */
.lg-arrow-group { cursor: pointer; }
.lg-arrow-group .lg-arrow-hit { pointer-events: stroke; }
.lg-arrow-group .lg-arrow-path {
  transition: stroke-width .2s ease, filter .2s ease;
}
.lg-arrow-group:hover .lg-arrow-path,
.lg-arrow-group:focus-visible .lg-arrow-path,
.lg-arrow-group.is-active .lg-arrow-path {
  stroke-width: 3.5;
  filter: drop-shadow(0 0 4px rgba(30,150,228,.5));
}
/* Complaint #6: clicking the arrow left an "ugly black focus-ring" — some
   browsers apply the default UA focus outline on plain :focus (not just
   the newer :focus-visible), so suppressing only :focus-visible left a
   gap. outline:none on :focus removes it everywhere; keyboard users still
   get a clear, on-brand cue via the drop-shadow glow above (already
   triggered on :focus-visible) instead of a bare black rectangle. */
.lg-arrow-group:focus,
.lg-arrow-group:focus-visible { outline: none; }
.lg-arrow-pulse { pointer-events: none; }

/* ── Карточки свойств ───────────────────────────────────────────────────
   Complaint #7: the previous 3D mouse-tilt (perspective + rotateX/rotateY
   following the cursor) is REMOVED — spinning a flat text/formula card in
   3D space doesn't represent anything volumetric, it read as a gimmick.
   3D rotation is reserved exclusively for content that IS actually a 3D
   shape (see any dedicated shape-visual component elsewhere); a plain
   property card instead gets a calm, simple lift + shadow-bloom on
   hover — still tactile, but not spinning. */
/* Rule: content inside each property card is CENTRED (name/formula/example),
   matching the base centred-alignment rule for constative blocks; a
   favourite-star toggle sits in the top-right corner of every card so a
   student can pin the properties they personally want to revisit. */
.lg-props-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0;
}
.lg-tilt-card {
  background: var(--card); border-radius: 14px; padding: 18px 18px;
  box-shadow: 0 4px 18px rgba(0,0,0,.07);
  transition: transform .2s ease, box-shadow .2s ease;
  text-align: center; position: relative;
}
.lg-tilt-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(30,150,228,.18); }
/* Название — сверху карточки, формула — под ним (порядок задаётся в HTML) */
.lg-tilt-card-name {
  font-size: 0.68rem; color: var(--accent2); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px;
  padding-right: 26px; /* room for the star button */
}
.lg-tilt-card-formula { font-size: 1.18rem; margin-bottom: 10px; }
/* Пример — часть содержания карточки, показан всегда, без сворачивания */
.lg-tilt-card-example {
  margin-top: 0; padding-top: 10px; border-top: 1px dashed var(--border2);
  font-size: 0.92rem; color: var(--text2); text-align: left;
}
.lg-tilt-fav {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: none; border: none; cursor: pointer; padding: 2px;
  color: var(--text3); transition: color .15s ease, transform .15s ease;
  line-height: 1;
}
.lg-tilt-fav svg { width: 18px; height: 18px; display: block; }
.lg-tilt-fav:hover { color: #f59e0b; transform: scale(1.15); }
.lg-tilt-fav.is-fav { color: #f59e0b; }
.lg-tilt-fav.is-fav svg { fill: #f59e0b; }
/* Favourited card gets a subtle gold ring so it's visually clear WHY it
   rose to the top of the grid (complaint #7), not just an isolated star. */
.lg-tilt-card:has(.lg-tilt-fav.is-fav) { box-shadow: 0 0 0 1.5px rgba(245,158,11,.4), 0 4px 18px rgba(0,0,0,.07); }
/* Reorder transition: briefly fade+lift while the card moves position in
   the DOM, so favouriting reads as "rising to the top", not a silent jump. */
.lg-card-reordering { animation: lgCardRise .38s ease; }
@keyframes lgCardRise {
  0% { opacity: .35; transform: translateY(10px) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 640px) { .lg-props-grid { grid-template-columns: 1fr; } }

/* ── lg/ln калькулятор-демо ────────────────────────────────────────────── */
/* Rule (point 10): formula reference + interactive calculator now live in
   ONE consistent surface — same blue-tinted gradient as .inf-formula-card
   (formerly the formula text sat in a separate blue card ABOVE a plain-grey
   calculator card; merged into a single block so they read as one unit). */
.lg-calc-card {
  background: linear-gradient(135deg, rgba(30,150,228,0.1) 0%, rgba(30,150,228,0.05) 100%);
  box-shadow: 0 3px 18px rgba(30,150,228,.1);
  border: none; border-radius: 14px;
  padding: 20px 22px; margin: 18px 0; text-align: center;
}
.lg-calc-card .lg-calc-input-row { padding-top: 4px; border-top: 1px dashed rgba(30,150,228,.25); }
.lg-calc-input-row { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.lg-calc-input-row label { font-size: 0.85rem; color: var(--text2); }
.lg-calc-input {
  width: 120px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--border2);
  background: var(--card); color: var(--text); font-size: 1rem; text-align: center; font-weight: 700;
}
.lg-calc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30,150,228,.14); }
.lg-calc-results { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.lg-calc-result {
  background: var(--card); border-radius: 12px; padding: 12px 20px; min-width: 130px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
/* Rule: never uppercase — "lg x"/"ln x" are live math notation, not a
   category label; text-transform:uppercase here rendered them as
   "LG X"/"LN X" which is not valid mathematical notation. */
.lg-calc-result-label { font-size: 0.7rem; color: var(--text3); font-weight: 700; text-transform: none; letter-spacing: .02em; margin-bottom: 4px; }
.lg-calc-result-value {
  font-size: 1.3rem; font-weight: 800; color: var(--accent);
  transition: transform .18s ease;
}
.lg-calc-result-value.lg-pulse { transform: scale(1.15); }
.lg-calc-result.err .lg-calc-result-value { color: var(--text3); font-size: 0.82rem; font-weight: 600; }

/* ── Интерактивный график y = logₐx с ползунком ─────────────────────── */
.lg-graph-card {
  background: var(--card); border-radius: 16px; padding: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08); margin: 18px 0;
}
/* Complaint #9: drop the separate boxed canvas background — in light theme
   var(--surface) is a near-white wash that reads as a jarring white
   rectangle floating inside the (darker) .lg-graph-card. The canvas is
   fully transparent internally (initLgGraph only clearRect()s, never
   fills a background), so removing this lets the card's own background
   show through uninterrupted. */
.lg-graph-canvas-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
.lg-graph-canvas-wrap canvas { max-width: 100%; border-radius: 10px; background: transparent; }
.lg-graph-controls { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lg-graph-controls label { font-size: 0.82rem; color: var(--text2); font-weight: 600; }
.lg-graph-slider { width: 220px; accent-color: var(--accent); }
.lg-graph-a-val { font-weight: 800; color: var(--accent); min-width: 46px; text-align: center; }

/* ── Мини-практика с конфетти при верном ответе ───────────────────────── */
.lg-quiz-block { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.lg-quiz-item {
  background: var(--card); border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06); position: relative; overflow: hidden;
}
.lg-quiz-item.correct { box-shadow: inset 0 0 0 2px rgba(16,185,129,.5); }
.lg-quiz-item.wrong-shake { animation: lgShake .35s ease; }
@keyframes lgShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
.lg-quiz-q { font-size: 0.94rem; margin-bottom: 10px; color: var(--text); }
.lg-quiz-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lg-quiz-input {
  flex: 1; min-width: 100px; padding: 9px 12px; border-radius: 9px;
  border: 1.5px solid var(--border2); background: var(--surface); color: var(--text); font-size: 0.92rem;
}
.lg-quiz-input:focus { outline: none; border-color: var(--accent); }
.lg-quiz-check-btn {
  background: var(--accent-g); color: #fff; border: none; border-radius: 9px;
  padding: 9px 16px; font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: transform .15s ease;
}
.lg-quiz-check-btn:hover { transform: translateY(-1px); }
.lg-quiz-feedback { font-size: 0.82rem; font-weight: 700; margin-top: 8px; }
.lg-quiz-feedback.ok { color: var(--green-l); }
.lg-quiz-feedback.no { color: var(--red-l); }
.lg-confetti-piece {
  position: absolute; top: 40%; left: 50%; width: 7px; height: 7px; border-radius: 2px;
  pointer-events: none; animation: lgConfettiBurst .8s ease-out forwards;
}
@keyframes lgConfettiBurst {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--lgx), var(--lgy)) rotate(var(--lgr)) scale(.4); opacity: 0; }
}

@media (max-width: 640px) {
  .lg-hero { padding: 20px 16px; }
  .lg-hero-title { font-size: 1.2rem; }
  .lg-formula-interactive { font-size: 1.05rem; padding: 14px; }
  .lg-calc-results { flex-direction: column; align-items: center; }
  .lg-graph-slider { width: 160px; }
  .lg-props-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Complaint #13 — SIDEBAR BRAND REDESIGN
   The old brand read as a generic gradient-tile app icon + same-weight
   two-tone wordmark — no tie to the subject matter beyond the Σ glyph.
   Two changes, deliberately minimal (one signature move, not a rebuild):
     1. Icon tile: faint coordinate-grid / exercise-book texture behind the Σ
        (added directly in the SVG markup in index.tsx — evokes graph paper).
     2. Wordmark: "Math" set in italic serif — the real math-textbook
        convention for typesetting variables/terms — contrasted with
        "Practicum" staying plain sans-serif. Colour/size/weight are left
        exactly as the existing SESSION 19 rule (a.v2-sidebar-brand .v2-brand-math,
        same selector chain/specificity) already sets them correctly in both
        themes — verified via getComputedStyle contrast is safe (7.25:1 dark,
        and the light-theme override at line ~18873 already swaps to a dark
        near-black colour against the near-white light sidebar, so no colour
        changes needed here, only the italic-serif style addition).
   Placed last in the file so it wins at matching specificity against the
   redundant historical SESSION 19/21/24 blocks targeting the same selector.
   ═══════════════════════════════════════════════════════════════════════════ */
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-brand-math {
  font-family: inherit !important;
  font-style: normal !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 26 — SIDEBAR LOGO REDESIGN: orbital "atom" icon
   Replaces the old Σ-on-gradient-tile SVG with a pure-CSS 3D orbital model
   (4 tilted, independently-spinning rings + a glowing core — no emoji, no
   flat glyph). Two label treatments, cross-faded by opacity:
     - Collapsed sidebar (.v2-sidebar--collapsed): tight curved-arc
       "MathPracticum" riding just above the icon (SVG <textPath>, static —
       does not spin with the rings).
     - Expanded sidebar: unchanged .v2-sidebar-brand-title (Math/Practicum
       stacked wordmark) sitting to the right of the icon, as everywhere
       else on the site.
   Placed last in the file so it wins at matching specificity against the
   historical .v2-sidebar-logo width/height blocks earlier in this file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §1  Icon container: fixed 32×32, perspective for the 3D rings ───────── */
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-sidebar-logo {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  perspective: 120px !important;
}
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed a.v2-sidebar-brand .v2-sidebar-logo {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* ── §2  The atom itself: 4 tilted rings + electrons + glowing core ──────── */
.mp-atom {
  position: relative;
  width: 32px;
  height: 32px;
  transform-style: preserve-3d;
  animation: mpTumble 4.2s ease-in-out infinite;
}
.mp-ring-tilt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.mp-ring-spin {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  box-sizing: border-box;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.mp-electron {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: #fff;
}
.mp-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #fff;
  animation: mpCoreGlow 2.4s ease-in-out infinite;
}

@keyframes mpSpin    { from { transform: rotateZ(0deg);   } to { transform: rotateZ(360deg); } }
@keyframes mpSpinRev { from { transform: rotateZ(360deg); } to { transform: rotateZ(0deg);   } }
@keyframes mpCoreGlow {
  0%, 100% { box-shadow: 0 0 4px 1px #fff; }
  50%      { box-shadow: 0 0 8px 3px #fff; }
}
@keyframes mpTumble {
  0%, 100% { transform: rotateX(-6deg) rotateY(0deg); }
  50%      { transform: rotateX(6deg) rotateY(12deg); }
}

/* Ring tilts — recipe of icon "№187" (Мульти palette, 4-ring config) */
.mp-ring-tilt--1 { transform: rotateX(70deg) rotateY(0deg); }
.mp-ring-tilt--2 { transform: rotateX(70deg) rotateY(45deg); }
.mp-ring-tilt--3 { transform: rotateX(70deg) rotateY(90deg); }
.mp-ring-tilt--4 { transform: rotateX(70deg) rotateY(-45deg); }

/* Ring 1 & 3: "comet" trail (conic-gradient + mask), Ring 2 & 4: solid stroke */
.mp-ring-spin--1 {
  animation-name: mpSpin;
  animation-duration: 4s;
  border: none;
  background: conic-gradient(from 0deg, transparent 0%, #60a5fa 30%, transparent 52%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.2px), #000 100%, transparent);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.2px), #000 100%, transparent);
}
.mp-ring-spin--2 {
  animation-name: mpSpinRev;
  animation-duration: 3.4s;
  border: 1.2px solid #22d3ee;
  opacity: 0.92;
}
.mp-ring-spin--3 {
  animation-name: mpSpin;
  animation-duration: 4.6s;
  border: none;
  background: conic-gradient(from 0deg, transparent 0%, #35B1FA 30%, transparent 52%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.2px), #000 100%, transparent);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.2px), #000 100%, transparent);
}
.mp-ring-spin--4 {
  animation-name: mpSpinRev;
  animation-duration: 3.8s;
  border: 1.2px solid #2dd4bf;
  opacity: 0.92;
}

.mp-electron--1  { transform: rotate(0deg)   translateX(10px); box-shadow: 0 0 3px 1px #60a5fa; }
.mp-electron--3  { transform: rotate(0deg)   translateX(10px); box-shadow: 0 0 3px 1px #35B1FA; }
.mp-electron--4a { transform: rotate(0deg)   translateX(10px); box-shadow: 0 0 3px 1px #2dd4bf; }
.mp-electron--4b { transform: rotate(180deg) translateX(10px); box-shadow: 0 0 3px 1px #2dd4bf; }

/* ── §3  Collapsed-state curved arc label — tight gap above the icon ─────── */
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-logo-arc {
  position: absolute !important;
  left: 50% !important;
  bottom: 100% !important;
  transform: translateX(-50%) !important;
  width: 66px !important;
  height: 16px !important;
  margin-bottom: 1.5px !important;
  opacity: 0 !important;
  transition: opacity 0.22s ease !important;
  pointer-events: none !important;
  overflow: visible !important;
}
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed a.v2-sidebar-brand .v2-logo-arc {
  opacity: 1 !important;
}
.v2-logo-arc-text { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 800; }
/* Beats the legacy ".v2-sidebar-logo svg { width:32px;height:32px }" rules from
   earlier sessions, which would otherwise squash this 66×16 arc-label SVG down
   to a 32×32 square (specificity: same selector chain + one extra class). */
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-sidebar-logo svg.v2-logo-arc {
  width: 66px !important;
  height: 16px !important;
}

/* ── §4  Expanded-state wordmark: fade in/out, matches the rest of the site ─ */
:root body div.v2-shell aside.v2-sidebar a.v2-sidebar-brand .v2-sidebar-brand-title {
  opacity: 1 !important;
  transition: opacity 0.22s ease !important;
  display: flex !important;
  width: auto !important;
}
:root body div.v2-shell aside.v2-sidebar.v2-sidebar--collapsed a.v2-sidebar-brand .v2-sidebar-brand-title {
  /* Must explicitly re-declare display here: several legacy SESSION blocks
     (lines ~18304, ~19832, ~20166) set "display:none !important" on this
     exact element in the collapsed state. CSS resolves per-property, not
     per-block, so without this override those older !important rules would
     still win for the `display` property alone (later-wins only applies
     when the SAME property is redeclared) and the wordmark would vanish
     instantly instead of cross-fading via opacity. */
  display: flex !important;
  opacity: 0 !important;
  position: absolute !important;
  left: 56px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  width: auto !important;
  overflow: visible !important;
}


/* ── §4  Example-box cleanup (Task 4) ───────────────────────────────────── */
/* Remove the blue/indigo tinted background from example boxes entirely */
.theory-body .example-box,
.theory-body [class*="example-box"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 8px 0 !important;
}
/* Hide the "Пример N —" label heading inside example boxes */
.theory-body .example-label,
.theory-body [class*="example-label"] {
  display: none !important;
}

/* ── §5  Math Keyboard Panel (Task 6) ───────────────────────────────────── */
.math-kbd-panel {
  background: linear-gradient(135deg, rgba(22,22,38,0.98) 0%, rgba(30,30,50,0.98) 100%);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 10px 12px;
  margin-top: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 500px;
}
.math-kbd-panel.math-kbd-open { display: flex; }

.math-kbd-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.math-kbd-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  padding: 2px 4px;
  width: 100%;
}
.math-kbd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #e2e8f0;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, transform 0.1s;
  user-select: none;
  -webkit-user-select: none;
  font-family: 'Courier New', 'JetBrains Mono', monospace;
}
.math-kbd-btn:hover {
  background: rgba(30,150,228,0.25);
  border-color: rgba(30,150,228,0.5);
  transform: translateY(-1px);
}
.math-kbd-btn:active {
  transform: translateY(0) scale(0.93);
  background: rgba(30,150,228,0.4);
}
.math-kbd-btn--wide { min-width: 52px; }
.math-kbd-btn--op {
  background: rgba(30,150,228,0.12);
  border-color: rgba(30,150,228,0.25);
  color: #a5b4fc;
}
.math-kbd-btn--num {
  background: rgba(255,255,255,0.09);
  font-weight: 700;
  font-family: system-ui, sans-serif;
}

/* Toggle button — appears at top of each task's input area */
.math-kbd-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.55);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.math-kbd-toggle-btn:hover,
.math-kbd-toggle-btn.math-kbd-toggle--active {
  background: rgba(30,150,228,0.2);
  color: #a5b4fc;
  border-color: rgba(30,150,228,0.4);
}
.math-kbd-toggle-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Input wrap layout when keyboard toggle is present */
.task-input-wrap {
  position: relative;
}
.task-input-wrap-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   SESSION 28 FIX — Example-box / th-example-block / ПРИМЕР badge removal
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Remove the "ПРИМЕР" pseudo-element from th-example-block containers */
.theory-body .th-example-block::before,
.th-example-block::before {
  content: none !important;
  display: none !important;
}

/* 2. Hide the blue badge ".th-example-step-n" that shows "Пример" text */
.theory-body .th-example-step-n,
.th-example-step-n {
  display: none !important;
}

/* 3. Remove th-example-block background (the outer blue container) */
.theory-body .th-example-block,
.th-example-block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
}

/* 4. Light mode override — beats [data-theme="light"] specificity */
[data-theme="light"] .theory-body .example-box,
[data-theme="light"] .theory-body [class*="example-box"],
:root .theory-body .example-box,
:root .theory-body [class*="example-box"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 5. Also kill example-label in light mode */
[data-theme="light"] .theory-body .example-label,
:root .theory-body .example-label {
  display: none !important;
}

/* 6. Math keyboard corner button — same style as task-review-btn */
.task-kbd-corner-btn {
  margin-left: 0 !important;
}
.task-kbd-corner-btn.in-review {
  background: rgba(30,150,228,0.18) !important;
  border-color: rgba(30,150,228,0.45) !important;
  color: #a5b4fc !important;
}

/* Progress bar visible — auto-dismiss restored to 5.8s */
.ach-popup-progress-bar { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   ПРИМЕР REMOVAL — FINAL OVERRIDE (max specificity, catches all contexts)
   Screenshot 2 confirmed: both ::before "ПРИМЕР" header AND .th-example-step-n
   blue pill badge still visible. These rules use !important at highest specificity.
   ══════════════════════════════════════════════════════════════════════════ */

/* Kill the ::before "ПРИМЕР" pseudo-element in ALL contexts */
.th-example-block::before,
.theory-body .th-example-block::before,
[data-theme] .th-example-block::before,
[data-theme="dark"] .th-example-block::before,
[data-theme="light"] .th-example-block::before,
body .th-example-block::before {
  content: "" !important;
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
}

/* Kill the blue "Пример" pill badge (.th-example-step-n) in ALL contexts */
.th-example-step-n,
.theory-body .th-example-step-n,
[data-theme] .th-example-step-n,
[data-theme="dark"] .th-example-step-n,
[data-theme="light"] .th-example-step-n,
.th-example-step .th-example-step-n,
.th-example-step:last-child .th-example-step-n,
body .th-example-step-n {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
}

/* Remove blue background from th-example-block container itself */
.th-example-block,
.theory-body .th-example-block,
[data-theme] .th-example-block,
[data-theme="dark"] .th-example-block,
[data-theme="light"] .th-example-block {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-top: 0 !important;
}

/* Kill .example-label "Пример" text in all contexts */
.example-label,
.theory-body .example-label,
[data-theme] .example-label,
[data-theme="light"] .example-label,
[data-theme="dark"] .example-label {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   3D CARD SYSTEM v2  —  real perspective tilt + card visual illustrations
   ════════════════════════════════════════════════════════════════════════

   lg-tilt-card now carries true CSS perspective: the card tilts in 3D
   following the cursor (handled by JS in app.js, class lg-tilt--active),
   while the content floats at a slight z-offset giving tactile depth.
   The background SVG illustration (lg-card-visual) is a decorative
   element that peeks from the bottom-right corner, adds topic identity
   without cluttering the formula area.
*/

/* ── CARD 3D PERSPECTIVE WRAPPER ──────────────────────────────── */
.lg-props-grid {
  perspective: 900px;
}

/* ── RE-ENABLE GENUINE 3D TILT ─────────────────────────────────── */
.lg-tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .12s ease, box-shadow .12s ease;
}
/* When JS tilt is active the :hover lift is suppressed — JS controls it */
.lg-tilt-card.js-tilting { transition: transform .06s ease; }
.lg-tilt-card.js-tilting:hover { transform: none; }

/* Card inner content pops forward slightly (+z) */
.lg-tilt-card-name,
.lg-tilt-card-formula,
.lg-tilt-card-example {
  transform: translateZ(8px);
  will-change: transform;
}

/* ── CARD VISUAL (inline SVG illustration) ────────────────────── */
.lg-card-visual {
  position: absolute;
  bottom: 8px;
  right: 10px;
  width: 56px;
  height: 56px;
  opacity: .13;
  pointer-events: none;
  transition: opacity .25s ease;
  transform: translateZ(2px);
}
.lg-tilt-card:hover .lg-card-visual { opacity: .22; }

/* Shine overlay that sweeps across on hover (pure CSS) */
.lg-tilt-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255,255,255,.18) 0%,
    transparent 50%,
    rgba(255,255,255,.06) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  transform: translateZ(12px);
}
.lg-tilt-card:hover::after { opacity: 1; }

/* ── 3D HERO SHAPES ─────────────────────────────────────────────── */
/* Rotating 3D geometric shapes inside .lg-hero banners */
.lg-hero-3d-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.lg-3d-shape {
  position: absolute;
  transform-style: preserve-3d;
  animation: shape3dSpin 16s linear infinite;
  opacity: .12;
}
.lg-3d-shape svg { display: block; }
.lg-3d-shape:nth-child(1) {
  top: 10%; right: 8%; width: 52px; height: 52px;
  animation-duration: 14s; animation-delay: 0s;
}
.lg-3d-shape:nth-child(2) {
  bottom: 12%; left: 7%; width: 40px; height: 40px;
  animation-duration: 19s; animation-delay: -5s;
  animation-direction: reverse;
}
.lg-3d-shape:nth-child(3) {
  top: 40%; right: 24%; width: 28px; height: 28px;
  animation-duration: 11s; animation-delay: -8s;
}

@keyframes shape3dSpin {
  0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  33%  { transform: rotateX(120deg) rotateY(80deg) rotateZ(40deg); }
  66%  { transform: rotateX(240deg) rotateY(160deg) rotateZ(80deg); }
  100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

/* Slower float for the hero symbols — more graceful */
@keyframes lgSymbolFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(4px, -10px) rotate(3deg); }
  75%      { transform: translate(-4px, -6px) rotate(-2deg); }
}

/* ── CARD COLOR ACCENTS (per divisor) ──────────────────────────── */
.lg-tilt-card[data-div="2"] { border-top: 2.5px solid #1e96e4; }
.lg-tilt-card[data-div="3"] { border-top: 2.5px solid #10b981; }
.lg-tilt-card[data-div="4"] { border-top: 2.5px solid #35B1FA; }
.lg-tilt-card[data-div="5"] { border-top: 2.5px solid #f59e0b; }
.lg-tilt-card[data-div="6"] { border-top: 2.5px solid #ec4899; }
.lg-tilt-card[data-div="8"] { border-top: 2.5px solid #06b6d4; }
.lg-tilt-card[data-div="9"] { border-top: 2.5px solid #84cc16; }
.lg-tilt-card[data-div="10"] { border-top: 2.5px solid #f97316; }
.lg-tilt-card[data-div="11"] { border-top: 2.5px solid #e11d48; }
.lg-tilt-card[data-div="25"] { border-top: 2.5px solid #0ea5e9; }

/* ── PROBABILITY CARD ACCENTS ──────────────────────────────────── */
.lg-tilt-card[data-prob="impossible"] { border-top: 2.5px solid #6b7280; }
.lg-tilt-card[data-prob="certain"]    { border-top: 2.5px solid #10b981; }
.lg-tilt-card[data-prob="complement"] { border-top: 2.5px solid #1e96e4; }
.lg-tilt-card[data-prob="independent"]{ border-top: 2.5px solid #f59e0b; }

/* ── STATISTICS CARD ACCENTS ───────────────────────────────────── */
.lg-tilt-card[data-stat="mean"]   { border-top: 2.5px solid #1e96e4; }
.lg-tilt-card[data-stat="median"] { border-top: 2.5px solid #10b981; }
.lg-tilt-card[data-stat="mode"]   { border-top: 2.5px solid #f59e0b; }
.lg-tilt-card[data-stat="range"]  { border-top: 2.5px solid #ec4899; }

/* ── HERO DEPTH BADGE ──────────────────────────────────────────── */
/* Small 3D chip displayed inside hero — module keyword */
.lg-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .78rem;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: .05em;
  backdrop-filter: blur(4px);
  transform: translateZ(4px);
}

/* ── CARD DEPTH LABEL (small topic tag bottom-left) ────────────── */
.lg-card-topic {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--accent);
  color: #fff;
  opacity: .7;
  transform: translateZ(6px);
}

/* ── DIVISIBILITY VISUAL BLOCKS (number grid animation) ─────────── */
.div-number-visual {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 14px 0;
  justify-content: center;
}
.div-number-visual .dnv-cell {
  width: 34px; height: 34px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800;
  border: 1.5px solid var(--border2);
  background: var(--surface);
  color: var(--text2);
  transition: background .2s, color .2s, transform .2s;
  cursor: default;
}
.div-number-visual .dnv-cell.highlight {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.08);
}

/* ── PROBABILITY VISUAL: animated probability bar ──────────────── */
.prob-bar-visual {
  margin: 14px 0;
  position: relative;
  height: 22px;
  border-radius: 11px;
  background: var(--surface);
  border: 1.5px solid var(--border2);
  overflow: hidden;
}
.prob-bar-visual .pbv-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #1e96e4, #06b6d4);
  transition: width .8s cubic-bezier(.25,.8,.25,1);
}
.prob-bar-visual .pbv-label {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .72rem;
  font-weight: 800;
  color: var(--text2);
}

/* ── STATISTICS VISUAL: mini bar chart ─────────────────────────── */
.stat-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 48px;
  margin: 10px auto;
  width: fit-content;
}
.stat-bar-chart .sbc-bar {
  width: 14px;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
  transition: height .6s ease;
  position: relative;
}
.stat-bar-chart .sbc-bar.mean-bar {
  background: #1e96e4;
  outline: 2px dashed #1e96e4;
  outline-offset: 2px;
}

/* ── 3D CUBE (CSS-only, used in divisibility hero) ─────────────── */
.css3d-cube-wrap {
  perspective: 280px;
  width: 54px; height: 54px;
  position: absolute;
  pointer-events: none;
}
.css3d-cube {
  width: 36px; height: 36px;
  position: relative;
  transform-style: preserve-3d;
  animation: cubeSpin3d 12s linear infinite;
  margin: 9px;
}
.css3d-cube .cube-face {
  position: absolute;
  width: 36px; height: 36px;
  border: 2px solid rgba(30,150,228,.5);
  background: rgba(30,150,228,.07);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; color: rgba(30,150,228,.6);
}
.css3d-cube .cube-face.front  { transform: translateZ(18px); }
.css3d-cube .cube-face.back   { transform: translateZ(-18px) rotateY(180deg); }
.css3d-cube .cube-face.right  { transform: translateX(18px) rotateY(90deg); }
.css3d-cube .cube-face.left   { transform: translateX(-18px) rotateY(-90deg); }
.css3d-cube .cube-face.top    { transform: translateY(-18px) rotateX(90deg); }
.css3d-cube .cube-face.bottom { transform: translateY(18px) rotateX(-90deg); }

@keyframes cubeSpin3d {
  0%   { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(480deg); }
}

/* ── 3D COIN (for probability hero) ────────────────────────────── */
.css3d-coin-wrap {
  perspective: 300px;
  width: 60px; height: 60px;
  position: absolute;
  pointer-events: none;
}
.css3d-coin {
  width: 44px; height: 44px;
  position: relative;
  transform-style: preserve-3d;
  animation: coinFlip3d 4s ease-in-out infinite;
  margin: 8px;
  border-radius: 50%;
}
.css3d-coin .coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  font-weight: 900;
  border: 3px solid;
}
.css3d-coin .coin-face.heads {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: #d97706;
  color: #1379BD;
}
.css3d-coin .coin-face.tails {
  background: linear-gradient(135deg, #6FC3F7, #1379BD);
  border-color: #15679D;
  color: #fbbf24;
  transform: rotateY(180deg);
}

@keyframes coinFlip3d {
  0%   { transform: rotateY(0deg); }
  45%  { transform: rotateY(900deg); }
  55%  { transform: rotateY(900deg); }
  100% { transform: rotateY(1800deg); }
}

/* ── 3D DICE (for probability) ──────────────────────────────────── */
.css3d-dice-wrap {
  perspective: 320px;
  width: 58px; height: 58px;
  position: absolute;
  pointer-events: none;
}
.css3d-dice {
  width: 40px; height: 40px;
  position: relative;
  transform-style: preserve-3d;
  animation: diceRoll3d 6s ease-in-out infinite;
  margin: 9px;
}
.css3d-dice .dice-face {
  position: absolute;
  width: 40px; height: 40px;
  border: 2px solid rgba(16,185,129,.6);
  background: rgba(16,185,129,.08);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  color: rgba(16,185,129,.8);
  font-weight: 900;
}
.css3d-dice .dice-face.d1 { transform: translateZ(20px); }
.css3d-dice .dice-face.d2 { transform: translateZ(-20px) rotateY(180deg); }
.css3d-dice .dice-face.d3 { transform: translateX(20px) rotateY(90deg); }
.css3d-dice .dice-face.d4 { transform: translateX(-20px) rotateY(-90deg); }
.css3d-dice .dice-face.d5 { transform: translateY(-20px) rotateX(90deg); }
.css3d-dice .dice-face.d6 { transform: translateY(20px) rotateX(-90deg); }

@keyframes diceRoll3d {
  0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  30%  { transform: rotateX(90deg) rotateY(180deg) rotateZ(45deg); }
  60%  { transform: rotateX(180deg) rotateY(90deg) rotateZ(90deg); }
  90%  { transform: rotateX(270deg) rotateY(270deg) rotateZ(135deg); }
  100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(180deg); }
}

/* ── 3D CHART BARS (for statistics hero) ───────────────────────── */
.css3d-bars-wrap {
  perspective: 400px;
  width: 80px; height: 60px;
  position: absolute;
  pointer-events: none;
  transform-style: preserve-3d;
}
.css3d-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 50px;
  transform-style: preserve-3d;
  animation: barsWobble3d 8s ease-in-out infinite;
  transform: rotateX(-15deg) rotateY(-20deg);
}
.css3d-bar {
  width: 14px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(0deg, #1e96e4 0%, #35B1FA 100%);
  transform-style: preserve-3d;
  position: relative;
}
.css3d-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 100%; right: -4px;
  height: 100%;
  background: linear-gradient(0deg, #15679D, #1e96e4);
  transform: skewY(-45deg) scaleX(.3);
  transform-origin: top left;
  border-radius: 0 3px 3px 0;
}
@keyframes barsWobble3d {
  0%,100% { transform: rotateX(-15deg) rotateY(-20deg); }
  50%     { transform: rotateX(-10deg) rotateY(20deg); }
}

/* ── CARD GLOW on hover ─────────────────────────────────────────── */
.lg-tilt-card[data-div]:hover  { box-shadow: 0 16px 40px rgba(30,150,228,.22); }
.lg-tilt-card[data-prob]:hover { box-shadow: 0 16px 40px rgba(16,185,129,.20); }
.lg-tilt-card[data-stat]:hover { box-shadow: 0 16px 40px rgba(30,150,228,.20); }

@media (prefers-reduced-motion: reduce) {
  .css3d-cube, .css3d-coin, .css3d-dice, .css3d-bars { animation: none; }
  .lg-3d-shape { animation: none; }
  .lg-tilt-card { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   LOGO & CARD FIXES  (session UX overhaul)
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. LOGO: never italic, always blue-white gradient ──────────── */
/* Landing page logo text */
.lp-logo-text {
  font-style: normal !important;
  font-weight: 900 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(135deg, #60a5fa 0%, #e0f2fe 50%, #35B1FA 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Sidebar brand Math+Practicum wordmark */
.v2-brand-math {
  font-style: normal !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #60a5fa, #e0f2fe) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.v2-brand-practicum {
  font-style: normal !important;
  font-weight: 500 !important;
  background: linear-gradient(135deg, #93c5fd, #a5b4fc) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Arc text in collapsed sidebar — same gradient */
.v2-logo-arc-text {
  font-style: normal !important;
  font-weight: 700 !important;
}

/* Light theme override: deep indigo gradient */
[data-theme="light"] .lp-logo-text {
  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 50%, #1e96e4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
[data-theme="light"] .v2-brand-math {
  background: linear-gradient(135deg, #1d4ed8, #0284c7) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
[data-theme="light"] .v2-brand-practicum {
  background: linear-gradient(135deg, #3b82f6, #1e96e4) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── 2. MODULE CARD TITLE: max 2 lines, readable, no ellipsis ───── */
.module-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  min-height: 2.3em !important;
  max-height: 2.85em !important;
}

/* ── 3. MODULE CARD: add topic-relevant visual background ──────────
   Each card gets a subtle SVG-like pseudo-element based on data-track
   (school=geometry mesh, oge=equation, ege=integral curve, olymp=star) */
.module-card {
  position: relative;
  overflow: hidden;
}
.module-card::before {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 64px; height: 64px;
  pointer-events: none;
  opacity: 0.06;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  transition: opacity .2s;
}
.module-card:hover::before { opacity: 0.11; }

/* track-specific SVG data URIs (simple, topic-appropriate) */
.module-card[data-track="school"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Ccircle cx='32' cy='32' r='28' stroke='%231e96e4' stroke-width='2'/%3E%3Cline x1='4' y1='32' x2='60' y2='32' stroke='%231e96e4' stroke-width='1.5'/%3E%3Cline x1='32' y1='4' x2='32' y2='60' stroke='%231e96e4' stroke-width='1.5'/%3E%3C/svg%3E");
}
.module-card[data-track="oge"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M8 48 L20 20 L32 36 L44 16 L56 28' stroke='%2322c55e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.module-card[data-track="ege"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M8 48 Q20 8 32 36 Q44 56 56 16' stroke='%23f59e0b' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='8' y1='56' x2='56' y2='56' stroke='%23f59e0b' stroke-width='1'/%3E%3C/svg%3E");
}
.module-card[data-track="olymp"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpolygon points='32,6 38,24 58,24 42,36 48,54 32,42 16,54 22,36 6,24 26,24' stroke='%23ef4444' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── 4. COURSE/MODULE CARD: card image area (visual header strip) ── */
.module-card-visual {
  width: 100%;
  height: 44px;
  border-radius: 8px 8px 0 0;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.module-card-visual-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: var(--surface);
  position: relative;
}

/* ── 5. GRADE BADGE + BLOCK BADGE — compact, no overflow ─────────── */
.module-grade-badge,
.module-block-badge {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}

/* ── 6. MODULE CARD DESC: ТЗ №9 — 3 строки без многоточия ──────── */
.module-card-desc,
.s27-card-desc,
.s28-card-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
  max-height: 4.3em !important;
}

/* ── 7. S28 card title: same 2-line rule ─────────────────────────── */
.s28-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 0.88rem !important;
  line-height: 1.35 !important;
  min-height: 2.3em !important;
}

/* ── 8. LP logo sigma: blue gradient circle ──────────────────────── */
.lp-logo-sigma {
  background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
  color: #fff !important;
  font-style: normal !important;
}


/* ════════════════════════════════════════════════════════════════════
   v20: BIG FIX PATCH — Cards, KaTeX, Pchips, Grid
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. FIX: lg-props-grid — NO horizontal scroll, always static grid ── */
.lg-props-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  margin: 18px 0 !important;
  overflow: visible !important;
  /* Never scroll cards left/right */
  flex-wrap: unset !important;
  overflow-x: visible !important;
  -webkit-overflow-scrolling: auto !important;
}
/* Kill any flex/scroll wrappers around props grid */
.lg-props-grid-wrap,
.lg-props-grid-scroll {
  overflow: visible !important;
  overflow-x: visible !important;
}

/* ── 2. FIX: th-example-step — row layout so KaTeX renders inline ── */
.th-example-step {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 10px 0 !important;
}
.th-example-step-n {
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  align-self: flex-start !important;
}
.th-example-step-t {
  flex: 1 !important;
  min-width: 0 !important;
  text-align: left !important;
}

/* ── 3. BEAUTIFUL PCHIPS — Gradient redesign ─────────────────────── */
.practice-chips-row {
  display: flex !important;
  gap: 12px !important;
  margin: 0 0 20px !important;
  flex-wrap: wrap !important;
}
.pchip {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  flex: 1 !important;
  min-width: 150px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .18s, box-shadow .18s !important;
  cursor: pointer !important;
  border: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.pchip::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 18px !important;
  padding: 1.5px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.05)) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
}
.pchip:hover {
  transform: translateY(-3px) !important;
}
.pchip:active { transform: translateY(-1px) !important; }

/* Chip 1 — Избранная теория (gold/amber) */
.pchip-favtheory {
  background: linear-gradient(135deg, rgba(245,158,11,.18) 0%, rgba(251,191,36,.1) 100%) !important;
  box-shadow: 0 4px 20px rgba(245,158,11,.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
  border: 1.5px solid rgba(245,158,11,.35) !important;
}
.pchip-favtheory:hover {
  box-shadow: 0 8px 28px rgba(245,158,11,.28), inset 0 1px 0 rgba(255,255,255,.15) !important;
  border-color: rgba(245,158,11,.6) !important;
}
.pchip-favtheory .pchip-icon {
  font-size: 0 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: 0 4px 12px rgba(245,158,11,.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.pchip-favtheory .pchip-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: #fff !important;
  stroke: #fff !important;
}
.pchip-favtheory.pchip-active .pchip-icon svg { fill: #fff !important; }
.pchip-favtheory .pchip-label { color: rgba(245,158,11,.75) !important; }
.pchip-favtheory .pchip-val { color: #fbbf24 !important; }
.pchip-favtheory .pchip-arrow { color: rgba(245,158,11,.5) !important; }

/* Chip 2 — Повторение (blue/cyan) */
.pchip-review {
  background: linear-gradient(135deg, rgba(30,150,228,.16) 0%, rgba(30,150,228,.1) 100%) !important;
  box-shadow: 0 4px 20px rgba(30,150,228,.14), inset 0 1px 0 rgba(255,255,255,.12) !important;
  border: 1.5px solid rgba(30,150,228,.32) !important;
}
.pchip-review:hover {
  box-shadow: 0 8px 28px rgba(30,150,228,.24), inset 0 1px 0 rgba(255,255,255,.15) !important;
  border-color: rgba(30,150,228,.55) !important;
}
.pchip-review .pchip-icon {
  font-size: 0 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #1e96e4, #1e96e4) !important;
  box-shadow: 0 4px 12px rgba(30,150,228,.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.pchip-review .pchip-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: #fff !important;
  stroke: #fff !important;
}
.pchip-review .pchip-label { color: rgba(30,150,228,.7) !important; }
.pchip-review .pchip-val { color: #38bdf8 !important; }
.pchip-review.pchip-active .pchip-val { color: #7dd3fc !important; }
.pchip-review .pchip-arrow { color: rgba(30,150,228,.5) !important; }

/* Chip 3 — Ошибки (red/rose) */
.pchip-errors {
  background: linear-gradient(135deg, rgba(239,68,68,.14) 0%, rgba(248,113,113,.08) 100%) !important;
  box-shadow: 0 4px 20px rgba(239,68,68,.12), inset 0 1px 0 rgba(255,255,255,.1) !important;
  border: 1.5px solid rgba(239,68,68,.28) !important;
}
.pchip-errors:hover {
  box-shadow: 0 8px 28px rgba(239,68,68,.22), inset 0 1px 0 rgba(255,255,255,.15) !important;
  border-color: rgba(239,68,68,.5) !important;
}
.pchip-errors .pchip-icon {
  font-size: 0 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  box-shadow: 0 4px 12px rgba(239,68,68,.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.pchip-errors .pchip-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: #fff !important;
  stroke: #fff !important;
}
.pchip-errors .pchip-label { color: rgba(239,68,68,.7) !important; }
.pchip-errors .pchip-val { color: #fca5a5 !important; }
.pchip-errors.pchip-active .pchip-val { color: #f87171 !important; }
.pchip-errors .pchip-arrow { color: rgba(239,68,68,.5) !important; }

/* Common pchip body */
.pchip-body { flex: 1 !important; min-width: 0 !important; }
.pchip-label {
  font-size: 0.6rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin-bottom: 3px !important;
  display: block !important;
}
.pchip-val {
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  display: block !important;
}
.pchip-arrow {
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
  transition: transform .14s !important;
  opacity: .6 !important;
}
.pchip:hover .pchip-arrow { transform: translateX(3px) !important; opacity: 1 !important; }

/* ── 4. FIX tilt-card examples inside the grid ───────────────────── */
.lg-tilt-card-example .katex,
.lg-tilt-card-formula .katex,
.lg-tilt-card-name .katex {
  display: inline !important;
}

/* ── 5. Light-mode pchip adjustments ─────────────────────────────── */
[data-theme="light"] .pchip-favtheory .pchip-val { color: #d97706 !important; }
[data-theme="light"] .pchip-review .pchip-val { color: #1e96e4 !important; }
[data-theme="light"] .pchip-errors .pchip-val { color: #dc2626 !important; }

/* ── 6. Responsive pchips ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .pchip { padding: 10px 12px !important; gap: 10px !important; min-width: 120px !important; }
  /* R13-2: на телефонах чипы переносятся, а не вылезают за экран
     (v23-правило ниже ставит nowrap !important — перебиваем тут нельзя,
     дублируем в конце файла, см. R13-2 в хвосте style.css) */
  .pchip-favtheory .pchip-icon,
  .pchip-review .pchip-icon,
  .pchip-errors .pchip-icon { width: 32px !important; height: 32px !important; border-radius: 10px !important; }
  .pchip-val { font-size: 0.88rem !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v21: CARD HOVER + EXAMPLE BLOCKS + KaTeX FIXES
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. CARD HOVER: only lift, NO colored glow border ──────────────── */
.lg-tilt-card {
  transition: transform .18s ease, box-shadow .18s ease !important;
  border: none !important;
}
.lg-tilt-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.14) !important;
}
/* Kill ALL colored glow on hover */
.lg-tilt-card[data-div]:hover,
.lg-tilt-card[data-prob]:hover,
.lg-tilt-card[data-stat]:hover,
.lg-tilt-card[data-lg-tilt]:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,.14) !important;
}
/* Keep the colored top stripe (accent) but clean */
.lg-tilt-card[data-div] { border-top: 2.5px solid rgba(30,150,228,.6) !important; }
.lg-tilt-card[data-div="2"]  { border-top-color: #1e96e4 !important; }
.lg-tilt-card[data-div="3"]  { border-top-color: #10b981 !important; }
.lg-tilt-card[data-div="4"]  { border-top-color: #35B1FA !important; }
.lg-tilt-card[data-div="5"]  { border-top-color: #f59e0b !important; }
.lg-tilt-card[data-div="6"]  { border-top-color: #ec4899 !important; }
.lg-tilt-card[data-div="7"]  { border-top-color: #1e96e4 !important; }
.lg-tilt-card[data-div="8"]  { border-top-color: #06b6d4 !important; }
.lg-tilt-card[data-div="9"]  { border-top-color: #84cc16 !important; }
.lg-tilt-card[data-div="10"] { border-top-color: #f97316 !important; }
.lg-tilt-card[data-div="11"] { border-top-color: #e11d48 !important; }
.lg-tilt-card[data-div="25"] { border-top-color: #0ea5e9 !important; }
/* Favourited card: gold ring stays */
.lg-tilt-card:has(.lg-tilt-fav.is-fav) {
  box-shadow: 0 0 0 1.5px rgba(245,158,11,.45), 0 4px 18px rgba(0,0,0,.07) !important;
}
/* JS-tilt: let JS control transform fully */
.lg-tilt-card.js-tilting:hover { transform: none !important; box-shadow: 0 12px 28px rgba(0,0,0,.14) !important; }

/* ── 2. BEAUTIFUL th-example-block — compact row table like divisibility ── */
/* Replace old step-by-step with a clean grid table inside example blocks */
.th-example-block {
  background: var(--card) !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  margin: 14px 0 !important;
  border: 1.5px solid var(--border2) !important;
  position: relative !important;
  overflow: hidden !important;
}
.th-example-block::before {
  content: 'ПРИМЕР' !important;
  display: block !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  color: var(--accent2) !important;
  margin-bottom: 10px !important;
  text-align: left !important;
}
/* Step rows: number | text | result — all inline */
.th-example-step {
  display: grid !important;
  grid-template-columns: 28px 1fr auto !important;
  gap: 0 12px !important;
  align-items: baseline !important;
  padding: 6px 0 !important;
  border-bottom: 1px dashed rgba(255,255,255,.07) !important;
  flex-direction: unset !important;
}
[data-theme="light"] .th-example-step {
  border-bottom-color: rgba(0,0,0,.07) !important;
}
.th-example-step:last-child { border-bottom: none !important; }
.th-example-step:first-child { padding-top: 0 !important; }
.th-example-step-n {
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  color: #a5b4fc !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: unset !important;
  height: unset !important;
  padding: 0 !important;
  align-self: baseline !important;
  margin-top: 0 !important;
  display: block !important;
}
.th-example-step-t {
  font-size: .9rem !important;
  color: var(--text2) !important;
  line-height: 1.5 !important;
  flex: unset !important;
  text-align: left !important;
}
.th-example-step:last-child .th-example-step-n { color: #34d399 !important; }
.th-example-step:last-child .th-example-step-t {
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
}
/* Result column (3rd) — steps that have inline ✓ or = answer */
.th-example-step > span:last-child:not(.th-example-step-t):not(.th-example-step-n) {
  color: #34d399 !important;
  font-weight: 800 !important;
  font-size: .88rem !important;
}

/* ── 3. KaTeX inside cards — always inline ──────────────────────────── */
.lg-tilt-card .katex,
.lg-tilt-card .katex-display { display: inline !important; }
.lg-tilt-card .katex-display > .katex { display: inline !important; }

/* ── 4. Ensure theory divider shows correctly ────────────────────────── */
.theory-practice-divider {
  align-items: center !important;
  gap: 12px !important;
  margin: 24px 0 16px !important;
  opacity: 1 !important;
  /* NOTE: display is controlled by JS via style.display — do NOT force flex here */
}

/* ── 5. practiceMainContent never stays hidden after module switch ──── */
/* v23 FIX: practiceMainContent MUST be hideable for subpages */
#practiceMainContent.hidden { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   v22: MEGA FIX — th-example-step, card borders/hover/width, fav star
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. FIX th-example-step: use FLEX not grid (grid broke logarithm examples) ── */
.th-example-step {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0 12px !important;
  padding: 6px 0 !important;
  border-bottom: 1px dashed rgba(255,255,255,.07) !important;
}
[data-theme="light"] .th-example-step {
  border-bottom-color: rgba(0,0,0,.07) !important;
}
.th-example-step:last-child { border-bottom: none !important; }
.th-example-step:first-child { padding-top: 0 !important; }
.th-example-step-n {
  flex: 0 0 28px !important;
  width: 28px !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  color: #a5b4fc !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: 28px !important;
  height: unset !important;
  padding: 0 !important;
  align-self: baseline !important;
  margin-top: 0 !important;
  display: block !important;
}
.th-example-step-t {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  font-size: .9rem !important;
  color: var(--text2) !important;
  line-height: 1.5 !important;
  text-align: left !important;
  word-break: break-word !important;
}
.th-example-step:last-child .th-example-step-n { color: #34d399 !important; }
.th-example-step:last-child .th-example-step-t {
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
}

/* ── 2. REMOVE colored top borders from cards (user: убери цветные контуры наверху) ── */
.lg-tilt-card[data-div],
.lg-tilt-card[data-div="2"],
.lg-tilt-card[data-div="3"],
.lg-tilt-card[data-div="4"],
.lg-tilt-card[data-div="5"],
.lg-tilt-card[data-div="6"],
.lg-tilt-card[data-div="7"],
.lg-tilt-card[data-div="8"],
.lg-tilt-card[data-div="9"],
.lg-tilt-card[data-div="10"],
.lg-tilt-card[data-div="11"],
.lg-tilt-card[data-div="25"] {
  border-top: none !important;
  border-top-color: transparent !important;
}

/* ── 3. CARDS: GLOW + LIFT on hover (not just translateY) ── */
.lg-tilt-card {
  transition: transform .18s ease, box-shadow .18s ease !important;
  border-top: none !important;
}
.lg-tilt-card:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 0 0 1.5px rgba(30,150,228,.35),
    0 8px 24px rgba(30,150,228,.25),
    0 16px 40px rgba(0,0,0,.22) !important;
}
/* Remove all data-attr colored hover box-shadows */
.lg-tilt-card[data-div]:hover,
.lg-tilt-card[data-prob]:hover,
.lg-tilt-card[data-stat]:hover,
.lg-tilt-card[data-lg-tilt]:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 0 0 1.5px rgba(30,150,228,.35),
    0 8px 24px rgba(30,150,228,.25),
    0 16px 40px rgba(0,0,0,.22) !important;
}
/* JS-tilt mode: JS controls transform but still gets glow */
.lg-tilt-card.js-tilting:hover {
  transform: none !important;
  box-shadow:
    0 0 0 1.5px rgba(30,150,228,.35),
    0 8px 24px rgba(30,150,228,.25),
    0 16px 40px rgba(0,0,0,.22) !important;
}
/* Favourited card: gold ring overrides */
.lg-tilt-card:has(.lg-tilt-fav.is-fav) {
  box-shadow:
    0 0 0 1.5px rgba(245,158,11,.5),
    0 4px 18px rgba(245,158,11,.18) !important;
}
.lg-tilt-card:has(.lg-tilt-fav.is-fav):hover {
  box-shadow:
    0 0 0 1.5px rgba(245,158,11,.6),
    0 8px 28px rgba(245,158,11,.25),
    0 16px 40px rgba(0,0,0,.2) !important;
}

/* ── 4. CARDS WIDER: 2 per row ── */
.lg-props-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 16px !important;
}
@media (max-width: 700px) {
  .lg-props-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 5. FAV STAR: ensure pointer events work, always clickable ── */
.lg-tilt-fav {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 4px !important;
  color: var(--text3) !important;
  transition: color .15s ease, transform .15s ease !important;
  line-height: 1 !important;
}
.lg-tilt-fav svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  pointer-events: none !important;
}
.lg-tilt-fav:hover { color: #f59e0b !important; transform: scale(1.2) !important; }
.lg-tilt-fav.is-fav { color: #f59e0b !important; }
.lg-tilt-fav.is-fav svg { fill: #f59e0b !important; }

/* ── 6. 2-LINE CARD TITLES (CSS clamp) ── */
.lg-tilt-card-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.6em !important;
}


/* ════════════════════════════════════════════════════════════════════
   v23: CRITICAL FIXES — subpages, pchips bg, card hover, fav star
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. FIX: practiceMainContent MUST be hideable for subpages to work ── */
/* The v21 rule "#practiceMainContent.hidden { display: block !important; }"
   was WRONG — it prevented chips from opening their dedicated sub-page.
   Remove that override: .hidden must mean display:none (from line 353) */
#practiceMainContent.hidden {
  display: none !important;
}

/* ── 2. FIX pchips: proper background (not white), centered row ── */
.practice-chips-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  margin: 0 0 20px !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  background: transparent !important;
}
.pchip {
  background-clip: padding-box !important;
}
/* Dark theme pchips */
[data-theme="dark"] .pchip-favtheory {
  background: linear-gradient(135deg, rgba(245,158,11,.18) 0%, rgba(251,191,36,.1) 100%) !important;
}
[data-theme="dark"] .pchip-review {
  background: linear-gradient(135deg, rgba(30,150,228,.16) 0%, rgba(30,150,228,.1) 100%) !important;
}
[data-theme="dark"] .pchip-errors {
  background: linear-gradient(135deg, rgba(239,68,68,.14) 0%, rgba(248,113,113,.08) 100%) !important;
}

/* ── 3. FIX card hover: lift + glow (clean, no conflicts) ── */
/* Cards WITHOUT js-tilting: normal CSS hover */
.lg-tilt-card:not(.js-tilting) {
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.lg-tilt-card:not(.js-tilting):hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 0 0 1.5px rgba(30,150,228,.4),
    0 8px 24px rgba(30,150,228,.22),
    0 16px 36px rgba(0,0,0,.18) !important;
}
/* Cards WITH js-tilting: JS controls transform, CSS adds glow only */
.lg-tilt-card.js-tilting {
  transition: box-shadow .18s ease !important;
}
.lg-tilt-card.js-tilting:hover {
  box-shadow:
    0 0 0 1.5px rgba(30,150,228,.4),
    0 8px 24px rgba(30,150,228,.22),
    0 16px 36px rgba(0,0,0,.18) !important;
}

/* ── 4. FIX fav star: large click target, always on top ── */
.lg-tilt-fav {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 8px !important;
  margin: -4px !important;
  color: var(--text3) !important;
  transition: color .15s, transform .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.lg-tilt-fav svg {
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
  display: block !important;
}
.lg-tilt-fav:hover {
  color: #f59e0b !important;
  transform: scale(1.25) !important;
}
.lg-tilt-fav.is-fav {
  color: #f59e0b !important;
}
.lg-tilt-fav.is-fav svg {
  fill: #f59e0b !important;
  stroke: #f59e0b !important;
}

/* ── 5. Remove ALL colored top borders from tilt cards ── */
.lg-tilt-card,
.lg-tilt-card[data-div],
.lg-tilt-card[data-div="2"],
.lg-tilt-card[data-div="3"],
.lg-tilt-card[data-div="4"],
.lg-tilt-card[data-div="5"],
.lg-tilt-card[data-div="6"],
.lg-tilt-card[data-div="7"],
.lg-tilt-card[data-div="8"],
.lg-tilt-card[data-div="9"],
.lg-tilt-card[data-div="10"],
.lg-tilt-card[data-div="11"],
.lg-tilt-card[data-div="25"],
.lg-tilt-card[data-prob],
.lg-tilt-card[data-stat],
.lg-tilt-card[data-lg-tilt] {
  border-top: none !important;
  border-top-color: transparent !important;
  border-top-width: 0 !important;
}

/* ── 6. Practice sub-pages must be able to show/hide ── */
.practice-sub-page {
  display: block !important;
}
.practice-sub-page.hidden {
  display: none !important;
}


/* ════ v24: ПРАКТИКА chip border on white card background ════ */
.theory-practice-divider-label {
  background: #ffffff !important;
  border: 2px solid #1e96e4 !important;
  color: #1e96e4 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 2px 8px rgba(30,150,228,0.18) !important;
  position: relative !important;
  z-index: 2 !important;
}
.theory-practice-divider::before,
.theory-practice-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1.5px !important;
  background: linear-gradient(to right, transparent, rgba(30,150,228,0.25)) !important;
}
.theory-practice-divider::after {
  background: linear-gradient(to left, transparent, rgba(30,150,228,0.25)) !important;
}


/* ════════════════════════════════════════════════════════════════════
   v25: MEGA FIX — blue accent everywhere, fav star, card spacing,
        compare headers, ПРАКТИКА chip, log example steps, KaTeX fonts
   RULES (to prevent recurrence):
   • NEVER use #1e96e4/indigo/purple as accent — always use var(--accent) = #1e96e4 (blue)
   • ALWAYS call renderMath(el) after setting textContent with $...$ formulas
   • NEVER use escapeHtml() on choice text that may contain LaTeX
   • .lg-tilt-fav must have min 44×44px touch target (padding ≥ 10px)
   • th-compare-cell-head must be text-align:center (it's a badge, not inline)
   • theory-practice-divider-label: blue bg, white text, half-overlap style
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. CARD HOVER: BLUE accent, not purple ── */
.lg-tilt-card:not(.js-tilting):hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 0 0 1.5px rgba(30,150,228,.45),
    0 8px 24px rgba(30,150,228,.22),
    0 16px 36px rgba(0,0,0,.15) !important;
}
.lg-tilt-card.js-tilting:hover {
  box-shadow:
    0 0 0 1.5px rgba(30,150,228,.45),
    0 8px 24px rgba(30,150,228,.22),
    0 16px 36px rgba(0,0,0,.15) !important;
}
.lg-tilt-card:has(.lg-tilt-fav.is-fav):hover {
  box-shadow:
    0 0 0 2px rgba(245,158,11,.5),
    0 8px 28px rgba(245,158,11,.25),
    0 16px 40px rgba(0,0,0,.2) !important;
}

/* ── 2. FAV STAR: full 44×44px click target ── */
.lg-tilt-fav {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 10px !important;
  margin: -6px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text3, #94a3b8) !important;
  transition: color .15s, transform .15s !important;
}
.lg-tilt-fav svg {
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.lg-tilt-fav:hover {
  color: #f59e0b !important;
  transform: scale(1.2) !important;
}
.lg-tilt-fav.is-fav {
  color: #f59e0b !important;
}
.lg-tilt-fav.is-fav svg {
  fill: #f59e0b !important;
  stroke: #f59e0b !important;
}

/* ── 3. CARD EXAMPLES: centered ── */
.lg-tilt-card-example {
  text-align: center !important;
}

/* ── 4. CARD SPACING: reduce gap between name and formula ── */
.lg-tilt-card-name {
  margin-bottom: 4px !important;
}
.lg-tilt-card-formula {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* ── 5. NO EXTRA KATEX OPERATOR SPACING in cards ── */
.lg-tilt-card .katex .mrel,
.lg-tilt-card .katex .mbin,
.lg-tilt-card .katex .mopen,
.lg-tilt-card .katex .mclose {
  margin: 0 !important;
}

/* ── 6. COMPARE BLOCK: center headers (Неверно / Верно) ── */
.th-compare-cell-head {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}
/* Вариант heading above compare block: center it */
.lh-label-heading .lh-heading,
.th-warning-block .lh-heading {
  text-align: center !important;
}
.th-warning-block .lh-label {
  display: flex !important;
  justify-content: center !important;
}

/* ── 7. ПРАКТИКА chip: BLUE background, white text, half-overlap ── */
/* RULE: theory-practice-divider uses position:relative so the label
   can sit centered with lines on both sides. The chip must be:
   - blue background (#1e96e4 = var(--accent))
   - white text
   - visually overlapping: sits ON the divider line via z-index */
.theory-practice-divider {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 28px 0 20px !important;
  position: relative !important;
}
.theory-practice-divider::before,
.theory-practice-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 2px !important;
  background: linear-gradient(to right, transparent, rgba(30,150,228,.35)) !important;
}
.theory-practice-divider::after {
  background: linear-gradient(to left, transparent, rgba(30,150,228,.35)) !important;
}
.theory-practice-divider-label {
  background: #1e96e4 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 5px 18px !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 10px rgba(30,150,228,.40) !important;
  position: relative !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
  margin: 0 12px !important;
  white-space: nowrap !important;
}
[data-theme="dark"] .theory-practice-divider-label {
  background: #1e96e4 !important;
  box-shadow: 0 2px 12px rgba(30,150,228,.50) !important;
}

/* ── 8. LOG EXAMPLE STEPS: blue background, white text, numbered ── */
/* RULE: th-example-step is the container for each step in a solution example.
   th-example-step-n = step number (blue circle), th-example-step-t = step text.
   Must use flex layout so KaTeX renders inline. */
.th-example-step {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  background: linear-gradient(135deg, rgba(30,150,228,.12), rgba(30,150,228,.06)) !important;
  border: 1px solid rgba(30,150,228,.20) !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  border-bottom: none !important;
}
[data-theme="dark"] .th-example-step {
  background: linear-gradient(135deg, rgba(30,150,228,.16), rgba(30,150,228,.08)) !important;
  border-color: rgba(30,150,228,.25) !important;
}
.th-example-step:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(16,185,129,.07)) !important;
  border-color: rgba(16,185,129,.25) !important;
}
.th-example-step-n {
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #1e96e4 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 0.8rem !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}
.th-example-step:last-child .th-example-step-n {
  background: #10b981 !important;
  color: #ffffff !important;
}
.th-example-step-t {
  flex: 1 !important;
  font-size: 0.97rem !important;
  color: var(--text2) !important;
  line-height: 1.65 !important;
}
.th-example-step:last-child .th-example-step-t {
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* ── 9. CHOICE TASK: consistent font with theory, match size ── */
/* RULE: task-choice-text must use the same font family and size as theory
   body text. Never use escapeHtml() on choice text. */
.task-choice-btn {
  font-family: inherit !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}
.task-choice-text {
  font-family: inherit !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  flex: 1 !important;
}
.task-choice-text .katex,
.task-choice-text .katex-display {
  display: inline !important;
  font-size: 1rem !important;
}

/* ════════════════════════════════════════════════════════════════════
   v26: 6 UI FIXES — arrow, hover effects, chips, font rules, no italic
   ════════════════════════════════════════════════════════════════════

   RULES (axioms — never break):
   1. pchip-arrow must always be vertically centered, aligned-self:center
   2. lg-tilt-fav hover: scale(1.3) + gold glow (not just color change)
   3. th-compare-cell-head: display:inline-flex (text-width only, NOT width:100%)
   4. lg-mistake-quiz-row: chips hidden until .is-revealed
   5. NEVER use <em>, font-style:italic, or font-size variation inside .task-prompt
   6. ALL math in flashcard examples uses $...$ KaTeX — plain numbers in examples
      that are part of math expressions MUST be wrapped in $...$
   7. NEVER render math as plain Unicode — all formulas go through renderMath()
   ════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: pchip-arrow — SVG chevron-right, always centered ────────
   RULE: pchip-arrow is now an SVG chevron-right (not a text glyph).
   It must be 16×16px, vertically centered, flex-shrink:0.
   Color inherits from parent chip color classes (gold/blue/red).
   No font-size needed — size is set on the SVG element directly.
   On hover the parent .pchip translates the arrow via transform. ─── */
.pchip-arrow {
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  opacity: .65 !important;
  transition: transform .14s, opacity .14s !important;
}
.pchip-arrow svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.pchip:hover .pchip-arrow {
  transform: translateX(3px) !important;
  opacity: 1 !important;
}

/* ── FIX 2: star hover highlight + card lift ────────────────────────
   a) Star: gold color + stronger scale + drop-shadow glow on hover
   b) Card: translateY(-8px) + blue shadow on hover (without js-tilt) ── */
.lg-tilt-fav:hover {
  color: #f59e0b !important;
  transform: scale(1.35) !important;
  filter: drop-shadow(0 0 6px rgba(245,158,11,.55)) !important;
}
.lg-tilt-fav:hover svg {
  stroke: #f59e0b !important;
}
/* Card lift — only when not JS-tilted */
.lg-tilt-card:not(.js-tilting):hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 0 0 1.5px rgba(30,150,228,.50),
    0 12px 32px rgba(30,150,228,.26),
    0 20px 44px rgba(0,0,0,.18) !important;
}

/* ── FIX 3: ВЕРНО/НЕВЕРНО chips ─────────────────────────────────────
   a) Chips must be text-width only: display:inline-flex, NOT width:100%
   b) Chips must be HIDDEN before user picks; shown only after .is-revealed
   RULE: .th-compare-cell-head is a badge, not a banner — it wraps its
   text only. display:inline-flex + no width/flex override. ────────── */

/* Override the v25 rule that set width:100% */
.th-compare-cell-head {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: auto !important;
  max-width: fit-content !important;
}

/* In mistake-quiz rows: hide chips before user picks; show after reveal */
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row:not(.is-revealed) .th-compare-cell-head {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row.is-revealed .th-compare-cell-head {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  animation: chipReveal .25s ease both !important;
}
@keyframes chipReveal {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── FIX 4: FONT CONSISTENCY in flashcard content ───────────────────
   RULE: ALL text inside .lg-tilt-card-formula and .lg-tilt-card-example
   must use the SAME font as the rest of the page (inherit).
   Numeric content that is "math" must be wrapped in $...$  so KaTeX
   renders it in its own consistent math font.
   Enforce: font-family:inherit, no font-size variation inside cards.
   ─────────────────────────────────────────────────────────────────── */
.lg-tilt-card-formula,
.lg-tilt-card-example {
  font-family: inherit !important;
  font-variant-numeric: normal !important;
}
/* All KaTeX inside cards must be inline and same visual weight */
.lg-tilt-card .katex {
  font-size: 1em !important;
}
.lg-tilt-card .katex-display {
  display: inline !important;
  margin: 0 !important;
  font-size: 1em !important;
}
/* Prevent any span/sub/sup inside card from changing font —
   BUT NEVER touch KaTeX internals: KaTeX positions glyphs with absolute
   metrics computed for ITS OWN fonts. Forcing font-family:inherit on
   .katex spans made fractions like 1/8 render with Montserrat metrics
   and OVERLAP the following glyph (the ⅛-on-8 bug). */
.lg-tilt-card-formula span:not(.katex):not(.katex *),
.lg-tilt-card-example span:not(.katex):not(.katex *) {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
/* Exception: color spans for ✓/✗ keep their color but same font */
.lg-tilt-card-example span[style*="color"] {
  font-family: inherit !important;
  font-size: inherit !important;
}

/* ── FIX 5: NO ITALIC / NO EM in task prompts — GLOBAL RULE ────────
   RULE: task-prompt (and any element that displays a task question)
   must NEVER use italic or em styling.
   Source: em, i, cite inside prompts must be neutralized.
   ─────────────────────────────────────────────────────────────────── */
.task-prompt em,
.task-prompt i,
.task-prompt cite,
.task-prompt var,
.practice-content em,
.practice-content i,
.practice-question em,
.practice-question i,
.task-item em,
.task-item i {
  font-style: normal !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
}
/* Global safety: ANY em inside a task-related container loses italic */
[class*="task"] em,
[class*="task"] i,
[class*="prompt"] em,
[class*="prompt"] i {
  font-style: normal !important;
  font-size: inherit !important;
}

/* ── FIX 6: CHOICE TEXT FONT — inherit system font, NEVER serif/KaTeX_Main ──
   AXIOM: .task-choice-text uses the SAME font as body/task-prompt (inherit).
   Never force KaTeX_Main or Times New Roman on choice text — that creates
   serif/sans-serif mismatch with the task number and prompt text.
   Math inside choices is handled by KaTeX via $...$ rendering.
   ─────────────────────────────────────────────────────────────────── */
.task-choice-text {
  font-family: inherit !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}
/* Badge (А, Б, В, Г) also inherits system font */
.task-choice-letter,
.task-choice-badge {
  font-family: inherit !important;
  font-size: 0.88rem !important;
}
/* KaTeX inside choices: inline, matches surrounding font size */
.task-choice-text .katex,
.task-choice-text .katex-html {
  font-size: 1em !important;
  vertical-align: middle !important;
}

/* ── ADDITIONAL: pchip full vertical centering fix ──────────────── */
/* When pchip-icon is a 38×38px rendered block, the flex container
   line-height can be taller than the icon alone. Ensure all children
   center on the cross axis. */
.pchip {
  align-items: center !important;
}
.pchip-icon {
  align-self: center !important;
  flex-shrink: 0 !important;
}
.pchip-body {
  align-self: center !important;
}


/* ════════════════════════════════════════════════════════════════════
   v28: CARD HOVER LIFT + COMPARE CENTER + CHOICE FONT FIX
   RULE: Cards lift smoothly on hover (translateY -10px).
         th-compare-cell-head in mistake quiz: text-align center.
         task-choice-text: inherit font always.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. CARD HOVER LIFT (theory flashcards) ─────────────────────── */
/* Override any previous rule — ensure smooth lift with transition */
.lg-tilt-card {
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease !important;
}
.lg-tilt-card:not(.js-tilting):hover {
  transform: translateY(-10px) !important;
  box-shadow:
    0 0 0 2px rgba(30,150,228,.55),
    0 14px 36px rgba(30,150,228,.28),
    0 24px 48px rgba(0,0,0,.20) !important;
}
/* When JS tilt active — disable CSS hover so JS controls entirely */
.lg-tilt-card.js-tilting:hover {
  transform: none !important;
}

/* ── 2. COMPARE CELL HEAD — centered (ВАРИАНТ 1 / ВАРИАНТ 2) ────── */
/* RULE: In mistake-quiz cards, the "ВАРИАНТ N" label must be
   horizontally centered above the formula content. */
.th-warning-block .th-compare-cell-head,
.th-compare-cell .th-compare-cell-head {
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* Chips (ВЕРНО/НЕВЕРНО) in mistake quiz rows — still text-width only */
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row.is-revealed .th-compare-cell-head {
  display: inline-flex !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: fit-content !important;
}

/* ── 3. TASK CHOICE FONT — never serif ─────────────────────────── */
/* AXIOM: task-choice-text always inherits system font (sans-serif).
   KaTeX inside handles its own math font. No override with KaTeX_Main. */
.task-choice-text,
.task-choice-btn {
  font-family: inherit !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   v29: UI UNIFORMITY — consistent input fields + verify buttons
   RULE: All "Проверить" buttons and text inputs across lessons must
   share the same baseline style. Use CSS custom properties so individual
   lessons can override accent colour but NOT layout/spacing.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 4. CHECK BUTTON — uniform across all lessons ────────────────── */
.task-check-btn,
.check-btn,
button[class*="check"],
button[class*="verify"],
.inf-check-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 120px !important;
  padding: 9px 22px !important;
  border-radius: 10px !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  border: none !important;
  transition: background .18s ease, transform .15s ease !important;
}
.task-check-btn:active,
.check-btn:active {
  transform: scale(.97) !important;
}

/* ── 5. TEXT INPUT — uniform across all lessons ──────────────────── */
.task-input,
input[class*="task"],
input[class*="answer"],
.inf-answer-input {
  display: inline-block !important;
  padding: 8px 14px !important;
  border: 1.5px solid #c8d4e8 !important;
  border-radius: 10px !important;
  font-size: .95rem !important;
  font-family: inherit !important;
  background: #fff !important;
  color: #1a1a2e !important;
  outline: none !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
.task-input:focus,
input[class*="task"]:focus,
input[class*="answer"]:focus,
.inf-answer-input:focus {
  border-color: #1E96E4 !important;
  box-shadow: 0 0 0 3px rgba(30,150,228,.12) !important;
}

/* ── 6. CHOICE CARD CENTERING — theory + practice consistent ─────── */
/* AXIOM: .lg-tilt-card and .task-choice-btn must both center content */
.lg-tilt-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.lg-tilt-card-formula,
.lg-tilt-card-example,
.lg-tilt-card-name {
  text-align: center !important;
  width: 100% !important;
}

/* ── v30: MATH-NOTE — plain text after KaTeX formula in compare cells ─ */
/* Fixes: курсив + слипание слов в "перенесли, как в линейном уравнении"  */
.math-note {
  font-style: normal !important;
  font-family: inherit !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
  color: inherit !important;
}

/* ══════════════════════════════════════════════════════════════════
   v31 — REAL fixes verified with live-browser screenshots (Bob audit)
   ══════════════════════════════════════════════════════════════════ */

/* ── v31.1 KATEX FONT RESTORE inside theory flashcards ─────────────
   Root cause of the ⅛-overlapping-8 bug: earlier "font consistency"
   rules forced font-family:inherit + font-size:inherit on EVERY span
   inside .lg-tilt-card-*, including KaTeX internals. KaTeX computes
   glyph positions for KaTeX_Main metrics; swapping in Montserrat
   makes \tfrac numerator/denominator wider than the reserved box and
   the fraction visually crashes into the next glyph.
   Give KaTeX its own fonts back — highest specificity, loaded last. */
/* Do NOT force any font on KaTeX internals — katex.min.css assigns the
   correct family per glyph class (KaTeX_Main/Math/Size1..4). The fix is
   the :not(.katex *) exclusion in the old blanket rule + this reset that
   re-asserts KaTeX's own stylesheet wins over any lingering inherit: */
.lg-tilt-card .katex,
.th-compare-cell .katex,
.theory-latex-block .katex {
  font-family: KaTeX_Main, "Times New Roman", serif;
}
/* NOTE: no font-size overrides on .katex spans here — KaTeX drives
   fraction sizing via INLINE font-size styles; any !important CSS
   font-size would beat those inline styles and wreck \tfrac layout.
   The old blanket rule is already excluded via :not(.katex *) above. */
/* Overall scale of formulas in cards stays pleasant */
.lg-tilt-card-formula .katex { font-size: 1.05em !important; }
.lg-tilt-card-example .katex { font-size: 1em !important; }

/* ── v31.2 MathJax leftovers inside .math-note / prose: neutralize ──
   MathJax CHTML wraps single italic letters as mjx-utext with inline
   font-style:italic. Config now sets ignoreHtmlClass, but any element
   already mangled in old cached HTML must still LOOK right. */
.math-note mjx-container,
.math-note mjx-utext,
.th-connect-prose mjx-utext,
p mjx-utext {
  font-style: normal !important;
  font-family: inherit !important;
}

/* ── v31.3 ВАРИАНТ 1/2 pill — own line ON TOP of the card text, centered ─
   The label is a ::before pseudo-element (pre-reveal state). It must NOT
   sit inline with the formula: it gets its own centered row above. */
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row:not(.is-revealed) .th-compare-cell {
  text-align: center;
}
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row:not(.is-revealed) .th-compare-cell::before {
  display: flex !important;              /* block-level → own line */
  width: max-content !important;
  margin: 0 auto 10px !important;        /* centered above the text */
  justify-content: center;
}
/* Revealed state: chips (ВЕРНО/НЕВЕРНО) centered too */
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row.is-revealed .th-compare-cell {
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   v32 — pure-vertical card hover + beautiful interactive example panel
   ══════════════════════════════════════════════════════════════════ */

/* ── v32.1 CARD HOVER: only straight-up lift, NO X-shift / NO rotation ─
   User requirement: карточки не должны двигаться по X/Y — только вверх.
   JS sets inline `translateY(-10px) !important` on mouseenter; here we
   kill every leftover rule that could add sideways/3D motion and give
   a smooth transition + glow. */
.lg-tilt-card,
.lg-tilt-card.js-tilting {
  transition: transform .22s cubic-bezier(.22,.9,.3,1.2), box-shadow .22s ease !important;
  will-change: transform;
}
.lg-tilt-card:not(.js-tilting):hover {
  transform: translateY(-10px) !important; /* pure vertical */
}
.lg-tilt-card.js-tilting:hover {
  box-shadow:
    0 0 0 1.5px rgba(30,150,228,.4),
    0 10px 26px rgba(30,150,228,.24),
    0 18px 40px rgba(0,0,0,.2) !important;
}

/* v32.2 example panel visuals REVERTED in v34 (user request) */

@media (prefers-reduced-motion: reduce) {
  .lg-tilt-card, .lg-tilt-card.js-tilting { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   v34 — final polish per user screenshots (30.07)
   ══════════════════════════════════════════════════════════════════ */

/* ── v34.1 WORKED-EXAMPLE STEPS: ONE unified rule for every strip ──
   The block on screen 1 = 3 blue strips + 1 green result strip.
   ONE common rule drives all of them; the ONLY difference for the
   final strip is its green accent (colors via CSS vars below). */
.th-example-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 4px 0 !important;
}
.th-example-step {
  /* v35.4 REWORK (user: "убери эти обводки цветом каждой строки и
     сделай так же отцентрованы как везде") — NO borders/outlines on
     rows, just a soft neutral strip; content CENTERED like the rest
     of the theory blocks. Accent lives ONLY in the round step number. */
  --step-accent: #1e96e4;
  --step-accent-soft: rgba(30, 150, 228, .12);
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 13px 18px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: rgba(30,150,228,.05) !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  text-align: center !important;
}
.th-example-step-n {
  flex: 0 0 auto !important;
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--step-accent-soft) !important;
  color: var(--step-accent) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  border: none !important;
}
.th-example-step-t {
  flex: 0 1 auto !important;
  text-align: center !important;
}
/* the final (✓ answer) step only swaps the accent + a green tint bg */
.th-example-step:last-child {
  --step-accent: #10b981;
  --step-accent-soft: rgba(16, 185, 129, .14);
  background: rgba(16,185,129,.07) !important;
}
[data-theme="dark"] .th-example-step {
  background: rgba(30,150,228,.09) !important;
}
[data-theme="dark"] .th-example-step:last-child {
  background: rgba(16,185,129,.10) !important;
}
/* kill the old :first-child padding-top:0 bleed-through */
.th-example-block .th-example-step:first-child {
  padding: 13px 18px !important;
}

/* ── v34.2 ВЕРНО / НЕВЕРНО chips — own line ON TOP, centered ──────
   Exactly the same placement rule as the ВАРИАНТ 1/2 pills:
   block-level, width by content, centered above the cell text. */
.th-compare-cell .th-compare-cell-head,
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row.is-revealed .th-compare-cell-head {
  display: flex !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto 10px !important;
  justify-content: center !important;
}
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row.is-revealed .th-compare-cell {
  text-align: center !important;
}
/* pre-reveal state keeps chips hidden (quiz rows) — unchanged */
.th-warning-block.has-label .th-compare-row.lg-mistake-quiz-row:not(.is-revealed) .th-compare-cell-head {
  display: none !important;
}

/* ── v34.3 ПРАКТИКА chip — half ON the practice card edge, NO lines ─ */
.theory-practice-divider::before,
.theory-practice-divider::after {
  content: none !important;
  display: none !important;
}
.theory-practice-divider {
  justify-content: center !important;
  gap: 0 !important;
  /* pull the row down so the chip's midline lands exactly on the white
     card's top border: chip ≈ 26px tall → -13px bottom margin */
  margin: 26px 0 -13px !important;
  position: relative !important;
  z-index: 5 !important;
}
.theory-practice-divider-label {
  background: #1e96e4 !important;
  color: #fff !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  padding: 6px 20px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(30,150,228,.4) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
/* practice card needs breathing room under the overlapping chip */
.practice-main { padding-top: 32px !important; }

/* ══════════════════════════════════════════════════════════════════
   v35 — fixes per user screenshots (30.07, round 2)
   ══════════════════════════════════════════════════════════════════ */

/* ── v34.4 / v35.1 FAV STAR BUG FIX — kill leftover 3D parallax ──
   Root cause (proved via elementsFromPoint): transform-style:preserve-3d
   on the card + translateZ(8px) on .lg-tilt-card-name/-formula/-example
   makes those children hit-test ABOVE the absolutely positioned star
   button regardless of z-index. Flatten everything → star is clickable. */
.lg-tilt-card { transform-style: flat !important; }
.lg-tilt-card-name, .lg-tilt-card-formula, .lg-tilt-card-example {
  transform: none !important; will-change: auto !important;
}

/* ── v35.2 FAV STAR — whole-star hover like course-map cards ──
   Generous hit area (32×32), circular highlight backdrop on hover,
   the WHOLE star reacts (fill preview), not just exact stroke pixels. */
.lg-tilt-fav {
  top: 8px !important;
  right: 8px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: transparent !important;
  transition: background .15s ease, color .15s ease, transform .15s ease !important;
}
.lg-tilt-fav:hover {
  background: rgba(245,158,11,.14) !important;
  color: #f59e0b !important;
  transform: scale(1.08) !important;
}
.lg-tilt-fav:hover svg { fill: rgba(245,158,11,.35); }
.lg-tilt-fav:active { transform: scale(.95) !important; }

/* ── v35.3 DIAGRAM ARROWS — simple, identical, no effects ──
   User: "убери эти стрелки с уголками и эффектами, сделай просто
   красивые стрелки, одинаковые, одна под другой". Kill pulse dot,
   glow, thickness jump and draw-in dash animation → two clean
   identical static blue arrows. */
.lg-diagram-wrap svg .lg-arrow-path {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  transition: none !important;
}
.lg-arrow-group:hover .lg-arrow-path,
.lg-arrow-group:focus-visible .lg-arrow-path,
.lg-arrow-group.is-active .lg-arrow-path {
  stroke-width: 2.5 !important;
  filter: none !important;
}
.lg-arrow-pulse { display: none !important; }

/* ── v35.5 PDF EXPORT chip — matches other pchips, blue accent ── */
.pchip-pdf .pchip-icon { color: #1e96e4; }
.pchip-pdf:hover { border-color: rgba(30,150,228,.45); }
.pchip-pdf .pchip-val { color: #1e96e4; font-weight: 700; }

/* ── v35.6 FAV STAR — no gold glow/backdrop on hover (user request) ──
   Whole star still reacts (color + fill preview), hit area stays 32px,
   but NO circular amber background. */
.lg-tilt-fav:hover {
  background: transparent !important;
  transform: none !important;
}
.lg-tilt-fav:hover svg { fill: rgba(245,158,11,.45); }
.lg-tilt-fav:active { transform: scale(.92) !important; }

/* ── v35.7 DIAGRAM ARROWS — thinner/smaller (user request) ── */
.lg-diagram-wrap svg .lg-arrow-path { stroke-width: 1.8 !important; }
.lg-arrow-group:hover .lg-arrow-path,
.lg-arrow-group:focus-visible .lg-arrow-path,
.lg-arrow-group.is-active .lg-arrow-path { stroke-width: 1.8 !important; }

/* ── Task graph visual (algebra L9/L10, round-6) ─────────────────────────── */
.task-graph { display:flex; justify-content:center; margin:12px 0 6px; }
.task-graph-svg {
  width:100%; max-width:380px; height:auto;
  background:#ffffff;
  border:1px solid rgba(30,150,228,.20);
  border-radius:14px;
  box-shadow:0 2px 10px rgba(19,121,189,.08);
}
/* Round-9: геометрический рисунок к задаче («нарисуй-посмотри-ответь») */
.task-graph-geo .task-geo-fig { max-width:420px; padding:6px 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   ROUND-8 — Примеры в теории: по центру, БЕЗ выделений фоном.
   Остаётся только зелёный (финальный шаг-ответ). Правило заказчика:
   «пример в теории во всех уроках сделай красивым, визуально отцентрованным,
   без выделений фоном этих пунктов — только зелёный останется».
   ══════════════════════════════════════════════════════════════════════════ */
.th-example-block,
.theory-body .th-example-block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 640px;
  margin: 10px auto 22px !important;
  text-align: center;
}
.th-example-step,
.theory-body .th-example-step {
  display: block !important;
  background: transparent !important;
  padding: 9px 6px !important;
  text-align: center;
}
.th-example-step:not(:last-child) { border-bottom: none !important; }
.th-example-step-t,
.theory-body .th-example-step-t {
  display: block !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
  background: transparent !important;
}
/* Финальный шаг (ответ) — единственный акцент: зелёный текст, без плашки */
.th-example-step:last-child { border-bottom: none !important; }
.th-example-step:last-child .th-example-step-t,
.theory-body .th-example-step:last-child .th-example-step-t {
  color: #22aa5a !important;
  font-weight: 800 !important;
}
[data-theme="light"] .th-example-step:last-child .th-example-step-t { color: #177a45 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   R10-6 — Адаптация под все устройства (планшет / телефон / малые экраны)
   ══════════════════════════════════════════════════════════════════════════ */

/* Базовое: ничего не должно вылезать за экран по горизонтали */
html, body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Планшеты (≤1024px) */
@media (max-width: 1024px) {
  .s30-hero-title { font-size: clamp(22px, 4vw, 34px) !important; }
  .lg-props-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
  .task-graph-geo .task-geo-fig { max-width: 100%; }
}

/* Телефоны (≤768px) */
@media (max-width: 768px) {
  .task-item { padding: 14px 12px !important; }
  .task-input-wrap { flex-wrap: wrap; gap: 8px; }
  .task-input-wrap input[type="text"],
  .task-input-wrap input[type="number"] { flex: 1 1 140px; min-width: 0; }
  .task-choice-grid, .task-choice-grid--block {
    grid-template-columns: 1fr !important;
  }
  .theory-body { font-size: 15px; }
  .theory-body .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
  .katex-display > .katex { white-space: normal; }
  .th-compare-row { flex-direction: column !important; }
  .lg-props-grid { grid-template-columns: 1fr !important; }
  /* Виджеты-анимации: не обрезаем, даём скролл если совсем узко */
  .mpa2-stage, .mpa-stage { max-width: 100%; overflow-x: auto; }
  .task-graph-geo .task-geo-fig { max-width: 100%; padding: 4px 2px; }
}

/* Малые телефоны (≤420px) */
@media (max-width: 420px) {
  .task-item .task-prompt { font-size: 14.5px; }
  .s30-hero-title { font-size: 20px !important; }
  .s30-filter-btn { flex: 1 1 100%; }
  .task-input-wrap .btn, .task-choice-actions .btn { flex: 1 1 auto; }
}

/* R9-5: формулы на карточках задач не должны «съезжать» за край.
   Длинные inline-формулы KaTeX получают горизонтальный скролл внутри
   карточки вместо вылезания за её пределы. */
.task-item .task-prompt { overflow-wrap: break-word; }
.task-item .task-prompt .katex { white-space: normal; }
.task-item .task-prompt .katex-display {
  overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: 3px 0;
}
.task-item .katex { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   R13-1 — АДАПТИВНОСТЬ КАРТЫ КУРСА (телефоны/планшеты ≤640px)
   Проблема: .s30-filters-right имел flex:0 0 auto и уезжал за правый край
   экрана (right=572 при vw=375). Дропдауны имели жёсткие ширины.
   Фикс: на мобильных панель фильтров занимает 100% ширины, дропдауны
   растягиваются по 2 в ряд, кнопки не вылезают за экран.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .s30-filters-right {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .s30-filters-right .s30-dropdown-wrap {
    flex: 1 1 45% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .s30-filters-right .s30-dropdown-wrap .s30-filter-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
  .s30-filters-right .s30-fav-btn {
    flex: 1 1 45% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .s30-filters-right .s30-sort-btn { flex: 0 0 40px !important; }
  /* Выпадающие списки не шире экрана */
  .s30-dropdown-menu {
    max-width: calc(100vw - 32px) !important;
    left: 0 !important;
    right: auto !important;
  }
  /* Декоративный blob героя не создаёт горизонтальный сдвиг */
  .s30-hero { overflow: hidden !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R13-2 — PRACTICE CHIPS на телефонах: перенос вместо вылезания за экран
   Проблема: v23-правило .practice-chips-row { flex-wrap: nowrap !important }
   заставляло чипы (min-width:120-140px) вылезать за правый край на 375px.
   Блок в конце файла — выигрывает каскад у v23.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .practice-chips-row { flex-wrap: wrap !important; }
  .practice-chips-row .pchip {
    flex: 1 1 45% !important;
    min-width: 140px !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R13-3 — ФИЛЬТРЫ КАРТЫ: планшет и телефон (по замечаниям)
   • Планшет (641–900px): поиск на всю ширину строки; ниже — все 3 дропдауна
     + избранное + сортировка в ОДНУ строку, растянуты без боковых отступов.
   • Телефон (≤640px): классы + предметы в одной строке; «Экзамены» +
     избранное + сортировка — в одной строке (кнопки рядом с экзаменами).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 900px) {
  .s30-filters-bar { flex-wrap: wrap !important; }
  .s30-search-wrap {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
  .s30-filters-right {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  .s30-filters-right > .s30-dropdown-wrap {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .s30-filters-right > .s30-dropdown-wrap .s30-filter-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
  .s30-filters-right .s30-fav-btn { flex: 0 0 40px !important; min-width: 40px !important; }
  .s30-filters-right .s30-sort-btn { flex: 0 0 40px !important; }
}
@media (max-width: 640px) {
  /* DOM-порядок после свапа: (1) классы, (2) экзамены, (3) предметы.
     На телефоне сохраняем утверждённую раскладку через flex order:
     строка 1 — классы + предметы; строка 2 — экзамены + звезда + сортировка. */
  .s30-filters-right > .s30-dropdown-wrap:nth-child(1) {
    order: 1 !important;
    flex: 1 1 40% !important;
    min-width: 0 !important;
  }
  .s30-filters-right > .s30-dropdown-wrap:nth-child(3) {
    order: 2 !important;
    flex: 1 1 40% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  /* строка 2: экзамены растянуты + звезда и сортировка рядом */
  .s30-filters-right > .s30-dropdown-wrap:nth-child(2) {
    order: 3 !important;
    flex: 1 1 55% !important;
    min-width: 160px !important;
    max-width: none !important;
  }
  .s30-filters-right .s30-fav-btn {
    order: 4 !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }
  .s30-filters-right .s30-sort-btn { order: 5 !important; flex: 0 0 40px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R14-1 — МОБИЛЬНАЯ ВЕРСИЯ КАК ПРИЛОЖЕНИЕ: НИЖНИЙ ТАББАР
   На телефонах и планшетах (≤900px):
   • сайдбар и гамбургер полностью скрыты;
   • навигация — нижняя панель #mobileTabbar (Главная, Карта, Видео,
     Кабинет, Ещё-шторка со Статистикой/Лидерами/Подписками);
   • контент на всю ширину с запасом снизу под панель.
   Фикс бага: правило «.mobile-tabbar { position: relative; z-index:2 }»
   (canvas-bg-слой) перебивало position:fixed и панель падала ПОД экран.
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-tabbar { display: none !important; }

@media (max-width: 900px) {
  /* Сайдбар и гамбургер убираем полностью — навигация теперь снизу */
  :root body div.v2-shell aside.v2-sidebar { display: none !important; }
  .v2-mobile-hamburger { display: none !important; }
  .v2-sidebar-overlay { display: none !important; }

  /* Контент занимает всю ширину + запас снизу под таббар */
  :root body div.v2-shell main.v2-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }
  :root body div.v2-shell main.v2-main section.page-section {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Таббар: возвращаем fixed поверх контента (фикс position:relative) */
  .mobile-tabbar {
    display: flex !important;
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    z-index: 400 !important;
  }
  .mobile-tabbar-inner { width: 100%; }

  /* Шторка «Ещё» */
  .mp-more-sheet-overlay {
    position: fixed; inset: 0;
    z-index: 398;
    background: rgba(0,0,0,0.45);
    display: none;
  }
  .mp-more-sheet-overlay.open { display: block; }
  .mp-more-sheet {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    z-index: 399;
    background: rgba(13, 18, 32, 0.98);
    border-top: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px 16px 0 0;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateY(130%);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mp-more-sheet.open { transform: translateY(0); }
  :root[data-theme="light"] .mp-more-sheet { background: #ffffff; border-top-color: rgba(0,0,0,0.1); }
  .mp-more-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    border-radius: 10px;
    padding: 13px 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text, #e2e8f0);
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  .mp-more-sheet-item svg { width: 20px; height: 20px; }
  .mp-more-sheet-item.active { color: var(--accent, #38bdf8); background: rgba(56,189,248,0.10); }
  :root[data-theme="light"] .mp-more-sheet-item { color: #1e293b; }
  :root[data-theme="light"] .mp-more-sheet-item.active { color: #0284c7; background: rgba(2,132,199,0.08); }
}

/* R14-1b: на мобильных cookie-баннер не перекрывает нижний таббар */
@media (max-width: 900px) {
  .cookie-banner {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* R14-1c: главная на телефоне — карточки не шире экрана
   (grid-дети по умолчанию min-width:auto и распираются контентом) */
@media (max-width: 900px) {
  .home-two-grid { grid-template-columns: 1fr !important; }
  .home-two-grid > *, .h2g-card {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .h2g-card > * { min-width: 0 !important; max-width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R15-1 — МОБИЛКА: убираем зазор слева от «свёрнутого сайдбара»
   Баг: юзер сворачивал сайдбар на ПК → localStorage mp_sidebar_collapsed=1 →
   на телефоне .v2-shell--sidebar-collapsed .v2-main { margin-left:72px }
   оставался в силе (правила 18263/18384 без media-скоупа). Сайдбар на
   мобилке скрыт полностью, поэтому ЛЮБОЙ его отступ = мусорная полоса слева.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root body div.v2-shell main.v2-main,
  :root body div.v2-shell.v2-shell--sidebar-collapsed main.v2-main,
  .v2-shell--sidebar-collapsed .v2-main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R15-2 — МОБИЛКА: нормальная высота полей ввода ответа
   Баг: в ≤768px .task-input-wrap { flex-direction:column }, а правило
   «flex: 1 1 140px» в колоночном флексе делает 140px ВЫСОТОЙ инпута —
   получались гигантские белые прямоугольники.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .task-input-wrap input[type="text"],
  .task-input-wrap input[type="number"],
  .task-input-wrap .task-input {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R15-3 — МОБИЛКА: центровка уместных элементов
   Хиро-блоки, заголовки страниц и экшн-кнопки задач — по центру.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .home-hero, .hero-inner, .map-hero, .section-head { text-align: center; }
  .hero-cta-row { justify-content: center; }
  .task-input-wrap.task-choice-actions,
  .task-input-wrap { align-items: center; }
  .task-input-wrap .btn { max-width: 420px; }
  .cabinet-hero, .profile-card { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R15-4 — Шторка «Ещё»: пункт смены темы (стили; логика в app.js)
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-more-sheet-item--theme .mp-icon-svg svg { width: 20px; height: 20px; }

/* ═══════════════════════════════════════════════════════════════════════════
   R16-1 — МОБИЛКА: главная (и все секции) снова листаются вниз.
   Причины: 1) body{position:fixed;overflow:hidden} на ≤480px запрещал скролл
   документа; 2) .page-section получал max-height:calc(100vh-110px) из медиа
   ≤1020px (max-height никто не перебивал), а поздний блок ставил
   overflow:visible !important — секция теряла собственный скролл;
   3) .shell/.content держали max-height:100vh.
   Решение: на ≤900px переходим на естественный скролл документа.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html, body {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  :root body div.v2-shell,
  :root body div.v2-shell main.v2-main,
  .shell, .content {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh;
    overflow: visible !important;
  }
  :root body div.v2-shell main.v2-main section.page-section,
  .page-section {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R16-2 — Таббар: убираем голубую фоновую плашку за активной вкладкой.
   Активная вкладка подсвечивается только цветом линий иконки (голубой).
   ═══════════════════════════════════════════════════════════════════════════ */
.tab-pill-indicator { display: none !important; }
.tab-btn.active, .tab-link.active { background: transparent !important; }
.tab-btn.active .tab-icon svg, .tab-link.active .tab-icon svg { stroke: #35B1FA; }
.mp-more-sheet-item.active { background: transparent !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   R16-5 — Чёрный фон .v2-shell перекрывал тематический задний фон страницы
   (внизу длинных страниц был виден «обрыв»: чёрное полотно шелла кончалось,
   а дальше шёл настоящий фон темы). Убираем собственный фон шелла — теперь
   всю страницу заливает единый задний фон (html + анимированный канвас),
   который автоматически меняется при смене темы.
   ═══════════════════════════════════════════════════════════════════════════ */
.v2-shell,
[data-theme="dark"] .v2-shell,
[data-theme="light"] .v2-shell,
.v2-shell[data-bg] {
  background: transparent !important;
}
/* Фон страницы несут html/body — они уже тема-зависимые */
:root[data-theme="light"] html, :root[data-theme="light"] body { background: #f7f9fc; }
:root[data-theme="dark"] html, :root[data-theme="dark"] body,
:root:not([data-theme="light"]) html, :root:not([data-theme="light"]) body { background: #0f172a; }

/* ═══════════════════════════════════════════════════════════════════════════
   R14-5 — Варианты ответа (задачи с выбором А/Б/В/Г):
   1) Убрано «странное свечение» при наведении: без sweep-блика, без
      box-shadow-глоу, без подпрыгивания. Наведение = только спокойная
      подсветка рамки.
   2) Блоки идут друг под другом (один столбец) — читаются сверху вниз.
   3) Буква варианта (А/Б/В/Г) и текст варианта — ОДИНАКОВЫЙ размер шрифта,
      без вращения/масштабирования буквы при hover.
   ═══════════════════════════════════════════════════════════════════════════ */
.task-choice-grid {
  grid-template-columns: 1fr !important; /* блоки друг под другом */
  gap: 8px !important;
}
.task-choice-btn::before {
  display: none !important; /* убираем бегущий блик */
}
.task-choice-btn:hover {
  border-color: var(--accent) !important;
  transform: none !important;
  box-shadow: none !important; /* убираем свечение */
  background: var(--surface2, rgba(255,255,255,.03)) !important;
}
.task-choice-btn.active:hover {
  background: linear-gradient(135deg, rgba(30,150,228,.14), rgba(30,150,228,.05)) !important;
}
.task-choice-btn.active {
  box-shadow: none !important; /* и у выбранного — без глоу-кольца */
}
.task-choice-btn:hover .task-choice-label {
  transform: none !important; /* буква не крутится и не растёт */
}
.task-choice-btn.active .task-choice-label {
  transform: none !important;
}
/* Единый размер: буква = текст */
.task-choice-label {
  font-size: 1rem !important;
  min-width: 28px; height: 28px;
  box-shadow: none !important;
}
.task-choice-text {
  font-size: 1rem !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   R18-1: Фильтры карты курса на планшетной ширине (641–1180px).
   Скрин юзера (~1024px): поиск + 3 дропдауна по 168px + звезда + сортировка
   не влезали в одну строку — правый край обрезался. Решение: на этой ширине
   поиск занимает всю первую строку, группа фильтров переносится на вторую
   строку и её кнопки становятся ГИБКИМИ (width:auto, min/max), ничего не
   вылезает за экран. Поиск САЙДБАРА не затронут.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1180px) {
  .s30-filters-bar { flex-wrap: wrap !important; overflow: visible !important; }
  .s30-search-wrap {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .s30-filters-right {
    margin-left: 0 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .s30-dropdown-wrap { flex: 1 1 auto; min-width: 0 !important; }
  .s30-dropdown-wrap .s30-filter-btn { width: 100% !important; }
  .s30-filter-btn {
    width: auto !important;
    min-width: 128px !important;
    max-width: 200px !important;
    flex: 1 1 auto;
  }
  .s30-fav-btn { min-width: 40px !important; flex: 0 0 auto; }
  .s30-sort-btn { flex: 0 0 auto; }
}

/* ── Задания на доказательство (validator "proof") ─────────────────────
   Без поля ввода и кнопки «Проверить»: плашка с указанием, куда присылать
   решение. Цвета — синие акценты продукта (никакого фиолетового). */
.task-proof-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(30, 150, 228, 0.12);
  border: 1px dashed rgba(30, 150, 228, 0.55);
  color: #bfe3ff;
  font-size: 0.9rem;
  line-height: 1.35;
}
.task-proof-note svg { flex: 0 0 auto; color: #6cc2ff; }
.task-proof-note b { color: #eaf6ff; }
.task-proof-actions { margin-top: 8px; }

/* ── Кнопка «Микс» — перемешать задания ──────────────────────────────── */
.task-mix-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.task-mix-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  border-color: rgba(30, 150, 228, 0.55);
  color: #6cc2ff;
}
.task-mix-btn:hover {
  background: rgba(30, 150, 228, 0.14);
  border-color: rgba(30, 150, 228, 0.85);
  color: #9fd8ff;
}

/* ТЗ №8 (2026-08-27): поиск компактнее («Поиск...» вместо «Поиск тем...»),
   кнопка «Отчёт» НЕ наезжает на фильтры даже на ноутбуках 1024-1280px. */
.s30-stats-btn { padding: 0 14px !important; flex: none !important; }
@media (max-width: 1280px) {
  .s30-search-wrap { flex: 1 1 130px !important; min-width: 90px !important; max-width: 180px !important; }
  .s30-filters-bar { gap: 8px !important; }
  .s30-filters-right { gap: 8px !important; }
  .s30-filter-btn { padding: 0 12px !important; font-size: 13px !important; }
  .s30-stats-btn { padding: 0 12px !important; font-size: 13px !important; height: 42px; }
}
@media (max-width: 1080px) {
  .s30-search-wrap { flex: 1 1 110px !important; min-width: 80px !important; max-width: 150px !important; }
  .s30-filter-btn { padding: 0 10px !important; font-size: 12.5px !important; }
  .s30-stats-btn { padding: 0 10px !important; font-size: 12.5px !important; gap: 6px; }
  .s30-stats-btn svg { width: 15px; height: 15px; }
}

/* ═══════════════════════════════════════════════════════════════
   ТЗ №9: МАГАЗИН — золотые билеты
═══════════════════════════════════════════════════════════════ */
#shop { position: relative; overflow: hidden; }
.shop-layout { max-width: 1080px; }
.shop-offer {
  display: grid; grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 32px; align-items: center;
  background: var(--card, #151b23);
  border: 1px solid rgba(251,191,36,0.22);
  border-radius: 20px; padding: 28px;
  margin-bottom: 34px;
}
@media (max-width: 860px) { .shop-offer { grid-template-columns: 1fr; } }

/* ── Билет ── */
.shop-ticket {
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 22px 24px 18px;
  color: #3d2b00;
  background: linear-gradient(135deg, #f8d978 0%, #fbbf24 38%, #d97706 100%);
  box-shadow: 0 14px 40px rgba(251,191,36,0.28), inset 0 1px 0 rgba(255,255,255,0.55);
  font-family: inherit;
}
.shop-ticket::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.08) 0 12px, transparent 12px 24px);
}
/* живой блик, медленно гуляет по билету */
.shop-ticket-shine {
  position: absolute; top: -60%; left: -30%; width: 45%; height: 220%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: rotate(12deg); pointer-events: none;
  animation: shopShine 4.5s ease-in-out infinite;
}
@keyframes shopShine {
  0%, 55%, 100% { left: -45%; } 25% { left: 115%; }
}
.shop-ticket-head { display: flex; justify-content: space-between; align-items: center; }
.shop-ticket-brand {
  font-size: 11px; letter-spacing: 2px; font-weight: 800;
  text-transform: uppercase; opacity: 0.7;
}
.shop-ticket-star { font-size: 18px; opacity: 0.8; }
.shop-ticket-title {
  font-size: 26px; font-weight: 900; letter-spacing: 3px; margin-top: 8px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
.shop-ticket-sub { font-size: 13.5px; font-weight: 600; opacity: 0.85; margin: 2px 0 12px; }
/* перфорация как у настоящего билета */
.shop-ticket-perf {
  height: 0; border-top: 2px dashed rgba(61,43,0,0.4);
  margin: 4px -24px 12px; position: relative;
}
.shop-ticket-perf::before, .shop-ticket-perf::after {
  content: ""; position: absolute; top: -9px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--card, #151b23);
}
.shop-ticket-perf::before { left: -9px; }
.shop-ticket-perf::after { right: -9px; }
.shop-ticket-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 3px 0;
}
.shop-ticket-row span { opacity: 0.75; font-weight: 600; }
.shop-ticket-row b { font-family: 'Consolas', 'Menlo', monospace; font-weight: 700; }
.shop-ticket-actions { display: flex; gap: 10px; margin-top: 14px; position: relative; z-index: 2; }

/* использованный: приглушаем + штамп */
.shop-ticket.is-used { filter: saturate(0.45) brightness(0.82); }
.shop-ticket-stamp {
  position: absolute; top: 40%; left: 50%; z-index: 3;
  transform: translate(-50%, -50%) rotate(-16deg);
  border: 4px solid #b3261e; color: #b3261e;
  font-size: 27px; font-weight: 900; letter-spacing: 4px;
  padding: 6px 18px; border-radius: 10px; opacity: 0.9;
  background: rgba(255,255,255,0.25);
  text-transform: uppercase; pointer-events: none;
}
.shop-stamp-anim .shop-ticket-stamp { animation: shopStamp 0.5s cubic-bezier(0.2, 2.2, 0.4, 1) both; }
@keyframes shopStamp {
  0% { transform: translate(-50%, -50%) rotate(-16deg) scale(3.2); opacity: 0; }
  70% { transform: translate(-50%, -50%) rotate(-16deg) scale(0.92); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-16deg) scale(1); opacity: 0.9; }
}

/* ── Инфо-колонка предложения ── */
.shop-offer-name { font-size: 22px; font-weight: 800; margin: 0 0 8px; color: var(--text, #f1f5f9); }
.shop-offer-desc { font-size: 14px; line-height: 1.6; color: var(--text2, #94a3b8); margin: 0 0 16px; }
.shop-price-row { display: flex; align-items: baseline; gap: 8px; }
.shop-price {
  font-size: 34px; font-weight: 900;
  background: linear-gradient(120deg, #f8d978, #d97706);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.shop-price-cur { font-size: 15px; font-weight: 700; color: var(--text2, #94a3b8); }
.shop-balance { font-size: 13.5px; color: var(--text2, #94a3b8); margin: 8px 0 8px; }
.shop-balance b { color: var(--text, #f1f5f9); }
.shop-progress {
  height: 8px; border-radius: 6px; overflow: hidden;
  background: rgba(148,163,184,0.18); margin-bottom: 6px;
}
.shop-progress-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #f8d978, #d97706);
  transition: width 0.6s ease;
}
.shop-progress-note { font-size: 12px; color: var(--text2, #94a3b8); margin-bottom: 16px; }

/* ── Кнопки ── */
.shop-btn {
  border: none; border-radius: 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; padding: 10px 18px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.shop-btn:active { transform: scale(0.96); }
.shop-btn-buy {
  display: block; width: 100%; padding: 14px 20px; font-size: 15px;
  color: #3d2b00;
  background: linear-gradient(120deg, #f8d978, #fbbf24 55%, #d97706);
  box-shadow: 0 8px 24px rgba(251,191,36,0.35);
}
.shop-btn-buy:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(251,191,36,0.45); }
.shop-btn-buy:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.shop-btn-use { background: #3d2b00; color: #fbbf24; }
.shop-btn-use:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
.shop-btn-ghost {
  background: rgba(61,43,0,0.12); color: #3d2b00;
  border: 1.5px solid rgba(61,43,0,0.4);
}

/* ── Стена билетов ── */
.shop-wall-head h3 { font-size: 18px; font-weight: 800; color: var(--text, #f1f5f9); margin: 0 0 14px; }
.shop-wall-count {
  display: inline-block; min-width: 26px; text-align: center;
  background: linear-gradient(120deg, #f8d978, #d97706); color: #3d2b00;
  font-size: 13px; font-weight: 800; border-radius: 999px; padding: 2px 9px; margin-left: 6px;
}
.shop-tickets-wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.shop-empty {
  grid-column: 1 / -1; text-align: center; padding: 44px 20px;
  border: 2px dashed rgba(251,191,36,0.35); border-radius: 16px;
  color: var(--text2, #94a3b8); font-size: 14.5px;
}

/* ── Анимация подлёта нового билета ── */
.shop-fly-in { animation: shopFlyIn 1.3s cubic-bezier(0.18, 1.4, 0.3, 1) both; }
@keyframes shopFlyIn {
  0% { transform: translateY(-340px) rotate(-14deg) scale(0.5); opacity: 0; }
  55% { transform: translateY(16px) rotate(4deg) scale(1.06); opacity: 1; }
  75% { transform: translateY(-8px) rotate(-2deg) scale(0.99); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}
/* золотое конфетти */
.shop-confetti {
  position: absolute; top: -20px; z-index: 30; pointer-events: none;
  color: #fbbf24; font-size: 18px; text-shadow: 0 0 8px rgba(251,191,36,0.8);
  animation: shopConfetti 1.6s ease-in forwards;
}
@keyframes shopConfetti {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(560px) rotate(340deg); opacity: 0; }
}

/* светлая тема */
:root[data-theme="light"] .shop-offer { background: #ffffff; border-color: rgba(217,119,6,0.3); }
:root[data-theme="light"] .shop-ticket-perf::before,
:root[data-theme="light"] .shop-ticket-perf::after { background: #ffffff; }
:root[data-theme="light"] .shop-offer-name { color: #0f172a; }
:root[data-theme="light"] .shop-wall-head h3 { color: #0f172a; }
:root[data-theme="light"] .shop-balance b { color: #0f172a; }

/* ── ТЗ №10: живая сцена внутри карточки задания ── */
.task-anim { margin: 12px 0 4px; }
.task-anim.mpa2 { background: rgba(30,150,228,.05); border: 1px solid rgba(30,150,228,.16); border-radius: 14px; padding: 12px 14px; }
[data-theme="light"] .task-anim.mpa2 { background: rgba(30,150,228,.04); }

/* ── ТЗ №11: блок «Что спрашивают на экзамене» — нумерация друг под другом ── */
.lh-exam-list {
  margin: 0 auto; max-width: 680px; padding: 0;
  list-style: none; counter-reset: lhexam;
  text-align: left; font-size: 1.05rem; color: var(--text); line-height: 1.75;
}
.lh-exam-list li {
  counter-increment: lhexam;
  position: relative; padding: 7px 0 7px 44px; margin: 0;
}
.lh-exam-list li + li { border-top: 1px dashed rgba(30,150,228,.18); }
.lh-exam-list li::before {
  content: counter(lhexam);
  position: absolute; left: 0; top: 8px;
  width: 27px; height: 27px; border-radius: 50%;
  background: rgba(30,150,228,.14); color: #1e96e4;
  font-size: 0.82rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}

/* Обложки уроков на карточках модулей */
.module-cover {
  display: block;
  width: calc(100% + 36px);
  margin: -18px -18px 12px -18px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  aspect-ratio: 460 / 180;
  object-fit: cover;
}
@media (max-width: 640px) {
  .module-cover { width: calc(100% + 28px); margin: -13px -14px 10px -14px; }
}

/* ─── ТЗ №14: достижения — XP на заблокированных + кастомный тултип ─── */
.ach-v2-xp-locked {
  color: #ffd28a !important;
  opacity: 0.85;
  font-weight: 700;
}
.ach-v2-lock-hint { display: none; }
.achievement-card { position: relative; overflow: visible; }
.ach-xp {
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #3dbf6e;
}
.ach-xp-locked { color: #ffd28a; opacity: 0.9; }
.ach-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 240px;
  white-space: normal;
  text-align: center;
  line-height: 1.45;
  background: rgba(17, 17, 27, 0.97);
  color: #e2e8f0;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(30, 150, 228, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 60;
}
.ach-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(17, 17, 27, 0.97);
}
.achievement-card:hover .ach-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Тултип полной сетки: показываем описание целиком на карточке при наведении */
.ach-v2-card { overflow: visible; }
.ach-v2-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ach-v2-card:hover .ach-v2-desc {
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* ─── ТЗ №14б: статичный рисунок-схема в карточке задачи ─── */
.task-pic {
  margin: 10px 0 4px;
  padding: 10px 8px;
  background: rgba(148, 163, 184, 0.07);
  border: 1px solid var(--border2, rgba(148,163,184,0.18));
  border-radius: 12px;
}
.task-pic svg { max-width: 420px; width: 100%; height: auto; display: block; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════════
   ТЗ №17/№18/№19: ИГРА «Хранитель Драконов» — 2D-приключение (вид сверху), свет, звук, двери-задачи
═══════════════════════════════════════════════════════════════════ */
.dg-hero { padding: 26px; border-radius: 20px; margin-bottom: 22px;
  background: linear-gradient(135deg, rgba(30,150,228,0.16), rgba(61,191,110,0.14));
  border: 1px solid rgba(61,191,110,0.35); position: relative; overflow: hidden; }
.dg-hero::after { content: '🐉'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 84px; opacity: 0.12; pointer-events: none; }
.dg-hero-t { font-size: 24px; font-weight: 800; color: var(--text, #1e293b); margin-bottom: 8px; }
.dg-hero-s { font-size: 14.5px; line-height: 1.55; color: var(--text2, #64748b); max-width: 680px; margin-bottom: 12px; }
.dg-hero-stats { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13.5px; color: var(--text2, #64748b); }
.dg-hero-stats b { color: var(--text, #1e293b); }

/* карта-приключение: вертикальная тропа с островами-главами */
.dg-isles { position: relative; margin-bottom: 28px; border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 30% at 20% 12%, rgba(30,150,228,0.16), transparent 70%),
    radial-gradient(ellipse 55% 26% at 80% 42%, rgba(61,191,110,0.13), transparent 70%),
    radial-gradient(ellipse 60% 28% at 25% 72%, rgba(245,192,74,0.1), transparent 70%),
    radial-gradient(ellipse 55% 24% at 78% 94%, rgba(226,87,76,0.12), transparent 70%),
    linear-gradient(180deg, #0b1526 0%, #0a1a24 30%, #101724 60%, #150f1a 100%);
  border: 1px solid rgba(148,163,184,0.22); }
.dg-isles::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle 1px at 12% 8%, rgba(255,255,255,0.5) 1px, transparent 1.6px),
    radial-gradient(circle 1px at 68% 15%, rgba(255,255,255,0.35) 1px, transparent 1.6px),
    radial-gradient(circle 1px at 35% 28%, rgba(255,255,255,0.4) 1px, transparent 1.6px),
    radial-gradient(circle 1px at 88% 34%, rgba(255,255,255,0.3) 1px, transparent 1.6px),
    radial-gradient(circle 1px at 15% 48%, rgba(255,255,255,0.4) 1px, transparent 1.6px),
    radial-gradient(circle 1px at 55% 58%, rgba(255,255,255,0.3) 1px, transparent 1.6px),
    radial-gradient(circle 1px at 80% 68%, rgba(255,255,255,0.4) 1px, transparent 1.6px),
    radial-gradient(circle 1px at 30% 82%, rgba(255,255,255,0.35) 1px, transparent 1.6px),
    radial-gradient(circle 1px at 70% 92%, rgba(255,255,255,0.4) 1px, transparent 1.6px); }
.dg-isles-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dg-isle { position: absolute; width: 300px; max-width: 46%; display: flex; gap: 12px; align-items: center;
  transition: transform .2s; z-index: 1; }
.dg-isle:not(.locked):hover { transform: translateY(-4px); }
.dg-isle.locked { opacity: 0.55; filter: grayscale(0.6); }
.dg-isle-art { position: relative; width: 150px; flex: 0 0 150px; }
.dg-isle-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 18px rgba(0,0,0,0.45)); }
.dg-isle:not(.locked) .dg-isle-art { animation: dgIsleFloat 5s ease-in-out infinite; }
.dg-isle:nth-child(odd) .dg-isle-art { animation-delay: -2.5s; }
@keyframes dgIsleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.dg-isle-emoji { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); font-size: 30px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }
.dg-isle-flag { position: absolute; top: 2%; right: 16%; font-size: 20px; }
.dg-isle-hero-mark { position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  animation: dgHeroBob 1.6s ease-in-out infinite; }
@keyframes dgHeroBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
.dg-isle-info { flex: 1; background: rgba(10,16,28,0.78); border: 1px solid rgba(148,163,184,0.3);
  border-radius: 16px; padding: 12px 14px; backdrop-filter: blur(3px); }
.dg-isle.cleared .dg-isle-info { border-color: rgba(61,191,110,0.55); }
.dg-isle.current .dg-isle-info { border-color: rgba(245,192,74,0.65); box-shadow: 0 0 22px rgba(245,192,74,0.18); }
.dg-isle .dg-lv-title { color: #eef3fb; }
.dg-isle .dg-lv-lock { color: #93a1b8; }
@media (max-width: 760px) {
  .dg-isle { width: 88%; max-width: 88%; }
  .dg-isle-art { width: 96px; flex: 0 0 96px; }
}

/* старая сетка глав (legacy) */
.dg-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.dg-level { border-radius: 16px; padding: 16px; border: 1px solid rgba(148,163,184,0.28);
  background: var(--card, #fff); transition: transform .18s, box-shadow .18s; position: relative; }
.dg-level:not(.locked):hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(30,150,228,0.18); }
.dg-level.locked { opacity: 0.55; filter: grayscale(0.5); }
.dg-level.cleared { border-color: rgba(61,191,110,0.55); }
.dg-lv-num { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #1e96e4; margin-bottom: 4px; }
.dg-lv-title { font-size: 15.5px; font-weight: 700; color: var(--text, #1e293b); margin-bottom: 8px; }
.dg-lv-stars { font-size: 18px; color: #f5c04a; margin-bottom: 8px; letter-spacing: 2px; }
.dg-lv-stars .dim, .dg-lv-stars.dim { color: rgba(148,163,184,0.45); }
.dg-lv-lock { font-size: 12px; color: var(--text2, #64748b); line-height: 1.4; }
.dg-play-btn { width: 100%; padding: 9px 12px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #1e96e4, #3dbf6e); color: #fff; font-weight: 700; font-size: 13.5px;
  transition: filter .15s; }
.dg-play-btn:hover { filter: brightness(1.1); }

/* снаряжение */
.dg-gear { border-radius: 16px; padding: 18px; border: 1px solid rgba(148,163,184,0.28); background: var(--card, #fff); margin-bottom: 20px; }
.dg-gear-t { font-weight: 800; font-size: 16px; color: var(--text, #1e293b); margin-bottom: 12px; }
.dg-gear-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.dg-gear-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid rgba(148,163,184,0.4); background: transparent; cursor: pointer; font-size: 13.5px;
  color: var(--text, #1e293b); transition: border-color .15s, background .15s; }
.dg-gear-item:hover { border-color: #1e96e4; }
.dg-gear-item.active { border-color: #3dbf6e; background: rgba(61,191,110,0.12); }
.dg-gear-item b { color: #3dbf6e; }
.dg-sw { width: 16px; height: 16px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.dg-gear-hint { font-size: 12.5px; color: var(--text2, #64748b); }

/* снаряжение: карточки с SVG-персонажами */
.dg-gear-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.dg-gear-card { border-radius: 16px; padding: 14px 10px 12px; cursor: pointer; text-align: center;
  border: 1.5px solid rgba(148,163,184,0.35); background: linear-gradient(180deg, rgba(16,24,40,0.55), rgba(10,16,28,0.75));
  transition: transform .16s, border-color .16s, box-shadow .16s; }
.dg-gear-card:hover { transform: translateY(-3px); border-color: #1e96e4; box-shadow: 0 8px 22px rgba(30,150,228,0.2); }
.dg-gear-card.active { border-color: #3dbf6e; box-shadow: 0 0 0 2px rgba(61,191,110,0.35), 0 8px 22px rgba(61,191,110,0.18); }
.dg-gear-prev { width: 108px; height: 132px; margin: 0 auto 8px; border-radius: 14px;
  background: radial-gradient(circle at 50% 32%, rgba(30,150,228,0.24), rgba(10,16,28,0.6) 78%);
  display: flex; align-items: center; justify-content: center; }
.dg-gear-prev svg { width: 96px; height: 124px; }
/* сцена диалога с магом Элдвином */
.dg-mage-row { display: flex; gap: 16px; align-items: flex-start; text-align: left; margin: 6px 0 14px; }
.dg-mage-fig { flex: 0 0 auto; position: relative;
  animation: dgMageIn 0.9s cubic-bezier(0.18, 1.5, 0.35, 1) both; }
/* мерцающий магический круг под магом */
.dg-mage-fig::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 110px; height: 26px;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(143,216,255,0.4), rgba(143,216,255,0) 70%);
  animation: dgMageGlow 2.4s ease-in-out infinite; }
@keyframes dgMageGlow { 0%,100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.15); } }
.dg-mage-bubble { position: relative; background: linear-gradient(180deg, rgba(38,64,96,0.78), rgba(20,36,58,0.9));
  border: 1.5px solid rgba(143,216,255,0.4); border-radius: 16px; padding: 12px 16px;
  animation: dgBubbleIn 0.65s 0.45s cubic-bezier(0.18, 1.35, 0.35, 1) both;
  box-shadow: 0 8px 26px rgba(0,0,0,0.35), 0 0 32px rgba(143,216,255,0.12), inset 0 1px 0 rgba(255,255,255,0.08); }
.dg-mage-bubble::before { content: ''; position: absolute; left: -9px; top: 44px;
  border: 9px solid transparent; border-right-color: rgba(143,216,255,0.4); border-left: 0; }
/* бегущий световой блик по рамке пузыря */
.dg-mage-bubble::after { content: ''; position: absolute; inset: -1.5px; border-radius: 16px; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(190,235,255,0.16) 50%, transparent 70%);
  background-size: 220% 100%; animation: dgBubbleSheen 3.2s 1.4s linear infinite; }
@keyframes dgBubbleSheen { from { background-position: 130% 0; } to { background-position: -110% 0; } }
.dg-mage-name { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #8fd8ff; margin-bottom: 6px; }
.dg-mage-line { font-size: 14.5px; line-height: 1.55; color: #e6edf7; margin: 0 0 8px; }
.dg-mage-line1 { animation: dgLineIn 0.5s 0.85s both; }
.dg-mage-line2 { animation: dgLineIn 0.5s 1.5s both; color: #ffe2ad; font-weight: 600; }
@keyframes dgMageIn { 0% { opacity: 0; transform: translateX(-40px) scale(0.7) rotate(-6deg); }
  60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes dgBubbleIn { from { opacity: 0; transform: translateY(16px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes dgLineIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* магические искры вокруг диалога */
.dg-mage-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dg-mage-sparks i { position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #9fd8ff; opacity: 0; animation: dgSparkFloat 3.6s ease-in-out infinite; }
.dg-mage-sparks i:nth-child(2) { animation-delay: 0.9s; background: #ffd76e; }
.dg-mage-sparks i:nth-child(3) { animation-delay: 1.7s; }
.dg-mage-sparks i:nth-child(4) { animation-delay: 2.5s; background: #b9f5d0; }
@keyframes dgSparkFloat { 0% { opacity: 0; transform: translateY(14px) scale(0.6); }
  30% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-46px) scale(1.2); } }
/* ── КАТ-СЦЕНА-ПРЕДЫСТОРИЯ: канвас-видео ── */
.dg-cine { position: relative; width: 100%; max-width: 720px; margin: 0 auto; }
#dgCineCv { display: block; width: 100%; height: auto; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
.dg-cine-sub { min-height: 46px; margin-top: 10px; font-size: 15px; line-height: 1.5;
  color: #ffe2ad; font-weight: 600; text-align: center; }
.dg-cine-skip { position: absolute; top: 10px; right: 10px; padding: 6px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.3); background: rgba(8,12,20,0.6); color: #e6edf7;
  font-size: 12.5px; cursor: pointer; }
.dg-cine-skip:hover { background: rgba(30,150,228,0.4); }
/* кодовый замок сундука */
.dg-code-slots { display: flex; gap: 10px; justify-content: center; margin: 4px 0 8px; }
.dg-code-slot { width: 44px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #6f7f96; background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.16); }
.dg-code-slot.done { color: #ffd76e; border-color: rgba(245,192,74,0.7); background: rgba(245,192,74,0.12);
  animation: dgSlotPop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1); }
.dg-code-slot.cur { border-color: #3dbf6e; color: #b7f0cd; box-shadow: 0 0 14px rgba(61,191,110,0.35); }
@keyframes dgSlotPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.dg-code-hint { font-size: 12.5px; color: #9fb2c8; margin-bottom: 10px; }
@media (max-width: 560px) {
  .dg-mage-row { flex-direction: column; align-items: center; text-align: center; }
  .dg-mage-bubble::before { display: none; }
}
/* 3D-маг в диалоге: свой размер стека (крупнее фигурок снаряжения) */
/* Лавка мага Элдвина: реликвии за алмазы */
.dg-mageshop { margin: 26px 0 8px; padding: 18px 18px 16px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(24,42,68,0.85), rgba(12,22,38,0.92));
  border: 1.5px solid rgba(143,216,255,0.28);
  box-shadow: 0 12px 34px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06); }
.dg-mageshop-head { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.dg-mageshop-fig { flex: 0 0 auto; width: 124px; height: 152px; }
.dg-mageshop-t { font-size: 17px; font-weight: 800; color: #eaf2fc; margin-bottom: 6px; }
.dg-mageshop-bubble { position: relative; font-size: 13.5px; line-height: 1.5; color: #dbe7f5;
  background: rgba(143,216,255,0.1); border: 1.4px solid rgba(143,216,255,0.35);
  border-radius: 14px; padding: 9px 13px; max-width: 520px; }
.dg-mageshop-bubble::before { content: ''; position: absolute; left: -8px; top: 16px;
  border: 8px solid transparent; border-right-color: rgba(143,216,255,0.35); border-left: 0; }
.dg-mageshop-bal { margin-top: 8px; font-size: 12.5px; color: #9fb2c8; }
.dg-mageshop-bal b { color: #9fd8ff; font-size: 14px; }
.dg-mageshop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.dg-mageshop-card { border-radius: 16px; padding: 14px 12px; text-align: center;
  background: rgba(255,255,255,0.045); border: 1.4px solid rgba(148,163,184,0.22);
  transition: transform .16s, border-color .16s, box-shadow .16s; }
.dg-mageshop-card:hover { transform: translateY(-3px); border-color: rgba(143,216,255,0.45);
  box-shadow: 0 10px 24px rgba(0,0,0,0.3); }
.dg-mageshop-card.owned { border-color: rgba(61,191,110,0.5); background: rgba(61,191,110,0.08); }
.dg-mageshop-ico { font-size: 32px; line-height: 1; margin-bottom: 8px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.dg-mageshop-name { font-size: 13.5px; font-weight: 800; color: #eef3fb; margin-bottom: 4px; }
.dg-mageshop-desc { font-size: 12px; color: #9fb2c8; line-height: 1.45; margin-bottom: 10px; min-height: 34px; }
.dg-mageshop-buy { font-size: 12.5px; font-weight: 800; color: #0c1626; background: linear-gradient(180deg, #bfe6ff, #7fc4e8);
  border: none; border-radius: 999px; padding: 7px 16px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(127,196,232,0.35); transition: transform .14s, box-shadow .14s; }
.dg-mageshop-buy:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(127,196,232,0.45); }
.dg-mageshop-buy.locked { background: rgba(148,163,184,0.2); color: #8fa0b8; cursor: not-allowed; box-shadow: none; }
.dg-mageshop-state { font-size: 12px; font-weight: 700; color: #7dedb2; }
@media (max-width: 560px) {
  .dg-mageshop-head { flex-direction: column; text-align: center; }
  .dg-mageshop-bubble::before { display: none; }
}
.dg-gear-name { font-size: 13.5px; font-weight: 800; color: #eef3fb; margin-bottom: 2px; }
.dg-gear-type { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8fa0b8; margin-bottom: 8px; }
.dg-gear-state { font-size: 12px; font-weight: 700; color: #9fb2c8; border: 1px solid rgba(148,163,184,0.35);
  border-radius: 999px; padding: 5px 14px; display: inline-block; background: transparent; cursor: pointer;
  transition: border-color .14s, color .14s, background .14s; }
.dg-gear-state:hover { border-color: #1e96e4; color: #bfe0ff; background: rgba(30,150,228,0.14); }
.dg-gear-card.active .dg-gear-state { color: #7dedb2; border-color: rgba(61,191,110,0.6); background: rgba(61,191,110,0.14); }
.dg-gear-card.rar-legend { border-color: rgba(245,192,74,0.5); }
.dg-gear-card.rar-epic { border-color: rgba(30,150,228,0.5); }

/* сцена 3D */
.dg-stage-wrap { margin-top: 8px; }
.dg-stage { position: relative; border-radius: 18px; overflow: hidden; background: #05070d;
  border: 1px solid rgba(148,163,184,0.3); box-shadow: 0 18px 50px rgba(0,0,0,0.4); }
.dg-stage:fullscreen { border-radius: 0; border: none; }
#dgCanvas { display: block; width: 100%; height: auto; cursor: crosshair; }
/* полный экран без чёрных рамок: картинка заливает весь экран (cover) */
.dg-stage:fullscreen #dgCanvas { position: absolute; inset: 0; width: 100vw; height: 100vh; object-fit: cover; }
/* фальш-полноэкран: CSS-оверлей вместо Fullscreen API —
   нет браузерной чёрной полосы «Нажмите Esc…» */
.dg-stage.dg-fake-fs { position: fixed; inset: 0; left: 0 !important; top: 0 !important; margin: 0 !important;
  z-index: 100000; border-radius: 0; border: none; max-width: none;
  width: 100vw; height: 100vh; background: #05070d; }
.dg-stage.dg-fake-fs #dgCanvas { position: absolute; inset: 0; width: 100vw; height: 100vh; object-fit: cover; }
.dg-stage.dg-fake-fs .dg-corner { top: 14px; right: 16px; }
body.dg-noscroll { overflow: hidden; }
.dg-hud { position: absolute; top: 12px; left: 14px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  font-size: 15px; font-weight: 700; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  background: rgba(8,12,20,0.55); border-radius: 12px; padding: 8px 14px; pointer-events: none;
  max-width: calc(100% - 160px); }
.dg-hud-msg { color: #ffd28a; }
/* свои SVG-сердечки вместо эмодзи + тряска при уроне */
.dg-hud-hearts { display: inline-flex; gap: 3px; align-items: center; }
.dg-hs { width: 20px; height: 18px; }
.dg-hs path { fill: #e2574c; stroke: #7a1f16; stroke-width: 1.4; }
.dg-hs.off path { fill: rgba(120,130,150,0.35); stroke: rgba(60,70,90,0.6); }
.dg-hud-hearts.shake { animation: dgHeartShake 0.4s ease; }
.dg-hud-hearts.shake .dg-hs path { fill: #ff8a7a; }
@keyframes dgHeartShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.dg-hud-floor { color: #9fd4ff; font-size: 13px; }
.dg-hud-go { color: #7dedb2; }
.dg-minimap { position: absolute; top: 12px; right: 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22); opacity: 0.92; pointer-events: none; }
.dg-stage-bar { display: flex; gap: 10px; justify-content: flex-end; padding: 10px 14px; background: rgba(8,12,20,0.85); }
/* аккуратные кнопки-иконки в правом верхнем углу сцены */
.dg-corner { position: absolute; top: 10px; right: 12px; display: flex; gap: 8px; z-index: 6; }
.dg-corner-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.22);
  background: rgba(8,12,20,0.6); color: #e6edf7; font-size: 17px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
  transition: background .15s, border-color .15s, transform .12s; opacity: 0.85; }
.dg-corner-btn:hover { background: rgba(30,150,228,0.35); border-color: rgba(30,150,228,0.6); transform: scale(1.06); opacity: 1; }
.dg-stage:fullscreen .dg-corner { top: 14px; right: 16px; }
.dg-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(5,8,14,0.82); backdrop-filter: blur(3px); z-index: 5; padding: 20px; }
.dg-overlay.hidden { display: none; }
.dg-story { max-width: 560px; text-align: center; color: #e6edf7; }
.dg-story-t { font-size: 22px; font-weight: 800; margin-bottom: 12px; color: #fff; }
.dg-story p { font-size: 15px; line-height: 1.6; color: #c3cfe0; margin-bottom: 14px; }
.dg-help { font-size: 12.5px; color: #8fa4bd; line-height: 1.5; margin-bottom: 10px; }
.dg-goal { font-size: 13.5px; color: #ffd28a; margin-bottom: 16px; }
.dg-btn { display: inline-block; padding: 11px 26px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #1e96e4, #3dbf6e); color: #fff; font-weight: 800; font-size: 15px; margin-top: 4px; }
.dg-btn:hover { filter: brightness(1.12); }
.dg-btn-ghost { background: transparent; border: 1.5px solid rgba(255,255,255,0.35); font-weight: 600; }
.dg-win-stars { font-size: 40px; color: #f5c04a; letter-spacing: 6px; margin: 8px 0; }
.dg-win-stars .dim { color: rgba(148,163,184,0.35); }
.dg-win-xp { font-size: 24px; font-weight: 800; color: #7dedb2; margin-bottom: 12px; }
.dg-finale { color: #ffd28a !important; font-weight: 600; }

/* дверь-задача (2D v3: .dg-door-q — контейнер, внутри topic + prompt + choices/row) */
.dg-door-q { font-size: 15px; font-weight: 500; color: #e6ecf5; margin: 0; max-width: 560px; }
.dg-door-topic { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: #f5c04a; margin-bottom: 12px; text-shadow: 0 0 14px rgba(245,192,74,0.45); }
.dg-door-prompt { font-size: 21px; font-weight: 700; color: #fff; line-height: 1.45; margin: 0 0 16px;
  text-wrap: balance; }
.dg-door-prompt .katex { font-size: 1.08em; }
.dg-door-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 12px; max-width: 460px; margin-left: auto; margin-right: auto; }
.dg-door-choice { background: linear-gradient(180deg, rgba(30,150,228,0.22), rgba(30,150,228,0.1));
  border: 1.5px solid rgba(30,150,228,0.5); color: #dff0ff; font-size: 16px; font-weight: 700;
  padding: 12px 14px; border-radius: 14px; cursor: pointer; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; }
.dg-door-choice:hover { transform: translateY(-2px); border-color: #3dbf6e;
  box-shadow: 0 6px 18px rgba(61,191,110,0.25); }
.dg-door-choice:active { transform: translateY(0); }
.dg-door-row { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; }
.dg-door-inp { width: 180px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08); color: #fff; font-size: 17px; font-weight: 700; text-align: center; outline: none; }
.dg-door-inp:focus { border-color: #3dbf6e; }
.dg-door-err { min-height: 20px; font-size: 13px; color: #ff9d8a; margin-bottom: 8px; }

/* тач-джойстики */
.dg-touch { display: none; }
@media (pointer: coarse) {
  .dg-touch { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 4; }
  .dg-joy { position: absolute; left: 16px; bottom: 16px; width: 104px; height: 104px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35); background: rgba(8,12,20,0.35); pointer-events: auto;
    backdrop-filter: blur(2px); }
  .dg-joy-look { left: auto; right: 20px; }
  .dg-joy-knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
    border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.6), rgba(255,255,255,0.28));
    box-shadow: 0 3px 8px rgba(0,0,0,0.4); }
  .dg-act { position: absolute; right: 22px; bottom: 34px; width: 74px; height: 74px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.4); background: linear-gradient(135deg, #f5c04a, #ffb84a);
    font-size: 30px; pointer-events: auto; box-shadow: 0 6px 18px rgba(245,192,74,0.45); }
  .dg-act:active { transform: scale(0.92); }
  /* HUD компактнее на телефоне */
  .dg-hud { font-size: 12px; gap: 8px; padding: 6px 10px; top: 8px; left: 8px; max-width: calc(100% - 140px); }
  .dg-hs { width: 15px; height: 13px; }
  .dg-corner { top: 8px; right: 8px; gap: 6px; }
  .dg-corner-btn { width: 42px; height: 42px; }
}
/* узкие экраны: сцена и карта не разваливаются */
@media (max-width: 560px) {
  .dg-stage { border-radius: 12px; }
  .dg-story { max-width: 92vw; }
  .dg-story-t { font-size: 18px; }
  .dg-door-prompt { font-size: 17px; }
  .dg-gear-cards { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .dg-gear-prev { width: 92px; height: 112px; }
  .dg-gear-prev svg { width: 82px; height: 104px; }
}

/* лавка Дракона в магазине */
.dg-shop-block { margin-top: 30px; border-radius: 20px; padding: 24px; border: 1px solid rgba(245,192,74,0.4);
  background: linear-gradient(135deg, rgba(245,192,74,0.1), rgba(30,150,228,0.07)); }
.dg-shop-t { font-size: 20px; font-weight: 800; color: var(--text, #1e293b); margin-bottom: 6px; }
.dg-shop-s { font-size: 13.5px; color: var(--text2, #64748b); margin-bottom: 18px; }
.dg-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.dg-shop-card { border-radius: 16px; padding: 16px 14px; text-align: center; background: var(--card, #fff);
  border: 1.5px solid rgba(148,163,184,0.3); position: relative; transition: transform .18s, box-shadow .18s; }
.dg-shop-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.16); }
.dg-shop-card.rar-rare   { border-color: rgba(30,150,228,0.55); }
.dg-shop-card.rar-epic   { border-color: rgba(61,191,110,0.6); }
.dg-shop-card.rar-legend { border-color: rgba(245,192,74,0.75); box-shadow: 0 0 18px rgba(245,192,74,0.2); }
.dg-shop-rar { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(148,163,184,0.18); color: var(--text2, #64748b); }
.rar-rare   .dg-shop-rar { background: rgba(30,150,228,0.16); color: #1e96e4; }
.rar-epic   .dg-shop-rar { background: rgba(61,191,110,0.16); color: #2ea45c; }
.rar-legend .dg-shop-rar { background: rgba(245,192,74,0.22); color: #b8860b; }
.dg-prev { width: 120px; height: 146px; margin: 6px auto 10px; border-radius: 16px;
  background: radial-gradient(circle at 50% 32%, rgba(30,150,228,0.14), rgba(8,12,20,0.05));
  display: flex; align-items: center; justify-content: center; }
.dg-prev-svg { width: 106px; height: 138px; }
.dg-shop-name { font-weight: 800; font-size: 14.5px; color: var(--text, #1e293b); }
.dg-shop-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #1e96e4; margin: 2px 0 6px; }
.dg-shop-desc { font-size: 12px; color: var(--text2, #64748b); line-height: 1.45; min-height: 34px; margin-bottom: 10px; }
.dg-shop-buy { width: 100%; padding: 9px 10px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #f5c04a, #ffd28a); color: #5b4200; font-weight: 800; font-size: 13.5px; }
.dg-shop-buy:hover:not(:disabled) { filter: brightness(1.07); }
.dg-shop-buy:disabled { opacity: 0.45; cursor: not-allowed; }
.dg-shop-owned { padding: 9px 10px; border-radius: 10px; background: rgba(61,191,110,0.14);
  color: #2ea45c; font-weight: 800; font-size: 13.5px; }

/* Лавка Дракона: скины-питомцы заблокированы до спасения дракончика (глава 2) */
.dg-pet-locked { opacity: 0.55; filter: grayscale(0.5); pointer-events: auto; position: relative; }
.dg-pet-locked:hover { transform: none; box-shadow: none; cursor: not-allowed; }
.dg-shop-lock { margin-top: 6px; font-size: 12px; font-weight: 700; color: #f5c04a;
  background: rgba(245, 192, 74, 0.12); border: 1px dashed rgba(245, 192, 74, 0.45);
  border-radius: 8px; padding: 4px 8px; text-align: center; line-height: 1.35; }

/* ===== ИГРА: клетка дракончика (кодовый замок в темнице) ===== */
.dg-cage-q { max-width: 600px; }
.dg-cage-pet { width: 96px; height: 96px; margin: 4px auto 6px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(139,232,164,0.22), rgba(20,30,40,0)); display: flex; align-items: center; justify-content: center; }
.dg-cage-pet svg { width: 90px; height: 90px; }
.dg-cage-slot { border-color: rgba(226,87,76,0.55); }
.dg-cage-slot.done { color: #b7f0cd; border-color: rgba(61,191,110,0.75); background: rgba(61,191,110,0.12); }

/* ===== ИГРА: мультик — диалоговая плашка с портретом ===== */
.dg-cine-dialog { position: absolute; left: 14px; right: 14px; bottom: 54px; display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 14px; border-radius: 14px; background: rgba(6,10,20,0.78); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45); backdrop-filter: blur(4px); animation: dgDlgIn 0.35s ease-out; }
.dg-cine-dialog.hidden { display: none; }
@keyframes dgDlgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dg-cine-port { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.25); background: #101828; }
.dg-cine-port svg { width: 100%; height: 100%; display: block; }
.dg-cine-dlg-body { flex: 1; min-width: 0; text-align: left; }
.dg-cine-who { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd76e; margin-bottom: 3px; }
.dg-cine-text { font-size: 15px; line-height: 1.45; color: #f1f5fb; font-weight: 600; min-height: 22px; }
.dg-cine-dialog.who-mage .dg-cine-who { color: #8fd8ff; }
.dg-cine-dialog.who-mage .dg-cine-port { border-color: rgba(143,216,255,0.6); }
.dg-cine-dialog.who-hero .dg-cine-who { color: #ffd76e; }
.dg-cine-dialog.who-hero .dg-cine-port { border-color: rgba(245,192,74,0.6); }
.dg-cine-dialog.who-dragon .dg-cine-who { color: #8be8a4; }
.dg-cine-dialog.who-dragon .dg-cine-port { border-color: rgba(139,232,164,0.6); }
.dg-cine-dialog.who-narrator .dg-cine-who { color: #c3cfe0; }
/* Storybook cinema: the picture, subtitles and controls never overlap. */
.dg-stage.dg-cinema-active > #dgCanvas,
.dg-stage.dg-cinema-active > .dg-hud,
.dg-stage.dg-cinema-active > .dg-touch,
.dg-stage.dg-cinema-active > .dg-minimap { display: none; }
.dg-stage.dg-cinema-active > .dg-corner { display: flex; top: 10px; right: 12px; z-index: 10; }
.dg-stage.dg-cinema-active .dg-cine-header { padding-top: 60px; }
.dg-overlay.dg-cinema-overlay { position: relative; inset: auto; padding: 0; display: block; background: #0b1820; backdrop-filter: none; }
.dg-stage.dg-cinema-active { border-color: #43594f; background: #0b1820; }
.dg-cine { --cine-accent: #ead59c; max-width: 1080px; color: #eff3eb; background: #0b1820; isolation: isolate; outline: none; }
.dg-cine-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px; background: linear-gradient(110deg, #162b30, #0d1e27); text-align: left; }
.dg-cine-eyebrow { display: block; color: var(--cine-accent); font-size: 9px; font-weight: 700; letter-spacing: .25em; line-height: 1.5; }
.dg-cine-header h3 { margin: 3px 0 0; font-family: inherit; font-weight: 800; font-size: clamp(18px, 2.1vw, 27px); line-height: 1.2; color: #f5f0df; }
.dg-cine .dg-cine-skip { position: static; flex: 0 0 auto; min-height: 44px; padding: 8px 16px; display: flex; align-items: center; gap: 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; background: rgba(8,12,20,.6); color: #e6edf7; font-size: 12px; }
.dg-cine-skip span { font-size: 20px; }
.dg-cine-screen { position: relative; overflow: hidden; background: #132c37; aspect-ratio: 16 / 9; }
.dg-cine #dgCineCv { width: 100%; height: 100%; display: block; border-radius: 0; box-shadow: none; object-fit: contain; }
.dg-cine-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 1px 0 #ffffff12, inset 0 -1px 0 #b7d7c325; }
.dg-cine-scene-label { position: absolute; top: 16px; left: 24px; font-size: 9px; font-weight: 700; letter-spacing: .2em; color: #e4e7d7; text-shadow: 0 1px 4px #07161d; border-left: 2px solid var(--cine-accent); padding: 6px 10px; background: #10232b66; }
.dg-cine-paused { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: #0b192655; color: #f4eddb; font-size: 13px; font-weight: 700; letter-spacing: .32em; }
.dg-cine.is-paused .dg-cine-paused { display: flex; }
.dg-cine-timeline { display: flex; gap: 5px; height: 3px; background: #0b1820; }
.dg-cine-timeline > span { flex: 1; overflow: hidden; background: #2d4146; }
.dg-cine-timeline i { display: block; width: 100%; height: 100%; background: var(--cine-accent); transform-origin: left center; transform: scaleX(0); }
.dg-cine .dg-cine-dialog { position: relative; inset: auto; display: flex; align-items: center; gap: 18px; min-height: 128px; padding: 20px 28px 12px; margin: 0; background: linear-gradient(100deg, #14272d, #0b1922); border: none; border-radius: 0; box-shadow: none; backdrop-filter: none; animation: none; }
.dg-cine .dg-cine-port { flex: 0 0 62px; width: 62px; height: 62px; border-radius: 16px; border: 1px solid #9dba9955; padding: 3px; background: linear-gradient(145deg,#26413e,#122b33); box-shadow: 0 3px 15px #0003; }
.dg-cine .dg-cine-who { color: var(--cine-accent); font-size: 10px; letter-spacing: .17em; margin-bottom: 7px; }
.dg-cine .dg-cine-text { color: #edf0e7; font-size: clamp(14px, 1.4vw, 17px); font-weight: 400; line-height: 1.6; min-height: 3.2em; text-wrap: pretty; }
.dg-cine-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 28px 12px; }
.dg-cine-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-cine-controls button { min-height: 44px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(8,12,20,.6); color: #e6edf7; font-family: inherit; padding: 8px 12px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .18s, border-color .18s; }
.dg-cine-controls .dg-cine-next { min-width: 146px; color: #fff; border-color: transparent; background: linear-gradient(135deg, #1e96e4, #3dbf6e); font-weight: 800; }
.dg-cine-controls button:hover { background: #344c46; color: #fff; border-color: #7fa591; }
.dg-cine-controls .dg-cine-next:hover { filter: brightness(1.12); }
.dg-cine button:focus-visible { outline: 3px solid #a2dfed; outline-offset: 3px; }
.dg-cine-hint { margin: 0; padding: 0 28px 12px; color: #8fa8a5; font-size: 10px; text-align: right; }
.dg-cine-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dg-stage.dg-cinema-active:fullscreen,
.dg-stage.dg-cinema-active.dg-fake-fs { overflow: hidden; display: block; height: 100dvh; }
.dg-stage.dg-cinema-active:fullscreen .dg-cinema-overlay,
.dg-stage.dg-cinema-active.dg-fake-fs .dg-cinema-overlay { width: 100%; height: 100%; max-width: none; min-width: 0; }
.dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) .dg-cine { width: 100%; height: 100%; max-width: none; background: #132c37; }
.dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) .dg-cine-screen { position: absolute; inset: 0; aspect-ratio: auto; }
.dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) #dgCineCv { object-fit: cover; }
.dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) .dg-cine-header { position: absolute; inset: 0 0 auto; z-index: 2; padding: 16px 160px 34px 26px; background: linear-gradient(#08141dda, #08141d00); pointer-events: none; }
.dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) .dg-cine-header button { pointer-events: auto; }
.dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) .dg-cine-scene-label { top: 90px; }
.dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) .dg-cine-dialog { position: absolute; left: 0; right: 0; bottom: 74px; min-height: 0; max-height: 30dvh; overflow-y: auto; padding: 28px max(26px, calc((100vw - 1000px)/2)) 15px; background: linear-gradient(#08141d00, #08141de8 35%); }
.dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) .dg-cine-controls { position: absolute; bottom: 0; left: 0; right: 0; min-height: 74px; z-index: 2; background: #08141deb; padding: 12px 26px; }
.dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) .dg-cine-timeline { position: absolute; bottom: 74px; left: 0; right: 0; z-index: 3; }
.dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) .dg-cine-hint { display: none; }
@media (orientation: portrait) {
  .dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) #dgCineCv { object-fit: contain; }
}
@media (max-width:640px) {
  .dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) .dg-cine-header { padding: 60px 14px 24px; }
  .dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) .dg-cine-scene-label { top: 124px; }
  .dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) .dg-cine-dialog { bottom: 122px; padding: 28px 14px 12px; }
  .dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) .dg-cine-controls { min-height: 122px; padding: 10px 14px; }
  .dg-stage.dg-cinema-active:is(:fullscreen,.dg-fake-fs) .dg-cine-timeline { bottom: 122px; }
}
@media (max-width: 640px) {
  .dg-cine-header { padding: 13px 14px; gap: 8px; }
  .dg-cine-eyebrow { font-size: 8px; letter-spacing: .16em; }
  .dg-cine-header h3 { font-size: 18px; }
  .dg-cine .dg-cine-skip { padding: 8px 10px; gap: 8px; font-size: 11px; }
  .dg-cine-scene-label { top: 8px; left: 9px; font-size: 7px; letter-spacing: .14em; padding: 4px 7px; }
  .dg-cine .dg-cine-dialog { padding: 16px 14px 8px; gap: 12px; min-height: 160px; align-items: flex-start; }
  .dg-cine .dg-cine-port { flex-basis: 44px; width: 44px; height: 44px; border-radius: 12px; }
  .dg-cine .dg-cine-text { font-size: 14px; line-height: 1.55; }
  .dg-cine-controls { padding: 8px 14px 14px; align-items: stretch; flex-wrap: wrap; }
  .dg-cine-tools { flex: 1 1 100%; }
  .dg-cine-tools button { flex: 1; }
  .dg-cine-controls .dg-cine-next { width: 100%; min-height: 46px; }
  .dg-cine-hint { display: none; }
}
/* Character motion only; shop cards, controls and typography stay unchanged. */
#dgBriefMage { display: block; width: 150px; height: 192px; max-width: 100%; }
.dg-mage-scene .dg-mage-fig { animation: none; }
.dg-mage-scene .dg-mage-line1 { min-height: 4.65em; animation: none; }
.dg-mage-scene .dg-mage-line2 { min-height: 4.65em; animation: none; }
.dg-skin-figure { transform-origin: 60px 140px; animation: dgArmorBreathe 4s ease-in-out infinite; }
.dg-skin-cape { transform-origin: 60px 62px; animation: dgCapeSway 4.8s ease-in-out infinite; }
.dg-skin-dust { animation: dgArmorDust 3.6s ease-in-out infinite; }
@keyframes dgArmorBreathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } }
@keyframes dgCapeSway { 0%,100% { transform: skewX(-1.5deg); } 50% { transform: skewX(1.5deg); } }
@keyframes dgArmorDust { 0%,100% { opacity: .3; transform: translateY(3px); } 50% { opacity: .85; transform: translateY(-4px); } }
@media (max-width:560px) {
  #dgBriefMage { width: 116px; height: 148px; }
  .dg-mage-scene .dg-mage-line1, .dg-mage-scene .dg-mage-line2 { min-height: 0; }
  .dg-overlay:not(.dg-cinema-overlay) { overflow-y: auto; align-items: safe center; }
}
@media (prefers-reduced-motion: reduce) {
  .dg-cine *, .dg-cine *::before, .dg-cine *::after { animation: none !important; transition: none !important; }
  .dg-skin-figure, .dg-skin-cape, .dg-skin-dust { animation: none !important; }
}

/* Preserve the newer floating islands only; films and equipment use the previous UI. */
.dg-isle-art > .dg-model-preview { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.dg-isle-art.has-webgl-preview > .dg-isle-svg { visibility:hidden; }
.dg-isle-art.has-webgl-preview > .dg-isle-flag,
.dg-isle-art.has-webgl-preview > .dg-isle-hero-mark { z-index:2; }

/* ── 2026-09-07: задание с показанным решением — ввод закрыт ── */
.task-item.task-revealed .task-input-wrap input,
.task-item.task-revealed .task-input-wrap .check-btn,
.task-item.task-revealed .task-choice-btn { opacity:.45; pointer-events:none; filter:grayscale(.4); }
.task-item.task-revealed .math-kbd-panel { display:none !important; }

/* ── 2026-09-07 (правило руководителя): подблоки теории БЕЗ фоновой заливки —
   только тонкий контур, чтобы теория читалась как чистый текст ── */
.th-def-block, .th-theorem-block, .th-warning-block, .th-note-block, .th-extra-block {
  background: transparent !important;
  box-shadow: none !important;
  border: 1.5px solid var(--border, rgba(30,150,228,.22)) !important;
  border-radius: 14px;
}
.th-def-block::before, .th-theorem-block::before, .th-warning-block::before, .th-note-block::before, .th-extra-block::before { display: none !important; }
.th-warning-block { border-color: rgba(232,145,45,.4) !important; }
.th-note-block { border-color: rgba(61,191,110,.4) !important; }
.th-theorem-block { border-color: rgba(30,150,228,.45) !important; }
.lg-tilt-card { background: transparent !important; box-shadow: none !important; border: 1.5px solid var(--border, rgba(30,150,228,.22)) !important; }
.mp-anim.mpa2 { background: transparent !important; box-shadow: none !important; }
/* формулы KaTeX не наезжают на соседей: воздух и перенос при нехватке места */
.theory-body .katex-display { overflow-x: auto; overflow-y: hidden; padding: 6px 0; }
.theory-body .katex { white-space: normal; }
.theory-body p, .theory-body li, .th-example-step-t, .th-expl { line-height: 1.8; overflow-wrap: anywhere; }
.lg-tilt-card-formula { overflow-x: auto; padding: 4px 0; }

/* Обложки уроков алгебры 8: родной формат 200×80, как у всех карточек курса. */

/* ── Резервная копия и восстановление прогресса (Кабинет → Настройки) ── */
.settings-section--restore .settings-admin-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, rgba(30,150,228,0.15), rgba(53,177,250,0.15)); border: 1px solid rgba(30,150,228,0.3);
  color: #38bdf8; font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .18s, transform .15s;
}
.settings-section--restore .settings-admin-link:hover { background: linear-gradient(135deg, rgba(30,150,228,0.25), rgba(53,177,250,0.25)); transform: translateY(-1px); }
:root[data-theme="light"] .settings-section--restore .settings-admin-link { color: #0369a1; background: linear-gradient(135deg, rgba(3,105,161,0.1), rgba(14,165,233,0.1)); border-color: rgba(3,105,161,0.25); }
.settings-row--restore { align-items: flex-start; }
.restore-info { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 0.78rem; line-height: 1.55; border: 1px solid var(--border2); background: var(--surface); color: var(--text2); }
.restore-info.ok { border-color: rgba(61,191,110,0.4); background: rgba(61,191,110,0.08); }
.restore-info.err { border-color: rgba(226,87,76,0.4); background: rgba(226,87,76,0.08); }
.restore-info .restore-hint { display: block; margin-top: 6px; color: var(--text3); font-size: 0.72rem; }
.restore-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.restore-btn { padding: 8px 14px; border-radius: 9px; font-size: 0.78rem; font-weight: 600; border: 1px solid var(--border2); background: var(--surface); color: var(--text2); cursor: pointer; transition: opacity .15s, background .15s; }
.restore-btn--primary { background: rgba(61,191,110,0.15); border-color: rgba(61,191,110,0.45); color: #6fe0a0; }
.restore-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.restore-log { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.restore-log-item, .restore-log-empty { font-size: 0.72rem; color: var(--text3); line-height: 1.5; padding: 5px 8px; border-left: 2px solid var(--border2); }
.restore-log-item b { color: var(--text2); }
:root[data-theme="light"] .restore-btn--primary { color: #18714e; }
@media (max-width: 640px) { .settings-row--restore { flex-direction: column; } .settings-row--restore .settings-row-right { align-self: stretch; } .settings-row--restore .restore-file-label { justify-content: center; } }