:root{
  --ink:#23345b;--muted:#6f7790;--paper:#fffdf8;--line:rgba(102,145,190,.12);
  --pink:#f6dbe6;--blue:#dfeffc;--yellow:#fff0b9;--green:#dff0dd;
  --lav:#e8e1f6;--peach:#f7e1d1;--shadow:0 16px 38px rgba(58,69,101,.10);
}
*{box-sizing:border-box} body{margin:0;font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;color:var(--ink);background:#f7f3eb}
a{text-decoration:none;color:inherit}.notebook-bg{min-height:100vh;background:
linear-gradient(to right,transparent 0 56px,rgba(232,128,144,.14) 56px 58px,transparent 58px),
repeating-linear-gradient(to bottom,var(--paper) 0,var(--paper) 31px,var(--line) 32px)}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 6vw;background:rgba(255,253,248,.95);border-bottom:1px solid rgba(35,52,91,.08)}
.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:900}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--yellow);transform:rotate(-4deg)}
.topnav {
    display: flex;
    gap: 20px;
    color: var(--muted);
    font-weight: 800;
}

.topnav a {
    display: inline-block;
    transition: color .18s ease, transform .18s ease;
}

.topnav a:hover {
    color: #f59e0b;
    transform: scale(1.12);
}
.profile-chip{display:flex;align-items:center;gap:9px;padding:7px 11px 7px 7px;border-radius:999px;background:white;box-shadow:0 8px 18px rgba(58,69,101,.07);font-weight:800}
.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pink)}
.page-shell{width:min(1180px,calc(100% - 34px));margin:auto;padding:50px 0 80px}
.hero{display:grid;grid-template-columns:1fr 280px;gap:36px;align-items:center;margin-bottom:34px}.hero h1{margin:0;font-size:clamp(42px,6vw,70px);line-height:.98;letter-spacing:-.04em}
.hero h1 span{position:relative}.hero h1 span:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:14px;background:rgba(255,220,84,.55);z-index:-1;border-radius:50%}
.eyebrow{margin:0 0 10px;text-transform:uppercase;letter-spacing:.11em;font-size:12px;font-weight:900;color:#8c6f91}.hero-text{max-width:700px;color:var(--muted);font-size:18px;line-height:1.65}
.hero-note{position:relative;padding:34px 28px;background:#fff3ad;box-shadow:var(--shadow);transform:rotate(2deg);display:flex;flex-direction:column;gap:8px}.pin{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:28px}
.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px}
.action-card{position:relative;display:grid;grid-template-columns:50px 1fr 22px;gap:14px;min-height:168px;padding:24px;border-radius:24px 20px 28px 22px;border:1px solid rgba(35,52,91,.06);box-shadow:var(--shadow);transition:.18s}
.action-card:hover{transform:translateY(-4px)}.action-card h2{margin:0 0 8px;font-size:20px}.action-card p{margin:0;color:#667089;line-height:1.5;font-size:14px}.card-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.65);font-size:22px}.arrow{align-self:end;font-size:23px;font-weight:900}
.pink{background:var(--pink)}.blue{background:var(--blue)}.yellow{background:var(--yellow)}.green{background:var(--green)}.lavender{background:var(--lav)}.peach{background:var(--peach)}
.panel,.paper-card,.form-card{background:rgba(255,255,255,.9);border:1px solid rgba(35,52,91,.06);box-shadow:var(--shadow);border-radius:24px;padding:28px}.dashboard-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:16px}.subject-row{display:grid;grid-template-columns:14px 1fr auto;gap:14px;align-items:center;padding:14px 3px;border-bottom:1px dashed rgba(35,52,91,.12)}.subject-row small{display:block;color:var(--muted);margin-top:4px}
.dot{width:12px;height:12px;border-radius:50%}.progress{padding:7px 10px;border-radius:999px;background:#f3f5f9;font-weight:900}.tape-panel{background:#fff7cf;transform:rotate(.4deg)}.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;font:inherit;font-weight:900;border-radius:14px;padding:12px 18px}.primary-btn{background:var(--ink);color:#fff}.secondary-btn{background:var(--blue);color:var(--ink)}
.simple-page{max-width:860px;margin:auto}.back-link{display:inline-block;margin-bottom:18px;color:var(--muted);font-weight:900}.paper-card h1{font-size:42px;margin:0 0 14px}.muted{color:var(--muted);line-height:1.6}.coming-soon{margin-top:22px;padding:16px;border-radius:15px;background:var(--yellow);font-weight:800}
.form-grid{display:grid;gap:14px}.form-row{display:grid;gap:7px}.form-row label{font-weight:900}.input,select,textarea{width:100%;padding:13px 14px;border:1px solid #d9dfeb;border-radius:13px;background:#fff;color:var(--ink);font:inherit}textarea{min-height:150px;resize:vertical}
.alert{padding:13px 15px;border-radius:13px;margin-bottom:14px;font-weight:800}.alert.error{background:#fde0e5}.alert.ok{background:#e2f3df}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.mini-card{background:#fff;border:1px solid rgba(35,52,91,.07);border-radius:18px;padding:18px;box-shadow:0 10px 24px rgba(58,69,101,.07)}
.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:12px;border-bottom:1px solid #edf0f5}.badge{display:inline-block;padding:5px 9px;border-radius:999px;background:var(--lav);font-weight:800;font-size:12px}
.quiz-option{display:block;margin:9px 0;padding:12px 14px;border:1px solid #dfe4ee;border-radius:13px;background:#fff}.result-box{margin-top:18px;padding:18px;border-radius:16px;background:var(--yellow)}
@media(max-width:900px){.topnav{display:none}.hero{grid-template-columns:1fr}.hero-note{display:none}.action-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:620px){.page-shell{width:min(100% - 22px,1180px);padding-top:34px}.action-grid,.cards{grid-template-columns:1fr}.profile-chip span{display:none}.hero h1{font-size:44px}.paper-card{padding:24px}}


/* --- Интерактивность кнопок --- */
.primary-btn,
.secondary-btn,
.panel-title button,
.action-card,
button,
input[type="submit"] {
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        filter 0.12s ease,
        background-color 0.12s ease;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.primary-btn:hover,
.secondary-btn:hover,
.panel-title button:hover,
button:hover,
input[type="submit"]:hover {
    filter: brightness(1.04);
    box-shadow: 0 8px 18px rgba(35, 52, 91, 0.18);
    transform: translateY(-1px);
}

.primary-btn:active,
.secondary-btn:active,
.panel-title button:active,
button:active,
input[type="submit"]:active,
.action-card:active {
    transform: translateY(2px) scale(0.985);
    box-shadow: 0 2px 8px rgba(35, 52, 91, 0.18);
    filter: brightness(0.96);
}

.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.panel-title button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
.action-card:focus-visible {
    outline: 3px solid rgba(77, 118, 255, 0.28);
    outline-offset: 3px;
}

/* Ссылки-кнопки тоже ведут себя как настоящие кнопки */
a.primary-btn,
a.secondary-btn {
    text-decoration: none;
}

/* Немного усиленный визуальный объём основных кнопок */
.primary-btn {
    box-shadow:
        0 5px 0 rgba(22, 38, 77, 0.22),
        0 10px 20px rgba(35, 52, 91, 0.14);
}

.primary-btn:active {
    box-shadow:
        0 1px 0 rgba(22, 38, 77, 0.20),
        0 3px 8px rgba(35, 52, 91, 0.14);
}

/* Карточки действий тоже дают ощущение нажатия */
.action-card {
    cursor: pointer;
}

.action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(58, 69, 101, 0.15);
}

.action-card:active {
    transform: translateY(1px) scale(0.99);
}


.required-star {
    color: #d92d20;
    font-weight: 900;
    margin-left: 2px;
}


.source-card {
    position: relative;
    padding-top: 26px;
}

.source-card h2 {
    margin: 0 0 6px;
}

.source-number {
    position: absolute;
    top: -13px;
    left: 20px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--ink);
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(35, 52, 91, .12);
}

.source-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .08em;
}

.source-divider::before,
.source-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(35, 52, 91, .12);
}

.source-divider span {
    padding: 0 5px;
}


.triple-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 14px;
}

@media (max-width: 760px) {
    .triple-row {
        grid-template-columns: 1fr;
    }
}


.quiz-card {
    position: relative;
    padding-top: 30px;
}

.quiz-card h2 {
    margin: 0 0 16px;
    font-size: 20px;
}

.quiz-number {
    position: absolute;
    top: -14px;
    left: 20px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--ink);
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(35, 52, 91, .12);
}

.quiz-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
    padding: 14px 16px;
    border: 1px solid #dfe4ee;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        border-color .12s ease,
        background-color .12s ease;
}

.quiz-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(35, 52, 91, .10);
    border-color: #b9c8e6;
}

.quiz-option:active {
    transform: translateY(2px) scale(.99);
    box-shadow: 0 2px 6px rgba(35, 52, 91, .10);
}

.quiz-option input {
    width: 18px;
    height: 18px;
    accent-color: var(--ink);
}

.quiz-option:has(input:checked) {
    background: var(--blue);
    border-color: #9ebde4;
    box-shadow: 0 0 0 2px rgba(94, 139, 202, .12);
}

.feedback-item {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 14px;
}

.feedback-item p {
    margin: 6px 0 0;
}

.feedback-ok {
    background: #e7f4e3;
}

.feedback-bad {
    background: #fde6e8;
}


/* Variant 1 result styling */
.result-box {
    margin-top: 22px;
    padding: 24px;
    border-radius: 22px;
    background: #FFF7D6;
    border: 1px solid #F0E1A7;
}

.result-box h2 {
    margin: 0 0 16px;
    font-size: 44px;
    color: var(--ink);
}

.feedback-item {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid #D8E8D2;
    border-left: 6px solid #79C56B;
    box-shadow: 0 4px 12px rgba(35, 52, 91, .06);
}

.feedback-item strong {
    display: block;
    margin-bottom: 6px;
    color: var(--ink);
}

.feedback-item p {
    margin: 0;
    line-height: 1.55;
}

.feedback-ok {
    background: #EEF7EC;
    border-color: #C9E2C3;
    border-left-color: #6DBD5A;
}

.feedback-bad {
    background: #FDEBEC;
    border-color: #E9B9BF;
    border-left-color: #D97D88;
}


.result-header {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr);
    gap: 24px;
    align-items: center;
    margin-bottom: 18px;
}

.motivation-badge {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 520px;
    padding: 14px 18px;
    border-radius: 18px;
    border: 1px solid rgba(35, 52, 91, .08);
    box-shadow: 0 5px 14px rgba(35, 52, 91, .06);
    line-height: 1.35;
}

.motivation-icon {
    font-size: 22px;
    flex: 0 0 auto;
}

.motivation-3 {
    background: #FFF0B9;
    border-color: #E8D88F;
}

.motivation-2 {
    background: #FFF4D8;
    border-color: #EED7A3;
}

.motivation-1 {
    background: #EEF7EC;
    border-color: #C9E2C3;
}

.motivation-0 {
    background: #EEF5FF;
    border-color: #C7D9F4;
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

@media (max-width: 760px) {
    .result-header {
        grid-template-columns: 1fr;
    }

    .motivation-badge {
        justify-self: stretch;
        max-width: none;
    }
}


.quiz-source-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border: 1px solid #d9e3f0;
    border-radius: 16px;
    background: #f5f9ff;
}

.quiz-source-summary .eyebrow {
    margin-bottom: 5px;
}

@media (max-width: 700px) {
    .quiz-source-summary {
        align-items: flex-start;
        flex-direction: column;
    }
}


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

.quiz-settings {
    align-items: start;
}


.ai-status-note {
    margin: 14px 0 20px;
    padding: 14px 16px;
    border: 1px solid #d7e3f2;
    border-radius: 14px;
    background: #f7fbff;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}


.results-list {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.result-history-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid #dfe5ee;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 5px 14px rgba(35, 52, 91, .05);
}

.result-history-card strong {
    display: block;
    margin-bottom: 5px;
}

.result-history-card small {
    color: var(--muted);
}

.result-history-score {
    min-width: 58px;
    padding: 9px 12px;
    border-radius: 14px;
    background: #FFF7D6;
    border: 1px solid #F0E1A7;
    font-weight: 900;
    text-align: center;
}

.empty-state {
    margin-top: 20px;
    padding: 18px;
    border: 1px dashed #cfd7e4;
    border-radius: 16px;
    background: #fafcff;
    color: var(--muted);
}


.result-history-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.result-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid transparent;
}

.result-status-good,
.result-score-good {
    background: #EAF6E7;
    border-color: #BFDDB9;
    color: #2F6B35;
}

.result-status-repeat,
.result-score-repeat {
    background: #FFF5D6;
    border-color: #E8D592;
    color: #7A5B00;
}

.result-status-learn,
.result-score-learn {
    background: #FDEBEC;
    border-color: #E7BCC2;
    color: #8A3944;
}

.result-history-score {
    min-width: 58px;
    padding: 9px 12px;
    border-radius: 14px;
    font-weight: 900;
    text-align: center;
}

@media (max-width: 620px) {
    .result-history-card {
        align-items: flex-start;
    }

    .result-history-meta {
        flex-direction: column;
        align-items: flex-end;
    }
}


/* Day 7: весь блок результата подкрашивается по статусу */
.result-history-card.result-card-good {
    background: #EEF7EC;
    border-color: #BFDDB9;
}

.result-history-card.result-card-repeat {
    background: #FFF5D6;
    border-color: #E8D592;
}

.result-history-card.result-card-learn {
    background: #FDEBEC;
    border-color: #E7BCC2;
}

.result-history-card.result-card-good strong,
.result-history-card.result-card-good small {
    color: #2F6B35;
}

.result-history-card.result-card-repeat strong,
.result-history-card.result-card-repeat small {
    color: #7A5B00;
}

.result-history-card.result-card-learn strong,
.result-history-card.result-card-learn small {
    color: #8A3944;
}


/* Day 7: яркие статусные плашки поверх мягко окрашенного блока */
.result-status-good,
.result-score-good {
    background: #BFE8B8;
    border-color: #79C66D;
    color: #1F5A27;
    box-shadow: 0 0 0 2px rgba(121, 198, 109, .10), 0 4px 10px rgba(47, 107, 53, .10);
}

.result-status-repeat,
.result-score-repeat {
    background: #FFE38A;
    border-color: #E7BE3F;
    color: #6A4A00;
    box-shadow: 0 0 0 2px rgba(231, 190, 63, .10), 0 4px 10px rgba(122, 91, 0, .10);
}

.result-status-learn,
.result-score-learn {
    background: #F6B7BF;
    border-color: #DF7886;
    color: #7A2732;
    box-shadow: 0 0 0 2px rgba(223, 120, 134, .10), 0 4px 10px rgba(138, 57, 68, .10);
}

.result-status,
.result-history-score {
    font-weight: 900;
}


.homework-upload-card {
    background: #FFF7D6;
    border-color: #F0E1A7;
}

.homework-result-box h2 {
    margin-bottom: 10px;
}


.lecture-preview {
    margin-top: 24px;
}

.lecture-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}


.style-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 14px;
}

.style-card {
    position: relative;
    display: block;
    border: 1px solid #dfe5ee;
    border-radius: 20px;
    background: #ffffff;
    padding: 16px;
    cursor: pointer;
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        border-color .12s ease,
        background-color .12s ease;
}

.style-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(35, 52, 91, .08);
    border-color: #cfd8e8;
}

.style-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.style-card:has(input:checked) {
    border-color: #7ba1de;
    background: #f7fbff;
    box-shadow: 0 0 0 3px rgba(123, 161, 222, .12);
}

.style-card:has(input:checked)::after {
    content: "✓ Выбрано";
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 12px;
    font-weight: 900;
    color: #355c98;
    background: #e8f1ff;
    border: 1px solid #c5d8f7;
    border-radius: 999px;
    padding: 5px 9px;
}

.style-preview {
    height: 148px;
    border-radius: 16px;
    border: 1px solid #dfe5ee;
    background: #fff;
    padding: 12px;
    margin-bottom: 14px;
    overflow: hidden;
}

.style-card-body strong {
    display: block;
    margin-bottom: 6px;
    font-size: 18px;
    color: var(--ink);
}

.style-card-body p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.style-details {
    margin-top: 10px;
}

.style-details summary {
    cursor: pointer;
    color: #355c98;
    font-weight: 700;
}

.style-details p {
    margin-top: 8px;
    font-size: 14px;
}

/* Planner preview */
.planner-preview {
    background: #fff9eb;
}
.planner-head {
    height: 18px;
    border-radius: 10px;
    width: 70%;
    background: #a7c7ef;
    margin-bottom: 10px;
}
.planner-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.planner-columns span {
    display: block;
    height: 76px;
    border-radius: 14px;
    background: #dff0dc;
    border: 1px solid #b8dcb2;
}
.planner-footer {
    margin-top: 10px;
    height: 14px;
    width: 55%;
    border-radius: 9px;
    background: #ffd7de;
}

/* Sketch preview */
.sketch-preview {
    background:
        linear-gradient(transparent 27px, rgba(125,145,189,.12) 28px);
    background-size: 100% 28px;
}
.sketch-title {
    width: 78%;
    height: 8px;
    background: #355c98;
    margin-bottom: 18px;
    border-radius: 999px;
}
.sketch-arrow {
    width: 90px;
    height: 24px;
    border-bottom: 3px solid #e58a9c;
    border-right: 3px solid #e58a9c;
    transform: skewX(25deg);
    margin: 8px 0 14px 12px;
}
.sketch-boxes {
    display: flex;
    gap: 12px;
}
.sketch-boxes span {
    width: 42%;
    height: 40px;
    border: 2px dashed #6c8cca;
    border-radius: 12px;
}

/* Classic preview */
.classic-preview {
    background: #ffffff;
}
.classic-title {
    width: 58%;
    height: 12px;
    background: #253b6d;
    margin-bottom: 12px;
}
.classic-line {
    height: 8px;
    background: #d8deeb;
    border-radius: 999px;
    margin-bottom: 10px;
}
.classic-line.short {
    width: 74%;
}
.classic-table {
    margin-top: 14px;
    height: 52px;
    border: 1px solid #bfc9db;
    background:
        linear-gradient(#bfc9db, #bfc9db) 33% 0 / 1px 100% no-repeat,
        linear-gradient(#bfc9db, #bfc9db) 66% 0 / 1px 100% no-repeat,
        linear-gradient(#bfc9db, #bfc9db) 0 50% / 100% 1px no-repeat;
}

/* B/W preview */
.bw-preview {
    background: #fff;
    filter: grayscale(1);
}
.bw-head {
    height: 12px;
    width: 62%;
    background: #333;
    border-radius: 999px;
    margin-bottom: 12px;
}
.bw-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.bw-boxes span {
    display: block;
    height: 64px;
    background: #efefef;
    border: 1px solid #8f8f8f;
    border-radius: 10px;
}

/* Visual summary preview */
.visual-preview {
    background: #fcfcff;
}
.visual-title {
    height: 12px;
    width: 76%;
    background: #425ee8;
    border-radius: 999px;
    margin-bottom: 12px;
}
.visual-flow {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.visual-flow span {
    display: block;
    flex: 1;
    height: 42px;
    border-radius: 12px;
    border: 2px solid #7f71dd;
    position: relative;
}
.visual-flow span:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -11px;
    top: 8px;
    color: #f08c3c;
    font-weight: 900;
}
.visual-bottom {
    height: 42px;
    border-radius: 12px;
    background: #eef3ff;
    border: 2px dashed #86a1ea;
}

.lecture-pages-row {
    margin-top: 16px;
    grid-template-columns: minmax(240px, 360px);
}

@media (max-width: 860px) {
    .style-grid {
        grid-template-columns: 1fr;
    }
}


/* Day 10 update: real visual previews in one horizontal row */
.style-row-wrap {
    width: 100%;
    overflow-x: auto;
    padding: 4px 2px 12px;
    scrollbar-width: thin;
    scrollbar-color: #c7d5e9 transparent;
}

.style-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(235px, 1fr));
    gap: 14px;
    min-width: 1240px;
}

.style-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 470px;
    border: 1px solid #dfe5ee;
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        border-color .12s ease;
}

.style-choice:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 28px rgba(35, 52, 91, .10);
}

.style-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.style-choice:has(input:checked) {
    border: 2px solid #79a2e1;
    box-shadow: 0 0 0 4px rgba(121, 162, 225, .12);
}

.style-choice:has(input:checked)::after {
    content: "✓ Выбрано";
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e8f1ff;
    border: 1px solid #bfd3f5;
    color: #355c98;
    font-size: 12px;
    font-weight: 900;
}

.style-image-frame {
    height: 325px;
    background: #f8f9fc;
    border-bottom: 1px solid #e5e9f0;
    overflow: hidden;
}

.style-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.style-choice-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px;
}

.style-choice-body strong {
    font-size: 18px;
    color: var(--ink);
    margin-bottom: 6px;
}

.style-choice-body p {
    margin: 0 0 14px;
    color: var(--muted);
    line-height: 1.45;
    font-size: 14px;
}

.style-open-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 12px;
    background: var(--ink);
    color: #fff;
    font-weight: 900;
    transition: transform .12s ease, box-shadow .12s ease;
}

.style-choice:active .style-open-btn {
    transform: translateY(2px) scale(.985);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.12);
}

@media (max-width: 760px) {
    .style-row {
        grid-template-columns: repeat(5, 220px);
        min-width: 1150px;
    }

    .style-choice {
        min-height: 430px;
    }

    .style-image-frame {
        height: 285px;
    }
}


/* Day 10 compact style selector */
.style-row-wrap,
.style-row {
    display: none !important;
}

.style-compact-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.style-mini-card {
    border: 1px solid #dfe5ee;
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        border-color .12s ease;
}

.style-mini-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(35, 52, 91, .08);
}

.style-mini-card.selected {
    border: 2px solid #7fa6e3;
    box-shadow: 0 0 0 3px rgba(127, 166, 227, .12);
}

.style-preview-button {
    display: block;
    width: 100%;
    height: 175px;
    padding: 0;
    border: 0;
    background: #f8f9fc;
    cursor: zoom-in;
    overflow: hidden;
}

.style-preview-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform .18s ease;
}

.style-preview-button:hover img {
    transform: scale(1.03);
}

.style-mini-body {
    padding: 11px;
}

.style-mini-body strong {
    display: block;
    min-height: 38px;
    margin-bottom: 4px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.25;
}

.style-mini-body p {
    min-height: 40px;
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.style-select-btn {
    display: block;
    cursor: pointer;
}

.style-select-btn input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.style-select-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.style-select-btn:hover span {
    box-shadow: 0 6px 14px rgba(35, 52, 91, .14);
    transform: translateY(-1px);
}

.style-select-btn:active span {
    transform: translateY(1px) scale(.985);
}

.style-mini-card.selected .style-select-btn span {
    background: #5f87c8;
}

/* Enlarged preview modal */
.modal-open {
    overflow: hidden;
}

.style-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.style-preview-modal.open {
    display: flex;
}

.style-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 36, 62, .62);
    backdrop-filter: blur(4px);
}

.style-preview-dialog {
    position: relative;
    z-index: 1;
    width: min(920px, 92vw);
    max-height: 90vh;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(16, 29, 54, .30);
    overflow: hidden;
}

.style-preview-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(35,52,91,.15);
}

.style-preview-modal-image-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-height: 72vh;
    overflow: auto;
    background: #f4f6fa;
    padding: 20px;
}

.style-preview-modal-image-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: none;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(35, 52, 91, .12);
}

.style-preview-modal-text {
    padding: 16px 20px 20px;
}

.style-preview-modal-text h3 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 22px;
}

.style-preview-modal-text p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

@media (max-width: 1180px) {
    .style-compact-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .style-compact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .style-preview-button {
        height: 160px;
    }
}

@media (max-width: 520px) {
    .style-compact-grid {
        grid-template-columns: 1fr;
    }

    .style-preview-button {
        height: 210px;
    }
}


.progress-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 22px 0 16px;
}

.progress-summary-card {
    padding: 18px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid #dce5f2;
}

.progress-summary-label {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 8px;
}

.progress-summary-card strong {
    font-size: 28px;
    color: var(--ink);
}

.progress-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 8px 0 24px;
}

.legend-chip {
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.legend-good {
    background: #BFE8B8;
    color: #1F5A27;
    border: 1px solid #79C66D;
}

.legend-repeat {
    background: #FFE38A;
    color: #6A4A00;
    border: 1px solid #E7BE3F;
}

.legend-learn {
    background: #F6B7BF;
    color: #7A2732;
    border: 1px solid #DF7886;
}

.progress-section-title {
    margin: 18px 0 12px;
}

.topic-progress-list {
    display: grid;
    gap: 12px;
}

.topic-progress-card {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 2fr) auto;
    align-items: center;
    gap: 16px;
    padding: 15px 16px;
    border-radius: 16px;
    border: 1px solid transparent;
}

.topic-good {
    background: #EEF7EC;
    border-color: #BFDDB9;
}

.topic-repeat {
    background: #FFF5D6;
    border-color: #E8D592;
}

.topic-learn {
    background: #FDEBEC;
    border-color: #E7BCC2;
}

.topic-progress-main strong {
    display: block;
    margin-bottom: 5px;
}

.topic-progress-main small {
    color: var(--muted);
}

.topic-progress-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topic-progress-bar {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(35,52,91,.08);
    overflow: hidden;
}

.topic-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #6f96d2;
}

.topic-progress-percent {
    min-width: 44px;
    font-weight: 900;
    text-align: right;
}

.topic-status {
    display: inline-flex;
    justify-content: center;
    min-width: 88px;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.topic-status-good {
    background: #BFE8B8;
    color: #1F5A27;
    border: 1px solid #79C66D;
}

.topic-status-repeat {
    background: #FFE38A;
    color: #6A4A00;
    border: 1px solid #E7BE3F;
}

.topic-status-learn {
    background: #F6B7BF;
    color: #7A2732;
    border: 1px solid #DF7886;
}

.weak-topics-box {
    margin-top: 22px;
    padding: 20px;
    border-radius: 18px;
    background: #fffaf0;
    border: 1px solid #eadfbf;
}

.weak-topics-box h2 {
    margin: 0 0 14px;
    font-size: 22px;
}

.weak-topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.weak-topic-chips span {
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e3d8bb;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.progress-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

@media (max-width: 800px) {
    .progress-summary-grid {
        grid-template-columns: 1fr;
    }

    .topic-progress-card {
        grid-template-columns: 1fr;
    }

    .topic-progress-bar-wrap {
        width: 100%;
    }
}


.usage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 22px 0;
}

.usage-card {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #dfe5ee;
    background: #ffffff;
}

.usage-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.usage-card-head strong {
    color: var(--ink);
}

.usage-card-head span {
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef5ff;
    color: #355c98;
    font-size: 12px;
    font-weight: 900;
}

.usage-bar {
    height: 10px;
    border-radius: 999px;
    background: #eef1f6;
    overflow: hidden;
}

.usage-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #7fa6e3;
}

.usage-numbers {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
    color: var(--muted);
    font-size: 12px;
}

.subscription-note {
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    background: #fff7d6;
    border: 1px solid #f0e1a7;
}

.subscription-note p {
    margin: 7px 0 0;
    color: var(--muted);
}

@media (max-width: 760px) {
    .usage-grid {
        grid-template-columns: 1fr;
    }
}


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

.subscription-tool-card h2 {
    margin-top: 0;
}

.topup-packages {
    display: grid;
    gap: 12px;
}

.topup-packages form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.purchase-warning {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff7d6;
    border: 1px solid #f0e1a7;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 820px) {
    .subscription-tools-grid {
        grid-template-columns: 1fr;
    }

    .topup-packages form {
        grid-template-columns: 1fr;
    }
}


.subscription-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0;
    padding: 16px 18px;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid #dce6f4;
}

.subscription-status-row p {
    margin: 6px 0 0;
}

.subscription-status-badge {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.subscription-status-active {
    background: #bfe8b8;
    border: 1px solid #79c66d;
    color: #1f5a27;
}

.subscription-status-inactive {
    background: #f6b7bf;
    border: 1px solid #df7886;
    color: #7a2732;
}

.usage-section-label {
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.purchased-credit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f7f1ff;
    border: 1px solid #dfd3f2;
}

.purchased-credit-row span {
    color: #70578e;
    font-size: 12px;
    font-weight: 800;
}

.purchased-credit-row strong {
    color: #5b3f7c;
    font-size: 18px;
}

.monthly-rules-box {
    margin: 18px 0;
    padding: 18px;
    border-radius: 18px;
    background: #fff7d6;
    border: 1px solid #f0e1a7;
}

.monthly-rules-box ul {
    margin: 10px 0 0;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.65;
}

.dev-subscription-card {
    margin-top: 18px;
    background: #f7f9fc;
}

.dev-subscription-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

@media (max-width: 700px) {
    .subscription-status-row {
        align-items: flex-start;
        flex-direction: column;
    }
}


.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 22px 0;
}

.admin-kpi-card {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #dfe5ee;
    background: #f9fbff;
}

.admin-kpi-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
}

.admin-kpi-card strong {
    font-size: 28px;
    color: var(--ink);
}

.admin-section {
    margin-top: 24px;
}

.admin-table-wrap {
    overflow-x: auto;
    margin-top: 12px;
    border: 1px solid #e1e6ee;
    border-radius: 16px;
    background: #fff;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.admin-table th,
.admin-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #edf0f5;
}

.admin-table th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: #f8fafc;
}

.admin-status {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.admin-status-active {
    background: #bfe8b8;
    border: 1px solid #79c66d;
    color: #1f5a27;
}

.admin-status-inactive {
    background: #f6b7bf;
    border: 1px solid #df7886;
    color: #7a2732;
}

.admin-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.admin-activity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed #dfe4ec;
}

.admin-activity-row:last-child {
    border-bottom: 0;
}

.admin-activity-row strong {
    display: block;
}

.admin-activity-row small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.admin-activity-row > span {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 12px;
    background: #fff7d6;
    border: 1px solid #f0e1a7;
    font-weight: 900;
}

.admin-warning {
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff7d6;
    border: 1px solid #f0e1a7;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 800px) {
    .admin-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .admin-kpi-grid {
        grid-template-columns: 1fr;
    }
}


.role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.role-owner {
    background: #e8ddff;
    border: 1px solid #bba6eb;
    color: #5a3b8b;
}

.role-admin {
    background: #dcecff;
    border: 1px solid #9fc3ee;
    color: #2e5f96;
}

.role-user {
    background: #f1f3f6;
    border: 1px solid #d3d8e0;
    color: #5d6470;
}

.role-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-form select {
    min-width: 145px;
}

.compact-btn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
}


.study-type-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 16px;
}

.study-type-option {
    position: relative;
    display: block;
    padding: 13px 12px;
    border: 1px solid #dfe5ee;
    border-radius: 15px;
    background: #fff;
    cursor: pointer;
}

.study-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.study-type-option span {
    display: block;
    margin-bottom: 4px;
    color: var(--ink);
    font-weight: 900;
}

.study-type-option small {
    display: block;
    color: var(--muted);
    line-height: 1.35;
}

.study-type-option:has(input:checked) {
    background: #eef5ff;
    border-color: #8eb1e4;
    box-shadow: 0 0 0 2px rgba(126, 164, 220, .12);
}

.study-settings-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.study-source-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 16px 0 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f7fbff;
    border: 1px solid #d9e4f2;
}

.study-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.study-progress-track {
    height: 9px;
    margin-top: 7px;
    border-radius: 999px;
    background: #edf1f6;
    overflow: hidden;
}

.study-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #7ca3df;
    transition: width .2s ease;
}

.study-score-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.study-pill {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.study-pill-know {
    background: #e8f6e5;
    color: #2f6b35;
}

.study-pill-repeat {
    background: #fff3c9;
    color: #705300;
}

.study-pill-unknown {
    background: #fde7e9;
    color: #8a3944;
}

.flashcard-shell,
.quick-quiz-shell,
.study-finish {
    max-width: 760px;
    min-height: 350px;
    margin: 0 auto;
    padding: 30px;
    border-radius: 26px;
    border: 1px solid #dce4ef;
    background: linear-gradient(145deg, #ffffff, #f8fbff);
    box-shadow: 0 18px 38px rgba(35, 52, 91, .08);
}

.flashcard-type {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff1b8;
    color: #665000;
    font-size: 12px;
    font-weight: 900;
}

.flashcard-question {
    margin: 15px 0 22px;
    color: var(--ink);
    font-size: 27px;
    font-weight: 900;
    line-height: 1.3;
}

.flashcard-answer {
    margin: 18px 0;
    padding: 20px;
    border-radius: 18px;
    background: #eef7ec;
    border: 1px solid #c7dfc1;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.55;
}

.flashcard-show-btn {
    width: 100%;
}

.flashcard-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.study-action {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-weight: 900;
    cursor: pointer;
}

.study-action.know {
    background: #c9edc2;
    border-color: #91ce86;
    color: #245c2a;
}

.study-action.repeat {
    background: #ffe59a;
    border-color: #e6c659;
    color: #685000;
}

.study-action.unknown {
    background: #f7c2c9;
    border-color: #e28692;
    color: #772d38;
}

.quick-quiz-options {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.quick-quiz-option {
    padding: 14px 16px;
    border: 1px solid #dce3ed;
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.quick-quiz-option:hover:not(:disabled) {
    border-color: #9bb9e2;
    background: #f7fbff;
}

.quick-quiz-option.correct {
    background: #dff1db;
    border-color: #8bc47f;
}

.quick-quiz-option.wrong {
    background: #fde5e8;
    border-color: #df8994;
}

.quick-quiz-feedback {
    margin: 15px 0;
    padding: 13px 15px;
    border-radius: 13px;
    line-height: 1.45;
}

.correct-feedback {
    background: #e6f5e2;
    color: #285f30;
}

.wrong-feedback {
    background: #fde9eb;
    color: #7c313b;
}

.study-finish {
    text-align: center;
}

.study-finish-icon {
    font-size: 46px;
    margin-bottom: 10px;
}

.study-finish h2 {
    margin-bottom: 8px;
}

.study-finish-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 980px) {
    .study-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .study-toolbar {
        grid-template-columns: 1fr;
    }

    .study-source-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .flashcard-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .study-type-grid,
    .study-settings-row {
        grid-template-columns: 1fr;
    }

    .flashcard-shell,
    .quick-quiz-shell,
    .study-finish {
        padding: 20px;
    }

    .flashcard-question {
        font-size: 22px;
    }
}


.profile-chip-link {
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
}

.profile-chip-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(35, 52, 91, .08);
}

.profile-chip-link:active {
    transform: translateY(1px) scale(.99);
}

.profile-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    padding: 18px;
    border-radius: 20px;
    background: #f8fbff;
    border: 1px solid #dce6f4;
}

.profile-avatar-large {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #24345f;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
}

.profile-hero-text h1 {
    margin: 0 0 5px;
}

.profile-hero-text p {
    margin: 0;
}

.profile-subscription {
    padding: 8px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.profile-subscription-active {
    background: #bfe8b8;
    border: 1px solid #79c66d;
    color: #1f5a27;
}

.profile-subscription-inactive {
    background: #f6b7bf;
    border: 1px solid #df7886;
    color: #7a2732;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.profile-stat-card {
    padding: 16px;
    border-radius: 17px;
    border: 1px solid #dfe5ee;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
}

.profile-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(35, 52, 91, .08);
}

.profile-stat-card span,
.profile-stat-card small {
    display: block;
    color: var(--muted);
}

.profile-stat-card strong {
    display: block;
    margin: 5px 0;
    color: var(--ink);
    font-size: 26px;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.profile-actions {
    display: grid;
    gap: 9px;
}

.profile-action {
    display: block;
    padding: 12px 14px;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.profile-action:hover {
    transform: translateX(2px);
    border-color: #a9bee1;
    background: #f8fbff;
}

.profile-action strong,
.profile-action span {
    display: block;
}

.profile-action strong {
    margin-bottom: 3px;
    color: var(--ink);
}

.profile-action span {
    color: var(--muted);
    font-size: 12px;
}

.profile-usage-list,
.profile-recent-list {
    display: grid;
    gap: 9px;
}

.profile-usage-row,
.profile-recent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 13px;
    background: #f9fbfd;
    border: 1px solid #e5e9ef;
}

.profile-usage-row strong,
.profile-recent-row strong {
    display: block;
}

.profile-usage-row small,
.profile-recent-row small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.profile-usage-row > span {
    min-width: 38px;
    padding: 6px 8px;
    border-radius: 10px;
    background: #eef5ff;
    color: #355c98;
    font-weight: 900;
    text-align: center;
}

.profile-full-btn {
    width: 100%;
    margin-top: 12px;
    text-align: center;
}

.profile-recent-row > span {
    min-width: 48px;
    padding: 7px 9px;
    border-radius: 10px;
    font-weight: 900;
    text-align: center;
}

.recent-good {
    background: #bfe8b8;
    color: #1f5a27;
}

.recent-repeat {
    background: #ffe38a;
    color: #6a4a00;
}

.recent-learn {
    background: #f6b7bf;
    color: #7a2732;
}

.profile-readonly {
    background: #f3f5f8;
    color: #737b88;
}

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

    .profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .profile-hero {
        grid-template-columns: auto 1fr;
    }

    .profile-subscription {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .profile-stats-grid {
        grid-template-columns: 1fr;
    }
}


.child-switcher {
    position: relative;
}

/*
  Важно: между чипом пользователя и выпадающим меню раньше был визуальный
  зазор 8px. Когда курсор проходил через этот зазор, :hover снимался и меню
  исчезало. Теперь меню начинается сразу под чипом, а отступ создаётся
  внутренним "мостиком", который остаётся частью hover-зоны.
*/
.child-switcher::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
}

.child-switcher:hover .child-switcher-menu,
.child-switcher:focus-within .child-switcher-menu {
    display: block;
}

.child-switcher-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    display: none;
    min-width: 220px;
    padding: 8px;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(35, 52, 91, .14);
}

.child-switcher-menu form,
.child-switcher-menu button {
    width: 100%;
}

.child-switcher-menu button,
.child-switcher-menu a {
    display: block;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.child-switcher-menu button:hover,
.child-switcher-menu button.active,
.child-switcher-menu a:hover {
    background: #f1f6ff;
}

.children-panel {
    margin: 0 0 18px;
    padding: 17px;
    border-radius: 18px;
    background: #fbfcff;
    border: 1px solid #e1e7f0;
}

.children-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.children-panel-head h2 {
    margin: 0;
}

.children-panel-head > span {
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef5ff;
    color: #355c98;
    font-size: 12px;
    font-weight: 900;
}

.children-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}

.child-profile-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 2px 9px;
    align-items: center;
    min-width: 180px;
    padding: 11px 13px;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.child-profile-card.active {
    border-color: #7fa6e3;
    background: #eef5ff;
    box-shadow: 0 0 0 2px rgba(127, 166, 227, .12);
}

.child-profile-avatar {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #24345f;
    color: #fff;
    font-weight: 900;
}

.child-profile-card small {
    color: var(--muted);
}

.add-child-form {
    display: grid;
    grid-template-columns: 1.5fr .7fr auto;
    gap: 9px;
}

.billing-hint {
    margin: 16px 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff7d6;
    border: 1px solid #f0e1a7;
}

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

.tariff-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #dfe5ee;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(35, 52, 91, .04);
}

.tariff-card.current {
    border: 2px solid #7fa6e3;
    box-shadow: 0 0 0 4px rgba(127, 166, 227, .10);
}

.tariff-popular {
    background: #fbfdff;
}

.tariff-popular-label {
    position: absolute;
    top: -11px;
    right: 16px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #24345f;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.tariff-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tariff-name {
    color: var(--ink);
    font-size: 20px;
    font-weight: 900;
}

.tariff-badge {
    padding: 6px 9px;
    border-radius: 999px;
    background: #fff0b9;
    color: #6b5300;
    font-size: 11px;
    font-weight: 900;
}

.tariff-badge.family {
    background: #e8ddff;
    color: #5a3b8b;
}

.tariff-price {
    margin-top: 14px;
    color: var(--ink);
    font-size: 28px;
    font-weight: 900;
}

.tariff-price small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.tariff-year {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.tariff-year b {
    color: #2f6b35;
}

.tariff-card ul {
    margin: 14px 0 18px;
    padding-left: 18px;
    color: var(--muted);
    line-height: 1.6;
}

.tariff-actions {
    display: grid;
    gap: 8px;
    margin-top: auto;
}

.tariff-actions form,
.tariff-btn {
    width: 100%;
}

.current-plan-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid #dce6f4;
}

.current-plan-box h2,
.current-plan-box p {
    margin: 0;
}

.current-child-pill {
    padding: 8px 11px;
    border-radius: 999px;
    background: #eef5ff;
    color: #355c98;
    font-size: 12px;
}

.subscription-child-tabs {
    display: flex;
    gap: 8px;
    margin: 10px 0 18px;
}

.subscription-child-tabs button {
    padding: 8px 12px;
    border: 1px solid #d9e0ea;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
}

.subscription-child-tabs button.active {
    background: #24345f;
    border-color: #24345f;
    color: #fff;
}

.subscription-section-title {
    margin: 20px 0 12px;
}

.topup-package-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 12px 0;
}

.topup-price-card {
    padding: 14px;
    border-radius: 15px;
    background: #f7f1ff;
    border: 1px solid #dfd3f2;
}

.topup-price-card strong,
.topup-price-card span {
    display: block;
}

.topup-price-card span {
    margin-top: 5px;
    color: #5b3f7c;
    font-size: 20px;
    font-weight: 900;
}

@media (max-width: 950px) {
    .tariff-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .add-child-form {
        grid-template-columns: 1fr;
    }

    .current-plan-box {
        align-items: flex-start;
        flex-direction: column;
    }
}


.consent-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #dfe5ee;
    border-radius: 16px;
    background: #f8fbff;
}

.consent-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    color: var(--ink);
    line-height: 1.45;
}

.consent-row input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.consent-row a {
    color: #355c98;
    font-weight: 800;
}

.dev-code-box {
    display: grid;
    gap: 5px;
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px dashed #d3b850;
    border-radius: 14px;
    background: #fff7d6;
}

.dev-code-box span {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: .14em;
    color: var(--ink);
}

.dev-code-box small {
    color: var(--muted);
}

.otp-input {
    max-width: 220px;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: .18em;
    text-align: center;
}

.resend-form {
    margin-top: 12px;
    text-align: center;
}

.link-button {
    border: 0;
    background: transparent;
    color: #355c98;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.auth-switch {
    margin-top: 16px;
    text-align: center;
    color: var(--muted);
}

.legal-page {
    max-width: 850px;
    margin: 0 auto;
}

.legal-note {
    margin: 12px 0 18px;
    padding: 13px 15px;
    border-radius: 14px;
    background: #fff7d6;
    border: 1px solid #f0e1a7;
    color: var(--muted);
}


.child-registration-card {
    padding: 16px;
    border: 1px solid #dfe5ee;
    border-radius: 18px;
    background: #fbfcff;
}

.child-registration-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.child-registration-head > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.child-number {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff0b9;
    color: #24345f;
    font-weight: 900;
}

.required-hint {
    color: var(--muted);
    font-size: 11px;
}

.child-registration-grid {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 12px;
}

.add-child-registration-btn {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 1px dashed #9eb6db;
    border-radius: 16px;
    background: #f8fbff;
    color: #24345f;
    text-align: left;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.add-child-registration-btn:hover {
    background: #eef5ff;
    border-color: #6f96d2;
    transform: translateY(-1px);
}

.add-child-registration-btn:active {
    transform: translateY(1px) scale(.995);
}

.add-child-plus {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #24345f;
    color: #fff;
    font-size: 24px;
    line-height: 1;
}

.add-child-registration-btn strong,
.add-child-registration-btn small {
    display: block;
}

.add-child-registration-btn small {
    margin-top: 3px;
    color: var(--muted);
}

.remove-child-btn {
    padding: 6px 10px;
    border: 0;
    border-radius: 10px;
    background: #fde7e9;
    color: #8a3944;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.family-registration-note {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 12px;
    background: #f7f1ff;
    border: 1px solid #dfd3f2;
    color: #6c5a80;
    font-size: 12px;
    line-height: 1.45;
}

.second-child-card[hidden] {
    display: none !important;
}

@media (max-width: 650px) {
    .child-registration-grid {
        grid-template-columns: 1fr;
    }
}



.child-switcher-menu {
    pointer-events: auto;
}

.child-switcher-menu form {
    margin: 0;
}

.child-switcher-menu button,
.child-switcher-menu a {
    position: relative;
    z-index: 1;
}


.brand-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-section-toggle {
    display: none;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mobile-section-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 100;
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #dfe5ee;
    border-radius: 20px;
    background: rgba(255, 253, 248, .99);
    box-shadow: 0 22px 55px rgba(35, 52, 91, .18);
}

.mobile-section-menu[hidden] {
    display: none !important;
}

.mobile-section-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 10px;
}

.mobile-section-menu-head strong {
    font-size: 17px;
}

.mobile-section-menu-head button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: #f0f3f8;
    color: var(--ink);
    font-size: 22px;
    cursor: pointer;
}

.mobile-section-links {
    display: grid;
    gap: 6px;
}

.mobile-section-links a {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 11px;
    align-items: center;
    padding: 10px 11px;
    border-radius: 13px;
    color: var(--ink);
}

.mobile-section-links a:hover,
.mobile-section-links a:active {
    background: #eef5ff;
}

.mobile-section-links a > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #fff2bf;
    font-size: 16px;
    font-weight: 900;
}

.mobile-section-links strong,
.mobile-section-links small {
    display: block;
}

.mobile-section-links strong {
    margin-bottom: 2px;
    font-size: 14px;
}

.mobile-section-links small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
}

@media (max-width: 760px) {
    .topbar {
        gap: 10px;
        padding: 12px 14px;
    }

    .topnav {
        display: none;
    }

    .brand-wrap {
        gap: 8px;
    }

    .mobile-section-toggle {
        display: block;
    }

    .brand {
        font-size: 20px;
    }

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

    .topbar > div:last-child {
        gap: 7px !important;
    }

    .profile-chip {
        padding-right: 8px;
    }

    .profile-chip span {
        display: none;
    }

    .topbar .secondary-btn,
    .topbar .primary-btn {
        min-height: 40px;
        padding: 9px 12px;
        font-size: 13px;
    }

    .mobile-section-menu {
        position: fixed;
        top: 72px;
        left: 12px;
        right: 12px;
        width: auto;
        max-height: calc(100vh - 84px);
    }

    body.mobile-menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgba(28, 32, 42, .24);
    }

    .topbar,
    .mobile-section-menu {
        z-index: 100;
    }
}


/* 
   Меню разделов появляется ровно тогда, когда исчезает верхняя навигация.
   В базовом CSS .topnav скрывается уже при ширине <= 900px,
   поэтому и кнопка-звёздочка должна появляться с этого же момента.
*/
@media (max-width: 900px) {
    .mobile-section-toggle {
        display: block;
    }

    .brand-wrap {
        gap: 8px;
    }
}

/* На широком экране с видимой верхней навигацией звёздочка-меню не нужна. */
@media (min-width: 901px) {
    .mobile-section-toggle {
        display: none !important;
    }
}


.homework-ai-review {
    margin: 18px 0 22px;
    padding: 20px;
    border: 1px solid #d7e3ef;
    border-radius: 20px;
    background: #fbfdff;
    box-shadow: 0 10px 24px rgba(35, 52, 91, .06);
}

.homework-ai-review-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.homework-ai-review-head h2 {
    margin: 0;
}

.ai-status-badge {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.ai-status-badge.ready {
    background: #dff0dd;
    color: #2c6432;
    border: 1px solid #a9d2a4;
}

.ai-status-badge.demo {
    background: #fff0b9;
    color: #6a5100;
    border: 1px solid #ecd98d;
}

.homework-review-text {
    white-space: pre-wrap;
    color: var(--ink);
    line-height: 1.65;
    font-size: 15px;
}


.admin-children-list {
    display: grid;
    gap: 7px;
    min-width: 150px;
}

.admin-child-line {
    display: grid;
    grid-template-columns: 24px auto 1fr;
    align-items: center;
    gap: 7px;
}

.admin-child-line strong {
    color: var(--ink);
}

.admin-child-line > span:last-child {
    color: var(--muted);
    white-space: nowrap;
}

.admin-child-index {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eef5ff;
    color: #355c98;
    font-size: 11px;
    font-weight: 900;
}

.admin-family-label {
    display: inline-flex;
    margin-top: 7px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #f1eaff;
    color: #65458f;
    font-size: 11px;
    font-weight: 900;
}


.tariff-preview-card {
    cursor: default;
    transition:
        transform .14s ease,
        border-color .14s ease,
        box-shadow .14s ease,
        background .14s ease;
}

.tariff-preview-card:hover,
.tariff-preview-card:focus,
.tariff-preview-card.preview-selected {
    border-color: #6f96d2;
    box-shadow:
        0 0 0 3px rgba(111, 150, 210, .14),
        0 14px 30px rgba(35, 52, 91, .08);
    transform: translateY(-2px);
    outline: none;
}

.tariff-preview-card.current::after {
    content: "Текущий";
    position: absolute;
    left: 18px;
    top: -11px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #dff0dd;
    border: 1px solid #abd1a6;
    color: #2f6b35;
    font-size: 10px;
    font-weight: 900;
}

.tariff-preview-card.tariff-popular.current::after {
    left: 18px;
}

.tariff-action-zone {
    position: relative;
    z-index: 2;
}

.tariff-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tariff-preview-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 22px;
    margin: 2px 0 24px;
    padding: 18px 20px;
    border: 1px solid #dce6f4;
    border-radius: 18px;
    background: #f8fbff;
    transition: .14s ease;
}

.tariff-preview-copy h2 {
    margin: 0 0 6px;
}

.tariff-preview-copy p {
    margin-top: 0;
}

.tariff-preview-details {
    margin-top: 9px;
    color: #58657e;
    font-size: 13px;
    line-height: 1.5;
}

.tariff-preview-price {
    min-width: 150px;
    padding: 13px 15px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid #dfe5ee;
    text-align: right;
}

.tariff-preview-price strong,
.tariff-preview-price span {
    display: block;
}

.tariff-preview-price strong {
    color: var(--ink);
    font-size: 19px;
}

.tariff-preview-price span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.checkout-card {
    max-width: 720px;
    margin: 0 auto;
}

.checkout-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 20px 0;
}

.checkout-summary > div {
    padding: 16px;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid #dce6f4;
}

.checkout-summary span,
.checkout-summary strong {
    display: block;
}

.checkout-summary span {
    color: var(--muted);
    font-size: 12px;
}

.checkout-summary strong {
    margin-top: 5px;
    font-size: 22px;
    color: var(--ink);
}

.checkout-safe-note {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 15px;
    background: #fff7d6;
    border: 1px solid #f0e1a7;
    line-height: 1.5;
}

.checkout-details {
    margin: 18px 0;
}

.checkout-details ul {
    padding-left: 20px;
    line-height: 1.7;
    color: var(--muted);
}

.checkout-disabled {
    width: 100%;
    opacity: .55;
    cursor: not-allowed;
}

.checkout-hint {
    margin-top: 9px;
    text-align: center;
}

@media (max-width: 720px) {
    .tariff-preview-panel {
        grid-template-columns: 1fr;
    }

    .tariff-preview-price {
        text-align: left;
    }

    .checkout-summary {
        grid-template-columns: 1fr;
    }
}


/* Текущий тариф отмечаем только зелёной меткой.
   Синяя обводка должна быть только у одного тарифа — того,
   который сейчас просматривает пользователь. */
.tariff-card.current {
    border: 1px solid #dfe5ee !important;
    box-shadow: 0 8px 20px rgba(35, 52, 91, .04) !important;
    transform: none;
}

.tariff-preview-card.preview-selected,
.tariff-preview-card:hover,
.tariff-preview-card:focus {
    border-color: #6f96d2 !important;
    box-shadow:
        0 0 0 3px rgba(111, 150, 210, .14),
        0 14px 30px rgba(35, 52, 91, .08) !important;
    transform: translateY(-2px);
}

/* Если текущий тариф одновременно выбран для просмотра,
   он тоже получает только одну синюю обводку. */
.tariff-card.current.preview-selected {
    border-color: #6f96d2 !important;
}


.partner-create-card {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid #dce6f4;
    border-radius: 17px;
    background: #f8fbff;
}

.partner-create-card h3 {
    margin-top: 0;
}

.partner-admin-form {
    display: grid;
    grid-template-columns: 1.2fr 1fr .65fr 1.5fr auto auto;
    gap: 10px;
    align-items: end;
}

.partner-active-check {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    white-space: nowrap;
}

.partner-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.partner-admin-card {
    padding: 16px;
    border: 1px solid #dfe5ee;
    border-radius: 17px;
    background: #fff;
}

.partner-admin-card.active {
    border-color: #aed6a8;
    background: #fbfff9;
}

.partner-admin-card.inactive {
    opacity: .72;
}

.partner-admin-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.partner-admin-card-head strong,
.partner-admin-card-head small {
    display: block;
}

.partner-admin-card-head small {
    margin-top: 3px;
    color: var(--muted);
}

.partner-status {
    padding: 5px 8px;
    border-radius: 999px;
    background: #dff0dd;
    color: #2f6b35;
    font-size: 11px;
    font-weight: 900;
}

.partner-code-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.partner-code-line span {
    color: var(--muted);
}

.partner-code-line strong {
    letter-spacing: .08em;
}

.partner-ref-link {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f3f6fa;
    color: #355c98;
    font-family: monospace;
}

.partner-metrics,
.partner-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 14px 0;
}

.partner-metrics > div,
.partner-metric-grid > div {
    padding: 10px;
    border-radius: 12px;
    background: #f8fbff;
    border: 1px solid #e3eaf3;
}

.partner-metrics span,
.partner-metrics strong,
.partner-metric-grid span,
.partner-metric-grid strong {
    display: block;
}

.partner-metrics span,
.partner-metric-grid span {
    color: var(--muted);
    font-size: 11px;
}

.partner-metrics strong,
.partner-metric-grid strong {
    margin-top: 4px;
    color: var(--ink);
    font-size: 17px;
}

.partner-card-note {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.partner-hero {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 18px 0;
}

.partner-hero > div {
    padding: 18px;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid #dce6f4;
}

.partner-hero span,
.partner-hero strong {
    display: block;
}

.partner-hero span {
    color: var(--muted);
    font-size: 12px;
}

.partner-hero strong {
    margin-top: 6px;
    font-size: 20px;
}

.partner-terms-box,
.partner-note {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff7d6;
    border: 1px solid #f0e1a7;
}

@media (max-width: 1100px) {
    .partner-admin-form {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .partner-admin-grid,
    .partner-hero,
    .partner-metric-grid {
        grid-template-columns: 1fr;
    }

    .partner-admin-form {
        grid-template-columns: 1fr;
    }

    .partner-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   DAY 26 — только расширение внутренних страниц
   Главную страницу НЕ трогаем.
   ========================================================= */

/* Внутренние страницы были ограничены 860px — делаем рабочую область шире. */
.simple-page {
    max-width: 1280px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Карточки и формы внутри внутренних страниц используют всю доступную ширину. */
.simple-page > .paper-card,
.simple-page > .form-card,
.simple-page > .panel,
.simple-page > section {
    width: 100%;
    max-width: none !important;
}

/* Чуть увеличиваем рабочие блоки, но не меняем общий стиль. */
.simple-page .paper-card,
.simple-page .form-card {
    padding: 30px 32px;
}

/* Поля в широких формах выглядят естественнее. */
.simple-page textarea {
    min-height: 170px;
}

/* На планшете оставляем адаптивность. */
@media (max-width: 900px) {
    .simple-page {
        max-width: 100% !important;
    }

    .simple-page .paper-card,
    .simple-page .form-card {
        padding: 24px;
    }
}


/* =========================================================
   DAY 26 — увеличение масштаба внутренних страниц
   Структуру НЕ меняем. Главную страницу НЕ трогаем.
   ========================================================= */

/* Основной текст внутренних страниц */
.simple-page {
    font-size: 16px;
}

/* Заголовок страницы */
.simple-page > .paper-card > h1,
.simple-page > .form-card > h1,
.simple-page h1 {
    font-size: clamp(46px, 4vw, 54px) !important;
    line-height: 1.06;
    margin-bottom: 16px;
}

/* Подзаголовки и шаги */
.simple-page h2,
.simple-page .source-card h2,
.simple-page .form-card h2,
.simple-page .paper-card h2 {
    font-size: 27px !important;
    line-height: 1.15;
}

.simple-page h3 {
    font-size: 21px;
}

/* Описания */
.simple-page p,
.simple-page .muted {
    font-size: 16px;
    line-height: 1.65;
}

/* Eyebrow / служебные подписи */
.simple-page .eyebrow {
    font-size: 12px;
    letter-spacing: .10em;
}

/* Подписи полей */
.simple-page label,
.simple-page .form-row label {
    font-size: 15px !important;
}

/* Поля ввода */
.simple-page .input,
.simple-page input,
.simple-page select,
.simple-page textarea {
    font-size: 16px !important;
}

.simple-page .input,
.simple-page input,
.simple-page select {
    min-height: 50px;
}

/* Текстовые области чуть выше */
.simple-page textarea {
    min-height: 190px;
    line-height: 1.55;
}

/* Кнопки */
.simple-page .primary-btn,
.simple-page .secondary-btn,
.simple-page button {
    font-size: 16px !important;
    min-height: 48px;
}

/* Номера шагов */
.simple-page .step-number,
.simple-page .step-badge,
.simple-page .number-badge {
    font-size: 14px !important;
}

/* Небольшие подсказки */
.simple-page .field-hint,
.simple-page small {
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(45, 63, 111, 0.55);
}
.simple-page input::placeholder,
.simple-page textarea::placeholder {
    color: rgba(45, 63, 111, 0.25);
}

/* Тарифы */
.simple-page .tariff-name {
    font-size: 20px !important;
}

.simple-page .tariff-price {
    font-size: 34px !important;
}

.simple-page .tariff-price small,
.simple-page .tariff-year {
    font-size: 14px !important;
}

.simple-page .tariff-card p,
.simple-page .tariff-card li {
    font-size: 15px !important;
    line-height: 1.55;
}

.simple-page .tariff-btn {
    font-size: 15px !important;
}

/* Таблицы / админка */
.simple-page table {
    font-size: 14px;
}

.simple-page th {
    font-size: 12px;
}

.simple-page td {
    font-size: 14px;
}

/* Внутри карточек больше визуального веса */
.simple-page .paper-card,
.simple-page .form-card {
    padding: 34px 36px;
}

/* На планшете не делаем слишком крупно */
@media (max-width: 900px) {
    .simple-page h1 {
        font-size: 40px !important;
    }

    .simple-page h2 {
        font-size: 24px !important;
    }

    .simple-page p,
    .simple-page .muted,
    .simple-page .input,
    .simple-page input,
    .simple-page select,
    .simple-page textarea {
        font-size: 15px !important;
    }

    .simple-page .paper-card,
    .simple-page .form-card {
        padding: 24px;
    }
}

/* Телефон */
@media (max-width: 620px) {
    .simple-page h1 {
        font-size: 34px !important;
    }

    .simple-page h2 {
        font-size: 22px !important;
    }

    .simple-page label,
    .simple-page .form-row label {
        font-size: 14px !important;
    }
}


/* =========================================================
   DAY 26 — расширяем ИМЕННО контейнеры внутренних страниц
   Главную страницу не трогаем.
   ========================================================= */

/* Важный фикс:
   раньше .simple-page была шире, но родитель .page-shell всё равно
   ограничивал её примерно 1180px. Поэтому визуально контейнеры почти
   не менялись. Теперь расширяем сам родитель только там, где есть
   внутренняя страница. */
.page-shell:has(.simple-page) {
    width: min(1480px, calc(100% - 48px)) !important;
}

/* Рабочая зона внутренних страниц */
.simple-page {
    max-width: 1400px !important;
    width: 100% !important;
}

/* Основной белый контейнер должен реально растягиваться */
.simple-page > .paper-card,
.simple-page > .form-card,
.simple-page > .panel,
.simple-page > section {
    width: 100% !important;
    max-width: none !important;
}

/* Тарифы: карточки получают больше воздуха по горизонтали */
.simple-page .tariff-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.simple-page .tariff-card {
    min-width: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Формы внутри разделов тоже шире */
.simple-page .source-card,
.simple-page .result-box,
.simple-page .lecture-workspace,
.simple-page .quiz-workspace,
.simple-page .homework-workspace,
.simple-page .study-workspace {
    width: 100% !important;
    max-width: none !important;
}

/* На очень широких мониторах не растягиваем бесконечно */
@media (min-width: 1700px) {
    .page-shell:has(.simple-page) {
        width: min(1540px, calc(100% - 64px)) !important;
    }

    .simple-page {
        max-width: 1460px !important;
    }
}

/* Планшет */
@media (max-width: 1000px) {
    .page-shell:has(.simple-page) {
        width: min(100% - 28px, 1400px) !important;
    }

    .simple-page {
        max-width: 100% !important;
    }

    .simple-page .tariff-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   HOME COVER REBUILD — ONLY /
   Фон сайта, внутренние страницы и их контейнеры НЕ трогаем.
   ========================================================= */

.home-cover-page .page-shell {
    width: min(1420px, calc(100% - 40px));
}

/* Home header only */
.home-cover-page .topbar {
    padding-top: 8px;
    padding-bottom: 8px;
}

.home-cover-logo-link {
    line-height: 0;
}

.home-cover-logo {
    display: block;
    width: 265px;
    height: 58px;
    object-fit: contain;
    object-position: left center;
}

/* Main cover */
.home-cover {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
    align-items: center;
    min-height: 470px;
    overflow: hidden;
    margin: 0 0 30px;
    padding: 46px 48px;
    border: 1px solid rgba(35,52,91,.07);
    border-radius: 28px;
    background:
        radial-gradient(circle at 28% 22%, rgba(255,220,84,.12), transparent 25%),
        radial-gradient(circle at 14% 78%, rgba(159,214,196,.13), transparent 23%),
        #fffdf8;
    box-shadow: 0 18px 42px rgba(35,52,91,.08);
}

.home-cover-copy {
    position: relative;
    z-index: 5;
    max-width: 560px;
}

.home-cover-kicker {
    margin: 0 0 17px;
    color: #5773a0;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .17em;
}

.home-cover h1 {
    margin: 0;
    color: #11366f;
    line-height: .98;
}

.home-cover-name {
    display: block;
    font-size: clamp(54px, 5.2vw, 76px);
    letter-spacing: -.045em;
}

.home-cover-slogan {
    display: block;
    margin-top: 8px;
    font-size: clamp(36px, 3.65vw, 52px);
    font-weight: 800;
    letter-spacing: -.03em;
}

.home-cover-text {
    max-width: 520px;
    margin: 23px 0 0;
    color: #48607d;
    font-size: 17px;
    line-height: 1.58;
}

.home-cover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 26px;
}

.home-cover-primary,
.home-cover-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 900;
}

.home-cover-primary {
    min-width: 205px;
    background: #1769d2;
    color: #fff;
    box-shadow: 0 10px 22px rgba(23,105,210,.20);
}

.home-cover-secondary {
    min-width: 185px;
    border: 1px solid #bdd1e8;
    background: #fff;
    color: #234d84;
}

/* Right illustration assembled from separate pieces — nothing is background-cover cropped */
.home-cover-art {
    position: relative;
    align-self: stretch;
    min-height: 375px;
    overflow: visible;
}

.home-cover-decor {
    position: absolute;
    z-index: 1;
    right: -48px;
    top: -46px;
    width: 108%;
    height: calc(100% + 92px);
    object-fit: contain;
    object-position: right center;
    pointer-events: none;
}

.home-cover-mascot {
    position: absolute;
    z-index: 3;
    width: 235px;
    height: 235px;
    object-fit: contain;
    right: 36%;
    top: 4%;
    filter: drop-shadow(0 15px 16px rgba(35,52,91,.13));
    transform: rotate(-3deg);
}

.home-cover-plan {
    position: absolute;
    z-index: 4;
    right: 20%;
    top: 21%;
    display: grid;
    gap: 5px;
    width: 160px;
    padding: 16px 17px;
    border-radius: 4px;
    background: rgba(255,250,218,.96);
    color: #52749b;
    font-size: 13px;
    line-height: 1.25;
    transform: rotate(4deg);
    box-shadow: 0 8px 18px rgba(35,52,91,.08);
}

.home-cover-plan strong {
    color: #274e7d;
    margin-bottom: 3px;
}

.home-cover-note {
    position: absolute;
    z-index: 4;
    right: 1%;
    top: 6%;
    width: 160px;
    color: #536f98;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    transform: rotate(-4deg);
}

#home-tools {
    scroll-margin-top: 90px;
}

/* Existing lower home blocks only get spacing; their design/function stays untouched. */
.home-cover-page .action-grid {
    margin-top: 0;
}

@media (max-width: 1100px) {
    .home-cover-logo {
        width: 220px;
        height: 52px;
    }

    .home-cover {
        grid-template-columns: 1fr 430px;
        padding: 40px 34px;
    }

    .home-cover-mascot {
        width: 200px;
        height: 200px;
        right: 33%;
    }

    .home-cover-plan {
        right: 12%;
    }

    .home-cover-note {
        display: none;
    }
}

@media (max-width: 820px) {
    .home-cover {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 34px 28px;
    }

    .home-cover-copy {
        max-width: none;
    }

    .home-cover-art {
        min-height: 330px;
        margin-top: 12px;
    }

    .home-cover-decor {
        right: -28px;
        top: -20px;
        width: 100%;
        height: 360px;
    }

    .home-cover-mascot {
        width: 185px;
        height: 185px;
        right: 42%;
        top: 6%;
    }

    .home-cover-plan {
        right: 20%;
    }
}

@media (max-width: 620px) {
    .home-cover-page .page-shell {
        width: calc(100% - 18px);
    }

    .home-cover-logo {
        width: 155px;
        height: 42px;
    }

    .home-cover {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .home-cover-name {
        font-size: 46px;
    }

    .home-cover-slogan {
        font-size: 32px;
    }

    .home-cover-text {
        font-size: 15px;
    }

    .home-cover-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .home-cover-primary,
    .home-cover-secondary {
        width: 100%;
    }

    .home-cover-art {
        display: none;
    }
}


/* =========================================================
   TWO PAGE FLOW
   / = only hero
   /cabinet = tools + subjects
   ========================================================= */

/* Первая страница должна заканчиваться после hero. */
.home-cover-page .page-shell {
    padding-bottom: 28px;
}

/* На второй странице нет hero и нет якорной прокрутки. */
.cabinet-page {
    width: 100%;
}

.cabinet-page .action-grid {
    margin-top: 0;
    margin-bottom: 20px;
}

.cabinet-page .dashboard-grid {
    margin-top: 0;
}


/* ТОЛЬКО ГЛАВНАЯ СТРАНИЦА */

/* ГЛАВНАЯ — РАСТЯГИВАЕМ ОДНУ HERO-КАРТИНКУ */

.home-cover-page .page-shell {
    width: calc(100% - 80px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
}

.home-cover-page .home-cover {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.home-cover-page .home-cover-image {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 auto !important;
}


/* =========================================================
   EXPLAIN — actions under AI answer
   ========================================================= */
.explain-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.download-answer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 24px;
    border: 1px solid #e5b72d;
    border-radius: 16px;
    background: #ffd34f;
    color: #233b70;
    text-decoration: none;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.download-answer-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 20px rgba(32, 58, 112, 0.15);
}

.followup-box {
    margin: 20px auto 0;
    max-width: 760px;
    text-align: left;
}


/* =========================================================
   EXPLAIN — закрепление материала
   ========================================================= */

.inline-action-form {
    margin: 0;
}

.practice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 24px;
    border: 1px solid #9fbfdf;
    border-radius: 16px;
    background: #eaf5ff;
    color: #233b70;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.practice-btn:hover {
    transform: scale(1.04);
    background: #dceeff;
    box-shadow: 0 8px 20px rgba(32, 58, 112, .12);
}

.practice-box {
    margin-top: 26px;
    padding: 22px;
    border: 1px solid #cbdff2;
    border-radius: 20px;
    background: #f7fbff;
}

.practice-heading h3 {
    margin: 0 0 8px;
    color: #203a70;
    font-size: 23px;
}

.practice-heading > p:last-child {
    margin: 0 0 18px;
    color: var(--muted);
}

.practice-task {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
    align-items: start;
    margin: 14px 0;
    padding: 17px;
    border: 1px solid #d7e5f2;
    border-radius: 16px;
    background: #ffffff;
}

.practice-task-number {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffd95f;
    color: #233b70;
    font-weight: 900;
}

.practice-task-body strong {
    display: block;
    margin: 3px 0 10px;
    color: #243a67;
    line-height: 1.5;
}

.practice-answer {
    min-height: 92px;
    background: #fbfdff;
}

.practice-feedback {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed #c7d9eb;
}

.practice-feedback > h3 {
    margin: 0 0 14px;
    color: #203a70;
}

.practice-check-item {
    margin: 12px 0;
    padding: 14px 16px;
    border-radius: 14px;
    line-height: 1.55;
}

.practice-check-item p {
    margin: 6px 0 0;
}

.practice-correct {
    background: #eef8eb;
    border: 1px solid #c9e2c3;
    border-left: 5px solid #6dbd5a;
}

.practice-wrong {
    background: #fff1f2;
    border: 1px solid #efc7cc;
    border-left: 5px solid #d97d88;
}

.practice-error {
    margin-top: 18px;
}

@media (max-width: 620px) {
    .practice-task {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   EXPLAIN — три одинаковые кнопки действий
   Вопросы / Закрепить / PDF
   ========================================================= */

.explain-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
    justify-content: center;
    margin-top: 30px;
}

.explain-actions > .followup-btn,
.explain-actions > .download-answer-btn,
.explain-actions > .inline-action-form {
    flex: 1 1 190px;
    max-width: 220px;
}

.explain-actions .followup-btn,
.explain-actions .practice-btn,
.explain-actions .download-answer-btn {
    width: 100%;
    min-height: 50px;
    padding: 13px 20px;
    border-radius: 16px;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: #233b70;
    cursor: pointer;
    box-shadow: none;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

/* 1. Остались вопросы? — голубая */
.explain-actions .followup-btn {
    border: 1px solid #a9c8ec;
    background: #dfeeff;
}

/* 2. Закрепить материал — зелёная */
.explain-actions .practice-btn {
    border: 1px solid #b9d7b4;
    background: #e3f2df;
}

/* 3. Скачать ответ PDF — жёлтая */
.explain-actions .download-answer-btn {
    border: 1px solid #e4c25f;
    background: #ffe59b;
}

.explain-actions .followup-btn:hover,
.explain-actions .practice-btn:hover,
.explain-actions .download-answer-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(35, 52, 91, .13);
    filter: brightness(1.02);
}

.explain-actions .followup-btn:active,
.explain-actions .practice-btn:active,
.explain-actions .download-answer-btn:active {
    transform: translateY(1px) scale(.985);
}

.explain-actions .inline-action-form {
    display: flex;
    margin: 0;
}

@media (max-width: 720px) {
    .explain-actions > .followup-btn,
    .explain-actions > .download-answer-btn,
    .explain-actions > .inline-action-form {
        flex: 1 1 100%;
        max-width: none;
    }
}


/* =========================================================
   HOMEWORK — AI проверка / вопросы / исправления
   ========================================================= */

.homework-page .paper-card {
    overflow: visible;
}

.homework-upload-card {
    margin-top: 4px;
}

.homework-check-btn {
    justify-self: start;
    min-width: 220px;
}

.homework-result {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid #e1e6ee;
}

.homework-review-content {
    margin-top: 16px;
    color: #243a67;
    font-size: 17px;
    line-height: 1.65;
}

.homework-review-content h2,
.homework-recheck-result h2 {
    margin: 26px 0 12px;
    color: #203a70;
    font-size: 25px;
}

.homework-review-content ul,
.homework-recheck-result ul {
    padding-left: 24px;
}

.homework-summary {
    margin: 16px 0 22px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff4c8;
    border: 1px solid #edd779;
}

.homework-feedback-card {
    margin: 14px 0;
    padding: 16px 18px;
    border-radius: 16px;
    line-height: 1.6;
}

.homework-feedback-card p {
    margin: 7px 0 0;
}

.homework-correct {
    background: #edf8e9;
    border: 1px solid #c9e3c1;
    border-left: 5px solid #72ba61;
}

.homework-wrong {
    background: #fff0f2;
    border: 1px solid #efc5cb;
    border-left: 5px solid #dc7b88;
}

.homework-info {
    background: #edf6ff;
    border: 1px solid #c9ddf3;
    border-left: 5px solid #7aaee0;
}

.homework-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

.homework-action-btn {
    min-width: 210px;
    min-height: 50px;
    padding: 13px 22px;
    border-radius: 16px;
    color: #233b70;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.homework-question-btn {
    background: #dfeeff;
    border: 1px solid #a9c8ec;
}

.homework-recheck-btn {
    background: #e3f2df;
    border: 1px solid #b9d7b4;
}

.homework-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(35, 52, 91, .12);
}

.homework-followup-box,
.homework-recheck-box {
    max-width: 900px;
    margin: 22px auto 0;
    padding: 20px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid #d7e4f1;
}

.homework-followup-box h3,
.homework-recheck-box h3 {
    margin: 0 0 10px;
    color: #203a70;
    font-size: 22px;
}

.homework-followup-box textarea,
.homework-recheck-box textarea {
    min-height: 110px;
}

.homework-followup-history {
    max-width: 900px;
    margin: 20px auto 0;
}

.homework-question {
    margin-top: 14px;
    padding: 12px 15px;
    border-radius: 14px 14px 4px 14px;
    background: #fff4c8;
    color: #243a67;
}

.homework-answer {
    margin-top: 8px;
}

.homework-recheck-result {
    margin-top: 26px;
    padding: 22px;
    border-radius: 20px;
    background: #fbfdfb;
    border: 1px solid #d5e7d1;
}

@media (max-width: 700px) {
    .homework-action-btn {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================================
   LECTURES — multi-material / credits / age styles
   ========================================================= */

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

.lecture-style-card {
    position: relative;
    display: block;
    min-height: 130px;
    padding: 18px;
    border: 1px solid #d9e1ec;
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.lecture-style-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lecture-style-card:has(input:checked) {
    border-color: #7aa9db;
    background: #eef6ff;
    box-shadow: 0 8px 20px rgba(35, 59, 112, .1);
}

.lecture-style-card:hover {
    transform: translateY(-2px);
}

.lecture-style-name {
    display: block;
    margin-bottom: 10px;
    color: #203a70;
    font-size: 18px;
    font-weight: 900;
}

.lecture-style-card small {
    color: #67748f;
    line-height: 1.45;
}

.lecture-material-card {
    margin: 18px 0;
    padding: 22px;
    border: 1px solid #dbe3ed;
    border-radius: 20px;
    background: #fff;
}

.lecture-material-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.lecture-material-head h2 {
    margin: 0;
    color: #203a70;
}

.lecture-remove-btn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #fff0f2;
    color: #b14d5a;
    font-size: 24px;
    cursor: pointer;
}

.lecture-material-bottom {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 16px;
    align-items: end;
}

.lecture-pages-field select {
    min-width: 100%;
}

.lecture-add-btn {
    justify-self: start;
}

.lecture-credit-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.lecture-credit-panel > div {
    padding: 16px 18px;
    border-radius: 16px;
    background: #f5f8fc;
    border: 1px solid #dce4ed;
}

.lecture-credit-panel span {
    display: block;
    color: #78849b;
    font-size: 13px;
}

.lecture-credit-panel strong {
    display: block;
    margin-top: 4px;
    color: #203a70;
    font-size: 20px;
}

.lecture-credit-warning {
    margin-top: 16px;
    padding: 18px;
    border-radius: 17px;
    background: #fff4cc;
    border: 1px solid #ead274;
    color: #243a67;
}

.lecture-credit-warning p {
    margin: 7px 0 12px;
}

.lecture-credit-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}

.lecture-credit-consent input {
    margin-top: 3px;
}

.lecture-submit-btn {
    justify-self: start;
    min-width: 220px;
}

.lecture-result {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #e0e6ee;
}

.lecture-result-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.lecture-result-head h2 {
    margin: 4px 0 8px;
    color: #203a70;
    font-size: 30px;
}

.lecture-pages-preview {
    display: grid;
    gap: 28px;
}

.lecture-sheet {
    width: min(900px, 100%);
    min-height: 1120px;
    margin: 0 auto;
    padding: 34px 38px 40px;
    border: 1px solid #dfe5ec;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(42, 56, 89, .08);
}

.lecture-sheet-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e3e8ef;
    color: #7b879d;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.lecture-sheet-content {
    color: #243a67;
    font-size: 16px;
    line-height: 1.58;
}

.lecture-sheet-content h2 {
    margin: 20px 0 10px;
    color: #203a70;
    font-size: 27px;
}

.lecture-sheet-content h3 {
    margin: 18px 0 8px;
    color: #31578f;
    font-size: 20px;
}

.lecture-sheet-content p {
    margin: 8px 0 14px;
}

.lecture-sheet-content ul {
    margin: 8px 0 16px;
    padding-left: 22px;
}

.lecture-sheet-content li {
    margin: 5px 0;
}

.lecture-sheet-content table {
    width: 100%;
    margin: 15px 0 20px;
    border-collapse: collapse;
    font-size: 14px;
}

.lecture-sheet-content th,
.lecture-sheet-content td {
    padding: 9px 10px;
    border: 1px solid #d9e1e9;
    text-align: left;
    vertical-align: top;
}

.lecture-sheet-content th {
    background: #edf3f8;
}

.lecture-note,
.lecture-example,
.lecture-flow,
.lecture-key,
.lecture-checklist {
    margin: 15px 0;
    padding: 14px 16px;
    border-radius: 14px;
}

.lecture-note {
    background: #fff4cc;
    border: 1px solid #ead37c;
}

.lecture-example {
    background: #eef6ff;
    border: 1px solid #c9ddf3;
}

.lecture-flow {
    background: #f5f8fb;
    border: 1px solid #d5e0ea;
}

.lecture-key {
    background: #edf8ea;
    border: 1px solid #c7dfbf;
}

.lecture-checklist {
    background: #fff1ea;
    border: 1px solid #eed1c1;
}

/* Younger */
.lecture-sheet[data-style="Учебный планер"] {
    border-top: 7px solid #76addd;
}

.lecture-sheet[data-style="Скетчноут"] {
    border-top: 7px solid #efc75a;
    background: #fffefa;
}

.lecture-sheet[data-style="Визуальный конспект"] {
    border-top: 7px solid #82bd82;
}

/* Older */
.lecture-sheet[data-style="Академический конспект"] {
    border-top: 5px solid #6c8fb9;
}

.lecture-sheet[data-style="Структурная схема"] {
    border-top: 5px solid #8e83c7;
}

.lecture-sheet[data-style="Экзаменационный конспект"] {
    border-top: 5px solid #55657a;
}

.lecture-restyle-panel {
    max-width: 900px;
    margin: 24px auto 0;
    padding: 18px 20px;
    border: 1px solid #d9e3ed;
    border-radius: 18px;
    background: #f8fbfe;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.lecture-restyle-panel p {
    margin: 5px 0 0;
    color: #77849a;
}

.lecture-restyle-panel form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.lecture-restyle-used {
    color: #66758e;
}

@media (max-width: 900px) {
    .lecture-style-grid {
        grid-template-columns: 1fr;
    }

    .lecture-material-bottom,
    .lecture-credit-panel {
        grid-template-columns: 1fr;
    }

    .lecture-result-head,
    .lecture-restyle-panel {
        flex-direction: column;
    }

    .lecture-sheet {
        min-height: auto;
        padding: 24px 20px;
    }
}
.lecture-style-preview-button {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.lecture-style-preview-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.lecture-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.lecture-preview-modal.is-open {
    display: flex;
}

.lecture-preview-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 28, 48, 0.72);
}

.lecture-preview-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(900px, 94vw);
    max-height: 92vh;
    background: #fff;
    border-radius: 20px;
    overflow: auto;
}

.lecture-preview-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e4e9f1;
}

.lecture-preview-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #eef4ff;
    font-size: 24px;
    cursor: pointer;
}

.lecture-preview-modal-body {
    padding: 16px;
}

.lecture-preview-modal-body img {
    display: block;
    width: 100%;
    height: auto;
}
.usage-cost-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.usage-cost-panel > div {
    padding: 20px 22px;
    border: 1px solid #d8e2ef;
    border-radius: 20px;
    background: rgba(241, 246, 252, 0.88);
}

.usage-cost-panel span {
    display: block;
    margin-bottom: 6px;
    color: rgba(45, 63, 111, 0.55);
    font-size: 14px;
}

.usage-cost-panel strong {
    display: block;
    color: #23345b;
    font-size: 20px;
}

@media (max-width: 700px) {
    .usage-cost-panel {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   EXPLAIN — вопросы пользователя
   ========================================================= */

.followup-history {
    margin-top: 24px;
}

.followup-question {
    margin: 24px 0 10px;
    padding: 14px 18px;

    border: 1px solid #b9d7f3;
    border-left: 5px solid #77aee3;
    border-radius: 15px;

    background: #eaf5ff;
    color: #233b70;

    font-size: 17px;
    line-height: 1.5;
}

.followup-question strong {
    margin-right: 5px;
}

.followup-answer {
    scroll-margin-top: 100px;
}

.latest-followup-answer {
    animation: followupAnswerAppear .45s ease;
}

@keyframes followupAnswerAppear {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   QUIZ — динамический AI-тест
   ========================================================= */

.quiz-page .paper-card {
    overflow: visible;
}

.quiz-live-form {
    margin-top: 24px;
}

.quiz-source-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    padding: 18px 20px;
    border: 1px solid #d7e4f1;
    border-radius: 18px;
    background: rgba(239, 247, 255, .82);
}

.quiz-source-summary strong {
    display: block;
    line-height: 1.5;
}

.quiz-card {
    margin-top: 8px;
}

.quiz-card h2 {
    line-height: 1.45;
}

.quiz-option span {
    flex: 1;
    line-height: 1.45;
}

.quiz-result-box {
    scroll-margin-top: 100px;
}

.quiz-review-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.quiz-review-card {
    padding: 17px 18px;
    border-radius: 16px;
    border: 1px solid #dfe4ee;
    background: #fff;
}

.quiz-review-ok {
    background: #eef8eb;
    border-color: #c9e2c3;
    border-left: 5px solid #6dbd5a;
}

.quiz-review-bad {
    background: #fff1f2;
    border-color: #efc7cc;
    border-left: 5px solid #d97d88;
}

.quiz-review-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.quiz-review-title span {
    font-weight: 900;
}

.quiz-review-ok .quiz-review-title span {
    color: #3f8f32;
}

.quiz-review-bad .quiz-review-title span {
    color: #bd5361;
}

.quiz-review-question {
    margin: 8px 0 14px;
    font-weight: 900;
    color: #233b70;
}

.quiz-review-card p {
    margin: 7px 0;
    line-height: 1.55;
}

.quiz-review-explanation {
    margin-top: 12px !important;
    padding-top: 12px;
    border-top: 1px dashed rgba(35, 52, 91, .14);
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

@media (max-width: 700px) {
    .quiz-source-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .quiz-source-summary .secondary-btn {
        width: 100%;
    }

    .quiz-review-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .result-actions > * {
        width: 100%;
    }
}


/* =========================================================
   QUIZ — разбор ошибки и похожее задание
   ========================================================= */

.quiz-mistake-explanation,
.quiz-similar-task {
    margin-top: 16px;
    padding: 15px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(35, 52, 91, .10);
}

.quiz-inline-heading {
    margin-bottom: 10px;
    font-weight: 900;
    color: #233b70;
}

.quiz-similar-question {
    margin: 0 0 12px !important;
    font-weight: 900;
}

.quiz-check-similar-btn {
    margin-top: 10px;
}

.quiz-similar-result {
    margin-top: 12px;
    padding: 13px 14px;
    border-radius: 12px;
}

.quiz-similar-result-ok {
    background: #e9f7e6;
    border: 1px solid #bfe0b8;
}

.quiz-similar-result-bad {
    background: #fff0f1;
    border: 1px solid #efc1c6;
}


/* =========================================================
   LECTURE DESIGN SYSTEM — generated lecture content
   AI выбирает только готовые классы, внешний вид задаёт CSS.
   ========================================================= */

.lecture-sheet-content .lecture-design-page {
    --lecture-ink: #243a67;
    display: grid;
    gap: 18px;
    width: 100%;
    color: var(--lecture-ink);
}

.lecture-sheet-content .lecture-design-page > :first-child {
    margin-top: 0;
}

.lecture-sheet-content .lecture-title-card {
    padding: 18px 22px;
    border: 2px solid rgba(35, 52, 91, .14);
    border-radius: 22px 18px 24px 19px;
    box-shadow: 0 8px 18px rgba(47, 66, 105, .08);
}

.lecture-sheet-content .lecture-title-card h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.08;
    color: #23345b;
}

.lecture-sheet-content .lecture-grid-two,
.lecture-sheet-content .lecture-grid-three {
    display: grid;
    gap: 16px;
    align-items: stretch;
}

.lecture-sheet-content .lecture-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lecture-sheet-content .lecture-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lecture-sheet-content .lecture-card,
.lecture-sheet-content .lecture-note,
.lecture-sheet-content .lecture-example,
.lecture-sheet-content .lecture-flow,
.lecture-sheet-content .lecture-key,
.lecture-sheet-content .lecture-checklist,
.lecture-sheet-content .lecture-step {
    margin: 0;
    padding: 16px 18px;
    border: 1.5px solid rgba(35, 52, 91, .12);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(45, 63, 98, .06);
}

.lecture-sheet-content .lecture-card h3,
.lecture-sheet-content .lecture-note h3,
.lecture-sheet-content .lecture-example h3,
.lecture-sheet-content .lecture-flow h3,
.lecture-sheet-content .lecture-key h3,
.lecture-sheet-content .lecture-checklist h3,
.lecture-sheet-content .lecture-step h3 {
    margin: 0 0 8px;
    font-size: 19px;
    line-height: 1.15;
}

.lecture-sheet-content .theme-yellow { background: #fff4bd; border-color: #e6c958; }
.lecture-sheet-content .theme-blue { background: #eaf5ff; border-color: #8dbbe8; }
.lecture-sheet-content .theme-pink { background: #ffeaf1; border-color: #e5a4ba; }
.lecture-sheet-content .theme-green { background: #eaf7e6; border-color: #9bc78f; }
.lecture-sheet-content .theme-lavender { background: #f0ebff; border-color: #b6a4df; }
.lecture-sheet-content .theme-peach { background: #fff0e2; border-color: #e5b78f; }
.lecture-sheet-content .theme-neutral { background: #f7f9fc; border-color: #cfd8e6; }

.lecture-sheet-content .lecture-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 10px;
    border: 1px solid rgba(35, 52, 91, .14);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 900;
}

.lecture-sheet-content .lecture-step {
    position: relative;
    padding-left: 58px;
}

.lecture-sheet-content .lecture-step-number {
    position: absolute;
    left: 16px;
    top: 16px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #23345b;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.lecture-sheet-content .lecture-arrow-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    color: #7f6db0;
    font-weight: 900;
}

.lecture-sheet-content .lecture-arrow-row::before {
    content: "→";
    font-size: 28px;
    line-height: 1;
}

/* Школьный скетч */
.lecture-sheet[data-style="Школьный скетч"] {
    border-top: 7px solid #efc75a;
    background: #fffefa;
}

.lecture-sheet-content .sketch-layout {
    padding: 8px;
    background-image:
        linear-gradient(transparent 31px, rgba(104, 137, 185, .09) 32px);
    background-size: 100% 32px;
}

.lecture-sheet-content .sketch-layout .lecture-card,
.lecture-sheet-content .sketch-layout .lecture-note,
.lecture-sheet-content .sketch-layout .lecture-example,
.lecture-sheet-content .sketch-layout .lecture-key,
.lecture-sheet-content .sketch-layout .lecture-step {
    border-width: 2px;
    border-radius: 18px 14px 20px 15px;
}

/* Карточки и блоки */
.lecture-sheet[data-style="Карточки и блоки"] {
    border-top: 7px solid #7eaee0;
}

.lecture-sheet-content .cards-layout .lecture-card,
.lecture-sheet-content .cards-layout .lecture-note,
.lecture-sheet-content .cards-layout .lecture-example,
.lecture-sheet-content .cards-layout .lecture-key,
.lecture-sheet-content .cards-layout .lecture-checklist {
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(46, 68, 109, .08);
}

/* Визуальная история */
.lecture-sheet[data-style="Визуальная история"] {
    border-top: 7px solid #83be88;
}

.lecture-sheet-content .story-layout .lecture-flow,
.lecture-sheet-content .story-layout .lecture-step {
    border-left-width: 5px;
    border-left-color: #7aa9db;
}

/* Старшие классы */
.lecture-sheet[data-style="Конспект Pro"] { border-top: 5px solid #536f9e; }
.lecture-sheet[data-style="Схемы и связи"] { border-top: 5px solid #8e83c7; }
.lecture-sheet[data-style="Академический"] { border-top: 5px solid #6d7b8e; }

.lecture-sheet-content .pro-layout .lecture-card,
.lecture-sheet-content .academic-layout .lecture-card {
    border-radius: 12px;
    box-shadow: none;
}

.lecture-sheet-content .schemes-layout .lecture-flow,
.lecture-sheet-content .schemes-layout .lecture-step {
    border-left-width: 4px;
    border-left-color: #8e83c7;
}

@media (max-width: 760px) {
    .lecture-sheet-content .lecture-grid-two,
    .lecture-sheet-content .lecture-grid-three {
        grid-template-columns: 1fr;
    }

    .lecture-sheet-content .lecture-title-card h2 {
        font-size: 25px;
    }
}

@media print {
    .lecture-sheet-content .lecture-card,
    .lecture-sheet-content .lecture-note,
    .lecture-sheet-content .lecture-example,
    .lecture-sheet-content .lecture-flow,
    .lecture-sheet-content .lecture-key,
    .lecture-sheet-content .lecture-checklist,
    .lecture-sheet-content .lecture-step,
    .lecture-sheet-content .lecture-title-card {
        break-inside: avoid;
        box-shadow: none;
    }
}


/* =========================================================
   LECTURE CONSTRUCTOR v2 — композиционные шаблоны стилей
   Только добавления: старые lecture-* классы не удалены и
   не переименованы, сохранённые лекции продолжают работать.
   Всё изолировано под .lecture-sheet-content.
   ========================================================= */

/* ---------- Базовая безопасность сетки ---------- */

.lecture-sheet-content .lecture-design-page {
    overflow-wrap: break-word;
}

.lecture-sheet-content .lecture-design-page > *,
.lecture-sheet-content .lecture-grid-two > *,
.lecture-sheet-content .lecture-grid-three > * {
    min-width: 0;
}

/* ---------- Типографика ---------- */

/* .simple-page h2 { font-size: 27px !important } перебивал заголовок
   титульной карточки — переопределяем только внутри листа лекции. */
.simple-page .lecture-sheet-content .lecture-title-card h2 {
    font-size: 30px !important;
    line-height: 1.1;
}

/* Лишние внешние отступы абзацев и списков внутри компонентов. */
.lecture-sheet-content :is(
    .lecture-title-card, .lecture-card, .lecture-note, .lecture-example,
    .lecture-flow, .lecture-key, .lecture-checklist, .lecture-step,
    .lecture-sticker, .lecture-callout, .lecture-quote, .lecture-formula,
    .lecture-compare-side, .lecture-chain-item, .lecture-timeline-item
) p {
    margin: 0 0 8px;
    /* .simple-page p задаёт 16px и иначе гасит размер hero/compact/formula */
    font-size: inherit;
    line-height: inherit;
}

.lecture-sheet-content :is(
    .lecture-title-card, .lecture-card, .lecture-note, .lecture-example,
    .lecture-flow, .lecture-key, .lecture-checklist, .lecture-step,
    .lecture-sticker, .lecture-callout, .lecture-quote, .lecture-formula,
    .lecture-compare-side, .lecture-chain-item, .lecture-timeline-item
) ul {
    margin: 4px 0 8px;
}

.lecture-sheet-content :is(
    .lecture-title-card, .lecture-card, .lecture-note, .lecture-example,
    .lecture-flow, .lecture-key, .lecture-checklist, .lecture-step,
    .lecture-sticker, .lecture-callout, .lecture-quote, .lecture-formula,
    .lecture-compare-side, .lecture-chain-item, .lecture-timeline-item
) > :last-child {
    margin-bottom: 0;
}

/* ---------- Разные роли блоков (работают и без theme-*) ---------- */

/* Заметка — лёгкая: пунктир, без тени. */
.lecture-sheet-content .lecture-note {
    background: #fffdf3;
    border: 1.5px dashed #dcc062;
    box-shadow: none;
    font-size: 15px;
}

/* Пример — акцентная верхняя полоса и цветной заголовок. */
.lecture-sheet-content .lecture-example {
    background: #fff;
    border: 1.5px solid #a9cbec;
    border-top: 6px solid #5b9bd5;
}

.lecture-sheet-content .lecture-example > :is(strong, h3):first-child {
    color: #2f6fae;
}

/* Запомни — сильный акцент: тёмная рамка и плоская «печатная» тень. */
.lecture-sheet-content .lecture-key {
    background: #fffbe8;
    border: 2px solid #23345b;
    box-shadow: 5px 5px 0 rgba(35, 52, 91, .85);
}

.lecture-sheet-content .lecture-key > :is(strong, h3):first-child {
    color: #23345b;
    letter-spacing: .01em;
}

/* Чек-лист — собственные маркеры. */
.lecture-sheet-content .lecture-checklist {
    background: #f6fbf4;
    border: 1.5px solid #b9dbae;
}

.lecture-sheet-content .lecture-checklist ul {
    padding-left: 0;
    list-style: none;
}

.lecture-sheet-content .lecture-checklist li {
    position: relative;
    margin: 7px 0;
    padding-left: 32px;
}

.lecture-sheet-content .lecture-checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: .1em;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 7px;
    background: #4f9d5d;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    box-sizing: border-box;
}

/* Поток — спокойный фон и левая направляющая. */
.lecture-sheet-content .lecture-flow {
    background: #f6f8fc;
    border-left-width: 4px;
    box-shadow: none;
}

/* ---------- Модификаторы размера (визуальная часть) ---------- */

.lecture-sheet-content .lecture-hero {
    padding: 24px 28px;
    border-width: 2px;
    font-size: 17.5px;
    line-height: 1.55;
}

.lecture-sheet-content .lecture-hero h3 {
    margin-bottom: 12px;
    font-size: 26px;
    line-height: 1.12;
}

.lecture-sheet-content .lecture-compact {
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.45;
}

.lecture-sheet-content .lecture-compact h3 {
    font-size: 17px;
}

.lecture-sheet-content .lecture-compact.lecture-step {
    padding-left: 54px;
}

.lecture-sheet-content .lecture-tall {
    align-self: stretch;
}

/* ---------- Новые компоненты ---------- */

/* Маркер — выделение части текста (span.lecture-mark). */
.lecture-sheet-content .lecture-mark {
    padding: 0 .14em;
    background: linear-gradient(
        transparent 50%,
        rgba(255, 216, 77, .85) 50%,
        rgba(255, 216, 77, .85) 90%,
        transparent 90%
    );
    font-weight: 800;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Стикер — короткая заметка «на бумажке». */
.lecture-sheet-content .lecture-sticker {
    margin: 0;
    padding: 16px 18px;
    border: 1px solid #e8cf62;
    border-radius: 4px 4px 14px 4px;
    background: #fff3b0;
    box-shadow: 0 8px 16px rgba(80, 66, 20, .12);
    font-size: 15px;
}

.lecture-sheet-content .lecture-sticker h3 {
    margin: 0 0 6px;
    font-size: 17px;
}

/* Выноска — важное предупреждение со знаком «!». */
.lecture-sheet-content .lecture-callout {
    position: relative;
    margin: 0;
    padding: 16px 18px 16px 62px;
    border: 1.5px solid #f0c27a;
    border-left: 6px solid #ef9a2f;
    border-radius: 14px;
    background: #fff6e7;
}

.lecture-sheet-content .lecture-callout::before {
    content: "!";
    position: absolute;
    left: 16px;
    top: 15px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ef9a2f;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.lecture-sheet-content .lecture-callout h3 {
    margin: 0 0 6px;
    font-size: 18px;
}

/* Цитата / формулировка из источника. */
.lecture-sheet-content .lecture-quote {
    position: relative;
    margin: 0;
    padding: 18px 22px 18px 60px;
    border-left: 5px solid #8e83c7;
    border-radius: 0 16px 16px 0;
    background: #f6f3ff;
    font-size: 17px;
    font-style: italic;
}

.lecture-sheet-content .lecture-quote::before {
    content: "\201C";
    position: absolute;
    left: 16px;
    top: 4px;
    color: #8e83c7;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 60px;
    font-style: normal;
    line-height: 1;
}

/* Формула — крупно, по центру, на «миллиметровке». */
.lecture-sheet-content .lecture-formula {
    margin: 0;
    padding: 18px 20px;
    border: 1.5px dashed #8fa9cf;
    border-radius: 14px;
    background-color: #fbfdff;
    background-image:
        linear-gradient(rgba(120, 150, 200, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 150, 200, .10) 1px, transparent 1px);
    background-size: 16px 16px;
    color: #1f3561;
    font-family: "Cambria Math", Cambria, "Times New Roman", serif;
    font-size: 23px;
    line-height: 1.4;
    text-align: center;
}

.lecture-sheet-content .lecture-formula p {
    margin: 0 0 4px;
}

/* Сравнение — две стороны со знаком «vs» между ними. */
.lecture-sheet-content .lecture-compare {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 46px;
    align-items: stretch;
}

.lecture-sheet-content .lecture-compare::before {
    content: "vs";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #23345b;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    transform: translate(-50%, -50%);
}

.lecture-sheet-content .lecture-compare-side {
    min-width: 0;
    padding: 16px 18px;
    border: 1.5px solid #9cc3ea;
    border-top: 6px solid #5b9bd5;
    border-radius: 16px;
    background: #f2f8ff;
}

.lecture-sheet-content .lecture-compare-side + .lecture-compare-side {
    border-color: #e5a4ba;
    border-top-color: #d9708f;
    background: #fff2f6;
}

.lecture-sheet-content .lecture-compare-side h3 {
    margin: 0 0 8px;
    font-size: 19px;
}

/* Цепочка — горизонтальный маршрут из шагов со стрелками. */
.lecture-sheet-content .lecture-chain {
    counter-reset: lecture-chain;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
    padding-top: 12px;
}

.lecture-sheet-content .lecture-chain-item {
    counter-increment: lecture-chain;
    position: relative;
    min-width: 0;
    padding: 24px 14px 14px;
    border: 1.5px solid #a9cbec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(45, 63, 98, .06);
    font-size: 15px;
    line-height: 1.45;
}

.lecture-sheet-content .lecture-chain-item::after {
    content: counter(lecture-chain);
    position: absolute;
    left: 14px;
    top: -13px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #23345b;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.lecture-sheet-content .lecture-chain-item + .lecture-chain-item::before {
    content: "\2192";
    position: absolute;
    left: -33px;
    top: 50%;
    color: #7f6db0;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-50%);
}

.lecture-sheet-content .lecture-chain-item h3 {
    margin: 0 0 6px;
    font-size: 17px;
}

/* Таймлайн — вертикальная линия, блоки зигзагом слева/справа. */
.lecture-sheet-content .lecture-timeline {
    counter-reset: lecture-tl;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 60px;
    row-gap: 14px;
    padding: 6px 0;
}

.lecture-sheet-content .lecture-timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 3px dashed #9db8dc;
    transform: translateX(-50%);
}

.lecture-sheet-content .lecture-timeline-item {
    counter-increment: lecture-tl;
    position: relative;
    min-width: 0;
    padding: 14px 16px;
    border: 1.5px solid #c9d8ea;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(45, 63, 98, .06);
}

.lecture-sheet-content .lecture-timeline-item::before {
    content: counter(lecture-tl);
    position: absolute;
    top: 14px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #23345b;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    box-sizing: border-box;
}

/* Нечётные — слева от линии, чётные — справа, со сдвигом на полблока. */
.lecture-sheet-content .lecture-timeline-item:nth-child(odd) {
    grid-column: 1;
}

.lecture-sheet-content .lecture-timeline-item:nth-child(even) {
    grid-column: 2;
}

.lecture-sheet-content .lecture-timeline-item:nth-child(odd)::before {
    right: -46px;
}

.lecture-sheet-content .lecture-timeline-item:nth-child(even)::before {
    left: -46px;
}

.lecture-sheet-content .lecture-timeline-item:nth-child(1) { grid-row: 1 / span 2; }
.lecture-sheet-content .lecture-timeline-item:nth-child(2) { grid-row: 2 / span 2; }
.lecture-sheet-content .lecture-timeline-item:nth-child(3) { grid-row: 3 / span 2; }
.lecture-sheet-content .lecture-timeline-item:nth-child(4) { grid-row: 4 / span 2; }
.lecture-sheet-content .lecture-timeline-item:nth-child(5) { grid-row: 5 / span 2; }
.lecture-sheet-content .lecture-timeline-item:nth-child(6) { grid-row: 6 / span 2; }
.lecture-sheet-content .lecture-timeline-item:nth-child(7) { grid-row: 7 / span 2; }
.lecture-sheet-content .lecture-timeline-item:nth-child(8) { grid-row: 8 / span 2; }

/* Начало и вывод маршрута. */
.lecture-sheet-content .lecture-timeline-item:first-child {
    border-color: #8dbbe8;
    background: #eef6ff;
}

.lecture-sheet-content .lecture-timeline-item:first-child::before {
    background: #3f7fc4;
}

.lecture-sheet-content .lecture-timeline-item:last-child:not(:first-child) {
    border: 2px solid #8cc58a;
    background: #eef9ea;
}

.lecture-sheet-content .lecture-timeline-item:last-child:not(:first-child)::before {
    background: #3f9a4f;
}

.lecture-sheet-content .lecture-timeline-item h3 {
    margin: 0 0 6px;
    font-size: 18px;
}

/* =========================================================
   ШКОЛЬНЫЙ СКЕТЧ — асимметричная сетка 12 колонок
   ========================================================= */

.lecture-sheet-content .sketch-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px 20px;
}

/* По умолчанию каждый блок — на всю ширину (как у старых лекций). */
.lecture-sheet-content .sketch-layout > * {
    grid-column: 1 / -1;
}

.lecture-sheet-content .sketch-layout > .lecture-hero,
.lecture-sheet-content .sketch-layout > .lecture-span-2 {
    grid-column: span 8;
}

.lecture-sheet-content .sketch-layout > .lecture-sticker,
.lecture-sheet-content .sketch-layout > .lecture-compact {
    grid-column: span 4;
}

.lecture-sheet-content .sketch-layout > .lecture-tall {
    grid-row: span 2;
}

.lecture-sheet-content .sketch-layout > .lecture-span-full {
    grid-column: 1 / -1;
}

/* Заголовок — маркерное подчёркивание и пунктир. */
.lecture-sheet-content .sketch-layout .lecture-title-card {
    border: 2px dashed rgba(35, 52, 91, .28);
    border-radius: 24px 14px 26px 16px;
    box-shadow: none;
}

.lecture-sheet-content .sketch-layout .lecture-title-card h2 {
    display: inline;
    padding: 0 .1em;
    background: linear-gradient(transparent 60%, rgba(255, 214, 77, .75) 60%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Главный блок — «нарисованный от руки» контур. */
.lecture-sheet-content .sketch-layout .lecture-hero {
    border: 2.5px solid #23345b;
    border-radius: 26px 16px 30px 18px / 18px 26px 16px 28px;
    box-shadow: 4px 5px 0 rgba(35, 52, 91, .18);
}

/* Стикеры — небольшой наклон и «скотч». Наклоняются ТОЛЬКО стикеры. */
.lecture-sheet-content .sketch-layout .lecture-sticker {
    position: relative;
    align-self: start;
    margin-top: 6px;
    transform: rotate(-1.6deg);
}

.lecture-sheet-content .sketch-layout .lecture-sticker:nth-of-type(even) {
    transform: rotate(1.3deg);
}

.lecture-sheet-content .sketch-layout .lecture-sticker::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -11px;
    width: 74px;
    height: 20px;
    border-radius: 2px;
    background: rgba(201, 222, 245, .78);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    transform: translateX(-50%) rotate(-3deg);
}

/* Заметка — поля тетради. */
.lecture-sheet-content .sketch-layout .lecture-note {
    border-left: 4px solid #ef8f8f;
    border-radius: 6px 16px 16px 6px;
}

/* Пример — пунктирная рамка. */
.lecture-sheet-content .sketch-layout .lecture-example {
    border: 2px dashed #6fa6dc;
    border-radius: 18px 12px 20px 14px;
}

/* Запомни — двойной контур маркером. */
.lecture-sheet-content .sketch-layout .lecture-key {
    border: 4px double #23345b;
    border-radius: 20px 14px 22px 15px;
    box-shadow: 4px 4px 0 rgba(239, 199, 90, .9);
}

/* Чек-лист — «нарисованные» квадратики с галочкой. */
.lecture-sheet-content .sketch-layout .lecture-checklist {
    border: 2px dashed #8cc58a;
    border-radius: 16px 22px 14px 20px;
}

.lecture-sheet-content .sketch-layout .lecture-checklist li::before {
    border: 2px solid #3f8f4d;
    border-radius: 4px 6px 3px 5px;
    background: transparent;
    color: #3f8f4d;
    transform: rotate(-4deg);
}

.lecture-sheet-content .sketch-layout .lecture-mark {
    background: linear-gradient(
        100deg,
        transparent 2%,
        rgba(255, 210, 60, .8) 4%,
        rgba(255, 220, 90, .65) 94%,
        transparent 97%
    );
    border-radius: 3px 8px 4px 9px;
}

/* =========================================================
   КАРТОЧКИ И БЛОКИ — плитка 12 колонок
   ========================================================= */

.lecture-sheet-content .cards-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.lecture-sheet-content .cards-layout > * {
    grid-column: 1 / -1;
}

.lecture-sheet-content .cards-layout > .lecture-hero,
.lecture-sheet-content .cards-layout > .lecture-span-2 {
    grid-column: span 8;
}

.lecture-sheet-content .cards-layout > .lecture-compact,
.lecture-sheet-content .cards-layout > .lecture-sticker {
    grid-column: span 4;
}

.lecture-sheet-content .cards-layout > .lecture-tall {
    grid-row: span 2;
}

.lecture-sheet-content .cards-layout > .lecture-span-full {
    grid-column: 1 / -1;
}

/* Титул — чистая шапка с плотной нижней линией. */
.lecture-sheet-content .cards-layout .lecture-title-card {
    border: 0;
    border-bottom: 5px solid #7eaee0;
    border-radius: 18px 18px 6px 6px;
}

/* Цветная «шапка» у каждой карточки. */
.lecture-sheet-content .cards-layout :is(
    .lecture-card, .lecture-example, .lecture-checklist
) {
    border-top-width: 6px;
}

/* Главное — крупнее остальных. */
.lecture-sheet-content .cards-layout .lecture-hero {
    padding: 26px 30px;
    border: 2px solid #7eaee0;
    border-top-width: 8px;
    border-radius: 22px;
    box-shadow: 0 14px 30px rgba(46, 68, 109, .12);
}

.lecture-sheet-content .cards-layout .lecture-hero h3 {
    font-size: 28px;
}

/* Пример — заголовок-ярлык. */
.lecture-sheet-content .cards-layout .lecture-example > :is(strong, h3):first-child {
    display: inline-block;
    margin: 0 0 8px;
    padding: 3px 11px;
    border-radius: 999px;
    background: #e1eefb;
    color: #2f6fae;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Заметка — более лёгкая карточка. */
.lecture-sheet-content .cards-layout .lecture-note {
    background: #fcfdff;
    border: 1.5px dashed #c3cfdf;
    border-radius: 16px;
    color: #3d4f72;
}

/* Чек-лист — круглые маркеры. */
.lecture-sheet-content .cards-layout .lecture-checklist li::before {
    border-radius: 50%;
}

/* =========================================================
   ВИЗУАЛЬНАЯ ИСТОРИЯ — маршрут
   ========================================================= */

/* Титул — «табличка старта» маршрута. */
.lecture-sheet-content .story-layout .lecture-title-card {
    position: relative;
    padding-left: 64px;
    border: 2px solid #8dbbe8;
    border-radius: 999px 22px 22px 999px;
    box-shadow: none;
}

.lecture-sheet-content .story-layout .lecture-title-card::before {
    content: "\25B6";
    position: absolute;
    left: 18px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #3f7fc4;
    color: #fff;
    font-size: 13px;
    transform: translateY(-50%);
}

/* Итоговый «Запомни» — пункт назначения маршрута. */
.lecture-sheet-content .story-layout > .lecture-key {
    position: relative;
    margin-top: 14px;
    border: 2.5px solid #3f9a4f;
    border-radius: 20px;
    background: #f0faec;
    box-shadow: 5px 5px 0 rgba(63, 154, 79, .35);
}

.lecture-sheet-content .story-layout > .lecture-key::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -34px;
    height: 32px;
    border-left: 3px dashed #9db8dc;
    transform: translateX(-50%);
}

.lecture-sheet-content .story-layout .lecture-timeline-item h3,
.lecture-sheet-content .story-layout .lecture-chain-item h3 {
    color: #244d88;
}

/* =========================================================
   theme-* — повторно в конце, чтобы цветовые темы по-прежнему
   перекрывали фон/цвет рамки новых ролей и компонентов.
   ========================================================= */

.lecture-sheet-content .theme-yellow,
.lecture-sheet-content .lecture-design-page .theme-yellow { background: #fff4bd; border-color: #e6c958; }
.lecture-sheet-content .theme-blue,
.lecture-sheet-content .lecture-design-page .theme-blue { background: #eaf5ff; border-color: #8dbbe8; }
.lecture-sheet-content .theme-pink,
.lecture-sheet-content .lecture-design-page .theme-pink { background: #ffeaf1; border-color: #e5a4ba; }
.lecture-sheet-content .theme-green,
.lecture-sheet-content .lecture-design-page .theme-green { background: #eaf7e6; border-color: #9bc78f; }
.lecture-sheet-content .theme-lavender,
.lecture-sheet-content .lecture-design-page .theme-lavender { background: #f0ebff; border-color: #b6a4df; }
.lecture-sheet-content .theme-peach,
.lecture-sheet-content .lecture-design-page .theme-peach { background: #fff0e2; border-color: #e5b78f; }
.lecture-sheet-content .theme-neutral,
.lecture-sheet-content .lecture-design-page .theme-neutral { background: #f7f9fc; border-color: #cfd8e6; }

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

@media (max-width: 900px) {
    .lecture-sheet-content .lecture-chain {
        gap: 32px;
    }

    .lecture-sheet-content .lecture-chain-item + .lecture-chain-item::before {
        left: -28px;
    }

    .lecture-sheet-content .lecture-timeline {
        column-gap: 48px;
    }

    .lecture-sheet-content .lecture-timeline-item:nth-child(odd)::before {
        right: -40px;
    }

    .lecture-sheet-content .lecture-timeline-item:nth-child(even)::before {
        left: -40px;
    }

    .lecture-sheet-content .lecture-hero {
        padding: 20px 22px;
    }
}

@media (max-width: 760px) {
    .simple-page .lecture-sheet-content .lecture-title-card h2 {
        font-size: 25px !important;
    }

    /* Все композиции — в одну колонку. */
    .lecture-sheet-content .sketch-layout > *,
    .lecture-sheet-content .cards-layout > * {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    .lecture-sheet-content .sketch-layout .lecture-sticker,
    .lecture-sheet-content .sketch-layout .lecture-sticker:nth-of-type(even) {
        margin-inline: 6px;
        transform: rotate(-.6deg);
    }

    .lecture-sheet-content .lecture-hero h3,
    .lecture-sheet-content .cards-layout .lecture-hero h3 {
        font-size: 22px;
    }

    .lecture-sheet-content .lecture-compare {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .lecture-sheet-content .lecture-compare::before {
        display: none;
    }

    .lecture-sheet-content .lecture-chain {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        gap: 34px;
    }

    .lecture-sheet-content .lecture-chain-item + .lecture-chain-item::before {
        content: "\2193";
        left: 50%;
        top: -31px;
        transform: translateX(-50%);
    }

    .lecture-sheet-content .lecture-timeline {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 46px;
    }

    .lecture-sheet-content .lecture-timeline::before {
        left: 16px;
    }

    .lecture-sheet-content .lecture-timeline-item:nth-child(n) {
        grid-column: 1;
        grid-row: auto;
    }

    .lecture-sheet-content .lecture-timeline-item:nth-child(n)::before {
        left: -46px;
        right: auto;
    }

    .lecture-sheet-content .story-layout .lecture-title-card {
        border-radius: 22px;
    }
}

@media print {
    .lecture-sheet-content :is(
        .lecture-sticker, .lecture-callout, .lecture-quote, .lecture-formula,
        .lecture-compare, .lecture-chain-item, .lecture-timeline-item
    ) {
        break-inside: avoid;
        box-shadow: none;
    }
}