/* ---------- Шрифты (локально — работают и офлайн в PWA) ---------- */
/* Golos Text — основной текст; Fira Sans Extra Condensed — заголовки и цифры. */
/* Подмножества: latin, cyrillic, cyrillic-ext (казахские буквы: ә ғ қ ң ө ұ ү һ і). */
@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/golos-text-cyrillic-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/golos-text-cyrillic-400-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/golos-text-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/golos-text-cyrillic-ext-500-normal.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/golos-text-cyrillic-500-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/golos-text-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/golos-text-cyrillic-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/golos-text-cyrillic-600-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/golos-text-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Fira Sans Extra Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/fira-sans-extra-condensed-cyrillic-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: "Fira Sans Extra Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/fira-sans-extra-condensed-cyrillic-700-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Fira Sans Extra Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/fira-sans-extra-condensed-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Fira Sans Extra Condensed";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/fira-sans-extra-condensed-cyrillic-ext-800-normal.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: "Fira Sans Extra Condensed";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/fira-sans-extra-condensed-cyrillic-800-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Fira Sans Extra Condensed";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/fira-sans-extra-condensed-latin-800-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   TrainersPlatform — тема поверх Bootstrap 5.3 (data-bs-theme="dark")

   Палитра:
     графит (покрытие зала)   --tp-bg        #17191C
     поверхность              --tp-surface   #202328
     поверхность 2 (поля)     --tp-surface-2 #2A2E34
     линия                    --tp-line      #363B42
     текст                    --tp-text      #ECEEF0
     приглушённый             --tp-muted     #959DA6
     лайм — главное действие  --tp-lime      #C6F432
     янтарь — "ждёт"          --tp-amber     #F2B441
     красный — ошибки         --tp-red       #FF6B5E

   Правило: лайм только для главного действия и "сделано".
   Всё остальное — спокойные серые.
   ===================================================================== */

:root {
    --tp-bg: #17191C;
    --tp-surface: #202328;
    --tp-surface-2: #2A2E34;
    --tp-line: #363B42;
    --tp-text: #ECEEF0;
    --tp-muted: #959DA6;
    --tp-lime: #C6F432;
    --tp-lime-hover: #D6FF5C;
    --tp-lime-active: #AFD923;
    --tp-lime-ink: #182004;      /* текст на лаймовом фоне */
    --tp-amber: #F2B441;
    --tp-red: #FF6B5E;

    --tp-font-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tp-font-display: "Fira Sans Extra Condensed", "Arial Narrow", sans-serif;

    --tp-radius-sm: .625rem;   /* поля, кнопки */
    --tp-radius: .875rem;      /* панели */

    --tp-topbar-h: 3.5rem;
    --tp-tabbar-h: 4rem;
}

[data-bs-theme=dark] {
    color-scheme: dark;

    --bs-body-bg: var(--tp-bg);
    --bs-body-bg-rgb: 23, 25, 28;
    --bs-body-color: var(--tp-text);
    --bs-body-color-rgb: 236, 238, 240;
    --bs-body-font-family: var(--tp-font-body);
    --bs-body-line-height: 1.5;

    --bs-secondary-color: var(--tp-muted);
    --bs-secondary-color-rgb: 149, 157, 166;
    --bs-tertiary-bg: var(--tp-surface);
    --bs-secondary-bg: var(--tp-surface-2);
    --bs-border-color: var(--tp-line);
    --bs-emphasis-color: #fff;

    --bs-primary: var(--tp-lime);
    --bs-primary-rgb: 198, 244, 50;
    --bs-link-color: var(--tp-lime);
    --bs-link-color-rgb: 198, 244, 50;
    --bs-link-hover-color: var(--tp-lime-hover);
    --bs-link-hover-color-rgb: 214, 255, 92;

    --bs-focus-ring-color: rgba(198, 244, 50, .35);
    --bs-border-radius: var(--tp-radius-sm);
    --bs-border-radius-lg: var(--tp-radius);
}

html, body {
    min-height: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- Типографика ---------- */

h1, h2, h3, .tp-display {
    font-family: var(--tp-font-display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .005em;
}

.tp-title {
    font-size: clamp(2.25rem, 6vw, 3rem);
    font-weight: 800;
    margin: 0;
}

h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }

.tp-lead {
    color: var(--tp-muted);
    margin: .5rem 0 0;
    max-width: 38rem;
}

a {
    text-underline-offset: .2em;
}

/* ---------- Кнопки ---------- */

.btn {
    --bs-btn-padding-y: .625rem;
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--tp-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.btn-lg {
    --bs-btn-padding-y: .8rem;
    --bs-btn-font-size: 1.0625rem;
    --bs-btn-border-radius: var(--tp-radius-sm);
}

.btn-primary {
    --bs-btn-color: var(--tp-lime-ink);
    --bs-btn-bg: var(--tp-lime);
    --bs-btn-border-color: var(--tp-lime);
    --bs-btn-hover-color: var(--tp-lime-ink);
    --bs-btn-hover-bg: var(--tp-lime-hover);
    --bs-btn-hover-border-color: var(--tp-lime-hover);
    --bs-btn-active-color: var(--tp-lime-ink);
    --bs-btn-active-bg: var(--tp-lime-active);
    --bs-btn-active-border-color: var(--tp-lime-active);
    --bs-btn-disabled-color: var(--tp-lime-ink);
    --bs-btn-disabled-bg: var(--tp-lime);
    --bs-btn-disabled-border-color: var(--tp-lime);
    --bs-btn-focus-shadow-rgb: 198, 244, 50;
    --bs-btn-font-weight: 600;
}

.btn-secondary {
    --bs-btn-color: var(--tp-text);
    --bs-btn-bg: var(--tp-surface-2);
    --bs-btn-border-color: var(--tp-line);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #343941;
    --bs-btn-hover-border-color: #444a53;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3b4048;
    --bs-btn-active-border-color: #4a5059;
    --bs-btn-focus-shadow-rgb: 198, 244, 50;
}

.btn-ghost {
    --bs-btn-color: var(--tp-muted);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--tp-text);
    --bs-btn-hover-bg: var(--tp-surface-2);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--tp-text);
    --bs-btn-active-bg: var(--tp-surface-2);
    --bs-btn-focus-shadow-rgb: 198, 244, 50;
}

.btn:focus-visible {
    outline: 2px solid var(--tp-lime);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- Поля ввода ---------- */

.form-label {
    color: var(--tp-muted);
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: .375rem;
}

.form-control {
    background-color: var(--tp-surface-2);
    border-color: var(--tp-line);
    color: var(--tp-text);
    padding: .7rem .9rem;
    border-radius: var(--tp-radius-sm);
}

.form-control::placeholder {
    color: #6E7680;
}

.form-control:focus {
    background-color: var(--tp-surface-2);
    color: var(--tp-text);
    border-color: var(--tp-lime);
    box-shadow: 0 0 0 .2rem rgba(198, 244, 50, .2);
}

.form-control[readonly] {
    background-color: var(--tp-bg);
}

/* ---------- Сообщения ---------- */

.alert {
    --bs-alert-border-radius: var(--tp-radius-sm);
    --bs-alert-padding-y: .75rem;
    font-size: .9375rem;
}

.alert-danger {
    --bs-alert-color: #FFB3AB;
    --bs-alert-bg: rgba(255, 107, 94, .1);
    --bs-alert-border-color: rgba(255, 107, 94, .35);
}

.alert-warning {
    --bs-alert-color: #F8D38A;
    --bs-alert-bg: rgba(242, 180, 65, .1);
    --bs-alert-border-color: rgba(242, 180, 65, .35);
}

/* ---------- Каркас: верхняя панель ---------- */

.tp-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--tp-topbar-h);
    background: rgba(23, 25, 28, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--tp-line);
}

.tp-topbar > .container {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.tp-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--tp-text);
    text-decoration: none;
    font-family: var(--tp-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
}

.tp-brand:hover {
    color: var(--tp-text);
}

.tp-brand-mark {
    color: var(--tp-lime);
    flex: none;
}

.tp-brand-light {
    color: var(--tp-muted);
    font-weight: 700;
}

.tp-nav {
    display: flex;
    gap: 1.5rem;
    height: 100%;
}

.tp-nav .nav-link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
    color: var(--tp-muted);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tp-nav .nav-link:hover {
    color: var(--tp-text);
}

.tp-nav .nav-link.active {
    color: var(--tp-text);
    border-bottom-color: var(--tp-lime);
}

.tp-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.tp-user-name {
    color: var(--tp-muted);
    font-size: .9375rem;
}

/* ---------- Каркас: нижние вкладки (телефон) ---------- */

.tp-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    background: var(--tp-surface);
    border-top: 1px solid var(--tp-line);
    padding-bottom: env(safe-area-inset-bottom);
}

.tp-tabbar .nav-link {
    flex: 1;
    height: var(--tp-tabbar-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: 0;
    color: var(--tp-muted);
    font-size: .75rem;
    font-weight: 500;
}

.tp-tabbar .nav-link .bi {
    font-size: 1.375rem;
    line-height: 1;
}

.tp-tabbar .nav-link.active {
    color: var(--tp-lime);
}

.tp-main {
    padding-top: 1.75rem;
    padding-bottom: calc(var(--tp-tabbar-h) + env(safe-area-inset-bottom) + 1.5rem);
}

@media (min-width: 768px) {
    .tp-main {
        padding-top: 2.5rem;
        padding-bottom: 3rem;
    }
}

/* ---------- Заголовок страницы ---------- */

.tp-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

/* ---------- Панели ---------- */

.tp-panel {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius);
    padding: 1.25rem;
}

.tp-panel + .tp-panel,
.tp-panel + .tp-list {
    margin-top: 1.25rem;
}

.tp-panel-accent {
    border-color: rgba(198, 244, 50, .5);
}

.tp-panel-title {
    font-family: var(--tp-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

/* ---------- Списки (клиенты и т.п.) ---------- */

.tp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius);
    overflow: hidden;
}

.tp-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .875rem 1rem;
    padding: 1rem 1.25rem;
}

.tp-row + .tp-row {
    border-top: 1px solid var(--tp-line);
}

.tp-avatar {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tp-surface-2);
    color: var(--tp-text);
    font-family: var(--tp-font-display);
    font-size: 1.125rem;
    font-weight: 700;
}

.tp-row-main {
    flex: 1 1 14rem;
    min-width: 0;
}

.tp-row-title {
    font-weight: 600;
}

.tp-row-sub {
    display: flex;
    flex-wrap: wrap;
    gap: .125rem 1rem;
    color: var(--tp-muted);
    font-size: .875rem;
}

.tp-row-sub a {
    color: inherit;
}

.tp-row-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .tp-row-side {
        margin-left: 3.75rem;   /* под текстом, а не под аватаром */
        width: 100%;
    }
}

.tp-plan {
    color: var(--tp-muted);
    font-size: .875rem;
}

.tp-plan-active {
    color: var(--tp-text);
}

/* ---------- Статусы ---------- */

.tp-pill {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.tp-pill::before {
    content: "";
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: currentColor;
}

.tp-pill-ok {
    color: var(--tp-lime);
    background: rgba(198, 244, 50, .1);
}

.tp-pill-wait {
    color: var(--tp-amber);
    background: rgba(242, 180, 65, .1);
}

/* ---------- Пустые состояния ---------- */

.tp-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--tp-muted);
    border: 1px dashed var(--tp-line);
    border-radius: var(--tp-radius);
}

.tp-empty .bi {
    display: block;
    font-size: 2.25rem;
    color: var(--tp-line);
    margin-bottom: .75rem;
}

.tp-empty-title {
    color: var(--tp-text);
    font-weight: 600;
    margin-bottom: .25rem;
}

/* ---------- Экраны входа ---------- */

.tp-auth {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.tp-auth-card {
    width: min(100%, 25rem);
}

.tp-auth .tp-brand {
    margin-bottom: 2.5rem;
}

.tp-auth .tp-title {
    margin-bottom: .5rem;
}

.tp-auth form {
    margin-top: 2rem;
}

.tp-auth-foot {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tp-line);
    color: var(--tp-muted);
    font-size: .9375rem;
}

/* ---------- Загрузка приложения (index.html) ---------- */
/* Кольцо заполняется лаймом по мере загрузки WebAssembly. */

.loading-progress {
    position: absolute;
    display: block;
    width: 6rem;
    height: 6rem;
    inset: 32vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--tp-surface-2);
    stroke-width: .5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--tp-lime);
    stroke-linecap: round;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%;
    transition: stroke-dasharray .05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    inset: calc(32vh + 2.15rem) 0 auto 0;
    text-align: center;
    font-family: var(--tp-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--tp-text);
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "");
}

/* ---------- Ошибка Blazor (index.html) ---------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    padding: .9rem 3rem calc(.9rem + env(safe-area-inset-bottom)) 1.25rem;
    background: #3A1E1B;
    color: #FFD9D4;
    border-top: 1px solid rgba(255, 107, 94, .5);
}

#blazor-error-ui .reload {
    color: #fff;
    font-weight: 600;
    margin-left: .5rem;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 1rem;
    top: .85rem;
    cursor: pointer;
}

/* ---------- Доступность ---------- */

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

/* =====================================================================
   Библиотека упражнений и видео
   ===================================================================== */

/* ---------- Поля: select, подсказки ---------- */

.form-select {
    background-color: var(--tp-surface-2);
    border-color: var(--tp-line);
    color: var(--tp-text);
    padding: .7rem 2.5rem .7rem .9rem;
    border-radius: var(--tp-radius-sm);
}

.form-select:focus {
    border-color: var(--tp-lime);
    box-shadow: 0 0 0 .2rem rgba(198, 244, 50, .2);
}

.form-text {
    color: var(--tp-muted);
    font-size: .8125rem;
    margin-top: .5rem;
}

textarea.form-control {
    min-height: 8rem;
    line-height: 1.55;
}

/* ---------- Переключатель вариантов ---------- */

.tp-segment {
    display: flex;
    flex-wrap: nowrap;
    gap: .25rem;
    padding: .25rem;
    background: var(--tp-bg);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius-sm);
}

.tp-segment-item {
    flex: 1 1 auto;
    text-align: center;
    padding: .55rem .6rem;
    border-radius: calc(var(--tp-radius-sm) - .25rem);
    color: var(--tp-muted);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.tp-segment-item:hover {
    color: var(--tp-text);
}

.tp-segment-item.active {
    background: var(--tp-surface-2);
    color: var(--tp-text);
    box-shadow: inset 0 -2px 0 var(--tp-lime);
}

.tp-segment-item:has(input:focus-visible) {
    outline: 2px solid var(--tp-lime);
    outline-offset: 2px;
}

/* ---------- Фильтры ---------- */

.tp-filters {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    margin-bottom: 1.25rem;
}

.tp-search {
    position: relative;
    max-width: 26rem;
}

.tp-search .bi {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tp-muted);
    pointer-events: none;
}

.tp-search .form-control {
    padding-left: 2.5rem;
}

/* на телефоне чипы листаются пальцем, не переносятся */
.tp-chips {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -1rem;
    padding: 0 1rem .125rem;
}

.tp-chips::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .tp-chips {
        flex-wrap: wrap;
        overflow: visible;
        margin: 0;
        padding: 0;
    }
}

.tp-chip {
    flex: none;
    padding: .4rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--tp-line);
    background: transparent;
    color: var(--tp-muted);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
}

.tp-chip:hover {
    color: var(--tp-text);
    border-color: #4a5059;
}

.tp-chip.active {
    background: var(--tp-lime);
    border-color: var(--tp-lime);
    color: var(--tp-lime-ink);
    font-weight: 600;
}

.tp-chip:focus-visible {
    outline: 2px solid var(--tp-lime);
    outline-offset: 2px;
}

/* ---------- Строки-ссылки и миниатюры ---------- */

.tp-list > li + li {
    border-top: 1px solid var(--tp-line);
}

.tp-row-link {
    color: inherit;
    text-decoration: none;
    flex-wrap: nowrap;
}

.tp-row-link:hover {
    background: var(--tp-surface-2);
    color: inherit;
}

.tp-row-link:focus-visible {
    outline: 2px solid var(--tp-lime);
    outline-offset: -2px;
}

.tp-row-link .tp-row-side {
    margin-left: auto;
    width: auto;
}

.tp-thumb {
    position: relative;
    flex: none;
    width: 4.5rem;
    height: 3.25rem;
    border-radius: .5rem;
    overflow: hidden;
    background: var(--tp-surface-2);
    display: grid;
    place-items: center;
    color: var(--tp-muted);
    font-size: 1.25rem;
}

.tp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp-thumb-play {
    position: absolute;
    color: #fff;
    font-size: 1.5rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.tp-pill-error {
    color: var(--tp-red);
    background: rgba(255, 107, 94, .1);
}

@media (max-width: 575.98px) {
    .tp-row-link .tp-row-side .tp-pill,
    .tp-row-link .tp-row-side .tp-plan {
        display: none;      /* на узком экране статус видно по иконке в миниатюре */
    }
}

/* ---------- Карточка упражнения ---------- */

.tp-back {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--tp-muted);
    text-decoration: none;
    font-weight: 500;
}

.tp-back:hover {
    color: var(--tp-text);
}

.tp-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
}

/* ---------- Загрузка видео ---------- */

.tp-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    padding: 2rem 1rem;
    text-align: center;
    border: 1px dashed #4a5059;
    border-radius: var(--tp-radius);
    background: var(--tp-bg);
    cursor: pointer;
}

.tp-dropzone:hover,
.tp-upload input[type=file]:focus-visible + .tp-dropzone {
    border-color: var(--tp-lime);
}

.tp-upload input[type=file]:focus-visible + .tp-dropzone {
    outline: 2px solid var(--tp-lime);
    outline-offset: 2px;
}

.tp-dropzone .bi {
    font-size: 2rem;
    color: var(--tp-lime);
}

.tp-dropzone-title {
    font-weight: 600;
}

.tp-dropzone-hint {
    color: var(--tp-muted);
    font-size: .875rem;
}

.tp-upload-progress {
    padding: 1.25rem;
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius);
    background: var(--tp-bg);
}

.tp-upload-percent {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.progress {
    --bs-progress-bg: var(--tp-surface-2);
    --bs-progress-bar-bg: var(--tp-lime);
    --bs-progress-height: .5rem;
    --bs-progress-border-radius: 999px;
}

/* ---------- Плеер ---------- */

.tp-video {
    display: block;
    width: 100%;
    max-height: 70vh;
    background: #000;
    border-radius: var(--tp-radius-sm);
}

.tp-video-state {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 8rem;
    padding: 1.25rem;
    border-radius: var(--tp-radius-sm);
    background: var(--tp-bg);
    color: var(--tp-muted);
    font-size: .9375rem;
}

.tp-video-state-error {
    color: #FFB3AB;
}

.tp-video-state .bi {
    font-size: 1.25rem;
}

.tp-spinner {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--tp-surface-2);
    border-top-color: var(--tp-lime);
    border-radius: 50%;
    animation: tp-spin .8s linear infinite;
}

@keyframes tp-spin {
    to { transform: rotate(360deg); }
}

/* при reduced motion спиннер не крутится — остаётся статичный индикатор с текстом */

/* =====================================================================
   Планы тренировок: список, редактор, выбор упражнений, карточка клиента
   ===================================================================== */

.tp-section-title {
    font-size: 1.5rem;
    margin: 2.25rem 0 1rem;
}

.tp-textarea-short {
    min-height: 4.5rem;
}

.tp-field-error {
    color: #FFB3AB;
    font-size: .8125rem;
    margin-top: .375rem;
}

.tp-plan-icon {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .625rem;
    display: grid;
    place-items: center;
    background: var(--tp-surface-2);
    color: var(--tp-lime);
    font-size: 1.25rem;
}

/* ---------- Кнопки-иконки ---------- */

.tp-tools {
    display: flex;
    gap: .125rem;
    flex: none;
}

.tp-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--tp-muted);
    font-size: 1rem;
}

.tp-icon-btn:hover:not(:disabled) {
    background: var(--tp-surface-2);
    color: var(--tp-text);
}

.tp-icon-btn-danger:hover:not(:disabled) {
    color: var(--tp-red);
}

.tp-icon-btn:disabled {
    opacity: .3;
}

.tp-icon-btn:focus-visible {
    outline: 2px solid var(--tp-lime);
    outline-offset: 1px;
}

/* ---------- Тренировка ---------- */

.tp-workouts {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.tp-workout {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius);
    padding: 1rem;
}

@media (min-width: 768px) {
    .tp-workout {
        padding: 1.25rem 1.5rem;
    }
}

.tp-workout-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

/* номер тренировки — крупной узкой цифрой, как на блинах штанги */
.tp-workout-num {
    flex: none;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 .5rem;
    display: grid;
    place-items: center;
    border-radius: .625rem;
    background: var(--tp-lime);
    color: var(--tp-lime-ink);
    font-family: var(--tp-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.tp-workout-name.form-control {
    flex: 1;
    min-width: 0;
    background: transparent;
    border-color: transparent;
    padding: .4rem .6rem;
    font-family: var(--tp-font-display);
    font-size: 1.375rem;
    font-weight: 700;
}

.tp-workout-name.form-control:hover {
    border-color: var(--tp-line);
}

.tp-workout-name.form-control:focus {
    background: var(--tp-surface-2);
}

.tp-workout-hint {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    color: var(--tp-amber);
    font-size: .875rem;
    margin: -.25rem 0 1rem;
}

.tp-workout-empty {
    color: var(--tp-muted);
    margin: 0 0 .5rem;
}

@media (max-width: 575.98px) {
    .tp-workout-head {
        flex-wrap: wrap;
    }

    .tp-workout-head .tp-tools {
        width: 100%;
        justify-content: flex-end;
        margin-top: -.5rem;
    }
}

.tp-add-workout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px dashed #4a5059;
    border-radius: var(--tp-radius);
    background: transparent;
    color: var(--tp-text);
    font-weight: 600;
}

.tp-add-workout:hover {
    border-color: var(--tp-lime);
    color: var(--tp-lime);
}

/* ---------- Упражнение в тренировке ---------- */

.tp-ex {
    position: relative;
    padding: .875rem 1rem;
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius-sm);
    background: var(--tp-bg);
}

.tp-ex + .tp-ex {
    margin-top: .75rem;
}

/* суперсет: общая лаймовая скоба слева, блоки стыкуются */
.tp-ex-superset {
    border-left: 3px solid var(--tp-lime);
}

.tp-ex-superset-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tp-ex-superset-cont {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.tp-ex.tp-ex-superset-cont {
    margin-top: 0;
    border-top-style: dashed;
}

.tp-superset-label {
    display: flex;
    align-items: center;
    gap: .375rem;
    color: var(--tp-lime);
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.tp-ex-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.tp-ex-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tp-ex-name {
    font-weight: 600;
    font-size: 1.0625rem;
}

.tp-ex-type {
    color: var(--tp-muted);
    font-size: .8125rem;
}

.tp-ex-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

.tp-quick {
    display: flex;
    gap: .25rem;
    align-items: center;
}

.tp-quick .form-control {
    width: 9.5rem;
}

.tp-ex-note {
    margin-top: .625rem;
}

/* ---------- Подходы ---------- */

.form-control-sm {
    padding: .4rem .55rem;
    font-size: .9375rem;
    border-radius: .5rem;
}

.tp-sets {
    margin-top: .75rem;
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

/* колонки: # | повторы/время | [вес] | отдых | заметка | удалить */
.tp-set-row {
    display: grid;
    align-items: center;
    gap: .5rem;
}

.tp-sets-m1 .tp-set-row { grid-template-columns: 1.5rem minmax(7rem, 9rem) 5rem 4.5rem minmax(6rem, 1fr) 2.25rem; }
.tp-sets-m2 .tp-set-row,
.tp-sets-m3 .tp-set-row { grid-template-columns: 1.5rem minmax(7rem, 9rem) 4.5rem minmax(6rem, 1fr) 2.25rem; }
.tp-sets-m3 .tp-set-row { grid-template-columns: 1.5rem 5rem 4.5rem minmax(6rem, 1fr) 2.25rem; }

.tp-set-head {
    color: var(--tp-muted);
    font-size: .75rem;
    font-weight: 500;
}

.tp-set-num {
    font-family: var(--tp-font-display);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--tp-muted);
    text-align: center;
}

.tp-reps {
    display: flex;
    align-items: center;
    gap: .25rem;
    color: var(--tp-muted);
}

.tp-reps .form-control {
    min-width: 0;
}

/* на телефоне заметка к подходу уходит на отдельную строку */
@media (max-width: 575.98px) {
    .tp-set-head .tp-set-note-col {
        display: none;
    }

    .tp-sets-m1 .tp-set-row { grid-template-columns: 1.25rem 1fr 4.25rem 3.75rem 2.25rem; }
    .tp-sets-m2 .tp-set-row { grid-template-columns: 1.25rem 1fr 3.75rem 2.25rem; }
    .tp-sets-m3 .tp-set-row { grid-template-columns: 1.25rem 1fr 3.75rem 2.25rem; }

    .tp-set-row input.tp-set-note-col {
        grid-column: 2 / -2;
        grid-row: 2;
    }

    .tp-set-row .tp-icon-btn {
        grid-row: 1;
        grid-column: -2;
    }

    .tp-quick .form-control {
        width: 8rem;
    }
}

/* ---------- Нижняя панель сохранения ---------- */

.tp-savebar {
    position: sticky;
    bottom: 0;
    z-index: 1010;
    margin: 1.5rem -.75rem 0;     /* на всю ширину контейнера */
    padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom));
    background: rgba(32, 35, 40, .94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--tp-line);
}

@media (max-width: 767.98px) {
    .tp-savebar {
        bottom: calc(var(--tp-tabbar-h) + env(safe-area-inset-bottom));
        padding-bottom: .75rem;
    }
}

.tp-savebar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.tp-savebar-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--tp-muted);
    font-size: .875rem;
}

.tp-dot-wait {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--tp-amber);
}

/* ---------- Шторка выбора упражнений ---------- */

.tp-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .55);
}

.tp-sheet {
    position: fixed;
    z-index: 1050;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    background: var(--tp-surface);
    border-top: 1px solid var(--tp-line);
    border-radius: var(--tp-radius) var(--tp-radius) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: tp-sheet-up .2s ease-out;
}

@media (min-width: 768px) {
    .tp-sheet {
        left: auto;
        top: 0;
        width: 28rem;
        max-height: none;
        border-top: 0;
        border-left: 1px solid var(--tp-line);
        border-radius: 0;
        animation-name: tp-sheet-left;
    }
}

@keyframes tp-sheet-up {
    from { transform: translateY(100%); }
}

@keyframes tp-sheet-left {
    from { transform: translateX(100%); }
}

.tp-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem .75rem;
}

.tp-sheet-filters {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 0 1.25rem .75rem;
    border-bottom: 1px solid var(--tp-line);
}

.tp-sheet-filters .tp-chips {
    margin: 0 -1.25rem;
    padding: 0 1.25rem .125rem;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.tp-sheet-body {
    overflow-y: auto;
    flex: 1;
}

.tp-pick-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tp-pick-list li + li {
    border-top: 1px solid var(--tp-line);
}

.tp-pick-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .875rem 1.25rem;
    border: 0;
    background: transparent;
    color: var(--tp-text);
    text-align: left;
}

.tp-pick-item:hover {
    background: var(--tp-surface-2);
}

.tp-pick-item:focus-visible {
    outline: 2px solid var(--tp-lime);
    outline-offset: -2px;
}

.tp-pick-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tp-pick-name {
    font-weight: 600;
}

.tp-pick-sub {
    display: flex;
    gap: 1rem;
    color: var(--tp-muted);
    font-size: .8125rem;
}

.tp-pick-add {
    color: var(--tp-lime);
    font-size: 1.25rem;
}

/* ---------- Карточка клиента ---------- */

.tp-progress-num {
    display: flex;
    align-items: baseline;
    gap: .375rem;
}

.tp-progress-num .tp-display {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tp-lime);
}

/* ---------- Редактор на телефоне: плотнее, чтобы поля подходов были читаемыми ---------- */

@media (max-width: 575.98px) {
    .tp-workout {
        padding: .75rem .625rem;
    }

    .tp-ex {
        padding: .75rem .625rem;
    }

    .tp-set-row {
        gap: .375rem;
    }

    .tp-sets-m1 .tp-set-row { grid-template-columns: 1rem 1fr 3.5rem 3rem 2rem; }
    .tp-sets-m2 .tp-set-row,
    .tp-sets-m3 .tp-set-row { grid-template-columns: 1rem 1fr 3rem 2rem; }

    .tp-set-row .form-control-sm {
        padding: .4rem .4rem;
    }

    .tp-set-row .tp-icon-btn {
        width: 2rem;
    }

    .tp-set-num {
        font-size: 1rem;
    }

    .tp-hide-xs {
        display: none;
    }
}

.tp-savebar-inner {
    flex-wrap: nowrap;
}

.tp-savebar-status {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-savebar-status > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-link-plain {
    color: inherit;
    text-decoration: none;
}

.tp-link-plain:hover {
    color: var(--tp-lime);
}

/* =====================================================================
   Клиент: главная и экран тренировки
   ===================================================================== */

.tp-section-hint {
    margin-top: -.5rem;
}

.tp-trainer-note {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    color: var(--tp-text);
    background: var(--tp-surface-2);
    border-radius: var(--tp-radius-sm);
    padding: .625rem .875rem;
    font-size: .9375rem;
    margin: .75rem 0 0;
}

.tp-trainer-note .bi {
    color: var(--tp-lime);
    flex: none;
}

.tp-finished {
    text-align: center;
    padding: 2rem 1.25rem;
}

.tp-finished > .bi {
    display: block;
    font-size: 2.5rem;
    color: var(--tp-lime);
    margin-bottom: .5rem;
}

/* ---------- Главная клиента ---------- */

.tp-today-plan {
    margin-bottom: 1.5rem;
}

.tp-today-plan-name {
    font-weight: 600;
    font-size: 1.0625rem;
    margin-bottom: .75rem;
}

.tp-today-progress {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .625rem;
}

.tp-today-count {
    font-size: 3rem;
    font-weight: 800;
    line-height: .9;
    color: var(--tp-lime);
}

/* следующая тренировка — главное действие экрана */
.tp-next {
    background: var(--tp-surface);
    border: 1px solid rgba(198, 244, 50, .5);
    border-radius: var(--tp-radius);
    padding: 1.25rem;
}

.tp-next-top {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: 1rem;
}

.tp-next-top .tp-workout-num {
    min-width: 3.5rem;
    height: 3.5rem;
    font-size: 2rem;
}

.tp-next-caption {
    color: var(--tp-muted);
    font-size: .875rem;
}

.tp-next-name {
    font-size: 1.75rem;
    margin: 0;
}

.tp-next-list {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
    color: var(--tp-text);
    columns: 1;
}

@media (min-width: 768px) {
    .tp-next-list {
        columns: 2;
        column-gap: 2rem;
    }
}

.tp-next-list li {
    padding: .2rem 0;
    break-inside: avoid;
}

.tp-next-list li::marker {
    color: var(--tp-muted);
    font-family: var(--tp-font-display);
    font-weight: 700;
}

.tp-workout-num-sm {
    min-width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
    background: var(--tp-surface-2);
    color: var(--tp-text);
}

.tp-workout-num-done {
    background: rgba(198, 244, 50, .14);
    color: var(--tp-lime);
}

.tp-row-button {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
}

.tp-row-button:disabled {
    opacity: 1;
    cursor: default;
}

/* ---------- Экран тренировки ---------- */

.tp-session-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin: .5rem 0 1.25rem;
}

.tp-session-progress {
    display: flex;
    align-items: baseline;
    gap: .375rem;
}

.tp-session-progress .tp-display {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tp-lime);
}

.tp-log {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius);
    padding: 1rem;
}

.tp-log + .tp-log {
    margin-top: 1rem;
}

.tp-log.tp-ex-superset-cont {
    margin-top: 0;
    border-top-style: dashed;
}

.tp-log-complete {
    border-color: rgba(198, 244, 50, .35);
}

.tp-log-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.tp-log-name {
    font-size: 1.5rem;
    margin: 0;
}

.tp-howto-toggle {
    margin-top: .5rem;
    padding-left: 0;
}

.tp-howto {
    margin-top: .5rem;
}

.tp-howto-text {
    white-space: pre-line;
    color: var(--tp-muted);
    font-size: .9375rem;
    margin: .75rem 0 0;
}

.tp-previous {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    font-size: .875rem;
    margin-top: .75rem;
}

.tp-previous-set {
    padding: .125rem .5rem;
    border-radius: .375rem;
    background: var(--tp-surface-2);
    font-weight: 500;
}

/* строка подхода: номер | цель | поля | галочка */
.tp-log-rows {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
}

.tp-log-row {
    display: grid;
    align-items: center;
    gap: .5rem;
    padding: .375rem .375rem .375rem .25rem;
    border-radius: var(--tp-radius-sm);
}

.tp-log-m1 { grid-template-columns: 1.5rem minmax(0, 1fr) 4.5rem 5rem 3rem; }
.tp-log-m2,
.tp-log-m3 { grid-template-columns: 1.5rem minmax(0, 1fr) 5rem 3rem; }

.tp-log-done {
    background: rgba(198, 244, 50, .07);
}

.tp-log-target {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--tp-muted);
    font-size: .875rem;
    line-height: 1.25;
}

.tp-log-target small {
    color: var(--tp-amber);
    font-size: .75rem;
}

.tp-log-field {
    position: relative;
    margin: 0;
}

.tp-log-field > span {
    position: absolute;
    right: .5rem;
    bottom: .2rem;
    color: var(--tp-muted);
    font-size: .625rem;
    pointer-events: none;
}

/* цифры в зале — крупно, узким шрифтом */
.tp-log-input.form-control {
    height: 3rem;
    padding: .25rem 1.5rem .25rem .5rem;
    font-family: var(--tp-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    text-align: center;
}

.tp-log-done .tp-log-input.form-control {
    border-color: rgba(198, 244, 50, .4);
}

.tp-check {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid #4a5059;
    background: transparent;
    color: var(--tp-muted);
    font-size: 1.375rem;
}

.tp-check:hover {
    border-color: var(--tp-lime);
    color: var(--tp-lime);
}

.tp-check-on {
    background: var(--tp-lime);
    border-color: var(--tp-lime);
    color: var(--tp-lime-ink);
}

.tp-check-on:hover {
    color: var(--tp-lime-ink);
}

.tp-check-failed {
    background: transparent;
    border-color: var(--tp-red);
    color: var(--tp-red);
}

.tp-check:focus-visible {
    outline: 2px solid var(--tp-lime);
    outline-offset: 2px;
}

.tp-check:disabled {
    opacity: .6;
}

@media (max-width: 575.98px) {
    .tp-log {
        padding: .875rem .75rem;
    }

    .tp-log-m1 { grid-template-columns: 1.25rem minmax(0, 1fr) 3.75rem 4.25rem 3rem; }
    .tp-log-m2,
    .tp-log-m3 { grid-template-columns: 1.25rem minmax(0, 1fr) 4.5rem 3rem; }

    .tp-log-row {
        gap: .375rem;
    }

    .tp-log-target {
        font-size: .8125rem;
    }
}

.tp-log-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-top: .5rem;
}

.tp-exec-video {
    margin-top: .75rem;
}

/* ---------- Таймер отдыха ---------- */

.tp-rest {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    background: var(--tp-surface);
    border-top: 1px solid var(--tp-lime);
    padding-bottom: env(safe-area-inset-bottom);
}

.tp-rest-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.tp-rest-label {
    color: var(--tp-muted);
    font-size: .875rem;
}

.tp-rest-time {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tp-rest-actions {
    display: flex;
    gap: .25rem;
    margin-left: auto;
}

.tp-rest-bar {
    height: 3px;
    background: var(--tp-lime);
    transition: width .5s linear;
}

.tp-rest-done {
    background: var(--tp-lime);
    color: var(--tp-lime-ink);
}

.tp-rest-done .tp-rest-label {
    color: var(--tp-lime-ink);
}

.tp-rest-done .tp-rest-time {
    font-size: 1.5rem;
}

.tp-rest-done .btn-ghost {
    --bs-btn-color: var(--tp-lime-ink);
    --bs-btn-hover-color: var(--tp-lime-ink);
    --bs-btn-hover-bg: rgba(0, 0, 0, .1);
}

/* =====================================================================
   Проверка тренировок тренером
   ===================================================================== */

.tp-segment-inline {
    display: inline-flex;
}

.tp-row-note {
    color: var(--tp-text);
    font-size: .875rem;
    margin-top: .25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40rem;
}

.tp-review-counts {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2.5rem;
}

.tp-review-counts > div {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.tp-review-counts .tp-display {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tp-lime);
}

.tp-review-client {
    display: inline-block;
    color: var(--tp-muted);
    font-weight: 500;
    text-decoration: none;
    margin-bottom: .25rem;
}

.tp-review-client:hover {
    color: var(--tp-lime);
}

/* комментарий клиента / тренера к тренировке */
.tp-client-note {
    border-left: 3px solid var(--tp-amber);
    background: var(--tp-surface);
    border-radius: 0 var(--tp-radius-sm) var(--tp-radius-sm) 0;
    padding: .875rem 1rem;
    margin-bottom: 1.25rem;
}

.tp-trainer-feedback {
    border-left-color: var(--tp-lime);
}

.tp-trainer-feedback .small {
    color: var(--tp-lime);
    margin-bottom: .25rem;
}

/* легенда цветов факта */
.tp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
    color: var(--tp-muted);
    font-size: .8125rem;
    margin-bottom: 1rem;
}

.tp-legend span {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.tp-legend-dot {
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    display: inline-block;
    background: currentColor;
}

/* план → факт */
.tp-review-rows {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin-top: .75rem;
}

.tp-review-row {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .375rem .25rem;
    border-bottom: 1px solid var(--tp-line);
    font-size: .9375rem;
}

.tp-review-row:last-child {
    border-bottom: 0;
}

.tp-review-head {
    color: var(--tp-muted);
    font-size: .75rem;
    font-weight: 500;
    border-bottom: 0;
    padding-bottom: 0;
}

.tp-fact {
    font-weight: 600;
}

.tp-fact-ok    { color: var(--tp-lime); }
.tp-fact-low   { color: var(--tp-amber); }
.tp-fact-extra { color: var(--tp-text); }

.tp-fact.tp-fact-miss {
    color: var(--tp-muted);
    font-weight: 400;
    text-decoration: line-through;
}

.tp-legend-dot.tp-fact-miss {
    color: var(--tp-muted);
}

.tp-video-review {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tp-line);
}

.tp-video-review-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .75rem;
}

.tp-video-review-done .tp-trainer-note {
    flex: 1;
    margin: 0;
}

/* видео выполнения не растягиваем на всю ширину — план и факт остаются в поле зрения */
.tp-video-review .tp-video,
.tp-video-review .tp-video-state,
.tp-exec-video .tp-video,
.tp-exec-video .tp-video-state {
    max-width: 36rem;
}