/* ============================================================
   components.css — все стили компонентов.
   Берёт значения только из tokens.css (никаких hex).
   Источник макета: Dashboard v3.html
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-md);
}
body {
  min-height: 100vh;
  background: var(--bg-page);
  background-attachment: fixed;
  transition: background 0.3s;
}
.tnum { font-feature-settings: "tnum"; }
.mono { font-family: var(--font-mono); }

/* ============ APP SHELL ============ */
.app {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

/* ============ SIDEBAR ============ */
.sidebar {
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--card-bd);
  padding: var(--s-6) var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-6);
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: var(--s-3); padding: 0 6px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: #F4F0EA;
  display: grid; place-items: center; padding: 2px;
  box-shadow: 0 1px 2px var(--brand-navy-soft);
}
.brand-name {
  font-size: var(--fs-2xl); font-weight: 700;
  letter-spacing: -0.01em; color: var(--brand-navy);
}
body[data-theme="dark"] .brand-mark { background: rgba(255, 255, 255, 0.92); }
body[data-theme="dark"] .brand-name { color: var(--ink); }

.nav-group { display: flex; flex-direction: column; gap: 3px; }
.nav-label {
  color: var(--faint); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0 12px 6px;
}
.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) 12px;
  border-radius: var(--r-lg);
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-lg);
  font-weight: 500;
  user-select: none;
}
.nav-item:hover { background: rgba(127, 127, 127, 0.08); color: var(--ink); }
.nav-item.active {
  background: var(--brand-navy); color: #fff;
  box-shadow: var(--shadow-pop);
}
body[data-theme="dark"] .nav-item.active {
  background: var(--brand-blue-deep);
  box-shadow: 0 4px 14px rgba(30, 64, 175, 0.35);
}
.nav-item .left { display: flex; align-items: center; gap: var(--s-3); }
.nav-item .badge {
  background: #EF4444; color: #fff;
  font-size: var(--fs-xs); font-weight: 600;
  padding: 1px 7px; border-radius: var(--r-pill);
  min-width: 20px; text-align: center;
}
.nav-item.active .badge { background: #fff; color: var(--brand-navy); }
body[data-theme="dark"] .nav-item.active .badge { background: var(--ink); color: var(--brand-blue-deep); }

.int-mark {
  width: 18px; height: 18px; border-radius: 5px;
  display: grid; place-items: center;
  color: #fff; font-size: var(--fs-xs); font-weight: 700;
  flex-shrink: 0;
}
.int-mark.oz { background: var(--mk-oz); }
.int-mark.wb { background: var(--mk-wb); }
.int-mark.ym { background: var(--mk-ym); color: var(--mk-ym-fg); font-size: 9px; }
.int-mark.cs { background: var(--mk-cs); color: var(--mk-ym-fg); }
.nav-item .add-link { color: var(--brand-blue); font-weight: 600; }
.nav-item .check {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--up-fg); color: #fff;
  display: grid; place-items: center; margin-left: auto;
}

/* ============ MAIN ============ */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--s-7) var(--s-8) var(--s-2);
  gap: 24px;
}
.greet h1 {
  font-size: var(--fs-4xl); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 4px; color: var(--ink);
}
.greet p { font-size: var(--fs-lg); color: var(--muted); margin: 0; }

.topbar-right { display: flex; align-items: center; gap: var(--s-3); }
.topbar-date {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 9px var(--s-4); border-radius: var(--r-lg);
  background: var(--chip-bg); border: 1px solid var(--card-bd);
  font-size: var(--fs-md); font-weight: 500; color: var(--ink);
}
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--r-lg);
  background: var(--chip-bg); border: 1px solid var(--card-bd);
  display: grid; place-items: center;
  cursor: pointer; position: relative; color: var(--ink);
}
.dot-badge {
  position: absolute; top: 9px; right: 11px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #EF4444; border: 2px solid #fff; box-sizing: content-box;
}
.avatar {
  width: 38px; height: 38px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, #0B1220, #374151);
  position: relative; cursor: pointer;
}
.avatar::after {
  content: ""; position: absolute; bottom: -2px; right: -2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand-blue); border: 2px solid #fff;
}

.content { padding: 20px var(--s-8) 40px; display: flex; flex-direction: column; gap: var(--s-5); }

/* ============ FILTER BAR ============ */
.filter-bar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  background: var(--card-bg); border: 1px solid var(--card-bd);
  border-radius: var(--r-xl); padding: var(--s-3) var(--s-4);
}
.filter-bar .fchip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 7px var(--s-4); border-radius: var(--r-md);
  background: var(--chip-bg); font-size: 12.5px; font-weight: 500;
  cursor: pointer; border: 1px solid var(--card-bd); color: var(--ink);
}
.filter-bar .fchip .lbl {
  color: var(--faint); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.filter-bar .grp {
  display: inline-flex; gap: var(--s-1);
  background: var(--tab-bg); border-radius: var(--r-md); padding: 3px;
}
.filter-bar .grp button {
  padding: 5px 12px; background: transparent; border: 0;
  border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500;
  color: var(--muted); cursor: pointer; font-family: inherit;
}
.filter-bar .grp button.on {
  background: var(--tab-on); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.filter-bar .sp { flex: 1; }
.filter-bar .export-btn {
  background: var(--ink) !important; color: #fff !important;
}
.filter-bar .export-btn svg { stroke: #fff; }

/* ============ KPI ============ */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.kpi {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--card-bg); backdrop-filter: blur(8px);
  border: 1px solid var(--card-bd);
  border-radius: var(--r-2xl);
  padding: var(--s-5) 20px;
  box-shadow: var(--shadow-card);
}
.kpi-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tab-bg); display: grid; place-items: center;
  color: var(--ink); flex-shrink: 0;
}
.kpi-body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.kpi-label { font-size: var(--fs-md); color: var(--muted); font-weight: 400; }
.kpi-row { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.kpi-val {
  font-size: var(--fs-5xl); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1; color: var(--ink);
}
.kpi-val .u {
  font-size: var(--fs-md); color: var(--muted);
  font-weight: 500; margin-left: var(--s-1); letter-spacing: 0;
}

/* delta chip */
.delta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-sm); font-weight: 600;
  padding: 2px 8px 2px 3px; border-radius: var(--r-pill);
}
.delta.up   { background: var(--up-bg);   color: var(--up-fg); }
.delta.down { background: var(--down-bg); color: var(--down-fg); }
.delta .arr {
  width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.7);
}

/* ============ CARDS / ROWS ============ */
.row       { display: grid; gap: var(--s-5); grid-template-columns: 1.45fr minmax(0, 1fr); }
.row-equal { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.card {
  background: var(--card-bg); backdrop-filter: blur(8px);
  border: 1px solid var(--card-bd);
  border-radius: var(--r-2xl);
  padding: var(--s-6) 24px;
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4);
}
.card-title {
  font-size: var(--fs-xl); font-weight: 700;
  color: var(--ink); letter-spacing: -0.01em;
}
.card-sub { font-size: var(--fs-md); color: var(--muted); margin-top: 2px; }

.channel-sel {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 7px 12px; border-radius: var(--r-lg);
  background: var(--chip-bg); border: 1px solid var(--card-bd);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer; color: var(--ink);
}

/* hero number block */
.hero { margin: var(--s-5) 0 var(--s-2); }
.hero-num {
  font-size: var(--fs-hero); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1; color: var(--ink);
}
.hero-num .u {
  font-size: var(--fs-3xl); color: var(--muted);
  font-weight: 500; margin-left: var(--s-2); letter-spacing: 0;
}
.hero-delta {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-4); font-size: var(--fs-md);
}
.hero-delta .mut { color: var(--muted); }

/* pills (period switcher) */
.pills {
  display: inline-flex; gap: var(--s-1);
  background: var(--chip-bg); border-radius: var(--r-xl);
  padding: var(--s-1); align-items: center;
}
.pills button {
  background: transparent; border: 0;
  padding: 7px var(--s-4); border-radius: var(--r-md);
  color: var(--muted); font-size: 12.5px; font-weight: 500;
  cursor: pointer; font-family: inherit;
}
.pills button.on {
  background: var(--brand-navy); color: #fff;
  box-shadow: 0 2px 6px var(--brand-navy-soft);
}
body[data-theme="dark"] .pills button.on { background: var(--brand-blue-deep); }

/* chart */
.chart-wrap { position: relative; margin-top: var(--s-2); }
.chart-canvas-host { position: relative; height: 240px; }
.chart-canvas-host canvas { width: 100% !important; height: 100% !important; }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  padding: 0 var(--s-1) var(--s-4);
  font-size: 12.5px; color: var(--muted);
}
.chart-legend .lg-item { display: inline-flex; align-items: center; gap: var(--s-2); }
.chart-legend .lg-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.chart-legend .lg-text b { color: var(--ink); font-weight: 600; margin-right: var(--s-1); }

/* custom Chart.js tooltip */
#chart-tip {
  position: absolute; pointer-events: none;
  background: var(--ink); color: #fff;
  border-radius: var(--r-lg); padding: 12px var(--s-4);
  min-width: 180px;
  transform: translate(-50%, -100%);
  opacity: 0; transition: opacity 0.12s, transform 0.12s;
  z-index: 4;
}
#chart-tip::after {
  content: ""; position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: var(--ink); border-radius: 2px;
}
#chart-tip .d { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s-2); }
#chart-tip .r {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 3px 0; font-size: var(--fs-sm);
}
#chart-tip .r .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#chart-tip .r .v { font-weight: 600; color: #fff; }
#chart-tip .r .k { color: rgba(255, 255, 255, 0.6); font-size: var(--fs-xs); margin-left: auto; }

/* ============ TABS ============ */
.tabs-row {
  display: inline-flex; gap: var(--s-1);
  background: var(--tab-bg); padding: var(--s-1);
  border-radius: var(--r-lg);
}
.tabs-row button {
  padding: 7px var(--s-4); background: transparent; border: 0;
  border-radius: 9px; font-size: 12.5px; font-weight: 500;
  color: var(--muted); cursor: pointer; font-family: inherit;
}
.tabs-row button.on {
  background: var(--tab-on); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ============ CATEGORIES ============ */
.cat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.cat-nav { display: inline-flex; gap: 6px; }
.cat-nav .icon-btn {
  width: 32px; height: 32px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(11, 18, 32, 0.06);
}
.cards-strip {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-3); margin-top: var(--s-5);
}
.cat-card {
  background: var(--pivot-bg); border-radius: var(--r-xl);
  padding: 12px; border: 1px solid var(--card-bd);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.cat-img {
  height: 110px; border-radius: var(--r-md);
  background: linear-gradient(160deg, #F4F0EA 0%, #E8E1D5 100%);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  color: var(--faint);
}
.cat-img::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 120%, rgba(0, 51, 102, 0.08), transparent 60%);
  pointer-events: none;
}
.cat-img .furn-ico { width: 64%; height: 70%; color: var(--brand-navy); opacity: 0.85; }
body[data-theme="dark"] .cat-img {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}
body[data-theme="dark"] .cat-img .furn-ico { color: #93C5FD; }
.cat-card.feat .cat-img { background: linear-gradient(135deg, #FCEFE3, #E8DDD2); }
body[data-theme="dark"] .cat-card.feat .cat-img { background: linear-gradient(135deg, var(--brand-blue), #1e3a8a); }
.cat-card.feat { box-shadow: var(--shadow-pop-deep); transform: scale(1.02); }
.cat-name { font-size: var(--fs-md); font-weight: 600; color: var(--ink); line-height: 1.2; }
.cat-meta { font-size: var(--fs-xs); color: var(--muted); }

/* generic SVG stroke icon */
svg.ico {
  width: 18px; height: 18px;
  stroke-width: 1.6; fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ============ FUNNEL ============ */
.funnel { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.funnel-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 90px;
  align-items: center; gap: var(--s-4);
}
.funnel-bar {
  position: relative; height: 44px;
  border-radius: var(--r-lg);
  background: var(--tab-bg); overflow: hidden;
}
.funnel-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--series-primary), var(--series-primary-2));
  border-radius: var(--r-lg);
}
.funnel-label {
  position: absolute; left: var(--s-4); top: 50%; transform: translateY(-50%);
  font-size: var(--fs-md); font-weight: 600; color: #fff;
  text-shadow: 0 1px 2px rgba(11, 18, 32, 0.25); white-space: nowrap;
}
.funnel-row.narrow .funnel-label { color: var(--ink); text-shadow: none; }
.funnel-val { font-size: var(--fs-xl); font-weight: 700; text-align: right; letter-spacing: -0.01em; }
.funnel-conv { text-align: right; }
.funnel-conv .pct { font-size: var(--fs-md); font-weight: 600; }
.funnel-conv .sub { font-size: var(--fs-xs); color: var(--faint); }

/* ============ HEATMAP (HTML table) ============ */
.heatmap-wrap { margin-top: var(--s-4); overflow-x: auto; }
table.heatmap { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
table.heatmap th, table.heatmap td { padding: 0; }
table.heatmap thead th {
  font-size: var(--fs-xs); color: var(--faint);
  font-weight: 500; text-align: center; padding: 4px 0;
}
table.heatmap th.row-h {
  width: 140px; text-align: left;
  font-size: var(--fs-sm); color: var(--ink); font-weight: 500;
  padding: 6px 8px;
}
table.heatmap td.cell {
  height: 28px; border-radius: var(--r-xs);
  text-align: center; vertical-align: middle;
  font-size: 10px; font-weight: 600;
  color: rgba(11, 18, 32, 0.55);
  transition: transform 0.15s;
}
table.heatmap td.cell.hi { color: #fff; }
table.heatmap td.cell:hover {
  transform: scale(1.18); position: relative; z-index: 2;
  box-shadow: 0 3px 10px rgba(11, 18, 32, 0.18);
}
body[data-theme="dark"] table.heatmap td.cell    { color: rgba(255, 255, 255, 0.6); }
body[data-theme="dark"] table.heatmap td.cell.hi { color: #fff; }
.hm-legend {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s-2); margin-top: var(--s-3);
  font-size: var(--fs-xs); color: var(--faint);
}
.hm-grad {
  width: 140px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #F4F0EA 0%, #E1E0EB 30%, #BBCBE8 60%, #6D9CF2 85%, var(--series-primary) 100%);
}
body[data-theme="dark"] .hm-grad {
  background: linear-gradient(90deg, #1f2937 0%, #2a3550 35%, var(--series-primary) 75%, var(--series-primary-2) 100%);
}

/* ============ UNIT ECON ============ */
.unit-table { width: 100%; border-collapse: collapse; margin-top: var(--s-4); }
.unit-table td {
  padding: var(--s-2) 0;
  font-size: var(--fs-md);
  border-bottom: 1px dashed var(--line-2);
}
.unit-table td.k  { color: var(--muted); }
.unit-table td.v  { text-align: right; font-feature-settings: "tnum"; }
.unit-table tr.income   td.v { color: var(--up-fg);   font-weight: 600; }
.unit-table tr.expense  td.v { color: var(--down-fg); font-weight: 600; }
.unit-table tr.subtotal td   { font-weight: 600; color: var(--ink); }
.unit-table tr.total td {
  border-top: 1px solid var(--ink);
  border-bottom: 0;
  padding-top: 12px;
  font-weight: 700;
  font-size: var(--fs-lg);
}
.unit-table tr.total td.k { color: var(--ink); }
.unit-table tr.total td.v { color: var(--up-fg); font-size: var(--fs-2xl); }
.unit-table .margin-note {
  color: var(--muted); font-weight: 400; font-size: var(--fs-sm);
  margin-left: var(--s-2);
}
.unit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }

/* ============ PIVOT (wide table) ============ */
.scroll-x {
  overflow-x: auto; border-radius: var(--r-xl);
  border: 1px solid var(--line); background: var(--pivot-bg);
}
.scroll-x::-webkit-scrollbar { height: 10px; }
.scroll-x::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: var(--r-pill); border: 2px solid #fff; }
table.pivot {
  width: max-content; min-width: 100%;
  border-collapse: collapse; font-size: 12.5px;
}
table.pivot th, table.pivot td {
  padding: var(--s-3) 12px;
  text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
table.pivot th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--faint); font-weight: 600;
  background: var(--pivot-head); position: sticky; top: 0;
}
table.pivot th.l, table.pivot td.l { text-align: left; }
table.pivot td.mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
table.pivot td.b { font-weight: 600; color: var(--ink); }
table.pivot .freeze { position: sticky; background: var(--pivot-bg); z-index: 2; }
table.pivot th.freeze { background: var(--pivot-head); z-index: 3; }
table.pivot .f0 { left: 0; width: 50px; }
table.pivot .f1 { left: 50px; }
table.pivot .f2 { left: 170px; box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.08); }
.delta-inline {
  font-size: 11.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 6px;
}
.delta-inline.up   { background: var(--up-bg);   color: var(--up-fg); }
.delta-inline.down { background: var(--down-bg); color: var(--down-fg); }

/* ============ LAST OPERATIONS ============ */
.table-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.table { width: 100%; border-collapse: collapse; }
.table thead th {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--faint); font-weight: 500;
  text-align: left; padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.table thead th.r { text-align: right; }
.table tbody td {
  padding: var(--s-4) 0; font-size: var(--fs-md);
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.table tbody td.r { text-align: right; }
.table tbody tr:last-child td { border-bottom: 0; }
.cb {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid #D1D5DB;
  display: inline-block; vertical-align: middle;
}
.cb.on {
  background: var(--brand-blue); border-color: var(--brand-blue);
  position: relative;
}
.cb.on::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.chan {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 12.5px; font-weight: 500;
}
.chan .mk {
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  color: #fff; font-size: var(--fs-xs); font-weight: 700;
  flex-shrink: 0;
}
.chan .mk.oz { background: var(--mk-oz); }
.chan .mk.wb { background: var(--mk-wb); }
.chan .mk.ym { background: var(--mk-ym); color: var(--mk-ym-fg); font-size: 9px; }
.chan .mk.ar { background: var(--mk-ar); }
.chan .mk.b2 { background: var(--mk-b2); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1280px) {
  .app { grid-template-columns: 200px minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row, .row-equal { grid-template-columns: minmax(0, 1fr); }
  .unit-grid { grid-template-columns: minmax(0, 1fr); }
  .cards-strip { grid-template-columns: 1fr 1fr; }
  .cat-card:nth-child(3) { display: none; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 64px minmax(0, 1fr); }
  .sidebar { padding: var(--s-5) var(--s-2); }
  .brand-name, .nav-item span:not(.badge):not(.int-mark):not(.add-link), .nav-item .add-link, .nav-label, .nav-item .badge { display: none; }
  .nav-item { justify-content: center; padding: var(--s-3); }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .topbar, .content { padding-left: var(--s-4); padding-right: var(--s-4); }
  .cards-strip { grid-template-columns: 1fr; }
  .cat-card:nth-child(2), .cat-card:nth-child(3) { display: flex; }
}

/* ============================================================
   Filter dropdowns (Юр.лицо / Канал / Категория / SKU)
   ============================================================ */
.fdrop { position: relative; }
.fdrop > .fchip { cursor: pointer; user-select: none; }
.fdrop > .fchip.open { border-color: var(--accent, #3B82F6); background: var(--bg-elev, #fff); }
.fdrop > .fchip .caret { margin-left: 4px; color: var(--muted, #9CA3AF); transition: transform 120ms; }
.fdrop > .fchip.open .caret { transform: rotate(180deg); }
.fdrop-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--bg-elev, #fff);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  padding: 6px;
  z-index: 50;
}
.fdrop-menu.wide  { min-width: 320px; }
.fdrop-menu.wider { min-width: 460px; }
.fdrop-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left;
  padding: 8px 10px;
  border: 0; background: transparent;
  border-radius: 8px;
  font: inherit; font-size: 13px;
  color: var(--ink, #0B1220);
  cursor: pointer;
}
.fdrop-menu button:hover { background: var(--bg-hover, #F3F4F6); }
.fdrop-menu button.on    { background: var(--accent-soft, #DBEAFE); color: var(--accent, #2563EB); font-weight: 600; }
.fdrop-menu button .cnt  { color: var(--muted, #9CA3AF); font-size: 12px; font-weight: 500; flex-shrink: 0; }
.fdrop-menu button .sku-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[x-cloak] { display: none !important; }

/* ============================================================
   Hero block: Лучший / Худший period (заменил большую цифру)
   ============================================================ */
.hero-stack {
  display: flex; flex-direction: column; gap: 10px;
  margin: 14px 0 4px;
}
.hero-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px;
  color: var(--ink, #0B1220);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em;
}
.hero-badge.up   { background: var(--positive-soft, #DCFCE7); color: var(--positive-text, #15803D); }
.hero-badge.down { background: var(--negative-soft, #FEE2E2); color: var(--negative-text, #B91C1C); }
.hero-period   { font-weight: 600; }
.hero-dot      { color: var(--muted, #9CA3AF); }
.hero-amount   { font-weight: 700; font-size: 17px; }
.hero-empty    { font-size: 13px; padding: 8px 0; }

/* ============================================================
   Топ-10 товаров — компактный список (1 строка = 1 товар)
   ============================================================ */
.cards-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cards-strip .cat-card {
  display: grid;
  grid-template-columns: 40px 60px 100px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg-card, #F9FAFB);
  border: 1px solid transparent;
  transition: border-color 120ms, background 120ms;
  overflow: hidden;
}
.cards-strip .cat-card:hover { border-color: var(--border, #E5E7EB); }
.cards-strip .cat-card.feat  { background: var(--accent-soft, #DBEAFE); }
/* Если detail пустой — code растягивается на 2 ячейки, detail скрыт */
.cards-strip .cat-card.no-detail .cat-code   { grid-column: span 2; }
.cards-strip .cat-card.no-detail .cat-detail { display: none; }
.cards-strip .cat-img {
  width: 40px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  flex-shrink: 0;
}
.cat-img .furn-ico { width: 28px; height: 18px; color: var(--accent, #2563EB); }

.cat-body { display: contents; }
.cat-name {
  font-weight: 600; font-size: 13px;
  color: var(--ink, #0B1220);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cat-code {
  font-size: 12px; font-weight: 600;
  color: var(--accent, #2563EB);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.cat-detail {
  font-size: 12px;
  color: var(--text-secondary, #475569);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cat-price {
  display: flex; flex-direction: column;
  align-items: flex-end;
  font-size: 13px; font-weight: 700; color: var(--ink, #0B1220);
  white-space: nowrap;
  line-height: 1.2;
  min-width: 0;
}
.cat-price .rev  { font-size: 13px; font-weight: 700; }
.cat-price .qty  { color: var(--muted, #94A3B8); font-weight: 500; font-size: 11px; margin-top: 2px; }
.cat-price .from { color: var(--muted, #94A3B8); font-weight: 400; }
.cat-price .cat-sep { display: none; }
.cards-strip-empty { padding: 28px 12px; text-align: center; }



/* ===== Юнит-экономика (страница) ===== */
.page-head { padding: var(--s-4) var(--s-6) 0; }
.page-head h1 { font-size: var(--fs-4xl); margin: 0; color: var(--ink); letter-spacing: -0.02em; }
.page-head p  { color: var(--muted); margin: var(--s-1) 0 0; font-size: var(--fs-md); }

.ue-page { padding: 0 var(--s-6); }
.ue-page .filter-bar { margin-top: var(--s-4); }

.ue-page .mp-tabs {
  display: inline-flex; gap: 0;
  background: var(--tab-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--r-lg);
  padding: 3px;
}
.ue-page .mp-tabs button {
  background: transparent; border: 0;
  padding: 6px 14px;
  color: var(--ink);
  font-size: var(--fs-md);
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.ue-page .mp-tabs button.on {
  background: var(--tab-on);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
body[data-theme="dark"] .ue-page .mp-tabs button.on { background: var(--brand-blue-deep); color: #fff; }
.ue-page .mp-tabs .dot { width: 8px; height: 8px; border-radius: 50%; }
.ue-page .mp-tabs .dot.ozon { background: var(--mk-oz); }
.ue-page .mp-tabs .dot.wb   { background: var(--mk-wb); }

.ue-kpi-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-3);
  padding: var(--s-4) 0 var(--s-4);
}
.ue-kpi {
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--card-bd);
  border-radius: var(--r-xl);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow-card);
}
.ue-kpi.big { border-color: var(--brand-blue); box-shadow: var(--shadow-pop-deep); }
.ue-kpi-label { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 6px; }
.ue-kpi-value { font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.15; letter-spacing: -0.01em; }
.ue-kpi-value.pos { color: var(--up-fg); }
.ue-kpi-value.neg { color: var(--down-fg); }
.ue-kpi-sub { font-size: var(--fs-xs); margin-top: 4px; color: var(--muted); }
.ue-kpi-sub.pos { color: var(--up-fg); }
.ue-kpi-sub.neg { color: var(--down-fg); }

.ue-table-card { margin: 0 0 var(--s-7); }
.ue-table-controls { display: flex; gap: var(--s-2); align-items: center; }
.ue-table-controls .ue-search,
.ue-table-controls .ue-sort {
  background: var(--chip-bg);
  border: 1px solid var(--card-bd);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: var(--fs-md);
  outline: none;
}
.ue-table-controls .ue-search { width: 280px; }
.ue-table-controls .ue-search::placeholder { color: var(--faint); }

.ue-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  border-top: 1px solid var(--card-bd);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  max-height: 70vh;
  background: var(--pivot-bg);
}
.ue-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}
.ue-table th, .ue-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  color: var(--ink);
}
.ue-table thead th {
  position: sticky; top: 0;
  background: var(--pivot-head);
  color: var(--muted);
  font-weight: 500;
  text-align: right;
  z-index: 2;
}
.ue-table thead th.sticky-left,
.ue-table tbody td.sticky-left {
  position: sticky; left: 0;
  background: var(--pivot-head);
  z-index: 3;
}
.ue-table thead th.sticky-left { z-index: 4; }
.ue-table tbody td.sticky-left {
  background: var(--pivot-bg);
  border-right: 1px solid var(--card-bd);
  font-weight: 500;
}
.ue-table tbody tr:hover td { background: var(--line); }
.ue-table .tnum { font-variant-numeric: tabular-nums; text-align: right; }
.ue-table .neg  { color: var(--down-fg); }
.ue-table .pos  { color: var(--up-fg); }
.ue-table .strong { font-weight: 600; }
.ue-table td.prodname { text-align: left; min-width: 230px; }
.ue-table td.prodname .art { font-weight: 600; color: var(--ink); }
.ue-table td.prodname .nm  { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.ue-table .empty { text-align: center; padding: var(--s-7); color: var(--muted); }

/* WB заглушка */
.ue-stub {
  margin: var(--s-4) 0;
  padding: var(--s-8);
  border: 1px dashed var(--card-bd);
  border-radius: var(--r-xl);
  text-align: center;
  background: var(--card-bg);
  backdrop-filter: blur(8px);
}
.ue-stub-icon { margin-bottom: var(--s-3); opacity: .6; }
.ue-stub-title { font-size: var(--fs-2xl); font-weight: 600; color: var(--ink); margin-bottom: var(--s-2); }
.ue-stub-sub { color: var(--muted); font-size: var(--fs-md); max-width: 560px; margin: 0 auto var(--s-5); line-height: 1.5; }
.ue-stub-checklist { display: inline-flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; text-align: left; }
.ue-stub-checklist .check { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: var(--fs-md); }
.ue-stub-checklist .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ue-stub-checklist .dot.done    { background: var(--up-fg); }
.ue-stub-checklist .dot.pending { background: var(--faint); }

/* nav-item клик-зона */
.nav-item { cursor: pointer; user-select: none; }


/* ===== Inline edit C/c per unit ===== */
.ue-table .cogs-cell {
  position: relative;
  padding: 4px 6px;
  background: rgba(59, 130, 246, 0.04);
}
.ue-table .cogs-cell.cogs-manual {
  background: rgba(59, 130, 246, 0.12);
}
.ue-table .cogs-input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink);
  text-align: right;
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 4px 8px;
  outline: none;
}
.ue-table .cogs-input:hover {
  border-color: var(--card-bd);
  background: rgba(255,255,255,0.6);
}
.ue-table .cogs-input:focus {
  border-color: var(--brand-blue);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
.ue-table .cogs-input::-webkit-outer-spin-button,
.ue-table .cogs-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ue-table .cogs-mark {
  position: absolute;
  right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--brand-blue);
  font-size: 11px;
  pointer-events: none;
  opacity: 0.8;
}


/* ===== Юнит-эконо: фильтры и bulk-bar ===== */
.ue-filters-row {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--card-bd);
  flex-wrap: wrap;
}
.ue-filter-group {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.ue-filter-label {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-right: var(--s-1);
}
.ue-filter-group button {
  background: var(--chip-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-size: var(--fs-sm);
  color: var(--ink);
  cursor: pointer;
}
.ue-filter-group button.on {
  background: var(--brand-navy);
  color: #fff;
  border-color: var(--brand-navy);
}
body[data-theme="dark"] .ue-filter-group button.on { background: var(--brand-blue-deep); border-color: var(--brand-blue-deep); }
.ue-filter-counter {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.ue-filter-counter b { color: var(--ink); }

.ue-bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: rgba(59, 130, 246, 0.08);
  border-bottom: 1px solid var(--brand-blue);
}
.ue-bulk-info { font-size: var(--fs-md); color: var(--ink); }
.ue-bulk-info b { color: var(--brand-blue-deep); font-size: var(--fs-lg); }
.ue-bulk-action {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-left: auto;
}
.ue-bulk-action label { color: var(--muted); font-size: var(--fs-sm); }
.ue-bulk-action input {
  background: #fff;
  border: 1px solid var(--card-bd);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  width: 120px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.ue-bulk-action input:focus { border-color: var(--brand-blue); }
.ue-bulk-apply {
  background: var(--brand-navy);
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  padding: 6px 14px;
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
}
.ue-bulk-apply:hover { background: var(--brand-blue-deep); }
.ue-bulk-apply:disabled { opacity: 0.4; cursor: not-allowed; }
.ue-bulk-reset {
  background: transparent;
  border: 1px solid var(--card-bd);
  color: var(--muted);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
}
.ue-bulk-reset:hover { color: var(--ink); border-color: var(--ink); }

/* Чекбокс в строке/header */
.ue-row-check {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
}
.ue-row-check input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--brand-blue);
  cursor: pointer;
  margin: 0;
}


/* ===== Fixes: alignment of offer_id + truncation of name ===== */
.ue-table tbody td.prodname,
.ue-table tbody td.prodname .art,
.ue-table tbody td.prodname .nm {
  text-align: left !important;
}
.ue-table td.prodname {
  min-width: 220px;
  max-width: 260px;
}
.ue-table td.prodname .nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

/* ===== Расширенные фильтры — второй ряд ===== */
.ue-filters-ext {
  border-bottom: 1px solid var(--card-bd);
  background: rgba(11, 18, 32, 0.025);
}
.ue-filters-ext .ue-fext {
  background: #fff;
  border: 1px solid var(--card-bd);
  border-radius: var(--r-sm);
  padding: 5px 9px;
  font-size: var(--fs-sm);
  color: var(--ink);
  outline: none;
  font-variant-numeric: tabular-nums;
}
.ue-filters-ext .ue-fext:focus { border-color: var(--brand-blue); }
.ue-filters-ext .ue-fext.narrow { width: 70px; text-align: right; }
.ue-filters-ext .ue-fext:not(.narrow) { width: 200px; }
.ue-filters-ext .ue-filter-dash { color: var(--muted); font-size: var(--fs-sm); }
.ue-filters-ext .ue-filter-reset {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--card-bd);
  color: var(--muted);
  border-radius: var(--r-sm);
  padding: 5px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
}
.ue-filters-ext .ue-filter-reset:hover { color: var(--ink); border-color: var(--ink); }


/* ===== SKU column → left align (ue-sku-left-fix) ===== */
.ue-table thead th.sticky-left,
.ue-table tbody td.sticky-left {
  text-align: left !important;
}
.ue-table thead th.sticky-left { padding-left: 12px; }
.ue-table tbody td.sticky-left .ue-row-check {
  width: 100%;
  justify-content: flex-start;
}

/* Подсказка-эхо человеко-читаемого числа под input */
.ue-fext-hint {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  text-align: right;
  min-height: 12px;
  font-variant-numeric: tabular-nums;
}
.ue-filter-group .ue-fext-wrap {
  display: inline-flex;
  flex-direction: column;
}


/* ===== Consolidated filter row ===== */
.ue-filters-consolidated {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  padding: var(--s-3) var(--s-4);
}
.ue-filters-consolidated .ue-filter-group { display: inline-flex; align-items: center; gap: var(--s-2); }
.ue-filters-consolidated .ue-filter-label { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.ue-filters-consolidated .ue-filter-search .ue-fext { width: 220px; }
.ue-filters-consolidated .ue-fext.narrow { width: 80px; }
.ue-filters-consolidated .ue-filter-tail {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
}
.ue-filter-counter { color: var(--muted); font-size: var(--fs-sm); }
.ue-filter-counter b { color: var(--ink); font-weight: 600; }

/* убрать старое поле поиска в header */
.ue-table-controls .ue-search { display: none; }


/* ===== Стабильный layout фильтров — без прыжков ===== */
.ue-filters-consolidated {
  align-items: center;
  row-gap: var(--s-4);
}
.ue-filters-consolidated .ue-filter-group {
  flex-shrink: 0;
}
.ue-filters-consolidated .ue-fext-wrap {
  position: relative;
  display: inline-block;
}
.ue-filters-consolidated .ue-fext-hint {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 1px;
  pointer-events: none;
  white-space: nowrap;
}
.ue-filters-stable { /* marker */ }


/* ===== Денежная ячейка со стеком (сумма + плашка %) ===== */
.ue-table .ue-cell-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  line-height: 1.15;
}
.ue-table .ue-cell-stack .ue-amount {
  font-variant-numeric: tabular-nums;
}
.ue-table .ue-pct {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.ue-table .ue-pct.neg { background: var(--down-bg); color: var(--down-fg); }
.ue-table .ue-pct.pos { background: var(--up-bg);   color: var(--up-fg); }
.ue-table .ue-pct:empty { display: none; }


/* ===== Фиксированные ставки МП (комиссия, эквайринг, налог) ===== */
.ue-table .ue-pct.fixed {
  background: #FEF3C7;   /* мягко-жёлтый */
  color: #B45309;        /* янтарный текст */
}
body[data-theme="dark"] .ue-table .ue-pct.fixed {
  background: rgba(251, 191, 36, 0.18);
  color: #FCD34D;
}
.ue-fix-mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #F59E0B;
  margin-right: 4px;
  vertical-align: middle;
  cursor: help;
}


/* ===== Plan/Fact mode tabs ===== */
.ue-page .view-mode-tabs button.on { background: var(--brand-blue); color: #fff; }
.ue-page .scenario-tabs { background: rgba(59,130,246,0.06); }
.ue-page .scenario-tabs button.on { background: var(--brand-blue-deep); color: #fff; }

/* ===== Боковая панель редактора плана ===== */
.plan-panel {
  position: fixed;
  top: 0; right: 0;
  width: 420px;
  height: 100vh;
  background: var(--pivot-bg);
  border-left: 1px solid var(--card-bd);
  box-shadow: -8px 0 32px rgba(11,18,32,0.12);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.plan-panel.open { transform: translateX(0); }
.plan-panel-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--card-bd);
}
.plan-panel-title { font-size: var(--fs-2xl); font-weight: 600; color: var(--ink); }
.plan-panel-sub   { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.plan-panel-close {
  background: transparent; border: 0; font-size: 24px; color: var(--muted);
  cursor: pointer; padding: 0 8px; line-height: 1;
}
.plan-panel-close:hover { color: var(--ink); }
.plan-panel-body { padding: var(--s-4) var(--s-6); overflow-y: auto; flex: 1; }

.plan-panel-info {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4);
  background: rgba(59,130,246,0.06);
  border-radius: var(--r-md);
}
.plan-source {
  font-size: var(--fs-sm);
  padding: 3px 8px; border-radius: var(--r-sm);
}
.plan-source.sku      { background: var(--up-bg);   color: var(--up-fg); }
.plan-source.category { background: #FEF3C7; color: #B45309; }
.plan-source.none     { background: var(--down-bg); color: var(--down-fg); }
.plan-copy-cat {
  margin-left: auto;
  background: var(--brand-blue);
  color: #fff; border: 0; border-radius: var(--r-sm);
  padding: 5px 12px; font-size: var(--fs-sm); cursor: pointer;
}

.plan-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-4);
}
.plan-field { display: flex; flex-direction: column; }
.plan-field.full { grid-column: span 2; }
.plan-field label {
  font-size: var(--fs-xs); color: var(--muted); margin-bottom: 3px;
}
.plan-field input, .plan-field textarea {
  background: #fff; border: 1px solid var(--card-bd);
  border-radius: var(--r-sm); padding: 6px 10px;
  font-size: var(--fs-md); color: var(--ink); outline: none;
  font-variant-numeric: tabular-nums;
}
.plan-field input:focus, .plan-field textarea:focus { border-color: var(--brand-blue); }

.plan-panel-actions {
  display: flex; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--card-bd);
}
.plan-save {
  background: var(--brand-navy); color: #fff; border: 0;
  border-radius: var(--r-sm); padding: 8px 18px;
  font-size: var(--fs-md); font-weight: 500; cursor: pointer;
}
.plan-save:hover { background: var(--brand-blue-deep); }
.plan-delete {
  margin-left: auto;
  background: transparent; border: 1px solid var(--down-fg);
  color: var(--down-fg); border-radius: var(--r-sm);
  padding: 8px 14px; font-size: var(--fs-sm); cursor: pointer;
}


.plan-open-btn {
  background: transparent; border: 0;
  cursor: pointer;
  margin-left: 6px;
  font-size: 13px;
  opacity: 0.4;
  padding: 1px 4px;
}
.ue-table tbody tr:hover .plan-open-btn { opacity: 1; }
.plan-open-btn:hover { background: var(--line); border-radius: var(--r-sm); }


/* ===== Подсветка факта в редакторе плана ===== */
.plan-fact-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: rgba(59, 130, 246, 0.12);
  color: var(--brand-blue-deep);
  border-radius: 999px;
  padding: 2px 8px;
  width: fit-content;
}
.plan-fact-apply {
  background: transparent;
  border: 0;
  border-radius: 50%;
  width: 16px; height: 16px;
  padding: 0;
  font-size: 11px;
  color: var(--brand-blue-deep);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  opacity: 0.75;
}
.plan-fact-apply:hover {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}


/* ===== Live preview расчёта плана ===== */
.plan-live-calc {
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(0,51,102,0.04));
  border: 1px solid var(--brand-blue);
  border-radius: var(--r-lg);
}
.plc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s-3);
}
.plc-title {
  font-size: var(--fs-lg); font-weight: 600;
  color: var(--brand-navy);
}
.plc-sub { color: var(--muted); font-size: var(--fs-sm); }
.plc-grid {
  display: flex; flex-direction: column; gap: 4px;
}
.plc-row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  font-size: var(--fs-md);
  color: var(--ink);
}
.plc-row span { color: var(--muted); }
.plc-row b { font-variant-numeric: tabular-nums; font-weight: 500; }
.plc-row b.pos { color: var(--up-fg); }
.plc-row b.neg { color: var(--down-fg); }
.plc-row.sep {
  border-top: 1px solid var(--card-bd);
  padding-top: 8px; margin-top: 4px;
}
.plc-row.big {
  font-size: var(--fs-lg);
  padding: 6px 0;
}
.plc-row.big b { font-weight: 700; font-size: var(--fs-xl); }


/* ===== Селектор периода факта в редакторе плана ===== */
.fact-period-tabs {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--chip-bg);
  border-radius: var(--r-md);
}
.fact-period-tabs .fpt-label {
  color: var(--muted); font-size: var(--fs-sm);
  margin-right: var(--s-2);
}
.fact-period-tabs button {
  background: transparent; border: 1px solid var(--card-bd);
  color: var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.fact-period-tabs button.on {
  background: var(--brand-blue-deep);
  color: #fff;
  border-color: var(--brand-blue-deep);
}


/* ===== Контент-рейтинг карточки Ozon — плашка в таблице ===== */
.card-rating-pill {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 30px;
  text-align: center;
}
.card-rating-pill.good { background: var(--up-bg);   color: var(--up-fg); }
.card-rating-pill.warn { background: #FEF3C7;        color: #B45309; }
.card-rating-pill.bad  { background: var(--down-bg); color: var(--down-fg); }
.card-rating-none { color: var(--faint); font-size: 12px; }


/* ===== Состояние карточки Ozon в редакторе плана ===== */
.card-health-block {
  margin-bottom: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--r-lg);
}
.chb-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-3);
}
.chb-title { font-weight: 600; color: var(--ink); font-size: var(--fs-md); }
.chb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.chb-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--muted); }
.chb-row b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500; }
.chb-row b.pos { color: var(--up-fg); }
.chb-row b.neg { color: var(--down-fg); }
.chb-improve {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px dashed var(--card-bd);
}
.chb-improve-title { font-weight: 600; color: var(--down-fg); font-size: var(--fs-sm); margin-bottom: 4px; }
.chb-improve ul { margin: 0; padding-left: 0; list-style: none; }
.chb-improve li {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0;
  font-size: 11px; color: var(--ink);
}
.chb-imp-group {
  display: inline-block; min-width: 60px;
  text-align: center;
  font-size: 9px; padding: 1px 6px;
  background: var(--chip-bg); border-radius: 999px;
  color: var(--muted); text-transform: uppercase;
}
.chb-imp-more { color: var(--faint); font-style: italic; }


/* ===== Виджет 'Топ слабых карточек' ===== */
.weak-cards-widget { margin-top: var(--s-5); }
.weak-cards-list { display: flex; flex-direction: column; gap: 6px; }
.weak-card-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto 24px;
  align-items: center; gap: var(--s-3);
  padding: 8px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.weak-card-row:hover { background: var(--line); }
.wcr-info { min-width: 0; overflow: hidden; }
.wcr-offer { font-weight: 600; font-size: var(--fs-md); color: var(--ink); }
.wcr-name { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcr-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.wcr-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--chip-bg);
  filter: grayscale(1); opacity: 0.4;
}
.wcr-badge.on { filter: none; opacity: 1; background: var(--up-bg); }
.wcr-imgs { color: var(--muted); }
.wcr-fix { background: var(--down-bg); color: var(--down-fg); padding: 1px 6px; border-radius: 999px; font-weight: 600; }
.wcr-open {
  text-decoration: none;
  color: var(--brand-blue);
  font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
}
.wcr-open:hover { background: var(--brand-blue); color: #fff; }


/* ===== Корреляция rating ↔ продажи (мини-таблица под weak-cards) ===== */
.card-corr-table {
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--r-md);
}
.cct-title { font-weight: 600; font-size: var(--fs-md); color: var(--ink); margin-bottom: var(--s-3); }
.card-corr-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.card-corr-table th, .card-corr-table td { padding: 6px 8px; text-align: right; }
.card-corr-table th { color: var(--muted); font-weight: 500; }
.card-corr-table th:first-child, .card-corr-table td:first-child { text-align: left; }
.card-corr-table tbody tr { border-top: 1px solid var(--line); }
.card-corr-table .tnum { font-variant-numeric: tabular-nums; }
.card-corr-table .strong { font-weight: 600; }


/* ===== Сортировка кликом по заголовку ===== */
.ue-table th.sortable {
  cursor: pointer;
  user-select: none;
}
.ue-table th.sortable:hover { color: var(--ink); background: var(--line); }
.ue-table th.sortable .sort-ind {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  color: var(--brand-blue);
  min-width: 8px;
}