* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.clickable {
    cursor: pointer;
}

/* Тёмная тема (по умолчанию) */
:root {
    --bg-dark: #0a0a0a;
    --bg-card: #141414;
    --bg-card-hover: #1a1a1a;
    --bg-input: #1a1a1a;
    --bg-secondary: #1a1a1a;
    --text-primary: #ffffff;
    --text: #ffffff;
    --text-secondary: #888888;
    --text-muted: #555555;
    --accent: #22c55e;
    --accent-hover: #16a34a;
    --primary: #22c55e;
    --danger: #ef4444;
    --border-color: #262626;
    --border-light: #333333;
    --shadow-color: rgba(0, 0, 0, 0.3);
    /* Цвета для весов гирь */
    --weight-12: #3b82f6;
    --weight-14: #3b82f6;
    --weight-16: #facc15;
    --weight-18: #facc15;
    --weight-20: #a855f7;
    --weight-22: #a855f7;
    --weight-24: #22c55e;
    --weight-26: #22c55e;
    --weight-28: #f97316;
    --weight-30: #f97316;
    --weight-32: #ef4444;
    --weight-34: #ef4444;
    --weight-36: #8b8b8b;
}

/* Светлая тема */
[data-theme="light"] {
    --bg-dark: #f5f5f5;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f0f0;
    --bg-input: #ffffff;
    --bg-secondary: #ffffff;
    --text-primary: #1a1a1a;
    --text: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #999999;
    --accent: #16a34a;
    --accent-hover: #15803d;
    --primary: #16a34a;
    --danger: #dc2626;
    --border-color: #e5e5e5;
    --border-light: #d4d4d4;
    --shadow-color: rgba(0, 0, 0, 0.08);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height для iOS/Telegram WebApp */
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 16px;
    padding-bottom: 100px;
}

/* ===== HEADER ===== */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    position: sticky;
    top: 0;
    background: var(--bg-dark);
    z-index: 100;
}

.main-header h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.main-header h1#form-title {
    font-size: 18px;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
}

.header-actions {
    display: flex;
    gap: 4px;
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    background: var(--bg-card);
}

.icon-btn.add-btn {
    background: var(--accent);
    color: #000;
}

.icon-btn.add-btn:hover {
    background: var(--accent-hover);
}

.icon-btn.delete-btn:hover {
    color: var(--danger);
}

.icon-btn.settings-btn {
    color: var(--text-muted);
    opacity: 0.6;
}

.icon-btn.settings-btn:hover {
    opacity: 1;
}

.icon-btn.back-btn {
    margin-left: -8px;
}

/* ===== VIEWS ===== */
.view {
    display: none;
}

.view.active {
    display: block;
}

/* Полноэкранные view с закреплённым header */
#add-view {
    display: none;
    flex-direction: column;
    height: 100%;
}

#add-view.active {
    display: flex;
}

#add-view .main-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-dark);
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#add-view form {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 80px; /* Место для закреплённых кнопок */
}

/* ===== STAT CARDS ===== */
.stat-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
}

.calendar-card {
    padding: 14px;
}

/* ===== STATS ROW ===== */
.stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}

/* Отдельная stats-row вне карточки (для обратной совместимости) */
.stats-row:not(.home-stats-card .stats-row) {
    background: var(--bg-card);
    border-radius: 16px;
    margin-bottom: 12px;
    padding: 16px 20px;
}

.stat-item {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.stat-value.trend {
    color: var(--accent);
}

.stat-value.trend.negative {
    color: var(--danger);
}

.stat-label {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
    min-height: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border-color);
}

/* ===== SECTION HEADER ===== */
.section-header {
    margin-bottom: 12px;
}

.section-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== GITHUB CALENDAR ===== */
/* Размеры: квадрат 10px, gap 2px, колонка недели = 10px, ряд месяцев синхронизирован */
.github-calendar-container {
    overflow-x: auto;
    padding: 0;
}

.calendar-header-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.github-calendar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calendar-months-row {
    display: flex;
    /* Без gap - ширина каждого label уже включает отступ */
    margin-left: 23px; /* weekdays width (20px) + grid gap (3px) */
}

.calendar-months-spacer {
    display: none; /* Не нужен, используем margin-left */
}

.calendar-month-label {
    width: 12px; /* Ширина колонки = квадрат (10px) + gap (2px) */
    font-size: 9px;
    color: var(--text-muted);
    text-align: left;
    flex-shrink: 0;
    overflow: visible;
    white-space: nowrap;
}

.github-calendar-grid {
    display: flex;
    gap: 3px;
}

.calendar-weekdays {
    display: flex;
    flex-direction: column;
    gap: 2px; /* Такой же как между днями */
    width: 20px;
    flex-shrink: 0;
}

.calendar-weekday-label {
    height: 10px; /* Такая же как квадрат */
    font-size: 8px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.calendar-weeks {
    display: flex;
    gap: 2px;
}

.calendar-week {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.github-day {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.15s;
}

.github-day.level-0 {
    background: #161b22;
    border: 1px solid #21262d;
}

.github-day.level-1 { background: #0e4429; }
.github-day.level-2 { background: #006d32; }
.github-day.level-3 { background: #26a641; }
.github-day.level-4 { background: #39d353; }

/* Чередование месяцев: нечётные месяцы чуть темнее (едва заметно) */
.github-day.month-odd.level-0 {
    background: #151a21;
    border-color: #20262d;
}
.github-day.month-odd.level-1 { background: #0c4128; }
.github-day.month-odd.level-2 { background: #006830; }
.github-day.month-odd.level-3 { background: #24a03f; }
.github-day.month-odd.level-4 { background: #37cf51; }

/* Чётные месяцы чуть светлее (едва заметно) */
.github-day.month-even.level-0 {
    background: #181e25;
    border-color: #232931;
}
.github-day.month-even.level-1 { background: #0e482b; }
.github-day.month-even.level-2 { background: #007234; }
.github-day.month-even.level-3 { background: #28ac43; }
.github-day.month-even.level-4 { background: #3bd755; }

.github-day.today {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.github-day.future {
    opacity: 0.3;
    cursor: default;
}

.github-day:hover:not(.future) {
    transform: scale(1.3);
    z-index: 10;
}

.calendar-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
}

.calendar-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-muted);
}

.legend-squares {
    display: flex;
    gap: 2px;
}

.legend-square {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.legend-square.level-0 {
    background: #161b22;
    border: 1px solid #21262d;
}
.legend-square.level-1 { background: #0e4429; }
.legend-square.level-2 { background: #006d32; }
.legend-square.level-3 { background: #26a641; }
.legend-square.level-4 { background: #39d353; }

/* Light theme - GitHub calendar colors */
[data-theme="light"] .github-day.level-0 {
    background: #ebedf0;
    border: 1px solid #d0d7de;
}
[data-theme="light"] .github-day.level-1 { background: #9be9a8; }
[data-theme="light"] .github-day.level-2 { background: #40c463; }
[data-theme="light"] .github-day.level-3 { background: #30a14e; }
[data-theme="light"] .github-day.level-4 { background: #216e39; }

[data-theme="light"] .github-day.month-odd.level-0 {
    background: #e8ebee;
    border-color: #cdd4db;
}
[data-theme="light"] .github-day.month-odd.level-1 { background: #96e4a3; }
[data-theme="light"] .github-day.month-odd.level-2 { background: #3bbf5e; }
[data-theme="light"] .github-day.month-odd.level-3 { background: #2b9c49; }
[data-theme="light"] .github-day.month-odd.level-4 { background: #1d6934; }

[data-theme="light"] .github-day.month-even.level-0 {
    background: #eef1f4;
    border-color: #d3dae1;
}
[data-theme="light"] .github-day.month-even.level-1 { background: #a0eead; }
[data-theme="light"] .github-day.month-even.level-2 { background: #45c968; }
[data-theme="light"] .github-day.month-even.level-3 { background: #35a653; }
[data-theme="light"] .github-day.month-even.level-4 { background: #25733e; }

[data-theme="light"] .legend-square.level-0 {
    background: #ebedf0;
    border: 1px solid #d0d7de;
}
[data-theme="light"] .legend-square.level-1 { background: #9be9a8; }
[data-theme="light"] .legend-square.level-2 { background: #40c463; }
[data-theme="light"] .legend-square.level-3 { background: #30a14e; }
[data-theme="light"] .legend-square.level-4 { background: #216e39; }

/* Calendar Tooltip */
.calendar-tooltip {
    position: fixed;
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    pointer-events: none;
    z-index: 2000;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

/* Day Trainings Modal */
.day-trainings-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 20px;
}

.day-trainings-modal {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.day-trainings-modal h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.day-trainings-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--bg-input);
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.day-trainings-close:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.day-trainings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.day-training-item {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.day-training-item:hover {
    border-color: var(--accent);
}

.day-training-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.day-training-stats {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
}

.day-training-stats span:last-child {
    color: var(--accent);
    font-weight: 600;
}

/* ===== TRAINING CARDS ===== */
.trainings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 80px;
}

.training-card {
    background: var(--bg-card);
    padding: 16px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.training-card:hover {
    border-color: var(--border-light);
}

.training-card:active {
    transform: scale(0.98);
}

.training-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 12px;
}

.training-card-header > div:first-child {
    flex: 1;
    min-width: 0;
}

.training-card-body {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.training-card-content {
    flex: 1;
    min-width: 0;
}

.training-card-photo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
}

.training-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.training-card-title {
    font-size: 16px;
    font-weight: 600;
}

.training-card-date {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.training-card-volume {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    flex-shrink: 0;
}

.training-card-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.training-card-stat {
    display: flex;
    flex-direction: column;
}

.training-card-stat-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* Подходы с отдыхом в карточке */
.training-card-exercises {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
}

.training-card-exercise-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.exercise-group-label {
    color: var(--text-secondary);
    min-width: 42px;
    font-size: 10px;
}

.exercise-group-total {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 24px;
    font-size: 10px;
}

.exercise-sets {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.exercise-set {
    background: var(--bg-tertiary);
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 10px;
    color: var(--text-primary);
}

.exercise-set.interval-set {
    background: #f59e0b22;
    color: #f59e0b;
}

.exercise-rest {
    font-size: 9px;
    color: var(--text-muted);
    padding: 0 1px;
}

/* Строка с тегами (веса + метки) на карточках */
.training-card-tags {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.weight-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    color: #000;
}

.weight-badge.weight-12 { background: var(--weight-12); color: #fff; }
.weight-badge.weight-14 { background: var(--weight-14); color: #fff; }
.weight-badge.weight-16 { background: var(--weight-16); color: #000; }
.weight-badge.weight-18 { background: var(--weight-18); color: #000; }
.weight-badge.weight-20 { background: var(--weight-20); color: #fff; }
.weight-badge.weight-22 { background: var(--weight-22); color: #fff; }
.weight-badge.weight-24 { background: var(--weight-24); color: #000; }
.weight-badge.weight-26 { background: var(--weight-26); color: #000; }
.weight-badge.weight-28 { background: var(--weight-28); color: #000; }
.weight-badge.weight-30 { background: var(--weight-30); color: #000; }
.weight-badge.weight-32 { background: var(--weight-32); color: #fff; }
.weight-badge.weight-34 { background: var(--weight-34); color: #fff; }
.weight-badge.weight-36 { background: var(--weight-36); color: #fff; }

/* Метки интервальная/проходка/ОФП в строке тегов */
.training-card-tags .interval-badge,
.training-card-tags .prohodka-badge,
.training-card-tags .ofp-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}

.training-card-tags .interval-badge {
    background: #f59e0b22;
    color: #f59e0b;
}

.training-card-tags .prohodka-badge {
    background: #ef444422;
    color: #ef4444;
}

.training-card-tags .ofp-badge {
    background: #8b5cf622;
    color: #8b5cf6;
}

/* ===== BOTTOM NAV ===== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* iOS Glass Effect */
    background: rgba(30, 30, 30, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 6px 0;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    z-index: 1000;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 12px;
    transition: all 0.2s;
}

.nav-item.active {
    color: var(--accent);
}

.nav-item svg {
    width: 20px;
    height: 20px;
}

.nav-label {
    font-size: 9px;
    font-weight: 500;
}

/* Кнопка-гиря */
.nav-item.kettlebell-btn {
    color: var(--accent);
    padding: 4px 8px;
}

.kettlebell-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
}

.kettlebell-icon svg {
    width: 28px;
    height: 28px;
}

.nav-item.kettlebell-btn:active .kettlebell-icon {
    transform: scale(0.9);
}

.nav-item.kettlebell-btn .nav-label {
    color: var(--accent);
}

/* ===== FORM ===== */
.form-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
}

.form-row {
    margin-bottom: 12px;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-row-inline {
    display: flex;
    gap: 10px;
    align-items: center;
}

.form-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.form-field input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 16px;
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.form-field input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Date picker button */

.form-field-name {
    flex: 1;
}

/* DateTime Picker */
.datetime-picker-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.datetime-picker-btn:hover {
    border-color: var(--accent);
}

.datetime-picker-btn svg {
    color: var(--text-muted);
}

.form-field-datetime {
    position: relative;
    flex-shrink: 0;
}

.datetime-input-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Exercise Cards */
.exercise-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
}

.exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px;
}

.exercise-header h3 {
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Кнопки перемещения секций */
.section-move-btns {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.section-move-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.section-move-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.section-move-btn:active {
    transform: scale(0.95);
}

/* Кнопка-тег в заголовке секции (ИНТ для толчка) */
.header-tag-btn {
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

.header-tag-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.header-tag-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
}

/* Теги рывка (перчатка, доп.мах) - для подхода */
.jerk-tag-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.jerk-tag-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.jerk-tag-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
}

.jerk-tag-btn svg {
    width: 14px;
    height: 14px;
}

.exercise-info {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 4px 8px;
    border-radius: 6px;
}

.exercises-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.exercise-item {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 12px;
}

.exercise-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.exercise-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Действия для подхода (теги + удалить) */
.exercise-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.jerk-set-tags {
    display: flex;
    gap: 2px;
}

/* Теги для толчка (ИНТ) */
.push-set-tags {
    display: flex;
    gap: 4px;
    margin-right: 8px;
}

.push-tag-btn {
    height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s;
}

.push-tag-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.push-tag-btn .tag-text {
    font-size: 11px;
    font-weight: 700;
}

.jerk-set-tags .jerk-tag-btn {
    width: 24px;
    height: 24px;
    padding: 0;
}

.jerk-set-tags .jerk-tag-btn svg {
    width: 12px;
    height: 12px;
}

/* Кнопки Л/П для одной руки */
.jerk-tag-hand {
    min-width: 22px !important;
    width: auto !important;
    padding: 0 4px !important;
}

.jerk-tag-hand .tag-text {
    font-size: 11px;
    font-weight: 700;
}

/* Кнопка АГР (со сменой рук) */
.jerk-tag-agr {
    min-width: 32px !important;
    width: auto !important;
    padding: 0 6px !important;
}

.jerk-tag-agr .tag-text {
    font-size: 10px;
    font-weight: 600;
}

/* Теги для длинного цикла (1/2 гири) */
.lc-set-tags {
    display: flex;
    gap: 2px;
}

.lc-tag-btn {
    width: auto;
    min-width: 42px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: all 0.2s;
    padding: 0 4px;
}

.lc-tag-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.lc-tag-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
}

.lc-multiplier {
    font-size: 11px;
    font-weight: 600;
}

/* Теги для толчка (интервалка) */
.push-set-tags {
    display: flex;
    gap: 2px;
}

.push-tag-btn {
    min-width: 32px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0 6px;
}

.push-tag-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.push-tag-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
}

.push-tag-btn .tag-text {
    font-size: 10px;
    font-weight: 600;
}

/* Теги разминки (Т/Р/ДЦ) */
.warmup-set-tags {
    display: flex;
    gap: 2px;
}

.warmup-tag-btn {
    min-width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0 6px;
}

.warmup-tag-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.warmup-tag-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
}

.warmup-tag-btn .tag-text {
    font-size: 10px;
    font-weight: 600;
}

/* Поле ввода интервальных повторений */
.interval-reps-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 14px;
}

.interval-reps-input::placeholder {
    color: var(--text-muted);
}

/* Колонка интервалки в grid (заменяет повторения и время) */
.interval-col {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
}

.interval-col label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.interval-col .interval-reps-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
}

.interval-col .interval-reps-input:focus {
    outline: none;
    border-color: var(--accent);
}

.interval-col .interval-reps-input::placeholder {
    color: var(--text-muted);
}

.interval-col .interval-stats-row {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

/* Режим интервалки - grid остаётся 3 колонки, но 2я и 3я скрыты */
.exercise-inputs.interval-mode {
    grid-template-columns: 1fr 2fr;
}

.interval-input-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.interval-input-row label {
    font-size: 12px;
    color: var(--text-muted);
}

.interval-input-row .interval-reps-input {
    width: 100%;
}

.interval-stats-row {
    margin-top: 4px;
    font-size: 11px;
}

.interval-stat-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.interval-stat-badge {
    background: rgba(34, 197, 94, 0.15);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.btn-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove:hover {
    background: var(--danger);
    color: white;
}

.btn-remove svg {
    width: 16px;
    height: 16px;
}

.exercise-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.exercise-inputs.three-cols {
    grid-template-columns: 1fr 1fr 1fr;
}

.exercise-inputs.one-col {
    grid-template-columns: 1fr;
}

.exercise-inputs label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: block;
}

.exercise-inputs input {
    width: 100%;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    text-align: center;
}

.exercise-inputs input:focus,
.exercise-inputs select:focus {
    outline: none;
    border-color: var(--accent);
}

/* Выпадающий список веса гири */
.weight-select {
    width: 100%;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: all 0.2s;
}

.weight-select.weight-12 { background-color: var(--weight-12); color: #fff; }
.weight-select.weight-14 { background-color: var(--weight-14); color: #fff; }
.weight-select.weight-16 { background-color: var(--weight-16); color: #000; }
.weight-select.weight-18 { background-color: var(--weight-18); color: #000; }
.weight-select.weight-20 { background-color: var(--weight-20); color: #fff; }
.weight-select.weight-22 { background-color: var(--weight-22); color: #fff; }
.weight-select.weight-24 { background-color: var(--weight-24); color: #000; }
.weight-select.weight-26 { background-color: var(--weight-26); color: #000; }
.weight-select.weight-28 { background-color: var(--weight-28); color: #000; }
.weight-select.weight-30 { background-color: var(--weight-30); color: #000; }
.weight-select.weight-32 { background-color: var(--weight-32); color: #fff; }
.weight-select.weight-34 { background-color: var(--weight-34); color: #fff; }
.weight-select.weight-36 { background-color: var(--weight-36); color: #fff; }

.weight-select option {
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 8px;
}

/* Поле ввода повторений для рывка (50+50) */
.exercise-inputs input.reps-input {
    font-size: 14px;
}

.exercise-tempo {
    margin-top: 8px;
    font-size: 12px;
    color: var(--accent);
    text-align: center;
}

/* Rest section between sets */
.rest-section {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.rest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rest-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.rest-section .picker-button {
    min-width: 60px;
    padding: 6px 12px;
    font-size: 14px;
}

.add-set-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: transparent;
    border: 1px dashed var(--border-light);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 12px;
}

.add-set-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Exercise Buttons Row */
.exercise-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.exercise-buttons .add-set-btn {
    flex: 1;
    margin-top: 0;
}

.add-interval-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: transparent;
    border: 1px dashed var(--border-light);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.add-interval-btn:hover {
    border-color: #f59e0b;
    color: #f59e0b;
}

.add-interval-btn svg {
    flex-shrink: 0;
}

/* Interval Section */
.interval-section {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
    border: 1px solid #f59e0b33;
}

.interval-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.interval-title {
    font-size: 14px;
    font-weight: 600;
    color: #f59e0b;
}

.interval-remove-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.interval-remove-btn:hover {
    background: var(--danger);
    color: white;
}

.interval-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.interval-row {
    display: flex;
    gap: 10px;
}

.interval-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.interval-field label {
    font-size: 11px;
    color: var(--text-muted);
}

.interval-field-wide {
    flex: 1;
}

.interval-field input {
    width: 100%;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.interval-field input:focus {
    outline: none;
    border-color: #f59e0b;
}

.interval-stats {
    display: flex;
    gap: 16px;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 8px;
    font-size: 13px;
}

.interval-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.interval-stat-label {
    color: var(--text-muted);
}

.interval-stat-value {
    color: #f59e0b;
    font-weight: 600;
}

/* Summary Card */
.summary-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

.summary-header {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.summary-columns-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    padding: 4px 0 8px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: lowercase;
}

.summary-columns-header span:nth-child(2),
.summary-columns-header span:nth-child(3) {
    min-width: 60px;
    text-align: right;
}

.summary-columns-header.four-cols span:nth-child(2),
.summary-columns-header.four-cols span:nth-child(3),
.summary-columns-header.four-cols span:nth-child(4) {
    min-width: 50px;
    text-align: right;
}

.summary-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.summary-row.four-cols,
.summary-total.four-cols,
.summary-columns-header.four-cols {
    grid-template-columns: 1fr auto auto auto;
    gap: 12px;
}

.summary-row.four-cols span:nth-child(2),
.summary-row.four-cols span:nth-child(3) {
    color: var(--text-muted);
    font-size: 13px;
    min-width: 50px;
    text-align: right;
}

.summary-total.four-cols span:nth-child(2),
.summary-total.four-cols span:nth-child(3) {
    min-width: 50px;
    text-align: right;
}

.summary-row:last-of-type {
    border-bottom: none;
}

.summary-row span:first-child {
    color: var(--text-primary);
}

.summary-row span:nth-child(2) {
    color: var(--text-muted);
    font-size: 13px;
    min-width: 60px;
    text-align: right;
}

.summary-row .summary-weight {
    color: var(--text-primary);
    font-weight: 600;
    min-width: 70px;
    text-align: right;
}

.summary-total {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
    font-size: 15px;
    font-weight: 600;
}

.summary-total span:first-child {
    color: var(--text-primary);
}

.summary-total span:nth-child(2) {
    color: var(--text-muted);
    min-width: 60px;
    text-align: right;
}

.summary-total span:last-child {
    color: var(--accent);
    min-width: 70px;
    text-align: right;
}

/* Summary Notes (внутри итогов) */
.summary-notes {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--bg-hover);
}

.summary-notes textarea {
    width: 100%;
    min-height: 60px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--bg-hover);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    resize: vertical;
}

.summary-notes textarea::placeholder {
    color: var(--text-secondary);
}

/* Summary Photo (внутри итогов) */
.summary-photo {
    margin-top: 12px;
}

.summary-photo .photo-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px dashed var(--bg-hover);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.summary-photo .photo-upload-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Save Button */
.save-btn {
    width: 100%;
    padding: 16px;
    background: var(--accent);
    border: none;
    border-radius: 12px;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.save-btn:hover {
    background: var(--accent-hover);
}

.save-btn:active {
    transform: scale(0.98);
}

/* ===== ANALYTICS ===== */
.analytics-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.metric-card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 16px;
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.metric-title {
    font-size: 15px;
    font-weight: 600;
}

.metric-period {
    font-size: 13px;
    color: var(--text-muted);
}

.metric-total {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
}

/* Competition Countdown */
.competition-countdown-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(34, 197, 94, 0.1) 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.countdown-content {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.countdown-days,
.countdown-trainings {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.countdown-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.countdown-label {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Chart Section Title */
.chart-section-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Weekly Chart - Результаты по неделям */
.weekly-chart-card {
    padding: 16px;
}

.weekly-date-range {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.weekly-stats-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.weekly-stat {
    flex: 1;
    text-align: center;
}

.weekly-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
}

.weekly-stat-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.weekly-chart {
    width: 100%;
    height: 120px;
    position: relative;
    display: block;
    touch-action: none;
    cursor: pointer;
}

.weekly-chart svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Monthly Chart - Результаты по месяцам */
.monthly-chart-card {
    padding: 16px;
}

.monthly-date-range {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.monthly-stats-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.monthly-stats-secondary {
    margin-bottom: 16px;
}

.monthly-stats-secondary .monthly-stat-value {
    font-size: 16px;
    color: var(--text-secondary);
}

.monthly-stats-secondary .monthly-stat-label {
    font-size: 10px;
}

.monthly-stat {
    flex: 1;
    text-align: center;
}

.monthly-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
}

.monthly-stat-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.monthly-chart {
    width: 100%;
    height: 120px;
    position: relative;
    display: block;
    touch-action: none;
    cursor: pointer;
}

.monthly-chart svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.monthly-goal-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.monthly-goal-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.monthly-goal-current {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
}

.monthly-goal-target {
    font-size: 14px;
    color: var(--text-muted);
}

.chart-line-graph {
    width: 100%;
    height: 100%;
}

/* Year Stats */
.year-stats {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.year-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent);
}

.year-goal {
    font-size: 14px;
    color: var(--text-muted);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.3s;
}

.progress-text {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: right;
}

/* Comparison Grid */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.comparison-block {
    background: var(--bg-input);
    padding: 14px;
    border-radius: 12px;
    text-align: center;
}

.comparison-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.comparison-value {
    font-size: 20px;
    font-weight: 700;
}

.comparison-diff-large {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
}

.comparison-diff-large.negative {
    color: var(--danger);
}

/* Cardio Stats */
.cardio-types-list {
    margin-top: 12px;
}

.cardio-type-row {
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.cardio-type-row:last-child {
    border-bottom: none;
}

/* Month comparison section */
.month-comparison {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.comparison-trainings {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Top Trainings */
.top-trainings-select {
    background: var(--bg-input);
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
}

.top-trainings {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.top-training-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--bg-input);
    border-radius: 10px;
}

.top-training-rank {
    width: 24px;
    height: 24px;
    background: var(--accent);
    color: #000;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-right: 12px;
}

.top-training-info {
    flex: 1;
}

.top-training-name {
    font-size: 14px;
    font-weight: 500;
}

.top-training-date {
    font-size: 12px;
    color: var(--text-muted);
}

.top-training-volume {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
}

/* ===== MODAL ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    overflow: auto;
}

.modal-content {
    background-color: var(--bg-card);
    margin: 10% auto;
    padding: 24px;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    position: relative;
}

.close {
    position: absolute;
    right: 16px;
    top: 16px;
    color: var(--text-secondary);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close:hover {
    color: var(--text-primary);
}

/* Photo Modal */
.photo-modal-content {
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}

.photo-modal-content h2 {
    font-size: 18px;
    margin-bottom: 16px;
}

.photo-modal-content canvas {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

.photo-actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
}

.btn-secondary {
    flex: 1;
    padding: 14px;
    background: var(--accent);
    border: none;
    border-radius: 10px;
    color: #000;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: var(--accent-hover);
}

/* Кнопки шеринга фото */
.btn-share-full,
.btn-share-photo {
    flex: 1;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-share-full svg,
.btn-share-photo svg {
    color: #0088cc;
}

.btn-share-full:hover,
.btn-share-photo:hover {
    background: var(--bg-card);
    border-color: #0088cc;
}

.btn-share-full:active,
.btn-share-photo:active {
    transform: scale(0.98);
}

/* Статус отправки */
.photo-share-status {
    text-align: center;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    font-size: 14px;
    animation: fadeIn 0.3s;
}

.photo-share-status.sending {
    background: rgba(0, 136, 204, 0.1);
    color: #0088cc;
}

.photo-share-status.success {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
}

.photo-share-status.error {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
}

/* ===== ПРОФИЛЬ ===== */

/* Карточка профиля с аватаром, именем и бейджами */
.profile-card {
    background: var(--bg-card);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #000;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-clickable {
    cursor: pointer;
    position: relative;
}


.profile-name-editable {
    cursor: pointer;
    border-bottom: 1px dashed var(--text-muted);
    padding-bottom: 2px;
}

/* Модалка аватара */
.avatar-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.avatar-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.avatar-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px 24px;
    max-width: 320px;
    width: 100%;
}

.avatar-modal-image {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-modal-initials {
    font-size: 56px;
    font-weight: 700;
    color: #000;
}

.avatar-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}


.avatar-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.avatar-modal-btn:active {
    opacity: 0.7;
}

.avatar-modal-btn.primary {
    background: var(--accent);
    color: #000;
}

.avatar-modal-btn.danger {
    background: var(--danger);
    color: #fff;
}

.avatar-modal-btn.secondary {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* Модалка редактирования имени */
.name-edit-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.name-edit-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.name-edit-modal {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    max-width: 320px;
    width: calc(100% - 48px);
}

.name-edit-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    text-align: center;
}

.name-edit-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 16px;
    outline: none;
}

.name-edit-input:focus {
    border-color: var(--accent);
}

.name-edit-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
    text-align: center;
}

.name-edit-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

/* Обёртка для аватара с бейджем разряда в собственном профиле */
.profile-header .profile-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.profile-rank-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Обёртки для аватаров с бейджами */
.feed-card-avatar-wrapper,
.comment-avatar-wrapper,
.my-comrade-avatar-wrapper,
.notification-avatar-wrapper,
.search-result-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

/* Размеры обёрток под размер аватаров */
.feed-card-avatar-wrapper {
    width: 40px;
    height: 40px;
}

.comment-avatar-wrapper {
    width: 32px;
    height: 32px;
    min-width: 32px;
}

.my-comrade-avatar-wrapper {
    width: 40px;
    height: 40px;
}

.notification-avatar-wrapper {
    width: 44px;
    height: 44px;
}

.search-result-avatar-wrapper {
    width: 40px;
    height: 40px;
}

/* Общие стили для мини-бейджей разряда */
.feed-rank-badge,
.comment-rank-badge,
.my-comrade-rank-badge,
.notification-rank-badge,
.search-rank-badge {
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #000;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
    z-index: 1;
}

/* Бейджи для аватаров 40px (feed, comrade, search) - пропорции как в профиле 80px */
.feed-rank-badge,
.my-comrade-rank-badge,
.search-rank-badge {
    font-size: 5px;
    padding: 1px 4px;
    border-radius: 6px;
}

/* Бейджи для аватаров 44px (notifications) */
.notification-rank-badge {
    font-size: 5.5px;
    padding: 1px 4px;
    border-radius: 6px;
}

/* Бейджи для аватаров 32px (comments) */
.comment-rank-badge {
    font-size: 4px;
    padding: 1px 3px;
    border-radius: 5px;
}

/* Ещё меньше для ответов (аватар ~24px) */
.comment-item.is-reply .comment-rank-badge {
    font-size: 3px;
    padding: 1px 2px;
    bottom: -2px;
}

/* Серый бейдж "Гость" для наблюдателей */
.guest-badge {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important;
    color: #fff !important;
}

/* Бейджи в собственном профиле */
.profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 20px 16px;
    justify-content: flex-start;
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--bg-input);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.profile-badge svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.profile-badge.specialization-badge {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.profile-badge.streak-badge {
    background: rgba(139, 139, 139, 0.15);
    color: #8b8b8b;
}

.profile-badge.streak-color-1 {
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
}

.profile-badge.streak-color-2 {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.profile-badge.streak-color-3 {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.profile-badge.streak-color-4 {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.profile-badge.streak-color-5 {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.profile-badge.rank-goal-badge {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.profile-badge.competition-badge {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.profile-badge .competition-badge-content {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.profile-badge .competition-badge-date {
    font-weight: 600;
}

.profile-badge .competition-badge-label {
    font-size: 9px;
    opacity: 0.8;
}

/* Полоска "Товарищи" */
.profile-comrades-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.profile-comrades-row:active {
    background: var(--bg-input);
}

.profile-comrades-label {
    font-size: 15px;
    color: var(--text-primary);
}

.profile-comrades-counts {
    font-size: 15px;
    color: var(--text-secondary);
    flex: 1;
}

.profile-comrades-row .chevron {
    color: var(--text-secondary);
    opacity: 0.5;
}

/* Ссылка на профиль (под именем) */
.profile-link-inline {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.profile-link-inline:active {
    opacity: 0.6;
}

.profile-link-label {
    font-size: 10px;
    color: var(--text-muted);
}

.profile-link-url-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.profile-link-url {
    font-size: 10px;
    color: var(--accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-link-copy {
    color: var(--accent);
    flex-shrink: 0;
}

.profile-info h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.profile-info p {
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.profile-info p:active {
    opacity: 0.7;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.profile-stat-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.profile-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
}

.profile-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ===== РЕКОРДЫ ПО ВРЕМЕНИ ПОД НАГРУЗКОЙ ===== */
.records-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

.records-card .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.records-card .card-header span {
    font-size: 20px;
}

.records-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.records-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.record-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.record-item:last-child {
    border-bottom: none;
}

.record-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.record-name {
    font-size: 14px;
    font-weight: 500;
}

.record-date {
    font-size: 12px;
    color: var(--text-tertiary);
}

.record-value {
    font-weight: 600;
    font-size: 14px;
    color: var(--accent);
}

.no-records {
    color: var(--text-tertiary);
    font-size: 14px;
    text-align: center;
    padding: 12px 0;
}

/* Бейдж времени в карточке тренировки */
.long-set-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--weight-28);
    background: rgba(249, 115, 22, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
}

/* Макс. время в детальном просмотре тренировки */
.view-training-maxset {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(249, 115, 22, 0.1);
    border-radius: 12px;
    margin-top: 12px;
}

.maxset-icon {
    font-size: 18px;
}

.maxset-label {
    flex: 1;
    font-size: 14px;
    color: var(--text-secondary);
}

.maxset-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--weight-28);
}

.profile-menu {
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
}

.profile-menu-item:last-child {
    border-bottom: none;
}

.profile-menu-item:hover {
    background: var(--bg-card-hover);
}

.profile-menu-item svg {
    color: var(--text-secondary);
}

.profile-menu-item span {
    flex: 1;
    font-size: 15px;
}

.profile-menu-item .chevron {
    color: var(--text-muted);
}

/* Комментарий к тренировке */
/* Comment field - compact input style */
#training-comment {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    resize: none;
    height: 56px;
    font-family: inherit;
    line-height: 1.4;
}

#training-comment:focus {
    outline: none;
    border-color: var(--accent);
}

/* Фото с данными тренировки */
.photo-upload-section {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 12px;
}

.photo-upload-btn {
    width: 100%;
    padding: 16px;
    background: var(--bg-input);
    border: 1px dashed var(--border-light);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
}

.photo-upload-btn:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
}

.photo-upload-btn svg {
    color: var(--text-muted);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.photo-upload-btn span {
    color: var(--text-secondary);
    font-size: 14px;
}

.photo-preview {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    max-height: 300px;
}

.photo-preview img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    display: block;
    background: var(--bg-input);
}

.photo-preview-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
}

.photo-preview-send,
.photo-preview-replace,
.photo-preview-remove {
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.7);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.photo-preview-send {
    background: var(--accent);
}

.photo-preview-send:hover,
.photo-preview-replace:hover,
.photo-preview-remove:hover {
    background: rgba(0,0,0,0.85);
}

.photo-preview-send:hover {
    background: var(--accent-hover);
}

/* Вес в заголовке упражнения */
.exercise-weights-header {
    display: flex;
    gap: 4px;
}

.exercise-weights-header .weight-badge {
    font-size: 10px;
    padding: 2px 6px;
}

/* Distribution Chart */
.distribution-chart {
    padding: 8px 0;
}

.distribution-bar {
    display: flex;
    height: 24px;
    background: var(--bg-input);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.distribution-fill {
    height: 100%;
    transition: width 0.5s ease;
}

.distribution-fill.push-fill {
    background: var(--accent);
}

.distribution-fill.jerk-fill {
    background: #3b82f6;
}

.distribution-legend {
    display: flex;
    justify-content: center;
    gap: 32px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.push-dot {
    background: var(--accent);
}

.legend-dot.jerk-dot {
    background: #3b82f6;
}

.legend-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.stat-block {
    background: var(--bg-input);
    padding: 16px;
    border-radius: 12px;
    text-align: center;
}

.stat-block-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 4px;
}

.stat-block-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* Period Toggle */
.period-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.period-btn {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-input);
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.period-btn.active {
    background: var(--accent);
    color: var(--bg-primary);
}

.period-btn:hover:not(.active) {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Custom Period Selector */
.custom-period-selector {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}

.custom-period-row {
    display: flex;
    gap: 12px;
}

.custom-period-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.custom-period-field label {
    font-size: 12px;
    color: var(--text-muted);
}

.custom-period-field input[type="date"] {
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
}

.custom-period-today-label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    cursor: pointer;
}

.custom-period-today-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.custom-period-today-label span {
    font-size: 12px;
    color: var(--text-muted);
}

/* Period label */
.period-label {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 12px;
}

/* Stats grid for period */
.stats-grid-period {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.stats-grid-period .stat-block-wide {
    grid-column: span 2;
}

.stats-grid-compact {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.stats-grid-compact .stat-block {
    padding: 10px 8px;
}

.stats-grid-compact .stat-block-value {
    font-size: 18px;
}

.stats-grid-compact .stat-block-label {
    font-size: 10px;
}

/* Weekday Chart */
.weekday-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100px;
    padding-top: 16px;
}

.weekday-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 40px;
}

.weekday-bar-fill {
    width: 28px;
    background: var(--accent);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.3s;
}

.weekday-bar-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.weekday-bar-value {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ===== TRAINING SECTIONS ===== */
.trainings-section-header {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 16px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trainings-section-header:first-child {
    margin-top: 8px;
}

.training-card-task {
    border-color: var(--accent);
    border-width: 2px;
}

/* ===== BADGES ===== */
.prohodka-badge {
    display: inline-block;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.interval-badge {
    display: inline-block;
    background: var(--accent);
    color: #000;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ===== SUMMARY CHECKBOXES ===== */
.summary-checkboxes {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.summary-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.summary-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-input);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.summary-checkbox input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.summary-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.summary-checkbox .checkbox-label {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ===== SAVE STATUS BAR ===== */
.save-status {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    padding: env(safe-area-inset-top) 0 0 0;
}

.save-status.visible {
    transform: translateY(0);
}

.save-status-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

.save-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-light);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.save-status.success .save-spinner {
    display: none;
}

.save-status.success .save-status-content::before {
    content: '✓';
    color: var(--accent);
    font-size: 16px;
    font-weight: bold;
}

.save-status.error .save-spinner {
    display: none;
}

.save-status.error .save-status-content::before {
    content: '✕';
    color: var(--danger);
    font-size: 16px;
    font-weight: bold;
}

.save-status.offline .save-status-content {
    background: #f59e0b22;
}

.save-status.offline .save-spinner {
    border-top-color: #f59e0b;
}

#save-status-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

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

/* ===== TOAST NOTIFICATIONS ===== */
.toast-notification {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    max-width: calc(100% - 40px);
    text-align: center;
}

.toast-notification.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== SAVE BUTTONS ===== */
.save-buttons {
    display: flex;
    gap: 8px;
    padding: 16px 0;
    margin-top: 16px;
}

.save-btn-secondary {
    flex: 1;
    padding: 12px 16px;
    font-size: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    border-radius: 10px;
}

.save-btn-secondary:hover {
    background: var(--bg-card-hover);
}

.save-btn-done {
    flex: 1.2;
    padding: 12px 16px;
    font-size: 14px;
    background: var(--accent);
    color: #000;
    font-weight: 700;
    border-radius: 10px;
}

.save-btn-done:hover {
    background: var(--accent-hover);
}

/* ===== CONFETTI ===== */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
    overflow: hidden;
}

/* Фаза 1: Взрыв из центра */
@keyframes confetti-explode {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--rot));
    }
}

/* Фаза 2: Плавное падение */
@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(var(--fall-distance, 300px)) rotate(var(--fall-rot, 360deg));
    }
}

/* ===== TRASH ===== */
.trash-info {
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 16px;
}

.trash-info p {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

.trash-count {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 20px;
}

.trash-card {
    opacity: 0.7;
}

.trash-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.trash-restore-btn {
    flex: 1;
    padding: 10px;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.trash-delete-btn {
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--danger);
    border-radius: 8px;
    color: var(--danger);
    font-size: 13px;
    cursor: pointer;
}

.trash-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--card-bg);
    border-radius: 12px;
    margin-bottom: 8px;
}

.trash-item-info {
    flex: 1;
}

.trash-item-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.trash-item-meta {
    font-size: 13px;
    color: var(--text-muted);
}

/* ===== MOBILE STRICT ADAPTATION ===== */
html {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

body {
    overflow-x: hidden;
    overflow-y: visible;
    overscroll-behavior-x: none;
    touch-action: pan-y manipulation;
    -webkit-tap-highlight-color: transparent;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.container {
    overflow-x: hidden;
}

input, textarea, select, button {
    font-size: 16px; /* Prevents iOS zoom on focus */
}

input, textarea {
    caret-color: var(--text-primary);
}

/* ===== AUTO-RESIZE TEXTAREA ===== */
#training-comment {
    min-height: 56px;
    max-height: 150px;
    overflow-y: auto;
    resize: none;
    transition: height 0.15s ease;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 380px) {
    .stats-row {
        padding: 12px 16px;
    }

    .stat-value {
        font-size: 20px;
    }

    .exercise-inputs {
        grid-template-columns: 1fr 1fr;
    }

    .weight-selector {
        gap: 4px;
    }

    .weight-option {
        padding: 6px 10px;
        font-size: 12px;
    }

    .save-buttons {
        flex-direction: row; /* Оставляем в ряд даже на маленьких экранах */
    }
}

/* ===== CARDIO ===== */

/* Кнопка переключения кардио */
.cardio-toggle-btn.active {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

/* Секция кардио-формы */
.cardio-form-section {
    margin: 0 0 16px;
}

.cardio-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
}

/* Кнопка-поле кардио (тип активности, усилие) */
.cardio-field-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 15px;
    text-align: left;
}

.cardio-field-icon {
    font-size: 20px;
    line-height: 1;
}

.cardio-field-label {
    flex: 1;
    color: var(--text-secondary);
    font-size: 14px;
}

.cardio-field-value {
    font-weight: 600;
    font-size: 14px;
}

.cardio-field-value.has-value {
    color: var(--accent);
}

.cardio-field-btn svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Сетка данных кардио 2x2 */
.cardio-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px 0;
}

.cardio-data-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cardio-data-cell label {
    font-size: 12px;
    color: var(--text-muted);
    padding-left: 2px;
}

.cardio-picker {
    font-size: 15px;
    padding: 10px 8px;
    min-height: 40px;
    flex-direction: column;
    gap: 2px;
}

.cardio-picker .picker-unit {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Кнопка «Пересчитать» внутри wheel-picker темпа */
.tempo-recalc-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 4px;
    border: none;
    border-top: 1px solid var(--border-color);
    background: none;
    color: var(--accent);
    font-size: 14px;
    cursor: pointer;
    text-align: center;
}

.cardio-card .form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: block;
}

/* Сетка типов активности */
.cardio-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.cardio-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 6px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-dark);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
}

.cardio-type-btn.active {
    border-color: var(--accent);
    background: rgba(0, 122, 255, 0.1);
}

.cardio-type-icon {
    font-size: 24px;
    line-height: 1;
}

.cardio-type-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
}

.cardio-type-btn.active .cardio-type-label {
    color: var(--accent);
    font-weight: 600;
}

.cardio-custom-input {
    margin-top: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-dark);
    color: var(--text-primary);
    font-size: 15px;
    box-sizing: border-box;
}

/* Кнопка выбора RPE в форме */
.rpe-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 12px;
    margin-top: 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-dark);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 14px;
}

.rpe-select-btn .rpe-label {
    color: var(--text-secondary);
}

.rpe-select-btn .rpe-value {
    color: var(--text-muted);
}

.rpe-select-btn .rpe-value.has-value {
    color: var(--accent);
    font-weight: 600;
}

/* RPE Bottom Sheet */
.rpe-sheet {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.rpe-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.rpe-sheet-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: #1a1a1a;
    background: var(--tg-theme-bg-color, #1a1a1a);
    border-radius: 20px 20px 0 0;
    padding: 12px 20px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    animation: rpeSlideUp 0.3s ease-out;
}

@keyframes rpeSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.rpe-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 auto 16px;
}

.rpe-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.rpe-sheet-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.rpe-sheet-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
}

.rpe-current-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* RPE Slider */
.rpe-slider-container {
    padding: 0 4px;
    margin-bottom: 12px;
}

.rpe-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, #22c55e 0%, #facc15 40%, #f97316 70%, #ef4444 100%);
    outline: none;
}

.rpe-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.rpe-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* RPE Info Links */
.rpe-info-links {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.rpe-info-link {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
}

/* RPE Description */
.rpe-description {
    margin-bottom: 20px;
}

.rpe-desc-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.rpe-desc-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* RPE Confirm */
.rpe-sheet-actions {
    display: flex;
}

.rpe-confirm-btn {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background: var(--accent);
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* Cardio badge в карточках и просмотре */
.cardio-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(0, 122, 255, 0.15);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}

.cardio-type-badge.large {
    font-size: 14px;
    padding: 6px 12px;
}

/* RPE badge */
.rpe-badge {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

.rpe-badge.rpe-low { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.rpe-badge.rpe-mid { background: rgba(250, 204, 21, 0.15); color: #eab308; }
.rpe-badge.rpe-high { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.rpe-badge.rpe-max { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* RPE в просмотре тренировки */
.view-training-rpe {
    text-align: center;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.view-training-rpe.rpe-low { background: rgba(34, 197, 94, 0.1); }
.view-training-rpe.rpe-mid { background: rgba(250, 204, 21, 0.1); }
.view-training-rpe.rpe-high { background: rgba(249, 115, 22, 0.1); }
.view-training-rpe.rpe-max { background: rgba(239, 68, 68, 0.1); }

.view-training-rpe-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.view-training-rpe-value {
    font-size: 24px;
    font-weight: 700;
}

.view-training-rpe.rpe-low .view-training-rpe-value { color: #22c55e; }
.view-training-rpe.rpe-mid .view-training-rpe-value { color: #eab308; }
.view-training-rpe.rpe-high .view-training-rpe-value { color: #f97316; }
.view-training-rpe.rpe-max .view-training-rpe-value { color: #ef4444; }

/* Cardio data в карточке (краткая сводка) */
.cardio-card-summary {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 6px;
}

.cardio-card-comment {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, 0.03);
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Cardio data в просмотре тренировки */
.cardio-view-data {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 12px;
}

.cardio-view-stat {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cardio-view-label {
    font-size: 12px;
    color: var(--text-muted);
}

.cardio-view-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ===== SPLASH SCREEN ===== */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.splash-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.splash-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
}

.splash-quote {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.5;
    max-width: 320px;
    opacity: 0;
    transform: translateY(10px);
    animation: splash-fade-in 0.6s ease forwards;
}

.splash-author {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    opacity: 0.6;
}

@keyframes splash-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.splash-footer {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 40px 0;
    letter-spacing: 1px;
}

/* ===== ANALYTICS CALENDAR ===== */
.analytics-calendar-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.analytics-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.analytics-calendar-nav-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
}

.analytics-calendar-nav-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.analytics-calendar-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.analytics-calendar-period {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.analytics-calendar-months {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Горизонтальный inline календарь (3 месяца в одну строку, по центру) */
.analytics-calendar-inline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.analytics-months-header {
    display: flex;
    gap: 4px;
}

.analytics-weekdays-spacer {
    width: 24px;
    flex-shrink: 0;
}

.analytics-month-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: capitalize;
    flex-shrink: 0;
    font-weight: 500;
}

.analytics-month-separator {
    width: 10px;
    flex-shrink: 0;
}

.analytics-calendar-grid {
    display: flex;
    gap: 4px;
}

.analytics-weekdays-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 20px;
    flex-shrink: 0;
}

.analytics-weekday-label {
    height: 12px;
    font-size: 9px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.analytics-all-weeks {
    display: flex;
    gap: 3px;
}

.analytics-week-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.analytics-month-divider {
    width: 8px;
    flex-shrink: 0;
}

.analytics-day {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.analytics-day.empty {
    background: transparent;
    cursor: default;
}

.analytics-day.level-0 {
    background: #161b22;
    border: 1px solid #21262d;
}

.analytics-day.level-1 { background: #0e4429; }
.analytics-day.level-2 { background: #006d32; }
.analytics-day.level-3 { background: #26a641; }
.analytics-day.level-4 { background: #39d353; }

.analytics-day.today {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.analytics-day.future {
    opacity: 0.3;
    cursor: default;
}

.analytics-day:hover:not(.future):not(.empty) {
    transform: scale(1.1);
    z-index: 10;
}

/* Light theme - Analytics calendar colors */
[data-theme="light"] .analytics-day.level-0 {
    background: #ebedf0;
    border: 1px solid #d0d7de;
}
[data-theme="light"] .analytics-day.level-1 { background: #9be9a8; }
[data-theme="light"] .analytics-day.level-2 { background: #40c463; }
[data-theme="light"] .analytics-day.level-3 { background: #30a14e; }
[data-theme="light"] .analytics-day.level-4 { background: #216e39; }

/* ===== PICKER OVERLAY (общий) ===== */
.picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.picker-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.picker-modal {
    background: var(--bg-card);
    border-radius: 16px;
    width: 100%;
    max-width: 320px;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.picker-overlay.visible .picker-modal {
    transform: scale(1);
}

.picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.picker-header h3 {
    font-size: 17px;
    font-weight: 600;
}

.picker-close {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 4px;
    cursor: pointer;
}

/* ===== THEME PICKER ===== */
.theme-options {
    padding: 8px;
}

.theme-option {
    display: block;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.theme-option:hover {
    background: var(--bg-card-hover);
}

.theme-option.active {
    background: rgba(34, 197, 94, 0.1);
}

.theme-option input {
    display: none;
}

.theme-option-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    font-size: 16px;
}

.theme-option-content svg {
    color: var(--text-secondary);
}

.theme-option.active .theme-option-content svg {
    color: var(--accent);
}

/* ===== COMPETITION DATE PICKER ===== */
.competition-date-picker-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.competition-date-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 16px;
    font-family: inherit;
}

.competition-date-input:focus {
    outline: none;
    border-color: var(--accent);
}

.competition-date-actions {
    display: flex;
    gap: 12px;
}

.competition-date-actions .btn-secondary,
.competition-date-actions .btn-primary {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: none;
}

.competition-date-actions .btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.competition-date-actions .btn-primary {
    background: var(--accent);
    color: #000;
}

/* ===== iOS WHEEL PICKER ===== */
.wheel-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.wheel-picker-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.wheel-picker-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1c1c1e;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 10000;
    max-width: 480px;
    margin: 0 auto;
}

.wheel-picker-overlay.visible .wheel-picker-container {
    transform: translateY(0);
}

.wheel-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #38383a;
}

.wheel-picker-cancel,
.wheel-picker-done {
    background: none;
    border: none;
    font-size: 17px;
    padding: 8px 12px;
    cursor: pointer;
}

.wheel-picker-cancel {
    color: #8e8e93;
}

.wheel-picker-done {
    color: var(--accent);
    font-weight: 600;
}

.wheel-picker-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.wheel-picker-wheels {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 220px;
    position: relative;
    overflow: hidden;
    padding: 0 20px;
}

.wheel-picker-separator {
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    padding: 0 8px;
    user-select: none;
}

.wheel-column {
    height: 100%;
    flex: 1;
    max-width: 120px;
    position: relative;
    overflow: hidden;
}

.wheel-items {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transition: transform 0.1s ease-out;
}

.wheel-item {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.15s;
    user-select: none;
    cursor: pointer;
}

.wheel-item.selected {
    font-size: 26px;
    font-weight: 600;
    color: #fff;
}

.wheel-item.near {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
}

/* Highlight bar */
.wheel-picker-highlight {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    background: #3a3a3c;
    border-radius: 10px;
    pointer-events: none;
    z-index: -1;
}

/* Gradient masks for wheel */
.wheel-column::before,
.wheel-column::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 70px;
    pointer-events: none;
    z-index: 2;
}

.wheel-column::before {
    top: 0;
    background: linear-gradient(to bottom, #1c1c1e 20%, transparent);
}

.wheel-column::after {
    bottom: 0;
    background: linear-gradient(to top, #1c1c1e 20%, transparent);
}

/* ===== CURRENT RANK PICKER ===== */
.wheel-picker-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1c1c1e;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 10000;
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: env(safe-area-inset-bottom);
}

.wheel-picker-overlay.visible .wheel-picker-sheet {
    transform: translateY(0);
}

.current-rank-options {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 8px;
}

.current-rank-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    background: #2c2c2e;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.current-rank-option:active {
    transform: scale(0.98);
}

.current-rank-option.selected {
    border-color: var(--accent);
    background: rgba(250, 204, 21, 0.1);
}

.current-rank-option:hover {
    background: #3a3a3c;
}

/* Picker button (replaces input) */
.picker-button {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 42px;
}

.picker-button:active {
    background: var(--bg-card-hover);
    transform: scale(0.98);
}

.picker-button.placeholder {
    color: var(--text-muted);
}

.picker-button .picker-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.picker-button .picker-unit {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 2px;
}

/* О приложении */
.about-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.about-overlay.visible {
    display: flex;
}

.about-modal {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 32px 24px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-icon {
    margin-bottom: 16px;
    color: var(--accent);
}

.about-icon svg {
    width: 64px;
    height: 64px;
}

.about-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.about-version {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
}

.about-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.about-divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
}

.about-developer-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-input);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

[data-theme="light"] .about-developer-btn {
    background: #efefef;
}

.about-developer-btn:hover {
    background: var(--bg-hover);
}

.about-developer-btn:active {
    transform: scale(0.98);
}

.about-developer-icon {
    flex-shrink: 0;
    margin-right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
}

.about-otechestvo-icon {
    flex-shrink: 0;
    margin-right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
}


.about-developer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.about-developer-label {
    font-size: 9px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: left;
}

.about-developer-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.about-developer-hint {
    font-size: 11px;
    color: var(--accent);
    margin-top: 2px;
}

.about-developer-btn-second {
    margin-top: 10px;
}

.about-developer-chevron {
    margin-left: auto;
    color: var(--text-secondary);
}

.about-year {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 16px 0 0 0;
    opacity: 0.6;
}

/* ===== ВЫБОР СПЕЦИАЛИЗАЦИИ ===== */

.specialization-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.specialization-overlay.visible {
    display: flex;
}

.specialization-modal {
    background: var(--bg-secondary);
    border-radius: 20px;
    padding: 32px 24px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    position: relative;
}

.specialization-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
}

.specialization-icon {
    color: var(--accent);
    margin-bottom: 16px;
}

.specialization-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.specialization-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.specialization-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px 12px;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    min-height: 80px;
}

.specialization-btn.selected {
    border-color: var(--accent);
    background: rgba(22, 163, 74, 0.1);
}

.specialization-btn.selected .specialization-btn-text {
    color: var(--accent);
}

.specialization-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.specialization-btn:active {
    transform: scale(0.96);
    background: var(--accent);
    border-color: var(--accent);
}

.specialization-btn:active .specialization-btn-text,
.specialization-btn:active .specialization-btn-desc {
    color: #fff;
}

.specialization-btn-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.specialization-btn-desc {
    font-size: 11px;
    color: var(--text-secondary);
}

/* ===== НАСТРОЙКИ ЖУРНАЛА ===== */

.journal-settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-dark);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.journal-settings-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.journal-settings-modal {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.journal-settings-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.journal-settings-back {
    background: none;
    border: none;
    padding: 8px;
    margin: -8px;
    color: var(--text-primary);
    cursor: pointer;
}

.journal-settings-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.journal-settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.journal-settings-section {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.journal-settings-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.journal-settings-section-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* Выбор веса */
.journal-weight-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.journal-weight-btn {
    min-width: 48px;
    height: 40px;
    padding: 0 12px;
    background: var(--bg-input);
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.journal-weight-btn:active {
    opacity: 0.7;
}

/* Цвета гирь по весам */
.journal-weight-btn[data-weight="8"].active {
    background: #6b7280;
    color: #fff;
    border-color: #6b7280;
}

.journal-weight-btn[data-weight="12"].active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

.journal-weight-btn[data-weight="16"].active {
    background: #facc15;
    color: #000;
    border-color: #facc15;
}

.journal-weight-btn[data-weight="20"].active {
    background: #a855f7;
    color: #fff;
    border-color: #a855f7;
}

.journal-weight-btn[data-weight="24"].active {
    background: #22c55e;
    color: #000;
    border-color: #22c55e;
}

.journal-weight-btn[data-weight="28"].active {
    background: #f97316;
    color: #000;
    border-color: #f97316;
}

.journal-weight-btn[data-weight="32"].active {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

/* Переключатели упражнений */
.journal-exercises-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.journal-exercise-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.journal-exercise-toggle:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.journal-exercise-toggle span:first-child {
    font-size: 15px;
    color: var(--text-primary);
}

.journal-exercise-toggle input {
    display: none;
}

.journal-toggle-slider {
    position: relative;
    flex-shrink: 0;
    width: 51px;
    height: 31px;
    background: var(--text-muted);
    border-radius: 16px;
    transition: background 0.3s;
}

.journal-toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.journal-exercise-toggle input:checked + .journal-toggle-slider {
    background: #34c759;
}

.journal-exercise-toggle input:checked + .journal-toggle-slider::before {
    transform: translateX(20px);
}

/* ===== СОЦИАЛЬНАЯ СЕТЬ "ТОВАРИЩИ" ===== */

/* Кнопка уведомлений */
.notifications-btn {
    position: relative;
}

.notifications-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--danger);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Поиск пользователей */
.search-container {
    position: relative;
    margin-bottom: 16px;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.search-input-wrapper svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-input-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 15px;
    color: var(--text-primary);
}

.search-input-wrapper input::placeholder {
    color: var(--text-muted);
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border-color);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--bg-card-hover);
}

.search-result-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    flex-shrink: 0;
    overflow: hidden;
}

.search-result-avatar.has-avatar {
    background: transparent;
}

.search-result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-avatar .avatar-initials {
    display: none;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-username {
    font-size: 13px;
    color: var(--text-secondary);
}

.search-result-stats {
    font-size: 12px;
    color: var(--text-muted);
}

.search-result-follow {
    padding: 6px 14px;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    transition: all 0.2s;
}

.search-result-follow:hover {
    background: var(--accent-hover);
}

.search-result-follow.following {
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.search-no-results {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* Лента тренировок */
.feed-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.feed-empty-icon {
    color: var(--text-muted);
    margin-bottom: 16px;
}

.feed-empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.feed-empty p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    max-width: 280px;
}

.feed-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feed-loading {
    display: flex;
    justify-content: center;
    padding: 24px;
}

.feed-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-light);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.feed-load-more-sentinel {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

/* Карточка тренировки в ленте */
.feed-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    transition: all 0.2s;
}

.feed-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.feed-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s;
    overflow: hidden;
}

.feed-card-avatar:hover {
    transform: scale(1.05);
}

.feed-card-avatar.has-avatar {
    background: transparent;
}

.feed-card-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.feed-card-avatar .avatar-initials {
    display: none;
}

.feed-card-author {
    flex: 1;
    min-width: 0;
}

.feed-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

.feed-card-name:hover {
    color: var(--accent);
}

.feed-card-date {
    font-size: 12px;
    color: var(--text-muted);
}

.feed-card-body {
    margin-bottom: 12px;
}

.feed-card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.feed-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.feed-card-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--text-secondary);
}

.feed-card-volume {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

.feed-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* Бейдж "Моя" для своих тренировок */
.feed-own-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(34, 197, 94, 0.15);
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

/* Упражнения в посте */
.feed-card-exercises {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 10px;
    margin-top: 8px;
}

.feed-exercises-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
}

.feed-exercises-row:last-child {
    margin-bottom: 0;
}

.feed-exercises-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 4px;
}

.feed-exercise {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 6px;
}

.feed-exercise.interval {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent);
}

/* Комментарий в посте */
.feed-card-comment {
    margin-top: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

.feed-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* Кнопка лайка */
.like-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.like-btn:hover {
    border-color: var(--text-secondary);
}

.like-btn.liked {
    border-color: transparent;
    background: var(--primary);
    color: #fff;
}

.like-btn .like-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.2s;
}

.like-btn:active .like-icon {
    transform: scale(1.3);
}

/* Цвета лайков по объёму тренировки */
.like-btn.liked.like-weight-16 {
    background: var(--weight-16);
    color: #000;
}
.like-btn.liked.like-weight-20 {
    background: var(--weight-20);
    color: #fff;
}
.like-btn.liked.like-weight-24 {
    background: var(--weight-24);
    color: #000;
}
.like-btn.liked.like-weight-28 {
    background: var(--weight-28);
    color: #000;
}
.like-btn.liked.like-weight-32 {
    background: var(--weight-32);
    color: #fff;
}

/* SVG гири для лайка */
.kettlebell-like-svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s;
}

/* Анимация лайка */
.like-btn.like-animating {
    animation: like-pop 0.3s ease;
}

.like-btn.like-animating .kettlebell-like-svg {
    animation: like-bounce 0.3s ease;
}

@keyframes like-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes like-bounce {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.3) rotate(-10deg); }
    50% { transform: scale(1.4) rotate(10deg); }
    75% { transform: scale(1.2) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Кнопка комментариев */
.comment-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.comment-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.comment-btn svg {
    width: 18px;
    height: 18px;
}

/* Секция комментариев */
.feed-card-comments {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.comments-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.comments-loading,
.comments-error,
.comments-empty {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.comment-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    position: relative;
}

.comment-item:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.comment-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.comment-avatar.has-avatar {
    background: transparent;
}

.comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-content {
    flex: 1;
    min-width: 0;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.comment-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.comment-time {
    font-size: 11px;
    color: var(--text-muted);
}

.comment-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}

.comment-delete {
    position: absolute;
    right: 0;
    top: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.comment-item:hover .comment-delete {
    opacity: 1;
}

.comment-delete:hover {
    color: var(--error);
}

/* Поле ввода комментария */
.comment-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.comment-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}

.comment-input:focus {
    border-color: var(--accent);
}

.comment-input::placeholder {
    color: var(--text-muted);
}

.comment-send-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.comment-send-btn:hover {
    transform: scale(1.05);
}

.comment-send-btn:active {
    transform: scale(0.95);
}

/* Ответы на комментарии */
.comment-item.is-reply {
    margin-left: 24px;
    padding-left: 12px;
    border-left: 2px solid var(--border-color);
}

.comment-reply-to {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.comment-reply-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    padding: 4px 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.comment-item:hover .comment-reply-btn {
    opacity: 1;
}

.comment-reply-btn:hover {
    color: var(--accent);
}

.comment-reply-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-secondary);
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.comment-reply-indicator button {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
}

.comment-reply-indicator button:hover {
    color: var(--text-primary);
}

/* Превью комментария в уведомлениях */
.notification-comment-preview {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* Фото в ленте */
.feed-card-photo {
    margin: 0 -16px 12px -16px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}

.feed-card-photo img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    transition: opacity 0.2s;
}

.feed-card-photo img:hover {
    opacity: 0.9;
}

/* Fullscreen фото */
.photo-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.photo-fullscreen-overlay.visible {
    display: flex;
}

.photo-fullscreen-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.photo-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.photo-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Модальное окно уведомлений */
.notifications-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn 0.2s ease;
}

.notifications-overlay.visible {
    display: flex;
}

.notifications-modal {
    background: var(--bg-card);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.notifications-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.notifications-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
}

.notifications-list {
    overflow-y: auto;
    max-height: calc(80vh - 60px);
    padding: 8px 0;
}

.notification-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.notification-item:hover {
    background: var(--bg-card-hover);
}

.notification-item.unread {
    background: rgba(34, 197, 94, 0.08);
}

.notification-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    flex-shrink: 0;
    overflow: hidden;
}

.notification-avatar.has-avatar {
    background: transparent;
}

.notification-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.4;
}

.notification-text strong {
    font-weight: 600;
}

.notification-time {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.notification-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon.follow {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.notification-icon.like {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.notification-icon.comment {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.notifications-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
}

/* Модальное окно профиля пользователя (полноэкранное) */
.user-profile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-dark);
    display: none;
    flex-direction: column;
    z-index: 2000;
    animation: slideFromRight 0.3s ease;
    isolation: isolate;
}

@keyframes slideFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.user-profile-overlay.visible {
    display: flex;
}

.user-profile-modal {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: var(--bg-dark);
}

.user-profile-modal.fullscreen {
    border-radius: 0;
    max-width: 100%;
    max-height: 100%;
}

.user-profile-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top));
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.user-profile-header-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.user-profile-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 10;
}

.user-profile-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    background: var(--bg-dark);
    min-height: 100%;
    position: relative;
}

/* Верхняя часть профиля - шапка */
.user-profile-top {
    background: var(--bg-card);
    padding: 20px 16px;
    text-align: center;
}

.user-profile-top .user-profile-avatar {
    margin: 0 auto 12px;
}

/* Обёртка для аватара с бейджем разряда */
.user-profile-avatar-wrapper {
    position: relative;
    display: inline-block;
    margin: 0 auto 12px;
}

.user-profile-avatar-wrapper .user-profile-avatar {
    margin-bottom: 0;
}

.user-profile-rank-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.user-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.user-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-bottom: 12px;
    overflow: hidden;
}

.user-profile-avatar.has-avatar {
    background: transparent;
}

.user-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-profile-avatar .avatar-initials {
    display: none;
}

.user-profile-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.user-profile-tg-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0 0;
    padding: 4px 12px;
    background: rgba(0, 136, 204, 0.15);
    border-radius: 16px;
    text-decoration: none;
    transition: background 0.2s;
}

.user-profile-tg-link:hover {
    background: rgba(0, 136, 204, 0.25);
}

.user-profile-tg-icon {
    color: #0088cc;
    flex-shrink: 0;
}

.user-profile-tg-link span {
    font-size: 14px;
    color: #0088cc;
    font-weight: 500;
}

.user-profile-last-active {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 6px;
    opacity: 0.8;
}

.user-profile-username {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 4px 0 0 0;
}

.user-profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.user-profile-stat {
    text-align: center;
    padding: 12px;
    background: var(--bg-input);
    border-radius: 12px;
}

.user-profile-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
}

.user-profile-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.user-profile-follow-btn {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 20px;
}

.user-profile-follow-btn:hover {
    background: var(--accent-hover);
}

.user-profile-follow-btn.following {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.user-profile-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-profile-trainings {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-profile-training {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--bg-input);
    border-radius: 10px;
}

.user-profile-training-info {
    flex: 1;
    min-width: 0;
}

.user-profile-training-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-profile-training-date {
    font-size: 12px;
    color: var(--text-muted);
}

.user-profile-training-volume {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
}

/* Лента тренировок в профиле пользователя */
.user-profile-feed {
    padding: 16px;
    background: var(--bg-dark);
    flex: 1;
    min-height: 200px;
}

.user-profile-feed-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-profile-feed-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Карточки в профиле без аватара автора (он уже в шапке) */
.user-profile-feed-list .feed-card .feed-card-header {
    display: none;
}

.user-profile-feed-list .feed-card {
    margin: 0;
}

/* Строка с датой в карточке профиля */
.feed-card-date-row {
    margin-bottom: 8px;
}

.feed-card-date-row .feed-card-date {
    font-size: 12px;
    color: var(--text-muted);
}

/* Список подписчиков/подписок */
.follow-list-container {
    padding: 0;
}

.follow-list-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--bg-dark);
    z-index: 10;
}

.follow-list-back {
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.follow-list-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

/* Табы подписчики/подписки */
.follow-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-dark);
}

.follow-tab {
    flex: 1;
    padding: 12px 16px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.follow-tab.active {
    color: var(--accent);
}

.follow-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
}

.follow-list-content {
    flex: 1;
    overflow-y: auto;
}

.follow-list-loading {
    display: flex;
    justify-content: center;
    padding: 40px;
}

.follow-list-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px 20px;
}

.follow-list-users {
    padding: 8px 0;
}

.follow-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.follow-list-item:active {
    background: var(--bg-card-hover);
}

.follow-list-avatar-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.follow-list-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #000;
    overflow: hidden;
}

.follow-list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.follow-list-rank-badge {
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #000;
    font-size: 5px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.follow-list-info {
    flex: 1;
    min-width: 0;
}

.follow-list-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.follow-list-username {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Загрузка в профиле */
.user-profile-loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.user-profile-load-more {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Пустое состояние профиля */
.user-profile-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.user-profile-empty svg {
    width: 48px;
    height: 48px;
    opacity: 0.5;
    margin-bottom: 12px;
}

.user-profile-empty p {
    margin: 0;
    font-size: 14px;
}

/* Цели в профиле */
.user-profile-goals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}

.user-profile-goal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--bg-input);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.user-profile-goal-badge svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.user-profile-goal-badge.rank-goal {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.user-profile-goal-badge.competition-goal {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.user-profile-goal-badge.competition-goal .competition-badge-content {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.user-profile-goal-badge.competition-goal .competition-badge-date {
    font-weight: 600;
}

.user-profile-goal-badge.competition-goal .competition-badge-label {
    font-size: 9px;
    opacity: 0.8;
}

/* Специализация */
.user-profile-goal-badge.specialization-badge {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* Серия недель */
.user-profile-goal-badge.streak-badge {
    background: rgba(139, 139, 139, 0.15);
    color: #8b8b8b;
}

.user-profile-goal-badge.streak-color-1 {
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
}

.user-profile-goal-badge.streak-color-2 {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.user-profile-goal-badge.streak-color-3 {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.user-profile-goal-badge.streak-color-4 {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.user-profile-goal-badge.streak-color-5 {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Предупреждение об отсутствии username */
.username-warning {
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.username-warning svg {
    color: #f97316;
    flex-shrink: 0;
    margin-top: 2px;
}

.username-warning-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.username-warning-text strong {
    color: #f97316;
}

/* ===== СТАТИСТИКА СИСТЕМЫ ===== */

.system-stats-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.system-stats-overlay.visible {
    display: flex;
}

.system-stats-modal {
    background: var(--bg-card);
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
}

.system-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.system-stats-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.system-stats-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
}

.system-stats-content {
    padding: 20px;
}

.system-stats-loading {
    display: flex;
    justify-content: center;
    padding: 40px;
}

.system-stats-section {
    margin-bottom: 20px;
}

.system-stats-section:last-child {
    margin-bottom: 0;
}

.system-stats-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.system-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.system-stats-item {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.system-stats-item.full-width {
    grid-column: span 2;
}

.system-stats-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
}

.system-stats-value.warning {
    color: #f97316;
}

.system-stats-value.danger {
    color: var(--danger);
}

.system-stats-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.system-stats-bar {
    margin-top: 8px;
    height: 6px;
    background: var(--bg-card);
    border-radius: 3px;
    overflow: hidden;
}

.system-stats-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.system-stats-bar-fill.ok {
    background: var(--accent);
}

.system-stats-bar-fill.warning {
    background: #f97316;
}

.system-stats-bar-fill.danger {
    background: var(--danger);
}

/* Список пользователей в статистике */
.system-users-list {
    display: flex;
    flex-direction: column;
}

.system-users-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: opacity 0.2s;
}

.system-users-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.system-users-item:first-child {
    padding-top: 0;
}

.system-users-item:active {
    opacity: 0.6;
}

.system-users-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.system-users-avatar.has-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.system-users-info {
    flex: 1;
    min-width: 0;
}

.system-users-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.system-users-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 1px;
}

.system-users-dates {
    flex-shrink: 0;
    text-align: right;
}

.system-users-date {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ===== МОИ ТОВАРИЩИ (сворачиваемая секция) ===== */
.my-comrades-section {
    background: var(--card-bg);
    margin: 12px 16px;
    border-radius: 16px;
    overflow: hidden;
}

.my-comrades-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.my-comrades-header:active {
    background: rgba(255, 255, 255, 0.05);
}

.my-comrades-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 500;
}

.my-comrades-title svg {
    opacity: 0.7;
}

.my-comrades-count {
    background: var(--primary);
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.my-comrades-chevron {
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.my-comrades-chevron.open {
    transform: rotate(180deg);
}

.my-comrades-list {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.my-comrades-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

.my-comrade-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.my-comrade-item:active {
    background: rgba(255, 255, 255, 0.08);
}

.my-comrade-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #ff6b6b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: 14px;
    flex-shrink: 0;
    overflow: hidden;
}

.my-comrade-avatar.has-avatar {
    background: transparent;
}

.my-comrade-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-comrade-avatar .avatar-initials {
    display: none;
}

.my-comrade-info {
    flex: 1;
    min-width: 0;
}

.my-comrade-name {
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-comrade-username {
    font-size: 13px;
    color: var(--text-secondary);
}

.my-comrade-stats {
    text-align: right;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Табы в секции товарищей */
.my-comrades-counts {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.my-comrades-content {
    padding-bottom: 8px;
}

.my-comrades-tabs {
    display: flex;
    gap: 8px;
    padding: 0 12px 12px;
}

.my-comrades-tab {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.my-comrades-tab.active {
    background: var(--primary);
    color: white;
}

.my-comrades-tab:active {
    transform: scale(0.98);
}

.my-comrades-tab span {
    opacity: 0.8;
    margin-left: 4px;
}

/* ===== ПЕРЕКЛЮЧАТЕЛЬ ЛЕНТЫ ===== */
.feed-filter {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 12px;
}

.feed-filter-btn {
    flex: 1;
    padding: 10px 16px;
    background: var(--card-bg);
    border: none;
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.feed-filter-btn.active {
    background: var(--primary);
    color: white;
}

.feed-filter-btn:active {
    transform: scale(0.98);
}

/* ===== СТРАНИЦА ПРОСМОТРА ТРЕНИРОВКИ ===== */
#view-training-view {
    flex-direction: column;
    height: 100%;
}

#view-training-view.active {
    display: flex;
}

#view-training-view .main-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-dark);
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.view-training-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 80px;
}

/* Фото тренировки */
.view-training-photo {
    width: 100%;
    background: var(--card-bg);
}

.view-training-photo img {
    width: 100%;
    height: auto;
    display: block;
}

.view-training-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
}

.view-training-photo-placeholder svg {
    opacity: 0.5;
}

/* Основная информация */
.view-training-info {
    padding: 20px 16px;
}

.view-training-header {
    margin-bottom: 16px;
}

.view-training-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.view-training-date {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.view-training-badges-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.view-training-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.view-training-badge {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.view-training-badge.prohodka {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.view-training-badge.task {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

/* Итоговая статистика */
.view-training-total {
    background: linear-gradient(135deg, var(--primary), #ff6b6b);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.view-training-total-value {
    font-size: 48px;
    font-weight: 800;
    color: white;
    line-height: 1;
}

.view-training-total-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 4px;
}

.view-training-total-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
}

/* Итоговые повторения и время (старый блок) */
.view-training-stats {
    text-align: center;
    margin-bottom: 16px;
    font-size: 15px;
    color: var(--text-secondary);
}

.view-training-stats .view-training-reps {
    font-weight: 600;
    color: var(--text-primary);
}

.view-training-stats .view-training-time {
    color: var(--text-muted);
}

/* Веса гирь */
.view-training-weights {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    justify-content: center;
}

/* Секции упражнений */
.view-training-section {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
}

.view-training-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.view-training-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-training-section-title .icon {
    font-size: 20px;
}

.view-training-section-stats {
    text-align: right;
}

.view-training-section-total {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.view-training-section-reps {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Список упражнений */
.view-training-exercises {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.view-training-exercise {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.view-training-exercise-weight {
    font-weight: 600;
    color: var(--text);
    min-width: 60px;
}

.view-training-exercise-details {
    flex: 1;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.view-training-exercise-volume {
    font-weight: 600;
    color: var(--primary);
    min-width: 70px;
    text-align: right;
}

/* Интервалка */
.view-training-interval {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.view-training-interval-sets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.view-training-interval-set {
    background: rgba(139, 92, 246, 0.2);
    color: var(--text);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

/* Комментарий */
.view-training-comment {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
}

.view-training-comment-title {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.view-training-comment-text {
    font-size: 15px;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Кнопка редактирования в хедере */
.icon-btn.edit-btn {
    color: var(--primary);
}

/* Контейнер кнопки Готово (только для задач) */
.view-training-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--bg-dark) 80%, transparent);
    z-index: 10;
    display: none; /* Скрыто по умолчанию */
}

.view-training-actions.visible {
    display: block;
}

.complete-training-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: var(--accent);
    border: none;
    border-radius: 14px;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.complete-training-btn:hover {
    background: var(--accent-hover);
}

.complete-training-btn:active {
    transform: scale(0.98);
}

.share-training-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.share-training-btn:hover {
    background: var(--input-bg);
}

.share-training-btn:active {
    transform: scale(0.98);
}

.share-training-btn svg {
    stroke: var(--accent);
}

/* ===== УПРОЩЁННЫЙ ВИД ЗАДАЧИ ===== */
.task-view-section {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    text-align: left;
}

/* Заголовок секции с объёмом */
.task-view-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.task-view-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.task-view-section-volume {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}

.task-view-exercise {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    transition: opacity 0.2s ease;
}

/* Выравнивание для завершённых тренировок (main и tempo - прямые дети) */
.task-view-exercise > .task-view-main {
    text-align: left;
}

.task-view-exercise > .task-view-tempo {
    text-align: right;
    white-space: nowrap;
}

.task-view-exercise-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.task-view-exercise:last-child {
    border-bottom: none;
}

/* Убираем границу у упражнения если после него идёт отдых */
.task-view-exercise:has(+ .task-view-rest) {
    border-bottom: none;
    padding-bottom: 4px;
}

/* Стили для выполненного подхода */
.task-view-exercise.completed .task-view-exercise-content {
    text-decoration: line-through;
    opacity: 0.5;
}

.task-view-exercise.completed .task-check-btn {
    background: var(--accent);
    border-color: var(--accent);
}

.task-view-exercise.completed .task-check-btn svg {
    opacity: 1;
    color: #000;
}

/* Кнопка чекбокса */
.task-check-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.task-check-btn:active {
    transform: scale(0.95);
}

.task-check-btn svg {
    opacity: 0;
    color: var(--text-muted);
    transition: opacity 0.2s ease;
}

/* Секции с галочками (ОФП, заминка, текст разминки) */
.task-view-text-section,
.task-view-text-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 8px;
}

.task-view-text-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.task-view-text-content {
    flex: 1;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Обёртка для контента (ОФП, заминка) - текст слева, кнопка справа */
.task-view-text-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-view-text-section.completed .view-training-comment-text,
.task-view-text-section.completed .view-training-comment-title,
.task-view-text-item.completed .task-view-text-content {
    text-decoration: line-through;
    opacity: 0.5;
}

.task-view-text-section.completed .task-check-btn,
.task-view-text-item.completed .task-check-btn {
    background: var(--accent);
    border-color: var(--accent);
}

.task-view-text-section.completed .task-check-btn svg,
.task-view-text-item.completed .task-check-btn svg {
    opacity: 1;
    color: #000;
}

/* Тег упражнения в разминке */
.warmup-exercise-tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--accent);
    color: #000;
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
}

.task-view-main {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.task-view-main .weight {
    color: var(--primary);
}

.warmup-type-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-secondary, #2a2a2a);
    border-radius: 4px;
    padding: 1px 5px;
    margin-right: 4px;
    vertical-align: middle;
}

.task-view-volume {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    display: block;
    margin-top: 2px;
}

.task-view-tempo {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

/* Отдых между подходами */
.task-view-rest {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 6px 0;
    opacity: 0.7;
}

/* Интервалка в упрощённом виде */
.task-view-interval {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 12px;
    margin-top: 8px;
}

.task-view-interval-header {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.task-view-interval-header .weight {
    color: var(--primary);
}

/* Формат 20/10/11/12 */
.task-view-interval-raw {
    font-size: 14px;
    color: var(--text-secondary);
    font-family: monospace;
    margin-bottom: 8px;
    word-break: break-all;
}

.task-view-interval-sets {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Ряд интервалов (по 5 в строке) */
.interval-row {
    display: flex;
    gap: 6px;
    justify-content: flex-start;
}

.interval-set-badge {
    background: rgba(34, 197, 94, 0.15);
    color: var(--primary);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    min-width: 40px;
    text-align: center;
}

/* Интервальный подход в виде упражнения */
.task-view-interval-exercise {
    background: rgba(34, 197, 94, 0.05);
}

.interval-tag {
    background: var(--accent);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 6px;
}

.task-view-interval-reps {
    font-size: 14px;
    color: var(--text-secondary);
    font-family: monospace;
    margin-top: 4px;
}

/* ===== КОНФЕТТИ АНИМАЦИЯ ===== */
.confetti {
    position: absolute;
    top: -10px;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 1000;
    animation: confetti-fall 2.5s ease-out forwards;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    25% {
        transform: translateY(25vh) rotate(180deg) translateX(30px) scale(0.9);
    }
    50% {
        transform: translateY(50vh) rotate(360deg) translateX(-20px) scale(0.8);
    }
    75% {
        transform: translateY(75vh) rotate(540deg) translateX(15px) scale(0.6);
        opacity: 0.7;
    }
    100% {
        transform: translateY(100vh) rotate(720deg) translateX(-10px) scale(0.4);
        opacity: 0;
    }
}

/* ===== ОБЪЕДИНЁННАЯ КАРТОЧКА ДНЕВНИКА ===== */
.home-stats-card {
    margin: 12px 16px 8px;
    background: var(--bg-secondary);
    border-radius: 16px;
    overflow: hidden;
}

.home-stats-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0 16px;
}

/* ===== СЕРИЯ ТРЕНИРОВОК (STREAK) ===== */
.streak-section {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
}

.streak-kettlebell {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b8b8b; /* Серый по умолчанию */
    transition: color 0.3s ease;
}

.streak-kettlebell svg {
    width: 48px;
    height: 48px;
}

.streak-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.streak-title {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.streak-title span {
    color: var(--text-secondary);
}

/* Цвета гири по сериям */
.streak-kettlebell.streak-0 { color: #8b8b8b; }
.streak-kettlebell.streak-1 { color: var(--weight-16); } /* Желтый */
.streak-kettlebell.streak-2 { color: var(--weight-20); } /* Фиолетовый */
.streak-kettlebell.streak-3 { color: var(--weight-24); } /* Зеленый */
.streak-kettlebell.streak-4 { color: var(--weight-28); } /* Оранжевый */
.streak-kettlebell.streak-5 { color: var(--weight-32); } /* Красный */

.streak-info {
    flex: 1;
}

.streak-week-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.streak-week-days {
    display: flex;
    gap: 6px;
}

.streak-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 28px;
}

.streak-day-name {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 500;
}

.streak-day-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.streak-day-num.today {
    border: 2px solid var(--accent);
}

.streak-day-num.has-training {
    background: var(--accent);
    color: #000;
}

.streak-day-num.has-training.today {
    border: 2px solid var(--text-primary);
}

/* Индикатор прогресса на неделе */
.streak-progress {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.streak-progress-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.streak-progress-bar {
    width: 60px;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.streak-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ===== ПЕРЕКЛЮЧАТЕЛЬ ВИДОВ КАЛЕНДАРЯ ===== */
.calendar-view-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 2px;
}

.calendar-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.calendar-view-btn svg {
    width: 16px;
    height: 16px;
}

.calendar-view-btn:active {
    transform: scale(0.95);
}

.calendar-view-btn.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Контейнер календарей для плавного переключения */
.calendar-container {
    position: relative;
}

.github-calendar,
.analytics-calendar-months {
    transition: opacity 0.2s ease;
    touch-action: pan-y;
}

/* ===== БЫСТРОЕ ДОБАВЛЕНИЕ ===== */

.quick-add-section {
    padding: 0 16px 12px;
    display: flex;
    gap: 8px;
}

.quick-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 10px 8px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-light);
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.quick-add-btn:active {
    background: var(--bg-card);
    border-color: var(--accent);
    color: var(--accent);
}

/* Модалка быстрого добавления */
.quick-add-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.quick-add-modal {
    background: var(--bg-card);
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.quick-add-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.quick-add-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.quick-add-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-add-content {
    padding: 16px 20px;
    flex: 1;
    overflow: auto;
}

.quick-add-content textarea {
    width: 100%;
    min-height: 250px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    font-family: inherit;
}

.quick-add-content textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.quick-add-actions {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.quick-add-cancel,
.quick-add-apply {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-add-cancel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.quick-add-apply {
    background: var(--accent);
    border: none;
    color: white;
}

.quick-add-apply:active {
    background: var(--accent-hover);
}

.quick-add-apply:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.quick-add-apply .loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

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

/* ===== ОФП ===== */

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

.ofp-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.ofp-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
    cursor: pointer;
}

.ofp-textarea {
    width: 100%;
    min-height: 100px;
    margin-top: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
}

.ofp-textarea::placeholder {
    color: var(--text-muted);
}

/* Ряд ОФП + Заминка */
.ofp-warmdown-row {
    display: flex;
    gap: 24px;
}

.warmdown-toggle span {
    color: var(--text-secondary);
}

.warmdown-textarea {
    min-height: 60px;
}

/* Текстовое поле разминки */
.warmup-textarea {
    width: 100%;
    min-height: 50px;
    margin-bottom: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.4;
    resize: vertical;
    font-family: inherit;
}

.warmup-textarea::placeholder {
    color: var(--text-muted);
}

.warmup-text-view {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.4;
}

/* Модальное окно предложения фото */
.photo-prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.photo-prompt-overlay.visible {
    display: flex;
}

.photo-prompt-modal {
    background: #1a1a1a;
    background: var(--bg-card, #1a1a1a);
    border-radius: 16px;
    padding: 20px;
    max-width: 340px;
    width: 100%;
}

.photo-prompt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.photo-prompt-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.photo-prompt-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 50%;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-prompt-content {
    margin-bottom: 16px;
}

.photo-prompt-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    resize: vertical;
    margin-bottom: 12px;
}

.photo-prompt-textarea::placeholder {
    color: var(--text-muted);
}

.photo-prompt-photo-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prompt-photo-preview {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.prompt-photo-preview img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.prompt-photo-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-prompt-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.photo-prompt-add-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.photo-prompt-buttons {
    display: flex;
    gap: 10px;
}

.photo-prompt-btn {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.1s;
}

.photo-prompt-btn:active {
    transform: scale(0.97);
}

.photo-prompt-save {
    background: var(--accent);
    color: #000;
}

.photo-prompt-skip {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.photo-prompt-add {
    background: var(--accent);
    color: #000;
}

/* Подсветка области загрузки фото */
#photo-upload-area.highlight {
    animation: pulse-highlight 0.5s ease-in-out 3;
}

@keyframes pulse-highlight {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0);
    }
}

/* Надпись при конфетти */
.celebration-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease-out;
    pointer-events: none;
    white-space: nowrap;
}

.celebration-message.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ===== РАЗРЯДНЫЕ НОРМАТИВЫ ===== */
.standards-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-dark);
    z-index: 1000;
    display: none;
    flex-direction: column;
}

.standards-overlay.visible {
    display: flex;
}

.standards-modal {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    overflow: hidden;
}

.standards-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-dark);
    padding-top: calc(16px + env(safe-area-inset-top));
}

.standards-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.standards-back-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 8px;
    margin: -8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.standards-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
}

.discipline-tabs {
    display: flex;
    gap: 8px;
    padding: 16px;
    background: var(--bg-dark);
}

.discipline-tab {
    flex: 1;
    padding: 10px 8px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.discipline-tab.active {
    background: var(--accent);
    color: white;
}

.gender-tabs {
    display: flex;
    gap: 8px;
    padding: 0 16px 12px;
}

.gender-tab {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.gender-tab.active {
    background: var(--text-primary);
    color: var(--bg-dark);
}

.standards-info {
    text-align: center;
    padding: 8px 16px 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.standards-table-container {
    padding: 0 12px;
    overflow-x: auto;
}

.standards-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 320px;
}

.standards-table th,
.standards-table td {
    padding: 10px 6px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.standards-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 12px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.standards-table .weight-cell {
    font-weight: 600;
    text-align: left;
    padding-left: 12px;
    background: var(--bg-tertiary);
}

/* Цвета для разрядов */
.standards-table .rank-msmc { color: #ef4444; font-weight: 600; }
.standards-table .rank-ms { color: #f97316; font-weight: 600; }
.standards-table .rank-kms { color: #22c55e; }
.standards-table .rank-r1 { color: var(--text-primary); }
.standards-table .rank-r2 { color: var(--text-secondary); }
.standards-table .rank-r3 { color: var(--text-muted); }

.standards-table th.rank-msmc { color: #ef4444; }
.standards-table th.rank-ms { color: #f97316; }
.standards-table th.rank-kms { color: #22c55e; }

.standards-source {
    text-align: center;
    padding: 16px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ===== КАЛЕНДАРЬ СОРЕВНОВАНИЙ ===== */
.competitions-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-dark);
    z-index: 1000;
    display: none;
    flex-direction: column;
}

.competitions-overlay.visible {
    display: flex;
}

.competitions-modal {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    overflow: hidden;
}

.competitions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-dark);
    padding-top: calc(16px + env(safe-area-inset-top));
}

.competitions-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.competitions-back-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 8px;
    margin: -8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.competitions-tabs {
    display: flex;
    gap: 8px;
    padding: 16px;
    background: var(--bg-dark);
}

.competitions-tab {
    flex: 1;
    padding: 10px 8px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.competitions-tab.active {
    background: var(--accent);
    color: white;
}

.competitions-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.competitions-loading,
.competitions-error,
.competitions-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.competitions-loading p,
.competitions-error p {
    margin-top: 12px;
}

.competitions-error .retry-btn {
    margin-top: 16px;
    padding: 10px 24px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.competitions-group {
    margin-bottom: 24px;
}

.competitions-group-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-left: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.competitions-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0;
}

.competition-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.competition-date {
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
    margin-bottom: 4px;
}

.competition-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.competition-city {
    font-size: 13px;
    color: var(--text-secondary);
}

.competitions-source {
    text-align: center;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    background: var(--bg-dark);
}

/* ===== НОВОСТИ ВФГС ===== */
.news-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-dark);
    z-index: 1000;
    display: none;
    flex-direction: column;
}

.news-overlay.visible {
    display: flex;
}

.news-modal {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    overflow: hidden;
}

.news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-dark);
    padding-top: calc(16px + env(safe-area-inset-top));
}

.news-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.news-back-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 8px;
    margin: -8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.news-loading,
.news-error,
.news-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.news-loading p,
.news-error p {
    margin-top: 12px;
}

.news-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.news-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--bg-tertiary);
}

.news-card-body {
    padding: 14px 16px;
}

.news-card-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    margin-bottom: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

.news-card-text.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.news-card-date {
    color: var(--text-muted);
}

.news-card-views {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
}

.news-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    margin-top: 10px;
}

.news-card-link:hover {
    text-decoration: underline;
}

.news-load-more {
    display: flex;
    justify-content: center;
    padding: 16px;
}

.news-load-more-btn {
    padding: 12px 32px;
    background: var(--bg-secondary);
    border: none;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.news-load-more-btn:hover {
    background: var(--bg-tertiary);
}

.news-load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== NOTIFICATION SETTINGS MODAL ===== */
.notification-settings-modal {
    max-width: 360px;
}

.notification-settings-content {
    padding: 16px;
}

.notification-setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.notification-setting-item:last-child {
    border-bottom: none;
}

.notification-setting-info {
    flex: 1;
}

.notification-setting-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.notification-setting-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

.notification-setting-time {
    padding-top: 16px;
}

.notification-hour-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 15px;
    cursor: pointer;
}

.notification-settings-actions {
    padding: 12px 16px 16px;
}

.notification-settings-save {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.notification-settings-save:hover {
    background: var(--accent-hover);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: 0.3s;
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-secondary);
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent);
    border-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider:before {
    background-color: #fff;
    transform: translateX(22px);
}

/* ===== ВСПЛЫВАЮЩИЕ ПОДСКАЗКИ =====*/
.tag-tooltip {
    position: fixed;
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    z-index: 10000;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    white-space: nowrap;
}

.tag-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Стиль для кнопки +0,5 */
.jerk-tag-swing .tag-text {
    font-size: 11px;
    font-weight: 600;
}

/* ===== РАЗДЕЛ ЦЕЛИ ===== */
.goals-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-dark);
    z-index: 1000;
    display: none;
    flex-direction: column;
}

.goals-overlay.visible {
    display: flex;
}

.goals-modal {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    overflow: hidden;
}

.goals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-dark);
    padding-top: calc(16px + env(safe-area-inset-top));
}

.goals-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.goals-back-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 8px;
    margin: -8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.goals-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.goals-section {
    margin-bottom: 24px;
}

.goals-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.goals-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.goals-card:hover {
    background: var(--bg-card-hover, var(--bg-secondary));
}

.goals-card:active {
    transform: scale(0.98);
    background: var(--bg-secondary);
}

.goals-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    flex-shrink: 0;
}

.goals-card-icon.rank-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.goals-card-content {
    flex: 1;
}

.goals-card-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.goals-card-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.goals-card-calc {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: right;
}

.goals-card-arrow {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.goals-progress-info {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
    padding: 0 4px;
}

.goals-rank-info {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}

.goals-rank-info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.goals-rank-info-row:last-child {
    border-bottom: none;
}

.goals-calculator {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
}

.goals-calc-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

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

.goals-calc-row.highlight {
    color: var(--accent);
    font-weight: 600;
}

.goals-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
    padding: 0 4px;
    line-height: 1.4;
}

/* Галочка "Показывать в профиле" */
.goals-visibility-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.goals-visibility-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.goals-visibility-label {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ===== ВЫБОР ДАТЫ СОРЕВНОВАНИЙ ===== */
.date-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.date-picker-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.date-picker-modal {
    background: var(--bg-card);
    border-radius: 16px;
    width: 100%;
    max-width: 320px;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.date-picker-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}

.date-picker-close {
    background: none;
    border: none;
    padding: 4px;
    color: var(--text-secondary);
    cursor: pointer;
}

.date-picker-content {
    padding: 20px;
}

.date-picker-input {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 16px;
    margin-bottom: 16px;
    -webkit-appearance: none;
}

.date-picker-input:focus {
    outline: none;
    border-color: var(--accent);
}

.date-picker-actions {
    display: flex;
    gap: 10px;
}

.date-picker-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.date-picker-btn.secondary {
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.date-picker-btn.primary {
    background: var(--accent);
    color: #000;
}

.date-picker-btn.primary:active {
    transform: scale(0.98);
}

/* ===== ВЫБОР СПОРТИВНОЙ ЦЕЛИ ===== */
.rank-goal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-dark);
    z-index: 1001;
    display: none;
    flex-direction: column;
}

.rank-goal-overlay.visible {
    display: flex;
}

.rank-goal-modal {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    overflow: hidden;
}

.rank-goal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-dark);
    padding-top: calc(16px + env(safe-area-inset-top));
}

.rank-goal-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.rank-goal-back-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 8px;
    margin: -8px;
    cursor: pointer;
}

.rank-goal-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.rank-goal-section {
    margin-bottom: 20px;
}

.rank-goal-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.rank-goal-tabs {
    display: flex;
    gap: 8px;
}

.rank-goal-tab {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.rank-goal-tab.active {
    background: var(--accent);
    color: #000;
}

.rank-goal-weight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.rank-goal-weight,
.rank-goal-weight-btn {
    padding: 12px 8px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.rank-goal-weight.active,
.rank-goal-weight-btn.active {
    background: var(--accent);
    color: #000;
}

.rank-goal-ranks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.rank-goal-rank {
    padding: 14px 8px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.rank-goal-rank.active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
}

.rank-goal-result {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
}

.rank-goal-result-title {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.rank-goal-result-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--accent);
}

.rank-goal-result-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.rank-goal-save-btn {
    width: 100%;
    padding: 16px;
    border-radius: 14px;
    background: var(--accent);
    border: none;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
}

/* ===== СПРАВКА ===== */
.help-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-dark);
    z-index: 1001;
    display: none;
    flex-direction: column;
}

.help-overlay.visible {
    display: flex;
}

.help-modal {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.help-header h2 {
    font-size: 18px;
    font-weight: 600;
}

.help-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: none;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.help-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.help-section {
    margin-bottom: 24px;
}

.help-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.help-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.help-text p {
    margin-bottom: 10px;
}

.help-text strong {
    color: var(--text-primary);
    font-weight: 500;
}

/* ===== ОНБОРДИНГ ===== */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.onboarding-overlay.visible {
    display: flex;
}

.onboarding-modal {
    width: 100%;
    max-width: 400px;
    text-align: center;
    background: var(--bg-secondary);
    border-radius: 20px;
    padding: 32px 24px;
}

.onboarding-step {
    display: none;
}

.onboarding-step.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.onboarding-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    color: var(--accent);
}

.onboarding-icon-double {
    gap: 8px;
}

.onboarding-modal h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 24px 0;
    color: var(--text-primary);
    line-height: 1.3;
}

.onboarding-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin: -12px 0 24px 0;
    line-height: 1.5;
}

.onboarding-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.onboarding-btn {
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.onboarding-btn-primary {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.onboarding-btn-secondary {
    background: var(--bg-tertiary);
    border-color: var(--text-tertiary);
}

.onboarding-btn-hint {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-tertiary);
    opacity: 0.8;
}

.onboarding-btn-primary .onboarding-btn-hint {
    color: rgba(255, 255, 255, 0.7);
}

.onboarding-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* Шаг 2: Специализация */
.onboarding-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.onboarding-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.onboarding-option:active {
    transform: scale(0.98);
}

.onboarding-option.selected {
    border-color: var(--accent);
    background: rgba(34, 197, 94, 0.15);
}

.onboarding-option .option-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.onboarding-option .option-desc {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Шаг 3: Разряд */
.onboarding-ranks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.onboarding-rank {
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.onboarding-rank:active {
    transform: scale(0.98);
}

.onboarding-rank.selected {
    border-color: var(--accent);
    background: rgba(34, 197, 94, 0.15);
}

.onboarding-rank.no-rank {
    margin-top: 8px;
    background: transparent;
    border: 1px dashed var(--text-tertiary);
    color: var(--text-secondary);
}

/* Наблюдатель в профиле */
.observer-badge {
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 14px;
}

/* ===== Кнопка копирования разминки ===== */
.copy-warmup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-warmup-btn:active {
    background: var(--bg-tertiary);
}

.copy-warmup-btn svg {
    flex-shrink: 0;
}

/* ===== Модалка выбора тренировки для копирования разминки ===== */
.copy-warmup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.copy-warmup-modal {
    background: var(--bg-card);
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.copy-warmup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.copy-warmup-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.copy-warmup-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-warmup-content {
    padding: 12px;
    flex: 1;
    overflow-y: auto;
}

.copy-warmup-item {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-warmup-item:active {
    background: var(--bg-tertiary);
}

.copy-warmup-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.copy-warmup-item-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.copy-warmup-item-date {
    font-size: 13px;
    color: var(--text-muted);
}

.copy-warmup-item-preview {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: pre-line;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.copy-warmup-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ===== ПОИСК И ФИЛЬТР В ДНЕВНИКЕ ===== */
.search-filter-bar {
    display: flex;
    gap: 6px;
    padding: 4px 16px;
    margin-bottom: 8px;
}

.search-filter-bar .search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    gap: 0;
}

.search-filter-bar .search-icon {
    position: absolute;
    left: 8px;
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-filter-bar .search-input {
    width: 100%;
    padding: 5px 24px 5px 26px;
    border: none;
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: background 0.2s;
}

.search-filter-bar .search-input::placeholder {
    color: var(--text-muted);
}

.search-filter-bar .search-input:focus {
    background: var(--bg-tertiary);
}

.search-filter-bar .search-clear-btn {
    position: absolute;
    right: 4px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-filter-bar .search-clear-btn:active {
    background: var(--bg-primary);
}

.search-filter-bar .filter-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
}

.search-filter-bar .filter-btn:active {
    background: var(--bg-tertiary);
}

.search-filter-bar .filter-btn.active {
    background: var(--accent);
    color: white;
}

.search-filter-bar .filter-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    background: var(--accent);
    color: white;
    font-size: 9px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Активные фильтры */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 12px;
}

.active-filter-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 16px;
    background: var(--accent);
    color: white;
    font-size: 13px;
    font-weight: 500;
}

.active-filter-tag.weight-tag {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.active-filter-tag.weight-12 { background: var(--weight-12); color: black; }
.active-filter-tag.weight-16 { background: var(--weight-16); color: black; }
.active-filter-tag.weight-20 { background: var(--weight-20); color: white; }
.active-filter-tag.weight-24 { background: var(--weight-24); color: black; }
.active-filter-tag.weight-28 { background: var(--weight-28); color: black; }
.active-filter-tag.weight-32 { background: var(--weight-32); color: white; }

.active-filter-remove {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.active-filter-remove svg {
    width: 10px;
    height: 10px;
}

/* Модалка фильтров */
.filter-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.filter-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.filter-modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: #1a1a1a;
    background: var(--tg-theme-bg-color, #1a1a1a);
    border-radius: 20px 20px 0 0;
    padding: 20px;
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.filter-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.filter-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.filter-reset-btn {
    border: none;
    background: none;
    color: var(--accent);
    font-size: 15px;
    cursor: pointer;
    padding: 4px 8px;
}

.filter-section {
    margin-bottom: 20px;
}

.filter-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.filter-weights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-weight-btn {
    padding: 8px 14px;
    border: 2px solid transparent;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-weight-btn.weight-12 { background: var(--weight-12); color: black; }
.filter-weight-btn.weight-16 { background: var(--weight-16); color: black; }
.filter-weight-btn.weight-20 { background: var(--weight-20); color: white; }
.filter-weight-btn.weight-24 { background: var(--weight-24); color: black; }
.filter-weight-btn.weight-28 { background: var(--weight-28); color: black; }
.filter-weight-btn.weight-32 { background: var(--weight-32); color: white; }

.filter-weight-btn.selected {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px currentColor;
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-tag-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 2px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-tag-btn.selected {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.filter-tag-btn .prohodka-icon {
    font-size: 16px;
}

.filter-apply-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--accent);
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}

.filter-apply-btn:active {
    opacity: 0.9;
}

/* Состояние "нет результатов" */
.trainings-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.trainings-no-results svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.trainings-no-results p {
    margin: 0;
    font-size: 15px;
}

/* ===== INTERVAL TIMER ===== */
.timer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    background: var(--tg-theme-bg-color, #000);
    z-index: 10001;
    display: none;
    flex-direction: column;
}

.timer-overlay.visible {
    display: flex;
}

/* --- Setup Screen --- */
.timer-setup {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    padding-top: env(safe-area-inset-top, 20px);
    overflow-y: auto;
}

.timer-setup-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 32px;
}

.timer-close-btn {
    position: absolute;
    left: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
}

.timer-setup-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-primary);
    margin: 0;
}

.timer-settings {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.timer-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1a1a;
    background: var(--tg-theme-secondary-bg-color, #1a1a1a);
    border-radius: 14px;
    padding: 16px 20px;
}

.timer-setting-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.timer-setting-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.timer-adjust-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

.timer-adjust-btn:active {
    background: rgba(255, 255, 255, 0.1);
}

.timer-setting-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
    min-width: 60px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.timer-sound-row {
    padding: 12px 20px;
}

.timer-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
}

.timer-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.timer-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #444;
    border-radius: 28px;
    transition: background 0.3s;
}

.timer-toggle-slider:before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.timer-toggle input:checked + .timer-toggle-slider {
    background: var(--accent);
}

.timer-toggle input:checked + .timer-toggle-slider:before {
    transform: translateX(20px);
}

.timer-total-time {
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.timer-start-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 16px;
    background: var(--accent);
    color: #000;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    margin-top: auto;
}

.timer-start-btn:active {
    opacity: 0.85;
}

/* --- Running Screen --- */
.timer-running {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.timer-phase-bg {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.4s;
    padding: 20px;
    padding-top: env(safe-area-inset-top, 20px);
    min-height: 55vh;
}

.timer-phase-bg.phase-preparation {
    background: #FACC15;
}

.timer-phase-bg.phase-work {
    background: #22C55E;
}

.timer-phase-bg.phase-rest {
    background: #EF4444;
}

.timer-running-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.timer-phase-label {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 4px;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.timer-phase-bg.phase-rest .timer-phase-label {
    color: #fff;
}

.timer-countdown {
    font-size: min(30vw, 140px);
    font-weight: 900;
    color: #000;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -2px;
}

.timer-phase-bg.phase-rest .timer-countdown {
    color: #fff;
}

.timer-next-phase {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 12px;
}

.timer-phase-bg.phase-rest .timer-next-phase {
    color: rgba(255, 255, 255, 0.6);
}

.timer-running-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    background: #000;
    background: var(--tg-theme-bg-color, #000);
}

.timer-round-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timer-round-current {
    font-size: 48px;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
}

.timer-round-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-top: 4px;
}

.timer-running-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.timer-control-btn {
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.timer-pause-btn {
    width: 72px;
    height: 72px;
    background: var(--accent);
    color: #000;
}

.timer-pause-btn:active {
    opacity: 0.85;
}

.timer-stop-btn {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
}

.timer-stop-btn:active {
    background: rgba(255, 255, 255, 0.25);
}

.timer-tempo-display {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timer-tempo-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.timer-tempo-label {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* --- Done Screen --- */
.timer-done {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 20px;
}

.timer-done-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent);
    color: #000;
    font-size: 40px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer-done-text {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: 4px;
}

.timer-done-stats {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.6;
}

/* --- Timer button in training form --- */
.timer-exercise-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.timer-exercise-btn:active {
    background: rgba(34, 197, 94, 0.15);
}

.timer-exercise-btn svg {
    flex-shrink: 0;
}

/* Timer button in task card */
.training-card-actions {
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
}

.training-card-timer-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: transparent;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.training-card-timer-btn:active {
    background: rgba(34, 197, 94, 0.1);
}

.training-card-timer-btn svg {
    flex-shrink: 0;
}

/* Timer button inside task detail view */
.task-view-timer-row {
    margin-bottom: 12px;
}

.task-view-timer-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: rgba(34, 197, 94, 0.08);
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    justify-content: center;
}

.task-view-timer-btn:active {
    background: rgba(34, 197, 94, 0.18);
}