/* ============================================================
 * TaskVibe — Deus Amber (imperial / amber-gold)
 * ============================================================
 *
 * Активация: <body data-color-palette="deus-amber">
 *
 * Построена по той же структуре, что cyber-nano.css / vibe.css /
 * glass.css: тот же словарь --vd-* токенов, тот же scoping
 * body[data-color-palette="deus-amber"]. Другие темы не затрагивает.
 *
 * Design language: имперский nano-augmented HUD, тёмное золото,
 * гравированные линии, сдержанный warm glow, hex-декор в тон
 * фоновому изображению (готическая мегаполис-башня + hex-сетка).
 * Правило плотности: 80% Workplace, 15% tech-деталей, 5% wow.
 * ============================================================ */


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

body[data-color-palette="deus-amber"] {
    --vd-bg: #120d06;
    --vd-bg-deep: #0a0704;

    --vd-panel: rgba(30, 22, 12, 0.78);
    --vd-panel-strong: rgba(22, 16, 8, 0.92);
    --vd-panel-soft: rgba(40, 30, 16, 0.5);

    --vd-border: rgba(216, 168, 79, 0.24);
    --vd-border-soft: rgba(216, 168, 79, 0.13);
    --vd-border-strong: rgba(228, 183, 96, 0.5);

    --vd-accent: #d8a84f;
    --vd-accent-strong: #b3812f;
    --vd-accent-soft: rgba(216, 168, 79, 0.16);
    --vd-accent-soft-2: rgba(216, 168, 79, 0.30);
    --vd-accent-glow: 0 0 20px rgba(216, 168, 79, 0.28), 0 0 46px rgba(216, 168, 79, 0.12);

    --vd-chrome-bg: #16100a;
    --vd-chrome-bg-soft: #201709;
    --vd-chrome-flat: #2a1d0d;

    --vd-chrome-gradient-135-from: rgba(38, 27, 13, 0.95);
    --vd-chrome-gradient-135-to: rgba(16, 11, 6, 0.92);

    --vd-chrome-sidebar-glass-from: rgba(30, 22, 11, 0.90);
    --vd-chrome-sidebar-glass-to: rgba(12, 8, 4, 0.88);

    --vd-chrome-panel-180-from: rgba(36, 26, 13, 0.95);
    --vd-chrome-panel-180-to: rgba(14, 10, 5, 0.92);

    --vd-chrome-kb-head-180-from: rgba(36, 26, 13, 0.95);
    --vd-chrome-kb-head-180-to: rgba(14, 10, 5, 0.92);

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

    --vd-chrome-text: #fbf1de;
    --vd-chrome-text-muted: rgba(244, 227, 195, 0.68);
    --vd-chrome-text-faint: rgba(244, 227, 195, 0.40);

    --vd-chrome-border: rgba(216, 168, 79, 0.20);
    --vd-chrome-active-bg: rgba(216, 168, 79, 0.20);
    --vd-chrome-active-text: #fbe9c8;

    --vd-text: #f5ead6;
    --vd-text-strong: #ffffff;
    --vd-text-muted: rgba(244, 227, 195, 0.68);
    --vd-text-faint: rgba(244, 227, 195, 0.40);

    --vd-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.32);
    --vd-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.42);
    --vd-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.58);

    --vd-glass-card-from: rgba(34, 25, 12, 0.82);
    --vd-glass-card-to: rgba(13, 9, 5, 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: #8fd07a;
    --vd-stat-delta-dn: #e4703f;

    --zen-msg-area-bg: linear-gradient(180deg, rgba(28, 20, 10, 0.94) 0%, rgba(9, 6, 3, 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(216, 168, 79, 0.24) 0%, rgba(216, 168, 79, 0.08) 100%);
    --zen-msg-row-active-ring: rgba(216, 168, 79, 0.40);
    --zen-msg-panel-surface: rgba(22, 16, 8, 0.75);
    --zen-msg-panel-surface-soft: rgba(34, 25, 12, 0.55);

    --vd-profile-panel-glass-bg: rgba(28, 20, 10, 0.75);
    --vd-profile-panel-glass-border: rgba(216, 168, 79, 0.22);
    --vd-profile-tabs-bar-bg: rgba(34, 25, 12, 0.55);

    --vd-chip-cyan-bg: rgba(216, 168, 79, 0.16);
    --vd-chip-cyan-text: #f3d99a;
    --vd-chip-cyan-border: rgba(216, 168, 79, 0.35);

    /* Фирменные Deus Amber переменные (не легаси, только эта тема) */
    --vd-tech-cut: 10px;
    --vd-tech-line: rgba(216, 168, 79, 0.38);
    --vd-tech-glow: rgba(216, 168, 79, 0.20);
    --vd-tech-hex-opacity: 0.07;

    color-scheme: dark;
}


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

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

body[data-color-palette="deus-amber"] ::selection {
    color: #1a1206;
    background: rgba(216, 168, 79, 0.42);
}

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

body[data-color-palette="deus-amber"] a:hover {
    color: #f0c876;
}

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

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

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

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

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


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

body[data-color-palette="deus-amber"] ::-webkit-scrollbar-thumb {
    background: rgba(216, 168, 79, 0.40);
    background-clip: padding-box;
    border: 2px solid transparent;
}

body[data-color-palette="deus-amber"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(216, 168, 79, 0.64);
    background-clip: padding-box;
    border: 2px solid transparent;
}


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

body[data-color-palette="deus-amber"] .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.38);
    backdrop-filter: blur(18px) saturate(1.05);
    -webkit-backdrop-filter: blur(18px) saturate(1.05);
}

body[data-color-palette="deus-amber"] .vd-topbar {
    background: rgba(18, 13, 6, 0.84) !important;
    border-bottom: 1px solid var(--vd-chrome-border) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* 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="deus-amber"] .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="deus-amber"] .vd-sidebar .vd-nav-link.active,
body[data-color-palette="deus-amber"] .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(216, 168, 79, 0.12);
}

body[data-color-palette="deus-amber"] .vd-sidebar .vd-nav-link:hover {
    background: rgba(216, 168, 79, 0.10) !important;
    color: var(--vd-chrome-active-text) !important;
}


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

body[data-color-palette="deus-amber"] .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.04);
    position: relative;
}

body[data-color-palette="deus-amber"] .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="deus-amber"] .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="deus-amber"] .main-wrapper .card-header,
body[data-color-palette="deus-amber"] .main-wrapper .card-footer {
    background: rgba(24, 17, 8, 0.42) !important;
    border-color: var(--vd-border-soft) !important;
}

/* tactical corner accent — та же деталь, что в cyber-nano, только в золоте */
body[data-color-palette="deus-amber"] .vd-glass-card::before,
body[data-color-palette="deus-amber"] .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="deus-amber"] .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="deus-amber"] .main-wrapper .btn-primary {
    background: linear-gradient(135deg, var(--vd-accent) 0%, var(--vd-accent-strong) 100%);
    border: none;
    color: #1a1206;
    font-weight: 600;
    box-shadow: var(--vd-accent-glow);
}

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

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

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


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

body[data-color-palette="deus-amber"] .main-wrapper .form-control,
body[data-color-palette="deus-amber"] .main-wrapper .form-select,
body[data-color-palette="deus-amber"] .main-wrapper textarea.form-control {
    background: rgba(20, 14, 7, 0.65) !important;
    border: 1px solid var(--vd-border) !important;
    color: var(--vd-text);
}

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

body[data-color-palette="deus-amber"] .main-wrapper .form-control:focus,
body[data-color-palette="deus-amber"] .main-wrapper .form-select:focus {
    border-color: var(--vd-accent) !important;
    box-shadow: 0 0 0 3px rgba(216, 168, 79, 0.20);
}

body[data-color-palette="deus-amber"] .main-wrapper .form-control[type="file"]::file-selector-button {
    background: linear-gradient(135deg, var(--vd-accent) 0%, var(--vd-accent-strong) 100%) !important;
    color: #1a1206 !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="deus-amber"] .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(216, 168, 79, 0.035);
    --bs-table-hover-bg: var(--vd-accent-soft);
    --bs-table-hover-color: var(--vd-text-strong);
}

body[data-color-palette="deus-amber"] .main-wrapper .zen-data-table thead th {
    background: rgba(26, 19, 9, 0.78) !important;
    color: rgba(244, 227, 195, 0.88) !important;
    border-color: var(--vd-border) !important;
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .04em;
}

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

body[data-color-palette="deus-amber"] .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="deus-amber"] .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="deus-amber"] .dropdown-item {
    color: var(--vd-text);
}

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

body[data-color-palette="deus-amber"] .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="deus-amber"] .modal-content .btn-close {
    filter: invert(1) sepia(40%) saturate(300%) brightness(150%);
}


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

body[data-color-palette="deus-amber"] .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 — та же деталь, что в cyber-nano, в золоте */
body[data-color-palette="deus-amber"] .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="deus-amber"] .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="deus-amber"] .vd-stat-value,
body[data-color-palette="deus-amber"] .vd-kpi-value {
    color: var(--vd-text-strong);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px rgba(216, 168, 79, 0.22);
}

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

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

body[data-color-palette="deus-amber"] .vd-sparkline,
body[data-color-palette="deus-amber"] .progress-bar {
    color: var(--vd-accent);
}

body[data-color-palette="deus-amber"] .progress {
    background: rgba(216, 168, 79, 0.09);
}

body[data-color-palette="deus-amber"] .progress-bar {
    background: linear-gradient(90deg, var(--vd-accent-strong), var(--vd-accent));
    box-shadow: 0 0 12px rgba(216, 168, 79, 0.26);
}


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

body[data-color-palette="deus-amber"] .vd-home .vd-home-hero.zen-ticket-hero {
    background: linear-gradient(135deg, rgba(32, 23, 11, 0.55) 0%, rgba(10, 7, 4, 0.80) 100%) !important;
    border: 1px solid var(--vd-border) !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.48), 0 0 26px rgba(216, 168, 79, 0.12) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    position: relative;
    overflow: hidden;
}

body[data-color-palette="deus-amber"] .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="deus-amber"] {
    --zen-msg-area-bg: linear-gradient(180deg, rgba(28, 20, 10, 0.94) 0%, rgba(9, 6, 3, 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(22, 16, 8, 0.75);
    --zen-msg-panel-surface-soft: rgba(34, 25, 12, 0.55);
    --zen-msg-composer-bg: var(--vd-panel-strong);
    --zen-msg-border: var(--vd-border);
    --zen-msg-head-search-bg: rgba(216, 168, 79, 0.09);
    --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(216, 168, 79, 0.15);
    --zen-msg-head-badge-fg: var(--vd-chrome-text);
    --zen-msg-row-active-bg: linear-gradient(90deg, rgba(216, 168, 79, 0.24) 0%, rgba(216, 168, 79, 0.08) 100%);
    --zen-msg-row-active-ring: rgba(216, 168, 79, 0.40);
    --zen-msg-tg-bubble-mine-fg: #1a1206;
    --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="deus-amber"] .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="deus-amber"] .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="deus-amber"] .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="deus-amber"] .zen-messenger-msg-area .btn-outline-secondary:hover {
    background: var(--zen-msg-panel-surface-soft) !important;
}

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


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

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

body[data-color-palette="deus-amber"] .vd-cmdk-item.active,
body[data-color-palette="deus-amber"] .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).
   Декор — тот же язык, что в Cyber Nano, но в золоте — строго ВНУТРИ
   существующих границ карточки, никакого изменения ширины/сетки.
   ============================================================ */

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

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

body[data-color-palette="deus-amber"] .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, 244, 220, 0.85) 0 1px, transparent 2px) 0 0 / 22px 22px,
        radial-gradient(circle at 62% 48%, rgba(255, 244, 220, 0.55) 0 1px, transparent 2px) 4px 4px / 30px 30px,
        radial-gradient(circle at 80% 70%, rgba(255, 244, 220, 0.4) 0 1px, transparent 2px) 0 0 / 38px 38px,
        linear-gradient(135deg, var(--vd-accent-soft-2) 0%, transparent 72%);
    opacity: .32;
    filter: drop-shadow(0 0 18px var(--vd-tech-glow));
}


/* ============================================================
   15b. AI-ПОМОЩНИК — full-width hero row (layout override)
   ============================================================
   Основа (см. Views/Home/_HomeWorkspaceRow.cshtml):

     <div class="row g-3 vd-home-state-row mt-0">
       <div class="col-12 col-xl-6"> _HomeTicketState -> .vd-home-state-card
       <div class="col-12 col-xl-6"> _HomeAiTeaser    -> .vd-home-ai-card

   Ширина задана на обёртке колонки (col-xl-6, без !important) —
   поэтому более специфичный селектор с data-color-palette её
   перекрывает, и Razor трогать не нужно. Работает только в
   deus-amber; light-office/vibe/glass/cyber-nano/... не задеты,
   т.к. правило не лежит в home.css/site.css.

   Решение: обе колонки становятся full-width и стоят друг под
   другом (state-card компактной высоты сверху, AI-teaser —
   широкой "hero-лентой" снизу, с текстом слева и кнопкой справа —
   как на референсе). Флекс-обёртки колонок (display:flex;
   flex-direction:column из home.css) не ломаются — просто меняется
   flex-basis/max-width на самой обёртке.
   ============================================================ */

body[data-color-palette="deus-amber"] .vd-home-state-row {
    flex-wrap: wrap;
}

body[data-color-palette="deus-amber"] .vd-home-state-row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Ticket-state donut не должен растягиваться на всю ширину бесконтрольно —
   ограничиваем содержимое, сама карточка остаётся full-bleed. */
body[data-color-palette="deus-amber"] .vd-home-state-card .vd-home-state-body {
    max-width: 34rem;
}

/* AI teaser -> hero-лента: текст слева, кнопка справа, треугольник-glow
   (блок 15) остаётся привязан к правому краю карточки через ::after. */
body[data-color-palette="deus-amber"] .vd-home-ai-card {
    min-height: 9.5rem;
}

body[data-color-palette="deus-amber"] .vd-home-ai-card .vd-home-ai-body {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem 1.75rem;
}

body[data-color-palette="deus-amber"] .vd-home-ai-hint {
    flex: 1 1 280px;
    margin-bottom: 0 !important;
}

body[data-color-palette="deus-amber"] .vd-home-ai-ask {
    flex: 0 0 auto;
    width: auto;
    min-width: 13rem;
}

body[data-color-palette="deus-amber"] .vd-home-ai-form {
    flex: 1 1 100%;
}

/* На узких экранах возвращаем колонку — горизонтальная лента тесновата */
@media (max-width: 575.98px) {
    body[data-color-palette="deus-amber"] .vd-home-ai-card .vd-home-ai-body {
        flex-direction: column;
        align-items: stretch;
    }

    body[data-color-palette="deus-amber"] .vd-home-ai-ask {
        width: 100%;
    }
}

/* Карточка стала шире и ниже — доводим пропорции треугольника-glow
   (селектор из блока 15) под новые размеры full-width ленты. */
body[data-color-palette="deus-amber"] .vd-home-ai-card::after {
    right: -3%;
    bottom: -35%;
    width: 26%;
    height: 170%;
}


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

body[data-color-palette="deus-amber"] .vd-home-hero .vd-text-gradient {
    background: linear-gradient(135deg, #fff6e4 0%, #e8c078 38%, #d8a84f 72%, #b8862f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body[data-color-palette="deus-amber"] .vd-stat-card--v1,
body[data-color-palette="deus-amber"] .vd-stat-card--v2 {
    background: linear-gradient(180deg, rgba(48, 34, 16, 0.55) 0%, rgba(16, 11, 6, 0.88) 48%, rgba(32, 22, 10, 0.52) 100%) !important;
    border: 1px solid var(--vd-border) !important;
    box-shadow: var(--vd-shadow-md), inset 0 1px 0 rgba(255, 244, 220, 0.06);
}

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


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

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