/* Поверх Pico CSS: вкладки, KPI-плитки, таблицы с числами. */
:root { --pico-font-size: 100%; }
header.container { padding-bottom: 0; }
nav .brand { text-decoration: none; }
header nav { flex-wrap: wrap; row-gap: .25rem; }
nav .brand { white-space: nowrap; }
nav ul.tabs li { padding: 0; }
nav ul.tabs a { display: inline-block; margin: 0; padding: .6rem .8rem; border-bottom: 2px solid transparent; text-decoration: none; color: var(--pico-muted-color); }
nav ul.tabs a.active { color: var(--pico-primary); border-bottom-color: var(--pico-primary); font-weight: 600; }
form.inline { display: inline; margin: 0; }
button.small, a[role=button].small { padding: .3rem .7rem; font-size: .85rem; }
.muted { color: var(--pico-muted-color); }
.small { font-size: .85rem; }
.error { color: #c62828; }
article.flash { padding: .7rem 1rem; margin-bottom: 1rem; }
article.flash.ok { border-left: 4px solid #2e7d32; }
article.flash.warn { border-left: 4px solid #ef6c00; }
article.flash.err { border-left: 4px solid #c62828; }
.login-card { max-width: 420px; margin: 3rem auto; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.kpi { padding: .85rem 1rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: var(--pico-card-background-color); }
.kpi .label { font-size: .78rem; color: var(--pico-muted-color); margin-bottom: .2rem; }
.kpi .value { font-size: 1.45rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi .value.accent { color: var(--pico-primary); }
.kpi .delta { font-size: .8rem; margin-top: .2rem; }
.delta.up { color: #2e7d32; }
.delta.down { color: #c62828; }

table.num td.num, table.num th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.num td.usd { font-weight: 600; }
table.compact td, table.compact th { padding: .45rem .6rem; }
table tr.total td { font-weight: 700; border-top: 2px solid var(--pico-muted-border-color); }
table tr.section td { background: var(--pico-card-sectioning-background-color); font-weight: 600; }
input.amount { text-align: right; font-variant-numeric: tabular-nums; margin-bottom: 0; max-width: 11rem; }
input.rate { text-align: right; max-width: 8rem; margin-bottom: 0; }
.rates-grid { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: end; }
.rates-grid label { margin-bottom: 0; font-size: .85rem; }
.badge { display: inline-block; font-size: .7rem; padding: .1rem .45rem; border-radius: .5rem; background: var(--pico-secondary-background); color: #fff; vertical-align: middle; }
.badge.fire { background: #2e7d32; }
.badge.nofire { background: #757575; }
.badge.manual { background: #ef6c00; }
.month-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.month-nav h2 { margin-bottom: 0; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.actions button, .rates-grid button { width: auto; margin-bottom: 0; }
label.check { display: block; margin-bottom: .25rem; }
label.check + small { display: block; margin-left: 1.9rem; margin-bottom: .9rem; }
.mobile-only { display: none; }
details.archived summary { cursor: pointer; }
.table-wrap { overflow-x: auto; }
.chart-wrap { position: relative; width: 100%; max-height: 420px; margin-bottom: 1.5rem; }
table.compact td input { margin-bottom: 0; }
tr.muted td { color: var(--pico-muted-color); }
@media (max-width: 640px) {
  .kpi .value { font-size: 1.2rem; }
  nav ul.tabs { width: 100%; justify-content: space-between; }
  nav ul.tabs a { padding: .5rem .4rem; }
  .desktop-only { display: none; }
  .mobile-only { display: block; }
  input.amount { width: 7rem; min-width: 7rem; max-width: 7rem; padding-left: .4rem; padding-right: .4rem; }
  input.rate { max-width: 6.5rem; }
  table.compact td, table.compact th { padding: .4rem .35rem; }
}