/* Cover Letter Page Styles */
/* Базовые стили страницы */
body:not(.theme-preload) .cover-letter-main-container,
body:not(.theme-preload) .cv-upload-area,
body:not(.theme-preload) .job-text-input,
body:not(.theme-preload) .cover-letter-result {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cover-letter-page {
    font-family: var(--font-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.cover-letter-page .bg-primary {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100vh;
}
/* Header стили */
.cover-letter-header {
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
    padding: 0px 0 16px 0;
}
.cover-letter-title {
    font-size: var(--fs-40);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-40);
    letter-spacing: var(--ls-40);
    margin-bottom: 8px;
    font-family: var(--font-primary);
    color: var(--text-color);
}
.cover-letter-subtitle {
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    color: var(--text-color);
    margin-bottom: 0px;
    font-family: var(--font-primary);
}
/* Основной контейнер */
.cover-letter-container {
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 0 24px 0;
}
.cover-letter-main-container {
    background: var(--surface-primary);
    border-radius: 24px;
    padding: 16px;
    margin-bottom: 16px;
}
/* Уведомление о восстановленных данных */
.cv-restored-notice {
    background: var(--surface-secondary);
    border: 1px solid var(--success-color);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.restored-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-14);
    color: var(--text-color);
}
.cv-upload-date {
    font-size: var(--fs-12);
    color: var(--text-muted);
}
.btn-link {
    background: transparent;
    border: none;
    color: var(--accent-color);
    font-size: var(--fs-14);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.btn-link:hover {
    color: var(--accent-hover);
}
/* Двухколоночная структура */
.cover-letter-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}
.cover-letter-left-column,
.cover-letter-right-column {
    display: flex;
    flex-direction: column;
}
/* Заголовки секций */
.cover-letter-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.cover-letter-section-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.cover-letter-section-label {
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    color: var(--text-muted);
    font-family: var(--font-primary);
}
/* Переиспользуем стили загрузки CV из cv.css */
.cv-upload-area {
    background: var(--surface-secondary);
    border: 2px dashed var(--filter-divider);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    min-height: 294px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cv-upload-area:hover {
    border-color: var(--accent-color);
    background: var(--hover-light);
}
.cv-upload-area.drag-over {
    border-color: var(--accent-color);
    background: var(--hover-light);
}
.cv-upload-area.loading {
    pointer-events: none;
}
.cv-upload-area.disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
}
.cv-upload-area.disabled:hover {
    border-color: var(--filter-divider);
    background: var(--surface-secondary);
}
.cv-upload-area.success {
    border-color: var(--success-color);
    background: var(--success-light, rgba(58, 194, 113, 0.1));
}
.cv-upload-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 12px;
}
.cv-upload-title {
    font-size: var(--fs-18);
    font-weight: var(--fw-medium);
    line-height: var(--lh-18);
    color: var(--text-color);
    margin-bottom: 8px;
    font-family: var(--font-primary);
    max-width: 100%;
    text-align: center;
}
.cv-upload-subtitle {
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    font-family: var(--font-primary);
    margin-bottom: 16px;
}
.cv-upload-input {
    display: none;
}
/* Правая колонка - текст вакансии */
.job-text-area {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}
.job-text-input {
    width: 100%;
    min-height: 230px;
    padding: 16px;
    border: 2px solid var(--filter-divider);
    border-radius: 16px;
    background: var(--surface-secondary);
    color: var(--text-color);
    font-size: var(--fs-16);
    font-family: var(--font-primary);
    line-height: 1.5;
    resize: vertical;
    transition: all 0.2s ease;
    outline: none;
}
.job-text-input:focus {
    border-color: var(--accent-color);
    background: var(--surface-primary);
}
.job-text-input::placeholder {
    color: var(--text-muted);
}
.job-text-counter {
    text-align: right;
    font-size: var(--fs-12);
    color: var(--text-muted);
    margin-top: 8px;
}
.job-text-counter.error {
    color: var(--error-color);
}
/* Кнопка генерации */
.btn-generate {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    min-height: 48px;
}
.btn-generate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.btn-generate.loading .btn-text {
    opacity: 0.7;
}
.btn-spinner {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Блок результата */
.cover-letter-result {
    background: var(--surface-primary);
    border-radius: 24px;
    padding: 24px;
    margin-top: 16px;
}
.result-header {
    text-align: center;
    margin-bottom: 16px;
}
.result-title {
    font-size: var(--fs-20);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-20);
    color: var(--text-color);
    font-family: var(--font-primary);
}
.result-subtitle {
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    font-family: var(--font-primary);
    margin: 0;
}
.result-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.result-text {
    background: var(--surface-secondary);
    border-radius: 16px;
    padding: 20px;
    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    color: var(--text-color);
    font-family: var(--font-primary);
    white-space: pre-wrap;
}
/* Стили для кнопки копирования снаружи блока */
.result-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
}
.result-actions .btn {
    flex: 0 0 auto;
    min-width: 160px;
    gap: 4px;
}
/* Dark theme адаптации */
html.dark-theme .cv-upload-area {
    background: var(--surface-secondary);
    border-color: var(--filter-divider);
}
html.dark-theme .cv-upload-area:hover {
    background: var(--hover-light);
    border-color: var(--accent-color);
}
html.dark-theme .cv-upload-area.success {
    background: rgba(58, 194, 113, 0.15);
}
html.dark-theme .cv-upload-icon path[fill="#D1D1D1"] {
    fill: #474B55;
}
html.dark-theme .job-text-input {
    background: var(--surface-secondary);
    border-color: var(--filter-divider);
}
html.dark-theme .job-text-input:focus {
    background: var(--surface-primary);
}
/* Адаптивность */
@media (max-width: 1279px) {
    .cover-letter-header {
        width: 100%;
        max-width: 600px;
        padding: 0px 0 16px 0;
    }
    .cover-letter-container {
        width: 100%;
        max-width: 600px;
    }
    .cover-letter-columns {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .cover-letter-title {
        font-size: var(--fs-32);
        line-height: var(--lh-32);
        letter-spacing: var(--ls-32);
    }
    .cover-letter-subtitle {
        font-size: var(--fs-16);
        line-height: var(--lh-16);
        letter-spacing: var(--ls-16);
    }
    .cv-upload-area {
        padding: 16px;
        min-height: 160px;
    }
    .cv-upload-icon {
        width: 60px;
        height: 60px;
    }
    .cv-upload-title {
        font-size: var(--fs-16);
        line-height: var(--lh-16);
        letter-spacing: var(--ls-16);
        margin-bottom: 6px;
    }
    .cv-upload-subtitle {
        font-size: var(--fs-14);
        margin-bottom: 12px;
    }
    .job-text-input {
        min-height: 160px;
        padding: 12px;
    }
    .result-title {
        font-size: var(--fs-20);
        line-height: var(--lh-20);
        letter-spacing: var(--ls-20);
    }
    /* result-actions styles removed */
    .cv-restored-notice {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}
@media (max-width: 1279px) {
    .cover-letter-main-container {
        padding: 16px;
    }
    .cover-letter-result {
        padding: 16px;
    }
    .result-text {
        padding: 16px;
        font-size: var(--fs-16);
        letter-spacing: var(--ls-16);
        line-height: var(--lh-16);
    }
    .job-text-input {
        min-height: 140px;
        padding: 12px;
    }
}
/* Состояния загрузки */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}
/* Success state для CV upload */
.cv-upload-area.success .cv-upload-icon {
    display: none;
}
.cv-upload-area.success::before {
    content: "✓";
    font-size: 32px;
    color: var(--success-color);
    font-weight: bold;
    margin-bottom: 8px;
}
/* Toast styles are handled by styles_new.css */
/* SEO блок */
.cover-letter-seo-section {
    width: 100%;
    margin-top: 16px;
}
.cover-letter-seo-container {
    display: flex;
    gap: 16px;
    max-width: 1152px;
    margin: 0 auto;
}
.cover-letter-seo-left,
.cover-letter-seo-right {
    flex: 1;
    background-color: var(--surface-primary);
    padding: 20px;
    border-radius: 24px;
}
.seo-block-title {
    font-size: var(--fs-20);
    line-height: var(--lh-20);
    letter-spacing: var(--ls-20);
    font-weight: var(--fw-semibold);
    color: var(--text-color);
    margin: 0 0 16px 0;
}
.seo-stats-list,
.seo-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.seo-stats-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
}
.seo-stats-list li:last-child {
    margin-bottom: 0;
}
.seo-stats-list li::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23F8F7F7'/%3E%3Cpath d='M14.39 7.85L9.55 12.69C9.49 12.75 9.39 12.8 9.29 12.8C9.19 12.8 9.1 12.75 9.03 12.69L6.86 10.53C6.71 10.38 6.71 10.14 6.86 9.99C7.01 9.84 7.25 9.84 7.39 9.99L9.29 11.89L13.61 7.56C13.76 7.43 14 7.43 14.14 7.56C14.29 7.7 14.29 7.7 14.39 7.85Z' fill='%23000000'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.seo-benefits-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
}
.seo-benefits-list li:last-child {
    margin-bottom: 0;
}
.seo-benefits-list li::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1C5.48 1 1 4.9 1 10C1 15.1 4.9 19 10 19C15.1 19 19 15.1 19 10C19 4.9 15.1 1 10 1ZM14.39 7.85L9.55 12.69C9.49 12.75 9.39 12.8 9.29 12.8C9.19 12.8 9.1 12.75 9.03 12.69L6.86 10.53C6.71 10.38 6.71 10.14 6.86 9.99C7.01 9.84 7.25 9.84 7.39 9.99L9.29 11.89L13.61 7.56C13.76 7.43 14 7.43 14.14 7.56C14.29 7.7 14.29 7.7 14.39 7.85Z' fill='%233AC271'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
@media (max-width: 1279px) {
    .cover-letter-main-container {
        margin-bottom: 0;
    }
    .cover-letter-seo-section {
        max-width: 600px;
        margin: 16px auto 0;
    }
    .cover-letter-seo-container {
        flex-direction: column;
        gap: 16px;
        max-width: 100%;
    }
    .cover-letter-seo-left,
    .cover-letter-seo-right {
        padding: 16px;
    }
    .seo-block-title {
        font-size: var(--fs-20);
        line-height: var(--lh-20);
        letter-spacing: var(--ls-20);
        margin-bottom: 16px;
    }
    .seo-stats-list li,
    .seo-benefits-list li {
        font-size: var(--fs-16);
        line-height: var(--lh-16);
        letter-spacing: var(--ls-16);
        margin-bottom: 12px;
    }
    .seo-stats-list li {
        padding-left: 28px;
    }
    .seo-benefits-list li {
        padding-left: 28px;
    }
    .seo-stats-list li::before {
        top: 2px;
        transform: none;
        left: 0;
    }
    .seo-benefits-list li::before {
        top: 2px;
        transform: none;
        left: 0;
        width: 20px;
        height: 20px;
    }
    .seo-stats-list li:last-child,
    .seo-benefits-list li:last-child {
        margin-bottom: 0;
    }
}