/* ============================================================
   Content Hub / AI Orchestra — design system (по ТЗ)
   Тёмный премиальный SaaS. Точные токены из ТЗ.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* фоны */
  --bg: #070B14;
  --bg-2: #0B1020;
  --sidebar: #080F1D;
  --card: #101827;
  --card-active: #121B31;
  --card-hover: #17213A;
  --border: #243047;
  --border-soft: #1b2741;
  /* акценты */
  --accent: #6366F1;
  --accent-hover: #7C83FF;
  --glow: rgba(99,102,241,.35);
  --accent-soft: rgba(99,102,241,.14);
  --ok: #22C55E;
  --err: #EF4444;
  --warn: #F59E0B;
  --info: #38BDF8;
  /* текст */
  --fg: #F8FAFC;
  --fg-2: #94A3B8;
  --fg-3: #74839B;   /* чуть светлее прежнего #64748B — мелкие подписи читаются на тёмных карточках */
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  /* геометрия */
  --r: 14px; --r-sm: 10px; --r-xs: 8px;
  --sb-w: 240px; --hd-h: 72px; --pad: 24px; --gap: 16px; --gap-card: 12px;
  --font: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1); --ease-2: cubic-bezier(.4,0,.2,1);
  --sh: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
  --sh-lg: 0 20px 60px rgba(0,0,0,.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font); background: var(--bg); color: var(--fg);
  font-size: 14px; font-weight: 500; line-height: 1.4;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  color-scheme: dark;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
select option { background: var(--bg-2); color: var(--fg); }
::selection { background: var(--accent-soft); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #1e2a44; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #2c3a59; background-clip: padding-box; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
h3 { font-size: 16px; font-weight: 600; line-height: 1.35; }
.t-sec { color: var(--fg-2); } .t-dim { color: var(--fg-3); }
.cap { font-size: 11px; font-weight: 400; color: var(--fg-3); }
.sm { font-size: 12px; font-weight: 400; color: var(--fg-2); }
.ic { flex: 0 0 auto; vertical-align: -.18em; }

/* ---------- App layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sb-w); background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 12px; gap: 4px; z-index: 30; overflow-y: auto; }
.content { margin-left: var(--sb-w); flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page { padding: var(--pad); display: flex; flex-direction: column; gap: var(--gap); }

/* ---------- Sidebar ---------- */
.logo-row { display: flex; align-items: center; gap: 11px; padding: 6px 8px 14px; }
.logo-row .lg { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(145deg,var(--accent),var(--accent-hover)); display: grid; place-items: center; color: #fff; box-shadow: 0 6px 18px var(--glow), inset 0 1px 0 rgba(255,255,255,.25); }
.logo-row .nm { font-weight: 700; font-size: 15.5px; letter-spacing: -.02em; line-height: 1.15; }
.logo-row .sb { font-size: 11px; color: var(--fg-3); }
.nav-item { display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 12px; border-radius: var(--r-sm); color: #CBD5E1; font-size: 14px; font-weight: 500; transition: .14s var(--ease-2); }
.nav-item .ic { color: var(--fg-3); }
.nav-item:hover { background: var(--card-active); color: var(--fg); }
.nav-item:hover .ic { color: var(--fg-2); }
.nav-item.active { background: var(--accent); color: #fff; box-shadow: 0 6px 18px var(--glow); }
.nav-item.active .ic { color: #fff; }
.nav-sep { height: 1px; background: var(--border); margin: 8px 4px; }
.user-card { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); transition: .14s; }
.user-card:hover { background: var(--card-hover); }
.user-card .av { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 12px; }
.user-card .un { font-weight: 600; font-size: 13px; } .user-card .ur { font-size: 11px; color: var(--fg-3); }

/* ---------- Header ---------- */
.header { height: var(--hd-h); flex: 0 0 var(--hd-h); display: flex; align-items: center; gap: 14px; padding: 0 var(--pad); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-2) 80%, transparent); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20; }
.header .h-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.header .h-proj { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-2); }
.spacer { flex: 1; }
.h-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; min-width: 240px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg-3); font-size: 13px; transition: border-color .15s; }
.h-search:focus-within { border-color: var(--accent); }
.h-search input { background: none; border: none; outline: none; color: var(--fg); width: 100%; }
.iconbtn { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--fg-2); border: 1px solid transparent; transition: .14s; position: relative; }
.iconbtn:hover { background: var(--card); color: var(--fg); border-color: var(--border); }
.iconbtn:active { transform: scale(.94); }
.dotbadge { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--err); border: 1.5px solid var(--bg-2); }

/* ---------- Status pill ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 20px; }
.status .d { width: 7px; height: 7px; border-radius: 50%; }
.status.on { color: var(--ok); background: color-mix(in srgb,var(--ok) 14%,transparent); } .status.on .d { background: var(--ok); }
.status.off { color: var(--fg-3); background: var(--card); } .status.off .d { background: var(--fg-3); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; border: 1px solid var(--border); background: var(--card); color: var(--fg); transition: .15s var(--ease-2); white-space: nowrap; }
.btn:hover { background: var(--card-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg,var(--accent),var(--accent-hover)); border-color: transparent; color: #fff; box-shadow: 0 6px 18px var(--glow); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ok { background: var(--ok); border-color: transparent; color: #04210f; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.btn-ghost:hover { background: var(--card); color: var(--fg); }
.btn-sm { height: 36px; padding: 0 12px; font-size: 13px; }
.btn-icon { width: 44px; padding: 0; }

/* ---------- Cards ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.card.hoverable { transition: .16s var(--ease); } .card.hoverable:hover { background: var(--card-hover); border-color: #2e3c57; transform: translateY(-2px); }
.sec-title { display: flex; align-items: center; gap: 10px; }
.sec-title h2 { font-size: 16px; } .sec-title .more { margin-left: auto; font-size: 12.5px; color: var(--fg-2); display: inline-flex; gap: 5px; align-items: center; }
.sec-title .more:hover { color: var(--accent-hover); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-xs); font-size: 11.5px; font-weight: 600; border: 1px solid var(--border); color: var(--fg-2); background: var(--bg-2); }
.badge .pdot { width: 7px; height: 7px; border-radius: 50%; }
.badge.ok { color: var(--ok); border-color: color-mix(in srgb,var(--ok) 35%,transparent); }
.badge.err { color: var(--err); border-color: color-mix(in srgb,var(--err) 35%,transparent); }
.badge.warn { color: var(--warn); border-color: color-mix(in srgb,var(--warn) 35%,transparent); }
.badge.info { color: var(--info); border-color: color-mix(in srgb,var(--info) 35%,transparent); }
.badge.acc { color: var(--accent-hover); background: var(--accent-soft); border-color: color-mix(in srgb,var(--accent) 35%,transparent); }
.up { color: var(--ok); } .down { color: var(--err); }

/* ---------- Progress ---------- */
.progress { height: 6px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg,var(--accent),var(--accent-hover)); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 3px; padding: 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.tab { height: 32px; padding: 0 13px; border-radius: var(--r-xs); font-size: 13px; color: var(--fg-2); display: inline-flex; align-items: center; gap: 6px; transition: .14s; }
.tab:hover { color: var(--fg); } .tab.active { background: var(--card); color: var(--fg); box-shadow: var(--sh); }

/* ---------- Table ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 12px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.table tr:hover td { background: var(--card-hover); }
.table tr:last-child td { border-bottom: none; }

/* ---------- Avatars ---------- */
.av { display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 600; }
.ava-stack { display: flex; } .ava-stack .av { margin-left: -7px; border: 2px solid var(--card); } .ava-stack .av:first-child { margin-left: 0; }

/* ---------- States: skeleton / empty / error ---------- */
.skel { background: linear-gradient(90deg,var(--card) 25%,var(--card-hover) 50%,var(--card) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 6px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 48px 24px; color: var(--fg-3); }
.empty .eico { width: 52px; height: 52px; border-radius: 15px; background: var(--card); border: 1px solid var(--border); display: grid; place-items: center; color: var(--fg-2); }
.empty h3 { color: var(--fg-2); }
.errbox { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: color-mix(in srgb,var(--err) 12%,transparent); border: 1px solid color-mix(in srgb,var(--err) 35%,transparent); color: #fecaca; font-size: 13px; }
.errbox .ei { display: inline-flex; flex: 0 0 auto; }
.errbox .et { flex: 1 1 220px; line-height: 1.45; }
.retrybtn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 7px 13px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb,var(--err) 45%,transparent); background: color-mix(in srgb,var(--err) 18%,transparent); color: #fee2e2; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s; }
.retrybtn:hover { background: color-mix(in srgb,var(--err) 30%,transparent); }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 1.7s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 50%,transparent);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

/* ---------- Motion ---------- */
@keyframes rise { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
.reveal { animation: rise .45s var(--ease) both; }
.stagger > * { animation: rise .45s var(--ease) both; }
.stagger > *:nth-child(1){animation-delay:.03s}.stagger > *:nth-child(2){animation-delay:.07s}.stagger > *:nth-child(3){animation-delay:.11s}.stagger > *:nth-child(4){animation-delay:.15s}.stagger > *:nth-child(5){animation-delay:.19s}.stagger > *:nth-child(6){animation-delay:.23s}.stagger > *:nth-child(7){animation-delay:.27s}.stagger > *:nth-child(8){animation-delay:.31s}

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--card-active); border: 1px solid var(--border); color: var(--fg); padding: 12px 18px; border-radius: var(--r-sm); box-shadow: var(--sh-lg); z-index: 80; transition: .3s var(--ease); display: flex; gap: 9px; align-items: center; font-size: 13.5px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Grids helpers ---------- */
.grid { display: grid; gap: var(--gap-card); }
.row { display: flex; gap: var(--gap-card); }
.hide { display: none !important; }

/* ============ Спец-компоненты ============ */
/* KPI */
.kpi-bar { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--gap-card); }
.kpi { height:84px; min-width:0; background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:18px; display:flex; align-items:center; gap:13px; box-shadow:0 1px 2px rgba(0,0,0,.18); transition:border-color .16s var(--ease-2), transform .16s var(--ease-2); }
.kpi:hover { border-color:#2e3c57; transform:translateY(-2px); }
.kpi .ki { width:40px; height:40px; border-radius:11px; background:var(--bg-2); border:1px solid var(--border); display:grid; place-items:center; color:var(--accent); flex:0 0 40px; }
.kpi .kv { font-size:21px; font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.kpi .kl { font-size:12px; color:var(--fg-3); margin-top:2px; }
.kpi .tr { font-size:12px; font-weight:600; margin-left:6px; }

/* Recommendation cards (height 220) */
.rec-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap-card); }
.rec { height:220px; background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:11px; position:relative; overflow:hidden; transition:.16s var(--ease); }
.rec:hover { border-color:#2e3c57; transform:translateY(-2px); }
.rec::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; }
.rec.urgent::before{background:var(--err);} .rec.opportunity::before{background:var(--warn);} .rec.optimize::before{background:var(--ok);} .rec.insight::before{background:var(--info);}
.rec .rh { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; }
.rec.urgent .rh{color:var(--err);} .rec.opportunity .rh{color:var(--warn);} .rec.optimize .rh{color:var(--ok);} .rec.insight .rh{color:var(--info);}
.rec .ra { font-size:12px; color:var(--fg-3); }
.rec .rt { font-size:15px; font-weight:600; line-height:1.3; }
.rec .rmeta { display:flex; gap:18px; }
.rec .rmeta .l { font-size:11px; color:var(--fg-3); } .rec .rmeta .v { font-size:13px; font-weight:600; }
.rec .rbtn { margin-top:auto; height:36px; border-radius:var(--r-sm); border:1px solid var(--border); font-size:12.5px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px; transition:.15s; }
.rec .rbtn:hover { background:var(--card-hover); }

/* Platform card */
.plat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.18); transition:border-color .16s var(--ease-2), transform .16s var(--ease-2); }
.plat-card:hover { border-color:#2e3c57; transform:translateY(-2px); }
.plat-card .ph { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.plat-card .pic { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:11px; flex:0 0 32px; }
.plat-card .pn { font-weight:600; font-size:13.5px; } .plat-card .pc { font-size:11px; color:var(--fg-3); }
.plat-card .pmet { display:flex; justify-content:space-between; align-items:baseline; margin:8px 0 2px; }
.plat-card .pmet .vv { font-size:18px; font-weight:700; }

/* Pipeline (конвейер на главной) */
.pipe { display:flex; gap:10px; overflow-x:auto; }
.pipe-col { flex:1; min-width:120px; background:var(--bg-2); border:1px solid var(--border-soft); border-radius:var(--r-sm); padding:10px; }
.pipe-col .pch { display:flex; align-items:center; gap:7px; margin-bottom:8px; font-size:12px; color:var(--fg-2); }
.pipe-col .pch .ct { margin-left:auto; font-size:15px; font-weight:700; color:var(--fg); }

/* Kanban (дашборд) */
.kanban { display:flex; gap:var(--gap-card); overflow-x:auto; padding-bottom:6px; align-items:flex-start; }
.kb-col { flex:0 0 210px; width:210px; display:flex; flex-direction:column; }
.kb-ch { display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:13px; font-weight:600; }
.kb-ch .ct { margin-left:auto; font-size:12px; color:var(--fg-3); background:var(--card); border:1px solid var(--border); border-radius:20px; padding:1px 8px; }
.kb-body { display:flex; flex-direction:column; gap:10px; min-height:60px; padding:4px; border-radius:var(--r-sm); }
.kb-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; min-height:150px; display:flex; flex-direction:column; gap:9px; cursor:grab; transition:.14s; }
.kb-card:hover { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.kb-card.dragging { opacity:.5; }
.kb-card .kt { font-size:13px; font-weight:600; line-height:1.35; }
.kb-card .kmeta { display:flex; flex-wrap:wrap; gap:6px; }
.kb-card .kfoot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; }

/* AI Chat (320 / >=620) */
.aichat { width:320px; flex:0 0 320px; background:var(--card); border:1px solid var(--border); border-radius:var(--r); display:flex; flex-direction:column; min-height:620px; overflow:hidden; }
.aichat .ach { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.aichat .acbody { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.aichat .acfoot { padding:12px; border-top:1px solid var(--border); }
.aichat .quick { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px; }
.aichat .qbtn { font-size:11.5px; padding:5px 9px; border-radius:20px; border:1px solid var(--border); color:var(--fg-2); background:var(--bg-2); }
.aichat .qbtn:hover { color:var(--fg); border-color:var(--accent); }
.aichat .inp { display:flex; gap:8px; }
.aichat .inp input { flex:1; height:44px; padding:0 13px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg-2); color:var(--fg); outline:none; }
.aichat .inp input:focus { border-color:var(--accent); }
.msg { display:flex; flex-direction:column; gap:8px; max-width:90%; }
.msg .bub { padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.45; }
.msg.ai { align-self:flex-start; } .msg.ai .bub { background:var(--bg-2); border:1px solid var(--border); }
.msg.me { align-self:flex-end; } .msg.me .bub { background:#4F46E5; color:#fff; }
.msg .acts { display:flex; gap:7px; flex-wrap:wrap; }
.msg .cact { height:32px; padding:0 12px; border-radius:8px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.checklist { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.checklist .ci { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--fg-2); }

/* Right details panel (320) */
.right-panel { width:320px; flex:0 0 320px; background:var(--card); border:1px solid var(--border); border-radius:var(--r); display:flex; flex-direction:column; overflow:hidden; align-self:stretch; }
.right-panel .rph { padding:16px; border-bottom:1px solid var(--border); }
.right-panel .rpbody { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:16px; }
.right-panel .rpfoot { padding:12px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.kv-row { display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid var(--border-soft); }
.kv-row .k { color:var(--fg-3); } .kv-row:last-child { border:none; }

/* Agent card (height ~150) */
.agent { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:11px; transition:.16s var(--ease); }
.agent.compact { min-height:150px; }
.agent:hover { border-color:#2e3c57; transform:translateY(-2px); }
.agent .ah { display:flex; align-items:center; gap:11px; }
.agent .av2 { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; flex:0 0 42px; }
.agent .an { font-weight:600; font-size:14px; } .agent .ar { font-size:11.5px; color:var(--fg-3); }
.agent .stt { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:4px 9px; border-radius:20px; }
.stt-work { color:var(--accent-hover); background:var(--accent-soft); } .stt-idle { color:var(--fg-3); background:var(--bg-2); } .stt-ok { color:var(--ok); background:color-mix(in srgb,var(--ok) 14%,transparent); }
.agent .atask { font-size:12px; color:var(--fg-2); line-height:1.45; }
.agent .amet { display:flex; gap:16px; font-size:11.5px; color:var(--fg-3); margin-top:auto; }
.agent .amet b { color:var(--fg); }

/* Logs timeline (горизонтальная) */
.log-tl { display:flex; gap:0; overflow-x:auto; }
.log-i { flex:1; min-width:150px; display:flex; flex-direction:column; gap:7px; padding:0 14px; border-right:1px solid var(--border-soft); }
.log-i:first-child{padding-left:0;} .log-i:last-child{border:none;}
.log-i .lic { width:28px; height:28px; border-radius:8px; background:var(--bg-2); border:1px solid var(--border); display:grid; place-items:center; }
.log-i .lt { font-size:11px; color:var(--fg-3); } .log-i .lx { font-size:12.5px; line-height:1.4; } .log-i .lu { font-size:11px; color:var(--fg-3); }
.log-list .lr { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border-soft); }
.log-list .lr:last-child{border:none;}

/* mini list rows */
.lrow { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-soft); font-size:13px; }
.lrow:last-child{border:none;} .lrow .ln { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg-2); }

/* ---------- Mobile nav (бургер + выезжающий сайдбар) ---------- */
.burger { display: none; width: 40px; height: 40px; border-radius: var(--r-sm); place-items: center; color: var(--fg); border: 1px solid var(--border); background: var(--card); flex: 0 0 auto; }
.burger:active { transform: scale(.94); }
.scrim { position: fixed; inset: 0; background: rgba(3,6,14,.62); z-index: 25; opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.show { opacity: 1; pointer-events: auto; }
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .26s var(--ease); box-shadow: var(--sh-lg); }
  .sidebar.open { transform: none; }
  .content { margin-left: 0; }
  .burger { display: grid; }
  .h-search { display: none; }
  .header { padding: 0 16px; gap: 10px; }
  .page { padding: 16px; }
}
@media (max-width: 1180px) {
  .kpi-bar { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .kpi-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .kpi { height: auto; min-height: 72px; padding: 12px 14px; gap: 11px; }
  .kpi .ki { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; }
  .kpi .kv { font-size: 19px; }
  /* при нечётном числе карточек последняя занимает всю строку, а не висит «сиротой» */
  .kpi-bar > .kpi:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .rec-grid { grid-template-columns: 1fr; }
  .proj-btn .status { display: none; }
}
@media (max-width: 480px) {
  .header { gap: 8px; }
  .header .h-title { font-size: 16px; min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .proj-btn { padding: 0 8px; }
}
@media (max-width: 420px) {
  .proj-btn .proj-name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) { *,.reveal,.stagger>* { animation: none !important; } }

/* ---------- Выбор проекта (шапка) ---------- */
.proj-select { position: relative; }
.proj-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: var(--r-sm);
            border: 1px solid var(--border); background: var(--card); color: var(--fg-2); font-size: 12.5px; font-weight: 600;
            font-family: inherit; cursor: pointer; transition: .14s; white-space: nowrap; }
.proj-btn:hover { background: var(--card-hover); color: var(--fg); border-color: #2e3c57; }
.proj-btn .proj-name { color: var(--fg); }
.proj-chev { transition: transform .16s; opacity: .7; }
.proj-select.open .proj-chev { transform: rotate(180deg); }
.proj-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; background: var(--bg-2);
             border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--sh-lg); padding: 6px; z-index: 40; display: none; }
.proj-select.open .proj-menu { display: block; animation: rise .14s var(--ease); }
.proj-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 11px; border-radius: var(--r-xs);
             background: none; border: none; color: var(--fg-2); font-size: 13px; font-weight: 500; font-family: inherit; text-align: left; cursor: pointer; transition: .12s; }
.proj-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-item:hover { background: var(--card); color: var(--fg); }
.proj-item.active { color: var(--fg); }
.proj-item.active svg:last-child { color: var(--accent-hover); }
.proj-item.add { margin-top: 4px; border-top: 1px solid var(--border-soft); color: var(--accent-hover); border-radius: 0 0 var(--r-xs) var(--r-xs); }
.proj-item.add:hover { color: var(--accent-hover); background: var(--accent-soft); }

/* ---------- Hover-подсказки (единый tooltip по всему сайту) ---------- */
#tipbox { position: fixed; z-index: 150; max-width: 340px; padding: 9px 12px; border-radius: 10px;
  background: #1a2338; border: 1px solid #35446b; box-shadow: var(--sh-lg); color: var(--fg);
  font-size: 12.5px; font-weight: 500; line-height: 1.5; pointer-events: none; opacity: 0;
  transform: translateY(4px); transition: opacity .13s ease, transform .13s ease; white-space: pre-line; overflow-wrap: break-word; }
#tipbox.show { opacity: 1; transform: none; }
@media (hover: none) { #tipbox { max-width: min(340px, calc(100vw - 24px)); } }

/* ---------- Тосты ---------- */
.toast-host { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast { display: inline-flex; align-items: center; gap: 9px; max-width: 340px; padding: 11px 15px; border-radius: var(--r-sm);
         background: var(--bg-2); border: 1px solid var(--border); box-shadow: var(--sh-lg); color: var(--fg); font-size: 13px; font-weight: 500;
         transform: translateY(10px); opacity: 0; transition: .22s var(--ease); }
.toast.show { transform: none; opacity: 1; }
.toast svg { flex: 0 0 auto; color: var(--accent-hover); }
.toast.ok svg { color: var(--ok); }
.toast.err svg { color: var(--err); }