:root {
  --bg: #f6f7f9; --surface: #fff; --text: #1b2430; --muted: #66707d; --line: #e3e6ea;
  --brand: #4682b4; --brand-ink: #2f5f86;
  --good-bg: #e3f4e8; --good: #1e6b39; --warn-bg: #fff3d6; --warn: #8a5a00;
  --bad-bg: #fde5e3; --bad: #a3271b; --mut-bg: #eef0f3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161b; --surface: #1b2128; --text: #e6e9ed; --muted: #97a1ad; --line: #2c343d;
    --brand: #6fa3d0; --brand-ink: #9cc2e3;
    --good-bg: #173524; --good: #8ad6a4; --warn-bg: #3a2e12; --warn: #f0c46b;
    --bad-bg: #401c19; --bad: #f2a49b; --mut-bg: #262d35;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--brand-ink); }
code { font-size: .85em; word-break: break-all; }
h1 { font-size: 1.45rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; }
h2 small { font-weight: 400; font-size: .8rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; }
.brand b { color: var(--brand); }
main { max-width: 1180px; margin: 0 auto; padding: 1.1rem 16px 3rem; }
.head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.head h2 { margin: 1.6rem 0 .6rem; }
.crumb { margin: 0 0 .6rem; font-size: .9rem; }
.crumb a { text-decoration: none; }

button { font: inherit; border: 0; border-radius: 8px; padding: .65rem 1rem;
  background: var(--brand); color: #fff; cursor: pointer; min-height: 44px; }
button.link { background: none; color: var(--brand-ink); padding: .3rem; min-height: 0; }
input { font: inherit; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--text); min-height: 44px; width: 100%; }
.filter { max-width: 280px; }
.stack { display: grid; gap: .6rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; }
.card h2 { margin-top: 0; }
.narrow { max-width: 420px; margin: 3rem auto; }
.notice { background: var(--mut-bg); border-radius: 8px; padding: .6rem .8rem; margin: .4rem 0 .8rem; }
.notice.bad { background: var(--bad-bg); color: var(--bad); }
.notice.warn { background: var(--warn-bg); color: var(--warn); }
.notice.good { background: var(--good-bg); color: var(--good); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin: 1rem 0; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem;
  display: flex; flex-direction: column; }
.kpi .n { font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--muted); font-size: .82rem; }

.grid2 { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .grid2 { grid-template-columns: 1fr 1fr; } }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 .4rem; }
dt { color: var(--muted); }
dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.pill { font-style: normal; font-size: .78rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px;
  background: var(--mut-bg); color: var(--muted); white-space: nowrap; }
.pill.big { font-size: .9rem; padding: .3rem .8rem; }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.tag { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--brand-ink);
  border: 1px solid var(--brand); border-radius: 4px; padding: 0 .3rem; }

/* Rows: a table on wide screens, stacked cards on phones. */
.rows { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.row { display: grid; gap: .25rem .8rem; padding: .7rem .9rem; border-top: 1px solid var(--line);
  color: inherit; text-decoration: none; align-items: center; }
.row:first-child { border-top: 0; }
a.row:hover { background: var(--mut-bg); }
.row.dim { opacity: .55; }
.row.th { display: none; font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.who { display: flex; flex-direction: column; min-width: 0; }
.who small { color: var(--muted); overflow-wrap: anywhere; }
.num { font-variant-numeric: tabular-nums; }
.empty { padding: 1rem; margin: 0; color: var(--muted); }

@media (max-width: 859px) {
  .row { grid-template-columns: 1fr 1fr; }
  .row .who { grid-column: 1 / -1; }
  .row [data-l]::before { content: attr(data-l); display: block; font-size: .72rem; color: var(--muted); }
}
@media (min-width: 860px) {
  .row.th { display: grid; }
  #providers .row { grid-template-columns: minmax(0, 2.4fr) 1fr 1fr .7fr .8fr 1.1fr 1fr; }
  .pending .row { grid-template-columns: minmax(0, 2.4fr) 1fr 1.4fr .6fr; }
  .invoices .row { grid-template-columns: minmax(0, 1.6fr) 1fr minmax(0, 1.6fr) .9fr .9fr .9fr; }
  .num { text-align: right; }
}
.row[hidden] { display: none; }
.actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
@media (min-width: 860px) { .row.imp { grid-template-columns: minmax(0, 2fr) 1fr; } }