/* =============================================================================
   АРХИТЕКТУРА: LAYOUT (Скелет приложения)
   Назначение: Глобальные токены, сброс стилей, структура хедера и контейнеров.
   Этот файл загружается ВСЕГДА (Tier 1).

   ОТСТУПЫ: В этом слое горизонтальный отступ равен 0. 
   Это фундамент для режима Full Bleed (навылет), позволяющий элементам касаться краев.
   ============================================================================= */

:root {
    /* 🤖 Переменные темы Telegram (WebApp) */
    --tg-theme-bg-color: #18222d;
    --tg-theme-text-color: #ffffff;
    --tg-theme-hint-color: #7d7d7d;
    --tg-theme-link-color: #5bc0de;
    --tg-theme-button-color: #0078d4;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-secondary-bg-color: #232e3c;
    --tg-theme-section-bg-color: #232e3c;
    --tg-theme-section-header-text-color: #5bc0de;
    --tg-theme-subtitle-text-color: #7d7d7d;
    --tg-theme-accent-text-color: #5bc0de;
    --tg-theme-destructive-text-color: #ff3b30;
    --tg-theme-section-separator-color: #3a3f4a;

    /* 🏆 Цвета бренда */
    --brand-accent: #00D936;
    /* "Матричный" зеленый */

    /* 🎨 Дизайн-система: Радиусы */
    --border-radius: 0.75rem;
    --border-radius-sm: 0.375rem;
    --border-radius-lg: 1rem;

    /* 📏 Сетка отступов (Spacing) */
    --spacing-xs: 0.5rem;
    /* 8px */
    --spacing-sm: 0.75rem;
    /* 12px */
    --spacing-md: 1rem;
    /* 16px */
    --spacing-lg: 1.5rem;
    /* 24px */
    --spacing-xl: 2rem;
    /* 32px */
    --spacing-2xl: 3rem;
    /* 48px */

    /* 🔤 Типографика (Source of Truth) */
    --font-size-xs: 0.8125rem;
    /* 13px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-base: 1.0625rem;
    /* 17px - базовый для мобилок */
    --font-size-lg: 1.1875rem;
    /* 19px */
    --font-size-xl: 1.3125rem;
    /* 21px */
    --font-size-2xl: 1.625rem;
    /* 26px */
    --font-size-3xl: 2.125rem;
    /* 34px */

    /* 🚥 Технические статусы */
    --status-success: #28a745;
    --status-danger: #dc3545;
    --status-warning: #ffc107;
    --status-accent: #fd7e14;

    /* 🎞️ Анимации */
    --animation-duration: 0.3s;
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* 📱 Специфика лейаута */
    --form-control-height: 44px;
    --header-height: auto;
    --header-padding: 0.5rem var(--spacing-xs);
    /* Density 8px */
    --main-padding: var(--spacing-xs);
    /* Density 8px */
    --section-gap: 4px;

    /*  Цвета панелей */
    --panel-bg-start: #2a3441;
    --panel-bg-end: #1e2328;
}

/* 🔄 Сброс стилей (Reset) */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

html {
    height: 100%;
    font-size: 16px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--tg-theme-text-color);
    background: var(--tg-theme-bg-color);
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

a {
    color: var(--tg-theme-link-color);
    text-decoration: none;
    transition: color var(--animation-duration) ease;
}

/* --- 1. Основной контейнер --- */
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 100vw;
}

/* --- 2. Шапка (Header) --- */
.header {
    padding: 8px var(--spacing-xs);
    /* Density 8px */
    background: var(--tg-theme-secondary-bg-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-top: calc(var(--dynamic-padding-top, env(safe-area-inset-top, 0px)) + 8px);
}

body.tg-webapp .header {
    top: 0;
}

.header-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.header__brand {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--brand-accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

.header__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.header__content {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.header__title {
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header__hint {
    font-size: 0.85rem;
    color: var(--tg-theme-subtitle-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 3. Контентная область --- */
.main-content {
    flex: 1;
    padding: var(--spacing-lg) 0 2rem;
    /* Увеличен отступ до 24px (8px + 16px) */
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.section {
    margin-bottom: var(--section-gap);
    transition: opacity var(--animation-duration) ease-in-out;
}

/* --- 4. Адаптивность (Responsive) --- */
@media screen and (min-width: 768px) {

    .main-content,
    .header-grid {
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }
}

/* --- 5. Auth Gate: скрываем контент до завершения проверки авторизации --- */
/* Класс app-loading ставится на <body> при загрузке и снимается auth.js */
body.app-loading .main-content,
body.app-loading .header {
    visibility: hidden;
}

/* --- 6. Утилиты --- */
.hidden {
    display: none !important;
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mt-md {
    margin-top: var(--spacing-md);
}