:root {
  --primary: #4C6EF5;
  --primary-dark: #3B5BDB;
  --primary-light: #EEF2FF;
  --accent: #FFB020;
  --accent-dark: #E6960A;
  --success: #12B76A;
  --ink: #1A1F36;
  --muted: #64748B;
  --line: #E6E9F2;
  --paper: #ffffff;
  --bg: #F5F7FC;
  --footer-bg: #171B34;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 24px rgba(28, 39, 76, 0.07);
  --shadow-hover: 0 14px 32px rgba(28, 39, 76, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(680px circle at 4% -6%, rgba(76, 110, 245, 0.20), transparent 62%),
    radial-gradient(580px circle at 98% 2%, rgba(244, 114, 182, 0.18), transparent 60%),
    radial-gradient(750px circle at 94% 52%, rgba(18, 183, 106, 0.15), transparent 64%),
    radial-gradient(620px circle at 0% 75%, rgba(255, 176, 32, 0.18), transparent 62%),
    radial-gradient(500px circle at 45% 35%, rgba(34, 166, 224, 0.08), transparent 60%),
    var(--bg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---------- Header ---------- */

.site-header {
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}

@media (min-width: 901px) {
  .site-header {
    position: relative;
  }
}

.header-top {
  padding: 18px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1.1;
}

.brand:hover {
  text-decoration: none;
}

.brand-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-text strong {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand-text small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.site-search {
  display: flex;
  width: min(420px, 45%);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.site-search input,
.site-search button {
  border: 0;
  font: inherit;
  background: transparent;
}

.site-search input {
  min-width: 0;
  flex: 1;
  padding: 12px 8px 12px 20px;
  color: var(--ink);
}

.site-search input:focus {
  outline: none;
}

.site-search button {
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  padding: 0 20px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  margin: 4px;
}

.site-search button:hover {
  background: var(--primary-dark);
}

.nav-search {
  display: none;
}

.primary-nav {
  position: relative;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.primary-nav a,
.nav-dropdown-toggle {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 999px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.primary-nav a:hover,
.nav-dropdown-toggle:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
  text-decoration: none;
}

.nav-dropdown {
  position: relative;
}

.nav-caret {
  font-size: 11px;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: 8px;
  min-width: 220px;
  flex-direction: column;
  gap: 2px;
}

.nav-dropdown.is-open .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown-menu a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

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

@media (max-width: 900px) {
  body {
    /* iOS Safari renders fixed backgrounds unreliably (jank/clipping on
       scroll) -- let the decorative wash scroll with the page on small
       screens instead of pinning it. */
    background-attachment: scroll;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.28s ease, transform 0.28s ease;
  }

  .nav-list.is-open {
    max-height: 600px;
    padding: 10px 0;
    opacity: 1;
    transform: translateY(0);
    border-top: 1px solid var(--line);
  }

  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 0 14px;
    display: none;
  }

  .nav-dropdown.is-open .nav-dropdown-menu {
    display: flex;
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
  }
}

/* ---------- Layout ---------- */

.site-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
  padding: 24px 0 40px;
}

.site-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.widget,
.featured-post,
.section-block,
.article {
  min-width: 0;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* ---------- Hero ---------- */

.home-hero {
  background: linear-gradient(135deg, var(--primary) 0%, #22A6E0 100%);
  border-radius: var(--radius-lg);
  color: #fff;
  padding: 18px 24px;
  box-shadow: var(--shadow);
}

.home-hero h1 {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 4px;
}

.home-hero p {
  margin: 0;
  max-width: 640px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88);
}

.interactive-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, #F76707, #D9480F);
  border-radius: var(--radius-lg);
  padding: 22px 28px;
  color: #fff;
  box-shadow: var(--shadow);
}

.interactive-banner-blue {
  background: linear-gradient(135deg, #4C6EF5, #3B5BDB);
}

.interactive-banner:hover {
  text-decoration: none;
  box-shadow: var(--shadow-hover);
}

.interactive-banner-emoji {
  font-size: 42px;
  flex-shrink: 0;
}

.interactive-banner-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.interactive-banner-text strong {
  font-size: 19px;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.interactive-banner-text span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.interactive-banner-cta {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

.interactive-banner-green {
  background: linear-gradient(135deg, #12B76A, #027A48);
}

.interactive-banner-pink {
  background: linear-gradient(135deg, #F472B6, #C2255C);
}

.interactive-banner-purple {
  background: linear-gradient(135deg, #14B8A6, #0F766E);
}

.interactive-banner-teacher {
  background: linear-gradient(135deg, #E63946, #FF7A59);
}

.didactic-picks {
  margin-bottom: 28px;
}

.didactic-picks .section-heading a {
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.didactic-picks-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.didactic-pick-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 130px;
  border-radius: var(--radius-lg);
  padding: 18px;
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.didactic-pick-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  text-decoration: none;
}

.didactic-pick-icon {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 0;
  width: 96px;
  height: 96px;
  transform: translate(50%, -50%);
  color: #fff;
  opacity: 0.28;
  pointer-events: none;
}

.didactic-pick-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.didactic-pick-title {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.didactic-pick-desc {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.78);
  font-size: 13px;
  line-height: 1.45;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.didactic-pick-card:hover .didactic-pick-desc,
.didactic-pick-card:focus-visible .didactic-pick-desc {
  opacity: 1;
}

.didactic-pick-1 {
  background: linear-gradient(135deg, #F76707, #D9480F);
}

.didactic-pick-2 {
  background: linear-gradient(135deg, #4C6EF5, #3B5BDB);
}

.didactic-pick-3 {
  background: linear-gradient(135deg, #12B76A, #027A48);
}

.didactic-pick-4 {
  background: linear-gradient(135deg, #F472B6, #C2255C);
}

.didactic-pick-5 {
  background: linear-gradient(135deg, #14B8A6, #0F766E);
}

.didactic-pick-6 {
  background: linear-gradient(135deg, #FFB020, #E6960A);
}

.hero-picture-banner {
  display: block;
  margin-bottom: 18px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hero-picture-banner:hover {
  box-shadow: var(--shadow-hover);
}

.hero-picture-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* Homepage trainer banner: HTML text + button, art layers slide in one by one. */
.home-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 26px 18px 18px 34px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 214, 120, 0.35) 0, rgba(255, 214, 120, 0) 34%),
    radial-gradient(circle at 70% 105%, rgba(132, 183, 255, 0.35) 0, rgba(132, 183, 255, 0) 45%),
    linear-gradient(120deg, #F3F8FF 0%, #FFFFFF 48%, #FFF7EC 100%);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.home-banner:hover {
  color: var(--ink);
  box-shadow: var(--shadow-hover);
}

.hb-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  z-index: 2;
}

.hb-title {
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.hb-title-accent {
  display: block;
  color: #0E8F8A;
}

.hb-sub {
  max-width: 34ch;
  color: #47506B;
  font-size: 1rem;
  line-height: 1.5;
}

.hb-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 13px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 8px 18px rgba(242, 92, 84, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-banner:hover .hb-button {
  box-shadow: 0 12px 24px rgba(242, 92, 84, 0.4);
}

.hb-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.home-banner:hover .hb-arrow {
  transform: translateX(4px);
}

/* Scene keeps the source art's 1369x1048 proportions; layer positions are % of it. */
.hb-scene {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1369 / 1048;
}

.hb-layer {
  position: absolute;
  height: auto;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.hb-girl { z-index: 2; }
.hb-desk { z-index: 3; }
.hb-pencils { z-index: 3; }
.hb-spark { z-index: 4; }

@media (prefers-reduced-motion: no-preference) {
  .hb-text > * {
    animation: hb-text-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .hb-text > :nth-child(2) { animation-delay: 0.12s; }
  .hb-text > :nth-child(3) { animation-delay: 0.24s; }

  .hb-layer {
    animation: hb-pop-in 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
  }

  .hb-girl { animation-name: hb-rise-in; animation-delay: 0.05s; }
  .hb-desk { animation-name: hb-rise-in; animation-delay: 0.3s; }
  .hb-shelf { animation-name: hb-drop-in; animation-delay: 0.45s; }
  .hb-plant { animation-name: hb-drop-in; animation-delay: 0.6s; }
  .hb-abc { animation-name: hb-drop-in; animation-delay: 0.7s; transform-origin: 50% 0; }
  .hb-bear { animation-delay: 0.85s; transform-origin: 50% 100%; }
  .hb-globe { animation-delay: 0.95s; transform-origin: 50% 100%; }
  .hb-pencils { animation-delay: 1.05s; transform-origin: 50% 100%; }
  .hb-spark {
    animation: hb-pop-in 0.5s 1.25s both, hb-twinkle 2.6s 1.8s ease-in-out infinite;
    transform-origin: 80% 80%;
  }

}

@keyframes hb-text-in {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}

@keyframes hb-rise-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes hb-drop-in {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: none; }
}

@keyframes hb-pop-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

@keyframes hb-twinkle {
  0%, 100% { opacity: 1; transform: none; }
  50% { opacity: 0.55; transform: scale(0.88) rotate(-6deg); }
}


@media (max-width: 700px) {
  .home-banner {
    grid-template-columns: 1fr;
    padding: 22px 16px 10px;
    text-align: left;
  }

  .hb-scene {
    margin-top: 6px;
  }
}

.hero-carousel {
  position: relative;
}

.hero-carousel .hero-slide {
  margin-bottom: 12px;
}

/* all slides in one grid cell: the block keeps the height of the tallest
   slide and doesn't jump on rotation (2026-10-06) */
.hero-carousel.is-carousel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hero-carousel.is-carousel .hero-slide {
  grid-row: 1;
  grid-column: 1;
  margin-bottom: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.hero-carousel.is-carousel .hero-slide.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.hero-carousel.is-carousel .hero-carousel-dots {
  grid-row: 2;
  grid-column: 1;
}

.hero-carousel-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.hero-carousel.is-carousel .hero-carousel-dots {
  display: flex;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: var(--line);
  cursor: pointer;
  transition: width 0.2s, background 0.2s;
}

.hero-dot.is-active {
  width: 24px;
  background: var(--accent-dark);
}

.archive-header,
.article-header {
  padding: 16px 24px;
}

.archive-header h1,
.article-header h1 {
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 4px;
}

.archive-header p {
  margin: 0;
  color: var(--muted);
}

.archive-intro-note {
  margin-top: 8px !important;
  font-size: 13px;
}

.breadcrumb {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

.breadcrumb a {
  color: var(--muted);
}

.eyebrow {
  color: var(--primary-dark);
  background: var(--primary-light);
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  margin: 0 0 10px;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* ---------- Featured post ---------- */

.featured-post {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  overflow: hidden;
}

.featured-post-media {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), #22A6E0);
  color: #fff;
  font-size: 56px;
  font-weight: 900;
}

/* a real cover (2026-10-06): watercolour art on white instead of the letter */
.featured-post-media.has-image {
  background: #fff;
}

.featured-post-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 16:9 on phones: white sides, the candles stay whole */
}

.featured-post-body {
  padding: 26px 28px;
}

.featured-post-body h2 {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 8px 0 10px;
}

.featured-post-body h2 a {
  color: var(--ink);
}

/* ---------- Section headings ---------- */

.section-block {
  padding: 24px 26px;
}

.section-heading {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.section-heading h2 {
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.section-heading span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.section-link {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: block;
  min-height: 78px;
  padding: 14px 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.section-link:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  text-decoration: none;
}

.section-link strong,
.related-grid strong {
  color: var(--ink);
  display: block;
  font-weight: 800;
  line-height: 1.25;
}

.section-link span,
.related-grid span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
}

/* Homepage "Темы": one endless line, big bold icon above big text. */
.topic-marquee-section {
  margin-bottom: 28px;
}

.topic-marquee {
  contain: inline-size;
  cursor: grab;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* room for the cards' soft shadow (0 8px 24px, 14px 32px on hover):
     overflow clips it, so the padding is large and the negative margins
     keep the layout where it was (2026-10-01) */
  margin: -10px -6px -32px;
  padding: 16px 6px 46px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.topic-marquee.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.topic-marquee.is-dragging .topic-card {
  pointer-events: none;
}

.topic-marquee-section .section-heading {
  flex-direction: row;
  align-items: center;
}

.topic-marquee-arrows {
  display: flex;
  gap: 8px;
}

.topic-arrow {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px;
  box-shadow: var(--shadow);
  transition: background 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .topic-arrow:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }
}

.topic-marquee::-webkit-scrollbar {
  display: none;
}

.topic-marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
}

.topic-card {
  flex: 0 0 auto;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px 18px;
  border-radius: var(--radius-lg);
  background: var(--tc-bg);
  color: var(--tc-ink);
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.topic-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.topic-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #fff;
  color: var(--tc-ink);
}

.topic-card-icon svg {
  width: 68px;
  height: 68px;
  display: block;
}

.topic-card-name {
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
}

.topic-card-1 { --tc-bg: #FFE8D6; --tc-ink: #D9480F; }
.topic-card-2 { --tc-bg: #E3F2FD; --tc-ink: #1C64D1; }
.topic-card-3 { --tc-bg: #E6F7EC; --tc-ink: #087443; }
.topic-card-4 { --tc-bg: #FDE7F1; --tc-ink: #C2255C; }
.topic-card-5 { --tc-bg: #EFE9FF; --tc-ink: #5B3FD6; }
.topic-card-6 { --tc-bg: #FFF4D6; --tc-ink: #B25E00; }

.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-links a,
.term-links a,
.read-more {
  background: var(--primary-light);
  color: var(--primary-dark);
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 16px;
  border-radius: 999px;
}

.read-more {
  background: var(--primary);
  color: #fff;
}

.page-links a:hover,
.term-links a:hover {
  background: var(--primary);
  color: #fff;
  text-decoration: none;
}

.read-more:hover {
  background: var(--primary-dark);
  text-decoration: none;
}

/* ---------- Material cards (listings) ----------
   2026-10-01 redesign: instead of a big empty gradient with a cropped
   faded pictogram - a compact soft header (icon, type pill, fact badges),
   then title, one meta line, excerpt and a footer with views and
   "Открыть →". The whole card is one link; cards in a row share a height
   (grid stretch + flex column + footer margin-top:auto). Colours cycle by
   position, not by type. Markup: templates/partials/material-card.twig. */

.article-list {
  padding: 24px 26px;
}

.material-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.material-card {
  --mc-bg1: #EEF2FF;
  --mc-bg2: #E0E7FF;
  --mc-ink: #4C6EF5;
  display: flex;
  min-width: 0;
}

.material-card:nth-child(6n+2) { --mc-bg1: #FFF4E6; --mc-bg2: #FFE8CC; --mc-ink: #E8590C; }
.material-card:nth-child(6n+3) { --mc-bg1: #E6FCF5; --mc-bg2: #C3FAE8; --mc-ink: #0CA678; }
.material-card:nth-child(6n+4) { --mc-bg1: #F8F0FC; --mc-bg2: #F3D9FA; --mc-ink: #AE3EC9; }
.material-card:nth-child(6n+5) { --mc-bg1: #E3FAFC; --mc-bg2: #C5F6FA; --mc-ink: #1098AD; }
.material-card:nth-child(6n+6) { --mc-bg1: #FFF9DB; --mc-bg2: #FFEC99; --mc-ink: #E67700; }

.material-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.material-card__link:hover,
.material-card__link:focus-visible {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: #D5DBEA;
}

.material-card__link:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.material-card__visual {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 108px;
  padding: 0 16px;
  background: linear-gradient(135deg, var(--mc-bg1), var(--mc-bg2));
  flex: none;
}

.material-card__icon {
  flex: none;
  width: 69px;
  height: 69px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--mc-ink);
  transition: transform 0.18s ease;
}

.material-card__icon svg {
  width: 53px;
  height: 53px;
  display: block;
}

.material-card__link:hover .material-card__icon {
  transform: scale(1.03);
}

/* Type pill: quiet - white on the tinted header, coloured text. */
.material-card__type {
  min-width: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--mc-ink);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Level / format badge in the header's top-right corner. */
.material-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #3F4A63;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
}

.material-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 15px 18px 14px;
}

.material-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Same title height in every card of a multi-column grid (3 lines), so
   meta lines and excerpts start level; one column needs no reserve. */
@media (min-width: 621px) {
  .material-card h3 {
    min-height: calc(3 * 1.3em);
  }
}

.material-card__meta {
  margin: 0;
  color: #5B6478;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.material-card__excerpt {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.material-card__footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #EEF1F7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.material-card__views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #94A0B8;
  font-weight: 600;
}

.material-card__action {
  margin-left: auto;
  color: var(--primary);
  font-weight: 800;
  white-space: nowrap;
}

.material-card__arrow {
  display: inline-block;
  transition: transform 0.18s ease;
}

.material-card__link:hover .material-card__arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .material-card__link,
  .material-card__icon,
  .material-card__arrow {
    transition: none;
  }

  .material-card__link:hover,
  .material-card__link:hover .material-card__icon,
  .material-card__link:hover .material-card__arrow {
    transform: none;
  }
}

.featured-post p {
  color: var(--muted);
  margin: 0 0 16px;
}

.post-meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 13px;
  font-weight: 700;
}

.term-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* ---------- Article page ---------- */

.article-cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 8;
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-body {
  padding: 30px 32px;
  font-size: 18px;
  line-height: 1.85;
  /* old Word pastes glue words with non-breaking spaces: break such a run
     rather than push the page sideways on a phone (2026-10-07) */
  overflow-wrap: break-word;
}

.article-body table {
  /* Safety net for any legacy table not explicitly wrapped below --
     display:block here turned out unreliable on very wide (Excel-paste)
     tables, where the inner thead/tr/td keep their own table-layout
     sizing and spill past this box regardless. The .table-scroll wrapper
     is the real, reliable fix; this is just a fallback. */
  max-width: 100%;
  overflow-x: auto;
}

.article-body .table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin: 20px 0;
}

.article-body .table-scroll table {
  border-collapse: collapse;
  /* full width, text wraps in the cells (2026-10-07: max-content made
     tables with sentences in them scroll sideways even on a desktop);
     a table that still can't fit - many columns, long words - scrolls */
  width: 100%;
  max-width: none;
  font-size: 0.95rem;
}

.article-body .table-scroll th,
.article-body .table-scroll td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.article-body .table-scroll th {
  background: var(--primary-light);
  font-weight: 800;
  white-space: nowrap;
}

/* phones: tighter cells, headers may wrap, long Russian words get hyphens -
   a 3-4 column table then fits the screen instead of scrolling (2026-10-07) */
@media (max-width: 600px) {
  .article-body .table-scroll table {
    font-size: 0.85rem;
  }

  .article-body .table-scroll th,
  .article-body .table-scroll td {
    padding: 6px 7px;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .article-body .table-scroll th {
    white-space: normal;
  }

  /* word tables in a printable material's intro (not wrapped in .table-scroll) */
  .article-body .material-intro table {
    width: 100%;
    font-size: 0.85rem;
  }

  .article-body .material-intro th,
  .article-body .material-intro td {
    padding: 5px 6px;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

.article-body .table-scroll tr.table-group-row td {
  background: var(--primary-light);
  font-weight: 800;
}

/* song lyrics from the old site sit in <pre>: wrap long lines instead of
   pushing the page sideways on a phone (2026-10-07) */
.article-body pre {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.article-body .poem-stanza {
  font-style: italic;
  margin: 16px 0;
  padding-left: 16px;
  border-left: 3px solid var(--line);
  line-height: 1.7;
}

.article-body img,
.article-body object,
.article-body embed {
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-sm);
}

.article-body iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  max-width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
}

.article-body .video-embed {
  margin: 20px 0;
}

.article-body h2,
.article-body h3 {
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.article-body blockquote {
  border-left: 4px solid var(--primary);
  margin: 20px 0;
  padding: 12px 18px;
  background: var(--primary-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.thanks-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 32px 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.thanks-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.thanks-button:hover:not(:disabled) {
  border-color: #F472B6;
  color: #C2255C;
  transform: translateY(-1px);
}

.thanks-button:disabled {
  cursor: default;
}

.thanks-button .thanks-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.thanks-button.is-thanked {
  border-color: #F472B6;
  background: #FCE7F3;
  color: #C2255C;
}

.thanks-count {
  font-weight: 800;
  color: var(--muted);
  font-size: 14px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.related-grid a {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: block;
  padding: 14px 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.related-grid a:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  text-decoration: none;
}

/* ---------- Contact form ---------- */

.contact-form {
  display: grid;
  gap: 18px;
  max-width: 520px;
  margin-top: 20px;
}

.form-row {
  display: grid;
  gap: 6px;
}

.form-row label {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}

.form-row input,
.form-row textarea {
  font: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--bg);
  color: var(--ink);
  resize: vertical;
}

.form-row input:focus,
.form-row textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  background: var(--paper);
}

.form-error {
  color: #E11D48;
  font-size: 13px;
  font-weight: 700;
}

.form-row-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}

.form-row-checkbox input[type="checkbox"] {
  width: auto;
  margin-top: 3px;
  padding: 0;
  border: none;
  background: none;
  accent-color: var(--primary);
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form button.read-more {
  justify-self: start;
  border: 0;
  cursor: pointer;
}

.form-notice {
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-weight: 700;
  margin-top: 20px;
}

.form-notice-success {
  background: #ECFDF5;
  color: #067647;
}

/* ---------- Sidebar ---------- */

.sidebar {
  display: grid;
  gap: 18px;
}

.widget {
  padding: 20px;
}

.widget h2 {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 14px;
}

.widget-announcement {
  background: linear-gradient(135deg, #4C6EF5, #3B5BDB);
}

.widget-announcement p {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

/* seasonal banner at the top of the sidebar (2026-10-09, SeasonalPromo) */
.widget-promo {
  padding: 0;
  overflow: hidden;
  border: 2px solid #F6C7AE;
  background: #FFF8EF;
}

.promo-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.promo-art {
  display: block;
  width: 100%;
  height: auto;
}

.promo-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px 18px;
}

.promo-kicker {
  font-size: 13px;
  font-weight: 800;
  color: #C2501F;
}

.promo-title {
  font-size: 21px;
  font-weight: 900;
  line-height: 1.2;
  color: #4A2A5E;
}

.promo-text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: #5B4636;
}

.promo-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.promo-levels .level-badge {
  font-size: 12px;
}

.promo-btn {
  margin-top: 4px;
  padding: 11px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  transition: transform 0.15s ease;
}

.promo-link:hover .promo-btn,
.promo-link:focus-visible .promo-btn {
  transform: translateY(-1px);
}

/* «Филворды» banner (2026-10-10): the same card in calm blue */
.widget-promo--ws {
  border-color: #BFDDF2;
  background: #F2F8FD;
}

.widget-promo--ws .promo-kicker {
  color: #2F6FA8;
}

.widget-promo--ws .promo-title {
  color: #1F3A56;
}

.widget-promo--ws .promo-text {
  color: #4A5868;
}

.compact-list,
.category-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.compact-list li {
  margin-bottom: 12px;
  padding-left: 0;
  font-weight: 700;
  font-size: 14px;
}

.compact-list li a {
  color: var(--ink);
}

.level-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}

.level-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.level-badge:hover {
  text-decoration: none;
  opacity: 0.9;
}

.level-badge-a1 { background: #12B76A; }
.level-badge-a2 { background: #0BA5EC; }
.level-badge-b1 { background: #F79009; }
.level-badge-b2 { background: #F04438; }
.level-badge-c1 { background: #7A5AF8; }

.level-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.level-list li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.level-list li span {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.compact-list-views {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.compact-list li a:hover {
  color: var(--primary-dark);
}

.category-list li {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 14px;
}

.category-list li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.category-list a {
  color: var(--ink);
}

.category-list a:hover {
  color: var(--primary-dark);
}

.category-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.empty-state {
  color: var(--muted);
}

/* ---------- Ad slots ---------- */

.widget-ad {
  padding: 14px;
}

.ad-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: center;
}

.widget-ad [id^="yandex_rtb_"] {
  min-height: 250px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--footer-bg);
  color: #A7ADC7;
  margin-top: 12px;
  padding: 48px 0 52px;
}

.site-footer .brand-text strong {
  color: #fff;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.footer-tagline {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #A7ADC7;
}

.footer-copy-note {
  margin-top: 8px;
  font-size: 13px;
}

.footer-copy-note a {
  color: #C9CEE4;
  text-decoration: underline;
}

.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-legal a {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.footer-legal a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.footer-col h2 {
  margin: 4px 0 6px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.footer-col .footer-subhead {
  margin-top: 22px;
}

.footer-col a {
  color: #D5D9EA;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.footer-col a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-levels a {
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.footer-levels a:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

/* ---------- Cookie banner ---------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--footer-bg);
  color: #E6E9F2;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
}

.cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
}

.cookie-banner-inner p {
  margin: 0;
  font-size: 13px;
  max-width: 720px;
}

.cookie-banner-inner a {
  color: #fff;
  text-decoration: underline;
}

.cookie-banner-inner button {
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 9px 20px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.cookie-banner-inner button:hover {
  background: var(--primary-dark);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .site-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .featured-post {
    grid-template-columns: 1fr;
  }

  .featured-post-media {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 900px) {
  .header-search {
    display: none;
  }

  .nav-search {
    display: flex;
    width: 100%;
    margin: 0 0 8px;
  }

  .section-grid,
  .material-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .didactic-picks {
    display: none;
  }

  .widget-categories {
    display: none;
  }

  .widget-ad {
    display: none;
  }
}

@media (max-width: 620px) {
  .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .brand-text strong {
    font-size: 19px;
  }

  .brand-icon {
    width: 36px;
    height: 36px;
  }

  .site-search {
    width: 100%;
  }

  .home-hero {
    padding: 28px 22px;
  }

  .home-hero h1 {
    font-size: 27px;
  }

  .interactive-banner {
    flex-direction: column;
    text-align: center;
    padding: 22px;
  }

  .article-body {
    padding: 22px 20px;
    font-size: 17px;
  }

  .thanks-widget {
    margin: 0 20px 22px;
  }

  .section-grid,
  .related-grid,
  .material-grid {
    grid-template-columns: 1fr;
  }
}

/* Advcake banner in the article header: desktop only, never on paper. */
.article-ad {
  margin-top: 16px;
}

.article-ad-label {
  margin: 4px 0 0;
  font-size: 0.72rem;
  line-height: 1.3;
  color: #7a8194;
}

.article-ad:has(> div:empty) {
  display: none;
}

@media (max-width: 900px) {
  .article-ad {
    display: none !important;
  }
}

@media print {
  .article-ad {
    display: none !important;
  }
}

/* Collapsible answers / FAQ inside articles (<details><summary>). */
.article-body details {
  margin: 6px 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
}

.article-body details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--primary);
}

.article-body details[open] summary {
  margin-bottom: 6px;
}

/* Printable materials: the sheet has its own title, so drop the article
   header and page paddings on paper - they pushed one-page sheets
   (e.g. flashkarty-colors) onto a second, near-empty page. */
@media print {
  body:has(.print-material) .article-header {
    display: none !important;
  }

  body:has(.print-material) #content.site-layout,
  body:has(.print-material) .site-main,
  body:has(.print-material) .article,
  body:has(.print-material) .article-body {
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ---------- "Оцените сайт" popup (feedback-widget.js) ---------- */

.feedback-popup {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 110;
  width: 320px;
  max-width: calc(100vw - 40px);
  padding: 22px 22px 20px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: 0 2px 10px rgba(28, 39, 76, 0.22);
  color: var(--ink);
}

.feedback-popup[hidden],
.feedback-popup [hidden] {
  display: none;
}

.feedback-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.feedback-close:hover {
  background: var(--bg);
  color: var(--ink);
}

.feedback-title {
  display: block;
  margin: 0 24px 14px 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

.feedback-step[data-step="done"] .feedback-title {
  margin-bottom: 0;
}

.feedback-votes {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.feedback-vote {
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg);
  font-size: 48px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.feedback-vote:hover:not(:disabled) {
  background: var(--primary-light);
  transform: scale(1.08);
}

.feedback-vote:disabled {
  opacity: 0.6;
  cursor: default;
}

.feedback-popup textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 15px;
  resize: vertical;
}

.feedback-popup textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 0;
  border-color: transparent;
}

.feedback-error {
  margin: 10px 0 0;
  color: #D92D20;
  font-size: 14px;
  line-height: 1.4;
}

.feedback-submit {
  margin-top: 12px;
  padding: 9px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.feedback-submit:hover:not(:disabled) {
  background: var(--primary-dark);
}

.feedback-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.footer-feedback-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.footer-feedback-link:hover {
  color: #fff;
  text-decoration: underline;
}

@media print {
  .feedback-popup {
    display: none !important;
  }
}

/* ---------- Image printables: preview -> lightbox -> PDF download
   (public/assets/preview-download.js, 2026-10-01) ---------- */
.article-body .pd-thumb {
  position: relative;
  display: block;
  cursor: zoom-in;
}

.article-body .pd-badge {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  max-width: calc(100% - 16px);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(26, 31, 54, 0.82);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: background 0.15s ease;
}

.article-body .pd-thumb:hover .pd-badge,
.article-body .pd-thumb:focus-visible .pd-badge {
  background: var(--primary);
}

.article-body .pd-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: -8px 0 28px;
}

.article-body .pd-cta-note {
  flex: 1 1 260px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

html.pd-open {
  overflow: hidden;
}

.pd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 18, 36, 0.78);
}

.pd-lightbox[hidden] {
  display: none;
}

.pd-lightbox-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1000px, 100%);
  max-height: 100%;
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.pd-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex: 1 1 auto;
  background: var(--bg);
}

.pd-stage img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 230px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.pd-panel {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line);
}

.pd-caption {
  margin: 0 0 4px;
  font-weight: 800;
}

.pd-caption:empty {
  display: none;
}

.pd-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.pd-lightbox .print-button,
.pd-toast .print-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 22px;
  background: linear-gradient(135deg, #F25C54, #FF9F43);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(242, 92, 84, 0.3);
}

.pd-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.pd-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.pd-nav[hidden] {
  display: none;
}

.pd-prev { left: 10px; }
.pd-next { right: 10px; }

.pd-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 1001;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  width: min(620px, calc(100% - 24px));
  padding: 14px 44px 14px 18px;
  border-radius: var(--radius-md);
  background: var(--footer-bg);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.pd-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.pd-toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 600px) {
  .pd-stage img {
    max-height: calc(100vh - 260px);
  }

  .pd-panel .print-button {
    width: 100%;
    justify-content: center;
  }
}

/* Trainer page: description collapsed under the trainer (ops/trainer-page-top.php). */
.article-body details.lep-about {
  margin: 24px 0 8px;
  padding: 0;
  border-radius: var(--radius-md);
  background: var(--primary-light);
  border: 1px solid var(--line);
}

.article-body details.lep-about > summary {
  padding: 14px 18px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--primary-dark);
  list-style-position: inside;
}

.article-body details.lep-about[open] > summary {
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}

.article-body details.lep-about > :not(summary) {
  margin-left: 18px;
  margin-right: 18px;
}

.article-body details.lep-about > :last-child {
  margin-bottom: 18px;
}

/* "Нашли ошибку в вопросе?" in the trainer and tests (public/assets/le-report.js) */
.le-report-link {
  display: block;
  margin: 14px 0 0 auto;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.le-report-link:hover,
.le-report-link:focus-visible {
  color: var(--primary-dark);
}

.le-report-link[hidden] {
  display: none;
}

.le-report-box {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FFFBF2;
}

.le-report-title {
  margin: 0 0 8px;
  font-weight: 800;
}

.le-report-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
  resize: vertical;
}

.le-report-text:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.le-report-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.le-report-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.le-report-send,
.le-report-cancel {
  padding: 9px 18px;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
}

.le-report-send {
  border: none;
  background: var(--primary);
  color: #fff;
}

.le-report-send:disabled {
  opacity: 0.6;
  cursor: default;
}

.le-report-cancel {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.le-report-status {
  margin: 8px 0 0;
  color: #B42318;
  font-size: 0.88rem;
}

.le-report-status:empty {
  display: none;
}

.le-report-done {
  margin: 0;
  color: var(--success);
  font-weight: 800;
}

.le-test-next {
  margin-top: 14px;
  padding: 11px 22px;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.le-test-next[hidden] {
  display: none;
}

/* ---------- Header as a card like the other blocks, search with the
   magnifier inside the field (2026-10-01) ---------- */
.site-header {
  background: transparent;
  box-shadow: none;
  padding-top: 16px;
}

.site-header .header-top {
  padding: 0;
}

.site-header .header-inner {
  padding: 14px 16px 14px 22px;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.site-search {
  position: relative;
  align-items: center;
  overflow: visible;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.site-search:focus-within {
  border-color: #A9BEFA;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.14);
}

.site-search input {
  padding: 12px 18px 12px 48px;
}

.site-search input::placeholder {
  color: #8A93AD;
}

.site-search button {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.site-search button:hover,
.site-search button:focus-visible {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.site-search button svg {
  width: 19px;
  height: 19px;
}

@media (max-width: 900px) {
  .site-header {
    padding: 10px 0 0;
    /* sticky on phones: a soft veil so content scrolling past the gap above
       the card doesn't show through sharply */
    background: linear-gradient(to bottom, rgba(245, 247, 252, 0.92) 70%, rgba(245, 247, 252, 0));
  }

  .site-header .header-inner {
    padding: 10px 10px 10px 16px;
  }

  .nav-list.is-open {
    margin-top: 8px;
    padding: 10px 14px;
    border-top: 0;
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow);
  }
}

/* ---------- Owner's 3D icons: sidebar categories and homepage topics ---------- */
.category-list li {
  align-items: center;
}

.category-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.category-list .category-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  object-fit: contain;
  transition: transform 0.15s ease;
}

.category-list a:hover .category-icon {
  transform: scale(1.12) rotate(-4deg);
}

.category-list .category-name {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.topic-card-icon.topic-card-icon-img {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: none;
  filter: drop-shadow(0 6px 10px rgba(28, 39, 76, 0.12));
  transition: transform 0.2s ease;
}

.topic-card-icon-img img {
  display: block;
  width: 96px;
  height: 96px;
}

.topic-card:hover .topic-card-icon-img {
  transform: scale(1.06) rotate(-2deg);
}

/* Topic cards: background matches each icon tile (ops/image-materials/topic-card-colors.js) */
.topic-card[data-topic="animals"] { --tc-bg: #DDF0FB; }
.topic-card[data-topic="family"] { --tc-bg: #FDE3EC; }
.topic-card[data-topic="alphabet"] { --tc-bg: #FFF3CC; }
.topic-card[data-topic="numbers"] { --tc-bg: #EFE4FB; }
.topic-card[data-topic="food"] { --tc-bg: #DDF5E6; }
.topic-card[data-topic="my-house"] { --tc-bg: #E0F1FB; }
.topic-card[data-topic="my-day"] { --tc-bg: #DCE8FB; }
.topic-card[data-topic="colors"] { --tc-bg: #FDE1E6; }
.topic-card[data-topic="school-objects"] { --tc-bg: #EDE3FA; }
.topic-card[data-topic="tenses"] { --tc-bg: #FFF4D1; }
.topic-card[data-topic="toys"] { --tc-bg: #DDEFFC; }
.topic-card[data-topic="irregular-verbs"] { --tc-bg: #D9F5EA; }
.topic-card[data-topic="clothes"] { --tc-bg: #FDE3EC; }
.topic-card[data-topic="weather-seasons"] { --tc-bg: #DFF0FA; }
.topic-card[data-topic="transport"] { --tc-bg: #DCEFFB; }
.topic-card[data-topic="present-simple"] { --tc-bg: #DCF5EC; }
.topic-card[data-topic="osen"] { --tc-bg: #FFEBCF; }

/* ---------- Article top line: breadcrumb left; level, categories/tags and
   views (eye) in the top-right corner instead of separate rows (2026-10-01) ---------- */
.article-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 10px;
}

.article-topline .breadcrumb {
  margin: 0;
  padding-top: 4px;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  transition: background 0.15s ease, color 0.15s ease;
}

.meta-chip-tag {
  background: #F1F3F8;
  color: var(--muted);
}

.meta-chip:hover {
  background: var(--primary);
  color: #fff;
  text-decoration: none;
}

.meta-views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.meta-views svg {
  flex-shrink: 0;
}

@media (max-width: 620px) {
  .article-meta {
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* Sidebar "Популярное" / "Свежие записи": dividers like in "Рубрики" (2026-10-01) */
.compact-list li {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.compact-list li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Art inside print sheets (lesson packs): download button under the image */
.article-body .pd-sheet-cta {
  margin: 16px 0 0;
}

@media print {
  .pd-badge,
  .pd-cta {
    display: none !important;
  }
}

/* ---------- Rubric hero (category / tag / level pages, 2026-10-01) ----------
   One light card instead of breadcrumb + H1 + long paragraph + a separate
   blue sidebar plaque: icon, count, H1, short lead, feature pills. Accent colour per
   slug (6 palettes, same tones as the material cards). */
.taxonomy-hero {
  --th-bg1: #EEF2FF;
  --th-bg2: #E0E7FF;
  --th-ink: #4C6EF5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin: 0;
  padding: 24px 30px;
  border-radius: 30px;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--th-bg1) 0%, rgba(255, 255, 255, 0) 55%),
    var(--paper);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.taxonomy-hero--p1 { --th-bg1: #FFF4E6; --th-bg2: #FFE8CC; --th-ink: #E8590C; }
.taxonomy-hero--p2 { --th-bg1: #E6FCF5; --th-bg2: #C3FAE8; --th-ink: #0CA678; }
.taxonomy-hero--p3 { --th-bg1: #F8F0FC; --th-bg2: #F3D9FA; --th-ink: #AE3EC9; }
.taxonomy-hero--p4 { --th-bg1: #E3FAFC; --th-bg2: #C5F6FA; --th-ink: #1098AD; }
.taxonomy-hero--p5 { --th-bg1: #FFF9DB; --th-bg2: #FFEC99; --th-ink: #E67700; }

.taxonomy-hero__main {
  min-width: 0;
}

.taxonomy-hero__crumbs {
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 600;
}

.taxonomy-hero__heading-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.taxonomy-hero__icon {
  flex: none;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--th-bg1), var(--th-bg2));
  color: var(--th-ink);
}

.taxonomy-hero__icon img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  display: block;
}

.taxonomy-hero__icon svg {
  width: 60px;
  height: 60px;
  display: block;
}

.taxonomy-hero__level {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.taxonomy-hero__titles {
  min-width: 0;
}

.taxonomy-hero__eyebrow {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--th-bg1);
  color: var(--th-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.taxonomy-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.taxonomy-hero__lead {
  max-width: 62ch;
  margin: 12px 0 0;
  color: #475569;
  font-size: 15.5px;
  line-height: 1.55;
}

.taxonomy-hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.taxonomy-hero__features li {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #F8FAFD;
  color: #3F4A63;
  font-size: 13px;
  font-weight: 700;
}

.taxonomy-hero__more {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

.taxonomy-hero__more summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 700;
  width: max-content;
}

.taxonomy-hero__more p {
  max-width: 70ch;
  margin: 8px 0 0;
  line-height: 1.55;
}

.taxonomy-note {
  margin: 4px 24px 20px;
  color: var(--muted);
  font-size: 12.5px;
}

@media (max-width: 900px) {
  .taxonomy-hero {
    padding: 24px;
  }

  .taxonomy-hero h1 {
    font-size: 27px;
  }

  .taxonomy-hero__icon {
    width: 76px;
    height: 76px;
  }

  .taxonomy-hero__icon img {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 680px) {
  .taxonomy-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 20px 18px;
    border-radius: 24px;
  }

  .taxonomy-hero__heading-row {
    gap: 14px;
  }

  .taxonomy-hero__icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
  }

  .taxonomy-hero__icon img {
    width: 52px;
    height: 52px;
  }

  .taxonomy-hero__icon svg {
    width: 44px;
    height: 44px;
  }

  .taxonomy-hero__level {
    font-size: 22px;
  }

  .taxonomy-hero h1 {
    font-size: 23px;
  }

  .taxonomy-hero__lead {
    margin-top: 14px;
    font-size: 15px;
  }
}

/* ---------- Illustrated type icons and level pills (2026-10-02) ----------
   Owner's icon sheets cut by ops/image-materials/card-icons.js: type-<kind>
   icons in the material cards, level-<key> icons in every level badge
   (cards, article topline, sidebar). The pill colours come from the same
   sheet; the level stays real text. */
.material-card__icon.has-image {
  background: rgba(255, 255, 255, 0.82);
}

.material-card__icon img {
  width: 58px;
  height: 58px;
  display: block;
  object-fit: contain;
}

.level-badge {
  gap: 5px;
  padding: 3px 10px 3px 6px;
  border: 1px solid var(--lvl-line, #C9D7F7);
  background: var(--lvl-bg, #E6EEFD);
  color: #13224A;
  font-weight: 800;
}

.level-badge::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--lvl-icon) center / contain no-repeat;
}

.level-badge-a1 { --lvl-bg: #E6EEFD; --lvl-line: #C6D5F6; --lvl-icon: url("/uploads/icons/level-a1.webp"); background: var(--lvl-bg); }
.level-badge-a1-a2 { --lvl-bg: #FFEEDB; --lvl-line: #F4D2AA; --lvl-icon: url("/uploads/icons/level-a1-a2.webp"); background: var(--lvl-bg); }
.level-badge-a2 { --lvl-bg: #FDF6CF; --lvl-line: #EBDB8A; --lvl-icon: url("/uploads/icons/level-a2.webp"); background: var(--lvl-bg); }
.level-badge-b1 { --lvl-bg: #E2FCEF; --lvl-line: #B1E8CD; --lvl-icon: url("/uploads/icons/level-b1.webp"); background: var(--lvl-bg); }
.level-badge-b1-b2 { --lvl-bg: #F0E8FD; --lvl-line: #D3C2F4; --lvl-icon: url("/uploads/icons/level-b1-b2.webp"); background: var(--lvl-bg); }
.level-badge-b2 { --lvl-bg: #FDE0F2; --lvl-line: #F1B7DA; --lvl-icon: url("/uploads/icons/level-b2.webp"); background: var(--lvl-bg); }
.level-badge-c1 { --lvl-bg: #DFFBFC; --lvl-line: #A8E4E8; --lvl-icon: url("/uploads/icons/level-c1.webp"); background: var(--lvl-bg); }

/* the small corner badge on the cards */
.material-card__badge.level-badge {
  padding: 2px 8px 2px 4px;
  font-size: 11px;
  line-height: 1.4;
}

.material-card__badge.level-badge::before {
  width: 16px;
  height: 16px;
}

/* ---------- Shop: checkout / order / my purchases (2026-10-06) ---------- */
.shop-product {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 18px 24px;
  align-items: center;
  margin: 0 0 22px;
}

.shop-product-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.shop-product-title {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 1.15rem;
}

.shop-product-summary {
  margin: 0 0 10px;
  color: var(--muted);
}

.shop-price {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--ink);
}

.shop-page .print-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 13px 24px;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
  color: #fff;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.shop-page .print-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.shop-form .shop-pay-button {
  justify-self: start;
  font-size: 1.05rem;
}

.shop-note {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.form-notice-error {
  background: #FFF1F2;
  color: #BE123C;
}

.shop-keep {
  margin: 22px 0;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--primary-light);
}

.shop-keep p {
  margin: 0 0 8px;
}

/* the buyer's account on the order page (2026-10-09) */
.shop-cabinet {
  margin: 22px 0;
  padding: 18px 20px;
  border: 2px solid #F6C7AE;
  border-radius: var(--radius-md);
  background: #FFF8EF;
}

.shop-cabinet p {
  margin: 0 0 10px;
  line-height: 1.55;
}

.shop-cabinet .shop-cabinet-title {
  font-size: 1.15rem;
  font-weight: 900;
}

.shop-cabinet-btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.shop-cabinet-btn:hover,
.shop-cabinet-btn:focus-visible {
  color: #fff;
}

.shop-link input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.9rem;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.shop-orders {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.shop-orders li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 640px) {
  .shop-product {
    grid-template-columns: minmax(0, 1fr);
  }

  .shop-form .shop-pay-button {
    justify-self: stretch;
    justify-content: center;
  }
}

.shop-page .form-notice {
  background: #FFF7ED;
}

.shop-page .form-notice.form-notice-error {
  background: #FFF1F2;
}

/* ---------- Line icons instead of emoji on buttons (2026-10-06) ----------
   src/Support/UiIcon.php + public/assets/ui-icons.js (Lucide, ISC).
   Stroke = currentColor, size follows the text. */
.ui-icon {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
}

.print-button .ui-icon,
.pd-badge .ui-icon,
.locked-sheet-badge .ui-icon {
  width: 1.1em;
  height: 1.1em;
}

.pd-badge .ui-icon,
.locked-sheet-badge .ui-icon {
  margin-right: 4px;
}

.feedback-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.feedback-vote .ui-icon {
  width: 38px;
  height: 38px;
  stroke-width: 1.75;
}

.feedback-vote[data-vote="up"]:hover:not(:disabled) {
  color: var(--success);
}

.feedback-vote[data-vote="down"]:hover:not(:disabled) {
  color: #E11D48;
}

.post-meta .ui-icon {
  color: #F25C54;
}

.interactive-banner-emoji .ui-icon {
  display: block;
  width: 44px;
  height: 44px;
  stroke-width: 1.6;
}

/* ---------- Big banner rotation: Halloween quest + trainer (2026-10-06) ---------- */
.hb-rotator {
  margin-bottom: 18px;
}

.hb-rotator .home-banner {
  margin-bottom: 0;
}

.hb-rotator.is-rotating {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hb-rotator.is-rotating .hb-slide {
  grid-row: 1;
  grid-column: 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.hb-rotator.is-rotating .hb-slide.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.hb-rotator.is-rotating .hb-dots {
  grid-row: 2;
  grid-column: 1;
}

.hb-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.hb-dot {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: var(--line);
  cursor: pointer;
  transition: width 0.2s, background 0.2s;
}

.hb-dot.is-active {
  width: 24px;
  background: #F25C54;
}

.hb-quest {
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 176, 32, 0.28) 0, rgba(255, 176, 32, 0) 36%),
    radial-gradient(circle at 70% 105%, rgba(255, 122, 89, 0.22) 0, rgba(255, 122, 89, 0) 45%),
    linear-gradient(120deg, #FFF6EE 0%, #FFFFFF 48%, #FFF1E6 100%);
}

.hb-quest .hb-title-accent {
  color: #E8541F;
}

.hb-q-pack {
  z-index: 1;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(120, 60, 30, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
  .hb-q-pack { animation-name: hb-rise-in; animation-delay: 0.1s; }
}

/* VK link in the footer (2026-10-06) */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #C9CEE4;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.footer-social svg {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 9px;
  flex: none;
  color: #0077FF;
  background: #fff;
  border-radius: 50%;
}

.footer-social:hover {
  color: #fff;
}

.footer-social:hover svg {
  color: #0066DD;
}

/* «Свежие материалы»: 5 random tags x 3 newest (2026-10-06) */
.fresh-group + .fresh-group {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}

.fresh-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.fresh-group-head h3 {
  margin: 0;
  font-size: 1.15rem;
}

.fresh-group-head h3 a {
  color: var(--ink);
  text-decoration: none;
}

.fresh-group-head h3 a:hover {
  color: var(--primary-dark);
}

.fresh-group-all {
  flex: none;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

@media (min-width: 621px) and (max-width: 900px) {
  /* two columns here would leave the third card alone in a row */
  .fresh-group .material-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Sidebar «Все теги» (2026-10-06) */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-cloud a {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.tag-cloud a:hover {
  background: var(--primary);
  color: #fff;
}

.tag-cloud a span {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.65;
}

/* ---------- Personal account (2026-10-07) ----------
   templates/account/*.twig; buttons reuse .shop-page .print-button */
.header-account {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.header-account:hover,
.header-account:focus-visible {
  border-color: #A9BEFA;
  background: var(--primary-light);
  color: var(--primary-dark);
}

.header-account.is-signed-in {
  color: var(--primary-dark);
}

.account-form {
  max-width: 520px;
}

.account-form input[readonly] {
  background: var(--bg);
  color: var(--muted);
}

.account-code-input {
  max-width: 220px;
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  text-align: center;
}

.form-hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.88rem;
}

.form-optional {
  color: var(--muted);
  font-weight: 400;
}

.account-hello {
  margin: 6px 0 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.account-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 700;
  text-decoration: none;
}

.account-section {
  padding: 20px 0 8px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}

.account-section:first-of-type {
  border-top: 0;
}

.account-section h2 {
  margin-top: 0;
}

.account-level {
  font-size: 1.1rem;
}

.account-level-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 6px;
  max-width: 420px;
  margin: 0 0 14px;
}

.account-level-seg {
  padding: 5px 0;
  border-radius: 999px;
  background: #E6E9F2;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
}

.account-level-seg.is-current {
  background: #C7D2FE;
  color: var(--primary-dark);
}

.account-level-seg.is-done {
  background: #12B76A;
  color: #fff;
}

.account-level-seg.is-assumed {
  background: #D1FADF;
  color: #067647;
}

.account-topics {
  width: 100%;
  max-width: 520px;
  margin: 0 0 12px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.account-topics th,
.account-topics td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}

.account-topics th:first-child,
.account-topics td:first-child {
  text-align: left;
}

.account-orders a:not(.print-button) {
  color: inherit;
}

.account-danger {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.account-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary-dark);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.account-danger summary {
  color: var(--muted);
  cursor: pointer;
}

.account-confirm {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 10px;
}

.account-delete-button {
  padding: 10px 18px;
  border: 1px solid #F04438;
  border-radius: 999px;
  background: #fff;
  color: #B42318;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 900px) {
  .header-account {
    margin-left: auto;
    padding: 9px;
  }

  .header-account span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .shop-orders li {
    flex-wrap: wrap;
  }
}

/* account buttons (owner 2026-10-07): as wide as the text, label centred;
   the form grid would otherwise stretch them to the full form width */
.account-form .account-button,
.account-page .account-button {
  justify-self: start;
  justify-content: center;
  min-width: 200px;
  text-align: center;
}

.account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
}

.account-head form {
  margin: 0;
}

.account-danger summary {
  display: inline;
  list-style: none;
  text-decoration: underline;
}

.account-danger summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 640px) {
  .account-form .account-button,
  .account-page .account-button {
    justify-self: stretch;
    width: 100%;
  }
}

/* ---------- Paid materials (2026-10-07): /platnye-materialy, price on cards,
   rubric entry, phone-menu link, coral slide in the hero carousel ---------- */
.interactive-banner-coral {
  background: linear-gradient(135deg, #FF7A59, #F25C54);
}

.material-card__price {
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.shop-hero-icon .ui-icon {
  width: 46px;
  height: 46px;
}

.category-icon-paid {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
  color: #fff;
}

.category-icon-paid .ui-icon {
  width: 18px;
  height: 18px;
}

.category-paid .category-name {
  font-weight: 800;
}

@media (min-width: 901px) {
  .nav-mobile-only {
    display: none !important;
  }
}

/* note under a Russian-language original (ops/add-official-originals.php, 2026-10-07) */
.le-video-note {
  margin: 8px 0 18px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: #FFF7ED;
  color: #7C2D12;
  font-size: 0.92rem;
}

.le-cartoon-words {
  columns: 2;
  column-gap: 24px;
}

@media (max-width: 480px) {
  .le-cartoon-words {
    columns: 1;
  }
}

/* ---------- Personal account redesign (2026-10-07, mockup from the owner) ----------
   templates/account/cabinet.twig; art in /uploads/account/ */
.cab {
  --cab-navy: #082253;
  --cab-blue: #4E73FF;
  --cab-pale: #F3F7FF;
  --cab-pale-2: #EEF3FF;
  --cab-line: #E3E9F6;
  --cab-muted: #5E6B8A;
  --cab-yellow: #FFC543;
  --cab-green: #2FC58D;
  color: var(--cab-navy);
}

.cab-title {
  margin: 6px 0 18px;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  color: var(--cab-navy);
}

/* small yellow rays after a heading */
.cab-rays {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 26px;
}

.cab-rays::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 18px;
  height: 14px;
  background:
    linear-gradient(var(--cab-yellow), var(--cab-yellow)) 2px 0 / 4px 10px no-repeat,
    linear-gradient(var(--cab-yellow), var(--cab-yellow)) 10px 6px / 9px 4px no-repeat;
  transform: rotate(-20deg);
  border-radius: 2px;
}

.cab-card {
  position: relative;
  margin: 0 0 20px;
  padding: 22px 24px;
  border: 1px solid var(--cab-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(30, 60, 140, 0.06);
  scroll-margin-top: 90px;
}

.cab-muted {
  margin: 0 0 10px;
  color: var(--cab-muted);
  line-height: 1.6;
}

.cab-small {
  font-size: 0.88rem;
}

.cab-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cab-blue);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.cab-hello {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.cab-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

.cab-hello-name {
  margin: 0 0 2px;
  font-size: 1.15rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.cab-hello-email {
  margin: 0 0 6px;
  color: var(--cab-muted);
  overflow-wrap: anywhere;
}

.cab-hello .cab-muted {
  margin: 0;
}

.cab-logout {
  align-self: start;
  margin: 0;
}

.cab-notice {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 16px;
  font-weight: 700;
}

.cab-notice-ok {
  background: #E8FAF2;
  color: #0F6B4A;
}

.cab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}

.cab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--cab-pale-2);
  color: var(--cab-blue);
  font-weight: 800;
  text-decoration: none;
}

.cab-pill.is-active,
.cab-pill:hover {
  background: var(--cab-blue);
  color: #fff;
}

.cab-h2 {
  margin: 0 0 16px;
  font-size: 1.45rem;
  color: var(--cab-navy);
}

.cab-h2-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--cab-pale-2);
  color: var(--cab-blue);
}

.cab-h2-icon--books {
  background: #FFF4D6;
  color: #E08A00;
}

.cab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 220px;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
  box-shadow: 0 10px 22px rgba(242, 92, 84, 0.28);
  color: #fff;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.cab-btn:hover {
  filter: brightness(1.04);
  color: #fff;
}

.cab-btn--small {
  min-width: 0;
  padding: 10px 18px;
  box-shadow: none;
}

.cab-empty {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--cab-pale);
}

.cab-empty-title {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 800;
}

.cab-orders {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.cab-orders li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--cab-pale);
}

.cab-orders li + li {
  margin-top: 10px;
}

.cab-order-title {
  margin: 0 0 4px;
  font-weight: 800;
}

.cab-order-title a {
  color: inherit;
}

.cab-orders .cab-muted {
  margin: 0;
}

.cab-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.cab-level {
  min-width: 70px;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--cab-pale-2);
  color: var(--cab-muted);
  font-weight: 800;
  text-align: center;
}

.cab-level.is-done {
  color: #0F6B4A;
}

.cab-level.is-active {
  background: var(--cab-blue);
  color: #fff;
}

.cab-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.cab-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--cab-line);
  border-radius: 18px;
}

.cab-stat small {
  display: block;
  color: var(--cab-muted);
  font-size: 0.85rem;
}

.cab-stat b {
  font-size: 1.5rem;
}

.cab-stat em {
  font-size: 1rem;
  font-style: normal;
}

.cab-stat-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cab-pale-2);
  color: var(--cab-blue);
}

.cab-stat-icon--green {
  background: #E3F8EF;
  color: var(--cab-green);
}

.cab-stat-icon--yellow {
  background: #FFF4D6;
  color: #E08A00;
}

.cab-table-wrap {
  overflow-x: auto;
  margin: 0 0 18px;
  border: 1px solid var(--cab-line);
  border-radius: 16px;
}

.cab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.cab-table th {
  background: var(--cab-pale);
  font-weight: 800;
}

.cab-table th,
.cab-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--cab-line);
  text-align: right;
}

.cab-table tr:last-child td {
  border-bottom: 0;
}

.cab-table th:first-child,
.cab-table td:first-child {
  text-align: left;
}

.cab-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cab-updated {
  display: flex;
  gap: 8px;
  max-width: 300px;
  margin: 0;
}

.cab-profile {
  overflow: hidden;
}

.cab-profile-decor {
  position: absolute;
  right: 22px;
  top: 30px;
  width: 92px;
  height: auto;
  pointer-events: none;
}

.cab-form {
  display: grid;
  gap: 16px;
  max-width: calc(100% - 120px);
}

.cab-field {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.cab-field label {
  padding-top: 12px;
  font-weight: 800;
}

.cab-field input,
.cab-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #CFDAF5;
  border-radius: 12px;
  background: #fff;
  color: var(--cab-navy);
  font: inherit;
}

.cab-field input:focus,
.cab-field textarea:focus {
  outline: 2px solid var(--cab-blue);
  outline-offset: 1px;
}

.cab-field input[readonly] {
  background: var(--cab-pale);
  color: var(--cab-muted);
}

.cab-hint {
  display: block;
  margin-top: 6px;
  color: var(--cab-muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.cab-form .cab-btn {
  justify-self: start;
}

.cab-delete {
  margin: 0 0 8px;
  padding: 14px 20px;
  border: 1px solid #FBD5D2;
  border-radius: 16px;
  background: #FFF7F6;
}

.cab-delete summary {
  display: inline;
  list-style: none;
  color: #C0362C;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.cab-delete summary::-webkit-details-marker {
  display: none;
}

.cab-delete p {
  color: var(--cab-muted);
}

@media (max-width: 760px) {
  .cab-card {
    padding: 18px 16px;
  }

  .cab-hello {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .cab-avatar {
    width: 72px;
    height: 72px;
  }

  .cab-logout {
    grid-column: 1 / -1;
  }

  .cab-empty {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .cab-empty img {
    width: 140px;
    height: auto;
  }

  .cab-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .cab-profile-decor {
    display: none;
  }

  .cab-form {
    max-width: none;
  }

  .cab-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .cab-field label {
    padding-top: 0;
  }

  .cab-btn,
  .cab-form .cab-btn {
    justify-self: stretch;
    width: 100%;
  }

  .cab-btn--small {
    width: auto;
  }
}

/* cabinet: own padding (no .article-header/.article-body inside), pills in one row on phones */
.article.cab {
  padding: 22px 28px 26px;
}

@media (max-width: 760px) {
  .article.cab {
    padding: 16px 14px 18px;
  }

  .cab-nav {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .cab-pill {
    flex: 1 1 0;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 10px 6px;
    font-size: 0.9rem;
  }

  .cab-pill .ui-icon {
    width: 1em;
    height: 1em;
  }

  .cab-levels {
    gap: 6px;
  }

  .cab-level {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 4px;
  }
}

@media (max-width: 760px) {
  .cab-table {
    font-size: 0.88rem;
  }

  .cab-table th,
  .cab-table td {
    padding: 9px 8px;
  }
}

/* sign-in pages in the cabinet style (2026-10-07, mockup from the owner) */
.cab-login-hero {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin: 0 0 26px;
  padding: 22px 26px;
  border-radius: 22px;
  background: radial-gradient(circle at 28% 40%, #E7EEFF 0, #E7EEFF 30%, transparent 31%), var(--cab-pale);
}

.cab-login-hero img {
  width: 100%;
  height: auto;
}

.cab-login-h2 {
  margin: 0 0 10px;
  font-size: 1.4rem;
  color: var(--cab-navy);
}

.cab-login-form {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0 4px;
}

.cab-label {
  font-weight: 800;
}

.cab-input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #CFDAF5;
  border-radius: 14px;
  background: var(--cab-pale);
  color: var(--cab-navy);
  font: inherit;
}

.cab-input:focus {
  outline: 2px solid var(--cab-blue);
  outline-offset: 1px;
  background: #fff;
}

.cab-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 6px;
  line-height: 1.55;
  cursor: pointer;
}

.cab-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--cab-blue);
}

.cab-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.cab-notice-warn {
  background: #FFF7ED;
  color: #9A3412;
}

.cab-notice-error {
  background: #FFF1F2;
  color: #B42318;
}

.cab-login-privacy {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 18px 4px 0;
  border-top: 1px solid var(--cab-line);
  color: var(--cab-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.cab-login .account-code-input {
  max-width: 240px;
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  text-align: center;
}

.cab-delete summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cab-delete summary .ui-icon {
  width: 1.1em;
  height: 1.1em;
}

@media (max-width: 760px) {
  .cab-login-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 16px;
    background: var(--cab-pale);
  }

  .cab-login-hero img {
    max-width: 320px;
    justify-self: center;
  }

  .cab-login-form .cab-btn {
    width: 100%;
  }
}

/* owner fixes 2026-10-07: rays follow the last word of the title (no stray
   rays at the edge on phones), profile decor sits on the card bottom and
   scales to its height, «Удалить кабинет» aligned and not underlined */
.cab-title {
  display: block;
  padding-right: 0;
  line-height: 1.25;
}

.cab-last {
  white-space: nowrap;
}

.cab-last::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 14px;
  margin-left: 8px;
  vertical-align: 0.9em;
  background:
    linear-gradient(var(--cab-yellow), var(--cab-yellow)) 2px 0 / 4px 10px no-repeat,
    linear-gradient(var(--cab-yellow), var(--cab-yellow)) 10px 6px / 9px 4px no-repeat;
  transform: rotate(-20deg);
}

.cab-profile-decor {
  top: auto;
  bottom: 22px;
  width: auto;
  height: calc(100% - 96px);
  max-height: 316px;
  object-fit: contain;
}

.cab-delete summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  line-height: 1.2;
  text-decoration: none;
}

.cab-delete summary span {
  text-decoration: none;
}

.cab-delete summary:hover span {
  color: #A0281F;
}

.cab-delete summary .ui-icon {
  display: block;
  width: 18px;
  height: 18px;
  vertical-align: 0;
}

.cab-last::after {
  position: relative;
  top: -0.55em;
  vertical-align: baseline;
}

/* purchased packs in the cabinet (2026-10-07): cover + title + paid chip + actions */
.cab-buys {
  display: grid;
  gap: 14px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.cab-buy {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--cab-line);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, var(--cab-pale) 100%);
}

.cab-buy.is-refunded {
  opacity: 0.7;
}

.cab-buy-cover {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: var(--cab-pale-2);
}

.cab-buy-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cab-buy-cover img.is-icon {
  width: 64%;
  height: auto;
  object-fit: contain;
}

.cab-buy-title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.35;
}

.cab-buy-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 14px;
  color: var(--cab-muted);
  font-size: 0.95rem;
}

.cab-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cab-pale-2);
  color: var(--cab-muted);
  font-size: 0.85rem;
  font-weight: 800;
}

.cab-chip .ui-icon {
  width: 15px;
  height: 15px;
}

.cab-chip--ok {
  background: #E3F8EF;
  color: #0F8A5F;
}

/* a bought file was updated after the last download (2026-10-22) */
.cab-chip--new {
  background: #FFF1E6;
  color: #C2410C;
}

.cab-buy-update {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #FFF8F1;
  color: var(--cab-navy);
  font-size: 0.95rem;
  line-height: 1.5;
}

.cab-buy-version {
  margin: -6px 0 12px;
  color: var(--cab-muted);
  font-size: 0.85rem;
}

.article-version {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.article-version .ui-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.shop-update {
  display: inline-block;
  margin: 4px 0;
  padding: 6px 12px;
  border-radius: 10px;
  background: #FFF1E6;
  color: #9A3412;
  font-weight: 700;
}

.cab-updates-note {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #FFF1E6;
  color: #9A3412;
  font-weight: 700;
}

.cab-buy-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.cab-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid #CFDAF5;
  border-radius: 999px;
  background: #fff;
  color: var(--cab-blue);
  font-weight: 800;
  text-decoration: none;
}

.cab-btn-ghost:hover {
  background: var(--cab-pale-2);
}

@media (max-width: 760px) {
  .cab-buy {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .cab-buy-actions .cab-btn,
  .cab-buy-actions .cab-btn-ghost {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* home carousels: no lift on hover (owner, 2026-10-07); horizontal swipes go to the slider script */
.hb-rotator,
.hero-carousel {
  touch-action: pan-y;
}

/* =====================================================================
   Mobile UI (owner, 2026-10-07): mobile-first header, search, catalog
   drawer, bottom tab bar, mobile home, compact material cards.
   Everything below applies at ≤900px only; the new blocks are hidden on
   wider screens, so the desktop (≥901px) is unchanged.
   Markup: layout.twig (.m-search), partials/mobile-drawer.twig,
   partials/mobile-home.twig.
   ===================================================================== */
.m-search,
.m-drawer,
.m-tabbar,
.m-home,
.m-promo {
  display: none;
}

/* seasonal banner on phones (2026-10-09, SeasonalPromo; the sidebar one is hidden ≤900px) */
@media (max-width: 900px) {
  .m-promo {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 32px);
    max-width: 868px;
    margin: 10px auto 0;
    padding: 8px 14px 8px 8px;
    border: 2px solid #F6C7AE;
    border-radius: 16px;
    background: #FFF8EF;
    color: #4A2A5E;
    text-decoration: none;
  }

  .m-promo img {
    flex: none;
    width: 104px;
    height: 64px;
    object-fit: cover;
    object-position: 0 40%;
    border-radius: 10px;
  }

  .m-promo-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .m-promo-kicker {
    font-size: 12px;
    font-weight: 800;
    color: #C2501F;
  }

  .m-promo strong {
    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
  }

  .m-promo-levels {
    font-size: 12px;
    font-weight: 700;
    color: #5B4636;
  }

  .m-promo-arrow {
    margin-left: auto;
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF7A59, #F25C54);
    color: #fff;
    font-weight: 900;
  }
}

@media (max-width: 900px) {
  :root {
    --m-navy: #082253;
    --m-blue: #4C6FFF;
    --m-muted: #71809E;
    --m-line: #E3E9F3;
    --m-bg: #F4F7FC;
    --m-yellow: #FFC64A;
    --m-shadow: 0 8px 30px rgba(31, 54, 95, 0.07);
    --m-tab: calc(66px + env(safe-area-inset-bottom, 0px));
  }

  body {
    padding-bottom: var(--m-tab);
    background-color: var(--m-bg);
  }

  /* iOS doesn't zoom into fields of 16px and more */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* ---------- header: logo + cabinet + burger, ~62px, sticky ---------- */
  .site-header {
    padding: 8px 0 0;
  }

  .site-header .header-inner {
    min-height: 58px;
    padding: 8px 8px 8px 14px;
    gap: 8px;
    border-radius: 18px;
    box-shadow: var(--m-shadow);
  }

  .site-header .brand {
    gap: 8px;
    margin-right: auto;
  }

  .site-header .brand-icon {
    width: 36px;
    height: 36px;
  }

  .site-header .brand-text strong {
    font-size: 17px;
  }

  .site-header .brand-text small {
    display: none;
  }

  .header-account {
    width: 44px;
    height: 44px;
    justify-content: center;
    margin-left: 0;
    padding: 0;
    border-radius: 50%;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    align-items: center;
  }

  /* the desktop menu is replaced by the drawer on phones */
  .primary-nav {
    display: none;
  }

  /* ---------- search under the header ---------- */
  .m-search {
    position: relative;
    display: flex;
    align-items: center;
    width: calc(100% - 32px);
    max-width: 868px;
    margin: 12px auto 0;
  }

  .m-search svg {
    position: absolute;
    left: 16px;
    color: var(--m-muted);
    pointer-events: none;
  }

  .m-search input {
    width: 100%;
    height: 50px;
    padding: 0 16px 0 46px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(31, 54, 95, 0.05);
    color: var(--m-navy);
    font: inherit;
    font-size: 16px;
  }

  .m-search input::placeholder {
    color: #8A93AD;
  }

  .m-search input:focus {
    outline: 2px solid var(--m-blue);
    outline-offset: 0;
  }

  /* ---------- layout: no sidebar in the flow ---------- */
  .site-layout {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 14px;
  }

  .sidebar {
    display: none;
  }

  /* ---------- bottom tab bar ---------- */
  .m-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: var(--m-tab);
    padding: 6px max(8px, env(safe-area-inset-left, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-right, 0px));
    border-top: 1px solid var(--m-line);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -6px 24px rgba(31, 54, 95, 0.06);
  }

  .m-tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    border-radius: 14px;
    color: var(--m-muted);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
  }

  .m-tabbar a .ui-icon {
    width: 24px;
    height: 24px;
  }

  .m-tabbar a.is-active {
    color: var(--m-blue);
  }

  .m-tabbar a.is-active .ui-icon {
    stroke-width: 2.4;
  }

  /* things pinned to the bottom sit above the tab bar */
  .cookie-banner {
    bottom: var(--m-tab);
  }

  .feedback-popup {
    bottom: calc(14px + var(--m-tab));
  }

  .la-widget .la-launcher {
    bottom: calc(var(--la-gap) + var(--la-lift) + var(--m-tab));
  }

  .la-widget .la-panel {
    bottom: calc(12px + var(--la-lift) + var(--m-tab));
    height: min(74vh, calc(100vh - 24px - var(--la-lift) - var(--m-tab)));
    height: min(74dvh, calc(100dvh - 24px - var(--la-lift) - var(--m-tab)));
  }

  .site-footer {
    padding-bottom: 12px;
  }

  /* ---------- catalog drawer ---------- */
  .m-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: block;
  }

  .m-drawer[hidden] {
    display: none;
  }

  .m-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 34, 83, 0.38);
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .m-drawer-panel {
    position: absolute;
    top: max(8px, env(safe-area-inset-top, 0px));
    left: 8px;
    right: 8px;
    max-height: calc(100% - 16px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 14px 18px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(8, 34, 83, 0.25);
    transform: translateY(-16px);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .m-drawer.is-open .m-drawer-backdrop {
    opacity: 1;
  }

  .m-drawer.is-open .m-drawer-panel {
    transform: none;
    opacity: 1;
  }

  html.m-drawer-open,
  html.m-drawer-open body {
    overflow: hidden;
  }

  .m-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px;
  }

  .m-drawer-head .brand {
    gap: 8px;
  }

  .m-drawer-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--m-bg);
    color: var(--m-navy);
    cursor: pointer;
  }

  .m-drawer-title {
    margin: 14px 4px 6px;
    color: var(--m-muted);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .m-drawer-list {
    display: grid;
    gap: 2px;
  }

  .m-drawer-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 4px 10px;
    border-radius: 14px;
    color: var(--m-navy);
    font-weight: 700;
    text-decoration: none;
  }

  .m-drawer-item.is-active {
    background: #EEF2FF;
    color: var(--m-blue);
  }

  .m-drawer-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--m-bg);
    color: var(--m-blue);
  }

  .m-drawer-icon .ui-icon {
    width: 20px;
    height: 20px;
  }

  .m-drawer-item--paid .m-drawer-icon {
    background: #FFF0EB;
    color: #F25C54;
  }

  .m-drawer-chev {
    color: #A8B3CC;
    font-size: 22px;
    line-height: 1;
  }

  .m-drawer-more {
    margin: 8px 0 0;
    border-top: 1px solid var(--m-line);
  }

  .m-drawer-more summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 10px;
    color: var(--m-navy);
    font-weight: 800;
    list-style: none;
    cursor: pointer;
  }

  .m-drawer-more summary::-webkit-details-marker {
    display: none;
  }

  .m-drawer-more summary::after {
    content: "›";
    color: #A8B3CC;
    font-size: 22px;
    transform: rotate(90deg);
    transition: transform 0.15s ease;
  }

  .m-drawer-more[open] summary::after {
    transform: rotate(-90deg);
  }

  .m-drawer-cats {
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
  }

  .m-drawer-cats a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 2px 10px;
    color: var(--m-navy);
    text-decoration: none;
  }

  .m-drawer-cats small {
    color: var(--m-muted);
  }

  .m-drawer-more .m-chips {
    padding: 0 6px 10px;
  }

  .m-drawer-note {
    margin: 14px 0 0;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #4C6FFF, #3B5BDB);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
  }

  .m-drawer-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px 0 0;
  }

  .m-drawer-foot a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border: 1px solid var(--m-line);
    border-radius: 14px;
    color: var(--m-navy);
    font-weight: 700;
    text-decoration: none;
  }

  .m-drawer-foot .ui-icon {
    width: 18px;
    height: 18px;
    color: var(--m-blue);
  }

  /* ---------- chips ---------- */
  .m-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .m-chips::-webkit-scrollbar {
    display: none;
  }

  .m-chips--wrap {
    flex-wrap: wrap;
    overflow: visible;
  }

  .m-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #DCE5FF;
    border-radius: 999px;
    background: #fff;
    color: var(--m-navy);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
  }

  .m-chip.is-active {
    border-color: var(--m-blue);
    background: var(--m-blue);
    color: #fff;
  }

  .m-chip--icon {
    padding-left: 8px;
  }

  .m-chip--icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  /* ---------- mobile home ---------- */
  .hb-rotator,
  .hb-dots,
  .didactic-picks,
  .topic-marquee-section,
  .hero-carousel,
  .featured-post {
    display: none !important;
  }

  .m-home {
    display: grid;
    gap: 22px;
    margin: 0 0 22px;
    color: var(--m-navy);
  }

  .m-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 6px;
    padding: 18px 12px 18px 18px;
    border-radius: 22px;
    background: radial-gradient(circle at 78% 42%, #E3ECFF 0, #E3ECFF 34%, transparent 35%), #EEF4FF;
    overflow: hidden;
  }

  .m-hero-title {
    margin: 0 0 6px;
    color: var(--m-navy);
    font-size: 26px;
    font-weight: 900;
    line-height: 1.15;
  }

  .m-hero-sub {
    margin: 0 0 14px;
    color: #4B5B7E;
    font-size: 15px;
    line-height: 1.45;
  }

  .m-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, #FF7A59, #F25C54);
    box-shadow: 0 8px 18px rgba(242, 92, 84, 0.28);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }

  .m-cta:hover {
    color: #fff;
  }

  .m-hero-img,
  .m-hero-img img {
    display: block;
    width: 100%;
    height: auto;
  }

  .m-quick {
    margin: -8px -16px 0;
    padding: 2px 16px 4px;
  }

  .m-section {
    display: grid;
    gap: 12px;
  }

  .m-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .m-head h2 {
    margin: 0;
    color: var(--m-navy);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.25;
  }

  .m-head a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--m-blue);
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
  }

  /* horizontal rails */
  .m-rail {
    display: flex;
    gap: 12px;
    margin: 0 -16px;
    padding: 2px 16px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .m-rail::-webkit-scrollbar {
    display: none;
  }

  .m-tile {
    --t1: #EEF2FF;
    --t2: #E0E7FF;
    display: flex;
    flex: none;
    flex-direction: column;
    width: 44vw;
    max-width: 220px;
    overflow: hidden;
    border: 1px solid var(--m-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--m-shadow);
    color: var(--m-navy);
    text-decoration: none;
    scroll-snap-align: start;
  }

  .m-tile--wide {
    width: 80vw;
    max-width: 420px;
  }

  .m-tone-2 { --t1: #FFF4E6; --t2: #FFE8CC; }
  .m-tone-3 { --t1: #E6FCF5; --t2: #C3FAE8; }
  .m-tone-4 { --t1: #F8F0FC; --t2: #F3D9FA; }
  .m-tone-5 { --t1: #E3FAFC; --t2: #C5F6FA; }
  .m-tone-6 { --t1: #FFF9DB; --t2: #FFEC99; }

  .m-tile-cover {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, var(--t1), var(--t2));
  }

  .m-tile-cover--wide {
    aspect-ratio: 16 / 10;
  }

  .m-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .m-cover-icon {
    display: grid;
    place-items: center;
    width: 46%;
    max-width: 120px;
    aspect-ratio: 1;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
  }

  .m-cover-icon img,
  .m-cover-icon svg {
    width: 78%;
    height: auto;
  }

  .m-tile-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
  }

  .m-badge {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: #EEF2FF;
    color: var(--m-blue);
    font-size: 12px;
    font-weight: 800;
  }

  .m-tile-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .m-tile-title--short {
    font-size: 15px;
    -webkit-line-clamp: 2;
  }

  .m-tile-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 13px;
  }

  .m-price {
    padding: 2px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF7A59, #F25C54);
    color: #fff;
    font-weight: 800;
  }

  .m-arrow {
    margin-left: auto;
    color: var(--m-blue);
    font-size: 18px;
    font-weight: 800;
  }

  /* popular topics */
  .m-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .m-topic {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 84px;
    padding: 10px 12px;
    border: 1px solid var(--m-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--m-shadow);
    color: var(--m-navy);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
  }

  .m-topic img,
  .m-topic-svg {
    flex: none;
    width: 56px;
    height: 56px;
    object-fit: contain;
  }

  .m-topic-svg svg {
    width: 100%;
    height: 100%;
  }

  .m-topic.is-extra {
    display: none;
  }

  .m-topics.is-all .m-topic.is-extra {
    display: flex;
  }

  .m-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border: 0;
    border-radius: 16px;
    background: #EEF2FF;
    color: var(--m-blue);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
  }

  /* paid promo */
  .m-promo {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, #EAF0FF, #FFF1E8);
    color: var(--m-navy);
    text-decoration: none;
  }

  .m-promo strong {
    display: block;
    font-size: 17px;
    line-height: 1.25;
  }

  .m-promo small {
    display: block;
    margin-top: 2px;
    color: #4B5B7E;
    font-size: 14px;
  }

  .m-promo-go {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--m-blue);
    color: #fff;
    font-weight: 800;
  }

  /* ---------- compact material cards (lists, rubrics, tags, search) ---------- */
  .material-grid,
  .fresh-group .material-grid,
  .m-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .m-list {
    display: grid;
  }

  .material-card__link {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
    padding: 10px;
    border-color: var(--m-line);
    border-radius: 20px;
    box-shadow: var(--m-shadow);
  }

  .material-card__link:hover,
  .material-card__link:focus-visible {
    transform: none;
  }

  .material-card__visual,
  .material-card__body {
    display: contents;
  }

  .material-card__icon {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: center;
    width: 104px;
    height: 104px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--mc-bg1), var(--mc-bg2));
  }

  .material-card__icon.has-image img {
    width: 76px;
    height: 76px;
  }

  .material-card__icon svg {
    width: 58px;
    height: 58px;
  }

  .material-card__type {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    max-width: calc(100% - 64px);
    margin-top: 2px;
    padding: 2px 9px;
    background: #EEF2FF;
    color: var(--m-blue);
    font-size: 11px;
    letter-spacing: 0.03em;
  }

  .material-card__badge {
    position: static;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    background: #F1F4FA;
    color: #3F4A63;
    font-size: 12px;
  }

  .material-card h3 {
    grid-column: 2;
    grid-row: 2;
    font-size: 16px;
    line-height: 1.3;
  }

  .material-card__meta {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
    padding-left: 0;
    color: var(--m-muted);
    font-size: 13px;
  }

  .material-card__excerpt {
    display: none;
  }

  .material-card__footer {
    grid-column: 2;
    grid-row: 4;
    margin: 0;
    padding-top: 0;
    border-top: 0;
    font-size: 13px;
  }

  .material-card__views {
    display: none;
  }
}

@media (max-width: 900px) and (min-width: 621px) {
  .material-grid,
  .fresh-group .material-grid,
  .m-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .m-tile--wide {
    width: 46vw;
  }

  .m-tile {
    width: 28vw;
  }

  .m-topic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .m-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .m-hero-img {
    max-width: 240px;
    justify-self: center;
    order: -1;
  }

  .m-hero-title {
    font-size: 24px;
  }

  .m-topic {
    font-size: 15px;
  }

  .m-topic img {
    width: 46px;
    height: 46px;
  }

  .material-card__link {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .material-card__icon {
    width: 88px;
    height: 88px;
  }
}

@media (max-width: 900px) {
  /* listings sit directly on the page: no white panel around the cards */
  .section-block.article-list {
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .section-block.article-list > .section-heading h2 {
    color: var(--m-navy);
    font-size: 22px;
    font-weight: 900;
  }

  /* tinted square behind the type icon, like the reference */
  .material-card__icon,
  .material-card__icon.has-image {
    background: linear-gradient(135deg, var(--mc-bg1), var(--mc-bg2));
  }

  /* the whole card is the link: no «Открыть →», only a price when there is one */
  .material-card__action {
    display: none;
  }

  .material-card__footer:not(:has(.material-card__price)) {
    display: none;
  }

  .material-card__link {
    grid-template-rows: auto auto 1fr;
    min-height: 124px;
  }

  .material-card__icon {
    grid-row: 1 / span 3;
  }

  .material-card h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

@media (max-width: 900px) {
  .material-card__link {
    grid-template-rows: auto auto auto;
    align-content: center;
    min-height: 0;
  }
}

@media (max-width: 900px) {
  /* text centred next to the 104px icon: spare height goes to the 1fr rows */
  .material-card__link {
    grid-template-rows: 1fr auto auto auto 1fr;
    row-gap: 5px;
  }

  .material-card__icon {
    grid-row: 1 / -1;
  }

  .material-card__type,
  .material-card__badge {
    grid-row: 2;
  }

  .material-card h3 {
    grid-row: 3;
  }

  .material-card__meta,
  .material-card__footer {
    grid-row: 4;
  }
}

@media (max-width: 900px) {
  /* final card layout: the 104px icon is positioned, the text is a plain
     two-column grid (type | level, then title and meta full width) */
  .material-card__link {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: none;
    align-content: center;
    row-gap: 6px;
    column-gap: 8px;
    min-height: 126px;
    padding: 10px 12px 10px 128px;
  }

  .material-card__icon {
    position: absolute;
    top: 50%;
    left: 10px;
    grid-row: auto;
    transform: translateY(-50%);
  }

  .material-card__link:hover .material-card__icon {
    transform: translateY(-50%);
  }

  .material-card__type {
    grid-column: 1;
    grid-row: 1;
    max-width: 100%;
  }

  .material-card__badge {
    grid-column: 2;
    grid-row: 1;
  }

  .material-card h3,
  .material-card__meta,
  .material-card__footer {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 360px) {
  .material-card__link {
    padding-left: 110px;
  }

  .material-card__icon {
    left: 10px;
  }
}

@media (max-width: 900px) {
  /* abspos grid children with a grid-column are placed in that area: reset it */
  .material-card__icon {
    grid-area: auto;
  }
}

@media (max-width: 900px) {
  /* rubric subsections: one swipeable row of chips instead of a long column */
  .section-block:has(> .section-grid) {
    padding: 16px 0 14px;
  }

  .section-block:has(> .section-grid) > .section-heading {
    padding: 0 16px;
  }

  .section-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 16px 4px;
    scrollbar-width: none;
  }

  .section-grid::-webkit-scrollbar {
    display: none;
  }

  .section-link {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-color: #DCE5FF;
    border-radius: 999px;
    background: #fff;
    white-space: nowrap;
  }

  .section-link:hover {
    transform: none;
  }

  .section-link strong {
    display: inline;
    font-size: 15px;
  }

  .section-link span {
    color: var(--m-muted);
    font-size: 13px;
  }
}

/* ---------- 2026-10-07: quest mini-banner (phones), search note, load more, trainer hint ---------- */
.m-quest {
  display: none;
}

@media (max-width: 900px) {
  /* Halloween quest: night-blue card, soft moon glow behind Wanda (no purple gradients) */
  .m-quest {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    align-items: center;
    gap: 4px;
    min-height: 150px;
    padding: 16px 8px 16px 18px;
    overflow: hidden;
    border-radius: 22px;
    background: radial-gradient(circle at 82% 46%, rgba(255, 214, 120, 0.42) 0, rgba(255, 214, 120, 0.12) 32%, transparent 52%), #1E2A52;
    box-shadow: var(--m-shadow);
    color: #fff;
    text-decoration: none;
  }

  .m-quest:hover {
    color: #fff;
  }

  .m-quest-text {
    display: grid;
    gap: 4px;
  }

  .m-quest-eyebrow {
    color: #FFB46B;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .m-quest-title {
    font-size: 19px;
    font-weight: 900;
    line-height: 1.2;
  }

  .m-quest-sub {
    color: #C9D2EE;
    font-size: 13.5px;
    line-height: 1.4;
  }

  .m-quest-cta {
    justify-self: start;
    margin-top: 6px;
    padding: 9px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FF7A59, #F25C54);
    font-size: 14px;
    font-weight: 800;
  }

  .m-quest-art img {
    display: block;
    width: 140px;
    height: auto;
    margin-right: -6px;
  }
}

/* search: similar results instead of exact ones */
.search-fuzzy-note {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #FFF7ED;
  color: #9A3412;
  font-weight: 700;
}

/* rubric/tag pages: next 24 materials */
.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  margin: 18px auto 0;
  max-width: 320px;
  border-radius: 16px;
  background: #EEF2FF;
  color: #3B5BDB;
  font-weight: 800;
  text-decoration: none;
}

.load-more span {
  color: #6B7A99;
  font-weight: 700;
}

.load-more.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* trainer: sign in to keep the progress */
.lep-signin-hint {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 16px;
  padding: 14px 44px 14px 16px;
  border: 1px solid #FFE1A6;
  border-radius: 16px;
  background: #FFF8E6;
  color: #5B4300;
}

.lep-signin-hint-text {
  display: grid;
  flex: 1 1 260px;
  gap: 3px;
  font-size: 14.5px;
  line-height: 1.45;
}

.lep-signin-hint-text strong {
  color: #3D2E00;
  font-size: 15.5px;
}

.lep-signin-hint-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.lep-signin-hint-go:hover {
  color: #fff;
}

.lep-signin-hint-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8A6D1F;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Download / buy pack block (copied from print-material.css, 2026-10-07): pages
   without that stylesheet (e.g. /487.html with the Birthday Pack offer) ---------- */
.dl-pack .print-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--theme-a, var(--primary)), var(--theme-b, var(--primary-dark)));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 24px;
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* ---------- Download pack (PM::downloadPack, 2026-10-06) ----------
   One collage of everything in the PDF + one big button, like a product
   card in a shop. The compact card sits in the intro, the full block
   (#...-download) after the sheets. */
.dl-pack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin: 34px 0 10px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fff 0%, #FFF7ED 100%);
  box-shadow: inset 0 0 0 2px var(--theme-a, var(--primary)), var(--shadow);
  scroll-margin-top: 90px;
}

.dl-pack-collage {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.dl-pack h2 {
  margin: 0 0 6px;
  font-size: 1.45rem;
  line-height: 1.25;
}

.dl-pack-meta {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.dl-pack-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.35;
}

.dl-pack-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0 7px 26px;
  border-bottom: 1px dashed var(--line);
  position: relative;
}

.dl-pack-list li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 7px;
  color: var(--theme-a, var(--primary));
  font-weight: 900;
}

.dl-pack-copies {
  flex: none;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.dl-pack .dl-pack-button {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  font-size: 1.08rem;
  padding: 15px 22px;
}

.dl-pack-sub {
  margin: 18px 0 6px;
  font-weight: 800;
  font-size: 0.9rem;
}

.dl-pack-extras {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dl-pack-extras li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--muted);
  font-size: 0.88rem;
}

.dl-pack .dl-pack-extra {
  padding: 8px 16px;
  font-size: 0.9rem;
}

.dl-pack-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* compact card in the intro */
.dl-pack.dl-pack-compact {
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 16px 22px;
  margin: 22px 0 26px;
  padding: 16px;
}

.dl-pack-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.dl-pack-title {
  margin: 0 0 4px;
  font-weight: 800;
  font-size: 1.15rem;
}

.dl-pack-compact .dl-pack-meta {
  margin-bottom: 12px;
  font-size: 0.88rem;
}

.dl-pack-compact .dl-pack-button {
  width: auto;
  font-size: 1rem;
  padding: 13px 22px;
}

.dl-pack-more {
  display: block;
  margin-top: 10px;
  font-size: 0.9rem;
}

@media (max-width: 760px) {
  .dl-pack,
  .dl-pack.dl-pack-compact {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .dl-pack-thumb {
    max-width: 360px;
  }

  .dl-pack .dl-pack-button,
  .dl-pack-compact .dl-pack-button {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    padding: 14px 12px;
    font-size: 0.95rem;
    border-radius: 18px;
    text-align: center;
  }

  .dl-pack-list li {
    flex-direction: column;
    gap: 2px;
  }
}

/* ---------- Paid material (2026-10-06): price, buy button, locked sheets ---------- */
.dl-pack-price {
  margin: 4px 0 12px;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
  color: var(--ink, #1A1F36);
}

.dl-pack-compact .dl-pack-price {
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.dl-pack-buy-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* ---------- Big banner: Birthday Pack slide (2026-10-07) ----------
   Layers cut by ops/image-materials/birthday-banner-layers.js. Tilts use the
   separate `rotate` property, so the shared pop/rise animations (which end on
   transform: none) keep them. Warm cream-pink, coral accent (no purple). */
.hb-bday {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 196, 120, 0.30) 0, rgba(255, 196, 120, 0) 38%),
    radial-gradient(circle at 60% 110%, rgba(255, 122, 89, 0.20) 0, rgba(255, 122, 89, 0) 46%),
    linear-gradient(120deg, #FFF4EE 0%, #FFFFFF 46%, #FFF0F0 100%);
}

.hb-bday .hb-title-accent {
  color: #F25C54;
}

/* the art has white paper backgrounds: dissolve them on the light slide */
.hb-bday .bd-flag,
.hb-bday .bd-deco {
  mix-blend-mode: multiply;
}

.hb-bday .bd-card {
  border: 6px solid #fff;
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(120, 60, 40, 0.18);
}

.bd-f1 { rotate: -10deg; }
.bd-f2 { rotate: -5deg; }
.bd-f4 { rotate: 5deg; }
.bd-f5 { rotate: 10deg; }
.bd-c1 { rotate: -11deg; z-index: 1; }
.bd-c2 { z-index: 3; }
.bd-c3 { rotate: 10deg; z-index: 2; }
.bd-balloon { rotate: -8deg; z-index: 4; }
.bd-gift { z-index: 4; }
.bd-rosette { rotate: 9deg; z-index: 4; }

@media (prefers-reduced-motion: no-preference) {
  .hb-bday .bd-c2 { animation-name: hb-rise-in; animation-delay: 0.05s; }
  .hb-bday .bd-c1 { animation-name: hb-rise-in; animation-delay: 0.2s; }
  .hb-bday .bd-c3 { animation-name: hb-rise-in; animation-delay: 0.3s; }
  .hb-bday .bd-flag { animation-name: hb-drop-in; }
  .hb-bday .bd-f1 { animation-delay: 0.45s; }
  .hb-bday .bd-f2 { animation-delay: 0.52s; }
  .hb-bday .bd-f3 { animation-delay: 0.59s; }
  .hb-bday .bd-f4 { animation-delay: 0.66s; }
  .hb-bday .bd-f5 { animation-delay: 0.73s; }
  .hb-bday .bd-balloon { animation: hb-pop-in 0.6s 0.85s both, bd-float 3.4s 1.5s ease-in-out infinite; }
  .hb-bday .bd-gift { animation-delay: 0.95s; transform-origin: 50% 100%; }
  .hb-bday .bd-rosette { animation-delay: 1.05s; transform-origin: 50% 0; }

  /* replay the entrance every time the slide comes round */
  .hb-rotator.is-rotating .hb-bday:not(.is-active) .hb-layer,
  .hb-rotator.is-rotating .hb-bday:not(.is-active) .hb-text > * {
    animation: none;
  }
}

@keyframes bd-float {
  0%, 100% { transform: none; }
  50% { transform: translateY(-8px); }
}

/* ---------- Birthday Pack (2026-10-07): phone mini-banner + the pack page gallery ---------- */
@media (max-width: 900px) {
  /* warm cream card, coral accents - the light twin of the night-blue quest card */
  .m-quest--bday {
    margin-top: 12px;
    background:
      radial-gradient(circle at 84% 30%, rgba(255, 196, 120, 0.38) 0, rgba(255, 196, 120, 0) 46%),
      linear-gradient(120deg, #FFF4EE 0%, #FFFFFF 52%, #FFEDEA 100%);
    color: var(--ink);
    border: 1px solid #FFE0D6;
  }

  .m-quest--bday:hover {
    color: var(--ink);
  }

  .m-quest--bday .m-quest-eyebrow {
    color: #F25C54;
  }

  .m-quest--bday .m-quest-sub {
    color: #5B6478;
  }

  .m-quest--bday .m-quest-cta {
    color: #fff;
  }
}

.bp-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 26px;
}

.bp-tile {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(120, 60, 40, 0.10);
}

.bp-tile img {
  display: block;
  width: 100%;
  height: auto;
}

.bp-tile figcaption {
  padding: 10px 14px 14px;
  color: #5B6478;
  font-size: 0.9rem;
  line-height: 1.4;
}

.bp-tile figcaption b {
  display: block;
  margin-bottom: 2px;
  color: #1F2A44;
  font-size: 1rem;
}

@media (max-width: 900px) {
  .bp-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .bp-tile figcaption {
    padding: 8px 10px 10px;
    font-size: 0.82rem;
  }
}

/* ---------- Englex ad at the foot of the material, centred (2026-10-07) ---------- */
.article-ad--foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 28px;
  margin-bottom: 10px;
  text-align: center;
}

.article-ad--foot > div {
  max-width: 100%;
}

/* ---------- /487.html: wishes as cards, table of contents (ops/restyle-487.php) ---------- */
.wish-toc {
  margin: 18px 0 22px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #F6F8FF;
}

.article-body .wish-toc-title {
  margin: 0 0 6px;
  font-weight: 800;
}

.article-body .wish-toc ul {
  margin: 0;
  padding-left: 20px;
}

.article-body .wish-toc li {
  margin: 4px 0;
}

.wish-toc small {
  color: var(--muted);
}

.wish-list {
  display: grid;
  gap: 12px;
  margin: 14px 0 28px;
}

.wish-card {
  position: relative;
  padding: 14px 18px 14px 62px;
  border: 1px solid #ECEFF7;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(26, 31, 54, 0.05);
}

.wish-num {
  position: absolute;
  top: 14px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFEDEA;
  color: #F25C54;
  font-size: 0.9rem;
  font-weight: 800;
}

.article-body .wish-en {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
}

.article-body .wish-ru {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.article-body h2[id] {
  scroll-margin-top: 90px;
}

/* ---------- Birthday Pack mini-banner inside /487.html (ops/birthday-pack-sale.php) ---------- */
.bp-promo {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin: 18px 0 26px;
  padding: 14px 22px 14px 14px;
  border: 1px solid #FFE0D6;
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 40%, rgba(255, 196, 120, 0.35) 0, rgba(255, 196, 120, 0) 40%),
    linear-gradient(120deg, #FFF4EE 0%, #FFFFFF 55%, #FFEDEA 100%);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(120, 60, 40, 0.08);
  transition: box-shadow 0.2s ease;
}

.bp-promo:hover {
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(120, 60, 40, 0.14);
}

.bp-promo img {
  display: block;
  width: 150px;
  height: auto;
}

.bp-promo-text {
  display: grid;
  gap: 4px;
}

.bp-promo-eyebrow {
  color: #F25C54;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bp-promo-title {
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.25;
}

.bp-promo-sub {
  color: #5B6478;
  font-size: 0.92rem;
  line-height: 1.45;
}

.bp-promo-cta {
  justify-self: start;
  margin-top: 6px;
  padding: 9px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
}

@media (max-width: 600px) {
  .wish-card {
    padding: 12px 14px 12px 52px;
  }

  .wish-num {
    left: 12px;
    width: 28px;
    height: 28px;
  }

  .article-body .wish-en {
    font-size: 1rem;
  }

  .bp-promo {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 14px 12px 8px;
  }

  .bp-promo img {
    width: 96px;
  }

  .bp-promo-title {
    font-size: 1.05rem;
  }

  .bp-promo-sub {
    font-size: 0.85rem;
  }
}

/* title -> first paragraph: the Englex ad no longer sits between them (2026-10-07),
   so the body starts close under the title (about 24px of air) */
.article-body {
  padding-top: 8px;
}

.article-body > :first-child,
.article-body > link:first-child + *,
.article-body .material-intro > :first-child {
  margin-top: 0;
}

@media (max-width: 900px) {
  .article-body {
    padding-top: 6px;
  }
}

/* logo: "since 2015" pill next to the name (owner, 2026-10-07) */
.brand-since {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #FFEDEA;
  color: #F25C54;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  vertical-align: 3px;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .brand-since {
    display: none;
  }
}

/* phone tab bar: tiny gold star sticker on «Тренажёр» (owner, 2026-10-07) */
.m-tab-ico {
  position: relative;
  display: inline-flex;
}

.m-tab-star {
  position: absolute;
  top: -5px;
  right: -8px;
  width: 14px;
  height: 14px;
  fill: #FFC21A;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linejoin: round;
  paint-order: stroke;
  filter: drop-shadow(0 1px 1.5px rgba(176, 120, 0, 0.45));
}

/* longer tagline (2026-10-07): keep it on one line, slightly smaller on narrow desktops */
.brand-text small {
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .brand-text small {
    font-size: 12px;
  }
}

/* ---------- Footer (2026-10-08): brand | sections | groups | «Пользователям», bottom bar ---------- */
.footer-inner {
  grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr));
  gap: 32px 36px;
}

.footer-brand {
  gap: 12px;
}

.footer-brand .brand-since {
  background: rgba(255, 122, 89, 0.16);
  color: #FF9B80;
}

.footer-about {
  margin: 0;
  color: #A7ADC7;
  font-size: 13px;
  line-height: 1.5;
}

.footer-contacts {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.footer-mail .ui-icon {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 10px;
  flex: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.footer-col .footer-feedback-link {
  color: var(--accent);
  font-size: 15px;
}

.footer-bottom {
  display: grid;
  gap: 10px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #8C93B3;
  font-size: 13px;
  line-height: 1.5;
}

.footer-copy,
.footer-seller,
.footer-law {
  margin: 0;
}

/* laws line with the 6+ age mark (2026-10-09) */
.footer-law a {
  color: #C9CEE4;
  text-decoration: underline;
}

.footer-age {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border: 1.5px solid #C9CEE4;
  border-radius: 6px;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}

.footer-bottom .footer-legal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.footer-bottom .footer-legal a {
  color: #C9CEE4;
  font-size: 13px;
  font-weight: 600;
}

.footer-bottom .footer-legal a:hover {
  color: #fff;
}

@media (max-width: 1180px) {
  .footer-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }

  .footer-col h2 {
    font-size: 16px;
  }

  .footer-col a,
  .footer-col .footer-feedback-link {
    font-size: 14px;
  }

  .footer-bottom {
    margin-top: 28px;
  }

  .footer-bottom .footer-legal {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 360px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =====================================================================
   Catalog redesign (2026-10-08, docs/catalog-redesign-plan.md):
   main menu, home entry blocks, /materials, kit cards, card access labels
   ===================================================================== */

/* ---------- main menu: one row under the header card (desktop) ---------- */
@media (min-width: 901px) {
  .primary-nav {
    display: block;
    margin-top: 10px;
  }

  .primary-nav .nav-inner {
    padding: 0;
  }

  .primary-nav .nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: var(--paper);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
  }

  .primary-nav .nav-list > a,
  .primary-nav .nav-dropdown-toggle {
    padding: 9px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
  }

  .primary-nav .nav-list > a[aria-current="page"] {
    background: var(--primary-light);
    color: var(--primary-dark);
  }

  .primary-nav .nav-paid {
    margin-left: auto;
    color: #D9483F;
  }

  .primary-nav .nav-paid:hover {
    background: #FFEDEA;
    color: #C63D35;
  }

  .primary-nav .nav-dropdown {
    position: relative;
  }

  .primary-nav .nav-dropdown:hover .nav-dropdown-menu,
  .primary-nav .nav-dropdown:focus-within .nav-dropdown-menu {
    display: flex;
  }

  .primary-nav .nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
  }
}

/* ---------- full-width pages (catalog): no sidebar ---------- */
.site-layout--full {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- home: search ---------- */
.home-find {
  padding: 30px 32px 26px;
  margin-bottom: 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #EEF2FF 0%, #F7F9FF 55%, #FFF4EE 100%);
  box-shadow: var(--shadow);
}

.home-find h1 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
}

.home-find-sub {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 17px;
}

.home-find-row {
  display: flex;
  gap: 10px;
}

.home-find-row input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 18px;
  border: 2px solid #D9E0F2;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
}

.home-find-row input:focus,
.cat-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(76, 110, 245, 0.15);
}

.home-find-button {
  flex: none;
  height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.home-find-button:hover,
.cat-search-button:hover,
.cat-apply:hover {
  background: var(--primary-dark);
}

.home-find-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.home-find-filters .home-find-filter {
  flex: 1 1 160px;
}

.home-find-filters select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #D9E0F2;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.home-find-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 16px 0 0;
  font-size: 13px;
}

.home-find-topics span {
  color: var(--muted);
  font-weight: 700;
}

.home-find-topics a {
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--primary-dark);
  font-weight: 700;
  box-shadow: 0 1px 0 var(--line);
}

.home-find-topics a:hover {
  background: var(--primary);
  color: #fff;
  text-decoration: none;
}

.home-section {
  margin-bottom: 32px;
}

.section-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* quick categories */
.home-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.home-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-tile:hover,
.home-practice-card:hover {
  border-color: #C7D2FE;
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

.home-tile img {
  flex: none;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.home-tile-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.home-tile-text strong {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.home-tile-text small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

/* tests / trainer / interactives */
.home-practice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.home-practice-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
}

.home-practice-card--trainer {
  background: linear-gradient(135deg, #EEF2FF, #fff);
}

.home-practice-card img {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.home-practice-card > span {
  display: grid;
  gap: 6px;
}

.home-practice-card strong {
  font-size: 17px;
  font-weight: 800;
}

.home-practice-card small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.home-practice-cta {
  color: var(--primary);
  font-size: 14px;
  font-weight: 800;
}

/* ---------- paid kit cards ---------- */
.kit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.kit-card {
  min-width: 0;
}

.kit-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #FFD5CB;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(242, 92, 84, 0.08);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.kit-card__link:hover {
  border-color: #FFB4A3;
  box-shadow: 0 14px 30px rgba(242, 92, 84, 0.16);
  text-decoration: none;
}

.kit-card__cover {
  display: block;
  aspect-ratio: 600 / 380;
  /* a square cover (advent, 2026-10-15) must not stretch the box: aspect-ratio boxes grow to their content otherwise */
  min-height: 0;
  overflow: hidden;
  background: #FFF4EE;
}

.kit-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* a taller cover keeps its title (the collages are 600x380 already) */
  object-position: 50% 0;
}

.kit-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
}

.kit-card__label {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: #FFEDEA;
  color: #D9483F;
  font-size: 12px;
  font-weight: 800;
}

.kit-card__title {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}

.kit-card__summary {
  color: #4B5568;
  font-size: 14px;
  line-height: 1.45;
}

.kit-card__facts {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.kit-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

.kit-card__price {
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
}

.kit-card__cta {
  padding: 9px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

/* the catalog box: cover on the left */
.kit-grid--compact .kit-card__link {
  flex-direction: row;
}

.kit-grid--compact .kit-card__cover {
  flex: 0 0 38%;
  aspect-ratio: auto;
}

.kit-grid--compact .kit-card__summary {
  display: none;
}

/* ---------- material card: free / paid ---------- */
.material-card__access {
  padding: 2px 8px;
  border-radius: 999px;
  background: #E7F8EF;
  color: #0E8A55;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.material-card__access--paid {
  background: #FFEDEA;
  color: #D9483F;
}

.material-card--paid .material-card__link {
  box-shadow: 0 0 0 1px #FFD5CB, var(--shadow);
}

.material-card--paid .material-card__action {
  color: #D9483F;
}

/* ---------- /materials ---------- */
.cat-head h1 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
}

.cat-head p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 16px;
}

.cat-search {
  position: relative;
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.cat-search-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.cat-search input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 16px 0 46px;
  border: 2px solid #D9E0F2;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.cat-search-button {
  flex: none;
  height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.cat-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.cat-filters {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.cat-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.cat-filters-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.cat-filters-close,
.cat-filters-open,
.cat-backdrop {
  display: none;
}

.cat-group {
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #EEF1F7;
  min-width: 0;
}

.cat-group legend {
  padding: 0;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.cat-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: #2D3550;
  font-size: 14px;
  cursor: pointer;
}

.cat-option input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--primary);
}

.cat-option span {
  flex: 1;
  line-height: 1.3;
}

.cat-option small,
.cat-pill small {
  color: #94A0B8;
  font-size: 12px;
  font-weight: 700;
}

.cat-option--more {
  display: none;
}

.cat-group.is-expanded .cat-option--more {
  display: flex;
}

.cat-more-toggle {
  margin-top: 4px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cat-pill {
  position: relative;
}

.cat-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cat-pill span {
  display: inline-block;
  padding: 6px 11px;
  border: 1px solid #D9E0F2;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.cat-pill input:checked + span {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.cat-pill input:checked + span small {
  color: #DCE3FF;
}

.cat-pill input:focus-visible + span,
.cat-option input:focus-visible {
  outline: 3px solid rgba(76, 110, 245, 0.35);
  outline-offset: 2px;
}

.cat-filters-actions {
  display: grid;
  gap: 8px;
  padding-top: 14px;
}

.cat-apply {
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* desktop with JS: a filter applies itself, the button is for the no-JS form */
.js .cat-body .cat-apply {
  display: none;
}

.cat-reset {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.cat-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.cat-count {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.cat-count strong {
  color: var(--ink);
}

.cat-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.cat-sort select {
  height: 38px;
  padding: 0 10px;
  border: 1px solid #D9E0F2;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.cat-chips a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
}

.cat-chips a:hover {
  background: #DCE3FF;
  text-decoration: none;
}

.cat-kits {
  margin-bottom: 18px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: #FFF7F4;
}

.cat-kits h2 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
}

.cat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cat-body.is-loading .cat-results {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.cat-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.cat-pager a,
.cat-pager span {
  min-width: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: center;
  font-weight: 800;
}

.cat-pager a {
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
}

.cat-pager .is-current {
  background: var(--primary);
  color: #fff;
}

.cat-pager-gap {
  color: var(--muted);
}

.cat-empty {
  padding: 30px 20px;
  border-radius: var(--radius-md);
  background: var(--paper);
  text-align: center;
}

.cat-empty h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.cat-empty-link {
  display: inline-block;
  margin: 4px 6px;
  font-weight: 800;
}

/* the «Фильтры» button (phones) */
.cat-toolbar .cat-filters-open {
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #D9E0F2;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.cat-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
}

/* ---------- sizes ---------- */
@media (max-width: 1180px) {
  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .home-tiles,
  .home-practice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .home-find {
    padding: 20px 16px 18px;
    margin-bottom: 20px;
  }

  .home-find h1 {
    font-size: 24px;
  }

  .home-find-sub {
    margin-bottom: 14px;
    font-size: 15px;
  }

  .home-find-row {
    flex-direction: column;
  }

  .home-find-row input,
  .home-find-button {
    height: 50px;
  }

  .home-find-filters .home-find-filter {
    flex: 1 1 calc(50% - 5px);
  }

  .kit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cat-head h1 {
    font-size: 24px;
  }

  .cat-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* the filter panel slides in from the right */
  .cat-filters {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 260;
    width: min(400px, 100%);
    max-height: none;
    border: 0;
    border-radius: 0;
    padding: 16px 16px 96px;
    transform: translateX(105%);
    transition: transform 0.22s ease;
    visibility: hidden;
  }

  .cat-panel-open .cat-filters {
    transform: none;
    visibility: visible;
    box-shadow: -10px 0 30px rgba(20, 23, 43, 0.18);
  }

  .cat-filters-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: var(--bg);
    color: var(--ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
  }

  .cat-panel-open .cat-backdrop {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: block;
    background: rgba(20, 23, 43, 0.45);
  }

  .cat-filters-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    width: min(400px, 100%);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    box-shadow: 0 -6px 18px rgba(20, 23, 43, 0.08);
  }

  .js .cat-body .cat-apply {
    display: block;
  }

  html.cat-panel-open,
  html.cat-panel-open body {
    overflow: hidden;
  }

  .cat-panel-open .m-tabbar {
    display: none;
  }

  .cat-toolbar .cat-filters-open {
    display: inline-flex;
  }

  .cat-option {
    min-height: 40px;
  }

  .cat-sort span {
    display: none;
  }

  .cat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cat-search-button {
    padding: 0 16px;
  }
}

@media (min-width: 560px) and (max-width: 900px) {
  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .home-tiles,
  .home-practice {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-find-filters .home-find-filter {
    flex-basis: 100%;
  }

  .kit-grid--compact .kit-card__link {
    flex-direction: column;
  }
}

/* catalog fixes after the first look (2026-10-08) */
.material-card__type--paid {
  background: #FFEDEA;
  color: #D9483F;
}

.cat-group legend {
  float: left;
  width: 100%;
}

.cat-group legend + * {
  clear: both;
}

.kit-card__price {
  white-space: nowrap;
}

/* the catalog has its own search bar: no second one in the header */
.site-header .header-search--hidden {
  visibility: hidden;
}

/* ---------- selects (2026-10-08): own chevron, soft border, a chosen value is highlighted ---------- */
.home-find-filters select,
.cat-sort select {
  -webkit-appearance: none;
  appearance: none;
  height: 46px;
  padding: 0 42px 0 14px;
  border: 1.5px solid #D9E0F2;
  border-radius: 12px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234C6EF5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.home-find-filters select:hover,
.cat-sort select:hover {
  border-color: #B9C6F5;
}

.home-find-filters select:focus,
.cat-sort select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(76, 110, 245, 0.15);
}

/* the empty choice («Формат», «Уровень английского») reads as a placeholder */
.home-find-filters select:has(option[value=""]:checked) {
  color: #6B7591;
  font-weight: 600;
}

.home-find-filters select:not(:has(option[value=""]:checked)) {
  border-color: var(--primary);
  background-color: var(--primary-light);
  color: var(--primary-dark);
}

.cat-sort select {
  height: 40px;
  padding-left: 12px;
  font-size: 14px;
}

@media (max-width: 900px) {
  /* in the stacked row flex:1 squeezed the search field to ~26px */
  .home-find-row input {
    flex: none;
    width: 100%;
  }

  .home-find-filters select {
    height: 48px;
    font-size: 16px;
  }

  /* toolbar: the count on its own line, then «Фильтры» and the sort side by side */
  .cat-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
  }

  .cat-count {
    grid-column: 1 / -1;
  }

  .cat-sort {
    min-width: 0;
  }

  .cat-sort select {
    width: 100%;
    height: 40px;
    font-size: 15px;
  }
}

/* card footer (2026-10-08): the view count stays on one line */
.material-card__views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* filter panel scrollbar (2026-10-08): thin, rounded, in the site colours,
   barely visible until the pointer is over the panel */
.cat-filters {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.cat-filters:hover,
.cat-filters:focus-within {
  scrollbar-color: #C7D2FE transparent;
}

.cat-filters::-webkit-scrollbar {
  width: 8px;
}

.cat-filters::-webkit-scrollbar-track {
  margin: 14px 0;
  background: transparent;
}

.cat-filters::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  background-clip: padding-box;
}

.cat-filters:hover::-webkit-scrollbar-thumb,
.cat-filters:focus-within::-webkit-scrollbar-thumb {
  background-color: #C7D2FE;
}

.cat-filters::-webkit-scrollbar-thumb:hover {
  background-color: #9DB0F7;
}

/* filter checkboxes and radios (2026-10-08): own boxes in the site colours */
.cat-option input[type="checkbox"],
.cat-option input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid #C5CEE6;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.cat-option input[type="checkbox"] {
  border-radius: 6px;
}

.cat-option input[type="radio"] {
  border-radius: 50%;
}

.cat-option:hover input[type="checkbox"],
.cat-option:hover input[type="radio"] {
  border-color: var(--primary);
}

/* the tick: a white check on blue */
.cat-option input[type="checkbox"]:checked {
  border-color: var(--primary);
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

/* the radio: a blue dot */
.cat-option input[type="radio"]::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
  transition: transform 0.15s ease;
}

.cat-option input[type="radio"]:checked {
  border-color: var(--primary);
}

.cat-option input[type="radio"]:checked::after {
  transform: scale(1);
}

.cat-option input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(76, 110, 245, 0.22);
}

.cat-option:has(input:checked) span {
  color: var(--ink);
  font-weight: 800;
}

.cat-option:has(input:checked) small {
  color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .cat-option input,
  .cat-option input[type="radio"]::after {
    transition: none;
  }
}

/* «Всего: N» in front of the page numbers (2026-10-08) */
.cat-pager {
  align-items: center;
}

.cat-pager-total {
  margin-right: 6px;
  color: var(--muted);
  font-weight: 700;
}

.cat-pager .cat-pager-total {
  min-width: 0;
  padding: 8px 4px;
}

/* kit cards (2026-10-08): the button never leaves the card - the foot wraps,
   and the catalog box gives a single kit the whole row */
.kit-card__body {
  min-width: 0;
}

.kit-card__foot {
  flex-wrap: wrap;
}

.kit-card__cta {
  margin-left: auto;
}

.kit-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}

.kit-grid--compact .kit-card__cover {
  flex-basis: 34%;
  max-width: 260px;
}

/* ---------- select menus (2026-10-08): where the browser can style the list
   (Chrome/Edge 135+, appearance: base-select) - rounded panel, soft shadow,
   the site's thin scrollbar, highlighted options; elsewhere the system list ---------- */
@supports (appearance: base-select) {
  .home-find-filters select,
  .cat-sort select,
  .home-find-filters select::picker(select),
  .cat-sort select::picker(select) {
    appearance: base-select;
  }

  .home-find-filters select,
  .cat-sort select {
    display: flex;
    align-items: center;
  }

  /* our own chevron is the background image */
  .home-find-filters select::picker-icon,
  .cat-sort select::picker-icon {
    display: none;
  }

  .home-find-filters select::picker(select),
  .cat-sort select::picker(select) {
    margin-top: 6px;
    padding: 6px;
    max-height: min(340px, 60vh);
    overflow-y: auto;
    border: 1px solid #DCE3F5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(28, 39, 76, 0.16);
    scrollbar-width: thin;
    scrollbar-color: #C7D2FE transparent;
    overscroll-behavior: contain;
  }

  .home-find-filters select option,
  .cat-sort select option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }

  .home-find-filters select option:hover,
  .home-find-filters select option:focus-visible,
  .cat-sort select option:hover,
  .cat-sort select option:focus-visible {
    outline: none;
    background: var(--primary-light);
    color: var(--primary-dark);
  }

  .home-find-filters select option:checked,
  .cat-sort select option:checked {
    color: var(--primary-dark);
    font-weight: 800;
  }

  .home-find-filters select option::checkmark,
  .cat-sort select option::checkmark {
    order: 1;
    margin-left: auto;
    color: var(--primary);
  }

  /* the placeholder entry («Формат», «Уровень английского») is greyed in the list */
  .home-find-filters select option[value=""] {
    color: #8A93AB;
    font-weight: 600;
  }
}

/* ---------- «Тесты» (2026-10-08): trainer tile on its own row, topic buttons ---------- */
.trainer-tile {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin: 0 0 24px;
  padding: 22px 26px;
  border: 1px solid #C7D2FE;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 20%, rgba(255, 176, 32, 0.22) 0, rgba(255, 176, 32, 0) 42%),
    linear-gradient(120deg, #EEF2FF 0%, #F7F9FF 60%, #FFF7EC 100%);
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.trainer-tile:hover {
  border-color: #9DB0F7;
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

.trainer-tile__art {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.trainer-tile__text {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.trainer-tile__eyebrow {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  background: #FFF1D6;
  color: #B76E00;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.trainer-tile__title {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
}

.trainer-tile__sub {
  color: #4B5568;
  font-size: 15px;
  line-height: 1.5;
}

.trainer-tile__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
}

.trainer-tile__facts span::before {
  content: "\2713\00a0";
}

.trainer-tile__cta {
  padding: 13px 20px;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.trainer-tile:hover .trainer-tile__cta {
  background: var(--primary-dark);
}

.topic-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 18px;
}

.topic-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1.5px solid #D9E0F2;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.topic-filter__btn small {
  color: #94A0B8;
  font-size: 12px;
}

.topic-filter__btn:hover {
  border-color: var(--primary);
}

.topic-filter__btn.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.topic-filter__btn.is-active small {
  color: #DCE3FF;
}

.topic-filter__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(76, 110, 245, 0.22);
}

.material-card[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .trainer-tile {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .trainer-tile__art {
    width: 72px;
    height: 72px;
  }

  .trainer-tile__title {
    font-size: 20px;
  }

  .trainer-tile__cta {
    grid-column: 1 / -1;
    text-align: center;
  }

  .topic-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -16px;
    padding-right: 16px;
    scrollbar-width: none;
  }

  .topic-filter::-webkit-scrollbar {
    display: none;
  }

  .topic-filter__btn {
    flex: none;
  }
}

/* ---------- rating after a free download (2026-10-08): the popup as a centred modal ---------- */
.feedback-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 23, 43, 0.45);
}

.feedback-backdrop[hidden] {
  display: none;
}

.feedback-popup.feedback-popup--modal {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 310;
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  padding: 30px 28px 26px;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(20, 23, 43, 0.28);
  text-align: center;
  transform: translate(-50%, -50%);
}

.feedback-popup--modal .feedback-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.3;
}

.feedback-sub {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.feedback-popup--modal .feedback-votes {
  justify-content: center;
}

.feedback-popup--modal .feedback-step[data-step="comment"] {
  text-align: left;
}

/* ---------- cookie banner (2026-10-08): a rounded card with air around it ---------- */
.cookie-banner {
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 16px 40px rgba(28, 39, 76, 0.18);
}

.cookie-banner .cookie-banner-inner {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 16px 18px 16px 22px;
  gap: 14px 20px;
  flex-wrap: nowrap;
}

.cookie-banner-inner p {
  max-width: none;
  color: #4B5568;
  font-size: 14px;
  line-height: 1.5;
}

.cookie-banner-inner a {
  color: var(--primary-dark);
  font-weight: 700;
}

.cookie-banner-inner button {
  padding: 11px 22px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .cookie-banner {
    left: 10px;
    right: 10px;
    bottom: calc(var(--m-tab) + 10px);
  }

  .cookie-banner .cookie-banner-inner {
    flex-wrap: wrap;
    padding: 14px 16px;
  }

  .cookie-banner-inner p {
    font-size: 13px;
  }

  .cookie-banner-inner button {
    width: 100%;
  }
}

/* ---------- home-find art (2026-10-08, owner's pictures) ---------- */
.home-find {
  position: relative;
  overflow: hidden;
  padding-bottom: 18px;
}

.home-find > *:not(.home-find-art):not(.home-find-path) {
  position: relative;
  z-index: 1;
}

.home-find h1,
.home-find-sub {
  max-width: calc(100% - 190px);
}

.home-find-art {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.home-find-art--book {
  top: 6px;
  right: 10px;
  width: 190px;
  height: auto;
}

.home-find-art--cards {
  left: -14px;
  bottom: -18px;
  width: 120px;
  height: auto;
  opacity: 0.9;
  transform: rotate(-6deg);
}

.home-find-art--games {
  right: -10px;
  bottom: -22px;
  width: 112px;
  height: auto;
  opacity: 0.9;
}

/* full width (owner, 2026-10-13: «сделай чтобы были пошире»): the corner art sits below the topics */
.home-find-topics {
  padding: 0;
}

.home-find-path {
  display: block;
  width: calc(100% - 200px);
  height: auto;
  margin: 8px auto 0;
  opacity: 0.9;
  pointer-events: none;
}

@media (max-width: 900px) {
  .home-find h1,
  .home-find-sub {
    max-width: calc(100% - 92px);
  }

  .home-find-art--book {
    top: 4px;
    right: -4px;
    width: 104px;
  }

  .home-find-art--cards,
  .home-find-art--games {
    display: none;
  }

  .home-find-topics {
    padding: 0;
  }

  .home-find-path {
    width: 100%;
    margin-top: 12px;
  }
}

/* home-find art: first look fixes (2026-10-08) */
@media (min-width: 901px) {
  .home-find-art--book {
    top: 2px;
    right: 14px;
    width: 168px;
  }

  .home-find-art--cards {
    left: 4px;
    bottom: 4px;
    width: 104px;
  }

  .home-find-art--games {
    right: 8px;
    bottom: 2px;
    width: 88px;
  }
}

.home-find-filters select {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* cookie choice (2026-10-08): «Только необходимые» and «Принять» */
.cookie-banner-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

.cookie-banner-inner .cookie-necessary {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.cookie-banner-inner .cookie-necessary:hover {
  background: #DCE3FF;
}

.footer-col .footer-cookie-link {
  color: #D5D9EA;
  font-size: 14px;
}

@media (max-width: 900px) {
  .cookie-banner-actions {
    width: 100%;
  }

  .cookie-banner-actions button {
    flex: 1;
    padding: 11px 10px;
  }
}

/* 2026-10-08: short answer at the top of an article; next holidays block */
.quick-answer {
  margin: 0 0 20px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #FFF4EF;
  border: 1px solid #FFD9CC;
}
.quick-answer p { margin: 0 0 8px; }
.quick-answer p:last-child { margin-bottom: 0; }
.quick-answer strong:first-child { font-size: 19px; color: var(--ink); }
.next-holidays {
  margin: 28px 0 0;
  padding: 18px 20px;
  border-radius: 16px;
  background: #F5F7FC;
  border: 1px solid #E6E9F2;
}
.next-holidays h2 { margin-top: 0; font-size: 20px; }
.next-holidays ul { margin: 0 0 10px; padding-left: 20px; }
.next-holidays li { margin: 4px 0; }
.next-holidays p { margin: 0; }

/* 2026-10-08: material cards with watercolour art - the picture fills the
   header (desktop) or the square on the left (phone); pills sit on top. */
.material-card--cover .material-card__visual {
  height: 150px;
  padding: 0;
  background: #F7F4EE;
}
.material-card--cover .material-card__icon.has-cover {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  overflow: hidden;
}
.material-card--cover .material-card__icon.has-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.material-card--cover .material-card__link:hover .material-card__icon.has-cover {
  transform: none;
}
.material-card--cover .material-card__link:hover .material-card__icon.has-cover img {
  transform: scale(1.04);
}
.material-card--cover .material-card__type {
  position: absolute;
  left: 12px;
  bottom: 10px;
  max-width: calc(100% - 24px);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 4px rgba(28, 39, 76, 0.12);
}
@media (max-width: 900px) {
  /* the phone card keeps its positioned square on the left */
  .material-card--cover .material-card__icon.has-cover,
  .material-card--cover .material-card__link:hover .material-card__icon.has-cover {
    position: absolute;
    inset: auto;
    top: 50%;
    left: 10px;
    width: 104px;
    height: 104px;
    border-radius: 16px;
    background: #F7F4EE;
    transform: translateY(-50%);
  }
  .material-card--cover .material-card__type {
    position: static;
    box-shadow: none;
    background: #EEF2FF;
  }
}
@media (max-width: 360px) {
  .material-card--cover .material-card__icon.has-cover,
  .material-card--cover .material-card__link:hover .material-card__icon.has-cover {
    width: 88px;
    height: 88px;
  }
}
/* a row mixing cards with and without art: every header gets the art height */
@media (min-width: 901px) {
  .material-grid:has(.material-card--cover) .material-card__visual {
    height: 150px;
  }
}

/* 2026-10-09: printing from a phone put the bottom tab bar and the
   assistant's button on every printed page (they are position: fixed);
   the seasonal banner too - an A4 page is narrower than 900px, so the
   phone banner (.m-promo) showed above the material */
@media print {
  .m-tabbar,
  .m-search,
  .m-promo,
  .widget-promo,
  .la-launcher,
  .la-widget,
  .cookie-banner {
    display: none !important;
  }
}

/* Home: one trainer question (2026-10-09, home-practice.js) */
.home-quiz {
  margin: 0 0 18px;
  padding: 20px 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, #FFF4EF 0, #FFFFFF 70%);
  border: 1px solid #FFD9CC;
  box-shadow: var(--shadow, 0 4px 14px rgba(28, 39, 76, .08));
}
.home-quiz[hidden] { display: none; }
.home-quiz-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.home-quiz-head img { flex: none; }
.home-quiz-head strong { display: block; font-size: 20px; font-weight: 900; color: var(--ink); }
.home-quiz-head small { display: block; color: var(--muted); font-size: 14px; }
.home-quiz-more { margin-left: auto; flex: none; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #FFD9CC; font-weight: 800; font-size: 14px; color: #C2410C; text-decoration: none; white-space: nowrap; }
.home-quiz-more:hover { border-color: #F25C54; color: #C2410C; }
.home-quiz-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.home-quiz-topic { color: #C2410C; }
.home-quiz-q { margin: 0 0 12px; font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1.4; }
.home-quiz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.home-quiz-option {
  padding: 12px 14px; border: 2px solid #E6E9F2; border-radius: 14px; background: #fff;
  font: inherit; font-weight: 800; font-size: 16px; color: var(--ink); cursor: pointer; text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.home-quiz-option:hover { border-color: #FFB59F; }
.home-quiz-option.is-chosen { border-color: #F25C54; background: #FFF0EA; }
.home-quiz-pics .home-quiz-option { font-size: 30px; }
.home-quiz-check {
  padding: 12px 22px; border: 0; border-radius: 999px; font: inherit; font-weight: 800; font-size: 16px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #FF7A59, #F25C54); box-shadow: 0 6px 16px rgba(242, 92, 84, .28);
}
.home-quiz-check:disabled { opacity: .45; cursor: default; box-shadow: none; }
.home-quiz-other { margin-left: 12px; padding: 8px 4px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--primary); cursor: pointer; }
.home-quiz-loading { margin: 0; color: var(--muted); }
@media (max-width: 640px) {
  .home-quiz { padding: 16px; }
  .home-quiz-q { font-size: 17px; }
  .home-quiz-head { flex-wrap: wrap; }
  .home-quiz-more { margin-left: 0; padding: 6px 12px; font-size: 13px; }
  .home-quiz-options { grid-template-columns: 1fr 1fr; }
  .home-quiz-check { width: 100%; }
  .home-quiz-other { display: block; margin: 8px auto 0; }
}
/* half the space under the trainer question (owner, 2026-10-09): 74 -> 37 px */
.home-section--quiz { margin-bottom: 13px; }
.home-section--quiz .home-quiz { margin-bottom: 0; }

/* Catalog «Готовый комплект по этой теме» (owner, 2026-10-09): one kit takes
   the whole row (horizontal card), two kits share one row - then each card
   is vertical, cover on top, like on the home page. Phones: one per row. */
.kit-grid--compact {
  grid-template-columns: minmax(0, 1fr);
}
.kit-grid--compact:has(> :nth-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kit-grid--compact:has(> :nth-child(2)) .kit-card__link {
  flex-direction: column;
}
.kit-grid--compact:has(> :nth-child(2)) .kit-card__cover {
  flex: none;
  max-width: none;
  aspect-ratio: 600 / 380;
}
@media (max-width: 900px) {
  .kit-grid--compact:has(> :nth-child(2)) {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* and a third less above it (owner, 2026-10-09): 56 -> 37 px */
.home-section:has(+ .home-section--quiz) { margin-bottom: 13px; }
/* home: three newest paid kits in one row (owner, 2026-10-09); phones - one per row */
.home-kits .kit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .home-kits .kit-grid { grid-template-columns: minmax(0, 1fr); } }

/* Title page of a material printed from the page (2026-10-10, show.twig
   «print-cover»): paper only, one whole A4 page in front of the sheets; the
   same light look as the PDF title page (src/Pdf/PdfCover.php) */
.print-cover {
  display: none;
}

@media print {
  .print-cover {
    display: flex;
    flex-direction: column;
    height: 262mm;
    box-sizing: border-box;
    padding: 6mm 6mm 0;
    color: #1E293B;
    font-family: "Nunito", system-ui, sans-serif;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
  }
  .print-cover-head {
    display: flex;
    align-items: flex-start;
    gap: 6mm;
    padding-bottom: 7mm;
    border-bottom: 0.6mm solid #F25C54;
  }
  .print-cover-logo {
    width: 24mm;
    height: 24mm;
  }
  .print-cover-site {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 1mm;
  }
  .print-cover-site strong {
    font-size: 22pt;
    line-height: 1.15;
    font-weight: 800;
  }
  .print-cover-domain {
    color: #F25C54;
    font-size: 12pt;
  }
  .print-cover-tagline {
    color: #64748B;
    font-size: 10.5pt;
  }
  .print-cover-qr {
    margin: 0;
    width: 27mm;
    text-align: center;
  }
  .print-cover-qr svg {
    display: block;
    width: 27mm;
    height: 27mm;
  }
  .print-cover-qr figcaption {
    color: #64748B;
    font-size: 7.5pt;
    margin-top: 0.5mm;
  }
  .print-cover-main {
    flex: 1;
    padding-top: 36mm;
  }
  .print-cover-main h2 {
    margin: 0 0 5mm;
    font-size: 26pt;
    line-height: 1.2;
    font-weight: 800;
    color: #1E293B;
  }
  .print-cover-main p {
    margin: 0;
    color: #64748B;
    font-size: 13pt;
    line-height: 1.5;
  }
  .print-cover-foot {
    border-top: 0.2mm solid #CBD5E1;
    padding-top: 4mm;
    color: #64748B;
  }
  .print-cover-foot p {
    margin: 0 0 1.5mm;
    font-size: 11pt;
  }
  .print-cover-foot .print-cover-note {
    font-size: 9.5pt;
  }
  /* phones (class set in show.twig by pointer: coarse): as tall as its content,
     the date right under the description */
  .print-cover.print-cover--compact {
    height: auto;
  }
  .print-cover--compact .print-cover-main {
    flex: none;
    padding: 20mm 0 14mm;
  }
}

/* 404 (2026-10-10, templates/errors/404.twig): the owner's astronaut, a search,
   the main sections. Coral accent like the brand; tiles reuse .home-tile. */
.nf-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center;
  gap: 24px;
  padding: 32px 36px;
  border-radius: 24px;
  background: radial-gradient(circle at 85% 20%, #FFE8DE 0, #FFF6F1 38%, #F4F7FF 100%);
  overflow: hidden;
}
.nf-code {
  margin: 0;
  color: #F25C54;
  font-size: 88px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 2px;
}
.nf-code span {
  display: inline-block;
  color: #FF7A59;
  animation: nf-spin 9s linear infinite;
}
.nf-hero h1 {
  margin: 10px 0 6px;
  color: var(--ink);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
}
.nf-en {
  margin: 0 0 12px;
  color: #F25C54;
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
}
.nf-lead {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}
.nf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 16px 0 0;
}
.nf-btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(242, 92, 84, 0.28);
}
.nf-btn:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.05);
}
.nf-link {
  font-weight: 800;
}
.nf-art-wrap {
  position: relative;
  text-align: center;
}
.nf-art {
  width: 100%;
  max-width: 300px;
  height: auto;
  animation: nf-float 5s ease-in-out infinite;
}
.nf-star {
  position: absolute;
  color: #FFC53D;
  font-size: 22px;
  animation: nf-twinkle 2.6s ease-in-out infinite;
}
.nf-star--1 { top: 4%; left: 6%; }
.nf-star--2 { top: 18%; right: 2%; font-size: 16px; animation-delay: 0.9s; }
.nf-star--3 { bottom: 10%; left: 0; font-size: 18px; color: #FF9A7A; animation-delay: 1.6s; }
.nf-subtitle {
  margin: 28px 0 14px;
  font-size: 22px;
  font-weight: 900;
}
@keyframes nf-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}
@keyframes nf-spin {
  to { transform: rotate(360deg); }
}
@keyframes nf-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .nf-art, .nf-code span, .nf-star { animation: none; }
}
@media (max-width: 900px) {
  .nf-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 18px;
    text-align: center;
  }
  .nf-art-wrap { order: -1; }
  .nf-art { max-width: 170px; }
  .nf-code { font-size: 64px; }
  .nf-hero h1 { font-size: 24px; }
  .nf-actions { justify-content: center; }
  .nf-search .home-find-row { flex-direction: column; }
  .nf-search .home-find-button { width: 100%; }
}

/* Poem collections as cards (2026-10-10, ops/style-poem-cards.php, /assets/poem-cards.js) */
.poem-lead { color: var(--muted); font-weight: 700; }
.article-body .poem-cards { columns: 2; column-gap: 18px; margin: 18px 0 28px; }
.article-body .poem-card { position: relative; display: block; break-inside: avoid; margin: 0 0 18px; padding: 22px 22px 16px 26px; background: #FFFBF4; border: 1px solid #F3E3CC; border-radius: var(--radius-md); overflow: hidden; }
.article-body .poem-card::before { content: "\201C"; position: absolute; right: 14px; top: -14px; font: 900 96px/1 Georgia, serif; color: #F6D9B8; pointer-events: none; }
.article-body .poem-card::after { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(#FF7A59, #F25C54); }
.article-body .poem-text { position: relative; }
.article-body .poem-text p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--ink); }
.article-body .poem-text p:last-child { margin-bottom: 0; }
.article-body .poem-author { margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed #EBD3B4; color: var(--muted); font-size: 13px; font-style: italic; }
.article-body .poem-copy { margin-top: 12px; padding: 7px 14px; border: 1px solid #F3C9B0; border-radius: 999px; background: #fff; color: #C2501F; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.article-body .poem-copy:hover { background: #FFF1E8; }
.article-body .poem-copy.is-done { border-color: #A7E3C4; color: #167A4A; background: #EEFBF3; }
@media (max-width: 900px) {
  .article-body .poem-cards { columns: 1; }
}
@media print {
  .article-body .poem-cards { columns: 1; }
  .article-body .poem-card { break-inside: avoid; margin-bottom: 10px; background: #fff; }
  .article-body .poem-copy { display: none; }
}
/* poem cards: titles, translations and notes inside (2026-10-10, more page types) */
.article-body .poem-card .poem-title { margin: 0 0 10px; padding-right: 44px; font-size: 19px; line-height: 1.3; color: var(--ink); }
.article-body .poem-card .poem-title small { font-size: 14px; font-weight: 700; color: var(--muted); }
.article-body .poem-text .poem-subtitle { margin-top: -6px; color: var(--muted); font-size: 14px; }
.article-body .poem-text blockquote { margin: 12px 0 0; padding: 0 0 0 12px; border: 0; border-left: 3px solid #F3D3B5; background: none; box-shadow: none; color: #5B4A3A; font-style: normal; }
.article-body .poem-text blockquote::before, .article-body .poem-text blockquote::after { content: none; }
.article-body .poem-text blockquote p { font-size: 15px; color: #5B4A3A; }
.article-body .poem-text .poem-translation { font-size: 14.5px; line-height: 1.55; color: #5B4A3A; }
.article-body .poem-text .poem-note { padding: 8px 10px; border-radius: var(--radius-sm); background: #fff; border: 1px dashed #EBD3B4; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* bilingual rows inside a poem card (2026-10-10, ops/restyle-1-september-greetings.php) */
.article-body .poem-cards-wide { columns: 1; }
.article-body .bi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; padding: 10px 0; border-bottom: 1px dashed #EBD3B4; }
.article-body .bi-row:first-child { padding-top: 0; }
.article-body .bi-row:last-child { border-bottom: 0; padding-bottom: 0; }
.article-body .poem-text .bi-row p { margin: 0; }
.article-body .poem-text .bi-row .bi-ru { font-size: 14.5px; color: #5B4A3A; }
.article-body .bi-row-head p { font-weight: 800; }
@media (max-width: 700px) {
  .article-body .bi-row { grid-template-columns: 1fr; }
}
.article-body .bi-card::before { content: none; }

/* «Скачивание началось» on the after-download popup (2026-10-11) */
.feedback-download {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: #EEFBF3;
  border: 1px solid #BFE8CF;
  text-align: left;
}

.feedback-download-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1E9E5A;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.feedback-download-title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #146C3E;
}

.feedback-download-text {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: #3D5A48;
}

/* the notice alone: a compact card, no question */
.feedback-popup.feedback-popup--notice {
  width: min(380px, calc(100vw - 32px));
  padding: 22px 22px 20px;
}

.feedback-popup--notice .feedback-download {
  margin: 0 24px 0 0;
  border: 0;
  padding: 0;
  background: none;
}

/* «С озвучкой» (2026-10-11): the owner's speaker icon on material cards and the article page */
.material-card__audio {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 6px rgba(28, 39, 76, 0.16);
}

.material-card__audio img {
  display: block;
  width: 26px;
  height: 26px;
}

.meta-chip.meta-chip-audio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #EAF4FE;
  color: #1F5F9E;
}

.meta-chip-audio img {
  display: block;
  width: 20px;
  height: 20px;
}

/* information banner on top of every page (admin settings, 2026-10-11) */
.site-notice {
  background: #FFF6E5;
  border-bottom: 1px solid #F5D9A8;
  color: #4A3B1F;
}

.site-notice[hidden] {
  display: none;
}

.site-notice-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.site-notice-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F2A93B;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.site-notice-text {
  flex: 1;
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
}

.site-notice-text a {
  color: #A85A00;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-notice-close {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8A6A35;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.site-notice-close:hover {
  background: rgba(242, 169, 59, 0.18);
  color: #4A3B1F;
}

@media (max-width: 640px) {
  .site-notice-inner { gap: 10px; align-items: flex-start; }
  .site-notice-mark { width: 26px; height: 26px; font-size: 16px; }
  .site-notice-text { font-size: 13.5px; }
}

@media print {
  .site-notice { display: none !important; }
}

/* 🔊 buttons in vocabulary tables (public/assets/vocab-audio.js, 2026-10-12) */
.vocab-say {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: -4px 0 -4px 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #EAF4FE;
  color: #1F5F9E;
  vertical-align: middle;
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.vocab-say:hover,
.vocab-say:focus-visible {
  background: #D3E8FC;
}

.vocab-say.is-playing {
  background: #1F5F9E;
  color: #fff;
  transform: scale(1.08);
}

.vocab-say svg {
  display: block;
}

@media print {
  .vocab-say { display: none !important; }
}

/* A sheet after a level block (word searches .ws-level, reading texts .rl-level)
   starts a new paper page: the level's last sheet is :last-child of its wrapper,
   so print-material.css dropped its page break and the next sheet printed on the
   same page (owner, 2026-10-12, iPhone). */
@media print {
  .ws-level ~ .print-page,
  .rl-level ~ .print-page {
    break-before: page;
    page-break-before: always;
  }
}

/* Word tables on sheets (word searches: English | Перевод ×2) were wider than
   the sheet on a phone and cut off on the right: tighter cells (2026-10-12) */
@media (max-width: 640px) {
  .print-page .worksheet-table th,
  .print-page .worksheet-table td {
    padding: 7px 6px;
    font-size: .9rem;
    overflow-wrap: anywhere;
  }
}

/* the last sheet of a material: no page break after it, even when the bottom
   download button (print-bottom.js) follows it - Safari printed an empty page (2026-10-13) */
@media print {
  .print-page.print-page--last {
    break-after: auto !important;
    page-break-after: auto !important;
  }
}

/* Big flashcard sets (13+ cards with pictures, transcription and translation) spilled
   the sheet footer onto an extra printed page (owner, 2026-10-13, /flashkarty-halloween.html):
   smaller pictures and tighter cards in print */
@media print {
  .flashcard-grid:has(> .flashcard:nth-child(13)) {
    gap: 10px;
  }

  .flashcard-grid:has(> .flashcard:nth-child(13)) .flashcard .flashcard-visual img {
    max-width: 80px !important;
  }

  .flashcard-grid:has(> .flashcard:nth-child(13)) .flashcard {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* Printing lays the page out at A4 width, i.e. the phone layout, whose body keeps
   66px at the bottom for the tab bar - enough to push an almost full last sheet
   onto an empty extra page (2026-10-13, /prazdnik-new-year-worksheet.html) */
@media print {
  body {
    padding-bottom: 0 !important;
  }
}

/* Colouring sheets with 13 pictures (alphabet A-M, N-Z): the 13th picture and the
   footer spilled onto an extra printed page - four rows of slightly smaller pictures (2026-10-13) */
@media print {
  .coloring-page:has(> .coloring-item:nth-child(13)) {
    gap: 14px 16px;
  }

  .coloring-page:has(> .coloring-item:nth-child(13)) .coloring-item svg {
    width: 124px !important;
    height: 124px !important;
  }
}

/* Picture cards without captions (ops/flashcards-picture-cards.php, 2026-10-13): the same
   pictures as the flashcards, for «Найди пару» with the word cards */
.flashcard.flashcard-pic {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
}

.flashcard.flashcard-pic .flashcard-visual {
  font-size: 4rem;
}

.flashcard-grid.flashcard-pics .flashcard.flashcard-pic .flashcard-visual img {
  width: 100%;
  max-width: 170px !important;
}

@media print {
  .flashcard.flashcard-pic {
    min-height: 0;
    padding: 10px 8px;
  }

  .flashcard-grid.flashcard-pics .flashcard.flashcard-pic .flashcard-visual img {
    max-width: 124px !important;
  }
}

/* emoji sets: big emoji on the picture-only cards in print too */
@media print {
  .flashcard.flashcard-pic .flashcard-visual {
    font-size: 4.4rem !important;
    line-height: 1.15;
  }
}

/* A sheet slightly taller than its printed page is scaled down in print only
   (ops/print-fit.php sets class print-fit and --fit on that sheet, 2026-10-13) */
@media print {
  .print-page.print-fit {
    zoom: var(--fit, 1);
  }
}

@media print {
  .print-page.print-fit.print-fit-box {
    width: calc(100% * var(--fit, 1)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Board games: a short last row (here a lone «Финиш» cell) stretched its cells into huge
   squares - one finish cell took half the sheet and pushed the footer onto another page
   (hodilka-animal-safari, 2026-10-13). Rows of up to 3 cells: no square shape. */
.board-row > .board-cell:first-child:nth-last-child(-n+3),
.board-row > .board-cell:first-child:nth-last-child(-n+3) ~ .board-cell {
  aspect-ratio: auto;
  min-height: 84px;
}

/* Flashcards: every card of a set the same size, portrait 3:4 (owner, 2026-10-13: «карточки
   должны быть одинаковыми по высоте в рамках набора, ориентация книжная»). The card height comes
   from the width; the text takes what it needs and the picture fills the rest (a two-line
   translation makes the picture smaller, not the card taller). Phones: 2 in a row. Sets of 13+
   cards print 5 in a row to fit the sheet. The big transport cards (tf-*) have their own layout. */
.flashcard-grid:not(.tf-grid):not(.tf-words) > .flashcard {
  aspect-ratio: 3 / 4;
  align-self: start;
  height: auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.flashcard-grid:not(.tf-grid):not(.tf-words) > .flashcard > .flashcard-visual {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flashcard-grid:not(.tf-grid):not(.tf-words) > .flashcard > .flashcard-visual img {
  max-height: 100%;
  max-width: 100%;
  min-height: 0;
  width: auto !important;
  height: auto;
  object-fit: contain;
}
@media (max-width: 640px) {
  .flashcard-grid:not(.tf-grid):not(.tf-words) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media print {
  .flashcard-grid:not(.tf-grid):not(.tf-words):has(> .flashcard:nth-child(13)) {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Transport: its big cards (tf-*, 2 in a row, landscape) become portrait like every set -
   4 in a row on screen, 3 in a row (52 x 69 mm) in print. Overrides the page's own style. */
.print-material .flashcard-grid.tf-grid,
.print-material .flashcard-grid.tf-words {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 14px !important;
}

.print-material .flashcard-grid.tf-grid > .flashcard,
.print-material .flashcard-grid.tf-words > .flashcard {
  aspect-ratio: 3 / 4;
  align-self: start;
  min-height: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.print-material .tf-card > .flashcard-visual {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.print-material .tf-card .flashcard-visual img.tf-pic {
  max-height: 100% !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

@media (max-width: 640px) {
  .print-material .flashcard-grid.tf-grid,
  .print-material .flashcard-grid.tf-words {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media print {
  .print-material .flashcard-grid.tf-grid,
  .print-material .flashcard-grid.tf-words {
    gap: 4mm !important;
  }
  .print-material .flashcard-grid.tf-words {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  /* the big picture cards: 3 in a row, 52 x 69 mm - 8 still fit a sheet with the footer */
  .print-material .flashcard-grid.tf-grid {
    grid-template-columns: repeat(3, 52mm) !important;
    justify-content: center;
  }
}

/* «Ещё по теме» (ops/topic-links.php): cards with the material type's icon (owner, 2026-10-13) */
.article-body .topic-links {
  margin: 34px 0 10px;
  padding: 20px 20px 18px;
  border-radius: var(--radius-lg);
  background: var(--bg);
  border: 1px solid var(--line);
}

.article-body .topic-links__title {
  margin: 0 0 14px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
}

.article-body .topic-links__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-body .topic-links__grid li {
  margin: 0;
  padding: 0;
}

.article-body .topic-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}

.article-body .topic-link:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.article-body .topic-link img {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  margin: 0;
  border-radius: 12px;
  box-shadow: none;
}

.article-body .topic-link__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.article-body .topic-link__type {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}

.article-body .topic-link__name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.article-body .topic-links__hub {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.article-body .topic-links__hub:hover {
  background: #DFE6FF;
}

@media (max-width: 640px) {
  .article-body .topic-links {
    padding: 16px 12px 14px;
  }

  .article-body .topic-links__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Coupons (2026-10-15): the swinging tag in the menu, checkout field, sale page ---------- */
.promo-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: 12px;
  padding: 7px 14px 7px 24px;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 4px 9px 9px 4px;
  clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%);
  transform-origin: 50% 50%;
  /* calmer than the pop-up badge (owner, 2026-10-19: «не так быстро и не так сильно») */
  animation: promo-tag-sway 6s ease-in-out infinite;
}

/* the hole of the tag */
.promo-tag::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #fff;
}

.promo-tag:hover,
.promo-tag:focus-visible {
  color: #fff;
  animation-play-state: paused;
  background: linear-gradient(135deg, #F86B4A, #E04B44);
}

.primary-nav .nav-list > a.promo-tag {
  padding: 7px 14px 7px 24px;
  color: #fff;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
}

.primary-nav .nav-list > a.promo-tag:hover {
  color: #fff;
  background: linear-gradient(135deg, #F86B4A, #E04B44);
}

.promo-tag--m {
  display: none;
}

@keyframes promo-tag-swing {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}

@keyframes promo-tag-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .promo-tag { animation: none; transform: rotate(-3deg); }
}

@media (max-width: 900px) {
  .promo-tag--m {
    display: inline-flex;
    margin-left: auto;
    font-size: 14px;
    padding: 6px 11px 6px 21px;
  }

  .promo-tag--m + .header-account {
    margin-left: 8px;
  }
}

.shop-old-price {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.7em;
}

.shop-coupon-ok {
  margin: 6px 0 0;
  color: #1F7A4D;
  font-weight: 700;
}

.shop-coupon-line {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.shop-coupon-line input {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
}

.shop-coupon-apply {
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 18px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.shop-coupon-apply:hover {
  background: var(--primary-light);
}

.promo-code-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 22px;
  padding: 16px 20px;
  border: 2px dashed #F25C54;
  border-radius: var(--radius-md);
  background: #FFF4F0;
}

.promo-code-label {
  font-weight: 700;
  color: var(--muted);
}

.promo-code {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #D9483F;
}

.promo-copy {
  border: 1px solid #F25C54;
  border-radius: 999px;
  padding: 7px 16px;
  background: #fff;
  color: #D9483F;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.promo-code-terms {
  flex-basis: 100%;
  font-weight: 700;
}

.promo-product {
  margin-top: 26px;
}

.promo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 14px 0 0;
}

.promo-code-rule {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.92rem;
}

.promo-schedule {
  flex-basis: 100%;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.promo-schedule li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.promo-schedule li span {
  min-width: 150px;
}

.promo-schedule li strong {
  color: #D9483F;
}

.promo-schedule li em {
  font-style: normal;
  font-weight: 700;
}

.promo-schedule li.is-now {
  background: #fff;
  box-shadow: inset 0 0 0 2px #F25C54;
}

.promo-schedule li small {
  color: #D9483F;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* ---------- Coupon pop-up (2026-10-15): partials/promo-popup.twig ---------- */
.promo-pop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(32, 20, 16, 0);
  transition: background 0.25s ease;
}

.promo-pop[hidden] {
  display: none;
}

.promo-pop.is-open {
  background: rgba(32, 20, 16, 0.55);
}

html.promo-pop-lock {
  overflow: hidden;
}

.promo-pop__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border-radius: 22px;
  background: #FFFAF4;
  box-shadow: 0 24px 60px rgba(40, 16, 10, 0.35);
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.promo-pop.is-open .promo-pop__card {
  opacity: 1;
  transform: none;
}

.promo-pop__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #3A2A22;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(40, 16, 10, 0.2);
}

.promo-pop__close:hover {
  background: #fff;
  color: #D9483F;
}

.promo-pop__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.promo-pop__media {
  position: relative;
  display: block;
  aspect-ratio: 1200 / 760;
  overflow: hidden;
  background: #F2E3D3;
}

.promo-pop__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-pop__sticker {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 10px 14px;
  border-radius: 50%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  background: radial-gradient(circle at 35% 30%, #FF8A6A, #E2433D 70%);
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 16px rgba(160, 30, 20, 0.4), inset 0 0 0 3px rgba(255, 255, 255, 0.55);
  transform: rotate(-12deg);
  animation: promo-tag-swing 3.4s ease-in-out infinite;
}

.promo-pop__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px 20px;
}

.promo-pop__kicker {
  color: #1F7A4D;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.promo-pop__title {
  font-size: 1.45rem;
  line-height: 1.15;
  font-weight: 900;
  color: #2A1C16;
}

.promo-pop__text {
  color: #5C4A40;
  font-size: 0.97rem;
  line-height: 1.45;
}

.promo-pop__melt {
  display: block;
  margin-top: 4px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: #FFF0E8;
  border: 1px dashed #F2A58F;
}

.promo-pop__melt-title {
  display: block;
  margin-bottom: 8px;
  color: #C23B33;
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1.3;
}

.promo-pop__steps {
  display: flex;
  gap: 6px;
}

.promo-pop__step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: 10px;
  background: #fff;
  color: #8C7A70;
  opacity: 0.75;
}

.promo-pop__step b {
  font-size: 0.98rem;
}

.promo-pop__step small {
  font-size: 0.7rem;
  white-space: nowrap;
}

.promo-pop__step.is-now {
  opacity: 1;
  color: #fff;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
  box-shadow: 0 4px 10px rgba(242, 92, 84, 0.35);
}

.promo-pop__step.is-now small {
  font-weight: 800;
  text-transform: uppercase;
}

.promo-pop__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.promo-pop__buy s {
  color: #9A8A80;
  font-weight: 700;
  font-size: 1.05rem;
}

.promo-pop__cta {
  flex: 1 1 auto;
  text-align: center;
  padding: 13px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF7A59, #F25C54);
  color: #fff;
  font-weight: 900;
  font-size: 1.05rem;
  box-shadow: 0 8px 18px rgba(242, 92, 84, 0.35);
  transition: transform 0.15s ease;
}

.promo-pop__link:hover .promo-pop__cta {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #F86B4A, #E04B44);
}

.promo-pop__code {
  text-align: center;
  color: #8C7A70;
  font-size: 0.82rem;
}

@media (max-width: 420px) {
  .promo-pop__title { font-size: 1.25rem; }
  .promo-pop__body { padding: 14px 16px 16px; gap: 7px; }
  .promo-pop__sticker { min-width: 62px; font-size: 18px; }
  .promo-pop__step small { font-size: 0.64rem; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-pop__card, .promo-pop { transition: none; }
  .promo-pop__sticker { animation: none; }
}

/* short phone screens: the whole pop-up fits without scrolling */
@media (max-height: 720px) {
  .promo-pop { padding: 10px; }
  .promo-pop__card { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  .promo-pop__media { aspect-ratio: 1200 / 600; }
  .promo-pop__media img { object-position: 50% 100%; }
  .promo-pop__sticker { min-width: 56px; font-size: 16px; padding: 8px; left: 10px; top: 10px; }
  .promo-pop__body { padding: 12px 16px 14px; gap: 6px; }
  .promo-pop__kicker { display: none; }
  .promo-pop__title { font-size: 1.15rem; }
  .promo-pop__text { font-size: 0.86rem; line-height: 1.35; }
  .promo-pop__melt { padding: 8px 10px 10px; }
  .promo-pop__melt-title { font-size: 0.8rem; margin-bottom: 6px; }
  .promo-pop__step { padding: 4px 2px; }
  .promo-pop__cta { padding: 11px 14px; font-size: 0.98rem; }
  .promo-pop__buy { margin-top: 2px; }
}

/* ---------- Rubric page = hero + the catalog limited to the rubric (2026-10-19) ---------- */
.cat-page--rubric {
  margin-top: 22px;
}

.cat-head--rubric h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
}

.cat-head--rubric:empty {
  display: none;
}

.cat-topic-filter {
  margin: 0;
}

/* «Темы» in the sidebar: the rest of the topics under «Все темы» (2026-10-19) */
.tag-cloud-more {
  margin-top: 10px;
}

.tag-cloud-more > summary {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  cursor: pointer;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  list-style: none;
}

.tag-cloud-more > summary::-webkit-details-marker {
  display: none;
}

.tag-cloud-more > summary::after {
  content: "▾";
  font-size: 11px;
}

.tag-cloud-more[open] > summary::after {
  content: "▴";
}

.tag-cloud-more > summary span {
  color: var(--muted);
  font-weight: 700;
}

.tag-cloud-more > .tag-cloud {
  margin-top: 10px;
}

/* Rubric / topic hero: one of the site's characters on the right (2026-10-19).
   The watercolour art has a white background - multiply lets the hero tint through. */
.taxonomy-hero--character {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.taxonomy-hero__character {
  width: auto;
  height: 210px;
  max-width: 260px;
  object-fit: contain;
  margin: -8px 10px -10px 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 760px) {
  .taxonomy-hero--character {
    grid-template-columns: minmax(0, 1fr);
  }

  .taxonomy-hero__character {
    display: none;
  }
}

/* Download / print feedback (download-feedback.js, 2026-10-21): the button
   says the file is coming; a print button gets a note on saving a PDF. */
.print-button.is-started {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #fff !important;
}
.le-dl-note {
  margin: 10px 0 16px;
  padding: 12px 16px;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}