/* Planning App — V4 calm-flat (dark + light)
   2026-05-28: убрали gradient-mesh + pink/purple/cyan-mix,
   привели к одному accent + status-цветам. См. план 5.1. */

:root {
    /* — Dark surfaces — */
    --bg:           #0a0a0c;
    --bg-mesh:      none;
    --surface:      #101013;
    --surface-2:    #17171b;
    --surface-3:    #1f1f25;
    --border:       #26262d;
    --border-strong:#3a3a44;
    /* — Dark text — */
    --fg:           #fafafa;
    --fg-soft:      #d4d4d8;
    --muted:        #8a8a93;
    --muted-2:      #5a5a63;

    /* — One accent (синий) + status colors (для priority/state, не декор) — */
    --accent:       #0070f3;
    --accent-soft:  rgba(0, 112, 243, 0.14);
    --accent-2:     #3b82f6;   /* чуть светлее для hover/active */
    --green:        #0ee45a;
    --green-soft:   rgba(14, 228, 90, 0.14);
    --yellow:       #f5a524;
    --yellow-soft:  rgba(245, 165, 36, 0.16);
    --red:          #ff4d4d;
    --red-soft:     rgba(255, 77, 77, 0.16);

    /* Совместимость: legacy-имена → один accent. Можно постепенно вычищать. */
    --cyan:         var(--accent);
    --pink:         var(--accent);
    --purple:       var(--accent);

    --p1: var(--red);
    --p2: var(--yellow);
    --p3: var(--accent);

    /* Градиенты убраны как декор. Все --grad-* теперь solid accent. */
    --grad-main: var(--accent);
    --grad-pink: var(--accent);
    --grad-cy:   var(--accent);
    --grad-yl:   var(--accent);
    --grad-gn:   var(--accent);
    --grad-pu:   var(--accent);

    --ring:        0 0 0 3px rgba(0, 112, 243, 0.35);
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.5);
    --glow-accent: 0 0 24px rgba(0, 112, 243, 0.35);
    --glow-pink:   var(--glow-accent);
    --glow-cyan:   var(--glow-accent);

    --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 9999px;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, Menlo, Consolas, monospace;

    --sidebar-w: 220px;
    --content-max: 1180px;

    /* density tokens — переключаются через [data-density]. */
    --row-pad-y: 12px;
    --row-pad-x: 14px;
    --gap-md: 16px;
    --hero-pad: 28px;

    /* Фаза 15.5.2: акцентные цвета по категориям sidebar (Я.360-style). */
    --acc-blue:    #3b82f6;
    --acc-purple:  #8b5cf6;
    --acc-pink:    #ec4899;
    --acc-green:   #10b981;
    --acc-orange:  #f97316;
    --acc-teal:    #14b8a6;
    --acc-red:     #ef4444;
    --acc-yellow:  #eab308;
    --acc-indigo:  #6366f1;
    --acc-cyan:    #06b6d4;
}

/* Density: компактный режим — меньше воздуха в таблицах и карточках. */
:root[data-density="compact"] {
    --row-pad-y: 6px;
    --row-pad-x: 10px;
    --gap-md: 10px;
    --hero-pad: 18px;
}

[data-theme="light"] {
    --bg:           #f7f7f9;
    --bg-mesh:      none;
    --surface:      #ffffff;
    --surface-2:    #f3f3f5;
    --surface-3:    #e7e7eb;
    --border:       #e4e4e7;
    --border-strong:#cdcdd1;
    --fg:           #18181b;
    --fg-soft:      #3f3f46;
    --muted:        #71717a;
    --muted-2:      #a1a1aa;

    --accent-soft:  rgba(0, 112, 243, 0.08);
    --green-soft:   rgba(14, 228, 90, 0.10);
    --yellow-soft:  rgba(245, 165, 36, 0.12);
    --red-soft:     rgba(255, 77, 77, 0.10);

    /* Light gradient placeholders → solid accent для читаемого белого текста. */
    --grad-main:    #1d4ed8;
    --grad-pink:    #1d4ed8;
    --grad-cy:      #1d4ed8;
    --grad-yl:      #1d4ed8;
    --grad-gn:      #1d4ed8;
    --grad-pu:      #1d4ed8;

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md:    0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.08);
    --glow-accent:  0 2px 12px rgba(0, 112, 243, 0.25);
    --glow-pink:    var(--glow-accent);
    --glow-cyan:    var(--glow-accent);
}

/* Light theme — softer hero overlay (один accent, без cyan/purple). */
[data-theme="light"] .hero::before {
    background: radial-gradient(circle at 0% 100%, rgba(0, 112, 243, 0.06), transparent 55%);
}
[data-theme="light"] .card::before {
    background: radial-gradient(circle, rgba(0, 112, 243, 0.10), transparent 70%);
    opacity: 0.7;
}
[data-theme="light"] .card.danger::before { background: radial-gradient(circle, rgba(255, 77, 77, 0.12), transparent 70%); }
[data-theme="light"] .card.success::before { background: radial-gradient(circle, rgba(34, 197, 94, 0.10), transparent 70%); }
[data-theme="light"] .card.warn::before { background: radial-gradient(circle, rgba(245, 158, 11, 0.12), transparent 70%); }

[data-theme="light"] .auth-card::before {
    background: radial-gradient(circle, rgba(0, 112, 243, 0.10), transparent 60%);
}
[data-theme="light"] .auth-card::after {
    background: radial-gradient(circle, rgba(0, 112, 243, 0.08), transparent 60%);
}

[data-theme="light"] .sb-dot {
    background: var(--grad-main);
    box-shadow: 0 0 14px rgba(0, 112, 243, 0.30);
}
[data-theme="light"] .sb-av { background: var(--grad-cy); }

/* Light theme: override default `a` color on navigation/sidebar/bucket-tabs */
[data-theme="light"] a.sb-item,
[data-theme="light"] a.sb-logo {
    color: var(--fg-soft);
}
[data-theme="light"] a.sb-item:hover,
[data-theme="light"] a.sb-item.active {
    color: var(--fg);
}
[data-theme="light"] a.sb-item.sb-secondary { color: var(--muted); }
[data-theme="light"] .bucket-tab { color: var(--muted); }
[data-theme="light"] .bucket-tab:hover { color: var(--fg); }
[data-theme="light"] .bucket-tab.active { color: #fff; }
[data-theme="light"] header h1 a { color: var(--fg); }
[data-theme="light"] header nav a { color: var(--muted); }
[data-theme="light"] header nav a:hover,
[data-theme="light"] header nav a.active { color: var(--fg); }
[data-theme="light"] .sb-user { color: var(--fg); }
[data-theme="light"] .pipeline-row { color: var(--fg-soft); }
[data-theme="light"] a.hero-cta { color: #fff; }
[data-theme="light"] a.btn-suggest { color: #fff; }
/* Light-theme: `a` overrides .btn-primary text-color (higher specificity).
   Возвращаем белый текст на акцентном фоне для anchor'ов-как-кнопок. */
[data-theme="light"] a.btn-primary { color: #fff; }
[data-theme="light"] a.btn-primary:hover { color: #fff; opacity: 1; }
[data-theme="light"] a.card { color: var(--fg); }
[data-theme="light"] a.card.danger { color: var(--fg); }
[data-theme="light"] a.card.success { color: var(--fg); }
[data-theme="light"] a.card.warn { color: var(--fg); }

* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg);
    background-image: var(--bg-mesh);
    background-attachment: fixed;
    color: var(--fg);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; transition: opacity .12s ease; }
[data-theme="light"] a { color: var(--accent); }
a:hover { opacity: 0.85; text-decoration: none; }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.015em; color: var(--fg); }
/* Фаза 15.5.3: бо́льшая типографика — Я.360-style. H1 для hero, H2 — page title. */
h1 { font-size: 32px; font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -0.025em; }
h2 { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0 0 20px; letter-spacing: -0.025em; }
h3 { font-size: 12px; margin: 24px 0 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; }
h2 small { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 8px; }
/* Subheading внутри страницы — sentence-case, среднего размера. */
.section-title {
    font-size: 17px; font-weight: 600; color: var(--fg);
    text-transform: none; letter-spacing: -0.005em;
    margin: 28px 0 12px; display: flex; align-items: center; gap: 8px;
}
.section-title small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }
small { color: var(--muted); font-weight: 400; }

input, select, button, textarea { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: rgba(0, 112, 243, 0.4); }

/* ====== Layout: sidebar + content ====================================== */
.layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}
.layout.no-sidebar {
    grid-template-columns: 1fr;
}

/* === Sidebar — wide дефолт, narrow по data-sb="narrow" ================ */
.layout[data-sb="narrow"] { --sidebar-w: 64px; }

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 16px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: visible;
}
.layout[data-sb="narrow"] .sidebar { padding: 12px 8px; }

/* Кнопка-переключатель в шапке sidebar'а. */
.sb-toggle {
    position: absolute;
    top: 18px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    transition: background .12s, color .12s, border-color .12s;
}
.sb-toggle:hover { background: var(--surface-2); color: var(--fg); border-color: var(--border-strong); }
.layout[data-sb="narrow"] .sb-toggle {
    position: static;
    margin: 0 auto 8px;
}

.sb-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    margin-bottom: 12px;
    color: var(--fg);
    text-decoration: none;
}
.sb-logo:hover { opacity: 1; text-decoration: none; }
.sb-dot {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--grad-pink);
    box-shadow: var(--glow-pink);
    flex-shrink: 0;
}
.sb-title { font-size: 14px; font-weight: 600; color: var(--fg); }
.sb-version {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: var(--r-pill);
    font-family: var(--mono);
    letter-spacing: 0;
    margin-left: 2px;
}

.sb-nav { display: flex; flex-direction: column; gap: 1px; }
.sb-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-md);
    color: var(--fg-soft);
    font-size: 13px;
    text-decoration: none;
    transition: background .1s, color .1s;
}
.sb-item:hover {
    background: var(--surface-2);
    color: var(--fg);
    text-decoration: none;
    opacity: 1;
}
.sb-item.active {
    background: var(--surface-2);
    color: var(--fg);
    font-weight: 500;
    box-shadow: inset 0 0 0 1px var(--border);
}
.sb-ic {
    width: 20px;
    height: 20px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sb-ic .icon { width: 18px; height: 18px; }
.sb-item.active .sb-ic { color: var(--accent); }

.sb-label { flex: 1; min-width: 0; }

/* ─── narrow-mode overrides ───────────────────────────────────────── */
.layout[data-sb="narrow"] .sb-logo {
    justify-content: center;
    gap: 0;
    padding: 8px 0;
}
.layout[data-sb="narrow"] .sb-title,
.layout[data-sb="narrow"] .sb-version,
.layout[data-sb="narrow"] .sb-section { display: none; }
.layout[data-sb="narrow"] .sb-item {
    justify-content: center;
    padding: 9px 0;
    gap: 0;
}
.layout[data-sb="narrow"] .sb-label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface);
    color: var(--fg);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
    z-index: 999;
    flex: none;
}
.layout[data-sb="narrow"] .sb-item:hover .sb-label { opacity: 1; }
.layout[data-sb="narrow"] .sb-count {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 10px;
    padding: 1px 5px;
    background: var(--accent);
    color: #fff;
    min-width: 16px;
    text-align: center;
    line-height: 1.3;
}
.layout[data-sb="narrow"] .sb-user {
    flex-direction: column;
    padding: 6px;
    gap: 0;
    background: transparent;
    border: none;
}
.layout[data-sb="narrow"] .sb-user-meta,
.layout[data-sb="narrow"] .sb-logout,
.layout[data-sb="narrow"] .sb-theme-toggle,
.layout[data-sb="narrow"] .sb-density-toggle,
.layout[data-sb="narrow"] .sb-item.sb-secondary { display: none; }

/* Фаза 15.5.2: цветные акценты sidebar-иконок по категориям.
   В active-состоянии цвет усиливается до полной opacity, в idle —
   60% (мягко выделяется на фоне monochrome текста). */
.sb-item[data-acc="blue"]   .sb-ic { color: var(--acc-blue); }
.sb-item[data-acc="purple"] .sb-ic { color: var(--acc-purple); }
.sb-item[data-acc="pink"]   .sb-ic { color: var(--acc-pink); }
.sb-item[data-acc="green"]  .sb-ic { color: var(--acc-green); }
.sb-item[data-acc="orange"] .sb-ic { color: var(--acc-orange); }
.sb-item[data-acc="teal"]   .sb-ic { color: var(--acc-teal); }
.sb-item[data-acc="red"]    .sb-ic { color: var(--acc-red); }
.sb-item[data-acc="yellow"] .sb-ic { color: var(--acc-yellow); }
.sb-item[data-acc="indigo"] .sb-ic { color: var(--acc-indigo); }
.sb-item[data-acc="cyan"]   .sb-ic { color: var(--acc-cyan); }
.sb-item[data-acc] .sb-ic { opacity: 0.7; }
.sb-item[data-acc].active .sb-ic,
.sb-item[data-acc]:hover .sb-ic { opacity: 1; }

/* Базовый класс для inline-SVG иконок Lucide (используется через {{ icon('name') }}). */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
/* Икона внутри chip — мельче, выровнена с baseline текста. */
.chip-icon {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 2px;
}
/* Счётчик — пилюля справа в строке. */
.sb-count {
    font-size: 11px;
    color: var(--muted-2);
    background: var(--surface-3);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.sb-item.active .sb-count { color: var(--fg); background: var(--surface-3); }

.sb-section {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted-2);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 16px 10px 6px;
}

.sb-spacer { flex: 1; min-height: 16px; }

.sb-bottom { display: flex; flex-direction: column; gap: 4px; }
.sb-item.sb-secondary { color: var(--muted); }

.sb-user {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--fg);
    transition: background .12s, border-color .12s;
}
.sb-user:hover { background: var(--surface-3); border-color: var(--border-strong); text-decoration: none; opacity: 1; }
.sb-av {
    width: 30px;
    height: 30px;
    border-radius: var(--r-pill);
    background: var(--grad-pink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}
.sb-user-meta { flex: 1; min-width: 0; }
.sb-user-name { font-size: 13px; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: 10px; color: var(--muted); text-transform: lowercase; }
.sb-logout {
    background: none; border: none; cursor: pointer;
    color: var(--muted); padding: 4px 6px;
    border-radius: var(--r-sm);
    transition: background .1s, color .1s;
    display: inline-flex; align-items: center;
}
.sb-logout:hover { background: var(--surface-3); color: var(--red); }

.sb-theme-toggle {
    margin-top: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    cursor: pointer;
    font-size: 12px;
    color: var(--muted);
}
.sb-theme-toggle .opt {
    padding: 5px 8px;
    text-align: center;
    border-radius: var(--r-pill);
    transition: background .12s, color .12s;
    user-select: none;
}
.sb-theme-toggle .opt.active {
    background: var(--surface);
    color: var(--fg);
    box-shadow: var(--shadow-sm);
}

.inline-form { display: inline; margin: 0; padding: 0; }

/* === Content area ====================================================== */
.content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.content-inner {
    padding: 32px 40px 64px;
    max-width: var(--content-max);
    width: 100%;
    margin: 0 auto;
}
.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
}

/* === Hero (dashboard) ================================================== */
.hero {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 28px 32px;
    margin-bottom: 24px;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 100%, rgba(0, 112, 243, 0.08), transparent 55%);
    pointer-events: none;
}
.hero > * { position: relative; }
.hero-meta {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 12px;
}
.hero-title {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--fg);
    margin: 0 0 24px;
}
.hero-row {
    display: flex;
    align-items: flex-end;
    gap: 32px;
    flex-wrap: wrap;
}
.hero-focus {
    display: flex;
    align-items: flex-end;
    gap: 18px;
}
.hero-focus-num {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}
.hero-focus-meta { padding-bottom: 4px; }
.hero-focus-label { font-size: 14px; font-weight: 500; color: var(--fg-soft); }
.hero-focus-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.hero-cta {
    margin-left: auto;
    padding: 10px 18px;
    background: var(--grad-main);
    color: #fff;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    box-shadow: var(--glow-accent);
    transition: transform .12s, box-shadow .12s;
}
.hero-cta:hover { transform: translateY(-1px); box-shadow: 0 0 32px rgba(0, 112, 243, 0.5); opacity: 1; text-decoration: none; }

/* === Stat cards ======================================================== */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 8px 0 32px;
}
.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--fg);
    text-decoration: none;
    overflow: hidden;
    transition: transform .12s, border-color .12s, box-shadow .12s;
}
.card::before {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    right: -50px;
    top: -50px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 112, 243, 0.22), transparent 70%);
    pointer-events: none;
    opacity: 0.65;
}
.card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    opacity: 1;
}
.card-value {
    position: relative;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}
.card-label {
    position: relative;
    color: var(--muted);
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.card.danger .card-value { color: var(--red); }
.card.danger::before { background: radial-gradient(circle, rgba(255, 77, 77, 0.28), transparent 70%); }
.card.success .card-value { color: var(--green); }
.card.success::before { background: radial-gradient(circle, rgba(14, 228, 90, 0.22), transparent 70%); }
.card.warn .card-value { color: var(--yellow); }
.card.warn::before { background: radial-gradient(circle, rgba(245, 165, 36, 0.25), transparent 70%); }

/* Фаза 15.5.7: soft-coloured KPI карточки в стиле «Сигналы руководителя»
   (Я.HR). Заливают всю карточку пастельным фоном вместо gradient-круга. */
.card-soft-mint, .card-soft-peach, .card-soft-blue,
.card-soft-purple, .card-soft-rose, .card-soft-yellow {
    background: var(--surface);
    border-color: transparent;
}
.card-soft-mint::before, .card-soft-peach::before, .card-soft-blue::before,
.card-soft-purple::before, .card-soft-rose::before, .card-soft-yellow::before {
    display: none;
}
.card-soft-mint   { background: #e6f5ee; }
.card-soft-peach  { background: #fdebd7; }
.card-soft-blue   { background: #e7eefd; }
.card-soft-purple { background: #f0e8fa; }
.card-soft-rose   { background: #fbe5ec; }
.card-soft-yellow { background: #fff5d6; }
[data-theme="dark"] .card-soft-mint   { background: rgba(16, 185, 129, 0.14); }
[data-theme="dark"] .card-soft-peach  { background: rgba(249, 115, 22, 0.14); }
[data-theme="dark"] .card-soft-blue   { background: rgba(59, 130, 246, 0.14); }
[data-theme="dark"] .card-soft-purple { background: rgba(139, 92, 246, 0.14); }
[data-theme="dark"] .card-soft-rose   { background: rgba(236, 72, 153, 0.14); }
[data-theme="dark"] .card-soft-yellow { background: rgba(234, 179, 8, 0.14); }
[class*="card-soft"]:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
[class*="card-soft"] .card-value { color: var(--fg); font-size: 38px; }
[class*="card-soft"] .card-label { color: var(--fg-soft); font-weight: 600; }

/* === Pipeline (dashboard) =============================================== */
.pipeline-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 18px 22px 22px;
    overflow: hidden;
}
.pipeline-h { margin: 0 0 16px; }
.pipeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.pipeline-row { display: block; text-decoration: none; color: inherit; }
.pipeline-row:hover { opacity: 1; text-decoration: none; }
.pipeline-row:hover .pipeline-name { color: var(--fg); }
.pipeline-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.pipeline-name { font-size: 13px; font-weight: 500; color: var(--fg-soft); transition: color .12s; }
.pipeline-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 500; }
.pipeline-bar {
    height: 6px;
    background: var(--surface-2);
    border-radius: var(--r-pill);
    overflow: hidden;
    border: 1px solid var(--border);
}
.pipeline-fill {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    min-width: 4px;
    transition: width .3s ease;
}
.pipeline-fill.grad-0 { background: var(--grad-main); }
.pipeline-fill.grad-1 { background: var(--grad-cy); }
.pipeline-fill.grad-2 { background: var(--grad-yl); }
.pipeline-fill.grad-3 { background: var(--grad-gn); }
.pipeline-fill.grad-4 { background: var(--grad-pu); }

/* === Grid layout ======================================================== */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 8px;
}
@media (max-width: 1200px) { .grid-2 { grid-template-columns: 1fr; } }

/* === Tables ============================================================== */
table.data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    font-size: 13px;
}
.pipeline-card table.data { border: none; border-radius: 0; background: transparent; }
table.data th, table.data td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.pipeline-card table.data tr:first-child th, .pipeline-card table.data tr:first-child td { border-top: 1px solid var(--border); }
/* Фаза 15.5.4: th в нормальном регистре, мельче letter-spacing — Я.360-style. */
table.data thead th {
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--border);
}
.pipeline-card table.data thead th { background: transparent; padding-top: 6px; padding-bottom: 6px; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .08s ease; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data a { color: var(--accent); }
[data-theme="light"] table.data a { color: var(--accent); }
table.data a:hover { opacity: 0.85; }

/* === Tasks table ========================================================= */
table.tasks .prio { width: 32px; text-align: center; font-size: 14px; }
table.tasks .text { font-weight: 500; color: var(--fg); }
table.tasks .ctx { color: var(--muted); font-size: 12px; }
table.tasks .date {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
}
table.tasks tr.priority-p1 .prio { color: var(--p1); }
table.tasks tr.priority-p2 .prio { color: var(--p2); }
table.tasks tr.priority-p3 .prio { color: var(--p3); }
table.tasks tr.status-done .text { text-decoration: line-through; color: var(--muted); }
table.tasks tr.status-cancelled .text { color: var(--muted-2); text-decoration: line-through; }
table.tasks tr.status-pending_routing .text::before {
    content: "●";
    color: var(--yellow);
    margin-right: 8px;
    font-size: 10px;
    vertical-align: 2px;
}

/* === Badges ============================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 500;
    background: var(--surface-2);
    color: var(--fg-soft);
    line-height: 1.4;
    margin-left: 6px;
    border: 1px solid var(--border);
}
.badge.personal { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(245, 165, 36, 0.25); }
.badge.horizon { background: var(--accent-soft); color: var(--accent); border-color: rgba(0, 112, 243, 0.25); }
[data-theme="light"] .badge.horizon { color: var(--accent); }
.badge.status-badge { background: var(--surface-2); color: var(--muted); text-transform: lowercase; }
.status-done .badge.status-badge { background: var(--green-soft); color: var(--green); border-color: rgba(14, 228, 90, 0.25); }
.status-pending_routing .badge.status-badge { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(245, 165, 36, 0.25); }
.status-in_progress .badge.status-badge { background: var(--accent-soft); color: var(--accent); border-color: rgba(0, 112, 243, 0.25); }
[data-theme="light"] .status-in_progress .badge.status-badge { color: var(--accent); }
.status-cancelled .badge.status-badge { background: var(--surface-2); color: var(--muted-2); }
.status-blocked .badge.status-badge { background: var(--red-soft); color: var(--red); border-color: rgba(255, 77, 77, 0.25); }

/* === Chips (новый набор — для дедлайнов и приоритетов) =================== */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 500;
    background: var(--surface-2);
    color: var(--fg-soft);
    line-height: 1.4;
    margin-right: 6px;
    border: 1px solid var(--border);
    white-space: nowrap;
}
.chips-row { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; }

/* Deadline-цвета */
.chip-overdue  { background: var(--red-soft);    color: var(--red);    border-color: rgba(255, 77, 77, 0.3); }
.chip-today    { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(245, 165, 36, 0.3); }
.chip-soon     { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(245, 165, 36, 0.18); }
.chip-week     { background: var(--surface-2);   color: var(--fg-soft); border-color: var(--border); }
.chip-later    { background: var(--surface-2);   color: var(--muted);   border-color: var(--border); }

/* Priority-цвета */
.chip-p1       { background: var(--red-soft);    color: var(--red);    border-color: rgba(255, 77, 77, 0.3); font-weight: 600; }
.chip-p2       { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(245, 165, 36, 0.3); font-weight: 600; }
.chip-p3       { background: var(--surface-2);   color: var(--muted); }

/* Прочее */
.chip-horizon  { background: var(--accent-soft); color: var(--accent); border-color: rgba(0, 112, 243, 0.22); }
[data-theme="light"] .chip-horizon { color: var(--accent); }
.chip-personal { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(245, 165, 36, 0.25); }
.chip-assignee { background: var(--surface-2); color: var(--fg-soft); }
.chip-status   { background: var(--surface-2); color: var(--muted); text-transform: lowercase; }
/* #d4 status chips цвета — семантика по статусу */
.chip-status-open          { background: var(--accent-soft); color: var(--accent); border-color: rgba(0, 112, 243, 0.22); }
.chip-status-in_progress   { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(245, 165, 36, 0.28); }
.chip-status-blocked       { background: rgba(220, 53, 69, 0.12); color: #d83a4d; border-color: rgba(220, 53, 69, 0.28); }
.chip-status-pending_routing { background: var(--surface-2); color: var(--muted-2); border-color: var(--border); text-transform: lowercase; }
.chip-status-done          { background: rgba(34, 139, 84, 0.15); color: #1f8a52; border-color: rgba(34, 139, 84, 0.28); }
.chip-status-cancelled     { background: var(--surface-2); color: var(--muted); text-decoration: line-through; }
[data-theme="light"] .chip-status-blocked { color: #c62a3e; }
[data-theme="light"] .chip-status-done    { color: #178044; }

/* Подсветка строки задачи по дедлайну */
.date-cell .chip-overdue { font-weight: 600; }
.prio-cell { width: 70px; text-align: center; }
.date-cell { white-space: nowrap; }

/* Inline-edit popover поверх chip */
.chip-edit { display: inline-block; position: relative; }
.chip-edit summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    padding: 0;
}
.chip-edit summary::-webkit-details-marker { display: none; }
.chip-edit summary::marker { display: none; }
.chip-edit[open] summary > .chip { box-shadow: 0 0 0 2px var(--accent-soft); }

.chip-empty { background: transparent; color: var(--muted-2); border: 1px solid var(--border); }
.chip-empty:hover { border-color: var(--border-strong); color: var(--muted); }

.chip-pop {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.chip-pop form { display: contents; }
.chip-pop .chip { cursor: pointer; border: 1px solid var(--border); }
.chip-pop .chip:hover { filter: brightness(1.1); }
.chip-pop select {
    background: var(--surface-2);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 3px 8px;
    font: inherit;
    max-width: 100%;
}
.chip-pop select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.chip-pop-date {
    display: flex !important;
    width: 100%;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    gap: 4px;
}
.chip-pop-date input[type="date"] {
    flex: 1;
    background: var(--surface-2);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 3px 6px;
    font-size: 11px;
}

/* === Filters ============================================================= */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    align-items: center;
}
.filters select,
.filters input[type=text] {
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--fg);
    font-size: 13px;
    transition: border-color .12s, box-shadow .12s, background .12s;
    height: 34px;
}
.filters select:hover,
.filters input[type=text]:hover { border-color: var(--border-strong); background: var(--surface-3); }
.filters select:focus,
.filters input[type=text]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
    background: var(--surface);
}
.filters .cb {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--fg-soft); font-size: 13px; padding: 0 10px; cursor: pointer;
}
.filters .cb input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; }
.filters button[type=submit] {
    padding: 7px 16px;
    background: var(--grad-main);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    height: 34px;
    transition: transform .08s, box-shadow .12s;
}
.filters button[type=submit]:hover { transform: translateY(-1px); box-shadow: var(--glow-accent); }
.filters .btn-link {
    color: var(--muted); font-size: 13px; padding: 7px 10px;
    border-radius: var(--r-md); border: 1px solid transparent; background: none;
}
.filters .btn-link:hover { color: var(--fg); background: var(--surface-2); }

/* === Bucket tabs ========================================================= */
.bucket-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 20px;
    padding: 0;
    border: none;
    flex-wrap: wrap;
}
.bucket-tab {
    padding: 9px 16px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: color .12s, border-color .12s, background .12s;
}
.bucket-tab:hover { color: var(--fg); border-color: var(--border-strong); text-decoration: none; opacity: 1; }
.bucket-tab.active {
    color: #fff;
    background: var(--grad-main);
    border-color: transparent;
    box-shadow: var(--glow-accent);
}

/* === Tab panels (generic) ================================================ */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* === Empty state ========================================================= */
.empty-state {
    margin: 16px 0;
    padding: 16px 18px;
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}
.empty-state p { margin: 0; }
.empty-state.subtle { background: transparent; }
.empty-state.warn { border-color: var(--acc-orange); }

/* === Meetings ============================================================ */
.meeting-list { display: flex; flex-direction: column; gap: 8px; }
.meeting-card {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}
.meeting-card header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.meeting-title { font-weight: 500; }
.meeting-meta { display: flex; gap: 12px; color: var(--muted); font-size: 12px; align-items: center; }
.meeting-meta span { display: inline-flex; gap: 4px; align-items: center; }
.meeting-controls { margin-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.meeting-card .toggle { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; user-select: none; }
.meeting-card .hint { color: var(--acc-orange); font-size: 12px; margin: 0; }
.meeting-card.no-track .toggle input { outline: 2px solid var(--acc-orange); }

/* Multi-track выбор: пилюли-чекбоксы для серии (m044) */
.tracks-multiselect { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tracks-multiselect-label { color: var(--muted); font-size: 12px; margin-right: 2px; }
.track-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border: 1px solid var(--border);
    border-radius: 999px; font-size: 12px; cursor: pointer;
    background: var(--surface-2); transition: background .08s, border-color .08s;
    user-select: none;
}
.track-pill:hover { border-color: var(--fg-soft); }
.track-pill input { margin: 0; cursor: pointer; }
.track-pill input:checked + span { color: var(--accent); font-weight: 500; }
.track-pill:has(input:checked) { background: var(--accent-soft, var(--surface)); border-color: var(--accent); }
.meeting-controls.no-track .tracks-multiselect { outline: 2px dashed var(--acc-orange); outline-offset: 2px; border-radius: 6px; }

/* === Inbox =============================================================== */
.hint { color: var(--muted); font-size: 13px; margin: 12px 0; }
.hint code {
    background: var(--surface-2); padding: 2px 8px; border-radius: var(--r-sm);
    font-family: var(--mono); font-size: 12px; color: var(--fg-soft);
    border: 1px solid var(--border);
}
.inbox-list {
    list-style: none; padding: 0; margin: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-xl); overflow: hidden;
}
.inbox-list li {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    transition: background .08s;
}
.inbox-list li:last-child { border-bottom: none; }
.inbox-list li:hover { background: var(--surface-2); }
.inbox-list .text { font-weight: 500; color: var(--fg); flex: 1 1 280px; min-width: 0; }
.inbox-list .meta { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.inbox-list li.moved { color: var(--muted); }
.inbox-list li.moved .text { text-decoration: line-through; color: var(--muted-2); }

.empty {
    color: var(--muted); text-align: center; padding: 56px 16px;
    background: var(--surface); border: 1px dashed var(--border);
    border-radius: var(--r-xl); font-size: 14px;
}

/* === Pagination (Phase 7c) ============================================== */
.pagination {
    display: flex; gap: 12px; align-items: center; justify-content: center;
    margin: 24px 0 8px; font-size: 14px;
}
.pagination .pg-btn {
    background: var(--surface-2); color: var(--fg); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 6px 14px; text-decoration: none;
    font-weight: 500;
}
.pagination .pg-btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.pagination .pg-btn-off { color: var(--muted-2); pointer-events: none; opacity: 0.5; }
.pagination .pg-info { color: var(--muted); }

/* === Duplicates detector ================================================ */
#duplicates-slot:empty { display: none; }
.duplicates-empty { color: var(--green); display: inline-flex; align-items: center; gap: 6px; }

/* Suggestion блок в /inbox (LLM-предложение трека) */
.suggestion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.suggestion-icon { color: var(--acc-purple); display: inline-flex; align-items: center; }

.duplicates {
    margin-top: 10px; padding: 10px 12px;
    background: var(--yellow-soft); border: 1px solid rgba(245, 165, 36, 0.4);
    border-radius: var(--r-md);
}
.duplicates-header { color: var(--yellow); font-size: 13px; margin-bottom: 6px; }
.duplicates-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.duplicates-list li {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 4px 6px; font-size: 13px;
}
.dup-sim {
    color: var(--yellow); font-weight: 600; font-family: var(--mono); font-size: 11px;
    min-width: 36px;
}
.dup-text { color: var(--fg); flex: 1; min-width: 0; }
.dup-track { color: var(--muted); font-size: 12px; }
.dup-status { color: var(--muted-2); font-size: 11px; font-family: var(--mono); }
.duplicates-hint { color: var(--muted); font-size: 11px; margin-top: 6px; font-style: italic; }

/* === AI draft chips (создание задачи) =================================== */
.create-task-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#draft-chips-slot:empty { display: none; }

.ai-draft {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin-top: 10px; padding: 10px 12px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.ai-draft-label { color: var(--muted); font-size: 13px; display: flex; gap: 6px; align-items: center; }
.ai-draft-group { display: flex; gap: 4px; flex-wrap: wrap; }
.ai-draft-reason { color: var(--muted-2); font-size: 12px; font-style: italic; }
.ai-draft-error {
    margin-top: 10px; padding: 8px 12px; color: var(--red); font-size: 13px;
    background: var(--red-soft); border: 1px solid var(--red);
    border-radius: var(--r-md);
}

/* Radio-chips: скрываем нативный input, при :checked подсвечиваем span */
.chip-radio { cursor: pointer; display: inline-block; }
.chip-radio input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio .chip { opacity: 0.5; transition: opacity 0.1s, box-shadow 0.1s; }
.chip-radio:hover .chip { opacity: 0.85; }
.chip-radio input[type="radio"]:checked + .chip {
    opacity: 1; box-shadow: 0 0 0 2px var(--accent-soft);
}

/* === /today page ======================================================== */
.today-header { margin-bottom: 20px; }
.today-header h2 { margin-bottom: 4px; }
.today-subtitle { color: var(--muted); font-size: 13px; margin: 0; }

.today-section { margin: 24px 0; }
.today-section h3 {
    color: var(--fg); text-transform: none; font-size: 14px;
    letter-spacing: 0; font-weight: 600; margin: 0 0 10px;
}
.today-section h3 small { color: var(--muted); font-weight: 400; margin-left: 4px; }

.today-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.today-row {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 12px 14px;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.today-row:hover { background: var(--surface-2); border-color: var(--border-strong); }

.section-overdue .today-row { border-left: 3px solid var(--red); }
.section-today .today-row   { border-left: 3px solid var(--yellow); }
.section-soon .today-row    { border-left: 3px solid var(--accent); }
.section-p1 .today-row      { border-left: 3px solid var(--red); }

.today-row-main { display: flex; gap: 12px; align-items: flex-start; }
.today-row-chips { display: flex; gap: 6px; align-items: center; flex-shrink: 0; flex-wrap: wrap; max-width: 220px; }
.today-row-text { flex: 1 1 auto; min-width: 0; }
.today-row-text .text { display: block; color: var(--fg); margin-bottom: 4px; word-wrap: break-word; }
.today-row-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.today-row-meta .meta-item { color: var(--muted); }
.today-row-actions { flex-shrink: 0; display: flex; gap: 6px; }
.today-row-actions .btn-close {
    background: transparent; border: 1px solid var(--border); color: var(--green);
    border-radius: var(--r-sm); padding: 4px 10px; cursor: pointer;
}
.today-row-actions .btn-close:hover { background: var(--green-soft); border-color: var(--green); }

.today-summary { margin-top: 32px; }
.today-summary .empty { padding: 16px; font-size: 13px; }
.today-summary-row { display: flex; align-items: center; gap: 6px; }

/* === Calendar section on /today (D.1a') ================================= */
.section-calendar .today-row { border-left: 3px solid var(--acc-blue); }

.calendar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.calendar-card {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--acc-blue);
    border-radius: var(--r-md); padding: 12px 14px;
    display: flex; gap: 14px; align-items: flex-start;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.calendar-card:hover { background: var(--surface-2); border-color: var(--border-strong); }
.calendar-card-passed { opacity: 0.6; border-left-color: var(--border); }

.calendar-card-time {
    flex-shrink: 0; font-variant-numeric: tabular-nums;
    color: var(--muted); font-size: 13px; min-width: 100px; padding-top: 2px;
}
.calendar-card-body { flex: 1 1 auto; min-width: 0; }
.calendar-card-title { color: var(--fg); font-weight: 500; margin-bottom: 4px; word-wrap: break-word; }
.calendar-card-title a { color: var(--fg); text-decoration: none; }
.calendar-card-title a:hover { text-decoration: underline; }

.calendar-card-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.calendar-meta-item { color: var(--muted); }
.calendar-meta-item a { color: var(--muted); text-decoration: none; border-bottom: 1px dashed var(--border-strong); }
.calendar-meta-item a:hover { color: var(--fg); border-bottom-color: var(--fg); }

.calendar-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: var(--r-pill);
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 11px; color: var(--muted); text-decoration: none;
}
.calendar-chip-video { background: var(--surface-2); color: var(--acc-blue); border-color: var(--acc-blue); }
.calendar-chip-video:hover { background: var(--acc-blue); color: var(--surface); }

.calendar-card-agenda {
    font-size: 13px; color: var(--fg-soft); margin-top: 6px;
    word-wrap: break-word; white-space: pre-wrap;
    /* Без max-height / mask-image. Юзер явно сказал «всё сразу видно
       в боте и вебе». Density тут уступает полноте контента. */
}
.calendar-card-video { font-size: 12px; color: var(--muted); margin-top: 6px; word-break: break-all; }
.calendar-card-video a { color: var(--acc-blue); text-decoration: none; }
.calendar-card-video a:hover { text-decoration: underline; }

.calendar-banner {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 10px 14px;
    font-size: 13px; color: var(--muted);
}
.calendar-banner-warn { border-color: var(--yellow); background: var(--yellow-soft); color: var(--fg); }
.calendar-banner a { color: var(--acc-blue); }

@media (max-width: 720px) {
    .calendar-card { flex-direction: column; gap: 4px; }
    .calendar-card-time { min-width: 0; }
}

/* === HERO + sticky sub-nav + 2 раздела (D.1a' v2 redesign) ============== */

.today-hero {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 16px 18px;
    margin: 16px 0 12px;
    display: flex; flex-direction: column; gap: 14px;
}

.today-hero-counters { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-counter {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: var(--r-md);
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--fg); text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.hero-counter:hover { background: var(--surface); border-color: var(--border-strong); }
.hero-counter:focus-visible { outline: none; box-shadow: var(--ring); }
.hero-counter-icon { display: inline-flex; align-items: center; color: var(--muted); }
.hero-counter-num { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.hero-counter-label { font-size: 13px; color: var(--fg-soft); }
.hero-counter-warn { border-color: var(--red); background: var(--red-soft); }
.hero-counter-warn .hero-counter-icon { color: var(--red); }

.today-hero-top { display: flex; flex-direction: column; gap: 8px; }
.hero-top-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg); }
.hero-more-link { font-size: 13px; color: var(--acc-blue); text-decoration: none; }
.hero-more-link:hover { text-decoration: underline; }

.today-hero-coming-soon { font-size: 12px; color: var(--muted); }

.today-subnav {
    position: sticky; top: 0; z-index: 10;
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 10px 0; margin: 8px 0 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.today-subnav-item {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: var(--r-pill);
    background: var(--surface); border: 1px solid var(--border);
    font-size: 13px; color: var(--fg); text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.today-subnav-item:hover { background: var(--surface-2); border-color: var(--border-strong); }
.today-subnav-item:focus-visible { outline: none; box-shadow: var(--ring); }
.today-subnav-warn { color: var(--red); background: var(--red-soft); border-color: var(--red); }

.today-group { margin: 24px 0; }
.today-group-title {
    margin: 0 0 10px;
    font-size: 15px; font-weight: 600; color: var(--fg-soft);
    text-transform: uppercase; letter-spacing: 0.04em;
    padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

/* Section-title icon — взамен inline style="color:..." (DS дисциплина). */
.section-title-icon { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 4px; }
.section-title-icon--red { color: var(--red); }
.section-title-icon--blue { color: var(--acc-blue); }
.section-title-icon--accent { color: var(--accent); }
.section-title-icon--green { color: var(--green); }

/* На мобиле sticky-nav горизонтальный скролл, hero counters wrap */
@media (max-width: 720px) {
    .today-subnav {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    }
    .today-subnav-item { white-space: nowrap; flex-shrink: 0; }
    .today-hero { padding: 12px 14px; }
}

@media (max-width: 720px) {
    .today-row-main { flex-direction: column; gap: 8px; }
    .today-row-chips { max-width: none; }
    .today-row-actions { align-self: flex-end; }
}

/* === Toggle button (team activate) ====================================== */
.btn-toggle {
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 500;
    border: 1px solid;
    transition: background .12s, color .12s, border-color .12s;
    cursor: pointer;
}
.btn-toggle.on { background: var(--green-soft); color: var(--green); border-color: rgba(14, 228, 90, .25); }
.btn-toggle.on:hover { background: var(--red-soft); color: var(--red); border-color: rgba(255, 77, 77, .25); }
.btn-toggle.off { background: var(--red-soft); color: var(--red); border-color: rgba(255, 77, 77, .25); }
.btn-toggle.off:hover { background: var(--green-soft); color: var(--green); border-color: rgba(14, 228, 90, .25); }

/* === Buttons ============================================================= */
button { cursor: pointer; border-radius: var(--r-md); font-weight: 500;
         transition: background .12s, border-color .12s, color .12s, transform .04s, box-shadow .12s; }
button:active { transform: translateY(0.5px); }
button:focus-visible { outline: none; box-shadow: var(--ring); }

/* === Buttons — единая 5-классовая система (Phase 8a) ====================
   Все кнопки веба сведены к 5 базовым классам:
     .btn-primary    — главный CTA (Save, Submit, ✓ Принять)
     .btn-secondary  — вторичный/inline (Edit, ↩ Назад, ✓ закрыть task)
     .btn-ghost      — третичный, минимальный (Skip, ➕ Новый)
     .btn-danger     — destructive (🗑 Delete, ✗ Decline)
     .btn-chip-close — × внутри chip
   До 8a было 22+ вариаций (.btn-ok/edit/close/save/route/...) с
   несинхронной палитрой (зелёный glow, pink glow, gradient). Аудит
   design-reviewer 2026-06-02. */

.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 8px 14px; border-radius: var(--r-md);
    font-family: var(--font); font-size: 13px; font-weight: 500;
    line-height: 1.2; cursor: pointer; text-decoration: none;
    border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}

/* Фаза 15.5.4: компактная inline-icon кнопка (save / + в формах). */
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.btn-icon:hover { background: var(--surface-2); color: var(--fg); border-color: var(--border-strong); }
.btn-icon-accent { color: var(--accent); border-color: var(--accent-soft); }
.btn-icon-accent:hover { background: var(--accent-soft); color: var(--accent); }
.btn-primary:focus-visible, .btn-secondary:focus-visible,
.btn-ghost:focus-visible, .btn-danger:focus-visible {
    outline: none; box-shadow: var(--ring);
}

/* primary — accent fill */
.btn-primary {
    background: var(--accent); color: #fff; font-weight: 600;
}
.btn-primary:hover { background: var(--accent-2); }
.btn-primary:disabled { background: var(--surface-3); color: var(--muted); cursor: not-allowed; }

/* secondary — surface fill, border */
.btn-secondary {
    background: var(--surface-2); color: var(--fg-soft);
    border-color: var(--border);
}
.btn-secondary:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--fg); }

/* ghost — transparent, hover surface */
.btn-ghost {
    background: transparent; color: var(--muted);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--fg-soft); }

/* danger — red fill on hover, neutral idle.
   icon-only вариант (внутри только svg) — idle красная иконка для destructive-сигнала. */
.btn-danger {
    background: var(--surface-2); color: var(--fg-soft);
    border-color: var(--border);
}
.btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:has(svg:only-child) { color: var(--red); }
.btn-danger:has(svg:only-child):hover { color: #fff; }

/* === Confirm modal ======================================================
   Универсальная модалка подтверждения destructive-действий. Подключается
   через JS в base.html — перехватывает hx-confirm (HTMX) и
   data-confirm-modal на формах (не-HTMX). Заменяет нативный browser
   confirm() — у него нет визуальной дифференциации destructive vs обычное. */
.confirm-modal {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--fg);
    max-width: 440px;
    width: calc(100% - 32px);
    box-shadow: var(--shadow-lg);
}
.confirm-modal::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}
.confirm-modal > form {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}
.confirm-modal-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--fg); }
.confirm-modal-text  { margin: 0; font-size: 14px; color: var(--fg-soft); line-height: 1.45; white-space: pre-line; }
.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

/* magic — LLM action marker, purple accent. Семантика: «эта кнопка стоит токенов / времени GPT» */
.btn-magic {
    background: var(--surface-2); color: var(--acc-purple);
    border-color: var(--border);
}
.btn-magic:hover {
    background: var(--accent-soft); color: var(--acc-purple);
    border-color: var(--acc-purple);
}
.btn-magic svg { color: var(--acc-purple); }

/* Inline-row компактная версия — для action-кнопок в строках таблицы. */
.actions .btn-primary, .actions .btn-secondary,
.actions .btn-ghost, .actions .btn-danger {
    padding: 5px 10px; margin-left: 4px;
}

table.tasks .actions { text-align: right; width: 140px; white-space: nowrap; }

.route-form { display: inline-flex; gap: 6px; margin-left: auto; align-items: center; }
.route-form select {
    padding: 5px 10px; border: 1px solid var(--border);
    border-radius: var(--r-md); background: var(--surface-2);
    color: var(--fg); font-size: 13px; height: 30px;
}
.route-form select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* === Suggestion / LLM ==================================================== */
.suggestion {
    flex: 1 1 100%; margin: 4px 0 0;
    padding: 12px 14px;
    background: var(--accent-soft);
    border: 1px solid rgba(0, 112, 243, 0.2);
    border-radius: var(--r-md);
    font-size: 13px; color: var(--fg-soft);
}
.suggestion strong { color: var(--accent); font-weight: 600; }
[data-theme="light"] .suggestion strong { color: var(--accent); }

.conf {
    display: inline-block; padding: 2px 8px; border-radius: var(--r-pill);
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    margin-left: 6px; font-weight: 600;
}
.conf-high { background: var(--green-soft); color: var(--green); }
.conf-medium { background: var(--yellow-soft); color: var(--yellow); }
.conf-low { background: var(--red-soft); color: var(--red); }

.suggestion-accept { display: inline-block; margin-left: 8px; }

/* === Pending assignments в /inbox ======================================= */
/* Блок «На согласование» — тебе делегировали. До этой версии CSS не было,
   рендерилось как голый <ul>. Стиль зеркалит `today-row` (border-left
   акцент 3px) — сразу читается как «требует твоего внимания». */
.pending-assignments {
    margin: 0 0 24px 0;
    padding: 16px;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-lg);
}
.pending-assignments h2 {
    margin: 0 0 6px 0; font-size: 16px;
    text-transform: none; letter-spacing: normal;
}
.pending-assignments .hint {
    margin: 0 0 12px 0; color: var(--muted);
    font-size: 12px;
}
.pending-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.pending-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.pending-card-body {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.pending-text {
    color: var(--fg); font-size: 14px; font-weight: 500;
    line-height: 1.4;
}
.pending-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: 11px; color: var(--muted);
}
.pending-from { color: var(--fg-soft); }
.pending-track {
    padding: 1px 7px; background: var(--surface-2);
    border-radius: var(--r-pill); font-size: 11px;
    color: var(--fg-soft); font-family: var(--mono);
}
.pending-actions {
    display: flex; gap: 6px; flex-shrink: 0;
}

/* === Create / process forms ============================================= */
.create-track, .create-task, .process-transcripts {
    margin: 12px 0; padding: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.create-track form, .create-task form, .process-transcripts form {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.create-track input[type=text], .create-task input[type=text] {
    flex: 1 1 200px; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface-2); color: var(--fg);
    font-size: 13px; height: 34px;
}
.create-track input[type=text]:focus, .create-task input[type=text]:focus {
    outline: none; border-color: var(--accent); box-shadow: var(--ring); background: var(--surface);
}
.create-track input[type=text]::placeholder, .create-task input[type=text]::placeholder { color: var(--muted-2); }
.create-track button, .create-task button, .process-transcripts button {
    padding: 8px 16px; background: var(--grad-main); color: #fff;
    border: none; border-radius: var(--r-md);
    font-weight: 600; font-size: 13px; height: 34px;
    transition: transform .08s, box-shadow .12s;
}
.create-track button:hover, .create-task button:hover, .process-transcripts button:hover {
    transform: translateY(-1px); box-shadow: var(--glow-accent);
}
.success-flash {
    display: inline-flex; align-items: center; color: var(--green);
    font-size: 13px; padding: 5px 12px;
    background: var(--green-soft); border-radius: var(--r-md);
    border: 1px solid rgba(14, 228, 90, 0.25);
}
.success-flash a { color: var(--accent); }
[data-theme="light"] .success-flash a { color: var(--accent); }

.error-flash {
    display: inline-flex; align-items: center; color: var(--red);
    font-size: 13px; padding: 5px 12px;
    background: rgba(255, 71, 87, 0.10); border-radius: var(--r-md);
    border: 1px solid rgba(255, 71, 87, 0.30);
}

/* === Floating toasts (HTMX errors etc.) ================================== */
.toast {
    position: fixed; bottom: 24px; right: 24px;
    max-width: 480px; padding: 12px 18px;
    background: var(--surface-2); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--r-md);
    font-size: 13px; line-height: 1.4;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
    opacity: 0; transform: translateY(8px);
    transition: opacity .2s, transform .2s;
    z-index: 9999;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { border-color: var(--red); background: rgba(255, 77, 77, 0.10); color: var(--red); }
.toast-info { border-color: var(--accent); }

/* === Edit row ============================================================ */
table.tasks tr.edit-row td { background: var(--surface-2); padding: 14px 16px; }
.edit-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13px; }
.edit-form label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.edit-form input {
    padding: 5px 10px; border: 1px solid var(--border);
    border-radius: var(--r-md); background: var(--surface);
    color: var(--fg); font-size: 13px; height: 30px;
}
.edit-form input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* === Auth ================================================================ */
.auth-card {
    max-width: 400px;
    margin: 64px auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 36px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.auth-card::before {
    content: "";
    position: absolute;
    width: 240px; height: 240px;
    right: -80px; top: -80px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 112, 243, 0.20), transparent 60%);
    pointer-events: none;
}
.auth-card::after {
    content: "";
    position: absolute;
    width: 200px; height: 200px;
    left: -60px; bottom: -60px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 112, 243, 0.16), transparent 60%);
    pointer-events: none;
}
.auth-card > * { position: relative; }
.auth-card h2 { margin: 0 0 24px; font-size: 22px; text-align: center; letter-spacing: -0.02em; }
/* Фаза 15.5.4: labels без uppercase/letter-spacing (Я.360-style — обычный
   капитализированный регистр), inputs тоньше, кнопка не full-width-glow. */
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 13px; font-weight: 500; color: var(--fg-soft);
}
.auth-form label.check {
    flex-direction: row; align-items: center; gap: 8px;
    cursor: pointer;
}
.auth-form label.check input[type="checkbox"],
.auth-form label.check input[type="radio"] {
    margin: 0; flex-shrink: 0;
}
.auth-form label.check .digest-time-select {
    margin-left: 4px; padding: 4px 8px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    font-size: 13px; background: var(--surface); color: var(--fg);
    cursor: pointer;
}
.auth-form button.btn-danger {
    background: transparent; color: var(--red);
    border: 1px solid var(--red);
}
.auth-form button.btn-danger:hover {
    background: var(--red-soft); color: var(--red);
}
.auth-form label small { color: var(--muted); font-weight: 400; }
.auth-form input {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 14px; color: var(--fg);
    background: var(--surface);
    transition: border-color .12s, box-shadow .12s;
}
.auth-form input:hover { border-color: var(--border-strong); }
.auth-form input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-form input:disabled { color: var(--muted); background: var(--surface-2); }
.auth-form button {
    align-self: flex-start;
    padding: 9px 20px; background: var(--accent); color: #fff;
    border: none; border-radius: var(--r-md);
    font-size: 13px; font-weight: 600; margin-top: 4px;
    transition: background .12s;
}
.auth-form button:hover { background: var(--accent-2); }
.auth-error {
    padding: 10px 14px; background: var(--red-soft); color: var(--red);
    border-radius: var(--r-md); margin-bottom: 4px; font-size: 13px;
    border-left: 3px solid var(--red);
}
.auth-alt { margin: 20px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.auth-alt a { color: var(--accent); font-weight: 600; }
[data-theme="light"] .auth-alt a { color: var(--accent); }

/* === HTMX states ========================================================= */
.htmx-request { opacity: 0.6; transition: opacity .15s; }
.htmx-request.htmx-indicator { display: inline; }

/* === Scrollbar =========================================================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-pill); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* === Responsive ========================================================== */
@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar {
        position: static; height: auto;
        flex-direction: row;
        overflow-x: auto;
        padding: 10px 12px;
        gap: 8px;
        align-items: center;
    }
    .sb-logo { margin-bottom: 0; padding: 4px 8px; }
    .sb-section, .sb-spacer, .sb-bottom { display: none; }
    .sb-nav { flex-direction: row; gap: 4px; }
    .sb-item { white-space: nowrap; }
    .sb-label { display: none; }
    .content-inner { padding: 20px 16px 40px; }
    .hero { padding: 20px 22px; }
    .hero-title { font-size: 26px; }
    .hero-focus-num { font-size: 56px; }
    h2 { font-size: 20px; }
    .filters { flex-direction: column; align-items: stretch; }
    .filters select, .filters input[type=text] { width: 100%; }
    table.data { font-size: 12px; }
    table.data th, table.data td { padding: 8px 10px; }
    table.tasks .actions { width: auto; }
}

/* ─── Transcript flow v2 ────────────────────────────────────────── */

.tx-upload { margin: 24px 0; }
.tx-upload textarea {
    width: 100%; min-height: 200px;
    padding: 12px; font-family: inherit; font-size: 14px;
    background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: 8px;
}
.tx-upload-actions {
    display: flex; gap: 12px; align-items: center; margin-top: 12px;
}
.tx-folder {
    margin-top: 32px; padding: 12px; border: 1px dashed var(--border);
    border-radius: 8px; opacity: 0.7;
}
.tx-folder summary { cursor: pointer; font-weight: 500; }

.tx-walk { max-width: 720px; margin: 0 auto; }
.tx-walk-header h2 { margin-bottom: 8px; }
.tx-context {
    padding: 8px 12px; background: var(--surface-2, var(--surface));
    border-left: 3px solid var(--accent); border-radius: 4px;
    font-style: italic; margin: 8px 0;
}
.tx-progress { color: var(--muted); font-size: 14px; }

.tx-card-frame {
    margin: 24px 0; padding: 20px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px;
}
.tx-task-text { font-size: 16px; line-height: 1.5; margin: 8px 0; }
.tx-task-meta {
    display: flex; gap: 24px; color: var(--muted); font-size: 14px;
    margin-bottom: 16px;
}
.tx-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.tx-actions button,
.tx-actions .btn-ok,
.tx-actions .btn-skip,
.tx-actions .btn-edit,
.tx-actions button:hover { border-color: var(--accent); }

.tx-context-form textarea,
.tx-input-form textarea {
    width: 100%; padding: 10px; font-family: inherit; font-size: 14px;
    background: var(--surface-2, var(--surface)); color: var(--fg);
    border: 1px solid var(--border); border-radius: 6px;
}
.tx-prompt { font-weight: 500; margin: 0 0 12px 0; white-space: pre-line; }
.tx-row { display: flex; gap: 8px; margin-top: 12px; }
.tx-error { color: #c53030; font-size: 13px; }
.tx-message { color: var(--accent); font-size: 13px; margin-top: 8px; }

.tx-picker-grid {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0;
}
.tx-done h3 { color: var(--accent); }
.tx-done .tx-tracks ul { margin: 8px 0; padding-left: 20px; }
.tx-walk-footer { margin-top: 24px; text-align: right; }

/* ─── edit-row / add-person form ──────────────────────────────────── */
.edit-row-grid {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
    padding: 12px; background: var(--surface-2); border-radius: var(--r-md);
}
.edit-row-grid label {
    display: flex; flex-direction: column; gap: 4px; font-size: 12px;
    color: var(--muted); flex: 1 1 auto;
}
.edit-row-grid .edit-text { flex: 2 1 320px; }
.edit-row-grid textarea {
    padding: 8px; font-family: inherit; font-size: 14px;
    background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--r-sm);
    min-height: 56px;
}
.edit-row-grid select, .edit-row-grid input[type=date] {
    padding: 6px 8px; background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--r-sm);
}

/* Фаза 15.5.4: inline-форма редактирования в /people — input + save-кнопка
   на одной линии, чистый стиль без heavy borders. */
.edit-person-form {
    display: inline-flex; gap: 6px; align-items: center;
}
.edit-person-form input {
    padding: 6px 10px; background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--r-md);
    font-size: 13px; height: 30px; box-sizing: border-box;
}
.edit-person-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.add-person { margin-top: 12px; }
.add-person summary {
    cursor: pointer; color: var(--muted); font-size: 13px; padding: 6px 0;
}
.add-person summary:hover { color: var(--fg); }
.add-person-form {
    display: flex; gap: 10px; align-items: end; margin-top: 12px;
    padding: 14px; background: transparent; border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.add-person-form label {
    display: flex; flex-direction: column; gap: 5px; font-size: 13px;
    color: var(--fg-soft); font-weight: 500;
}
.add-person-form input {
    padding: 8px 10px; background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px;
}
.add-person-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.add-person-form button {
    padding: 8px 16px; background: var(--accent); color: white;
    border: none; border-radius: var(--r-md); cursor: pointer; font-size: 13px; font-weight: 600;
}
.add-person-form button:hover { background: var(--accent-2); }
.save-result, .add-person-result { display: block; font-size: 12px; margin-top: 6px; }

/* ─── Multi-assignee chips ────────────────────────────────────────── */
.multi-assignees {
    margin-top: 12px; padding: 10px; background: var(--surface-2);
    border-radius: var(--r-md); font-size: 13px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.multi-assignees .chip-assignee {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-pill);
}
.btn-chip-x {
    background: none; border: none; color: var(--muted); cursor: pointer;
    padding: 0 2px; font-size: 14px; line-height: 1;
}
.btn-chip-x:hover { color: var(--red); }
.multi-assignees select {
    padding: 4px 8px; background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--r-sm);
}
.muted { color: var(--muted); }

/* ─── /people маркеры ─────────────────────────────────────────────── */
.chip-marker {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--r-pill);
    font-family: var(--mono); font-size: 12px;
}
.chip-marker form { display: inline; }
.chip-muted { background: transparent; color: var(--muted); border: 1px dashed var(--border); }
.add-marker-form {
    display: inline-flex; gap: 6px; align-items: center;
}
.add-marker-form input {
    padding: 6px 10px; background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--r-md);
    font-family: var(--mono); font-size: 12px; height: 30px; box-sizing: border-box;
}
.add-marker-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* .add-marker-form .btn-icon наследует из глобального */
table.people th { text-align: left; padding: 8px 12px; color: var(--muted); }
table.people td { padding: 10px 12px; border-top: 1px solid var(--border); }

/* ─── Typography v4.1: tabular numbers + Inter feature-set ───────── */

html, body {
    font-feature-settings: "ss01" on, "ss03" on, "cv11" on;
}
/* Tabular figures для чисел, дат, счётчиков: чтобы цифры не «прыгали». */
table.data, table.tasks, .sb-count, .stat-num, .num,
.hero-big, .pipeline-count, .chip-deadline, .chip-deadline-overdue {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ─── Density toggle UI ─────────────────────────────────────────── */

.sb-density-toggle {
    display: inline-flex; gap: 4px; padding: 3px;
    background: var(--surface-2); border-radius: var(--r-pill);
    border: 1px solid var(--border); margin-top: 8px;
    font-size: 11px;
}
.sb-density-toggle .opt {
    padding: 4px 10px; border-radius: var(--r-pill);
    color: var(--muted); cursor: pointer; user-select: none;
    transition: all .12s ease;
}
.sb-density-toggle .opt.active {
    background: var(--surface); color: var(--fg);
    box-shadow: var(--shadow-sm);
}
.sb-density-toggle .opt:hover { color: var(--fg); }

/* Применение density к table rows */
table.data td, table.data th,
table.tasks td, table.tasks th {
    padding: var(--row-pad-y) var(--row-pad-x);
}
.hero { padding: var(--hero-pad) calc(var(--hero-pad) + 4px); }

/* В compact-режиме чуть меньше vertical отступов в формах */
:root[data-density="compact"] .filters {
    gap: 8px;
}
:root[data-density="compact"] .filters input,
:root[data-density="compact"] .filters select {
    padding: 5px 8px;
}

/* =========================================================================
   P1.8 (2026-06-11): utility-классы взамен inline style=""
   ========================================================================= */

/* Soft-card — повторяющийся «нежный блок»: surface + border + r-lg + padding.
   Видно в _person_card_top3, me-checklist, suggested-link sections. */
.soft-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px 22px;
}
.soft-card--narrow { max-width: 840px; }

/* Tier-chip — карточка человека: «я»/«прямой репорт»/«в моей команде»/«не мой репорт».
   Базовый стиль + цветовые варианты (semantic). */
.tier-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 12px; font-weight: 500; color: var(--fg-soft);
}
.tier-chip--self      { color: var(--accent); border-color: var(--accent); }
.tier-chip--direct    { color: var(--acc-blue); border-color: var(--acc-blue); }
.tier-chip--indirect  { color: var(--acc-purple); border-color: var(--acc-purple); }
.tier-chip--peer      { color: var(--muted); }

/* People-grid — компактная сетка карточек (карточка человека-команды). */
.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

/* Section-title-icon — расширение цветовой палитры. */
.section-title-icon--yellow { color: var(--yellow); }
.section-title-icon--pink   { color: var(--acc-pink); }
.section-title-icon--purple { color: var(--acc-purple); }

/* Subsection-title — мелкий заголовок-делитель внутри карточки. */
.subsection-title {
    margin: 12px 0 6px;
    font-size: 14px; font-weight: 600;
    color: var(--fg-soft);
}

/* Spacing utilities (margin-top / margin-bottom).
   Кратны 8px для соответствия rhythm grid. */
.mt-0  { margin-top: 0; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

/* Max-width utilities (соответствуют content widths DS v2). */
.max-w-460 { max-width: 460px; }
.max-w-560 { max-width: 560px; }
.max-w-640 { max-width: 640px; }
.max-w-840 { max-width: 840px; }

/* Inline-flex helper — повторяющийся style="display:inline-flex;align-items:center;gap:..." */
.inline-flex-center {
    display: inline-flex; align-items: center; gap: 8px;
}

/* today-list/today-row variants для карточек. */
.today-list--unstyled {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.today-row-chips--narrow { max-width: 120px; }

/* Спец-классы карточек встреч. */
.calendar-card-time-range { margin-top: 2px; }

/* P1.8: дополнительные utility — back-link, ml/center, муty-hint, show-all. */
.back-link { color: var(--muted); font-size: 13px; }
.ml-8 { margin-left: 8px; }
.hero-row--center { align-items: center; gap: 18px; }
.muted-hint { color: var(--muted); font-size: 13px; }
.muted-hint--pad { padding: 8px 0; }
.show-all-link { text-align: center; margin-top: 12px; }

/* P1.8: ещё utility — inline-flex variants, person-meta-row, marker-code. */
.inline-flex-center--xs { gap: 6px; }
.person-meta-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.marker-code { color: var(--muted); }

/* P1.8: flash и list utilities. */
.flash-row {
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}
.list-reset { margin: 0; padding-left: 18px; list-style: none; }
.checklist-row {
    margin: 6px 0; display: flex; gap: 10px; align-items: flex-start;
}
.checklist-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.checklist-icon--ok { color: var(--green); }
.checklist-icon--warn { color: var(--yellow); }
.checklist-text { flex: 1; }
.code-muted { color: var(--muted); font-size: 12px; }
.text-muted { color: var(--muted); }
.text-green { color: var(--green); }
.text-yellow { color: var(--yellow); }
.flex-between {
    display: flex; justify-content: space-between; align-items: center;
}
.section-header { margin-bottom: 10px; }
.icon-label-row { display: inline-flex; align-items: center; gap: 8px; }

/* Russian locale time-input — скрыть AM/PM поле (regression на macOS en
   locale 2026-06-23). Цифры моноширинными для выравнивания. */
input[type="time"]::-webkit-datetime-edit-ampm-field { display: none; }
input[type="time"] { font-variant-numeric: tabular-nums; }

/* Tier-icons для людей: direct/indirect report, peer, self. 2026-06-23.
   Применяются рядом с именем человека на /team, /team/{id}, person-card. */
.tier-icon { width: 14px; height: 14px; vertical-align: text-bottom; }
.tier-direct { color: var(--acc-blue); }
.tier-indirect { color: var(--acc-indigo); }
.tier-peer { color: var(--muted); }
.tier-self { color: var(--acc-green); }

/* Onboarding hero — иерархия 3 главных + 3 дополнительных. 2026-06-23. */
.onb-hero { display: grid; gap: 14px; margin-bottom: 32px; }
.onb-hero-row-primary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.onb-hero-row-secondary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.onb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.onb-card:hover { border-color: var(--acc-blue); transform: translateY(-1px); }
.onb-card-secondary { padding: 14px 16px; gap: 6px; }
.onb-card-icon { display: inline-flex; align-items: center; color: var(--acc-blue); }
.onb-card-secondary .onb-card-icon { color: var(--muted); }
.onb-card-title { font-weight: 600; font-size: 16px; }
.onb-card-secondary .onb-card-title { font-size: 14px; }
.onb-card-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
@media (max-width: 720px) {
  .onb-hero-row-primary, .onb-hero-row-secondary { grid-template-columns: 1fr; }
}
/* Inline row utility — иконка/чип + текст в одну линию.
   Заменяет повторные style="display:inline-flex;align-items:center;gap:Npx"
   на 30+ местах (tasks/me/install_bot/etc). 2026-06-23. */
.row-inline { display: inline-flex; align-items: center; gap: 6px; }
.row-inline-tight { display: inline-flex; align-items: center; gap: 4px; }
.row-inline-wide { display: inline-flex; align-items: center; gap: 10px; }

/* Свёрнутые фильтры на /tasks. Раскрытие — клик по summary. */
details.task-filters { margin-bottom: 16px; }
details.task-filters > summary { cursor: pointer; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
details.task-filters[open] > summary { margin-bottom: 12px; }

/* Surface cards — карточки на /me и /settings. 2026-06-23. */
.me-checklist { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 22px; margin-bottom: 24px; }
.me-checklist-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.me-checklist-list { margin: 0; padding-left: 18px; list-style: none; }
.me-checklist-list li { margin: 6px 0; display: flex; gap: 10px; align-items: flex-start; }
.me-checklist-list li > span:first-child { display: inline-flex; align-items: center; flex-shrink: 0; }
.me-checklist-list li > span:last-child { flex: 1; }
.me-link-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 560px; }
.me-link-card + .me-link-card { margin-top: 12px; }
.me-icon-ok { color: var(--green); }
.me-icon-warn { color: var(--yellow); }

/* Блок 5 (2026-06-27): карточка-ссылка на /settings со страницы /me. */
.me-settings-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin: 0 0 24px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    max-width: 560px;
    transition: background 0.12s, border-color 0.12s;
}
.me-settings-link:hover {
    background: var(--surface-hover, var(--surface));
    border-color: var(--acc-blue, var(--border));
}
.me-settings-link-ic {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--muted);
}
.me-settings-link-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.me-settings-link-body strong { color: var(--text); font-weight: 600; }
.me-settings-link-body small { color: var(--muted); }
.me-settings-link-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--muted);
}

/* === Блок 8 (2026-06-27): дизайн-долг веба. === */

/* Универсальный alert-card. Заменяет calendar-banner-warn,
   escalations-секцию на /team и подобные «коробочки-предупреждения».
   Модификаторы: --warn (жёлтый), --info (синий), --error (красный). */
.alert-card {
    margin: 16px 0;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--r-lg);
    font-size: 13px;
    color: var(--fg);
}
.alert-card--warn  { border-left-color: var(--yellow); background: var(--yellow-soft); }
.alert-card--info  { border-left-color: var(--acc-blue); }
.alert-card--error { border-left-color: var(--red); background: var(--red-soft); color: var(--red); }
.alert-card a { color: var(--acc-blue); }
.alert-card-head {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 8px; font-weight: 600;
}
.alert-card-head .alert-card-icon { display: inline-flex; align-items: center; }
.alert-card--warn  .alert-card-icon { color: var(--yellow); }
.alert-card--info  .alert-card-icon { color: var(--acc-blue); }
.alert-card--error .alert-card-icon { color: var(--red); }
.alert-card-list { margin: 0; padding-left: 0; list-style: none; }
.alert-card-list > li { margin: 6px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Блок «помощник» внутри карточки встречи (A.11). Раньше — 22 inline-style. */
.calendar-card-assistant {
    margin-top: 10px;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
}
.assistant-block-summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.assistant-block-body { margin-top: 10px; }
.assistant-block-text {
    white-space: pre-wrap;
    font-size: 13px;
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: 10px;
    margin-bottom: 10px;
}
.assistant-block-empty {
    color: var(--muted);
    font-size: 12px;
    margin: 0 0 10px 0;
}
.assistant-block-tasks {
    list-style: none;
    padding: 0;
    margin: 0;
}
.assistant-block-task {
    padding: 4px 0;
    font-size: 13px;
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.assistant-block-task-prio {
    color: var(--muted);
    font-size: 11px;
    min-width: 24px;
}
.assistant-block-task-text { flex: 1; }
.assistant-block-task-deadline {
    color: var(--muted);
    font-size: 11px;
}
.assistant-block-link {
    font-size: 12px;
    display: inline-block;
    margin-top: 6px;
}

/* sb-user — раньше внутри <a> лежала <form action="/auth/logout">,
   что невалидный HTML5. Разносим в горизонтальный flex с двумя
   независимыми кликабельными элементами. */
.sb-user-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 8px 10px;
    transition: background .12s, border-color .12s;
}
.sb-user-row:hover { background: var(--surface-3); border-color: var(--border-strong); }
.sb-user-row .sb-user-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--fg);
    min-width: 0;
}
.sb-user-row .sb-user-info:hover { text-decoration: none; opacity: 1; }
.sb-user-row form.inline-form {
    display: flex;
    align-items: center;
}
.layout[data-sb="narrow"] .sb-user-row { padding: 6px; }
.layout[data-sb="narrow"] .sb-user-row form.inline-form { display: none; }

/* Onboarding — раньше в onboarding.html был inline <style> с .ob-*.
   Переезжаем в style.css, объединяем с уже существующими .onb-*. */
.ob-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 48px;
    align-items: start;
}
.ob-toc {
    position: sticky;
    top: 24px;
    padding: 16px 0;
    border-left: 1px solid var(--border);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
.ob-toc h4 {
    margin: 0 0 12px 16px;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}
.ob-toc a {
    display: block;
    padding: 6px 16px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -1px;
    transition: color .15s, border-color .15s;
}
.ob-toc a:hover { color: var(--fg); }
.ob-toc a.active { color: var(--accent); border-left-color: var(--accent); }
.ob-main h2 {
    margin-top: 48px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    scroll-margin-top: 24px;
}
.ob-main h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 24px; }
.ob-main h3 { margin-top: 28px; }
.ob-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 32px;
    margin-bottom: 32px;
}
.ob-hero h1 { margin: 0 0 8px; font-size: 32px; }
.ob-hero p { margin: 0; color: var(--muted); font-size: 15px; }
.ob-state {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    margin: 24px 0 32px;
}
.ob-state.ok { border-color: var(--green); }
.ob-state.warn { border-color: var(--yellow); }
.ob-state h3 {
    margin: 0 0 8px; font-size: 18px; font-weight: 700;
    color: var(--fg); text-transform: none; letter-spacing: -0.01em;
}
.ob-state .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ob-state ol {
    margin: 8px 0 12px 20px;
    padding: 0;
    color: var(--fg-soft);
    font-size: 14px;
    line-height: 1.7;
}
.ob-cmd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--surface-2, rgba(0,0,0,.05));
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}
.ob-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 16px 0;
}
.ob-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px 20px;
}
.ob-card h4 {
    margin: 0 0 6px; font-size: 15px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
    text-transform: none; letter-spacing: 0; color: var(--fg);
}
.ob-card-icon { display: inline-flex; align-items: center; }
.ob-card p { margin: 0; color: var(--muted); font-size: 13px; }
.ob-whatsnew {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    margin: 24px 0 32px;
}
.ob-whatsnew h2 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--fg);
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    padding: 0;
}
.ob-whatsnew ul { list-style: none; padding: 0; margin: 0; }
.ob-whatsnew li {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    border-top: 1px solid var(--border);
}
.ob-whatsnew li:first-child { border-top: 0; }
.ob-whatsnew .nw-date { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.ob-whatsnew .nw-title { font-weight: 500; color: var(--fg); }
.ob-whatsnew .nw-why { color: var(--muted); font-size: 13px; margin-left: 6px; }
.ob-whatsnew .nw-link { color: var(--accent); text-decoration: none; }
.ob-whatsnew .nw-link:hover { text-decoration: underline; }
.ob-table { width: 100%; margin: 12px 0; border-collapse: collapse; }
.ob-table th, .ob-table td {
    text-align: left; padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.ob-table th { color: var(--muted); font-weight: 500; font-size: 12px; }
details.ob-backdoor {
    margin: 16px 0;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
details.ob-backdoor summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--muted);
}
details.ob-backdoor ul,
details.ob-backdoor ol {
    color: var(--fg-soft);
    line-height: 1.7;
}
.ob-details-intro {
    color: var(--muted);
    font-size: 14px;
}
@media (max-width: 900px) {
    .ob-layout { grid-template-columns: 1fr; }
    .ob-toc { display: none; }
}

/* install_bot.html — multi-step guide. Раньше был inline <style> блок. 2026-06-23. */
.ib-wrap { max-width: 720px; }
.ib-hero { margin-bottom: 24px; }
.ib-hero h1 { margin: 0 0 8px; font-size: 28px; }
.ib-hero p { margin: 0; color: var(--muted); }
.ib-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    margin-bottom: 24px;
}
.ib-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.ib-step:last-child { margin-bottom: 0; }
.ib-step-num {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
}
.ib-step-body { flex: 1; }
.ib-step-body strong { display: block; margin-bottom: 4px; }
.ib-username {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    background: var(--surface-2, rgba(0,0,0,0.05));
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 15px;
    user-select: all;
    margin-top: 6px;
}
.ib-qr {
    text-align: center;
    margin: 28px 0;
}
.ib-qr svg {
    width: 200px;
    height: 200px;
    background: #fff;
    padding: 12px;
    border-radius: 12px;
}
.ib-qr p {
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
}
.ib-foot { margin-top: 20px; }
.ib-foot a { margin-right: 16px; }