/* ============================================================
 * TaskVibe — Cyber Nano (tactical / green-nano)
 * ============================================================
 *
 * Активация: <body data-color-palette="cyber-nano">
 *
 * Построена по образцу vibe.css / glass.css: тот же словарь
 * --vd-* токенов, тот же scoping body[data-color-palette="cyber-nano"].
 * Ничего в site.css / 01-tokens.css / других палитрах не трогает.
 *
 * Design language: nano-material HUD, тёмное стекло, тонкие
 * зелёные контуры, сдержанный glow, лёгкий hex/tech-декор.
 * Правило плотности: 80% обычный Workplace, 15% tech-деталей, 5% wow.
 * ============================================================ */


/* ============================================================
   01. ТОКЕНЫ
   ============================================================ */

body[data-color-palette="cyber-nano"] {
    --vd-bg: #050d0a;
    --vd-bg-deep: #020806;

    --vd-panel: rgba(10, 28, 20, 0.78);
    --vd-panel-strong: rgba(8, 24, 16, 0.92);
    --vd-panel-soft: rgba(16, 40, 28, 0.5);

    --vd-border: rgba(61, 255, 154, 0.22);
    --vd-border-soft: rgba(61, 255, 154, 0.12);
    --vd-border-strong: rgba(61, 255, 154, 0.5);

    --vd-accent: #3dff9a;
    --vd-accent-strong: #1f9d53;
    --vd-accent-soft: rgba(61, 255, 154, 0.16);
    --vd-accent-soft-2: rgba(61, 255, 154, 0.3);
    --vd-accent-glow: 0 0 20px rgba(61, 255, 154, 0.30), 0 0 46px rgba(61, 255, 154, 0.12);

    --vd-chrome-bg: #06140c;
    --vd-chrome-bg-soft: #0a2216;
    --vd-chrome-flat: #0d2a1c;

    --vd-chrome-gradient-135-from: rgba(12, 36, 24, 0.95);
    --vd-chrome-gradient-135-to: rgba(4, 18, 12, 0.92);

    --vd-chrome-sidebar-glass-from: rgba(10, 30, 20, 0.90);
    --vd-chrome-sidebar-glass-to: rgba(3, 14, 10, 0.88);

    --vd-chrome-panel-180-from: rgba(12, 38, 26, 0.95);
    --vd-chrome-panel-180-to: rgba(4, 18, 12, 0.92);

    --vd-chrome-kb-head-180-from: rgba(12, 38, 26, 0.95);
    --vd-chrome-kb-head-180-to: rgba(4, 18, 12, 0.92);

    --vd-chrome-shadow-rgb: 0, 0, 0;

    --vd-chrome-text: #eafff4;
    --vd-chrome-text-muted: rgba(210, 246, 226, 0.68);
    --vd-chrome-text-faint: rgba(210, 246, 226, 0.40);

    --vd-chrome-border: rgba(61, 255, 154, 0.20);
    --vd-chrome-active-bg: rgba(24, 47, 36, 0.78);
    --vd-chrome-active-text: #eafff4;

    --vd-text: #e6fbf0;
    --vd-text-strong: #ffffff;
    --vd-text-muted: rgba(216, 246, 228, 0.68);
    --vd-text-faint: rgba(216, 246, 228, 0.40);

    --vd-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.30);
    --vd-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.40);
    --vd-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);

    --vd-glass-card-from: rgba(10, 34, 22, 0.82);
    --vd-glass-card-to: rgba(4, 16, 10, 0.64);

    /* UI consistency — home / chat / profile (S4) */
    --vd-card-head-bg: transparent;
    --vd-card-head-fg: var(--vd-text);
    --vd-card-head-border: var(--vd-border-soft);
    --vd-stat-delta-up: #35e0a1;
    --vd-stat-delta-dn: #ff8a5b;

    --zen-msg-area-bg: linear-gradient(180deg, rgba(8, 30, 18, 0.94) 0%, rgba(2, 12, 8, 0.98) 100%);
    --zen-msg-area-fg: var(--vd-text);
    --zen-msg-area-muted: var(--vd-text-muted);
    --zen-msg-composer-bg: var(--vd-panel-strong);
    --zen-msg-border: var(--vd-border);
    --zen-msg-row-active-bg: linear-gradient(90deg, rgba(61, 255, 154, 0.24) 0%, rgba(61, 255, 154, 0.08) 100%);
    --zen-msg-row-active-ring: rgba(61, 255, 154, 0.40);
    --zen-msg-panel-surface: rgba(6, 22, 14, 0.75);
    --zen-msg-panel-surface-soft: rgba(10, 30, 20, 0.55);

    --vd-profile-panel-glass-bg: rgba(8, 28, 18, 0.75);
    --vd-profile-panel-glass-border: rgba(61, 255, 154, 0.22);
    --vd-profile-tabs-bar-bg: rgba(10, 30, 20, 0.55);

    --vd-chip-cyan-bg: rgba(61, 255, 154, 0.16);
    --vd-chip-cyan-text: #b6ffd6;
    --vd-chip-cyan-border: rgba(61, 255, 154, 0.35);

    /* Фирменные Cyber Nano переменные (не легаси, только эта тема) */
    --vd-tech-cut: 10px;
    --vd-tech-line: rgba(61, 255, 154, 0.35);
    --vd-tech-glow: rgba(61, 255, 154, 0.22);
    --vd-tech-hex-opacity: 0.06;

    color-scheme: dark;
}


/* ============================================================
   02. BODY / БАЗА
   ============================================================ */

body[data-color-palette="cyber-nano"] {
    background-color: var(--vd-bg);
    color: var(--vd-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body[data-color-palette="cyber-nano"] ::selection {
    color: #ffffff;
    background: rgba(61, 255, 154, 0.30);
}

body[data-color-palette="cyber-nano"] a {
    color: var(--vd-accent);
    transition: color .18s ease, opacity .18s ease;
}

body[data-color-palette="cyber-nano"] a:hover {
    color: #7affc0;
}

body[data-color-palette="cyber-nano"] h1,
body[data-color-palette="cyber-nano"] h2,
body[data-color-palette="cyber-nano"] h3,
body[data-color-palette="cyber-nano"] h4,
body[data-color-palette="cyber-nano"] h5,
body[data-color-palette="cyber-nano"] h6 {
    color: #f2fdff;
    letter-spacing: -0.015em;
}

body[data-color-palette="cyber-nano"] .text-muted {
    color: var(--vd-text-muted) !important;
}

body[data-color-palette="cyber-nano"] small {
    color: var(--vd-text-muted);
}

/* Bootstrap utilities meant for light surfaces — remapped like cyber-blue / dark */
body[data-color-palette="cyber-nano"] .main-wrapper .text-dark:not(.badge) {
    color: var(--vd-text-strong) !important;
}

body[data-color-palette="cyber-nano"] .main-wrapper .text-body {
    color: var(--vd-text) !important;
}


/* ============================================================
   03. SCROLLBAR
   ============================================================ */

body[data-color-palette="cyber-nano"] ::-webkit-scrollbar-thumb {
    background: rgba(61, 255, 154, 0.38);
    background-clip: padding-box;
    border: 2px solid transparent;
}

body[data-color-palette="cyber-nano"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(61, 255, 154, 0.62);
    background-clip: padding-box;
    border: 2px solid transparent;
}


/* ============================================================
   04. SIDEBAR / TOPBAR (chrome)
   ============================================================ */

body[data-color-palette="cyber-nano"] .vd-sidebar {
    background: linear-gradient(180deg, var(--vd-chrome-sidebar-glass-from) 0%, var(--vd-chrome-sidebar-glass-to) 100%) !important;
    color: var(--vd-chrome-text) !important;
    border-right: 1px solid var(--vd-chrome-border) !important;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

body[data-color-palette="cyber-nano"] .vd-topbar {
    background: rgba(6, 20, 12, 0.82) !important;
    border-bottom: 1px solid var(--vd-chrome-border) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* CTA / active tab / search — dark green glass (#182F24), neon rim (не solid cyan fill) */
body[data-color-palette="cyber-nano"] .vd-side-primary .vd-btn-primary {
    background: rgba(24, 47, 36, 0.82);
    border: 1px solid rgba(61, 255, 154, 0.55);
    color: #eafff4;
    box-shadow:
        0 0 12px rgba(61, 255, 154, 0.18),
        inset 0 0 0 1px rgba(61, 255, 154, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body[data-color-palette="cyber-nano"] .vd-side-primary .vd-btn-primary:hover {
    background: rgba(24, 47, 36, 0.95);
    border-color: var(--vd-accent);
    color: #ffffff;
    box-shadow: 0 0 18px rgba(61, 255, 154, 0.28);
    transform: translateY(-1px);
}

body[data-color-palette="cyber-nano"] .vd-tab.is-active {
    color: #eafff4 !important;
    background: rgba(24, 47, 36, 0.78);
    border-color: rgba(61, 255, 154, 0.55);
    box-shadow: 0 0 10px rgba(61, 255, 154, 0.16);
}

body[data-color-palette="cyber-nano"] .vd-tab.is-active i {
    color: var(--vd-accent) !important;
}

body[data-color-palette="cyber-nano"] button.vd-topbar-search {
    background: rgba(24, 47, 36, 0.55);
    border-color: rgba(61, 255, 154, 0.28);
    color: var(--vd-chrome-text-muted);
}

body[data-color-palette="cyber-nano"] button.vd-topbar-search:hover {
    background: rgba(24, 47, 36, 0.78);
    border-color: rgba(61, 255, 154, 0.5);
    color: var(--vd-chrome-text);
}

body[data-color-palette="cyber-nano"] .vd-topbar-search i {
    color: var(--vd-accent);
}

/* Hex overlay only. Do not set position/overflow on .vd-topbar —
   the shell keeps it position:fixed with left: var(--sidebar-width). */
body[data-color-palette="cyber-nano"] .vd-topbar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--vd-tech-hex-opacity);
    background-image:
        linear-gradient(30deg, var(--vd-accent) 12%, transparent 12.5%, transparent 87%, var(--vd-accent) 87.5%, var(--vd-accent)),
        linear-gradient(150deg, var(--vd-accent) 12%, transparent 12.5%, transparent 87%, var(--vd-accent) 87.5%, var(--vd-accent)),
        linear-gradient(30deg, var(--vd-accent) 12%, transparent 12.5%, transparent 87%, var(--vd-accent) 87.5%, var(--vd-accent)),
        linear-gradient(150deg, var(--vd-accent) 12%, transparent 12.5%, transparent 87%, var(--vd-accent) 87.5%, var(--vd-accent));
    background-size: 34px 60px;
    background-position: 0 0, 0 0, 17px 30px, 17px 30px;
    mask-image: linear-gradient(90deg, transparent, black 30%, black 70%, transparent);
}

body[data-color-palette="cyber-nano"] .vd-sidebar .vd-nav-link.active,
body[data-color-palette="cyber-nano"] .vd-sidebar .vd-nav-link[aria-current="page"] {
    background: var(--vd-chrome-active-bg) !important;
    color: var(--vd-chrome-active-text) !important;
    border-left: 2px solid var(--vd-accent);
    box-shadow: inset 0 0 14px rgba(61, 255, 154, 0.10);
}

body[data-color-palette="cyber-nano"] .vd-sidebar .vd-nav-link:hover {
    background: rgba(61, 255, 154, 0.10) !important;
    color: var(--vd-chrome-active-text) !important;
}


/* ============================================================
   05. CARDS / GLASS SURFACES
   ============================================================ */

body[data-color-palette="cyber-nano"] .vd-glass-card:not(.vd-glass-card--guest-cta) {
    background: linear-gradient(135deg, var(--vd-glass-card-from) 0%, var(--vd-glass-card-to) 100%) !important;
    border: 1px solid var(--vd-border) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--vd-shadow-md), 0 0 22px var(--vd-tech-glow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
}

body[data-color-palette="cyber-nano"] .main-wrapper .card:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark):not(.vd-glass-card):not(.zen-auth-card),
body[data-color-palette="cyber-nano"] .tw-surface-card {
    background: linear-gradient(135deg, var(--vd-glass-card-from) 0%, var(--vd-glass-card-to) 100%) !important;
    border: 1px solid var(--vd-border) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--vd-shadow-sm);
}

body[data-color-palette="cyber-nano"] .main-wrapper .card-header,
body[data-color-palette="cyber-nano"] .main-wrapper .card-footer {
    background: rgba(8, 22, 30, 0.4) !important;
    border-color: var(--vd-border-soft) !important;
}

/* tactical corner accent — угловая рамка, декоративный, не на каждой карточке */
body[data-color-palette="cyber-nano"] .vd-glass-card::before,
body[data-color-palette="cyber-nano"] .vd-cyber-corner::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    border-top: 1px solid var(--vd-tech-line);
    border-right: 1px solid var(--vd-tech-line);
    pointer-events: none;
    opacity: .8;
}

body[data-color-palette="cyber-nano"] .vd-sla-ribbon {
    background: linear-gradient(135deg, var(--vd-glass-card-from) 0%, var(--vd-glass-card-to) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* ============================================================
   06. BUTTONS
   ============================================================ */

body[data-color-palette="cyber-nano"] .main-wrapper .btn-primary {
    background: linear-gradient(135deg, var(--vd-accent) 0%, var(--vd-accent-strong) 100%);
    border: none;
    color: #06140c;
    font-weight: 600;
    box-shadow: var(--vd-accent-glow);
}

body[data-color-palette="cyber-nano"] .main-wrapper .btn-primary:hover {
    filter: brightness(1.08);
}

body[data-color-palette="cyber-nano"] .main-wrapper .btn-outline-primary {
    color: var(--vd-accent);
    border-color: var(--vd-border-strong);
}

body[data-color-palette="cyber-nano"] .main-wrapper .btn-outline-primary:hover {
    background: var(--vd-accent-soft);
    color: #eafff4;
    border-color: var(--vd-accent);
}


/* ============================================================
   07. FORMS
   ============================================================ */

body[data-color-palette="cyber-nano"] .main-wrapper .form-control,
body[data-color-palette="cyber-nano"] .main-wrapper .form-select,
body[data-color-palette="cyber-nano"] .main-wrapper textarea.form-control {
    background: rgba(6, 17, 24, 0.65) !important;
    border: 1px solid var(--vd-border) !important;
    color: var(--vd-text);
}

body[data-color-palette="cyber-nano"] .main-wrapper .form-control::placeholder {
    color: var(--vd-text-faint);
}

body[data-color-palette="cyber-nano"] .main-wrapper .form-control:focus,
body[data-color-palette="cyber-nano"] .main-wrapper .form-select:focus {
    border-color: var(--vd-accent) !important;
    box-shadow: 0 0 0 3px rgba(61, 255, 154, 0.18);
}

body[data-color-palette="cyber-nano"] .main-wrapper .form-control[type="file"]::file-selector-button {
    background: linear-gradient(135deg, var(--vd-accent) 0%, var(--vd-accent-strong) 100%) !important;
    color: #06140c !important;
    border: none !important;
    border-radius: 0.45rem;
    margin-right: 0.65rem;
    padding: 0.35rem 0.85rem;
    font-weight: 600;
}


/* ============================================================
   08. TABLES
   ============================================================ */

body[data-color-palette="cyber-nano"] .main-wrapper .zen-data-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--vd-text);
    --bs-table-border-color: var(--vd-border);
    --bs-table-striped-bg: rgba(61, 255, 154, 0.03);
    --bs-table-hover-bg: var(--vd-accent-soft);
    --bs-table-hover-color: var(--vd-text-strong);
}

body[data-color-palette="cyber-nano"] .main-wrapper .zen-data-table thead th {
    background: rgba(8, 28, 18, 0.75) !important;
    color: rgba(210, 246, 226, 0.85) !important;
    border-color: var(--vd-border) !important;
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .04em;
}

body[data-color-palette="cyber-nano"] .main-wrapper .zen-data-table tbody td,
body[data-color-palette="cyber-nano"] .main-wrapper .zen-data-table tbody th {
    background-color: rgba(8, 24, 16, 0.32) !important;
    color: var(--vd-text) !important;
    border-color: var(--vd-border) !important;
}

body[data-color-palette="cyber-nano"] .main-wrapper .zen-data-table.table-hover > tbody > tr:hover > * {
    background-color: var(--vd-accent-soft) !important;
    color: var(--vd-text-strong) !important;
}


/* ============================================================
   09. DROPDOWN / MODAL
   ============================================================ */

body[data-color-palette="cyber-nano"] .dropdown-menu:not(.bg-white):not(.dropdown-menu-light) {
    background: linear-gradient(135deg, var(--vd-chrome-gradient-135-from) 0%, var(--vd-chrome-gradient-135-to) 100%);
    border: 1px solid var(--vd-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body[data-color-palette="cyber-nano"] .dropdown-item {
    color: var(--vd-text);
}

body[data-color-palette="cyber-nano"] .dropdown-item:hover,
body[data-color-palette="cyber-nano"] .dropdown-item:focus {
    background: var(--vd-accent-soft);
    color: var(--vd-text-strong);
}

body[data-color-palette="cyber-nano"] .modal-content {
    background: linear-gradient(135deg, var(--vd-chrome-gradient-135-from) 0%, var(--vd-chrome-gradient-135-to) 100%);
    border: 1px solid var(--vd-border);
}

body[data-color-palette="cyber-nano"] .modal-content .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}


/* ============================================================
   10. BADGES / CHIPS / STATUS
   ============================================================ */

body[data-color-palette="cyber-nano"] .badge.bg-primary {
    background: var(--vd-accent-soft) !important;
    color: var(--vd-accent) !important;
    border: 1px solid var(--vd-chip-cyan-border);
}

/* HUD-style status label — маленькая точка + подпись капсом, вместо цирка на каждой странице */
body[data-color-palette="cyber-nano"] .vd-cyber-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vd-accent);
}

body[data-color-palette="cyber-nano"] .vd-cyber-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--vd-accent);
    box-shadow: 0 0 8px var(--vd-accent), 0 0 2px var(--vd-accent);
}


/* ============================================================
   11. KPI / STAT CARDS (Home)
   ============================================================ */

body[data-color-palette="cyber-nano"] .vd-stat-value,
body[data-color-palette="cyber-nano"] .vd-kpi-value {
    color: var(--vd-text-strong);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px rgba(61, 255, 154, 0.20);
}

body[data-color-palette="cyber-nano"] .vd-stat-delta-up,
body[data-color-palette="cyber-nano"] [data-delta="up"] {
    color: var(--vd-stat-delta-up) !important;
}

body[data-color-palette="cyber-nano"] .vd-stat-delta-dn,
body[data-color-palette="cyber-nano"] [data-delta="down"] {
    color: var(--vd-stat-delta-dn) !important;
}

/* sparkline / progress accent — если рендерится SVG-полоской через currentColor/--vd-accent */
body[data-color-palette="cyber-nano"] .vd-sparkline,
body[data-color-palette="cyber-nano"] .progress-bar {
    color: var(--vd-accent);
}

body[data-color-palette="cyber-nano"] .progress {
    background: rgba(61, 255, 154, 0.08);
}

body[data-color-palette="cyber-nano"] .progress-bar {
    background: linear-gradient(90deg, var(--vd-accent-strong), var(--vd-accent));
    box-shadow: 0 0 12px rgba(61, 255, 154, 0.25);
}


/* ============================================================
   12. HERO / WELCOME BLOCK
   ============================================================ */

body[data-color-palette="cyber-nano"] .vd-home .vd-home-hero.zen-ticket-hero {
    background: linear-gradient(135deg, rgba(10, 32, 42, 0.55) 0%, rgba(3, 12, 17, 0.78) 100%) !important;
    border: 1px solid var(--vd-border) !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45), 0 0 26px rgba(61, 255, 154, 0.10) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    position: relative;
    overflow: hidden;
}

body[data-color-palette="cyber-nano"] .vd-home .vd-home-hero.zen-ticket-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--vd-tech-hex-opacity);
    background-image:
        linear-gradient(30deg, var(--vd-accent) 12%, transparent 12.5%, transparent 87%, var(--vd-accent) 87.5%, var(--vd-accent)),
        linear-gradient(150deg, var(--vd-accent) 12%, transparent 12.5%, transparent 87%, var(--vd-accent) 87.5%, var(--vd-accent));
    background-size: 42px 74px;
    mask-image: radial-gradient(ellipse 70% 90% at 85% 30%, black, transparent 70%);
}


/* ============================================================
   13. МЕССЕНДЖЕР (zen-body токены)
   ============================================================ */

body.zen-body[data-color-palette="cyber-nano"] {
    --zen-msg-area-bg: linear-gradient(180deg, rgba(8, 30, 18, 0.94) 0%, rgba(2, 12, 8, 0.98) 100%);
    --zen-msg-area-fg: var(--vd-text);
    --zen-msg-area-muted: var(--vd-text-muted);
    --zen-msg-area-empty-icon: var(--vd-accent);
    --zen-msg-panel-surface: rgba(6, 22, 14, 0.75);
    --zen-msg-panel-surface-soft: rgba(10, 30, 20, 0.55);
    --zen-msg-composer-bg: var(--vd-panel-strong);
    --zen-msg-border: var(--vd-border);
    --zen-msg-head-search-bg: rgba(61, 255, 154, 0.08);
    --zen-msg-head-search-fg: var(--vd-chrome-text);
    --zen-msg-head-search-muted: var(--vd-chrome-text-muted);
    --zen-msg-head-badge-bg: rgba(61, 255, 154, 0.14);
    --zen-msg-head-badge-fg: var(--vd-chrome-text);
    --zen-msg-row-active-bg: linear-gradient(90deg, rgba(61, 255, 154, 0.24) 0%, rgba(61, 255, 154, 0.08) 100%);
    --zen-msg-row-active-ring: rgba(61, 255, 154, 0.40);
    --zen-msg-tg-bubble-mine-fg: #06140c;
    --zen-msg-tg-bubble-other-bg: var(--vd-panel-strong);
    --zen-msg-tg-bubble-other-fg: var(--vd-text);
}

body.zen-body[data-color-palette="cyber-nano"] .zen-messenger-bubbles--telegram .zen-messenger-bubble-mine {
    background: linear-gradient(135deg, var(--vd-accent) 0%, var(--vd-accent-strong) 100%) !important;
    color: var(--zen-msg-tg-bubble-mine-fg) !important;
}

body.zen-body[data-color-palette="cyber-nano"] .zen-messenger-bubbles--telegram .zen-messenger-bubble-other {
    background: var(--zen-msg-tg-bubble-other-bg) !important;
    color: var(--zen-msg-tg-bubble-other-fg) !important;
    border-color: var(--zen-msg-border) !important;
}

body.zen-body[data-color-palette="cyber-nano"] .zen-messenger-msg-area .btn-outline-secondary {
    color: var(--zen-msg-area-fg) !important;
    border-color: var(--zen-msg-border) !important;
    background: transparent !important;
}

body.zen-body[data-color-palette="cyber-nano"] .zen-messenger-msg-area .btn-outline-secondary:hover {
    background: var(--zen-msg-panel-surface-soft) !important;
}

body.zen-body[data-color-palette="cyber-nano"] .zen-chat-group-scroll .list-group-item.active {
    color: var(--vd-chrome-active-text);
}


/* ============================================================
   14. CMD+K
   ============================================================ */

body[data-color-palette="cyber-nano"] .vd-cmdk-item-icon {
    color: var(--vd-accent);
}

body[data-color-palette="cyber-nano"] .vd-cmdk-item.active,
body[data-color-palette="cyber-nano"] .vd-cmdk-item:hover {
    background: var(--vd-accent-soft) !important;
}


/* ============================================================
   15. AI-ПОМОЩНИК — signature accent
   ============================================================
   Точный класс из _HomeAiTeaser.cshtml: .vd-home-ai-card
   (сам является .vd-glass-card, position:relative уже задан в блоке 05).
   Декор — светящийся треугольник + hex-sparkle — строго ВНУТРИ
   существующих границ карточки, никакого изменения ширины/сетки.
   ============================================================ */

body[data-color-palette="cyber-nano"] .vd-home-ai-card {
    overflow: hidden;
}

body[data-color-palette="cyber-nano"] .vd-home-ai-card > * {
    position: relative;
    z-index: 1;
}

body[data-color-palette="cyber-nano"] .vd-home-ai-card::after {
    content: "";
    position: absolute;
    right: -6%;
    bottom: -12%;
    width: 62%;
    height: 92%;
    z-index: 0;
    pointer-events: none;
    clip-path: polygon(100% 0, 100% 100%, 22% 100%);
    background:
        radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.85) 0 1px, transparent 2px) 0 0 / 22px 22px,
        radial-gradient(circle at 62% 48%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px) 4px 4px / 30px 30px,
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px) 0 0 / 38px 38px,
        linear-gradient(135deg, var(--vd-accent-soft-2) 0%, transparent 72%);
    opacity: .30;
    filter: drop-shadow(0 0 18px var(--vd-tech-glow));
}


/* ============================================================
   15c. HOME KPI — перебить светлую заливку home.css (body:not(vibe))
   ============================================================ */

body[data-color-palette="cyber-nano"] .vd-home-hero .vd-text-gradient {
    background: linear-gradient(135deg, #eafff4 0%, #7affc0 38%, #3dff9a 72%, #22c55e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body[data-color-palette="cyber-nano"] .vd-stat-card--v1,
body[data-color-palette="cyber-nano"] .vd-stat-card--v2 {
    background: linear-gradient(180deg, rgba(14, 42, 28, 0.55) 0%, rgba(4, 16, 10, 0.88) 48%, rgba(8, 28, 18, 0.52) 100%) !important;
    border: 1px solid var(--vd-border) !important;
    box-shadow: var(--vd-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-color-palette="cyber-nano"] .vd-stat-card--v1 .vd-stat-spark-full,
body[data-color-palette="cyber-nano"] .vd-stat-card--v2 .vd-stat-spark-full {
    background: rgba(2, 12, 8, 0.5);
    border-top-color: var(--vd-border-soft);
}


/* ============================================================
   16. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    body[data-color-palette="cyber-nano"] * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}