@charset "UTF-8";
:root {
  color-scheme:light;
  --navy:#102d52;
  --navy-deep:#0b2240;
  --brand:#273e74;
  --blue:#305ed0;
  --blue-soft:#edf2ff;
  --red:#e6222d;
  --ink:#1a2b43;
  --muted:#66758a;
  --line:#e4e9f1;
  --surface:#fff;
  --bg:#f4f6fa;
  --green:#0b795b;
  --green-soft:#eaf7f0;
  --amber:#89611d;
  --shadow:0 3px 15px #102d5204;
  --radius:16px;
  font:16px/1.5 'Segoe UI',Arial,sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink)
}
button,input,select {
  font:inherit
}
button,a,select,input {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
button:disabled {
  cursor:wait;
  opacity:.55
}
button {
  color:inherit
}
button,input,select {
  border-radius:9px
}
input,select {
  min-height:48px
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid #5594f2;
  outline-offset:3px
}
button {
  border:0
}
svg {
  vertical-align:middle
}
.icon {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}
[hidden] {
  display:none!important
}
.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  z-index:100;
  background:var(--surface);
  padding:12px 20px;
  border-radius:8px
}
.skip-link:focus {
  top:12px
}
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:254px;
  background:var(--navy);
  color:#c6d3e5;
  display:flex;
  flex-direction:column;
  z-index:40;
  padding:32px 18px 20px
}
.brand {
  display:flex;
  align-items:center;
  gap:14px;
  padding:2px 7px 36px
}
.brand img {
  width:106px;
  height:63px;
  object-fit:contain
}
.brand>span {
  font-size:10px;
  line-height:1.8;
  letter-spacing:1.8px;
  color:#b7c7dc
}
.brand strong {
  font-size:11px;
  letter-spacing:1.4px;
  color:#fff
}
.nav-label {
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  padding:18px 17px 15px;
  color:#93a8c5
}
.sidebar nav {
  display:flex;
  flex-direction:column;
  gap:7px
}
.sidebar nav a,.sidebar-bottom>a {
  min-height:52px;
  padding:13px 16px;
  display:flex;
  align-items:center;
  gap:13px;
  font-size:14px;
  border-radius:9px;
  transition:background .15s,color .15s
}
.sidebar a:hover {
  background:#ffffff0b;
  color:#fff
}
.sidebar nav a[aria-current=page],.sidebar-bottom>a[aria-current=page] {
  background:#ffffff13;
  color:#fff;
  box-shadow:inset 3px 0 0 #6da1ff
}
.nav-count {
  margin-left:auto;
  padding:0 7px;
  border-radius:5px;
  background:#ffffff10;
  font-size:11px;
  color:#d5dfed
}
.sidebar-bottom {
  margin-top:auto;
  padding-top:24px
}
.sidebar-bottom>a {
  font-size:13px;
  color:#afc1d9
}
.sidebar-bottom>a .icon {
  width:18px;
  height:18px
}
.local-status {
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:22px 10px 18px;
  padding:17px 6px;
  border-top:1px solid #ffffff16;
  border-bottom:1px solid #ffffff16
}
.local-status strong {
  display:block;
  font-size:12px;
  font-weight:500;
  color:#e0e9f5
}
.local-status small {
  display:block;
  font-size:10px;
  color:#9cb1cf;
  margin-top:4px
}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  flex:none;
  border-radius:50%;
  background:#3ca98c
}
.local-status .status-dot {
  margin-top:6px;
  background:#76c7ad
}
.sidebar-version {
  font-size:10px;
  letter-spacing:1px;
  padding:0 16px;
  color:#a6bad4
}
.sidebar-version span {
  display:block;
  font-size:9px;
  letter-spacing:.2px;
  margin-top:4px;
  color:#8fa5c4
}
.workspace {
  margin-left:254px;
  min-width:0
}
.topbar {
  height:80px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 38px;
  gap:20px
}
.topbar-left,.topbar-right {
  display:flex;
  align-items:center;
  gap:18px
}
.breadcrumb {
  font-size:12px;
  color:var(--muted)
}
.breadcrumb>span {
  margin:0 12px;
  color:#a8b3c3
}
.breadcrumb strong {
  font-weight:500;
  color:var(--ink)
}
.test-badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#fff5dc;
  color:#77581c;
  border:1px solid #f5e7c5;
  padding:5px 9px;
  border-radius:5px;
  font-size:10px;
  font-weight:600
}
.test-badge>span {
  width:5px;
  height:5px;
  background:#b88825;
  border-radius:50%
}
.icon-button {
  height:48px;
  width:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--muted);
  border-radius:10px;
  flex:none
}
.icon-button:hover {
  background:var(--bg);
  color:var(--ink)
}
.user-avatar {
  height:36px;
  width:36px;
  border-radius:50%;
  background:#edf1f8;
  color:var(--brand);
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:700;
  flex:none
}
.user-label {
  font-size:11px;
  font-weight:600
}
.user-label small {
  display:block;
  font-size:9px;
  font-weight:400;
  color:var(--muted);
  margin-top:2px
}
.mobile-menu {
  display:none
}
main {
  max-width:1720px;
  margin:0 auto;
  padding:34px 38px 0;
  outline:0
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px
}
.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  color:var(--muted);
  font-weight:700;
  margin-bottom:7px
}
h1 {
  font-size:clamp(26px,2.05vw,35px);
  letter-spacing:-1.2px;
  font-weight:650;
  line-height:1.25;
  margin:0
}
h1>span {
  color:var(--red)
}
.page-heading p {
  font-size:13px;
  color:var(--muted);
  margin:9px 0 0
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px 15px;
  font-weight:600;
  font-size:12px;
  white-space:nowrap;
  border:1px solid transparent;
  transition:background .15s,box-shadow .15s
}
.button .icon {
  height:17px;
  width:17px
}
.secondary {
  background:var(--surface);
  border-color:var(--line);
  box-shadow:var(--shadow);
  color:var(--ink)
}
.secondary:hover {
  border-color:#9facbf;
  background:var(--bg)
}
.primary {
  background:var(--brand);
  color:white
}
.primary:hover {
  background:#1e3261;
  box-shadow:0 3px 8px #273e7420
}
.filter-bar {
  display:flex;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  gap:12px;
  box-shadow:var(--shadow)
}
.filter-field {
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1
}
.filter-field label {
  font-size:10px;
  color:var(--muted);
  font-weight:500;
  margin:0 0 3px 5px
}
.filter-field select,.filter-field input {
  width:100%;
  font-size:12px;
  border:1px solid transparent;
  background:var(--surface);
  color:var(--ink);
  min-height:32px;
  padding:3px 5px;
  outline-offset:0
}
.filter-field select:hover,.filter-field input:hover {
  border-color:var(--line)
}
.filter-field select {
  padding-right:5px
}
.period-field {
  flex:1.05;
  border-right:1px solid var(--line);
  padding-right:8px
}
.date-range {
  display:flex;
  align-items:center;
  gap:3px;
  flex:1.7;
  border-right:1px solid var(--line);
  padding-right:8px;
  min-width:230px
}
.date-range>span {
  font-size:12px;
  color:#a3afc0;
  margin:11px 2px 0
}
.date-range input {
  letter-spacing:-.3px;
  min-width:104px
}
.station-field {
  flex:1.35
}
.source-field {
  flex:.58
}
.passage-field {
  flex:1.05
}
.apply-button {
  padding:10px;
  min-height:42px;
  font-size:11px
}
.apply-button .icon {
  width:15px
}
.data-context {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:10px;
  color:var(--muted);
  min-height:48px
}
.data-context>div {
  display:flex;
  align-items:center;
  gap:7px
}
.text-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  min-height:44px;
  padding:6px
}
.text-button:hover {
  color:var(--blue)
}
.text-button .icon {
  width:14px;
  height:14px
}
.data-context .status-dot.is-offline {
  background:#bc7f29
}
.loading-state {
  min-height:450px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:14px;
  font-size:14px;
  color:var(--muted)
}
.loader {
  height:28px;
  width:28px;
  border:2px solid var(--line);
  border-top-color:var(--brand);
  border-radius:50%;
  animation:spin .8s linear infinite
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
[aria-busy=true] {
  opacity:.6;
  transition:opacity .15s
}
.error-panel {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  background:#fff0ee;
  color:#992b2b;
  border:1px solid #edc9c5;
  border-radius:12px;
  margin-bottom:16px
}
.error-panel p {
  flex:1;
  font-size:13px
}
.metrics {
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr 1fr;
  gap:16px;
  margin-bottom:22px
}
.metric-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:21px;
  position:relative;
  box-shadow:var(--shadow);
  min-width:0
}
.metric-card.featured {
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
  overflow:hidden
}
.metric-card.featured:after {
  content:"";
  position:absolute;
  border:1px solid #ffffff08;
  border-radius:50%;
  width:210px;
  height:210px;
  right:-110px;
  top:15px;
  box-shadow:0 0 0 26px #ffffff03,0 0 0 52px #ffffff02;
  pointer-events:none
}
.metric-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-size:11px;
  margin-bottom:15px
}
.metric-top .icon {
  width:18px;
  height:18px;
  color:#8290a5
}
.featured .metric-top {
  color:#c0cfe4
}
.featured .metric-top .icon {
  color:#c0cfe4
}
.metric-value {
  font-size:clamp(23px,2.05vw,32px);
  font-weight:650;
  letter-spacing:-1px;
  line-height:1.25;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}
.metric-value .currency {
  font-size:14px;
  font-weight:400;
  letter-spacing:0;
  margin-right:5px;
  opacity:.75
}
.metric-note {
  font-size:10px;
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  margin-top:13px;
  min-height:20px
}
.metric-note .delta {
  font-weight:650;
  color:var(--green);
  background:var(--green-soft);
  padding:2px 5px;
  border-radius:4px
}
.metric-note .delta.negative {
  background:#ffefee;
  color:#aa3c38
}
.featured .metric-note {
  color:#b7c7dc
}
.featured .delta {
  background:#ffffff12;
  color:#b6f3d4
}
.featured .delta.negative {
  color:#ffc7b9;
  background:#ffffff12
}
.metric-foot {
  font-size:10px;
  color:var(--muted)
}
.metrics .mini-track {
  height:5px;
  border-radius:8px;
  background:var(--line);
  margin:17px 0 0;
  overflow:hidden
}
.mini-track svg {
  display:block;
  width:100%;
  height:5px
}
.section-grid {
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(290px,1fr);
  gap:22px;
  margin-bottom:22px
}
.panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  min-width:0;
  overflow:hidden
}
.panel-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 23px 0;
  gap:15px
}
.panel-heading h2,.section-heading h2 {
  font-size:15px;
  font-weight:650;
  margin:0;
  letter-spacing:-.2px
}
.panel-heading p {
  margin:5px 0 0;
  color:var(--muted);
  font-size:10px
}
.panel-heading .text-button {
  font-size:10px
}
.segmented {
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:7px;
  padding:3px;
  background:var(--bg);
  gap:2px;
  flex:none
}
.segmented button {
  background:transparent;
  padding:7px 12px;
  font-size:10px;
  min-height:30px;
  color:var(--muted);
  border-radius:5px
}
.segmented button[aria-pressed=true] {
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 1px 4px #102d5210
}
.chart-topline {
  padding:16px 24px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.chart-topline strong {
  font-size:24px;
  letter-spacing:-.8px;
  font-weight:650
}
.chart-topline>span {
  font-size:10px;
  color:var(--muted)
}
.chart-host {
  position:relative;
  padding:4px 14px 0;
  min-height:212px
}
.line-chart {
  width:100%;
  height:208px;
  display:block;
  overflow:visible
}
.chart-grid {
  stroke:var(--line);
  stroke-dasharray:3 5;
  stroke-width:.7
}
.chart-label {
  font-family:'Segoe UI',Arial,sans-serif;
  font-size:10px;
  fill:var(--muted)
}
.chart-line {
  fill:none;
  stroke:var(--blue);
  stroke-width:2.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.chart-dot {
  fill:var(--surface);
  stroke:var(--blue);
  stroke-width:2;
  cursor:pointer
}
.chart-dot:hover,.chart-dot:focus {
  r:5;
  fill:var(--blue);
  outline:0
}
.chart-legend {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 24px 18px;
  color:var(--muted);
  font-size:10px
}
.legend-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
  margin-right:6px
}
.chart-tooltip {
  position:absolute;
  z-index:3;
  background:var(--navy);
  color:#fff;
  border-radius:8px;
  font-size:11px;
  padding:10px 14px;
  bottom:45px;
  right:30px;
  box-shadow:0 4px 18px #102d5230;
  pointer-events:none
}
.chart-tooltip span {
  display:block;
  color:#bbcfe7;
  font-size:10px;
  margin-bottom:2px
}
.chart-no-data {
  min-height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:var(--muted);
  font-size:13px;
  gap:6px
}
.chart-no-data small {
  font-size:11px
}
.donut-body {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  padding:24px 22px 16px;
  min-height:228px
}
.donut-container {
  position:relative;
  flex:none;
  width:145px;
  height:145px
}
.donut-svg {
  width:145px;
  height:145px;
  transform:rotate(-90deg)
}
.donut-base {
  fill:none;
  stroke:var(--line);
  stroke-width:15
}
.donut-segment {
  fill:none;
  stroke-width:15
}
.donut-label {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column
}
.donut-label strong {
  font-size:22px;
  letter-spacing:-.7px
}
.donut-label span {
  font-size:10px;
  color:var(--muted);
  margin-top:3px
}
.donut-legend {
  flex:1;
  min-width:0
}
.legend-row {
  display:grid;
  grid-template-columns:8px 1fr auto;
  gap:8px;
  align-items:center;
  font-size:10px;
  padding:9px 0
}
.legend-row .swatch {
  width:6px;
  height:6px;
  border-radius:50%
}
.legend-row b {
  font-weight:650
}
.legend-row small {
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:1px
}
.panel-note {
  display:flex;
  gap:8px;
  align-items:center;
  margin:0 22px 18px;
  padding:10px 0 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:9px
}
.panel-note .icon {
  width:13px;
  height:13px;
  flex:none
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:16px
}
.section-heading p {
  font-size:11px;
  color:var(--muted);
  margin:4px 0 0
}
.station-table-section {
  padding:22px 23px
}
.search-field {
  display:flex;
  align-items:center;
  gap:7px;
  background:var(--bg);
  border:1px solid var(--line);
  padding:0 10px;
  border-radius:8px;
  color:var(--muted)
}
.search-field .icon {
  width:16px;
  height:16px
}
.search-field input {
  min-height:36px;
  font-size:11px;
  width:160px;
  border:0;
  background:transparent;
  outline-offset:3px;
  color:var(--ink)
}
.table-scroll {
  overflow-x:auto
}
.data-table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:12px;
  white-space:nowrap
}
.data-table th {
  font-size:9px;
  font-weight:600;
  letter-spacing:.4px;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding:12px 10px;
  background:var(--bg)
}
.data-table th:first-child {
  border-radius:7px 0 0 7px
}
.data-table th:last-child {
  border-radius:0 7px 7px 0
}
.data-table td {
  padding:14px 10px;
  border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums
}
.data-table tbody tr:last-child td {
  border-bottom:0
}
.data-table tbody tr:hover {
  background:var(--bg)
}
.data-table .number {
  text-align:right
}
.data-table th button {
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  background:transparent;
  min-height:26px;
  padding:0;
  letter-spacing:inherit;
  display:inline-flex;
  align-items:center;
  gap:4px
}
.station-name {
  display:flex;
  align-items:center;
  gap:11px;
  font-weight:600
}
.station-icon {
  width:30px;
  height:30px;
  border:1px solid var(--line);
  border-radius:7px;
  display:grid;
  place-items:center;
  background:var(--bg);
  color:var(--muted);
  flex:none
}
.station-icon .icon {
  width:16px;
  height:16px
}
.station-name small {
  display:block;
  font-weight:400;
  color:var(--muted);
  font-size:9px;
  margin-top:2px
}
.table-detail {
  min-width:36px;
  min-height:36px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:7px;
  display:grid;
  place-items:center
}
.table-detail:hover {
  color:var(--blue);
  border-color:var(--blue)
}
.table-detail .icon {
  width:16px;
  height:16px
}
.table-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:9px;
  border-radius:5px;
  background:var(--green-soft);
  color:var(--green);
  padding:4px 7px
}
.table-badge:before {
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor
}
.table-badge.empty {
  color:var(--muted);
  background:var(--bg)
}
.share-cell {
  min-width:100px
}
.share-bar {
  width:65px;
  height:4px;
  margin:5px 0 0 auto;
  border-radius:3px;
  background:var(--line)
}
.share-bar svg {
  display:block;
  width:100%;
  height:4px
}
.table-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:17px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:10px
}
.pagination {
  display:flex;
  align-items:center;
  gap:8px
}
.pagination button {
  min-width:32px;
  height:32px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:10px
}
.category-list {
  padding:17px 23px 12px
}
.category-row {
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:10px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line)
}
.category-row:last-child {
  border-bottom:0
}
.category-icon {
  background:var(--bg);
  border-radius:8px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:var(--muted)
}
.category-icon .icon {
  width:21px;
  height:21px
}
.category-row strong {
  font-size:11px;
  font-weight:600
}
.category-row small {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:3px
}
.category-row>div:last-child {
  text-align:right
}
.category-row b {
  font-weight:600;
  font-size:12px;
  font-variant-numeric:tabular-nums
}
.category-row .share-text {
  font-size:9px;
  color:var(--muted);
  margin-top:3px
}
.table-heading-actions {
  display:flex;
  align-items:center;
  gap:10px
}
.table-heading-actions .button {
  font-size:10px;
  min-height:38px
}
.page-footer {
  padding:24px 0 20px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  color:var(--muted);
  font-size:9px
}
.footer-separator {
  padding:0 8px;
  color:#b8c2cf
}
.empty-state {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  min-height:250px;
  text-align:center;
  padding:30px;
  color:var(--muted)
}
.empty-state .icon {
  width:32px;
  height:32px;
  margin-bottom:15px;
  color:#95a5bd
}
.empty-state h2 {
  font-size:17px;
  color:var(--ink);
  font-weight:600;
  margin:0 0 7px
}
.empty-state p {
  font-size:12px;
  max-width:420px;
  margin:0;
  line-height:1.7
}
.empty-state .button {
  margin-top:18px
}
.empty-table {
  text-align:center;
  padding:28px!important;
  color:var(--muted)
}
.station-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:20px
}
.station-card {
  padding:23px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius)
}
.station-card-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}
.station-card h2 {
  font-size:16px;
  line-height:1.4;
  margin:13px 0 2px
}
.station-card .station-id {
  font-size:10px;
  color:var(--muted)
}
.station-card .station-amount {
  font-size:26px;
  font-weight:650;
  letter-spacing:-.8px;
  margin:20px 0 0
}
.station-card .station-label {
  font-size:10px;
  color:var(--muted)
}
.station-card-stats {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:11px;
  padding:16px 0;
  margin-top:12px;
  border-top:1px solid var(--line)
}
.station-card-stats small {
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-bottom:3px
}
.station-card .button {
  width:100%;
  font-size:11px
}
.wide-panel {
  padding:23px
}
.report-toolbar {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:20px
}
.report-toolbar .segmented {
  flex-wrap:wrap
}
.report-total {
  font-weight:650;
  background:var(--blue-soft)
}
.report-info {
  margin:16px 0 0;
  font-size:11px;
  line-height:1.7;
  color:var(--muted)
}
.callout {
  background:var(--blue-soft);
  border:1px solid #d9e3fb;
  border-radius:11px;
  display:flex;
  gap:12px;
  padding:16px 18px;
  color:var(--brand);
  font-size:12px;
  margin-bottom:20px
}
.callout .icon {
  flex:none;
  width:18px
}
.callout p {
  margin:0
}
.callout strong {
  display:block;
  margin-bottom:3px
}
.collectors-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:22px
}
.compact-metric {
  padding:22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius)
}
.compact-metric p {
  font-size:11px;
  color:var(--muted);
  margin:0 0 7px
}
.compact-metric strong {
  font-size:26px;
  letter-spacing:-.6px
}
.calendar-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px
}
.calendar-heading h2 {
  text-transform:capitalize;
  font-size:18px;
  margin:0
}
.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:7px
}
.calendar-weekday {
  text-align:center;
  padding:8px;
  font-size:10px;
  color:var(--muted);
  font-weight:600
}
.calendar-day {
  min-height:98px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:var(--surface);
  color:var(--ink);
  position:relative
}
.calendar-day:hover {
  border-color:var(--blue);
  background:var(--blue-soft)
}
.calendar-day.outside {
  opacity:.3
}
.calendar-day.today {
  box-shadow:inset 0 0 0 1px var(--blue)
}
.calendar-day strong {
  font-size:12px;
  font-weight:600
}
.calendar-day .day-value {
  font-size:11px;
  margin-top:auto;
  font-weight:600;
  color:var(--brand)
}
.calendar-day small {
  font-size:9px;
  color:var(--muted)
}
.calendar-day.no-data {
  background:var(--bg)
}
.calendar-day .day-dot {
  position:absolute;
  right:11px;
  top:14px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--blue)
}
.preferences {
  max-width:850px
}
.preference-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--line)
}
.preference-row h3 {
  font-size:14px;
  margin:0 0 5px;
  font-weight:600
}
.preference-row p {
  font-size:12px;
  color:var(--muted);
  margin:0;
  line-height:1.7
}
.preference-row select {
  background:var(--surface);
  border:1px solid var(--line);
  padding:9px 12px;
  color:var(--ink);
  font-size:12px;
  min-width:160px
}
.preference-row:last-child {
  border-bottom:0
}
.toggle {
  width:44px;
  height:26px;
  min-height:26px;
  appearance:none;
  background:#b5c0ce;
  border-radius:30px;
  position:relative;
  cursor:pointer;
  flex:none
}
.toggle:after {
  content:"";
  width:18px;
  height:18px;
  background:#fff;
  border-radius:50%;
  position:absolute;
  left:4px;
  top:4px;
  transition:transform .15s
}
.toggle:checked {
  background:var(--blue)
}
.toggle:checked:after {
  transform:translateX(18px)
}
.preference-note {
  color:var(--muted);
  font-size:11px;
  line-height:1.8;
  margin:20px 0
}
.preferences .panel {
  padding:0 24px
}
dialog {
  width:min(540px,calc(100% - 30px));
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px;
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 20px 80px #102d5230
}
dialog::backdrop {
  background:#0b224085;
  backdrop-filter:blur(3px)
}
.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line)
}
.dialog-heading h2 {
  font-size:25px;
  margin:0;
  letter-spacing:-.6px
}
.dialog-heading .eyebrow {
  font-size:9px
}
.dialog-metrics {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  padding:25px 0
}
.dialog-metrics>div {
  background:var(--bg);
  padding:18px;
  border-radius:12px
}
.dialog-metrics small {
  display:block;
  font-size:11px;
  color:var(--muted)
}
.dialog-metrics strong {
  display:block;
  font-size:22px;
  margin-top:8px;
  letter-spacing:-.6px
}
.dialog-info {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin-bottom:22px
}
.dialog-info strong {
  color:var(--ink);
  font-weight:600
}
.dialog-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end
}
.toast {
  position:fixed;
  bottom:28px;
  left:calc(50% + 120px);
  transform:translateX(-50%);
  background:var(--navy);
  color:white;
  padding:13px 20px;
  border:1px solid #ffffff16;
  border-radius:10px;
  box-shadow:0 6px 25px #102d5225;
  font-size:12px;
  max-width:calc(100% - 30px);
  z-index:100
}
.noscript {
  position:fixed;
  inset:auto 15px 15px;
  padding:20px;
  background:#fff0ee;
  color:#8b2828;
  z-index:100
}
.chart-data-table {
  padding:0 24px 16px;
  color:var(--muted);
  font-size:10px
}
.chart-data-table summary {
  cursor:pointer;
  width:max-content;
  padding:4px 0
}
.chart-data-table table {
  width:100%;
  margin-top:10px;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums
}
.chart-data-table th,.chart-data-table td {
  border-bottom:1px solid var(--line);
  padding:6px;
  text-align:right
}
.chart-data-table th:first-child,.chart-data-table td:first-child {
  text-align:left
}
html[data-theme=dark] {
  color-scheme:dark;
  --ink:#e3eaf5;
  --muted:#a0aec2;
  --line:#2b3b51;
  --surface:#192a40;
  --bg:#102035;
  --blue:#85a8ff;
  --blue-soft:#233b61;
  --green:#83d5b8;
  --green-soft:#1d3e39;
  --brand:#91a7e3;
  --shadow:none
}
.featured .metric-top,.featured .metric-note {
  color:#c0cfe4
}
html[data-theme=dark] .primary {
  background:#5177c9;
  color:white
}
html[data-theme=dark] .test-badge {
  background:#3e3422;
  border-color:#51442e;
  color:#eacb8e
}
html[data-theme=dark] .user-avatar {
  background:#2b405f;
  color:#cfdbf4
}
html[data-theme=dark] .callout {
  border-color:#344a74
}
html[data-theme=dark] .error-panel {
  background:#442d30;
  border-color:#724348;
  color:#ffd1cb
}
.reduced-motion * {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}
@media(min-width:1650px) {
  .topbar {
    padding:0 48px
  }
  main {
    padding:44px 48px 0
  }
  .page-heading {
    margin-bottom:32px
  }
  .filter-bar {
    padding:14px 18px;
    gap:18px
  }
  .filter-field label {
    font-size:11px
  }
  .filter-field input,.filter-field select {
    font-size:13px
  }
  .apply-button {
    font-size:12px;
    padding:11px 16px
  }
  .metrics {
    gap:22px
  }
  .metric-card {
    padding:25px
  }
  .section-grid {
    gap:24px
  }
  .metric-top {
    font-size:12px
  }
  .metric-value {
    font-size:34px
  }
  .section-heading h2,.panel-heading h2 {
    font-size:16px
  }
  .chart-host {
    min-height:240px
  }
  .line-chart {
    height:240px
  }
  .donut-body {
    min-height:260px
  }
  .donut-container,.donut-svg {
    width:165px;
    height:165px
  }
  .data-table {
    font-size:13px
  }
  .data-table th {
    font-size:10px
  }
  .legend-row {
    font-size:11px
  }
  .legend-row small {
    font-size:10px
  }
}
@media(max-width:1250px) {
  .sidebar {
    width:226px;
    padding-left:12px;
    padding-right:12px
  }
  .brand {
    gap:9px
  }
  .brand img {
    width:94px
  }
  .brand>span {
    font-size:9px
  }
  .brand strong {
    font-size:10px
  }
  .workspace {
    margin-left:226px
  }
  main {
    padding:28px 25px 0
  }
  .topbar {
    padding:0 25px
  }
  .filter-bar {
    flex-wrap:wrap;
    gap:10px
  }
  .period-field {
    flex:1;
    min-width:130px
  }
  .date-range {
    flex:1.5
  }
  .station-field {
    flex:1.1;
    min-width:160px
  }
  .source-field {
    flex:.7
  }
  .passage-field {
    min-width:160px
  }
  .filter-field input,.filter-field select {
    min-height:34px
  }
  .metrics {
    gap:12px
  }
  .metric-card {
    padding:17px
  }
  .metric-value {
    font-size:25px
  }
  .metric-note {
    font-size:9px
  }
  .section-grid {
    grid-template-columns:minmax(0,1.6fr) minmax(275px,1fr);
    gap:18px
  }
  .panel-heading {
    padding:19px 18px 0
  }
  .donut-body {
    gap:15px;
    padding:24px 16px
  }
  .donut-container,.donut-svg {
    width:125px;
    height:125px
  }
  .donut-label strong {
    font-size:20px
  }
  .table-heading-actions .button {
    display:none
  }
  .station-cards {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .toast {
    left:calc(50% + 113px)
  }
}
@media(max-width:1050px) {
  .sidebar {
    width:208px
  }
  .workspace {
    margin-left:208px
  }
  .brand {
    gap:8px
  }
  .brand img {
    width:86px
  }
  .brand>span {
    font-size:8px;
    letter-spacing:1.2px
  }
  .brand strong {
    font-size:9px;
    letter-spacing:1px
  }
  .sidebar nav a {
    font-size:12px;
    gap:10px;
    padding:13px
  }
  .topbar {
    padding:0 23px
  }
  .user-label {
    display:none
  }
  .topbar-right {
    gap:10px
  }
  main {
    padding:26px 23px 0
  }
  .metrics {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px
  }
  .metric-value {
    font-size:29px
  }
  .section-grid {
    grid-template-columns:1fr
  }
  .donut-body {
    justify-content:flex-start;
    min-height:210px;
    padding:24px
  }
  .donut-container,.donut-svg {
    width:145px;
    height:145px
  }
  .donut-legend {
    max-width:400px
  }
  .legend-row {
    font-size:12px
  }
  .legend-row small {
    font-size:10px
  }
  .category-list {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0 25px
  }
  .category-row {
    padding:16px 0
  }
  .category-row strong {
    font-size:10px
  }
  .page-heading {
    align-items:flex-start;
    gap:14px
  }
  .page-heading .button {
    font-size:10px;
    padding:10px
  }
  .page-heading p {
    font-size:12px
  }
  .breadcrumb {
    font-size:11px
  }
  .calendar-day {
    min-height:85px;
    padding:8px
  }
  .calendar-day .day-value {
    font-size:9px
  }
  .toast {
    left:calc(50% + 104px)
  }
}
@media(max-width:760px) {
  .sidebar {
    width:254px;
    transform:translateX(-100%);
    transition:transform .2s;
    box-shadow:12px 0 50px #0b224025
  }
  .sidebar.open {
    transform:translateX(0)
  }
  .sidebar.open .brand img {
    width:106px
  }
  .sidebar.open .brand>span {
    font-size:10px
  }
  .sidebar.open .brand strong {
    font-size:11px
  }
  .sidebar nav a {
    font-size:14px
  }
  .sidebar-backdrop {
    position:fixed;
    inset:0;
    background:#0b224070;
    z-index:39
  }
  .workspace {
    margin-left:0
  }
  .mobile-menu {
    display:inline-flex
  }
  .topbar {
    height:68px;
    padding:0 16px;
    gap:10px
  }
  .topbar-left {
    gap:6px
  }
  .breadcrumb {
    font-size:11px
  }
  .breadcrumb>span {
    margin:0 7px
  }
  .breadcrumb>strong {
    font-size:11px
  }
  .topbar-right {
    gap:7px
  }
  .topbar-right>.icon-button {
    width:36px
  }
  .test-badge {
    font-size:9px
  }
  .user-avatar {
    width:31px;
    height:31px
  }
  .page-heading {
    margin-bottom:22px
  }
  .page-heading .button {
    display:none
  }
  main {
    padding:26px 18px 0
  }
  .eyebrow {
    font-size:9px
  }
  h1 {
    font-size:29px;
    letter-spacing:-1px
  }
  .page-heading p {
    font-size:12px;
    line-height:1.6;
    max-width:300px
  }
  .filter-bar {
    gap:12px;
    padding:15px
  }
  .period-field {
    flex:1;
    min-width:100px
  }
  .date-range {
    flex:2;
    border-right:0;
    padding-right:0;
    min-width:210px
  }
  .station-field {
    flex:1;
    min-width:125px
  }
  .source-field {
    flex:1;
    min-width:80px
  }
  .passage-field {
    flex:1.2;
    min-width:145px
  }
  .apply-button {
    flex:1;
    min-height:42px
  }
  .filter-field label {
    font-size:11px
  }
  .filter-field select,.filter-field input {
    font-size:12px;
    min-height:36px
  }
  .data-context {
    font-size:9px;
    min-height:54px
  }
  .data-context>div {
    align-items:flex-start;
    line-height:1.5;
    max-width:78%
  }
  .data-context .status-dot {
    margin-top:4px
  }
  .data-context>.text-button {
    font-size:10px
  }
  .metrics {
    gap:12px;
    margin-bottom:18px
  }
  .metric-card {
    padding:18px
  }
  .metric-top {
    font-size:11px;
    margin-bottom:13px
  }
  .metric-value {
    font-size:28px
  }
  .metric-value .currency {
    font-size:12px
  }
  .metric-note {
    font-size:9px;
    line-height:1.7;
    gap:4px;
    flex-wrap:wrap
  }
  .section-grid {
    gap:18px;
    margin-bottom:18px
  }
  .panel-heading {
    padding:21px 19px 0
  }
  .panel-heading h2,.section-heading h2 {
    font-size:15px
  }
  .panel-heading p {
    font-size:10px
  }
  .segmented button {
    padding:7px 10px
  }
  .line-chart {
    height:210px
  }
  .chart-host {
    padding:8px 7px 0
  }
  .chart-topline {
    padding-left:20px;
    padding-right:20px
  }
  .chart-topline strong {
    font-size:25px
  }
  .chart-topline>span {
    font-size:9px
  }
  .station-table-section {
    padding:20px 17px
  }
  .data-table {
    font-size:12px
  }
  .data-table td {
    padding:15px 9px
  }
  .station-name {
    gap:7px
  }
  .table-heading-actions {
    gap:6px
  }
  .search-field input {
    width:115px;
    font-size:10px
  }
  .search-field {
    padding:0 7px
  }
  .section-heading {
    gap:10px
  }
  .category-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 18px;
    padding:18px
  }
  .page-footer {
    flex-direction:column;
    gap:6px;
    font-size:9px;
    padding:24px 0
  }
  .toast {
    left:50%;
    width:max-content
  }
  .station-cards {
    gap:13px
  }
  .station-card {
    padding:18px
  }
  .station-card h2 {
    font-size:15px
  }
  .station-card .station-amount {
    font-size:24px
  }
  .calendar-grid {
    gap:4px
  }
  .calendar-day {
    min-height:78px;
    padding:7px 4px;
    border-radius:7px
  }
  .calendar-day strong {
    font-size:11px
  }
  .calendar-day .day-value {
    font-size:9px;
    letter-spacing:-.5px
  }
  .calendar-day small {
    display:none
  }
  .calendar-day .day-dot {
    right:6px;
    top:11px;
    width:4px;
    height:4px
  }
  .wide-panel {
    padding:18px
  }
  .collectors-stats {
    gap:10px
  }
  .compact-metric {
    padding:16px
  }
  .compact-metric strong {
    font-size:23px
  }
  .compact-metric p {
    font-size:10px
  }
  .report-toolbar {
    flex-wrap:wrap
  }
  .report-toolbar .button {
    font-size:10px
  }
  .callout {
    font-size:11px
  }
  .preference-row {
    gap:15px
  }
  .preference-row select {
    min-width:120px;
    font-size:11px
  }
  .preference-row p {
    font-size:11px
  }
  .preferences .panel {
    padding:0 18px
  }
  .preference-row h3 {
    font-size:13px
  }
}
@media(max-width:400px) {
  .breadcrumb {
    font-size:0
  }
  .breadcrumb>span {
    display:none
  }
  .topbar-right {
    gap:3px
  }
  .topbar {
    padding:0 12px
  }
  main {
    padding:23px 13px 0
  }
  h1 {
    font-size:27px
  }
  .filter-bar {
    padding:12px;
    gap:9px
  }
  .period-field {
    min-width:90px
  }
  .date-range {
    min-width:195px;
    gap:0
  }
  .date-range input {
    font-size:10px;
    min-width:91px
  }
  .filter-field label {
    font-size:10px
  }
  .metrics {
    gap:9px
  }
  .metric-card {
    padding:15px
  }
  .metric-value {
    font-size:25px
  }
  .metric-top {
    font-size:10px
  }
  .metric-top .icon {
    width:16px
  }
  .donut-body {
    gap:18px;
    padding:22px 17px
  }
  .donut-container,.donut-svg {
    width:130px;
    height:130px
  }
  .legend-row {
    font-size:10px
  }
  .legend-row small {
    font-size:9px
  }
  .station-cards {
    grid-template-columns:1fr
  }
  .section-heading h2 {
    font-size:14px
  }
  .category-list {
    gap:0 10px
  }
  .category-row {
    gap:7px;
    grid-template-columns:29px 1fr auto
  }
  .category-icon {
    width:28px;
    height:28px
  }
  .category-icon .icon {
    width:18px
  }
  .category-row b {
    font-size:11px
  }
  .collectors-stats {
    grid-template-columns:1fr
  }
  .compact-metric {
    display:flex;
    align-items:center;
    justify-content:space-between
  }
  .compact-metric p {
    margin:0
  }
  .calendar-day .day-value {
    font-size:8px
  }
  .calendar-grid {
    gap:3px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
@media print {
  .sidebar,.topbar,.filter-bar,.data-context,.page-footer,.button,.text-button,.search-field,.pagination,.table-detail,.segmented {
    display:none!important
  }
  .workspace {
    margin:0
  }
  main {
    padding:0
  }
  .metrics,.section-grid {
    break-inside:avoid
  }
  .panel,.metric-card {
    box-shadow:none;
    print-color-adjust:exact
  }
  .page-heading {
    margin-top:15px
  }
  .data-table {
    font-size:10px
  }
  .table-scroll {
    overflow:visible
  }
  body {
    background:white
  }
}
/* Readable controls and text across desktop and touch screens. */
.sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}
h1 {
  font-size:clamp(30px,2.4vw,38px)
}
.filter-field label {
  font-size:11px
}
.filter-field select,.filter-field input {
  font-size:13px;
  min-height:44px
}
.filter-bar {
  gap:12px
}
.button {
  min-height:48px;
  font-size:13px
}
.metric-top {
  font-size:13px
}
.metric-note {
  font-size:11px
}
.breadcrumb {
  font-size:13px
}
.data-context {
  font-size:11px
}
.text-button {
  font-size:12px
}
.user-label {
  font-size:12px
}
.user-label small {
  font-size:11px
}
.panel-heading h2,.section-heading h2 {
  font-size:16px
}
.panel-heading p,.section-heading p {
  font-size:12px
}
.data-table {
  font-size:13px
}
.data-table th {
  font-size:11px
}
.station-name small {
  font-size:11px
}
.table-badge {
  font-size:10px
}
.category-row strong {
  font-size:12px
}
.category-row small {
  font-size:11px
}
.category-row b {
  font-size:14px
}
.category-row .share-text {
  font-size:11px
}
.chart-legend,.panel-note {
  font-size:11px
}
.legend-row {
  font-size:12px
}
.legend-row small {
  font-size:10px
}
.segmented button {
  min-height:40px;
  font-size:11px
}
.table-detail,.pagination button {
  min-width:44px;
  min-height:44px
}
.search-field input {
  min-height:44px;
  font-size:12px
}
.table-footer {
  font-size:11px
}
.sidebar nav a {
  font-size:15px
}
.sidebar-bottom>a {
  font-size:14px
}
.local-status strong {
  font-size:13px
}
.local-status small {
  font-size:11px
}
.page-footer {
  font-size:11px
}
.table-heading-actions .button {
  min-height:44px
}
.callout strong.inline-strong {
  display:inline
}
@media(max-width:1250px) {
  .filter-bar {
    flex-wrap:wrap
  }
  .filter-field {
    min-width:100px
  }
  .date-range {
    min-width:260px
  }
  .station-field {
    min-width:155px
  }
  .passage-field {
    min-width:140px
  }
  .apply-button {
    font-size:12px
  }
  .metric-top {
    font-size:12px
  }
  .metric-note {
    font-size:10px
  }
  .sidebar nav a {
    font-size:14px
  }
}
@media(max-width:1050px) {
  .category-list {
    display:block
  }
  .section-grid {
    grid-template-columns:1fr
  }
  .breadcrumb {
    font-size:12px
  }
  .filter-field input {
    font-size:12px
  }
}
@media(max-width:760px) {
  .filter-field input,.filter-field select {
    min-height:44px;
    font-size:13px
  }
  .filter-bar {
    gap:10px
  }
  .date-range {
    flex:1 0 100%;
    order:1;
    border:0;
    min-width:0
  }
  .period-field {
    flex:1.1;
    min-width:0
  }
  .station-field {
    flex:1.4;
    min-width:0
  }
  .source-field {
    flex:.6;
    min-width:0
  }
  .passage-field {
    order:2;
    flex:1.1;
    min-width:0
  }
  .apply-button {
    order:3;
    flex:1;
    min-height:48px
  }
  .date-range .filter-field {
    flex:1
  }
  .date-range input {
    width:100%;
    font-size:14px
  }
  .date-range>span {
    margin:15px 12px 0
  }
  .metric-top {
    font-size:12px
  }
  .metric-note {
    font-size:10px
  }
  .metrics {
    gap:12px
  }
  .breadcrumb {
    font-size:0
  }
  .breadcrumb>span {
    display:none
  }
  .breadcrumb>strong {
    font-size:12px
  }
  .data-context {
    font-size:10px
  }
  .data-context>.text-button {
    font-size:12px
  }
  .page-footer {
    font-size:10px
  }
  .station-name small {
    font-size:10px
  }
  .category-list {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .category-row small {
    font-size:10px
  }
  .panel-heading h2 {
    font-size:15px
  }
  .panel-heading p {
    font-size:11px
  }
  .segmented button {
    font-size:11px;
    min-height:44px
  }
  .panel-heading {
    flex-wrap:wrap
  }
  .chart-topline {
    flex-wrap:wrap
  }
  .donut-body {
    gap:20px
  }
  .legend-row {
    font-size:12px
  }
  .legend-row small {
    font-size:10px
  }
  .chart-legend {
    font-size:10px
  }
  .panel-note {
    font-size:10px
  }
  .test-badge {
    font-size:10px
  }
  .station-card .station-label,.station-card .station-id {
    font-size:11px
  }
  .station-card-stats {
    font-size:12px
  }
  .station-card-stats small {
    font-size:11px
  }
  .calendar-day {
    min-height:82px
  }
  .calendar-day .day-value {
    font-size:10px
  }
  .calendar-day strong {
    font-size:12px
  }
  .calendar-heading .pagination button {
    min-width:44px;
    min-height:44px
  }
  .dialog-metrics strong {
    font-size:21px
  }
  .dialog-actions {
    flex-wrap:wrap
  }
}
@media(max-width:400px) {
  .metric-top {
    font-size:11px
  }
  .metric-note {
    font-size:10px
  }
  .metric-card {
    padding:15px
  }
  .category-list {
    display:block
  }
  .panel-heading .segmented {
    width:100%
  }
  .panel-heading .segmented button {
    flex:1
  }
  .topbar-right>.icon-button {
    width:44px
  }
  .station-cards {
    grid-template-columns:1fr
  }
  .calendar-day .day-value {
    font-size:8px
  }
  .dialog-metrics {
    grid-template-columns:1fr
  }
  .test-badge {
    font-size:9px
  }
}
/* Predictable filter rows; collapse navigation early enough for tablets. */
@media(min-width:761px) and (max-width:1499px) {
  .filter-bar {
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:10px 16px;
    padding:16px
  }
  .filter-bar .filter-field,.filter-bar .date-range {
    min-width:0
  }
  .period-field {
    grid-column:span 3
  }
  .date-range {
    grid-column:span 5;
    min-width:0
  }
  .station-field {
    grid-column:span 4
  }
  .source-field {
    grid-column:span 3
  }
  .passage-field {
    grid-column:span 5
  }
  .apply-button {
    grid-column:span 4;
    align-self:end
  }
  .period-field,.date-range {
    border-right:0
  }
  .date-range input {
    min-width:0;
    width:100%;
    font-size:12px
  }
  .date-range .filter-field {
    min-width:0
  }
}
@media(min-width:1500px) {
  .filter-bar {
    display:grid;
    grid-template-columns:1.1fr 2fr 1.4fr .7fr 1.2fr auto
  }
  .filter-bar .date-range,.filter-bar .filter-field {
    min-width:0
  }
  .apply-button {
    font-size:12px
  }
  .date-range input {
    min-width:0
  }
}
@media(min-width:761px) and (max-width:1050px) {
  .sidebar {
    width:254px;
    transform:translateX(-100%);
    transition:transform .2s;
    box-shadow:12px 0 50px #0b224025
  }
  .sidebar.open {
    transform:translateX(0)
  }
  .sidebar .brand img {
    width:106px
  }
  .sidebar .brand>span {
    font-size:10px
  }
  .sidebar .brand strong {
    font-size:11px
  }
  .workspace {
    margin-left:0
  }
  .mobile-menu {
    display:inline-flex
  }
  .topbar-left {
    gap:10px
  }
  .topbar {
    padding-left:18px
  }
  .sidebar-backdrop {
    position:fixed;
    inset:0;
    background:#0b224070;
    z-index:39
  }
  .toast {
    left:50%
  }
}
@media(max-width:760px) {
  .filter-field {
    min-width:0
  }
  .period-field,.station-field,.source-field {
    flex-basis:0
  }
  .date-range {
    width:100%
  }
  .date-range input {
    font-size:13px
  }
  .period-field {
    border-right:0;
    padding-right:0
  }
  .metric-note {
    min-height:35px
  }
  .panel-heading .segmented {
    margin-top:4px
  }
  .sidebar nav a {
    font-size:15px
  }
}
.sidebar {
  overflow-y:auto
}
.toggle {
  width:48px;
  height:48px;
  min-height:48px;
  background:transparent!important;
  margin:0
}
.toggle:before {
  content:"";
  position:absolute;
  left:2px;
  top:11px;
  width:44px;
  height:26px;
  border-radius:30px;
  background:#a8b5c7
}
.toggle:after {
  left:6px;
  top:15px
}
.toggle:checked:before {
  background:var(--blue)
}
.toggle:checked:after {
  transform:translateX(18px)
}
.data-table .report-info {
  margin:3px 0 0;
  font-size:10px
}
.table-detail,.pagination button {
  min-width:48px;
  min-height:48px
}
.table-scroll {
  position:relative;
  max-width:100%
}
.report-toolbar .segmented {
  max-width:100%;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:wrap
}
.filter-field select,.filter-field input,.search-field input,.text-button {
  min-height:48px
}
.segmented button {
  min-height:48px
}
.topbar-right>.icon-button {
  width:48px
}

.toast-download { color:#fff; font-weight:600; text-decoration:underline; padding:12px 8px; display:inline-block; min-height:44px; }

.chart-cut-note { padding:0 24px; font-size:11px; color:var(--amber); line-height:1.6; }

/* Financial hierarchy: toll revenue and recharges have distinct scopes. */
.financial-hero {
  background:linear-gradient(115deg,#102d52 0%,#1b4075 68%,#315a94 100%);
  color:#fff;border-radius:22px;padding:32px 36px;display:flex;
  align-items:center;justify-content:space-between;gap:32px;margin-bottom:20px;
  position:relative;overflow:hidden;box-shadow:0 14px 30px #102d5216
}
.financial-hero:before {content:"";position:absolute;width:330px;height:330px;right:15%;top:-220px;border:50px solid #ffffff04;border-radius:50%;pointer-events:none}
.financial-hero:after {content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#ed1c24}
.hero-main {min-width:0;z-index:1}
.hero-eyebrow {color:#c3d5ed;font-size:12px;font-weight:650;letter-spacing:1.2px}
.hero-eyebrow>span {font-weight:400;letter-spacing:0;display:inline-block}
.hero-amount {font-size:clamp(30px,3.5vw,52px);font-weight:650;letter-spacing:-1.5px;line-height:1.25;margin:12px 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hero-comparison {display:flex;gap:9px;align-items:center;color:#c3d5ed;font-size:12px}
.hero-comparison .delta {color:#bcf5dd;background:#ffffff12;padding:4px 7px;border-radius:5px}
.hero-comparison .negative {color:#ffd2ca}
.hero-stats {display:grid;gap:18px;min-width:215px;z-index:1}
.hero-stats>div {display:flex;gap:14px;align-items:center}
.hero-stats .icon {width:22px;height:22px;color:#aec9ec;flex-shrink:0}
.hero-stats span {display:flex;flex-direction:column;color:#c3d5ed;font-size:12px;gap:3px}
.hero-stats strong {font-size:21px;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.metrics.finance-metrics {grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:14px}
.finance-metrics .metric-card {padding:24px 22px;border-top-width:3px}
.finance-metrics .cash-card {border-top-color:#299179}
.finance-metrics .rapid-card {border-top-color:#d6892e}
.finance-metrics .recharge-card {border-top-color:#6475bf}
.finance-metrics .metric-top {font-size:14px;margin-bottom:14px;line-height:1.4}
.finance-metrics .metric-value {font-size:clamp(21px,2vw,31px);letter-spacing:-.6px;white-space:normal;overflow-wrap:anywhere}
.finance-metrics .metric-note {font-size:12px;line-height:1.6;flex-wrap:wrap;margin-top:12px}
.metric-note a {display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-weight:600;text-decoration:underline}
.metric-note a .icon {width:14px;height:14px}
.financial-context {display:flex;flex-wrap:wrap;gap:8px 24px;font-size:12px;color:var(--muted);line-height:1.6;margin:0 2px 26px}
.financial-context strong {color:var(--ink)}
.financial-stations {margin-bottom:24px}
.financial-stations .section-heading {align-items:center;gap:18px}
.financial-stations .table-heading-actions {display:flex;gap:10px;flex-wrap:wrap}
.financial-stations .data-table {min-width:860px}
.financial-stations .data-table td {padding-top:22px;padding-bottom:22px}
.financial-stations .table-footer {gap:15px;line-height:1.6}
.financial-stations .station-name {font-size:14px;min-width:185px}
.financial-stations .station-name small {font-size:11px;margin-top:7px}
.financial-stations .method-cell>strong,.total-cell>strong {display:block;font-size:16px;letter-spacing:-.3px;line-height:1.5;font-variant-numeric:tabular-nums}
.method-cell>span,.total-cell>span {display:block;color:var(--muted);font-size:12px;margin-top:6px}
.method-cell>span>b {font-weight:500;margin-left:7px;background:var(--bg);padding:3px 5px;border-radius:5px}
.total-cell>small {font-size:10px;color:var(--muted);display:block;margin-top:5px}
.cash-amount {color:#16725b}.rapid-amount {color:#a45b12}
[data-theme="dark"] .cash-amount {color:var(--cash-color)}
[data-theme="dark"] .rapid-amount {color:var(--prepaid-color)}
.total-cell>strong {color:var(--ink);font-weight:700}
.cell-subtitle {display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:6px}
.category-financial,.account-panel,.recharge-trend {margin-bottom:24px}
.wide-panel .section-heading>.button {flex-shrink:0}
.scope-note {display:flex;align-items:flex-start;gap:10px;padding:16px 20px;background:var(--bg);border:1px solid var(--line);border-radius:12px;margin:0 24px 18px;color:var(--muted);font-size:12px;line-height:1.7}
.scope-note .icon {width:18px;height:18px;flex-shrink:0;margin-top:2px}
.scope-note p {margin:0}
.account-empty {margin:16px 24px 24px;padding:18px;border:1px dashed var(--line);border-radius:12px;display:grid;gap:8px;font-size:13px;line-height:1.7}
.account-empty span,.muted {color:var(--muted)}
.recharge-bars {display:grid;gap:16px;padding:8px 24px 26px;max-height:460px;overflow:auto}
.recharge-day {display:grid;grid-template-columns:80px minmax(50px,1fr) 150px;align-items:center;gap:16px;font-size:13px}
.recharge-day>span {color:var(--muted)}
.recharge-day>svg {width:100%;height:12px;background:var(--bg);border-radius:4px}
.recharge-bar {fill:#7886c7}
.recharge-day>strong {font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.account-panel .report-info {line-height:1.8;font-size:12px}
@media(min-width:1500px) {.financial-stations .method-cell>strong,.total-cell>strong {font-size:18px}.financial-stations .station-name {font-size:16px}}
@media(max-width:1100px) {.financial-hero {padding:28px}.hero-stats {min-width:175px}.finance-metrics .metric-card {padding:20px 16px}.finance-metrics .metric-value {font-size:24px}}
@media(max-width:720px) {
 .financial-hero {padding:25px;flex-direction:column;align-items:stretch;gap:22px}
 .hero-amount {font-size:35px;letter-spacing:-1px}
 .hero-eyebrow>span {display:block;margin-top:7px}
 .hero-stats {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:20px;border-top:1px solid #ffffff20;min-width:0}
 .hero-stats>div {display:block}.hero-stats .icon {display:none}.hero-stats strong {font-size:18px}.hero-stats span {font-size:11px;line-height:1.5}
 .metrics.finance-metrics {grid-template-columns:1fr;gap:12px}.finance-metrics .metric-card {padding:22px}.finance-metrics .metric-value {font-size:29px}
 .finance-metrics .metric-top {font-size:14px}.finance-metrics .metric-note {font-size:12px}
 .financial-context {font-size:12px;display:grid;gap:7px}
 .financial-stations .section-heading {align-items:stretch;flex-direction:column}.financial-stations .table-heading-actions {justify-content:space-between;flex-wrap:nowrap}.financial-stations .search-field {min-width:0;flex:1}
 .financial-stations .table-footer>span {font-size:11px}
 .scope-note {margin:0 16px 18px;padding:14px}.account-empty {margin:14px 16px 20px}
 .recharge-day {grid-template-columns:58px minmax(25px,1fr) 125px;gap:10px;font-size:12px}
 .recharge-day>strong {font-size:12px}.recharge-bars {padding:8px 16px 22px}
 .category-financial .section-heading,.account-panel .section-heading,.recharge-trend .section-heading {gap:16px;align-items:flex-start;flex-wrap:wrap}
}
@media(prefers-reduced-motion:no-preference) {.financial-hero {animation:fadeIn .3s ease-out}}
.financial-stations .table-heading-actions .button {display:inline-flex;min-height:48px;min-width:48px;justify-content:center}
.dialog-financial {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.dialog-financial>div {padding:16px;background:var(--bg);border-radius:12px;display:grid;gap:9px;min-width:0}
.dialog-financial span,.dialog-financial small {font-size:12px;color:var(--muted)}
.dialog-financial strong {font-size:17px;overflow-wrap:anywhere}
@media(max-width:600px) {
 .financial-stations .table-scroll {overflow:visible}
 .financial-stations .data-table {min-width:0;display:block;width:100%}
 .financial-stations .data-table thead {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 .financial-stations .data-table tbody {display:grid;gap:16px}
 .financial-stations .data-table tr {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden}
 .financial-stations .data-table td {display:block;padding:15px 13px;border:0;min-width:0;white-space:normal;text-align:left}
 .financial-stations .data-table td:first-child {grid-column:1/-1;background:var(--bg);padding:15px}
 .financial-stations .station-name {min-width:0;font-size:15px}
 .financial-stations .station-name small {font-size:12px}
 .financial-stations .method-cell>strong {font-size:15px;overflow-wrap:anywhere;letter-spacing:-.5px}
 .financial-stations .method-cell:before {display:block;color:var(--muted);font-size:11px;font-weight:600;margin-bottom:6px;letter-spacing:.5px}
 .financial-stations .method-cell.cash-amount:before {content:'EFECTIVO'}
 .financial-stations .method-cell.rapid-amount:before {content:'PASO RÁPIDO'}
 .financial-stations .method-cell>span {font-size:11px;line-height:2}
 .financial-stations .method-cell>span>b {margin-left:2px}
 .financial-stations .total-cell {grid-column:1/-1;border-top:1px solid var(--line);padding:14px 15px;background:var(--bg)}
 .financial-stations .total-cell:before {content:'TOTAL RECAUDADO';color:var(--muted);font-size:11px;font-weight:600;display:block;margin-bottom:5px}
 .financial-stations .total-cell>strong {font-size:20px}
 .financial-stations .share-cell:before {content:'Del ingreso global';display:block;color:var(--muted);font-size:10px;margin-bottom:5px}
 .financial-stations .data-table td:last-child {display:flex;align-items:center;justify-content:flex-end}
 .financial-stations .table-footer {align-items:flex-start;flex-direction:column;gap:14px}
 .financial-stations .table-footer .pagination {align-self:flex-end}
 .dialog-financial {grid-template-columns:1fr}
}

/* Compact consultation layout: keep filters and financial KPIs near the data. */
.sidebar {width:224px;padding:20px 14px 16px;overflow:hidden;height:100dvh}
.brand {padding:0 7px 18px;gap:10px;flex:none}
.brand img {width:96px;height:57px}
.brand>span {font-size:9px;letter-spacing:1px}.brand strong {font-size:10px;letter-spacing:1px}
.nav-label {font-size:9px;padding:10px 12px 10px;flex:none}
.sidebar nav {gap:4px;flex:none}
.sidebar nav a,.sidebar-bottom>a {min-height:44px;padding:10px 12px;gap:10px;font-size:14px;line-height:1.4}
.sidebar nav a .icon,.sidebar-bottom>a .icon {width:19px;height:19px}
.sidebar-bottom {padding-top:12px;flex:none}
.sidebar-bottom>a {font-size:13px}
.local-status {padding:10px 0 0;margin:12px 10px 0;border-bottom:0;gap:8px}
.local-status strong {font-size:11px}.local-status small {font-size:10px;margin-top:2px}
.workspace {margin-left:224px}
.topbar {height:56px;padding:0 24px;gap:12px}
.topbar-right {gap:14px}.user-avatar {width:32px;height:32px;font-size:12px}
main {padding:18px 24px 0;max-width:2000px}
.filter-bar {display:grid;grid-template-columns:minmax(236px,1.2fr) minmax(155px,1fr) minmax(140px,.9fr) auto auto;align-items:end;padding:14px 16px;gap:12px;margin:0}
.filter-bar .date-range {padding:0;margin:0;border:0;gap:10px;display:flex;order:0;width:auto;min-width:0}
.filter-bar .date-range>.filter-field {flex:1;min-width:0}
.filter-bar .date-range>span {display:none}
.filter-bar .filter-field {min-width:0;flex:initial;order:0}
.filter-bar .filter-field label {margin:0 0 4px;font-size:12px}
.filter-bar .filter-field select,.filter-bar .filter-field input {min-height:40px;font-size:13px;width:100%;padding:8px 9px}
.filter-bar .date-range input {min-width:0;font-size:13px}
.filter-bar .button {min-height:40px;padding:9px 13px;font-size:12px;order:0;white-space:nowrap}
.filter-bar .button .icon {width:17px;height:17px}
.today-button {background:var(--surface)}
.filter-bar>.date-range,.filter-bar>.station-field,.filter-bar>.passage-field,.filter-bar>.today-button,.filter-bar>.apply-button {grid-column:auto;grid-row:auto}
.data-context {min-height:30px;margin:8px 0 10px;font-size:11px;gap:10px}
.data-context .text-button {min-height:30px;font-size:12px;padding:2px 6px}
.metrics.compact-financial {grid-template-columns:1.2fr 1fr 1fr 1.05fr;gap:12px;margin:0 0 10px}
.compact-financial .metric-card {padding:17px 16px;border-radius:14px;min-width:0;border-top-width:3px}
.compact-financial .metric-card.cash-card {border-top-color:#299179}
.compact-financial .metric-card.rapid-card {border-top-color:#d6892e}
.compact-financial .metric-card.recharge-card {border-top-color:#6475bf}
.compact-financial .metric-top {font-size:13px;line-height:1.4;margin-bottom:10px;gap:6px}
.compact-financial .metric-top .icon {width:17px;height:17px}
.compact-financial .metric-value {font-size:clamp(21px,1.9vw,34px);line-height:1.3;letter-spacing:-.6px;white-space:normal;overflow-wrap:anywhere}
.compact-financial .metric-note {font-size:11px;line-height:1.5;margin-top:8px;min-height:20px;gap:5px;flex-wrap:wrap}
.compact-financial .featured a {color:#fff}
.financial-context {font-size:11px;gap:4px 18px;line-height:1.6;margin:0 1px 16px}
.financial-context strong {color:var(--ink)}
.financial-rule {color:var(--muted)}
.metric-note a {color:var(--ink)}
.station-table-section {padding:16px 18px}
.section-heading,.panel-heading {margin-bottom:14px;gap:12px}
.section-heading h2,.panel-heading h2 {font-size:16px;line-height:1.4}
.section-heading p,.panel-heading p {font-size:12px;line-height:1.5;margin-top:4px}
.section-heading .eyebrow {font-size:9px;margin-bottom:5px}
.financial-stations .section-heading>div:first-child>p {max-width:700px}
.financial-stations .table-heading-actions {flex-wrap:nowrap;flex-shrink:0;gap:8px}
.financial-stations .search-field input {width:140px;min-height:40px;font-size:12px}
.financial-stations .table-heading-actions .button {min-height:40px;min-width:40px;padding:8px}
.financial-stations .data-table td {padding:12px 10px}
.financial-stations .data-table th {padding:8px 10px;font-size:10px}
.financial-stations .data-table th button {min-height:32px}
.financial-stations .station-name {font-size:14px;gap:9px;min-width:160px}
.financial-stations .station-icon {width:30px;height:30px}
.financial-stations .station-name small {font-size:10px;margin-top:4px}
.financial-stations .method-cell>strong,.financial-stations .total-cell>strong {font-size:15px;line-height:1.4}
.financial-stations .method-cell>span,.financial-stations .total-cell>span {font-size:11px;margin-top:4px}
.financial-stations .table-detail {min-width:38px;min-height:38px}
.financial-stations .table-footer {padding-top:12px;font-size:10px}
.financial-stations .pagination button {min-width:34px;min-height:34px}
.financial-stations,.category-financial,.account-panel,.recharge-trend,.section-grid {margin-bottom:16px}
.wide-panel {padding:18px}
.financial-stations {padding:16px 18px}
.scope-note {padding:10px 14px;margin:0 0 14px;font-size:11px;line-height:1.6}
.recharge-bars {gap:10px;padding:4px 0 16px}
.page-footer {padding:16px 0;font-size:10px}
@media(min-width:1600px) {
 .compact-financial .metric-card {padding:20px}
 .compact-financial .metric-top {font-size:14px}
 .compact-financial .metric-note {font-size:12px}
 .financial-stations .method-cell>strong,.financial-stations .total-cell>strong {font-size:17px}
 .financial-stations .station-name {font-size:15px}
}
@media(max-width:1190px) and (min-width:1051px) {
 .filter-bar {grid-template-columns:minmax(210px,1.2fr) minmax(150px,1fr) minmax(130px,1fr)}
 .filter-bar .today-button {grid-column:2}.filter-bar .apply-button {grid-column:3}
 .metrics.compact-financial {grid-template-columns:1fr 1fr}
 .compact-financial .metric-value {font-size:26px}
 .financial-stations .section-heading {flex-wrap:wrap}
}
@media(max-width:1050px) {
 .workspace {margin-left:0}
 .sidebar {width:268px;padding:20px 16px;transform:translateX(-100%)}
 .sidebar.open {transform:translateX(0)}
 .brand img {width:106px;height:63px}
 .brand>span {font-size:10px}.brand strong {font-size:11px}
 .sidebar nav a {font-size:15px}
 .topbar {padding:0 18px}
 main {padding:16px 18px 0}
 .filter-bar {grid-template-columns:minmax(218px,1.2fr) minmax(140px,1fr) minmax(130px,.9fr) auto auto;gap:8px;padding:12px}
 .filter-bar .button {padding:9px 10px}
 .compact-financial .metric-card {padding:15px 13px}
 .compact-financial .metric-value {font-size:22px}
}
@media(max-width:780px) {
 .filter-bar {grid-template-columns:1fr 1fr auto auto}
 .filter-bar .date-range {grid-column:1/3}
 .filter-bar .station-field {grid-column:3/5}
 .filter-bar .passage-field {grid-column:1/3}
 .filter-bar .today-button {grid-column:3}.filter-bar .apply-button {grid-column:4}
 .metrics.compact-financial {grid-template-columns:1fr 1fr}
 .compact-financial .metric-value {font-size:26px}
 .financial-stations .section-heading {flex-wrap:wrap}
 .financial-stations .table-heading-actions {width:100%;justify-content:space-between}
 .financial-stations .search-field {flex:1}.financial-stations .search-field input {width:100%}
}
@media(max-width:900px) {.metrics.compact-financial {grid-template-columns:1fr 1fr}}
@media(max-width:600px) {
 .topbar {height:52px;padding:0 14px}
 main {padding:12px 12px 0}
 .filter-bar {grid-template-columns:1fr 1fr;padding:12px;gap:10px}
 .filter-bar .date-range {grid-column:1/-1;gap:10px}
 .filter-bar .station-field {grid-column:1}.filter-bar .passage-field {grid-column:2}
 .filter-bar .today-button {grid-column:1}.filter-bar .apply-button {grid-column:2}
 .filter-bar .filter-field input,.filter-bar .filter-field select {min-height:42px;font-size:13px}
 .filter-bar .button {min-height:42px;font-size:13px}
 .data-context {font-size:10px;line-height:1.5;margin:6px 0 10px}
 .metrics.compact-financial {gap:10px}
 .compact-financial .metric-card {padding:14px 12px}
 .compact-financial .metric-top {font-size:12px;min-height:32px;margin-bottom:6px}
 .compact-financial .metric-top .icon {display:none}
 .compact-financial .metric-value {font-size:clamp(18px,4.7vw,21px);letter-spacing:-.7px}
 .compact-financial .metric-note {font-size:10px;line-height:1.5;min-height:30px;margin-top:7px}
 .financial-context {font-size:10px;display:flex;gap:5px 12px;margin-bottom:14px}
 .financial-rule {flex-basis:100%}
 .financial-stations {padding:14px}
 .financial-stations .section-heading {gap:10px;flex-direction:column;align-items:stretch}
 .financial-stations .data-table td {padding:12px}
 .financial-stations .data-table td:first-child {padding:12px}
 .financial-stations .total-cell>strong {font-size:18px}
 .financial-stations .data-table tbody {gap:12px}
 .wide-panel {padding:14px}.scope-note {margin:0 0 12px}
}
@media(max-height:650px) {
 .sidebar {padding:12px}
 .brand {padding-bottom:10px}.brand img {width:80px;height:48px}
 .nav-label {padding:5px 10px 8px}
 .sidebar nav {gap:2px}
 .sidebar nav a,.sidebar-bottom>a {min-height:40px;padding:8px 10px;font-size:13px}
 .sidebar-bottom {padding-top:8px}
 .local-status {margin-top:8px;padding-top:8px}
}
@media(max-height:480px) {
 .sidebar {padding:8px 12px}
 .brand {padding:0 7px 6px;gap:8px}.brand img {width:60px;height:36px}
 .brand>span {font-size:8px;line-height:1.5}.brand strong {font-size:9px}
 .nav-label,.local-status {display:none}
 .sidebar nav {gap:1px}
 .sidebar nav a,.sidebar-bottom>a {min-height:32px;padding:6px 10px;font-size:12px;line-height:1.2}
 .sidebar nav a .icon,.sidebar-bottom>a .icon {width:17px;height:17px}
 .sidebar-bottom {padding-top:4px}
}

/* Four fields, one row, in the same order as keyboard navigation. */
#filters {grid-template-columns:minmax(160px,1.3fr) minmax(128px,.8fr) minmax(128px,.8fr) auto;gap:12px;padding:10px 14px;border-radius:14px}
#filters>* {grid-column:auto;grid-row:auto;order:0;margin:0;min-width:0}
#filters label {font-size:12px;line-height:16px;margin:0 0 3px}
#filters input,#filters select {height:38px;min-height:38px;font-size:13px;padding:6px 9px;width:100%;min-width:0}
#filters .apply-button {height:38px;min-height:38px;padding:8px 14px;font-size:12px;min-width:0;justify-content:center}
@media(max-width:700px) {
 #filters {grid-template-columns:minmax(82px,1fr) minmax(86px,.9fr) minmax(86px,.9fr) 58px;gap:6px;padding:8px}
 #filters label {font-size:11px;line-height:15px}
 #filters input,#filters select {height:40px;min-height:40px;padding:5px;font-size:11px}
 #filters .apply-button {height:40px;min-height:40px;padding:5px;font-size:11px}
 #filters .apply-button [data-icon],#filters .filter-word {display:none}
 #filters input::-webkit-calendar-picker-indicator {width:12px;padding:0;margin:0}
}
@media(max-width:360px) {
 #filters {grid-template-columns:minmax(58px,1fr) minmax(74px,.95fr) minmax(74px,.95fr) 48px;gap:4px;padding:6px}
 #filters input,#filters select {font-size:10px;padding:4px}
 #filters input::-webkit-calendar-picker-indicator {width:10px}
}
.traffic-segment-table {min-width:640px}
.traffic-segment-table thead th {font-size:13px;letter-spacing:0;text-transform:none;line-height:1.5}
.traffic-segment-table th small {display:block;font-size:10px;font-weight:400;color:var(--muted);white-space:nowrap;margin-top:4px}
.traffic-segment-table tbody th,.traffic-segment-table tfoot th {text-align:left;font-size:13px;font-weight:600;padding:12px 10px;border-bottom:1px solid var(--line)}
.traffic-segment-table td {padding:12px 10px}
.traffic-pair {display:grid;gap:5px;line-height:1.4;white-space:nowrap}
.traffic-pair>span {color:var(--muted);font-size:11px}
.traffic-pair>span>b {font-weight:600}
.traffic-pair>strong {font-size:14px;font-variant-numeric:tabular-nums}
.segmented-report .report-toolbar {margin-bottom:18px}
.segmented-report .report-info {font-size:11px;line-height:1.7}
#station-dialog {width:min(780px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:20px;overflow:auto}
#station-dialog .dialog-heading {padding-bottom:12px}
#station-dialog .dialog-heading h2 {font-size:23px}
.station-summary {display:grid;grid-template-columns:1.2fr 1fr;gap:16px;padding:18px 0 14px}
.station-summary>div,.station-methods>div {display:grid;gap:6px;min-width:0}
.station-summary span,.station-methods span {font-size:12px;color:var(--muted)}
.station-summary strong {font-size:25px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.station-summary strong small {font-size:12px;font-weight:400;color:var(--muted)}
.station-methods {display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.station-methods>div {background:var(--bg);border-radius:10px;padding:12px 14px;flex:1 1 160px}
.station-methods strong {font-size:17px;font-variant-numeric:tabular-nums}
.station-methods small {font-size:11px;color:var(--muted)}
.station-category-detail h3 {font-size:15px;margin:0 0 10px}
#station-dialog .traffic-segment-table {min-width:540px}
#station-dialog .traffic-segment-table td,#station-dialog .traffic-segment-table th {padding:10px 7px}
#station-dialog .traffic-pair>strong {font-size:12px}
.detail-loading {padding:22px 12px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;color:var(--muted)}
.detail-loading .loader {width:20px;height:20px}
.detail-error {padding:14px;border:1px solid var(--line);border-radius:10px;font-size:12px}
.station-detail-context {margin:14px 0;font-size:11px;color:var(--muted);line-height:1.6}
.station-detail-context small {display:block;font-size:10px}
#station-dialog .dialog-actions .button {min-height:42px;font-size:12px}
@media(max-width:600px){
 #station-dialog {padding:16px}
 .station-summary {gap:10px}.station-summary strong {font-size:20px}
 .station-methods {gap:10px}.station-methods>div {flex:1 1 110px;padding:10px}.station-methods strong {font-size:14px}
 #station-dialog .dialog-actions {display:grid;grid-template-columns:1fr 1fr;gap:10px}
 #station-dialog .dialog-actions .button {padding:9px 7px;font-size:11px}
}
[hidden] {display:none!important}
.login-page {background:var(--bg);min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-layout {width:min(980px,100%);display:grid;grid-template-columns:1fr 1fr;box-shadow:0 24px 70px #102d5218;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--surface)}
.login-brand {background:linear-gradient(145deg,#102d52,#254b7a);color:#fff;padding:44px;display:flex;flex-direction:column;align-items:flex-start;min-height:570px;position:relative}
.login-brand img {width:160px;height:auto;margin-bottom:56px}.login-brand .eyebrow {color:#a9c2e6;font-size:11px}.login-brand h1 {font-size:42px;line-height:1.16;margin:18px 0;letter-spacing:-1.8px}.login-brand p {font-size:15px;line-height:1.7;color:#d1def1}.login-brand>span {margin-top:auto;padding-top:40px;font-size:11px;color:#b8cce8}
.login-card {padding:54px 42px;align-self:center}.login-card>.eyebrow {font-size:10px}.login-card h2 {font-size:28px;margin:12px 0}.login-card>p {font-size:14px;color:var(--muted);line-height:1.6}.login-card form {display:grid;gap:8px;margin-top:28px}.login-card label {font-size:13px;font-weight:600;margin-top:8px}.login-card input {height:46px;width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;font:inherit;background:var(--surface);color:var(--ink)}.login-card [type=submit] {margin-top:14px;width:100%;height:46px}.login-help {margin-top:24px}.login-card .login-help,.login-card .login-connection {font-size:11px}.password-field {position:relative}.password-field input {padding-right:75px}.password-field button {position:absolute;right:8px;top:9px;border:0;background:none;color:var(--blue);padding:6px;font-size:12px}.form-error {font-size:12px!important;line-height:1.6;color:#b12435!important;margin:8px 0}
.logout-button {min-height:34px;padding:6px 10px;font-size:12px}.security-search {display:flex;align-items:center;gap:10px;max-width:340px;margin:0 0 18px}.security-search input {min-width:0;width:100%;height:40px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:13px}.user-status {display:inline-block;border-radius:6px;padding:5px 8px;background:#fbe9eb;color:#a63346;font-size:11px}.user-status.active {background:#e4f4ed;color:#187a62}.data-table small.report-info {display:block;margin-top:5px}.data-table .button {min-height:34px;padding:6px 10px;font-size:11px}
#user-dialog {width:min(680px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:22px;border-radius:18px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}#user-dialog h2 {font-size:22px}#user-dialog h3 {font-size:14px;margin:20px 0 10px}.user-form-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px}.user-form-grid label,.audit-filters label {display:grid;gap:6px;font-size:12px;font-weight:600}.user-form-grid small {font-size:11px;font-weight:400;color:var(--muted)}.user-form-grid input,.user-form-grid select,.audit-filters input {width:100%;min-width:0;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);padding:8px 10px;font:inherit;font-size:13px}.user-form-grid .full-field {grid-column:1/-1}.permission-table {min-width:400px}.permission-table th {font-size:12px;text-align:left}.permission-table td {text-align:center}.permission-table input {width:18px;height:18px;accent-color:#305ed0}.permission-table tbody th {font-weight:400;padding:9px 8px}.permission-table td {padding:9px 8px}.audit-filters {display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end;margin-bottom:18px}.audit-filters .button {min-height:40px;font-size:12px}.audit-table {min-width:700px}.audit-table td {font-size:12px;max-width:400px;overflow-wrap:anywhere;white-space:normal}.audit-pagination {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;font-size:11px;color:var(--muted)}.audit-pagination>div {display:flex;gap:8px}.audit-pagination .button {font-size:11px;min-height:34px;padding:7px 9px}
.sidebar nav {gap:3px}.sidebar nav a {min-height:42px;padding-top:9px;padding-bottom:9px}.sidebar-bottom>a {min-height:38px}.nav-label {padding-top:16px;padding-bottom:14px}.brand {padding-bottom:12px}.local-status {margin-top:14px;padding-top:14px}
@media(max-height:650px){.sidebar nav {gap:1px}.sidebar nav a,.sidebar-bottom>a {min-height:35px;padding-top:7px;padding-bottom:7px}.nav-label {padding-top:6px;padding-bottom:8px}.local-status {margin-top:8px;padding-top:8px}}
@media(max-height:480px){.sidebar nav a,.sidebar-bottom>a {min-height:28px;padding:5px 10px}.sidebar .brand {padding-bottom:5px}.sidebar nav {gap:0}.sidebar-bottom {padding-top:3px}}
@media(max-width:650px){.login-page {padding:16px}.login-layout {grid-template-columns:1fr}.login-brand {padding:24px;min-height:0}.login-brand img {width:100px;margin:0 0 16px}.login-brand h1,.login-brand p,.login-brand>span {display:none}.login-brand .eyebrow {font-size:10px}.login-card {padding:28px 24px}.login-card h2 {font-size:24px}.user-form-grid {grid-template-columns:1fr}.user-form-grid .full-field {grid-column:auto}.audit-filters {grid-template-columns:1fr 1fr;gap:10px}.audit-pagination {align-items:flex-start;flex-direction:column}.user-label {display:none}.logout-button {padding:5px 8px;min-height:34px}.topbar-right {gap:8px}}
/* Method identities are consistent across every financial view. */
:root {--cash-color:#a9570b;--prepaid-color:#08765a}
[data-theme="dark"] {--cash-color:#f4b56c;--prepaid-color:#77d8b4}
.cash-amount,.compact-financial .cash-card .metric-value {color:var(--cash-color)}
.rapid-amount,.compact-financial .rapid-card .metric-value,.compact-financial .recharge-card .metric-value {color:var(--prepaid-color)}
.compact-financial .metric-card.cash-card {border-top-color:var(--cash-color)}
.compact-financial .metric-card.rapid-card,.compact-financial .metric-card.recharge-card {border-top-color:var(--prepaid-color)}
.compact-financial .metric-card {container-type:inline-size;display:flex;flex-direction:column}
.compact-financial .metric-top {min-height:34px;align-items:flex-start}
.compact-financial .metric-value {font-size:clamp(14px,8.4cqi,32px);white-space:nowrap;overflow-wrap:normal;word-break:normal;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.5px;line-height:1.4}
.compact-financial .metric-note {margin-top:auto;padding-top:9px;min-height:38px}
.data-table .number,.traffic-pair,.metric-value,.station-summary strong,.station-methods strong,.legend-row b,.day-value {font-variant-numeric:tabular-nums;white-space:nowrap}
.data-table .number,.traffic-segment-table td,.traffic-segment-table thead th:not(:first-child),.method-cell,.total-cell {text-align:right}
.traffic-pair {justify-items:end}.station-summary>div,.station-methods>div {text-align:right}
.pending-filters {color:var(--cash-color);font-weight:600}
#view-content[aria-busy="true"][data-loading-label] {position:relative;height:260px;min-height:260px;overflow:hidden}
#view-content[aria-busy="true"][data-loading-label]>* {visibility:hidden}
#view-content[aria-busy="true"][data-loading-label]:before {content:attr(data-loading-label);position:absolute;inset:50px 0 auto;display:block;text-align:center;color:var(--muted);font-size:15px;visibility:visible;padding:40px 20px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
@media(max-width:440px){.metrics.compact-financial {grid-template-columns:1fr;gap:10px}.compact-financial .metric-card {padding:12px 15px;display:grid;grid-template-columns:1fr;gap:2px;min-height:0}.compact-financial .metric-top {min-height:18px;font-size:12px}.compact-financial .metric-value {font-size:25px;line-height:1.2}.compact-financial .metric-note {min-height:0;padding-top:5px;font-size:11px}}
/* A full-viewport entry point, without an outer card or unused margins. */
.login-page {display:block;padding:0;background:#fff;min-height:100svh}
.login-page .login-layout {max-width:none;width:100%;min-height:100svh;margin:0;padding:0;display:grid;grid-template-columns:56% 44%;border:0;border-radius:0;box-shadow:none;overflow:hidden}
.login-page .login-brand {min-height:100svh;padding:38px clamp(30px,5vw,86px);background:radial-gradient(ellipse at 100% 100%,#214d78 0,transparent 60%),#0e2d50;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.login-brand-header {display:flex;align-items:center;gap:22px;position:relative;z-index:1}
.login-page .login-brand-header img {width:120px;height:auto;margin:0}
.login-brand-header>span {color:#b7cbe4;font-size:10px;letter-spacing:2px;line-height:1.8}.login-brand-header strong {font-size:11px;letter-spacing:1.6px;color:#fff}
.login-editorial {position:relative;z-index:1;padding:50px 0 45px}
.login-kicker {font-size:10px;font-weight:600;letter-spacing:2.2px;color:#b7cee9;display:flex;gap:10px;align-items:center}
.login-kicker>span {width:22px;height:2px;background:#ed303a}
.login-page .login-brand h1 {font-size:clamp(44px,5.3vw,80px);font-weight:650;line-height:1.07;letter-spacing:-2.8px;margin:26px 0 25px;max-width:570px}
.login-brand h1 em {font-style:normal;color:#a9c9eb}
.login-page .login-brand .login-editorial p {display:block;font-size:16px;line-height:1.8;color:#b8cce3;margin:0;max-width:420px}
.login-topics {display:flex;gap:10px;margin-top:30px}.login-topics span {font-size:10px;color:#d3e1f1;letter-spacing:.3px;padding:7px 10px;border:1px solid #b0c8e030;border-radius:6px}
.login-road {position:absolute;inset:auto -240px -180px auto;width:760px;height:760px;z-index:0;color:#90b9df;opacity:.21;pointer-events:none}
.login-brand-footer {display:flex;justify-content:space-between;gap:20px;color:#b7cce4;font-size:10px;letter-spacing:.3px;position:relative;z-index:1;padding-top:16px;border-top:1px solid #a6c3e020}
.login-access {padding:38px clamp(28px,5vw,80px);min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;background:#fff}
.login-access-top {font-size:9px;letter-spacing:1.8px;color:#697b91;font-weight:600;display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:54px}
.login-access-dot {width:5px;height:5px;background:#335686;border-radius:50%}
.login-page .login-card {padding:34px 0;align-self:center;width:100%;max-width:390px}
.login-page .login-card>.eyebrow {font-size:9px;letter-spacing:1.7px;color:#748297;margin-bottom:18px}
.login-page .login-card h2 {font-size:clamp(30px,3.1vw,45px);letter-spacing:-1.5px;line-height:1.12;margin:0 0 18px;color:#152d49}.login-card h2>span {color:#e6222d}
.login-page .login-card>p {font-size:13px;color:#6b7c91;line-height:1.7;margin:0}
.login-page .login-card form {margin-top:28px;gap:8px}.login-page .login-card label {font-size:12px;margin-top:10px;color:#273d57;line-height:1.5}
.login-page .login-card input {height:50px;min-height:50px;border:1px solid #dbe3ed;border-radius:9px;background:#fafbfd;font-size:14px;padding:12px 14px;color:#152d49;transition:border-color .15s,box-shadow .15s}
.login-page .login-card input::placeholder {color:#8592a3;font-size:13px}.login-page .login-card input:focus {outline:none;border-color:#40689d;box-shadow:0 0 0 3px #305ed018;background:#fff}
.login-page .password-field input {padding-right:78px}.login-page .password-field button {top:10px;right:10px;color:#456485;font-size:11px;padding:8px 6px;min-height:30px}
.login-page .login-card [type=submit] {height:50px;min-height:50px;border-radius:9px;background:#163a65;font-size:13px;font-weight:600;margin-top:17px;justify-content:space-between;padding:12px 16px;color:white}
.login-page .login-card [type=submit]:after {content:'→';font-size:22px;font-weight:400}.login-page .login-card [type=submit]:hover {background:#244e7e}
.login-page .login-help {margin:26px 0 0;border-top:1px solid #e6ebf1;padding-top:20px;font-size:11px;color:#405a76;line-height:1.6}.login-help>span {font-weight:600}.login-help>p {font-size:11px;color:#75849a;line-height:1.6;margin:5px 0 0}
.login-access-footer {display:flex;gap:8px;align-items:flex-start;color:#7a899a;font-size:10px;line-height:1.6;max-width:390px;align-self:center;width:100%;padding-top:12px}.login-access-footer svg {width:15px;height:15px;flex:none;margin-top:1px}
@media(max-width:900px){.login-page .login-layout {grid-template-columns:49% 51%}.login-page .login-brand {padding:30px}.login-access {padding:30px}.login-page .login-brand h1 {font-size:50px;letter-spacing:-2px}.login-topics {flex-wrap:wrap;gap:6px}.login-page .login-brand-header img {width:95px}.login-brand-header {gap:14px}.login-brand-header>span {font-size:8px}.login-brand-header strong {font-size:9px}}
@media(max-width:700px){.login-page .login-layout {grid-template-columns:1fr;min-height:100svh}.login-page .login-brand {min-height:0;padding:22px 26px;display:block}.login-page .login-brand-header img {width:92px}.login-brand-header>span {font-size:9px}.login-brand-header strong {font-size:10px}.login-editorial,.login-road,.login-brand-footer {display:none}.login-access {min-height:calc(100svh - 99px);padding:18px 26px 22px;justify-content:space-between}.login-access-top {min-height:20px;font-size:8px;justify-content:flex-start}.login-page .login-card {padding:28px 0}.login-page .login-card h2 {font-size:36px}.login-page .login-card form {margin-top:23px}.login-access-footer {font-size:10px}.login-page .login-card [type=submit] {font-size:14px}}
@media(max-height:650px) and (min-width:701px){.login-page .login-brand,.login-access {padding-top:20px;padding-bottom:20px}.login-editorial {padding:25px 0}.login-page .login-brand h1 {font-size:48px;margin:18px 0}.login-topics {margin-top:18px}.login-page .login-card {padding:15px 0}.login-page .login-card h2 {font-size:31px}.login-page .login-card form {margin-top:16px}.login-page .login-help {margin-top:18px;padding-top:14px}.login-access-top {min-height:20px}}
@media(min-width:701px) and (max-height:800px){.login-access {padding-top:26px;padding-bottom:26px}.login-access-top {min-height:28px}.login-page .login-card {padding-top:20px;padding-bottom:20px}.login-page .login-help {margin-top:20px;padding-top:16px}}
@media(min-width:1051px){.metrics.compact-financial {grid-template-columns:repeat(4,minmax(0,1fr))}}
.compact-financial .cash-card .metric-top,.financial-stations th:nth-child(2),.category-financial th:nth-child(3),.category-financial tfoot td:nth-child(3) {color:var(--cash-color)}
.compact-financial .rapid-card .metric-top,.compact-financial .recharge-card .metric-top,.financial-stations th:nth-child(3),.category-financial th:nth-child(4),.category-financial tfoot td:nth-child(4),.account-panel td:nth-child(2),.account-panel th:nth-child(2),.recharge-day>strong,.donut-label strong {color:var(--prepaid-color)}
.recharge-bar {fill:var(--prepaid-color)}
.legend-row[data-method="1"] small {color:var(--cash-color)}.legend-row[data-method="2"] small {color:var(--prepaid-color)}
@media(max-width:600px){.station-methods>div {flex-basis:135px}.station-summary strong {font-size:18px}}
/* User access editor: compatible KPI modules and report assignments. */
.permission-notice {padding:12px 14px;border:1px solid var(--line);border-left:3px solid #5279ba;border-radius:8px;font-size:12px;line-height:1.6;color:var(--ink);background:var(--bg);margin:0 0 16px}
#user-dialog {width:min(1000px,calc(100% - 24px));padding:22px;max-height:calc(100dvh - 24px)}
#user-dialog .dialog-heading {align-items:center;margin-bottom:16px;gap:16px}
.user-editor-tabs {display:flex;gap:6px;padding:5px;background:var(--bg);border:1px solid var(--line);border-radius:10px;margin:0 0 20px}
.user-editor-tabs button {flex:1;min-height:42px;border:0;border-radius:7px;padding:10px;font:inherit;font-size:13px;font-weight:600;background:transparent;color:var(--muted)}
.user-editor-tabs [aria-selected="true"] {background:var(--surface);color:var(--ink);box-shadow:0 1px 5px #102d5212}
.user-next {display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;font-size:12px;color:var(--muted)}
.user-next .button {font-size:12px;flex-shrink:0}
.permission-heading {display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px}
#user-dialog .permission-heading h3 {margin:0 0 6px}.permission-heading p,.report-permission-heading p {font-size:12px;line-height:1.6;color:var(--muted);margin:0}
.permission-heading input {width:185px;height:38px;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);padding:8px 10px;font:inherit;font-size:12px}
.permission-scroll {max-height:340px;border:1px solid var(--line);border-radius:9px}
#user-dialog .permission-table {min-width:680px;width:100%;border-collapse:collapse}
#user-dialog .permission-table thead th {position:sticky;top:0;background:var(--bg);font-size:11px;z-index:1}
#user-dialog .permission-table thead th:not(:first-child) {text-align:center}
#user-dialog .permission-table td {width:70px;padding:9px 7px}
#user-dialog .permission-table tbody th {font-size:12px;line-height:1.5;padding:9px 12px}
#user-dialog .permission-table input {min-height:18px;margin:0}
.privilege-toggle {display:grid;place-items:center;min-height:32px;width:44px;margin:auto;cursor:pointer}
.permission-inactive {display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:2px}
.permission-table input:disabled {opacity:.45;cursor:not-allowed}
.report-permission-heading {margin:20px 0 12px}.report-permission-heading h3 {margin:0 0 6px!important}
.report-permission-group {border:1px solid var(--line);border-radius:9px;margin:10px 0;background:var(--surface)}
.report-permission-group summary {padding:13px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink)}
.report-permission-group summary>span {font-size:10px;font-weight:400;color:var(--muted);margin-left:8px}
.report-permission-options {display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:0 14px 14px}
.report-permission-options label {display:flex;align-items:flex-start;gap:9px;padding:8px 4px;font-size:12px;line-height:1.5;cursor:pointer;color:var(--ink)}
.report-permission-options input {width:17px;height:17px;min-height:17px;flex:none;margin-top:1px;accent-color:var(--blue)}
.report-permission-options label:has(input:disabled) {opacity:.6;cursor:not-allowed}
#user-dialog .user-save-actions {position:sticky;bottom:-22px;background:var(--surface);border-top:1px solid var(--line);margin:18px -4px -4px;padding:16px 4px 4px;z-index:2}
@media(max-width:650px){#user-dialog {padding:16px}.permission-heading {align-items:flex-start;flex-direction:column;gap:10px}.permission-heading input {width:100%}.permission-heading>label {width:100%}.report-permission-options {grid-template-columns:1fr}.user-next {align-items:stretch;flex-direction:column}.user-editor-tabs button {font-size:11px;padding:8px 5px}.user-next .button {justify-content:center}.permission-scroll {max-height:300px}#user-dialog .user-save-actions {bottom:-16px}}
/* One measured size for every financial amount; shrink the entire group together. */
.compact-financial {--metric-font-size:44px}
.metrics.compact-financial {grid-template-columns:repeat(2,minmax(0,1fr))}
.compact-financial .metric-card {container-type:normal;padding:20px;min-width:0}
.compact-financial .metric-value {font-size:var(--metric-font-size);line-height:1.25;letter-spacing:-.7px;min-height:56px;display:flex;align-items:center;justify-content:flex-end;width:100%}
.compact-financial .metric-number {display:inline-block;flex:none;white-space:nowrap;font:inherit;font-variant-numeric:tabular-nums}
.compact-financial .metric-top {font-size:16px;min-height:32px}
.compact-financial .metric-note {font-size:14px;line-height:1.5}
.compact-financial:not(:has(.recharge-card)) {grid-template-columns:repeat(3,minmax(0,1fr))}
.financial-stations .data-table td {font-size:16px}
.financial-stations .method-cell>strong,.financial-stations .total-cell>strong {font-size:20px}
.financial-stations .method-cell>span,.financial-stations .total-cell>span,.financial-stations .station-name small {font-size:14px}
.user-form-grid label,.user-editor-tabs button,#user-dialog .permission-table tbody th,.report-permission-options label {font-size:14px}
.user-form-grid input,.user-form-grid select {font-size:16px}
#user-dialog .permission-table thead th {font-size:13px}
.permission-heading p,.report-permission-heading p,.permission-notice {font-size:14px}
.view-access-summary {border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:20px;background:var(--bg)}
#user-dialog .view-access-summary h3 {margin:0 0 6px;font-size:16px}
.view-access-summary p {font-size:14px;color:var(--muted);margin:0 0 12px}
#view-permission-preview {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.view-access-item {display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:13px}
.view-access-item strong {font-size:12px;color:var(--muted)}.view-access-item.enabled strong {color:var(--prepaid-color)}
@media(max-width:1050px){.compact-financial:not(:has(.recharge-card)) {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.compact-financial .metric-card {padding:16px}.compact-financial .metric-value {min-height:54px}.compact-financial .metric-top {font-size:15px}.compact-financial .metric-note {font-size:13px}#view-permission-preview {grid-template-columns:1fr}}
@media(min-width:1200px){.metrics.compact-financial {grid-template-columns:repeat(4,minmax(0,1fr))}.metrics.compact-financial:not(:has(.recharge-card)) {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:440px){.metrics.compact-financial,.metrics.compact-financial:not(:has(.recharge-card)) {grid-template-columns:1fr}}