.cff-page {
  padding: 12px;
  color: #eef2f7;
}

.cff-page header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cff-page h1 { margin: 0 0 3px; font-size: 20px; }
.cff-page p,
.cff-page footer { margin: 0; color: #92a0b3; font-size: 11px; }

.cff-horizons,
.cff-tabs { display: flex; gap: 5px; }

.cff-horizons button,
.cff-tabs button {
  height: 34px;
  padding: 0 13px;
  border: 1px solid #2b3545;
  border-radius: 7px;
  color: #bbc5d2;
  background: #151c27;
  cursor: pointer;
}

.cff-horizons button.active,
.cff-tabs button.active {
  border-color: #cba73d;
  color: #f1d67e;
  background: #211f18;
}

.cff-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.cff-kpi {
  display: flex;
  min-height: 66px;
  padding: 10px 12px;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #293343;
  border-radius: 9px;
  background: #151c27;
}

.cff-kpi span { color: #94a1b2; font-size: 10.5px; }
.cff-kpi strong { margin-top: 5px; font-size: 18px; font-variant-numeric: tabular-nums; }
.cff-kpi small { margin-top: 3px; color: #718096; font-size: 9px; }
.cff-kpi.good strong,
.cff-page .pos { color: #68d596; }
.cff-kpi.bad strong,
.cff-page .neg { color: #f07a7a; }
.cff-kpi.warn strong { color: #e7b45e; }

.cff-tabs {
  margin-bottom: 8px;
  border-bottom: 1px solid #293343;
}

.cff-tabs button { border: 0; border-radius: 0; background: transparent; }
.cff-tabs button.active { border-bottom: 2px solid #cba73d; }

.cff-panel {
  overflow: hidden;
  border: 1px solid #293343;
  border-radius: 9px;
  background: #121924;
}

.cff-panel-head {
  display: flex;
  height: 42px;
  padding: 0 12px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #293343;
}

.cff-panel-head b { font-size: 12px; }
.cff-panel-head > span { color: #8e9bad; font-size: 10.5px; }

.cff-source-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8e9bad;
  font-size: 10px;
}

.cff-source-filter select,
.cff-panel-head select {
  width: 210px;
  height: 32px;
  padding: 0 34px 0 10px;
  border: 1px solid #3a4659;
  border-radius: 7px;
  color: #e5eaf1;
  background: #0e1520;
}

.cff-chart {
  height: 190px;
  padding: 12px 14px 7px;
  background: linear-gradient(180deg, rgba(22, 30, 43, .8), rgba(18, 25, 36, .12));
}

.cff-chart svg { width: 100%; height: 145px; overflow: visible; }
.cff-chart .grid-line { stroke: #2b3545; stroke-width: 1; stroke-dasharray: 3 5; }
.cff-chart .balance-area { fill: url(#cffBalanceFill); }
.cff-chart .balance-line {
  fill: none;
  stroke: #d0ad49;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.cff-chart .event-dot { fill: #e3c467; stroke: #121924; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cff-chart-meta { display: flex; justify-content: space-between; gap: 14px; color: #7e8b9d; font-size: 10px; }
.cff-chart-meta span:nth-child(2) { color: #b8c1ce; }

.cff-table-wrap { width: 100%; overflow: hidden; }
.cff-page table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #e8edf4;
  background: #121924 !important;
}

.cff-page thead,
.cff-page thead tr,
.cff-page th { background: #0e151f !important; }

.cff-page th {
  height: 32px;
  padding: 6px 9px;
  border-bottom: 1px solid #293343;
  color: #8f9cad;
  font-size: 10.5px;
  text-align: left;
}

.cff-page tbody,
.cff-page tbody tr {
  color: #e8edf4;
  background: #121924 !important;
}

.cff-page tbody tr:nth-child(even) { background: #151d29 !important; }
.cff-page tbody tr:hover { background: #1a2432 !important; }

.cff-page td {
  height: 40px;
  padding: 6px 9px;
  border-bottom: 1px solid #293343;
  color: #e8edf4;
  background: transparent !important;
  font-size: 12px;
}

.cff-page tbody tr:hover td { background: transparent !important; }
.cff-page tbody tr:hover td.pos { color: #7bdfa5 !important; }
.cff-page tbody tr:hover td.neg { color: #f58b8b !important; }
.cff-page td:nth-last-child(-n+3) { font-variant-numeric: tabular-nums; }
.cff-page td b { color: #f1f4f8; }
.cff-page td em { display: block; color: #f07a7a; font-size: 9px; }
.cff-page td small { display: block; margin-top: 2px; color: #8491a3; font-size: 10px; }
.cff-page .cff-empty { color: #8896a8 !important; background: #121924 !important; }

.cff-calendar-table th:nth-child(n+2),
.cff-calendar-table td:nth-child(n+2),
.cff-source-table th:last-child,
.cff-source-table td:last-child { text-align: right; }
.cff-source-table th:nth-child(1) { width: 14%; }
.cff-source-table th:nth-child(2) { width: 17%; }
.cff-source-table th:nth-child(3) { width: 24%; }
.cff-source-table th:nth-child(4) { width: 20%; }
.cff-source-table th:nth-child(5) { width: 10%; }
.cff-source-table th:nth-child(6) { width: 15%; }

.cff-source-row { cursor: pointer; }
.cff-badge { padding: 3px 7px; border-radius: 9px; font-size: 10px; }
.cff-badge.inflow { color: #68d596; background: rgba(56, 176, 112, .12); }
.cff-badge.outflow { color: #f07a7a; background: rgba(220, 77, 77, .12); }

.cff-alert-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 9px; }
.cff-alert,
.cff-unscheduled {
  display: flex;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid #263141;
  color: #e8edf4;
  background: transparent;
  text-align: left;
}

.cff-alert { cursor: pointer; }
.cff-alert:hover { background: rgba(255, 255, 255, .035); }
.cff-alert span,
.cff-unscheduled span { display: flex; flex-direction: column; gap: 3px; }
.cff-alert small,
.cff-unscheduled small { color: #8c99aa; }
.cff-empty { padding: 22px; color: #8896a8; text-align: center; }
.cff-page footer { padding: 8px 2px; }

.cff-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.cff-detail > div { display: flex; padding: 10px; flex-direction: column; border: 1px solid #303b4c; border-radius: 7px; }
.cff-detail span { color: #8d9aab; font-size: 10px; }
.cff-detail b { margin-top: 4px; font-size: 13px; }
.cff-detail .wide { grid-column: 1 / -1; }
.cff-detail small { margin-top: 3px; color: #8d9aab; }

@media (max-width: 1400px) {
  .cff-kpis { grid-template-columns: repeat(3, 1fr); }
  .cff-kpi { min-height: 58px; }
  .cff-kpi strong { font-size: 16px; }
}

@media (max-width: 800px) {
  .cff-page header { align-items: flex-start; flex-direction: column; }
  .cff-kpis { grid-template-columns: repeat(2, 1fr); }
  .cff-alert-grid { grid-template-columns: 1fr; }
  .cff-source-filter span { display: none; }
  .cff-source-filter select { width: 170px; }
}