/* Aplikacja na stylu portalu (site/assets/brand.css): tokeny, fonty i kontener stamtąd, tu komponenty interfejsu. */
:root { --blue: var(--accent); --blue-soft: rgba(32, 32, 223, .1); --blue-dot: rgba(32, 32, 223, .55);
  /* wykresy: cena, liczba umów, ryzyko, wykonawcy lokalni (paleta sprawdzona pod daltonizm) */
  --c-price: #2020df; --c-price-soft: rgba(32, 32, 223, .1); --c-count: #2a9be0; --c-count-soft: rgba(42, 155, 224, .35); --c-risk: #e0a000; --c-local: #7a5cff; --c-dim: #a9b0b5; --grid: rgba(11, 12, 13, .09); --up: #12805c; --down: #c23a2b; --orange: #c2410c;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23626364' stroke-width='1.5'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --blue-soft: rgba(141, 216, 251, .2); --blue-dot: rgba(141, 216, 251, .7); --c-price: #8dd8fb; --c-price-soft: rgba(141, 216, 251, .2); --c-count: #5a6cf5; --c-count-soft: rgba(90, 108, 245, .42); --c-risk: #ffffcc; --c-local: #b48cff; --c-dim: #3d5663; --grid: rgba(255, 255, 255, .1); --up: #5fd3a4; --down: #ff8a78; --orange: #ffb067;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238aa9b7' stroke-width='1.5'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] { --blue-soft: rgba(141, 216, 251, .2); --blue-dot: rgba(141, 216, 251, .7); --c-price: #8dd8fb; --c-price-soft: rgba(141, 216, 251, .2); --c-count: #5a6cf5; --c-count-soft: rgba(90, 108, 245, .42); --c-risk: #ffffcc; --c-local: #b48cff; --c-dim: #3d5663; --grid: rgba(255, 255, 255, .1); --up: #5fd3a4; --down: #ff8a78; --orange: #ffb067; }
body.is-app { font-size: 14px; line-height: 1.5; }
button { font: inherit; color: inherit; }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* nawigacja aplikacji: grupy ekranów w komórkach na liniach kolumn */
.app-bar { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 73px; z-index: 15; }
.ng { border-left: 1px solid var(--line); padding: 12px 16px 0; min-width: 0; }
.ng:last-child { border-right: 1px solid var(--line); }
.ng-l, .fc-l, .ctl-l { font: 500 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
.ng-links { display: flex; gap: 16px; margin-top: 6px; overflow-x: auto; scrollbar-width: none; }
.ng-links::-webkit-scrollbar { display: none; }
.ng-links a { padding: 6px 0 11px; font-size: 14px; color: var(--ink2); text-decoration: none; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.ng-links a:hover { color: var(--ink); text-decoration: none; }
.ng-links a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

/* zakładki ekranu: drugi poziom nawigacji, tuż pod filtrami */
.subnav { display: flex; gap: 28px; padding: 0 var(--pad); margin: -48px 0 40px; border: 1px solid var(--line); border-top: 0; background: var(--bg); overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { padding: 14px 0 12px; font-size: 15px; color: var(--ink2); white-space: nowrap; text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.subnav a:hover { color: var(--ink); text-decoration: none; }
.subnav a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

/* filtry: jedna komórka na kolumnę, etykieta nad kontrolką */
.filters-bar { border: 1px solid var(--line); background: var(--bg); position: relative; z-index: 14; margin-bottom: 48px; }
.fc { padding: 12px 16px 14px; min-width: 0; }
.fc-l { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; min-height: 11px; }
.fc-x { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }

/* lista rozwijana */
.dd { position: relative; }
.dd-btn { width: 100%; height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; background: var(--bg); border: 1px solid var(--line2);
  color: var(--ink); font: 14px var(--sans); text-align: left; cursor: pointer; }
.dd-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn::after { content: ""; flex: none; width: 12px; height: 12px; background: var(--chev) no-repeat center; transition: transform .15s; }
.dd-btn:hover, .dd.open .dd-btn { border-color: var(--ink3); }
.dd.open .dd-btn::after { transform: rotate(180deg); }
.dd-list { display: none; position: absolute; top: calc(100% - 1px); left: 0; min-width: 100%; width: max-content; max-width: min(380px, 90vw); max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); border: 1px solid var(--line2); box-shadow: var(--shadow); z-index: 40; padding: 4px 0; }
.fc:nth-child(n+4) .dd-list { left: auto; right: 0; }
.dd.open .dd-list { display: block; }
.dd-list button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 12px 6px 28px; font: 13px/1.35 var(--sans); color: var(--ink2); cursor: pointer; position: relative; }
.dd-list button:hover { background: var(--hover-tint); color: var(--ink); }
.dd-list button.on { color: var(--ink); }
.dd-list button.on::before { content: "✓"; position: absolute; left: 10px; color: var(--accent); font-family: var(--mono); }

/* przełącznik dwóch opcji (netto / brutto, inflacja) */
.seg { display: flex; }
.seg button { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--line2); background: transparent; color: var(--ink2); font: 500 11.5px var(--mono); padding: 0 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg button + button { margin-left: -1px; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); position: relative; z-index: 1; }

/* przełączniki wewnątrz ekranu: zakładki tekstowe, inne niż filtry globalne */
.pill { background: none; border: 0; padding: 6px 0; margin: 0 18px 0 0; font: 14px var(--sans); color: var(--ink2); cursor: pointer; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.pill:hover { color: var(--ink); }
.pill.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.more .pill { color: var(--accent); }
input[type=text], input[type=number], input[type=search] { height: 34px; background: var(--bg); color: var(--ink); border: 1px solid var(--line2); border-radius: 0; padding: 0 10px; font: 14px var(--sans); max-width: 100%; }
input:hover { border-color: var(--ink3); }
input:focus, .dd-btn:focus-visible, .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
input::placeholder { color: var(--ink3); }

/* ekrany */
main#screen { padding-top: 48px; padding-bottom: 0; min-height: 60vh; }
.head { padding: 0 var(--pad) 32px; }
#screen h1 { font: 500 clamp(32px, 3.6vw, 48px)/1.05 var(--sans); letter-spacing: -.035em; margin: 0 0 12px; }
.lead { color: var(--ink2); margin: 0; font-size: 17px; line-height: 1.55; max-width: 64ch; }
#screen > h2 { font: 500 24px/1.2 var(--sans); letter-spacing: -.025em; margin: 72px 0 6px; padding: 0 var(--pad); }
#screen > .h2sub { padding: 0 var(--pad); }
.h2sub { color: var(--ink3); font-size: 14.5px; margin: 0 0 16px; max-width: 90ch; }

/* karty i panele to komórki siatki 6 kolumn: krawędzie na liniach kolumn, wspólne linie bez odstępów */
.cards, .grid2, .grid3 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cards > *, .grid2 > *, .grid3 > * { border: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--bg); min-width: 0; }
.grid2 > * { grid-column: span 3; }
.grid2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.grid3 > * { grid-column: span 2; }
.grid3 > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.grid3 > :nth-last-child(2):nth-child(3n+1), .grid3 > :last-child:nth-child(3n+2) { grid-column: span 3; }
.cards + *, .chart-head + * { margin-top: -1px; }
/* ramki stojące jedna pod drugą dzielą linię zamiast ją dublować */
:not(.cards, .grid2, .grid3) > :is(.cards, .grid2, .grid3, .panel, .strip, .twrap) + :is(.cards, .grid2, .grid3, .panel, .chart-head, .strip, .twrap) { margin-top: -1px; }
.card { padding: 18px 16px 20px; }
.card.click { cursor: pointer; }
.card.click:hover { background: var(--hover); }
.card .l { font: 500 10.5px/1.3 var(--mono); letter-spacing: .04em; color: var(--ink3); text-transform: uppercase; }
.card .v { font: 400 26px/1.15 var(--mono); color: var(--accent); letter-spacing: -.05em; margin: 10px 0 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card .s { font-size: 13.5px; color: var(--ink2); }
.delta.up { color: var(--up); } .delta.down { color: var(--down); }
.panel { border: 1px solid var(--line); background: var(--bg); padding: 20px var(--pad); min-width: 0; }
.cards > .panel, .grid2 > .panel, .grid3 > .panel { border: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.panel h3 { margin: 0 0 4px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.panel .h2sub { margin-bottom: 8px; font-size: 13.5px; }

/* pasek sterowania wykresem: tuż nad wykresem, w tej samej ramce */
.chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; border: 1px solid var(--line); background: var(--bg); padding: 14px var(--pad); }
.chart-head .crumbs { flex-basis: 100%; margin: 0; font: 500 17px/1.3 var(--sans); letter-spacing: -.01em; }
.crumbs a { cursor: pointer; color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: var(--ink3); margin: 0 4px; }
.tabs { display: flex; align-items: center; flex-wrap: wrap; }
.ctl-l { margin-right: 16px; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--ink3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend i { display: inline-block; }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-dot); }
.lg-band { width: 18px; height: 10px; background: var(--blue-soft); }
.lg-med { width: 2px; height: 14px; background: var(--ink); }
.chart-head .yp { margin-left: auto; display: flex; align-items: center; }
.chart-head .yp input { width: 110px; }
.chart { width: 100%; }
.mini { cursor: pointer; }
.mini:hover { background: var(--hover); }
.mini .t { font-weight: 500; font-size: 15px; }
.mini .m { color: var(--ink3); font-size: 13px; }
.hint { color: var(--ink3); font-size: 13.5px; }
.thin { color: var(--ink3); }
.flag { display: inline-block; margin-left: 6px; padding: 0 6px; font: 500 10px/18px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); border: 1px solid var(--line2); vertical-align: 1px; white-space: nowrap; }

/* tabele */
table.t { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; border: 1px solid var(--line); background: var(--bg); }
.t th { text-align: left; font: 500 10.5px/1.3 var(--mono); color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; padding: 12px 12px; border-bottom: 1px solid var(--line); cursor: pointer; vertical-align: bottom; user-select: none; }
.t th.num, .t td.num { text-align: right; }
.t th:hover { color: var(--ink); }
.t th.sorted { color: var(--ink); }
.t th.sorted::after { content: " ▾"; } .t th.sorted.asc::after { content: " ▴"; }
.t td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.t tr:last-child td { border-bottom: 0; }
.t tbody tr.click { cursor: pointer; }
.t tbody tr.click:hover td { background: var(--hover-tint); }
.t tr.group td { font-weight: 600; font-size: 13.5px; padding-top: 16px; border-bottom-color: var(--line2); }
.t td.wrap { min-width: 280px; }
.t td.range-cell { width: 34%; min-width: 300px; }
.t td svg.spark { display: block; }
.rng { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 12px; }
.rng .muted { font: 10.5px var(--mono); white-space: nowrap; }
.rng .muted:first-child { text-align: right; }
.rbar { position: relative; height: 16px; }
.rbar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dotted var(--grid); }
.rbar i { position: absolute; top: 3px; bottom: 3px; min-width: 2px; background: var(--c-price-soft); }
.rbar b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--c-price); }
.rbar u { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--c-risk); box-shadow: 0 0 0 1.5px var(--bg); }
.t td.nowrap, .t td.num { white-space: nowrap; }
.t td.num { font-family: var(--mono); font-size: 12px; line-height: 1.35; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.t td.num .muted { font-size: 10.5px; letter-spacing: 0; }
.t .muted { color: var(--ink3); font-size: 11.5px; }
.t input[type=number], .t input[type=text] { height: 30px; font-family: var(--mono); font-size: 13px; text-align: right; }
.bar { height: 6px; border-radius: 0; background: var(--c-price); display: inline-block; vertical-align: middle; margin-right: 6px; }
.more { margin: 10px 0; }
.chip { display: inline-block; font: 500 11px var(--mono); border: 1px solid var(--line2); padding: 2px 8px; color: var(--ink2); margin: 0 4px 4px 0; }
.tag-open { color: var(--up); font-weight: 600; }

/* pasek z kropkami (mapa cen) */
.strip { border: 1px solid var(--line); background: var(--bg); padding: 8px var(--pad) 4px; overflow-x: auto; }
.strip svg text { fill: var(--ink3); font-size: 12px; font-family: var(--mono); }
.strip .rowlabel { cursor: pointer; }
.strip .rowlabel:hover .name { fill: var(--accent); }
.strip .name { fill: var(--ink); font-size: 14px; font-weight: 500; font-family: var(--sans); }
.strip .meta { fill: var(--ink3); font-size: 11.5px; font-family: var(--mono); }
.strip .dot { fill: var(--blue-dot); stroke: var(--surface); stroke-width: 1; cursor: pointer; }
.strip .dot:hover { fill: var(--c-price); }
.strip .band { fill: var(--blue-soft); }
.strip .med { stroke: var(--ink); stroke-width: 2; }
.strip .grid { stroke: var(--line); }
.strip .yp { stroke: var(--c-risk); stroke-width: 2; stroke-dasharray: 4 3; }
.strip .yptext { fill: var(--ink); font-size: 12px; font-weight: 600; }

/* szuflada ze szczegółami: zamyka ją klik w tło, Esc albo ✕ */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 29; }
body.d-open .scrim { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; width: 520px; max-width: 100vw; height: 100vh; background: var(--bg); border-left: 1px solid var(--line2);
  box-shadow: var(--shadow); transform: translateX(105%); transition: transform .18s ease; z-index: 30; display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.drawer-head span { display: none; }
.icon { background: transparent; border: 0; color: var(--ink3); cursor: pointer; width: 36px; height: 36px; font-size: 16px; }
.icon:hover { color: var(--ink); background: var(--hover-tint); }
#d-body { padding: 28px 28px 56px; overflow-y: auto; overscroll-behavior: contain; flex: 1; }
#d-body h2 { margin: 0 0 8px; font: 500 22px/1.25 var(--sans); letter-spacing: -.02em; }
#d-body > div > .hint { font-size: 14px; }
#d-body .big { font: 400 32px/1.1 var(--mono); letter-spacing: -.05em; color: var(--accent); }
.facts { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; font-size: 14px; margin: 20px 0; }
.facts dt { color: var(--ink3); font: 500 10.5px/2 var(--mono); text-transform: uppercase; letter-spacing: .04em; } .facts dd { margin: 0; }
.desc { font-size: 13.5px; line-height: 1.6; color: var(--ink2); white-space: pre-wrap; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
#screen .btn, #d-body .btn { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; background: var(--btn); color: var(--btn-ink); text-decoration: none; font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .03em; border: 1px solid var(--btn); cursor: pointer; margin: 4px 6px 4px 0; }
#screen .btn:hover, #d-body .btn:hover { opacity: .88; }
#screen .btn.ghost, #d-body .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line2); }
#screen .btn.ghost:hover, #d-body .btn.ghost:hover { border-color: var(--ink); opacity: 1; }
.list a { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; cursor: pointer; font-size: 13.5px; }
.list a:hover { color: var(--accent); }
.list a b { font: 500 12.5px/1.6 var(--mono); color: var(--accent); white-space: nowrap; }
.list .sub { color: var(--ink3); font-size: 12.5px; display: block; margin-top: 2px; }
.sec { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink3); margin: 22px 0 6px; }

#tip { position: fixed; pointer-events: none; background: var(--bg); color: var(--ink); border: 1px solid var(--line2); border-radius: 0;
  padding: 10px 12px 11px; max-width: 320px; box-shadow: var(--shadow); display: none; z-index: 30; }
.tip-h { font: 500 10.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
.tip-v { font: 400 17px/1.2 var(--mono); letter-spacing: -.04em; color: var(--accent); margin-top: 6px; font-variant-numeric: tabular-nums; }
.tip-r { font: 12.5px/1.45 var(--sans); color: var(--ink2); margin-top: 4px; }
.tip-r:first-of-type { margin-top: 6px; }
.tip-m { color: var(--ink3); font-size: 12.5px; }
.lnk-canc, .lnk-hist, .lnk, .lnk-buyer, .lnk-comp { cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .app-bar { top: 0; position: static; }
  #nav { display: flex; overflow-x: auto; scrollbar-width: none; }
  .ng { flex: none; }
  .fc:nth-child(even) .dd-list { left: auto; right: 0; }
  .fc:nth-child(even) { border-right: 1px solid var(--line); }
  .fc:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fc:nth-child(odd) .dd-list { left: 0; right: auto; }
  .cards, .grid2, .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards > * { grid-column: span 1 !important; }
  .cards > :last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
  .grid2 > *, .grid3 > * { grid-column: 1 / -1 !important; }
  .card .v { font-size: 22px; }
  .chart-head .yp { margin-left: 0; }
  .t td.wrap { min-width: 220px; }
  main#screen { padding-top: 32px; }
}

/* mapa regionów */
.geo svg { display: block; width: 100%; height: auto; max-height: 620px; margin: 8px auto 0; }
.geo path.rg { cursor: pointer; transition: filter .12s; }
.geo path.rg.hov { filter: brightness(1.18) saturate(1.1); }
.geo-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font: 11px var(--mono); color: var(--ink3); }
.geo-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.geo-legend i { width: 14px; height: 10px; display: inline-block; }
.sec-h { margin: 40px 0 12px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }

/* okruszki: jak na blogu, mono wersalikami, nad tytułem ekranu i w nagłówku szuflady */
.app-crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 28px; padding: 0 var(--pad); font: 500 11.5px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
.app-crumbs a { color: var(--accent); }
.app-crumbs i, #d-title i { font-style: normal; color: var(--line2); }
.app-crumbs span { color: var(--ink); max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-head #d-title { display: flex; flex: 1; min-width: 0; gap: 8px; align-items: baseline; padding: 0 8px; overflow: hidden; white-space: nowrap; font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
#d-title a { color: var(--accent); flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
#d-title b { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }

/* przekrój: siatka 10×10 (każdy kwadrat to 1%) i mała mapa */
.geo-legend .click { cursor: pointer; }
.geo.mini svg { max-height: 460px; }
.guide-link { margin: 12px 0 0; font-size: 14.5px; color: var(--ink3); }
.heat { display: inline-block; min-width: 52px; padding: 3px 8px; }
.geo.eu svg { max-height: 520px; }
.d-h3 { margin: 28px 0 4px; font-size: 16px; font-weight: 500; }
.svc-rows { margin-top: 8px; }
.sr { display: grid; grid-template-columns: 1fr 70px 92px 56px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.sr-b { height: 6px; background: var(--hover-tint); } .sr-b i { display: block; height: 100%; background: var(--c-local); }
.sr-v, .sr-d { font: 500 12.5px var(--mono); text-align: right; white-space: nowrap; }
.sr-d.up { color: var(--orange); } .sr-d.down { color: var(--c-count); }