/* =========================================================
   TRAINING V3
   One active session at a time; varied 7-day training cycle.
   ========================================================= */

body.training-page-v3 {
    --tr-card: #101013;
    --tr-card-2: #0c0c0f;
    --tr-line: #29292f;
    --tr-line-soft: #1d1d22;
    --tr-text: #f5f5f7;
    --tr-muted: #92929d;
    --tr-muted-2: #696973;
    --tr-accent: #ff2bd6;
    --tr-good: #63e6a3;
}

body.training-page-v3 .page-main,
body.training-page-v3 .site-nav-main,
body.training-page-v3 .footer {
    width: min(1420px, calc(100% - 40px));
}

body.training-page-v3 .training-v3-page-header {
    margin-bottom: 16px;
    padding-bottom: 16px;
}

body.training-page-v3 .training-v3-stack {
    gap: 28px;
}

body.training-page-v3 .training-v3-section-intro {
    align-items: end;
    margin-bottom: 12px;
}

body.training-page-v3 .training-v3-section-intro > p {
    max-width: 560px;
}


/* ---------- focus strip ---------- */

body.training-page-v3 .training-v3-focus {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(470px, .8fr);
    grid-template-areas:
        "main facts"
        "main progress";
    gap: 10px 18px;
    padding: 20px 22px;
    border: 1px solid var(--tr-line);
    border-top: 2px solid var(--tr-accent);
    border-radius: 9px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(255,43,214,.085),
            transparent 36%
        ),
        #101013;
}

body.training-page-v3 .training-v3-focus-main {
    grid-area: main;
}

body.training-page-v3 .training-v3-focus-main h2 {
    max-width: 780px;
    margin: 5px 0 8px;
    font-size: clamp(25px, 2.3vw, 34px);
    line-height: 1.05;
}

body.training-page-v3 .training-v3-focus-main p {
    max-width: 790px;
    margin: 0;
    font-size: 12px;
    line-height: 1.58;
    color: var(--tr-muted);
}

body.training-page-v3 .training-v3-focus-facts {
    grid-area: facts;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--tr-line-soft);
    border-radius: 6px;
    overflow: hidden;
    background: #0b0b0e;
}

body.training-page-v3 .training-v3-focus-facts > div {
    min-width: 0;
    padding: 11px 12px;
    border-right: 1px solid var(--tr-line-soft);
}

body.training-page-v3 .training-v3-focus-facts > div:last-child {
    border-right: 0;
}

body.training-page-v3 .training-v3-focus-facts span,
body.training-page-v3 .training-v3-progress-copy span {
    display: block;
    margin-bottom: 5px;
    font-size: 7px;
    letter-spacing: .065em;
    text-transform: uppercase;
    color: var(--tr-muted-2);
}

body.training-page-v3 .training-v3-focus-facts strong {
    display: block;
    font-size: 14px;
    line-height: 1.2;
}

body.training-page-v3 .training-v3-progress {
    grid-area: progress;
    display: grid;
    grid-template-columns: auto minmax(150px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--tr-line-soft);
    border-radius: 6px;
    background: #0b0b0e;
}

body.training-page-v3 .training-v3-progress-copy strong {
    font-size: 11px;
}

body.training-page-v3 .training-v3-progress-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #25252a;
}

body.training-page-v3 .training-v3-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8d0879, #ff2bd6);
    transition: width .25s ease;
}

body.training-page-v3 .training-v3-reset {
    padding: 0;
    border: 0;
    background: transparent;
    color: #777781;
    font: inherit;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}

body.training-page-v3 .training-v3-reset:hover {
    color: #fff;
}


/* ---------- session navigation ---------- */

body.training-page-v3 .training-v3-session-nav {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 9px;
}

body.training-page-v3 .training-v3-session-tab {
    min-width: 0;
    min-height: 79px;
    padding: 10px 10px 9px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 5px;
    border: 1px solid var(--tr-line);
    border-radius: 6px;
    background: #0e0e11;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

body.training-page-v3 .training-v3-session-tab:hover {
    border-color: #45454d;
}

body.training-page-v3 .training-v3-session-tab.is-active {
    border-color: rgba(255,43,214,.72);
    background:
        linear-gradient(
            180deg,
            rgba(255,43,214,.085),
            transparent 72%
        ),
        #101013;
}

body.training-page-v3 .training-v3-session-tab.is-complete {
    border-color: rgba(99,230,163,.28);
}

body.training-page-v3 .training-v3-session-tab.is-complete::after {
    content: "DONE";
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .07em;
    color: var(--tr-good);
}

body.training-page-v3 .training-v3-tab-day {
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tr-accent);
}

body.training-page-v3 .training-v3-session-tab strong {
    overflow: hidden;
    max-width: 100%;
    font-size: 10px;
    line-height: 1.15;
    text-overflow: ellipsis;
}

body.training-page-v3 .training-v3-session-tab small {
    font-size: 7px;
    color: var(--tr-muted-2);
}


/* ---------- active session ---------- */

body.training-page-v3 .training-v3-active-card {
    display: grid;
    grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
    border: 1px solid var(--tr-line);
    border-top: 2px solid var(--tr-accent);
    border-radius: 8px;
    overflow: hidden;
    background: var(--tr-card);
}

body.training-page-v3 .training-v3-active-summary {
    min-width: 0;
    padding: 20px;
    border-right: 1px solid var(--tr-line-soft);
    background:
        linear-gradient(
            145deg,
            rgba(255,43,214,.055),
            transparent 52%
        ),
        #0d0d10;
}

body.training-page-v3 .training-v3-active-eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 17px;
}

body.training-page-v3 .training-v3-active-eyebrow span {
    padding: 4px 7px;
    border: 1px solid #303036;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: #a4a4ad;
}

body.training-page-v3 .training-v3-active-eyebrow span:first-child {
    border-color: rgba(255,43,214,.35);
    color: var(--tr-accent);
}

body.training-page-v3 .training-v3-active-summary h3 {
    max-width: 520px;
    margin: 0 0 8px;
    font-size: clamp(22px, 2vw, 29px);
    line-height: 1.08;
}

body.training-page-v3 .training-v3-active-subtitle {
    max-width: 520px;
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
    color: var(--tr-muted);
}

body.training-page-v3 .training-v3-active-why,
body.training-page-v3 .training-v3-active-example {
    margin-top: 18px;
    padding-top: 13px;
    border-top: 1px solid var(--tr-line-soft);
}

body.training-page-v3 .training-v3-active-why > span,
body.training-page-v3 .training-v3-active-example > span {
    display: block;
    margin-bottom: 5px;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .065em;
    text-transform: uppercase;
    color: var(--tr-muted-2);
}

body.training-page-v3 .training-v3-active-why p {
    margin: 0;
    font-size: 9px;
    line-height: 1.5;
    color: #83838d;
}

body.training-page-v3 .training-v3-active-example strong {
    display: block;
    font-size: 10px;
    line-height: 1.4;
    color: #d5d5db;
}

body.training-page-v3 .training-v3-active-work {
    min-width: 0;
    padding: 20px;
}

body.training-page-v3 .training-v3-work-label {
    display: block;
    margin-bottom: 11px;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tr-accent);
}

body.training-page-v3 .training-v3-step-list {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--tr-line-soft);
    background: var(--tr-line-soft);
}

body.training-page-v3 .training-v3-step-list li {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    align-items: start;
    min-height: 62px;
    padding: 12px;
    background: #0d0d10;
}

body.training-page-v3 .training-v3-step-list li > span {
    padding-top: 1px;
    font-size: 10px;
    font-weight: 900;
    color: var(--tr-accent);
}

body.training-page-v3 .training-v3-step-list p {
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
    color: #ccccd2;
}

body.training-page-v3 .training-v3-active-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

body.training-page-v3 .training-v3-open-position,
body.training-page-v3 .training-v3-complete-button {
    min-height: 39px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-decoration: none;
    font: inherit;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

body.training-page-v3 .training-v3-open-position {
    border: 1px solid var(--tr-accent);
    background: var(--tr-accent);
    color: #070709;
}

body.training-page-v3 .training-v3-open-position span {
    font-size: 15px;
}

body.training-page-v3 .training-v3-complete-button {
    border: 1px solid #3a3a42;
    background: transparent;
    color: #b2b2bb;
}

body.training-page-v3 .training-v3-complete-button.is-complete {
    border-color: rgba(99,230,163,.4);
    color: var(--tr-good);
}


/* ---------- position library ---------- */

body.training-page-v3 .training-v3-library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body.training-page-v3 .training-v3-library-card {
    min-width: 0;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    padding: 13px;
    border: 1px solid var(--tr-line);
    border-radius: 7px;
    background: #0f0f12;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

body.training-page-v3 .training-v3-library-card:hover {
    border-color: rgba(255,43,214,.48);
}

body.training-page-v3 .training-v3-library-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

body.training-page-v3 .training-v3-library-top > span {
    font-size: 8px;
    font-weight: 900;
    color: var(--tr-accent);
}

body.training-page-v3 .training-v3-library-top small {
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: .055em;
    color: var(--tr-muted-2);
}

body.training-page-v3 .training-v3-library-card > strong {
    margin-bottom: 7px;
    font-size: 14px;
    line-height: 1.2;
}

body.training-page-v3 .training-v3-library-card > p {
    margin: 0 0 10px;
    font-size: 9px;
    line-height: 1.4;
    color: var(--tr-muted);
}

body.training-page-v3 .training-v3-library-action {
    margin-top: auto;
    font-size: 8px;
    font-weight: 850;
    color: var(--tr-accent);
}


/* ---------- end CTA ---------- */

body.training-page-v3 .training-v3-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 21px 23px;
    border-top: 1px solid rgba(255,43,214,.48);
    border-bottom: 1px solid var(--tr-line);
    background:
        linear-gradient(
            90deg,
            rgba(255,43,214,.055),
            transparent 62%
        ),
        #0b0b0e;
}

body.training-page-v3 .training-v3-next h2 {
    margin: 5px 0 7px;
    font-size: 27px;
}

body.training-page-v3 .training-v3-next p {
    max-width: 780px;
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
    color: var(--tr-muted);
}

body.training-page-v3 .training-v3-next-actions {
    display: flex;
    gap: 10px;
}

body.training-page-v3 .training-v3-next-actions a {
    min-height: 46px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    text-decoration: none;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

body.training-page-v3 .training-v3-secondary-link {
    border: 1px solid #3a3a42;
    color: #d9d9df;
}

body.training-page-v3 .training-v3-primary-link {
    border: 1px solid var(--tr-accent);
    background: var(--tr-accent);
    color: #070709;
}

body.training-page-v3 .training-v3-primary-link span {
    font-size: 17px;
}


/* ---------- responsive ---------- */

@media (max-width: 1160px) {

    body.training-page-v3 .training-v3-focus {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "facts"
            "progress";
    }

    body.training-page-v3 .training-v3-session-nav {
        grid-template-columns: repeat(4, 1fr);
    }

    body.training-page-v3 .training-v3-active-card {
        grid-template-columns: 1fr;
    }

    body.training-page-v3 .training-v3-active-summary {
        border-right: 0;
        border-bottom: 1px solid var(--tr-line-soft);
    }

    body.training-page-v3 .training-v3-library-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 820px) {

    body.training-page-v3 .page-main,
    body.training-page-v3 .site-nav-main,
    body.training-page-v3 .footer {
        width: min(100% - 22px, 1420px);
    }

    body.training-page-v3 .training-v3-session-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    body.training-page-v3 .training-v3-library-grid {
        grid-template-columns: 1fr;
    }

    body.training-page-v3 .training-v3-next {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {

    body.training-page-v3 .training-v3-focus {
        padding: 17px;
    }

    body.training-page-v3 .training-v3-focus-facts {
        grid-template-columns: 1fr;
    }

    body.training-page-v3 .training-v3-focus-facts > div {
        border-right: 0;
        border-bottom: 1px solid var(--tr-line-soft);
    }

    body.training-page-v3 .training-v3-focus-facts > div:last-child {
        border-bottom: 0;
    }

    body.training-page-v3 .training-v3-progress {
        grid-template-columns: 1fr;
    }

    body.training-page-v3 .training-v3-session-nav {
        grid-template-columns: 1fr 1fr;
    }

    body.training-page-v3 .training-v3-active-actions {
        align-items: stretch;
        flex-direction: column;
    }

    body.training-page-v3 .training-v3-open-position,
    body.training-page-v3 .training-v3-complete-button {
        width: 100%;
    }

    body.training-page-v3 .training-v3-next-actions {
        flex-direction: column;
        align-items: stretch;
    }

    body.training-page-v3 .training-v3-next-actions a {
        width: 100%;
    }
}


/* =========================================================
   TRAINING V3.1 — STRONGER PERSONALIZATION
   ========================================================= */

body.training-page-v3 .training-v31-focus {
    display: block;
    padding: 21px 22px;
}

body.training-page-v3 .training-v31-focus-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 15px;
}

body.training-page-v3 .training-v31-focus-header h2 {
    max-width: 840px;
    margin: 5px 0 8px;
    font-size: clamp(26px, 2.35vw, 35px);
    line-height: 1.04;
}

body.training-page-v3 .training-v31-focus-header p {
    max-width: 830px;
    margin: 0;
    font-size: 12px;
    line-height: 1.58;
    color: var(--tr-muted);
}

body.training-page-v3 .training-v31-plan-badge {
    flex: 0 0 auto;
    min-width: 126px;
    padding: 10px 12px;
    border: 1px solid var(--tr-line-soft);
    border-radius: 6px;
    background: #0b0b0e;
    text-align: right;
}

body.training-page-v3 .training-v31-plan-badge span {
    display: block;
    margin-bottom: 4px;
    font-size: 7px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tr-muted-2);
}

body.training-page-v3 .training-v31-plan-badge strong {
    font-size: 13px;
    color: #fff;
}

body.training-page-v3 .training-v31-priority-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr .9fr;
    gap: 9px;
}

body.training-page-v3 .training-v31-priority {
    min-width: 0;
    min-height: 164px;
    display: flex;
    flex-direction: column;
    padding: 14px 15px;
    border: 1px solid var(--tr-line-soft);
    border-radius: 7px;
    background: #0c0c0f;
}

body.training-page-v3 .training-v31-priority-main {
    border-top: 2px solid var(--tr-accent);
    background:
        linear-gradient(
            180deg,
            rgba(255,43,214,.07),
            transparent 55%
        ),
        #0c0c0f;
}

body.training-page-v3 .training-v31-priority-secondary {
    border-top: 2px solid rgba(255,43,214,.4);
}

body.training-page-v3 .training-v31-priority-phase {
    border-top: 2px solid #484851;
}

body.training-page-v3 .training-v31-priority-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
}

body.training-page-v3 .training-v31-priority-rank {
    font-size: 9px;
    font-weight: 900;
    color: var(--tr-accent);
}

body.training-page-v3 .training-v31-priority-label {
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .065em;
    text-transform: uppercase;
    color: var(--tr-muted-2);
}

body.training-page-v3 .training-v31-priority > strong {
    display: block;
    margin-bottom: 7px;
    font-size: 19px;
    line-height: 1.15;
}

body.training-page-v3 .training-v31-priority-main > strong {
    font-size: 23px;
    color: #fff;
}

body.training-page-v3 .training-v31-priority > p {
    margin: 0;
    font-size: 9.5px;
    line-height: 1.48;
    color: #8e8e98;
}

body.training-page-v3 .training-v31-priority-meta {
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid var(--tr-line-soft);
    font-size: 8px;
    color: #6f6f79;
}

body.training-page-v3 .training-v31-priority-main .training-v31-priority-meta {
    color: #9f7198;
}

body.training-page-v3 .training-v31-progress-row {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--tr-line-soft);
    border-radius: 6px;
    background: #0b0b0e;
}

@media (max-width: 1050px) {
    body.training-page-v3 .training-v31-priority-grid {
        grid-template-columns: 1fr 1fr;
    }

    body.training-page-v3 .training-v31-priority-phase {
        grid-column: 1 / -1;
        min-height: 128px;
    }
}

@media (max-width: 760px) {
    body.training-page-v3 .training-v31-focus-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.training-page-v3 .training-v31-plan-badge {
        text-align: left;
    }

    body.training-page-v3 .training-v31-priority-grid {
        grid-template-columns: 1fr;
    }

    body.training-page-v3 .training-v31-priority-phase {
        grid-column: auto;
    }

    body.training-page-v3 .training-v31-progress-row {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   TRAINING V3.2 — LONG-FORM UX
   No tabs. Every day is visible in a clear vertical sequence.
   ========================================================= */

body.training-page-v3 .training-v32-flow {
    padding-top: 2px;
}

body.training-page-v3 .training-v32-flow-map {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    margin: 0 0 18px;
}

body.training-page-v3 .training-v32-flow-stage {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--tr-line);
    border-radius: 7px;
    background: #0d0d10;
}

body.training-page-v3 .training-v32-flow-stage > span {
    display: block;
    margin-bottom: 5px;
    font-size: 8px;
    font-weight: 900;
    color: var(--tr-accent);
}

body.training-page-v3 .training-v32-flow-stage > strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
}

body.training-page-v3 .training-v32-flow-stage > small {
    font-size: 8px;
    color: var(--tr-muted-2);
}

body.training-page-v3 .training-v32-flow-arrow {
    color: #4d4d55;
    font-size: 18px;
}

body.training-page-v3 .training-v32-plan-list {
    display: grid;
    gap: 14px;
}

body.training-page-v3 .training-v32-day-card {
    display: grid;
    grid-template-columns: 170px minmax(0, 1.25fr) minmax(280px, .72fr);
    min-width: 0;
    border: 1px solid var(--tr-line);
    border-radius: 9px;
    overflow: hidden;
    background: var(--tr-card);
}

body.training-page-v3 .training-v32-day-card.is-next {
    border-color: rgba(255,43,214,.72);
    box-shadow: 0 0 0 1px rgba(255,43,214,.08);
}

body.training-page-v3 .training-v32-day-card.is-complete {
    opacity: .72;
}

body.training-page-v3 .training-v32-day-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 18px 15px;
    border-right: 1px solid var(--tr-line-soft);
    background: #0b0b0e;
}

body.training-page-v3 .training-v32-day-card.stage-build .training-v32-day-rail {
    border-top: 2px solid var(--tr-accent);
}

body.training-page-v3 .training-v32-day-card.stage-reinforce .training-v32-day-rail {
    border-top: 2px solid rgba(255,43,214,.45);
}

body.training-page-v3 .training-v32-day-card.stage-transfer .training-v32-day-rail {
    border-top: 2px solid #51515a;
}

body.training-page-v3 .training-v32-day-number {
    margin-bottom: 11px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: var(--tr-accent);
}

body.training-page-v3 .training-v32-day-rail > strong {
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 1.15;
}

body.training-page-v3 .training-v32-day-rail > small {
    margin-bottom: 15px;
    font-size: 8px;
    color: var(--tr-muted-2);
}

body.training-page-v3 .training-v32-personal-tag {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--tr-line-soft);
    font-size: 8px;
    line-height: 1.4;
    color: #9a7193;
}

body.training-page-v3 .training-v32-next-label,
body.training-page-v3 .training-v32-done-label {
    margin-top: 9px;
    padding: 4px 6px;
    border-radius: 999px;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

body.training-page-v3 .training-v32-next-label {
    border: 1px solid rgba(255,43,214,.4);
    color: var(--tr-accent);
}

body.training-page-v3 .training-v32-done-label {
    border: 1px solid rgba(99,230,163,.32);
    color: var(--tr-good);
}

body.training-page-v3 .training-v32-day-main {
    min-width: 0;
    padding: 19px 20px;
}

body.training-page-v3 .training-v32-day-main h3 {
    max-width: 720px;
    margin: 0 0 7px;
    font-size: 21px;
    line-height: 1.15;
}

body.training-page-v3 .training-v32-day-subtitle {
    max-width: 760px;
    margin: 0 0 15px;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--tr-muted);
}

body.training-page-v3 .training-v32-step-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.training-page-v3 .training-v32-step-list li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 0;
    border-top: 1px solid var(--tr-line-soft);
}

body.training-page-v3 .training-v32-step-list li:last-child {
    border-bottom: 1px solid var(--tr-line-soft);
}

body.training-page-v3 .training-v32-step-list li > span {
    font-size: 9px;
    font-weight: 900;
    color: var(--tr-accent);
}

body.training-page-v3 .training-v32-step-list p {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.55;
    color: #c7c7cd;
}

body.training-page-v3 .training-v32-day-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 18px;
    border-left: 1px solid var(--tr-line-soft);
    background: #0d0d10;
}

body.training-page-v3 .training-v32-why > span,
body.training-page-v3 .training-v32-example > span {
    display: block;
    margin-bottom: 6px;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .065em;
    text-transform: uppercase;
    color: var(--tr-muted-2);
}

body.training-page-v3 .training-v32-why p {
    margin: 0;
    font-size: 9px;
    line-height: 1.5;
    color: #85858f;
}

body.training-page-v3 .training-v32-example {
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid var(--tr-line-soft);
}

body.training-page-v3 .training-v32-example strong {
    display: block;
    font-size: 9.5px;
    line-height: 1.45;
    color: #d3d3d9;
}

body.training-page-v3 .training-v32-actions {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
}

body.training-page-v3 .training-v32-open-position,
body.training-page-v3 .training-v32-complete {
    min-height: 38px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-decoration: none;
    font: inherit;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

body.training-page-v3 .training-v32-open-position {
    border: 1px solid var(--tr-accent);
    background: var(--tr-accent);
    color: #070709;
}

body.training-page-v3 .training-v32-open-position span {
    font-size: 14px;
}

body.training-page-v3 .training-v32-complete {
    border: 1px solid #3b3b43;
    background: transparent;
    color: #b0b0b8;
}

body.training-page-v3 .training-v32-complete.is-complete {
    border-color: rgba(99,230,163,.38);
    color: var(--tr-good);
}

/* Optional extra positions no longer dominate the page. */
body.training-page-v3 .training-v32-library-details {
    border-top: 1px solid var(--tr-line);
    border-bottom: 1px solid var(--tr-line);
    background: #09090b;
}

body.training-page-v3 .training-v32-library-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 4px;
    list-style: none;
    cursor: pointer;
}

body.training-page-v3 .training-v32-library-details > summary::-webkit-details-marker {
    display: none;
}

body.training-page-v3 .training-v32-library-details > summary > div {
    display: grid;
    gap: 4px;
}

body.training-page-v3 .training-v32-library-details > summary strong {
    font-size: 13px;
}

body.training-page-v3 .training-v32-library-details > summary > span {
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
    color: var(--tr-accent);
}

body.training-page-v3 .training-v32-library-inner {
    padding: 0 0 18px;
}

body.training-page-v3 .training-v32-library-inner > p {
    max-width: 760px;
    margin: 0 0 12px;
    font-size: 10px;
    line-height: 1.5;
    color: var(--tr-muted);
}

@media (max-width: 1180px) {
    body.training-page-v3 .training-v32-day-card {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    body.training-page-v3 .training-v32-day-side {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px solid var(--tr-line-soft);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr);
        gap: 20px;
    }

    body.training-page-v3 .training-v32-actions {
        align-self: end;
        padding-top: 0;
    }
}

@media (max-width: 820px) {
    body.training-page-v3 .training-v32-flow-map {
        grid-template-columns: 1fr;
    }

    body.training-page-v3 .training-v32-flow-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }

    body.training-page-v3 .training-v32-day-card {
        grid-template-columns: 1fr;
    }

    body.training-page-v3 .training-v32-day-rail {
        border-right: 0;
        border-bottom: 1px solid var(--tr-line-soft);
    }

    body.training-page-v3 .training-v32-personal-tag {
        margin-top: 0;
    }

    body.training-page-v3 .training-v32-day-side {
        display: block;
    }

    body.training-page-v3 .training-v32-actions {
        margin-top: 14px;
    }
}



/* =========================================================
   INTERACTIVE TRAINING V1 — PUZZLE MODE
   ========================================================= */

body.training-page-v3 .training-puzzle-hub {
    overflow: hidden;

    border: 1px solid var(--tr-line);
    border-top: 2px solid var(--tr-accent);
    border-radius: 9px;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(255,43,214,.075),
            transparent 34%
        ),
        #0d0d10;
}

body.training-page-v3 .training-puzzle-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;

    padding: 24px 26px;
}

body.training-page-v3 .training-puzzle-intro-copy h2 {
    margin: 6px 0 8px;

    font-size: clamp(25px, 2.4vw, 35px);
    line-height: 1.05;
    letter-spacing: -.035em;
}

body.training-page-v3 .training-puzzle-intro-copy > p {
    max-width: 760px;
    margin: 0;

    color: var(--tr-muted);

    font-size: 11px;
    line-height: 1.6;
}

body.training-page-v3 .training-puzzle-intro-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 15px;
}

body.training-page-v3 .training-puzzle-intro-meta span {
    padding: 5px 8px;

    border: 1px solid var(--tr-line-soft);
    border-radius: 999px;

    color: #777781;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

body.training-page-v3 .training-puzzle-start {
    min-width: 176px;
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 0 16px;

    border: 1px solid var(--tr-accent);
    border-radius: 0;

    background: var(--tr-accent);
    color: #070709;

    font: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .035em;
    text-transform: uppercase;
}

body.training-page-v3 .training-puzzle-start span {
    font-size: 17px;
}

body.training-page-v3 .training-puzzle-start:disabled {
    border-color: #34343a;
    background: #17171a;
    color: #666670;
}


/* ---------- session header ---------- */

body.training-page-v3 .training-puzzle-session-header {
    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 13px 17px;

    border-bottom: 1px solid var(--tr-line);

    background: #0b0b0e;
}

body.training-page-v3 .training-puzzle-session-header > div:first-child {
    display: grid;
    gap: 5px;
}

body.training-page-v3 .training-puzzle-session-header strong {
    font-size: 15px;
}

body.training-page-v3 .training-puzzle-session-header-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

body.training-page-v3 .training-puzzle-session-header-right > span {
    color: #777781;
    font-size: 9px;
}

body.training-page-v3 .training-puzzle-exit {
    padding: 0;

    border: 0;
    background: transparent;
    color: #777781;

    font: inherit;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

body.training-page-v3 .training-puzzle-exit:hover {
    color: #fff;
}


/* ---------- puzzle workspace ---------- */

body.training-page-v3 .training-puzzle-layout {
    display: grid;
    grid-template-columns: minmax(520px, 1.12fr) minmax(330px, .68fr);
    gap: 0;

    min-height: 610px;
}

body.training-page-v3 .training-puzzle-board-panel {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 22px 24px 18px;

    border-right: 1px solid var(--tr-line);

    background: #09090b;
}

body.training-page-v3 .training-puzzle-board-wrap {
    position: relative;

    width: min(100%, 690px);
    margin: 0 auto;
}

body.training-page-v3 .training-puzzle-board .fen-board {
    width: 100%;
    aspect-ratio: 1 / 1;

    border: 1px solid #3a2e27;
    border-radius: 4px;

    box-shadow: 0 22px 58px rgba(0,0,0,.34);
}

body.training-page-v3 .training-puzzle-board .fen-square {
    position: relative;
}

body.training-page-v3 .training-puzzle-board .fen-piece {
    cursor: grab;
}

body.training-page-v3 .training-puzzle-board .fen-piece:active {
    cursor: grabbing;
}

body.training-page-v3 .training-puzzle-board .fen-piece.is-disabled {
    cursor: default;
}



body.training-page-v3 .training-puzzle-board .fen-square.is-answer {
    box-shadow: inset 0 0 0 4px rgba(99,230,163,.78);
}

body.training-page-v3 .training-puzzle-board .fen-square.is-drag-source {
    opacity: .72;
}

body.training-page-v3 .training-puzzle-feedback {
    position: absolute;
    inset: 0;
    z-index: 20;

    display: grid;
    place-items: center;

    pointer-events: none;
}




body.training-page-v3 .training-puzzle-board-caption {
    width: min(100%, 690px);
    margin: 12px auto 0;

    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
}

body.training-page-v3 .training-puzzle-board-caption strong {
    font-size: 12px;
}

body.training-page-v3 .training-puzzle-board-caption span {
    color: #666670;
    font-size: 8px;
    text-align: right;
}


/* ---------- side panel ---------- */

body.training-page-v3 .training-puzzle-side {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 22px;

    background: #101013;
}

body.training-page-v3 .training-puzzle-question > span,
body.training-page-v3 .training-puzzle-solved > span {
    color: var(--tr-accent);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .075em;
    text-transform: uppercase;
}

body.training-page-v3 .training-puzzle-question h3,
body.training-page-v3 .training-puzzle-solved h3 {
    margin: 8px 0 9px;

    font-size: clamp(24px, 2vw, 31px);
    line-height: 1.05;
    letter-spacing: -.03em;
}

body.training-page-v3 .training-puzzle-question > p,
body.training-page-v3 .training-puzzle-solved > p {
    margin: 0;

    color: var(--tr-muted);

    font-size: 10.5px;
    line-height: 1.6;
}

body.training-page-v3 .training-puzzle-attempts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-top: 20px;
    padding: 12px 0;

    border-top: 1px solid var(--tr-line-soft);
    border-bottom: 1px solid var(--tr-line-soft);
}

body.training-page-v3 .training-puzzle-attempts span,
body.training-page-v3 .training-puzzle-answer-row span,
body.training-page-v3 .training-puzzle-source-row span {
    color: #696973;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

body.training-page-v3 .training-puzzle-attempts strong {
    color: #fff;
    font-size: 18px;
}

body.training-page-v3 .training-puzzle-solved {
    padding-top: 2px;
}

body.training-page-v3 .training-puzzle-solved.is-revealed > span {
    color: #e3c85d;
}

body.training-page-v3 .training-puzzle-answer-row,
body.training-page-v3 .training-puzzle-source-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 17px;
    padding: 12px 0;

    border-top: 1px solid var(--tr-line-soft);
}

body.training-page-v3 .training-puzzle-answer-row strong {
    color: var(--tr-good);
    font-size: 20px;
}

body.training-page-v3 .training-puzzle-source-row strong {
    max-width: 230px;

    color: #d4d4da;

    font-size: 10px;
    font-weight: 650;
    line-height: 1.4;
    text-align: right;
}

body.training-page-v3 .training-puzzle-actions {
    display: grid;
    gap: 8px;

    margin-top: auto;
    padding-top: 22px;
}

body.training-page-v3 .training-puzzle-actions button {
    min-height: 42px;
    padding: 0 13px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    border-radius: 0;

    font: inherit;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.training-page-v3 .training-puzzle-reveal,
body.training-page-v3 .training-puzzle-review {
    border: 1px solid #3b3b43;
    background: transparent;
    color: #a8a8b1;
}

body.training-page-v3 .training-puzzle-reveal:hover,
body.training-page-v3 .training-puzzle-review:hover {
    border-color: #56565f;
    color: #fff;
}

body.training-page-v3 .training-puzzle-next {
    border: 1px solid var(--tr-accent);
    background: var(--tr-accent);
    color: #070709;
}

body.training-page-v3 .training-puzzle-next span {
    font-size: 15px;
}


/* ---------- summary ---------- */

body.training-page-v3 .training-puzzle-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 34px;
    align-items: center;

    padding: 28px 26px;
}

body.training-page-v3 .training-puzzle-summary h2 {
    margin: 6px 0 8px;

    font-size: clamp(27px, 2.6vw, 38px);
    line-height: 1.04;
}

body.training-page-v3 .training-puzzle-summary p {
    max-width: 720px;
    margin: 0;

    color: var(--tr-muted);

    font-size: 11px;
    line-height: 1.6;
}

body.training-page-v3 .training-puzzle-summary-actions {
    display: flex;
    gap: 8px;
}

body.training-page-v3 .training-puzzle-summary-actions button,
body.training-page-v3 .training-puzzle-summary-actions a {
    min-height: 44px;
    padding: 0 15px;

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

    font: inherit;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
}

body.training-page-v3 .training-puzzle-restart {
    border: 1px solid var(--tr-accent);
    background: var(--tr-accent);
    color: #070709;
}

body.training-page-v3 .training-puzzle-summary-actions a {
    border: 1px solid #3b3b43;
    color: #c0c0c7;
}


@media (max-width: 1050px) {

    body.training-page-v3 .training-puzzle-layout {
        grid-template-columns: 1fr;
    }

    body.training-page-v3 .training-puzzle-board-panel {
        border-right: 0;
        border-bottom: 1px solid var(--tr-line);
    }

    body.training-page-v3 .training-puzzle-side {
        min-height: 330px;
    }
}

@media (max-width: 760px) {

    body.training-page-v3 .training-puzzle-intro,
    body.training-page-v3 .training-puzzle-summary {
        grid-template-columns: 1fr;
    }

    body.training-page-v3 .training-puzzle-start {
        width: 100%;
    }

    body.training-page-v3 .training-puzzle-session-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.training-page-v3 .training-puzzle-session-header-right {
        width: 100%;
        justify-content: space-between;
    }

    body.training-page-v3 .training-puzzle-layout {
        min-height: 0;
    }

    body.training-page-v3 .training-puzzle-board-panel {
        padding: 14px 10px 13px;
    }

    body.training-page-v3 .training-puzzle-board-caption {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    body.training-page-v3 .training-puzzle-board-caption span {
        text-align: left;
    }

    body.training-page-v3 .training-puzzle-side {
        padding: 18px;
    }

    body.training-page-v3 .training-puzzle-summary-actions {
        align-items: stretch;
        flex-direction: column;
    }
}


/* =========================================================
   INTERACTIVE TRAINING V1.1
   True pointer drag + conservative puzzle selection messaging
   ========================================================= */

/*
   style.css globally disables pointer events on .fen-piece because
   Game Review pieces are display-only. Interactive Training needs
   real piece interaction, so override that rule here.
*/
body.training-page-v3 .training-puzzle-board .fen-piece {
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    touch-action: none !important;

    cursor: grab !important;
}

body.training-page-v3 .training-puzzle-board .fen-piece:active {
    cursor: grabbing !important;
}

body.training-page-v3 .training-puzzle-board .fen-piece.is-disabled {
    pointer-events: none !important;
    cursor: default !important;
}

.training-puzzle-drag-ghost {
    position: fixed !important;
    z-index: 99999 !important;

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

    pointer-events: none !important;
    user-select: none !important;

    object-fit: contain;

    opacity: .94;

    filter:
        drop-shadow(0 10px 18px rgba(0, 0, 0, .34));

    transform: scale(1.04);
}

body.training-page-v3 .training-puzzle-board .fen-square.is-drag-source .fen-piece {
    opacity: .22;
}

body.training-page-v3 .training-puzzle-board .fen-square.is-drag-target {
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, .18);
}


/* =========================================================
   INTERACTIVE TRAINING V3.1 — SELECTION DIAGNOSTICS
   Shown only as a small tuning aid; does not dominate the UI.
   ========================================================= */

body.training-page-v3 .training-puzzle-diagnostics {
    max-width: 760px;
    margin: 9px 0 0;
    font-size: 9px;
    line-height: 1.45;
    color: #6f6f79;
}


/* =========================================================
   PERSONAL PUZZLE ENGINE V2
   Played move arrow + right-side move context
   ========================================================= */

body.training-page-v3 .training-puzzle-board {
    position: relative;
}

body.training-page-v3 .training-played-move-arrow {
    position: absolute;
    inset: 0;
    z-index: 12;

    width: 100%;
    height: 100%;

    pointer-events: none;
}

body.training-page-v3 .training-played-move-arrow.hidden {
    display: none;
}

body.training-page-v3 .training-puzzle-played-move-card {
    margin: 0 0 22px;
    padding: 15px 16px;

    border: 1px solid rgba(239, 72, 72, .28);
    border-left: 3px solid rgba(239, 72, 72, .84);
    border-radius: 6px;

    background:
        linear-gradient(
            90deg,
            rgba(239, 72, 72, .075),
            transparent 76%
        ),
        #0d0d10;
}

body.training-page-v3 .training-puzzle-played-move-card > span {
    display: block;
    margin-bottom: 7px;

    color: rgba(239, 96, 96, .88);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .075em;
    text-transform: uppercase;
}

body.training-page-v3 .training-puzzle-played-move-card > strong {
    display: block;

    color: #f05c5c;

    font-size: clamp(25px, 2.1vw, 34px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.025em;
}

body.training-page-v3 .training-puzzle-played-move-card > small {
    display: block;
    margin-top: 8px;

    color: #7f696b;

    font-size: 8px;
    line-height: 1.45;
}

body.training-page-v3 .training-puzzle-solved .training-puzzle-answer-row + .training-puzzle-answer-row {
    margin-top: 7px;
}


/* =========================================================
   PERSONAL PUZZLE ENGINE V2.2 — BOARD UX
   Criteria and puzzle selection are unchanged.
   ========================================================= */

/* No doubled piece while pointer-dragging. */
body.training-page-v3 .training-puzzle-board .fen-square.is-drag-source .fen-piece {
    opacity: 0 !important;
}

/* Legal destination hint: small neutral dot. */
body.training-page-v3 .training-puzzle-board .fen-square.is-legal-target::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 7;

    width: 30%;
    aspect-ratio: 1 / 1;

    border-radius: 999px;

    background: rgba(20, 20, 24, .28);

    transform: translate(-50%, -50%);

    pointer-events: none;
}

/* On an occupied legal destination, use a subtle capture ring instead. */
body.training-page-v3 .training-puzzle-board .fen-square.is-legal-capture::after {
    width: 90%;
    aspect-ratio: 1 / 1;

    border: 4px solid rgba(20, 20, 24, .24);
    background: transparent;

    box-sizing: border-box;
}

/* Legal drag target remains visible without looking like an error. */
body.training-page-v3 .training-puzzle-board .fen-square.is-drag-target {
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, .25);
}

/*
   Smooth automatic opponent reply.
   The actual board is updated only after this transition completes.
*/
body.training-page-v3 .training-puzzle-board .fen-board {
    position: relative;
    overflow: hidden;
}

body.training-page-v3 .training-puzzle-motion-piece {
    position: absolute !important;
    z-index: 18 !important;

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

    object-fit: contain;

    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;

    transition:
        transform var(--training-motion-duration, 320ms)
        cubic-bezier(.22, .78, .24, 1);

    will-change: transform;

    filter:
        drop-shadow(
            0 5px 10px rgba(0, 0, 0, .16)
        );
}

body.training-page-v3 .training-puzzle-board .fen-piece.is-motion-source-hidden {
    visibility: hidden !important;
}

body.training-page-v3 .training-puzzle-board .fen-piece.is-motion-capture-fade {
    opacity: .18 !important;

    transition:
        opacity 145ms ease-out;
}

/*
   Keep the Game Review-style red arrow unchanged:
   thin shaft + open chevron + low opacity.
*/
body.training-page-v3 .training-played-move-arrow {
    pointer-events: none;
}


/* =========================================================
   PERSONAL PUZZLE ENGINE V2.3 — SIZE + SMOOTH DROP
   Puzzle logic / selection criteria are unchanged.
   ========================================================= */

/*
   Explicitly restore/lock the original Training board dimensions.
   These are the same dimensions used before the Board UX changes.
*/
body.training-page-v3 .training-puzzle-board-wrap {
    width: min(100%, 690px) !important;
    max-width: 690px !important;
    flex: 0 0 auto;
}

body.training-page-v3 .training-puzzle-board {
    width: 100%;
}

body.training-page-v3 .training-puzzle-board .fen-board {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
}

/*
   The source piece stays hidden for the entire pointer-drag.
   On a correct drop, JS immediately commits fen_after before the
   browser can repaint the old source position.
*/
body.training-page-v3 .training-puzzle-board .fen-square.is-drag-source .fen-piece {
    opacity: 0 !important;
}

/*
   Keep automatic opponent movement visually soft.
*/
body.training-page-v3 .training-puzzle-motion-piece {
    transition:
        transform var(--training-motion-duration, 320ms)
        cubic-bezier(.20, .76, .24, 1) !important;
}


/* =========================================================
   PERSONAL PUZZLE ENGINE V2.4 — VISUAL POLISH
   Puzzle logic / criteria are unchanged.
   ========================================================= */

/*
   Selected piece:
   full fuchsia translucent square, no border.
*/
body.training-page-v3 .training-puzzle-board .fen-square.is-selected {
    box-shadow: none !important;
}

body.training-page-v3 .training-puzzle-board .fen-square.is-selected::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 2;

    background: rgba(255, 28, 207, .28);

    pointer-events: none;
}

/*
   Wrong legal move:
   full red translucent source + destination squares, no border.
*/
body.training-page-v3 .training-puzzle-board .fen-square.is-wrong {
    box-shadow: none !important;
}

body.training-page-v3 .training-puzzle-board .fen-square.is-wrong::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 3;

    background: rgba(235, 68, 78, .34);

    pointer-events: none;

    animation:
        trainingWrongSquarePulse
        520ms
        cubic-bezier(.20, .72, .20, 1);
}

/*
   Keep pieces above the translucent square overlays.
*/
body.training-page-v3 .training-puzzle-board .fen-square .fen-piece {
    position: relative;
    z-index: 5;
}

/*
   Legal-move dots/rings remain above the selection fill
   but below chess pieces.
*/
body.training-page-v3 .training-puzzle-board .fen-square.is-legal-target::after,
body.training-page-v3 .training-puzzle-board .fen-square.is-legal-capture::after {
    z-index: 4;
}

@keyframes trainingWrongSquarePulse {

    0% {
        opacity: .35;
    }

    35% {
        opacity: 1;
    }

    100% {
        opacity: .86;
    }
}


/* ---------------------------------------------------------
   Modern success / error feedback
   --------------------------------------------------------- */

body.training-page-v3 .training-puzzle-feedback {
    backdrop-filter:
        blur(1.5px);
}

body.training-page-v3 .training-puzzle-feedback .training-feedback-badge {
    width: 108px;
    height: 108px;

    display: grid;
    place-items: center;

    border-radius: 30px;

    border: 1px solid rgba(255,255,255,.11);

    box-shadow:
        0 24px 64px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.08);

    transform:
        scale(.88);

    opacity: 0;

    animation:
        trainingFeedbackIn
        180ms
        cubic-bezier(.16,.84,.26,1)
        forwards;
}

body.training-page-v3 .training-puzzle-feedback .training-feedback-badge svg {
    width: 62px;
    height: 62px;

    overflow: visible;
}

body.training-page-v3 .training-puzzle-feedback.is-correct .training-feedback-badge {
    background:
        linear-gradient(
            145deg,
            rgba(27, 77, 54, .94),
            rgba(9, 29, 20, .96)
        );

    border-color:
        rgba(99,230,163,.28);

    box-shadow:
        0 24px 64px rgba(0,0,0,.42),
        0 0 0 1px rgba(99,230,163,.06),
        0 0 42px rgba(99,230,163,.10);
}

body.training-page-v3 .training-puzzle-feedback.is-wrong .training-feedback-badge {
    background:
        linear-gradient(
            145deg,
            rgba(84, 29, 34, .95),
            rgba(31, 10, 13, .97)
        );

    border-color:
        rgba(240,80,80,.30);

    box-shadow:
        0 24px 64px rgba(0,0,0,.42),
        0 0 0 1px rgba(240,80,80,.06),
        0 0 42px rgba(240,80,80,.10);
}

body.training-page-v3 .training-puzzle-feedback.is-answer .training-feedback-badge {
    background:
        linear-gradient(
            145deg,
            rgba(72, 57, 22, .95),
            rgba(27, 22, 9, .97)
        );

    border-color:
        rgba(239,201,96,.28);
}

body.training-page-v3 .training-feedback-check,
body.training-page-v3 .training-feedback-cross,
body.training-page-v3 .training-feedback-answer {
    fill: none;

    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect:
        non-scaling-stroke;
}

body.training-page-v3 .training-feedback-check {
    stroke: #73e6ad;

    stroke-dasharray: 56;
    stroke-dashoffset: 56;

    animation:
        trainingDrawIcon
        250ms
        70ms
        ease-out
        forwards;
}

body.training-page-v3 .training-feedback-cross {
    stroke: #f16a73;

    stroke-dasharray: 70;
    stroke-dashoffset: 70;

    animation:
        trainingDrawIcon
        230ms
        55ms
        ease-out
        forwards;
}

body.training-page-v3 .training-feedback-answer {
    stroke: #e8c96f;
}

body.training-page-v3 .training-feedback-answer-dot {
    fill: #e8c96f;
}

@keyframes trainingFeedbackIn {

    to {
        transform:
            scale(1);

        opacity: 1;
    }
}

@keyframes trainingDrawIcon {

    to {
        stroke-dashoffset: 0;
    }
}


/* TRAINING V2.6 — more visible legal targets + strict hidden feedback */
body.training-page-v3 .training-puzzle-board .fen-square.is-legal-target::after {
    width: 30% !important;
}

body.training-page-v3 .training-puzzle-board .fen-square.is-legal-capture::after {
    width: 90% !important;
}

body.training-page-v3 .training-puzzle-feedback.hidden {
    display: none !important;
}


/* =========================================================
   TRAINING V2.7 — CACHE-PROOF VISUAL OVERRIDES
   ========================================================= */

/*
   Make legal destinations visibly larger.
   The !important rules are intentionally last in the file so older
   Training rules cannot override them.
*/
body.training-page-v3 .training-puzzle-board .fen-square.is-legal-target::after {
    width: 42% !important;
    min-width: 22px !important;
}

body.training-page-v3 .training-puzzle-board .fen-square.is-legal-capture::after {
    width: 92% !important;
    min-width: 0 !important;
}

/*
   Hidden feedback is hidden through every mechanism, not only display.
*/
body.training-page-v3 .training-puzzle-feedback.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =========================================================
   MIXED TRAINING 10 V1
   Personal Puzzles + Lichess Focus drills.
   ========================================================= */

body.training-page-v3 .training-puzzle-source-badge {
    align-self: flex-start;

    margin: 0 0 14px;
    padding: 5px 8px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;

    background: rgba(255,255,255,.025);

    color: #9a9aa4;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: .075em;
    text-transform: uppercase;
}

body.training-page-v3 .training-puzzle-source-badge.is-personal {
    border-color: rgba(239, 90, 90, .24);
    color: #c98181;
}

body.training-page-v3 .training-puzzle-source-badge.is-focus {
    border-color: rgba(255,43,214,.34);

    background:
        rgba(255,43,214,.055);

    color: var(--tr-accent);
}


/* =========================================================
   ADAPTIVE TRAINING V1 — CURRENT SESSION STATS
   ========================================================= */

body.training-page-v3 .training-puzzle-summary-stats {
    display: grid;
    gap: 1px;

    max-width: 760px;
    margin-top: 18px;

    border: 1px solid var(--tr-line-soft);

    background: var(--tr-line-soft);
}

body.training-page-v3 .training-puzzle-summary-stat-row {
    display: grid;
    grid-template-columns:
        minmax(150px, 1fr)
        auto
        auto;
    gap: 18px;
    align-items: center;

    min-height: 46px;
    padding: 9px 11px;

    background: #0c0c0f;
}

body.training-page-v3 .training-puzzle-summary-stat-row > span {
    min-width: 0;

    color: #cfcfd5;

    font-size: 9px;
    font-weight: 750;
}

body.training-page-v3 .training-puzzle-summary-stat-row > strong {
    color: #fff;

    font-size: 10px;
    white-space: nowrap;
}

body.training-page-v3 .training-puzzle-summary-stat-row > small {
    color: #71717b;

    font-size: 8px;
    white-space: nowrap;
    text-align: right;
}

body.training-page-v3 .training-puzzle-summary-empty {
    padding: 12px;

    color: #777781;

    font-size: 9px;
}

body.training-page-v3 .training-puzzle-restart:disabled {
    border-color: #34343a;
    background: #17171a;
    color: #666670;
    cursor: wait;
}

@media (max-width: 680px) {

    body.training-page-v3 .training-puzzle-summary-stat-row {
        grid-template-columns: 1fr auto;
    }

    body.training-page-v3 .training-puzzle-summary-stat-row > small {
        grid-column: 1 / -1;
        text-align: left;
    }
}


/* =========================================================
   TRAINING V4 — CHESSREVEAL PRODUCT UI
   2026-09-05

   Rebuild goals:
   - same visual language as Player Profile / Game Review / Weakness Map
   - less purple wash, fewer oversized containers
   - stronger information hierarchy
   - compact, scannable 7-day plan
   - expandable session details + persistent progress
   - preserve all Interactive Training board mechanics
   ========================================================= */

body.training-page-v4 {
    --tr4-card: #0e0e11;
    --tr4-card-deep: #0a0a0d;
    --tr4-card-raised: #111114;
    --tr4-line: #29292f;
    --tr4-line-soft: #202025;
    --tr4-text: #f5f5f7;
    --tr4-soft: #bcbcc4;
    --tr4-muted: #81818b;
    --tr4-muted-2: #5f5f69;
    --tr4-accent: #ff2bd6;
    --tr4-success: #74c88a;
}

body.training-page-v4 .training-v4-stack {
    gap: 30px;
}

body.training-page-v4 .training-v4-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 38px;
}

body.training-page-v4 .training-v4-section-head h1,
body.training-page-v4 .training-v4-section-head h2 {
    margin: 7px 0 0;
    color: #f5f5f7;
    font-weight: 740;
    line-height: 1.02;
    letter-spacing: -.042em;
}

body.training-page-v4 .training-v4-section-head h1 {
    max-width: 880px;
    font-size: clamp(30px, 3vw, 42px);
}

body.training-page-v4 .training-v4-section-head h2 {
    font-size: clamp(29px, 2.8vw, 38px);
}

body.training-page-v4 .training-v4-section-head p {
    max-width: 810px;
    margin: 10px 0 0;
    color: #85858f;
    font-size: 11.5px;
    line-height: 1.62;
}


/* ---------------------------------------------------------
   1. TRAINING PRIORITIES
   --------------------------------------------------------- */

body.training-page-v4 .training-v4-priorities {
    padding: 24px 24px 22px;
    border: 1px solid var(--tr4-line);
    border-top: 2px solid var(--tr4-accent);
    background:
        linear-gradient(100deg, rgba(255,43,214,.035), transparent 34%),
        #0c0c0f;
}

body.training-page-v4 .training-v4-basis {
    flex: 0 0 auto;
    min-width: 128px;
    padding: 10px 12px;
    border-left: 1px solid #303036;
    text-align: right;
}

body.training-page-v4 .training-v4-basis span {
    display: block;
    margin-bottom: 4px;
    color: #606069;
    font-size: 7px;
    font-weight: 820;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.training-page-v4 .training-v4-basis strong {
    color: #fff;
    font-size: 14px;
    font-weight: 730;
}

body.training-page-v4 .training-v4-priority-grid {
    display: grid;
    grid-template-columns: 1.08fr 1fr .9fr;
    gap: 8px;
    margin-top: 18px;
}

body.training-page-v4 .training-v4-priority-card {
    min-width: 0;
    min-height: 158px;
    display: flex;
    flex-direction: column;
    padding: 15px 16px 14px;
    border: 1px solid #242429;
    background: #0e0e11;
}

body.training-page-v4 .training-v4-priority-main {
    border-top: 2px solid var(--tr4-accent);
    background:
        linear-gradient(180deg, rgba(255,43,214,.055), transparent 58%),
        #0e0e11;
}

body.training-page-v4 .training-v4-priority-secondary {
    border-top: 2px solid rgba(255,43,214,.42);
}

body.training-page-v4 .training-v4-priority-phase {
    border-top: 2px solid #494951;
}

body.training-page-v4 .training-v4-priority-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
}

body.training-page-v4 .training-v4-rank {
    color: var(--tr4-accent);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

body.training-page-v4 .training-v4-label {
    color: #666670;
    font-size: 7px;
    font-weight: 840;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.training-page-v4 .training-v4-priority-card > strong {
    display: block;
    margin-bottom: 7px;
    color: #fff;
    font-size: clamp(19px, 1.8vw, 25px);
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -.026em;
}

body.training-page-v4 .training-v4-priority-card > p {
    margin: 0;
    color: #878791;
    font-size: 9.5px;
    line-height: 1.5;
}

body.training-page-v4 .training-v4-priority-note {
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid #202025;
    color: #676771;
    font-size: 7.5px;
    line-height: 1.4;
}

body.training-page-v4 .training-v4-priority-note b {
    color: #d7d7dc;
    font-weight: 760;
}


/* ---------------------------------------------------------
   2. INTERACTIVE TRAINING INTRO
   Active chessboard/session mechanics are intentionally preserved.
   --------------------------------------------------------- */

body.training-page-v4 .training-puzzle-hub {
    border-radius: 0;
    border: 1px solid var(--tr4-line);
    border-top: 2px solid var(--tr4-accent);
    background: #0c0c0f;
}

body.training-page-v4 .training-v4-puzzle-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, .42fr);
    gap: 34px;
    align-items: stretch;
    padding: 0;
}

body.training-page-v4 .training-v4-puzzle-copy {
    min-width: 0;
    padding: 23px 24px 22px;
}

body.training-page-v4 .training-v4-puzzle-copy h2 {
    max-width: 780px;
    margin: 7px 0 9px;
    color: #fff;
    font-size: clamp(27px, 2.7vw, 38px);
    font-weight: 735;
    line-height: 1.03;
    letter-spacing: -.042em;
}

body.training-page-v4 .training-v4-puzzle-copy > p {
    max-width: 820px;
    margin: 0;
    color: #85858f;
    font-size: 11px;
    line-height: 1.6;
}

body.training-page-v4 .training-v4-puzzle-copy .training-puzzle-diagnostics {
    margin-top: 10px;
    color: #62626c;
    font-size: 8.5px;
}

body.training-page-v4 .training-v4-puzzle-cta {
    display: flex;
    flex-direction: column;
    padding: 18px;
    border-left: 1px solid var(--tr4-line-soft);
    background: #09090c;
}

body.training-page-v4 .training-v4-puzzle-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #232328;
}

body.training-page-v4 .training-v4-puzzle-metrics > div {
    min-width: 0;
    padding: 12px;
    border-right: 1px solid #232328;
}

body.training-page-v4 .training-v4-puzzle-metrics > div:last-child {
    border-right: 0;
}

body.training-page-v4 .training-v4-puzzle-metrics span {
    display: block;
    margin-bottom: 5px;
    color: #5f5f69;
    font-size: 7px;
    font-weight: 820;
    letter-spacing: .075em;
    text-transform: uppercase;
}

body.training-page-v4 .training-v4-puzzle-metrics strong {
    display: block;
    color: #ededf1;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

body.training-page-v4 .training-v4-puzzle-start {
    width: 100%;
    min-height: 46px;
    margin-top: auto;
    border-radius: 0;
}


/* ---------------------------------------------------------
   3. WEEK HEADER + STAGE RAIL
   --------------------------------------------------------- */

body.training-page-v4 .training-v4-week {
    display: grid;
    gap: 12px;
}

body.training-page-v4 .training-v4-week-head {
    align-items: flex-end;
    padding-bottom: 4px;
}

body.training-page-v4 .training-v4-week-head > div:first-child {
    min-width: 0;
}

body.training-page-v4 .training-v4-week-head p {
    max-width: 700px;
}

body.training-page-v4 .training-v4-progress {
    flex: 0 0 265px;
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #25252b;
    background: #0c0c0f;
}

body.training-page-v4 .training-v4-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body.training-page-v4 .training-v4-progress-copy span {
    color: #62626c;
    font-size: 7px;
    font-weight: 820;
    letter-spacing: .075em;
    text-transform: uppercase;
}

body.training-page-v4 .training-v4-progress-copy strong {
    color: #e8e8ec;
    font-size: 10px;
    font-weight: 720;
}

body.training-page-v4 .training-v4-progress-track {
    height: 4px;
    overflow: hidden;
    background: #25252a;
}

body.training-page-v4 .training-v4-progress-fill {
    width: 0;
    height: 100%;
    background: var(--tr4-accent);
    transition: width 180ms ease;
}

body.training-page-v4 .training-v4-stage-rail {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr;
    border: 1px solid #25252b;
    background: #0b0b0e;
}

body.training-page-v4 .training-v4-stage-rail > div {
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 9px;
    align-items: center;
    min-height: 48px;
    padding: 10px 12px;
    border-right: 1px solid #25252b;
}

body.training-page-v4 .training-v4-stage-rail > div:last-child {
    border-right: 0;
}

body.training-page-v4 .training-v4-stage-rail span {
    color: var(--tr4-accent);
    font-size: 8px;
    font-weight: 900;
}

body.training-page-v4 .training-v4-stage-rail strong {
    min-width: 0;
    overflow: hidden;
    color: #d8d8de;
    font-size: 10px;
    font-weight: 690;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.training-page-v4 .training-v4-stage-rail small {
    color: #5e5e67;
    font-size: 7px;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   4. WEEK — COMPACT EXPANDABLE DAYS
   --------------------------------------------------------- */

body.training-page-v4 .training-v4-plan-list {
    display: grid;
    gap: 6px;
}

body.training-page-v4 .training-v4-day {
    position: relative;
    overflow: hidden;
    border: 1px solid #25252b;
    background: #0d0d10;
}

body.training-page-v4 .training-v4-day::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #393940;
}

body.training-page-v4 .training-v4-day.stage-build::before {
    background: var(--tr4-accent);
}

body.training-page-v4 .training-v4-day.stage-reinforce::before {
    background: rgba(255,43,214,.48);
}

body.training-page-v4 .training-v4-day.stage-transfer::before {
    background: #5a5a63;
}

body.training-page-v4 .training-v4-day.is-next {
    border-color: rgba(255,43,214,.52);
    background:
        linear-gradient(90deg, rgba(255,43,214,.035), transparent 30%),
        #0d0d10;
}

body.training-page-v4 .training-v4-day.is-complete {
    border-color: rgba(116,200,138,.20);
}

body.training-page-v4 .training-v4-day-summary {
    list-style: none;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 78px;
    gap: 15px;
    align-items: center;
    min-height: 86px;
    padding: 12px 14px 12px 16px;
    cursor: pointer;
}

body.training-page-v4 .training-v4-day-summary::-webkit-details-marker {
    display: none;
}

body.training-page-v4 .training-v4-day-summary:hover {
    background: rgba(255,255,255,.018);
}

body.training-page-v4 .training-v4-day-index {
    display: grid;
    gap: 2px;
    justify-items: start;
}

body.training-page-v4 .training-v4-day-index span {
    color: #5d5d67;
    font-size: 7px;
    font-weight: 820;
    letter-spacing: .07em;
    text-transform: uppercase;
}

body.training-page-v4 .training-v4-day-index strong {
    color: var(--tr4-accent);
    font-size: 22px;
    font-weight: 760;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

body.training-page-v4 .training-v4-day-title {
    min-width: 0;
}

body.training-page-v4 .training-v4-day-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 5px;
    color: #6e6e78;
    font-size: 7px;
    font-weight: 760;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.training-page-v4 .training-v4-day-meta i {
    color: #3f3f45;
    font-style: normal;
}

body.training-page-v4 .training-v4-day-title h3 {
    margin: 0 0 4px;
    color: #f1f1f4;
    font-size: clamp(15px, 1.35vw, 18px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.018em;
}

body.training-page-v4 .training-v4-day-title > p {
    max-width: 850px;
    margin: 0;
    overflow: hidden;
    color: #767680;
    font-size: 9px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.training-page-v4 .training-v4-day-state {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #686872;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.training-page-v4 .training-v4-day-state b {
    color: #8b8b94;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    transition: transform 150ms ease;
}

body.training-page-v4 .training-v4-day[open] .training-v4-day-state b {
    transform: rotate(180deg);
}

body.training-page-v4 .training-v4-day-state.is-next {
    color: var(--tr4-accent);
}

body.training-page-v4 .training-v4-day-state.is-done {
    color: var(--tr4-success);
}

body.training-page-v4 .training-v4-day-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    border-top: 1px solid #222227;
    background: #0a0a0d;
}

body.training-page-v4 .training-v4-day-work {
    min-width: 0;
    padding: 15px 18px 16px 95px;
    border-right: 1px solid #222227;
}

body.training-page-v4 .training-v4-detail-label,
body.training-page-v4 .training-v4-context-block > span {
    display: block;
    margin-bottom: 8px;
    color: #5f5f69;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .075em;
    text-transform: uppercase;
}

body.training-page-v4 .training-v4-step-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.training-page-v4 .training-v4-step-list li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px 0;
    border-top: 1px solid #1f1f24;
}

body.training-page-v4 .training-v4-step-list li:last-child {
    border-bottom: 1px solid #1f1f24;
}

body.training-page-v4 .training-v4-step-list li > span {
    color: var(--tr4-accent);
    font-size: 8px;
    font-weight: 900;
}

body.training-page-v4 .training-v4-step-list p {
    margin: 0;
    color: #bdbdc5;
    font-size: 9.5px;
    line-height: 1.5;
}

body.training-page-v4 .training-v4-day-context {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 15px 16px 16px;
    background: #0d0d10;
}

body.training-page-v4 .training-v4-context-block + .training-v4-context-block {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #202025;
}

body.training-page-v4 .training-v4-context-block p {
    margin: 0;
    color: #81818b;
    font-size: 8.5px;
    line-height: 1.5;
}

body.training-page-v4 .training-v4-start-position strong {
    display: block;
    color: #d1d1d7;
    font-size: 9px;
    font-weight: 650;
    line-height: 1.45;
}

body.training-page-v4 .training-v4-day-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
    margin-top: auto;
    padding-top: 14px;
}

body.training-page-v4 .training-v4-open-position,
body.training-page-v4 .training-v4-complete {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 11px;
    border-radius: 0;
    font: inherit;
    font-size: 7.5px;
    font-weight: 880;
    letter-spacing: .035em;
    text-transform: uppercase;
    text-decoration: none;
}

body.training-page-v4 .training-v4-open-position {
    border: 1px solid var(--tr4-accent);
    background: var(--tr4-accent);
    color: #070709;
}

body.training-page-v4 .training-v4-open-position span {
    font-size: 13px;
}

body.training-page-v4 .training-v4-complete {
    min-width: 112px;
    justify-content: center;
    border: 1px solid #35353c;
    background: transparent;
    color: #9a9aa4;
}

body.training-page-v4 .training-v4-complete:hover {
    border-color: #55555e;
    color: #fff;
}

body.training-page-v4 .training-v4-complete.is-complete {
    border-color: rgba(116,200,138,.34);
    color: var(--tr4-success);
}


/* ---------------------------------------------------------
   5. EXTRA PRACTICE + AFTER WEEK
   --------------------------------------------------------- */

body.training-page-v4 .training-v32-library-details {
    border: 1px solid #242429;
    background: #0a0a0d;
}

body.training-page-v4 .training-v32-library-details > summary {
    min-height: 58px;
    padding: 12px 15px;
}

body.training-page-v4 .training-v32-library-details > summary strong {
    color: #dcdce1;
    font-size: 12px;
}

body.training-page-v4 .training-v32-library-inner {
    padding: 0 15px 15px;
}

body.training-page-v4 .training-v3-library-card {
    min-height: 118px;
    border-radius: 0;
    background: #0e0e11;
}

body.training-page-v4 .training-v3-next {
    padding: 22px 24px;
    border: 1px solid #25252b;
    border-top: 1px solid rgba(255,43,214,.48);
    background:
        linear-gradient(90deg, rgba(255,43,214,.035), transparent 44%),
        #0b0b0e;
}

body.training-page-v4 .training-v3-next h2 {
    font-size: clamp(24px, 2.3vw, 31px);
}


/* ---------------------------------------------------------
   6. ACTIVE INTERACTIVE SESSION — VISUAL COHESION ONLY
   Board interaction / dimensions remain unchanged.
   --------------------------------------------------------- */

body.training-page-v4 .training-puzzle-session-header,
body.training-page-v4 .training-puzzle-summary {
    background: #0b0b0e;
}

body.training-page-v4 .training-puzzle-side {
    background: #0e0e11;
}

body.training-page-v4 .training-puzzle-played-move-card {
    border-radius: 0;
}

body.training-page-v4 .training-puzzle-source-badge,
body.training-page-v4 .training-puzzle-intro-meta span {
    border-radius: 0;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1120px) {
    body.training-page-v4 .training-v4-priority-grid {
        grid-template-columns: 1fr 1fr;
    }

    body.training-page-v4 .training-v4-priority-phase {
        grid-column: 1 / -1;
        min-height: 128px;
    }

    body.training-page-v4 .training-v4-puzzle-intro {
        grid-template-columns: 1fr;
    }

    body.training-page-v4 .training-v4-puzzle-cta {
        border-top: 1px solid var(--tr4-line-soft);
        border-left: 0;
    }

    body.training-page-v4 .training-v4-puzzle-start {
        margin-top: 14px;
    }

    body.training-page-v4 .training-v4-day-detail {
        grid-template-columns: 1fr;
    }

    body.training-page-v4 .training-v4-day-work {
        padding-left: 18px;
        border-right: 0;
        border-bottom: 1px solid #222227;
    }
}

@media (max-width: 820px) {
    body.training-page-v4 .training-v4-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    body.training-page-v4 .training-v4-basis {
        min-width: 0;
        padding: 0;
        border-left: 0;
        text-align: left;
    }

    body.training-page-v4 .training-v4-priority-grid,
    body.training-page-v4 .training-v4-stage-rail {
        grid-template-columns: 1fr;
    }

    body.training-page-v4 .training-v4-priority-phase {
        grid-column: auto;
    }

    body.training-page-v4 .training-v4-stage-rail > div {
        border-right: 0;
        border-bottom: 1px solid #25252b;
    }

    body.training-page-v4 .training-v4-stage-rail > div:last-child {
        border-bottom: 0;
    }

    body.training-page-v4 .training-v4-progress {
        width: 100%;
        flex-basis: auto;
    }

    body.training-page-v4 .training-v4-day-summary {
        grid-template-columns: 52px minmax(0, 1fr) 64px;
        gap: 10px;
    }

    body.training-page-v4 .training-v4-day-title > p {
        white-space: normal;
    }
}

@media (max-width: 620px) {
    body.training-page-v4 .training-v4-priorities {
        padding: 19px 16px 17px;
    }

    body.training-page-v4 .training-v4-puzzle-copy,
    body.training-page-v4 .training-v4-puzzle-cta {
        padding: 17px;
    }

    body.training-page-v4 .training-v4-puzzle-metrics {
        grid-template-columns: 1fr;
    }

    body.training-page-v4 .training-v4-puzzle-metrics > div {
        border-right: 0;
        border-bottom: 1px solid #232328;
    }

    body.training-page-v4 .training-v4-puzzle-metrics > div:last-child {
        border-bottom: 0;
    }

    body.training-page-v4 .training-v4-day-summary {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 11px 11px 11px 14px;
    }

    body.training-page-v4 .training-v4-day-state {
        grid-column: 2;
        justify-self: start;
        margin-top: 2px;
    }

    body.training-page-v4 .training-v4-day-actions {
        grid-template-columns: 1fr;
    }

    body.training-page-v4 .training-v4-complete {
        width: 100%;
    }
}


/* =========================================================
   TRAINING V5 — FIRST VIEW / TRAINING BRIEF
   2026-09-05

   Only the top Training view is redesigned here.
   The V4 seven-day plan and Interactive Training remain intact.
   ========================================================= */

body.training-page-v5 .training-v5-brief {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(420px, .65fr);
    grid-template-areas:
        "main evidence"
        "focus focus";

    overflow: hidden;

    border: 1px solid #29292f;
    border-top: 2px solid var(--accent);

    background: #0c0c0f;
}


/* ---------------------------------------------------------
   Main message
   --------------------------------------------------------- */

body.training-page-v5 .training-v5-brief-main {
    grid-area: main;

    min-width: 0;

    padding: 27px 29px 25px;
}

body.training-page-v5 .training-v5-brief-main h1 {
    max-width: 820px;

    margin: 8px 0 12px;

    color: #f6f6f8;

    font-size: clamp(34px, 3.45vw, 48px);
    font-weight: 750;

    line-height: 1.01;
    letter-spacing: -.046em;
}

body.training-page-v5 .training-v5-brief-main p {
    max-width: 800px;

    margin: 0;

    color: #92929c;

    font-size: 12px;
    line-height: 1.62;
}


/* ---------------------------------------------------------
   Evidence summary — compact and factual
   --------------------------------------------------------- */

body.training-page-v5 .training-v5-evidence-summary {
    grid-area: evidence;

    min-width: 0;

    display: flex;
    flex-direction: column;

    border-left: 1px solid #29292f;

    background: #09090c;
}

body.training-page-v5 .training-v5-evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-bottom: 1px solid #242429;
}

body.training-page-v5 .training-v5-evidence-grid > div {
    min-width: 0;

    padding: 18px 15px 16px;

    border-right: 1px solid #202025;
}

body.training-page-v5 .training-v5-evidence-grid > div:last-child {
    border-right: 0;
}

body.training-page-v5 .training-v5-evidence-grid span,
body.training-page-v5 .training-v5-phase-note > span {
    display: block;

    color: #62626c;

    font-size: 7px;
    font-weight: 840;

    letter-spacing: .08em;
    text-transform: uppercase;
}

body.training-page-v5 .training-v5-evidence-grid span {
    min-height: 20px;
    margin-bottom: 8px;
}

body.training-page-v5 .training-v5-evidence-grid strong {
    display: block;

    overflow: hidden;

    color: #f0f0f3;

    font-size: 18px;
    font-weight: 730;

    line-height: 1.08;
    letter-spacing: -.02em;

    text-overflow: ellipsis;
}

body.training-page-v5 .training-v5-phase-note {
    flex: 1;

    padding: 16px 17px 17px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.training-page-v5 .training-v5-phase-note > span {
    margin-bottom: 7px;
}

body.training-page-v5 .training-v5-phase-note p {
    margin: 0;

    color: #85858f;

    font-size: 9.5px;
    line-height: 1.52;
}


/* ---------------------------------------------------------
   Two focus areas — primary and secondary are both readable.
   --------------------------------------------------------- */

body.training-page-v5 .training-v5-focus-grid {
    grid-area: focus;

    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid #29292f;
}

body.training-page-v5 .training-v5-focus-card {
    position: relative;

    min-width: 0;
    min-height: 178px;

    display: flex;
    flex-direction: column;

    padding: 18px 22px 16px;

    background: #0f0f12;
}

body.training-page-v5 .training-v5-focus-card + .training-v5-focus-card {
    border-left: 1px solid #29292f;
}

body.training-page-v5 .training-v5-focus-primary {
    background:
        linear-gradient(
            90deg,
            rgba(255, 43, 214, .045),
            transparent 42%
        ),
        #0f0f12;
}

body.training-page-v5 .training-v5-focus-primary::before,
body.training-page-v5 .training-v5-focus-secondary::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 2px;
}

body.training-page-v5 .training-v5-focus-primary::before {
    background: var(--accent);
}

body.training-page-v5 .training-v5-focus-secondary::before {
    background: rgba(255, 43, 214, .42);
}

body.training-page-v5 .training-v5-focus-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 15px;
}

body.training-page-v5 .training-v5-focus-number {
    color: var(--accent);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .08em;
}

body.training-page-v5 .training-v5-focus-label {
    color: #666670;

    font-size: 7px;
    font-weight: 850;

    letter-spacing: .08em;
    text-transform: uppercase;
}

body.training-page-v5 .training-v5-focus-card > strong {
    display: block;

    margin-bottom: 8px;

    color: #f3f3f6;

    font-size: clamp(21px, 2vw, 28px);
    font-weight: 720;

    line-height: 1.08;
    letter-spacing: -.027em;
}

body.training-page-v5 .training-v5-focus-card > p {
    max-width: 650px;

    margin: 0;

    color: #898993;

    font-size: 10px;
    line-height: 1.52;
}

body.training-page-v5 .training-v5-focus-footer {
    margin-top: auto;
    padding-top: 13px;

    border-top: 1px solid #222227;
}

body.training-page-v5 .training-v5-focus-footer span {
    color: #6b6b75;

    font-size: 7.5px;
    font-weight: 650;
}


/* ---------------------------------------------------------
   Make the following Interactive Training block feel like a
   separate action, not part of one giant top dashboard.
   --------------------------------------------------------- */

body.training-page-v5 .training-puzzle-hub {
    margin-top: -2px;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1120px) {

    body.training-page-v5 .training-v5-brief {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "evidence"
            "focus";
    }

    body.training-page-v5 .training-v5-evidence-summary {
        border-top: 1px solid #29292f;
        border-left: 0;
    }

    body.training-page-v5 .training-v5-phase-note {
        min-height: 78px;
    }
}


@media (max-width: 760px) {

    body.training-page-v5 .training-v5-brief-main {
        padding: 22px 19px 20px;
    }

    body.training-page-v5 .training-v5-evidence-grid {
        grid-template-columns: 1fr;
    }

    body.training-page-v5 .training-v5-evidence-grid > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;

        padding: 12px 16px;

        border-right: 0;
        border-bottom: 1px solid #202025;
    }

    body.training-page-v5 .training-v5-evidence-grid > div:last-child {
        border-bottom: 0;
    }

    body.training-page-v5 .training-v5-evidence-grid span {
        min-height: 0;
        margin: 0;
    }

    body.training-page-v5 .training-v5-evidence-grid strong {
        font-size: 15px;
        text-align: right;
    }

    body.training-page-v5 .training-v5-focus-grid {
        grid-template-columns: 1fr;
    }

    body.training-page-v5 .training-v5-focus-card + .training-v5-focus-card {
        border-top: 1px solid #29292f;
        border-left: 0;
    }
}


/* =========================================================
   TRAINING V6 — CLEAN TOP OVERVIEW
   2026-09-05

   Only the first Training view is changed here.
   It deliberately follows the hierarchy of Weakness Map:
   section heading -> two priority cards -> compact context card.
   ========================================================= */

body.training-page-v6 .training-v6-overview {
    display: grid;
    gap: 15px;
}

body.training-page-v6 .training-v6-overview-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 36px;
    padding: 2px 0 0;
}

body.training-page-v6 .training-v6-overview-head h1 {
    margin: 6px 0 0;
    color: #f5f5f7;
    font-size: clamp(30px, 2.85vw, 39px);
    font-weight: 735;
    line-height: 1.02;
    letter-spacing: -.042em;
}

body.training-page-v6 .training-v6-overview-head > p {
    max-width: 500px;
    margin: 0;
    color: #777781;
    font-size: 10.5px;
    line-height: 1.58;
    text-align: right;
}

body.training-page-v6 .training-v6-priority-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(300px, .72fr);
    gap: 9px;
}

body.training-page-v6 .training-v6-priority-card,
body.training-page-v6 .training-v6-context-card {
    min-width: 0;
    border: 1px solid #29292f;
    background: #0f0f12;
}

body.training-page-v6 .training-v6-priority-card {
    position: relative;
    min-height: 214px;
    display: flex;
    flex-direction: column;
    padding: 18px 19px 16px;
}

body.training-page-v6 .training-v6-primary {
    border-top: 2px solid var(--accent);
    background:
        linear-gradient(180deg, rgba(255,43,214,.045), transparent 46%),
        #0f0f12;
}

body.training-page-v6 .training-v6-secondary {
    border-top: 2px solid rgba(255,43,214,.48);
    background: #101013;
}

body.training-page-v6 .training-v6-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
}

body.training-page-v6 .training-v6-index {
    color: var(--accent);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

body.training-page-v6 .training-v6-card-label {
    color: #666670;
    font-size: 7px;
    font-weight: 840;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.training-page-v6 .training-v6-priority-card > strong {
    display: block;
    margin-bottom: 9px;
    color: #f5f5f7;
    font-size: clamp(25px, 2.35vw, 33px);
    font-weight: 725;
    line-height: 1.04;
    letter-spacing: -.033em;
}

body.training-page-v6 .training-v6-priority-card > p {
    max-width: 560px;
    margin: 0;
    color: #8d8d97;
    font-size: 10px;
    line-height: 1.52;
}

body.training-page-v6 .training-v6-card-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #222227;
}

body.training-page-v6 .training-v6-card-footer span {
    color: #62626c;
    font-size: 7.5px;
    line-height: 1.4;
}


/* Context card: factual, deliberately quieter than the two priorities. */
body.training-page-v6 .training-v6-context-card {
    display: grid;
    grid-template-rows: auto 1fr;
    background: #0a0a0d;
}

body.training-page-v6 .training-v6-context-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #242429;
}

body.training-page-v6 .training-v6-context-metrics > div {
    min-width: 0;
    padding: 14px 13px;
    border-right: 1px solid #222227;
}

body.training-page-v6 .training-v6-context-metrics > div:last-child {
    border-right: 0;
}

body.training-page-v6 .training-v6-context-metrics span {
    display: block;
    margin-bottom: 7px;
    color: #5f5f69;
    font-size: 7px;
    font-weight: 840;
    letter-spacing: .075em;
    text-transform: uppercase;
}

body.training-page-v6 .training-v6-context-metrics strong {
    display: block;
    color: #f0f0f3;
    font-size: 18px;
    font-weight: 730;
    line-height: 1.05;
    letter-spacing: -.02em;
}

body.training-page-v6 .training-v6-phase {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 15px 14px 14px;
}

body.training-page-v6 .training-v6-phase .training-v6-card-top {
    margin-bottom: 12px;
}

body.training-page-v6 .training-v6-phase > strong {
    display: block;
    margin-bottom: 7px;
    color: #ececf0;
    font-size: 20px;
    font-weight: 710;
    line-height: 1.06;
    letter-spacing: -.025em;
}

body.training-page-v6 .training-v6-phase > p {
    margin: 0;
    color: #74747e;
    font-size: 8.5px;
    line-height: 1.5;
}

/* More air between the overview and the next functional block. */
body.training-page-v6 .training-v6-overview + .training-puzzle-hub {
    margin-top: 2px;
}

@media (max-width: 1120px) {
    body.training-page-v6 .training-v6-priority-grid {
        grid-template-columns: 1fr 1fr;
    }

    body.training-page-v6 .training-v6-context-card {
        grid-column: 1 / -1;
        grid-template-columns: .55fr 1fr;
        grid-template-rows: auto;
    }

    body.training-page-v6 .training-v6-context-metrics {
        border-right: 1px solid #242429;
        border-bottom: 0;
    }
}

@media (max-width: 820px) {
    body.training-page-v6 .training-v6-overview-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    body.training-page-v6 .training-v6-overview-head > p {
        max-width: 650px;
        text-align: left;
    }

    body.training-page-v6 .training-v6-priority-grid {
        grid-template-columns: 1fr;
    }

    body.training-page-v6 .training-v6-context-card {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    body.training-page-v6 .training-v6-context-metrics {
        border-right: 0;
        border-bottom: 1px solid #242429;
    }
}

@media (max-width: 560px) {
    body.training-page-v6 .training-v6-priority-card {
        min-height: 0;
    }

    body.training-page-v6 .training-v6-context-metrics {
        grid-template-columns: 1fr;
    }

    body.training-page-v6 .training-v6-context-metrics > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        border-right: 0;
        border-bottom: 1px solid #222227;
    }

    body.training-page-v6 .training-v6-context-metrics > div:last-child {
        border-bottom: 0;
    }

    body.training-page-v6 .training-v6-context-metrics span {
        margin-bottom: 0;
    }
}


/* =========================================================
   TRAINING V7 — PUBLIC PROFILE MODE
   No personal completion state or weekly-progress UI.
   ========================================================= */

body.training-page-v7 .training-v4-week-head {
    align-items: flex-end;
}

body.training-page-v7 .training-v4-week-head > div:first-child {
    max-width: 900px;
}

body.training-page-v7 .training-v4-day-summary {
    grid-template-columns: 64px minmax(0, 1fr) 64px;
}

body.training-page-v7 .training-v4-day-state {
    color: #6f6f79;
}

body.training-page-v7 .training-v4-day-actions {
    grid-template-columns: 1fr;
}

body.training-page-v7 .training-v4-open-position {
    width: 100%;
}

body.training-page-v7 .training-v4-progress,
body.training-page-v7 .training-v4-complete {
    display: none !important;
}

@media (max-width: 820px) {
    body.training-page-v7 .training-v4-day-summary {
        grid-template-columns: 52px minmax(0, 1fr) 58px;
    }
}

@media (max-width: 620px) {
    body.training-page-v7 .training-v4-day-summary {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    body.training-page-v7 .training-v4-day-state {
        grid-column: 2;
    }
}


/* =========================================================
   TRAINING V8 — FEATURED INTERACTIVE TRAINING
   2026-09-05

   The intro is now a strong product feature:
   copy + clear CTA on the left, real session preview on the right.
   Starting the session still opens the existing full-size board.
   ========================================================= */

body.training-page-v8 .training-puzzle-hub {
    overflow: hidden;

    border: 1px solid #2b2b31;
    border-top: 2px solid var(--accent);

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(255, 43, 214, .07),
            transparent 28%
        ),
        #0b0b0e;
}


body.training-page-v8 .training-v8-feature {
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, .72fr);

    min-height: 330px;

    padding: 0;
}


/* ---------------------------------------------------------
   Left — feature copy and CTA
   --------------------------------------------------------- */

body.training-page-v8 .training-v8-feature-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 27px 28px 25px;
}

body.training-page-v8 .training-v8-feature-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 8px;
}

body.training-page-v8 .training-v8-feature-badge {
    display: inline-flex;
    align-items: center;

    min-height: 22px;
    padding: 0 8px;

    border: 1px solid rgba(255, 43, 214, .35);

    color: #f4a7e6;

    font-size: 7px;
    font-weight: 850;

    letter-spacing: .075em;
    text-transform: uppercase;
}

body.training-page-v8 .training-v8-feature-copy h2 {
    max-width: 790px;

    margin: 7px 0 10px;

    color: #ffffff;

    font-size: clamp(31px, 3.2vw, 45px);
    font-weight: 750;

    line-height: 1.01;
    letter-spacing: -.047em;
}

body.training-page-v8 .training-v8-feature-lead {
    max-width: 790px;

    margin: 0;

    color: #92929c;

    font-size: 11.5px;
    line-height: 1.62;
}


body.training-page-v8 .training-v8-feature-facts {
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(0, .85fr)
        minmax(0, .9fr);

    margin-top: 22px;

    border-top: 1px solid #25252a;
    border-bottom: 1px solid #25252a;
}

body.training-page-v8 .training-v8-feature-facts > div {
    min-width: 0;

    padding: 12px 13px;

    border-right: 1px solid #25252a;
}

body.training-page-v8 .training-v8-feature-facts > div:first-child {
    padding-left: 0;
}

body.training-page-v8 .training-v8-feature-facts > div:last-child {
    border-right: 0;
}

body.training-page-v8 .training-v8-feature-facts span {
    display: block;

    margin-bottom: 5px;

    color: #62626c;

    font-size: 7px;
    font-weight: 840;

    letter-spacing: .075em;
    text-transform: uppercase;
}

body.training-page-v8 .training-v8-feature-facts strong {
    display: block;

    overflow: hidden;

    color: #dcdce1;

    font-size: 9.5px;
    font-weight: 690;

    line-height: 1.4;
    text-overflow: ellipsis;
}


body.training-page-v8 .training-v8-feature-action-row {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: auto;
    padding-top: 20px;
}

body.training-page-v8 .training-v8-start {
    min-width: 245px;
    min-height: 48px;

    justify-content: space-between;

    padding: 0 15px;

    border-radius: 0;
}

body.training-page-v8 .training-v8-start-note {
    max-width: 190px;

    color: #62626c;

    font-size: 8px;
    line-height: 1.45;
}

body.training-page-v8 .training-v8-diagnostics {
    margin: 10px 0 0;

    color: #565660;

    font-size: 7.5px;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   Right — real puzzle preview
   --------------------------------------------------------- */

body.training-page-v8 .training-v8-preview-panel {
    min-width: 0;

    display: grid;
    grid-template-rows: auto 1fr auto;

    padding: 16px;

    border-left: 1px solid #29292f;

    background:
        linear-gradient(
            180deg,
            rgba(255, 43, 214, .025),
            transparent 35%
        ),
        #09090c;
}

body.training-page-v8 .training-v8-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 11px;
}

body.training-page-v8 .training-v8-preview-head > div {
    display: grid;
    gap: 3px;
}

body.training-page-v8 .training-v8-preview-head > div > span {
    color: #5d5d67;

    font-size: 7px;
    font-weight: 840;

    letter-spacing: .08em;
    text-transform: uppercase;
}

body.training-page-v8 .training-v8-preview-head > div > strong {
    color: #d8d8de;

    font-size: 9px;
    font-weight: 690;
}

body.training-page-v8 .training-v8-preview-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #777781;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .06em;
    text-transform: uppercase;
}

body.training-page-v8 .training-v8-preview-live::before {
    content: "";

    width: 5px;
    height: 5px;

    background: var(--accent);

    box-shadow:
        0 0 10px rgba(255, 43, 214, .7);
}


body.training-page-v8 .training-v8-preview-board {
    position: relative;

    width: min(100%, 260px);
    aspect-ratio: 1 / 1;

    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);

    align-self: center;
    justify-self: center;

    overflow: hidden;

    border: 1px solid #403027;

    background: #ead6ad;

    cursor: pointer;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, .35);

    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease;
}

body.training-page-v8 .training-v8-preview-board:hover {
    transform: translateY(-2px);

    border-color: rgba(255, 43, 214, .56);

    box-shadow:
        0 22px 50px rgba(0, 0, 0, .42),
        0 0 0 1px rgba(255, 43, 214, .08);
}

body.training-page-v8 .training-v8-preview-board:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

body.training-page-v8 .training-v8-preview-board::after {
    content: "START SESSION";

    position: absolute;
    left: 50%;
    bottom: 10px;

    z-index: 5;

    min-height: 25px;

    display: flex;
    align-items: center;

    padding: 0 9px;

    border: 1px solid rgba(255, 43, 214, .6);

    background: rgba(8, 8, 10, .90);
    color: #ff5de4;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .08em;

    transform: translateX(-50%);

    pointer-events: none;
}

body.training-page-v8 .training-v8-preview-board.is-empty::after {
    content: "NO PREVIEW";
    color: #777781;
    border-color: #3b3b42;
}


body.training-page-v8 .training-v8-preview-square {
    position: relative;

    min-width: 0;
    min-height: 0;

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

body.training-page-v8 .training-v8-preview-square.light {
    background: #ead6ad;
}

body.training-page-v8 .training-v8-preview-square.dark {
    background: #b98964;
}

body.training-page-v8 .training-v8-preview-square img {
    width: 86%;
    height: 86%;

    display: block;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}


body.training-page-v8 .training-v8-preview-caption {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, .7fr);
    gap: 14px;
    align-items: end;

    margin-top: 11px;
    padding-top: 11px;

    border-top: 1px solid #232328;
}

body.training-page-v8 .training-v8-preview-caption > div {
    display: grid;
    gap: 4px;
}

body.training-page-v8 .training-v8-preview-caption span {
    color: #5d5d67;

    font-size: 7px;
    font-weight: 840;

    letter-spacing: .075em;
    text-transform: uppercase;
}

body.training-page-v8 .training-v8-preview-caption strong {
    color: #e6e6ea;

    font-size: 9.5px;
    font-weight: 680;

    line-height: 1.4;
}

body.training-page-v8 .training-v8-preview-caption p {
    margin: 0;

    color: #64646e;

    font-size: 7.5px;
    line-height: 1.45;

    text-align: right;
}


/* ---------------------------------------------------------
   Once the real session starts, keep the existing V3/V4
   board layout and mechanics unchanged.
   --------------------------------------------------------- */

body.training-page-v8
.training-puzzle-session:not(.hidden),
body.training-page-v8
.training-puzzle-summary:not(.hidden) {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1050px) {

    body.training-page-v8 .training-v8-feature {
        grid-template-columns: 1fr;
    }

    body.training-page-v8 .training-v8-preview-panel {
        grid-template-columns:
            minmax(0, 290px)
            minmax(0, 1fr);

        grid-template-rows: auto 1fr;

        gap: 14px 18px;

        border-top: 1px solid #29292f;
        border-left: 0;
    }

    body.training-page-v8 .training-v8-preview-head {
        grid-column: 1 / -1;

        margin-bottom: 0;
    }

    body.training-page-v8 .training-v8-preview-board {
        width: min(100%, 270px);
    }

    body.training-page-v8 .training-v8-preview-caption {
        align-self: center;

        grid-template-columns: 1fr;

        margin-top: 0;
        padding-top: 0;

        border-top: 0;
    }

    body.training-page-v8 .training-v8-preview-caption p {
        text-align: left;
    }
}


@media (max-width: 700px) {

    body.training-page-v8 .training-v8-feature-copy {
        padding: 22px 18px 20px;
    }

    body.training-page-v8 .training-v8-feature-facts {
        grid-template-columns: 1fr;
    }

    body.training-page-v8 .training-v8-feature-facts > div,
    body.training-page-v8 .training-v8-feature-facts > div:first-child {
        padding: 10px 0;

        border-right: 0;
        border-bottom: 1px solid #25252a;
    }

    body.training-page-v8 .training-v8-feature-facts > div:last-child {
        border-bottom: 0;
    }

    body.training-page-v8 .training-v8-feature-action-row {
        align-items: stretch;
        flex-direction: column;
    }

    body.training-page-v8 .training-v8-start {
        width: 100%;
        min-width: 0;
    }

    body.training-page-v8 .training-v8-start-note {
        max-width: none;
    }

    body.training-page-v8 .training-v8-preview-panel {
        grid-template-columns: 1fr;

        padding: 14px;
    }

    body.training-page-v8 .training-v8-preview-head {
        grid-column: auto;
    }

    body.training-page-v8 .training-v8-preview-board {
        width: min(100%, 280px);
    }
}


/* =========================================================
   TRAINING V10 — PUZZLE BOARD POLISH
   ========================================================= */

/* Smaller normal legal-move dots. */
body.training-page-v8 .training-puzzle-board
.fen-square.is-legal-target:not(.is-legal-capture)::after {
    width: 28% !important;
    min-width: 14px !important;
}

/* Slightly quieter capture ring. */
body.training-page-v8 .training-puzzle-board
.fen-square.is-legal-capture::after {
    width: 84% !important;
    min-width: 0 !important;
    border-width: 3px !important;
}

/* Darken selection on light squares so both square colors feel similar. */
body.training-page-v8 .training-puzzle-board
.fen-square.light.is-selected::before {
    background: rgba(176, 0, 85, .50) !important;
}

body.training-page-v8 .training-puzzle-board
.fen-square.dark.is-selected::before {
    background: rgba(255, 28, 207, .28) !important;
}


/* =========================================================
   TRAINING V11 — CLEAN PUZZLE FEEDBACK
   2026-09-05
   ========================================================= */

/*
   Remove the large centered success/error/answer badge entirely.
   Board-square feedback is now the only move feedback.
*/
body.training-page-v8 .training-puzzle-feedback,
body.training-page-v8 .training-puzzle-feedback:not(.hidden) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/*
   Correct move:
   full green translucent source + destination squares.
   No border, no popup, no icon.
*/
body.training-page-v8 .training-puzzle-board
.fen-square.is-correct-move {
    box-shadow: none !important;
}

body.training-page-v8 .training-puzzle-board
.fen-square.is-correct-move::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 3;

    background: rgba(55, 168, 94, .43);

    pointer-events: none;
}

/*
   Slightly stronger on the light board square so both board colors
   read as the same green feedback.
*/
body.training-page-v8 .training-puzzle-board
.fen-square.light.is-correct-move::before {
    background: rgba(39, 139, 75, .52);
}

body.training-page-v8 .training-puzzle-board
.fen-square.dark.is-correct-move::before {
    background: rgba(64, 186, 105, .40);
}

/* Pieces remain above green/red feedback fills. */
body.training-page-v8 .training-puzzle-board
.fen-square.is-correct-move .fen-piece {
    position: relative;
    z-index: 5;
}


/* =========================================================
   TRAINING V13 — USER BOARD ANNOTATIONS
   RMB click = square highlight
   RMB drag = cyan-blue arrow
   ========================================================= */


/* Cyan arrow uses the same shape/opacity as the existing played-move arrow. */
body.training-page-v8 .training-user-arrow {
    position: absolute;
    inset: 0;

    z-index: 13;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


/* Annotation cursor only while RMB is actively held. */
body.training-page-v8
.training-puzzle-board.is-annotation-drawing {
    cursor: crosshair;
}


/*
   Same selected-square palette already used by the puzzle:
   light squares need the darker compensation,
   dark squares use the brighter translucent fuchsia.
*/
body.training-page-v8 .training-puzzle-board
.fen-square.is-user-highlighted {
    box-shadow: none !important;
}

body.training-page-v8 .training-puzzle-board
.fen-square.is-user-highlighted::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;
}

body.training-page-v8 .training-puzzle-board
.fen-square.light.is-user-highlighted::before {
    background:
        rgba(
            176,
            0,
            85,
            .50
        ) !important;
}

body.training-page-v8 .training-puzzle-board
.fen-square.dark.is-user-highlighted::before {
    background:
        rgba(
            255,
            28,
            207,
            .28
        ) !important;
}


/* Pieces and coordinates remain above the annotation fill. */
body.training-page-v8 .training-puzzle-board
.fen-square.is-user-highlighted .fen-piece {
    position: relative;
    z-index: 5;
}

body.training-page-v8 .training-puzzle-board
.fen-square.is-user-highlighted .board-rank-label,
body.training-page-v8 .training-puzzle-board
.fen-square.is-user-highlighted .board-file-label {
    position: relative;
    z-index: 6;
}


/* =========================================================
   TRAINING V14 — SHOW SOLUTION
   ========================================================= */


/* The solution uses the same fuchsia arrow language as Game Review. */
body.training-page-v8 .training-solution-arrow {
    position: absolute;
    inset: 0;

    z-index: 15;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


/*
    "Show solution" is an intentional secondary escape hatch:
    more visible than Open in Game Review, but still below Next Position.
*/
body.training-page-v8 .training-puzzle-reveal {
    border-color:
        rgba(
            255,
            43,
            214,
            .42
        ) !important;

    background:
        rgba(
            255,
            43,
            214,
            .035
        ) !important;

    color:
        #d7b0d0 !important;
}

body.training-page-v8 .training-puzzle-reveal:hover {
    border-color:
        rgba(
            255,
            43,
            214,
            .78
        ) !important;

    background:
        rgba(
            255,
            43,
            214,
            .07
        ) !important;

    color:
        #ffffff !important;
}


/* The old green answer-square border is no longer used. */
body.training-page-v8 .training-puzzle-board
.fen-square.is-answer {
    box-shadow:
        none !important;
}


/* =========================================================
   TRAINING V14.1 — SHOW SOLUTION IS A HINT, NOT COMPLETION
   ========================================================= */

body.training-page-v8 .training-puzzle-reveal:disabled {
    cursor: default;

    opacity: .62;

    border-color:
        rgba(
            255,
            43,
            214,
            .28
        ) !important;

    background:
        rgba(
            255,
            43,
            214,
            .025
        ) !important;

    color:
        #9f7998 !important;
}


/* =========================================================
   TRAINING WEEK POLISH V1 — DESKTOP ONLY
   2026-09-11
   Scope: Suggested training week only.
   ========================================================= */

@media (min-width: 821px) {
    body.training-page-v8 .training-v4-week {
        gap: 14px;
    }

    body.training-page-v8 .training-v4-week-head {
        padding-bottom: 6px;
    }

    body.training-page-v8 .training-v4-week-head h2 {
        margin-top: 7px;
        font-size: clamp(31px, 2.9vw, 40px);
        line-height: 1.01;
        letter-spacing: -.043em;
    }

    body.training-page-v8 .training-v4-week-head p {
        max-width: 760px;
        margin-top: 9px;
        color: #8b8b95;
        font-size: 11px;
        line-height: 1.58;
    }

    body.training-page-v8 .training-v4-stage-rail {
        grid-template-columns: 3fr 2fr 2fr;
        border-color: #2d2d33;
        background: #0b0b0e;
    }

    body.training-page-v8 .training-v4-stage-rail > div {
        position: relative;
        min-height: 58px;
        padding: 12px 15px 11px;
        gap: 11px;
        border-right-color: #29292f;
        background: #0d0d10;
    }

    body.training-page-v8 .training-v4-stage-rail > div::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -1px;
        height: 2px;
        background: rgba(255, 43, 214, .22);
    }

    body.training-page-v8 .training-v4-stage-rail > div:first-child::before {
        background: #ff2bd6;
    }

    body.training-page-v8 .training-v4-stage-rail > div:nth-child(2)::before {
        background: rgba(255, 43, 214, .58);
    }

    body.training-page-v8 .training-v4-stage-rail > div:nth-child(3)::before {
        background: rgba(255, 43, 214, .30);
    }

    body.training-page-v8 .training-v4-stage-rail span {
        font-size: 9px;
        font-weight: 900;
    }

    body.training-page-v8 .training-v4-stage-rail strong {
        color: #eeeef2;
        font-size: 11.5px;
        font-weight: 720;
        letter-spacing: -.01em;
    }

    body.training-page-v8 .training-v4-stage-rail small {
        color: #71717b;
        font-size: 7.5px;
        font-weight: 700;
        letter-spacing: .02em;
    }

    body.training-page-v8 .training-v4-plan-list {
        gap: 7px;
    }

    body.training-page-v8 .training-v4-day {
        border-color: #29292f;
        background: #0d0d10;
    }

    body.training-page-v8 .training-v4-day[open] {
        border-color: #33333a;
        background: #0e0e11;
    }

    body.training-page-v8 .training-v4-day[open]::before {
        width: 3px;
    }

    body.training-page-v8 .training-v4-day-summary {
        grid-template-columns: 68px minmax(0, 1fr) 72px;
        gap: 16px;
        min-height: 96px;
        padding: 14px 16px 14px 18px;
    }

    body.training-page-v8 .training-v4-day[open] .training-v4-day-summary {
        min-height: 100px;
        background: linear-gradient(90deg, rgba(255,43,214,.025), transparent 32%);
    }

    body.training-page-v8 .training-v4-day-index {
        gap: 4px;
    }

    body.training-page-v8 .training-v4-day-index span {
        color: #686872;
        font-size: 7.5px;
    }

    body.training-page-v8 .training-v4-day-index strong {
        font-size: 24px;
        font-weight: 780;
    }

    body.training-page-v8 .training-v4-day-meta {
        gap: 7px;
        margin-bottom: 7px;
        color: #81818b;
        font-size: 7.8px;
        font-weight: 790;
        letter-spacing: .045em;
    }

    body.training-page-v8 .training-v4-day-meta i {
        color: #4d4d55;
    }

    body.training-page-v8 .training-v4-day-title h3 {
        margin-bottom: 5px;
        color: #f5f5f7;
        font-size: clamp(17px, 1.45vw, 20px);
        font-weight: 730;
        line-height: 1.13;
        letter-spacing: -.022em;
    }

    body.training-page-v8 .training-v4-day-title > p {
        max-width: 900px;
        color: #898993;
        font-size: 9.8px;
        line-height: 1.48;
    }

    body.training-page-v8 .training-v4-day-state {
        gap: 8px;
        color: #777781;
        font-size: 7.5px;
    }

    body.training-page-v8 .training-v4-day-state b {
        color: #a0a0a8;
        font-size: 17px;
    }

    body.training-page-v8 .training-v4-day-detail {
        grid-template-columns: minmax(0, 1.34fr) minmax(330px, .66fr);
        border-top-color: #28282e;
        background: #0a0a0d;
    }

    body.training-page-v8 .training-v4-day-work {
        padding: 20px 24px 22px 95px;
        border-right-color: #28282e;
    }

    body.training-page-v8 .training-v4-detail-label,
    body.training-page-v8 .training-v4-context-block > span {
        margin-bottom: 9px;
        color: #6d6d77;
        font-size: 7.8px;
        font-weight: 880;
    }

    body.training-page-v8 .training-v4-step-list li {
        grid-template-columns: 25px minmax(0, 1fr);
        gap: 11px;
        padding: 10px 0;
        border-top-color: #242429;
    }

    body.training-page-v8 .training-v4-step-list li:last-child {
        border-bottom-color: #242429;
    }

    body.training-page-v8 .training-v4-step-list li > span {
        padding-top: 1px;
        font-size: 9px;
    }

    body.training-page-v8 .training-v4-step-list p {
        color: #d0d0d6;
        font-size: 10.5px;
        line-height: 1.58;
    }

    body.training-page-v8 .training-v4-day-context {
        padding: 19px 19px 18px;
        background: #0d0d10;
    }

    body.training-page-v8 .training-v4-context-block + .training-v4-context-block {
        margin-top: 16px;
        padding-top: 15px;
        border-top-color: #25252a;
    }

    body.training-page-v8 .training-v4-context-block p {
        color: #9696a0;
        font-size: 9.5px;
        line-height: 1.58;
    }

    body.training-page-v8 .training-v4-start-position strong {
        color: #e0e0e5;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.5;
    }

    body.training-page-v8 .training-v4-day-actions {
        padding-top: 18px;
    }

    body.training-page-v8 .training-v4-open-position {
        min-height: 40px;
        padding-inline: 13px;
        font-size: 8px;
    }
}

/* =========================================================
   TRAINING V8.1 — RATING CHALLENGE FALLBACK
   Used only when the analyzed sample does not produce a validated
   recurring Key Lesson strong enough for personalized Focus drills.
   ========================================================= */

body.training-page-v8 .training-puzzle-hub.is-rating-challenge {
    border-top-color: #62626d;
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(150,150,166,.07),
            transparent 34%
        ),
        #0d0d10;
}

body.training-page-v8 .training-puzzle-hub.is-rating-challenge .training-v8-feature-badge {
    border-color: #3d3d46;
    color: #b8b8c1;
    background: rgba(255,255,255,.025);
}

body.training-page-v8 .training-puzzle-hub.is-rating-challenge .training-v8-feature-facts > div {
    background: rgba(255,255,255,.012);
}

body.training-page-v8 .training-puzzle-hub.is-rating-challenge .training-v8-preview-live {
    color: #a5a5af;
}

body.training-page-v8 .training-puzzle-hub.is-rating-challenge .training-v8-preview-live::before {
    background: #a5a5af;
    box-shadow: 0 0 10px rgba(165,165,175,.28);
}