:root {
  /* Paper-and-ink palette, retuned to the graduation-cap-and-star mark:
     an antique, burnished gold rather than a shiny "premium academy"
     gold — kept dark enough to stay legible and avoid looking gaudy.
     Ink for text, one confident accent (gold) for actions, crimson
     reserved only for scores. */
  --paper: #FAF9F5;
  --paper-alt: #F1EEE4;
  --accent: #8F5A0C;
  --accent-tint: #F5E9D2;
  --ink: #181B20;
  --accent-warm: #A32638;
  --ink-soft: #63676E;
  --rule: #DEDACD;

  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Fraunces', 'Georgia', serif;

  /* Extra tokens so nothing has to hard-code white/black — this is what
     lets the dark theme work everywhere. */
  --on-accent: #FFFFFF;          /* text on top of an accent-coloured button */
  --surface: #FFFFFF;            /* raised surfaces: inputs, admin cards, score chips */
  --nav-bg: rgba(250, 249, 245, 0.9);
  --glass: rgba(255, 255, 255, 0.7);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --footer-bg: #181B20;
  --shadow-rgb: 24, 27, 32;
  color-scheme: light;
}

/* ── DARK THEME ─────────────────────────────────────────────
   Warm graphite instead of pure black, and the antique gold is lifted
   so it keeps ~9:1 contrast on the dark paper. Toggled by theme.js
   via <html data-theme="dark">. */
:root[data-theme="dark"] {
  --paper: #12141A;
  --paper-alt: #1A1D24;
  --surface: #21252D;
  --accent: #E3AA3D;
  --accent-tint: #2E2716;
  --ink: #ECE8DE;
  --ink-soft: #A7ABB4;
  --accent-warm: #F26B7F;
  --rule: #303540;
  --on-accent: #1B1406;
  --nav-bg: rgba(18, 20, 26, 0.88);
  --glass: rgba(33, 37, 45, 0.72);
  --glass-strong: rgba(26, 29, 36, 0.94);
  --footer-bg: #0B0D11;
  --shadow-rgb: 0, 0, 0;
  color-scheme: dark;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background-color: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: var(--nav-bg);
  backdrop-filter: none;
  z-index: 1000;
  border-bottom: 1px solid var(--rule);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 1px;
}

.logo span {
  color: var(--accent);
}

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--accent);
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(143, 90, 12, 0.25);
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.btn-outline:hover {
  background: rgba(143, 90, 12, 0.08);
}

/* Hero Section */
.hero {
  padding: 10rem 2rem 6rem;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 4rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.hero h1 .highlight {
  color: var(--accent);
}

.text-premium {
  color: var(--accent);
}

.hero p {
  font-size: 1.25rem;
  color: var(--ink-soft);
  margin-bottom: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.trust-metrics {
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--rule);
}

.metric {
  text-align: center;
}

.metric h3 {
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.metric p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Sections */
section {
  padding: 5rem 2rem;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
}

.section-title span {
  color: var(--accent);
}

/* Course Cards */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 2rem;
  transition: transform 0.3s, border-color 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
}

.card-badge {
  display: inline-block;
  background: rgba(143, 90, 12, 0.1);
  color: var(--accent);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.teacher-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
  margin: 0 auto 1rem;
  display: block;
}

.teacher-cert {
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: underline;
  display: inline-block;
  margin-top: 0.5rem;
}

.card p {
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.card-features {
  list-style: none;
  margin-bottom: 2rem;
}

.card-features li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-features li::before {
  content: '✓';
  color: var(--accent);
  font-weight: bold;
}

.price {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.price span {
  font-size: 1rem;
  color: var(--ink-soft);
  font-weight: 400;
}

/* Footer — the one deliberate ink-on-paper inversion on the page */
footer {
  background: var(--footer-bg);
  padding: 4rem 2rem 2rem;
  border-top: 1px solid var(--rule);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-col h4 {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: #fff;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 0.75rem;
}

.footer-col a {
  color: rgba(255,255,255,0.65);
}

.footer-col a:hover {
  color: var(--accent-tint);
}

.social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: white;
  transition: all 0.3s ease;
}

.social-icons a:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-3px);
}

.footer-bottom {
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}

/* Utilities */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }

/* FAQ */
.faq-item {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1rem;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 1rem 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question::after {
  content: '+';
  color: var(--accent);
  font-size: 1.5rem;
}

.faq-question.active::after {
  content: '-';
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer p {
  padding-bottom: 1rem;
  color: var(--ink-soft);
}

/* Floating Contacts */
.floating-contacts {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 1000;
}

.float-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: transform 0.3s;
}

.float-btn:hover {
  transform: scale(1.1);
}

.wa { background: #25D366; }
.tg { background: #0088cc; }

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(5px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.modal.show {
  display: flex;
}

.modal-content {
  background: var(--paper-alt);
  padding: 2.5rem;
  border-radius: 12px;
  border: 1px solid var(--accent);
  width: 90%;
  max-width: 400px;
  position: relative;
  max-height: calc(100dvh - 1.5rem);
  overflow-y: auto;
  margin: auto;
}

@media (max-width: 480px) {
  .modal-content { padding: 1.5rem 1.25rem; width: calc(100% - 1.5rem); border-radius: 14px; }
  .modal-content input, .modal-content select { font-size: 16px; }   /* stops iPhone zooming into the field */
}

.close-modal {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 2rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.close-modal:hover { color: var(--ink); }

.modal-content input, .modal-content select {
  width: 100%;
  padding: 0.75rem;
  margin-top: 1rem;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}

/* Mobile Toggle (burger) — styled in the NAVBAR MENU block at the end of this file */
.mobile-toggle { cursor: pointer; }

/* Responsive */
@media (max-width: 768px) {
  .hero h1 { font-size: 2.5rem; }
  
  .trust-metrics { flex-direction: column; gap: 2rem; }
  .floating-contacts { bottom: 1rem; right: 1rem; }
  .float-btn { width: 50px; height: 50px; font-size: 1rem; }
  .chat-widget { bottom: 1rem; left: 1rem; }
  .chat-trigger { width: 50px; height: 50px; }
}

/* Google Translate Customization */
#google_translate_element,
.goog-te-banner-frame.skiptranslate,
#goog-gt-tt {
  display: none !important;
}
body {
  top: 0px !important;
}
.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  margin-left: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 2px;
  border: 1px solid var(--rule);
}

.lang-btn {
  color: var(--ink-soft) !important;
  text-decoration: none;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 18px;
  transition: all 0.3s ease;
}

.lang-btn.active {
  background: var(--accent);
  color: var(--paper) !important;
}

/* ── 1. BACKGROUND GLOWS & HERO CANVAS ── */
.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}

.glow-orange {
  width: 350px;
  height: 350px;
  background: var(--accent);
  top: 15%;
  left: -5%;
  animation: floatGlow 20s infinite alternate;
}

.glow-gold {
  width: 450px;
  height: 450px;
  background: var(--accent);
  bottom: 10%;
  right: -5%;
  animation: floatGlow 25s infinite alternate-reverse;
}

@keyframes floatGlow {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, 40px) scale(1.1); }
}

/* ── 2. COUNTDOWN TIMER WIDGET ── */
.countdown-box {
  margin: 2.5rem auto 1.5rem auto;
  max-width: 600px;
  background: var(--glass);
  border: 1px solid rgba(143, 90, 12, 0.25);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 5;
  box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.08);
}

.countdown-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.countdown-title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 1rem;
  font-weight: 700;
}

.countdown-timer {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 65px;
}

.countdown-num {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}

.countdown-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--ink-soft);
  letter-spacing: 1px;
  margin-top: 0.4rem;
}

.countdown-sep {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: rgba(143, 90, 12, 0.4);
  line-height: 1;
}

/* ── 3. PARTNERS LOGOS MARQUEE ── */
.partners-section {
  padding: 2.5rem 0;
  background: var(--paper-alt);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
}

.partners-section::before, .partners-section::after {
  content: '';
  position: absolute;
  top: 0;
  width: 150px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.partners-section::before {
  left: 0;
  background: linear-gradient(to right, var(--paper-alt), transparent);
}

.partners-section::after {
  right: 0;
  background: linear-gradient(to left, var(--paper-alt), transparent);
}

.partners-title {
  text-align: center;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.marquee-container {
  display: flex;
  overflow: hidden;
  user-select: none;
}

.marquee-content {
  display: flex;
  gap: 4rem;
  animation: scrollMarquee 25s linear infinite;
  min-width: 100%;
  justify-content: space-around;
  align-items: center;
}

.partner-logo {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink-soft);
  letter-spacing: 1px;
  transition: all 0.3s;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.partner-logo:hover {
  color: var(--accent);
  text-shadow: 0 0 15px rgba(143, 90, 12,0.4);
}

@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── 4. HOW WE WORK PATHWAY STEPPER ── */
.stepper-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  max-width: 1100px;
  margin: 3rem auto 1rem auto;
  padding: 0 1rem;
}

.stepper-line {
  position: absolute;
  top: 35px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: var(--rule);
  z-index: 1;
}

.stepper-line-active {
  position: absolute;
  top: 35px;
  left: 5%;
  width: 0%;
  height: 2px;
  background: var(--accent);
  z-index: 2;
  transition: width 1s ease-in-out;
}

.stepper-item {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
  cursor: pointer;
}

.stepper-icon {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;          /* never squeeze the circle, even with long text next to it */
  min-width: 70px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(var(--shadow-rgb), 0.06);
}

.stepper-item:hover .stepper-icon {
  border-color: var(--accent);
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 5px 20px rgba(143, 90, 12, 0.2);
}

.stepper-item.active .stepper-icon {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: 0 0 20px rgba(143, 90, 12, 0.15);
}

.stepper-content h3 {
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
  font-family: var(--font-heading);
}

.stepper-content p {
  font-size: 0.82rem;
  color: var(--ink-soft);
  max-width: 170px;
  margin: 0 auto;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .stepper-container {
    flex-direction: column;
    gap: 2rem;
    padding: 0 1rem;
  }
  /* vertical line runs through the centre of the circles (16px padding + 28px = 44px) */
  .stepper-line {
    top: 28px;
    bottom: 28px;
    left: calc(1rem + 27px);
    right: auto;
    width: 2px;
    height: auto;
  }
  .stepper-line-active {
    top: 28px;
    left: calc(1rem + 27px);
    width: 2px;
    height: 0%;
  }
  .stepper-item {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1.1rem;
  }
  .stepper-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    min-width: 56px;
    font-size: 1.25rem;
    margin-bottom: 0;
  }
  .stepper-content { flex: 1 1 auto; min-width: 0; padding-top: 0.3rem; }
  .stepper-content p {
    margin: 0;
    max-width: 100%;
  }
}

/* ── 5. NEWS / BLOG SECTION ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.blog-card {
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  border-color: var(--accent);
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(var(--shadow-rgb), 0.08);
}

.blog-img-container {
  height: 200px;
  background: var(--paper);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.blog-img-placeholder {
  font-family: var(--font-heading);
  font-size: 4rem;
  opacity: 0.15;
  color: var(--accent);
}

.blog-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(10,10,10,0.85);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 1px;
}

.blog-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-meta-info {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.blog-body h3 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
  color: var(--ink);
  line-height: 1.4;
}

.blog-body p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  flex-grow: 1;
}

.blog-link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.blog-link:hover {
  text-decoration: underline;
}

/* ── 6. DYNAMIC MULTI-AGENT CHAT WIDGET ── */
.chat-widget {
  position: fixed;
  bottom: 2rem;
  left: 2rem; /* Opposite to float buttons for balance */
  z-index: 1000;
}

.chat-trigger {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  box-shadow: 0 5px 25px rgba(143,90,12,0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-accent);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chat-trigger:hover {
  transform: scale(1.08) rotate(10deg);
  box-shadow: 0 8px 30px rgba(143,90,12,0.5);
}

.chat-trigger svg {
  width: 28px;
  height: 28px;
}

.chat-popup {
  position: absolute;
  bottom: 75px;
  left: 0;
  width: 320px;
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--accent);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(var(--shadow-rgb), 0.18);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chat-popup.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chat-header {
  background: var(--accent-tint);
  border-bottom: 1px solid var(--rule);
  padding: 1.25rem;
}

.chat-header h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.chat-header p {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0;
}

.chat-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chat-agent {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.75rem;
  transition: all 0.2s;
  text-decoration: none;
  color: var(--ink);
}

.chat-agent:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  transform: translateX(3px);
}

.agent-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--accent-tint);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--accent);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.agent-info {
  flex-grow: 1;
}

.agent-info h5 {
  font-size: 0.9rem;
  margin: 0;
}

.agent-info p {
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin: 2px 0 0 0;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: #25D366;
  font-weight: bold;
  text-transform: uppercase;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #25D366;
  animation: pulseGreen 1.5s infinite;
}

@keyframes pulseGreen {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70% { box-shadow: 0 0 0 5px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ── 7. COOKIE CONSENT BANNER ── */
.cookie-banner {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 4rem));
  visibility: hidden;
  pointer-events: none;
  width: 90%;
  max-width: 550px;
  background: var(--glass-strong);
  backdrop-filter: blur(15px);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 1.25rem 1.75rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: 0 10px 40px rgba(var(--shadow-rgb), 0.15);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0s linear 0.5s;
}

.cookie-banner.show {
  transform: translateX(-50%) translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0s;
}

.cookie-text {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

.cookie-text a {
  color: var(--accent);
  text-decoration: underline;
}

.cookie-btn {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s;
}

.cookie-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(143, 90, 12,0.4);
}

@media (max-width: 600px) {
  .cookie-banner {
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    width: calc(100% - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.9rem;
    padding: 1.1rem 1.1rem 1rem;
    transform: translateX(-50%) translateY(calc(100% + 3rem));
  }
  .cookie-banner.show { transform: translateX(-50%) translateY(0); }
  .cookie-text { font-size: 0.82rem; }
  .cookie-btn { width: 100%; padding: 0.85rem 1rem; font-size: 0.95rem; }
}

/* While the cookie banner is open, lift the floating buttons above it (height set by app.js) */
@media (max-width: 768px) {
  .floating-contacts, .chat-widget { transition: bottom 0.4s ease; }
  body.cookie-open .floating-contacts,
  body.cookie-open .chat-widget { bottom: calc(1rem + var(--cookie-h, 0px)); }
}

/* ── 8. COURSE FILTERING FOR COURSES PAGE ── */
.filter-wrapper {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem auto 3rem auto;
  flex-wrap: wrap;
  max-width: 800px;
}

.filter-btn {
  background: var(--paper-alt);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  padding: 0.6rem 1.25rem;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.filter-btn.active {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(143, 90, 12,0.3);
}

.course-card-wrap {
  transition: all 0.4s ease;
}

.course-card-wrap.hide {
  opacity: 0;
  transform: scale(0.95);
  display: none !important;
}

/* --- THESTARTH AUDIT UPDATES --- */

.tag-ielts, .tag-sat, .tag-olympiad, .tag-ege {
  background: var(--paper-alt) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule) !important;
}

#courses .grid-container, #pricing .grid-container {
    align-items: stretch;
}
#courses .card, #pricing .card {
    display: flex;
    flex-direction: column;
}
#pricing .card > button.btn-outline, #pricing .card > button.btn-primary, #pricing .card > a.btn-outline, #pricing .card > a.btn-primary {
    margin-top: auto;
}
#courses .card > a.btn-outline, #courses .card > button.btn-outline {
    margin-top: auto;
}

/* Swipe hint text, shown only on mobile above swipeable rows */
.swipe-hint {
    display: none;
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.85rem;
    margin: -2rem auto 2rem;
}

/* Swipeable card carousels on mobile: Courses, Pricing, Loyalty */
@media (max-width: 768px) {
    .swipe-hint {
        display: block;
    }

    #courses .grid-container,
    #pricing .grid-container,
    #blog .blog-grid,
    #rewards .loyalty-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 1rem;
        padding-bottom: 0.5rem;
    }

    #courses .grid-container::-webkit-scrollbar,
    #pricing .grid-container::-webkit-scrollbar,
    #blog .blog-grid::-webkit-scrollbar,
    #rewards .loyalty-grid::-webkit-scrollbar {
        display: none;
    }

    #courses .grid-container > .card,
    #pricing .grid-container > .card,
    #blog .blog-grid > .blog-card,
    #rewards .loyalty-grid > .loyalty-card {
        flex: 0 0 84%;
        max-width: 84%;
        scroll-snap-align: start;
    }

    #courses .grid-container > .card:first-child,
    #pricing .grid-container > .card:first-child,
    #rewards .loyalty-grid > .loyalty-card:first-child {
        scroll-snap-align: start;
    }
}

.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}
.reveal-fade {
    opacity: 0;
    transition: opacity 0.8s ease;
}
.reveal-fade.active {
    opacity: 1;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(143, 90, 12, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(143, 90, 12, 0); }
    100% { box-shadow: 0 0 0 0 rgba(143, 90, 12, 0); }
}
.pulse-badge {
    animation: pulseGlow 2s infinite;
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
}
.loyalty-card:hover .loyalty-badge {
    animation: wiggle 0.5s ease;
}
.quest-item:hover .quest-checkbox {
    transform: scale(1.1);
    border-color: #25D366;
    color: #25D366;
}

.stars {
    color: var(--accent);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

#cert-name-input {
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--accent);
    color: var(--ink);
    font-size: 2.5rem;
    font-family: var(--font-heading);
    text-align: center;
    width: 80%;
    margin-bottom: 2rem;
    transition: all 0.3s;
}
#cert-name-input:focus {
    outline: none;
    border-bottom: 1px solid var(--accent);
}
#cert-name-input::placeholder {
    color: rgba(24,27,32,0.3);
}

.teacher-card {
    text-align: center;
    padding: 2rem;
    background: var(--paper-alt);
    border: 1px solid var(--rule);
    border-radius: 12px;
    transition: transform 0.3s, border-color 0.3s;
    display: flex;
    flex-direction: column;
}
.teacher-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}
.teacher-card .t-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--accent-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--accent);
    margin: 0 auto 1rem;
    border: 2px solid var(--accent);
}
.teacher-card h3 {
    margin-bottom: 0.2rem;
}
.teacher-card p {
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.teacher-stats {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: auto;
    border-top: 1px solid var(--rule);
    padding-top: 1rem;
}
.t-stat {
    font-size: 0.8rem;
    color: var(--ink-soft);
}
.t-stat strong {
    display: block;
    color: var(--ink);
    font-size: 1.1rem;
}


/* ══════════════════════════════════════════════════════════
   THEME TOGGLE (button is injected into the navbar by theme.js)
   ══════════════════════════════════════════════════════════ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); transform: rotate(15deg); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle .ti-sun { display: none; }
.theme-toggle .ti-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .ti-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ti-moon { display: none; }
.theme-toggle--floating { position: fixed; top: 1rem; right: 1rem; z-index: 3000; background: var(--surface); }
/* smooth colour change, only while the visitor is actually switching */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* The menu now has more items (Результаты + theme button), so: a slightly wider
   container, no wrapping inside a menu item, and the burger menu takes over
   earlier than before (≤1180px) instead of letting the items squash. */
.nav-container { max-width: 1360px; }
.nav-links { gap: 1rem; }
.nav-links a, .nav-links .btn-outline { white-space: nowrap; }
.nav-links a.is-current { color: var(--accent); }

/* "paper" elements that must stay light in both themes (certificate mock-up) */
.stay-light {
  --ink: #181B20;
  --ink-soft: #63676E;
  --rule: #DEDACD;
  --accent: #8F5A0C;
  --paper: #FAF9F5;
  color: #181B20;
}

/* ══════════════════════════════════════════════════════════
   SHARED: empty states, modal fix, form controls
   ══════════════════════════════════════════════════════════ */
.empty-state {
  color: var(--ink-soft);
  text-align: center;
  padding: 2.5rem 1rem;
  font-size: 0.95rem;
  grid-column: 1 / -1;
}
.empty-state strong { display: block; color: var(--ink); font-family: var(--font-heading); font-size: 1.15rem; margin-bottom: 0.35rem; }

#reviewModal .modal-content { max-height: 90vh; overflow-y: auto; }
#reviewModal textarea, #reviewModal select, #reviewModal input {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
}

/* ══════════════════════════════════════════════════════════
   RESULTS: certificate cards with a magnifier lens
   ══════════════════════════════════════════════════════════ */
.results-header { padding: 8rem 2rem 2rem; text-align: center; }
.results-header p { color: var(--ink-soft); max-width: 620px; margin: 1rem auto 0; }

.results-filters {
  display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
  margin: 1.5rem auto 0;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.results-stats { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; margin: 0 auto 2rem; padding: 0 1rem; }
@media (max-width: 480px) { .results-stats { gap: 1.2rem; } .results-stats b { font-size: 1.6rem; } }
.results-stats div { text-align: center; }
.results-stats b { display: block; font-family: var(--font-heading); font-size: 2rem; line-height: 1.1; color: var(--accent); }
.results-stats span { font-size: .8rem; color: var(--ink-soft); }

/* Score card: certificate preview on top, student, then a ring with the overall score and bars per skill */
.rs-card {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 20px;
  padding: 1rem 1rem 1.2rem; position: relative; overflow: hidden;
  box-shadow: 0 2px 0 rgba(var(--shadow-rgb), 0.04), 0 10px 28px rgba(var(--shadow-rgb), 0.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.rs-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), #C99A3B); }
.rs-card:hover { transform: translateY(-3px); box-shadow: 0 2px 0 rgba(var(--shadow-rgb), 0.04), 0 18px 40px rgba(var(--shadow-rgb), 0.16); }

.rs-doc {
  position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background: var(--paper-alt); aspect-ratio: 16 / 10; cursor: zoom-in; line-height: 0; font: inherit; color: inherit;
}
.rs-doc img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; -webkit-user-drag: none; user-select: none; transition: transform .5s ease; }
.rs-doc::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(0,0,0,.45), transparent); pointer-events: none; }
.rs-card:hover .rs-doc img { transform: scale(1.04); }
.rs-open {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 1; display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,255,255,.95); color: #2B1B00; font: 700 .78rem/1 var(--font-body, inherit); padding: .42rem .7rem; border-radius: 999px;
}
.rs-doc:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.rs-who { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.rs-avatar { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font: 800 .85rem/1 var(--font-heading); }
.rs-name { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.rs-name strong { overflow-wrap: anywhere; }
.rs-exam { font-size: .7rem; font-weight: 800; letter-spacing: .06em; padding: .18rem .55rem; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); }

.rs-score { display: flex; align-items: center; gap: 1.1rem; }
.rs-ring { position: relative; flex: 0 0 96px; width: 96px; height: 96px; }
.rs-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rs-ring-bg, .rs-ring-fg { fill: none; stroke-width: 9; }
.rs-ring-bg { stroke: var(--rule); }
.rs-ring-fg { stroke: var(--accent); stroke-linecap: round; animation: rsRing 1s ease-out both; }
.rs-ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rs-ring-num b { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1; color: var(--ink); }
.rs-ring-num small { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: .15rem; }
@keyframes rsRing { from { stroke-dashoffset: var(--rs-c); } }

.rs-bars { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: grid; gap: .5rem; }
.rs-bars li { display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; font-size: .78rem; }
.rs-bar-label { color: var(--ink-soft); }
.rs-bar-val { font-weight: 800; font-variant-numeric: tabular-nums; }
.rs-bar { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.rs-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), #C99A3B); animation: rsBar .8s ease-out both; }
@keyframes rsBar { from { width: 0 !important; } }
@media (prefers-reduced-motion: reduce) { .rs-ring-fg, .rs-bar i { animation: none; } .rs-card, .rs-doc img { transition: none; } }
@media (max-width: 400px) { .rs-score { gap: .8rem; } .rs-ring { flex-basis: 84px; width: 84px; height: 84px; } }

/* Fullscreen viewer (tap on phones / click on desktop) */
.lightbox {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(0, 0, 0, 0.88);
  display: none; align-items: center; justify-content: center;
  padding: 2rem;
}
.lightbox.show { display: flex; }
.lightbox img { max-width: min(96vw, 1100px); max-height: 92vh; border-radius: 10px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.lightbox-close {
  position: absolute; top: 1rem; right: 1.25rem;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.1); color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,0.22); }

/* ══════════════════════════════════════════════════════════
   REVIEWS (rendered from the database)
   ══════════════════════════════════════════════════════════ */
.review-card .review-author { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.review-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-tint); color: var(--accent);
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800;
}
.review-card { display: flex; flex-direction: column; }
.review-card > p { flex-grow: 0; }
.review-date { color: var(--ink-soft); font-size: 0.78rem; }

/* a single (or first) review shouldn't stretch across the whole row */
#reviews-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* Nav button after login: "Имя Фамилия" + role (Студент / Учитель) */
.nav-links a.auth-nav-user {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    line-height: 1.15;
    padding: 0.4rem 1rem;
    max-width: 220px;
    text-align: left;
}
.auth-nav-user .auth-nav-name {
    font-weight: 600;
    font-size: 0.9rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.auth-nav-user .auth-nav-role {
    font-size: 0.68rem;
    opacity: 0.75;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .nav-links a.auth-nav-user { max-width: 100%; align-self: flex-start; }
}


/* ══════════════════════════════════════════════════════════
   NAVBAR MENU  (built by theme.js on every page)
   - Computer: the bar keeps Mock Exam, Оплата, Личный кабинет and the
     languages. The burger drops the section links down under it, on the right.
   - Phone / tablet (≤1200px): the bar shows only logo + theme + burger; the
     burger slides a full-height side panel in from the right with everything
     in big, easy-to-tap rows.
   ══════════════════════════════════════════════════════════ */
.nav-container { position: relative; }
.nav-links { margin-left: auto; }

.mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 0.5rem;
  flex-shrink: 0;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: transparent;
  color: var(--accent);
  transition: border-color 0.2s, background 0.2s;
}
.mobile-toggle:hover { border-color: var(--accent); }
.mobile-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mobile-toggle svg { width: 24px; height: 24px; display: block; }
.mobile-toggle .mi-close { display: none; }
.nav-is-open .mobile-toggle .mi-bars { display: none; }
.nav-is-open .mobile-toggle .mi-close { display: block; }
.nav-container.nav--no-menu .mobile-toggle { display: none; }

.theme-toggle--bar { margin-left: 0.75rem; }

.nav-backdrop { display: none; }

/* Dropdown (computer): a framed card under the burger, on the right */
.nav-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 2rem;
  width: 260px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0.6rem;
  background: var(--paper-alt);
  border: 1.5px solid var(--accent);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 5;
}
.nav-is-open .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a {
  display: block;
  padding: 1.05rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.05rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav-menu a:last-child { border-bottom: 0; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(128, 128, 128, 0.14); color: var(--accent); border-radius: 10px; }

/* Phone / tablet: side panel */
@media (max-width: 1200px) {
  .navbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
  .theme-toggle--bar { margin-left: auto; margin-right: 0; }

  .nav-links {
    position: fixed;
    top: var(--nav-h, 86px);
    right: 0;
    bottom: 0;
    width: min(88vw, 380px);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--paper-alt);
    border-left: 1px solid var(--rule);
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
    z-index: 1;
  }
  .nav-is-open .nav-links { transform: none; visibility: visible; }

  .nav-menu {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    gap: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav-menu a {
    padding: 1rem 0.25rem;
    border-radius: 0;
    border-bottom: 1px solid var(--rule);
    font-size: 1.1rem;
  }
  .nav-menu a:last-child { border-bottom: 0; }

  .nav-links > a.nav-pin { display: block; text-align: center; padding: 0.9rem 1rem; align-self: stretch; }
  .nav-links > a.nav-pin--mock { align-self: center; width: auto; padding: 0.9rem 1.5rem; }
  .nav-links > a.auth-nav-user, .nav-links > a.auth-nav-user.nav-pin { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; max-width: none; align-self: stretch; text-align: center; padding: 0.7rem 1rem; }
  .nav-links > a.nav-msg-link { display: block; text-align: center; align-self: stretch; padding: 0.9rem 1rem; }
  .nav-links > a.admin-nav-link { justify-content: center; padding: 0.8rem 1rem; }
  .nav-links .lang-switch { align-self: center; margin: 0.5rem 0 0; }
  .nav-links .lang-btn { padding: 8px 16px; font-size: 0.95rem; }

  .nav-backdrop {
    display: block;
    position: fixed;
    top: var(--nav-h, 86px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
    z-index: 999;
  }
  .nav-is-open .nav-backdrop { opacity: 1; visibility: visible; }
  html.nav-is-open, html.nav-is-open body { overflow: hidden; }
}

@media (min-width: 1201px) {
  .nav-backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-links, .nav-backdrop { transition: none; }
}

/* while the menu is open, floating buttons must not sit on top of it */
html.nav-is-open .floating-contacts,
html.nav-is-open #chatTrigger,
html.nav-is-open .chat-popup { display: none !important; }

/* ── Small phones: keep the top bar (logo + theme + burger) inside the screen ── */
@media (max-width: 480px) {
  .nav-container { padding: 0.75rem 1rem; gap: 0.5rem; }
  .nav-container > a:first-child { min-width: 0; flex: 0 1 auto; }
  .site-logo-full { height: 40px !important; max-width: 100%; }
  .mobile-toggle { margin-left: 0.4rem; }
}
@media (max-width: 360px) {
  .site-logo-full { height: 34px !important; }
}

/* Long Russian words in headings must never push the page wider than the screen */
h1, h2, h3, h4 { overflow-wrap: anywhere; hyphens: auto; }
/* ...except short card/plan titles: auto-hyphenation mid-word ("Матема-тика") reads as broken. Wrap on spaces instead. */
.card h3, .cm-content h2 { hyphens: none; }
@media (max-width: 480px) {
  .privacy-content h1 { font-size: 1.7rem !important; }
  .privacy-content { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Certificate check: input and button stack on phones */
@media (max-width: 480px) {
  #cert-input { width: 100% !important; margin: 0 0 0.75rem 0 !important; }
  #verify-cert-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   CABINET v2: referral block, teacher groups / attendance / grades
   ══════════════════════════════════════════════════════════ */
.tc-tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; flex-wrap: wrap; }
.tc-tab {
  background: none; border: none; border-bottom: 2px solid transparent; padding: 0.7rem 1.1rem;
  color: var(--ink-soft); font: inherit; font-weight: 600; cursor: pointer; margin-bottom: -1px;
}
.tc-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tc-toolbar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.tc-btn {
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px;
  padding: 0.55rem 1rem; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 40px; white-space: nowrap;
}
.tc-btn:hover { border-color: var(--accent); color: var(--accent); }
.tc-btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tc-btn.primary:hover { filter: brightness(1.08); color: var(--on-accent); }
.tc-btn.danger:hover { border-color: #c0392b; color: #c0392b; }
.tc-btn:disabled { opacity: 0.5; cursor: default; }
.tc-form, .tc-card {
  background: var(--paper-alt); border: 1px solid var(--rule); border-radius: 14px; padding: 1.25rem; margin-bottom: 1.25rem;
}
.tc-form label { display: block; font-size: 0.8rem; color: var(--ink-soft); margin: 0.75rem 0 0.3rem; }
.tc-form label:first-child { margin-top: 0; }
.tc-form input, .tc-form select, .tc-form textarea, .tc-input {
  width: 100%; padding: 0.7rem 0.8rem; border-radius: 8px; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 16px;
}
.tc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.tc-msg { font-size: 0.85rem; margin-top: 0.6rem; min-height: 1.2em; color: var(--ink-soft); }
.tc-msg.err { color: var(--accent-warm); }
.tc-msg.ok { color: var(--accent); }
.tc-empty { color: var(--ink-soft); font-size: 0.92rem; padding: 1rem 0; }

.tc-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.tc-group-card { background: var(--paper-alt); border: 1px solid var(--rule); border-radius: 14px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.tc-group-card h3 { font-size: 1.1rem; margin: 0; }
.tc-meta { color: var(--ink-soft); font-size: 0.85rem; }
.tc-count { display: inline-block; font-size: 0.8rem; background: var(--accent-tint); color: var(--accent); border-radius: 999px; padding: 0.15rem 0.7rem; font-weight: 600; }
.tc-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.5rem; }

.tc-group-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.tc-group-head h3 { font-size: 1.4rem; margin: 0 0 0.25rem; }
.tc-back { background: none; border: none; color: var(--ink-soft); font: inherit; cursor: pointer; padding: 0; margin-bottom: 0.75rem; }
.tc-back:hover { color: var(--accent); }

.tc-student { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.tc-student:last-child { border-bottom: 0; }
.tc-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.tc-student .tc-who { flex: 1 1 160px; min-width: 0; }
.tc-student .tc-who strong { display: block; overflow-wrap: anywhere; }
.tc-chip { display: inline-block; font-size: 0.78rem; border-radius: 999px; padding: 0.15rem 0.65rem; background: var(--paper); border: 1px solid var(--rule); color: var(--ink-soft); white-space: nowrap; }
.tc-chip.good { color: #1e8449; border-color: #1e8449; }
.tc-chip.mid { color: var(--accent); border-color: var(--accent); }
.tc-chip.low { color: #c0392b; border-color: #c0392b; }

.tc-seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.tc-seg button { background: var(--paper); border: 0; border-right: 1px solid var(--rule); padding: 0.5rem 0.8rem; font: inherit; font-size: 0.85rem; cursor: pointer; color: var(--ink-soft); min-height: 40px; }
.tc-seg button:last-child { border-right: 0; }
.tc-seg button.on-present { background: #1e8449; color: #fff; }
.tc-seg button.on-late { background: #d68910; color: #fff; }
.tc-seg button.on-absent { background: #c0392b; color: #fff; }

.tc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tc-matrix { border-collapse: collapse; font-size: 0.85rem; min-width: 100%; }
.tc-matrix th, .tc-matrix td { border: 1px solid var(--rule); padding: 0.45rem 0.6rem; text-align: center; white-space: nowrap; }
.tc-matrix th:first-child, .tc-matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--paper); }
.tc-matrix th button { background: none; border: 0; font: inherit; color: var(--accent); cursor: pointer; font-weight: 600; }
.tc-matrix .s-present { color: #1e8449; } .tc-matrix .s-late { color: #d68910; } .tc-matrix .s-absent { color: #c0392b; }

.tc-grade { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.tc-grade:last-child { border-bottom: 0; }
.tc-score { flex: 0 0 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; background: var(--accent-tint); color: var(--accent); }
.tc-score.good { background: rgba(30,132,73,0.14); color: #1e8449; }
.tc-score.low { background: rgba(192,57,43,0.12); color: #c0392b; }
.tc-grade .tc-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Referral block */
.ref-panel { background: var(--paper-alt); border: 1px solid var(--accent); border-radius: 16px; padding: 1.5rem; margin-bottom: 2rem; }
.ref-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.ref-step { display: flex; gap: 0.8rem; align-items: flex-start; }
.ref-step b { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); }
.ref-step p { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--ink); }
.ref-link-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ref-link-row input { flex: 1 1 220px; min-width: 0; padding: 0.75rem; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font-size: 16px; }
.ref-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1.25rem 0; }
.ref-stat { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 0.8rem; text-align: center; }
.ref-stat strong { display: block; font-family: var(--font-heading); font-size: 1.6rem; color: var(--accent); }
.ref-stat span { font-size: 0.78rem; color: var(--ink-soft); display: block; overflow-wrap: anywhere; line-height: 1.25; }
.ref-friend { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.ref-friend:last-child { border-bottom: 0; }
.ref-status { font-size: 0.78rem; border-radius: 999px; padding: 0.2rem 0.75rem; font-weight: 600; white-space: nowrap; }
.ref-status.registered { background: var(--paper); border: 1px solid var(--rule); color: var(--ink-soft); }
.ref-status.paid { background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent); }
.ref-status.rewarded { background: rgba(30,132,73,0.14); color: #1e8449; border: 1px solid #1e8449; }
.ref-rules { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.55; margin-top: 1rem; }
.ref-rules li { margin-left: 1.1rem; }

@media (max-width: 600px) {
  .tc-row2 { grid-template-columns: 1fr; }
  .tc-tab { padding: 0.65rem 0.8rem; font-size: 0.9rem; }
  .tc-student .tc-seg { width: 100%; }
  .tc-student .tc-seg button { flex: 1; padding: 0.5rem 0.3rem; }
  .ref-panel { padding: 1.1rem; }
  .ref-stats { gap: 0.4rem; }
  .ref-stat { padding: 0.6rem 0.3rem; }
  .ref-stat strong { font-size: 1.3rem; }
  .ref-stat span { font-size: 0.7rem; }
}

/* ── Certificate (light "paper" in both themes): guilloche border, seal, corner ornaments ── */
.cert {
  position: relative; max-width: 780px; margin: 0 auto; aspect-ratio: 1000 / 707;
  container-type: inline-size; border-radius: 6px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(24, 27, 32, 0.16), 0 2px 0 rgba(255,255,255,0.6) inset;
  font-family: var(--font-heading), 'Times New Roman', serif; text-align: center; color: #181B20;
}
.cert-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cert-content {
  position: absolute; left: 10%; right: 10%; top: 8.4%;
  display: flex; flex-direction: column; align-items: center;
}
.cert-logo { width: 9cqw; height: auto; margin-bottom: 0.4cqw; }
.cert-kicker { font-size: max(1.35cqw, 6.5px); letter-spacing: 0.5em; color: #8F5A0C; font-weight: 700; font-family: var(--font-main), sans-serif; padding-left: 0.5em; }
.cert-title { font-size: max(7cqw, 22px); line-height: 1.05; font-weight: 800; letter-spacing: 0.06em; margin-top: 0.8cqw;
  background: linear-gradient(180deg, #B8791A 0%, #8F5A0C 60%, #6E4308 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cert-sub { font-size: max(1.7cqw, 7.5px); letter-spacing: 0.42em; color: #181B20; font-family: var(--font-main), sans-serif; margin-top: 0.6cqw; padding-left: 0.42em; }
.cert-line { font-size: max(1.75cqw, 8px); color: #63676E; margin: 0; font-style: italic; }
.cert-present { margin-top: 8.6cqw; }
.cert-course { margin-top: 0.6cqw; }
.cert .cert-content #cert-name-input {
  width: 86%; margin: 1cqw 0 0.8cqw; font-size: max(4.6cqw, 16px); line-height: 1.25; color: #181B20;
  border-bottom: 1px solid #C99A3B; font-style: italic; padding: 0 0 0.3cqw;
}
.cert .cert-content #cert-name-input::placeholder { color: rgba(99,103,110,0.55); }
.cert-sign { position: absolute; left: 11.5%; bottom: 11.8%; width: 21%; }
.cert-sign span { display: block; border-top: 1px solid #181B20; }
.cert-sign em, .cert-meta em { display: block; font-size: max(1.15cqw, 6px); color: #63676E; font-family: var(--font-main), sans-serif; margin-top: 0.4cqw; }
.cert-meta { position: absolute; right: 6.4%; bottom: 5.4%; width: 18%; text-align: center; white-space: nowrap; }
.cert-meta strong { display: block; font-size: max(1.15cqw, 6px); color: #8F5A0C; letter-spacing: 0.04em; font-family: var(--font-main), sans-serif; }
@media (max-width: 480px) {
  .cert-kicker, .cert-meta, .cert-sign em { display: none; }
  .cert-present { margin-top: 7cqw; }
}

/* ══ Gamification (student cabinet) ══ */
.gm-hero { background: var(--paper-alt); border: 1px solid var(--accent); border-radius: 16px; padding: 1.4rem; margin-bottom: 1.25rem; display: grid; gap: 1.2rem; }
.gm-level { display: flex; gap: 1rem; align-items: center; }
.gm-level-icon { flex: 0 0 64px; height: 64px; border-radius: 18px; background: var(--accent-tint); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.gm-level-body { flex: 1; min-width: 0; }
.gm-level-name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.45rem; }
.gm-bar { height: 12px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.gm-bar.small { height: 7px; margin: 0.35rem 0 0.2rem; }
.gm-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #C99A3B, var(--accent)); transition: width 0.8s ease; }
.gm-level-sub { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.4rem; }
.gm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.gm-stat { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 0.7rem 0.4rem; text-align: center; }
.gm-stat strong { display: block; font-family: var(--font-heading); font-size: 1.35rem; color: var(--accent); }
.gm-stat span { font-size: 0.72rem; color: var(--ink-soft); display: block; line-height: 1.25; }
.gm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.gm-card { background: var(--paper-alt); border: 1px solid var(--rule); border-radius: 14px; padding: 1.25rem; margin-bottom: 1.25rem; min-width: 0; }
.gm-cols .gm-card { margin-bottom: 0; }
.gm-card h3 { font-size: 1.05rem; margin: 0 0 0.8rem; }
.gm-goal { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.5rem 0; }
.gm-goal-ic { flex: 0 0 34px; height: 34px; border-radius: 10px; background: var(--accent-tint); display: flex; align-items: center; justify-content: center; }
.gm-goal-now { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.7rem; }
.gm-goal-form { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.gm-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: 0.7rem; }
.gm-badge { background: var(--paper); border: 1px dashed var(--rule); border-radius: 12px; padding: 0.8rem 0.4rem; text-align: center; opacity: 0.6; display: flex; flex-direction: column; gap: 0.15rem; align-items: center; }
.gm-badge strong { font-size: 0.8rem; line-height: 1.2; }
.gm-badge span { font-size: 0.7rem; color: var(--ink-soft); }
.gm-badge-ic { font-size: 1.7rem; line-height: 1.2; }
.gm-badge.done { opacity: 1; border: 1px solid var(--accent); background: var(--accent-tint); }
.gm-event { display: flex; gap: 0.7rem; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--rule); font-size: 0.88rem; }
.gm-event:last-child { border-bottom: 0; }
.gm-xp { flex: 0 0 auto; min-width: 44px; text-align: center; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 0.78rem; border-radius: 999px; padding: 0.15rem 0.5rem; }
.gm-rules { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; line-height: 1.7; color: var(--ink-soft); }
.gm-rules b { color: var(--accent); }
.cert .cert-name { width: 86%; margin: 1cqw 0 0.8cqw; font-size: max(4.6cqw, 14px); line-height: 1.25; font-style: italic; border-bottom: 1px solid #C99A3B; padding-bottom: 0.3cqw; overflow-wrap: anywhere; }
.cert .cert-course { max-width: 92%; }

/* celebration popup */
.gm-pop { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: gmFade 0.25s ease; }
.gm-pop-card { position: relative; overflow: hidden auto; max-height: 92vh; background: var(--paper); border: 2px solid var(--accent); border-radius: 18px; padding: 1.6rem 1.4rem 1.3rem; width: min(100%, 380px); text-align: center; animation: gmPop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
.gm-pop-title { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; color: var(--accent); margin-bottom: 0.8rem; position: relative; }
.gm-pop-item { display: flex; gap: 0.8rem; text-align: left; align-items: center; padding: 0.6rem 0; position: relative; }
.gm-pop-item > span { font-size: 2.2rem; }
.gm-pop-item div div { font-size: 0.85rem; color: var(--ink-soft); }
.gm-pop .tc-btn { margin-top: 0.8rem; position: relative; }
.gm-conf { position: absolute; inset: 0; pointer-events: none; }
.gm-conf i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: gmFall 2.4s linear infinite; }
@keyframes gmFall { to { transform: translateY(420px) rotate(540deg); opacity: 0.2; } }
@keyframes gmPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes gmFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gm-conf i, .gm-pop-card, .gm-pop { animation: none; } .gm-bar-fill { transition: none; } }

@media (max-width: 720px) {
  .gm-cols { grid-template-columns: minmax(0, 1fr); }
  .gm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-level-icon { flex-basis: 52px; height: 52px; font-size: 1.6rem; }
}

/* print only the personal certificate */
@media print {
  body.print-cert * { visibility: hidden !important; }
  body.print-cert #myCert, body.print-cert #myCert * { visibility: visible !important; }
  body.print-cert #myCert { position: fixed; left: 0; top: 0; width: 100vw; max-width: none; box-shadow: none; border-radius: 0; }
  @page { size: A4 landscape; margin: 0; }
}

/* ── SVG icons (icons.js) replace emoji ─────────────────────────────── */
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; }
.gm-level-icon { color: var(--accent); }
.gm-level-icon .ico { width: 1em; height: 1em; }
.gm-goal-ic { color: var(--accent); font-size: 1.1rem; }
.gm-badge-ic { color: var(--accent); }
.gm-badge:not(.done) .gm-badge-ic { color: var(--ink-soft); opacity: .6; }
.gm-pop-item > span { color: var(--accent); display: inline-flex; font-size: 2.2rem; flex-shrink: 0; }
.gm-stat strong .ico { color: var(--accent); }
.starth-toast-icon .ico { width: 1.3rem; height: 1.3rem; }
.tc-att-seg button .ico, .la-seg button .ico, .tc-count .ico { width: .95em; height: .95em; }
.tc-btn.danger .ico { width: .9em; height: .9em; }

/* ── teacher: XP chip, attention flag, archive ──────────────────────── */
.tc-warn { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: #b03a2e; font-weight: 600; margin-top: .15rem; }
.tc-group-card.is-archived { opacity: .65; }
.tc-chip .ico { width: .95em; height: .95em; margin-right: .15rem; }

/* ── Reminders ─────────────────────────────────────────────────────── */
.rm-count { display: inline-block; min-width: 1.5em; padding: 0 .45em; margin-left: .35rem; border-radius: 999px; background: var(--accent); color: #fff; font: 700 .8rem/1.6 var(--font-body, inherit); text-align: center; vertical-align: middle; }
.rm-list { display: grid; gap: .6rem; margin-bottom: 1.6rem; }
.rm-item { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: 12px; background: var(--paper-alt); border: 1px solid var(--rule); border-left: 4px solid var(--accent); flex-wrap: wrap; }
.rm-item.hot { background: var(--accent-tint); }
.rm-item.warn { border-left-color: #c77d0a; }
.rm-item.bad { border-left-color: #c0392b; }
.rm-ic { font-size: 1.4rem; color: var(--accent); display: inline-flex; flex-shrink: 0; }
.rm-item.bad .rm-ic { color: #c0392b; }
.rm-body { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.rm-body div { font-size: .88rem; color: var(--ink-soft); white-space: pre-wrap; }
.rm-item .tc-btn { white-space: nowrap; }
@media (max-width: 480px) { .rm-item { padding: .75rem .8rem; } .rm-item .tc-btn { width: 100%; text-align: center; justify-content: center; } }

/* ── Group leaderboard ─────────────────────────────────────────────── */
.lb { margin: .9rem 0 .4rem; padding: .8rem .9rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.lb-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.lb-head h4 { margin: 0; display: flex; align-items: center; gap: .4rem; }
.lb-head .ico { color: var(--accent); }
.lb-row { display: flex; align-items: center; gap: .7rem; padding: .4rem .3rem; border-bottom: 1px solid var(--rule); font-size: .92rem; }
.lb-row:last-of-type { border-bottom: 0; }
.lb-row.me { background: var(--accent-tint); border-radius: 8px; }
.lb-rank { flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--paper-alt); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; }
.lb-rank.r1 { background: #C99A3B; color: #fff; } .lb-rank.r2 { background: #9aa3ab; color: #fff; } .lb-rank.r3 { background: #b9773f; color: #fff; }
.lb-name { flex: 1; min-width: 0; overflow-wrap: anywhere; } .lb-name em { color: var(--ink-soft); font-style: normal; font-size: .8rem; }
.lb-lvl { color: var(--ink-soft); font-size: .8rem; }
.lb-toggle { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 .2rem; font-size: .85rem; cursor: pointer; }
@media (max-width: 480px) { .lb-lvl { display: none; } }

/* ══ Built-in video call (lesson-call.js) ═════════════════════════════ */
.call { color: var(--ink); }
.call-pre { display: flex; justify-content: center; padding: 1rem 0 2rem; }
.call-pre[hidden], .call-live[hidden] { display: none; }
.call-card { width: min(100%, 460px); text-align: center; background: var(--paper-alt); border: 1px solid var(--rule); border-radius: 18px; padding: 1.4rem 1.2rem; }
.call-card h3 { margin: 0 0 .8rem; } .call-card p { color: var(--ink-soft); margin: 0 0 1rem; line-height: 1.5; }
.call-preview { position: relative; aspect-ratio: 16 / 9; background: #14171c; border-radius: 12px; overflow: hidden; margin-bottom: .8rem; }
.call-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.call-preview-av { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: #14171c; }
.call-preview-av span, .ct-av span { width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 800 1.6rem/1 var(--font-heading); }
.call-hint { font-size: .85rem; min-height: 2.6em; }
.call-pre-toggles { display: flex; gap: .6rem; justify-content: center; margin-bottom: .9rem; }
.call-join { width: 100%; } .call-alt { margin-top: .7rem; background: none; border: 0; color: var(--ink-soft); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; }

.call-live { display: flex; flex-direction: column; background: #14171c; border-radius: 16px; overflow: hidden; border: 1px solid var(--rule); height: min(76vh, 760px); min-height: 460px; }
.call-main { position: relative; flex: 1; min-height: 0; display: flex; }
.call-warn { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); z-index: 5; background: rgba(0,0,0,.78); color: #fff; font-size: .82rem; padding: .45rem .9rem; border-radius: 999px; max-width: 92%; text-align: center; }
.call-stage { flex: 1; min-width: 0; padding: .6rem; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); grid-auto-rows: auto; align-content: center; overflow: auto; }
.call-stage[data-count="1"] { grid-template-columns: 1fr; }
.call-stage[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.call-stage[data-count="3"], .call-stage[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.call-stage[data-count="5"], .call-stage[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.call-stage.has-focus { grid-template-columns: minmax(0, 1fr) 160px; grid-template-rows: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows: minmax(100px, 1fr); }
.call-stage.has-focus .ct { aspect-ratio: auto; } .call-stage.has-focus .ct.focus { grid-column: 1; grid-row: 1 / span 6; }
.call-stage.has-focus .ct:not(.focus) { grid-column: 2; }

.ct { position: relative; background: #1d2128; border-radius: 12px; overflow: hidden; min-height: 0; aspect-ratio: 16 / 9; border: 2px solid transparent; transition: border-color .15s; }
.ct video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.ct.me:not(.is-share) video { transform: scaleX(-1); }
.ct.is-share video, .ct.focus video { object-fit: contain; }
.ct.no-video video { visibility: hidden; }
.ct-av { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.ct.no-video .ct-av { display: flex; }
.ct.speaking { border-color: #2ecc71; box-shadow: 0 0 0 2px rgba(46,204,113,.35); }
.ct-name { position: absolute; left: .5rem; bottom: .5rem; max-width: calc(100% - 3rem); display: inline-flex; align-items: center; gap: .35rem; background: rgba(0,0,0,.62); color: #fff; font-size: .78rem; padding: .22rem .55rem; border-radius: 8px; }
.ct-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-name .ico { color: #ff7b7b; }
.ct-tags { position: absolute; top: .5rem; left: .5rem; display: flex; gap: .35rem; }
.ct-hand { background: #f1c40f; color: #222; border-radius: 8px; padding: .2rem .4rem; display: inline-flex; font-size: 1rem; }
.ct-role { background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 8px; padding: .22rem .5rem; }
.ct-pin { position: absolute; top: .4rem; right: .4rem; width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; opacity: 0; transition: opacity .15s; display: inline-flex; align-items: center; justify-content: center; }
.ct:hover .ct-pin, .ct-pin:focus-visible { opacity: 1; } @media (hover: none) { .ct-pin { opacity: .85; } }
.ct-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; font-size: .85rem; pointer-events: none; }
.ct-state[hidden] { display: none; }

.call-side { width: 320px; max-width: 100%; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; border-left: 1px solid var(--rule); }
.call-side[hidden] { display: none; }
.cs-head { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; border-bottom: 1px solid var(--rule); }
.cs-x { background: none; border: 0; color: var(--ink-soft); cursor: pointer; font-size: 1.1rem; }
.cs-list { flex: 1; overflow: auto; padding: .7rem .9rem; display: flex; flex-direction: column; gap: .5rem; }
.cs-empty { color: var(--ink-soft); font-size: .85rem; text-align: center; margin-top: 1rem; }
.cm { background: var(--paper-alt); border-radius: 10px; padding: .4rem .6rem; font-size: .88rem; overflow-wrap: anywhere; } .cm b { display: block; font-size: .72rem; color: var(--accent); } .cm.mine { background: var(--accent-tint); }
.cs-form { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid var(--rule); }
.cs-form input { flex: 1; min-width: 0; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; }
.cs-send { width: 42px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cp { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .35rem 0; border-bottom: 1px solid var(--rule); font-size: .88rem; }
.cp-av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .72rem; flex-shrink: 0; }
.cp-name { flex: 1 1 100px; min-width: 0; overflow-wrap: anywhere; } .cp-ic { color: var(--ink-soft); display: inline-flex; } .cp-ic.off { color: #c0392b; }
.cp-btn { font: inherit; font-size: .72rem; padding: .25rem .55rem; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; } .cp-btn.danger { color: #c0392b; border-color: #c0392b; } .cp-foot { padding-top: .6rem; }

.call-bar { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; padding: .6rem; background: #0f1216; }
.cb { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-width: 64px; padding: .45rem .7rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: #1d2128; color: #fff; cursor: pointer; font: inherit; font-size: .68rem; }
.cb .ico { width: 1.35rem; height: 1.35rem; } .cb:hover { background: #2a303a; }
.cb.on { background: #fff; color: #14171c; } .cb.danger-off.on { background: #c0392b; color: #fff; border-color: #c0392b; }
.cb.leave { background: #c0392b; border-color: #c0392b; } .cb.leave:hover { background: #a93226; }
.cb-badge { position: absolute; top: -5px; right: -5px; background: #e74c3c; color: #fff; font: 700 .65rem/1 var(--font-body, inherit); border-radius: 999px; padding: .18rem .35rem; font-style: normal; }
.call-pre .cb { background: var(--paper); color: var(--ink); border-color: var(--rule); } .call-pre .cb.on { background: #c0392b; color: #fff; border-color: #c0392b; }
@media (max-width: 720px) {
  .call-live { height: 74vh; min-height: 420px; border-radius: 12px; }
  .call-stage, .call-stage[data-count="3"], .call-stage[data-count="4"], .call-stage[data-count="5"], .call-stage[data-count="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .4rem; gap: .4rem; }
  .call-stage[data-count="1"], .call-stage[data-count="2"] { grid-template-columns: 1fr; }
  .call-stage.has-focus { grid-template-columns: 1fr; grid-template-rows: 2fr repeat(auto-fill, 90px); } .call-stage.has-focus .ct.focus { grid-column: 1; grid-row: 1; } .call-stage.has-focus .ct:not(.focus) { grid-column: auto; }
  .call-side { position: absolute; inset: auto 0 0 0; width: 100%; height: 62%; border-left: 0; border-top: 1px solid var(--rule); border-radius: 14px 14px 0 0; z-index: 6; }
  .cb { min-width: 0; flex: 1 1 calc(25% - .5rem); padding: .45rem .3rem; } .cb span { font-size: .62rem; }
}

/* ══ Messenger (messenger.js) ═════════════════════════════════════════ */
.msg { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: 540px; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: var(--paper); margin-bottom: 2rem; }
.msg-side { display: flex; flex-direction: column; border-right: 1px solid var(--rule); min-height: 0; background: var(--paper-alt); }
.msg-find { display: flex; align-items: center; gap: .4rem; padding: .7rem .7rem .3rem; position: relative; }
.msg-find-ic { position: absolute; left: 1.35rem; color: var(--ink-soft); display: inline-flex; pointer-events: none; }
.msg-find input { flex: 1; min-width: 0; padding: .55rem .6rem .55rem 2rem; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; font-size: .9rem; }
.msg-find .tc-btn { padding: .5rem .7rem; }
.msg-find-note { padding: 0 .8rem .4rem; font-size: .78rem; color: var(--ink-soft); min-height: 1.1em; } .msg-find-note.err { color: #c0392b; }
.msg-list { flex: 1; overflow: auto; padding: .2rem .4rem .6rem; }
.msg-row { display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left; padding: .6rem .55rem; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; position: relative; }
.msg-row:hover { background: var(--accent-tint); } .msg-row.active { background: var(--accent-tint); }
.msg-av { flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 800 .85rem/1 var(--font-heading); }
.msg-rb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.msg-rt { display: flex; justify-content: space-between; gap: .4rem; } .msg-rt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; } .msg-rt time { font-size: .7rem; color: var(--ink-soft); flex-shrink: 0; }
.msg-rl { font-size: .8rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-rl em { font-style: normal; opacity: .8; }
.msg-row.unread .msg-rl { color: var(--ink); font-weight: 600; } .msg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.msg-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.msg-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink-soft); font-size: .92rem; gap: .4rem; padding: 1rem; } .msg-empty .ico { width: 2.2rem; height: 2.2rem; color: var(--accent); } .msg-empty.small { flex: 0; margin: auto; }
.msg-head { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-bottom: 1px solid var(--rule); }
.msg-back { display: none; border: 0; background: none; color: var(--ink); cursor: pointer; font-size: 1.3rem; padding: .2rem; }
.msg-thread { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .35rem; background: var(--paper); }
.msg-day { align-self: center; font-size: .7rem; color: var(--ink-soft); background: var(--paper-alt); padding: .15rem .7rem; border-radius: 999px; margin: .5rem 0 .2rem; }
.mb { max-width: min(78%, 480px); background: var(--paper-alt); border: 1px solid var(--rule); border-radius: 14px 14px 14px 4px; padding: .45rem .7rem .3rem; align-self: flex-start; }
.mb.mine { align-self: flex-end; background: var(--accent); color: #fff; border-color: var(--accent); border-radius: 14px 14px 4px 14px; }
.mb-t { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; line-height: 1.4; } .mb time { display: block; text-align: right; font-size: .62rem; opacity: .7; margin-top: .1rem; }
.msg-compose { display: flex; align-items: flex-end; gap: .5rem; padding: .6rem; border-top: 1px solid var(--rule); }
.msg-compose textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; font-size: .92rem; line-height: 1.35; }
.msg-send { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msg-total[hidden] { display: none; }
@media (max-width: 720px) {
  .msg { grid-template-columns: 1fr; height: min(78vh, 620px); }
  .msg-side, .msg-main { grid-column: 1; grid-row: 1; } .msg-side { border-right: 0; }
  .msg:not(.show-chat) .msg-main { display: none; } .msg.show-chat .msg-side { display: none; }
  .msg-back { display: inline-flex; }
}

/* ═════ v17: Команда экспертов — карточка с фото сверху и видео ═════ */
.tcard{position:relative;display:flex;flex-direction:column;background:var(--paper-alt);border:1px solid var(--rule);border-radius:20px;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.tcard:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.tcard-top{position:relative;padding:1.25rem 1.25rem 0;background:linear-gradient(180deg,var(--accent-tint),transparent)}
.tcard-photo{position:relative;display:block;width:100%;aspect-ratio:1/1.05;border-radius:140px 140px 14px 14px;overflow:hidden;background:var(--accent-tint);border:2px solid var(--accent)}
.tcard-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.tcard-ph{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:2.6rem;font-weight:800;color:var(--accent);letter-spacing:2px}
.tcard-score{position:absolute;left:50%;bottom:.7rem;transform:translateX(-50%);z-index:3;background:var(--accent);color:var(--on-accent);font:800 .74rem var(--font-heading);padding:.3rem .8rem;border-radius:20px;white-space:nowrap}
.tcard-frame{position:relative;max-width:270px;margin:0 auto}
.tcard-play{position:absolute;top:2px;right:-6px;z-index:4;width:52px;height:52px;border-radius:50%;border:2px solid var(--paper-alt);background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.28);transition:transform .2s}
.tcard-play:hover{transform:scale(1.1)}
.tcard-play svg{width:22px;height:22px;margin-left:2px}
.tcard-play::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:tcpulse 2.4s infinite}
@keyframes tcpulse{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.25);opacity:0}}
.tcard-body{padding:1.1rem 1.4rem 1.5rem;text-align:center;display:flex;flex-direction:column;gap:.55rem;flex:1}
.tcard-body .teacher-name{margin:0}
.tcard-body .teacher-role{margin:0}
.tcard-body .teacher-bio{margin:.2rem 0 .4rem}
.tcard-certs{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:auto}
@media (prefers-reduced-motion:reduce){.tcard-play::after{animation:none}}

.vbox{position:fixed;inset:0;z-index:100000;background:rgba(8,8,10,.96);display:flex;flex-direction:column}
.vbox-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;color:#fff}
.vbox-title{font-weight:700;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbox-x{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vbox-x svg{width:20px;height:20px}
.vbox-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 0 1rem}
.vbox-stage iframe,.vbox-stage video{width:100%;height:100%;border:0;background:#000}
.vbox-stage iframe.vbox-ig{max-width:540px}
html.vbox-lock,html.vbox-lock body{overflow:hidden}

/* v17: recording banner + bar button */
.call-rec{display:flex;align-items:center;gap:.5rem;justify-content:center;background:#7a1f1f;color:#fff;font-size:.82rem;font-weight:700;padding:.35rem .8rem;border-radius:8px;margin-bottom:.5rem}
.call-rec[hidden]{display:none}
.call-rec i{width:10px;height:10px;border-radius:50%;background:#ff4d4d;animation:recblink 1.2s infinite}
@keyframes recblink{50%{opacity:.25}}
.cb.rec.on{background:#7a1f1f;border-color:#ff4d4d;color:#fff}

/* v17: photos in messenger */
.msg-attach{background:none;border:0;color:var(--ink-soft);cursor:pointer;width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:10px}
.msg-attach:hover{color:var(--accent)}
.msg-attach svg{width:22px;height:22px}
.mb-img{display:block;max-width:100%;max-height:260px;border-radius:10px;cursor:zoom-in;margin-bottom:.2rem}
.vbox-img{max-width:100%;max-height:100%;object-fit:contain;margin:auto;display:block}

/* v18: schedule picker */
.sp-presets,.sp-days{display:flex;gap:.4rem;flex-wrap:wrap;margin:.3rem 0}
.sp-pre,.sp-day{border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:999px;padding:.4rem .9rem;font:inherit;font-size:.85rem;cursor:pointer;min-height:38px}
.sp-day{min-width:46px;padding:.4rem .6rem}
.sp-pre.on,.sp-day.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
.sp-time{display:flex;align-items:center;gap:.6rem;margin-top:.5rem}.sp-time label{margin:0!important}.sp-time input{width:auto!important}
.sp-out{font-size:.82rem;color:var(--ink-soft);margin-top:.5rem}
.sp-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:1rem}
.sp-card{background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:1.2rem;width:100%;max-width:460px;max-height:90vh;overflow:auto}
.sp-card label{display:block;font-size:.8rem;color:var(--ink-soft);margin:.75rem 0 .3rem}
.sp-card input[type=text]{width:100%;padding:.6rem .8rem;border-radius:10px;border:1px solid var(--rule);background:var(--paper-alt);color:var(--ink);font:inherit}

/* v18: simple join + end of lesson */
.call-sub{font-weight:700;color:var(--accent);margin:-.3rem 0 .8rem}
.call-wait{background:var(--accent-tint);border:1px dashed var(--accent);color:var(--ink);border-radius:10px;padding:.55rem .8rem;margin-bottom:.5rem;font-size:.9rem;text-align:center}
.call-wait[hidden]{display:none}
.cb.endlesson{background:#b3261e;border-color:#b3261e;color:#fff}
.cb.endlesson:hover{filter:brightness(1.1)}
.end-list{margin:.8rem 0;text-align:left}
.end-row{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px dashed var(--rule);font-size:.92rem}
.call-card .call-join{width:100%;font-size:1.1rem;padding:1rem}
.call-alt{font-size:.8rem;opacity:.8}

/* v19: teacher controls on a student's tile */
.ct-ctl{position:absolute;top:.4rem;left:.4rem;z-index:4;display:flex;gap:.3rem;opacity:0;transition:opacity .15s}
.ct:hover .ct-ctl,.ct-ctl:focus-within{opacity:1}
@media (hover:none){.ct-ctl{opacity:.9}}
.ct-ctl button{width:32px;height:32px;border-radius:8px;border:0;background:rgba(0,0,0,.62);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ct-ctl button:hover{background:rgba(0,0,0,.85)}.ct-ctl button.danger{background:rgba(179,38,30,.85)}
.ct-ctl svg{width:16px;height:16px}

/* v19: messenger — search suggestions, role badges, menu link */
.msg-find .msg-sug{position:absolute;left:.7rem;right:.7rem;top:calc(100% - .2rem);z-index:20;background:var(--paper);border:1px solid var(--rule);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.22);padding:.25rem;max-height:340px;overflow:auto}
.msg-sug[hidden]{display:none}
.msg-sug-i{display:flex;align-items:center;gap:.65rem;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);font:inherit;padding:.5rem .55rem;border-radius:10px;cursor:pointer}
.msg-sug-i:hover,.msg-sug-i.on{background:var(--accent-tint)}
.msg-sug-t{flex:1;min-width:0;display:flex;flex-direction:column}
.msg-sug-t strong{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-sug-t small{color:var(--ink-soft);font-size:.78rem}
.msg-role{display:inline-block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:.12rem .45rem;border-radius:999px;background:var(--accent-tint);color:var(--ink-soft);border:1px solid var(--rule);vertical-align:middle;white-space:nowrap}
.msg-role.t{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.msg-rt{gap:.4rem}
.nav-links a.nav-msg-link{border-color:var(--accent);color:var(--accent)}
.nav-links a.nav-msg-link:hover,.nav-links a.nav-msg-link.active{background:var(--accent);color:var(--on-accent)}

/* v20 — message notifications */
.nav-links a.nav-msg-link{position:relative}
.nav-links a.nav-msg-link[data-unread]::after{content:attr(data-unread);display:inline-block;min-width:1.25em;margin-left:.45em;padding:0 .35em;border-radius:999px;background:#e5484d;color:#fff;font-size:.72rem;font-weight:700;line-height:1.35em;text-align:center;vertical-align:middle}
#msgNotifyBox:empty{display:none}
.mn{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.1rem .8rem .6rem;padding:.55rem .7rem;border:1px solid var(--line,rgba(128,128,128,.25));border-radius:10px;font-size:.8rem;color:var(--ink-soft)}
.mn-btn{flex:none;border:0;border-radius:8px;padding:.35rem .8rem;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:.8rem;cursor:pointer}
.mn-snd{flex:none;display:flex;align-items:center;gap:.3rem;cursor:pointer;white-space:nowrap}
.mn-off{color:#c0392b}

/* v21 — mock tests (admin) */
.mk-vtabs{display:flex;gap:.4rem;margin-bottom:1rem;flex-wrap:wrap}
.mk-vtab{border:1px solid var(--rule);background:var(--surface);color:var(--ink);border-radius:999px;padding:.4rem .9rem;font:inherit;font-size:.88rem;cursor:pointer}
.mk-vtab.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
.mk-bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:.8rem 0}
.mk-count{margin-left:auto;color:var(--ink-soft);font-size:.88rem}
.mk-top{display:grid;grid-template-columns:1fr 200px;gap:1rem}
@media(max-width:640px){.mk-top{grid-template-columns:1fr}}
.mk-ai{margin-top:1rem;padding:.7rem .9rem;border-radius:10px;background:var(--paper-alt);font-size:.86rem;color:var(--ink-soft);border:1px solid var(--rule)}
.mk-ai.on{border-color:var(--accent);color:var(--ink)}
.mk-part{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:1rem 1.1rem;margin-bottom:1rem}
.mk-part-head{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.mk-part-head .mk-ptitle{flex:1 1 180px;font-weight:700;padding:.5rem .7rem;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit}
.mk-range{color:var(--ink-soft);font-size:.82rem}
.mk-part label{display:block;font-size:.82rem;color:var(--ink-soft);margin:.8rem 0 .25rem}
.mk-part input[type=text],.mk-part textarea,.mk-part select,.mk-part input[type=number]{width:100%;padding:.55rem .7rem;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:.92rem;box-sizing:border-box}
.mk-part textarea{resize:vertical}
.mk-audio{display:flex;gap:.6rem;align-items:center}.mk-up{margin:0!important;cursor:pointer;white-space:nowrap;display:inline-block!important;color:var(--ink)!important}
.mk-audio-st:empty{display:none}.mk-prev{width:100%;margin-top:.5rem}
.mk-src{margin-top:.9rem;border:1px dashed var(--rule);border-radius:10px;padding:.6rem .8rem}.mk-src summary{cursor:pointer;font-weight:600;font-size:.9rem}
.mk-src-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:720px){.mk-src-grid{grid-template-columns:1fr}}
.mk-src-grid textarea{margin-top:.4rem}
.mk-json{display:flex;gap:.6rem;align-items:flex-start;margin-top:.6rem}.mk-json textarea{flex:1}
.mk-groups{margin-top:1rem}
.mk-group{border-left:3px solid var(--accent);background:var(--paper-alt);border-radius:0 10px 10px 0;padding:.7rem .9rem;margin-bottom:.9rem}
.mk-group-head{display:flex;gap:.6rem;align-items:center}.mk-group-head select{flex:1}
.mk-item{display:flex;gap:.6rem;align-items:flex-start;padding:.5rem 0;border-top:1px solid var(--rule)}
.mk-n{flex:0 0 2.6em;text-align:right;font-weight:700;color:var(--accent);padding-top:.5rem;font-size:.88rem}
.mk-item-main{flex:1;display:grid;gap:.4rem;min-width:0}.mk-cnt{margin:0!important}.mk-cnt input{width:70px!important;display:inline-block}

/* v21 — mock exam page (student) */
.mx-wrap{max-width:1100px;margin:0 auto;padding:7rem 0 3rem}
.mx-h1{font-family:var(--font-heading);font-size:2.4rem;margin:0 0 .4rem}
.mx-lead{color:var(--ink-soft);margin:0 0 1.6rem;font-size:1.05rem;max-width:720px}
.mx-empty{padding:1.4rem;border:1px dashed var(--rule);border-radius:12px;color:var(--ink-soft);text-align:center}
.mx-skill{margin-bottom:1.2rem}.mx-skill h3{margin:0 0 .6rem;font-size:1.05rem;color:var(--accent)}
.mx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem}
.mx-card{display:flex;flex-direction:column;gap:.25rem;text-align:left;padding:.9rem 1rem;border:1px solid var(--rule);border-radius:12px;background:var(--paper-alt);color:var(--ink);cursor:pointer;font:inherit;transition:border-color .15s,transform .15s}
.mx-card:hover{border-color:var(--accent);transform:translateY(-1px)}.mx-card.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-tint,rgba(0,0,0,.08))}
.mx-card span{font-size:.82rem;color:var(--ink-soft)}
.mx-scope{margin-top:1rem;padding:1.1rem 1.2rem;border:1px solid var(--accent);border-radius:14px;background:var(--paper-alt)}
.mx-scope h3{margin:0 0 .8rem;font-size:1.05rem}
.mx-scope-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.6rem}
.mx-scope-opt{display:flex;gap:.6rem;align-items:flex-start;padding:.65rem .8rem;border:1px solid var(--rule);border-radius:10px;cursor:pointer;background:var(--paper)}
.mx-scope-opt.on{border-color:var(--accent);background:var(--accent-tint,var(--paper))}.mx-scope-opt small{display:block;color:var(--ink-soft);font-size:.8rem}
.mx-exam{display:flex;gap:.6rem;align-items:center;margin:.9rem 0 .2rem;font-size:.9rem;color:var(--ink-soft);cursor:pointer}
.mx-start{margin-top:1rem;min-width:200px}
.mx-run,.mx-result,.mx-history{margin-top:1.6rem}
.mx-bar{position:sticky;top:70px;z-index:20;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;padding:.6rem .9rem;background:var(--paper-alt);border:1px solid var(--rule);border-radius:12px}
.mx-bar-title{display:flex;flex-direction:column;line-height:1.2;margin-right:auto}.mx-bar-title small{color:var(--ink-soft)}
.mx-tabs{display:flex;gap:.3rem;flex-wrap:wrap}.mx-tab{padding:.35rem .8rem;border:1px solid var(--rule);border-radius:999px;background:var(--paper);color:var(--ink);cursor:pointer;font:inherit;font-size:.86rem}
.mx-tab.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
.mx-timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.15rem;padding:.2rem .7rem;border-radius:8px;background:var(--paper)}.mx-timer.warn{color:#c0392b}
.mx-pal{display:flex;flex-wrap:wrap;gap:.3rem;margin:.8rem 0}
.mx-pn{width:2rem;height:2rem;border-radius:7px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;font:inherit;font-size:.8rem}.mx-pn.done{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.mx-audio{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;padding:.8rem 1rem;margin-bottom:1rem;border:1px solid var(--rule);border-radius:12px;background:var(--paper-alt)}
.mx-audio audio{width:100%}.mx-aprog{flex:1 1 160px;height:8px;border-radius:99px;background:var(--paper);border:1px solid var(--rule);overflow:hidden}.mx-aprog i{display:block;height:100%;width:0;background:var(--accent)}
.mx-atime{font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--ink-soft);min-width:5.5em}.mx-anote{flex:1 1 100%;font-size:.8rem;color:var(--ink-soft)}
.mx-readgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}.mx-readgrid[hidden]{display:none}
.mx-passage{max-height:calc(100vh - 190px);overflow:auto;padding:1rem 1.2rem;border:1px solid var(--rule);border-radius:12px;background:var(--paper-alt);line-height:1.7;position:sticky;top:140px}
.mx-passage h3{margin:0 0 .8rem}.mx-passage p{margin:0 0 .8rem}
.mx-qs{min-width:0}.mx-qs-wide{max-width:820px}
.mx-group{margin-bottom:1.4rem}.mx-ghead{padding:.7rem .9rem;border-left:3px solid var(--accent);background:var(--paper-alt);border-radius:0 10px 10px 0;margin-bottom:.6rem}
.mx-ghead p{margin:.3rem 0 0;white-space:pre-line}.mx-hint{font-size:.82rem;color:var(--ink-soft);margin:.4rem 0}
.mx-list{margin:.5rem 0 0;padding-left:0;list-style:none;display:grid;gap:.2rem}
.mx-item{display:flex;gap:.7rem;align-items:flex-start;padding:.5rem 0}.mx-num{flex:0 0 2.6em;text-align:right;font-weight:800;color:var(--accent);padding-top:.1rem}
.mx-q{flex:1;min-width:0;line-height:1.6}.mx-qt{margin-bottom:.35rem}
.mx-gap{width:9.5em;max-width:100%;padding:.25rem .5rem;border:0;border-bottom:2px solid var(--accent);background:var(--paper-alt);color:var(--ink);font:inherit;border-radius:4px 4px 0 0;margin:0 .15rem}
.mx-gap:focus{outline:2px solid var(--accent-tint,rgba(0,0,0,.15))}
.mx-opts{display:grid;gap:.35rem}.mx-opt{display:flex;gap:.55rem;align-items:flex-start;padding:.45rem .65rem;border:1px solid var(--rule);border-radius:9px;cursor:pointer;background:var(--paper)}
.mx-opt:has(input:checked){border-color:var(--accent);background:var(--accent-tint,var(--paper-alt))}
.mx-seg{display:flex;gap:.4rem;flex-wrap:wrap}.mx-seg label{cursor:pointer}.mx-seg input{position:absolute;opacity:0}
.mx-seg span{display:inline-block;padding:.35rem .8rem;border:1px solid var(--rule);border-radius:999px;font-size:.82rem;font-weight:600;background:var(--paper)}
.mx-seg input:checked+span{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.mx-seg input:focus-visible+span{outline:2px solid var(--accent)}
.mx-q select{padding:.3rem .5rem;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit}
.mx-foot{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.4rem 0}
.mx-res-top{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;padding:1.2rem 1.4rem;border:1px solid var(--accent);border-radius:16px;background:var(--paper-alt)}
.mx-score b{font-size:3rem;font-family:var(--font-heading)}.mx-score span{font-size:1.4rem;color:var(--ink-soft);margin-left:.2rem}.mx-score small{display:block;color:var(--ink-soft)}
.mx-band{display:flex;flex-direction:column}.mx-band small{color:var(--ink-soft)}.mx-band b{font-size:2.4rem;color:var(--accent);font-family:var(--font-heading)}
.mx-pp{display:flex;gap:1rem;flex-wrap:wrap;margin:.8rem 0;color:var(--ink-soft)}
.mx-rev-title{margin:1.4rem 0 .6rem}.mx-rev{display:grid;gap:.4rem}
.mx-rv{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem .8rem;border-radius:10px;border:1px solid var(--rule);background:var(--paper-alt)}
.mx-rv.ok{border-color:#2e9f6b}.mx-rv.bad{border-color:#c0392b}.mx-rv.part{border-color:#d69e2e}
.mx-rvn{flex:0 0 2.6em;text-align:right;font-weight:800}.mx-rv>div{flex:1;min-width:0}.mx-rva{font-size:.88rem;color:var(--ink-soft)}.mx-rvq{font-size:.92rem;word-break:break-word}
.mx-rvm{font-weight:800}.mx-rv.ok .mx-rvm{color:#2e9f6b}.mx-rv.bad .mx-rvm{color:#c0392b}.mx-rv.part .mx-rvm{color:#d69e2e}
.mx-history h3{margin:0 0 .6rem}.mx-h{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .8rem;border:1px solid var(--rule);border-radius:10px;margin-bottom:.4rem;background:var(--paper-alt)}.mx-h small{display:block;color:var(--ink-soft)}
.mx-eng{margin-top:2.4rem;border:1px solid var(--rule);border-radius:14px;padding:.8rem 1.1rem}.mx-eng summary{cursor:pointer;font-weight:600}.mx-eng-lead{color:var(--ink-soft);margin:.8rem 0 0}
.mx-eng .test-container{margin:1rem 0 0;box-shadow:none;padding:1.4rem}
@media(max-width:820px){.mx-wrap{padding-top:5.6rem}.mx-h1{font-size:1.8rem}.mx-readgrid{grid-template-columns:1fr}.mx-passage{position:static;max-height:46vh}.mx-bar{top:62px}}

.mx-wrap section{padding:0;max-width:none}
.mx-bar{top:92px}.mx-passage{top:176px}
@media(max-width:820px){.mx-bar{top:74px}}

/* v22 */
.mk-note{padding:.7rem .9rem;border-radius:10px;background:var(--paper-alt);border:1px solid var(--rule);color:var(--ink-soft);font-size:.86rem;margin-bottom:1rem}
.mk-hint{display:block;color:var(--ink-soft);margin-top:.3rem}.mk-img{max-width:100%;max-height:220px;margin-top:.6rem;border-radius:8px;border:1px solid var(--rule);background:#fff}

/* v22 — writing feedback + mock hub + writing runner */
.mf{display:grid;gap:.9rem}.mf-top{display:grid;grid-template-columns:150px 1fr;gap:1rem;align-items:start}
.mf-overall{padding:1rem;border:1px solid var(--accent);border-radius:14px;text-align:center;background:var(--paper-alt)}.mf-overall small{display:block;color:var(--ink-soft)}.mf-overall b{font-size:2.6rem;color:var(--accent);font-family:var(--font-heading)}
.mf-crit{display:grid;gap:.5rem}.mf-c{padding:.6rem .8rem;border:1px solid var(--rule);border-radius:10px;background:var(--paper-alt)}.mf-ch{display:flex;justify-content:space-between;gap:1rem;font-weight:600}.mf-ch b{color:var(--accent)}.mf-c p{margin:.3rem 0 0;font-size:.9rem;color:var(--ink-soft)}
.mf-note{font-size:.85rem;color:var(--ink-soft);margin:0}
.mf-box{padding:.7rem .9rem;border-radius:10px;border:1px solid var(--rule);background:var(--paper-alt)}.mf-box h4{margin:0 0 .4rem}.mf-box ul{margin:0;padding-left:1.1rem}.mf-box.good{border-color:#2e9f6b}.mf-box.bad{border-color:#d69e2e}.mf-box.note{border-color:var(--accent)}
.mf-fix{padding:.4rem 0;border-top:1px solid var(--rule)}.mf-fix:first-of-type{border-top:0}.mf-fix .o{color:#c0392b;text-decoration:line-through;text-decoration-thickness:1px}.mf-fix .b{color:#2e9f6b;font-weight:600}.mf-fix small{color:var(--ink-soft)}
@media(max-width:640px){.mf-top{grid-template-columns:1fr}}
.mx-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.mx-hubc{display:flex;flex-direction:column;gap:.35rem;text-align:left;padding:1.2rem 1.2rem;border:1px solid var(--rule);border-radius:16px;background:var(--paper-alt);color:var(--ink);cursor:pointer;font:inherit;transition:border-color .15s,transform .15s}
.mx-hubc:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}.mx-hubc:disabled{opacity:.55;cursor:default}
.mx-hubc b{font-size:1.2rem;font-family:var(--font-heading)}.mx-hubc span{color:var(--ink-soft);font-size:.88rem}.mx-hubc em{font-style:normal;color:var(--accent);font-weight:700;font-size:.85rem;margin-top:.3rem}
.mx-back{border:0;background:none;color:var(--accent);cursor:pointer;font:inherit;font-weight:600;padding:0;margin-bottom:.8rem}
.mx-sect-title{margin:0 0 .8rem;font-size:1.15rem}
.mx-chip{display:inline-block;margin:.15rem .25rem 0 0;padding:.1rem .55rem;border-radius:99px;border:1px solid var(--rule);font-size:.76rem;color:var(--ink-soft)}
.mx-wr{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
.mx-wr-task{padding:1rem 1.2rem;border:1px solid var(--rule);border-radius:12px;background:var(--paper-alt);line-height:1.65;position:sticky;top:176px;max-height:calc(100vh - 200px);overflow:auto}.mx-wr-task img{max-width:100%;border-radius:8px;margin-top:.6rem;background:#fff}
.mx-wr-area textarea{width:100%;min-height:340px;padding:.9rem 1rem;border:1px solid var(--rule);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;font-size:1rem;line-height:1.6;resize:vertical;box-sizing:border-box}
.mx-wc{display:flex;justify-content:space-between;margin-top:.4rem;font-size:.88rem;color:var(--ink-soft)}.mx-wc.low b{color:#c0392b}.mx-wc.ok b{color:#2e9f6b}
.mx-trans{padding:1.4rem;border:1px solid var(--accent);border-radius:16px;background:var(--paper-alt)}
.mx-sumgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem;margin:1rem 0}.mx-sum{padding:.9rem 1rem;border:1px solid var(--rule);border-radius:12px;background:var(--paper)}.mx-sum small{display:block;color:var(--ink-soft)}.mx-sum b{font-size:1.7rem;color:var(--accent);font-family:var(--font-heading)}
.mx-h button{border:1px solid var(--accent);background:none;color:var(--accent);border-radius:8px;padding:.25rem .7rem;cursor:pointer;font:inherit;font-size:.82rem}
@media(max-width:820px){.mx-wr{grid-template-columns:1fr}.mx-wr-task{position:static;max-height:none}}
.mx-listbox{margin-top:1.4rem}.mx-seqb{color:var(--accent);font-weight:600}

/* v22 — teacher: Writing check */
.tw-top{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}.tw-lang{font-size:.88rem;color:var(--ink-soft)}.tw-lang select{margin-left:.3rem;padding:.3rem .5rem;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit}
.tw-row{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:.6rem}.tw-row small{display:block;color:var(--ink-soft)}
.tw-badge{padding:.2rem .7rem;border-radius:99px;border:1px solid var(--rule);font-size:.8rem;color:var(--ink-soft)}.tw-badge.ok{border-color:#2e9f6b;color:#2e9f6b}
.tw-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}@media(max-width:960px){.tw-grid{grid-template-columns:1fr}}
.tw-pre{white-space:pre-wrap;line-height:1.6}.tw-essay{max-height:420px;overflow:auto;padding:.8rem;border:1px solid var(--rule);border-radius:10px;background:var(--paper)}
.tw-meta,.tw-wc{font-size:.85rem;color:var(--ink-soft);margin:.4rem 0}
.tw-left textarea,.tw-right textarea,.tw-left select{width:100%;padding:.55rem .7rem;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:.92rem;box-sizing:border-box;resize:vertical}
.tw-crit{display:grid;gap:.6rem;margin-top:.8rem}.tw-cr{padding:.6rem .7rem;border:1px solid var(--rule);border-radius:10px}.tw-crh{display:flex;justify-content:space-between;gap:1rem;align-items:center;font-weight:600;margin-bottom:.3rem}.tw-crh input{width:80px;padding:.3rem .5rem;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;text-align:center}
.tw-overall{margin:.8rem 0;font-size:1.05rem}.tw-overall b{color:var(--accent);font-size:1.5rem}
.tw-fix{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:.4rem;margin-bottom:.4rem}.tw-fix input{padding:.4rem .5rem;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:.85rem;min-width:0}@media(max-width:640px){.tw-fix{grid-template-columns:1fr}}
.tw-meter{margin:.7rem 0}.tw-mh{display:flex;justify-content:space-between;font-size:.9rem}.tw-mb{height:10px;border-radius:99px;background:var(--paper);border:1px solid var(--rule);overflow:hidden;margin-top:.25rem}.tw-mb i{display:block;height:100%}.tw-mb i.lo{background:#2e9f6b}.tw-mb i.mid{background:#d69e2e}.tw-mb i.hi{background:#c0392b}.tw-meter small{color:var(--ink-soft)}
.tw-sim{margin:.4rem 0;padding:.5rem .7rem;border:1px solid var(--rule);border-radius:10px}.tw-sim small{display:block;color:var(--ink-soft)}
.tc-card blockquote{margin:.4rem 0;padding:.3rem .7rem;border-left:3px solid #c0392b;color:var(--ink-soft);font-size:.88rem}

/* ===== Intro video stage (home page, first screen) ===== */
.intro-stage { background: #0b0d15; padding: var(--stage-nav, 76px) 0 0; max-width: none; margin: 0; position: relative; z-index: 2; }
.intro-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 auto; background: #0b0d15; overflow: hidden; }
.intro-frame video, .intro-frame .intro-end { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0b0d15; }
.intro-frame .intro-end[hidden], .intro-frame video[hidden] { display: none; }
/* clickable areas sit exactly on the buttons that are drawn in the video (positions in % of the 1920x1080 frame) */
.ih { position: absolute; display: block; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; border-radius: 999px; opacity: 0; pointer-events: none; transition: box-shadow .2s ease, background-color .2s ease, transform .2s ease; -webkit-tap-highlight-color: transparent; }
.intro-frame.is-live .ih { opacity: 1; pointer-events: auto; }
.intro-frame.is-chips .ih-chip { opacity: 1; pointer-events: auto; }
.intro-frame:not(.is-live) .ih-main, .intro-frame:not(.is-chips) .ih-chip { opacity: 0; pointer-events: none; }
.ih-main { left: 26.667%; top: 58.148%; width: 46.667%; height: 11.574%; }
.ih-chip { top: 83.333%; height: 6.944%; }
.ih-ielts { left: 27.188%; width: 8.281%; }
.ih-sat { left: 36.458%; width: 6.979%; }
.ih-math { left: 44.375%; width: 14.74%; }
.ih-german { left: 60%; width: 12.813%; }
.ih-main:hover, .ih-main:focus-visible { background: rgba(255,255,255,.12); box-shadow: 0 0 0 3px rgba(240,200,110,.55), 0 10px 40px rgba(232,190,95,.35); transform: translateY(-2px); }
.ih-chip:hover, .ih-chip:focus-visible { background: rgba(232,190,95,.16); box-shadow: 0 0 0 2px rgba(240,200,110,.85); transform: translateY(-2px); }
.ih:focus-visible { outline: none; }
.ih:active { transform: scale(.98); }
.intro-ctrl { position: absolute; right: 1.2%; bottom: 2.4%; display: flex; gap: .5rem; z-index: 3; }
.intro-btn { font: 600 .78rem/1 inherit; font-family: inherit; color: #fff; background: rgba(10,12,20,.8); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: .55rem .9rem; cursor: pointer; }
.intro-btn:hover { background: rgba(10,12,20,.85); border-color: rgba(240,200,110,.8); }
.intro-btn[hidden] { display: none; }
.intro-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; border: 0; background: rgba(232,190,95,.95); color: #111; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.intro-play[hidden] { display: none; }
@media (max-width: 640px) { .intro-btn { font-size: .66rem; padding: .4rem .6rem; } .intro-ctrl { gap: .3rem; } }
@media (prefers-reduced-motion: reduce) { .ih { transition: none; } }
.intro-stage + .hero { padding-top: 4rem; }

/* ===== Course details window (home page) ===== */
.cm-content { max-width: 560px; width: calc(100% - 2rem); max-height: calc(100vh - 2rem); overflow-y: auto; text-align: left; }
.cm-content h2 { margin: .6rem 0 .8rem; font-size: 1.6rem; }
.cm-content p { color: var(--ink-soft); line-height: 1.6; margin: 0 0 .8rem; }
.cm-price { font-size: 1.7rem; font-weight: 700; color: var(--accent); margin-top: .6rem; }
.cm-price small { font-size: .9rem; color: var(--ink-soft); font-weight: 500; }
.cm-modal.show { align-items: center; }

/* ===== Admin: courses & prices editor ===== */
.cat-sec { margin-bottom: 2rem; }
.cat-sec > h3 { margin: 0 0 .3rem; }
.cat-hint { color: var(--ink-soft); font-size: .85rem; margin: .2rem 0 .8rem; }
.cat-card label { display: block; margin: .6rem 0 .2rem; font-size: .85rem; font-weight: 600; }
.cat-card input[type=text], .cat-card input[type=number], .cat-card textarea, .cat-card select { width: 100%; box-sizing: border-box; }
.cat-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cat-btns { display: inline-flex; gap: .3rem; }
.cat-checks { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .4rem; }
.cat-card label.cat-check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; margin: 0; }
.cat-card label.cat-check input { width: auto; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; }
.cat-tr { margin-top: .8rem; border-top: 1px dashed var(--rule); padding-top: .6rem; }
.cat-tr > summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.cat-lang { margin-top: .6rem; padding: .6rem .8rem; background: var(--paper); border-radius: 10px; }
.cat-lang h5 { margin: 0 0 .2rem; }
.cat-save { position: sticky; bottom: 0; z-index: 5; }

/* ── profile editor + profile actions ── */
.profile-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
@media(max-width:640px){.profile-actions{width:100%}.profile-actions>*{flex:1 1 100%;text-align:center}}
.pe-content{max-width:480px;width:calc(100% - 2rem);max-height:90vh;overflow:auto}
.pe-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:480px){.pe-row{grid-template-columns:1fr}}
.pe-hint{display:block;color:var(--text-secondary,#64748b);font-size:.78rem;margin:.25rem 0 .7rem;line-height:1.4}
.pe-check{display:flex;gap:.5rem;align-items:flex-start;margin:.6rem 0;font-size:.9rem;cursor:pointer}
.pe-check input{width:auto!important;margin:.2rem 0 0}
.pe-sep{border:0;border-top:1px solid rgba(128,128,128,.25);margin:1.4rem 0 1rem}
.pe-cur{margin:.2rem 0 .8rem;word-break:break-all}

/* ── «Назад» button on inner pages ── */
.back-btn{position:absolute;left:12px;top:72px;z-index:900;display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .85rem;border-radius:999px;background:var(--paper,#fff);color:var(--ink,#111);border:1px solid var(--rule,rgba(128,128,128,.35));font-size:.85rem;font-weight:600;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.08);opacity:.92}
.back-btn:hover{border-color:var(--accent);color:var(--accent);opacity:1}
@media(max-width:560px){.back-btn{padding:.34rem .7rem;font-size:.8rem}}

/* ── presence dots + role toast ── */
.pres-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-left:.35rem;vertical-align:middle;background:#9aa3ad;box-shadow:0 0 0 2px var(--paper,#fff)}
.pres-online{background:#22c55e}.pres-lesson{background:#f59e0b}.pres-offline{background:#9aa3ad}
.pres-txt{font-size:.74rem;color:var(--ink-soft,#64748b);margin-left:.35rem;font-weight:500}
.role-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;transition:.3s;background:var(--accent,#0f766e);color:var(--on-accent,#fff);padding:.7rem 1.2rem;border-radius:12px;z-index:5000;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:calc(100% - 2rem);text-align:center}
.role-toast.show{opacity:1;transform:translate(-50%,0)}

/* footer: long e-mail must wrap instead of widening the page (iPad / small laptops) */
.footer-col{min-width:0}
.footer-col a,.footer-col li{overflow-wrap:anywhere}

/* the last scene is alive: a soft pulse around the real "trial lesson" button */
@keyframes ihPulse { 0% { box-shadow: 0 0 0 0 rgba(240,200,110,.55); } 70% { box-shadow: 0 0 0 22px rgba(240,200,110,0); } 100% { box-shadow: 0 0 0 0 rgba(240,200,110,0); } }
.intro-frame.is-end .ih-main:not(:hover):not(:focus-visible) { animation: ihPulse 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .intro-frame.is-end .ih-main { animation: none !important; } }

/* test chooser (hero "Take the test") */
.tp-content{max-width:520px;width:calc(100% - 2rem);text-align:center;position:relative}
.tp-close{position:absolute;right:1rem;top:.6rem;font-size:1.8rem;line-height:1;cursor:pointer;opacity:.7}
.tp-close:hover{opacity:1}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.2rem}
@media(max-width:480px){.tp-grid{grid-template-columns:1fr}}
.tp-card{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.3rem 1rem;border:1px solid var(--rule,rgba(128,128,128,.3));border-radius:16px;background:var(--paper-alt,transparent);color:var(--ink,inherit);text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
.tp-card:hover,.tp-card:focus-visible{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 28px rgba(0,0,0,.18);outline:none}
.tp-card strong{font-size:1.1rem}
.tp-card small{color:var(--ink-soft,#64748b);font-size:.82rem}
.tp-ic{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent,#fff);font-weight:800;font-size:1.25rem}

/* blog cards: real pictures instead of icons */
.blog-img-container .blog-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.blog-img-container .blog-badge{z-index:1}

/* phones: the sound / skip buttons go to the top corner so they do not cover the subject chips drawn at the bottom of the video */
@media (max-width: 640px) { .intro-ctrl { bottom: auto; top: 6px; right: 6px; } }

/* ── messenger v32: reply / edit / pin / menu / groups ── */
.mb{position:relative}
.mb-more{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer;opacity:0;transition:opacity .15s;padding:0}
.mb-more svg{width:1rem;height:1rem}
.mb:hover .mb-more,.mb-more:focus-visible{opacity:.85}
@media (hover:none){.mb-more{opacity:.55}}
.mb.flash{animation:mbFlash 1.3s ease}
@keyframes mbFlash{0%,60%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 3px transparent}}
.mb-from{font-size:.74rem;font-weight:800;margin-bottom:.15rem;display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;padding-right:1.3rem}
.mb-reply{display:block;width:100%;text-align:left;font:inherit;border:0;border-left:3px solid var(--accent);background:rgba(0,0,0,.06);color:inherit;border-radius:6px;padding:.25rem .5rem;margin-bottom:.3rem;cursor:pointer;min-width:0}
.mb.mine .mb-reply{border-left-color:#fff;background:rgba(255,255,255,.18)}
.mb-reply strong{display:block;font-size:.72rem}
.mb-reply span{display:block;font-size:.78rem;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.mb-pinned{display:inline-block;vertical-align:-2px;margin-right:.25rem}.mb-pinned svg{width:.7rem;height:.7rem}
.msg-pin{display:flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border-bottom:1px solid var(--rule);background:var(--accent-tint)}
.msg-pin[hidden],.msg-ctx[hidden]{display:none}
.msg-pin-ic svg{width:1rem;height:1rem;color:var(--accent)}
.msg-pin-t{flex:1;min-width:0;text-align:left;background:none;border:0;font:inherit;color:var(--ink);cursor:pointer;padding:0}
.msg-pin-t strong{display:block;font-size:.72rem;color:var(--accent)}
.msg-pin-t span{display:block;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-pin-x,.msg-ctx-x{border:0;background:none;color:var(--ink-soft);cursor:pointer;width:1.8rem;height:1.8rem;display:grid;place-items:center;border-radius:8px}
.msg-pin-x:hover,.msg-ctx-x:hover{background:var(--paper-alt)}
.msg-pin-x svg,.msg-ctx-x svg{width:1rem;height:1rem}
.msg-ctx{display:flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border-top:1px solid var(--rule);background:var(--paper-alt)}
.msg-ctx-ic svg{width:1rem;height:1rem;color:var(--accent)}
.msg-ctx-t{flex:1;min-width:0;border-left:3px solid var(--accent);padding-left:.5rem}
.msg-ctx-t strong{display:block;font-size:.74rem;color:var(--accent)}
.msg-ctx-t span{display:block;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-menu{position:fixed;z-index:3000;min-width:180px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.2);padding:.3rem}
.mb-menu button{display:flex;align-items:center;gap:.6rem;width:100%;border:0;background:none;color:var(--ink);font:inherit;font-size:.9rem;padding:.55rem .7rem;border-radius:8px;cursor:pointer;text-align:left}
.mb-menu button:hover,.mb-menu button:focus-visible{background:var(--accent-tint)}
.mb-menu button svg{width:1rem;height:1rem;flex:none}
.mb-menu button.danger{color:#c0392b}
.msg-role.g{background:var(--paper-alt)}
.msg-role.o{background:#f5c518;color:#1a1a1a;border-color:#f5c518}
.msg-av.grp{background:var(--accent);color:var(--on-accent)}.msg-av.grp svg{width:1.1rem;height:1.1rem}
.msg-members-btn{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline}
.msg-newgrp{display:flex;align-items:center;gap:.5rem;width:100%;margin:.2rem 0 .6rem;padding:.55rem .8rem;border:1px dashed var(--rule);background:transparent;color:var(--ink);border-radius:10px;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}
.msg-newgrp:hover{background:var(--accent-tint);border-color:var(--accent)}
.msg-newgrp svg{width:1rem;height:1rem}
.gm-ov{position:fixed;inset:0;z-index:2500;background:rgba(0,0,0,.5);display:grid;place-items:center;padding:1rem}
.gm{background:var(--paper);color:var(--ink);border-radius:16px;border:1px solid var(--rule);width:min(440px,100%);max-height:90vh;overflow:auto;padding:1.2rem 1.2rem 1rem}
.gm h3{margin:0 0 .6rem;font-size:1.15rem;display:flex;align-items:center;gap:.4rem}
.gm-l{display:block;font-size:.82rem;font-weight:800;margin:.7rem 0 .3rem}
.gm-inp{width:100%;padding:.6rem .75rem;border:1px solid var(--rule);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit;font-size:.92rem;margin-top:.25rem}
.gm-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.4rem}
.gm-chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--accent-tint);border:1px solid var(--rule);border-radius:999px;padding:.2rem .3rem .2rem .65rem;font-size:.82rem}
.gm-chip button{border:0;background:none;color:inherit;cursor:pointer;font-size:1rem;line-height:1;padding:0 .3rem}
.gm-hint{font-size:.82rem;color:var(--ink-soft)}
.gm-res{display:flex;flex-direction:column;margin-top:.25rem;max-height:200px;overflow:auto}
.gm-res .msg-sug-i{position:static}
.gm-err{color:#c0392b;font-size:.84rem;min-height:1.1rem;margin-top:.4rem}
.gm-act{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.gm-danger{color:#c0392b;margin-right:auto}
.gm-sub{font-size:.82rem;color:var(--ink-soft);margin-bottom:.5rem}
.gm-members{display:flex;flex-direction:column;gap:.1rem;max-height:320px;overflow:auto}
.gm-mem{display:flex;align-items:center;gap:.6rem;padding:.4rem .2rem}
.gm-mt{flex:1;min-width:0;display:flex;flex-direction:column}.gm-mt strong{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gm-mt small{color:var(--ink-soft);font-size:.76rem}.gm-mt em{font-style:normal;color:var(--ink-soft);font-weight:400}
.gm-rm,.gm-ren{border:0;background:none;color:var(--ink-soft);cursor:pointer;width:1.8rem;height:1.8rem;display:inline-grid;place-items:center;border-radius:8px}
.gm-rm:hover,.gm-ren:hover{background:var(--paper-alt);color:#c0392b}.gm-ren:hover{color:var(--accent)}
.gm-rm svg,.gm-ren svg{width:1rem;height:1rem}

.partners-note{max-width:760px;margin:.9rem auto 0;padding:0 1rem;text-align:center;font-size:.74rem;line-height:1.45;color:var(--ink-soft);opacity:.85}

/* ── phone country button + country list ── */
.pp-wrap{display:flex;align-items:stretch;gap:.4rem;width:100%}
.pp-wrap>input{flex:1 1 auto;min-width:0;width:auto!important}
.pp-btn{flex:none;display:inline-flex;align-items:center;gap:.35rem;padding:0 .7rem;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;font-weight:700;white-space:nowrap;min-height:2.6rem}
.pp-btn:hover,.pp-btn:focus-visible{border-color:var(--accent);outline:none}
.pp-btn svg{opacity:.7}
.pp-ov{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:1rem}
.pp-box{background:var(--paper,#fff);color:var(--ink,#111);border:1px solid var(--rule);border-radius:16px;width:min(420px,100%);max-height:min(640px,88vh);display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.pp-box h3{margin:0;padding:1.1rem 1.3rem .6rem;font-size:1.15rem}
.pp-search{display:flex;align-items:center;gap:.5rem;margin:0 1rem .4rem;padding:.2rem .7rem;border-bottom:1px solid var(--rule);color:var(--ink-soft)}
.pp-search input{flex:1;border:0;background:transparent;color:var(--ink);font:inherit;padding:.55rem 0;outline:none;width:auto}
.pp-list{overflow:auto;flex:1;padding:.2rem .5rem}
.pp-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;text-align:left;border:0;background:none;color:var(--ink);font:inherit;padding:.65rem .8rem;border-radius:10px;cursor:pointer}
.pp-row:hover,.pp-row:focus-visible{background:var(--accent-tint)}
.pp-row.on{background:var(--accent-tint);font-weight:700}
.pp-row em{font-style:normal;color:var(--ink-soft);flex:none}
.pp-sep{height:1px;background:var(--rule);margin:.3rem .8rem}
.pp-none{padding:1.2rem;text-align:center;color:var(--ink-soft)}
.pp-foot{display:flex;justify-content:flex-end;padding:.6rem 1rem;border-top:1px solid var(--rule)}
.pp-close{border:0;background:none;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;padding:.4rem .6rem}

/* attention marks */
.ct-away { background: #c0392b; color: #fff; border-radius: 8px; padding: .2rem .5rem; font-size: .78rem; font-weight: 600; display: inline-flex; gap: .25rem; align-items: center; }
.ct-away i { font-style: normal; opacity: .9; font-variant-numeric: tabular-nums; }
.cp .ct-away { margin-left: auto; margin-right: .4rem; }
.call-consent { display: flex; gap: .6rem; align-items: flex-start; text-align: left; font-size: .85rem; margin: .6rem 0 .2rem; cursor: pointer; }
.call-consent input { margin-top: .2rem; accent-color: #d4af37; }
.call-consent-note { font-size: .78rem; opacity: .7; margin: 0 0 .5rem; text-align: left; }

/* ══════════════════════════════════════════════════════════
   NAV v61 — one clear menu on every page (built by theme.js)
   ══════════════════════════════════════════════════════════ */

.nav-links > a.nav-pin--mock { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; white-space: nowrap; }
.nav-new { font-size: .6rem; font-weight: 800; letter-spacing: .05em; line-height: 1.35; background: #D9363E; color: #fff; border-radius: 999px; padding: 2px 6px; }
.nav-links > a.nav-pin--cab:not(.auth-nav-user) { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.nav-links > a.nav-pin--cab:not(.auth-nav-user):hover { filter: brightness(1.08); color: var(--on-accent); }
.nav-links > a.nav-pin.is-current:not(.nav-pin--cab) { background: var(--accent-tint); }

.mobile-toggle { width: auto; min-width: 44px; padding: 0 14px 0 12px; gap: 8px; font-family: inherit; font-size: .95rem; font-weight: 600; }
.mobile-toggle svg { width: 20px; height: 20px; }
.mobile-toggle .mi-label--close { display: none; }
.nav-is-open .mobile-toggle .mi-label--open { display: none; }
.nav-is-open .mobile-toggle .mi-label--close { display: inline; }
.nav-is-open .mobile-toggle { background: var(--accent-tint); border-color: var(--accent); }

/* menu card (computer) */
.nav-menu { width: 760px; flex-direction: row; align-items: flex-start; gap: .5rem; padding: 1rem; border: 1px solid var(--rule); border-radius: 18px; background: var(--paper); box-shadow: 0 24px 60px rgba(var(--shadow-rgb), .22); }
.nm-group { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nm-head { padding: .25rem .75rem .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.nav-menu a.nm-item { display: flex; align-items: center; gap: 12px; padding: .6rem .7rem; border: 0; border-radius: 12px; font-size: 1rem; white-space: normal; color: var(--ink); }
.nm-ico { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-tint); color: var(--accent); }
.nm-ico svg { width: 21px; height: 21px; }
.nm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nm-txt b { font-size: .98rem; font-weight: 600; line-height: 1.25; }
.nm-txt small { font-size: .8rem; line-height: 1.3; color: var(--ink-soft); }
.nm-go { flex: 0 0 18px; color: var(--ink-soft); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.nm-go svg { width: 18px; height: 18px; display: block; }
.nav-menu a.nm-item:hover, .nav-menu a.nm-item:focus-visible { background: var(--paper-alt); color: var(--ink); border-radius: 12px; }
.nav-menu a.nm-item:hover .nm-go, .nav-menu a.nm-item:focus-visible .nm-go { opacity: 1; transform: none; color: var(--accent); }
.nav-menu a.nm-item.is-current { background: var(--accent-tint); }
/* Mock Exam is already a button in the bar on a computer — don't repeat it in the menu */
@media (min-width: 1201px) { .nav-menu a.nm-item[data-nav="mock"] { display: none; } }
.nav-menu a.nm-item.is-current .nm-txt b { color: var(--accent); }
.nav-menu a.nm-item.is-current .nm-ico { background: var(--accent); color: var(--on-accent); }

/* phone / tablet: side panel — account first, then the groups, then languages */
@media (max-width: 1200px) {
  .nav-links > * { order: 3; }
  .nav-links > a.nav-pin--cab, .nav-links > a.auth-nav-link { order: 1; }
  .nav-links > a.nav-msg-link, .nav-links > a.admin-nav-link { order: 2; }
  .nav-links > a.nav-pin--pay { order: 2; }
  .nav-links > .nav-menu { order: 4; }
  .nav-links > .lang-switch { order: 5; }
  .nav-links > a.nav-pin--mock { display: none !important; }
  .nav-links { padding-top: 1rem; }
  .nav-links > a.nav-pin { border-radius: 12px; font-weight: 600; }
  .nav-menu { width: auto; flex-direction: column; gap: 1rem; padding: .75rem 0 0; margin-top: .25rem; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; }
  .nm-group { width: 100%; }
  .nm-head { padding: .4rem .25rem .5rem; }
  .nav-menu a.nm-item { padding: .65rem .35rem; border-bottom: 0; border-radius: 12px; font-size: 1rem; }
  .nm-go { opacity: .55; transform: none; }
  .mobile-toggle { margin-left: .5rem; }
}
@media (max-width: 400px) {
  .mobile-toggle { padding: 0 11px; }
}
html.nav-is-open .sa-fab, html.nav-is-open .sa-panel { display: none !important; }