/* =========================================================
   1. ДИЗАЙН-ТОКЕНЫ (CSS VARIABLES) — Light theme
   ========================================================= */
:root {
    /* — Backgrounds — */
    --bg-body:         #f5f5f5;   /* фон страницы */
    --bg-card:         #ffffff;   /* фон карточек / поверхностей */
    --bg-card-hover:   #fafafa;   /* hover карточки/строки */
    --bg-secondary:    #f5f5f5;   /* серые подложки (chip, sidebar, hover) */
    --bg-tertiary:     #ededed;   /* ещё чуть темнее для inset */

    /* — Borders — */
    --border-color:    #e5e5e5;
    --border-strong:   #d4d4d4;   /* hover/focus border */

    /* — Text — */
    --text-primary:    #171717;
    --text-secondary:  #525252;
    --text-tertiary:   #a3a3a3;
    --text-inverse:    #ffffff;   /* текст на тёмных кнопках */

    /* — Navigation alias — */
    --nav-bg:          #ffffff;
    --nav-border:      #e5e5e5;

    /* — Semantic (статусные) — */
    /* light = насыщенный foreground + 0.12-0.15 alpha bg.
       Используются для badges, alerts, statuses, trend-индикаторов. */
    --color-success:        #16a34a;
    --color-success-bg:     rgba(34, 197, 94, 0.15);
    --color-success-border: rgba(34, 197, 94, 0.3);

    --color-warning:        #ca8a04;
    --color-warning-bg:     rgba(234, 179, 8, 0.15);
    --color-warning-border: rgba(234, 179, 8, 0.3);

    --color-danger:         #dc2626;
    --color-danger-bg:      rgba(239, 68, 68, 0.12);
    --color-danger-border:  rgba(239, 68, 68, 0.3);

    --color-info:           #2563eb;
    --color-info-bg:        rgba(59, 130, 246, 0.12);
    --color-info-border:    rgba(59, 130, 246, 0.3);

    --color-violet:         #7c3aed;
    --color-violet-bg:      rgba(139, 92, 246, 0.15);

    --color-cyan:           #0891b2;
    --color-cyan-bg:        rgba(6, 182, 212, 0.15);

    --color-amber:          #d97706;
    --color-amber-bg:       rgba(245, 158, 11, 0.15);

    /* — Shadows — */
    --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.08);
    --shadow-lg:    0 10px 40px -10px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
    --shadow-popover: 0 12px 32px -8px rgba(0, 0, 0, 0.18);

    /* — Border radius — */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   10px;
    --radius-2xl:  12px;
    --radius-3xl:  16px;
    --radius-full: 999px;

    /* — Spacing scale (8-pt, шаг 4px) — */
    --space-1: 0.25rem;   /*  4px */
    --space-2: 0.5rem;    /*  8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */

    /* — Typography — */
    --font-family:      'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-size-xs:     0.7rem;     /* ~11px — captions/uppercase labels */
    --font-size-sm:     0.75rem;    /* 12px — labels, badges, small text */
    --font-size-base:   0.8rem;     /* ~13px — secondary body */
    --font-size-md:     0.875rem;   /* 14px — основной body */
    --font-size-lg:     0.9rem;     /* ~14.4px — emphasized body */
    --font-size-xl:     1rem;       /* 16px — large body, card titles */
    --font-size-2xl:    1.25rem;    /* 20px — h3 */
    --font-size-3xl:    1.5rem;     /* 24px — h2 */
    --font-size-4xl:    2rem;       /* 32px — h1 */
    --font-size-5xl:    2.5rem;     /* 40px — display */

    --font-normal:     400;
    --font-medium:     500;
    --font-semibold:   600;
    --font-bold:       700;
    --font-extrabold:  800;

    --line-tight:      1.25;
    --line-normal:     1.5;
    --line-relaxed:    1.7;

    /* — Layout sizes — */
    --sidebar-width:           260px;
    --sidebar-collapsed:       72px;
    --navbar-height:           64px;
    --header-height:           64px;

    /* — Transitions — */
    --transition-fast:  0.15s ease;
    --transition-base:  0.2s ease;
    --transition-slow:  0.3s ease;
    --transition-theme: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, fill 0.3s ease;

    /* — z-index scale — */
    --z-dropdown: 50;
    --z-sticky:   100;
    --z-fixed:    200;
    --z-overlay:  900;
    --z-modal:    1000;
    --z-popover:  1100;
    --z-toast:    1200;
    --z-tooltip:  1300;
}

/* =========================================================
   2. ДИЗАЙН-ТОКЕНЫ — Dark theme (GitHub-like)
   ========================================================= */
[data-theme="dark"] {
    --bg-body:         #0d1117;
    --bg-card:         #161b22;
    --bg-card-hover:   #1c2128;
    --bg-secondary:    #21262d;
    --bg-tertiary:     #2d333b;

    --border-color:    #30363d;
    --border-strong:   #484f58;

    --text-primary:    #e6edf3;
    --text-secondary:  #8b949e;
    --text-tertiary:   #6e7681;
    --text-inverse:    #0d1117;

    --nav-bg:          #161b22;
    --nav-border:      #30363d;

    /* В тёмной теме foreground оставляем насыщенным, чтобы был контраст;
       background чуть осветляем (alpha повыше). */
    --color-success:        #3fb950;
    --color-success-bg:     rgba(46, 160, 67, 0.18);
    --color-success-border: rgba(46, 160, 67, 0.35);

    --color-warning:        #d29922;
    --color-warning-bg:     rgba(187, 128, 9, 0.2);
    --color-warning-border: rgba(187, 128, 9, 0.4);

    --color-danger:         #f85149;
    --color-danger-bg:      rgba(248, 81, 73, 0.15);
    --color-danger-border:  rgba(248, 81, 73, 0.35);

    --color-info:           #58a6ff;
    --color-info-bg:        rgba(56, 139, 253, 0.15);
    --color-info-border:    rgba(56, 139, 253, 0.35);

    --color-violet:         #a371f7;
    --color-violet-bg:      rgba(163, 113, 247, 0.15);

    --color-cyan:           #39c5cf;
    --color-cyan-bg:        rgba(57, 197, 207, 0.15);

    --color-amber:          #e3b341;
    --color-amber-bg:       rgba(227, 179, 65, 0.15);

    --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg:    0 10px 40px -10px rgba(0, 0, 0, 0.7);
    --shadow-hover: 0 20px 40px -12px rgba(0, 0, 0, 0.55);
    --shadow-popover: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
}

/* =========================================================
   3. RESET / БАЗА
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    font-family: var(--font-family);
    transition: var(--transition-theme);
}

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: var(--font-size-md);
    line-height: var(--line-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--font-bold);
    line-height: var(--line-tight);
    color: var(--text-primary);
}
h1 { font-size: var(--font-size-4xl); font-weight: var(--font-extrabold); }
h2 { font-size: var(--font-size-3xl); font-weight: var(--font-extrabold); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-md); }

p { margin: 0; }
a { color: var(--text-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
}
code {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.1em 0.4em;
    border-radius: var(--radius-sm);
}
pre code { border: none; padding: 0; background: transparent; }

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--space-6) 0;
}

/* — Custom scrollbar (WebKit) — */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* — Selection — */
::selection { background: var(--text-primary); color: var(--bg-card); }

/* — Focus visible (a11y) — */
:focus-visible {
    outline: 2px solid var(--text-tertiary);
    outline-offset: 2px;
}

/* =========================================================
   4. УТИЛИТЫ
   ========================================================= */
.text-primary    { color: var(--text-primary) !important; }
.text-secondary  { color: var(--text-secondary) !important; }
.text-tertiary,
.text-muted      { color: var(--text-tertiary) !important; }
.text-success    { color: var(--color-success) !important; }
.text-warning    { color: var(--color-warning) !important; }
.text-danger     { color: var(--color-danger) !important; }
.text-info       { color: var(--color-info) !important; }

.fw-normal       { font-weight: var(--font-normal) !important; }
.fw-medium       { font-weight: var(--font-medium) !important; }
.fw-semibold     { font-weight: var(--font-semibold) !important; }
.fw-bold         { font-weight: var(--font-bold) !important; }
.fw-extrabold    { font-weight: var(--font-extrabold) !important; }

.fs-xs  { font-size: var(--font-size-xs) !important; }
.fs-sm  { font-size: var(--font-size-sm) !important; }
.fs-md  { font-size: var(--font-size-md) !important; }
.fs-lg  { font-size: var(--font-size-lg) !important; }
.fs-xl  { font-size: var(--font-size-xl) !important; }

.font-mono { font-family: var(--font-mono); }

.uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* — Анимации появления — */
@keyframes fadeIn   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse    { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes flash    { 0% { background: var(--color-success-bg); } 100% { background: transparent; } }
@keyframes shimmer  { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.animate-in    { animation: fadeIn 0.4s ease forwards; }
.animate-in-up { animation: fadeInUp 0.5s ease forwards; }
.delay-1 { animation-delay: 0.1s; opacity: 0; }
.delay-2 { animation-delay: 0.2s; opacity: 0; }
.delay-3 { animation-delay: 0.3s; opacity: 0; }
.delay-4 { animation-delay: 0.4s; opacity: 0; }
.delay-5 { animation-delay: 0.5s; opacity: 0; }
.delay-6 { animation-delay: 0.6s; opacity: 0; }

/* =========================================================
   5. LAYOUTS
   ========================================================= */

/* — 5.1 Top navbar (горизонтальный) — */
.navbar-app {
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    height: var(--navbar-height);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
}
.navbar-inner {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: 100%;
    min-width: 0;
}
.navbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: 100%;
}
.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-bold);
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
}
.navbar-brand:hover { text-decoration: none; }
.navbar-brand i { font-size: var(--font-size-xl); }
.navbar-nav {
    display: flex;
    align-items: center;
    height: 100%;
    gap: var(--space-1);
}
.navbar-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    height: 100%;
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    font-weight: var(--font-medium);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.navbar-link:hover { color: var(--text-primary); text-decoration: none; }
.navbar-link.active {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
    font-weight: var(--font-semibold);
}
.navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
.navbar-actions .search-box { min-width: 220px; }

@media (max-width: 991px) {
    .navbar-nav { display: none; }
    .navbar-actions .search-box { display: none; }
}
@media (max-width: 575px) {
    .navbar-brand span { display: none; }
}

/* — 5.2 Sidebar layout (фиксированный сайдбар + main-wrapper) — */
.app-shell {
    display: flex;
    min-height: 100vh;
}
.sidebar {
    width: var(--sidebar-width);
    background: var(--nav-bg);
    border-right: 1px solid var(--nav-border);
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: var(--z-fixed);
    transition: width var(--transition-slow), transform var(--transition-slow);
}
.sidebar.collapsed { width: var(--sidebar-collapsed); }

.sidebar-header {
    height: var(--header-height);
    border-bottom: 1px solid var(--nav-border);
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
}
.sidebar-brand i { font-size: var(--font-size-xl); flex-shrink: 0; }
.sidebar-brand span { transition: opacity var(--transition-base); }
.sidebar.collapsed .sidebar-brand span { opacity: 0; width: 0; }

.sidebar-toggle {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-slow), background var(--transition-fast);
}
.sidebar-toggle:hover { background: var(--bg-secondary); }
.sidebar.collapsed .sidebar-toggle { transform: rotate(180deg); }

.sidebar-nav {
    flex: 1;
    padding: var(--space-4) var(--space-3);
    overflow-y: auto;
}
.nav-section { margin-bottom: var(--space-6); }
.nav-section-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    padding: 0 var(--space-3);
    margin-bottom: var(--space-2);
    transition: opacity var(--transition-base);
}
.sidebar.collapsed .nav-section-title { opacity: 0; height: 0; margin: 0; overflow: hidden; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.625rem var(--space-3);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    font-weight: var(--font-medium);
    text-decoration: none;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-link i { font-size: 1.1rem; width: 20px; flex-shrink: 0; }
.sidebar-link span { flex: 1; transition: opacity var(--transition-base); }
.sidebar-link:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
}
.sidebar-link.active {
    background: var(--text-primary);
    color: var(--bg-card);
}
.sidebar-link .badge-pill {
    margin-left: auto;
    background: var(--color-danger-bg);
    color: var(--color-danger);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
}
.sidebar.collapsed .sidebar-link span,
.sidebar.collapsed .sidebar-link .badge-pill { opacity: 0; width: 0; }

.sidebar-footer {
    border-top: 1px solid var(--nav-border);
    padding: var(--space-3) var(--space-4);
    position: relative;
}
.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    transition: background var(--transition-fast);
    position: relative;
}
.sidebar-user:hover { background: var(--bg-secondary); }
.sidebar-user-info { flex: 1; overflow: hidden; transition: opacity var(--transition-base); }
.sidebar-user-name { font-size: var(--font-size-md); font-weight: var(--font-semibold); color: var(--text-primary); }
.sidebar-user-role { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .sidebar-user > i { opacity: 0; width: 0; }

/* — main wrapper для sidebar layout — */
.main-wrapper {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition-slow);
}
.sidebar.collapsed ~ .main-wrapper { margin-left: var(--sidebar-collapsed); }

/* — Top header (внутри sidebar layout) — */
.top-header {
    height: var(--header-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    padding: 0 var(--space-6);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.top-header-left,
.top-header-right { display: flex; align-items: center; gap: var(--space-3); }

/* — Mobile sidebar overlay — */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: var(--z-overlay);
}
@media (max-width: 991px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width) !important;
    }
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar.mobile-open ~ .sidebar-overlay { display: block; }
    .main-wrapper { margin-left: 0 !important; }
}

/* — 5.3 Контейнер контента — */
.container-app {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}
.main-content {
    flex: 1;
    padding: var(--space-8) 0;
}
/* Main внутри sidebar layout — нужен горизонтальный padding,
   потому что нет container-app. */
.app-main {
    padding: var(--space-6) var(--space-8);
    max-width: 1400px;
    width: 100%;
}
@media (max-width: 575px) {
    .app-main { padding: var(--space-4); }
}

/* Mobile-only утилита */
.mobile-only { display: none; }
@media (max-width: 991px) {
    .mobile-only { display: inline-flex; }
}

/* Header search — компактнее в top-header */
.header-search { min-width: 240px; }
@media (max-width: 767px) {
    .header-search { display: none; }
}

/* — 5.4 Page header — */
.page-header {
    padding: var(--space-6) 0;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
}
.page-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.page-header-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-bold);
    margin: 0;
}
.page-header-subtitle {
    color: var(--text-secondary);
    margin-top: var(--space-1);
    font-size: var(--font-size-md);
}
.page-header-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
/* Hero вариант — без бордеров, очень крупный заголовок */
.page-header.hero {
    background: transparent;
    border: none;
    padding: var(--space-10) 0 var(--space-4);
}
.page-header.hero .page-header-title { font-size: var(--font-size-5xl); font-weight: var(--font-extrabold); }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    margin-bottom: var(--space-3);
    text-decoration: none;
}
.back-link:hover { color: var(--text-primary); text-decoration: none; }

/* — 5.5 Settings layout (внутри-страничный split) — */
.settings-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-8);
}
@media (max-width: 991px) {
    .settings-layout { grid-template-columns: 1fr; }
}

/* =========================================================
   6. BUTTONS
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.625rem 1.25rem;
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-semibold);
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), transform var(--transition-fast),
                box-shadow var(--transition-fast);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.btn.loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    color: var(--text-inverse);
}
.btn-primary.loading::after { color: var(--text-inverse); }
.btn-secondary.loading::after,
.btn-ghost.loading::after,
.btn-outline.loading::after { color: var(--text-primary); }

/* Варианты */
.btn-primary {
    background: var(--text-primary);
    color: var(--text-inverse);
}
.btn-primary:hover {
    background: var(--text-secondary);
    color: var(--text-inverse);
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.btn-tonal {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.btn-tonal:hover { background: var(--bg-tertiary); }

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-secondary); color: var(--text-primary); }

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}
.btn-outline:hover { background: var(--bg-secondary); border-color: var(--border-strong); }

.btn-danger {
    background: var(--bg-card);
    color: var(--color-danger);
    border-color: var(--border-color);
}
.btn-danger:hover {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}
.btn-danger-solid {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}
.btn-danger-solid:hover { background: color-mix(in srgb, var(--color-danger) 85%, black); color: #fff; }

.btn-success-solid {
    background: var(--color-success);
    color: #fff;
    border-color: var(--color-success);
}
.btn-success-solid:hover { background: color-mix(in srgb, var(--color-success) 85%, black); color: #fff; }

/* Размеры */
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
}
.btn-lg {
    padding: 0.875rem 1.5rem;
    font-size: var(--font-size-lg);
    border-radius: var(--radius-xl);
}

/* Icon-only квадратные */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    position: relative;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
}
.btn-icon:hover { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-strong); }
.btn-icon.sm { width: 28px; height: 28px; font-size: var(--font-size-base); }
.btn-icon.lg { width: 44px; height: 44px; font-size: var(--font-size-lg); }
.btn-icon.danger:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-color: var(--color-danger-border);
}
.btn-icon.ghost { background: transparent; border-color: transparent; }
.btn-icon.ghost:hover { background: var(--bg-secondary); }

/* Кнопка-группа */
.btn-group { display: inline-flex; }
.btn-group .btn {
    border-radius: 0;
}
.btn-group .btn:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.btn-group .btn:last-child  { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.btn-group .btn:not(:first-child) { margin-left: -1px; }

/* Segment control (view toggle) */
.segment {
    display: inline-flex;
    background: var(--bg-secondary);
    padding: 0.25rem;
    border-radius: var(--radius-lg);
    gap: 0.125rem;
}
.segment-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 0.375rem 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all var(--transition-fast);
}
.segment-btn:hover { color: var(--text-primary); }
.segment-btn.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* Notification dot (на icon-кнопках) */
.notification-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--color-danger);
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}

/* =========================================================
   7. CARDS
   ========================================================= */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-3xl);
    overflow: hidden;
}
.card-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.card-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    margin: 0;
}
.card-body { padding: var(--space-5); }
.card-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.card-hoverable {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color var(--transition-fast),
                box-shadow var(--transition-base);
}
.card-hoverable:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-hover);
}

/* Variants */
.card-flat   { border-radius: var(--radius-2xl); }
.card-tonal  { background: var(--bg-secondary); }
.card-inset  { border-radius: var(--radius-xl); background: var(--bg-secondary); }

/* Section title (caption-разделитель в карточке) */
.section-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* =========================================================
   8. STAT / KPI CARDS
   ========================================================= */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-3xl);
    padding: var(--space-6);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color var(--transition-fast),
                box-shadow var(--transition-base);
}
.stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-hover);
}
.stat-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-2xl);
    background: var(--bg-secondary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}
.stat-icon.success { background: var(--color-success-bg); color: var(--color-success); }
.stat-icon.warning { background: var(--color-warning-bg); color: var(--color-warning); }
.stat-icon.danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.stat-icon.info    { background: var(--color-info-bg);    color: var(--color-info); }
.stat-icon.violet  { background: var(--color-violet-bg);  color: var(--color-violet); }

.stat-value {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-extrabold);
    line-height: 1.1;
    margin-bottom: var(--space-2);
}
.stat-sub { color: var(--text-secondary); font-size: var(--font-size-sm); }
.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
}
.stat-trend.up   { color: var(--color-success); background: var(--color-success-bg); }
.stat-trend.down { color: var(--color-danger);  background: var(--color-danger-bg); }
.stat-trend.flat { color: var(--text-tertiary); background: var(--bg-secondary); }

/* Компактная stat (центрированная) */
.stat-card.compact { padding: var(--space-5); text-align: center; }
.stat-card.compact .stat-value { font-size: var(--font-size-3xl); }

/* =========================================================
   9. FORMS
   ========================================================= */
.form-group { margin-bottom: var(--space-4); }
.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}
.form-label-caption {
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.form-required { color: var(--color-danger); margin-left: 0.125rem; }
.form-optional { color: var(--text-tertiary); font-weight: var(--font-normal); margin-left: 0.25rem; font-size: var(--font-size-xs); }

.form-control,
.form-select,
.form-textarea {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.625rem 0.875rem;
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    color: var(--text-primary);
    line-height: 1.4;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.form-control::placeholder,
.form-textarea::placeholder { color: var(--text-tertiary); }
.form-control:hover,
.form-select:hover,
.form-textarea:hover { border-color: var(--border-strong); }
.form-control:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--text-tertiary);
    box-shadow: none;
}
.form-control:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

.form-textarea { resize: vertical; min-height: 80px; }

.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath stroke='%23a3a3a3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    padding-right: 2.25rem;
}

.form-hint {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: 0.375rem;
}
.form-error {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Состояния */
.form-control.is-error,
.form-select.is-error,
.form-textarea.is-error {
    border-color: var(--color-danger);
    background: var(--color-danger-bg);
}
.form-control.is-success {
    border-color: var(--color-success);
}

/* Sizes */
.form-control-sm { padding: 0.375rem 0.625rem; font-size: var(--font-size-sm); border-radius: var(--radius-md); }
.form-control-lg { padding: 0.75rem 1rem;     font-size: var(--font-size-lg); border-radius: var(--radius-xl); }

/* Input group (с префиксом / суффиксом) */
.input-group { display: flex; }
.input-group .form-control,
.input-group .form-select { border-radius: 0; }
.input-group > :first-child { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }
.input-group > :last-child  { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
.input-group > :not(:first-child) { margin-left: -1px; }
.input-prefix,
.input-suffix {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0 0.875rem;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    white-space: nowrap;
}

/* Search box */
.search-box {
    position: relative;
    min-width: 240px;
}
.search-box i {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
}
.search-box input {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.875rem 0.5rem 2.5rem;
    font-size: var(--font-size-md);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}
.search-box input:focus { outline: none; border-color: var(--border-strong); }

/* Custom checkbox */
.check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-md);
    color: var(--text-primary);
    user-select: none;
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check-mark {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    position: relative;
    margin-top: 1px;
}
.check-mark::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 9px;
    border: solid var(--text-inverse);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
}
.check input:checked + .check-mark {
    background: var(--text-primary);
    border-color: var(--text-primary);
}
.check input:checked + .check-mark::after { transform: rotate(45deg) scale(1); }
.check input:disabled + .check-mark { opacity: 0.5; cursor: not-allowed; }
.check input:focus-visible + .check-mark { outline: 2px solid var(--text-tertiary); outline-offset: 2px; }

/* Custom radio */
.radio {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-md);
    color: var(--text-primary);
    user-select: none;
}
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.radio-mark {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition: border-color var(--transition-fast);
}
.radio-mark::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-primary);
    transform: scale(0);
    transition: transform 0.15s ease;
}
.radio input:checked + .radio-mark { border-color: var(--text-primary); }
.radio input:checked + .radio-mark::after { transform: scale(1); }

/* Toggle / switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--bg-card);
    border-radius: 50%;
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}
.toggle-switch input:checked + .toggle-slider { background: var(--text-primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle-switch input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; }

/* Form actions footer */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-color);
    margin-top: var(--space-5);
}
.form-actions.between { justify-content: space-between; }

/* File upload (drag & drop) */
.file-upload {
    position: relative;
}
.file-upload-area {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    text-align: center;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.file-upload-area:hover,
.file-upload-area.dragover {
    border-color: var(--text-tertiary);
    background: var(--bg-tertiary);
}
.file-upload-area input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.file-upload-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-3);
    font-size: var(--font-size-2xl);
    color: var(--text-secondary);
}
.file-upload-text { font-weight: var(--font-semibold); color: var(--text-primary); }
.file-upload-hint { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: var(--space-1); }

.file-selected {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-3);
    margin-top: var(--space-3);
}
.file-selected-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}
.file-selected-info { flex: 1; min-width: 0; }
.file-selected-name {
    font-weight: var(--font-semibold);
    font-size: var(--font-size-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-selected-size { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.file-selected-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.file-selected-remove:hover { background: var(--color-danger-bg); color: var(--color-danger); }

/* =========================================================
   10. TABLES
   ========================================================= */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-md);
}
.table thead th {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    white-space: nowrap;
}
.table tbody td {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    color: var(--text-primary);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-card-hover); }
.table tfoot td {
    padding: var(--space-3) var(--space-5);
    background: var(--bg-secondary);
    font-weight: var(--font-bold);
    border-top: 1px solid var(--border-color);
}
.table .text-end { text-align: right; }
.table .text-center { text-align: center; }
.table .num { font-variant-numeric: tabular-nums; text-align: right; }

/* Density */
.table-dense thead th { padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); }
.table-dense tbody td { padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); }

/* Sortable header */
.th-sort {
    cursor: pointer;
    user-select: none;
}
.th-sort::after {
    content: '↕';
    margin-left: 0.375rem;
    opacity: 0.4;
    font-size: 0.85em;
}
.th-sort:hover::after { opacity: 0.7; }
.th-sort.asc::after  { content: '↑'; opacity: 1; color: var(--text-primary); }
.th-sort.desc::after { content: '↓'; opacity: 1; color: var(--text-primary); }

/* Bulk-select checkbox колонка */
.table .col-check { width: 32px; padding-right: 0; }
.table tbody tr.selected { background: var(--bg-secondary); }

/* Inline cell editor */
.inline-input {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.inline-input:hover { border-color: var(--border-color); background: var(--bg-card); }
.inline-input:focus { outline: none; border-color: var(--border-strong); background: var(--bg-card); }

/* Saved row flash */
@keyframes flashGreen { 0% { background: var(--color-success-bg); } 100% { background: transparent; } }
.row-saving { opacity: 0.6; }
.row-saved  { animation: flashGreen 0.6s ease; }

/* Actions cell */
.table-actions {
    display: inline-flex;
    gap: 0.25rem;
}

/* Pagination */
.pagination-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
    flex-wrap: wrap;
    gap: var(--space-3);
}
.pagination-info {
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}
.pagination {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}
.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.page-link:hover { background: var(--bg-secondary); color: var(--text-primary); text-decoration: none; }
.page-item.active .page-link {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--text-inverse);
}
.page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}

/* =========================================================
   11. BADGES / PILLS / TAGS
   ========================================================= */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1;
}
.badge-pill { border-radius: var(--radius-full); padding: 0.25rem 0.625rem; }
.badge-lg { font-size: var(--font-size-sm); padding: 0.375rem 0.75rem; }

/* Semantic */
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info); }
.badge-violet  { background: var(--color-violet-bg);  color: var(--color-violet); }
.badge-cyan    { background: var(--color-cyan-bg);    color: var(--color-cyan); }
.badge-amber   { background: var(--color-amber-bg);   color: var(--color-amber); }

/* Neutral variations */
.badge-soft { background: var(--bg-secondary); color: var(--text-secondary); }
.badge-outline {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.badge-solid {
    background: var(--text-primary);
    color: var(--text-inverse);
}

/* С точкой статуса */
.badge-dot { padding-left: 0.5rem; }
.badge-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 0.25rem;
    flex-shrink: 0;
}

/* Status dot inline */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
}
.status-dot.success { background: var(--color-success); }
.status-dot.warning { background: var(--color-warning); }
.status-dot.danger  { background: var(--color-danger); animation: pulse 2s infinite; }
.status-dot.info    { background: var(--color-info); }

/* Skill / tag chip */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
.tag-primary { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info-border); }
.tag-removable { padding-right: 0.25rem; }
.tag-remove {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.tag-remove:hover { background: rgba(0,0,0,0.1); }

/* =========================================================
   12. AVATAR
   ========================================================= */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    font-size: var(--font-size-sm);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xs { width: 24px; height: 24px; font-size: var(--font-size-xs); }
.avatar-sm { width: 32px; height: 32px; font-size: var(--font-size-xs); }
.avatar-lg { width: 56px; height: 56px; font-size: var(--font-size-lg); }
.avatar-xl { width: 80px; height: 80px; font-size: var(--font-size-2xl); border-radius: var(--radius-2xl); }
.avatar-2xl { width: 96px; height: 96px; font-size: var(--font-size-3xl); border-radius: var(--radius-2xl); }

.avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    background: var(--color-success);
}
.avatar-status.offline { background: var(--text-tertiary); }
.avatar-status.busy    { background: var(--color-danger); }

/* Avatar group */
.avatar-group { display: inline-flex; }
.avatar-group .avatar {
    margin-left: -8px;
    border: 2px solid var(--bg-card);
}
.avatar-group .avatar:first-child { margin-left: 0; }
.avatar-group .avatar-more {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

/* =========================================================
   13. TABS
   ========================================================= */
/* Underline tabs */
.tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    margin-bottom: var(--space-5);
}
.tab {
    background: none;
    border: none;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-medium);
    color: var(--text-tertiary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab:hover { color: var(--text-secondary); }
.tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
    font-weight: var(--font-semibold);
}
.tab .badge { margin-left: 0.25rem; }

/* Pill tabs */
.tabs-pill {
    display: inline-flex;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 0.25rem;
    gap: 0.125rem;
}
.tabs-pill .tab {
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md);
    border-bottom: none;
    margin-bottom: 0;
    font-size: var(--font-size-sm);
}
.tabs-pill .tab.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    border-bottom: none;
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s ease; }

/* Vertical tabs (для settings sidebar) */
.tabs-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.tabs-vertical .tab {
    border-bottom: none;
    margin-bottom: 0;
    border-radius: var(--radius-lg);
    text-align: left;
    justify-content: flex-start;
    padding: 0.625rem 0.875rem;
}
.tabs-vertical .tab:hover { background: var(--bg-secondary); }
.tabs-vertical .tab.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom: none;
}

/* =========================================================
   14. MODAL / DRAWER
   ========================================================= */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    animation: fadeIn 0.2s ease;
}
.modal-backdrop.show { display: flex; }
[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, 0.7); }

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-3xl);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}
.modal.modal-md  { max-width: 600px; }
.modal.modal-lg  { max-width: 800px; }
.modal.modal-xl  { max-width: 1100px; }

.modal-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-shrink: 0;
}
.modal-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    margin: 0;
}
.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.modal-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.modal-body {
    padding: var(--space-5);
    overflow-y: auto;
    flex: 1;
}
.modal-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Drawer (slide-in side panel) */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: var(--z-modal);
    display: none;
    animation: fadeIn 0.2s ease;
}
.drawer-backdrop.show { display: block; }

.drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 420px;
    max-width: 100vw;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    z-index: calc(var(--z-modal) + 1);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    display: flex;
    flex-direction: column;
}
.drawer.show { transform: translateX(0); }
.drawer.left {
    left: 0; right: auto;
    border-left: none;
    border-right: 1px solid var(--border-color);
    transform: translateX(-100%);
}
.drawer.left.show { transform: translateX(0); }
.drawer .modal-header,
.drawer .modal-body,
.drawer .modal-footer { /* reuse modal-paddings */ }

/* =========================================================
   15. DROPDOWN MENU
   ========================================================= */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-popover);
    padding: 0.375rem;
    z-index: var(--z-popover);
    display: none;
    animation: fadeIn 0.15s ease;
}
.dropdown-menu.show { display: block; }
.dropdown-menu.menu-left { right: auto; left: 0; }

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-md);
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    transition: background var(--transition-fast);
}
.dropdown-item:hover {
    background: var(--bg-secondary);
    text-decoration: none;
}
.dropdown-item.danger { color: var(--color-danger); }
.dropdown-item.danger:hover { background: var(--color-danger-bg); }
.dropdown-item i { color: var(--text-tertiary); width: 16px; }
.dropdown-item.danger i { color: var(--color-danger); }

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.375rem 0;
}
.dropdown-header {
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--font-semibold);
}

/* =========================================================
   16. BREADCRUMBS
   ========================================================= */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-tertiary); }
.breadcrumb a:hover { color: var(--text-secondary); text-decoration: none; }
.breadcrumb .sep { color: var(--text-tertiary); opacity: 0.6; }
.breadcrumb .current {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

/* =========================================================
   17. PROGRESS / LOADERS / SKELETON
   ========================================================= */
.progress {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: var(--text-primary);
    border-radius: inherit;
    transition: width 0.4s ease;
}
.progress-bar.success { background: var(--color-success); }
.progress-bar.warning { background: var(--color-warning); }
.progress-bar.danger  { background: var(--color-danger); }
.progress-bar.info    { background: var(--color-info); }
.progress.lg { height: 10px; }
.progress.sm { height: 4px; }

.progress-striped .progress-bar {
    background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%,
        transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%);
    background-size: 20px 20px;
}

/* Spinner */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
.spinner.sm { width: 14px; height: 14px; border-width: 1.5px; }
.spinner.lg { width: 32px; height: 32px; border-width: 3px; }

/* Skeleton */
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-secondary) 25%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite;
    border-radius: var(--radius-md);
    display: inline-block;
    width: 100%;
    height: 1em;
}
.skeleton.line { height: 0.875em; margin: 0.25em 0; }
.skeleton.line.short { width: 60%; }
.skeleton.circle { border-radius: 50%; width: 40px; height: 40px; }
.skeleton.block { height: 80px; }

/* =========================================================
   18. ALERTS / TOASTS / TOOLTIPS
   ========================================================= */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    color: var(--text-primary);
    font-size: var(--font-size-md);
}
.alert i.alert-icon { font-size: var(--font-size-lg); flex-shrink: 0; color: var(--text-secondary); margin-top: 1px; }
.alert-body { flex: 1; }
.alert-title { font-weight: var(--font-semibold); margin-bottom: 0.125rem; }
.alert-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-tertiary); padding: 0; font-size: var(--font-size-lg);
    transition: color var(--transition-fast);
}
.alert-close:hover { color: var(--text-primary); }

.alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.alert-success i.alert-icon { color: var(--color-success); }
.alert-success .alert-body { color: var(--text-primary); }

.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.alert-warning i.alert-icon { color: var(--color-warning); }

.alert-danger  { background: var(--color-danger-bg);  border-color: var(--color-danger-border); }
.alert-danger i.alert-icon { color: var(--color-danger); }

.alert-info    { background: var(--color-info-bg);    border-color: var(--color-info-border); }
.alert-info i.alert-icon { color: var(--color-info); }

/* Toasts (контейнер сверху-справа) */
.toast-stack {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: var(--z-toast);
    pointer-events: none;
}
.toast {
    min-width: 280px;
    max-width: 380px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-popover);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    pointer-events: auto;
    animation: fadeInUp 0.3s ease;
}
.toast.success { border-left: 3px solid var(--color-success); }
.toast.warning { border-left: 3px solid var(--color-warning); }
.toast.danger  { border-left: 3px solid var(--color-danger); }
.toast.info    { border-left: 3px solid var(--color-info); }

/* Tooltip (CSS-only через data-tooltip) */
[data-tooltip] { position: relative; }
[data-tooltip]::before,
[data-tooltip]::after {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
}
[data-tooltip]::before {
    content: attr(data-tooltip);
    background: var(--text-primary);
    color: var(--text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-medium);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
    z-index: var(--z-tooltip);
}
[data-tooltip]::after {
    content: '';
    border: 4px solid transparent;
    border-top-color: var(--text-primary);
    bottom: calc(100% + 2px);
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after { opacity: 1; }

/* =========================================================
   19. EMPTY STATE / HINT CARD
   ========================================================= */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--text-secondary);
}
.empty-icon {
    font-size: 3rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
    line-height: 1;
}
.empty-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.empty-text {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.hint-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-4);
}
.hint-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}
.hint-title i { color: var(--text-secondary); }
.hint-card p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* =========================================================
   20. TIMELINE / ACTIVITY / CHECKLIST
   ========================================================= */
/* Activity feed (точка слева, текст справа) */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.activity-item:hover { background: var(--bg-card-hover); text-decoration: none; }
.activity-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-primary);
    margin-top: 6px;
    flex-shrink: 0;
}
.activity-content { flex: 1; min-width: 0; }
.activity-content h6 { font-size: var(--font-size-md); font-weight: var(--font-semibold); margin-bottom: 0.125rem; }
.activity-content p  { color: var(--text-secondary); font-size: var(--font-size-sm); }
.activity-content small { color: var(--text-tertiary); font-size: var(--font-size-xs); }

/* Timeline с вертикальной линией */
.timeline {
    position: relative;
    padding-left: var(--space-6);
}
.timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--border-color);
}
.timeline-item { position: relative; padding-bottom: var(--space-5); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
    position: absolute;
    left: calc(-1 * var(--space-6) + 2px);
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
}
.timeline-dot.completed { background: var(--color-success); border-color: var(--color-success); }
.timeline-dot.current   { background: var(--color-warning); border-color: var(--color-warning); }
.timeline-dot.danger    { background: var(--color-danger); border-color: var(--color-danger); }

.timeline-title { font-size: var(--font-size-md); font-weight: var(--font-semibold); margin-bottom: 0.125rem; }
.timeline-meta { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-bottom: 0.25rem; }
.timeline-body { color: var(--text-secondary); font-size: var(--font-size-sm); }

/* Checklist */
.checklist { display: flex; flex-direction: column; gap: var(--space-2); }
.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}
.checklist-box {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all var(--transition-fast);
}
.checklist-box.checked {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--text-inverse);
}
.checklist-content { flex: 1; min-width: 0; }
.checklist-title { font-weight: var(--font-semibold); }
.checklist-title.done { text-decoration: line-through; color: var(--text-tertiary); }
.checklist-desc { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 0.125rem; }
.checklist-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: 0.375rem;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Stepper */
.stepper {
    display: flex;
    gap: var(--space-2);
    position: relative;
}
.stepper-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); position: relative; }
.stepper-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: var(--border-color);
}
.stepper-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    color: var(--text-tertiary);
    z-index: 1;
    position: relative;
    background: var(--bg-body);
}
.stepper-label { font-size: var(--font-size-xs); color: var(--text-secondary); text-align: center; }
.stepper-item.completed .stepper-dot,
.stepper-item.completed::after { background: var(--text-primary); border-color: var(--text-primary); color: var(--text-inverse); }
.stepper-item.completed::after { height: 2px; }
.stepper-item.active .stepper-dot {
    background: var(--text-primary); border-color: var(--text-primary); color: var(--text-inverse);
}
.stepper-item.active .stepper-label { color: var(--text-primary); font-weight: var(--font-semibold); }

/* =========================================================
   21. CALENDAR (самописный month-grid)
   ========================================================= */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.calendar-weekday {
    background: var(--bg-secondary);
    padding: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}
.calendar-day {
    background: var(--bg-card);
    min-height: 120px;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background var(--transition-fast);
}
.calendar-day:hover { background: var(--bg-card-hover); }
.calendar-day.other-month { background: var(--bg-secondary); color: var(--text-tertiary); }
.calendar-day.today { background: var(--color-info-bg); }
.calendar-day-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
}
.calendar-day.today .calendar-day-num { background: var(--color-info); color: #fff; }

.calendar-event {
    padding: 0.125rem 0.375rem;
    background: var(--bg-secondary);
    border-left: 3px solid var(--text-primary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-event.success { background: var(--color-success-bg); border-left-color: var(--color-success); color: var(--color-success); }
.calendar-event.warning { background: var(--color-warning-bg); border-left-color: var(--color-warning); color: var(--color-warning); }
.calendar-event.danger  { background: var(--color-danger-bg);  border-left-color: var(--color-danger);  color: var(--color-danger); }
.calendar-event.info    { background: var(--color-info-bg);    border-left-color: var(--color-info);    color: var(--color-info); }
.calendar-event.violet  { background: var(--color-violet-bg);  border-left-color: var(--color-violet);  color: var(--color-violet); }

/* Calendar header (с навигацией) */
.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.calendar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.calendar-month {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    min-width: 180px;
    text-align: center;
}

/* =========================================================
   22. KANBAN
   ========================================================= */
.kanban {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    padding-bottom: var(--space-3);
}
.kanban-col {
    flex: 0 0 280px;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 70vh;
}
.kanban-col-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.125rem 0.25rem var(--space-2);
}
.kanban-col-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow-y: auto;
}
.kanban-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    cursor: grab;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.kanban-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.kanban-card-title { font-weight: var(--font-semibold); margin-bottom: var(--space-2); font-size: var(--font-size-md); }
.kanban-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* =========================================================
   23. ACCORDION / COLLAPSE
   ========================================================= */
.accordion {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.accordion-item + .accordion-item { border-top: 1px solid var(--border-color); }
.accordion-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}
.accordion-trigger:hover { background: var(--bg-card-hover); }
.accordion-trigger i.accordion-chev {
    transition: transform var(--transition-base);
    color: var(--text-tertiary);
}
.accordion-item.open .accordion-chev { transform: rotate(90deg); }
.accordion-content {
    padding: 0 var(--space-5) var(--space-4);
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    display: none;
}
.accordion-item.open .accordion-content { display: block; animation: fadeIn 0.2s ease; }

/* =========================================================
   24. CHART CONTAINER (helpers — JS-библиотека рисует сам)
   ========================================================= */
.chart-container {
    position: relative;
    width: 100%;
    height: 280px;
}
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--space-3);
}
.chart-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.375rem;
    vertical-align: middle;
}

/* Bar chart без библиотеки (распределение) */
.bar-list { display: flex; flex-direction: column; gap: var(--space-3); }
.bar-row { }
.bar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    margin-bottom: 0.375rem;
}
.bar-name { font-weight: var(--font-medium); color: var(--text-primary); }
.bar-value { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.bar-track { height: 6px; background: var(--bg-secondary); border-radius: var(--radius-full); overflow: hidden; }
.bar-fill { height: 100%; background: var(--text-primary); border-radius: inherit; transition: width 0.4s ease; }

/* =========================================================
   25. ШАБЛОНЫ ДЛЯ ПРИМЕРОВ ВНУТРИ ШОУКЕЙСА
   ========================================================= */
.demo-shell {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
.demo-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}
.swatch {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 120px;
}
.swatch-color {
    width: 100%;
    height: 64px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}
.swatch-name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
}
.swatch-hex {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

/* — Nav preview (mini-frame для показа top-navbar внутри карточки) — */
.nav-preview {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-card);
}
.nav-preview-bar {
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    height: 56px;
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.nav-preview-left {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    height: 100%;
    min-width: 0;
    overflow: hidden;
}
.nav-preview-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-bold);
    font-size: var(--font-size-md);
    color: var(--text-primary);
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
}
.nav-preview-brand i { font-size: var(--font-size-lg); }
.nav-preview-links {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav-preview-links::-webkit-scrollbar { display: none; }
.nav-preview-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    height: 100%;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav-preview-link:hover { color: var(--text-primary); text-decoration: none; }
.nav-preview-link.active {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
    font-weight: var(--font-semibold);
}
.nav-preview-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
.nav-preview-body {
    padding: var(--space-5);
    background: var(--bg-body);
}

.ds-section {
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border-color);
}
.ds-section-head {
    margin-bottom: var(--space-5);
}
.ds-section-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-extrabold);
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ds-section-sub {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
}

.subhead {
    font-size: var(--font-size-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin: var(--space-5) 0 var(--space-3);
}