/* --- Глобальные переменные и стили --- */
:root { /* Теперь здесь стили для СВЕТЛОЙ темы по умолчанию */ --color-bg: #F5F7FA; --color-card: #FFFFFF; --color-text: #12141D; --color-text-muted: #555; --color-accent-blue: #007BFF; --color-trusted-green: #0DC273; --color-scam-red: #FF0033; --font-main: 'Inter', sans-serif; --font-mono: 'Roboto Mono', monospace; --logo-invert: 0; --switcher-text-color: #555; --header-bg: rgba(255, 255, 255, 0.8); --border-color: #e0e0e0; }
body.dark-theme { /* А здесь переопределения для ТЕМНОЙ темы */ --color-bg: #12141D; --color-card: #1B1E2B; --color-text: #EAEAEA; --color-text-muted: #888; --logo-invert: 1; --switcher-text-color: #e9e9e9; --header-bg: rgba(27, 30, 43, 0.8); --border-color: #333; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-main); line-height: 1.6; transition: background-color 0.3s, color 0.3s; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.section { padding: 60px 0; }
a { color: var(--color-accent-blue); text-decoration: none; }

/* --- Шапка --- */
.site-header { background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); padding: 5px 0; position: sticky; top: 0; z-index: 100; transition: background-color 0.3s, border-color 0.3s; }
.site-header .container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 24px; font-weight: 900; }
.logo img { height: 90px; display: block; filter: invert(var(--logo-invert)); transition: filter 0.3s; }
.header-controls { display: flex; align-items: center; }
.main-nav a { margin-left: 20px; font-weight: 500; color: var(--color-text); }

/* --- Стили для переключателя темы --- */
.theme-switcher { display: flex; align-items: center; cursor: pointer; margin-left: 30px; }
.switcher-text { margin-right: 10px; font-weight: 500; font-size: 14px; color: var(--switcher-text-color); transition: color 0.3s; }
.theme-switcher input { display: none; }
.slider { position: relative; width: 50px; height: 26px; background-color: var(--color-card); border: 1px solid var(--border-color); border-radius: 13px; transition: background-color 0.3s; }
.slider::before { content: ''; position: absolute; top: 2px; left: 3px; width: 20px; height: 20px; background-color: var(--color-text-muted); border-radius: 50%; transition: transform 0.3s, background-color 0.3s; }
.theme-switcher input:checked + .slider { background-color: #333; border-color: #333; }
.theme-switcher input:checked + .slider::before { transform: translateX(23px); background-color: #fff; }

/* --- Стили для переключателя языков --- */
.lang-switcher { display: flex; align-items: center; margin-right: 20px; }
.lang-switcher a { font-weight: bold; color: var(--color-text-muted); text-decoration: none; padding: 5px 8px; border-radius: 4px; transition: background-color 0.2s, color 0.2s; text-transform: uppercase; }
.lang-switcher a:not(:last-child) { margin-right: 5px; }
.lang-switcher a.active { background-color: var(--color-accent-blue); color: #fff; }
.lang-switcher a:hover:not(.active) { background-color: var(--color-card); }

/* --- Главный экран --- */
.hero { text-align: center; padding: 100px 0; }
.hero h1 { font-size: 52px; font-weight: 900; }
.hero .subtitle { font-size: 20px; color: var(--color-text-muted); margin-top: 10px; }
.search-bar { margin-top: 40px; display: flex; max-width: 600px; margin-left: auto; margin-right: auto; }
.search-bar input { flex-grow: 1; padding: 15px; border: 1px solid var(--border-color); background: var(--color-card); color: var(--color-text); font-size: 16px; border-radius: 5px 0 0 5px; }
.search-bar button { padding: 15px 30px; border: none; background: var(--color-accent-blue); color: #fff; font-size: 16px; font-weight: bold; cursor: pointer; border-radius: 0 5px 5px 0; }

/* --- Секции с карточками --- */
.dual-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.section-title { font-size: 28px; margin-bottom: 20px; border-left: 4px solid; padding-left: 15px; }
.danger-title { border-color: var(--color-scam-red); }
.trusted-title { border-color: var(--color-trusted-green); }

/* --- Карточка брокера --- */
.broker-card { display: block; background: var(--color-card); padding: 20px; border-radius: 8px; margin-bottom: 20px; transition: transform 0.2s, box-shadow 0.2s; border: 1px solid var(--border-color); box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.broker-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.card-header { display: flex; align-items: center; margin-bottom: 15px; }
.broker-logo { width: 40px; height: 40px; margin-right: 15px; }
.broker-card h3 { font-size: 20px; color: var(--color-text); }
.broker-card p { color: var(--color-text-muted); }
.trust-score { margin-top: 15px; font-family: var(--font-mono); }
.trust-score strong { font-size: 22px; }
.score-scam { color: var(--color-scam-red); }
.score-trusted { color: var(--color-trusted-green); }

/* --- Стили для виджета TRUST SCORE --- */
.profile-main-info { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-bottom: 40px; }
.profile-details ul { list-style: none; }
.profile-details li { padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.profile-score-wrapper { display: flex; justify-content: center; align-items: center; }
.profile-score-svg-container { position: relative; width: 200px; height: 200px; }
.score-svg { width: 100%; height: 100%; }
.score-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.score-value { font-size: 56px; font-weight: bold; font-family: var(--font-mono); }
.score-label { color: var(--color-text-muted); }
.score-svg circle { fill: none; stroke-width: 10; }
.score-bg { stroke: var(--border-color); }
.score-progress { transform-origin: center; transform: rotate(-90deg); }

/* --- Остальные стили страницы брокера --- */
.broker-profile { background: var(--color-card); padding: 40px; border-radius: 8px; border: 1px solid var(--border-color); }
.profile-verdict { padding: 20px; text-align: center; font-size: 24px; font-weight: bold; border-radius: 5px; margin-bottom: 30px; }
.profile-verdict.verdict-scam { background: var(--color-scam-red); color: #fff; }
.profile-verdict.verdict-trusted { background: var(--color-trusted-green); color: #fff; }
.score-value.verdict-scam { color: var(--color-scam-red); }
.score-value.verdict-trusted { color: var(--color-trusted-green); }
.score-progress.verdict-scam { stroke: var(--color-scam-red); }
.score-progress.verdict-trusted { stroke: var(--color-trusted-green); }
.profile-header { text-align: center; margin-bottom: 40px; }
.profile-logo { width: 80px; height: 80px; margin-bottom: 20px; }
.profile-review { line-height: 1.8; }
.profile-review h3 { margin-top: 20px; }
.profile-review ul { list-style-position: inside; padding-left: 20px; margin-bottom: 15px;}
.profile-review li { margin-bottom: 10px; }

/* --- CTA Кнопки --- */
.cta-block, .cta-block-scam { margin-top: 40px; padding: 30px; border-radius: 8px; text-align: center; }
.cta-block { background-color: var(--color-bg); border: 1px solid var(--border-color); }
.cta-block-scam { background-color: rgba(255, 0, 51, 0.05); border: 1px solid var(--color-scam-red); }
.cta-block p, .cta-block-scam p { margin-top: 10px; color: var(--color-text-muted); }
.cta-button { display: inline-block; background: var(--color-trusted-green); color: #fff; padding: 15px 30px; font-size: 18px; font-weight: bold; border-radius: 5px; text-align: center; }
.cta-button-scam { display: inline-block; background: var(--color-scam-red); color: #fff; padding: 15px 30px; font-size: 18px; font-weight: bold; border-radius: 5px; text-align: center; }

/* --- Стили для статей --- */
.articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.article-card { background: var(--color-card); border-radius: 8px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; border: 1px solid var(--border-color); box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.article-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.article-card-img { width: 100%; height: 200px; object-fit: cover; }
.article-card-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.article-card-content h3 { font-size: 18px; margin-bottom: 10px; }
.article-card-content p { color: var(--color-text-muted); flex-grow: 1; }
.read-more { margin-top: 15px; color: var(--color-accent-blue); font-weight: bold; }

/* --- Стили для страницы статьи --- */
.article-content .article-image { width: 100%; max-height: 400px; object-fit: cover; border-radius: 8px; margin-bottom: 30px; }
.article-meta { color: var(--color-text-muted); margin-bottom: 20px; }
.article-body h2 { margin-top: 30px; margin-bottom: 15px; }
.article-body p { margin-bottom: 15px; line-height: 1.8; }

/* --- Стили для отзывов --- */
.profile-reviews-section { margin-top: 50px; border-top: 1px solid var(--border-color); padding-top: 30px; }
.review-card { background: var(--color-bg); padding: 20px; border-radius: 5px; border: 1px solid var(--border-color); margin-bottom: 20px; }
.review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.review-author { font-weight: bold; }
.review-date { font-size: 14px; color: var(--color-text-muted); }
.review-rating .star { font-size: 20px; color: #ccc; }
.review-rating .star.filled { color: #f39c12; }
.review-text { margin-top: 10px; }

/* --- Подвал --- */
.site-footer { border-top: 1px solid var(--border-color); margin-top: 60px; padding: 30px 0; text-align: center; color: var(--color-text-muted); }
.site-footer p { margin-bottom: 5px; }
.site-footer a { color: var(--color-text-muted); text-decoration: underline; }
.site-footer a:hover { color: var(--color-accent-blue); }

/* --- Стили для страницы рейтинга --- */
.page-header { text-align: center; margin-bottom: 40px; }
.page-header h1 { font-size: 42px; margin-bottom: 10px; }
.ratings-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.ratings-table th, .ratings-table td { padding: 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
.ratings-table thead th { font-weight: bold; color: var(--color-text-muted); background-color: var(--color-card); }
.ratings-table tbody tr { transition: background-color 0.2s; }
.ratings-table tbody tr:hover { background-color: var(--color-card); }
.broker-cell { display: flex; align-items: center; }
.broker-logo-table { width: 32px; height: 32px; margin-right: 15px; }
.status-label { padding: 5px 10px; border-radius: 15px; font-size: 12px; font-weight: bold; color: #fff; text-transform: uppercase; }
.status-trusted { background-color: var(--color-trusted-green); }
.status-scam { background-color: var(--color-scam-red); }
.details-btn { background-color: var(--color-accent-blue); color: #fff; padding: 8px 15px; border-radius: 5px; font-weight: bold; font-size: 14px; text-align: center; transition: opacity 0.2s; }
.details-btn:hover { opacity: 0.85; }

/* --- Стили для страницы Черного списка --- */
.blacklist-table thead th { background-color: rgba(255, 0, 51, 0.05); border-bottom: 2px solid var(--color-scam-red); }
.blacklist-table tbody tr:hover { background-color: rgba(255, 0, 51, 0.03); }
.reason-cell { color: var(--color-scam-red); }
.blacklist-table .details-btn { background-color: var(--color-scam-red); }

/* --- Стили для страницы жалобы --- */
.complaint-form { max-width: 700px; margin: 0 auto; background: var(--color-card); padding: 30px; border-radius: 8px; border: 1px solid var(--border-color); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-control { width: 100%; padding: 12px; font-size: 16px; border-radius: 5px; border: 1px solid var(--border-color); background-color: var(--color-bg); color: var(--color-text); }
textarea.form-control { resize: vertical; }
.form-success, .form-error { text-align: center; padding: 20px; border-radius: 5px; margin: 0 auto 30px auto; max-width: 700px; }
.form-success { background-color: rgba(13, 194, 115, 0.1); border: 1px solid var(--color-trusted-green); color: var(--color-trusted-green); }
.form-error { background-color: rgba(255, 0, 51, 0.1); border: 1px solid var(--color-scam-red); color: var(--color-scam-red); }

/* --- Стили для кнопки "Смотреть больше" --- */
.more-btn { display: block; width: 100%; text-align: center; padding: 15px; margin-top: 10px; font-weight: bold; font-size: 16px; color: var(--color-text); background-color: var(--color-card); border: 1px solid var(--border-color); border-radius: 8px; transition: background-color 0.2s, color 0.2s; }
.more-btn:hover { background-color: var(--color-accent-blue); border-color: var(--color-accent-blue); color: #fff; }

/* 
==============================================
--- МОБИЛЬНАЯ АДАПТАЦИЯ (ФИНАЛЬНАЯ ВЕРСИЯ) ---
==============================================
*/

/* Изначально скрываем бургер-меню на десктопе */
.burger-menu {
    display: none;
}

/* Планшеты (до 1024px) */
@media (max-width: 1024px) {
    .dual-section, .profile-main-info {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .profile-score-wrapper {
        margin-top: 30px;
    }
    .ratings-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Мобильные устройства (до 768px) */
@media (max-width: 768px) {
    body.no-scroll {
        overflow: hidden;
    }
    body {
        overflow-x: hidden;
    }
    .section {
        padding: 40px 0;
    }
    .container {
        width: 95%;
    }
    .logo img {
        height: 60px;
    }
    .site-header .container {
        height: 70px;
    }
    
    /* Скрываем десктопное меню, показываем бургер */
    .header-controls {
        display: none;
    }
    .burger-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 28px;
        height: 22px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001;
    }
    .burger-menu span {
        width: 100%;
        height: 3px;
        background-color: var(--color-text);
        border-radius: 2px;
        transition: all 0.3s ease-in-out;
        transform-origin: center;
    }
    .burger-menu.active span:nth-child(1) {
        transform: translateY(9.5px) rotate(45deg);
    }
    .burger-menu.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px);
    }
    .burger-menu.active span:nth-child(3) {
        transform: translateY(-9.5px) rotate(-45deg);
    }

    /* Логика выезжающего меню */
    .header-controls.active {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: var(--color-bg);
        padding-top: 50px;
        transform: translateX(0);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
        overflow-y: auto;
    }
    .header-controls.active .main-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        order: 2;
    }
    .header-controls.active .main-nav a {
        margin: 0 0 30px 0;
        font-size: 24px;
    }
    .header-controls.active .theme-switcher {
        display: flex;
        margin-top: 30px;
        margin-left: 0;
        order: 3;
    }
    .header-controls.active .lang-switcher {
        order: 1;
        margin-bottom: 40px;
        margin-right: 0;
    }
    .header-controls.active .switcher-text {
        display: inline;
    }

    /* Адаптация остальных блоков */
    .hero {
        padding: 60px 0;
    }
    .hero h1, .page-header h1 {
        font-size: 32px;
        line-height: 1.2;
    }
    .hero .subtitle {
        font-size: 16px;
    }
    .search-bar {
        flex-direction: column;
    }
    .search-bar input, .search-bar button {
        border-radius: 5px;
        width: 100%;
    }
    .search-bar button {
        margin-top: 10px;
    }
    .broker-profile {
        padding: 20px;
    }
    .dual-section {
        grid-template-columns: 1fr;
    }
    .profile-score-svg-container {
        width: 180px;
        height: 180px;
    }
    .score-value {
        font-size: 48px;
    }
}