:root {
    --kipia-nav-blue: #1769aa;
    --kipia-nav-ink: #173b5f;
    --kipia-nav-muted: #627d98;
    --kipia-nav-line: #d8e5f3;
}

.kipia-trainer-menu,
.kipia-trainer-menu * {
    box-sizing: border-box;
}

.kipia-trainer-header,
.kipia-trainer-header * {
    box-sizing: border-box;
}

.kipia-trainer-header {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 10000;
    border-bottom: 4px solid #ef7d00;
    background: #0b263e;
    color: #fff;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.kipia-trainer-header__brand {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .05em;
    white-space: nowrap;
}

.kipia-trainer-header__brand span {
    color: #70d5df;
}

.kipia-trainer-header__title {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kipia-trainer-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ============================================================
   КНОПКА «ГЛАВНАЯ СТРАНИЦА» ВО ВСЕХ ТРЕНАЖЁРАХ
   ============================================================ */
.kipia-trainer-home {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid #55c8c4;
    border-radius: 9px;
    background: #0f5961;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
    text-decoration: none;
    font: 800 12px/1.2 Inter, "Segoe UI", Arial, sans-serif;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.kipia-trainer-home:hover {
    border-color: #8ee7df;
    background: #0f766e;
    color: #ffffff;
    transform: translateY(-1px);
}

.kipia-trainer-home:focus-visible {
    outline: 3px solid rgba(94, 234, 212, .38);
    outline-offset: 2px;
}

.kipia-trainer-home__icon {
    font-size: 17px;
    line-height: 1;
}

.kipia-trainer-home__label--short {
    display: none;
}

.kipia-trainer-home--floating {
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 9991;
}

.kipia-trainer-header__mode {
    padding: 7px 12px;
    border: 1px solid #356079;
    border-radius: 999px;
    background: #183d59;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
}

.kipia-with-trainer-header .left-panel,
.kipia-with-trainer-header .right-panel {
    top: 80px !important;
    max-height: calc(100vh - 92px) !important;
}

.kipia-trainer-menu {
    position: relative;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--kipia-nav-ink);
}

.kipia-trainer-menu--floating {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 9990;
}

.kipia-trainer-menu--embedded {
    width: 100%;
}

.kipia-trainer-menu--embedded .kipia-trainer-menu__toggle {
    width: 100%;
}

.kipia-trainer-menu--embedded .kipia-trainer-menu__panel {
    position: fixed;
    top: 18px;
    left: 245px;
    right: auto;
}

.kipia-trainer-menu__toggle {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid #8fb9dc;
    border-radius: 9px;
    background: #fff;
    color: #124f80;
    box-shadow: 0 5px 18px rgba(15, 45, 70, .14);
    font: 800 13px/1.2 Inter, "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}

.kipia-trainer-menu__toggle:hover,
.kipia-trainer-menu__toggle[aria-expanded="true"] {
    background: #edf6ff;
    border-color: var(--kipia-nav-blue);
}

.kipia-trainer-menu__toggle:focus-visible,
.kipia-trainer-menu__link:focus-visible,
.kipia-trainer-menu__all:focus-visible {
    outline: 3px solid rgba(23, 105, 170, .28);
    outline-offset: 2px;
}

.kipia-trainer-menu__panel {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    width: min(430px, calc(100vw - 24px));
    max-height: min(680px, calc(100vh - 80px));
    overflow: auto;
    padding: 15px;
    border: 1px solid var(--kipia-nav-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 45, 70, .22);
}

.kipia-trainer-menu__panel[hidden] {
    display: none;
}

.kipia-trainer-menu__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

.kipia-trainer-menu__head strong {
    display: block;
    color: var(--kipia-nav-ink);
    font-size: 17px;
}

.kipia-trainer-menu__head span {
    display: block;
    margin-top: 2px;
    color: var(--kipia-nav-muted);
    font-size: 12px;
}

.kipia-trainer-menu__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.kipia-trainer-menu__link {
    min-height: 51px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid #e0eaf2;
    border-radius: 9px;
    background: #f8fbfd;
    color: #294f6f;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.kipia-trainer-menu__link:hover {
    background: #edf6ff;
    border-color: #a8cceb;
    color: #0e5f9f;
}

.kipia-trainer-menu__link.is-current {
    background: #e3f2ff;
    border-color: var(--kipia-nav-blue);
    color: #0b5793;
}

.kipia-trainer-menu__number {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #dceaf5;
    color: #315c7d;
    font-size: 12px;
    font-weight: 900;
}

.kipia-trainer-menu__link.is-current .kipia-trainer-menu__number {
    background: var(--kipia-nav-blue);
    color: #fff;
}

.kipia-trainer-menu__all {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--kipia-nav-blue);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
}

.kipia-trainer-menu__all:hover {
    background: #0f5c99;
}

.app-header .kipia-trainer-menu__toggle,
.kipia-trainer-header .kipia-trainer-menu__toggle {
    min-height: 36px;
    border-color: #5c829b;
    background: #164663;
    color: #fff;
    box-shadow: none;
}

.app-header .kipia-trainer-menu__toggle:hover,
.app-header .kipia-trainer-menu__toggle[aria-expanded="true"],
.kipia-trainer-header .kipia-trainer-menu__toggle:hover,
.kipia-trainer-header .kipia-trainer-menu__toggle[aria-expanded="true"] {
    background: #1e5a7d;
    border-color: #7ba5bd;
}

.kipia-teacher-toggle {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #b78a38;
    border-radius: 9px;
    background: #5b431c;
    color: #fff5d9;
    font: 800 13px/1.2 Inter, "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}

.kipia-teacher-toggle:hover,
.kipia-teacher-toggle.active {
    border-color: #efb94e;
    background: #79591f;
}

.kipia-teacher-toggle:focus-visible {
    outline: 3px solid rgba(239, 185, 78, .35);
    outline-offset: 2px;
}

.kipia-trainer-header__mode.teacher {
    border-color: #d49a3a;
    background: #74521a;
    color: #fff5d9;
}

.kipia-inline-teacher-guide {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    margin: 0 0 16px;
    padding: 15px 17px;
    border: 1px solid #e6c56e;
    border-left: 5px solid #ef7d00;
    border-radius: 10px;
    background: #fff7dd;
    color: #173b5f;
    box-shadow: 0 7px 18px rgba(29, 53, 70, .1);
    font: 14px/1.48 Inter, "Segoe UI", Arial, sans-serif;
    text-align: left;
}

.kipia-inline-teacher-guide[hidden] {
    display: none !important;
}

.kipia-inline-teacher-guide__title {
    margin-bottom: 7px;
    color: #173b5f;
    font-size: 16px;
    font-weight: 900;
}

.kipia-inline-teacher-guide h3 {
    margin: 0 0 4px;
    color: #8a5200;
    font-size: 13px;
    font-weight: 900;
}

.kipia-inline-teacher-guide p,
.kipia-inline-teacher-guide ol,
.kipia-inline-teacher-guide ul {
    margin: 0;
    color: #304f68;
}

.kipia-inline-teacher-guide ol,
.kipia-inline-teacher-guide ul {
    padding-left: 22px;
}

.kipia-inline-teacher-guide li {
    margin: 0 0 4px;
}

.kipia-inline-teacher-guide__goal {
    margin-bottom: 10px;
}

.kipia-inline-teacher-guide__columns {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, .9fr);
    gap: 24px;
    margin-bottom: 10px;
}

.kipia-inline-teacher-guide__result,
.kipia-inline-teacher-guide__warning {
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: 7px;
}

.kipia-inline-teacher-guide__result {
    border-left: 4px solid #15835b;
    background: #e6f5eb;
}

.kipia-inline-teacher-guide__warning {
    border-left: 4px solid #ef7d00;
    background: #ffede5;
}

@media (max-width: 640px) {
    .kipia-trainer-header {
        min-height: 58px;
        gap: 9px;
        padding: 8px 10px;
    }

    .kipia-trainer-header__brand {
        font-size: 12px;
    }

    .kipia-trainer-header__title {
        display: none;
    }

    .kipia-trainer-header__actions {
        gap: 6px;
    }

    .kipia-trainer-header__mode {
        padding: 6px 8px;
        font-size: 11px;
    }

    .kipia-teacher-toggle__label {
        display: none;
    }

    .kipia-teacher-toggle {
        min-width: 36px;
        padding: 6px 8px;
    }

    .kipia-inline-teacher-guide {
        padding: 13px;
        font-size: 13px;
    }

    .kipia-inline-teacher-guide__columns {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kipia-with-trainer-header .left-panel,
    .kipia-with-trainer-header .right-panel {
        top: auto !important;
        max-height: none !important;
    }

    .kipia-trainer-menu--floating {
        top: 8px;
        right: 8px;
    }

    .kipia-trainer-menu__toggle-label {
        display: none;
    }

    .kipia-trainer-menu__panel {
        position: fixed;
        top: 56px;
        right: 8px;
        width: calc(100vw - 16px);
        max-height: calc(100vh - 64px);
    }

    .kipia-trainer-menu--embedded .kipia-trainer-menu__panel {
        top: 56px;
        left: 8px;
        right: 8px;
    }

    .kipia-trainer-menu__list {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 760px) {
    .kipia-trainer-home {
        min-height: 34px;
        padding: 6px 9px;
        font-size: 11px;
    }

    .kipia-trainer-home__label--full {
        display: none;
    }

    .kipia-trainer-home__label--short {
        display: inline;
    }

    .kipia-trainer-home--floating {
        top: 8px;
        left: 8px;
    }
}

@media print {
    .kipia-trainer-menu,
    .kipia-trainer-header,
    .kipia-inline-teacher-guide {
        display: none !important;
    }
}

/* ============================================================
   EXAMPLES.PHP — ТЁМНЫЙ ТЕХНО-СТИЛЬ КАК НА ГЛАВНОЙ
   Все правила ниже применяются только к странице examples.php.
   ============================================================ */
html:has(.examples-page) {
    background:#071b2d;
}

body:has(.examples-page) {
    color:#f4f8fb !important;
    background:
        radial-gradient(circle at 12% 9%,rgba(57,212,255,.11),transparent 28rem),
        radial-gradient(circle at 86% 15%,rgba(255,155,66,.08),transparent 25rem),
        radial-gradient(circle at 52% 74%,rgba(50,214,180,.07),transparent 32rem),
        linear-gradient(180deg,#06192a 0%,#082139 42%,#071b2d 100%) !important;
    background-attachment:fixed !important;
}

body:has(.examples-page)::before {
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(79,170,205,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(79,170,205,.055) 1px,transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.84) 72%,transparent 100%);
}

body:has(.examples-page) .kipia-trainer-header {
    min-height:72px;
    border-bottom:1px solid rgba(103,188,219,.15);
    background:rgba(5,23,38,.90);
    box-shadow:0 12px 32px rgba(0,0,0,.18);
    backdrop-filter:blur(18px);
}

body:has(.examples-page) .kipia-trainer-header__brand {
    font-size:15px;
}

body:has(.examples-page) .kipia-trainer-header__brand span {
    color:#6fe1ea;
}

body:has(.examples-page) .kipia-trainer-header__title {
    color:#b9d1df;
}

body:has(.examples-page) .kipia-trainer-header__mode {
    border-color:rgba(111,225,234,.26);
    background:rgba(18,75,98,.46);
    color:#dff8fb;
}

body:has(.examples-page) .kipia-trainer-menu__toggle {
    border-color:rgba(111,225,234,.28);
    background:rgba(18,73,98,.60);
    color:#eafcff;
}

body:has(.examples-page) .kipia-trainer-menu__toggle:hover,
body:has(.examples-page) .kipia-trainer-menu__toggle[aria-expanded="true"] {
    border-color:rgba(111,225,234,.55);
    background:rgba(25,103,128,.70);
}

body:has(.examples-page) .examples-page {
    width:min(1500px,calc(100% - 44px));
    padding:46px 0 58px;
}

body:has(.examples-page) .examples-intro {
    position:relative;
    overflow:hidden;
    margin-bottom:28px;
    padding:34px 36px;
    border:1px solid rgba(126,190,216,.20);
    border-radius:22px;
    background:
        radial-gradient(circle at 88% 24%,rgba(255,155,66,.08),transparent 18rem),
        radial-gradient(circle at 8% 15%,rgba(57,212,255,.10),transparent 22rem),
        linear-gradient(145deg,rgba(26,66,92,.84),rgba(13,43,65,.86));
    box-shadow:0 24px 62px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035);
}

body:has(.examples-page) .examples-intro::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:220px;
    height:3px;
    background:linear-gradient(90deg,#39d4ff,#32d6b4,transparent);
    box-shadow:0 0 18px rgba(57,212,255,.35);
}

body:has(.examples-page) .examples-intro::after {
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    right:-95px;
    bottom:-150px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(50,214,180,.12),transparent 67%);
    filter:blur(6px);
    pointer-events:none;
}

body:has(.examples-page) .examples-intro h1 {
    position:relative;
    z-index:1;
    margin:0 0 12px;
    color:#f6fbff;
    font-size:clamp(2rem,3.4vw,3.65rem);
    line-height:1.05;
    letter-spacing:-.035em;
    text-shadow:0 8px 30px rgba(0,0,0,.18);
}

body:has(.examples-page) .examples-intro p {
    position:relative;
    z-index:1;
    max-width:1050px;
    color:#a9bfce;
    font-size:1rem;
    line-height:1.68;
}

body:has(.examples-page) .examples-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

body:has(.examples-page) .trainer-card {
    min-height:285px;
    position:relative;
    overflow:hidden;
    padding:25px;
    border:1px solid rgba(126,184,208,.19);
    border-radius:20px;
    background:linear-gradient(155deg,rgba(27,67,92,.86),rgba(14,45,67,.88));
    box-shadow:0 18px 44px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035);
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

body:has(.examples-page) .trainer-card::before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:3px;
    opacity:.85;
    background:linear-gradient(90deg,#39d4ff,transparent 76%);
}

body:has(.examples-page) .trainer-card:nth-child(6n+2)::before {
    background:linear-gradient(90deg,#32d6b4,transparent 76%);
}
body:has(.examples-page) .trainer-card:nth-child(6n+3)::before {
    background:linear-gradient(90deg,#ff9b42,transparent 76%);
}
body:has(.examples-page) .trainer-card:nth-child(6n+4)::before {
    background:linear-gradient(90deg,#67a8ff,transparent 76%);
}
body:has(.examples-page) .trainer-card:nth-child(6n+5)::before {
    background:linear-gradient(90deg,#65e6a5,transparent 76%);
}
body:has(.examples-page) .trainer-card:nth-child(6n+6)::before {
    background:linear-gradient(90deg,#ffc45a,transparent 76%);
}

body:has(.examples-page) .trainer-card::after {
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    right:-78px;
    bottom:-90px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(57,212,255,.09),transparent 68%);
    pointer-events:none;
    transition:transform .35s ease,opacity .35s ease;
}

body:has(.examples-page) .trainer-card:hover {
    transform:translateY(-6px);
    border-color:rgba(74,208,234,.45);
    background:linear-gradient(155deg,rgba(31,76,103,.92),rgba(15,49,72,.92));
    box-shadow:0 30px 64px rgba(0,0,0,.27),0 0 34px rgba(57,212,255,.055),inset 0 1px 0 rgba(255,255,255,.05);
}

body:has(.examples-page) .trainer-card:hover::after {
    transform:scale(1.35) translate(-8px,-8px);
    opacity:1;
}

body:has(.examples-page) .trainer-card.is-ready {
    border-color:rgba(126,184,208,.22);
}

body:has(.examples-page) .trainer-icon {
    width:58px;
    height:58px;
    margin-bottom:18px;
    border:1px solid rgba(111,225,234,.18);
    border-radius:16px;
    background:linear-gradient(145deg,rgba(22,80,104,.72),rgba(12,51,73,.74));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 22px rgba(0,0,0,.12),0 0 22px rgba(57,212,255,.035);
    font-size:29px;
}

body:has(.examples-page) .trainer-card h2 {
    color:#f5f9fc;
    font-size:1.25rem;
    letter-spacing:-.015em;
}

body:has(.examples-page) .trainer-card p {
    color:#9fb5c5;
    font-size:.9rem;
    line-height:1.62;
}

body:has(.examples-page) .trainer-status {
    border:1px solid rgba(121,171,190,.18);
    background:rgba(16,49,70,.70);
    color:#9bb4c4;
}

body:has(.examples-page) .trainer-status.ready {
    border-color:rgba(101,230,165,.22);
    background:rgba(20,102,72,.25);
    color:#78ecb1;
    box-shadow:0 0 18px rgba(101,230,165,.035);
}

body:has(.examples-page) .trainer-open {
    min-height:40px;
    padding:9px 15px;
    border:1px solid rgba(72,211,232,.40);
    border-radius:10px;
    color:#061a2a;
    background:linear-gradient(135deg,#49d5fb,#32d6b4);
    box-shadow:0 10px 22px rgba(42,205,218,.14);
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

body:has(.examples-page) .trainer-open:hover {
    transform:translateY(-2px);
    filter:brightness(1.07);
    background:linear-gradient(135deg,#60ddff,#42deb9);
    box-shadow:0 15px 28px rgba(42,205,218,.22);
}

body:has(.examples-page) .trainer-open.disabled {
    border-color:rgba(132,154,167,.20);
    background:rgba(84,108,122,.28);
    color:#7791a2;
    box-shadow:none;
}

body:has(.examples-page) .examples-note {
    margin-top:30px;
    padding:19px 22px;
    border:1px solid rgba(126,188,213,.18);
    border-left:4px solid #39d4ff;
    border-radius:14px;
    background:linear-gradient(145deg,rgba(22,60,84,.66),rgba(11,42,63,.68));
    color:#aac0ce;
    box-shadow:0 14px 34px rgba(0,0,0,.13);
}

body:has(.examples-page) .examples-footer {
    padding:18px 20px 26px;
    color:#6f8ca0;
}

body:has(.examples-page) .examples-footer a {
    color:#62ddec;
}

body:has(.examples-page) .kipia-trainer-menu__panel {
    border-color:rgba(108,175,201,.24);
    background:#0d2b41;
    color:#eaf7fb;
    box-shadow:0 24px 60px rgba(0,0,0,.36);
}

body:has(.examples-page) .kipia-trainer-menu__head strong {
    color:#f4fbff;
}
body:has(.examples-page) .kipia-trainer-menu__head span {
    color:#8fa9ba;
}
body:has(.examples-page) .kipia-trainer-menu__link {
    border-color:rgba(117,174,198,.18);
    background:#12354d;
    color:#bdd4df;
}
body:has(.examples-page) .kipia-trainer-menu__link:hover,
body:has(.examples-page) .kipia-trainer-menu__link.is-current {
    border-color:rgba(57,212,255,.42);
    background:#17435e;
    color:#fff;
}
body:has(.examples-page) .kipia-trainer-menu__number {
    background:#214b64;
    color:#9dd7e4;
}
body:has(.examples-page) .kipia-trainer-menu__all {
    color:#061a2a;
    background:linear-gradient(135deg,#49d5fb,#32d6b4);
}

@media (max-width:1100px) {
    body:has(.examples-page) .examples-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:700px) {
    body:has(.examples-page) .examples-page {
        width:calc(100% - 24px);
        padding-top:24px;
    }

    body:has(.examples-page) .examples-intro {
        padding:24px 21px;
        border-radius:18px;
    }

    body:has(.examples-page) .examples-intro h1 {
        font-size:clamp(1.75rem,9vw,2.45rem);
    }

    body:has(.examples-page) .examples-grid {
        grid-template-columns:1fr;
        gap:14px;
    }

    body:has(.examples-page) .trainer-card {
        min-height:0;
        padding:21px;
        border-radius:17px;
    }

    body:has(.examples-page) .trainer-meta {
        align-items:stretch;
    }

    body:has(.examples-page) .trainer-open {
        flex:1 1 170px;
    }

    body:has(.examples-page) .kipia-trainer-header {
        min-height:62px;
        border-bottom:1px solid rgba(103,188,219,.15);
    }
}

@media (prefers-reduced-motion:reduce) {
    body:has(.examples-page) .trainer-card,
    body:has(.examples-page) .trainer-open {
        transition:none !important;
    }
}