/* =============================================================== */
/* БАЗОВЫЕ СТИЛИ И ШРИФТЫ */
/* =============================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    width: 100%;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    /* Базовый фон будет черным, т.к. большинство экранов на нем */
    background-color: #14151A;
    color: white;
    /* Предотвращаем случайное выделение текста на кнопках */
    user-select: none;
}
/* Прячет элементы, пока Alpine.js не инициализировался, чтобы избежать "мигания" */
[x-cloak] { display: none !important; }

/* Общий контейнер для всех экранов, чтобы центрировать контент */
.screen-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* =============================================================== */
/* ЭКРАН 1: ЗАГРУЗКА (по вашему дизайну) */
/* =============================================================== */
.loading-screen {
    width: 100%;
    height: 100vh; /* Занимает весь экран */
    background-color: #D5FF5F;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.loading-screen .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.loading-screen .logo-title {
    color: #151515;
    font-size: 51px;
    font-family: 'Permanent Marker', cursive;
    font-weight: 400;
}
.loading-screen .logo-subtitle {
    color: black;
    font-size: 29px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}


/* =============================================================== */
/* ЭКРАН 2: ВЫБОР ТРЕНИРОВКИ (по вашему дизайну) */
/* =============================================================== */
.select-workout-screen {
    padding: 75px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}
.select-workout-screen .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.select-workout-screen .logo-title {
    color: #D5FF5F;
    font-size: 32px;
    font-family: 'Permanent Marker', cursive;
    font-weight: 400;
}
.select-workout-screen .logo-subtitle {
    color: #D5FF5F;
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}
.select-workout-screen .screen-title {
    color: white;
    font-size: 27px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    margin-bottom: 24px;
}
.workout-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}
.workout-item {
    width: 100%;
    height: 52px;
    padding: 6px 8px 6px 20px;
    background: #191919;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border: 1px solid transparent; /* Резервируем место под обводку */
    transition: all 0.2s ease;
}
.workout-item.selected {
    border: 1px solid #D5FF5F;
}
.workout-item-icon {
    width: 25px;
    height: 25px;
}
.workout-item-name {
    color: white;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}
.btn-start-workout {
    width: 100%;
    padding: 20px 10px;
    border-radius: 32px;
    text-align: center;
    color: #151515;
    font-size: 21px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}
.btn-start-workout.enabled {
    background: #D5FF5F;
}
.btn-start-workout.disabled {
    background: #343434;
    color: #888;
    cursor: not-allowed;
}


/* =============================================================== */
/* ЭКРАН 3: УПРАЖНЕНИЕ */
/* =============================================================== */
.exercise-screen {
    padding: 36px 20px;
}
.content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.exercise-image-container { 
    width: 100%; 
    height: 220px; 
    border-radius: 25px; 
    overflow: hidden; 
    background-color: #333; 
}
.exercise-image-container img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}
.exercise-info { 
    display: flex; 
    flex-direction: column; 
    gap: 9px; 
}
.exercise-info h1 { 
    font-size: 21px; 
    font-weight: 700; 
}
.exercise-info p { 
    font-size: 13px; 
    font-weight: 400; 
    color: #C3C3C3; 
    line-height: 1.5; 
}
.section-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 12px; 
}
.section-header h2, .section-header h3 { 
    font-size: 16px; 
    font-weight: 500; 
    color: white; 
}
.btn-show { 
    background-color: #252525; 
    color: white; 
    border: none; 
    border-radius: 24px; 
    padding: 4px 12px; 
    font-size: 12px; 
    font-weight: 400; 
    cursor: pointer; 
}
.history-grid { 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    border: 1px solid #343434; 
    border-radius: 4px; 
    overflow: hidden; 
}
.grid-cell { 
    background-color: #14151A; 
    border-right: 1px solid #343434; 
    border-bottom: 1px solid #343434; 
    padding: 10px 5px; 
    text-align: center; 
    font-size: 12px; 
    font-weight: 400; 
    color: white; 
}
.history-grid .grid-cell:nth-child(6n) { 
    border-right: none; 
}
.history-grid .grid-cell:nth-last-child(-n+6) { 
    border-bottom: none; 
}
.current-set-section { 
    margin-top: 10px; 
}

/* Контейнер для кнопок +/- */
.set-controls {
    display: flex;
    gap: 14px;
    align-items: center;
}

/* Кнопка минус (красная) */
.btn-icon-remove {
    width: 25px;
    height: 25px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-icon-remove:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.btn-icon-remove svg {
    width: 25px;
    height: 25px;
}

/* Кнопка плюс (зеленая) */
.btn-icon-add { 
    width: 25px;
    height: 25px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-icon-add svg {
    width: 25px;
    height: 25px;
}

/* Блок отображения тоннажа */
.tonnage-display {
    width: 100%;
    padding: 8px 0;
    background: black;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
}
.tonnage-label {
    color: #888;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}
.tonnage-current {
    color: #D5FF5F;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}
.tonnage-separator {
    color: white;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}
.tonnage-remaining {
    color: #FF5F5F;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}
.tonnage-exceeded {
    color: #D5FF5F;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.input-group { 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
}
.input-row { 
    display: flex; 
    gap: 14px; 
}
.input-group input { 
    width: 100%; 
    background-color: #F1F1F1; 
    border: none; 
    border-radius: 7px; 
    padding: 14px; 
    font-size: 16px; 
    font-family: 'Inter', sans-serif; 
    color: #151515; 
}
.input-group input::placeholder { 
    color: #555; 
}
.input-row input { 
    flex: 1; 
}
.action-buttons { 
    display: flex; 
    gap: 24px; 
    margin-top: 10px; 
}
.btn-action { 
    flex: 1; 
    height: 52px; 
    border: none; 
    border-radius: 24px; 
    font-size: 16px; 
    font-weight: 800; 
    cursor: pointer; 
    transition: transform 0.15s ease; 
}
.btn-action:active { 
    transform: scale(0.98); 
}
.btn-action.skip { 
    background-color: #FF5F5F; 
    color: #151515; 
}
.btn-action.next { 
    background-color: #D5FF5F; 
    color: #151515; 
}

/* Кнопка "Начать новую тренировку" */
.reset-workout-container {
    width: 100%;
    margin-top: 8px;
}
.btn-reset-workout {
    width: 100%;
    padding: 8px 0;
    background: #14151A;
    border-radius: 8px;
    border: none;
    text-align: center;
    color: #343434;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.2s ease;
}
.btn-reset-workout:hover {
    color: #666;
}


/* =============================================================== */
/* ЭКРАН 4: ЗАВЕРШЕНИЕ (по вашему дизайну) */
/* =============================================================== */
.finish-screen {
    background-color: #14151A;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 41px;
    /* Центрируем по вертикали, вычитая примерную высоту верхнего/нижнего padding */
    min-height: calc(100vh - 72px); 
}
.finish-screen .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}
.finish-screen .logo-title {
    color: #D5FF5F;
    font-size: 32px;
    font-family: 'Permanent Marker', cursive;
    font-weight: 400;
}
.finish-screen .logo-subtitle {
    color: #D5FF5F;
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}
.finish-icon-container {
    position: relative;
    width: 105px;
    height: 105px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.finish-icon-circle-border {
    position: absolute;
    width: 104.22px;
    height: 104.22px;
    border-radius: 50%;
    border: 2.92px #D5FF5F solid;
}
.finish-icon-circle-bg {
    width: 80.89px;
    height: 80.89px;
    background: #D5FF5F;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.finish-text-container {
    display: flex;
    flex-direction: column;
    gap: 11px;
    text-align: center;
    margin-top: 24px;
}
.finish-title {
    color: white;
    font-size: 23px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}
.finish-subtitle {
    color: white;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 1.5;
}
.btn-finish {
    width: 100%;
    padding: 20px 10px;
    background: #D5FF5F;
    border-radius: 32px;
    text-align: center;
    color: #151515;
    font-size: 21px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    cursor: pointer;
    border: none;
    margin-top: 32px;
}
.no-workouts-screen {
    min-height: 100vh;
    padding: 75px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.no-workouts-screen .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.no-workouts-screen .logo-title {
    color: #D5FF5F;
    font-size: 32px;
    font-family: 'Permanent Marker', cursive;
    font-weight: 400;
}

.no-workouts-screen .logo-subtitle {
    color: #D5FF5F;
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.no-workouts-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.no-workouts-title {
    color: white;
    font-size: 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

.no-workouts-text {
    color: #C3C3C3;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    max-width: 320px;
}

.btn-contact-trainer {
    width: 100%;
    max-width: 320px;
    padding: 20px 10px;
    background: #D5FF5F;
    border-radius: 32px;
    text-align: center;
    color: #151515;
    font-size: 21px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-decoration: none;
    display: block;
    margin-top: 16px;
}

/* =============================================================== */
/* СТАТУС СОХРАНЕНИЯ */
/* =============================================================== */
.save-status {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-radius: 16px;
    text-align: center;
}
.save-status.saving {
    color: #888;
}
.save-status.error {
    background: rgba(255, 95, 95, 0.1);
    border: 1px solid #FF5F5F;
}
.save-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #333;
    border-top-color: #D5FF5F;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.save-error-icon {
    width: 48px;
    height: 48px;
    background: #FF5F5F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #151515;
}
.save-error-title {
    color: #FF5F5F;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.save-error-text {
    color: #888;
    font-size: 12px;
    margin: 0;
    word-break: break-word;
}
.save-error-hint {
    color: #D5FF5F;
    font-size: 14px;
    margin: 0;
}
.btn-retry {
    padding: 12px 32px;
    background: #FF5F5F;
    border: none;
    border-radius: 24px;
    color: #151515;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
}