/* =========================================================================
   «Шпаргалочка» — дизайн-система Этапа 6Б (ui.css)

   Подключается ПОСЛЕ style.css. Все новые компоненты — с префиксом ui-,
   чтобы не пересекаться со старыми классами (.hero, .panel, .progress …),
   на которых ещё держатся экраны результатов, лекции, профиль и админка.

   Разделы:
     1. Токены и основа страницы
     2. Шапка, меню профиля, мобильное меню
     3. Каркас страницы, hero
     4. Карточки шагов, поля, плитки выбора, загрузка файлов
     5. Кнопки, CTA-строка, расход шпаргалок
     6. Боковая колонка и аккордеоны
     7. Кабинет и лендинг
     8. Учебники, результаты, прогресс
     9. Подписка
    10. Подготовка к контрольной
    11. Подвал, служебное, адаптив
   ========================================================================= */

/* Nunito — локальные файлы (variable 400–900). Объявлены после Google Fonts, поэтому используются они. */
@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/nunito-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/nunito-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. Токены и основа ------------------------------------------------------ */

:root {
    --ui-ink: #141f4a;           /* заголовки */
    --ui-text: #2b3763;          /* основной текст */
    --ui-muted: #56628a;         /* второстепенный текст — не светлее, чтобы читался */
    --ui-line: #e4eaf6;
    --ui-line-strong: #d3dcee;
    --ui-bg: #f5f8fe;
    --ui-card: #ffffff;

    --ui-blue: #3a78f2;
    --ui-blue-50: #eaf2ff;
    --ui-blue-100: #dbe8ff;
    --ui-navy: #172a6e;
    --ui-navy-hover: #10205a;
    --ui-yellow: #ffc928;
    --ui-yellow-50: #fff7d9;
    --ui-yellow-dark: #d9a300;
    --ui-pink-50: #ffecf3;
    --ui-pink: #f0628f;
    --ui-lav-50: #f1ecff;
    --ui-lav: #7b5cf0;
    --ui-mint-50: #e6f8ef;
    --ui-mint: #1fa874;
    --ui-peach-50: #fff1e6;
    --ui-red: #e5484d;

    --ui-radius-lg: 28px;
    --ui-radius: 22px;
    --ui-radius-sm: 14px;
    --ui-shadow: 0 10px 30px rgba(36, 60, 130, .08);
    --ui-shadow-sm: 0 4px 14px rgba(36, 60, 130, .07);
    --ui-focus: 0 0 0 3px rgba(58, 120, 242, .28);

    --font-ui: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Shantell Sans", "Comic Sans MS", cursive;
    --ui-font: var(--font-ui);
    --ui-hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
}

body.ui-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--ui-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ui-text);
    background-color: var(--ui-bg);
    /* лёгкая «тетрадная клетка», как на референсах */
    background-image:
        linear-gradient(rgba(70, 110, 200, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(70, 110, 200, .045) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;     /* страховка от горизонтального скролла; вертикаль не трогаем */
}

.ui-body h1, .ui-body h2, .ui-body h3 { color: var(--ui-ink); }
.ui-body img { max-width: 100%; }

.ui-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.ui-skip {
    position: absolute; left: 12px; top: -60px; z-index: 200;
    padding: 10px 16px; border-radius: 12px;
    background: var(--ui-navy); color: #fff; font-weight: 800;
}
.ui-skip:focus { top: 12px; }

/* 2. Шапка ---------------------------------------------------------------- */

.ui-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--ui-line);
}

.ui-header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(1280px, 100% - 32px);
    min-height: 70px;
    margin: 0 auto;
}

.ui-logo { display: inline-flex; flex-shrink: 0; line-height: 0; }
.ui-logo img { display: block; width: auto; height: 46px; }

.ui-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
}

.ui-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 14px;
    color: var(--ui-ink);
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.ui-nav a:hover { background: var(--ui-blue-50); }
.ui-nav a[aria-current="page"] { background: var(--ui-blue-50); color: var(--ui-blue); }

.ui-header__right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.ui-nav + .ui-header__right { margin-left: 0; }

/* Профиль: <details> работает и без JS */
.ui-user { position: relative; }

.ui-user > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    background: var(--ui-blue-50);
    color: var(--ui-ink);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ui-user > summary::-webkit-details-marker { display: none; }
.ui-user > summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }

.ui-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd9e6, #ffe9b3);
    color: var(--ui-ink);
    font-weight: 900;
}

.ui-chevron {
    width: 10px; height: 10px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease;
}
.ui-user[open] .ui-chevron { transform: translateY(2px) rotate(-135deg); }

.ui-user__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 70;
    width: 280px;
    padding: 10px;
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 22px 50px rgba(20, 31, 74, .16);
}

.ui-menu-label {
    margin: 6px 10px 4px;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ui-menu-item,
.ui-user__menu form button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ui-ink);
    font: inherit;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.ui-menu-item:hover,
.ui-user__menu form button:hover { background: var(--ui-blue-50); }
.ui-user__menu form button.is-active { background: var(--ui-lav-50); color: var(--ui-lav); }
.ui-user__menu form { margin: 0; }
.ui-menu-sep { height: 1px; margin: 6px 4px; background: var(--ui-line); }
.ui-menu-item--danger { color: #b4232a; }

/* Мобильное меню (гамбургер) */
.ui-burger {
    display: none;
    place-items: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--ui-blue-50);
    color: var(--ui-ink);
    cursor: pointer;
}
.ui-burger:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-burger span,
.ui-burger span::before,
.ui-burger span::after {
    display: block;
    width: 20px;
    height: 2.5px;
    border-radius: 2px;
    background: currentColor;
    content: "";
    position: relative;
}
.ui-burger span::before { position: absolute; top: -6px; }
.ui-burger span::after { position: absolute; top: 6px; }

.ui-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(20, 31, 74, .32);
}

.ui-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    width: min(380px, 100%);
    background: #fff;
    box-shadow: -20px 0 50px rgba(20, 31, 74, .18);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ui-drawer[hidden], .ui-drawer-overlay[hidden] { display: none; }

.ui-drawer__head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ui-line);
    background: #fff;
}
.ui-drawer__head img { height: 38px; width: auto; }

.ui-drawer__close {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: var(--ui-blue-50);
    color: var(--ui-ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.ui-drawer__body { padding: 8px 12px 24px; }
.ui-drawer__body .ui-menu-label { margin-top: 14px; }

.ui-drawer__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 6px 10px;
    border-radius: 14px;
    color: var(--ui-ink);
    font-weight: 800;
    text-decoration: none;
}
.ui-drawer__link:hover { background: var(--ui-blue-50); }
.ui-drawer__link[aria-current="page"] { background: var(--ui-blue-50); color: var(--ui-blue); }
.ui-drawer__link img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.ui-drawer__link small { display: block; color: var(--ui-muted); font-weight: 600; font-size: 13px; line-height: 1.3; }

html.ui-lock, html.ui-lock body { overflow: hidden; }

/* 3. Каркас страницы и hero ------------------------------------------------ */

.ui-main {
    flex: 1 0 auto;            /* страница растёт по содержимому, подвал — внизу */
    width: min(1280px, 100% - 32px);
    margin: 0 auto;
    padding: 22px 0 56px;
}

.ui-crumbs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--ui-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.ui-crumbs:hover { color: var(--ui-blue); }
.ui-crumbs-row { display: flex; flex-wrap: wrap; gap: 6px 18px; }

.ui-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: stretch;
    gap: 12px;
    padding: 0 32px;
    border-radius: var(--ui-radius-lg);
    background:
        radial-gradient(circle at 12% 110%, rgba(255, 226, 140, .55) 0, transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(255, 214, 230, .7) 0, transparent 30%),
        linear-gradient(120deg, #e9f2ff 0%, #f3f0ff 55%, #fff6df 100%);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: var(--ui-shadow-sm);
    overflow: hidden;   /* только скругление углов: текст и кнопки внутри не обрезаются */
}

.ui-hero--mint { background: radial-gradient(circle at 92% 8%, rgba(255, 233, 160, .7) 0, transparent 30%), linear-gradient(120deg, #e3f7ef 0%, #eef6ff 60%, #fff8e3 100%); }
.ui-hero--pink { background: radial-gradient(circle at 92% 10%, rgba(214, 230, 255, .8) 0, transparent 32%), linear-gradient(120deg, #ffeef5 0%, #f4f0ff 55%, #fff6df 100%); }
.ui-hero--yellow { background: radial-gradient(circle at 90% 8%, rgba(255, 214, 230, .7) 0, transparent 30%), linear-gradient(120deg, #fff6d8 0%, #f3f6ff 60%, #eaf2ff 100%); }
.ui-hero--lav { background: radial-gradient(circle at 10% 110%, rgba(255, 226, 140, .5) 0, transparent 34%), linear-gradient(120deg, #efeaff 0%, #eaf2ff 60%, #fff6df 100%); }

.ui-hero__text {
    position: relative;
    z-index: 2;
    align-self: center;
    padding: 26px 0 28px;
}

.ui-hero h1 {
    margin: 4px 0 10px;
    font-size: clamp(30px, 3.6vw, 50px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.02em;
}

.ui-hero p.ui-lead {
    max-width: 560px;
    margin: 0;
    color: var(--ui-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
}

.ui-hero__art {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    padding-top: 14px;
}

.ui-hero__art > img {
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(170px, 19vw, 250px);
    object-fit: contain;
    object-position: bottom center;
}

.ui-bubble {
    position: absolute;
    top: 18px;
    left: 0;
    max-width: 170px;
    padding: 10px 14px;
    border-radius: 18px 18px 18px 4px;
    background: rgba(255, 249, 221, .96);
    box-shadow: var(--ui-shadow-sm);
    color: var(--ui-ink);
    font-family: var(--ui-hand);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    transform: rotate(-5deg);
}

/* Двухколоночная рабочая область: слева работа, справа помощь */
.ui-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 20px;
    margin-top: 20px;
}

.ui-stack { display: grid; gap: 16px; min-width: 0; }
.ui-aside { display: grid; gap: 16px; min-width: 0; }

/* 4. Карточки шагов, поля -------------------------------------------------- */

.ui-card,
.ui-step {
    min-width: 0;
    padding: 22px 24px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-card);
    box-shadow: var(--ui-shadow-sm);
}

.ui-card--flat { box-shadow: none; }
.ui-card--yellow { background: linear-gradient(120deg, #fffaf0, #fff4d6); border-color: #ffe9a8; }
.ui-card--blue { background: linear-gradient(160deg, #f1f6ff, #e7f0ff); border-color: #d7e6ff; }
.ui-card--mint { background: linear-gradient(160deg, #f0fbf5, #e3f7ee); border-color: #c9eedc; }
.ui-card--lav { background: linear-gradient(160deg, #f7f4ff, #efeaff); border-color: #e0d7ff; }
.ui-card--pink { background: linear-gradient(160deg, #fff6f9, #ffecf3); border-color: #ffd6e5; }

.ui-step__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.ui-step__num {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ui-yellow-50);
    border: 2px solid #ffe18a;
    color: var(--ui-ink);
    font-size: 20px;
    font-weight: 900;
}
.ui-step__num--lav { background: var(--ui-lav-50); border-color: #d9ceff; }

.ui-step__head h2,
.ui-card__title {
    margin: 2px 0 2px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
}
.ui-step__head h2 .ui-optional { color: var(--ui-lav); font-weight: 800; }
.ui-step__head p,
.ui-hint {
    margin: 0;
    color: var(--ui-muted);
    font-size: 14px;
    font-weight: 600;
}

.ui-fields {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 14px;
}
.ui-fields + .ui-fields,
.ui-fields + .ui-field,
.ui-field + .ui-field { margin-top: 14px; }
.ui-fields > .ui-field + .ui-field { margin-top: 0; }   /* в сетке отступ задаёт gap */
.ui-span-2 { grid-column: span 2; }
.ui-span-all { grid-column: 1 / -1; }

.ui-field { display: grid; align-content: start; gap: 6px; min-width: 0; }

.ui-label {
    color: var(--ui-ink);
    font-size: 14px;
    font-weight: 800;
}
.ui-label em { color: var(--ui-muted); font-style: normal; font-weight: 600; }

.ui-body .ui-input,
.ui-body .ui-select,
.ui-body .ui-textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1.5px solid var(--ui-line-strong);
    border-radius: var(--ui-radius-sm);
    background: #fff;
    color: var(--ui-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ui-body .ui-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ui-ink) 50%),
        linear-gradient(135deg, var(--ui-ink) 50%, transparent 50%);
    background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

.ui-body .ui-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }

.ui-body .ui-input::placeholder,
.ui-body .ui-textarea::placeholder { color: #8a94b4; font-weight: 500; }

.ui-body .ui-input:focus,
.ui-body .ui-select:focus,
.ui-body .ui-textarea:focus { outline: none; border-color: var(--ui-blue); box-shadow: var(--ui-focus); }

.ui-alert {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: var(--ui-radius-sm);
    border: 1px solid #ffc9cc;
    background: #fff1f2;
    color: #9d1c24;
    font-weight: 700;
}
.ui-alert--ok { border-color: #bfe8d3; background: #ecfaf3; color: #11603f; }
.ui-alert--info { border-color: #d7e6ff; background: #f1f6ff; color: var(--ui-navy); }

/* Плитки выбора (источник материала, вкладки) */
.ui-tiles {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.ui-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 12px 16px;
    border: 1.5px solid var(--ui-line);
    border-radius: 18px;
    background: #fbfcff;
    color: var(--ui-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ui-tile:hover { transform: translateY(-1px); box-shadow: var(--ui-shadow-sm); }
.ui-tile img { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
.ui-tile strong { display: block; font-size: 16px; font-weight: 900; line-height: 1.2; }
.ui-tile small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 13px; font-weight: 600; line-height: 1.3; }

.ui-tile[aria-selected="true"],
.ui-tile.is-selected,
.ui-tile:has(input:checked) {
    border-color: #b9a5ff;
    background: var(--ui-lav-50);
    box-shadow: 0 0 0 3px rgba(123, 92, 240, .12);
}

.ui-tile input[type="radio"],
.ui-tile input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ui-tile:focus-visible,
.ui-tile:has(input:focus-visible) { outline: none; box-shadow: var(--ui-focus); }

.ui-tile--check::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 2px solid var(--ui-line-strong);
    background: #fff;
}
.ui-tile--check:has(input:checked)::after {
    border-color: var(--ui-lav);
    background: var(--ui-lav) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.ui-tabpanel { margin-top: 2px; }
.ui-tabpanel + .ui-tabpanel { margin-top: 14px; }
.js .ui-tabpanel[hidden] { display: none; }
/* Без JS все панели видны: отправка формы работает так же */
html:not(.js) .ui-tabpanel[hidden] { display: block; }

/* Типы карточек («Выучить материал»): флажки-плитки */
.ui-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}
.ui-types .ui-tile { min-height: 70px; padding-right: 36px; }
.ui-types .ui-tile img { width: 38px; height: 38px; }
.ui-types .ui-tile strong { font-size: 15px; }

.ui-inline-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 16px;
}
.ui-inline-field .ui-select { width: auto; min-width: 190px; }

.ui-settings-note { align-self: end; margin: 0; font-size: 14px; }

/* Радиокнопки-«пилюли» */
.ui-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.ui-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1.5px solid var(--ui-line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--ui-ink);
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.ui-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ui-chip:has(input:checked) { border-color: var(--ui-blue); background: var(--ui-blue-50); color: var(--ui-blue); }
.ui-chip:has(input:focus-visible) { box-shadow: var(--ui-focus); }

/* Загрузка файлов */
.ui-drop {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 22px 18px;
    border: 2px dashed #b9cff8;
    border-radius: 20px;
    background: linear-gradient(160deg, #f7faff, #eef4ff);
    color: var(--ui-ink);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.ui-drop:hover, .ui-drop.is-dragover { border-color: var(--ui-blue); background: #eaf2ff; }
.ui-drop:focus-within { box-shadow: var(--ui-focus); }
.ui-drop img { width: 74px; height: auto; }
.ui-drop strong { font-size: 17px; font-weight: 900; }
.ui-drop small { color: var(--ui-muted); font-size: 13px; font-weight: 600; }

.ui-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ui-drop__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 14px;
    background: var(--ui-blue);
    color: #fff;
    font-weight: 900;
    pointer-events: none;
}

.ui-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.ui-previews:empty { display: none; }

.ui-preview {
    position: relative;
    display: grid;
    gap: 4px;
    min-width: 0;
    margin: 0;
}
.ui-preview__img {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    background: #f3f6fd;
    overflow: hidden;
}
.ui-preview__img img { width: 100%; height: 100%; object-fit: cover; }
.ui-preview__img .ui-preview__ext { color: var(--ui-red); font-weight: 900; font-size: 18px; }
.ui-preview figcaption {
    overflow: hidden;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-preview__remove {
    position: absolute;
    top: -8px;
    right: -8px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ui-ink);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.ui-preview__remove:focus-visible { outline: none; box-shadow: var(--ui-focus); }

.ui-file-note { margin-top: 8px; color: var(--ui-muted); font-size: 13px; font-weight: 700; }
.ui-file-note.is-error { color: #b4232a; }

/* 5. Кнопки и CTA --------------------------------------------------------- */

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 22px;
    border: 0;
    border-radius: 16px;
    font: inherit;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.ui-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-btn:active { transform: translateY(1px); }

.ui-btn--navy { background: var(--ui-navy); color: #fff; box-shadow: 0 6px 16px rgba(23, 42, 110, .25); }
.ui-btn--navy:hover { background: var(--ui-navy-hover); }
.ui-btn--yellow { background: var(--ui-yellow); color: var(--ui-ink); box-shadow: 0 5px 0 var(--ui-yellow-dark); }
.ui-btn--yellow:hover { background: #ffd24d; }
.ui-btn--yellow:active { box-shadow: 0 2px 0 var(--ui-yellow-dark); transform: translateY(3px); }
.ui-btn--outline { background: #fff; color: var(--ui-ink); border: 2px solid var(--ui-yellow); }
.ui-btn--ghost { background: var(--ui-blue-50); color: var(--ui-navy); }
.ui-btn--ghost:hover { background: var(--ui-blue-100); }
.ui-btn--lav { background: var(--ui-lav); color: #fff; box-shadow: 0 6px 16px rgba(123, 92, 240, .28); }
.ui-btn--mint { background: var(--ui-mint); color: #fff; }
.ui-btn--lg { min-height: 56px; padding: 14px 30px; font-size: 18px; border-radius: 18px; }
.ui-btn--sm { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.ui-btn--block { width: 100%; }
.ui-btn[disabled], .ui-btn.is-disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.ui-arrow { font-size: 1.15em; line-height: 1; }

.ui-cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px 14px 18px;
    border: 1px solid #ffe7a3;
    border-radius: var(--ui-radius);
    background: linear-gradient(110deg, #fffbee, #fff4d2);
}

.ui-cost {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--ui-ink);
    font-weight: 800;
    line-height: 1.3;
}
.ui-cost img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.ui-cost small { display: block; color: var(--ui-muted); font-weight: 700; font-size: 13px; }

/* 6. Боковая колонка и аккордеоны ----------------------------------------- */

.ui-side {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
}
.ui-side--blue { background: linear-gradient(160deg, #f4f8ff, #e9f1ff); border-color: #dbe8ff; }
.ui-side--mint { background: linear-gradient(160deg, #f3fcf7, #e4f7ee); border-color: #cdeedd; }
.ui-side--yellow { background: linear-gradient(160deg, #fffbef, #fff3d1); border-color: #ffe7a3; }
.ui-side--lav { background: linear-gradient(160deg, #f8f5ff, #efeaff); border-color: #e2d9ff; }

.ui-side > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 10px;
    color: var(--ui-ink);
    font-size: 19px;
    font-weight: 900;
    list-style: none;
    cursor: default;
}
.ui-side > summary::-webkit-details-marker { display: none; }
.ui-side > summary img { width: 30px; height: 30px; object-fit: contain; }
.ui-side__body { padding: 4px 20px 18px; }

.ui-howto { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ui-howto li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.ui-howto__n {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #fff; border: 1.5px solid #cfdcf5;
    color: var(--ui-ink); font-weight: 900;
}
.ui-howto strong { display: block; color: var(--ui-ink); font-size: 15px; font-weight: 900; line-height: 1.3; }
.ui-howto small { display: block; color: var(--ui-muted); font-size: 13px; font-weight: 600; line-height: 1.35; }

.ui-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-checks li { position: relative; padding-left: 30px; color: var(--ui-text); font-size: 14px; font-weight: 700; line-height: 1.4; }
.ui-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ui-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.ui-linkrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--ui-line);
    color: var(--ui-ink);
    font-weight: 800;
    text-decoration: none;
}
.ui-linkrow:hover { border-color: #c8d8f6; background: #f8fbff; }
.ui-linkrow + .ui-linkrow { margin-top: 8px; }
.ui-linkrow__l { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ui-linkrow__l img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }

/* Общий аккордеон (правила, учебные материалы) */
.ui-accordion {
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    background: #fff;
}
.ui-accordion + .ui-accordion { margin-top: 10px; }
.ui-accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 18px;
    color: var(--ui-ink);
    font-weight: 900;
    list-style: none;
    cursor: pointer;
}
.ui-accordion > summary::-webkit-details-marker { display: none; }
.ui-accordion > summary::after {
    content: "";
    flex-shrink: 0;
    width: 9px; height: 9px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.ui-accordion[open] > summary::after { transform: rotate(-135deg); }
.ui-accordion > summary:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 18px; }
.ui-accordion__body { padding: 0 18px 16px; }
.ui-accordion__body > :first-child { margin-top: 0; }

/* Обёртка для экранов результата (их разметка — прежняя, из style.css) */
.ui-result { margin-top: 20px; }
.ui-result > .ui-card { padding: 24px 26px; }

/* 7. Кабинет и лендинг ---------------------------------------------------- */

.ui-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.ui-tool {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 140px;
    padding: 18px 54px 18px 18px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--ui-radius);
    color: var(--ui-ink);
    text-decoration: none;
    box-shadow: var(--ui-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ui-tool:hover { transform: translateY(-3px); box-shadow: var(--ui-shadow); }
.ui-tool:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tool img { width: 92px; height: 92px; object-fit: contain; }
.ui-tool h2 { margin: 0 0 4px; font-size: 21px; font-weight: 900; line-height: 1.2; }
.ui-tool p { margin: 0; color: var(--ui-text); font-size: 14px; font-weight: 600; line-height: 1.4; }
.ui-tool__go {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--ui-ink);
    font-weight: 900;
    box-shadow: var(--ui-shadow-sm);
}
.ui-tool--pink { background: linear-gradient(135deg, #fff1f6, #ffe3ee); }
.ui-tool--blue { background: linear-gradient(135deg, #f0f6ff, #e1edff); }
.ui-tool--yellow { background: linear-gradient(135deg, #fffaea, #fff0c7); }
.ui-tool--mint { background: linear-gradient(135deg, #effbf5, #ddf5e9); }
.ui-tool--lav { background: linear-gradient(135deg, #f6f2ff, #e9e2ff); }
.ui-tool--peach { background: linear-gradient(135deg, #fff6ef, #ffe8d9); }
.ui-tool--new::before {
    content: "Новое";
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--ui-lav);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.ui-dash {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.ui-motivation {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 14px 20px;
    border: 1px solid #ffe7a3;
    border-radius: var(--ui-radius);
    background: linear-gradient(110deg, #fffbee, #fff2cc);
}
.ui-motivation img { width: 56px; height: 56px; object-fit: contain; }
.ui-motivation strong { display: block; color: var(--ui-ink); font-size: 18px; font-weight: 900; }
.ui-motivation span { color: var(--ui-text); font-weight: 600; font-size: 14px; }

/* Лендинг */
.ui-landing-hero { padding-left: 48px; }
.ui-landing-hero h1 { font-size: clamp(38px, 5.2vw, 76px); }
.ui-landing-hero h1 .ui-h1-sub { display: block; margin-top: 6px; font-family: var(--ui-hand); font-size: .8em; font-weight: 700; letter-spacing: 0; }
.ui-landing-hero .ui-hero__art > img { height: clamp(220px, 26vw, 360px); }
.ui-mark { background: linear-gradient(transparent 62%, rgba(255, 201, 40, .55) 62%); border-radius: 4px; }
.ui-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }

.ui-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}
.ui-feature {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 22px 18px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: #fff;
    text-align: center;
    box-shadow: var(--ui-shadow-sm);
}
.ui-feature img { width: 58px; height: 58px; object-fit: contain; }
.ui-feature h3 { margin: 4px 0 0; font-size: 19px; font-weight: 900; }
.ui-feature p { margin: 0; color: var(--ui-muted); font-size: 14px; font-weight: 600; }

.ui-section-title {
    margin: 36px 0 18px;
    color: var(--ui-ink);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 900;
    text-align: center;
}

.ui-steps4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ui-step;
}
.ui-steps4 li {
    position: relative;
    padding: 20px;
    border-radius: var(--ui-radius);
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--ui-line);
}
.ui-steps4 .ui-howto__n { margin-bottom: 8px; }
.ui-steps4 img { position: absolute; top: 14px; right: 16px; width: 48px; height: 48px; object-fit: contain; }
.ui-steps4 h3 { margin: 0 0 4px; font-size: 17px; font-weight: 900; }
.ui-steps4 p { margin: 0; color: var(--ui-muted); font-size: 14px; font-weight: 600; }

/* 8. Учебники, результаты, прогресс --------------------------------------- */

.ui-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 14px;
}

.ui-books {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
}

.ui-book {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
}
.ui-book h3 { margin: 0 0 4px; font-size: 18px; font-weight: 900; line-height: 1.2; }
.ui-book p { margin: 0; color: var(--ui-muted); font-size: 14px; font-weight: 600; line-height: 1.4; }
.ui-book__meta { display: grid; gap: 4px; margin-top: 8px; color: var(--ui-text); font-size: 13px; font-weight: 700; }

/* CSS-обложка: реальных обложек в системе нет — рисуем аккуратную заглушку */
.ui-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 3 / 4;
    padding: 10px;
    border-radius: 10px 14px 14px 10px;
    color: #fff;
    overflow: hidden;
    box-shadow: inset 6px 0 0 rgba(0, 0, 0, .12), 0 6px 14px rgba(20, 31, 74, .16);
}
.ui-cover__subject { font-size: 13px; font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; }
.ui-cover__grade { align-self: flex-end; font-size: 40px; font-weight: 900; line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.ui-cover--0 { background: linear-gradient(150deg, #5b8cff, #3a5fe0); }
.ui-cover--1 { background: linear-gradient(150deg, #ff8fb1, #e9558a); }
.ui-cover--2 { background: linear-gradient(150deg, #39c18c, #1d9a6d); }
.ui-cover--3 { background: linear-gradient(150deg, #ffbf3c, #f39a12); }
.ui-cover--4 { background: linear-gradient(150deg, #9b7bff, #6c4fe0); }
.ui-cover--5 { background: linear-gradient(150deg, #34b6e4, #1b8cc0); }

.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ui-blue-50);
    color: var(--ui-navy);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.ui-badge--mint { background: var(--ui-mint-50); color: #11603f; }
.ui-badge--yellow { background: var(--ui-yellow-50); color: #7a5600; }
.ui-badge--pink { background: var(--ui-pink-50); color: #a3194b; }
.ui-badge--lav { background: var(--ui-lav-50); color: #5333c8; }
.ui-badge--grey { background: #eef1f7; color: var(--ui-muted); }

.ui-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 34px 20px;
    text-align: center;
}
.ui-empty img { width: 170px; height: auto; }
.ui-empty h2, .ui-empty h3 { margin: 6px 0 0; font-size: 24px; font-weight: 900; }
.ui-empty p { max-width: 460px; margin: 0; color: var(--ui-muted); font-weight: 600; }
.ui-empty .ui-btn { margin-top: 8px; }

.ui-list { display: grid; gap: 10px; }

.ui-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    background: #fff;
}
.ui-row img { width: 40px; height: 40px; object-fit: contain; }
.ui-row strong { display: block; color: var(--ui-ink); font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.ui-row small { color: var(--ui-muted); font-weight: 700; font-size: 13px; }
.ui-score { color: var(--ui-ink); font-size: 20px; font-weight: 900; white-space: nowrap; }

.ui-bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: #e9eef8;
    overflow: hidden;
}
.ui-bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #5b8cff, #3a78f2);
}
.ui-bar--mint > span { background: linear-gradient(90deg, #4fd19e, #1fa874); }
.ui-bar--yellow > span { background: linear-gradient(90deg, #ffd35c, #f5b100); }
.ui-bar--pink > span { background: linear-gradient(90deg, #ff8fb1, #f0628f); }
.ui-bar--lav > span { background: linear-gradient(90deg, #a58bff, #7b5cf0); }

.ui-topic {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f8faff;
}
.ui-topic strong { display: block; color: var(--ui-ink); font-weight: 900; overflow-wrap: anywhere; }
.ui-topic small { color: var(--ui-muted); font-weight: 700; font-size: 13px; }
.ui-topic__bar { display: flex; align-items: center; gap: 10px; }
.ui-topic__bar .ui-bar { flex: 1; }
.ui-topic__bar b { min-width: 42px; color: var(--ui-ink); text-align: right; }

.ui-ring {
    --p: 0;
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: conic-gradient(#36c69a calc(var(--p) * 1%), #e5edf9 0);
}
.ui-ring::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: #fff; }
.ui-ring b { position: relative; color: var(--ui-ink); font-size: 40px; font-weight: 900; }

.ui-overview { display: flex; align-items: center; gap: 24px; }
.ui-overview h3 { margin: 0 0 6px; font-size: 22px; font-weight: 900; }
.ui-overview p { margin: 0; color: var(--ui-muted); font-weight: 600; }

.ui-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ui-stat { padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--ui-line); }
.ui-stat span { display: block; color: var(--ui-muted); font-size: 13px; font-weight: 800; }
.ui-stat b { color: var(--ui-ink); font-size: 26px; font-weight: 900; }

.ui-status { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 900; white-space: nowrap; }
.ui-status--good { background: var(--ui-mint-50); color: #11603f; }
.ui-status--repeat { background: var(--ui-yellow-50); color: #7a5600; }
.ui-status--learn { background: var(--ui-pink-50); color: #a3194b; }

.ui-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
.ui-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* 9. Подписка -------------------------------------------------------------- */

.ui-period {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ui-line);
    box-shadow: var(--ui-shadow-sm);
}
.ui-period label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 20px;
    border-radius: 999px;
    color: var(--ui-ink);
    font-weight: 900;
    cursor: pointer;
}
#uiPeriodMonth:checked ~ .ui-period-row .ui-period label[for="uiPeriodMonth"],
#uiPeriodHalf:checked ~ .ui-period-row .ui-period label[for="uiPeriodHalf"],
#uiPeriodYear:checked ~ .ui-period-row .ui-period label[for="uiPeriodYear"] { background: var(--ui-navy); color: #fff; }
#uiPeriodMonth:focus-visible ~ .ui-period-row .ui-period label[for="uiPeriodMonth"],
#uiPeriodHalf:focus-visible ~ .ui-period-row .ui-period label[for="uiPeriodHalf"],
#uiPeriodYear:focus-visible ~ .ui-period-row .ui-period label[for="uiPeriodYear"] { box-shadow: var(--ui-focus); }
#uiPeriodMonth:checked ~ .ui-tariffs .ui-only-half,
#uiPeriodMonth:checked ~ .ui-tariffs .ui-only-year,
#uiPeriodHalf:checked ~ .ui-tariffs .ui-only-month,
#uiPeriodHalf:checked ~ .ui-tariffs .ui-only-year,
#uiPeriodYear:checked ~ .ui-tariffs .ui-only-month,
#uiPeriodYear:checked ~ .ui-tariffs .ui-only-half { display: none; }
#uiPeriodHalf:checked ~ .ui-tariffs .ui-not-half { display: none; }
.ui-promo { margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; background: #fff4cc; border: 1px solid #f0d36a; color: #5b4a00; font-size: 17px; line-height: 1.45; }
.ui-promo strong { margin-right: 6px; color: #b45309; letter-spacing: .02em; }

.ui-period-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 14px; }

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

.ui-tariff {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 22px 20px;
    border: 1.5px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
}
.ui-tariff--popular { border-color: #c9b8ff; background: linear-gradient(170deg, #faf8ff, #f3eeff); }
.ui-tariff--current { border-color: #9fdcbf; }
.ui-tariff__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ui-tariff__head h3 { margin: 0; font-size: 22px; font-weight: 900; }
.ui-price { margin: 12px 0 2px; color: var(--ui-ink); font-size: 36px; font-weight: 900; line-height: 1.1; }
.ui-price small { color: var(--ui-muted); font-size: 16px; font-weight: 700; }
.ui-price-note { min-height: 20px; color: var(--ui-muted); font-size: 13px; font-weight: 700; }
.ui-tariff .ui-checks { margin: 14px 0 18px; }
.ui-tariff__action { margin-top: auto; }
.ui-tariff__action form { margin: 0; }

.ui-usage { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ui-usage__item { padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: 18px; background: #fff; }
.ui-usage__item strong { display: block; color: var(--ui-ink); font-weight: 900; }
.ui-usage__nums { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 8px; color: var(--ui-muted); font-size: 13px; font-weight: 700; }
.ui-usage__nums b { color: var(--ui-ink); font-size: 18px; }
.ui-usage__extra { margin: 0 0 8px; color: var(--ui-muted); font-size: 13px; font-weight: 700; }
.ui-usage__extra--low { margin: 8px 0 0; }

.ui-kids { display: flex; flex-wrap: wrap; gap: 10px; }
.ui-kids form { margin: 0; }
.ui-kid {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 5px 16px 5px 5px;
    border: 1.5px solid var(--ui-line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--ui-ink);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.ui-kid .ui-avatar { width: 36px; height: 36px; font-size: 15px; }
.ui-kid.is-active { border-color: #b9a5ff; background: var(--ui-lav-50); }

.ui-topup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ui-topup form {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    background: #f8faff;
}
.ui-topup strong { color: var(--ui-ink); font-size: 17px; font-weight: 900; }
.ui-topup b { color: var(--ui-ink); font-size: 22px; font-weight: 900; }

/* 10. Подготовка к контрольной -------------------------------------------- */

.ui-progress-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.ui-progress-steps li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: var(--ui-muted);
    font-size: 14px;
    font-weight: 800;
}
.ui-progress-steps li span {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #e9eef8;
    color: var(--ui-muted);
    font-size: 13px;
    font-weight: 900;
}
.ui-progress-steps li.is-done { color: #11603f; }
.ui-progress-steps li.is-done span { background: var(--ui-mint); color: #fff; }
.ui-progress-steps li.is-current { background: #fff; color: var(--ui-ink); box-shadow: var(--ui-shadow-sm); }
.ui-progress-steps li.is-current span { background: var(--ui-navy); color: #fff; }

.ui-question {
    padding: 18px 20px;
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    background: #fff;
}
.ui-question + .ui-question { margin-top: 12px; }
.ui-question.has-error { border-color: #ffb4b9; background: #fffafa; }
.ui-question__q { display: flex; gap: 12px; margin: 0 0 12px; color: var(--ui-ink); font-size: 17px; font-weight: 800; line-height: 1.45; }
.ui-question__n {
    display: grid; place-items: center; flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 10px;
    background: var(--ui-blue-50);
    color: var(--ui-navy);
    font-size: 15px;
    font-weight: 900;
}

.ui-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ui-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 10px 14px;
    border: 1.5px solid var(--ui-line-strong);
    border-radius: 14px;
    background: #fbfcff;
    color: var(--ui-ink);
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.ui-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--ui-lav); flex-shrink: 0; }
.ui-option:has(input:checked) { border-color: #b9a5ff; background: var(--ui-lav-50); }
.ui-option:has(input:focus-visible) { box-shadow: var(--ui-focus); }

.ui-field-error { margin-top: 8px; color: #b4232a; font-size: 14px; font-weight: 800; }

.ui-help {
    margin: 0 0 12px;
    padding: 14px 16px;
    border-radius: 16px;
    font-weight: 600;
    line-height: 1.5;
}
.ui-help b { color: var(--ui-ink); }
.ui-help--hint { background: var(--ui-yellow-50); border: 1px solid #ffe7a3; }
.ui-help--rule { background: var(--ui-blue-50); border: 1px solid #d7e6ff; }
.ui-help--example { background: var(--ui-mint-50); border: 1px solid #c9eedc; }
.ui-help--wrong { background: var(--ui-pink-50); border: 1px solid #ffd0e0; color: #8a1840; }

.ui-lesson { display: grid; gap: 10px; }
.ui-lesson__rule { margin: 0; color: var(--ui-ink); font-size: 17px; font-weight: 700; line-height: 1.5; }

.ui-meter { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }

.ui-skill { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--ui-line-strong); }
.ui-skill:last-child { border-bottom: 0; }
.ui-skill span { color: var(--ui-ink); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }

.ui-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: #cfd7e8; }
.ui-dot--green { background: #22b07d; }
.ui-dot--yellow { background: #f5b100; }
.ui-dot--red { background: #e5484d; }

.ui-before-after { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.ui-before-after .ui-arrow { color: var(--ui-muted); font-size: 32px; }
.ui-pct { display: grid; gap: 2px; padding: 14px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--ui-line); text-align: center; }
.ui-pct span { color: var(--ui-muted); font-size: 13px; font-weight: 800; }
.ui-pct b { color: var(--ui-ink); font-size: 34px; font-weight: 900; line-height: 1.1; }
.ui-pct--after b { color: var(--ui-mint); }

.ui-continue a { text-decoration: none; }

/* 11. Подвал, адаптив ------------------------------------------------------ */

.ui-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--ui-line);
    background: rgba(255, 255, 255, .8);
}
.ui-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    width: min(1280px, 100% - 32px);
    margin: 0 auto;
    padding: 18px 0;
    color: var(--ui-muted);
    font-size: 14px;
    font-weight: 700;
}
.ui-footer a { color: var(--ui-text); text-decoration: none; }
.ui-footer a:hover { color: var(--ui-blue); }
.ui-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* Заголовок секции с иконкой/счётчиком справа */
.ui-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ui-section-head .ui-card__title { margin: 0; }
.ui-section-icon { width: 46px; height: 46px; object-fit: contain; }
.ui-badge--lg { padding: 6px 14px; font-size: 14px; }
.ui-subtitle { margin: 20px 0 12px; color: var(--ui-ink); font-size: 18px; font-weight: 900; }
.ui-row__end { display: flex; align-items: center; gap: 12px; }

/* fieldset без рамки браузера (группы радиокнопок) */
fieldset.ui-fieldset:not(.ui-question) { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.ui-question { min-width: 0; margin: 0; }
.ui-question > legend { float: left; width: 100%; padding: 0; }
.ui-question > legend + * { clear: both; }
.ui-fieldset > legend.ui-label { margin-bottom: 8px; padding: 0; }
fieldset.ui-fieldset.ui-mt { margin-top: 16px; }
.ui-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Служебные */
.ui-header-logout { display: none; }   /* показывается только на главной */
.ui-cols-2 { --cols: 2; }
.ui-cols-3 { --cols: 3; }
.ui-cols-4 { --cols: 4; }
.ui-push { margin-left: auto; }
.ui-mt { margin-top: 16px; }
.ui-mt-xs { margin-top: 8px; }
.ui-center { text-align: center; }
a.ui-feature { color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
a.ui-feature:hover { transform: translateY(-3px); box-shadow: var(--ui-shadow); }
a.ui-feature:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (max-width: 420px) { .ui-hide-xs { display: none !important; } }

/* Старые страницы (профиль, админка, лекции …) внутри нового каркаса */
.ui-body .page-shell { flex: 1 0 auto; }
/* старое правило style.css расширяло контейнер до 1480px — выравниваем по новой шапке */
.ui-body .page-shell:has(.simple-page) { width: min(1280px, calc(100% - 32px)) !important; }

/* Планшет и узкий ноутбук */
@media (max-width: 1120px) {
    .ui-nav { display: none; }
    .ui-burger { display: grid; }
    .ui-header__right { margin-left: auto; }
    .ui-layout { grid-template-columns: minmax(0, 1fr); }
    .ui-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .ui-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-span-2 { grid-column: 1 / -1; }
    .ui-dash, .ui-grid-2, .ui-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .ui-tariffs { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
    .ui-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-toolbar > :last-child { grid-column: 1 / -1; }
    .ui-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); padding: 0 24px; }
    .ui-landing-hero { padding-left: 24px; }
    .ui-bubble { display: none; }
}

/* Телефон: отдельный поток в одну колонку, а не уменьшенный десктоп */
@media (max-width: 680px) {
    body.ui-body { font-size: 15px; }
    .ui-header__inner { min-height: 62px; gap: 10px; width: calc(100% - 24px); }
    .ui-logo img { height: 38px; }
    .ui-user > summary { padding-right: 6px; }
    .ui-user__name, .ui-user .ui-chevron { display: none; }
    .ui-user__menu { position: fixed; top: 70px; right: 12px; left: 12px; width: auto; }

    .ui-main { width: calc(100% - 24px); padding: 12px 0 40px; }

    .ui-hero {
        grid-template-columns: minmax(0, 1fr) 118px;
        gap: 6px;
        padding: 0 14px 0 18px;
        border-radius: 22px;
    }
    .ui-hero__text { padding: 16px 0 18px; }
    .ui-hero h1 { font-size: 26px; }
    .ui-hero p.ui-lead { font-size: 14px; }
    .ui-hero__art { padding-top: 10px; }
    .ui-hero__art > img { height: 128px; }
    .ui-crumbs { font-size: 13px; }

    .ui-landing-hero { grid-template-columns: minmax(0, 1fr); padding: 0 18px; text-align: center; }
    .ui-landing-hero h1 { font-size: 40px; }
    .ui-landing-hero .ui-hero__text { padding-bottom: 6px; }
    .ui-landing-hero p.ui-lead { margin: 0 auto; }
    .ui-landing-hero .ui-hero__art > img { height: 210px; }
    .ui-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); }

    .ui-layout { margin-top: 14px; gap: 14px; }
    .ui-stack, .ui-aside { gap: 12px; }
    .ui-aside { grid-template-columns: minmax(0, 1fr); }

    .ui-card, .ui-step { padding: 16px; border-radius: 20px; }
    .ui-step__head { gap: 12px; margin-bottom: 12px; }
    .ui-step__num { width: 34px; height: 34px; font-size: 17px; }
    .ui-step__head h2, .ui-card__title { font-size: 19px; }

    .ui-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ui-fields--keep2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-fields--keep2 .ui-settings-note { grid-column: 1 / -1; }
    .ui-body .ui-input, .ui-body .ui-select, .ui-body .ui-textarea { font-size: 16px; }   /* без автозума iOS */
    .ui-body .ui-textarea { min-height: 96px; }

    /* Плитки источника: три компактные кнопки в ряд, иконка над подписью */
    .ui-tiles--compact { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; }
    .ui-tiles--compact .ui-tile { flex-direction: column; justify-content: center; gap: 4px; min-height: 84px; padding: 10px 6px; text-align: center; }
    .ui-tiles--compact .ui-tile img { width: 34px; height: 34px; }
    .ui-tiles--compact .ui-tile strong { font-size: 14px; }
    .ui-tiles--compact .ui-tile small { display: none; }
    .ui-tiles:not(.ui-tiles--compact) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .ui-tiles:not(.ui-tiles--compact) .ui-tile { min-height: 62px; padding: 10px 14px; }
    .ui-tiles:not(.ui-tiles--compact) .ui-tile img { width: 36px; height: 36px; }

    .ui-cta-bar { flex-direction: column; align-items: stretch; padding: 12px; }
    .ui-cta-bar .ui-btn { width: 100%; }

    .ui-side > summary { cursor: pointer; padding: 14px 16px; font-size: 17px; }
    .ui-side > summary::after {
        content: "";
        margin-left: auto;
        width: 9px; height: 9px;
        border-right: 2.5px solid currentColor;
        border-bottom: 2.5px solid currentColor;
        transform: rotate(45deg);
    }
    .ui-side[open] > summary::after { transform: rotate(-135deg); }
    .ui-side__body { padding: 0 16px 16px; }

    .ui-tools { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
    .ui-tool { grid-template-columns: 60px minmax(0, 1fr); min-height: 0; padding: 14px 48px 14px 14px; gap: 12px; }
    .ui-tool img { width: 60px; height: 60px; }
    .ui-tool h2 { font-size: 17px; }
    .ui-tool p { font-size: 13px; }
    .ui-tool__go { top: 50%; bottom: auto; transform: translateY(-50%); }

    .ui-features { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .ui-feature { grid-template-columns: 52px minmax(0, 1fr); justify-items: start; text-align: left; padding: 14px 16px; column-gap: 14px; }
    .ui-feature img { grid-row: span 2; width: 48px; height: 48px; }
    .ui-feature h3 { margin: 0; font-size: 16px; }
    .ui-steps4 { grid-template-columns: minmax(0, 1fr); }
    .ui-section-title { margin: 28px 0 14px; }

    .ui-books { grid-template-columns: minmax(0, 1fr); }
    .ui-book { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px; }
    .ui-cover__grade { font-size: 30px; }
    .ui-toolbar { grid-template-columns: minmax(0, 1fr); }

    .ui-row { grid-template-columns: 36px minmax(0, 1fr); padding: 12px; }
    .ui-row img { width: 34px; height: 34px; }
    .ui-row > :last-child { grid-column: 2; justify-self: start; }

    .ui-topic { grid-template-columns: minmax(0, 1fr) auto; }
    .ui-topic__bar { grid-column: 1 / -1; grid-row: 2; }

    .ui-overview { flex-direction: column; text-align: center; gap: 14px; }
    .ui-ring { width: 140px; height: 140px; }
    .ui-ring b { font-size: 32px; }

    .ui-price { font-size: 30px; }
    /* Тарифы на телефоне — карусель внутри блока (как на референсе), страница вбок не скроллится */
    .ui-tariffs {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 86%;
        grid-template-columns: none;
        gap: 12px;
        max-width: none;
        margin: 0 -12px;
        padding: 4px 12px 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 12px;
        overscroll-behavior-x: contain;
    }
    .ui-tariff { scroll-snap-align: start; }
    .ui-usage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ui-usage__item { padding: 12px; }
    .ui-period { width: 100%; }
    .ui-period label { flex: 1; justify-content: center; padding: 8px 10px; }
    .ui-topup { grid-template-columns: minmax(0, 1fr); }

    .ui-options { grid-template-columns: minmax(0, 1fr); }
    .ui-question { padding: 14px; }
    .ui-question__q { font-size: 16px; }
    .ui-motivation { padding: 12px 14px; }
    .ui-motivation img { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-body *, .ui-body *::before, .ui-body *::after { transition: none !important; }
}

/* =========================================================================
   12. Публичная главная — по макету 00_Главная_лединг.png
   Всё ограничено классом body.ui-landing, другие страницы не затрагиваются.
   Шрифты — только через --font-ui / --font-display.
   Иллюстрации — готовые PNG (static/img/landing), object-fit: contain.
   ========================================================================= */

body.ui-landing {
    --lp-ink: #031957;
    --lp-text: #22336b;
    --lp-muted: #47567f;
    --lp-yellow: #feca37;
    background-color: #eff7fd;
    background-image: none;
    font-family: var(--font-ui);
}

/* Все картинки сцены и иконки: пропорции сохраняются, ничего не обрезается */
.ui-landing .lp-hero img,
.ui-landing .lp-features img,
.ui-landing .lp-how img { height: auto; max-width: none; object-fit: contain; }   /* display не задаём: иначе перебьёт display:none у скрытых элементов сцены */

/* --- Рамка: шапка и содержимое — одна белая карточка ---------------------- */
.ui-landing .ui-header {
    position: static;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.ui-landing .ui-header__inner {
    width: min(1380px, 100% - 48px);
    min-height: 77px;
    margin-top: 15px;
    padding: 0 22px 0 68px;
    border-radius: 28px 28px 0 0;
    background: #fff;
    box-shadow: 0 10px 40px rgba(60, 100, 170, .10);
    clip-path: inset(-40px -40px 0 -40px);   /* тень рамки без шва снизу */
    gap: 0;
}
/* открытое меню профиля выходит ниже шапки: обрезка снизу на это время снимается */
.ui-landing .ui-header__inner:has(.ui-user[open]) { clip-path: inset(-40px -40px -600px -40px); }
.ui-landing .ui-logo img { height: 62px; }
.ui-landing .ui-nav { gap: 2px; margin: 0 auto; padding-left: 60px; }
.ui-landing .ui-nav a {
    min-height: 40px;
    padding: 8px 9px;
    border-radius: 10px;
    color: #1d2d63;
    font-size: 15px;
    font-weight: 700;
}
.ui-landing .ui-nav a[aria-current="page"] { background: transparent; color: #1d2d63; }
.ui-landing .ui-nav a:hover { background: #eef4fe; }
.ui-landing .ui-header__right { gap: 12px; }
.ui-landing .ui-user > summary {
    min-height: 46px;
    padding: 4px 16px 4px 5px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(30, 60, 130, .10);
    font-size: 15px;
    font-weight: 800;
}
.ui-landing .ui-avatar { width: 36px; height: 36px; background: #f6e6ee; font-weight: 700; color: #1d2d63; }
.ui-landing .ui-chevron { display: none; }
.ui-landing .ui-header-logout,
.ui-landing .ui-header__right > .ui-btn {
    display: inline-flex;
    min-height: 46px;
    padding: 10px 20px;
    border-radius: 14px;
    background: #dceefc;
    color: #1d2d63;
    box-shadow: none;
    font-size: 15px;
    font-weight: 800;
}
.ui-landing .ui-header__right > .ui-btn--navy { background: #1d2d63; color: #fff; }

.ui-landing .ui-main.lp-frame {
    flex: 0 0 auto;   /* высота по содержимому — без пустой полосы до низа окна */
    width: min(1380px, 100% - 48px);
    margin: 0 auto 28px;
    padding: 0 0 26px;
    border-radius: 0 0 28px 28px;
    background:
        radial-gradient(ellipse 420px 220px at 6% 100%, rgba(255, 228, 236, .55), transparent 70%),
        radial-gradient(ellipse 380px 260px at 98% 96%, rgba(214, 240, 228, .6), transparent 70%),
        linear-gradient(#fffefb, #fffbf5 30%, #fffcf8);
    box-shadow: 0 10px 40px rgba(60, 100, 170, .10);
    overflow: hidden;   /* только скругление рамки; по высоте содержимое не ограничено */
}

.ui-landing .ui-footer { background: transparent; border: 0; }
.ui-landing .ui-footer__inner { width: min(1380px, 100% - 48px); padding: 0 0 22px; }

/* --- Hero: текст 600px | сцена 540px, высота 435px ------------------------- */
.lp-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);   /* текст | сцена */
    min-height: 400px;
    overflow: hidden;   /* прячет основания растений у края; текст и кнопки внутри не ограничены */
    border-top: 1px solid #f1f3f8;
    /* Фон — размытый детский интерьер: слева светлая стена под текстом, справа комната за мальчиком */
    background: #fff8ee url('/static/img/landing/hero-bg.webp') 62% 50% / cover no-repeat;
}

.lp-plants-left {           /* листья у левого нижнего края hero, как в макете */
    position: absolute;
    left: -34px;
    bottom: -6px;
    z-index: 1;
    width: 150px;
    opacity: .95;
}

.lp-hero__text { position: relative; z-index: 3; padding: 36px 0 22px 56px; }

.lp-title { margin: 0; color: var(--lp-ink); font-family: var(--font-display); line-height: 1; }
.lp-title__main {
    position: relative;
    z-index: 0;
    display: inline-block;
    font-size: 71px;
    font-weight: 800;
    letter-spacing: -3px;
    line-height: .98;
}
.lp-title__main::after {          /* жёлтый маркер под словом — элемент типографики, как в макете */
    content: "";
    position: absolute;
    left: 62px;
    right: 18px;
    bottom: -4px;
    z-index: -1;
    height: 11px;
    border-radius: 12px;
    background: #ffe28a;
    transform: rotate(-1.2deg);
}
.lp-title__sub {
    display: block;
    margin-top: 10px;
    padding-left: 4px;
    font-size: 54px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1;
}

.lp-lead {
    margin: 26px 0 0;
    color: var(--lp-text);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.45;
}

.lp-actions { display: flex; gap: 24px; margin-top: 30px; }
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 62px;
    padding: 0 26px;
    border-radius: 14px;
    color: #14214f;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.lp-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.lp-btn--yellow { width: 305px; background: var(--lp-yellow); box-shadow: 0 4px 0 #e9ac12, 0 8px 18px rgba(240, 170, 20, .25); }
.lp-btn--yellow:hover { background: #ffd24f; }
.lp-btn--yellow:active { transform: translateY(2px); box-shadow: 0 2px 0 #e9ac12; }
.lp-btn--outline { width: 210px; background: #fff; border: 2px solid #f9d36a; box-shadow: 0 4px 12px rgba(240, 190, 60, .14); }
.lp-btn--outline:hover { background: #fffaf0; }
.lp-arrow { font-size: 22px; line-height: 1; }
.lp-brm { display: none; }

/* --- Сцена (540×435 в макете): позиции в % от сцены ----------------------- */
.lp-stage { position: relative; min-height: 400px; }
.lp-stage > img, .lp-stage > span { position: absolute; }

/* Мальчик за столом — основа сцены. Всё, что стоит на столе, позиционируется в %
   от этой картинки: столешница = 85–94.6% её высоты, продлённая часть стола — правее 66%. */
.lp-scene { position: absolute; left: -2%; bottom: 0; width: 104%; }   /* мальчик крупнее; лишнее справа скрывает overflow hero */
.ui-landing .lp-boy { position: relative; z-index: 1; display: block; width: 100%; }
.lp-scene > img:not(.lp-boy) { position: absolute; }
.lp-plants-back { left: 55%; bottom: 12%; width: 52%; z-index: 0; }   /* основание спрятано за столом */
.lp-books { left: 64.5%; bottom: 10.5%; width: 32%; z-index: 2; }    /* нижняя книга — на столешнице */
.lp-cup { left: 57%; bottom: 7%; width: 8%; z-index: 3; }         /* перед книгами, у переднего края */

.lp-note { right: 3%; top: 3%; width: 23%; z-index: 2; transform: rotate(-5deg); }
.lp-bulb { left: 6%; top: -2%; width: 27%; aspect-ratio: 1; z-index: 3; transform: rotate(14deg); }
.lp-bulb::before {   /* тёплое мягкое свечение вокруг лампочки */
    content: "";
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 224, 120, .85) 0, rgba(255, 214, 90, .45) 32%, rgba(255, 214, 90, 0) 68%);
    filter: blur(6px);
}
.lp-bulb__rays { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 4px rgba(255, 196, 40, .6)); }
.ui-landing .lp-bulb img { position: absolute; left: 29%; top: 24%; width: 42%; filter: drop-shadow(0 0 10px rgba(255, 205, 70, .8)); }
.lp-star { left: 41%; top: 3%; width: 6.5%; z-index: 2; transform: rotate(8deg); }
.lp-sparkle { left: 0; top: 46%; width: 5%; z-index: 2; }
.lp-heart { left: 89%; top: 41%; width: 4.5%; z-index: 2; transform: rotate(-12deg); }

/* --- 4 карточки преимуществ ---------------------------------------------- */
.lp-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
    margin: 16px 0 0 40px;
}
.lp-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 14px 14px 16px;
    border: 1px solid #eef0f6;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(40, 70, 140, .05);
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.lp-feature:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(40, 70, 140, .09); }
.lp-feature:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.lp-feature h3 { margin: 9px 0 7px; color: var(--lp-ink); font-size: 18px; font-weight: 800; line-height: 1.2; }
.lp-feature p { margin: 0; color: var(--lp-muted); font-size: 15px; font-weight: 600; line-height: 1.38; }

/* Мягкое свечение под иконкой — как в макете (не заглушка) */
.lp-glow {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 66px;
    height: 66px;
    border-radius: 50%;
}
.ui-landing .lp-glow img { width: 56px; max-height: 54px; }
.lp-glow--pink { background: radial-gradient(circle, #ffe3ec 0, #fff1f5 55%, rgba(255, 241, 245, 0) 72%); }
.lp-glow--blue { background: radial-gradient(circle, #dceaff 0, #eef5ff 55%, rgba(238, 245, 255, 0) 72%); }
.lp-glow--green { background: radial-gradient(circle, #d9f5e7 0, #ecfaf3 55%, rgba(236, 250, 243, 0) 72%); }
.lp-glow--yellow { background: radial-gradient(circle, #fff1c4 0, #fff8e2 55%, rgba(255, 248, 226, 0) 72%); }

/* --- Раскладка: слева hero + карточки, справа «Как это работает?» -------- */
.lp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    align-items: stretch;   /* правая колонка заканчивается на одной линии с карточками */
    column-gap: 20px;
    padding-right: 20px;
}
.lp-main-col { min-width: 0; }
.lp-main-col .lp-hero { border-bottom-right-radius: 24px; }

/* --- «Как это работает?» — вертикальная карточка ------------------------- */
.lp-how {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    padding: 18px 18px 12px;
    border: 1px solid #e3ecfb;
    border-radius: 22px;
    background: linear-gradient(170deg, #f6f9ff, #eef4ff);
    box-shadow: 0 6px 18px rgba(40, 70, 140, .05);
}
.lp-how__title {
    margin: 0 0 8px;
    color: var(--lp-ink);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.5px;
}
.lp-steps { display: flex; flex: 1; flex-direction: column; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.lp-step {
    position: relative;
    display: grid;
    grid-template-columns: 28px 44px minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    padding: 9px 0;
}
.lp-steps { position: relative; }
.lp-steps::before {   /* тонкая пунктирная линия от первого номера до последнего */
    content: "";
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: 50px;
    border-left: 2px dashed #bcd0f4;
}
.lp-step__n { position: relative; z-index: 1; }
.lp-step__n {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-top: 6px;
    border-radius: 50%;
    background: #dde9fc;
    color: var(--lp-ink);
    font-size: 14px;
    font-weight: 800;
}
.ui-landing .lp-step__icon { width: 44px; max-height: 42px; margin-top: 2px; }
.lp-step h3 { margin: 1px 0 2px; color: var(--lp-ink); font-size: 15.5px; font-weight: 800; line-height: 1.25; }
.lp-step p { margin: 0; color: var(--lp-muted); font-size: 13.5px; font-weight: 600; line-height: 1.38; }

/* Правая колонка уходит под карточки, когда на две колонки не хватает ширины */
@media (max-width: 1180px) {
    .lp-layout { grid-template-columns: minmax(0, 1fr); align-items: start; padding-right: 0; }
    .lp-main-col .lp-hero { border-bottom-right-radius: 0; }
    .lp-how { margin: 20px 28px 0; }
    .lp-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
    .lp-steps::before { display: none; }
}

/* --- Узкий десктоп / планшет: та же композиция, меньше -------------------- */
@media (max-width: 1120px) {
    .ui-landing .ui-header__inner { padding-left: 28px; }
    .ui-landing .ui-header-logout { display: none; }
    .lp-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .lp-hero__text { padding-left: 40px; }
    .lp-title__main { font-size: clamp(50px, 6.6vw, 71px); }
    .lp-title__sub { font-size: clamp(38px, 5vw, 54px); }
    .lp-actions { flex-wrap: wrap; gap: 14px; }
    .lp-features { margin: 16px 28px 0; }
}

@media (max-width: 900px) {
    .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Телефон: отдельная мобильная композиция ------------------------------ */
@media (max-width: 700px) {
    body.ui-landing { background: #fff; }
    .ui-landing .ui-header__inner {
        width: 100%;
        min-height: 66px;
        margin: 0;
        padding: 4px 14px 0 16px;
        border-radius: 0;
        box-shadow: none;
        clip-path: none;
    }
    /* Мобильная шапка: [логотип]  [аватар + имя]  [меню]; «Выйти» — внутри меню */
    .ui-landing .ui-logo { flex-shrink: 0; }
    .ui-landing .ui-logo img { height: 44px; }
    .ui-landing .ui-header__right { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 8px; margin-left: 10px; }
    .ui-landing .ui-header__right > .ui-btn { display: none; }
    .ui-landing .ui-user { display: block; min-width: 0; }
    .ui-landing .ui-user > summary { min-height: 42px; max-width: 100%; padding: 3px 12px 3px 3px; gap: 8px; font-size: 14px; }
    .ui-landing .ui-avatar { width: 36px; height: 36px; flex-shrink: 0; }
    .ui-landing .ui-user__name { display: block; min-width: 0; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ui-landing .ui-burger { flex-shrink: 0; }
    .ui-landing .ui-burger { width: 42px; height: 42px; border-radius: 50%; background: #e7f0fd; color: #2b4fc4; }

    .ui-landing .ui-main.lp-frame {
        width: 100%;
        margin: 0;
        padding-bottom: 22px;
        border-radius: 0;
        box-shadow: none;
    }

    .lp-br { display: none; }
    .lp-brm { display: inline; }

    /* Порядок: заголовок → описание → иллюстрация → кнопки → карточки */
    .lp-hero {
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-top: 0;
        background: #fff8ee url('/static/img/landing/hero-bg.webp') 66% 50% / cover no-repeat;
    }
    .lp-hero__text { display: contents; }
    .lp-title, .lp-lead, .lp-actions { position: relative; z-index: 3; }   /* выше декоративного фона hero */
    .ui-landing .lp-plants-left { display: none; }
    .lp-title { order: 1; padding: 16px 22px 0; text-align: center; }
    .lp-lead { order: 2; margin: 14px 18px 0; font-size: 17px; line-height: 1.4; text-align: center; }
    .lp-stage { order: 3; height: auto; min-height: 0; margin-top: 8px; padding-top: 44px; }
    .lp-scene { position: relative; left: 0; width: 100%; margin: 0 auto; }
    .lp-actions { order: 4; flex-direction: column; gap: 14px; margin: 10px 22px 0; }
    .lp-btn { width: 100%; height: 58px; }

    .lp-title__main { font-size: 43px; letter-spacing: -1.8px; }
    .lp-title__main::after { left: 34px; right: 10px; height: 7px; bottom: -3px; }
    .lp-title__sub { margin-top: 6px; padding-left: 0; font-size: 33px; letter-spacing: -.6px; }

    /* Мобильная сцена (как в макете): растения по бокам, мальчик в центре, стикер справа */
    /* Мобильная сцена: мальчик целиком, книги и стакан — на том же столе (уменьшаются вместе с ним) */
    .ui-landing .lp-star, .ui-landing .lp-heart { display: none; }
    .lp-note { right: 3%; top: 0; width: 25%; }
    .lp-bulb { left: 2%; top: -6%; width: 30%; }
    .lp-sparkle { left: 1%; top: 52%; width: 6%; }

    .lp-features { grid-template-columns: minmax(0, 1fr); gap: 13px; margin: 22px 22px 0; }
    .lp-feature {
        display: grid;
        grid-template-columns: 70px minmax(0, 1fr);
        column-gap: 16px;
        align-items: center;
        min-height: 0;
        padding: 14px 16px 14px 14px;
        text-align: left;
    }
    .lp-feature .lp-glow { grid-row: span 2; width: 70px; height: 70px; }
    .ui-landing .lp-feature .lp-glow img { width: 56px; max-height: 54px; }
    .lp-feature h3 { margin: 0 0 2px; align-self: end; font-size: 16px; }
    .lp-feature p { align-self: start; font-size: 15px; line-height: 1.4; }

    /* «Как это работает?» — обычный вертикальный блок на всю ширину под карточками */
    .lp-how { margin: 22px 22px 0; padding: 16px 16px 8px; }
    .lp-how__title { font-size: 24px; }
    .lp-steps { display: block; }
    .lp-steps::before { display: block; }
    .lp-step h3 { font-size: 16px; }
    .lp-step p { font-size: 14.5px; }
}

/* =========================================================================
   13. Кабинет (после входа) — по макету 01_Главная_кабинет.png
   Целевое окно 1536×1024: белая оболочка 1290px, шапка ~80px, баннер 228px,
   карточки ~134px (3×2, gap 16px), низ 62/38. Всё под body.ui-cab.
   ========================================================================= */

body.ui-cab {
    --cab-ink: #080B57;
    --cab-muted: #50658F;
    --cab-link: #1769FF;
    --cab-line: #DDEFFC;
    --cab-w: min(1290px, 100% - 32px);
    background-color: #f6faff;
    background-image:
        linear-gradient(rgba(110, 160, 225, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110, 160, 225, .10) 1px, transparent 1px);
    background-size: 26px 26px;
    font-family: var(--font-ui);
    color: var(--cab-ink);
}

/* --- Боковой школьный декор: за оболочкой, без кликов и без горизонтального скролла */
.cab-sides { display: none; }
@media (min-width: 1400px) {
    .cab-sides { display: block; }
    .cab-sides .cab-side {
        position: fixed;
        bottom: 0;
        z-index: -1;
        width: calc((100vw - 1290px) / 2 + 4px);
        height: auto;
        max-width: 150px;
        max-height: 100vh;
        object-fit: contain;
        object-position: bottom;
        opacity: .62;
        pointer-events: none;
        user-select: none;
    }
    .cab-sides .cab-side--left { left: 0; }
    .cab-sides .cab-side--right { right: 0; }
}

/* --- Оболочка: шапка + содержимое — одна белая карточка с тонкой голубой рамкой */
.ui-cab .ui-header {
    position: relative;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.ui-cab .ui-header__inner {
    width: var(--cab-w);
    min-height: 76px;
    margin-top: 14px;
    padding: 0 30px 0 46px;
    gap: 0;
    border: 1px solid var(--cab-line);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: #fff;
}
.ui-cab .ui-main.cab-shell {
    flex: 0 0 auto;   /* высота по содержимому — без пустой полосы внизу оболочки */
    position: relative;
    width: var(--cab-w);
    margin: 0 auto 10px;
    padding: 0 15px 14px;
    border: 1px solid var(--cab-line);
    border-top: 0;
    border-radius: 0 0 24px 24px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(60, 110, 190, .08);
}
.ui-cab .ui-footer { background: transparent; border: 0; }
.ui-cab .ui-footer__inner { width: var(--cab-w); padding: 4px 0 18px; }

/* Шапка: логотип, меню с активной «Главной» (домик), плашка профиля */
.ui-cab .ui-logo img { height: 66px; }
.ui-cab .ui-nav { gap: 8px; margin: 0 auto 0 62px; }
.ui-cab .ui-nav a {
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 14px;
    color: var(--cab-ink);
    font-size: 16.5px;
    font-weight: 600;
}
.ui-cab .ui-nav a:hover { background: #eef6fe; }
.ui-cab .ui-nav a[aria-current="page"] { background: #e6f3fd; color: var(--cab-ink); }
.ui-cab .ui-nav a[aria-current="page"]::before {
    content: "";
    width: 20px;
    height: 20px;
    margin-right: 2px;
    background: var(--cab-link);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ui-cab .ui-user > summary {
    min-height: 48px;
    gap: 12px;
    padding: 5px 18px 5px 6px;
    border: 1px solid #e6eefa;
    background: #f5f9ff;
    color: var(--cab-ink);
    font-size: 16px;
    font-weight: 600;
}
.ui-cab .ui-user > summary .ui-avatar {
    width: 38px;
    height: 38px;
    background: #e1eeff url("../img/cabinet/avatar-boy.webp") center / cover no-repeat;
    color: transparent;   /* буква остаётся для чтения с экрана, видна картинка */
}
.ui-cab .ui-user__name { margin-right: 6px; }
/* В меню 7 пунктов (с «Админ»): компактные пункты на всех ширинах, а в окнах до 1300px меню прячется за кнопку-бургер, чтобы плашка профиля не уезжала за рамку */
.ui-cab .ui-logo img { height: 56px; }
.ui-cab .ui-nav { gap: 2px; margin-left: 20px; }
.ui-cab .ui-nav a { padding: 10px 9px; font-size: 15px; white-space: nowrap; }
.ui-cab .ui-header__inner { padding: 0 24px 0 30px; }
@media (max-width: 1300px) {
    .ui-cab .ui-nav { display: none; }
    .ui-cab .ui-burger { display: grid; }
    .ui-cab .ui-header__right { margin-left: auto; }
}

/* --- Приветственный баннер ----------------------------------------------------- */
.cab-hero {
    position: relative;
    display: flex;
    align-items: center;
    height: 218px;
    border-radius: 22px;
    background:
        radial-gradient(ellipse 120px 80px at 4% 118%, rgba(255, 225, 140, .75), transparent 72%),
        radial-gradient(ellipse 160px 110px at 52% 30%, rgba(255, 255, 255, .95), transparent 70%),
        radial-gradient(ellipse 120px 90px at 47% 60%, rgba(255, 255, 255, .8), transparent 70%),
        radial-gradient(ellipse 200px 120px at 30% 112%, rgba(255, 255, 255, .55), transparent 70%),
        radial-gradient(ellipse 220px 140px at 88% 18%, rgba(255, 244, 210, .7), transparent 70%),
        linear-gradient(105deg, #e5f2fd 0%, #e7f4fd 45%, #eef4fd 70%, #f6f2fb 100%);
    overflow: hidden;   /* стол сцены уходит за нижний край — как в макете */
}
.cab-hero__text { position: relative; z-index: 3; padding: 0 0 6px 60px; }
.cab-hero h1 {
    margin: 0;
    color: var(--cab-ink);
    font-family: var(--font-ui);
    font-size: 62px;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.05;
}
.cab-hero p { margin: 10px 0 0 2px; color: var(--cab-ink); font-size: 24px; font-weight: 600; }
.cab-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.cab-btn {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
}
.cab-btn--blue { background: var(--cab-link); color: #fff; }
.cab-btn--white { background: #fff; color: var(--cab-ink); border: 1px solid var(--cab-line); }

.cab-hero__dashes { position: absolute; left: 22px; top: 62px; width: 34px; height: 46px; }
.cab-hero__dashes i {
    position: absolute;
    left: 6px;
    width: 22px;
    height: 5px;
    border-radius: 4px;
    background: #ffc72c;
}
.cab-hero__dashes i:nth-child(1) { top: 0; transform: rotate(40deg); }
.cab-hero__dashes i:nth-child(2) { top: 20px; left: 0; width: 26px; }
.cab-hero__dashes i:nth-child(3) { top: 40px; transform: rotate(-40deg); }

/* Сцены — готовые PNG; позиции в % от ширины баннера, чтобы композиция сохранялась */
.cab-hero__art { position: absolute; inset: 0; pointer-events: none; }
.cab-hero__art img { position: absolute; height: auto; max-width: none; object-fit: contain; }
.cab-hero__art .cab-hero__boy { left: 55%; top: 4px; height: calc(100% + 14px); width: auto; z-index: 1; }   /* срезается только передний край стола */
.cab-hero__art .cab-hero__cloud { right: 0; bottom: -8px; height: calc(100% + 4px); width: auto; z-index: 2; }
.cab-sparkle { width: 18px; opacity: .55; z-index: 0; filter: hue-rotate(185deg) saturate(.8); }
.cab-sparkle--1 { left: 25%; bottom: 14px; }
.cab-sparkle--2 { left: 12%; top: 18px; width: 14px; }

/* --- 6 карточек действий ------------------------------------------------------- */
.cab-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin-top: 13px;
}
.cab-tool {
    position: relative;
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    column-gap: 22px;
    min-height: 128px;
    padding: 12px 18px 12px 18px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 20px;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(60, 110, 190, .06);
    transition: transform .15s ease, box-shadow .15s ease;
}
.cab-tool:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(60, 110, 190, .11); }
.cab-tool:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.cab-tool > img { justify-self: center; width: 96px; max-height: 88px; height: auto; object-fit: contain; }
.cab-tool h2 { margin: 0 0 7px; color: var(--cab-ink); font-size: 22px; font-weight: 800; letter-spacing: -.2px; line-height: 1.15; }
.cab-tool p { margin: 0; padding-right: 38px; color: var(--cab-muted); font-size: 15.5px; font-weight: 500; line-height: 1.3; }   /* место под стрелку */
.cab-go {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%231769FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
    box-shadow: 0 3px 10px rgba(60, 110, 190, .14);
}
.cab-tool--pink { background: linear-gradient(135deg, #fdeef7, #fde6f1); border-color: #fbdcec; }
.cab-tool--blue { background: linear-gradient(135deg, #e9f6fe, #e2f0fd); border-color: #d6eafb; }
.cab-tool--yellow { background: linear-gradient(135deg, #fef7e0, #fef1d4); border-color: #fbe9bd; }
.cab-tool--mint { background: linear-gradient(135deg, #e5fbf5, #dbf7ee); border-color: #c9efe1; }
.cab-tool--lav { background: linear-gradient(135deg, #f5effe, #eee7fd); border-color: #e2d8fb; }
.cab-tool--peach { background: linear-gradient(135deg, #fff4ee, #ffece4); border-color: #fbdfd2; }

/* --- Нижняя область: 62 / 38 --------------------------------------------------- */
.cab-bottom {
    display: grid;
    grid-template-columns: minmax(0, 772fr) minmax(0, 470fr);
    align-items: stretch;
    gap: 18px;
    margin-top: 13px;
}
.cab-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cab-subjects { flex: 1 1 auto; }                 /* занимает место над плашкой; сообщение внутри — по своей высоте */
.cab-motiv { margin-top: auto; flex: 0 0 auto; }  /* плашка — у нижнего края левой колонки */

.cab-box {
    padding: 13px 18px 14px;
    border: 1px solid #e4eefb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(60, 110, 190, .06);
}
.cab-box__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cab-box__head h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: var(--cab-ink);
    font-size: 21px;
    font-weight: 800;
}
.cab-box__head h2 img { width: 30px; height: 30px; object-fit: contain; }
.cab-link { color: var(--cab-link); font-size: 15.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cab-link:hover { text-decoration: underline; }

.cab-empty,
.cab-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    padding: 9px 14px;
    border-radius: 14px;
    background: #f5f9ff;
}
.cab-empty { grid-template-columns: 40px minmax(0, 1fr) auto; }
.cab-empty img { width: 38px; height: 38px; object-fit: contain; }
.cab-empty strong, .cab-row strong { display: block; color: var(--cab-ink); font-size: 15.5px; font-weight: 700; }
.cab-empty span, .cab-row span { display: block; margin-top: 1px; color: var(--cab-muted); font-size: 14px; font-weight: 500; line-height: 1.3; }

.cab-continue { background: linear-gradient(160deg, #e6fbf4, #dbf6ec); border-color: #c9eedf; }
.cab-continue .cab-row { background: #fff; box-shadow: 0 3px 10px rgba(30, 140, 100, .06); }

.cab-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.cab-pill span { display: inline; margin: 0; color: inherit; font-size: inherit; }
.cab-pill--green { background: #18b27a; color: #fff; }
.cab-pill--green:hover { background: #129b69; }
.cab-pill--blue { background: #e6f1ff; color: var(--cab-link); }
.cab-pill--blue:hover { background: #d9e9ff; }

/* Кнопка в заголовке блока («Начать», «Добавить») — компактнее обычной */
.cab-box__head .cab-pill { min-height: 34px; padding: 5px 14px; font-size: 15px; flex-shrink: 0; }
.cab-box__head h2 { min-width: 0; }

/* Список предметов (когда маршрут передаёт реальные данные) */
.cab-subject-list { display: grid; gap: 6px; margin-top: 8px; }
.cab-subject {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 46px;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #f5f9ff;
    color: var(--cab-ink);
    text-decoration: none;
}
.cab-subject strong { overflow: hidden; font-size: 15.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cab-subject__bar { position: relative; height: 10px; border-radius: 999px; background: #e3ecf8; overflow: hidden; }
.cab-subject__bar span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #5b9cff, #1769ff); }
.cab-subject b { color: var(--cab-muted); font-size: 15px; font-weight: 600; text-align: right; }

/* Без предметов: три компактных блока 40/30/30, под ними плашка на всю ширину.
   Высота ряда — по самому высокому содержимому, без min-height и растягивания сообщений. */
@media (min-width: 1081px) {
    .cab-bottom--compact {
        grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);
        grid-template-areas: "subj cont exams" "motiv motiv motiv";
        gap: 10px 14px;
        align-items: stretch;
    }
    .cab-bottom--compact .cab-col { display: contents; }
    .cab-bottom--compact .cab-subjects { grid-area: subj; flex: none; }
    .cab-bottom--compact .cab-continue { grid-area: cont; }
    .cab-bottom--compact .cab-exams { grid-area: exams; }
    .cab-bottom--compact .cab-motiv { grid-area: motiv; margin-top: 0; }
}

/* --- Мотивационная плашка -------------------------------------------------------- */
.cab-motiv {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 0;
    padding: 8px 18px;
    border: 1px solid #fbecc4;
    border-radius: 18px;
    background: linear-gradient(110deg, #fffaea, #fff5dc);
    overflow: hidden;
}
.cab-motiv__trophy { width: 52px; height: auto; flex-shrink: 0; }
.cab-motiv strong { display: block; color: var(--cab-ink); font-size: 19px; font-weight: 800; }
.cab-motiv span { display: block; margin-top: 2px; color: var(--cab-muted); font-size: 14px; font-weight: 500; }
.cab-motiv__boy { align-self: flex-end; width: 78px; height: auto; margin: 0 4px -8px auto; flex-shrink: 0; }
.cab-motiv__star { position: absolute; height: auto; }
.cab-motiv__star--1 { right: 150px; top: 12px; width: 18px; }
.cab-motiv__star--2 { right: 128px; bottom: 16px; width: 22px; }

/* --- Широкие, но невысокие окна (≈ 1920×1080 с панелями браузера и задач): сетка 3×2 сохраняется,
   уменьшаются отступы, баннер, карточки и нижние блоки. Текст не меньше 14–15 px. */
@media (min-width: 1200px) and (max-height: 1000px) {
    .ui-cab .ui-header__inner { min-height: 64px; margin-top: 8px; }
    .ui-cab .ui-logo img { height: 54px; }
    .ui-cab .ui-nav a { min-height: 40px; padding: 7px 15px; }
    .ui-cab .ui-user > summary { min-height: 42px; padding-top: 3px; padding-bottom: 3px; }
    .ui-cab .ui-main.cab-shell { margin-bottom: 6px; padding-bottom: 14px; }
    .ui-cab .ui-footer__inner { padding: 2px 0 8px; }
    .cab-hero { height: 192px; }
    .cab-hero h1 { font-size: 56px; }
    .cab-hero p { margin-top: 8px; font-size: 21px; }
    .cab-hero__dashes { top: 52px; }
    .cab-tools { gap: 10px; margin-top: 10px; }
    .cab-tool { min-height: 118px; padding: 9px 16px 9px 16px; column-gap: 18px; grid-template-columns: 86px minmax(0, 1fr); }
    .cab-tool > img { width: 84px; max-height: 78px; }
    .cab-tool h2 { margin-bottom: 5px; font-size: 21px; }
    .cab-tool p { font-size: 15px; }
    .cab-go { right: 13px; bottom: 12px; width: 34px; height: 34px; }
    .cab-bottom { margin-top: 10px; }
    .cab-col { gap: 10px; }
    .cab-box { padding: 8px 14px 9px; }
    .cab-box__head h2 { gap: 10px; font-size: 19px; line-height: 1.2; }
    .cab-box__head h2 img { width: 26px; height: 26px; }
    .cab-empty, .cab-row { margin-top: 6px; padding: 6px 12px; }
    .cab-empty strong, .cab-row strong { line-height: 1.25; }
    .cab-pill { min-height: 34px; padding: 5px 14px; font-size: 15px; }
    .cab-motiv { padding: 5px 16px; gap: 14px; }
    .cab-motiv__trophy { width: 46px; }
    .cab-motiv strong { font-size: 18px; }
    .cab-motiv__boy { width: 66px; margin-bottom: -6px; }
}

/* --- Совсем невысокие окна (≈ 1366×768 и ниже): ещё одна ступень */
@media (min-width: 1200px) and (max-height: 800px) {
    .ui-cab .ui-header__inner { min-height: 58px; margin-top: 6px; }
    .ui-cab .ui-logo img { height: 48px; }
    .cab-hero { height: 168px; }
    .cab-hero h1 { font-size: 50px; }
    .cab-hero p { font-size: 19px; }
    .cab-hero__dashes { top: 42px; }
    .cab-tool { min-height: 108px; }
    .cab-tool > img { width: 74px; max-height: 68px; }
    .cab-tool h2 { font-size: 20px; }
}

/* --- Узкий десктоп и планшет -------------------------------------------------- */
@media (max-width: 1240px) {
    .ui-cab .ui-nav { margin-left: 24px; gap: 2px; }
    .ui-cab .ui-nav a { padding: 10px 12px; font-size: 15.5px; }
    .cab-tool { grid-template-columns: 80px minmax(0, 1fr); column-gap: 18px; padding-right: 54px; }
    .cab-tool > img { width: 80px; max-height: 76px; }
    .cab-tool h2 { font-size: 20px; }
    .cab-tool p { font-size: 15px; }
}
@media (max-width: 1120px) {
    .ui-cab .ui-header__inner { padding: 0 18px 0 24px; }
    .cab-hero h1 { font-size: 50px; }
    .cab-hero p { font-size: 20px; }
    .cab-hero__art .cab-hero__boy { left: 46%; top: 16px; }
    .ui-cab .ui-header__right { margin-left: auto; }   /* меню скрыто — профиль и меню к правому краю */
    .cab-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
    .cab-bottom { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .cab-hero__cloud { display: none; }
    .cab-hero__art .cab-hero__boy { left: auto; right: -2%; top: 30px; height: calc(100% - 10px); }
}

/* --- Телефон: баннер → 6 карточек → предметы → тренировка → контрольные → мотивация */
@media (max-width: 700px) {
    body.ui-cab { background-color: #fff; }
    .ui-cab .ui-header__inner {
        width: 100%;
        min-height: 66px;
        margin: 0;
        padding: 4px 14px 0 16px;
        border: 0;
        border-radius: 0;
    }
    .ui-cab .ui-logo { flex-shrink: 0; }
    .ui-cab .ui-logo img { height: 44px; }
    .ui-cab .ui-header__right { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 8px; margin-left: 10px; }
    .ui-cab .ui-header__right > .ui-btn { display: none; }
    .ui-cab .ui-user { min-width: 0; }
    .ui-cab .ui-user > summary { min-height: 42px; max-width: 100%; padding: 3px 12px 3px 3px; gap: 8px; font-size: 14px; }
    .ui-cab .ui-user > summary .ui-avatar { width: 36px; height: 36px; flex-shrink: 0; }
    .ui-cab .ui-user__name { display: block; min-width: 0; max-width: 96px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ui-cab .ui-burger { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #e7f0fd; color: #2b4fc4; }

    .ui-cab .ui-main.cab-shell { width: 100%; padding: 0 12px 16px; border: 0; border-radius: 0; box-shadow: none; }

    .cab-hero { flex-direction: column; align-items: stretch; height: auto; border-radius: 20px; }
    .cab-hero__dashes { display: none; }
    .cab-hero__text { padding: 18px 16px 0; text-align: center; }
    .cab-hero h1 { font-size: 38px; }
    .cab-hero p { margin-top: 6px; font-size: 17px; }
    .cab-hero__actions { justify-content: center; }
    .cab-hero__art { position: relative; inset: auto; height: 170px; margin-top: 8px; }
    .cab-hero__art .cab-hero__boy { left: 50%; right: auto; top: 0; width: 330px; height: auto; transform: translateX(-50%); }

    .cab-tools { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
    .cab-tool { grid-template-columns: 62px minmax(0, 1fr); min-height: 0; padding: 12px 54px 12px 12px; column-gap: 14px; }
    .cab-tool > img { width: 60px; max-height: 58px; }
    .cab-tool h2 { margin-bottom: 4px; font-size: 18px; }
    .cab-tool p { font-size: 14.5px; }
    .cab-go { top: 50%; bottom: auto; right: 12px; width: 34px; height: 34px; transform: translateY(-50%); }

    .cab-bottom { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
    .cab-col { display: contents; }
    .cab-subjects { order: 1; }
    .cab-continue { order: 2; }
    .cab-exams { order: 3; }
    .cab-motiv { order: 4; }
    .cab-box { padding: 14px 14px 16px; }
    .cab-box__head h2 { font-size: 19px; gap: 10px; }
    .cab-box__head h2 img { width: 30px; height: 30px; }
    .cab-empty { grid-template-columns: 40px minmax(0, 1fr); }
    .cab-empty img { width: 38px; height: 38px; }
    .cab-row { grid-template-columns: minmax(0, 1fr); }
    .cab-empty .cab-pill, .cab-row .cab-pill { grid-column: 1 / -1; justify-self: start; }
    .cab-motiv { padding: 8px 12px; gap: 10px; }
    .cab-motiv__trophy { width: 46px; }
    .cab-motiv strong { font-size: 16.5px; }
    .cab-motiv span { font-size: 13.5px; }
    .cab-motiv__star { display: none; }
    .cab-motiv__boy { width: 70px; margin-bottom: -12px; }
}

/* =========================================================================
   14. «Проверить домашнее задание» — по макету 04_Проверить_домашнее_задание.png
   Оболочка, шапка, фон и боковой декор — из раздела 13 (body.ui-cab);
   здесь только содержимое страницы (body.ui-hw, классы hw-).
   ========================================================================= */

/* --- Баннер ~186px ---------------------------------------------------------- */
.hw-hero {
    position: relative;
    display: flex;
    align-items: center;
    height: 186px;
    border-radius: 22px;
    background:
        radial-gradient(ellipse 120px 70px at 3% 112%, rgba(255, 225, 140, .7), transparent 72%),
        radial-gradient(ellipse 180px 110px at 57% 22%, rgba(255, 255, 255, .95), transparent 70%),
        radial-gradient(ellipse 140px 90px at 84% 80%, rgba(255, 255, 255, .7), transparent 70%),
        radial-gradient(ellipse 160px 100px at 96% 10%, rgba(255, 240, 200, .7), transparent 70%),
        linear-gradient(105deg, #e6f2fd 0%, #e9f4fd 50%, #eef4fd 75%, #f5f3fb 100%);
    overflow: hidden;   /* край иллюстрации уходит за нижнюю границу баннера */
}
.hw-hero__text { position: relative; z-index: 3; max-width: 58%; padding: 0 0 4px 40px; }
.hw-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--cab-muted); font-size: 14px; font-weight: 600; }
.hw-crumbs a { color: var(--cab-muted); text-decoration: none; }
.hw-crumbs a:hover { color: var(--cab-link); }
.hw-crumbs [aria-current] { color: var(--cab-ink); }
.hw-hero h1 {
    margin: 0;
    color: var(--cab-ink);
    font-size: clamp(30px, 2.9vw, 41px);
    font-weight: 900;
    letter-spacing: -.5px;
    line-height: 1.08;
}
.hw-hero p { margin: 10px 0 0; color: #1d2d63; font-size: 17px; font-weight: 600; line-height: 1.4; }

.hw-hero__art { position: absolute; inset: 0 0 0 auto; width: 42%; pointer-events: none; }
.hw-hero__art img { position: absolute; height: auto; max-width: none; object-fit: contain; }
.hw-hero__art .hw-hero__boy { left: 14%; bottom: -6px; height: 104%; width: auto; z-index: 2; }
.hw-hero__books { left: 46%; bottom: 0; width: 22%; z-index: 3; }
.hw-hero__plants { right: -4%; bottom: -10px; width: 36%; z-index: 1; }
.hw-hero__sparkle { left: 4%; top: 14px; width: 26px; z-index: 2; }
.hw-hero__star { left: 52%; top: 18px; width: 22px; z-index: 2; }
.hw-hero__heart { right: 6%; top: 22px; width: 22px; z-index: 3; }

/* Жёлтая записка — HTML-текст в «рукописном» шрифте только внутри иллюстрации */
.hw-note {
    position: absolute;
    right: 7%;
    top: 26px;
    z-index: 4;
    width: 128px;
    padding: 16px 12px 12px;
    border-radius: 6px 6px 16px 6px;
    background: linear-gradient(160deg, #fff6c9, #ffe9a0);
    box-shadow: 0 6px 14px rgba(170, 120, 40, .18);
    color: var(--cab-ink);
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    transform: rotate(-7deg);
}
.hw-note__tape {
    position: absolute;
    top: -8px;
    left: 34%;
    width: 40px;
    height: 16px;
    background: rgba(183, 214, 247, .8);
    transform: rotate(-4deg);
}

/* --- Двухколоночная раскладка 67/33 -------------------------------------------- */
.hw-layout {
    display: grid;
    grid-template-columns: minmax(0, 67fr) minmax(0, 33fr);
    align-items: start;
    gap: 14px;
    margin-top: 12px;
}
.hw-main, .hw-form { display: grid; gap: 12px; min-width: 0; }
.hw-aside { display: grid; gap: 12px; min-width: 0; }

.hw-alert {
    padding: 10px 14px;
    border: 1px solid #ffc9cc;
    border-radius: 14px;
    background: #fff1f2;
    color: #9d1c24;
    font-weight: 700;
}

/* --- Шаги ------------------------------------------------------------------------ */
.hw-step {
    padding: 14px 18px 16px;
    border: 1px solid #e4eefb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(60, 110, 190, .06);
}
.hw-step__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.hw-step__head h2 { margin: 0; color: var(--cab-ink); font-size: 21px; font-weight: 800; line-height: 1.2; }
.hw-step__head p { margin: 2px 0 0; color: var(--cab-muted); font-size: 15px; font-weight: 500; }
.hw-num {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ece6ff;
    color: var(--cab-ink);
    font-size: 19px;
    font-weight: 900;
}
.hw-num--yellow { background: #ffd54a; }

.hw-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.hw-field { display: grid; align-content: start; gap: 5px; min-width: 0; }
.hw-label { color: var(--cab-ink); font-size: 14px; font-weight: 700; }
.hw-label em { color: var(--cab-muted); font-style: normal; font-weight: 500; }
.ui-hw .hw-input {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1.5px solid #dbe5f3;
    border-radius: 12px;
    background: #fff;
    color: var(--cab-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
}
.ui-hw .hw-input::placeholder { color: #93a0bd; font-weight: 500; }
.ui-hw .hw-input:focus { outline: none; border-color: var(--cab-link); box-shadow: var(--ui-focus); }
.ui-hw .hw-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23080B57' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 10px center / 16px no-repeat;
    text-overflow: ellipsis;
}
.ui-hw .hw-textarea { min-height: 76px; resize: vertical; line-height: 1.4; }

/* Раскрывающееся «Добавить условие задания» */
.hw-extra { margin-top: 12px; border: 1px dashed #c9d9f2; border-radius: 14px; background: #f8fbff; }
.hw-extra > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 14px;
    color: var(--cab-link);
    font-size: 15px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}
.hw-extra > summary::-webkit-details-marker { display: none; }
.hw-extra > summary::before { content: "＋"; font-weight: 900; }
.hw-extra[open] > summary::before { content: "−"; }
.hw-extra > summary em { color: var(--cab-muted); font-style: normal; font-weight: 500; }
.hw-extra > summary:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 14px; }
.hw-extra__body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; padding: 0 14px 14px; }

.hw-file-mini {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-height: 76px;
    padding: 10px 12px;
    border: 1.5px dashed #b9cff8;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}
.hw-file-mini__btn { padding: 7px 14px; border-radius: 10px; background: #e6f1ff; color: var(--cab-link); font-size: 14.5px; font-weight: 700; }
.hw-file-mini small { color: var(--cab-muted); font-size: 13.5px; font-weight: 600; }

/* Поля выбора файла: невидимый input на всю зону — клик и перетаскивание работают */
.hw-file-mini input[type="file"],
.hw-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hw-file-mini:focus-within, .hw-drop:focus-within { box-shadow: var(--ui-focus); }

/* --- Шаг 2: зона загрузки + превью рядом ------------------------------------- */
.hw-upload { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.hw-drop {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 12px 14px 14px;
    border: 2px dashed #a9c8f7;
    border-radius: 16px;
    background: linear-gradient(160deg, #f6faff, #eef5ff);
    color: var(--cab-ink);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.hw-drop:hover, .hw-drop.is-dragover { border-color: var(--cab-link); background: #eaf3ff; }
.hw-drop img { width: 74px; height: auto; margin-bottom: 2px; }
.hw-drop strong { font-size: 17px; font-weight: 800; }
.hw-drop small { color: var(--cab-muted); font-size: 14px; font-weight: 600; }
.hw-drop__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 280px;
    min-height: 42px;
    margin: 8px 0 4px;
    border-radius: 12px;
    background: var(--cab-link);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    pointer-events: none;
}
.hw-drop__formats { font-size: 13.5px; }
.hw-upload__side { display: grid; gap: 6px; align-content: start; min-height: 0; }
.hw-upload__hint { margin: 0; color: var(--cab-muted); font-size: 13.5px; font-weight: 500; }
.hw-previews { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); margin-top: 0; }
/* Превью фото работы: миниатюра + имя файла в одну строку, по высоте не больше зоны загрузки */
.hw-upload__side .hw-previews { grid-template-columns: minmax(0, 1fr); }
.hw-upload__side .ui-preview { grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px; border: 1px solid #e4eefb; border-radius: 14px; background: #f8fbff; }
.hw-upload__side .ui-preview__img { aspect-ratio: 4 / 3; }
.hw-upload__side .ui-preview figcaption { color: var(--cab-ink); font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
.hw-upload__side .ui-preview__remove { top: 6px; right: 6px; }
.hw-upload__side .ui-previews:not(:empty) ~ .ui-file-note { display: none; }
.hw-upload__side .ui-previews:empty ~ .hw-upload__hint { display: none; }   /* о замене — только после выбора файла */
.ui-hw .ui-file-note { margin: 0; }

/* --- Шаг 3: светло-жёлтая панель с кнопкой ------------------------------------ */
.hw-submit {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 130px;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border: 1px solid #fbe9b4;
    border-radius: 18px;
    background: linear-gradient(110deg, #fffbee, #fff4d6);
}
.hw-submit h2 { margin: 0; color: var(--cab-ink); font-size: 21px; font-weight: 800; }
.hw-submit p { margin: 2px 0 8px; color: var(--cab-muted); font-size: 15px; font-weight: 500; }
.hw-submit .hw-num { align-self: start; margin-top: 2px; }
.hw-submit__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.hw-submit__btn {
    min-height: 50px;
    padding: 10px 26px;
    border: 0;
    border-radius: 14px;
    background: #ffc928;
    color: var(--cab-ink);
    box-shadow: 0 4px 0 #e5a90c, 0 8px 16px rgba(240, 170, 20, .22);
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.hw-submit__btn:hover { background: #ffd24f; }
.hw-submit__btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #e5a90c; }
.hw-submit__btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.hw-cost { color: var(--cab-muted); font-size: 14px; font-weight: 600; }
.hw-submit__art { position: relative; height: 84px; }
.hw-submit__art img { position: absolute; height: auto; object-fit: contain; }
.hw-submit__books { right: 0; bottom: 0; width: 92px; }
.hw-submit__cup { left: 2px; bottom: 0; width: 46px; }

/* --- Правая колонка ------------------------------------------------------------- */
.hw-side {
    padding: 12px 16px 14px;
    border: 1px solid #e4eefb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(60, 110, 190, .06);
}
.hw-side--blue { background: linear-gradient(160deg, #f1f7ff, #e8f1fe); border-color: #d8e8fb; }
.hw-side--mint { background: linear-gradient(160deg, #effbf5, #e3f7ee); border-color: #cdeedd; }
.hw-side > summary { list-style: none; cursor: default; }
.hw-side > summary::-webkit-details-marker { display: none; }
.hw-side > summary h2 { margin: 0 0 8px; color: var(--cab-ink); font-size: 19px; font-weight: 800; }

.hw-how { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hw-how li { display: grid; grid-template-columns: 40px 24px minmax(0, 1fr); align-items: start; gap: 10px; }
.hw-how img { width: 38px; height: 38px; object-fit: contain; }
.hw-how__n {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 6px;
    border-radius: 50%;
    background: #fff;
    color: var(--cab-ink);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(60, 110, 190, .12);
}
.hw-how strong { display: block; color: var(--cab-ink); font-size: 15px; font-weight: 700; line-height: 1.25; }
.hw-how small { display: block; color: var(--cab-muted); font-size: 13.5px; font-weight: 500; line-height: 1.3; }

.hw-tips { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.hw-tips li {
    position: relative;
    padding-left: 28px;
    color: var(--cab-ink);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
}
.hw-tips li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1fae74 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.hw-recent { display: block; padding: 8px 12px; border-radius: 12px; background: #f5f9ff; }

/* Блок результата проверки (прежняя разметка) — в стиле страницы */
.ui-hw .ui-result { margin-top: 12px; }
.ui-hw .ui-result > .ui-card { border-color: #e4eefb; border-radius: 18px; }

/* --- Широкий экран: компактная страница — без формы условий видны загрузка, кнопка и низ оболочки.
   Только для /homework (body.ui-hw), кабинет не затрагивается. */
@media (min-width: 1200px) {
    .ui-hw .ui-header__inner { min-height: 62px; margin-top: 8px; }
    .ui-hw .ui-logo img { height: 52px; }
    .ui-hw .ui-nav a { min-height: 40px; padding: 7px 15px; }
    .ui-hw .ui-user > summary { min-height: 42px; padding-top: 3px; padding-bottom: 3px; }
    .ui-hw .ui-main.cab-shell { margin-bottom: 8px; padding-bottom: 12px; }
    .ui-hw .ui-footer__inner { padding: 2px 0 8px; }

    .hw-hero { height: 168px; }
    .hw-crumbs { margin-bottom: 6px; }
    .hw-hero h1 { font-size: 38px; }
    .hw-hero p { margin-top: 8px; font-size: 16px; }
    .hw-note { top: 18px; width: 118px; padding: 14px 10px 10px; font-size: 16px; }

    .hw-layout { margin-top: 10px; gap: 12px; }
    .hw-main, .hw-form, .hw-aside { gap: 10px; }

    .hw-step { padding: 12px 16px 13px; }
    .hw-step__head { gap: 12px; margin-bottom: 8px; }
    .hw-step__head h2 { font-size: 20px; }
    .hw-num { width: 36px; height: 36px; font-size: 18px; }
    .hw-fields { grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); gap: 10px; }
    .hw-field { gap: 4px; }
    .hw-fields .hw-label { white-space: nowrap; }   /* подписи в одну строку — поля стоят ровно */
    .ui-hw .hw-input { min-height: 42px; padding: 8px 12px; }
    .hw-extra { margin-top: 10px; }
    .hw-extra > summary { min-height: 38px; padding: 6px 14px; }

    /* Шаг 2: зона выбора слева (горизонтальная), превью справа */
    .hw-drop {
        grid-template-columns: 60px minmax(0, 1fr);
        justify-items: start;
        column-gap: 14px;
        row-gap: 0;
        padding: 10px 14px;
        text-align: left;
    }
    .hw-drop img { grid-row: 1 / span 4; align-self: center; width: 58px; margin: 0; }
    .hw-drop strong { font-size: 16px; }
    .hw-drop__or { display: none; }   /* на широком экране рядом есть кнопка — подпись лишняя */
    .hw-drop__btn { width: auto; min-height: 36px; margin: 6px 0 4px; padding: 0 18px; }
    .hw-drop__formats { font-size: 15px; }
    .hw-step__head p { font-size: 15px; }
    .hw-upload__side { gap: 4px; }

    /* Шаг 3: высота по содержимому, кнопка и списание в одном ряду */
    .hw-submit { grid-template-columns: 36px minmax(0, 1fr) 112px; padding: 8px 16px; gap: 12px; }
    .hw-submit h2 { font-size: 20px; line-height: 1.2; }
    .hw-submit p { margin: 0 0 6px; }
    .hw-submit__btn { min-height: 44px; padding: 8px 22px; font-size: 16px; }
    .hw-submit__art { height: 72px; }
    .hw-submit__books { width: 80px; }
    .hw-submit__cup { width: 38px; }

    /* Текст страницы — не меньше 15 px */
    .hw-label, .hw-label em, .hw-cost, .hw-upload__hint, .hw-drop__formats,
    .ui-hw .ui-file-note, .hw-file-mini small, .hw-file-mini__btn,
    .hw-how small, .hw-recent span, .hw-crumbs, .hw-extra > summary { font-size: 15px; }
    .hw-tips li, .hw-how strong { font-size: 15px; }
    .hw-layout { margin-top: 8px; gap: 10px; }
    .hw-main, .hw-form, .hw-aside { gap: 8px; }
    .hw-hero { height: 164px; }
    .hw-tips { gap: 6px; }
    .hw-how { gap: 6px; }
    .hw-how li { align-items: center; }
    .hw-how__n { margin-top: 0; }
    /* Правая колонка — по содержимому, плотнее */
    .hw-side { padding: 10px 14px 12px; }
    .hw-side > summary h2 { margin-bottom: 6px; font-size: 18px; }
    .hw-how { gap: 6px; }
    .hw-how img { width: 34px; height: 34px; }
    .hw-tips { gap: 5px; }
    .hw-recent { gap: 4px; padding: 8px 12px; }
}

/* --- Невысокие окна (масштаб экрана 125–150% или маленький монитор): ещё плотнее,
   кнопка проверки и низ оболочки остаются в первом экране. Текст не меньше 15 px. */
@media (min-width: 1200px) and (max-height: 780px) {
    .ui-hw .ui-header__inner { min-height: 52px; margin-top: 6px; }
    .ui-hw .ui-logo img { height: 44px; }
    .ui-hw .ui-nav a { min-height: 36px; padding: 6px 14px; }
    .ui-hw .ui-user > summary { min-height: 38px; padding-top: 2px; padding-bottom: 2px; }
    .ui-hw .ui-user > summary .ui-avatar { width: 32px; height: 32px; }
    .ui-hw .ui-main.cab-shell { padding-bottom: 12px; }

    .hw-hero { height: 112px; }
    .hw-hero__text { padding-left: 32px; }
    .hw-hero__art { width: 32%; }   /* больше ширины тексту — описание в одну строку */
    .hw-crumbs { margin-bottom: 4px; }
    .hw-hero h1 { font-size: 32px; }
    .hw-hero p { margin-top: 6px; font-size: 15px; }
    .hw-note { top: 10px; width: 104px; padding: 12px 8px 8px; font-size: 15px; }

    .hw-step { padding: 10px 14px 11px; }
    .hw-step__head { gap: 10px; margin-bottom: 6px; align-items: center; }
    .hw-step__head > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }   /* заголовок и пояснение в одну строку */
    .hw-step__head h2 { font-size: 19px; }
    .hw-step__head p { margin: 0; }
    .hw-hero__text { max-width: 70%; }
    .hw-num { width: 32px; height: 32px; font-size: 16px; }
    .hw-extra { margin-top: 8px; }
    .hw-extra > summary { min-height: 36px; padding: 5px 12px; }

    .hw-drop { grid-template-columns: 48px minmax(0, 1fr); padding: 8px 12px; }
    .hw-drop img { width: 46px; }
    .hw-drop__btn { min-height: 34px; margin: 4px 0 2px; }

    /* Шаг 3: заголовок и пояснение в одну строку над кнопкой */
    .hw-submit { grid-template-columns: 32px minmax(0, 1fr); padding: 8px 14px; }
    .hw-submit__art { display: none; }   /* декоративные книги — только на высоких экранах */
    .hw-submit__body { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
    .hw-submit h2 { font-size: 19px; }
    .hw-submit p { margin: 0 0 6px; }
    .hw-submit__row { flex-basis: 100%; }
    .hw-submit__btn { min-height: 42px; }
    .hw-submit__art { height: 60px; }
    .hw-submit__books { width: 66px; }
    .hw-submit__cup { width: 32px; }

    .hw-side { padding: 8px 14px 10px; }
    .hw-side > summary h2 { margin-bottom: 4px; font-size: 17px; }
    .hw-how img { width: 30px; height: 30px; }
    .hw-how { gap: 4px; }
    .hw-tips { gap: 4px; }
}

/* --- Планшет --------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .hw-layout { grid-template-columns: minmax(0, 1fr); }
    .hw-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
    .hw-hero__text { max-width: 62%; }
}
@media (max-width: 900px) {
    .hw-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hw-aside { grid-template-columns: minmax(0, 1fr); }
    .hw-note { display: none; }
}

/* --- Телефон: блоки последовательно, справочные блоки — аккордеоны ---------------- */
@media (max-width: 700px) {
    .hw-hero { flex-direction: column; align-items: stretch; height: auto; min-height: 0; border-radius: 20px; }
    .hw-hero__text { max-width: none; padding: 14px 120px 16px 16px; }
    .hw-crumbs { margin-bottom: 6px; font-size: 13px; }
    .hw-hero h1 { font-size: 26px; }
    .hw-hero p { margin-top: 6px; font-size: 14.5px; }
    .hw-hero__art { width: 118px; }
    .hw-hero__art .hw-hero__boy { left: auto; right: -6px; height: 112px; bottom: -4px; }
    .hw-hero__books, .hw-hero__plants, .hw-hero__heart, .hw-hero__star { display: none; }
    .hw-hero__sparkle { left: 6px; top: 10px; width: 18px; }

    .hw-fields { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .hw-extra__body { grid-template-columns: minmax(0, 1fr); }
    .hw-extra > summary { flex-wrap: wrap; row-gap: 0; }
    .hw-extra > summary em { flex-basis: 100%; padding-left: 20px; font-size: 14px; }
    .hw-upload { grid-template-columns: minmax(0, 1fr); }
    .hw-step { padding: 12px 14px 14px; }
    .hw-step__head h2 { font-size: 19px; }
    .hw-num { width: 34px; height: 34px; font-size: 17px; }

    .hw-submit { grid-template-columns: 34px minmax(0, 1fr); padding: 12px 14px; }
    .hw-submit__art { display: none; }
    .hw-submit__btn { width: 100%; }

    .hw-side { padding: 0; }
    .hw-side > summary { display: flex; align-items: center; min-height: 48px; padding: 6px 14px; cursor: pointer; }
    .hw-side > summary h2 { margin: 0; font-size: 16px; }
    .hw-side > summary::after {
        content: "";
        margin-left: auto;
        width: 8px; height: 8px;
        border-right: 2.5px solid var(--cab-ink);
        border-bottom: 2.5px solid var(--cab-ink);
        transform: rotate(45deg);
    }
    .hw-side[open] > summary::after { transform: rotate(-135deg); }
    .hw-side > :not(summary) { margin: 0 14px 14px; }
}

/* =========================================================================
   15. «Объяснить тему» — в стиле кабинета и «Проверить домашнее задание».
   Использует компоненты раздела 14 (hw-*); здесь только отличия (body.ui-ex).
   ========================================================================= */

/* Баннер: высота --exh подстраивается под доступную высоту окна (свободное место под футером
   уходит в баннер, снизу остаётся ~20 px). Иллюстрации и записка масштабируются от --exh. */
.ui-ex .ex-hero {
    --exh: 186px;
    height: var(--exh);
    background:
        radial-gradient(ellipse 120px 70px at 3% 112%, rgba(255, 225, 140, .7), transparent 72%),
        radial-gradient(ellipse 150px 60px at 52% 88%, rgba(255, 255, 255, .9), transparent 70%),   /* облака */
        radial-gradient(ellipse 110px 46px at 46% 18%, rgba(255, 255, 255, .85), transparent 70%),
        radial-gradient(ellipse 90px 40px at 22% 92%, rgba(255, 255, 255, .7), transparent 70%),
        radial-gradient(ellipse 180px 110px at 96% 10%, rgba(255, 240, 200, .7), transparent 70%),
        linear-gradient(105deg, #e3f0fd 0%, #e8f3fd 50%, #edf3fd 75%, #f4f2fb 100%);
}
.ui-ex .ex-hero .hw-hero__text { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.ui-ex .ex-hero .hw-crumbs { margin-bottom: calc(var(--exh) * .07); }
.ui-ex .ex-hero h1 { font-size: clamp(32px, calc(var(--exh) * .19), 44px); }
.ui-ex .ex-hero p { margin-top: calc(var(--exh) * .05); font-size: 16px; }

.ui-ex .ex-hero .hw-hero__art { width: min(46%, calc(var(--exh) * 2.55 + 30px)); }   /* сцена сжимается вместе с баннером — без разрывов */
.ui-ex .hw-hero__art .ex-boy { left: 8%; bottom: calc(var(--exh) * -.05); height: 106%; }
.ex-glow {
    position: absolute;
    left: calc(8% + var(--exh) * .62);
    top: calc(var(--exh) * -.12);
    width: calc(var(--exh) * .75);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 220, 110, .6) 0, rgba(255, 220, 110, 0) 68%);
    z-index: 0;
}
.ui-ex .ex-books { left: calc(8% + var(--exh) * .92); bottom: 0; width: calc(var(--exh) * .5); z-index: 3; }
.ui-ex .hw-hero__plants { right: 0; bottom: calc(var(--exh) * -.06); width: calc(var(--exh) * 1.05); z-index: 1; }
.ui-ex .hw-note {
    right: 3%;
    top: max(10px, calc(var(--exh) * .09));
    width: max(122px, calc(var(--exh) * .6));
    padding: max(10px, calc(var(--exh) * .07)) 10px max(8px, calc(var(--exh) * .05));
    font-size: clamp(14px, calc(var(--exh) * .08), 18px);
    z-index: 4;
}
.ui-ex .hw-hero__sparkle { left: 2%; top: 16px; }
.ui-ex .hw-hero__star { left: calc(8% + var(--exh) * .95); top: calc(var(--exh) * .14); bottom: auto; width: 22px; }
.ui-ex .ex-star2 { right: 1.5%; bottom: 14px; width: 18px; z-index: 4; }
.ui-ex .ex-sparkle2 { left: 1%; bottom: 16px; width: 16px; opacity: .8; }

@media (min-width: 1200px) {
    /* остальная страница при обычном режиме ≈ 630 px → баннер = окно − 650, от 168 до 230 */
    .ui-ex .ex-hero { --exh: clamp(168px, calc(100vh - 650px), 230px); }
}
@media (min-width: 1200px) and (max-height: 780px) {
    /* невысокие окна: остальная страница ≈ 555 px → баннер = окно − 575, от 112 до 230 */
    .ui-ex .ex-hero { --exh: clamp(112px, calc(100vh - 575px), 230px); }
    .ui-ex .ex-hero .hw-hero__text { max-width: 60%; }
}

/* Шаг 1: тема — самое широкое поле */
.ui-ex .ex-fields { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .8fr); }

/* Шаг 2: компактные вкладки */
.ex-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ex-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 14px 6px 10px;
    border: 1.5px solid #dbe5f3;
    border-radius: 999px;
    background: #fff;
    color: var(--cab-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.ex-tab img { width: 22px; height: 22px; object-fit: contain; }
.ex-tab[aria-selected="true"] { border-color: #a9c8f7; background: #e8f2ff; color: var(--cab-link); }
.ex-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-ex .ex-textarea { min-height: 84px; height: 84px; }
.ex-panel .hw-upload { margin: 0; }

/* Шаг 3: режим объяснения + запуск в одной светло-жёлтой карточке */
.ex-run {
    padding: 12px 16px 13px;
    border: 1px solid #fbe9b4;
    border-radius: 18px;
    background: linear-gradient(110deg, #fffbee, #fff4d6);
}
.ex-run__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 10px; }   /* заголовок и режимы в один ряд */
.ex-run__top .hw-step__head { margin: 0; align-items: center; }
.ex-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-mode { position: relative; cursor: pointer; }
.ex-mode input { position: absolute; opacity: 0; pointer-events: none; }
.ex-mode span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 16px;
    border: 1.5px solid #f1dc9c;
    border-radius: 999px;
    background: #fff;
    color: var(--cab-ink);
    font-size: 15px;
    font-weight: 700;
}
.ex-mode input:checked + span { border-color: var(--cab-ink); background: var(--cab-ink); color: #fff; }
.ex-mode input:focus-visible + span { box-shadow: var(--ui-focus); }
.ex-run__row .hw-submit__btn { display: inline-flex; align-items: center; gap: 8px; }
.ex-run__row .hw-submit__btn img { width: 24px; height: 24px; object-fit: contain; }

@media (min-width: 1200px) {
    .ex-run { padding: 10px 16px 12px; }
}
@media (min-width: 1200px) and (max-height: 780px) {
    .ui-ex .ex-textarea { min-height: 64px; height: 64px; }
    .ex-run { padding: 8px 14px 10px; }
    .ex-run__top { margin-bottom: 8px; }
    .ex-mode span, .ex-tab { min-height: 34px; }
}

@media (max-width: 900px) {
    .ui-ex .ex-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .ui-ex .ex-fields { grid-template-columns: minmax(0, 1fr); }
    .ui-ex .ex-hero { height: auto; }
    .ui-ex .ex-hero .hw-hero__art { width: 124px; }
    .ui-ex .hw-hero__art .ex-boy { left: auto; right: -6px; height: 118px; bottom: -4px; }
    .ex-glow { left: auto; right: 0; top: auto; bottom: 30px; width: 110px; }
    .ui-ex .hw-note, .ui-ex .ex-books, .ui-ex .ex-star2, .ui-ex .ex-sparkle2, .ui-ex .hw-hero__plants { display: none; }
    .ui-ex .ex-hero h1 { font-size: 28px; }
    .ui-ex .ex-hero p { font-size: 15px; }
    .ex-run__row .hw-submit__btn { justify-content: center; width: 100%; }
}
@media (min-width: 1200px) {
    body.ui-hw:not(.ui-ex) .hw-hero {
        height: 226px;
    }
}
@media (min-width: 1200px) {
    .cab-hero h1 {
        font-size: 62px;
    }
}
/* =========================================================================
   16. «Выучить материал» — в стиле «Объяснить тему» (body.ui-mz поверх ui-cab/ui-hw/ui-ex).
   Баннер, поля, вкладки, жёлтая панель и правая колонка — из разделов 14–15; здесь только отличия.
   ========================================================================= */

/* Баннер: мальчик с книгой левее записки, записка справа и не перекрывает персонажа */
.ui-mz .hw-hero__art .mz-boy { left: auto; right: calc(var(--exh) * .66 + 34px); bottom: calc(var(--exh) * -.04); height: 98%; width: auto; }
.ui-mem .hw-hero__art .mz-boy { bottom: 0; }   /* «Выучить материал»: мальчик чуть выше, книги не обрезаются краем баннера */
.ui-mz .ex-hero .hw-hero__text { max-width: 56%; }
.ui-mz .hw-hero__plants { right: -2%; }
.ui-mz .hw-note { right: 2.5%; }

/* Выбор учебника — той же высоты и вида, что остальные поля */
.ui-mz .hw-field .ui-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 42px;
    padding: 9px 34px 9px 12px;
    border: 1.5px solid #dbe5f3;
    border-radius: 12px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23080B57' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 10px center / 16px no-repeat;
    color: var(--cab-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
}
.ui-mz .hw-field .ui-select:focus { outline: none; border-color: var(--cab-link); box-shadow: var(--ui-focus); }

/* Шаг 3: семь компактных кнопок-чекбоксов — 4 в первом ряду, 3 во втором */
.mz-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mz-type { position: relative; display: block; cursor: pointer; }
.mz-type input { position: absolute; opacity: 0; pointer-events: none; }
.mz-type__box {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 6px 12px 6px 10px;
    border: 1.5px solid #dbe5f3;
    border-radius: 12px;
    background: #fff;
    color: var(--cab-ink);
    font-size: 15px;
    font-weight: 700;
    transition: border-color .12s ease, background-color .12s ease;
}
.mz-type__box img { flex-shrink: 0; width: 24px; height: 24px; object-fit: contain; }
.mz-type__name { flex: 1; min-width: 0; line-height: 1.15; }
.mz-type__tick {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid #c5d3ea;
    border-radius: 6px;
    background: #fff;
    color: transparent;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}
.mz-type:hover .mz-type__box { border-color: #b9a8f0; }
.mz-type input:checked + .mz-type__box { border-color: #8d70f0; background: #f1ecff; }
.mz-type input:checked + .mz-type__box .mz-type__tick { border-color: #7a58ee; background: #7a58ee; color: #fff; }
.mz-type input:focus-visible + .mz-type__box { box-shadow: var(--ui-focus); }

.mz-count { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; }
.mz-count .hw-select { width: auto; min-width: 150px; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }

/* Жёлтая панель действия — в правой колонке под блоками: кнопка и расход рядом */
.mz-run { padding: 12px 14px; }
.mz-run .ex-run__row { flex-wrap: nowrap; gap: 12px; }
.mz-run .hw-submit__btn { flex-shrink: 0; white-space: nowrap; }
.mz-cost { display: grid; line-height: 1.25; }
.mz-cost small { font-size: inherit; }

/* Компактная высота: баннер ниже, чем у «Объяснить тему» — под ним больше строк содержимого */
.ui-mz .hw-hero__text { padding-bottom: 0; }
@media (min-width: 1200px) {
    .ui-mz .ex-hero { --exh: clamp(120px, calc(100vh - 680px), 210px); }
    .ui-mz .ex-hero .hw-hero__text { max-width: 62%; }
    .mz-type__box { min-height: 40px; padding: 4px 8px; gap: 7px; font-size: 14.5px; }
    .mz-type__name { white-space: nowrap; }
    .mz-types { gap: 6px; }
    .mz-count { margin-top: 8px; }
    .mz-run { padding: 10px 12px; }
    .mz-cost small { display: block; }
    .mz-dot { display: none; }
    .mz-cost { white-space: nowrap; }
    .mz-run .hw-submit__btn { padding: 8px 16px; font-size: 15px; }
    .mz-types { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) and (max-height: 780px) {
    .ui-mz .ex-hero { --exh: clamp(104px, calc(100vh - 620px), 190px); }
    .ui-mz .ui-header__inner { margin-top: 4px; }
    .ui-mz .hw-layout { margin-top: 6px; }
    .ui-mz .hw-step { padding: 8px 14px 9px; }
    .ui-mz .hw-step__head { margin-bottom: 5px; }
    .ui-mz .hw-field { gap: 2px; }
    .ui-mz .hw-input, .ui-mz .hw-field .ui-select { min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
    .mz-type__box { min-height: 36px; }
    .ex-tab { min-height: 32px; }
    .ex-tabs { margin-bottom: 6px; }
}

@media (max-width: 900px) {
    .mz-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .ui-mz .ex-hero .hw-hero__text { max-width: 100%; padding-right: 130px; }
    .ui-mz .hw-hero__art .mz-boy { right: -4px; left: auto; height: 100px; bottom: -4px; }
    .mz-count .hw-select { flex: 1; }
}
@media (max-width: 420px) {
    .mz-type__box { padding-left: 8px; gap: 7px; font-size: 14px; }
}

/* =========================================================================
   17. «Подготовиться к контрольной» (body.ui-ep поверх ui-cab/ui-hw/ui-ex/ui-mz).
   Баннер, поля, правая колонка и жёлтый блок — из разделов 14–16; здесь только отличия.
   ========================================================================= */
.ui-ep fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.hw-side--lav { background: linear-gradient(160deg, #f7f4ff, #efeaff); border-color: #e0d7ff; }

/* «Продолжить подготовку» — компактный блок со строками подготовок */
.ep-cont { padding: 10px 16px 12px; background: linear-gradient(160deg, #faf8ff, #f3efff); border-color: #e0d7ff; }
.ep-cont__title { margin: 0 0 8px; color: var(--cab-ink); font-size: 19px; font-weight: 800; line-height: 1.2; }
.ep-cont__list { display: grid; gap: 6px; }
.ep-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 5px 12px;
    border: 1px solid #e4eefb;
    border-radius: 12px;
    background: #fff;
    color: var(--cab-ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.ep-row:hover { border-color: #c8bdf5; background: #fcfbff; }
.ep-row:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ep-row__l { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ep-row__l img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.ep-row .ui-badge { flex-shrink: 0; }

/* Шаг 1: два поля в ряд, ниже — срок контрольной кнопками */
.ui-ep .ep-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ep-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.ep-label { float: left; margin: 0 6px 0 0; padding: 0; color: var(--cab-ink); font-size: 14px; font-weight: 700; line-height: 38px; }
.ep-pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* Переключатели (срок, источник) — радио в виде компактных кнопок */
.ep-pill { position: relative; display: inline-block; cursor: pointer; }
.ep-pill input { position: absolute; opacity: 0; pointer-events: none; }
.ep-pill span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 16px;
    border: 1.5px solid #dbe5f3;
    border-radius: 999px;
    background: #fff;
    color: var(--cab-ink);
    font-size: 15px;
    font-weight: 700;
}
.ep-pill--icon span { padding-left: 10px; }
.ep-pill span img { width: 22px; height: 22px; object-fit: contain; }
.ep-pill:hover span { border-color: #b9a8f0; }
.ep-pill input:checked + span { border-color: #a9c8f7; background: #e8f2ff; color: var(--cab-link); }
.ep-pill input:focus-visible + span { box-shadow: var(--ui-focus); }

/* Шаг 2: пояснение выбранного источника — тонкая строка, без отдельной плашки */
.ep-panel { margin-top: 8px; }
.ep-hint { margin: 0; color: var(--cab-muted); font-size: 15px; font-weight: 600; line-height: 1.35; }
.ep-hint a { color: var(--cab-link); }
.ui-ep .ep-fields-book { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.ep-pdfpages { margin-top: 8px; max-width: 360px; }
.ep-panel .hw-upload { margin: 0; }

/* Жёлтый блок действия: пояснение над кнопкой, внутри правой колонки */
.ep-run { display: grid; gap: 8px; padding: 12px 14px; }
.ep-run__note { margin: 0; color: var(--cab-ink); font-size: 15px; font-weight: 600; line-height: 1.35; }
.ep-run .hw-submit__btn { padding: 8px 18px; font-size: 16px; }

@media (min-width: 1200px) {
    .ui-ep .ex-hero .hw-hero__text { max-width: 66%; }
    .ep-run { padding: 10px 14px; gap: 6px; }
}
@media (min-width: 1200px) and (max-height: 780px) {
    .ep-cont { padding: 8px 14px 10px; }
    .ep-cont__title { margin-bottom: 6px; font-size: 18px; }
    .ep-row { min-height: 36px; padding-top: 3px; padding-bottom: 3px; }
    .ep-pill span { min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
    .ep-label { line-height: 34px; }
}

/* Планшет и телефон: блоки подряд — форма, затем кнопка, затем подсказки */
@media (max-width: 1100px) {
    .ui-ep .hw-aside { display: contents; }
    .ui-ep .hw-main { order: 1; }
    .ui-ep .ep-run { order: 2; }
    .ui-ep .hw-side { order: 3; }
}
@media (max-width: 900px) {
    .ui-ep .ep-fields-book { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-ep .ep-fields-book .hw-field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .ui-ep .ep-fields, .ui-ep .ep-fields-book { grid-template-columns: minmax(0, 1fr); }
    .ep-label { float: none; width: 100%; line-height: 1.3; }
    .ep-pills { gap: 6px; }
    .ep-pill span { padding-left: 8px; padding-right: 12px; font-size: 14.5px; }
    .ep-row { flex-wrap: wrap; }
    .ep-run .hw-submit__btn { width: 100%; justify-content: center; }
}

/* Две колонки одной высоты: слева белые шаги по своей высоте и под ними жёлтый блок (его нижняя граница — низ страницы), справа блоки, зелёный «Советы» растянут до низа */
@media (min-width: 1101px) {
    .ui-ep .hw-layout { align-items: stretch; }
    .ui-ep .hw-main { display: flex; flex-direction: column; gap: 8px; }
    .ui-ep .hw-form { display: flex; flex: 0 0 auto; flex-direction: column; gap: 8px; }
    .ui-ep .hw-form > .hw-step { display: flex; flex: 0 0 auto; flex-direction: column; justify-content: flex-start; gap: 12px; }
    .ui-ep .hw-main > .ep-run { margin-top: auto; }
    body.ui-ep .hw-aside { display: flex; flex-direction: column; align-content: normal; align-items: stretch; }
    body.ui-ep .hw-aside > .hw-side { align-self: stretch; flex: 0 0 auto; }
    body.ui-ep .hw-aside > .hw-side--mint { flex: 1 1 auto; }
}

/* =========================================================================
   18. «Создать тест» (body.ui-qz поверх ui-cab/ui-hw/ui-ex/ui-mz).
   Баннер, поля, вкладки, правая колонка и жёлтый блок — из разделов 14–16; здесь только отличия.
   ========================================================================= */
.qz-opt { color: #7a58ee; font-size: .8em; font-weight: 700; white-space: nowrap; }
.ui-qz .qz-fields { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px 16px; align-items: end; }
.qz-note { margin: 0 0 10px; color: var(--cab-muted); font-size: 15px; font-weight: 600; line-height: 1.35; }
.qz-link2 { margin-top: 6px; }
@media (max-width: 900px) {
    .ui-qz .qz-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-qz .qz-note { grid-column: 1 / -1; margin: 0; }
}
@media (max-width: 700px) {
    .ui-qz .qz-fields { grid-template-columns: minmax(0, 1fr); }
}
/* Жёлтый блок на узких экранах (и у «Выучить материал»): расход переносится под кнопку, а не выходит за край */
@media (max-width: 1199px) {
    .mz-run .ex-run__row { flex-wrap: wrap; }
}
/* Планшет и телефон: форма, затем кнопка, затем подсказки */
@media (max-width: 1100px) {
    .ui-qz .hw-aside { display: contents; }
    .ui-qz .hw-main { order: 1; }
    .ui-qz .mz-run { order: 2; }
    .ui-qz .hw-side { order: 3; }
}

/* «Создать тест»: на широком экране оболочка доходит до низа страницы (над подвалом) — свободная высота делится между шагами */
@media (min-width: 1101px) {
    .ui-qz .ui-main.cab-shell { display: flex; flex: 1 0 auto; flex-direction: column; }
    .ui-qz .hw-layout { flex: 1 1 auto; align-items: stretch; }
    .ui-qz .hw-main { display: flex; flex-direction: column; gap: 8px; }
    .ui-qz .hw-form { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; }
    .ui-qz .hw-form > .hw-step { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 10px; }
    .ui-qz .hw-aside { display: flex; flex-direction: column; }
    .ui-qz .hw-aside > .mz-run { margin-top: auto; }
}

/* =========================================================================
   19. «Мои учебники» (body.ui-bk поверх ui-cab/ui-hw/ui-ex/ui-mz).
   Баннер, поля, правая колонка и жёлтые кнопки — из разделов 14–16; здесь только отличия.
   ========================================================================= */
.hw-alert--ok { border-color: #bfe8d2; background: #effaf4; color: #1f6b46; }
.ui-bk .bk-login { margin-top: 10px; }

/* Баннер: записки нет — мальчик ближе к правому краю, левее листвы */
.ui-bk .hw-hero__art .mz-boy { right: calc(var(--exh) * .5 + 16px); }

/* Мои учебники: заголовок со счётчиком, пустое состояние — одна строка */
.bk-title { margin: 0; color: var(--cab-ink); font-size: 20px; font-weight: 800; line-height: 1.2; }
.bk-empty { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: #f5f9ff; }
.bk-empty img { flex-shrink: 0; width: 38px; height: auto; object-fit: contain; }
.bk-empty strong { display: block; color: var(--cab-ink); font-size: 16px; font-weight: 800; line-height: 1.25; }
.bk-empty span { color: var(--cab-muted); font-size: 15px; font-weight: 600; line-height: 1.3; }

.ui-bk .bk-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); margin-top: 10px; gap: 10px; }
.bk-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 10px; }
.ui-bk .ui-book { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; padding: 10px 12px; border-radius: 14px; box-shadow: none; border-color: #e4eefb; }
.ui-bk .ui-book h3 { margin: 4px 0 2px; font-size: 16px; }
.ui-bk .ui-book p { font-size: 14px; }
.ui-bk .ui-book__meta { margin-top: 4px; gap: 1px; font-size: 13px; }
.ui-bk .ui-cover { padding: 6px; border-radius: 8px 10px 10px 8px; }
.ui-bk .ui-cover__subject { font-size: 11px; }
.ui-bk .ui-cover__grade { font-size: 26px; }

/* Шаг 1: три ряда полей — предмет/класс/год, название, авторы/издательство */
.bk-form { display: grid; gap: 8px; }
.bk-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px; }
.bk-s2 { grid-column: span 2; }
.bk-s4 { grid-column: span 4; }
.bk-s6 { grid-column: 1 / -1; }
.bk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.bk-foot .ep-hint { flex: 1 1 260px; }
.bk-foot--end { justify-content: flex-end; }
.bk-foot .hw-submit__btn { margin-left: auto; }

/* Результат проверки и загрузка PDF */
.bk-result--found { background: linear-gradient(160deg, #f0fbf5, #e3f7ee); border-color: #c9eedc; }
.bk-result--new { background: linear-gradient(120deg, #fffbee, #fff4d6); border-color: #fbe9b4; }
.bk-list { display: grid; gap: 8px; }
.bk-match {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid #d3efe0;
    border-radius: 12px;
    background: #fff;
}
.bk-match img { width: 32px; height: 32px; object-fit: contain; }
.bk-match strong { display: block; color: var(--cab-ink); font-size: 15px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.bk-match small { color: var(--cab-muted); font-size: 13.5px; font-weight: 600; }
.bk-match .ui-btn--sm { min-height: 40px; }

@media (min-width: 1101px) and (max-height: 780px) {
    .bk-empty { padding: 6px 12px; }
}
@media (max-width: 900px) {
    .ui-bk .bk-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-bk .bk-filter .hw-field:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .ui-bk .bk-filter { grid-template-columns: minmax(0, 1fr); }
    .ui-bk .ex-hero .hw-hero__text { padding-right: 150px; }
    .ui-bk .hw-hero__art .mz-boy { right: -4px; }
    .bk-books { grid-template-columns: minmax(0, 1fr); }
    .bk-s2, .bk-s4, .bk-s6 { grid-column: 1 / -1; }
    .bk-foot .hw-submit__btn { width: 100%; justify-content: center; margin-left: 0; }
    .bk-match { grid-template-columns: 32px minmax(0, 1fr); }
    .bk-match form { grid-column: 1 / -1; }
    .bk-match .ui-btn--sm { width: 100%; }
}
/* Планшет и телефон: подсказки под формой */
@media (max-width: 1100px) {
    .ui-bk .hw-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .ui-bk .hw-aside { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   20. «История тренировок» (body.ui-rs поверх ui-cab/ui-hw/ui-ex/ui-mz).
   Баннер и оболочка — из разделов 13–16; здесь только список результатов.
   ========================================================================= */
.ui-rs .hw-hero__art .mz-boy { right: calc(var(--exh) * .5 + 16px); }
.rs-card { display: block; margin-top: 10px; }
.rs-head { display: flex; align-items: center; gap: 10px; }
.rs-title { margin: 0; color: var(--cab-ink); font-size: 20px; font-weight: 800; line-height: 1.2; }
.rs-link { margin-left: auto; min-height: 36px; }

.rs-list { display: grid; gap: 8px; margin-top: 10px; }
.rs-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #e4eefb;
    border-radius: 14px;
    background: #fff;
}
.rs-row__ic { width: 34px; height: 34px; object-fit: contain; }
.rs-row__main strong { display: block; color: var(--cab-ink); font-size: 16px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.rs-row__main small { display: block; margin-top: 2px; color: var(--cab-muted); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.rs-row__end { display: flex; align-items: center; gap: 10px; }
.rs-row__end .ui-score { font-size: 20px; }

.rs-empty { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: #f5f9ff; }
.rs-empty img { flex-shrink: 0; width: 44px; height: auto; object-fit: contain; }
.rs-empty > div { flex: 1 1 auto; min-width: 0; }
.rs-empty strong { display: block; color: var(--cab-ink); font-size: 16px; font-weight: 800; line-height: 1.25; }
.rs-empty span { color: var(--cab-muted); font-size: 15px; font-weight: 600; }

@media (max-width: 700px) {
    .ui-rs .ex-hero .hw-hero__text { padding-right: 150px; }
    .ui-rs .hw-hero__art .mz-boy { right: -4px; }
    .rs-row { grid-template-columns: 30px minmax(0, 1fr); padding: 10px 12px; }
    .rs-row__ic { width: 30px; height: 30px; }
    .rs-row__end { grid-column: 2; }
    .rs-empty { flex-wrap: wrap; }
}

/* =========================================================================
   21. «Как идут занятия» (body.ui-pg поверх ui-cab/ui-hw/ui-ex/ui-mz/ui-rs).
   Баннер и список — из разделов 14–16 и 20; здесь панель общего прогресса и строки тем.
   ========================================================================= */
.ui-pg .hw-hero__art .mz-boy { right: calc(var(--exh) * .66 + 20px); height: 98%; }
.pg-stack { display: grid; gap: 10px; margin-top: 10px; }
.pg-stack .rs-card { margin-top: 0; }

.pg-overall {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border: 1px solid #c9eedc;
    border-radius: 20px;
    background: linear-gradient(160deg, #f0fbf5, #e3f7ee);
}
.pg-ring { width: 108px; height: 108px; }
.pg-ring::before { inset: 11px; }
.pg-ring b { font-size: 28px; }
.pg-overall__txt { flex: 1 1 auto; min-width: 0; }
.pg-overall__txt h2 { margin: 0 0 4px; color: var(--cab-ink); font-size: 20px; font-weight: 800; line-height: 1.2; }
.pg-overall__txt p { margin: 0; color: var(--cab-muted); font-size: 15px; font-weight: 600; }
.pg-stats { display: flex; flex: 0 0 auto; gap: 10px; }
.pg-stat { min-width: 150px; padding: 10px 14px; border: 1px solid #d3efe0; border-radius: 14px; background: #fff; }
.pg-stat span { display: block; color: var(--cab-muted); font-size: 13px; font-weight: 700; }
.pg-stat b { color: var(--cab-ink); font-size: 24px; font-weight: 800; line-height: 1.2; }

.pg-topic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 300px) auto;
    align-items: center;
    gap: 8px 18px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #f3f8ff;
}
.pg-topic__bar { display: flex; align-items: center; gap: 10px; }
.pg-topic__bar .ui-bar { flex: 1; }
.pg-topic__bar b { min-width: 44px; color: var(--cab-ink); font-size: 16px; font-weight: 800; text-align: right; }

.pg-weak__ic { width: 34px; height: 34px; object-fit: contain; }
.pg-weak .ep-hint { margin: 2px 0 0; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

@media (max-width: 900px) {
    .pg-overall { flex-wrap: wrap; }
    .pg-overall__txt { flex-basis: calc(100% - 130px); }
    .pg-stats { flex: 1 1 100%; }
    .pg-stat { flex: 1 1 0; min-width: 0; }
    .pg-topic { grid-template-columns: minmax(0, 1fr) auto; }
    .pg-topic__bar { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 700px) {
    .ui-pg .ex-hero .hw-hero__text { padding-right: 150px; }
    .ui-pg .hw-hero__art .mz-boy { right: -4px; }
    .pg-overall { padding: 12px; gap: 12px; }
    .pg-ring { width: 92px; height: 92px; }
    .pg-ring::before { inset: 9px; }
    .pg-ring b { font-size: 24px; }
    .pg-overall__txt { flex-basis: calc(100% - 108px); }
    .pg-stats { flex-direction: column; }
    .pg-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .pg-topic { padding: 12px; }
}
.pg-stack { grid-template-columns: minmax(0, 1fr); }
.pg-chips .ui-badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* =========================================================================
   22. «Подписка» (body.ui-sb поверх ui-cab/ui-hw/ui-ex/ui-mz/ui-rs).
   Цены, лимиты, переключатель месяц/год и обработчики не менялись — только оформление.
   ========================================================================= */
.ui-sb .hw-hero__art .mz-boy { right: calc(var(--exh) * .66 + 96px); }   /* левее заметки: поднятая рука не прячется за ней */
.ui-sb .sb-alert { margin-top: 10px; }
.sb-card { display: block; margin-top: 10px; }
.sb-pair { margin-top: 10px; gap: 10px; }
.sb-pair .sb-card { margin-top: 0; }

/* Заголовки блоков с иконкой */
.ui-sb .ui-section-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ui-sb .ui-section-icon { width: 36px; height: 36px; object-fit: contain; }
.ui-sb .ui-hint { margin: 0; color: var(--cab-muted); font-size: 14px; font-weight: 600; }
.sb-hint { margin: 8px 0 0 !important; text-align: center; }

/* Тарифы */
.ui-sb .ui-period-row { margin: 0 0 10px; gap: 10px; }
.ui-sb .ui-period { padding: 3px; box-shadow: none; }
.ui-sb .ui-period label { min-height: 36px; padding: 6px 16px; }
.ui-sb .ui-tariffs { gap: 10px; }
.ui-sb .ui-tariff { display: flex; flex-direction: column; padding: 16px 18px; border-radius: 18px; }
.ui-sb .ui-tariff__head h3 { font-size: 20px; }
.ui-sb .ui-price { margin: 8px 0 2px; font-size: 32px; }
.ui-sb .ui-price small { font-size: 15px; }
.ui-sb .ui-price-note { min-height: 0; margin-bottom: 2px; }
.ui-sb .ui-tariff .ui-checks { gap: 6px; margin: 10px 0 14px; }
.ui-sb .ui-tariff .ui-checks li { font-size: 14px; line-height: 1.35; }
.ui-sb .ui-tariff__action { margin-top: auto; }
.ui-sb .ui-tariff .ui-btn--block { min-height: 44px; }
.ui-sb .sb-statusbtn { border: 1.5px solid #9fdcbf; background: #ecfaf3; color: #11603f; box-shadow: none; cursor: default; }

/* Баланс ребёнка */
.sb-subtitle { margin: 12px 0 8px !important; font-size: 17px !important; }
.ui-sb .ui-kids { gap: 8px; }
.ui-sb .ui-kid { min-height: 40px; padding: 4px 12px 4px 4px; }
.ui-sb .ui-kid .ui-avatar { width: 30px; height: 30px; font-size: 14px; }
.ui-sb .ui-usage { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ui-sb .ui-usage__item { padding: 10px 12px; border-radius: 14px; border-color: #e4eefb; }
.ui-sb .ui-usage__item strong { font-size: 14.5px; line-height: 1.25; }
.ui-sb .ui-usage__nums { margin: 4px 0 4px; }
.ui-sb .ui-usage__nums b { font-size: 20px; }
.ui-sb .ui-usage__extra { margin: 0 0 6px; font-size: 12.5px; line-height: 1.35; }
.ui-sb .ui-usage__extra--low { margin: 6px 0 0; }
.ui-sb .ui-usage .ui-bar { height: 8px; }
.sb-acc { margin-top: 8px; border-radius: 14px; }
.ui-sb .sb-acc > summary { min-height: 0; padding: 10px 14px; font-size: 15px; }
.ui-sb .ui-accordion__body { padding: 0 14px 12px; }
.ui-sb .ui-accordion__body .ui-checks { gap: 6px; }

/* Перенос и докупка */
.sb-fields { margin-top: 10px; gap: 8px 12px; }
.sb-fields .ui-span-all { text-align: right; }
.ui-sb .sb-fields .ui-input, .ui-sb .sb-fields .ui-select { min-height: 42px; }
.sb-topup { margin-top: 10px; gap: 10px; }
.ui-sb .ui-topup form { gap: 6px; padding: 12px 14px; border-radius: 14px; }
.ui-sb .ui-topup strong { font-size: 16px; }
.ui-sb .ui-topup b { font-size: 22px; }
.ui-sb .ui-topup .ui-select { min-height: 40px; }
.sb-demo { margin: 10px 0 0; padding: 8px 12px; }

@media (max-width: 1100px) {
    .ui-sb .ui-usage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .sb-pair { grid-template-columns: minmax(0, 1fr); }
    .ui-sb .ui-tariffs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .ui-sb .ex-hero .hw-hero__text { padding-right: 150px; }
    .ui-sb .hw-hero__art .mz-boy { right: -4px; }
    .ui-sb .ui-usage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-sb .ui-topup { grid-template-columns: minmax(0, 1fr); }
    .ui-sb .ui-kids { width: 100%; margin-left: 0; }
}
@media (max-width: 480px) {
    .ui-sb .ui-usage { grid-template-columns: minmax(0, 1fr); }
    .sb-fields.ui-fields { grid-template-columns: minmax(0, 1fr); }
}
/* Телефон: тарифы друг под другом, без горизонтальной прокрутки */
@media (max-width: 900px) {
    .ui-sb .ui-tariffs { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
    .ui-sb .ui-tariff { flex: none; width: auto; min-width: 0; }
}

/* 23. «Подготовиться к контрольной»: выбор ответа, отключённые варианты, разбор, «Обновить задание» */
.ui-option.is-disabled { opacity: .55; cursor: not-allowed; background: #f3f1f8; }
.ui-option.is-disabled span { text-decoration: line-through; }
.ui-option.is-disabled input { cursor: not-allowed; }
.ui-refresh { align-self: flex-start; }
.ui-refresh:disabled { opacity: .6; cursor: progress; }
.ui-training-review { display: grid; gap: 8px; }
.ui-review { margin-top: 12px; }
.ui-review summary { cursor: pointer; font-weight: 800; }
.ui-review__row { padding: 8px 0; border-top: 1px solid #eee9f7; }
.ui-review__row p { margin: 0 0 4px; }
.ui-formathint { display: inline-flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ui-qmark { width: 34px; min-width: 34px; height: 34px; padding: 0; border-radius: 50%; font-weight: 900; }
.ui-formathint .ui-help { margin: 0; }

/* 24. «Подготовиться к контрольной»: открытая подготовка и итог в общей оболочке (как стартовая страница) */
.ui-ep .ep-hero--run h1 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; margin-bottom: 6px; }
.ep-hero--run .ui-progress-steps { margin: 6px 0 0; gap: 6px; flex-wrap: wrap; }
.ep-hero--run .ui-progress-steps li { padding: 4px 12px 4px 4px; font-size: 14px; }
.ep-hero--run .ui-hint { margin: 4px 0 0; font-size: 14px; }
.ep-free { margin: 0; color: var(--cab-muted); font-size: 14px; font-weight: 600; line-height: 1.3; }
.ui-ep .hw-step .ui-question { margin: 0; }
.ui-ep .hw-step .ui-cta-bar { margin-top: 4px; }
.ui-ep .hw-main > .ui-cta-bar, .ui-ep .hw-main > .ui-card { margin: 0; }
@media (max-width: 700px) {
    .ep-hero--run .hw-hero__text { max-width: 66%; }
    .ui-ep .ep-hero--run h1 { font-size: 22px; }
}
.ui-ep .hw-aside { align-content: start; align-items: start; }
.ui-ep .hw-aside > .hw-side { align-self: start; }
.ep-run__cost { margin: 0; color: var(--cab-ink); font-size: 15px; font-weight: 700; line-height: 1.35; }
.ep-run__cost a { color: var(--cab-link); }


/* ==========================================================================
   25. Админка (body.ui-ad): компактные вкладки, показатели, таблицы, формы
   ========================================================================== */
.ui-ad .ad { padding: 18px 8px 6px; }
.ad-head h1 { margin: 0 0 4px; color: var(--cab-ink); font-size: 24px; line-height: 1.2; }
.ad-head p { margin: 0 0 14px; color: var(--cab-muted); font-size: 14px; font-weight: 600; }

.ad-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 16px;
    padding: 0 0 2px;
    border-bottom: 1.5px solid var(--cab-line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.ad-tab {
    flex: 0 0 auto;
    padding: 9px 16px;
    border-radius: 12px 12px 0 0;
    color: var(--cab-ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.ad-tab:hover { background: #eef4ff; }
.ad-tab.is-active { background: var(--ui-navy); color: #fff; }
.ad-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }

.ad-section { margin: 0 0 22px; }
.ad-section h2 { margin: 0 0 10px; color: var(--cab-ink); font-size: 19px; }
.ad-section h2 small { color: var(--cab-muted); font-size: 14px; font-weight: 600; }
.ad-section h3 { margin: 16px 0 8px; color: var(--cab-ink); font-size: 16px; }
.ad-back { color: var(--cab-link); font-size: 14px; font-weight: 700; text-decoration: none; }

.ad-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 12px; }
.ad-stats--small { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 14px; }
.ad-stat {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 14px 16px;
    border: 1px solid var(--cab-line);
    border-radius: 16px;
    background: #fbfdff;
}
.ad-stat span { color: var(--cab-ink); font-size: 14px; font-weight: 700; }
.ad-stat strong { color: var(--ui-navy); font-size: 26px; line-height: 1.1; }
.ad-stat small { color: var(--cab-muted); font-size: 12.5px; font-weight: 600; line-height: 1.4; }

.ad-table-wrap { margin: 0 0 8px; overflow-x: auto; border: 1px solid var(--cab-line); border-radius: 14px; -webkit-overflow-scrolling: touch; }
.ad-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.ad-table--compact { min-width: 520px; }
.ad-table th { padding: 9px 12px; background: #f3f7ff; color: var(--cab-ink); font-size: 13px; font-weight: 800; text-align: left; white-space: nowrap; }
.ad-table td { padding: 9px 12px; border-top: 1px solid var(--cab-line); color: var(--cab-ink); font-weight: 600; vertical-align: top; }
.ad-table td small { color: var(--cab-muted); font-weight: 600; }

.ad-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) auto;
    gap: 10px;
    align-items: end;
    margin: 0 0 12px;
}
.ad-filters__actions { display: flex; gap: 8px; }
.ad-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: var(--cab-muted); font-size: 13px; font-weight: 700; }
.ad-pager__links { display: inline-flex; gap: 8px; }

.ad-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 18px; margin: 0 0 8px; }
.ad-dl dt { color: var(--cab-muted); font-size: 12.5px; font-weight: 700; }
.ad-dl dd { margin: 2px 0 0; color: var(--cab-ink); font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.ad-list { margin: 0 0 8px; padding-left: 20px; color: var(--cab-ink); font-weight: 600; }
.ad-child { margin: 10px 0 6px; color: var(--cab-ink); font-weight: 800; }

.ad-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid var(--cab-line);
    border-radius: 16px;
    background: #fbfdff;
}
.ad-form h3 { grid-column: 1 / -1; margin: 0; }
.ad-wide { grid-column: 1 / -1; }
.ad-check { display: flex; align-items: center; gap: 8px; color: var(--cab-ink); font-size: 14px; font-weight: 700; }
.ad-check input { width: 18px; height: 18px; }
.ad-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ad-inline .hw-select { width: auto; min-width: 200px; }

.ad-change { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
.ad-change > div { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--cab-line); border-radius: 14px; background: #fbfdff; }
.ad-change span { color: var(--cab-muted); font-size: 12.5px; font-weight: 700; }
.ad-change strong { color: var(--cab-ink); font-size: 15px; line-height: 1.4; }

@media (max-width: 900px) {
    .ad-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ad-filters .hw-field:first-child, .ad-filters__actions { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .ui-ad .ad { padding: 14px 0 4px; }
    .ad-head h1 { font-size: 21px; }
    .ad-stats, .ad-stats--small { grid-template-columns: minmax(0, 1fr); }
    .ad-form, .ad-change, .ad-filters { grid-template-columns: minmax(0, 1fr); }
    .ad-inline .hw-select { width: 100%; }
}

/* Выход — POST-форма: кнопки выглядят как прежние ссылки */
.ui-logout-form { margin: 0; display: block; }
.ui-header-logout-form { display: contents; }
.ui-logout-form button.ui-drawer__link { width: 100%; border: 0; background: transparent; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.ui-user__menu form button.ui-menu-item--danger { color: #b4232a; }


/* Админка → «Учебники» */
.ad-titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.ad-titlebar h2 { margin: 0; }
.ad-filters--books { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) auto; }
.ad-table--books { min-width: 860px; }
.ad-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ad-inline-form { display: inline; margin: 0; }
.ad-progress { display: block; width: 100%; max-width: 220px; height: 8px; margin-top: 6px; accent-color: var(--ui-navy); }
.ad-progress[hidden] { display: none; }
.ad-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-chips .ui-badge { text-decoration: none; }
.ad-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ad-split img { width: 100%; height: auto; border: 1px solid var(--cab-line); border-radius: 12px; background: #fff; }
.ad-split figcaption { color: var(--cab-muted); font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.ad-pre { margin: 0; padding: 12px; max-height: 70vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--cab-line); border-radius: 12px; background: #fbfdff; color: var(--cab-ink); font: inherit; font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) { .ad-split, .ad-filters--books { grid-template-columns: minmax(0, 1fr); } }


/* Наглядные конспекты (ученик) и уведомления */
.ui-notices { display: grid; gap: 8px; max-width: 1120px; margin: 12px auto 0; padding: 0 16px; }
.ui-notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid #cfe9dc; border-radius: 14px; background: #eafaf2; }
.ui-notice__text { color: #11603f; font-weight: 800; text-decoration: none; }
.ui-notice__text:hover { text-decoration: underline; }
.ui-notice form { margin: 0; }
.ui-notice__x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #11603f; font-size: 22px; line-height: 1; cursor: pointer; }
.ui-notice__x:hover { background: rgba(17, 96, 63, .12); }
.vn-block { margin-bottom: 14px; }
.vn-filter { align-items: end; }
.vn-filter__go { display: flex; gap: 8px; }
.vn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.vn-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cab-line, #dfe7f5); border-radius: 16px; background: #fff; }
.vn-card__cover { position: relative; display: block; aspect-ratio: 4 / 3; background: #f3f7ff; overflow: hidden; }
.vn-card__cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.vn-card__noimg { display: flex; align-items: center; justify-content: center; height: 100%; padding: 12px; color: var(--ui-navy, #1f2a6b); font-weight: 900; text-align: center; }
.vn-card__kind { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ui-navy, #1f2a6b); color: #fff; font-size: 12px; font-weight: 900; }
.vn-card__body { display: grid; gap: 6px; padding: 12px; align-content: start; }
.vn-card__body h3 { margin: 0; font-size: 16px; line-height: 1.25; }
.vn-card__body h3 a { color: inherit; text-decoration: none; }
.vn-card__body p { margin: 0; color: var(--ui-muted, #5b6785); font-size: 14px; }
.vn-empty { margin-top: 14px; }
.vn-requests { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.vn-requests li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--cab-line, #dfe7f5); border-radius: 12px; background: #fff; }
.vn-requests small { color: var(--ui-muted, #5b6785); }
.vn-requests__state { display: flex; align-items: center; gap: 10px; }
.vn-title { margin: 8px 0; font-size: 26px; line-height: 1.2; }
.vn-topic, .vn-desc { margin: 4px 0 10px; }
.vn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.vn-view { max-width: 100%; overflow: auto; border: 1px solid var(--cab-line, #dfe7f5); border-radius: 14px; background: #fff; }
.vn-view img { display: block; width: 100%; height: auto; }
.vn-view.is-zoomed img { width: auto; max-width: none; }
.vn-view:not(.is-zoomed) { max-height: none; }
.vn-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vn-wide { grid-column: 1 / -1; }
.vn-ask .ui-btn { margin: 4px 0 6px; }
@media (max-width: 640px) { .vn-form { grid-template-columns: minmax(0, 1fr); } .vn-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .vn-title { font-size: 22px; } }
.ad-thumb { width: 72px; height: 54px; object-fit: cover; object-position: top; border: 1px solid var(--cab-line); border-radius: 8px; background: #fff; }
.ad-cover { max-width: 320px; height: auto; border: 1px solid var(--cab-line); border-radius: 12px; }
.ad-filters--short { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.ui-vn .hw-layout, .ui-vn .hw-main, .vn-block { min-width: 0; }
.vn-view { width: 100%; box-sizing: border-box; }
.vn-view.is-zoomed { max-height: 80vh; }
.ui-vn .hw-main > .hw-step { min-width: 0; max-width: 100%; }

/* Раздел «Учебники»: подвкладки и проверка заданий */
.ad-subtabs { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.ad-subtab { padding: 6px 14px; border-radius: 999px; background: #eef4ff; color: var(--cab-ink); font-weight: 800; font-size: 14px; text-decoration: none; }
.ad-subtab.is-active { background: var(--ui-navy); color: #fff; }
.ad-textarea { min-height: 120px; font-family: inherit; line-height: 1.5; resize: vertical; }
.ad-textarea--tall { min-height: 220px; }
.hw-input.ad-textarea { height: auto; min-height: 120px; padding-top: 10px; }
.hw-input.ad-textarea--tall { min-height: 220px; }