/* =====================================================
   «Спокойная студия» — общий стиль Mini App (октябрь 2026).
   Подключается последним на каждой странице; все цвета берутся из
   переменных, которые страницы уже используют (--accent, --header-bg,
   --fg, --grid-line, --muted-fg…), поэтому отдельные экраны не
   переписываются. Тема (светлая/тёмная) ставится theme.js как
   <html data-theme="light|dark"> по теме Telegram.
   ===================================================== */

html:root {
    --brand: #FF5A1F;
    --accent: #FF5A1F;
    --ground: #FAFAFA;
    --surface: #FFFFFF;
    --surface-2: #F0F0F0;
    --header-bg: #F0F0F0;
    --header-text: #111111;
    --fg: #111111;
    --entry-text: #D9480F;
    --grid-line: #E4E4E4;
    --muted: #BDBDBD;
    --muted-fg: #666666;
    --danger: #C0392B;
    --ok: #2E8F78;
    --warn: #B7791F;
    --radius: 14px;
    --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Roboto Condensed', 'Arial Narrow', 'Onest', sans-serif;

    /* Свои цвета вместо тех, что подставляет Telegram, — иначе у
       людей с разными темами Telegram приложение выглядело бы по-разному. */
    --tg-theme-bg-color: var(--ground) !important;
    --tg-theme-text-color: var(--fg) !important;
    --tg-theme-hint-color: var(--muted-fg) !important;
    --tg-theme-secondary-bg-color: var(--surface-2) !important;
    --tg-theme-button-color: var(--accent) !important;
    --tg-theme-button-text-color: #FFFFFF !important;
    --tg-theme-link-color: var(--accent) !important;
}

html[data-theme="dark"]:root {
    --brand: #FF6A2F;
    --accent: #FF6A2F;
    --ground: #0E0E0E;
    --surface: #1A1A1A;
    --surface-2: #262626;
    --header-bg: #1F1F1F;
    --header-text: #F2F2F2;
    --fg: #F2F2F2;
    --entry-text: #FF8A57;
    --grid-line: #333333;
    --muted: #4A4A4A;
    --muted-fg: #9A9A9A;
    --danger: #E5675A;
    --ok: #4CC2A3;
    --warn: #E0A64A;
}

html body,
html button,
html input,
html select,
html textarea {
    font-family: var(--font);
}

html body {
    background: var(--ground);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

html h1, html h2, html h3 {
    font-family: var(--font-display);
    letter-spacing: 0.01em;
    font-weight: 800;
}
html h1 { text-transform: uppercase; }

/* Карточки и строки списков: белая поверхность с тонкой рамкой */
html .menu-btn,
html .participant-row,
html .card,
html .dash-chip,
html .dash-details,
html .mode-choice-card,
html .panel {
    background: var(--surface);
    border: 1px solid var(--grid-line);
    border-radius: var(--radius);
}
html .dash-chip.active,
html .mode-choice-card:hover { border-color: var(--accent); }

html .menu-btn { font-weight: 700; border-width: 2px; display: flex; align-items: center; gap: 12px; }
html .menu-btn .icon {
    width: 36px; height: 36px; margin: 0; flex: none;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
}
html .menu-btn .icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Главная кнопка действия */
html .menu-btn-primary,
html .btn:not(.btn-secondary):not(.btn-text):not(.danger) {
    background: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
}
html .menu-btn-primary .icon { background: rgba(255,255,255,0.18); color: #FFFFFF; }

html .btn { border-radius: var(--radius); font-weight: 600; }
html .btn-secondary { border-radius: var(--radius); }

html .back-link {
    background: var(--surface-2);
    color: var(--fg);
    border-radius: 12px;
    font-weight: 600;
}

html input[type="text"], html input[type="number"], html input[type="tel"],
html input[type="date"], html input[type="search"], html input[type="password"],
html input:not([type]), html select, html textarea {
    background: var(--surface);
    color: var(--fg);
    border-color: var(--grid-line);
    border-radius: 12px;
}

html .badge-danger { color: var(--danger); }
html .status { color: var(--muted-fg); }

/* Нижняя панель вкладок */
html #tabbar {
    background: #111111;
    border-top: 1px solid #111111;
}
html #tabbar button { color: #8B8B8B; font-weight: 700; }
html #tabbar button.active { color: var(--accent); }

/* Шапка главного экрана */
.brand-head { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; }
.brand-mark {
    width: 34px; height: 34px; border-radius: 10px; background: var(--accent);
    display: flex; align-items: center; justify-content: center; flex: none;
}
.brand-mark svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--fg); }

/* Крупные цифры на плашках сводки — как «Спорт» во Flutter */
html .dash-chip { border: 2px solid var(--fg); }
html .dash-chip.active { border-color: var(--accent); }
html .dash-chip-value {
    font-family: var(--font-display); font-weight: 800; font-size: 26px;
}

/* Главное меню плитками («Спорт»): главная кнопка — во всю ширину
   сверху, остальные разделы — по две в ряд. Только #menu на index.html. */
html #menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
html #menu .menu-btn {
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 92px;
    padding: 14px;
    font-size: 14px;
    line-height: 1.2;
    text-align: left;
}
html #menu .menu-btn .icon {
    width: auto; height: auto;
    background: transparent;
    font-size: 26px;
    color: var(--accent);
}
html #menu .menu-btn .icon svg { width: 26px; height: 26px; }
html #menu .menu-btn-primary {
    grid-column: 1 / -1;
    order: -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 74px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
html #menu .menu-btn-primary .icon { color: #FFFFFF; background: transparent; }
html #menu .menu-btn-primary .icon svg { width: 30px; height: 30px; }