/* ==========================================================================
   ШРИФТЫ (все лежат локально в assets/fonts)
   Onest — основной текст (OFL, Google Fonts), Unbounded — заголовки, JetBrains Mono — код
   ========================================================================== */
@font-face {
    font-family: 'Onest';
    src: url('../assets/fonts/Onest-Cyrillic.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Onest';
    src: url('../assets/fonts/Onest-LatinExt.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Onest';
    src: url('../assets/fonts/Onest-Latin.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Unbounded';
    src: url('../assets/fonts/Unbounded-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   ДИЗАЙН-ТОКЕНЫ (стиль «как у Aurorix»: почти чёрный фон, тонкие рамки, синий акцент)
   Старые имена (--bg-color, --panel-bg, --accent-color …) оставлены: на них держится весь сайт.
   Новые правила пиши через токены, а не через цвета напрямую.
   ========================================================================== */
:root {
    --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-head: 'Unbounded', 'Onest', sans-serif;
    --font-code: 'JetBrains Mono', Consolas, monospace;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 15px;

    --header-h: 72px;
    --container-w: 1600px;

    --success: #22c55e;
    --danger: #ef4444;
    --warning: #eab308;
    --danger-soft: rgba(239, 68, 68, 0.15);
    --warning-soft: rgba(234, 179, 8, 0.15);
    --success-soft: rgba(34, 197, 94, 0.15);
}

:root[data-theme="dark"] {
    --bg-color: #050505;                /* фон страницы */
    --panel-bg: #0a0a0a;                /* карточки, панели */
    --surface-2: #121212;               /* поля ввода, вложенные блоки */
    --surface-hover: #171717;
    --border-color: #1f1f1f;
    --border-strong: #2a2a2a;           /* рамка контурных кнопок */
    --text-color: #f5f5f5;
    --text-muted: #8a8a8f;
    --text-faint: #55555a;

    /* Акцент синий. Фиолетовый как у Aurorix: 139,98,255 / #8b62ff / #7d50ff / текст #a586ff */
    --accent-rgb: 77, 124, 255;
    --accent-color: #4d7cff;
    --accent-hover: #3d6af0;
    --accent-text: #7fa2ff;             /* акцентный текст на тёмной подложке */
    --accent-soft: rgba(77, 124, 255, 0.14);
    --accent-soft-border: rgba(77, 124, 255, 0.38);
    --on-accent: #ffffff;

    --header-bg: rgba(5, 5, 5, 0.82);
    --section-bg: #080808;              /* фон полос «преимущества» и «тарифы» */
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

/* Светлая тема: тот же характер на белом, акцент чуть темнее — иначе акцентный текст плохо читается */
:root[data-theme="light"] {
    --bg-color: #ffffff;
    --panel-bg: #f7f7f9;
    --surface-2: #efeff3;
    --surface-hover: #e9e9ef;
    --border-color: #e6e6eb;
    --border-strong: #d6d6de;
    --text-color: #111114;
    --text-muted: #6b6b76;
    --text-faint: #a3a3ad;

    /* Фиолетовый вариант: 124,77,255 / #7c4dff / #6a3af0 */
    --accent-rgb: 47, 96, 255;
    --accent-color: #2f60ff;
    --accent-hover: #2350e6;
    --accent-text: #2350e6;
    --accent-soft: rgba(47, 96, 255, 0.10);
    --accent-soft-border: rgba(47, 96, 255, 0.32);
    --on-accent: #ffffff;

    --header-bg: rgba(255, 255, 255, 0.85);
    --section-bg: #fafafa;
    --shadow: 0 8px 30px rgba(17, 17, 20, 0.08);
    color-scheme: light;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    background-color: var(--bg-color);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

::selection {
    background: rgba(var(--accent-rgb), 0.35);
}

/* ==========================================================================
   ШАПКА: логотип и пункты с иконками слева, справа тема, язык и кнопка профиля
   ========================================================================== */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}

.header-container {
    max-width: var(--container-w);
    height: var(--header-h);
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.nav-left, .nav-right {
    display: flex;
    align-items: center;
}
.nav-left { gap: 8px; min-width: 0; }
.nav-right { gap: 10px; flex-shrink: 0; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 24px;
}

/* Пункт меню: серая линейная иконка + текст, без подложки */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-link:hover {
    color: var(--text-color);
}
.nav-link.active {
    color: var(--text-color);
}
.nav-link.active .nav-svg {
    color: var(--accent-color);
}

.nav-svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Квадратные кнопки справа (тема, язык) */
.header-square-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--panel-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.header-square-btn:hover {
    color: var(--text-color);
    border-color: var(--border-strong);
    background-color: var(--surface-2);
}

/* Переключатель темы: чекбокс спрятан, видна иконка солнца или луны */
.theme-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
.theme-toggle:focus-within {
    outline: 2px solid var(--accent-soft-border);
    outline-offset: 2px;
}

.lang-switcher { padding: 0; }
.flag-icon {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
    transition: opacity 0.2s ease;
}

/* Кнопка профиля: акцентная подложка и акцентный ник */
.header-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    max-width: 220px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background-color: var(--accent-soft);
    color: var(--accent-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.header-profile-btn:hover,
.header-profile-btn.active {
    border-color: var(--accent-soft-border);
}
.header-profile-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Узкие экраны: у пунктов меню остаются только иконки */
@media (max-width: 1100px) {
    .header-container { padding: 0 16px; gap: 12px; }
    .nav-links { margin-left: 8px; gap: 0; }
    .nav-link span { display: none; }
    .nav-link { padding: 0 12px; }
}
@media (max-width: 560px) {
    .header-profile-btn span { display: none; }
    .header-profile-btn { padding: 0 13px; }
    .nav-right { gap: 6px; }
    .header-square-btn { width: 40px; height: 40px; }
    .nav-link { padding: 0 9px; }
}

/* --- СТИЛИ ГЛАВНОЙ СТРАНИЦЫ (HERO SECTION) --- */

/* ==========================================================================
   ГЛАВНАЯ: первый экран (заголовок + окно кода) и карточки преимуществ
   ========================================================================== */
.hero-section {
    padding: 140px 0 80px;
    min-height: 80vh;
    display: flex;
    align-items: center;
    /* лёгкое свечение акцентом за первым экраном */
    background: radial-gradient(800px 420px at 85% 40%, rgba(var(--accent-rgb), 0.10), transparent 70%);
}

.hero-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    gap: 56px;
    align-items: center;
    justify-content: space-between;
}

.hero-content {
    flex: 1;
    max-width: 560px;
}

/* Плашка над заголовком */
.hero-badge {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-text);
    margin-bottom: 22px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.hero-title {
    font-family: var(--font-head);
    font-size: 44px;
    line-height: 1.15;
    font-weight: bold;
    letter-spacing: -1px;
    color: var(--text-color);
    margin-bottom: 20px;
}

/* Вторая строка заголовка — акцентным цветом (как у Aurorix) */
.gradient-text {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-text));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 32px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-sell-link {
    display: inline-block;
    margin-top: 20px;
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.hero-sell-link:hover { color: var(--accent-text); }

/* Кнопки сайта: основная — заливка акцентом, вторичная — контурная тёмная */
.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-primary {
    background-color: var(--accent-color);
    color: var(--on-accent);
}
.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: var(--panel-bg);
    border-color: var(--border-strong);
    color: var(--text-color);
}
.btn-secondary:hover {
    background-color: var(--surface-2);
    border-color: var(--text-faint);
}

/* Окно кода справа (всегда тёмное) */
.hero-visual {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.code-mockup {
    width: 100%;
    max-width: 460px;
    background-color: #0c0c0e;
    border: 1px solid #222226;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.06);
    overflow: hidden;
}

.mockup-header {
    background-color: #111114;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #222226;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.dot.red { background-color: #ff5f56; }
.dot.yellow { background-color: #ffbd2e; }
.dot.green { background-color: #27c93f; }

.mockup-title {
    font-family: var(--font-code);
    font-size: 12px;
    color: #8a8a8f;
    margin-left: 10px;
}

.mockup-body {
    padding: 22px;
    font-family: var(--font-code);
    font-size: 13px;
    line-height: 1.7;
    color: #d4d4d8;
    overflow-x: auto;
}

/* Подсветка синтаксиса в окне кода */
.keyword { color: #ff7b72; }
.function { color: #d2a8ff; }
.title { color: #d2a8ff; }
.string { color: #a5d6ff; }
.comment { color: #6b6b75; }

/* --- Преимущества: 4 карточки --- */
.features-section {
    padding: 64px 0;
    border-top: 1px solid var(--border-color);
    background-color: var(--section-bg);
}

.features-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-card {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    padding: 24px;
    border-radius: var(--radius-lg);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
}

.feature-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: var(--radius-md);
    background-color: var(--accent-soft);
    color: var(--accent-text);
}
.feature-icon .nav-svg { width: 22px; height: 22px; }

.feature-card h3 {
    font-family: var(--font-head);
    font-size: 16px;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
    color: var(--text-color);
}

.feature-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-muted);
}

@media (max-width: 1000px) {
    .hero-container { flex-direction: column; align-items: stretch; gap: 40px; padding: 0 16px; }
    .hero-visual { justify-content: flex-start; }
    .hero-title { font-size: 34px; }
    .features-grid { grid-template-columns: repeat(2, 1fr); padding: 0 16px; }
}
@media (max-width: 560px) {
    .hero-section { padding-top: 110px; }
    .hero-title { font-size: 28px; }
    .features-grid { grid-template-columns: 1fr; }
}

/* Класс для плавного исчезновения контента при смене языка */
main, section, .hero-section, .features-section {
    transition: opacity 0.35s ease-in-out;
    opacity: 1;
}

/* Когда этот класс активен, контент станет полностью невидимым */
.page-fade-out {
    opacity: 0 !important;
}

/* --- МАГАЗИН (редизайн, шаг 4): заголовок с лимитами, секции, карточки кода как карточки тарифов /hosting --- */
.shop-section {
    padding: 32px 0 80px;
    background-color: var(--bg-color);
}

/* Страница «Создать» по-прежнему использует .shop-container */
.shop-container {
    padding: 0 25%;
}

.shop-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.shop-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.shop-head .page-title { text-align: left; }

/* Остаток открытий — две пилюли справа от заголовка */
.shop-limits { display: flex; flex-wrap: wrap; gap: 8px; }
.limit-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--panel-bg);
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: default;
}
.limit-chip .nav-svg { width: 16px; height: 16px; color: var(--accent-text); }
.limit-chip b {
    font-family: var(--font-head);
    font-size: 14px;
    color: var(--text-color);
    min-width: 1ch;
}

/* Заголовки секций «Просмотрено ранее» / «Все проекты» */
.shop-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
}
.shop-section-title .nav-svg { width: 18px; height: 18px; color: var(--accent-text); }
.shop-count {
    padding: 2px 9px;
    border-radius: 999px;
    background-color: var(--surface-2);
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
}
.shop-count:empty { display: none; }
.main-shop-catalog-zone > .shop-section-title { margin-bottom: 18px; }

/* Заголовок каталога + кнопка сортировки справа */
.shop-catalog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.catalog-sort { position: relative; }
.catalog-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--panel-bg);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.catalog-sort-btn:hover { background-color: var(--surface-hover); }
.catalog-sort.open .catalog-sort-btn { border-color: var(--accent-soft-border); background-color: var(--accent-soft); }
.catalog-sort-btn .nav-svg { width: 16px; height: 16px; color: var(--text-muted); }
.catalog-sort-btn .sort-caret { width: 14px; height: 14px; transition: transform 0.2s; }
.catalog-sort.open .sort-caret { transform: rotate(180deg); }
.catalog-sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 210px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--panel-bg);
    box-shadow: var(--shadow);
    display: none;
}
.catalog-sort.open .catalog-sort-menu { display: block; }
.sort-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.sort-option:hover { background-color: var(--surface-hover); }
.sort-option.active { color: var(--accent-text); }
.sort-option .sort-check { width: 15px; height: 15px; visibility: hidden; }
.sort-option.active .sort-check { visibility: visible; }
@media (max-width: 600px) {
    .catalog-sort-menu { right: auto; left: 0; }
}

.section-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
    color: var(--text-color);
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.shop-empty {
    grid-column: 1 / -1;
    padding: 48px 0;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}

/* Карточка кода */
.code-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--panel-bg);
    text-align: left;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.code-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-3px);
}

.card-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.card-langs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tag-pill.lang-pill { padding: 4px 10px; font-size: 11px; }
.tag-pill.lang-pill::before { background-color: var(--dot, var(--accent-color)); }
.tag-pill.lang-pill.lang-more::before { display: none; }
.tag-pill.card-flag { flex-shrink: 0; padding: 4px 10px; font-size: 11px; }

.card-title {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-color);
    /* длинные названия — не больше двух строк */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}
.card-meta .nav-svg { width: 14px; height: 14px; }

/* Окно превью: размытая картинка кода */
.card-preview-box {
    position: relative;
    height: 170px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: #0d1117;
}

/* Заглушка под картинкой (у старых проектов её может не быть) */
.lock-overlay-mode {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock-blur-bg {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, #161b22, #161b22 10px, #0d1117 10px, #0d1117 20px);
    opacity: 0.4;
}

.card-preview-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08); /* края размытой картинки темнее — прячем их за рамкой */
    pointer-events: none;
    transition: transform 0.4s ease;
}
.code-card:hover .card-preview-img { transform: scale(1.14); }
/* снизу картинка темнеет — кнопка и рамка читаются на любом коде */
.card-preview-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(5, 5, 5, 0.15), rgba(5, 5, 5, 0.55));
    pointer-events: none;
}

/* Кнопка «Получить доступ» поверх превью: стекло + акцентная рамка, справа — что спишется */
.btn-get-access {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--accent-soft-border);
    border-radius: var(--radius-sm);
    background-color: rgba(10, 10, 12, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font: 600 14px var(--font-body);
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-get-access .nav-svg { width: 16px; height: 16px; color: var(--accent-text); }
.btn-get-access-cost {
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}
.btn-get-access:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45);
}
.btn-get-access:hover .nav-svg,
.btn-get-access:hover .btn-get-access-cost { color: #ffffff; }

/* Карточка в ленте «Просмотрено ранее» — уже и ниже */
.code-card-compact {
    flex: 0 0 290px;
    gap: 12px;
    padding: 16px;
}
.code-card-compact .card-title { font-size: 15px; }
.code-card-compact .card-preview-box { height: 96px; }

/* Эффект затухания открытого кода */
.code-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, rgba(22, 27, 34, 0) 0%, #161b22 100%);
    pointer-events: none;
}

/* Скрытый режим (перечеркнутый глаз) */
.eye-hidden-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--border-color);
    border: 1px dashed var(--text-muted);
}

:root[data-theme="dark"] .eye-hidden-mode {
    background-color: #161b22;
    border: 1px dashed #30363d;
}

.eye-crossed-icon {
    width: 48px;
    height: 48px;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

/* Футер карточки */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 36px;
}

/* Оценка звёздами и продавец в футере карточки */
.rating { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rating-stars { display: inline-flex; gap: 1px; font-size: 16px; line-height: 1; }
.rating-star { position: relative; color: var(--text-faint); }
.rating-star-fill {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    color: #facc15;
    white-space: nowrap;
}
.rating-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.card-author {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    color: var(--text-muted);
}
.card-author span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.card-author .nav-svg { width: 15px; height: 15px; flex-shrink: 0; }

.card-price {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-color);
}

.price-type {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: normal;
}

.btn-card-action {
    background-color: var(--accent-color);
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-card-action:hover {
    opacity: 0.9;
}

/* Кнопка «Открыть снова» в «Просмотрено ранее» — контурная, как вторичные кнопки Aurorix */
.btn-reopen {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: var(--surface-2);
    color: var(--text-color);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font: 600 13px var(--font-body);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.btn-reopen .nav-svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    transition: transform 0.4s ease;
}
.btn-reopen-cost {
    margin-left: auto;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 12px;
}
.btn-reopen:hover {
    border-color: var(--accent-soft-border);
    background: var(--accent-soft);
    color: var(--accent-text);
}
.btn-reopen:hover .nav-svg { transform: rotate(180deg); }

/* Всплывающие уведомления внизу экрана (showToast в app.js) */
.toast-box {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 5000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
    width: calc(100% - 32px);
    max-width: 460px;
}
.toast {
    padding: 12px 16px;
    background: var(--panel-bg);
    color: var(--text-color);
    border: 1px solid var(--accent-soft-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    font: 500 14px var(--font-body);
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   🛠️ ИСПРАВЛЕНО: УБРАН ХАРДКОД !IMPORTANT, БЛОКИРОВАВШИЙ ВЫЛЕТ ОКНА ГИТХАБА
   ========================================================================== */
.app-page {
    display: none; /* Убрали !important, теперь JS может свободно управлять видимостью страниц */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.app-page.active {
    display: block;
    opacity: 1;
}

.site-logo {
    font-size: 20px;
    font-weight: bold;
    color: var(--accent-color) !important;
    margin-right: 15px;
}

/* Исправленный класс анимации смены языка */
#pages-wrapper {
    transition: opacity 0.35s ease-in-out;
    opacity: 1;
}
.page-fade-out {
    opacity: 0 !important;
}

/* --- СТИЛИ ДЛЯ ЛИЧНОГО КАБИНЕТА --- */
.profile-section {
    padding-top: 120px;
    padding-bottom: 60px;
}

.profile-tab-content {
    display: none;
}

.profile-tab-content.active {
    display: block;
}

/* Инпуты */
.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.custom-input {
    padding: 12px;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 8px;
    font-size: 14px;
}

.input-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* Финансы карточки */
.balance-card {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.balance-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--accent-color);
}

.finance-actions {
    display: flex;
    gap: 12px;
    margin: 20px 0;
}

.btn-finance {
    flex: 1;
    text-align: center;
}

.withdraw-box-card {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.history-block {
    margin-top: 30px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.empty-history {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 10px;
}

/* --- СТИЛИ ДЛЯ ОКНА АВТОРИЗАЦИИ --- */
.auth-card-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    padding-top: 40px;
}

.auth-card {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.auth-logo {
    font-size: 48px;
    margin-bottom: 16px;
}

.auth-card h2 {
    font-size: 24px;
    margin-bottom: 12px;
    color: var(--text-color);
}

.auth-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 24px;
}

/* Контейнер капчи Яндекса */
#captcha-container {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

/* Кнопка входа через Google */
.btn-google-auth {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px;
    background-color: #ffffff;
    color: #1e2229;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-google-auth:hover:not([disabled]) {
    background-color: #f8fafc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Состояние, когда кнопка заблокирована капчей */
.btn-google-auth:disabled {
    background-color: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
    border-color: transparent;
}

.google-icon {
    width: 20px;
    height: 20px;
}

.auth-footer-text {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 20px;
    line-height: 1.4;
}

/* Центрирование виджета Cloudflare Turnstile внутри карточки входа */
.captcha-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
}
.captcha-box:empty { margin-top: 0; }


/* --- ПОДКЛЮЧЕНИЕ НОВЫХ СТИЛЬНЫХ ШРИФТОВ --- */
@font-face {
    font-family: 'JetBrains Mono Bold';
    src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}


/* ==========================================================================
   🍏 УЛЬТИМАТИВНЫЙ ИНЖЕНЕРНЫЙ iOS LIQUID GLASSMORPHISM (150% РЕАЛИЗМА)
   ========================================================================== */

.search-container-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 40px;
    position: relative;
}

.search-bar-wrapper {
    position: relative;
    width: 50%; /* Ровно 1/2 горизонтали экрана по ТЗ */
    height: 50px;
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    display: flex;
    align-items: center;
    padding: 0 25px;
    overflow: hidden; /* Жестко зажимает пузырь и капли внутри границ по ТЗ */
    /* Изменения размеров пузыря внутри бара не пересчитывают раскладку остальной страницы (меньше лагов) */
    contain: layout paint;
    transition: border-color 0.3s;
}

/* Центрирование текста и кракозябр по центру бара */
.search-input.text-center {
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    outline: none;
    text-align: center; /* Текст строго по центру по ТЗ */
    font-family: 'JetBrains Mono Bold', monospace;
    font-size: 16px;
    color: var(--text-color);
    letter-spacing: 2px;
}
.search-input.text-center::placeholder {
    color: var(--text-color);
    opacity: 1;
    transition: opacity 0.2s ease;
}
.search-input.text-center:focus::placeholder {
    opacity: 0;
}

/* --- СИНХРОНИЗИРОВАННЫЕ ИКОНКИ ПОИСКА (БЕЗ ТЕЛЕПОРТАЦИИ) --- */

/* Контейнер статической лупы */
.search-icon-zone {
    position: absolute;
    left: 20px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    /* Убираем лишние transition, чтобы JS полностью контролировал движение */
}

/* Статическая лупа ЖЕСТКО скрыта до момента приземления летящей по ТЗ */
.icon-static {
    width: 20px;
    height: 20px;
    opacity: 0 !important; /* Намертво гасим, пока идет полет */
    transition: opacity 0.2s ease; /* Плавное проявление за 0.2с по ТЗ */
}

/* Этот класс навесит JS строго в миллисекунду удара */
.icon-static.visible {
    opacity: 0.8 !important;
}

/* Летящая лупа во время анимации */
.icon-flying {
    position: absolute; /* внутри .search-container-box — прокручивается вместе с баром поиска */
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    z-index: 950; /* под шапкой сайта (.main-header — 1000), над магазином */
    opacity: 0;
    pointer-events: none;
    transform-origin: center center;
}

/* Запуск полета: offset-path сгенерирует JavaScript динамически */
.icon-flying.fly-active {
    opacity: 1;
    animation: flyCurveDynamic 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes flyCurveDynamic {
    0% { offset-distance: 0%; transform: scale(1) rotate(0deg); }
    70% { transform: scale(1.15) rotate(25deg); } /* Мягкое заваливание на бок по Curve */
    100% { offset-distance: 100%; transform: scale(1) rotate(0deg); }
}

/* ==========================================================================
   🍏 ИСПРАВЛЕННЫЙ АДАПТИВНЫЙ iOS LIQUID GLASSMORPHISM (БЕЗ КОНФЛИКТА ТЕМ)
   ========================================================================== */

/* Базовый стеклянный овал-пузырь звуковой волны */
.glass-wave-pulse {
    position: absolute;
    left: 20px; /* Рождается в точке удара слева */
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translateY(-50%) scale(0); /* Раздувается из нуля во все стороны */
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transform-origin: center center;
    
    /* Ультра-размытие матового стекла */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    /* ☀️ ДЕФОЛТНЫЙ ЦВЕТ (СВЕТЛАЯ ТЕМА): Благородное графитовое Apple-стекло */
    background: radial-gradient(circle at 35% 35%, 
        rgba(30, 34, 41, 0.28) 0%, 
        rgba(30, 34, 41, 0.1) 50%, 
        rgba(0, 0, 0, 0) 100%
    );
    border: 2px solid rgba(30, 34, 41, 0.35);
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.08),
        0 0 20px rgba(30, 34, 41, 0.05),
        inset 0 0 15px rgba(30, 34, 41, 0.15),
        inset -4px -4px 12px rgba(0, 0, 0, 0.03),
        inset 4px 4px 12px rgba(255, 255, 255, 0.5);
    
    /* Мягкий переход цвета при клике на ползунок темы */
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* 🌙 УМНОЕ ИЗМЕНЕНИЕ ЦВЕТА ДЛЯ ТЕМНОЙ ТЕМЫ (БЕЗ ТРОГАНЬЯ АНИМАЦИИ) */
:root[data-theme="dark"] .glass-wave-pulse {
    /* Меняем только заливку и тени на неоновые белые, анимация при этом НЕ ломается! */
    background: radial-gradient(circle at 35% 35%, 
        rgba(255, 255, 255, 0.25) 0%, 
        rgba(255, 255, 255, 0.05) 50%, 
        rgba(0, 0, 0, 0) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(255, 255, 255, 0.08),
        inset 0 0 15px rgba(255, 255, 255, 0.25),
        inset -8px -8px 20px rgba(0, 0, 0, 0.3),
        inset 8px 8px 20px rgba(255, 255, 255, 0.1);
}

/* СТРОГО ЕДИНАЯ АНИМАЦИЯ НА 0.75 СЕКУНДЫ ДЛЯ ОБЕИХ ТЕМ — ВЫЗЫВАЕТСЯ СТАБИЛЬНО */
.glass-wave-pulse.wave-blur-active {
    animation: expandIosGlassBubble 0.75s cubic-bezier(0.15, 0.85, 0.2, 1) forwards;
}

@keyframes expandIosGlassBubble {
    0% { 
        transform: translateY(-50%) scale(0); 
        opacity: 0; 
        width: 40px; 
        height: 40px; 
    }
    12% { 
        opacity: 1; /* Вспышка в микросекунду удара лупы слева */
    }
    100% { 
        /* Пузырь мощно раздувается во все стороны, превращаясь в огромную 3D-сферу */
        transform: translateY(-50%) scale(1); 
        width: 145%; 
        height: 420%; 
        opacity: 0; 
        filter: blur(8px); /* Растворение в воздухе в конце тайминга 0.75с */
    }
}

/* Контейнер жидких метабол-частиц */
.liquid-metaball-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: transparent;
    filter: url(#ios-ultra-liquid-lens); /* Линза кривого зеркала сидит тут */
}

/* Двигающийся блик-метабол (14px) с переливающимся контуром */
.liquid-particle-blob {
    position: absolute;
    width: 14px; /* Жестко 14 пикселей диаметр по ТЗ */
    height: 14px;
    background-color: var(--panel-bg);
    border-radius: 50%;
    border: 2px solid url(#contour-gradient-flow);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.8), inset -1px -1px 3px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

/* Автоматическая идеальная перекраска черных луп под светлую и темную темы */
.icon-flying, .icon-static {
    filter: brightness(0) saturate(100%) invert(25%) sepia(5%) saturate(500%) contrast(90%);
}
:root[data-theme="dark"] .icon-flying,
:root[data-theme="dark"] .icon-static {
    filter: brightness(0) saturate(100%) invert(95%) sepia(3%) saturate(200%) contrast(95%);
}

/* --- СТИЛИ БЛОКА ТАРИФОВ И СРАВНИТЕЛЬНОЙ ТАБЛИЦЫ (ФИНАЛЬНЫЙ СИНХРОН ЦВЕТОВ) --- */

.tariffs-section {
    /* ИСПРАВЛЕНО: Заменили margin-top на padding-top, чтобы убрать темную полосу по ТЗ */
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 10%;
    padding-right: 10%;
    
    /* ИСПРАВЛЕНО: Полностью удалили border-top и border-bottom, чтобы стереть серенькую линию в 1пкс */
    border: none !important; 
    
    /* Тот же фон, что у блока преимуществ над ним (токен --section-bg) */
    background-color: var(--section-bg);
}

.tariffs-grid {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 30px;
}

.tariff-card {
    /* Фон карточек тарифов (Брендовый цвет Aurorix) */
    background-color: var(--panel-bg) !important;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 35px 24px;
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.tariff-card.featured {
    border-color: var(--accent-color) !important;
    box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.15);
    transform: scale(1.03);
}

.tariff-card:hover { transform: translateY(-5px); }
.tariff-card.featured:hover { transform: translateY(-5px) scale(1.03); }

/* Применяем широкий шрифт Unbounded на заголовки и кнопки */
.tariffs-section .section-title,
.tariff-badge,
.tariff-price,
.tariff-card .btn-primary {
    font-family: 'Unbounded', sans-serif !important;
}

.tariff-badge {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
}

.tariff-price {
    font-size: 26px;
    font-weight: 900;
    color: var(--text-color);
    margin-bottom: 20px;
}

.tariff-period {
    font-size: 14px;
    font-weight: normal;
    color: var(--text-muted);
}

.tariff-features {
    list-style: none;
    padding: 0; margin: 0 0 30px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.tariff-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

/* Выравнивание кнопок по одной линии по вертикали */
.tariff-card .btn-primary {
    margin-top: auto;
}

/* Стилизация SVG-иконок */
.tariff-ico {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(25%) sepia(5%) saturate(500%) contrast(90%);
    transition: filter 0.3s ease;
}

:root[data-theme="dark"] .tariff-ico {
    filter: brightness(0) saturate(100%) invert(95%) sepia(3%) saturate(200%) contrast(95%);
}



/* --- СТИЛИЗАЦИЯ МИНИМАЛИСТИЧНОЙ КНОПКИ ЗАГРУЗКИ (БЕЗ ПОДЛОЖКИ И БЕЗ КОНТУРА) --- */

.btn-create-submit-minimal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important; /* Намертво убираем синюю подложку */
    border: none !important;            /* НАМЕРТВО УБИРАЕМ КОНТУР И РАМКУ ПО ТЗ */
    outline: none !important;
    padding: 12px 10px;                 /* Сжали отступы, так как рамки больше нет */
    font-size: 15px;
    font-weight: bold;
    color: var(--text-muted);           /* Изначально кнопка аккуратная серая */
    cursor: pointer;
    transition: color 0.2s ease;
}

/* Эффект наведения: текст кнопки загорается фирменным неоновым цветом */
.btn-create-submit-minimal:hover {
    background: transparent !important;
    color: var(--accent-color) !important;
}

/* --- АВТОРЕГУЛИРОВКА ЦВЕТА КАРТИНКИ DOWNLOAD.SVG ПОД ТЕМЫ --- */
.btn-download-img-ico {
    /* В светлой теме делаем иконку download.svg аккуратной темно-серой */
    filter: brightness(0) saturate(100%) invert(25%) sepia(5%) saturate(500%) contrast(90%);
    transition: filter 0.2s ease;
}

:root[data-theme="dark"] .btn-download-img-ico {
    /* В темной теме инвертируем черную download.svg в белый цвет */
    filter: brightness(0) saturate(100%) invert(95%) sepia(3%) saturate(200%) contrast(95%);
}

/* При наведении иконка download.svg тоже плавно загорается цветом Aurorix */
.btn-create-submit-minimal:hover .btn-download-img-ico {
    filter: brightness(0) saturate(100%) invert(38%) sepia(74%) saturate(2453%) contrast(108%);
}

/* ==========================================================================
   🌌 ДИНАМИЧЕСКИЙ НЕОНОВЫЙ AI-ШЛЕЙФ ЛОГОТИПА (CHROME AI MODE STYLE)
   ========================================================================== */

.site-logo-ai-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    text-decoration: none;
    overflow: hidden; /* Зажимаем неоновое облако строго внутри границ логотипа */
    background: transparent;
    cursor: pointer;
}

/* Сам текст логотипа б.space */
.site-logo-text {
    font-family: 'Unbounded', sans-serif !important;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--text-color);
    z-index: 3; /* Текст жестко лежит ПОВЕРХ летящего неонового шлейфа */
    position: relative;
    transition: color 0.3s;
}

/* Жидкое неоновое облако градиента */
.ai-glow-shash {
    position: absolute;
    /* Координаты центра размытого круга будут жестко управляться из JS */
    left: var(--mouse-x, 50%);
    top: var(--mouse-y, 50%);
    transform: translate(-50%, -50%) scale(0); /* Изначально сжат в ноль */
    width: 65px; /* Физический диаметр неонового шлейфа вокруг мышки */
    height: 65px;
    
    /* Ультра-сочный спектральный AI градиент Google Chrome */
    background: radial-gradient(circle, 
        rgba(0, 255, 204, 0.7) 0%, 
        rgba(168, 85, 247, 0.5) 40%, 
        rgba(var(--accent-rgb), 0.3) 70%, 
        rgba(255, 255, 255, 0) 100%
    );
    
    /* Сильное размытие краев для создания эффекта парения и тумана */
    filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transform-origin: center center;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.1, 0.8, 0.2, 1);
}

/* ☀️ ЦВЕТОВАЯ КОРРЕКЦИЯ ПОД СВЕТЛУЮ ТЕМУ: делаем оттенки шлейфа мягче и пастельнее */
:root[data-theme="light"] .ai-glow-shash {
    background: radial-gradient(circle, 
        rgba(var(--accent-rgb), 0.4) 0%, 
        rgba(168, 85, 247, 0.3) 50%, 
        rgba(0, 255, 204, 0) 100%
    );
    filter: blur(10px);
}

/* Когда мышка заходит на логотип — активируем шлейф */
.site-logo-ai-wrapper:hover .ai-glow-shash {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3); /* Плавный взрывной вылет градиента из-под курсора */
}

/* Слегка подсвечиваем сам текст букв при наведении мыши */
.site-logo-ai-wrapper:hover .site-logo-text {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
:root[data-theme="light"] .site-logo-ai-wrapper:hover .site-logo-text {
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.1);
}

/* ==========================================================================
   ВХОД / РЕГИСТРАЦИЯ (стиль Aurorix): карточка слева, крупный заголовок справа,
   свечение фона, водяной знак внизу карточки, подвал под карточкой
   ========================================================================== */
.auth-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
    width: 100%;
    max-width: 1240px;
    min-height: calc(100vh - var(--header-h));
    margin: 0 auto;
    padding: 48px 32px;
    font-family: var(--font-body);
}
/* Лёгкое свечение акцентом под карточкой и за заголовком */
.auth-layout::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 45% 55% at 18% 85%, rgba(var(--accent-rgb), 0.16), transparent 70%),
        radial-gradient(ellipse 40% 45% at 80% 25%, rgba(var(--accent-rgb), 0.08), transparent 70%);
}
.auth-left { display: flex; flex-direction: column; width: 100%; }

.aurorix-auth-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 40px 48px 56px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--panel-bg);
    animation: aurorixFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.aurorix-auth-card > div:not(.auth-watermark) { position: relative; z-index: 1; }
@keyframes aurorixFadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.auth-card-logo {
    margin-bottom: 36px;
    text-align: center;
    font: 700 26px var(--font-head);
    letter-spacing: -1px;
    color: var(--text-color);
}
.auth-card-desc { margin-bottom: 20px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

/* Огромное блеклое слово внизу карточки */
.auth-watermark {
    position: absolute;
    left: 50%;
    bottom: -0.32em;
    transform: translateX(-50%);
    font: 700 112px var(--font-head);
    letter-spacing: -4px;
    white-space: nowrap;
    color: var(--text-color);
    opacity: 0.035;
    pointer-events: none;
    user-select: none;
}

/* Поля */
.aurorix-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
    width: 100%;
    text-align: left;
}
.aurorix-form-group label { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.auth-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.aurorix-input {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-color);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.aurorix-input::placeholder { color: var(--text-faint); }
.aurorix-input:focus {
    border-color: var(--accent-soft-border);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Поле почты со встроенной кнопкой «Код» */
.aurorix-input-with-btn-zone { display: flex; position: relative; width: 100%; }
.aurorix-input-with-btn-zone .aurorix-input { padding-right: 90px; }
.aurorix-btn-inline-send {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--accent-soft-border);
    border-radius: 6px;
    background-color: var(--accent-soft);
    font: 600 13px var(--font-body);
    color: var(--accent-text);
    cursor: pointer;
    transition: filter 0.2s;
}
.aurorix-btn-inline-send:hover:not(:disabled) { filter: brightness(1.2); }
.aurorix-btn-inline-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Кнопки: контурные с иконкой, вторая — акцентная (как «log in» / «Discord» у Aurorix) */
.auth-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 170px;
    height: 48px;
    padding: 0 24px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--panel-bg);
    font: 600 16px var(--font-body);
    color: var(--text-color);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.1s;
}
.auth-btn:hover { border-color: var(--text-faint); background: var(--surface-hover); }
.auth-btn:active { transform: scale(0.98); }
.auth-btn .nav-svg { width: 18px; height: 18px; }
.auth-btn-accent { color: var(--accent-text); border-color: var(--accent-soft-border); background: var(--accent-soft); }
.auth-btn-accent:hover { border-color: var(--accent-color); background: var(--accent-soft); filter: brightness(1.15); }
.auth-btn-wide { width: 100%; }

.auth-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
    font-size: 14px;
    color: var(--text-muted);
}
.auth-links-right { display: inline-flex; gap: 6px; }
.auth-link-strong { color: var(--accent-text) !important; }

.aurorix-link { font-size: 14px; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.aurorix-link:hover { color: var(--accent-text); }

/* Согласия */
.aurorix-legal-checkbox-wrapper { margin-top: 18px; width: 100%; text-align: left; }
.aurorix-legal-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.aurorix-custom-checkbox { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent-color); }
.legal-text-content { font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.legal-text-content a { font-size: 13px; color: var(--accent-text); text-decoration: none; }
.legal-text-content a:hover { text-decoration: underline; }

/* Подвал под карточкой */
.aurorix-auth-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 0 48px;
    font-size: 14px;
    color: var(--text-faint);
}
.aurorix-link-muted { color: var(--text-faint); text-decoration: none; }
.aurorix-link-muted:hover { color: var(--text-color); }

/* Крупный заголовок справа */
.auth-hero { align-self: center; }
.auth-hero-title {
    font: 700 clamp(34px, 4.2vw, 56px) / 1.15 var(--font-head);
    letter-spacing: -1px;
    color: var(--text-color);
    margin-bottom: 18px;
}
.auth-hero-accent { color: var(--accent-text); }
.auth-hero-back { font-size: 20px; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.auth-hero-back:hover { color: var(--text-color); }

@media (max-width: 960px) {
    .auth-layout { grid-template-columns: 1fr; gap: 28px; padding: 28px 16px; min-height: 0; }
    .auth-hero { order: -1; }
    .auth-hero-title { font-size: 30px; margin-bottom: 10px; }
    .auth-hero-back { font-size: 16px; }
}
@media (max-width: 520px) {
    .aurorix-auth-card { padding: 28px 20px 44px; }
    .auth-row-2 { grid-template-columns: 1fr; gap: 0; }
    .auth-btn { flex: 1; min-width: 0; }
    .auth-watermark { font-size: 72px; }
    .aurorix-auth-footer-bar { padding: 0 8px; }
}

/* Динамические таймеры подсказок */
.input-hint-timer {
    font-size: 12px;
    color: #ef4444;
    margin: 4px 0 0 0;
    text-align: left;
}

/* ==========================================================================
   🎛️ ИНТЕРАКТИВНЫЙ iOS TOGGLE SWITCH ДЛЯ 2FA ЗАЩИТЫ ПО ТЗ
   ========================================================================== */

.bspace-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}

/* Скрываем стандартный квадратный инпут */
.bspace-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Задняя подложка ползунка */
.bspace-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 34px;
}

:root[data-theme="light"] .bspace-slider {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Внутренний круглый белый шарик тумблера */
.bspace-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
}

/* Анимация: когда ползунок ВКЛЮЧЕН — красим подложку в наш синий неон */
.bspace-switch input:checked + .bspace-slider {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Анимация: перекатываем белый шарик в правый бок */
.bspace-switch input:checked + .bspace-slider:before {
    transform: translateX(20px);
}

/* ==========================================================================
   🌌 СТИЛИ ДЛЯ РАЗДВИЖНОЙ ШТОРКИ «ПРОСМОТРЕНО» С ЭФФЕКТОМ EASE-OUT
   ========================================================================== */

/* Контейнер шторки по умолчанию имеет высоту в 1 карточку */
.viewed-drawer-dock {
    width: 100%;
    position: relative;
    z-index: 100;
    transition: all 0.45s cubic-bezier(0.25, 0.8, 0.25, 1); /* Наш плавный ease-out в конце */
}

/* Класс, который JS накинет при развёртывании шторки на весь экран */
.viewed-drawer-dock.expanded {
    position: fixed;
    top: 70px; /* Сразу под нашим фиксированным хедером */
    left: 0;
    width: 100%;
    height: calc(100vh - 70px); /* Растягиваем до самого низа экрана */
    background-color: var(--bg-color);
    padding: 40px 10% !important;
    overflow-y: auto; /* Разрешаем вертикальный скролл, если карточек много */
    z-index: 999; /* Перекрывает основной магазин */
}

/* Горизонтальный скролл-фид для карточек в свернутом режиме */
.viewed-cards-feed-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    transition: flex-wrap 0.3s ease;
}

/* Когда шторка развернута, превращаем горизонтальную ленту в обычную адаптивную сетку flex */
.viewed-drawer-dock.expanded .viewed-cards-feed-wrapper {
    display: flex;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 24px !important;
    padding-bottom: 100px; /* Отступ в пикселях от нижнего конца экрана по ТЗ */
}

/* Эффект затемнения и серения остальной страницы (основного магазина) */
.main-shop-catalog-zone {
    transition: opacity 0.4s ease, filter 0.4s ease;
}

/* Навешивается на каталог магазина, когда шторка открыта */
.main-shop-catalog-zone.dimmed {
    opacity: 0.15;
    filter: blur(4px) grayscale(80%); /* Страница сереет и размывается на фоне развернутой шторки */
    pointer-events: none; /* Запрещаем кликать по карточкам магазина сзади */
}

/* ==========================================================================
   🌌 ИСПРАВЛЕННЫЕ СТИЛИ РАЗДВИЖНОЙ ШТОРКИ (БЕЗ КОНФЛИКТОВ СЛОЕВ)
   ========================================================================== */

.viewed-drawer-dock {
    width: 100%;
    transition: all 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Когда шторка на весь экран */
.viewed-drawer-dock.expanded {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 70px) !important;
    background-color: var(--bg-color) !important;
    padding: 40px 10% !important;
    overflow-y: auto !important;
    z-index: 1400 !important; /* Выставляем поверх нижних блоков */
}

/* Разворачивание карточек в полноценную сетку */
.viewed-drawer-dock.expanded #viewed-cards-container {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 24px !important;
    padding-bottom: 100px !important; /* Фиксированные 100пкс от нижнего края по ТЗ */
}

/* Затемнение каталога за шторкой */
.main-shop-catalog-zone {
    transition: opacity 0.4s ease, filter 0.4s ease;
}
.main-shop-catalog-zone.dimmed {
    opacity: 0.15 !important;
    filter: blur(4px) grayscale(80%) !important;
    pointer-events: none !important;
}

/* ==========================================================================
   📦 УЛЬТИМАТИВНЫЕ СТИЛИ МИКРО-GITHUB РЕПОЗИТОРИЯ (JETBRAINS CORE)
   ========================================================================== */

/* Полноэкранный оверлей-проводник с плавным появлением за 0.3с по ТЗ */
.bspace-explorer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    animation: explorerFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes explorerFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Главное окно проводника репозитория */
.explorer-modal-content {
    background-color: var(--bg-color);
    width: 95vw;
    height: 85vh;
    max-width: 1400px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

/* Хедер проводника */
.explorer-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background-color: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
}

.explorer-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.explorer-repo-icon {
    font-size: 20px;
}

#explorer-project-name {
    margin: 0;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 15px;
    font-weight: bold;
    color: var(--text-color);
}

.explorer-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.explorer-close-x {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s;
}

.explorer-close-x:hover {
    color: #ef4444;
}

/* Рабочая зона: Сайдбар + Просмотрщик */
.explorer-body-wrapper {
    display: flex;
    flex: 1;
    width: 100%;
    overflow: hidden;
}

/* Сайдбар дерева файлов архива */
.explorer-sidebar-tree {
    flex: 0 0 280px;
    background-color: var(--panel-bg);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    padding: 20px 12px;
    text-align: left;
}

.tree-loading-placeholder {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    margin-top: 20px;
}

/* Элементы дерева гитхаба (Папки, Файлы) */
.tree-node-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.tree-node-item:hover {
    background-color: var(--border-color);
}

.tree-node-item.active-file {
    background-color: rgba(var(--accent-rgb), 0.15);
    color: var(--accent-color);
    font-weight: bold;
}

/* Правая панель: Редактор кода JetBrains Dark */
.explorer-code-viewer {
    flex: 1;
    background-color: #1e1e1e !important; /* Настоящая глубокая хакерская тема */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#file-status-bar {
    background-color: #1a1a1a;
    padding: 8px 20px;
    border-bottom: 1px solid #2d2d2d;
    text-align: left;
}

#active-open-filename {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #8b949e;
    font-weight: bold;
}

/* Рабочая сетка вывода кода */
.code-display-workspace {
    display: flex;
    flex: 1;
    overflow: auto;
}

/* Номера строк слева (Gutter) как в VS Code */
.code-lines-gutter {
    padding: 20px 12px;
    background-color: #1e1e1e;
    border-right: 1px solid #2d2d2d;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    line-height: 1.5;
    color: #555555; /* Приглушенные номера строк */
    user-select: none;
    min-width: 45px;
}

/* Контент текстового файла */
.code-text-content {
    flex: 1;
    padding: 20px;
    text-align: left;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    line-height: 1.5;
    color: #d4d4d4;
    white-space: pre;
    overflow: auto;
}

/* Стартовый экран-подсказка */
.explorer-prompt-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: #555555;
    gap: 12px;
}

.prompt-folder-ico {
    font-size: 48px;
}

.explorer-prompt-screen p {
    margin: 0;
    font-size: 14px;
}

.aurorix-auth-card-sub { width: 100%; }

/* ==========================================================================
   🛠️ ЖЕСТКИЙ ФИКС ПУСТОГО ОТСТУПА И СДВИГА СТРАНИЦ ПРОФИЛЯ И СОЗДАНИЯ
   ========================================================================== */

/* Гасим все неактивные страницы в ноль, чтобы они физически НЕ занимали место */
.app-page {
    display: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 🌟 Показываем ТОЛЬКО активную страницу строго под хедером (отступ ровно 70px) */
.app-page.active {
    display: block !important;
    padding-top: 90px !important; /* Ровный аккуратный отступ от фиксированного хедера */
    min-height: calc(100vh - 70px);
}

/* Убираем гигантские старые отступы из прошлых блоков, которые толкали контент вниз */
.profile-section,
#create-page.app-page,
#shop-page.app-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* ==========================================================================
   Окно «Упс!..» с тарифами (открывается, когда закончились открытия карточек)
   ========================================================================== */
.fullscreen-modal {
    position: fixed;
    inset: 0;
    z-index: 3500; /* выше проводника кода (3000) */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.fullscreen-modal .modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fullscreen-modal .modal-content {
    position: relative;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 50px 5% 40px;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fullscreen-modal.active .modal-overlay { opacity: 1; }
.fullscreen-modal.active .modal-content { transform: translateY(0); }

.fullscreen-modal .modal-close-btn {
    position: absolute;
    top: 18px;
    right: 24px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s;
}
.fullscreen-modal .modal-close-btn:hover { color: #ef4444; }

.fullscreen-modal .modal-close-btn .nav-svg { width: 20px; height: 20px; }

/* Содержимое «Упс!..»: слева причина и остаток, справа карточки тарифов */
.oops-sheet { background-color: var(--bg-color); border-top: 1px solid var(--border-color); }
.oops-sheet::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 300px at 15% 0%, rgba(var(--accent-rgb), 0.16), transparent 70%);
    pointer-events: none;
}
.oops-layout {
    position: relative;
    max-width: var(--container-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: 40px;
    align-items: start;
    text-align: left;
}
.oops-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid var(--accent-soft-border);
    border-radius: var(--radius-lg);
    background-color: var(--accent-soft);
    color: var(--accent-text);
}
.oops-icon .nav-svg { width: 28px; height: 28px; }
.oops-title { margin: 0 0 10px; font-family: var(--font-head); font-size: 48px; font-weight: 800; letter-spacing: -1.5px; color: var(--text-color); }
.oops-sub { margin: 0; font-size: 17px; line-height: 1.45; color: var(--text-muted); }
.oops-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.oops-stats .limit-chip b.is-zero { color: var(--danger); }
.oops-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-faint); }

.oops-plans-head { margin-bottom: 14px; }
.oops-plans-title { margin: 0 0 4px; font-family: var(--font-head); font-size: 18px; color: var(--text-color); }
.oops-plans-sub { margin: 0; font-size: 13px; color: var(--text-muted); }
/* Флекс, а не сетка: Corporative чуть шире, чтобы «29 999 ₽/мес» помещалось в одну строку */
.oops-plans { display: flex; flex-wrap: wrap; gap: 14px; }
.oops-plans .oops-plan { flex: 1 1 170px; min-width: 0; }
.oops-plans .oops-plan-corporative { flex: 1.35 1 220px; }
.oops-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--panel-bg);
    transition: border-color 0.2s, transform 0.2s;
}
.oops-plan:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.oops-plan.featured { border-color: var(--accent-soft-border); box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.15); }
/* Текущий тариф: рамка акцентом, надпись «Ваш тариф» — на кнопке */
.oops-plan.is-current { border-color: var(--accent-soft-border); background-color: var(--accent-soft); }
.oops-plan-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; min-height: 26px; }
.oops-plan-top .tag-pill { white-space: nowrap; font-size: 11px; }
.oops-plan-name { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text-color); }
.oops-plan-price { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: var(--text-color); white-space: nowrap; }
.oops-plan-price span { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--text-muted); }
.oops-plan-per { margin-top: -10px; font-size: 12px; color: var(--text-faint); }
.oops-plan-specs { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.oops-plan-specs li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.oops-plan-specs b { color: var(--text-color); }
.oops-plan-specs .nav-svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent-text); }
.oops-plan .btn-primary, .oops-plan .btn-secondary { width: 100%; justify-content: center; margin-top: auto; }

/* Узкий экран: всё друг под другом */
@media (max-width: 900px) {
    .oops-layout { grid-template-columns: 1fr; gap: 24px; }
    .oops-title { font-size: 36px; }
}
@media (max-width: 600px) {
    .fullscreen-modal .modal-content { padding: 44px 16px 28px; }
    .oops-plans { gap: 10px; }
    .oops-plans .oops-plan { flex: 1 1 calc(50% - 5px); }
    .oops-plans .oops-plan-corporative { flex-basis: 100%; }
    .oops-plan { padding: 16px 14px; }
    .oops-plan-price { font-size: 22px; }
}

/* ==========================================================================
   Аккаунт на рассмотрении (антифрод)
   ========================================================================== */
.pending-review-block { padding: 0 16px; }
.pending-review-card {
    max-width: 640px;
    margin: 0 auto;
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    text-align: left;
}
.pending-review-icon { font-size: 44px; margin-bottom: 8px; }
.pending-review-card h2 { font-family: 'Unbounded', sans-serif; font-size: 20px; margin-bottom: 6px; }
.pending-review-card h3 { font-size: 15px; margin: 24px 0 12px; }
.pending-review-email { color: var(--text-muted); font-size: 13px; margin-bottom: 14px; word-break: break-all; }
.pending-review-text { line-height: 1.55; font-size: 14px; }
.pending-review-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pending-review-actions button { border: none; cursor: pointer; }

/* ==========================================================================
   Админка (/admin)
   ========================================================================== */
/* Раскладка как в ЛК: сайдбар (.profile-sidebar / .menu-btn) + контент без общей рамки */
.admin-layout { text-align: left; }
.admin-avatar { color: var(--accent-text); background-color: var(--accent-soft); border-color: var(--accent-soft-border); }
.admin-content { flex: 1; min-width: 0; }
.admin-content-head { margin-bottom: 24px; }
.admin-content-head .page-subtitle { margin-top: 6px; max-width: 760px; }
/* Счётчик заявок в пункте меню — справа */
.admin-count:not(:empty) {
    margin-left: auto;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}
.admin-count:empty { display: none; }
.admin-muted { color: var(--text-muted); font-size: 13px; }
.admin-item, .admin-card {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 14px;
    transition: border-color 0.2s;
}
.admin-item:hover { border-color: var(--border-strong); }
.admin-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; word-break: break-word; }
.admin-kv { font-size: 13px; margin: 4px 0; word-break: break-word; }
.admin-kv a, .admin-table a { color: var(--accent-text); text-decoration: none; }
.admin-kv a:hover, .admin-table a:hover { text-decoration: underline; }
.admin-warn { font-size: 13px; color: var(--warning); margin: 6px 0; word-break: break-word; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.admin-btn { padding: 8px 14px; font-size: 13px; cursor: pointer; border-radius: var(--radius-sm); }
.admin-btn-danger:hover { background-color: var(--danger-soft); border-color: rgba(239, 68, 68, 0.5); color: var(--danger); }
.admin-search-row, .admin-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.admin-search-row .aurorix-input { flex: 1; min-width: 200px; }
.admin-inline .aurorix-input { width: auto; flex: 1; min-width: 140px; }
.admin-inline select.aurorix-input { flex: 0 1 200px; }
.admin-card h3 { font-size: 17px; word-break: break-all; }
.admin-card h4 { font-size: 14px; margin: 22px 0 10px; }
.admin-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 4px; }
.admin-link-btn { background: none; border: none; color: var(--accent-text); cursor: pointer; padding: 0; font-size: 13px; }
.admin-link-btn:hover { text-decoration: underline; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 14px 0; font-size: 14px; }
.admin-views { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 8px; }
.admin-view-field { font-size: 13px; color: var(--text-muted); display: flex; flex-direction: column; gap: 6px; }
.admin-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: var(--success-soft); color: var(--success); }
.admin-pill-pending_review { background: var(--warning-soft); color: var(--warning); }
.admin-pill-banned { background: var(--danger-soft); color: var(--danger); }
/* Плашки проверок: VT: N и Useful */
.admin-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.admin-pills .admin-pill { font-weight: 600; white-space: nowrap; }
.admin-pill-green { background: var(--success-soft); color: var(--success); }
.admin-pill-yellow { background: var(--warning-soft); color: var(--warning); }
.admin-pill-red { background: var(--danger-soft); color: var(--danger); }
.admin-pill-grey { background: var(--surface-2); color: var(--text-muted); }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background-color: var(--panel-bg); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { padding: 11px 14px; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: top; }
.admin-table th {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: var(--surface-2);
}
.admin-table tbody tr { transition: background-color 0.15s; }
.admin-table tbody tr:hover { background-color: var(--surface-hover); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table td { vertical-align: middle; }
.admin-num-input { width: 90px; height: 36px; padding: 0 10px; }
.admin-ua { display: inline-block; max-width: 360px; font-size: 12px; color: var(--text-muted); word-break: break-all; }
.admin-pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; }
@media (max-width: 600px) {
    .admin-item, .admin-card { padding: 14px; }
    .admin-btn { flex: 1 1 auto; }
}

/* ==========================================================================
   ЛИЧНЫЙ КАБИНЕТ: сайдбар без рамки (блок пользователя, группы с акцентными
   заголовками КАПСОМ, пункты с иконками) и контент справа
   ========================================================================== */
.profile-container {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 24px 32px 60px;
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

.profile-sidebar {
    width: 270px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--header-h) + 24px);
}

/* Аватар + ник + баланс */
.lk-user-block {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}
.lk-avatar {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--panel-bg);
    color: var(--text-muted);
}
.lk-avatar .nav-svg { width: 24px; height: 24px; }
.lk-user-info { min-width: 0; flex: 1; }
.lk-user-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lk-user-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lk-logout-btn {
    display: inline-flex;
    padding: 2px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.2s ease;
}
.lk-logout-btn:hover { color: var(--danger); }
.lk-logout-btn .nav-svg { width: 17px; height: 17px; }
.lk-user-balance {
    margin-top: 2px;
    font-family: var(--font-code);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-muted);
}
.lk-user-email {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Меню */
.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sidebar-category-title {
    margin: 22px 0 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--accent-text);
}
.sidebar-menu .sidebar-category-title:first-child { margin-top: 0; }

.menu-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.menu-btn:hover {
    color: var(--text-color);
    background-color: var(--panel-bg);
}
/* Активный пункт — тёмная акцентная плашка с рамкой */
.menu-btn.active {
    color: var(--text-color);
    font-weight: 600;
    background-color: var(--accent-soft);
    border-color: var(--accent-soft-border);
}
.menu-btn.active .nav-svg { color: var(--accent-text); }

/* Контент справа */
.profile-content-box {
    flex: 1;
    min-width: 0;
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px;
}

/* Телефоны и узкие окна: сайдбар над контентом, меню прокручивается вбок */
@media (max-width: 900px) {
    .profile-container {
        flex-direction: column;
        gap: 20px;
        padding: 16px 16px 40px;
    }
    .profile-sidebar {
        position: static;
        width: 100%;
    }
    .lk-user-block { margin-bottom: 16px; }
    .sidebar-menu {
        flex-direction: row;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 6px;
    }
    .sidebar-category-title { display: none; }
    .menu-btn {
        width: auto;
        flex-shrink: 0;
        min-height: 42px;
        padding: 0 14px;
        white-space: nowrap;
    }
    .profile-content-box { padding: 20px 16px; }
}

/* ==========================================================================
   Подсветка синтаксиса в ридере (классы hl-* ставит Pygments на сервере, code_render.py).
   Цвета те же, что в картинках-превью карточек. Ридер всегда тёмный.
   ========================================================================== */
.code-text-content [class^="hl-c"] { color: #8b949e; font-style: italic; }       /* комментарии */
.code-text-content .hl-cp, .code-text-content .hl-cpf { font-style: normal; color: #ff7b72; } /* #include, #!… */
.code-text-content [class^="hl-s"], .code-text-content .hl-dl { color: #a5d6ff; } /* строки */
.code-text-content .hl-si { color: #ff7b72; }                                     /* {…} внутри f-строк */
.code-text-content [class^="hl-m"], .code-text-content .hl-il { color: #79c0ff; } /* числа */
.code-text-content [class^="hl-k"] { color: #ff7b72; }                            /* ключевые слова */
.code-text-content .hl-kt { color: #ffa657; }                                     /* типы */
.code-text-content .hl-kc { color: #79c0ff; }                                     /* True / null */
.code-text-content .hl-o, .code-text-content .hl-ow { color: #ff7b72; }           /* операторы */
.code-text-content .hl-nf, .code-text-content .hl-fm,
.code-text-content .hl-nd { color: #d2a8ff; }                                     /* функции, декораторы */
.code-text-content .hl-nc, .code-text-content .hl-nn { color: #ffa657; }          /* классы, модули */
.code-text-content .hl-nb, .code-text-content .hl-bp,
.code-text-content .hl-no, .code-text-content .hl-na,
.code-text-content .hl-nv, .code-text-content .hl-vi { color: #79c0ff; }          /* встроенные, атрибуты, переменные */
.code-text-content .hl-nt { color: #7ee787; }                                     /* HTML/XML-теги */
.code-text-content .hl-gh, .code-text-content .hl-gu { color: #79c0ff; font-weight: bold; } /* заголовки Markdown */
.code-text-content .hl-ge { font-style: italic; }
.code-text-content .hl-gs { font-weight: bold; }
.code-text-content .hl-gd { color: #ffa198; }                                     /* diff: удалено */
.code-text-content .hl-gi { color: #7ee787; }                                     /* diff: добавлено */
.code-text-content .hl-err { color: inherit; background: none; }

/* ==========================================================================
   ХОСТИНГ (/hosting): заголовок + локация, вкладки-пилюли, карточки тарифов
   с пилюлями характеристик, полоса «что входит»
   ========================================================================== */
.hosting-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 32px 80px;
}

.hosting-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

/* Общие для будущих страниц: крупный заголовок и серый подзаголовок */
.page-title {
    font-family: var(--font-head);
    font-size: 32px;
    letter-spacing: -0.5px;
    color: var(--text-color);
    margin-bottom: 8px;
}
.page-subtitle {
    max-width: 640px;
    font-size: 16px;
    color: var(--text-muted);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--success);
    box-shadow: 0 0 0 3px var(--success-soft);
    flex-shrink: 0;
}

/* Баннер вверху страницы: картинка справа растворяется в фоне карточки */
.hosting-hero {
    position: relative;
    overflow: hidden;
    align-items: center;
    min-height: 220px;
    padding: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at 85% 50%, rgba(var(--accent-rgb), 0.18), transparent 60%),
        var(--panel-bg);
}
.hosting-hero > div { position: relative; z-index: 1; }
.hero-art {
    position: absolute;
    right: -40px;
    top: 50%;
    width: 420px;
    height: 420px;
    object-fit: cover;
    transform: translateY(-50%);
    pointer-events: none;
    /* края картинки плавно исчезают — не видно прямоугольника */
    -webkit-mask-image: radial-gradient(circle at center, #000 35%, transparent 70%);
    mask-image: radial-gradient(circle at center, #000 35%, transparent 70%);
    opacity: 0.9;
}
:root[data-theme="light"] .hero-art { opacity: 0.75; }

/* Линейки внутри категории: флаг + «Германия · Ryzen 9 5950X» + «от 209 ₽» */
.line-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -8px 0 24px;
}
.line-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--panel-bg);
    font: 500 14px var(--font-body);
    color: var(--text-color);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.line-chip:hover { border-color: var(--border-strong); }
.line-chip.active {
    border-color: var(--accent-soft-border);
    background-color: var(--accent-soft);
}
.line-chip-flag {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--border-color);
}
.line-chip-from {
    font-size: 12px;
    color: var(--text-muted);
}
.line-chip.active .line-chip-from { color: var(--accent-text); }

/* Фильтры выделенных: цена, установка, память, процессор */
.ded-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--panel-bg);
}
.ded-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}
.ded-filter select, .ded-filter input {
    height: 40px;
    min-width: 150px;
    padding: 0 12px;
    font-size: 14px;
}
.ded-filter-range { display: flex; align-items: center; gap: 6px; }
.ded-filter-range input { width: 110px; min-width: 0; }
.ded-filter-reset { height: 40px; margin-left: auto; }
@media (max-width: 640px) {
    .ded-filter, .ded-filter select { width: 100%; }
    .ded-filter-reset { width: 100%; margin-left: 0; }
}

/* Выделенные серверы — строками */
.hosting-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 48px;
}
.ded-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(0, 2.4fr) auto auto;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--panel-bg);
    transition: border-color 0.2s;
}
.ded-row:hover { border-color: var(--border-strong); }
.ded-row .host-card-name { font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ded-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.ded-specs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ded-specs .spec-pill { padding: 7px 10px; font-size: 13px; }
.ded-price { text-align: right; }
.ded-price .host-price { font-size: 20px; white-space: nowrap; }
.tag-pill.tag-warn { color: var(--warning); background-color: var(--warning-soft); }
.tag-pill.tag-warn::before { background-color: var(--warning); }

@media (max-width: 900px) {
    .ded-row { grid-template-columns: 1fr auto; }
    .ded-specs { grid-column: 1 / -1; grid-row: 2; }
    .ded-row .btn-primary { grid-column: 1 / -1; }
}

/* Вкладки-пилюли (активная — акцентная плашка, как вкладки услуги у Aurorix) */
.pill-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}
.pill-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.pill-tab:hover { color: var(--text-color); }
.pill-tab.active {
    color: var(--accent-text);
    background-color: var(--accent-soft);
    border-color: var(--accent-soft-border);
}

/* Карточки тарифов */
.hosting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 48px;
}

.host-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--panel-bg);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.host-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-3px);
}
.host-card.featured { border-color: var(--accent-soft-border); }
.host-card.sold-out { opacity: 0.55; }
.host-card.sold-out:hover { transform: none; }
.host-card .btn-secondary[disabled] { width: 100%; margin-top: auto; cursor: not-allowed; }
.status-dot.off { background-color: var(--text-faint); box-shadow: 0 0 0 3px var(--surface-2); }

.host-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.host-card-name {
    font-family: var(--font-head);
    font-size: 19px;
    color: var(--text-color);
}

/* Тег-пилюля с цветной точкой (#VDS, #Minecraft) */
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background-color: var(--surface-2);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.tag-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-color);
}
.tag-pill.tag-game::before { background-color: var(--success); }
.tag-pill.tag-hit {
    color: var(--accent-text);
    background-color: var(--accent-soft);
}

.host-price {
    font-family: var(--font-head);
    font-size: 30px;
    color: var(--text-color);
}
.host-price span {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-muted);
    margin-left: 4px;
}

/* Характеристики — пилюли с иконками */
.host-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.spec-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-color);
    font-size: 14px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spec-pill .nav-svg {
    width: 16px;
    height: 16px;
    color: var(--accent-text);
}

.host-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}
.host-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.host-card .btn-primary { width: 100%; margin-top: auto; }

/* «Скоро» и ошибки */
.hosting-empty {
    grid-column: 1 / -1;
    padding: 40px 32px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--text-muted);
}
.hosting-empty h3 {
    font-family: var(--font-head);
    font-size: 18px;
    color: var(--text-color);
    margin-bottom: 8px;
}
.hosting-empty p { margin-bottom: 20px; }

/* Что входит в любой тариф */
.hosting-perks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}
.hosting-perk {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.hosting-perk .feature-icon { flex-shrink: 0; margin-bottom: 0; }
.hosting-perk h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
}
.hosting-perk p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

@media (max-width: 1000px) {
    .hosting-perks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .hosting-wrap { padding: 20px 16px 60px; }
    .hosting-head { flex-direction: column; align-items: flex-start; }
    .hosting-hero { padding: 24px; }
    .hero-art { width: 260px; height: 260px; right: -90px; opacity: 0.45; }
    .page-title { font-size: 26px; }
    .hosting-perks { grid-template-columns: 1fr; }
    .hosting-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   ОТЗЫВЫ, ЖАЛОБЫ, ПУБЛИЧНЫЙ ПРОФИЛЬ (reviews.js)
   ========================================================================== */
.card-author[role="link"] { cursor: pointer; transition: color 0.2s; }
.card-author[role="link"]:hover { color: var(--accent-text); }

/* Ряд «звёзды · стрелка · карандаш · флаг» в «Просмотрено ранее» */
.rv-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
.rv-stars { display: inline-flex; gap: 2px; margin-right: auto; }
.rv-star {
    padding: 0 1px;
    border: 0;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.2px var(--text-faint);  /* серый контур */
    cursor: pointer;
    transition: color 0.15s, -webkit-text-stroke-color 0.15s, transform 0.15s;
}
.rv-star:hover { transform: scale(1.15); }
.rv-star.on { color: #facc15; -webkit-text-stroke-color: #facc15; }
.rv-row.sent .rv-star.on { color: var(--text-faint); -webkit-text-stroke-color: var(--text-faint); }  /* отправлено — серые */

/* Стрелка: серая → цветная после выбора; при отправке поворачивается и становится галочкой */
.rv-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-faint);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.rv-send[disabled] { cursor: default; }
.rv-row.picked .rv-send { color: var(--accent-text); border-color: var(--accent-soft-border); background: var(--accent-soft); }
.rv-row.sent .rv-send { color: var(--text-muted); border-color: var(--border-strong); background: var(--surface-2); }
.rv-send .nav-svg {
    width: 16px;
    height: 16px;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.rv-row.sent .rv-send .nav-svg { transform: rotate(360deg); }
.rv-send .rv-arrow, .rv-send .rv-check { transition: opacity 0.25s ease 0.1s; }
.rv-send .rv-check { opacity: 0; }
.rv-row.sent .rv-send .rv-arrow { opacity: 0; }
.rv-row.sent .rv-send .rv-check { opacity: 1; }

.rv-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.rv-icon-btn:hover { color: var(--text-color); background: var(--surface-2); }
.rv-icon-btn .nav-svg { width: 16px; height: 16px; }
/* Флаг жалобы: файл чёрный — делаем серым фильтром, при наведении плавно краснеет */
.rv-report img {
    width: 16px;
    height: 16px;
    filter: invert(55%) sepia(5%) saturate(200%) brightness(95%);
    transition: filter 0.25s;
}
.rv-report:hover img { filter: invert(36%) sepia(85%) saturate(3000%) hue-rotate(345deg) brightness(95%); }

/* Окно отзыва / жалобы */
.bs-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.2s;
}
.bs-modal-overlay.active { opacity: 1; }
.bs-modal {
    width: 100%;
    max-width: 460px;
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--panel-bg);
    box-shadow: var(--shadow);
}
.bs-modal-title { font-family: var(--font-head); font-size: 18px; color: var(--text-color); margin-bottom: 4px; }
.bs-modal-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.bs-modal-label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.bs-modal-label select { height: 42px; padding: 0 12px; font-size: 14px; }
.bs-modal-text { width: 100%; min-height: 110px; padding: 12px; resize: vertical; font: 14px var(--font-body); }
.bs-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.bs-btn-danger { color: var(--danger) !important; margin-right: auto; }
.rv-stars-big { margin-bottom: 14px; }
.rv-stars-big .rv-star { font-size: 32px; }

/* Публичный профиль */
.up-head { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
.up-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    color: var(--accent-text);
    font: 700 28px var(--font-head);
}
.up-head .page-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.up-head .page-subtitle { margin-bottom: 8px; }
.up-section-title { font-family: var(--font-head); font-size: 18px; color: var(--text-color); margin: 28px 0 14px; }
.up-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.up-card {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--panel-bg);
    cursor: pointer;
    transition: border-color 0.2s;
}
.up-card:hover { border-color: var(--border-strong); }
.up-card-img { height: 90px; background: var(--surface-2); overflow: hidden; }
.up-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.up-card-name { font-weight: 600; color: var(--text-color); }
.up-reviews { display: flex; flex-direction: column; gap: 10px; }
.up-review {
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--panel-bg);
}
.up-review-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--text-color); }
.up-review-text { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--text-color); white-space: pre-wrap; word-break: break-word; }
@media (max-width: 640px) {
    .up-head { flex-direction: column; align-items: flex-start; }
}

/* Удаление отзывов сотрудником: в профиле и во вкладке «Отзывы» */
.up-review-del { margin-left: auto; }
.up-review-del:hover { color: var(--danger); }
.admin-review-text { margin-top: 4px; max-width: 420px; white-space: pre-wrap; word-break: break-word; }


/* ==========================================================================
   ЧАТЫ ПО ЖАЛОБАМ (tickets.js) — список слева, переписка справа
   ========================================================================== */
.tk-wrap { max-width: 1280px; }
.tk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.tk-scopes { margin-bottom: 0; }
.tk-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    height: calc(100vh - var(--header-h) - 190px);
    min-height: 460px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--panel-bg);
    overflow: hidden;
}
.tk-list { border-right: 1px solid var(--border-color); overflow-y: auto; }
.tk-pad { padding: 16px; }
.tk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: none;
    text-align: left;
    color: var(--text-color);
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 0.15s;
}
.tk-item:hover { background: var(--surface-hover); }
.tk-item.active { background: var(--accent-soft); }
.tk-item.resolved .tk-item-title { color: var(--text-muted); }
.tk-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--surface-2);
}
.tk-item-icon.system { background: var(--accent-soft); color: var(--accent-text); font: 700 18px var(--font-head); }
.tk-item-icon img { width: 16px; height: 16px; filter: invert(36%) sepia(85%) saturate(3000%) hue-rotate(345deg) brightness(95%); }
.tk-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tk-item-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-item-last { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.tk-item-time, .tk-mini { font-size: 11px; color: var(--text-faint); }

.tk-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tk-placeholder { margin: auto; color: var(--text-muted); font-size: 14px; padding: 20px; text-align: center; }
.tk-chat-head { padding: 14px 18px; border-bottom: 1px solid var(--border-color); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.tk-chat-title { font-family: var(--font-head); font-size: 16px; color: var(--text-color); width: 100%; }
.tk-people { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--text-muted); }
.tk-people b { color: var(--text-color); font-weight: 600; }
.tk-tools { display: flex; gap: 8px; margin-left: auto; }
.tk-back { display: none; border: 0; background: none; color: var(--accent-text); font: 500 13px var(--font-body); cursor: pointer; padding: 0; }

.tk-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tk-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 75%; }
.tk-msg.mine { align-self: flex-end; align-items: flex-end; }
.tk-msg-author { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; display: flex; gap: 6px; align-items: center; }
.tk-role { padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font-size: 11px; }
.tk-msg.side-staff .tk-role { background: var(--warning-soft); color: var(--warning); }
.tk-bubble {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.tk-msg.mine .tk-bubble { background: var(--accent-soft); border-color: var(--accent-soft-border); }
.tk-msg.system { align-self: center; align-items: center; max-width: 90%; }
.tk-msg.system .tk-bubble { background: none; border-style: dashed; color: var(--text-muted); font-size: 13px; text-align: center; }
.tk-time { font-size: 11px; color: var(--text-faint); margin-top: 3px; }

.tk-input { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--border-color); align-items: flex-end; }
.tk-input textarea { flex: 1; min-height: 44px; max-height: 160px; padding: 10px 12px; resize: vertical; font: 14px var(--font-body); }
.tk-input .btn-primary { height: 44px; }
.tk-readonly { padding: 14px; border-top: 1px solid var(--border-color); text-align: center; color: var(--text-muted); font-size: 13px; }
.nav-link .admin-count:empty { display: none; }

/* Телефон: список и чат — по очереди, на весь экран */
@media (max-width: 800px) {
    .tk-layout { grid-template-columns: 1fr; height: calc(100vh - var(--header-h) - 150px); }
    .tk-layout .tk-chat { display: none; }
    .tk-layout.has-chat .tk-list { display: none; }
    .tk-layout.has-chat .tk-chat { display: flex; }
    .tk-back { display: inline; }
    .tk-msg { max-width: 90%; }
    .tk-tools { margin-left: 0; }
}

.up-review-flag { margin-left: auto; }
.up-review-flag + .up-review-del { margin-left: 0; }

/* Картинки и скрепка в чатах */
.tk-image { display: block; max-width: min(360px, 100%); max-height: 320px; border-radius: 10px; cursor: zoom-in; }
.tk-attach { cursor: pointer; align-self: center; }
.tk-item-icon.support { color: var(--accent-text); font: 700 16px var(--font-head); }
.tk-open-link { font-size: 12px; color: var(--accent-text); }

/* Окна «Восстановление пароля» и «Верификация почты» (используют карточку входа) */
.bspace-explorer-overlay .aurorix-auth-card { max-width: 460px; padding: 36px 32px; }
.aurorix-auth-logo-header { margin-bottom: 24px; text-align: left; }
.auth-logo-placeholder { margin-bottom: 14px; font: 700 22px var(--font-head); letter-spacing: -1px; color: var(--text-color); }
.aurorix-auth-logo-header h1 { font: 700 18px var(--font-head); color: var(--text-color); }
.aurorix-btn-submit {
    height: 46px;
    padding: 0 24px;
    border: 1px solid var(--accent-soft-border);
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    font: 600 15px var(--font-body);
    color: var(--accent-text);
    cursor: pointer;
    transition: filter 0.2s, transform 0.1s;
}
.aurorix-btn-submit:hover { filter: brightness(1.15); }
.aurorix-btn-submit:active { transform: scale(0.98); }

/* Привязка Telegram: на странице чатов и в Настройках → Уведомления */
.tk-head-right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#tg-link-box { display: flex; align-items: center; gap: 8px; }
.tg-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--success); }
.tg-state b { color: var(--text-color); font-weight: 600; }
.tg-state .nav-svg, .tg-link-btn .nav-svg { width: 15px; height: 15px; }
.tg-link-btn { display: inline-flex; align-items: center; gap: 8px; }
.tg-link-lk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 12px; }

/* ЛК → Настройки: блоки-карточки */
.settings-title { text-align: left; margin-bottom: 20px; }
.settings-card {
    background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    padding: 20px 22px; margin-bottom: 16px; text-align: left;
}
.settings-card-title { font-family: var(--font-head); font-size: 16px; color: var(--text-color); margin: 0 0 12px; }
.settings-card-text { color: var(--text-muted); font-size: 14px; margin: 0 0 12px; }
.settings-card .input-hint { margin: 0; }

/* Разметка рассылок в чате «б.space» */
.tk-msg.system .tk-bubble b { font-weight: 700; }
.tk-msg.system .tk-bubble a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* Админка → Рассылки */
.mail-title { font-family: var(--font-head); font-size: 17px; color: var(--text-color); margin: 8px 0 6px; }
.mail-title:not(:first-child) { margin-top: 32px; }
.mail-form { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 16px; }
.mail-textarea { min-height: 90px; padding: 12px; resize: vertical; }
.mail-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mail-toolbar .admin-btn { display: inline-flex; align-items: center; gap: 6px; }
.mail-toolbar .nav-svg { width: 15px; height: 15px; }
.mail-tool-bold { font-weight: 800; min-width: 36px; justify-content: center; }
.mail-syntax { font-family: var(--font-code); font-size: 12px; }
.mail-preview { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 10px 12px; }
.mail-preview-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.mail-preview .tk-msg { margin: 0; }
.mail-text b { font-weight: 700; }
.mail-text a { color: var(--accent-text); text-decoration: underline; }
.mail-text { margin: 6px 0 10px; white-space: pre-wrap; word-break: break-word; color: var(--text-color); font-size: 14px; }
.mail-off { opacity: 0.55; }

.captcha-box.captcha-top { margin: 0 0 18px; }
.captcha-box.captcha-top:empty { margin: 0; }

/* Фон карточек тарифов: картинка (hostCardBgStyle в app.js), затемнение сверху, контент поверх */
.host-card { overflow: hidden; isolation: isolate; }
.host-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--card-bg);
    background-size: var(--card-bg-size, 200%);
    background-position: var(--card-bg-pos, 50% 50%);
    background-repeat: no-repeat;
    transform: scaleX(var(--card-bg-flip, 1));
    opacity: 0.38;
    filter: saturate(1.15);
    transition: opacity 0.4s ease, transform 0.6s ease;
}
.host-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(10, 10, 10, 0.25) 0%, rgba(10, 10, 10, 0.55) 45%, rgba(10, 10, 10, 0.92) 100%);
}
.host-card:hover::before { opacity: 0.5; transform: scaleX(var(--card-bg-flip, 1)) scale(1.06); }
.host-card.featured::before { opacity: 0.5; }
.host-card .spec-pill { background-color: rgba(5, 5, 5, 0.55); backdrop-filter: blur(6px); }
/* Светлая тема: у картинок чёрный фон — на белой карточке он давал серую муть. Инвертируем
   (чёрное → белое, оттенки сохраняет hue-rotate) и смешиваем multiply: белое исчезает, остаётся лёгкий цветной узор. */
:root[data-theme="light"] .host-card { background-color: #fff; }
:root[data-theme="light"] .host-card::before {
    opacity: 0.55;
    filter: invert(1) hue-rotate(180deg) saturate(1.6) brightness(1.05);
    mix-blend-mode: multiply;
}
:root[data-theme="light"] .host-card:hover::before,
:root[data-theme="light"] .host-card.featured::before { opacity: 0.7; }
:root[data-theme="light"] .host-card::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.92) 100%);
}
:root[data-theme="light"] .host-card .spec-pill { background-color: rgba(255, 255, 255, 0.7); }

/* Лента «Просмотрено ранее» и разделитель (редизайн, шаг 4) */
#viewed-drawer-section { margin-bottom: 28px; }
.viewed-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
}
.viewed-cards-feed-wrapper {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px;
}
.viewed-divider-line {
    height: 1px;
    margin: 0 0 32px;
    background-color: var(--border-color);
}
@media (max-width: 700px) {
    .shop-wrap { padding: 0 16px; }
    .shop-head { align-items: flex-start; }
    .shop-grid { grid-template-columns: 1fr; }
    .code-card-compact { flex-basis: 260px; }
}

/* ==========================================================================
   «Создать» (редизайн, шаг 5): форма слева, «как проходит проверка» справа, «Мои проекты» ниже
   ========================================================================== */
.create-title { text-align: left; }
.create-sub { text-align: left; margin-bottom: 28px; }
.create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}
.create-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--panel-bg);
    text-align: left;
}
.create-side { display: flex; flex-direction: column; gap: 20px; }
.create-label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}
.create-card .create-label:not(:first-child) { margin-top: 22px; }
.create-help { margin: -2px 0 10px; font-size: 13px; color: var(--text-faint); }

/* Зона ZIP: пунктир, при перетаскивании и с файлом — акцент */
.zip-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 20px;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background-color: var(--surface-2);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.zip-upload-zone:hover,
.zip-upload-zone:focus-visible,
.zip-upload-zone.drag-over {
    outline: none;
    border-color: var(--accent-soft-border);
    background-color: var(--accent-soft);
}
.zip-upload-zone.has-file { border-style: solid; border-color: var(--accent-soft-border); }
.zip-ico {
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
    color: var(--accent-text);
    transition: transform 0.2s;
}
.zip-upload-zone.drag-over .zip-ico { transform: translateY(-3px); }
.zip-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-color); word-break: break-all; }
.zip-hint { margin: 0; font-size: 12px; color: var(--text-muted); }
.zip-hint:empty { display: none; }

/* Команды установки: «$ поле корзина» */
.term-list { display: flex; flex-direction: column; gap: 8px; }
.term-row { display: flex; align-items: center; gap: 8px; }
.term-prompt { font-family: var(--font-code); color: var(--accent-text); width: 12px; flex-shrink: 0; }
.term-row .aurorix-input { flex: 1; min-width: 0; font-family: var(--font-code); font-size: 13px; }
.term-del:hover { color: var(--danger); }
.term-add {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
.term-add .nav-svg { width: 15px; height: 15px; }

.create-actions { display: flex; justify-content: flex-end; margin-top: 26px; }
.create-submit { display: inline-flex; align-items: center; gap: 8px; }
.create-submit .nav-svg { width: 17px; height: 17px; }
.create-submit.is-loading { opacity: 0.6; cursor: progress; }

/* Результат загрузки */
.create-result {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--surface-2);
    font-size: 14px;
}
.create-result[hidden] { display: none; }
.create-ok { display: flex; align-items: flex-start; gap: 10px; color: var(--text-color); }
.create-ok .status-dot { margin-top: 6px; }
.create-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.create-secrets {
    padding: 12px 14px;
    border: 1px solid rgba(234, 179, 8, 0.35);
    border-radius: var(--radius-sm);
    background-color: var(--warning-soft);
    color: var(--text-color);
}
.create-secrets ul { margin: 8px 0 0; padding-left: 18px; }
.create-secrets li { margin: 3px 0; }
.create-secrets code { font-family: var(--font-code); font-size: 12px; }

/* Правая колонка */
.create-side-title { margin: 0 0 14px; font-family: var(--font-head); font-size: 15px; color: var(--text-color); }
.create-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 14px; }
.create-steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 38px;
    counter-increment: step;
    font-size: 13px;
    color: var(--text-muted);
}
.create-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--accent-soft-border);
    border-radius: 50%;
    background-color: var(--accent-soft);
    color: var(--accent-text);
    font-size: 12px;
    font-weight: 700;
}
.create-steps b { font-size: 14px; color: var(--text-color); }
.create-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-muted); }

/* Мои проекты */
.my-projects-section { margin-top: 36px; text-align: left; }
.my-projects-section > .shop-section-title { margin-bottom: 14px; }
#my-projects-list { display: flex; flex-direction: column; gap: 10px; }
.my-projects-empty { color: var(--text-muted); font-size: 14px; }
.my-project-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--panel-bg);
}
.my-project-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.my-project-name { font-weight: 600; color: var(--text-color); word-break: break-word; }
.my-project-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; }
.my-project-reason {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background-color: var(--danger-soft);
    font-size: 13px;
    color: var(--text-color);
}
.tag-pill.my-project-status { flex-shrink: 0; }
.tag-pill.tag-bad { color: var(--danger); background-color: var(--danger-soft); }
.tag-pill.tag-bad::before { background-color: var(--danger); }

@media (max-width: 900px) {
    .create-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .create-card { padding: 18px; }
    .my-project-row { flex-direction: column; }
    .create-actions .create-submit { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Общий подвал и «Правообладателям» (/rightholders, rightholders.js)
   ========================================================================== */
.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 24px;
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 20px 16px 28px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-muted);
}
.site-footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.site-footer-links a:hover { color: var(--accent-text); }
.footer-right-links { display: flex; gap: 14px; }

.rh-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 22px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}
.rh-check input { margin-top: 2px; accent-color: var(--accent-color, #3b82f6); flex-shrink: 0; }
.rh-captcha { margin-top: 18px; }
.rh-captcha[hidden] { display: none; }
#rh-form select.aurorix-input { cursor: pointer; }

.rh-tabs { margin-bottom: 16px; }
.rh-claims { display: flex; flex-direction: column; gap: 10px; }
.rh-claim .admin-review-text { white-space: pre-wrap; }
.rh-proof { font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.rh-claim-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
@media (max-width: 600px) {
    .rh-claim-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* ==========================================================================
   Личный кабинет (редизайн, шаг 6): приветствие, карточки безопасности, баланс, обращения, пустые «Услуги»
   ========================================================================== */
.lk-hello {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 120px;
    margin-bottom: 22px;
    padding: 24px 26px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft) 0%, transparent 55%), var(--panel-bg);
    text-align: left;
}
.lk-hello-text { position: relative; z-index: 1; max-width: 70%; }
.lk-hello-title { margin: 0 0 6px; font-family: var(--font-head); font-size: 22px; color: var(--text-color); }
#lk-hello-name { color: var(--accent-text); }
.lk-hello-sub { margin: 0; font-size: 14px; color: var(--text-muted); }
/* Своя 3D-картинка (assets/img/web, Unsplash) справа, плавно уходит в фон */
.lk-hello-art {
    position: absolute;
    inset: -30% -6% -30% 45%;
    z-index: -1;
    background: url('/assets/img/web/ring.webp') 70% 50% / 120% no-repeat;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
:root[data-theme="light"] .lk-hello-art {
    filter: invert(1) hue-rotate(180deg) saturate(1.5);
    mix-blend-mode: multiply;
    opacity: 0.5;
}

.settings-card .aurorix-form-group { margin-bottom: 14px; }
.lk-inline-form { display: flex; gap: 10px; margin-bottom: 10px; }
.lk-inline-form .aurorix-input { flex: 1; min-width: 0; }
.lk-inline-form .btn-primary { flex-shrink: 0; }
.lk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }
.lk-link { color: var(--accent-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.lk-link:hover { text-decoration: underline; }
.lk-step2 { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--border-strong); }

/* Строка-карточка: иконка · текст · действие справа (2FA, выход) */
.lk-row-card { display: flex; align-items: center; gap: 16px; }
.lk-row-main .tag-pill { vertical-align: middle; margin-left: 6px; }
.lk-tariff-renew { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.tariff-change-btn { white-space: nowrap; }
.tariff-change-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(1); }

/* Окно «Поменять тариф» */
.tariff-options { display: flex; flex-direction: column; gap: 8px; }
.tariff-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--surface-2);
    color: var(--text-color);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.tariff-option:hover { border-color: var(--border-strong); background-color: var(--surface-hover); }
.tariff-option.active { border-color: var(--accent-soft-border); background-color: var(--accent-soft); }
.tariff-option-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tariff-option-main b { font-size: 15px; }
.tariff-option-main small { flex-basis: 100%; font-size: 12px; color: var(--text-muted); }
.tariff-option-price { font-weight: 600; white-space: nowrap; }
.tariff-option-price small { font-weight: 400; color: var(--text-muted); }
.lk-row-main { flex: 1; min-width: 0; }
.lk-row-main .settings-card-title { margin-bottom: 4px; }
.lk-row-main .settings-card-text { margin: 0; }
.lk-row-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--accent-soft-border);
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent-text);
}
.lk-row-icon .nav-svg { width: 20px; height: 20px; }
.lk-row-icon-danger { border-color: rgba(239, 68, 68, 0.35); background: var(--danger-soft); color: var(--danger); }

.lk-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.lk-grid-2 > .settings-card { margin-bottom: 16px; }
.lk-grid-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.lk-textarea { min-height: 140px; resize: vertical; padding: 12px; font-family: inherit; }

/* Финансы */
.lk-balance { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.lk-balance-label { font-size: 13px; color: var(--text-muted); }
.lk-balance-value { margin: 4px 0 8px; font-family: var(--font-head); font-size: 36px; font-weight: 700; color: var(--text-color); }
.lk-balance-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lk-balance-actions button { display: inline-flex; align-items: center; gap: 8px; }
.lk-balance-actions .nav-svg { width: 16px; height: 16px; }
.lk-history-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.lk-history-head .settings-card-title { margin: 0; }

/* Пустые состояния */
.lk-empty {
    display: flex; align-items: center; gap: 10px;
    padding: 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
    color: var(--text-muted); font-size: 14px; text-align: left;
}
.lk-empty .nav-svg { width: 20px; height: 20px; flex-shrink: 0; }
.lk-empty-big { flex-direction: column; justify-content: center; gap: 14px; padding: 48px 20px; text-align: center; }
.lk-empty-big .nav-svg { width: 40px; height: 40px; color: var(--accent-text); }
.lk-empty-big .btn-primary { text-decoration: none; }

/* Обращения */
.lk-list { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.lk-ticket-text { font-size: 13px; color: var(--text-muted); white-space: pre-wrap; word-break: break-word; }

@media (max-width: 900px) {
    .lk-grid-2, .lk-grid-side { grid-template-columns: 1fr; }
    .lk-hello-text { max-width: 100%; }
    .lk-hello-art { opacity: 0.25; }
}
@media (max-width: 600px) {
    .lk-inline-form { flex-direction: column; }
    .lk-row-card { flex-wrap: wrap; }
    .lk-balance-value { font-size: 28px; }
    .lk-balance-actions, .lk-balance-actions button { width: 100%; justify-content: center; }
}

/* Админка → «Бухгалтерия» (accounting.js) */
.acc-toolbar .acc-select { flex: 0 0 auto; min-width: 100px; height: 38px; }
.acc-toolbar .pill-tabs { flex: 1; }
.acc-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.acc-summary .settings-card { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.acc-big { font-family: var(--font-head); font-size: 24px; font-weight: 600; color: var(--text-color); }
.acc-plus { color: var(--success); }
.acc-minus { color: var(--danger); }
.acc-regimes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.acc-regime { margin: 0; }
.acc-regime p { margin: 6px 0 0; }
.acc-regime-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.acc-regime-head h4 { margin: 0; font-size: 14px; }
.acc-better { border-color: var(--accent-soft-border); background-color: var(--accent-soft); }
.acc-disclaimer { margin: 10px 0 0; }
.acc-h { margin: 24px 0 10px; font-size: 14px; }
.acc-note { font-size: 11px; margin-top: 2px; }
.acc-warning { padding: 10px 12px; margin: 0 0 10px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--text-color); font-size: 13px; }
.acc-form .aurorix-input { flex: 1 1 160px; min-width: 140px; height: 40px; }
.acc-form #acc-desc { flex-basis: 260px; }

/* «Просмотрено ранее»: поиск + сортировка в одну строку */
.viewed-search-row { display: flex; gap: 10px; align-items: center; }
.viewed-search-row .aurorix-input { flex: 1; min-width: 0; }
@media (max-width: 600px) { .viewed-search-row { flex-wrap: wrap; } }

/* Строка поиска + счётчик + сортировка над таблицей админки */
.admin-list-toolbar { align-items: center; }
.admin-list-toolbar .shop-count { flex-shrink: 0; }

/* Бухгалтерия: выбор типа оформления и поля формы */
.acc-settings { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-bottom: 16px; }
.acc-field { flex: 1 1 200px; margin-bottom: 0; }
.acc-field-wide { flex: 2 1 320px; }
.acc-field .aurorix-input { height: 40px; }
.acc-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.acc-note-line { flex-basis: 100%; margin: 4px 0 0; }
.acc-form select.aurorix-input { flex: 0 1 180px; }

/* Админка → «Возвраты» (refunds.js) */
.refund-filters { margin-bottom: 10px; flex-wrap: wrap; }
.refund-filter-n { margin-left: 4px; color: var(--text-muted); font-size: 12px; }
.refund-hint { margin: 0 0 16px; }
.refund-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.refund-amount { font-family: var(--font-head); font-size: 18px; }
.refund-status { margin-left: auto; }
.refund-card .admin-kv { margin-top: 8px; }
.refund-comment { width: 100%; margin-top: 12px; height: 40px; }
.refund-pending { border-color: rgba(234, 179, 8, 0.45); }
/* Вернули — ждёт аннулирования чека: синяя */
.refund-refunded { border-color: var(--accent-soft-border); background-color: var(--accent-soft); }
.refund-refunded .refund-status { background: var(--accent-color); color: var(--on-accent); }
.refund-annul-note { margin: 12px 0 0; font-size: 13px; color: var(--accent-text); }
/* Закрытые (аннулированы / отклонены): серые, раскрываются кликом */
.refund-annulled, .refund-rejected { opacity: 0.55; cursor: pointer; }
.refund-annulled:hover, .refund-rejected:hover, .refund-card.is-open.refund-annulled, .refund-card.is-open.refund-rejected { opacity: 0.85; }



/* Скрыто для глаз, но видно браузеру (скрытое поле почты для менеджера паролей) */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* Возвраты: блок чека в карточке, вкладка «Чеки» */
.tag-pill.tag-accent { background: var(--accent-color); color: var(--on-accent); }
.refund-receipt { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-2); font-size: 13px; }
.refund-receipt-missing { border-color: rgba(234, 179, 8, 0.45); color: var(--warning); }
.refund-receipt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.refund-uid { padding: 2px 8px; border-radius: 6px; background: var(--panel-bg); font-family: var(--font-code); font-size: 13px; color: var(--text-color); word-break: break-all; }
.refund-receipt-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 8px; color: var(--text-muted); }
.refund-receipt-grid b { color: var(--text-color); }
.refund-receipt-change { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.refund-receipt-select { flex: 1 1 260px; height: 36px; }

/* ==========================================================================
   Плавное появление страниц, вкладок ЛК и админки.
   Страницы переключаются через display (none → block) — transition на этом не работает,
   а CSS-анимация запускается заново при каждом показе. Последний кадр — transform: none,
   чтобы после анимации position: fixed внутри страниц работал как обычно.
   ========================================================================== */
@keyframes bsPageIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
@keyframes bsFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.app-page.active { animation: bsPageIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both; }
.profile-tab-content, .admin-panel { animation: bsFadeIn 0.28s ease-out both; }

/* Кто включил в системе «уменьшить движение» — без анимаций */
@media (prefers-reduced-motion: reduce) {
    .app-page.active, .profile-tab-content, .admin-panel { animation: none; }
}

/* ==========================================================================
   Редизайн, шаг 9: чаты /tickets (tickets.js)
   ========================================================================== */
.tk-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border-color); }
.tk-side .tk-list { flex: 1; border-right: 0; }
.tk-filter { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--border-color); }
.tk-filter-btn {
    flex: 1;
    padding: 7px 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    font: 500 12px var(--font-body);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.tk-filter-btn span { margin-left: 3px; color: var(--text-faint); }
.tk-filter-btn:hover { background: var(--surface-hover); color: var(--text-color); }
.tk-filter-btn.active { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--text-color); }

.tk-item { border-left: 3px solid transparent; }
.tk-item.active { border-left-color: var(--accent-color); }
.tk-item.unread .tk-item-title { color: var(--text-color); }
.tk-item.unread .tk-item-last { color: var(--text-color); font-weight: 500; }
.tk-item-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-muted);
}
.tk-item-icon .nav-svg { width: 18px; height: 18px; }
.tk-item-icon.system { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--accent-text); }
.tk-item-icon.support { color: var(--accent-text); }
.tk-item-icon.complaint { background: var(--danger-soft); border-color: rgba(239, 68, 68, 0.3); color: var(--danger); }

.tk-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tk-placeholder .nav-svg { width: 40px; height: 40px; color: var(--text-faint); }

.tk-chat-head { gap: 10px 16px; padding: 14px 20px; }
.tk-chat-title-row { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; }
.tk-chat-title-row .tk-chat-title { width: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-chip { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12px; }
.tk-tools .admin-btn { display: inline-flex; align-items: center; gap: 6px; }
.tk-tools .nav-svg { width: 14px; height: 14px; }

.tk-messages { gap: 10px; padding: 20px; }
.tk-day { display: flex; align-items: center; gap: 12px; margin: 6px 0; color: var(--text-faint); font-size: 12px; }
.tk-day::before, .tk-day::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.tk-msg { flex-direction: row; align-items: flex-end; gap: 10px; }
.tk-msg.mine { flex-direction: row-reverse; }
.tk-msg-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.tk-msg.mine .tk-msg-body { align-items: flex-end; }
.tk-avatar {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font: 700 12px var(--font-head);
}
.tk-msg.mine .tk-avatar { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--accent-text); }
.tk-msg.side-staff .tk-avatar { background: var(--warning-soft); border-color: rgba(234, 179, 8, 0.35); color: var(--warning); }
.tk-bubble { border-radius: 16px 16px 16px 4px; }
.tk-msg.mine .tk-bubble { border-radius: 16px 16px 4px 16px; }
.tk-msg.system { flex-direction: column; }
.tk-msg.system .tk-bubble { border-radius: 14px; }

.tk-input { flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 16px; }
.tk-composer {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    transition: border-color 0.2s;
}
.tk-composer:focus-within { border-color: var(--accent-soft-border); }
.tk-composer textarea {
    flex: 1;
    min-height: 36px;
    max-height: 160px;
    padding: 8px 6px;
    border: 0;
    outline: none;
    resize: none;
    background: none;
    color: var(--text-color);
    font: 14px/1.4 var(--font-body);
}
.tk-attach, .tk-send {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.tk-attach:hover { background: var(--surface-hover); color: var(--text-color); }
.tk-send { background: var(--accent-color); color: var(--on-accent); }
.tk-send:hover { background: var(--accent-hover); }
.tk-attach .nav-svg, .tk-send .nav-svg { width: 18px; height: 18px; }
.tk-hint { padding-left: 4px; font-size: 11px; color: var(--text-faint); }
@media (max-width: 800px) {
    .tk-side { border-right: 0; }
    .tk-layout .tk-side { display: flex; }
    .tk-layout.has-chat .tk-side { display: none; }
    .tk-hint { display: none; }
}

/* ==========================================================================
   Редизайн, шаг 10: телефон (< 600px) — нижняя панель вкладок и подгонка страниц
   ========================================================================== */
.mobile-tabbar { display: none; }
body { overflow-x: clip; } /* ничего не вылезает вбок — без горизонтальной прокрутки */

/* Тарифы на главной и проводник кода — уже на планшетах */
.tariffs-grid { flex-wrap: wrap; }
@media (max-width: 700px) {
    .search-bar-wrapper { width: 100%; }
    .tariffs-section { padding: 40px 16px; }
    .tariff-card { width: 100%; max-width: 420px; }
    .tariff-card.featured, .tariff-card.featured:hover { transform: none; }
    .viewed-drawer-dock.expanded { padding: 20px 16px !important; }
    .explorer-modal-content { width: 100vw; height: 100dvh; max-width: none; border-radius: 0; border: 0; }
    .explorer-body-wrapper { flex-direction: column; }
    .explorer-sidebar-tree { flex: 0 0 auto; max-height: 32dvh; width: 100%; border-right: 0 !important; border-bottom: 1px solid var(--border-color); }
    .explorer-code-viewer { min-height: 0; }
}

@media (max-width: 600px) {
    :root { --tabbar-h: calc(62px + env(safe-area-inset-bottom)); }
    body { padding-bottom: var(--tabbar-h); }

    /* Шапка: логотип, тема, язык. Разделы, «Создать» и профиль — внизу */
    .main-header .nav-links,
    .main-header #nav-link-create,
    .main-header .header-profile-btn { display: none !important; }
    .header-container { padding: 0 16px; }

    .mobile-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        display: flex;
        justify-content: space-around;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        background-color: var(--header-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--border-color);
    }
    .mobile-tab {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 6px 2px;
        border: 0;
        border-radius: var(--radius-md);
        background: none;
        color: var(--text-muted);
        font: 500 11px var(--font-body);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-tab .nav-svg { width: 22px; height: 22px; }
    .mobile-tab-icon { position: relative; display: flex; }
    .mobile-tab-icon .admin-count { position: absolute; top: -6px; right: -12px; font-size: 10px; min-width: 18px; padding: 1px 5px; }
    .mobile-tab-icon .admin-count:empty { display: none; }
    .mobile-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-tab.active { color: var(--text-color); }
    .mobile-tab.active .nav-svg { color: var(--accent-color); }
    .mobile-tab:active { background: var(--surface-hover); }

    /* Всплывающие подсказки и окна — над нижней панелью */
    .toast-box { bottom: calc(var(--tabbar-h) + 12px); width: calc(100% - 32px); }
    .fullscreen-modal .modal-content { max-height: 88dvh; }

    /* Высота чатов и шторки «Просмотрено ранее» — без нижней панели */
    .tk-layout { height: calc(100dvh - var(--header-h) - var(--tabbar-h) - 120px); min-height: 380px; }
    .viewed-drawer-dock.expanded { height: calc(100dvh - var(--header-h) - var(--tabbar-h)) !important; }

    /* iPhone приближает страницу, если у поля шрифт меньше 16px */
    .aurorix-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"],
    input[type="date"], select, textarea { font-size: 16px; }

    /* Мелочи по страницам */
    .page-title { font-size: 24px; }
    .app-page.active { padding-top: calc(var(--header-h) + 12px) !important; }
    .lk-hello-text { max-width: 100%; }
    .settings-card { padding: 16px; }
    .lk-row-card { gap: 12px; }
    .lk-tariff-renew { flex-wrap: wrap; white-space: normal; }
    .admin-content-head { margin-bottom: 16px; }
    .refund-status { margin-left: 0; }
    .refund-filters { overflow-x: auto; flex-wrap: nowrap; }
    /* Бухгалтерия: год и CSV — строкой, периоды — отдельной строкой из 4 равных кнопок */
    .acc-toolbar .pill-tabs { order: 3; flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0; }
    .acc-toolbar .pill-tab { justify-content: center; height: 36px; padding: 0 4px; font-size: 13px; white-space: nowrap; }
    .acc-toolbar .acc-select { flex: 1 1 auto; }
    .bs-modal { padding: 20px 16px; max-height: calc(100dvh - 32px); overflow-y: auto; }
    .site-footer { padding-bottom: 16px; }
}

/* Телефон: проводник кода без рамки вокруг — на весь экран, дерево сверху, код снизу */
@media (max-width: 700px) {
    .bspace-explorer-overlay { padding: 0; }
    #github-explorer-modal .explorer-modal-content { width: 100%; height: 100dvh; max-width: none; border-radius: 0; border: 0; }
    #github-explorer-modal .explorer-body-wrapper { flex-direction: column; min-height: 0; }
    #github-explorer-modal .explorer-sidebar-tree { flex: 0 0 auto; width: 100%; max-height: 30dvh; padding: 12px; border-right: 0; border-bottom: 1px solid var(--border-color); }
    #github-explorer-modal .explorer-code-viewer { flex: 1; min-height: 0; min-width: 0; }
    #github-explorer-modal .explorer-header-bar { padding: 12px 14px; gap: 8px; }
}
@media (max-width: 700px) {
    #forgot-pass-popup-modal, #forgot-email-popup-modal { padding: 16px; }
}

/* Телефон, повёрнутый горизонтально: экран широкий (> 600px), но низкий — нижней панели нет,
   а высоты окон и чатов считаем от реальной высоты экрана (dvh), без больших минимумов */
@media (orientation: landscape) and (max-height: 500px) {
    .app-page.active { padding-top: calc(var(--header-h) + 8px) !important; }
    .tk-layout { height: calc(100dvh - var(--header-h) - 90px); min-height: 260px; }
    .fullscreen-modal .modal-content { max-height: 92dvh; padding-top: 36px; }
    .viewed-drawer-dock.expanded { height: calc(100dvh - var(--header-h)) !important; }
    .bs-modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
    #github-explorer-modal .explorer-modal-content { width: 100%; height: 100dvh; max-width: none; border-radius: 0; }
    .bspace-explorer-overlay { padding: 0; }
}

/* Логотип б.space: он размечен как .nav-link, а на узких экранах подписи пунктов меню прячутся —
   надпись логотипа показываем всегда. На сенсорных экранах (нет курсора) — без подсветки. */
.site-logo-ai-wrapper .site-logo-text { display: inline !important; }
@media (hover: none) {
    .ai-glow-shash { display: none; }
    .site-logo-ai-wrapper:hover .site-logo-text { text-shadow: none; }
}

/* Поиск в магазине на телефоне: во время полёта лупы бар уже и сдвинут вправо, потом плавно расширяется */
@media (max-width: 700px) {
    .search-bar-wrapper { transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1), margin-left 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
    .search-container-box.search-intro .search-bar-wrapper { width: 78%; margin-left: 22%; }
}

/* «Здравствуйте, <ник>!» на узких экранах — картинка как на ПК: размер от высоты плашки, справа, видна так же */
@media (max-width: 900px) {
    .lk-hello { min-height: 140px; }
    .lk-hello-text { max-width: 64%; }
    .lk-hello-art {
        inset: -25% -12% -25% 30%;
        background-size: auto 130%;
        background-position: 75% 50%;
        opacity: 0.55;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
    }
    :root[data-theme="light"] .lk-hello-art { opacity: 0.5; }
}
@media (max-width: 420px) {
    .lk-hello { padding: 20px 18px; }
    .lk-hello-title { font-size: 19px; }
    .lk-hello-text { max-width: 70%; }
}

/* ==========================================================================
   Главная: «99.99% uptime» (выбран Ильёй 2026-11-07, вариант a29). Всегда по-английски.
   Крупные цифры с градиентом прозрачности под окном deploy.py (верхушка чуть заходит под окно),
   подпись «uptime» — снаружи у правой границы окна, в 43px от его низа, тоже с градиентом.
   ========================================================================== */
.hero-stage { position: relative; width: 100%; max-width: 460px; }
.hero-stage .code-mockup { position: relative; z-index: 1; }
.hero-section { overflow: hidden; padding-bottom: clamp(120px, 13vw, 200px); } /* цифры не дают горизонтальную прокрутку */

.uptime-big {
    position: absolute;
    z-index: 0;
    right: 50%;
    top: calc(100% - 0.22em);
    transform: translateX(50%);
    font-family: var(--font-head);
    font-size: clamp(120px, 16.5vw, 240px);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}
.uptime-big-num {
    display: block;
    font-weight: 800;
    letter-spacing: -0.06em;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.5) 0%, rgba(var(--accent-rgb), 0.14) 50%, rgba(var(--accent-rgb), 0) 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* подпись привязана к самому окну — ровно у его правой границы при любой ширине экрана */
.hero-stage::after {
    content: 'uptime';
    position: absolute;
    z-index: 2;
    left: calc(100% + 14px);
    bottom: 43px;
    font-family: var(--font-body);
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(180deg, var(--text-color) 0%, rgba(var(--accent-rgb), 0.12) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@media (max-width: 1000px) {
    .hero-stage { max-width: 520px; margin-top: 40px; }
    /* справа от окна места нет — подпись у правого нижнего угла окна, внутри */
    .hero-stage::after { left: auto; right: 14px; bottom: 37px; }
}
@media (max-width: 600px) {
    .hero-stage { margin-top: 40px; }
    /* Телефон: цифры по ширине экрана — «99.99%» целиком, без обрезки по краям */
    .uptime-big { font-size: 18vw; top: calc(100% + 26px); } /* «99.99%» шрифтом заголовков ≈ 4,6 высоты в ширину → ~83% экрана */
    /* «uptime» — сразу под окном, у его правой границы (справа от окна места нет), цифры — под подписью */
    .hero-stage::after { left: auto; right: 4px; bottom: auto; top: calc(100% + 8px); font-size: 15px; }
    .hero-section { padding-bottom: calc(18vw + 40px); }
}

/* ==========================================================================
   Заказ серверов (hosting-orders.js): окно заказа, карточки в «Услугах», вкладка админки
   ========================================================================== */
.bs-modal { max-height: calc(100dvh - 32px); overflow-y: auto; }   /* длинные окна (заказ) листаются, не вылезают за экран */
.bs-modal-label input.aurorix-input { height: 42px; padding: 0 12px; font-size: 14px; }
.ho-check { margin: 2px 0 14px; }
.ho-summary { padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-2); }
.ho-sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-color); }
.ho-sum-row + .ho-sum-row { margin-top: 4px; font-size: 13px; }
.ho-sum-row b { font-size: 18px; }
.ho-sum-note { margin-top: 8px; font-size: 13px; color: var(--accent-text); }
.ho-sum-note.ho-sum-bad { color: var(--danger); }
.ho-note { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--accent-text); }
.ho-legal { margin: 8px 0 0; font-size: 12px; }

.svc-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 18px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--panel-bg);
}
.svc-card.svc-closed { opacity: 0.55; }
.svc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.svc-head .admin-muted { font-size: 13px; margin-top: 2px; }
.svc-card .host-specs { margin: 0; }
.svc-card .ho-note { margin: 0; }
.svc-card .ho-check { margin: 0; }
.ho-kv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--text-color); }
.ho-kv > span:first-child { min-width: 90px; color: var(--text-muted); font-size: 13px; }
.ho-access { padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-2); }
.ho-access-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); }
.ho-access pre { margin: 6px 0; white-space: pre-wrap; word-break: break-word; font: 13px/1.5 var(--font-mono, monospace); color: var(--text-color); }
.ho-access p { margin: 0; font-size: 12px; }
.ho-paid { font-size: 12px; }

.ho-bind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ho-bind textarea { grid-column: 1 / -1; padding: 10px 12px; resize: vertical; font: 13px var(--font-body); }
.ho-bind input { height: 40px; padding: 0 12px; }
@media (max-width: 600px) {
    .ho-bind { grid-template-columns: 1fr; }
    .svc-head { flex-direction: column; }
}

/* Окно заказа: свои плитки выбора срока и ОС / игры, переключатель, индикатор «Настройка сервера» */
.bs-modal.ho-modal { max-width: 640px; }
.ho-section-title { margin: 4px 0 8px; font-size: 12px; color: var(--text-muted); }
.ho-periods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.ho-period, .ho-tile, .ho-chip {
    position: relative; border: 1px solid var(--border-color); background: var(--surface-2); color: var(--text-color);
    font: inherit; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, transform 0.1s;
}
.ho-period:hover, .ho-tile:hover, .ho-chip:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.ho-period:active, .ho-tile:active, .ho-chip:active { transform: scale(0.98); }
.ho-period.active, .ho-tile.active, .ho-chip.active { border-color: var(--accent-color); background: var(--accent-soft); }
.ho-period { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); text-align: left; }
.ho-period b { font-size: 14px; }
.ho-period span { font-size: 15px; font-weight: 600; }
.ho-period small { font-size: 11px; color: var(--text-muted); }
.ho-off { position: absolute; top: 8px; right: 8px; padding: 1px 6px; border-radius: 999px; font: 600 11px var(--font-body);
          font-style: normal; background: rgba(34, 197, 94, 0.18); color: #22c55e; }
.ho-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; }
.ho-tile { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
           padding: 10px; border-radius: var(--radius-md); text-align: left; }
.ho-tile b { font-size: 13px; line-height: 1.2; overflow: hidden; overflow-wrap: break-word;
             display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }  /* «Windows Server» — в две строки, не «Windows…» */
.ho-tile small { grid-column: 2; font-size: 11px; color: var(--text-muted); }
.ho-tile-badge { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
                 border-radius: 8px; font: 700 14px var(--font-head); color: #fff; background: var(--badge, #64748b); }
.ho-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow-y: auto; margin-bottom: 16px; padding: 2px; }
.ho-chips:empty { display: none; }
.ho-chip { padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.ho-name-label { margin-bottom: 14px; }
#ho-pay.is-blocked { opacity: 0.55; }

.bs-switch { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; cursor: pointer; user-select: none;
             font-size: 14px; color: var(--text-color); }
.bs-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bs-switch-track { position: relative; flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--border-color);
                   transition: background-color 0.2s; }
.bs-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
                          background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 0.2s; }
.bs-switch input:checked + .bs-switch-track { background: var(--accent-color); }
.bs-switch input:checked + .bs-switch-track::after { transform: translateX(18px); }
.bs-switch input:focus-visible + .bs-switch-track { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.svc-card .bs-switch { margin: 0; }

.ho-spin { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border-radius: 50%;
           border: 2px solid currentColor; border-right-color: transparent; animation: ho-spin 0.8s linear infinite; }
.tag-pill:has(.ho-spin)::before { display: none; }
@keyframes ho-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ho-spin { animation-duration: 2.4s; } }
@media (max-width: 600px) {
    .ho-periods { grid-template-columns: repeat(2, 1fr); }
    .ho-tiles { grid-template-columns: repeat(2, 1fr); }
}
/* Логотип ОС на плитке: белый силуэт из SVG поверх фирменного цвета */
.ho-tile-logo { display: block; width: 18px; height: 18px; background: #fff;
                -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }

/* «Мои проекты»: карандаш — правка названия на русском и английском */
.my-project-edit { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
                   border: 1px solid var(--border-color); border-radius: 10px; background: transparent; color: var(--text-muted);
                   cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.my-project-edit:hover { color: var(--accent-text); border-color: rgba(var(--accent-rgb), 0.5); }
.my-project-edit .nav-svg { width: 16px; height: 16px; }

/* Встречное уведомление: «Оспорить снятие» в «Мои проекты» */
.rc-line { margin-top: 2px; }
.rc-proof { min-height: 70px; }
.rc-faith { align-items: flex-start; line-height: 1.4; margin-top: 2px; }
.rc-faith input { margin-top: 2px; }

/* График сотрудника (staff-schedule.js) */
.st-modes, .st-patterns { margin: 8px 0 12px; }
.st-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-bottom: 8px; }
.st-day { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.st-day input { height: 38px; padding: 0 10px; }
.st-now { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
@media (max-width: 600px) { .st-day { grid-template-columns: 1fr; } }

/* «О проекте» (overview.js): кнопка в карточке и окно с деревом файлов и README */
.card-top { position: relative; }
.card-info-btn { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center;
                 width: 28px; height: 28px; border: 1px solid var(--border-color); border-radius: 8px;
                 background: transparent; color: var(--text-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.card-info-btn:hover { color: var(--accent-text); border-color: rgba(var(--accent-rgb), 0.5); }
.card-info-btn .nav-svg { width: 16px; height: 16px; }
.bs-modal.ov-modal { max-width: 720px; }
.ov-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; }
.ov-section-title { margin: 14px 0 6px; font-size: 12px; color: var(--text-muted); }
.ov-tree { max-height: 240px; overflow: auto; padding: 10px 12px; border: 1px solid var(--border-color);
           border-radius: var(--radius-md); background: var(--surface-2); font: 13px/1.6 var(--font-mono, monospace); }
.ov-dir > summary { cursor: pointer; color: var(--text-color); list-style: none; }
.ov-dir > summary::-webkit-details-marker { display: none; }
.ov-dir > summary::before { content: "▸ "; color: var(--text-muted); }
.ov-dir[open] > summary::before { content: "▾ "; }
.ov-children { padding-left: 16px; }
.ov-file { color: var(--text-muted); padding-left: 14px; }
.ov-readme { max-height: 320px; overflow: auto; margin: 0; padding: 12px; white-space: pre-wrap; word-break: break-word;
             border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-2);
             font: 13px/1.55 var(--font-mono, monospace); color: var(--text-color); }
.ov-note { margin-top: 12px; font-size: 12px; }
.card-top .card-flag { margin-left: auto; }               /* метка «Моё / Открыто» — справа, рядом с кнопкой «О проекте» */
.card-top .card-flag + .card-info-btn { margin-left: 0; }
.up-more { display: block; margin: 14px auto 0; }   /* «Показать ещё отзывы» на странице продавца */

/* «Найти у Aurorix» (hosting-orders.js) */
.hoa-aurorix { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.hoa-cand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin-bottom: 8px; padding: 10px 12px;
            border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-color);
            font: inherit; text-align: left; cursor: pointer; }
.hoa-cand:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.hoa-cand.is-best { border-color: var(--accent-color); }
.hoa-cand .tag-pill { margin-top: 4px; }

/* Ответ продавца на отзыв (reviews.js) */
.up-reply { margin: 8px 0 0 14px; padding: 8px 12px; border-left: 2px solid var(--accent-color); background: var(--surface-2);
            border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.up-reply-head { font-size: 12px; color: var(--accent-text); }
.up-reply p { margin: 4px 0 0; font-size: 14px; color: var(--text-color); white-space: pre-wrap; }
.up-reply-btn { margin-top: 6px; }
.rp-quote { margin-bottom: 10px; color: var(--text-muted); }

/* Номер телефона (phone.js) */
.lk-row-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.lk-row-head .settings-card-title { margin: 0; }
.ph-row { display: flex; gap: 8px; margin: 10px 0 8px; flex-wrap: wrap; }
.ph-row input { flex: 1 1 200px; height: 42px; padding: 0 12px; }

/* Регистрация «Почта / Телефон» и выбор способа 2FA (auth-phone.js) */
.reg-mode-tabs { margin: 0 0 12px; }
.tfa-option { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; padding: 10px 12px; cursor: pointer;
              border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-2); }
.tfa-option:has(input:checked) { border-color: var(--accent-color); background: var(--accent-soft); }
.tfa-option.is-off { opacity: 0.5; cursor: not-allowed; }
.tfa-option span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--text-color); }
.tfa-option small { font-size: 12px; color: var(--text-muted); }
.tfa-option input { margin-top: 3px; }

/* Своя галочка .bs-check (sessions.js → bsCheck): квадрат «пружинит», отметка рисуется линией */
.bs-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; user-select: none; font-size: 13px;
            line-height: 1.4; color: var(--text-muted); }
.bs-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bs-check-box { flex: none; position: relative; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
                border: 1.5px solid var(--border-color); background: var(--surface-2);
                transition: background-color 0.2s, border-color 0.2s, transform 0.15s; }
.bs-check-box svg { position: absolute; inset: 2px; width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.2;
                    stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16;
                    transition: stroke-dashoffset 0.25s ease 0.05s; }
.bs-check:hover .bs-check-box { border-color: rgba(var(--accent-rgb), 0.6); }
.bs-check input:checked + .bs-check-box { background: var(--accent-color); border-color: var(--accent-color); animation: bs-check-pop 0.28s ease; }
.bs-check input:checked + .bs-check-box svg { stroke-dashoffset: 0; }
.bs-check input:focus-visible + .bs-check-box { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.bs-check.is-off { opacity: 0.5; cursor: not-allowed; }
.bs-check-text { display: flex; flex-direction: column; gap: 2px; }
.bs-check-text b { font-size: 14px; color: var(--text-color); font-weight: 600; }
.bs-check-text small { font-size: 12px; color: var(--text-muted); }
@keyframes bs-check-pop { 0% { transform: scale(1); } 45% { transform: scale(0.82); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bs-check-box, .bs-check-box svg { transition: none; animation: none !important; } }
#lk-phone-card .bs-check { margin: 4px 0 6px; }
.tfa-option .bs-check { width: 100%; }

/* Устройства и сессии */
.ses-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.ses-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px;
           border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-2); }
.ses-row.is-current { border-color: rgba(var(--accent-rgb), 0.5); }
.ses-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; color: var(--text-color); }
.ses-main .admin-muted { font-size: 12px; }
@media (max-width: 600px) { .ses-row { flex-direction: column; align-items: flex-start; } }
.tfa-option .bs-check-box { display: block; }   /* старое правило «.tfa-option span» не должно задевать галочку */
.ses-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: 6px;
             padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text);
             font: 600 12px var(--font-body); vertical-align: 2px; }   /* число сессий рядом с «Устройства и сессии» */

/* Юридическая информация (legal.js) */
.legal-layout { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.legal-side { position: sticky; top: 90px; }
.legal-doc { min-height: 320px; }
.legal-body { font-size: 15px; line-height: 1.65; color: var(--text-color); }
.legal-body h2, .legal-body h3 { margin: 18px 0 8px; }
.legal-body p, .legal-body li { margin: 0 0 10px; }
.legal-req { margin-top: 24px; font-size: 12px; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; } .legal-side { position: static; } }

/* Аватарки (avatar.js) */
.header-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.lk-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.lk-avatar:has(img) { padding: 0; overflow: hidden; }
.up-avatar { overflow: hidden; }
.up-avatar img { width: 100%; height: 100%; object-fit: cover; }
.av-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.av-preview { width: 88px; height: 88px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden;
              border-radius: 50%; border: 1px solid var(--border-color); background: var(--surface-2); color: var(--text-muted); }
.av-preview img { width: 100%; height: 100%; object-fit: cover; }
.av-preview .nav-svg { width: 40px; height: 40px; }
.av-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.av-actions .input-hint { flex-basis: 100%; margin: 4px 0 0; }
.av-upload { position: relative; cursor: pointer; }
.av-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Кнопки управления сервером (hosting-orders.js) */
.ho-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ho-action { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; cursor: pointer;
             border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-2); color: var(--text-color);
             font: 500 13px var(--font-body); transition: border-color 0.15s, color 0.15s, transform 0.1s; }
.ho-action .nav-svg { width: 16px; height: 16px; }
.ho-action:hover { border-color: rgba(var(--accent-rgb), 0.6); color: var(--accent-text); }
.ho-action:active { transform: scale(0.97); }
.ho-action.is-danger:hover { border-color: rgba(239, 68, 68, 0.6); color: var(--danger); }
.ho-danger-text { color: var(--danger); }
@media (max-width: 600px) { .ho-action span { display: none; } .ho-action { width: 40px; justify-content: center; padding: 0; } }

/* Страница услуги (service-panel.js) */
.sp { display: flex; flex-direction: column; gap: 14px; }
.sp-top { margin-bottom: -4px; }
.sp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.sp-title .page-title { margin: 0 0 6px; }
.sp-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); }
.sp-status code { color: var(--text-color); }
.sp-quick { display: flex; gap: 8px; }
.sp-icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
               border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-2); color: var(--text-color);
               transition: border-color 0.15s, color 0.15s; }
.sp-icon-btn:hover { border-color: rgba(var(--accent-rgb), 0.6); color: var(--accent-text); }
.sp-icon-btn.is-danger:hover { border-color: rgba(239, 68, 68, 0.6); color: var(--danger); }
.sp-icon-btn .nav-svg { width: 18px; height: 18px; }
.sp-tabs { flex-wrap: wrap; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sp-grid-2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.sp-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--border-color);
           border-radius: var(--radius-lg); background: var(--panel-bg); }
.sp-card-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.sp-big { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--text-color); }
.sp-card .host-specs { margin: 0; }
.sp-card .admin-link-btn { align-self: flex-start; }
.sp-console-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.sp-console { width: 100%; height: min(70vh, 640px); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
              background: #000; overflow: hidden; }
.sp-console:fullscreen { height: 100vh; border-radius: 0; }
.sp-load-note { margin: 0; font-size: 13px; }
.sp-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.sp-chart { position: relative; }
.sp-svg { width: 100%; height: auto; display: block; touch-action: none; }
.sp-grid-line { stroke: var(--border-color); stroke-width: 1; }
.sp-axis { fill: var(--text-muted); font: 11px var(--font-body); }
.sp-cross { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.sp-dot { stroke: var(--panel-bg); stroke-width: 2; }
.sp-tip { position: absolute; top: 0; z-index: 2; min-width: 120px; padding: 8px 10px; pointer-events: none; font-size: 12px;
          border: 1px solid var(--border-color); border-radius: 8px; background: var(--panel-bg); color: var(--text-color);
          box-shadow: var(--shadow); }
.sp-tip div, .sp-legend span { display: flex; align-items: center; gap: 6px; }
.sp-tip i, .sp-legend i { width: 10px; height: 3px; border-radius: 2px; background: var(--c); display: inline-block; }
.sp-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-muted); }
.sp-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; }
.sp-list-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 10px; font-size: 13px;
               border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-color); }
.ho-action-main { border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent-text); }
@media (max-width: 600px) {
    .sp-charts, .sp-grid-2 { grid-template-columns: 1fr; }
    .sp-list-row { grid-template-columns: 1fr; gap: 2px; }
    .ho-action-main span { display: inline; }
}
/* «Ресурсы» на странице услуги — в одну колонку, длинное (модель CPU) переносится, а не обрезается */
.sp-card .host-specs { grid-template-columns: 1fr; }
.sp-card .spec-pill { white-space: normal; overflow: visible; }