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

/* Центрируем и ограничиваем ширину всего содержимого, как пост в Twitter */
body {
    background-color: #ff8c00;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Изменили на flex-start, чтобы логотип был сверху */
    min-height: 100vh;
    padding: 20px;
    width: 100%;
}

/* Обновляем .container, чтобы он соответствовал ширине поста в Twitter */
.container {
    width: 100%;
    max-width: 620px; /* Ширина поста в Twitter */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: #FF8C00; /* ИЗМЕНЕНО: Оранжевый фон для контейнера */
}

/* Стили для логотипа Rise */
.header-bar {
    width: 100%;
    display: flex;
    justify-content: center; /* Центрируем логотип */
    margin-bottom: 10px; /* Отступ снизу до .passport-card */
}

.rise-logo {
    width: 24px;
    height: auto;
}

/* Основной редактор паспорта */
.passport-card {
    background: #FF8C00; /* ИЗМЕНЕНО: Оранжевый фон */
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
    width: 100%; /* Занимает всю ширину .container */
    min-height: 380px; /* Минимальная высота */
    color: black; /* ИЗМЕНЕНО: Цвет текста на чёрный */
}

/* Обновляем стили для фона аватара */
.card-background {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 20px;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* --- ГРАДИЕНТНЫЙ ФОН (теперь светло-оранжевый) --- */
    background: linear-gradient(135deg, #FFD580, #FFB74D); /* Светло-оранжевый градиент */
    /* Псевдоэлемент для создания узора сетки */
    z-index: 1;
}

.card-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Повторяющийся узор сетки (теперь тёмный, чтобы был виден на светлом фоне) */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 2;
}

/* Обновляем стили для самого аватара */
.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
    position: relative;
    z-index: 3;
}

.upload-btn {
    background: linear-gradient(to right, #ffd580, #FFA500); /* Оранжевый градиент */
    color: #000; /* Цвет текста */
    border: none;
    padding: 8px 16px; /* Уменьшенный padding */
    border-radius: 0; /* Квадратные края */
    cursor: pointer;
    font-weight: bold;
    margin: 10px 0;
    font-size: 0.9em; /* Уменьшенный размер шрифта */
    transition: all 0.3s ease;
}

.upload-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.status {
    font-size: 0.85em;
    margin: 5px 0;
    padding: 5px;
    border-radius: 4px;
    opacity: 0.8;
}

.status.success { color: #2E7D32; } /* ИЗМЕНЕНО: Темно-зелёный для успеха */
.status.error { color: #C62828; } /* ИЗМЕНЕНО: Темно-красный для ошибки */

.username-input-wrapper {
    margin: 15px 0;
}

.username-input-wrapper label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: black; /* ИЗМЕНЕНО: Цвет текста */
}

.username-input-wrapper input {
    width: 100%;
    padding: 10px;
    background: #FFD580; /* ИЗМЕНЕНО: Светлый фон для инпута */
    border: 1px solid #FF8C00; /* ИЗМЕНЕНО: Контрастная граница */
    border-radius: 8px;
    color: black; /* ИЗМЕНЕНО: Цвет текста в инпуте */
    font-size: 1em;
}

.username-input-wrapper input:focus {
    outline: none;
    border-color: #000000; /* ИЗМЕНЕНО: Чёрная рамка при фокусе */
    box-shadow: 0 0 5px rgba(0,0,0,0.3); /* Тень при фокусе */
}

.display-username {
    font-size: 1.5em;
    font-weight: bold;
    margin: 15px 0;
    color: black; /* ИЗМЕНЕНО: Цвет текста */
    letter-spacing: 0.5px;
}

/* Container for the two columns (Badges and Country) */
.selection-columns {
    display: flex;
    gap: 20px; /* Отступ между колонками */
    width: 100%;
    margin: 15px 0; /* Отступ от других элементов */
}

/* Left Column: Badge Selection */
.badges-selection {
    flex: 1; /* Занимает доступное пространство */
    text-align: left; /* Выравнивание по левому краю */
    background-color: #FFD580; /* ИЗМЕНЕНО: Светло-оранжевый фон */
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    color: black; /* ИЗМЕНЕНО: Цвет текста */
}

.badges-selection h3 {
    margin-bottom: 10px;
    text-align: left;
    color: black; /* ИЗМЕНЕНО: Цвет текста */
}

.checkbox-label {
    display: block;
    margin: 5px 0;
    font-size: 0.9em;
    cursor: pointer;
    text-align: left;
    color: black; /* ИЗМЕНЕНО: Цвет текста */
}

.checkbox-label input {
    margin-right: 8px;
}

/* Right Column: Country Selection */
/* --- Стили для колонки выбора стран --- */
#country-selector {
    width: 200px; /* Фиксированная ширина для колонки */
    background-color: #FFD580; /* ИЗМЕНЕНО: Светло-оранжевый фон */
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    gap: 10px; /* Отступ между опциями */
    height: fit-content; /* Высота по содержимому */
    align-self: flex-start; /* Выравнивание по верхнему краю основного контента */
    color: black; /* ИЗМЕНЕНО: Цвет текста */
}
#country-selector h3 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    text-align: center; /* Центрируем заголовок */
    color: black; /* ИЗМЕНЕНО: Цвет текста */
}
.country-option {
    display: block;
    margin: 5px 0;
    font-size: 0.9em;
    cursor: pointer;
    text-align: left; /* Выравнивание по левому краю */
    color: black; /* ИЗМЕНЕНО: Цвет текста */
}
.country-option input {
    margin-right: 8px;
}
.flag-icon {
    margin-right: 5px;
    font-size: 1.2em; /* Увеличим размер флага */
    vertical-align: middle; /* Выровняем по центру строки */
}

.generate-btn {
    background: linear-gradient(to right, #ffd580, #FFA500); /* Изменённый градиент (оранжевый) */
    color: #000; /* Цвет текста */
    border: none;
    padding: 8px 16px; /* Уменьшенный padding */
    border-radius: 0; /* Квадратные края */
    cursor: pointer;
    font-weight: bold;
    margin: 15px 0;
    font-size: 0.9em; /* Уменьшенный размер шрифта */
    transition: all 0.3s ease;
}

.generate-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(146,254,157,0.5);
}

.activity-description {
    font-size: 0.9em;
    margin: 15px 0;
    line-height: 1.5;
    color: black; /* ИЗМЕНЕНО: Цвет текста */
    font-style: italic;
}

/* --- Стили для сгенерированного паспорта --- */
.generated-passport {
    background: #FF8C00; /* ИЗМЕНЕНО: Оранжевый фон */
    border-radius: 0; /* Изменено: квадратные края */
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    width: 580px; /* Ширина как у поста в Twitter */
    min-height: 380px; /* Минимальная высота */
    margin: 0 auto; /* Центрируем внутри .container */
    color: black; /* ИЗМЕНЕНО: Цвет текста на чёрный */
}

/* Обновляем стили для фона аватара в сгенерированном паспорте */
.generated-passport .card-background {
    /* Применяем те же стили, что и для основного .card-background */
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: linear-gradient(135deg, #FFD580, #FFB74D); /* ИЗМЕНЕНО: Светло-оранжевый градиент */
}

.generated-passport .card-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Повторяющийся узор сетки (теперь тёмный, чтобы был виден на светлом фоне) */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 2;
}

/* Обновляем стили для самого аватара в сгенерированном паспорте */
.generated-passport .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
    position: relative;
    z-index: 3;
}

.generated-passport .display-username {
    font-size: 1.3em; /* Изменено: уменьшен размер текста */
    font-weight: bold;
    margin: 10px 0;
    color: black; /* ИЗМЕНЕНО: Цвет текста */
    letter-spacing: 0.5px;
}

.generated-passport .badges-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.generated-passport .badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 0; /* Изменено: квадратные бейджи */
    font-weight: bold;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 5px;
    cursor: default;
}

/* --- Стили для ряда флагов стран в сгенерированном паспорте --- */
.generated-passport .countries-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px; /* Отступ между флагами */
    margin-top: 15px; /* Отступ сверху */
}

/* --- Стили для контейнера одного флага страны в сгенерированном паспорте --- */
.generated-passport .generated-country-flag {
    display: inline-flex; /* Используем flex для выравнивания иконки и текста */
    align-items: center; /* Выравнивание по центру по вертикали */
    gap: 4px; /* Небольшой отступ между иконкой и текстом */
    border-radius: 0; /* Изменено: квадратные рамки вокруг флагов */
    /* Можно добавить стили для фона, рамки, скругления, если нужно */
    /* padding: 4px; */
    /* border: 1px solid #444; */
    /* border-radius: 8px; */
}

/* --- Стили для SVG-иконки флага в сгенерированном паспорте --- */
.generated-passport .generated-flag-icon {
    width: 24px; /* Убедимся, что иконка нужного размера */
    height: 24px;
    vertical-align: middle; /* Выровняем по центру строки */
}

/* --- Стили для названия страны рядом с флагом --- */
.generated-passport .country-name {
    font-size: 0.7em; /* Изменено: уменьшен размер текста */
    color: black; /* ИЗМЕНЕНО: Цвет текста */
}

.generated-passport .activity-description {
    font-size: 0.8em; /* Текущий размер */
    margin: 30px 0;   /* Текущий отступ (сверху и снизу) */
    line-height: 1.5; /* Текущий межстрочный интервал */
    color: black;   /* ИЗМЕНЕНО: Цвет текста */
    font-style: italic; /* Текущий стиль */
    /* --- Добавьте или измените это свойство --- */
    margin-top: 30px; /* Увеличьте значение, например до 30px */
    /* Если вы хотите только отступ снизу, используйте margin-bottom */
    /* margin-bottom: 20px; */
    /* margin-top: 15px; */ /* Если нужно уменьшить отступ сверху */
}

/* --- Стили для кнопок действий --- */
.generated-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px; /* Отступ сверху для всего блока кнопок */
}

.action-btn {
    padding: 5px 10px; /* Уменьшенный padding (примерно вдвое) */
    border: none;
    border-radius: 0; /* Квадратные края */
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8em; /* Уменьшенный размер шрифта (примерно вдвое) */
    transition: all 0.3s ease;
    /* margin-top: 10px; /* Отступ сверху для каждой кнопки (альтернатива) */
}

.download-btn {
    background: linear-gradient(to right, #4CAF50, #8BC34A);
    color: white;
}

.twitter-btn {
    background: linear-gradient(to right, #1DA1F2, #1DA1F2);
    color: white;
}

.back-btn {
    background: linear-gradient(to right, #9E9E9E, #616161);
    color: white;
}

.action-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* --- Стили для бейджей --- */
.badge-primary {
    background: linear-gradient(to right, #00C9FF, #92FE9D);
    color: #000;
    box-shadow: 0 0 10px rgba(146,254,157,0.5);
}

.badge-purple {
    background: linear-gradient(to right, #8E2DE2, #4A00E0);
    color: white;
    box-shadow: 0 0 10px rgba(142,45,226,0.5);
}

.badge-orange {
    background: linear-gradient(to right, #FF9966, #FF5E62);
    color: white;
    box-shadow: 0 0 10px rgba(255,94,98,0.5);
}

.badge-pink {
    background: linear-gradient(to right, #F093FB, #F5576C);
    color: white;
    box-shadow: 0 0 10px rgba(245,87,108,0.5);
}

/* --- Для скрытия/показа секций --- */
.section {
    width: 100%;
}

/* --- Стили для заголовка в секции генерации --- */
#generated-section .container h2 {
    text-align: center; /* Центрируем текст */
    margin-bottom: 20px; /* Добавляем отступ снизу (перед .generated-passport) */
    margin-top: 10px;    /* (Опционально) Добавляем отступ сверху */
}


/* --- Стили для логотипа проекта в сгенерированном паспорте --- */
.generated-passport .project-logo {
    position: absolute;
    top: 25px; /* Отступ сверху */
    right: 10px; /* Отступ справа */
    width: 140px; /* Ширина логотипа */
    height: 50px; /* Высота логотипа */
    z-index: 10; /* Убедимся, что логотип поверх других элементов */
}


.header-logo-box {
    text-align: center; /* Выравнивание по левому краю */
    background-color: #FFD580; /* ИЗМЕНЕНО: Светло-оранжевый фон */
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    color: black; /* ИЗМЕНЕНО: Цвет текста */
}

/* --- Стили для контейнера двух аватаров (в сгенерированной карточке) --- */
.generated-passport .avatars-container {
    display: flex;
    gap: 20px; /* Отступ между аватарами */
    justify-content: center; /* Центрируем аватары по горизонтали */
    margin-bottom: 20px; /* Отступ снизу до текста */

    /* --- Добавьте эти строки, чтобы создать черную рамку --- */
    border: 3px solid #000000; /* Черная рамка толщиной 3px */
    padding: 10px; /* Внутренние отступы (чуть от аватаров до рамки) */
    background-color: #FF8C00; /* Фон контейнера (если нужен) */
    /* --- /Добавьте эти строки --- */
}

/* --- Стили для обёртки аватара (одинаковые для обоих аватаров в сгенерированной карточке) --- */
.generated-passport .avatar-wrapper {
    width: 180px; /* Ширина аватара */
    height: 180px; /* Высота аватара */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Градиентный фон */
    background: linear-gradient(135deg, #FFD580, #FFB74D); /* Светло-оранжевый градиент */
    /* Узор сетки */
    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 1;
}

/* --- Стили для самого аватара (в сгенерированной карточке) --- */
.generated-passport .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
    position: relative;
    z-index: 3;
}

/* --- Стили для правой части (текст, бейджи, флаги, описание) (в сгенерированной карточке) --- */
.generated-passport .text-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Распределяем пространство между элементами */
    flex: 1; /* Растягиваем, чтобы занять всё оставшееся место */
    padding: 20px;
    position: relative; /* Для позиционирования логотипа */
    min-height: 180px; /* Убедимся, что у .text-content есть минимальная высота */
}

/* --- Стили для логотипа проекта в сгенерированном паспорте --- */
.generated-passport .project-logo {
    position: absolute;
    top: 10px; /* Отступ сверху */
    right: 10px; /* Отступ справа */
    width: 140px; /* Ширина логотипа */
    height: 50px; /* Высота логотипа */
    z-index: 10; /* Убедимся, что логотип поверх других элементов */
}



/* --- Стили для номера карточки (в сгенерированной карточке) --- */
.generated-passport .card-number {
    font-size: 0.7em; /* Мелкий шрифт */
    color: #000000; /* ИЗМЕНЕНО: Чёрный цвет текста */
    margin-bottom: 5px; /* Отступ снизу */
    text-align: center; /* Центрирование */
    font-weight: bold; /* Жирный шрифт (по желанию) */

    /* --- Добавьте эти строки, чтобы создать рамку --- */
    border: 1px solid #000000; /* ИЗМЕНЕНО: Сплошная чёрная рамка толщиной 1px */
    border-radius: 4px; /* Скруглённые углы рамки (по желанию, можно убрать) */
    padding: 2px 6px; /* Внутренние отступы (чуть от текста до рамки) */
    display: inline-block; /* Чтобы рамка обтекала текст, а не занимала всю ширину */
    background-color: #FF8C00; /* ИЗМЕНЕНО: Оранжевый фон для контекста */
    /* --- /Добавьте эти строки --- */
}