/* Playful Classroom (v08) — layout: hero-board, user-bar, workspace, footer */

body.theme-v08 {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--text);
  /* «Стена класса»: тёплая штукатурка — мягкое освещение + тонкая зернистость */
  background-color: var(--wall);
  background-image:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.55) 0%, transparent 48%),
    radial-gradient(circle at 85% 88%, var(--wall-shade) 0%, transparent 52%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='wallNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23wallNoise)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 180px 180px;
  background-attachment: fixed, fixed, scroll;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.theme-v08 .main-content,
.theme-v08 .workspace {
  flex: 1 0 auto;
}

/* Баннер тестового режима в ЛК (только при billing_free_usage) */
.lk-beta-banner {
  position: sticky;
  top: 0;
  z-index: 90;
  background: #fff3ad;
  background-image: linear-gradient(180deg, #fff7c2 0%, #ffe98a 100%);
  border-bottom: 1px solid #e6d9bf;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.lk-beta-banner__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.lk-beta-banner__icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: #6b5a1a;
  font-size: 1.05rem;
}
.lk-beta-banner__text {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1.45;
  color: #4a3f14;
}
.lk-beta-banner__text a {
  color: var(--chalkboard);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lk-beta-banner__text a:hover {
  color: var(--chalkboard-dark);
}
.theme-dark .lk-beta-banner {
  background: #3a3528;
  background-image: linear-gradient(180deg, #433d2f 0%, #322e24 100%);
  border-bottom-color: #4a4436;
}
.theme-dark .lk-beta-banner__icon,
.theme-dark .lk-beta-banner__text {
  color: #d4c8a8;
}
.theme-dark .lk-beta-banner__text a {
  color: #9fd4b0;
}
@media (max-width: 576px) {
  .lk-beta-banner__inner {
    padding: 0.65rem 0.9rem;
    gap: 0.55rem;
  }
  .lk-beta-banner__text {
    font-size: 0.85rem;
  }
}

/* Chalkboard hero — CSS-рамка + растровая текстура поверхности (без рамы на PNG) */
.hero-board {
  background-color: var(--chalkboard);
  background-image: url("../../images/board/hero-chalkboard-texture.png");
  background-size: 512px 512px;
  background-repeat: repeat;
  padding: 1.75rem 2.5rem 2.25rem;
  position: relative;
  border: 14px solid var(--board-frame);
  border-image: linear-gradient(
    135deg,
    var(--board-frame-light) 0%,
    var(--board-frame) 25%,
    var(--board-frame-dark) 50%,
    var(--board-frame) 75%,
    var(--board-frame-light) 100%
  ) 1;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.35),
    inset 0 6px 24px rgba(0, 0, 0, 0.4),
    inset 0 -4px 18px rgba(0, 0, 0, 0.3),
    0 6px 16px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.hero-board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 32%),
    radial-gradient(circle at 72% 65%, rgba(255, 255, 255, 0.04) 0%, transparent 38%),
    radial-gradient(circle at 88% 22%, rgba(255, 255, 255, 0.035) 0%, transparent 30%);
  opacity: 0.6;
  z-index: 1;
}
.hero-board::after {
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  bottom: -14px;
  height: 14px;
  background: linear-gradient(180deg, var(--board-frame-light) 0%, var(--board-frame-dark) 100%);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.3),
    inset 0 2px 3px rgba(255, 255, 255, 0.25);
  z-index: 3;
}
.hero-board__inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: grid;
  /* равные боковые колонки — заголовок строго по центру шапки */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 2;
  /* Декор выше по z-index; клики проходят к ссылкам и логотипу */
  pointer-events: none;
}
.hero-board__inner a,
.hero-board__inner nav,
.hero-board__inner .hero-board__nav a {
  pointer-events: auto;
}
.hero-board__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  position: relative;
  z-index: 4;
  justify-self: start;
  /* выравнивание с контентом 1200px на широких экранах */
  margin-left: max(0px, calc((100vw - 1200px - 5rem) / 2));
  opacity: 0.95;
  transition: opacity 0.15s, transform 0.15s;
}
.hero-board__logo:hover {
  opacity: 1;
  transform: scale(1.04);
}
.hero-board__logo:hover {
  opacity: 0.75;
}
.hero-board__logo-img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
.hero-board__brand {
  color: #fff;
  font-family: var(--font-chalk);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}
.hero-board__tagline {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-chalk);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
  margin-top: 0.1rem;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}
/* Меловые doodles по макету v08 (отдельные PNG, прозрачный фон) */
.hero-board__decor {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.hero-doodle {
  position: absolute;
  display: block;
  object-fit: contain;
  opacity: 0.98;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
  mix-blend-mode: screen;
}
.hero-doodle--star-trail {
  left: -1%;
  bottom: 14%;
  width: min(230px, 23vw);
  height: auto;
}
/* Лампочки: % по всей шапке, белый PNG, без calc+px */
.hero-doodle--lightbulb {
  width: 28px;
  height: auto;
  z-index: 6;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85));
}
.hero-doodle--lightbulb-1 {
  left: 3%;
  top: 12%;
  transform: rotate(-12deg);
}
.hero-doodle--lightbulb-2 {
  left: 14%;
  top: 38%;
  width: 24px;
  transform: rotate(18deg) scaleX(-1);
}
.hero-doodle--lightbulb-3 {
  left: 28%;
  top: 8%;
  transform: rotate(-8deg);
}
.hero-doodle--lightbulb-4 {
  left: 34%;
  top: 32%;
  width: 26px;
  transform: rotate(14deg);
}
.hero-doodle--lightbulb-5 {
  left: 62%;
  top: 10%;
  transform: rotate(-20deg) scaleX(-1);
}
/* у nav справа */
.hero-doodle--lightbulb-6 {
  left: auto;
  right: 14%;
  top: 36%;
  width: 24px;
  transform: rotate(8deg);
}
.hero-doodle--lightbulb-7 {
  left: auto;
  right: 3%;
  top: 14%;
  width: 22px;
  transform: rotate(-16deg) scaleX(-1);
}
.hero-doodle--lightbulb-8 {
  left: 7%;
  bottom: 8%;
  width: 20px;
  transform: rotate(22deg);
}
/* у логотипа (сова + «Зубри.РФ») */
.hero-doodle--lightbulb-9 {
  left: 20%;
  top: calc(20% - 20px);
  width: 18px;
  transform: rotate(-6deg) scaleX(-1);
}
.hero-doodle--lightbulb-10 {
  left: 36%;
  bottom: 10%;
  width: 24px;
  transform: rotate(16deg);
}
.hero-doodle--lightbulb-11 {
  left: auto;
  right: 10%;
  bottom: 12%;
  width: 20px;
  transform: rotate(-24deg) scaleX(-1);
}
.hero-doodle--lightbulb-12 {
  right: 1%;
  bottom: 8%;
  width: 22px;
  transform: rotate(10deg);
}
.hero-doodle--plane {
  right: 0.5%;
  bottom: 10%;
  width: min(130px, 14vw);
  height: auto;
}
.hero-board__center {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  position: relative;
  z-index: 4;
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  /* симметричные поля под искры по бокам заголовка */
  padding: 0 3.2rem;
}
/* Искры: absolute в полях padding, лучи наружу от надписи */
.hero-board__center .hero-doodle--sparkle {
  position: absolute;
  top: 50%;
  width: 48px;
  height: auto;
  margin: 0;
  transform: translateY(calc(-50% - 0.1em));
}
.hero-board__center .hero-doodle--sparkle-right {
  left: 0;
  right: auto;
  /* лучи снаружи текста, не под заголовком */
  transform: translate(calc(-100% + 0.4rem), calc(-50% - 0.1em));
}
.hero-board__center .hero-doodle--sparkle-left {
  left: auto;
  right: 0;
  transform: translate(calc(100% - 0.4rem), calc(-50% - 0.1em)) scaleX(-1);
}
.hero-board__center .hero-board__title {
  margin: 0;
  display: inline-block;
  position: relative;
  top: 20px;
}
.hero-board__filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-board__title {
  font-family: var(--font-chalk);
  font-size: 2.85rem;
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
  letter-spacing: 0.03em;
  color: #f6f4ee;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.45);
  /* Мел: пыльное свечение + лёгкая зернистость по краям (SVG filter) */
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.95),
    0 0 5px rgba(255, 255, 255, 0.32),
    0 0 16px rgba(255, 255, 255, 0.1),
    1px 1px 0 rgba(255, 255, 255, 0.4),
    -1px 0 0 rgba(255, 255, 255, 0.22),
    2px 3px 2px rgba(0, 0, 0, 0.32),
    -1px 2px 1px rgba(0, 0, 0, 0.2);
  filter: url(#hero-chalk-text);
  -webkit-filter: url(#hero-chalk-text);
}
.hero-board__greeting {
  font-family: var(--font-chalk);
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0.15rem 0 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  position: relative;
  top: 20px;
}
.hero-board__nav {
  grid-column: 3;
  position: relative;
  justify-self: end;
  align-self: center;
  /* отступ под самолётик справа */
  padding-right: min(88px, 8.5vw);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-shrink: 1;
  min-width: 0;
  gap: 0.7rem;
  z-index: 5;
}
.hero-board__nav a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-family: var(--font-chalk);
  font-size: clamp(0.78rem, 0.55vw + 0.55rem, 0.92rem);
  font-weight: 600;
  text-align: center;
  display: grid;
  grid-template-rows: 38px minmax(2.5em, auto);
  gap: 0.12rem;
  justify-items: center;
  width: clamp(3.35rem, 2.2vw + 2rem, 4.5rem);
  line-height: 1.12;
  flex-shrink: 0;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.25);
  transition: color 0.18s, text-shadow 0.18s, transform 0.18s;
}
.hero-board__nav-label {
  grid-row: 2;
  display: block;
  width: 100%;
  text-align: center;
  hyphens: auto;
}
.hero-board__nav a i {
  grid-row: 1;
  align-self: center;
  display: block;
  font-size: 1.4rem;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.78);
  opacity: 1;
  /* Без SVG filter — он создавал новый stacking context и гасил слои под nav */
  filter: none;
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.35);
  transition: color 0.18s, text-shadow 0.18s;
}
.hero-board__nav a:hover {
  color: #fff;
  transform: translateY(-2px) scale(1.08);
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.9),
    0 0 14px rgba(255, 255, 255, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.4);
}
.hero-board__nav a:hover i {
  color: #fff;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.9),
    0 0 14px rgba(255, 255, 255, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.35);
}
.hero-board__nav a.hero-board__nav--disabled,
.hero-board__nav a[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
/* Аватарка в шапке (вместо иконки «Профиль») */
.hero-board__avatar {
  grid-row: 1;
  align-self: center;
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 0;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.12);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.hero-board__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Дефолтная сова — с отступом, чтобы не обрезалась по кругу */
.hero-board__avatar--default {
  background: rgba(255, 255, 255, 0.16);
}
.hero-board__avatar--default img {
  object-fit: contain;
  padding: 3px;
}
.hero-board__nav--profile:hover .hero-board__avatar {
  border-color: #fff;
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.7),
    0 0 14px rgba(255, 255, 255, 0.35);
}
/* Убираем специальное выделение у кнопок auth — все одинаковые, как мелом написаны */
.hero-board__nav a.hero-board__nav--auth {
  font-weight: 600;
}
.hero-board__nav a.hero-board__nav--register {
  background: none;
  border-radius: 0;
  padding: 0;
}
.hero-board__nav a.hero-board__nav--register:hover {
  background: none;
}

/* User bar */
.user-bar {
  background: var(--user-bar);
  color: #fff;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}
.user-bar a {
  color: #fff;
  text-decoration: none;
  margin-left: 0.5rem;
}
.user-bar a:hover { text-decoration: underline; }

/* Workspace */
.workspace {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 2rem 1.5rem 2.5rem;
}

/* Footer — та же доска: CSS-рамка + текстура поверхности */
.theme-v08 .footer {
  flex-shrink: 0;
  position: relative;
  background-color: var(--chalkboard);
  background-image: url("../../images/board/hero-chalkboard-texture.png");
  background-size: 512px 512px;
  background-repeat: repeat;
  color: #fff;
  padding: 1.5rem 1rem 1.75rem;
  margin-top: auto;
  border: 14px solid var(--board-frame);
  border-image: linear-gradient(
    135deg,
    var(--board-frame-light) 0%,
    var(--board-frame) 25%,
    var(--board-frame-dark) 50%,
    var(--board-frame) 75%,
    var(--board-frame-light) 100%
  ) 1;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.35),
    inset 0 4px 18px rgba(0, 0, 0, 0.35),
    0 -4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
/* Меловые мортборды по футеру (декор под текстом) */
.footer__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.footer-mortarboard {
  position: absolute;
  display: block;
  height: auto;
  opacity: 0.62;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));
}
.footer-mortarboard--1 {
  left: 2%;
  top: 10%;
  width: 46px;
  transform: rotate(-16deg);
}
.footer-mortarboard--2 {
  left: 14%;
  bottom: 18%;
  width: 52px;
  transform: rotate(14deg) scaleX(-1);
}
.footer-mortarboard--3 {
  left: 32%;
  top: 6%;
  width: 42px;
  transform: rotate(-9deg);
}
.footer-mortarboard--4 {
  left: 48%;
  bottom: 12%;
  width: 48px;
  transform: rotate(22deg);
}
.footer-mortarboard--5 {
  right: 28%;
  top: 14%;
  width: 44px;
  transform: rotate(-20deg) scaleX(-1);
}
.footer-mortarboard--6 {
  right: 10%;
  bottom: 22%;
  width: 50px;
  transform: rotate(11deg);
}
.footer-mortarboard--7 {
  right: 1%;
  top: 32%;
  width: 40px;
  transform: rotate(-12deg) scaleX(-1);
}
.footer-mortarboard--8 {
  left: 8%;
  top: 42%;
  width: 36px;
  transform: rotate(28deg);
}
.footer-mortarboard--9 {
  left: 22%;
  top: 20%;
  width: 30px;
  transform: rotate(-18deg) scaleX(-1);
}
.footer-mortarboard--10 {
  left: 38%;
  bottom: 8%;
  width: 38px;
  transform: rotate(12deg);
}
.footer-mortarboard--11 {
  right: 18%;
  bottom: 10%;
  width: 34px;
  transform: rotate(-22deg) scaleX(-1);
}
.footer-mortarboard--12 {
  right: 4%;
  top: 8%;
  width: 44px;
  transform: rotate(18deg);
}
.theme-v08 .footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.035) 0%, transparent 35%);
  mix-blend-mode: screen;
  z-index: 0;
}
.theme-v08 .footer::after {
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  top: -14px;
  height: 14px;
  background: linear-gradient(180deg, var(--board-frame-dark) 0%, var(--board-frame-light) 100%);
  box-shadow: inset 0 -2px 3px rgba(255, 255, 255, 0.2);
  z-index: 3;
}
.theme-v08 .footer .container {
  position: relative;
  z-index: 2;
}
.theme-v08 .footer h5,
.theme-v08 .footer p,
.theme-v08 .footer a,
.theme-v08 .footer div,
.theme-v08 .footer-copyright {
  font-family: var(--font-chalk);
  -webkit-text-stroke: 0.25px rgba(255, 255, 255, 0.35);
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.9),
    0 0 5px rgba(255, 255, 255, 0.22),
    1px 1px 0 rgba(255, 255, 255, 0.3),
    1px 2px 2px rgba(0, 0, 0, 0.3);
}
.theme-v08 .footer h5 {
  color: #f6f4ee;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.theme-v08 .footer p,
.theme-v08 .footer div {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.1rem;
}
.theme-v08 .footer a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.18s, text-shadow 0.18s, transform 0.18s;
  display: inline-block;
}
.theme-v08 .footer a:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  text-shadow:
    0 0 4px rgba(255, 255, 255, 1),
    0 0 12px rgba(255, 255, 255, 0.65),
    0 0 24px rgba(255, 255, 255, 0.25),
    1px 1px 0 rgba(255, 255, 255, 0.45),
    1px 2px 2px rgba(0, 0, 0, 0.3);
}
.theme-v08 .footer i {
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.18s, text-shadow 0.18s;
}
.theme-v08 .footer .mb-2:hover i,
.theme-v08 .footer div:hover > i {
  color: #fff;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.9),
    0 0 14px rgba(255, 255, 255, 0.45);
}
.theme-v08 .footer .text-muted { color: rgba(255, 255, 255, 0.75) !important; }
.theme-v08 .footer-copyright {
  color: rgba(255, 255, 255, 0.7);
  margin: 0.5rem 0 0;
  font-size: 1rem;
}

/* Широкий десктоп: компактнее nav и декор при zoom ~110–125% */
@media (min-width: 1301px) and (max-width: 1760px) {
  .hero-board__inner { gap: 0.65rem; }
  .hero-board__center {
    /* поля под искры — не сжимать, иначе лучи наезжают на текст */
    padding: 0 clamp(2.6rem, 3.2vw, 3.2rem);
  }
  .hero-board__center .hero-doodle--sparkle {
    width: 40px;
  }
  /* звёздный след уводим от логотипа */
  .hero-doodle--star-trail {
    left: -3%;
    bottom: 20%;
    width: min(165px, 15vw);
  }
  .hero-doodle--plane {
    width: min(110px, 12vw);
    bottom: 12%;
  }
  .hero-board__title {
    font-size: clamp(1.95rem, 2.4vw, 2.55rem);
  }
  .hero-board__greeting { font-size: clamp(0.95rem, 1.1vw, 1.15rem); }
  .hero-board__nav {
    gap: 0.45rem;
    padding-right: min(72px, 7vw);
  }
  .hero-board__nav a {
    width: clamp(3.2rem, 2vw + 1.75rem, 3.85rem);
    grid-template-rows: 34px minmax(2.4em, auto);
  }
  .hero-board__nav a i { font-size: 1.2rem; }
  .hero-board__avatar { width: 30px; height: 30px; }
}

/* Планшеты и небольшие ноутбуки (Nest Hub, Nest Hub Max и подобные) —
   трёхколоночная шапка не вмещается, переключаем в вертикальный стек */
@media (min-width: 993px) and (max-width: 1300px) {
  .hero-board__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.75rem;
  }
  .hero-board__logo {
    justify-content: center;
    justify-self: center;
    margin-left: 0;
  }
  .hero-board__center {
    grid-column: 1;
    padding: 0 0.5rem;
  }
  .hero-board__center .hero-board__title { top: 0; }
  .hero-board__greeting { top: 0; margin-top: 0.05rem; }
  .hero-board__nav {
    position: static;
    transform: none;
    grid-column: 1;
    right: auto;
    padding-right: 0;
    max-width: 100%;
    justify-content: center;
    justify-self: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
  }
  .hero-board__decor { display: none; }
  .hero-board__center .hero-doodle--sparkle { display: none; }
}

@media (max-width: 992px) {
  .hero-board {
    border-width: 10px;
    padding: 1.5rem 1.25rem 1.75rem;
  }
  .hero-board::after {
    left: -10px;
    right: -10px;
    bottom: -10px;
    height: 10px;
  }
  /* На узких экранах убираем меловые картинки с доски —
     остаётся лого-сова, заголовок «Цифровой репетитор» и навигация */
  .hero-board__decor { display: none; }
  .hero-board__center .hero-doodle--sparkle { display: none; }
  .hero-board__center { padding: 0; }

  .theme-v08 .footer {
    border-width: 10px;
    padding: 1.25rem 1rem 1.5rem;
  }
  .theme-v08 .footer::after {
    left: -10px;
    right: -10px;
    top: -10px;
    height: 10px;
  }
  .footer-mortarboard { opacity: 0.5; }
  .footer-mortarboard--8,
  .footer-mortarboard--9,
  .footer-mortarboard--10,
  .footer-mortarboard--11,
  .footer-mortarboard--12 { display: none; }
  .footer-mortarboard--1 { width: 38px; top: 8%; }
  .footer-mortarboard--2 { width: 42px; left: 10%; }
  .footer-mortarboard--3 { width: 34px; left: 28%; }
  .footer-mortarboard--4 { width: 40px; left: 44%; }
  .footer-mortarboard--5 { width: 36px; right: 24%; }
  .footer-mortarboard--6 { width: 40px; right: 6%; }
  .footer-mortarboard--7 { width: 32px; }

  .hero-board__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.85rem;
  }
  .hero-board__logo {
    justify-content: center;
    justify-self: center;
    margin-left: 0;
  }
  .hero-board__center { grid-column: 1; }
  .hero-board__center .hero-board__title { top: 0; }
  .hero-board__greeting { top: 0; margin-top: 0.05rem; }
  .hero-board__nav {
    position: static;
    transform: none;
    grid-column: 1;
    justify-content: center;
    justify-self: center;
    padding-right: 0;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
  }
  .hero-board__title {
    font-size: 2.1rem;
    filter: url(#hero-chalk-text);
    -webkit-filter: url(#hero-chalk-text);
  }
}

/* Телефоны и небольшие планшеты */
@media (max-width: 768px) {
  .hero-board {
    border-width: 8px;
    padding: 1.1rem 1rem 1.35rem;
  }
  .hero-board::after { left: -8px; right: -8px; bottom: -8px; height: 8px; }

  .hero-board__logo-img { width: 48px; height: 48px; }
  .hero-board__brand { font-size: 1.2rem; }
  .hero-board__tagline { font-size: 0.85rem; }
  .hero-board__title { font-size: 1.85rem; }
  .hero-board__greeting { font-size: 1rem; }
  .hero-board__nav a { font-size: 1rem; }
  .hero-board__nav a i { font-size: 1.2rem; }
  .hero-board__avatar { width: 30px; height: 30px; }

  /* Убираем декоративный сдвиг top:20px — на мобильном он наезжает на навигацию */
  .hero-board__center .hero-board__title { top: 0; }
  /* Приветствие тоже сбрасываем и прижимаем к заголовку */
  .hero-board__greeting { top: 0; margin-top: 0.05rem; }
  /* Убираем широкие padding под искры — на узком экране они не нужны */
  .hero-board__center { padding: 0 0.5rem; }
  /* Увеличиваем зазор между строками грида */
  .hero-board__inner { gap: 1rem; }

  .workspace { padding: 1.5rem 1rem 2rem; }

  /* Компактный футер на планшетах/телефонах */
  .theme-v08 .footer { padding: 1.1rem 0.9rem 1.25rem; }
  .theme-v08 .footer .row { --bs-gutter-y: 0; }
  .theme-v08 .footer .col-md-4 { margin-bottom: 0.6rem; }
  .theme-v08 .footer h5 { font-size: 1.25rem; margin-bottom: 0.35rem; }
  .theme-v08 .footer p,
  .theme-v08 .footer div { font-size: 0.95rem; }
  .theme-v08 .footer .mb-2 { margin-bottom: 0.2rem !important; }
  .theme-v08 .footer .mb-3 { margin-bottom: 0.5rem !important; }
  .theme-v08 .footer-copyright { font-size: 0.88rem; margin-top: 0.35rem; }
}

/* Узкие телефоны */
@media (max-width: 480px) {
  .hero-board { padding: 0.9rem 0.75rem 1.15rem; }
  .hero-board__logo { gap: 0.5rem; }
  .hero-board__logo-img { width: 42px; height: 42px; }
  .hero-board__brand { font-size: 1.05rem; }
  .hero-board__tagline { display: none; }
  .hero-board__title {
    font-size: 1.55rem;
    overflow-wrap: anywhere;
  }
  .hero-board__greeting { font-size: 0.92rem; }
  .hero-board__nav { gap: 0.6rem 1.1rem; }
  .hero-board__nav a { font-size: 0.9rem; gap: 0.1rem; }
  .hero-board__nav a i { font-size: 1.05rem; margin-bottom: 0.05rem; }
  .hero-board__avatar { width: 26px; height: 26px; margin-bottom: 0.05rem; }

  .user-bar { font-size: 0.8rem; }
  .workspace { padding: 1.25rem 0.75rem 1.75rem; }

  /* Футер без декора на самых узких экранах */
  .footer__decor { display: none; }
  .theme-v08 .footer { border-width: 8px; padding: 1rem 0.75rem 1.1rem; }
  .theme-v08 .footer::after { left: -8px; right: -8px; top: -8px; height: 8px; }
  .theme-v08 .footer h5 { font-size: 1.15rem; margin-bottom: 0.3rem; }
  .theme-v08 .footer p, .theme-v08 .footer div { font-size: 0.9rem; }
  .theme-v08 .footer .col-md-4 { margin-bottom: 0.5rem; }
  .theme-v08 .footer-copyright { font-size: 0.82rem; }
}

/* Очень узкие телефоны (≈320–360px) */
@media (max-width: 360px) {
  .hero-board { border-width: 6px; padding: 0.8rem 0.6rem 1rem; }
  .hero-board::after { left: -6px; right: -6px; bottom: -6px; height: 6px; }
  .hero-board__logo-img { width: 38px; height: 38px; }
  .hero-board__brand { font-size: 0.98rem; }
  .hero-board__title { font-size: 1.35rem; }
  .hero-board__nav { gap: 0.5rem 0.9rem; }
  .hero-board__nav a { font-size: 0.82rem; }
  .hero-board__nav a i { font-size: 0.98rem; }
  .hero-board__avatar { width: 24px; height: 24px; }
}