/*
  Стили текстов из Joomla: user.css шаблона Cassiopeia со старого сайта
  (/media/templates/site/cassiopeia/css/user.css, снят 17.10.2026). Классы в текстах
  (exercise-wrapper, gdz-card, gdz-tab, self-check, solutions-grid, taskCont…) держатся на нём.
  Переносится как есть; правки — отдельным шагом после запуска.
*/
@supports (display: grid) {
  .site-grid {
    grid-gap: 0 0.5em !important;
  }
}

:root { 
       --cassiopeia-color-primary: #ffffff;
    --cassiopeia-color-hover: #ffffff;
    --template-text-light: #000000;
}
.footer {
    color: #000000;
   }


/* Білий фон футера */
.container-footer {
    --footer-bg: #ffffff !important;
    background-color: #ffffff !important;
}

/* Білий фон хедера (замість синього) */
.container-header {
    --header-bg: #ffffff !important;
    background-color: #ffffff !important;
    color: #000; /* текст чорний на білому */
}

/* Якщо є градієнт/тінь — прибрати */
.container-header,
.container-footer {
    background-image: none !important;
    box-shadow: none !important;
}

.custom7ad {
    /* 1. Резервируем место для предотвращения CLS */
    min-height: 405px;
    background-color: #F0F8FF;
    
    /* 2. Стандартная ширина и выравнивание (БЕЗ flexbox) */
    width: 100%;
    display: block; 
    text-align: center; /* Выравнивает содержимое по центру */
    margin: 0 auto; 
    
    /* 3. Защита от расширения */
    overflow: hidden; 
}

/* 4. Принудительное центрирование самого тега AdSense */
.custom7ad ins.adsbygoogle {
    margin: 0 auto !important; 
}

/* Планшеты */
@media only screen and (max-width: 768px) and (min-width: 415px) {
    .custom7ad {
        min-height: 355.5px;
    }
}

/* Мобильные устройства */
@media only screen and (max-width: 414px) {
    .custom7ad {
        min-height: 220px;
    }
}


/* ============================================================
   23. GDZ 9 КЛАС — ШАБЛОНЫ РОЗВ'ЯЗКІВ
   ============================================================ */

.gdz9-h1 {
    font-size: 22px;
    font-weight: 600;
    color: #1e3a5f;
    margin: 0 0 16px 0;
    line-height: 1.3;
    max-width: 760px;
    text-align: center;
    padding-left: 20px; 
}

.gdz9 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 760px;
    margin: 0 auto;
    color: #1f2937;
    line-height: 1.55;
}
.gdz9 *,
.gdz9 *::before,
.gdz9 *::after { box-sizing: border-box; }

.gdz9-card {
    background: #fff;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0 0 14px 0;

}
.gdz9-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1e3a5f;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px 0;
}
.gdz9-card__head::before {
    content: "";
    width: 4px;
    height: 18px;
    background: #1e3a5f;
    border-radius: 2px;
}
.gdz9-card--task {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.gdz9-card--task .gdz9-card__head { color: #334155; }
.gdz9-card--task .gdz9-card__head::before { background: #64748b; }

.gdz9-task__text { font-size: 16px; color: #334155; margin: 0; }
.gdz9-task__text b { color: #1e3a5f; }
.gdz9-task ol { margin: 6px 0 0 0; padding-left: 22px; }
.gdz9-task ol li { margin: 2px 0; }

.gdz9-solve p { margin: 8px 0; font-size: 16px; }
.gdz9-solve p:first-child { margin-top: 0; }
.gdz9-solve b { color: #1e3a5f; font-weight: 600; }
.gdz9-solve .gdz9-result {
    background: #d1fae5;
    padding: 1px 5px;
    border-radius: 3px;
    color: #065f46;
    font-weight: 600;
}

.gdz9-solve__sub {
    border-top: 1px dashed #cbd5e1;
    margin: 14px 0 10px 0;
    padding-top: 10px;
}
.gdz9-solve__sub:first-child {
    border: 0;
    margin-top: 0;
    padding-top: 0;
}
.gdz9-solve__title {
    font-weight: 600;
    color: #1e3a5f;
    margin: 0 0 6px 0;
    font-size: 15px;
}

.gdz9-step {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 6px;
    align-items: start;
    margin: 6px 0;
}
.gdz9-num {
    color: #1e3a5f;
    font-size: 16px;
    font-weight: 700;
    padding-top: 1px;
}
.gdz9-num::after { content: "."; }
.gdz9-step__body { padding-top: 0; }
.gdz9-step__math {
    font-family: "Cambria Math", Cambria, "Times New Roman", serif;
    font-size: 17px;
}
.gdz9-step__hint {
    color: #64748b;
    font-size: 13px;
    font-style: italic;
    margin-top: 2px;
}
.gdz9-mark {
    background: #fef3c7;
    padding: 0 3px;
    border-radius: 3px;
}

.gdz9-fig {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 2px;
    margin: 8px 0;
    text-align: center;
}
.gdz9-fig svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.gdz9-fig__caption {
    color: #64748b;
    font-size: 12px;
    font-style: italic;
    margin-top: 4px;
}

.gdz9-grid2 {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 16px;
    align-items: start;
    margin: 8px 0;
}
.gdz9-props { font-size: 14px; }
.gdz9-props p { margin: 4px 0; line-height: 1.5; }
.gdz9-props b { color: #1e3a5f; font-weight: 600; }

.gdz9-answer {
    background: #ecfdf5;
    border-left: 4px solid #10b981;
    padding: 10px 14px;
    margin: 10px 0 0 0;
    border-radius: 0 8px 8px 0;
}
.gdz9-answer__label {
    color: #065f46;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0 0 2px 0;
}
.gdz9-answer__value {
    color: #065f46;
    font-size: 17px;
}

.gdz9-tabs {
    background: #fff;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 14px 0;
}
.gdz9-tabs__nav {
    display: flex;
    background: #f1f5f9;
    border-bottom: 1px solid #dbe2ea;
}
.gdz9-tabs__btn {
    flex: 1;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    transition: .15s;
    font-family: inherit;
}
.gdz9-tabs__btn:hover {
    color: #1e3a5f;
    background: #e2e8f0;
}
.gdz9-tabs__btn.is-active {
    color: #4f46e5;
    background: #fff;
    border-bottom: 2px solid #4f46e5;
    margin-bottom: -1px;
}
.gdz9-tabs__panel {
    padding: 16px 18px;
    display: none;
}
.gdz9-tabs__panel.is-active { display: block; }

.gdz9-rule {
    background: #eef2ff;
    border-left: 3px solid #4f46e5;
    padding: 10px 14px;
    margin: 10px 0;
    border-radius: 0 8px 8px 0;
}
.gdz9-rule:first-child { margin-top: 0; }
.gdz9-rule__title {
    color: #4338ca;
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 6px 0;
}
.gdz9-rule__body {
    color: #1e1b4b;
    font-size: 14px;
    line-height: 1.55;
}
.gdz9-rule__body b { color: #4338ca; }
.gdz9-rule__body p { margin: 4px 0; }
.gdz9-formula {
    font-family: "Cambria Math", Cambria, "Times New Roman", serif;
    font-size: 16px;
    padding: 4px 0;
}

.gdz9-discuss p {
    margin: 8px 0;
    font-size: 14px;
    color: #475569;
    line-height: 1.55;
}
.gdz9-discuss p:first-child { margin-top: 0; }
.gdz9-discuss b { color: #1e3a5f; }

@media (max-width: 600px) {
    .gdz9-grid2 {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}
@media (max-width: 480px) {
    .gdz9-card {
        padding: 5px;
        border-radius: 10px;
    }
    .gdz9-tabs__btn {
        padding: 10px 8px;
        font-size: 13px;
    }
    .gdz9-tabs__panel { padding: 14px; }
    .gdz9-solve p { font-size: 15px; }
    .gdz9-step__math { font-size: 16px; }
}

/* GDZ 9 — украинский язык (дополнения) */
.gdz9-page-topic {
    font-size: 14px;
    color: #475569;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 0 0 16px 0;
    line-height: 1.45;
}
.gdz9-page-topic strong {
    color: #1e3a5f;
    font-weight: 600;
}
.gdz9-page-topic__exercises {
    color: #94a3b8;
    font-size: 13px;
    margin-left: 6px;
}

.gdz9-rules-used {
    margin: 28px 0 0 0;
    padding: 16px 18px;
    background: #f1f5f9;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
}
.gdz9-rules-used h3 {
    font-size: 13px;
    color: #1e3a5f;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    background: none;
    padding: 0;
    border: 0;
}
.gdz9-rules-used ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.gdz9-rules-used li {
    margin: 6px 0;
    font-size: 14px;
    line-height: 1.5;
}
.gdz9-rules-used a {
    color: #4f46e5 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.gdz9-rules-used a:hover {
    text-decoration: underline;
}
.gdz9-rules-used__hint {
    color: #64748b;
    font-size: 13px;
    font-style: italic;
}

.gdz9-scheme {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 10px 0;
    text-align: center;
    font-family: "Cambria Math", Cambria, "Times New Roman", serif;
    font-size: 17px;
    letter-spacing: .03em;
    color: #1e3a5f;
}
.gdz9-scheme__caption {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
    font-style: italic;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0;
}
.gdz9-scheme-svg {
    background: #fffbeb;
    border: 1px dashed #fbbf24;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 10px 0;
    text-align: center;
    color: #92400e;
    font-size: 13px;
    font-style: italic;
}
.gdz9-scheme-svg svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.gdz9-quote {
    display: inline;
    font-style: italic;
    color: #475569;
}
.gdz9-quote__author {
    font-style: italic;
    color: #64748b;
    font-size: 14px;
    margin-left: 4px;
}

.gdz9-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 10px 0;
}
.gdz9-cols__col {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
}
.gdz9-cols__title {
    font-weight: 600;
    color: #1e3a5f;
    font-size: 14px;
    margin: 0 0 8px 0;
}
.gdz9-cols__col p,
.gdz9-cols__col ol,
.gdz9-cols__col ul { margin: 4px 0; }

.gdz9-test {
    margin: 8px 0;
    padding-left: 4px;
}
.gdz9-test__q {
    font-weight: 500;
    color: #1e3a5f;
    margin: 8px 0 4px 0;
}
.gdz9-test__opts {
    margin: 0;
    padding: 0;
    list-style: none;
}
.gdz9-test__opts li {
    padding: 2px 0 2px 24px;
    position: relative;
    color: #475569;
}
.gdz9-test__opts li::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    font-weight: 600;
    color: #94a3b8;
}
.gdz9-test__opts li.is-correct {
    color: #065f46;
    font-weight: 500;
}
.gdz9-test__opts li.is-correct::before {
    color: #10b981;
}

@media (max-width: 600px) {
    .gdz9-cols {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}
@media (max-width: 480px) {
    .gdz9-rules-used { padding: 12px 14px; }
    .gdz9-rules-used__hint { display: block; margin-top: 2px; }
    .gdz9-scheme { font-size: 16px; padding: 8px 10px; }
}

/* GDZ 9 — "У зошит" / "Усно" / Заметка */
.gdz9-card--write {
    background: #f0fdf4;
    border-color: #86efac;
    border-left: 4px solid #10b981;
}
.gdz9-card--write .gdz9-card__head { color: #065f46; }
.gdz9-card--write .gdz9-card__head::before { background: #10b981; }

.gdz9-card--oral {
    background: #f8fafc;
    border-color: #cbd5e1;
    border-left: 4px solid #64748b;
}
.gdz9-card--oral .gdz9-card__head { color: #475569; }
.gdz9-card--oral .gdz9-card__head::before { background: #64748b; }

.gdz9-note {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    padding: 8px 12px;
    margin: 10px 0;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    color: #78350f;
    line-height: 1.5;
}
.gdz9-note::before {
    content: "💡 ";
}
/* ==============================================
   ПАТЧ для gdz9-styles.css — додати в кінець файлу.
   Призначення: формули, що не помістилися в один рядок (особливо
   на мобільному ≤ 380 px), отримують горизонтальний скрол замість
   обрізання за межами картки.
   ============================================== */

/* Параграфи всередині розв'язання та правил можуть містити довгі inline-формули.
   MathJax не вміє переносити inline-формули (тільки display: $$...$$).
   У більшості випадків автор шаблону розбиває довгу формулу на 2-3 параграфи
   після знаку =. Цей CSS — страховка на випадок, коли розбиття не вдалося:
   формула не вилазить за картку, а отримує внутрішній скрол. */
.gdz9-solve p,
.gdz9-rule__body p,
.gdz9-discuss p {
  overflow-x: auto;
  overflow-y: hidden;
  /* MathJax-формула іноді може створити порожнє місце знизу через декілька рядків;
     явно обмежуємо нижній простір */
  padding-bottom: 1px;
}

/* Тонкий стиль скроллбара (Webkit, бо більшість мобільних — Chrome/Safari) */
.gdz9-solve p::-webkit-scrollbar,
.gdz9-rule__body p::-webkit-scrollbar,
.gdz9-discuss p::-webkit-scrollbar {
  height: 4px;
}
.gdz9-solve p::-webkit-scrollbar-thumb,
.gdz9-rule__body p::-webkit-scrollbar-thumb,
.gdz9-discuss p::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}
.gdz9-solve p::-webkit-scrollbar-track,
.gdz9-rule__body p::-webkit-scrollbar-track,
.gdz9-discuss p::-webkit-scrollbar-track {
  background: transparent;
}
/* ============================================================
   GDZ 9 — ГЕОМЕТРІЯ: блок "Дано / Знайти" (як у зошиті)
   ============================================================ */

.gdz9-condition-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 0 0 14px 0;
    overflow: hidden;
}
.gdz9-condition-block__col {
    padding: 12px 16px;
}
.gdz9-condition-block__col + .gdz9-condition-block__col {
    border-left: 1px solid #cbd5e1;
}
.gdz9-condition-block__label {
    font-weight: 600;
    color: #1e3a5f;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 8px 0;
}
.gdz9-condition-block__body {
    font-family: "Cambria Math", Cambria, "Times New Roman", serif;
    font-size: 16px;
    color: #334155;
    line-height: 1.7;
}
.gdz9-condition-block__body p {
    margin: 2px 0;
}

@media (max-width: 480px) {
    .gdz9-condition-block__col { padding: 5px 5px; }
    .gdz9-condition-block__body { font-size: 15px; }
}

.gdz9-fig > div,
.gdz9-fig canvas,
.gdz9-fig .applet_scaler,
.gdz9-fig .GeoGebraFrame {
    max-width: 100% !important;
}
.gdz9-fig {
    overflow: hidden;
}
/* Выравниваем размер формул в условии со списками — было крупнее из-за --body-font-size */
.gdz9-card--task,
.gdz9-card--task ol,
.gdz9-card--task ul,
.gdz9-card--task li,
.gdz9-card--task .gdz9-task__text {
    font-size: 16px;
    line-height: 1.55;
}
.gdz9-card--task mjx-container {
    font-size: 100% !important;
}
@media (max-width: 480px) {
    .gdz9-card--task,
    .gdz9-card--task ol,
    .gdz9-card--task ul,
    .gdz9-card--task li,
    .gdz9-card--task .gdz9-task__text {
        font-size: 15px;
    }
}





.taskCont, .taskCont a {
    display: inline-block;
}
.taskCont a {
	vertical-align:middle;
	color:#2954f0;
	min-width:2.2em;
min-height:0.5em;
font-size:100%;
	line-height:2em;
	border-radius:1.0em;
	margin:.21em;
	text-decoration:none

}
.taskCont a:hover {
     color:#ffffff;
}
.taskCont a,ul.suggested>li>a{
	border:3px solid #2954f0;
	text-align:center
}
.taskCont a:hover{
	background:#2954f0 !important;
    color:#fff;
}




.taskCont2, .taskCont2 a {
    display: block;
    margin-right: 10px;
}
.taskCont2 a {
width: 100%;
	vertical-align:middle;
	color:#ffffff;
	min-width:2em;
min-height:1.1em;
font-size:100%;
	line-height:2em;
	border-radius:.5em;
	margin:.21em;

background:#2954f0 !important;
}
.taskCont2 a:hover {
     color:#2954f0;
}
.taskCont2 a,ul.suggested>li>a{
	border:3px solid #2954f0;
	text-align:center
}
.taskCont2 a:hover{
	background:#ffffff !important;
    color:#2954f0;
}

.taskContbook, .taskContbook a {
    display: inline-block;
}
.taskContbook a {
	vertical-align:middle;
	color:#2954f0;
	min-width:2em;
min-height:1.1em;
font-size:150%;
	line-height:1.8em;
	border-radius:1.5em;
	margin:.21em;
	text-decoration:none

}
.taskContbook a:hover {
     color:#ffffff;
}
.taskContbook a,ul.suggested>li>a{
	border:3px solid #2954f0;
	text-align:center
}
.taskContbook a:hover{
	background:#2954f0 !important;
    color:#fff;
}


.back{
    padding-left:35px;float:left;
}
.next{
    padding-right:35px;float:right;
}


.active, .active a {
    display: inline-block;
}
.active a {
	vertical-align:middle;
	color:#FFf;
	min-width:2em;
min-height:1.1em;
font-size:100%;
	line-height:2em;
	border-radius:.5em;
	margin:.21em;
	font-weight:bold;
	text-decoration:underline;
background:#fe0000 !important
}
.active a:hover {
     color:#FFf;
}
.active a,ul.suggested>li>a{
	border:3px solid #fe0000;
	text-align:center
}
.active a:hover{
	background:#fff !important;
    color:#fe0000;
}




.disable, .disable a {
    display: inline-block;
}
.disable a {
	vertical-align:middle;
	color:#fff;
	min-width:2em;
min-height:1.1em;
font-size:100%;
	line-height:2em;
	border-radius:.5em;
	margin:.21em;
	text-decoration:none;
    background:#008000 !important
}
.disable a:hover {
     color:#ffffff;
}
.disable a,ul.suggested>li>a{
	border:3px solid #008000;
	text-align:center
}
.disable a:hover{
	background:#fff !important;
    color:#008000;
}

.ukr, .ukr a {
    display: inline-block;
}
.ukr a {
	vertical-align:middle;
	color:#FE2EC8;
	min-width:2em;
min-height:1.1em;
font-size:100%;
	
	border-radius:.5em;
	margin:.21em;
	text-decoration:none

}
.ukr a:hover {
     color:#ffffff;
}
.ukr a,ul.suggested>li>a{
	border:3px solid #FE2EC8;
	text-align:center
}
.ukr a:hover{
	background:#FE2EC8 !important;
    color:#fff;	
}

.mat, .mat a {
    display: inline-block;
}
.mat a {
	vertical-align:middle;
	color:#0B6121;
	min-width:2em;
min-height:1.1em;
font-size:100%;
	
	border-radius:.5em;
	margin:.21em;
	text-decoration:none

}
.mat a:hover {
     color:#ffffff;
}
.mat a,ul.suggested>li>a{
	border:3px solid #0B6121;
	text-align:center
}
.mat a:hover{
	background:#0B6121 !important;
    color:#fff;
}

.rus, .rus a {
    display: inline-block;
}
.rus a {
	vertical-align:middle;
	color:#0000FF;
	min-width:2em;
min-height:1.1em;
font-size:100%;
	
	border-radius:.5em;
	margin:.21em;
	text-decoration:none

}
.rus a:hover {
     color:#ffffff;
}
.rus a,ul.suggested>li>a{
	border:3px solid #0000FF;
	text-align:center
}
.rus a:hover{
	background:#0000FF !important;
    color:#fff;
}

.angl, .angl a {
    display: inline-block;
}
.angl a {
	vertical-align:middle;
	color:#FF0000;
	min-width:2em;
min-height:1.1em;
font-size:100%;
	
	border-radius:.5em;
	margin:.21em;
	text-decoration:none

}
.angl a:hover {
     color:#ffffff;
}
.angl a,ul.suggested>li>a{
	border:3px solid #FF0000;
	text-align:center
}
.angl a:hover{
	background:#FF0000 !important;
    color:#fff;
}

.nem, .nem a {
    display: inline-block;
}
.nem a {
	vertical-align:middle;
	color:#2EFE2E;
	min-width:2em;
min-height:1.1em;
font-size:100%;
	
	border-radius:.5em;
	margin:.21em;
	text-decoration:none

}
.nem a:hover {
     color:#ffffff;
}
.nem a,ul.suggested>li>a{
	border:3px solid #2EFE2E;
	text-align:center
}
.nem a:hover{
	background:#2EFE2E !important;
    color:#fff;
}

.pryroda, .pryroda a {
    display: inline-block;
}
.pryroda a {
	vertical-align:middle;
	color:#FFBF00;
	min-width:2em;
min-height:1.1em;
font-size:100%;
	
	border-radius:.5em;
	margin:.21em;
	text-decoration:none

}
.pryroda a:hover {
     color:#ffffff;
}
.pryroda a,ul.suggested>li>a{
	border:3px solid #FFBF00;
	text-align:center
}
.pryroda a:hover{
	background:#FFBF00 !important;
    color:#fff;
}

.ya, .ya a {
    display: inline-block;
}
.ya a {
	vertical-align:middle;
	color:#2EFEF7;
	min-width:2em;
min-height:1.1em;
font-size:100%;
	
	border-radius:.5em;
	margin:.21em;
	text-decoration:none

}
.ya a:hover {
     color:#ffffff;
}
.ya a,ul.suggested>li>a{
	border:3px solid #2EFEF7;
	text-align:center
}
.ya a:hover{
	background:#2EFEF7 !important;
    color:#fff;
}

.taskConti, .taskConti a {
    display: inline-block;
}
.taskConti a {
	vertical-align:middle;
	color:#2954f0;
	min-width:2em;
min-height:1.1em;
font-size:100%;
	line-height:2em;
	border-radius:.5em;
	margin:.21em;
    background:#ffff33 !important;

}
.taskConti a:hover {
     color:#ffff33;
}
.taskConti a,ul.suggested>li>a{
	border:3px solid #2954f0;
	text-align:center
}
.taskConti a:hover{
	background:#2954f0 !important;
    color:#ffff33;
}


.volnistaya {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: black;
   }

.dvoynoe {
  -webkit-text-decoration: double underline;
  text-decoration:  double underline;
  
}

.punktir {
  -webkit-text-decoration: Dashed underline;
  text-decoration:  Dashed underline;
  }
  
  .tochkapunktir {
     background-repeat: repeat-x;
    background-image: url(/images/bar_dotted_line777.svg);
    background-position: 0 1.2em;
    background-size: 2em 1em;
    border-bottom: 2px transparent solid;
  
}
.aspect-ratio-box {
  height: 0;
  padding-top: 56.25%;
  
}

/* new articles module */

.obl-zagal {
    display: flex;
    margin: 0px -10px 0;
    flex-wrap: wrap;
}

.obl-it {
    background: #fdf4c9;
    border-radius: 10px;   
    padding: 10px;
    display: flex;
    color: #0A12D6;
    font-size: 1rem;
}

.obl_tit {
    padding-left: 10px;
    display: flex;
    align-items: center;
}

.obl-aut {
	    padding: 5px;
        width: 100%;
}

.obl-im {
    display: block;
 /*   width: 100%; */
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
}

/* Large:   992px - 1199px */
@media   (max-width:   1199px)   {
 .obl-it {
    background: #fdf4c9;
 }  	
}
/* Medium:  768px - 991px */
 @media  (max-width:  991px)  { 
    
    .obl_tit {
    padding: 10px;
    display: flex;
    align-items: center;
  /*   padding-left: 50px;*/
  
     }
  
}


/* Small:  576px - 767px */
 @media  (max-width:  767px)  {
   
    .obl-it {
      background: #fdf4c9; 
    padding: 10px;
    display: flex;
     font-size: 1rem;
    flex-wrap: wrap;
    justify-content: flex-start;
	flex-wrap: wrap;
      justify-content: center;
}      
   
 .obl-aut {
	flex: none;
        max-width: 100%;
}
  .obl-im {
    display: flex;
    justify-content: center;
}
    .obl_tit {
    padding: 10px;
    display: flex;
    align-items: center;
}

}
/* Extra small:   0px   (320px)   - 575px */
 @media  (max-width:  575px)  {
 .obl-aut {
	flex: none;
    /*     max-width: 100%; */
}	 
  .obl-im {
    display: flex;
    justify-content: center;

}
}

.button5 {
   #display: inline-block;
    background-color: #FFD700;
    color: #000000;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
   font-size: 1.2rem; 
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease;
  margin: 10px;
}

.button5:hover {
    background-color: #0000FF;
    color: white;
    padding-right: 25px; /* Увеличение правого padding */
}
.button5 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button5 span:after {
 
  position: absolute;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button5:hover span {
  padding-right: 25px;
}

.button5:hover span:after {
  opacity: 1;
  right: 20px;
}



.button7, .button7 a {
    display: inline-block;
}
.button7 a {
	vertical-align:middle;
	color:#000000;
	min-width:2em;
min-height:0.5em;
font-size:100%;
	line-height:2em;
	border-radius:5px;
	margin:.21em;
	text-decoration:none;
background:#FFFF00;
  margin: 10px;
  padding: 10px 20px;
}
.button7 a:hover {
     color:#ffffff;
}
.button7 a,ul.suggested>li>a{
	border:3px solid #000000;
	text-align:center
}
.button7 a:hover{
	 background-color: #4169E1;
    color: white;
}
/* Стили для скроллбара и картинки*/
.img-container {
    width: 100%;
    overflow-x: auto; /* Добавляет прокрутку по оси X при необходимости */
    text-align: center;
    position: relative;
}
.img-container img {
    max-width: none; /* Убирает автоматическое подстраивание под ширину контейнера */
    width: auto;     /* Сохраняет оригинальные размеры изображения */
    height: auto;    /* Поддерживает пропорции */
    display: inline-block;
}
/* Стили для скроллбара и картинки*/
:root {
  --body-font-size: 1.2rem; /* или любое другое значение */
}
/* Базові стилі для контейнера вправи */
 .exercise-wrapper {
            font-family: 'Open Sans', sans-serif;
            max-width: 800px;
            margin: 2rem auto;
          /*  padding: 1rem;*/
            border: 1px solid #dee2e6;
            border-radius: 8px;
            background-color: #ffffff;
        }

        /* Заголовки */
        .exercise-wrapper h1 {
            font-size: 1.8rem;
            text-align: center;
        }
        .exercise-wrapper h2 {
            margin-top: 0;
            font-size: 1.2rem;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
          background-color:#dcebf9;
        }

        .exercise-wrapper h3 {
           
          background-color:#f9f5dc;
        }

        /* Блок з інформацією про підручник */
        .exercise-wrapper .textbook-info {
            font-size: 0.9rem;
            color: #555;
            background-color: #f8f9fa;
            padding: 10px 15px;
            border-radius: 6px;
            border: 1px solid #dee2e6;
            margin-bottom: 2rem;
            text-align: center;
            line-height: 1.6;
        }
        .exercise-wrapper .textbook-info a {
            font-weight: 600;
            color: #0056b3;
            text-decoration: none;
        }
        .exercise-wrapper .textbook-info a:hover {
            text-decoration: underline;
        }

        /* Блок з умовою вправи */
        .exercise-wrapper .exercise-condition {
            background-color: #EBF4FF;
            border: 2px solid #4A90E2;
             padding: 0.5rem;
            margin-bottom: 1.5rem;
            border-radius: 6px;
        }
        .exercise-wrapper .exercise-condition h2 {
            color: #0056b3;
        }

        /* Блок з розв'язанням */
        .exercise-wrapper .exercise-solution {
            background-color: #FFFBEA;
            border: 2px solid #FFC107;
             padding: 0.5rem;
            margin-bottom: 1.5rem;
            border-radius: 6px;
        }
        .exercise-wrapper .exercise-solution h2 {
            color: #c79100;
        }
        .exercise-wrapper .exercise-solution mark {
            background-color: #A1E8E4;
            color: inherit;
            padding: 0.1em 0.3em;
            border-radius: 3px;
        }

        /* Блок з правилом */
        .exercise-wrapper .rule-block {
            background-color: #e7f3fe;
            border-left: 4px solid #4A90E2;
            padding: 1rem 1rem 1rem 2rem;
            margin: 1.5rem 0;
            border-radius: 0 8px 8px 0;
            position: relative;
        }
        .exercise-wrapper .rule-block p {
            margin: 0;
        }
        .exercise-wrapper .rule-block::before {
            content: '💡';
            font-size: 1.5rem;
            position: absolute;
            left: -15px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #fff;
            border-radius: 50%;
            padding: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* Рекламний блок */
        .exercise-wrapper .ad-placeholder {
    background-color: #F8F9FA; /* Светлее, чтобы меньше отвлекало */
    border: 1px dashed #ced4da;
    margin: 1.5rem auto; /* auto центрирует сам блок */
    text-align: center;
    border-radius: 6px;
    
    /* ВАЖНО для SEO: */
    min-height: 250px; /* Зарезервируй место! Чтобы контент не прыгал при загрузке рекламы */
    
      
    /* Центрируем рекламу внутри */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.exercise-wrapper .ad-placeholder::before {
    content: 'Реклама'; /* Самый безопасный вариант по правилам Google */
    display: block;      /* Гарантирует, что текст будет на отдельной строке сверху */
    width: 100%;
    font-size: 0.75rem;  /* Чуть меньше, чтобы не спорило с рекламой */
    color: #adb5bd;
    padding: 2px 0;      /* Небольшой отступ */
    background-color: #f1f1f1; /* Легкая подложка под слово Реклама (опционально) */
}

        /* Кнопка "Повернутися до змісту" */
        .exercise-wrapper .back-to-toc-footer {
            text-align: center;
            margin-top: 2.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid #e9ecef;
        }
        .exercise-wrapper .back-to-toc-footer a {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            font-family: 'Open Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 12px 24px;
            border-radius: 30px;
            border: none;
            transition: background-color 0.2s ease;
            background-color: #0056b3;
            color: #ffffff;
        }
        .exercise-wrapper .back-to-toc-footer a:hover {
            background-color: #f5db32;
            color: #000000;
        }
        .exercise-wrapper .back-to-toc-footer a svg {
            fill: currentColor;
        }
.gdz-toc-list {
            list-style: none;
            padding-left: 0;
            margin-top: 20px;
        }
        .gdz-toc-list li {
            margin-bottom: 10px;
            border-left: 3px solid #007bff;
            padding-left: 15px;
            background-color: #FFFBEA;
            border-radius: 0 5px 5px 0;
            transition: all 0.2s ease-in-out;
        }
        .gdz-toc-list li:hover {
            border-left-color: #0056b3;
            transform: translateX(5px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .gdz-toc-list a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            display: block;
            padding: 8px 0;
        }
        .gdz-toc-list a .page-ref {
            color: #e50d0b;
            font-size: 0.9em;
            margin-left: 10px;
        }
  
        .cipher-table {
            border-collapse: collapse;
            width: 250px;
            margin: 1em 0;
        }
        .cipher-table td, .cipher-table th {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }
        .cipher-table th {
            background-color: #f2f2f2;
        }

/* --- КАРТОЧКИ И ЯРЛЫКИ (Как в математике) --- */
.gdz-card {
    position: relative;
    padding: 2.5rem 1.5rem 1.5rem; /* Отступ сверху для ярлыка */
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    overflow: hidden; /* Важно, чтобы ярлык не вылезал за скругления */
}

/* Цвета рамок и фонов карточек */
.card-condition { border: 1px solid #e0e4e8; background-color: #ffffff; }
.card-notebook { border: 1px solid #b7e4c7; background-color: #f2fcf5; }
.card-explanation { border: 1px solid #c8d8f8; background-color: #f4f6fd; }

/* Сам ярлык (плашка в углу) */
.gdz-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom-left-radius: 12px; /* Закругление левого нижнего угла */
}

/* Цвета ярлыков */
.badge-condition { background-color: #f0f2f5; color: #6b7280; }
.badge-notebook { background-color: #d1f0dd; color: #1e7e34; }
.badge-explanation { background-color: #e0e7ff80; color: #4338ca; }

/* --- ГОРИЗОНТАЛЬНЫЕ ВКЛАДКИ (ТАБЫ) --- */
.gdz-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 2px solid #e0e4e8;
    padding-bottom: 0;
}

.gdz-tab {
    background: none;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 600;
    color: #6b7280;
    font-size: 0.9rem;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    margin-bottom: -2px; /* Наезд на нижнюю границу */
}

.gdz-tab:hover { color: #333; }

.gdz-tab.active {
    color: #e50d0b; /* Красный цвет активной вкладки */
    border-bottom: 3px solid #e50d0b;
}

.gdz-tabcontent {
    display: none; /* Скрыты по умолчанию */
    animation: fadeEffect 0.4s;
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}


/* --- КНОПКА-КАПЛЯ (СКОПІЮВАТИ) --- */
.btn-copy-drop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: #e50d0b; /* Красный */
    color: #ffffff;
    border: none;
    border-radius: 25px; /* Форма капли/овала */
    padding: 6px 24px;   /* Широкая, но не высокая */
    height: 36px;        /* Фиксируем высоту! */
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.2s;
}

.btn-copy-drop:hover {
    background-color: #cc0000;
}

/* Жестко фиксируем размер иконки, чтобы она не стала гигантской */
.btn-copy-drop svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor;
    flex-shrink: 0;
}
/* end Базові стилі для контейнера вправи */

/* ПОЗНАЧЕННЯ (ПРЕФІКС, КОРІНЬ, СУФІКС, ЗАКІНЧЕННЯ) */
    .ending { border: 1px solid #3498db; padding: 0 2px; margin-left: 1px; font-weight: bold; }
    .root { border-top: 2px solid #FF0000; border-radius: 50% 50% 0 0; padding: 0 2px; }
    .stem { border-bottom: 2px solid #3498db; padding-bottom: 1px; }

    .prefix { 
        border-top: 1.5px solid #008000; /* Колір можна змінити на свій */
        border-right: 1.5px solid #008000; 
        padding: 0 2px; 
        margin-right: 1px; 
        font-weight: bold; 
        display: inline-block; /* Щоб межі відображалися коректно */
        line-height: 1;
    }

            .suf-mark {
                position: relative;
                display: inline-block;
                padding: 0 2px;
            }
            .suf-mark::before {
                content: "";
                position: absolute;
                top: -8px; /* Відступ над текстом */
                left: 0;
                width: 100%;
                height: 10px; /* Висота дашка */
                background: #0000FF; /* Колір позначення */
                clip-path: polygon(0% 100%, 8% 100%, 50% 15%, 92% 100%, 100% 100%, 50% 0%);
            }
/* end ПОЗНАЧЕННЯ (ПРЕФІКС, КОРІНЬ, СУФІКС, ЗАКІНЧЕННЯ)  --- */


/* Стилі для підкреслення членів речення */
    .gdz-subject { text-decoration: underline; text-underline-offset: 4px; } /* Підмет — одна лінія */
    .gdz-predicate { text-decoration: underline double; text-underline-offset: 4px; } /* Присудок — дві лінії */
    .gdz-secondary { border-bottom: 1px dashed #000; display: inline-block; line-height: 1; } /* Пунктир */
    .gdz-wavy { text-decoration: underline wavy; text-underline-offset: 4px; } /* Хвиляста */

.prolonged { 
    color: #d9534f; /* Червоний колір, можеш замінити на свій */
    font-weight: bold;
  }
/*  end Стилі для підкреслення членів речення */

/* Стилі для обведення сполучників */
    .gdz-subject { text-decoration: underline; text-underline-offset: 4px; }
    .gdz-predicate { text-decoration: underline double; text-underline-offset: 4px; }
    .gdz-secondary { border-bottom: 1px dashed #000; display: inline-block; line-height: 1; }
    .gdz-conjunction { border: 1px solid #000; border-radius: 50%; padding: 0 4px; display: inline-block; }
/* end Стилі для обведення сполучників */

/* Стилі для оформлення кнопок на головній сторінці */
/* Основной контейнер */
.toc-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Заголовок H1 */
.toc-wrapper h1 {
    text-align: center;
    color: #1a1a1a;
    margin-bottom: 30px;
    font-weight: 700;
}

/* Блок информации о книге */
.book-info {
    background: #fcfcfc;
    padding: 25px;
    border-radius: 8px;
    border-left: 5px solid #0057b8; /* Украинский синий */
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap; /* Чтобы на мобильных переносилось */
    align-items: flex-start;
    gap: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* Обложка (figure) */
.book-cover {
    margin: 0;
    width: 150px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.book-cover img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Детали книги */
.book-details {
    flex: 1;
}

.book-details h2 {
    margin: 0 0 15px 0;
    font-size: 1.4em;
    color: #0057b8;
}

.book-details p {
    margin-bottom: 8px;
}

/* SEO текст внутри блока */
.seo-desc {
    margin-top: 15px;
    font-size: 0.95em;
    color: #555;
    background: #fff;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid #eee;
}

/* Рекламный блок */
.ad-block {
    margin: 30px 0;
    text-align: center;
    min-height: 100px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px dashed #ddd;
}

/* СЕТКА КНОПОК */
.exercises-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 12px;
}

/* Стиль кнопок (Покой) */
.exercise-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    
    /* Черный цвет (или темно-серый) для контура и текста по умолчанию */
    border: 1px solid #333; 
    color: #333;
    
    border-radius: 4px;
    padding: 10px 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Стиль кнопок (Наведение - Ховер) */
/* Синий фон, Желтый текст */
.exercise-btn:hover {
    background-color: #0057b8; /* UA Blue */
    color: #ffd700;            /* UA Yellow */
    border-color: #0057b8;
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0, 87, 184, 0.3);
}

/* Стиль кнопок (Клик/Активная) */
.exercise-btn:active {
    background-color: #004494; /* Темнее синий */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Адаптив для мобильных */
@media (max-width: 600px) {
    .book-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .book-details h2 {
        font-size: 1.2em;
    }
}
/* end Стилі для оформлення кнопок на головній сторінці */
/* ==================== Кнопки аякс-навигации ==================== */

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

html body .solutions-grid a.btn.btn-primary.ajax-link {
    /* Прямые свойства, не через переменные шаблона */
    background-color: #ffffff;
    color: #1e3a8a;
    border: 1.5px solid #c7d2fe;

    /* Плюс перебиваем переменные на случай, если шаблон их читает где-то ещё */
    --btn-bg: #ffffff;
    --btn-color: #1e3a8a;
    --btn-border-color: #c7d2fe;
    --cassiopeia-color-primary: #ffffff;

    width: 100%;
    aspect-ratio: 1 / 1;
    min-width: 0;
    padding: 0;
    margin: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;

    box-shadow: 0 1px 2px rgba(30, 58, 138, 0.06);
    transition: transform .15s ease,
                box-shadow .15s ease,
                background-color .15s ease,
                color .15s ease,
                border-color .15s ease;
}

/* Ховер — синий фон, белая цифра */
html body .solutions-grid a.btn.btn-primary.ajax-link:hover {
    background-color: #1e3a8a;
    color: #ffffff;
    border-color: #1e3a8a;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(30, 58, 138, 0.25);
}

/* Фокус с клавиатуры */
html body .solutions-grid a.btn.btn-primary.ajax-link:focus-visible {
    outline: 3px solid rgba(30, 58, 138, 0.35);
    outline-offset: 2px;
}

/* Просмотренная — мягко-зелёная */
html body .solutions-grid a.btn.btn-primary.ajax-link.viewed {
    background-color: #ecfdf5;
    color: #15803d;
    border-color: #86efac;
    box-shadow: none;
}
html body .solutions-grid a.btn.btn-primary.ajax-link.viewed:hover {
    background-color: #15803d;
    color: #ffffff;
    border-color: #15803d;
}

/* Текущая открытая — янтарная */
html body .solutions-grid a.btn.btn-primary.ajax-link.current,
html body .solutions-grid a.btn.btn-primary.ajax-link[aria-current="page"] {
    background-color: #fef3c7;
    color: #92400e;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
    transform: none;
}

/* Адаптив */
@media (max-width: 576px) {
    .solutions-grid {
        grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
        gap: 7px;
    }
    html body .solutions-grid a.btn.btn-primary.ajax-link {
        font-size: 0.9rem;
        border-radius: 8px;
        font-weight: 700;
    }
}

.alert-info-ajaks {
  --alert-color: var(--info-text-emphasis);
  --alert-bg: #fdfdf3 !important;
  --alert-border-color: var(--info-border-subtle);
  --alert-link-color: var(--info-text-emphasis);
  --alert-padding-x: 0.1rem !important;
}

/* end ==================== Кнопки аякс-навигации ==================== */
/* ====================================================================
   ==================== ГДЗ МАТЕМАТИКА — ДОПОВНЕННЯ ДО user.css =======
   ====================================================================



/* ---- Загальна типографіка ---- */
.exercise-wrapper .gdz-card p {
    margin: 0.1rem 0;
}


/* ====================================================================
   КАРТКА У ЗОШИТ
   ==================================================================== */

/* Короткий запис: прості рядки з ярликами */
.brief-line {
    margin: 0.25rem 0;
    font-size: 1rem;
    line-height: 1.5;
}

.brief-line__label {
    font-weight: 700;
    color: #2c5e2e;
}

.brief-question {
    font-style: italic;
    margin: 0.5rem 0 0.75rem;
    color: #2c5e2e;
    line-height: 1.4;
}


/* Крок розв'язання */
.math-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 0;
    padding: 6px 10px;
    background-color: rgba(255, 255, 255, 0.7);
    border-left: 3px solid #b7e4c7;
    border-radius: 0 4px 4px 0;
    font-size: 1.05rem;
    line-height: 1.45;
}

.math-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    background-color: #198754;
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.math-body { flex: 1; }

.math-action {
    background-color: #fff3cd;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 600;
    font-family: 'Cambria Math', 'Times New Roman', serif;
    font-size: 1.1em;
    color: #5a4500;
}

.math-result {
    background-color: #d4edda;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
    color: #155724;
    font-family: 'Cambria Math', 'Times New Roman', serif;
    font-size: 1.1em;
}

.math-hint {
    color: #555;
    font-style: italic;
    font-size: 0.9rem;
    margin-left: 4px;
}


/* Рядок "Відповідь" */
.answer-line {
    margin-top: 0.75rem !important;
    padding: 10px 14px;
    background-color: #d4edda;
    border-left: 4px solid #28a745;
    border-radius: 0 6px 6px 0;
    font-size: 1.05rem;
    color: #155724;
}

.answer-line strong { color: #0f5132; }


/* ====================================================================
   КАРТКА РОЗБІР — згортувана через <details>
   ==================================================================== */

details.gdz-card {
    padding: 0;
    overflow: hidden;
}

details.gdz-card > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.6rem 0.75rem;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    -webkit-appearance: none;
}

details.gdz-card > summary::-webkit-details-marker {
    display: none;
}

details.gdz-card > summary::before {
    content: '▶';
    font-size: 0.7rem;
    color: #888;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

details.gdz-card[open] > summary::before {
    transform: rotate(90deg);
}

details.gdz-card > summary > .gdz-badge {
    position: absolute;
    top: 0;
    right: 0;
}

.collapsible-title {
    flex: 1;
    font-weight: 700;
    font-size: 0.95rem;
    color: #333;
    padding-right: 75px;
}

.collapsible-body {
    padding: 0 0.75rem 0.75rem;
    animation: gdzFadeIn 0.25s ease;
}

@keyframes gdzFadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

details.gdz-card > summary:hover {
    background-color: rgba(0, 0, 0, 0.02);
}


/* Компактна "плашка з правилом" */
.rule-mini {
    background-color: #e7f3fe;
    border-left: 3px solid #4A90E2;
    padding: 0.5rem 0.8rem;
    margin: 0.6rem 0;
    border-radius: 0 6px 6px 0;
    font-size: 0.92rem;
    line-height: 1.45;
}

.rule-mini strong { color: #0056b3; }


/* ====================================================================
   КАРТКА ДОДАТКОВО — таби [Схожі задачі] [Перевір себе]
   ==================================================================== */

.card-extras {
    border: 1px solid #f0d9b8;
    background-color: #fffdf7;
}

.badge-extras {
    background-color: #f8e0b8;
    color: #7a5a1f;
}

.related-list {
    list-style: none;
    padding-left: 0;
    margin: 0.4rem 0 0;
}

.related-list li {
    margin-bottom: 6px;
    border-left: 3px solid #f0c060;
    padding-left: 12px;
    background-color: #fff8e6;
    border-radius: 0 5px 5px 0;
    transition: all 0.2s ease;
}

.related-list li:hover {
    border-left-color: #d49526;
    transform: translateX(3px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.related-list a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    display: block;
    padding: 7px 0;
    font-size: 0.95rem;
}

.related-list a:hover {
    color: #8a5a00;
}


/* ====================================================================
   ПЕРЕВІР СЕБЕ — міні-тест
   ==================================================================== */

.self-check { margin: 0.4rem 0; }

.self-check__question {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.6rem;
    color: #333;
    line-height: 1.45;
}

.self-check__options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0.6rem;
}

.self-check__option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    background-color: #fff;
    border: 2px solid #f0d9b8;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.self-check__option:hover:not(:disabled) {
    background-color: #fff8e6;
    border-color: #d49526;
}

.self-check__option:disabled { cursor: default; opacity: 0.85; }

.self-check__option.is-correct {
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
    font-weight: 700;
}

.self-check__option.is-wrong {
    background-color: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

.self-check__result {
    display: none;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.45;
    margin-top: 0.4rem;
}

.self-check__result.is-correct {
    background-color: #d4edda;
    color: #155724;
    border-left: 3px solid #28a745;
}

.self-check__result.is-wrong {
    background-color: #fff3cd;
    color: #5a4500;
    border-left: 3px solid #f0c060;
}

.self-check__result-title { font-weight: 700; margin-bottom: 3px; }


/* ====================================================================
   БЕЙДЖ "МАЛЮНОК" — для геометрії (на майбутнє)
   ==================================================================== */
.card-figure {
    border: 1px solid #ffe0a8;
    background-color: #fffaf0;
}

.badge-figure {
    background-color: #ffe0a8;
    color: #8a5a00;
}


/* ====================================================================
   МОБІЛЬНА АДАПТАЦІЯ (85% користувачів з мобільних)
   ==================================================================== */
@media (max-width: 576px) {

    .exercise-wrapper {
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 0.4rem;
    }

    .exercise-wrapper h1 {
        font-size: 1.1rem;
        padding: 0 0.25rem;
        line-height: 1.3;
        margin: 0.4rem 0;
    }

    .gdz-card {
        padding: 0.7rem;
        margin-bottom: 0.5rem;
        border-radius: 6px;
    }

    .gdz-card > *:not(.gdz-badge):first-of-type {
        margin-top: 0;
    }

    .gdz-badge {
        font-size: 0.52rem;
        padding: 3px 7px;
        letter-spacing: 0.02em;
    }

    details.gdz-card > summary {
        padding: 0.55rem 0.7rem 0.55rem 0.55rem;
    }

    .collapsible-title {
        font-size: 0.82rem;
        padding-right: 65px;
    }

    .collapsible-body {
        padding: 0 0.7rem 0.7rem;
    }

    .gdz-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 5px;
        margin-bottom: 8px;
    }
    .gdz-tabs::-webkit-scrollbar { display: none; }

    .gdz-tab {
        white-space: nowrap;
        padding: 5px 9px;
        font-size: 0.82rem;
        flex-shrink: 0;
    }

    .math-step {
        font-size: 0.98rem;
        padding: 5px 8px;
        gap: 7px;
        flex-wrap: wrap;
        margin: 5px 0;
    }

    .math-num {
        min-width: 22px;
        height: 22px;
        font-size: 0.78rem;
    }

    .math-hint {
        display: block;
        margin-left: 0;
        margin-top: 2px;
        flex-basis: 100%;
        font-size: 0.85rem;
    }

    .brief-line {
        font-size: 0.95rem;
        margin: 0.15rem 0;
    }

    .brief-question {
        font-size: 0.92rem;
        margin: 0.4rem 0 0.55rem;
    }

    .answer-line {
        font-size: 0.98rem;
        padding: 8px 11px;
        margin-top: 0.6rem !important;
    }

    .rule-mini {
        font-size: 0.9rem;
        padding: 0.45rem 0.7rem;
        margin: 0.5rem 0;
    }

    .related-list a { font-size: 0.9rem; padding: 5px 0; }
    .related-list li { margin-bottom: 5px; padding-left: 10px; }

    .self-check__option {
        font-size: 0.95rem;
        padding: 9px 11px;
    }

    .self-check__question { font-size: 0.95rem; }
}
/* ====================================================================
   ====== АРИФМЕТИКА: ДОПОЛНЕНИЯ ДО ІСНУЮЧОГО CSS-БЛОКУ ГДЗ МАТЕМАТИКА
   ====================================================================
   
/* ---- Варіант А: компактний список "приклад = відповідь" ---- */
.calc-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    font-family: 'Cambria Math', 'Times New Roman', serif;
}

.calc-list__item {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 6px 10px;
    border-bottom: 1px dashed #d4e9d4;
    font-size: 1.05rem;
}

.calc-list__item:last-child {
    border-bottom: none;
}

.calc-list__expr {
    flex: 1;
    color: #333;
    font-weight: 500;
}

.calc-list__sep {
    color: #999;
    flex-shrink: 0;
}

.calc-list__answer {
    color: #155724;
    font-weight: 700;
    background-color: #d4edda;
    padding: 1px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    min-width: 40px;
    text-align: center;
}


/* ---- Розширення math-step для варіанту B (багатокрокові): 
       проміжний крок між дією і результатом ---- */
.math-step__intermediate {
    color: #888;
    font-size: 0.95em;
    font-family: 'Cambria Math', 'Times New Roman', serif;
}


/* ---- Мобільна адаптація ---- */
@media (max-width: 576px) {

    .calc-list__item {
        font-size: 0.8rem;
        padding: 5px 8px;
        gap: 10px;
    }

    .calc-list__answer {
        min-width: 36px;
        padding: 1px 6px;
    }
}

/* end ==================== АРИФМЕТИКА ==================== */
/* ====================================================================
   ====== РІВНЯННЯ: ДОПОЛНЕНИЯ ДО ІСНУЮЧОГО CSS-БЛОКУ ГДЗ МАТЕМАТИКА
   ====================================================================

/* ---- Контейнер одного рівняння (з номером) ---- */
.equation-item {
    margin: 0.75rem 0 1rem;
    padding: 0.5rem 0.75rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.7);
    border-left: 3px solid #b7e4c7;
    border-radius: 0 6px 6px 0;
}

.equation-item__num {
    font-weight: 700;
    color: #1e7e34;
    margin-right: 6px;
}


/* ---- Назва компонента, що шукаємо ("х — невідомий доданок") ---- */
.equation-component {
    font-style: italic;
    color: #2c5e2e;
    margin: 0.25rem 0 0.4rem;
    font-size: 0.95rem;
}

.equation-component strong {
    color: #1e7e34;
    font-style: normal;
}


/* ====================================================================
   ПАТЧ для css-equations.css — фінальна версія правил
   ====================================================================
   
   Заміни секцію "Розкривний блок з правилом" з попереднього патчу
   (де було .equation-rule-toggle, .rule-trigger тощо) на цей блок.
   Все інше у файлі лишається як є.
   ==================================================================== */


/* ---- Підказка під бейджем "У зошит" ---- */
.notebook-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: #6b7280;
    font-style: italic;
}

.notebook-hint__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff8e6;
    border: 1px solid #f0c060;
    color: #8a5a00;
    font-size: 11px;
    font-weight: 700;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: normal;
    flex-shrink: 0;
}


/* ---- Розкривний блок з правилом (details) ---- */
.equation-rule-toggle {
    margin: 0.25rem 0 0.4rem;
    padding: 0;
    border: none;
    background: none;
    overflow: visible;
}

.equation-rule-toggle > summary {
    list-style: none;
    cursor: pointer;
    padding: 0;
    position: static;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: none;
    -webkit-appearance: none;
    
    font-style: italic;
    color: #2c5e2e;
    font-size: 0.95rem;
    line-height: 1.5;
}

.equation-rule-toggle > summary::-webkit-details-marker {
    display: none;
}

/* Прибираємо стрілку ▶ від details.gdz-card */
.equation-rule-toggle > summary::before {
    content: none;
}

.equation-rule-toggle > summary:hover {
    background: none;
}

.equation-rule-toggle > summary strong {
    color: #1e7e34;
    font-style: normal;
}


/* Кнопка-маркер "?" у кружку */
.rule-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #fff8e6;
    border: 1px solid #f0c060;
    color: #8a5a00;
    font-size: 13px;
    font-weight: 700;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: normal;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    margin-left: 4px;
    line-height: 1;
}

/* Hover і відкритий стан — синій (узгоджено з .rule-mini) */
.equation-rule-toggle > summary:hover .rule-trigger,
.equation-rule-toggle[open] > summary .rule-trigger {
    background-color: #4A90E2;
    color: #fff;
    border-color: #4A90E2;
}


/* Сама плашка з правилом */
.equation-rule {
    background-color: #fff8e6;
    border-left: 2px solid #f0c060;
    padding: 0.4rem 0.7rem;
    margin: 0.4rem 0 0.6rem;
    border-radius: 0 4px 4px 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #5a4500;
    animation: ruleFadeIn 0.2s ease;
}

@keyframes ruleFadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ---- Мобільна адаптація ---- */
@media (max-width: 576px) {

    .notebook-hint {
        font-size: 0.8rem;
    }

    .notebook-hint__icon {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .equation-rule-toggle > summary {
        font-size: 0.9rem;
    }

    .rule-trigger {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
}

/* end ==================== ПАТЧ ПРАВИЛА (фінал) ==================== */


/* ---- Власне розв'язання, лесенкою з вирівнюванням за = ---- */
.equation-solve {
    font-family: 'Cambria Math', 'Times New Roman', serif;
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 0.4rem 0;
    color: #222;
}

.equation-solve__line {
    display: block;
    padding-left: 8px;
}

/* Підсвітка фінальної відповіді (остання строка) */
.equation-solve__final {
    font-weight: 700;
    color: #155724;
    background-color: #d4edda;
    padding: 1px 8px;
    border-radius: 4px;
    display: inline-block;
}


/* ---- Перевірка ("Перевірка: 74 974 + 3478 = 78 452 ✓") ---- */
.equation-check {
    margin-top: 0.5rem;
    padding: 0.4rem 0.7rem;
    background-color: #e7f3fe;
    border-left: 2px solid #4A90E2;
    border-radius: 0 4px 4px 0;
    font-family: 'Cambria Math', 'Times New Roman', serif;
    font-size: 0.95rem;
    color: #0056b3;
}

.equation-check__label {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    font-weight: 600;
    margin-right: 6px;
}

.equation-check__ok {
    color: #198754;
    font-weight: 700;
    margin-left: 4px;
}


/* ---- Таблиця правил у "Розбір" ---- */
.rules-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.92rem;
}

.rules-table th,
.rules-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #dde6f7;
    vertical-align: top;
}

.rules-table th {
    background-color: #e7f3fe;
    color: #0056b3;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rules-table td:first-child {
    font-weight: 600;
    color: #2c5e2e;
    white-space: nowrap;
    width: 1%;
}


/* ---- Мобільна адаптація ---- */
@media (max-width: 576px) {

    .equation-item {
        padding: 0.4rem 0.6rem 0.6rem;
        margin: 0.6rem 0 0.8rem;
    }

    .equation-component {
        font-size: 0.9rem;
    }

    .equation-rule {
        font-size: 0.88rem;
        padding: 0.35rem 0.6rem;
    }

    .equation-solve {
        font-size: 1.02rem;
        line-height: 1.6;
    }

    .equation-check {
        font-size: 0.9rem;
        padding: 0.35rem 0.6rem;
    }

    .rules-table {
        font-size: 0.85rem;
    }

    .rules-table th,
    .rules-table td {
        padding: 5px 7px;
    }
}

/* end ==================== РІВНЯННЯ ==================== */
/* ====================================================================
   ====== ТВОРЧІ ЗАВДАННЯ: ДОДАТКОВО ДО user.css
   ====================================================================

/* ---- Заголовок усередині таба-варіанту ---- */
.variant-text {
    background-color: rgba(255, 255, 255, 0.7);
    border-left: 3px solid #b7e4c7;
    border-radius: 0 4px 4px 0;
    padding: 0.6rem 0.85rem;
    margin: 0.5rem 0 0.75rem;
    font-size: 1rem;
    line-height: 1.55;
    color: #2c5e2e;
    font-style: italic;
}

.variant-text__intro {
    font-style: normal;
    font-weight: 700;
    color: #1e7e34;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.85rem;
}


/* ---- Підказка-помічник для творчих задач ---- */
.creative-hint {
    background-color: #fff8e6;
    border-left: 3px solid #f0c060;
    border-radius: 0 4px 4px 0;
    padding: 0.5rem 0.8rem;
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: #5a4500;
    line-height: 1.45;
}

.creative-hint strong {
    color: #8a5a00;
}


/* ---- Підправка табів усередині .card-notebook ---- 
   Зелений фон карточки + білий фон табів дає легкий конфлікт.
   Робимо таби трохи прозорішими, щоб органічно сидіти на фоні. */

.card-notebook .gdz-tabs {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    padding: 4px;
    border-bottom: none;
    margin-bottom: 0.85rem;
}

.card-notebook .gdz-tab {
    border-radius: 4px;
    padding: 6px 14px;
    border-bottom: none;
    margin-bottom: 0;
    color: #1e7e34;
}

.card-notebook .gdz-tab:hover {
    background-color: rgba(255, 255, 255, 0.8);
    color: #155724;
}

.card-notebook .gdz-tab.active {
    background-color: #fff;
    color: #155724;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}


/* ---- Мобільна адаптація ---- */
@media (max-width: 576px) {

    .variant-text {
        font-size: 0.95rem;
        padding: 0.5rem 0.7rem;
    }

    .variant-text__intro {
        font-size: 0.78rem;
    }

    .creative-hint {
        font-size: 0.85rem;
        padding: 0.4rem 0.65rem;
    }

    .card-notebook .gdz-tab {
        padding: 5px 10px;
    }
}

/* end ==================== ТВОРЧІ ЗАВДАННЯ ==================== */
/* ====================================================================
   ====== ГЕОМЕТРІЯ: ДОДАТКОВО ДО user.css
   ====================================================================

/* ---- Контейнер для SVG-малюнка всередині картки .card-figure ---- */
.figure-svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.5rem auto;
    background-color: #fff;
    border-radius: 6px;
    padding: 0.5rem;
}

/* Стилі ліній і точок усередині SVG (через CSS, щоб дитина не бачила inline-style) */
.figure-svg .figure-line {
    fill: none;
    stroke: #4A90E2;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.figure-svg .figure-diagonal {
    fill: none;
    stroke: #4A90E2;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.figure-svg .figure-label {
    font-family: 'Cambria Math', 'Times New Roman', serif;
    font-style: italic;
    font-size: 18px;
    fill: #333;
    font-weight: 500;
}


/* Підпис під малюнком (за бажанням, для пояснень) */
.figure-caption {
    text-align: center;
    font-size: 0.88rem;
    color: #6b7280;
    font-style: italic;
    margin-top: 0.4rem;
}


/* ---- Формульна "лесенка" — для геометрії і не тільки ---- */
.formula-solve {
    margin: 0.5rem 0 0.75rem;
    padding: 0.6rem 0.85rem;
    background-color: rgba(255, 255, 255, 0.7);
    border-left: 3px solid #b7e4c7;
    border-radius: 0 6px 6px 0;
    font-family: 'Cambria Math', 'Times New Roman', serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #222;
}

.formula-solve__line {
    display: block;
    padding-left: 8px;
}

.formula-solve__label {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    color: #1e7e34;
    font-weight: 600;
    font-size: 0.92rem;
    margin-right: 6px;
}

.formula-solve__final {
    font-weight: 700;
    color: #155724;
    background-color: #d4edda;
    padding: 1px 8px;
    border-radius: 4px;
    display: inline-block;
}


/* ---- Список многокутників (для першого питання задачі) ---- */
.shapes-list {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0.75rem;
}

.shapes-list li {
    padding: 5px 10px;
    margin-bottom: 4px;
    background-color: rgba(255, 255, 255, 0.6);
    border-left: 3px solid #b7e4c7;
    border-radius: 0 4px 4px 0;
    font-size: 0.97rem;
    line-height: 1.5;
}

.shapes-list strong {
    color: #1e7e34;
    font-family: 'Cambria Math', 'Times New Roman', serif;
    font-size: 1.05em;
    margin-right: 6px;
}


/* ---- Підпитання у складеній задачі ---- */
.subtask {
    margin: 0.6rem 0 0.85rem;
}

.subtask__title {
    font-weight: 700;
    color: #1e7e34;
    font-size: 0.95rem;
    margin: 0 0 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px dashed #b7e4c7;
}


/* ---- Мобільна адаптація ---- */
@media (max-width: 576px) {

    .figure-svg {
        padding: 0.35rem;
    }

    .figure-svg .figure-label {
        font-size: 15px;
    }

    .formula-solve {
        font-size: 0.98rem;
        line-height: 1.6;
        padding: 0.5rem 0.7rem;
    }

    .formula-solve__label {
        font-size: 0.85rem;
    }

    .shapes-list li {
        font-size: 0.92rem;
        padding: 4px 8px;
    }

    .subtask__title {
        font-size: 0.9rem;
    }
}

/* end ==================== ГЕОМЕТРІЯ ==================== */

/* end ==================== ГДЗ МАТЕМАТИКА — ДОПОВНЕННЯ ==================== */