/* ==========================================
 * layout.css — Экраны, навигация, анимации
 * ========================================== */

/* --- Экран --- */
.screen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--spacing-md);
    animation: fadeIn var(--transition-normal) ease;
}

.screen--centered {
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* --- Зона контента --- */
.screen__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-md);
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.screen__content--top {
    justify-content: flex-start;
    padding-top: var(--spacing-xl);
}

/* --- Заголовок экрана --- */
.screen__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: 1.3;
}

.screen__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-sm);
}

/* --- Подвал экрана (кнопки) --- */
.screen__footer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.screen__footer--row {
    flex-direction: row;
}

/* --- Логотип --- */
.logo {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--spacing-md);
    background-color: var(--color-primary-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo svg {
    width: 32px;
    height: 32px;
    color: var(--color-primary);
}

/* --- Анимации --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}

.animate-fade-in {
    animation: fadeIn var(--transition-normal) ease;
}

.animate-fade-out {
    animation: fadeOut var(--transition-fast) ease forwards;
}

.animate-slide-in-right {
    animation: slideInRight var(--transition-normal) ease;
}

.animate-slide-in-left {
    animation: slideInLeft var(--transition-normal) ease;
}

/* --- Переключатель тем (dev) --- */
.theme-switcher {
    position: fixed;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    gap: var(--spacing-xs);
    z-index: 1000;
    background: var(--color-bg-card);
    padding: var(--spacing-xs);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.theme-switcher__btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.theme-switcher__btn:hover {
    transform: scale(1.1);
}

.theme-switcher__btn--active {
    border-color: var(--color-text);
}