/* ============================================================================
   Скин «Портал РТ (зелёный)» — CSS поверх базового style.css.
   Радикально меняет оформление (шапка с картинкой+градиентом, меню-плитки, крупные
   заголовки/кнопки, тёмно-зелёный футер), НЕ трогая разметку и функционал.
   Тёмная тема учтена полностью через переменные поверхностей (--rt-surface и т.п.):
   в обеих темах фон и текст берутся из этих переменных — белого-на-белом нет.
   ============================================================================ */

/* --- Переменные скина: светлая тема --- */
:root {
    --rt-green: #1a8a4b;
    --rt-green-dark: #0f5a30;
    --rt-red: #d21f28;
    --rt-gold: #c79a3a;
    --rt-surface: #ffffff;        /* карточки, плитки, шапка */
    --rt-surface-2: #f4f9f5;      /* лёгкий фон, ховеры */
    --rt-page: #eef6f0;           /* фон страницы */
    --rt-text: #133a23;
    --rt-text-muted: #566860;
    --rt-border: #dde7e0;
    --rt-border-strong: #b9d0c1;   /* видимая рамка вокруг имён разделов/шапки */
    --rt-badge-bg: #e6f4ec;
    --rt-hero-grad: linear-gradient(120deg, #e3f3ea 0%, #ffffff 62%);
    --rt-footer-bg: #0f5a30;
}

/* --- Переменные скина: тёмная тема (обязательно, иначе белое-на-белом) --- */
:root[data-theme="dark"] {
    --rt-green: #33b56d;
    --rt-green-dark: #12351f;
    --rt-red: #e5565a;
    --rt-gold: #d3ab54;
    --rt-surface: #17231b;
    --rt-surface-2: #101a13;
    --rt-page: #0c130e;
    --rt-text: #e8f1ea;
    --rt-text-muted: #a3b6aa;
    --rt-border: #273a2e;
    --rt-border-strong: #3c5647;   /* видимая рамка в тёмной теме */
    --rt-badge-bg: #16311f;
    --rt-hero-grad: linear-gradient(120deg, #12251a 0%, #0c130e 62%);
    --rt-footer-bg: #0a1e12;
}

/* --- Пробрасываем в базовые токены (в обоих режимах; селектор-список выигрывает
       у базового :root[data-theme="dark"] по порядку загрузки при равной специфичности) --- */
:root,
:root[data-theme="dark"] {
    --color-cream-paper: var(--rt-surface);
    --color-forest-ink: var(--rt-text);
    --color-pencil-gray: var(--rt-border);
    --color-whisper-gray: var(--rt-surface-2);
    --color-muted-text: var(--rt-text-muted);
    --color-terracotta: var(--rt-green);
    --color-on-accent: #ffffff;
    --shadow-subtle: rgba(16, 60, 32, 0.06) 0 1px 2px 0;
    --shadow-subtle-2: rgba(16, 60, 32, 0.14) 0 10px 28px -8px, rgba(16, 60, 32, 0.08) 0 2px 6px -2px;
}

body { background: var(--rt-page); }

/* ---------- Шапка: как в базовом виде (плавающая карточка с рамкой), в цветах темы.
   Структуру base .site-nav-wrap/.site-nav не трогаем — задаём только видимую рамку. ---------- */
.site-nav { border-color: var(--rt-border-strong); }
.nav-links { gap: 20px; font-size: 15px; }
.nav-links a:hover { color: var(--rt-green); }
.nav-auth .btn { border-radius: var(--radius-full); padding: 9px 18px; }

/* ---------- Меню «Разделы»: базовый вид (колонки), рамка только вокруг всей панели ---------- */
.site-subnav { border-color: var(--rt-border-strong); }
.site-subnav-links a {
    border-radius: 8px;
    margin-bottom: 4px;
}
.site-subnav-links a:hover {
    color: var(--rt-green);
    background: var(--rt-surface-2);
    text-decoration: none;
}

/* ---------- Кнопки ---------- */
.btn { border-radius: var(--radius-full); font-weight: 600; }
.btn-primary { background: var(--rt-green); color: #fff; border: 1px solid var(--rt-green); }
.btn-primary:hover { background: var(--rt-green-dark); border-color: var(--rt-green-dark); }
.btn-outline { border: 1px solid var(--rt-green); color: var(--rt-green); background: transparent; }
.btn-outline:hover { background: var(--rt-green); color: #fff; }

/* ---------- Hero: по ширине контента сайта, градиент + картинка (заменяемая в админке) ---------- */
.hero {
    position: relative;
    text-align: left;
    /* Раньше блок был full-bleed (width:100vw + left:50% + translateX). Это давало
       на главной горизонтальную прокрутку: 100vw считается ВМЕСТЕ с шириной
       вертикального скроллбара, то есть блок всегда шире видимой области на
       ~8–17px. Теперь блок просто занимает ширину контейнера — как шапка и
       плитки разделов, — и прокрутке взяться неоткуда. */
    max-width: none;                             /* базовый .hero имеет max-width:720px — снимаем */
    /* Отрицательные поля гасят боковой padding .container (24px) так, чтобы блок
       встал ровно по шапке: у неё .site-nav-wrap с padding 16px и .site-nav с
       max-width 1200. На широком экране это даёт те же 1200px, что и у шапки. */
    margin: 20px -24px 24px;
    padding: 56px 40px;
    /* Раз блок больше не край-в-край, ему идёт та же скруглённая рамка, что у
       шапки и карточек разделов, вместо линий сверху и снизу. */
    border: 1px solid var(--rt-border-strong);
    border-radius: 18px;
    overflow: hidden;
    /* Базовый .hero — flex-колонка с align-items:center, из-за чего бейдж,
       заголовок и лид центрировались каждый по своей ширине вперемешку с
       text-align:left. Прижимаем всё к левому краю. */
    align-items: flex-start;
    background-color: var(--rt-surface);
    /* картинку можно заменить в админке (--rt-hero-image), иначе — иллюстрация скина */
    background-image: var(--rt-hero-image, url(assets/hero.svg)), var(--rt-hero-grad);
    background-repeat: no-repeat, no-repeat;
    /* right center, а не right bottom: картинка держится по центру правой части
       блока и остаётся центрированной, как бы блок ни растягивался. */
    background-position: right center, center;
    background-size: 40% auto, cover;
}
.hero .badge {
    background: var(--rt-badge-bg);
    color: var(--rt-green);
    border: 1px solid var(--rt-green);
}
.hero-heading { justify-content: flex-start; }
.hero-mark { display: none; }
.hero h1 { font-size: clamp(34px, 5vw, 60px); }
.hero p { max-width: 58%; font-size: 18px; color: var(--rt-text-muted); }
.mark { background: transparent; color: var(--rt-green); padding: 0; }

/* Пока контейнер уже 1200px, его боковой padding 24px нужно гасить не полностью,
   а до отступа шапки (16px) — иначе блок упрётся в края экрана, а шапка нет. */
@media (max-width: 1231px) {
    .hero { margin-left: -8px; margin-right: -8px; }
}

@media (max-width: 720px) {
    .hero { padding: 36px 24px; background-size: 0 0, cover; }  /* на мобиле картинку прячем */
    .hero p { max-width: 100%; }
}

/* ---------- Плитки разделов на главной ---------- */
.section-card {
    background: var(--rt-surface);
    border: 1px solid var(--rt-border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(16, 60, 32, 0.06);
}
.section-card:hover { border-color: var(--rt-green); box-shadow: 0 12px 30px rgba(16, 60, 32, 0.12); }
.section-card .icon { color: var(--rt-green); }
.section-card-title { color: var(--rt-text); }

/* ---------- Карточки/таблицы/алерты — на поверхностях (тёмная тема безопасна) ---------- */
.card,
.table,
.stat-card,
.wallet-card,
.admin-sidebar {
    background: var(--rt-surface);
}
.wallet-card { border-left-color: var(--rt-green); }
.badge { background: var(--rt-badge-bg); color: var(--rt-green); border: 1px solid var(--rt-green); }
.pill-active { background: var(--rt-badge-bg); color: var(--rt-green); }
.pill-place { background: var(--rt-gold); color: #3a2c05; }
.txn-plus { color: var(--rt-green); }

/* Заголовки — плотнее и крупнее для «институционального» вида */
h1 { letter-spacing: 0.01em; }
.section-heading h2 { color: var(--rt-text); }

/* ---------- Футер: тёмно-зелёный ---------- */
.site-footer {
    background: var(--rt-footer-bg);
    border-top: none;
    color: #cfe3d5;
}
.site-footer .footer-grid h3 { color: #ffffff; }
.site-footer a, .site-footer p { color: #cfe3d5; }
.site-footer a:hover { color: #ffffff; }
.footer-legal, .footer-copyright { color: #a9c6b3; }

/* ---------- Админка ---------- */
.admin-sidebar a.active { background: var(--rt-green); color: #fff; }
.stat-card .value { color: var(--rt-green); }