/* ============================================================
   Дизайн «Astryx» — минималистичный нейтральный стиль в духе темы Neutral
   дизайн-системы Astryx от Meta: белые/почти чёрные поверхности,
   монохромный акцент, тонкие рамки, скругления 10–12px, шрифт Inter.
   Сама библиотека Astryx (React + StyleX) здесь не подключается —
   это CSS-скин на переменных сайта.
   Включается: <html data-design="astryx">; тёмная тема — data-theme="dark".
   ============================================================ */

:root[data-design="astryx"] {
    --bg-primary: #fafafa;
    --bg-secondary: #ffffff;
    --text-primary: #0a0a0a;
    --text-secondary: #737373;
    --text-inverse: #fafafa;
    --accent-primary: #171717;
    --accent-secondary: #262626;
    --accent-hover: #404040;
    --accent-like: #e11d48;
    --accent-repost: #16a34a;
    --link-color: #0a0a0a;
    --link-color-hover: #404040;
    --border-color: #e5e5e5;
    --border-subtle: #efefef;
    --block-bg: #ffffff;
    --modal-bg: #ffffff;
    --block-bg-secondary: #f5f5f5;
    --block-hover-bg: rgba(0, 0, 0, .04);
    --bg-hover: rgba(0, 0, 0, .045);
    --bg-active: rgba(0, 0, 0, .08);
    --tab-active-bg: rgba(0, 0, 0, .06);
    --settings-tab-active-bg: rgba(0, 0, 0, .06);
    --toggle-active-bg: #171717;
    --btn-primary-bg: #171717;
    --btn-primary-text: #fafafa;
    --glass-bg: rgba(255, 255, 255, .88);
    --chatWindow: #f5f5f5;
    --bubble-in-bg: #ffffff;
    --bubble-in-text: #0a0a0a;
    --bubble-out-bg: #171717;
    --bubble-out-text: #fafafa;
    --bubble-out-link: #e5e5e5;
    --bubble-out-soft: rgba(255, 255, 255, .18);
    --poll-progress-color: rgba(0, 0, 0, .07);
    --poll-selected-progress-color: #171717;
    --poll-inverted-text: #fafafa;
    --shadow-elevated: 0 1px 2px rgba(0, 0, 0, .05);
    --kit-nav-glass-bg: rgba(255, 255, 255, .8);
    --radius-sm: 6px;
    --radius-md: 10px;
}

:root[data-design="astryx"][data-theme="dark"] {
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --text-primary: #fafafa;
    --text-secondary: #a3a3a3;
    --text-inverse: #0a0a0a;
    --accent-primary: #fafafa;
    --accent-secondary: #e5e5e5;
    --accent-hover: #d4d4d4;
    --accent-like: #fb7185;
    --accent-repost: #4ade80;
    --link-color: #fafafa;
    --link-color-hover: #d4d4d4;
    --border-color: rgba(255, 255, 255, .11);
    --border-subtle: rgba(255, 255, 255, .06);
    --block-bg: #141414;
    --modal-bg: #171717;
    --block-bg-secondary: #1c1c1c;
    --block-hover-bg: rgba(255, 255, 255, .06);
    --bg-hover: rgba(255, 255, 255, .06);
    --bg-active: rgba(255, 255, 255, .11);
    --tab-active-bg: rgba(255, 255, 255, .09);
    --settings-tab-active-bg: rgba(255, 255, 255, .09);
    --toggle-active-bg: #fafafa;
    --btn-primary-bg: #fafafa;
    --btn-primary-text: #0a0a0a;
    --glass-bg: rgba(20, 20, 20, .88);
    --chatWindow: #050505;
    --bubble-in-bg: #1c1c1c;
    --bubble-in-text: #fafafa;
    --bubble-out-bg: #fafafa;
    --bubble-out-text: #0a0a0a;
    --bubble-out-link: #404040;
    --bubble-out-soft: rgba(0, 0, 0, .14);
    --poll-progress-color: rgba(255, 255, 255, .1);
    --poll-selected-progress-color: #fafafa;
    --poll-inverted-text: #0a0a0a;
    --shadow-elevated: 0 4px 16px rgba(0, 0, 0, .45);
    --kit-nav-glass-bg: rgba(20, 20, 20, .8);
}

:root[data-design="astryx"] body {
    font-family: 'Inter', 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    letter-spacing: -0.005em;
}

/* Карточки и окна: плоские, тонкая рамка */
:root[data-design="astryx"] .settings-section,
:root[data-design="astryx"] .settings-row,
:root[data-design="astryx"] .modal,
:root[data-design="astryx"] .post-card,
:root[data-design="astryx"] .card {
    border-radius: 12px;
    box-shadow: var(--shadow-elevated);
}
:root[data-design="astryx"] .modal { border: 1px solid var(--border-color); }

/* Кнопки: основная — чёрная/белая, остальные — контурные */
:root[data-design="astryx"] .btn { border-radius: 10px; font-weight: 500; }
:root[data-design="astryx"] .btn-accent,
:root[data-design="astryx"] .btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
:root[data-design="astryx"] .btn-accent:not(:disabled):hover,
:root[data-design="astryx"] .btn-primary:not(:disabled):hover {
    background: var(--accent-hover);
    color: var(--btn-primary-text);
}
:root[data-design="astryx"] .btn-secondary {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
:root[data-design="astryx"] .btn-secondary:not(:disabled):hover { background: var(--bg-hover); }
:root[data-design="astryx"] .design-btn.on,
:root[data-design="astryx"] .icon-set-btn.on,
:root[data-design="astryx"] .icon-style-btn.on {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
}

/* Поля ввода */
:root[data-design="astryx"] .input {
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
:root[data-design="astryx"] .input:focus {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-primary) 12%, transparent);
    outline: none;
}

/* Сайдбар: светлая панель с рамкой, активный пункт — мягкая плашка */
:root[data-design="astryx"] .sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
}
:root[data-design="astryx"] .sidebar .nav-item { border-radius: 10px; border-color: transparent; }
:root[data-design="astryx"] .sidebar .nav-item:hover { border-color: transparent; background: var(--bg-hover); }
:root[data-design="astryx"] .sidebar .nav-item.active {
    background: var(--bg-active);
    color: var(--text-primary);
    font-weight: 600;
    border-color: transparent;
}
:root[data-design="astryx"] .sidebar .sidebar-more-menu { background: transparent; }
:root[data-design="astryx"] .nav-item .nav-badge.nav-wallet-balance {
    background: var(--bg-active) !important;
    color: var(--text-primary) !important;
}