@charset "UTF-8";
/* putya: "на каких-то страницах шапки нет, на каких-то кнопки старые поверх шапки" — сервер отдаёт
   text/css без charset, и без явного @charset браузер в некоторых случаях брал не UTF-8 для этого
   файла, из-за чего внутри кириллического комментария ломался разбор CSS и первое правило
   (.cw-page-header) целиком выпадало из стиля — воспроизведено и подтверждено через
   document.styleSheets[...].cssRules. @charset должен быть первым байтом файла, до любых
   комментариев. Остальной текст ниже — тот же общий header+ряд вкладок, вынесенный из
   color-wheel.css, чтобы не дублировать на каждой странице; подключается вторым тегом <link>
   после основного styles.css/global.css той страницы. */

/* putya: "шапка должна быть темносиняя как и основная секция" — #16213a это var(--surface-color)
   из styles.css, тот же фон, что у .main-container, а не верх градиента body (#1a237e, был
   слишком синим/другим оттенком). Full-bleed (без max-width) — раньше ряд иконок был по центру в
   900px-колонке, теперь сама шапка-плашка тянется на весь экран. Отступ сверху ~90px — под
   системную область Telegram WebApp (кнопка закрытия/свайп). Без border-bottom (была временная
   попытка вернуть границу) — шапка того же цвета, что верх main-container, и должна стыковаться
   с ним без видимого шва (см. main{background:#0a1020} ниже), а не отделяться линией. */
.cw-page-header {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; box-sizing: border-box;
    padding: 90px 16px 14px; gap: 10px; position: relative; z-index: 20;
    background: #16213a; box-shadow: none; border-radius: 0;
}
/* На главной (../index.html) .cw-page-header — это сам тег <header>, а не div, поэтому старое
   правило "body.tg-fullscreen header { padding-top: 25px; }" (styles.css, специфичность
   класс+тег) перебивает наш padding-top:90px (специфичность только класс). Явный оверрайд с двумя
   классами специфичнее в любом порядке подключения файлов. */
body.tg-fullscreen .cw-page-header { padding-top: 90px; }

/* putya: "меньше отступ от этой шапки у секции" — main{padding-top:100px} в styles.css рассчитан
   на старую схему (header.safe-area-gradient абсолютно позиционирован НАД main, поэтому main сам
   резервировал место). Теперь .cw-page-header — обычный блок в потоке, который уже занимает своё
   место (90px+иконки+14px), и старые 100px у main добавлялись СВЕРХУ ЭТОГО. padding-top:0 (не
   1rem) — иначе в этом промежутке проглядывал фон body (градиент #1a237e→#0a1020), другого
   оттенка, чем шапка/main-container (#16213a) — заметный шов. !important — у themes.css и
   gift-page.css тот же main{padding-top:100px} уже объявлен с !important, обычная специфичность
   (даже с ID) его не перебивает. Оверрайд только для страниц с этой шапкой — на
   NonUnique/nonunique.html (единственная страница на styles.css без неё) старая схема остаётся
   как была.
   putya: "отступа нет от основной секции" (скрин с широким экраном) — .main-container сам по
   себе max-width:900-950px и центрируется, а <main> вокруг него прозрачный, поэтому по бокам
   просвечивал фон body — несовпадающий оттенок. Первая попытка (main тем же #16213a, что у
   шапки/main-container) убрала шов, но заодно и саму карточку — "нет синей подложки которая
   раньше была"/"будто секции нет вообще", потому что шапка (на всю ширину) и main-container
   (узкая колонка) сливались в одно плоское пятно без единой границы. #0a1020 — var(--bg-color),
   низ градиента body, темнее шапки/main-container.
   putya: "нет отступа у фрейма от шапки и нет синего на фоне... посмотри как раньше было" —
   реальная причина: padding-top:0 держал карточку впритык к шапке СВЕРХУ, в то время как по
   бокам (на широком) или через border (везде) от неё есть отступ/рамка — так карточка "парит" с
   отступом только с 3 сторон из 4, и синяя рамка не читается как рамка ЦЕЛОЙ карточки. Теперь что
   padding-top:0 больше не нужен как раньше (тогда убирал шов от НЕСОВПАДАЮЩЕГО цвета — #1a237e из
   body); раз main теперь свой, ПОДХОДЯЩИЙ тёмный фон (#0a1020), можно вернуть настоящий отступ
   сверху тем же цветом — карточка "плавает" на тёмном фоне с равным отступом со всех 4 сторон,
   как обычная card-based вёрстка. */
header.cw-page-header ~ main,
#cw-admin-nav ~ main {
    padding-top: 20px !important;
    background: #0a1020;
}
/* putya: "убери нахуй обводку на main-container и добавь эффект на фоне что идет синее свечение
   от него, как и было раньше" — синяя рамка (предыдущая правка) убрана; синее свечение — это уже
   существующие .glow-effect (styles.css), которые лежат ВНУТРИ .main-container и обрезаются его
   overflow:hidden. Правка их видимости — в color-wheel.css (main-container.overflow:visible),
   единственная страница, где эти div'ы вообще есть в разметке. */
.cw-header-group { display: flex; align-items: center; gap: 8px; }
.cw-header-link {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 40px; border-radius: 12px; flex: 0 0 auto;
    transition: transform .15s ease, filter .15s ease;
}
.cw-header-link svg { width: 20px; height: 20px; }
.cw-header-link:hover { transform: translateY(-2px); filter: brightness(1.2); }
.cw-header-link-gh { background: rgba(255, 255, 255, .1); color: #e5e7eb; }
.cw-header-link-api { background: rgba(16, 185, 129, .16); color: #34d399; }
/* putya: "на шапка оставь только апи (подпиши что это апи)" — TG-канал убран из статичных ссылок,
   у API теперь виден текст рядом с иконкой (раньше только title на hover), ширина auto вместо
   фиксированных 46px под квадратную иконку. */
.cw-header-link-labeled {
    width: auto; padding: 0 14px 0 12px; gap: 6px; font-size: 13px; font-weight: 700;
    text-decoration: none;
}

/* putya: "кнопка с главным экраном должна быть по центру" — Главная стоит третьей из пяти в
   разметке каждой страницы (см. HTML), тут только визуальное оформление ряда. "нет отступа у
   кнопок сверху" — добавлен margin-top. */
.cw-tabs {
    display: flex; flex-wrap: wrap; gap: 8px; width: 100%;
    max-width: 900px; margin: 10px auto 0;
}
.cw-tab {
    flex: 1 1 140px; min-width: 110px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--surface-elevated); border: 1px solid transparent; border-radius: 14px;
    padding: 12px 10px; text-decoration: none; text-align: center;
    color: var(--text-secondary); font-size: 13px; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cw-tab img { width: 26px; height: 26px; object-fit: contain; border-radius: 7px; flex: 0 0 auto; }
.cw-tab svg { width: 20px; height: 20px; flex: 0 0 auto; }
.cw-tab:hover { transform: translateY(-2px); background: #263355; color: var(--text-primary); }
.cw-tab.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, .35), rgba(37, 99, 235, .12));
    border-color: rgba(37, 99, 235, .5); color: #fff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .25);
}

/* putya: "теперь кнопки вверх уехали, а не на блоке" — #cw-admin-nav (шапка) и #cw-admin-tabs
   (вкладки) теперь два отдельных контейнера в разных местах разметки: шапка — прямой потомок body
   рядом с safe-area-gradient (как .cw-page-header на color-wheel.html, не задевает padding-top:100px
   у main), вкладки — первый элемент внутри .main-container, на самой карточке. Один и тот же класс
   скрытия/показа вешается на оба, поэтому селектор не завязан на конкретный id. */
.cw-admin-nav-hidden { display: none; }

/* putya: "на тематиках и монохромах все еще нет отступов по бокам" — на этих страницах
   .main-container сам без padding (padding:0, см. background-finder.css/themes.css — там весь
   отступ дают только внутренние секции типа .content-wrapper), а #cw-admin-tabs — первый элемент
   прямо в main-container, поэтому .cw-tabs с max-width:900px = ширине контейнера упирался ровно в
   её края. На ColorWheel/color-wheel.html такой проблемы нет — там .main-container has padding.
   Даём такой же боковой отступ, что и .content-wrapper на этих двух страницах (1.5rem). */
#cw-admin-tabs { padding: 0 1.5rem; }

/* putya: "в сжатом режиме сделай чтобы снизу была кнопка не поиск по цветам, а главная" — на
   десктопе (широкий ряд) Главная и так по центру за счёт порядка в HTML; при переносе строк на
   узких экранах явно переставляем её в конец, чтобы одна снизу оставалась именно Главная. */
@media (max-width: 600px) {
    .cw-tab[data-tab="home"] { order: 5; }
    .cw-tab[data-tab="search"] { order: 3; }
}