:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0b1220; color: #ecf3ff; }

/* На широком экране используем пустую правую часть метрики: детали и мини-график
   живут рядом с числом, поэтому сводка остаётся информативной, но ниже почти вдвое. */
@media (min-width: 641px) {
  .metric { display:grid; grid-template-columns:minmax(82px,.78fr) minmax(126px,1.22fr); grid-template-areas:'label insight' 'value insight' 'delta insight'; column-gap:12px; align-items:start; min-height:108px; padding:14px; }
  .metric > span:first-child { grid-area:label; }
  .metric strong { grid-area:value; margin:5px 0 2px; }
  .metric .delta { grid-area:delta; margin:0; }
  .metric-insight { grid-area:insight; align-self:center; margin:0; padding:0 0 0 10px; border-top:0; border-left:1px solid #294156; grid-template-columns:minmax(0,1fr) 66px; column-gap:7px; }
  .metric-mini { width:66px; height:30px; }
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 15% -10%, #1b4f69 0, transparent 35rem), #0b1220; }
.back-to-top{position:fixed;z-index:20;right:22px;bottom:22px;padding:9px 12px;border:1px solid #5bc9ef70;border-radius:999px;background:#102132a8;color:#dff6ff;box-shadow:0 5px 18px #02091566;backdrop-filter:blur(7px);font-size:.8rem;font-weight:700;opacity:.72;transition:opacity .15s,transform .15s}.back-to-top:hover{opacity:1;transform:translateY(-2px);border-color:#75d7f8}.back-to-top:focus-visible{outline:2px solid #75d7f8;outline-offset:3px}@media(max-width:700px){.back-to-top{right:12px;bottom:12px}.back-to-top span{display:none}.back-to-top{width:38px;height:38px;padding:0;font-size:1.25rem}}
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 44px 0 72px; }
header, .controls { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
h1 { margin: 2px 0 0; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.05em; }
.eyebrow { margin: 0; color: #75d7f8; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.sub { color: #9badc2; margin: 7px 0 0; }
.check-box { display: flex; align-items: center; gap: 10px; color: #b6c5d8; font-size: .9rem; }.mobile-location { display:none; }.dot { width: 9px; height: 9px; border-radius: 50%; background: #4ee59a; box-shadow: 0 0 0 4px #4ee59a20; }.dot.bad { background: #ff7a7a; } button { font: inherit; cursor: pointer; }
#refresh, #open-statistics { border:1px solid #31516d; background:#152a3c; color:#e9f7ff; border-radius:10px; padding:9px 12px; font-weight:650; }.action-icon { display:none; }.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 35px 0 23px; }.summary-period{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:-3px;color:#9badc2;font-size:.78rem;font-weight:700}.summary-period-buttons{display:flex;gap:5px;padding:3px;border:1px solid #29465c;border-radius:9px;background:#0b1928}.summary-period-buttons button{padding:5px 9px;border:0;border-radius:6px;background:transparent;color:#9badc2;font:inherit;font-size:.74rem}.summary-period-buttons button.active{background:#1a3e59;color:#fff}.summary-period-buttons button:hover:not(.active){color:#dcefff}.metric, .station, .history { background: #101d2dd9; border: 1px solid #20364d; border-radius: 16px; }.metric { color: inherit; text-align: left; padding: 18px; transition: border-color .15s, transform .15s; }.metric:hover, .metric.active { border-color: #5bc9ef; transform: translateY(-2px); }.metric span, .metric small { display: block; color: #9badc2; font-size: .82rem; }.metric strong { display: block; font-size: 2.25rem; margin: 6px 0; letter-spacing: -.06em; }.metric .delta { color: #75d7f8; min-height: 1.2em; }.metric-insight{display:grid;grid-template-columns:minmax(0,1fr) 78px;grid-template-areas:'share chart' 'note chart';column-gap:8px;align-items:center;margin-top:10px;padding-top:9px;border-top:1px solid #294156}.metric .metric-share{grid-area:share;color:#d9edf9;font-size:.76rem;font-weight:700;line-height:1.2}.metric .metric-note{grid-area:note;margin-top:3px;color:#839eb2;font-size:.66rem;line-height:1.25}.metric-mini{grid-area:chart;display:block;width:78px;height:34px;overflow:visible;justify-self:end}
#top-ranking { display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #78642c;border-radius:10px;background:#282414;color:#ffe7a0;font-weight:750;white-space:nowrap; }
#top-ranking span { color:#f6c84f;font-size:1.15rem;line-height:1; }
#top-ranking:hover,#top-ranking[aria-pressed="true"] { border-color:#f6c84f;background:linear-gradient(135deg,#554516,#25200f);box-shadow:0 0 0 3px #f6c84f1c; }
.controls { padding: 13px 0; border-top: 1px solid #20364d; border-bottom: 1px solid #20364d; }.tabs { display: flex; gap: 5px; background: #0a1624; border-radius: 10px; padding: 4px; }.tab { color: #a9b9ca; border: 0; background: transparent; padding: 8px 11px; border-radius: 7px; }.tab.active { background: #1a3e59; color: white; } label { font-size: .9rem; color: #c7d4e3; }.source { color: #7c91a8; font-size: .8rem; }
.compact-radius-row{display:flex;align-items:center;margin:11px 0 -4px;padding:0 2px}.compact-radius-row .radius-filter{gap:7px}.compact-radius-row .radius-filter strong{font-size:.67rem}.compact-radius-row .radius-filter .tabs{padding:2px;border-radius:8px}.compact-radius-row .radius-filter .tab{padding:5px 9px;font-size:.72rem}.station-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 15px; }.station { padding: 17px; border-left: 4px solid #718096; min-height: 254px; cursor:pointer; }.station:focus-visible { outline: 3px solid #75d7f8; outline-offset: 3px; }.station.yes { border-left-color: #3ddc97; }.station.queue { border-left-color: #ffbd59; }.station.no { border-left-color: #fa7070; }.photo { display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; height:118px; margin:-17px -17px 14px; background:linear-gradient(135deg,#1b3347,#0a1624); color:#9badc2; font-size:.77rem; }.photo img { display:none; width:100%; height:100%; object-fit:cover; }.photo.ready img { display:block; }.photo.ready .photo-source { position:absolute; left:8px; bottom:7px; padding:3px 6px; background:#07111ddd; color:#d8eaf5; border-radius:4px; }.photo.missing { border-bottom:1px solid #23394e; }.station-top, footer { display: flex; justify-content: space-between; gap: 8px; color: #9badc2; font-size: .78rem; }.station h2 { font-size: 1.15rem; margin: 15px 0 4px; }.station p { margin: 5px 0; }.address { color: #aab9ca; font-size: .86rem; min-height: 2.5em; }.fuels { color: #ebf8ff; font-weight: 650; }.detail { color: #a7b8c8; font-size: .86rem; min-height: 2.4em; }.station footer { border-top: 1px solid #23394e; margin-top: 14px; padding-top: 10px; align-items: start; }.confidence { white-space: nowrap; }.route { width:100%; margin-top:12px; padding:8px; border:1px solid #31516d; border-radius:8px; background:#152a3c; color:#d9f3ff; font-size:.82rem; font-weight:650; }.history { margin-top:30px; padding:20px; }.history h2 { margin:0 0 13px; font-size:1.05rem; }.change-list { color:#aebfd0; font-size:.9rem; }.change-list p { margin:8px 0; }.message { margin-top:16px; padding:12px 15px; border:1px solid #7c3e48; background:#3b1d28; border-radius:10px; }.hidden { display:none; }
@media (max-width: 800px) { .shell { width: min(100% - 24px, 1180px); padding-top: 24px; } header, .controls { align-items: flex-start; flex-direction: column; } .summary, .station-grid { grid-template-columns: 1fr 1fr; }.source { display: none; } }.@media (max-width: 500px) { .summary, .station-grid { grid-template-columns: 1fr; }.check-box { flex-wrap: wrap; } }
.tabs { flex-wrap:wrap; }
.station { min-height:254px; --tone-rgb: 250,112,112; --strength:.95; border-left-color:rgba(var(--tone-rgb),calc(.24 + var(--strength) * .76)); background:linear-gradient(135deg,rgba(var(--tone-rgb),calc(.04 + var(--strength) * .14)),#101d2dd9 52%); box-shadow:inset 0 1px 0 rgba(var(--tone-rgb),calc(.04 + var(--strength) * .12)); }.station.tone-95 { --tone-rgb:61,220,151; }.station.tone-92 { --tone-rgb:255,189,89; }.station.tone-diesel { --tone-rgb:157,171,190; }.station.tone-none { --tone-rgb:250,112,112; }.photo { height:178px; }.photo.missing { display:none; }
.station.fuel-just-appeared { --tone-rgb:61,220,151; }
.station.fuel-just-disappeared { --tone-rgb:250,112,112; }
.station.gasoline-missing { --tone-rgb:250,112,112; }
.fuel-event-row{display:inline-flex;align-items:center;gap:6px;min-width:0}.fuel-warning-dot{display:block;flex:0 0 9px;width:9px;height:9px;margin:0;border:1px solid #fff8;border-radius:50%;cursor:pointer;box-shadow:0 0 0 3px transparent;transition:transform .15s,box-shadow .15s}.fuel-warning-dot:hover,.fuel-warning-dot:focus-visible{transform:scale(1.2);outline:0}.fuel-warning-dot.yellow{background:#ffd34f;box-shadow:0 0 0 3px #ffd34f20}.fuel-warning-dot.red{background:#ff505d;box-shadow:0 0 0 3px #ff505d2b}.fuel-warning-dot.yellow:focus-visible{box-shadow:0 0 0 3px #ffd34f55}.fuel-warning-dot.red:focus-visible{box-shadow:0 0 0 3px #ff505d66}
.photo.missing { display:flex; }.photo-info { position:absolute; right:0; bottom:0; left:0; z-index:3; display:grid; gap:3px; padding:26px 12px 10px; color:#eff8ff; background:linear-gradient(transparent,rgba(4,13,22,.93) 48%); text-shadow:0 1px 2px rgba(0,0,0,.8); }
.photo-info h2 { margin:0; color:#fff; font-size:1.08rem; line-height:1.2; }.photo-meta { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }.photo-info .address { display:block; min-height:0; color:#d6e3ed; font-size:.77rem; line-height:1.28; }.photo-info .photo-distance { color:#d0dfeb; font-size:.7rem; white-space:nowrap; }
.route-map { position:relative; display:block; height:154px; margin-top:auto; overflow:hidden; border:1px solid #31516d; border-radius:9px; background:#152a3c; color:#d9f3ff; text-decoration:none; }
.route-map:hover { border-color:#5bc9ef; }.route-map:focus-visible { outline:2px solid #75d7f8; outline-offset:2px; }
.route-map img { display:block; width:100%; height:100%; object-fit:cover; }.route-map-fallback { position:absolute; inset:0; display:grid; place-items:center; color:#9db6c9; font-size:.78rem; background:linear-gradient(135deg,#17364b,#0c1927); }
.route-map img[src] + .route-map-fallback { display:none; }.route-map-caption { position:absolute; right:7px; bottom:7px; left:7px; display:grid; gap:2px; padding:7px 8px; border-radius:7px; background:rgba(5,15,25,.62); box-shadow:0 2px 9px rgba(0,0,0,.26); }
.route-map-caption strong { color:#eff8ff; font-size:.88rem; line-height:1.2; }.route-map-caption small { color:#b9cedd; font-size:.69rem; }
#recent-comments-dialog { width:min(660px,calc(100vw - 28px)); max-height:84vh; overflow:auto; padding:22px; color:#e9f7ff; background:linear-gradient(145deg,#132b3d,#0d1929 55%); border:1px solid #3c6c89; border-radius:22px; box-shadow:0 24px 70px #000b; }
#recent-comments-dialog::backdrop { background:#020915d9; backdrop-filter:blur(3px); }
#recent-comments-close { float:right; padding:10px 14px; border:1px solid #467695; border-radius:10px; background:#1b3a51; color:#e5f6ff; font:inherit; cursor:pointer; }
#recent-comments-dialog h2 { max-width:78%; margin:7px 0 12px; font-size:clamp(1.45rem,4vw,2rem); letter-spacing:-.035em; }
#recent-comments-context { margin:0; padding:12px 14px; border:1px solid #315d79; border-radius:12px; background:#0e2435; line-height:1.5; }
.recent-comments-list { display:grid; gap:11px; margin-top:16px; }
.recent-comment { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; padding:14px; border:1px solid #294b61; border-radius:15px; background:#0a1827; }
.recent-comment.recent-fuel { border-color:#286851; background:linear-gradient(105deg,#0c2b24,#0b1928 52%); }.recent-comment.current-no-fuel { border-color:#98565f; background:linear-gradient(105deg,#371d28,#141927 58%); }
.recent-comment-icon { display:grid; place-items:center; width:39px; height:39px; border-radius:12px; background:#123e30; color:#73f0b2; font-size:1.2rem; filter:saturate(.85); }.current-no-fuel .recent-comment-icon { background:#4a252f; color:#ff9fa7; }
.recent-comment-body { min-width:0; }.recent-comment-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }.recent-comment-heading strong { color:#dff6e9; font-size:1rem; }.current-no-fuel .recent-comment-heading strong { color:#ffd1d5; }.recent-comment-heading time { flex:0 0 auto; color:#80cef0; font-size:.78rem; white-space:nowrap; }
.recent-comment-grades,.recent-comment-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }.recent-comment-grades span { min-width:34px; padding:4px 7px; border-radius:7px; background:#e8eef3; color:#182431; font-size:.78rem; font-weight:800; text-align:center; }.recent-comment-badges span { padding:4px 7px; border:1px solid #3d6478; border-radius:7px; background:#10283a; color:#b8deef; font-size:.75rem; line-height:1.2; }.recent-comment-text { margin:9px 0 0; color:#d8e7f1; font-size:.9rem; line-height:1.4; }
@media(max-width:600px){#recent-comments-dialog{width:calc(100vw - 18px);max-height:88vh;padding:17px;border-radius:19px}#recent-comments-dialog h2{max-width:74%;font-size:1.55rem}.recent-comment{grid-template-columns:37px minmax(0,1fr);gap:9px;padding:12px}.recent-comment-icon{width:35px;height:35px;border-radius:10px;font-size:1rem}.recent-comment-heading{align-items:flex-start;flex-direction:column;gap:3px}.recent-comment-heading time{font-size:.75rem}.recent-comment-grades span{padding:4px 7px}.recent-comment-badges{gap:5px}.recent-comment-badges span{font-size:.7rem}}
.station-grid { align-items:stretch; }
.station { display:flex; flex-direction:column; height:100%; box-sizing:border-box; }
.station .photo { height:230px; border-radius:12px 12px 0 0; }
.station .photo { color:inherit; text-decoration:none; cursor:pointer; }
.station .photo img { object-fit:contain; }
.station .photo.missing { display:flex; height:230px; }
.queue-meter { margin:10px 0 2px; padding:8px 9px; border:1px solid #28465c; border-radius:8px; background:#0b1928; cursor:pointer; transition:opacity .18s,border-color .18s; }
.queue-meter:hover,.queue-meter:focus-visible{border-color:#5bc9ef;outline:0}.queue-meter:focus-visible{box-shadow:0 0 0 2px #5bc9ef44}
.queue-meter[hidden] { display:none; }
.queue-meter-head { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.72rem; }
.queue-meter-label { color:#9fb4c8; }
.queue-meter-value { color:#dceaf6; font-size:.76rem; }
.queue-meter-track { height:8px; margin-top:7px; overflow:hidden; border-radius:999px; background:#263a4d; }
.queue-meter-fill { display:block; min-width:0; height:100%; border-radius:inherit; background:#4ee59a; transition:width .25s ease; }
.queue-medium .queue-meter-fill { background:#ffd25f; }.queue-heavy .queue-meter-fill { background:#f07a43; }.queue-critical .queue-meter-fill { background:#fa7070; }
.queue-clear .queue-meter-fill{background:#4ee59a}.queue-unknown .queue-meter-track { background:repeating-linear-gradient(135deg,#31485c 0 6px,#24394b 6px 12px); }.queue-unknown .queue-meter-fill { background:#9aaabd; }.queue-aging{opacity:.72}.queue-stale{opacity:.46}.queue-no-data{opacity:.6}
.photo-prices { position:absolute; z-index:2; top:10px; right:10px; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.photo-prices[hidden] { display:none; }
.photo-price { display:block; padding:6px 9px; border:1px solid rgba(255,255,255,.25); border-radius:8px; background:rgba(5,15,25,.88); color:#fff; font-size:.78rem; line-height:1; font-weight:800; letter-spacing:.01em; box-shadow:0 3px 12px rgba(0,0,0,.35); backdrop-filter:blur(5px); }
.photo-price.price-95 { border-color:#3ddc97; background:rgba(11,65,47,.92); color:#eafff6; }
.photo-price.price-92 { border-color:#ffbd59; background:rgba(91,57,9,.92); color:#fff3d7; }
.rank-crown { position:absolute;z-index:3;top:9px;left:9px;display:flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid currentColor;border-radius:9px;background:rgba(5,15,25,.91);box-shadow:0 4px 14px rgba(0,0,0,.42);backdrop-filter:blur(5px); }
.rank-crown[hidden] { display:none; }
.rank-crown svg { width:24px;height:18px;fill:currentColor;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.rank-crown strong { font-size:.72rem;color:inherit;white-space:nowrap; }
.rank-crown.rank-gold { color:#ffd34f;background:rgba(70,51,5,.92); }
.rank-crown.rank-silver { color:#d9e2ed;background:rgba(45,55,68,.94); }
.rank-crown.rank-bronze { color:#d99258;background:rgba(67,38,21,.94); }
.station.rank-gold { box-shadow:0 0 0 2px #ffd34f80,0 12px 30px #0005; }
.station.rank-silver { box-shadow:0 0 0 2px #cdd8e680,0 10px 25px #0004; }
.station.rank-bronze { box-shadow:0 0 0 2px #c9824f80,0 10px 25px #0004; }
.road-summary { margin-top:14px; padding:11px 12px; border-radius:9px; background:#0a1624; }
.road-distance { display:block; font-size:1rem; color:#e9f7ff; }
.road-note { display:block; margin-top:5px; font-size:.78rem; color:#9badc2; }
.sorting { margin-top:20px; padding:16px; border:1px solid #23394e; border-radius:12px; background:#101d2d; }
.sorting [hidden] { display:none !important; }
.selection-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.radius-filter,.arrival-filter{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:#aab9ca;font-size:.85rem}.radius-filter strong{color:#75d7f8;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}.radius-filter .tabs{padding:3px;background:#0a1624;border:1px solid #23394e}.radius-filter .tab{padding:7px 10px;font-size:.82rem}.selection-divider{width:1px;height:28px;background:#29465c}
.ranking-summary{margin:10px 0 0;padding-left:2px;color:#829bb0;font-size:.73rem;line-height:1.35}
.sort-fields { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.arrival-filter strong{color:#e9f7ff;font-size:.95rem;margin-right:3px}.arrival-filter button{background:#152a3c;border:1px solid #31516d;color:#d9f3ff;border-radius:8px;padding:8px 10px;font:inherit;cursor:pointer}.arrival-filter button.active{background:#16443b;border-color:#3ddc97;color:#ecfff7}.arrival-filter select{margin-left:4px;background:#0a1624;border:1px solid #31516d;color:#e9f7ff;border-radius:7px;padding:7px;font:inherit}.arrival-hint{margin:10px 0 0;color:#8fa7bb;font-size:.78rem;line-height:1.45}.manual-sorting{margin-top:14px}.fuel-event{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0}.event-chip{font-size:.74rem;line-height:1.2;padding:5px 7px;border-radius:6px;border:1px solid #3a596e;background:#0b1928;color:#c9dbe8}.event-chip.appeared{border-color:#2e956b;background:#103225;color:#aaf1cd}.event-chip.disappeared{border-color:#9e5860;background:#301b25;color:#ffc5c5}
.sort-fields { margin-top:0; }
.sort-fields label { flex:1; min-width:200px; }
.sort-fields select { display:block; width:100%; margin-top:6px; padding:10px; font:inherit; color:#ecf3ff; background:#0a1624; border:1px solid #31516d; border-radius:8px; }
.dynamics { margin-top:24px; background:linear-gradient(130deg,#13283a,#0e1a29 55%);border:1px solid #28465d;border-radius:18px; }
#statistics-dialog { width:min(1180px,calc(100vw - 32px));max-height:90vh;box-sizing:border-box;overflow:auto;padding:20px;background:#0e1a29;color:#e9f7ff;border:1px solid #31516d;border-radius:18px; }
#statistics-dialog::backdrop { background:#020915bb; }
#statistics-dialog .dynamics { margin-top:12px;border:0;padding:0;background:none; }
#open-statistics,#close-statistics { padding:10px 14px;border:1px solid #38617d;border-radius:8px;background:#1b3a51;color:#e5f6ff;font:inherit;cursor:pointer; }
#close-statistics { display:block;margin-left:auto; }
.history-headline{font-size:1.35rem;font-weight:700;color:#e9f7ff;line-height:1.5}.history-controls select{min-height:42px}#history-custom input{background:#13283a;color:#e9f7ff;border:1px solid #38617d;padding:10px;border-radius:8px;margin:8px}
button.history-kpi{text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%}button.history-kpi:hover{border-color:#75d7f8;background:#173248}button.history-kpi:focus-visible{outline:2px solid #75d7f8;outline-offset:3px}
#metric-history-dialog{width:min(1050px,calc(100vw - 28px));max-height:85vh;box-sizing:border-box;overflow:auto;padding:24px;background:#102132;color:#e9f7ff;border:1px solid #38617d;border-radius:18px}#metric-history-dialog::backdrop{background:#020915cc}#metric-history-close{display:block;margin-left:auto;padding:10px 14px;border-radius:8px;border:1px solid #38617d;background:#1b3a51;color:#e5f6ff;font:inherit;cursor:pointer}
.history-controls button,#station-history-close{padding:10px 14px;background:#1b3a51;color:#e5f6ff;border:1px solid #38617d;border-radius:8px;cursor:pointer;font:inherit}.dynamics,.history-table,.history-chart{min-width:0;max-width:100%;box-sizing:border-box}
@media(max-width:500px){.summary,.station-grid{grid-template-columns:1fr}.check-box{flex-wrap:wrap}.list-heading{flex-wrap:wrap}}
.dynamics h2 { font-size:1.7rem; }.dynamics h3 { margin-top:28px;font-size:1rem; }
.history-muted { color:#9badc2;font-size:.82rem;line-height:1.65; }
.history-controls { display:flex;flex-wrap:wrap;gap:12px;margin:22px 0;align-items:end; }
.history-controls label { flex:1;min-width:170px;font-size:.8rem;color:#b8c9d9; }
.history-controls select { display:block;width:100%;margin-top:7px;padding:10px;border:1px solid #31516d;background:#0a1624;border-radius:8px;color:#e9f7ff;font:inherit; }
.history-kpis { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.history-kpi { padding:17px;border:1px solid #294357;border-radius:12px;background:#102132; }
.history-kpi strong { display:block;font-size:1.8rem;margin:9px 0;color:#e9f7ff; }.history-kpi small { color:#a8bfce;line-height:1.5; }
.history-chart { margin:22px 0 0;min-height:100px; }.history-chart svg { display:block;width:100%;height:auto; }.history-chart circle { cursor:pointer; }.history-chart circle:focus { outline:none;stroke:white;stroke-width:3; }.history-scrubber{display:block;width:calc(100% - 110px);margin:5px 0 0 55px;accent-color:#75d7f8;cursor:ew-resize}.history-scrubber:focus-visible{outline:2px solid #75d7f8;outline-offset:3px;border-radius:999px}
.history-bar { height:20px;display:flex;overflow:hidden;border-radius:10px;background:#23394e; }
#station-history-dialog { width:min(1000px,90vw);max-height:85vh;overflow:auto;background:#102132;color:#e9f7ff;border:1px solid #31516d;border-radius:18px;padding:24px; }#station-history-dialog::backdrop{background:#020915bb}#station-history-close{float:right}.station h2[role=button]:hover{text-decoration:underline;color:#75d7f8}.station h2[role=button]:focus-visible{outline:2px solid #75d7f8}.station-events-table th:nth-child(2),.station-events-table th:nth-child(3),.station-events-table th:nth-child(4),.station-events-table td:nth-child(2),.station-events-table td:nth-child(3),.station-events-table td:nth-child(4){text-align:center;min-width:92px}.station-event-empty{color:#60758a}.history-event{display:inline-block;padding:4px 7px;border-radius:6px;font-size:.75rem;font-weight:700;white-space:nowrap}.history-event.positive{background:#103225;border:1px solid #2e956b;color:#aaf1cd}.history-event.negative{background:#301b25;border:1px solid #9e5860;color:#ffc5c5}.history-event.unknown{background:#202d3b;border:1px solid #52677c;color:#c0ccd8}.history-row-positive td:first-child{border-left:3px solid #3ddc97}.history-row-negative td:first-child{border-left:3px solid #fa7070}
#station-history-dialog { width:min(1240px,calc(100vw - 28px));max-height:85vh;overflow:auto;background:#102132;color:#e9f7ff;border:1px solid #31516d;border-radius:18px;padding:24px; }#station-history-dialog::backdrop{background:#020915bb}.station-history-actions{display:flex;justify-content:flex-end;gap:8px;float:right;margin-left:16px}.station-history-actions button{padding:9px 12px;border:1px solid #38617d;border-radius:8px;background:#1b3a51;color:#e5f6ff;font:inherit;font-weight:700}.station-history-actions button:hover{border-color:#75d7f8}.station-history-actions button:disabled{opacity:.45;cursor:default}.station-history-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 10px;padding:9px 10px;border:1px solid #29465c;border-radius:9px;background:#0b1928}.station-history-pager strong{color:#dcefff;font-size:.86rem}.station-history-pager button{padding:7px 10px;border:1px solid #38617d;border-radius:7px;background:#1b3a51;color:#e5f6ff;font:inherit;cursor:pointer}.station-history-pager button:disabled{opacity:.42;cursor:default}.station h2[role=button]:hover{text-decoration:underline;color:#75d7f8}.station h2[role=button]:focus-visible{outline:2px solid #75d7f8}.station-events-table{table-layout:fixed;white-space:normal!important}.station-events-table th,.station-events-table td{padding:10px 7px;vertical-align:middle;overflow-wrap:anywhere}.station-events-table th:nth-child(1){width:12%}.station-events-table th:nth-child(2),.station-events-table th:nth-child(3),.station-events-table th:nth-child(4){width:13%;text-align:center}.station-events-table th:nth-child(5){width:15%}.station-events-table th:nth-child(6){width:34%}.station-events-table th:nth-child(2),.station-events-table th:nth-child(3),.station-events-table th:nth-child(4),.station-events-table td:nth-child(2),.station-events-table td:nth-child(3),.station-events-table td:nth-child(4){text-align:center}.station-event-empty{color:#60758a}.history-event{display:inline-block;max-width:100%;box-sizing:border-box;padding:4px 6px;border-radius:6px;font-size:.69rem;font-weight:700;line-height:1.25;white-space:normal}.history-event.positive{background:#103225;border:1px solid #2e956b;color:#aaf1cd}.history-event.negative{background:#301b25;border:1px solid #9e5860;color:#ffc5c5}.history-event.unknown{background:#202d3b;border:1px solid #52677c;color:#c0ccd8}.history-row-positive td:first-child{border-left:3px solid #3ddc97}.history-row-negative td:first-child{border-left:3px solid #fa7070}
.history-table { overflow:auto;max-height:480px; }.history-table table { width:100%;border-collapse:collapse;font-size:.8rem;white-space:nowrap; }.history-table td,.history-table th { padding:13px 11px;text-align:right;border-bottom:1px solid #23394e; }.history-table th { color:#9fb5c7;background:#0d1d2c;position:sticky;top:0; }.history-table td:first-child,.history-table th:first-child { text-align:left; }
#station-history-dialog{width:min(860px,calc(100vw - 28px))}.station-events-table th:nth-child(1){width:20%}.station-events-table th:nth-child(2){width:28%}.station-events-table th:nth-child(3){width:20%}.station-events-table th:nth-child(4){width:32%}.station-events-table td:nth-child(2){text-align:center}
.metric{cursor:pointer}.summary-stations-table{overflow:auto;max-height:58vh;border:1px solid #29465c;border-radius:10px}.summary-stations-table table{width:100%;border-collapse:collapse;min-width:900px}.summary-stations-table th,.summary-stations-table td{padding:12px 10px;border-bottom:1px solid #23394e;vertical-align:top;text-align:left}.summary-stations-table th{position:sticky;top:0;background:#0d1d2c;color:#9fb5c7;font-size:.74rem;letter-spacing:.03em;text-transform:uppercase}.summary-stations-table td>strong,.summary-stations-table td>small{display:block}.summary-stations-table small{margin-top:4px;color:#9badc2;font-size:.73rem;line-height:1.35}.summary-grade-now{font-size:.8rem}.summary-grade-now.yes{color:#aaf1cd}.summary-grade-now.no{color:#f3b5ba}.summary-observations{white-space:pre-line;color:#b8c9d9;font-size:.78rem}#summary-stations-dialog{width:min(1280px,calc(100vw - 28px));max-height:85vh;box-sizing:border-box;overflow:auto;padding:24px;background:#102132;color:#e9f7ff;border:1px solid #38617d;border-radius:18px}#summary-stations-dialog::backdrop{background:#020915cc}#summary-stations-close{display:block;margin-left:auto;padding:10px 14px;border-radius:8px;border:1px solid #38617d;background:#1b3a51;color:#e5f6ff;font:inherit;cursor:pointer}
.summary-station-row{cursor:pointer;transition:background .15s}.summary-station-row:hover{background:#173248}.summary-station-row:focus-visible{outline:2px solid #75d7f8;outline-offset:-2px}.summary-station-name{display:block;padding:0;border:0;background:none;color:#e9f7ff;font:inherit;font-weight:750;text-align:left}.summary-station-name:hover{text-decoration:underline;color:#75d7f8}.summary-station-name:focus-visible{outline:2px solid #75d7f8;outline-offset:3px;border-radius:2px}.station-jump-target{animation:station-jump-flash 1.3s ease-out}@keyframes station-jump-flash{0%,55%{box-shadow:0 0 0 3px #75d7f8,0 0 28px #75d7f877}100%{box-shadow:none}}.station-chart-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}.station-chart-kpi{padding:13px;border:1px solid #29465c;border-radius:10px;background:#0b1928}.station-chart-kpi span,.station-chart-kpi strong,.station-chart-kpi small{display:block}.station-chart-kpi span{font-size:.75rem;color:#9badc2}.station-chart-kpi strong{font-size:1rem;margin:5px 0}.station-chart-kpi strong.yes{color:#aaf1cd}.station-chart-kpi strong.no{color:#f3b5ba}.station-chart-kpi strong.unknown{color:#b8c9d9}.station-chart-kpi small{font-size:.72rem;color:#9badc2}.station-chart-legend{display:flex;gap:14px;flex-wrap:wrap;color:#b7c8d8;font-size:.76rem;margin:8px 0}.station-chart-legend span::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}.station-chart-legend .is-available::before{background:#3ddc97}.station-chart-legend .is-missing::before{background:#fa7070}.station-chart-legend .is-unknown::before{background:#60758a}.station-chart-plot{border:1px solid #29465c;border-radius:12px;background:#0b1928;overflow:auto}.station-chart-plot svg{display:block;width:100%;min-width:680px;height:auto}.station-chart-axis{fill:#91a6b8;font-size:12px}.station-chart-label{fill:#dcefff;font-size:14px;font-weight:700}.station-chart-track{fill:#192d3e}.station-chart-segment.available,.station-chart-point.available{fill:#2fae79}.station-chart-segment.missing,.station-chart-point.missing{fill:#b85461}.station-chart-segment.unknown,.station-chart-point.unknown{fill:#50677a}.station-chart-point{stroke:#e9f7ff;stroke-width:1.5}.station-chart-events{margin-top:18px}.station-chart-events h3{font-size:.95rem;margin:0 0 9px}.station-chart-event{display:inline-block;margin:0 7px 7px 0;padding:6px 8px;border-radius:7px;font-size:.76rem;font-weight:700}.station-chart-event.appeared{background:#103225;border:1px solid #2e956b;color:#aaf1cd}.station-chart-event.disappeared{background:#301b25;border:1px solid #9e5860;color:#ffc5c5}#station-chart-dialog{width:min(1040px,calc(100vw - 28px));max-height:85vh;box-sizing:border-box;overflow:auto;padding:24px;background:#102132;color:#e9f7ff;border:1px solid #38617d;border-radius:18px}#station-chart-dialog::backdrop{background:#020915cc}#station-chart-close{display:block;margin-left:auto;padding:10px 14px;border-radius:8px;border:1px solid #38617d;background:#1b3a51;color:#e5f6ff;font:inherit;cursor:pointer}@media(max-width:600px){.station-chart-kpis{grid-template-columns:1fr}}
 .station-chart-period{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.station-chart-period button{padding:7px 11px;border:1px solid #38617d;border-radius:8px;background:#102132;color:#cfe1ee;font:inherit;font-size:.82rem;cursor:pointer}.station-chart-period button.active{background:#1a3e59;border-color:#75d7f8;color:#fff}.station-chart-gridline{stroke:#29465c;stroke-width:1;stroke-dasharray:3 4}.station-chart-events-list{display:grid;gap:7px}.station-chart-event{display:block;margin:0;padding:8px 10px}.station-chart-event strong,.station-chart-event small{display:block}.station-chart-event small{margin-top:3px;font-weight:400;opacity:.88}

/* Карточки не получают дополнительную рамку ни от места в топе, ни от выбора. */
.station:focus-visible { outline:none; }
.station.rank-gold,.station.rank-silver,.station.rank-bronze { box-shadow:none; }
.station-jump-target { animation:none; }
@media(max-width:600px){.history-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.history-kpi strong{font-size:1.4rem}.dynamics{padding:14px}.history-chart{overflow:auto}.history-chart svg{min-width:600px}}
#station-chart-events-list{display:grid;gap:7px}
.metric-insight{cursor:pointer}.metric-insight:hover .metric-share,.metric-insight:hover .metric-note{color:#75d7f8}.metric-insight:hover .metric-mini{filter:drop-shadow(0 0 4px #75d7f877)}
.metric .delta{cursor:default}.metric .delta-part{cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;font-weight:700}.metric .delta-part:hover{text-decoration-color:currentColor}.metric .delta-part.disappeared{color:#ffc5c5}
.station-chart-events-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.station-chart-grade-filter{display:flex;gap:6px;flex-wrap:wrap}.station-chart-grade-filter button{padding:6px 9px;border:1px solid #38617d;border-radius:7px;background:#102132;color:#cfe1ee;font:inherit;font-size:.76rem;cursor:pointer}.station-chart-grade-filter button.active{background:#1a3e59;border-color:#75d7f8;color:#fff}
.station-chart-events-head{margin-bottom:12px;padding:10px 12px;border:1px solid #29465c;border-radius:10px;background:#0b1928}.station-chart-events-head h3{margin:0}.station-chart-grade-filter{padding:3px;border-radius:8px;background:#102132}#station-chart-events-list{margin-top:0}
.statistics-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 10px}.statistics-radius,.statistics-period,.statistics-unit,.statistics-grades,.statistics-steps{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.statistics-radius{padding:3px;border:1px solid #29465c;border-radius:10px;background:#0b1928}.statistics-radius span{padding:0 5px;color:#75d7f8;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.statistics-toolbar button,.statistics-grades button,.statistics-steps button{padding:8px 11px;border:1px solid #38617d;border-radius:8px;background:#102132;color:#cfe1ee;font:inherit;font-size:.82rem;cursor:pointer}.statistics-toolbar button.active,.statistics-grades button.active,.statistics-steps button.active{border-color:#75d7f8;background:#1a3e59;color:#fff}.statistics-radius button.active,.statistics-period button.active{background:#16443b;border-color:#3ddc97}.statistics-unit{margin-left:auto}.statistics-grades,.statistics-steps{margin:0 0 10px;padding:10px 12px;border:1px solid #29465c;border-radius:10px;background:#0b1928;color:#9badc2;font-size:.82rem}.statistics-grades button[data-history-grade="fuel95"].active{border-color:#3ddc97}.statistics-grades button[data-history-grade="fuel92"].active{border-color:#ffbd59}.statistics-grades button[data-history-grade="diesel"].active{border-color:#b8c9d9}.statistics-steps small{margin-left:5px;color:#829bb0;font-size:.75rem}.statistics-chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px}.statistics-chart-head h3{margin:0;font-size:1rem}.statistics-chart-head p{margin:0;color:#9badc2;font-size:.78rem;line-height:1.45}.legacy-history-controls{display:none!important}.station-insights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}.station-insights h3{margin:0 0 9px;font-size:.95rem}.insight-list{display:grid;gap:7px}.insight-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px;border:1px solid #29465c;border-radius:9px;background:#0b1928;color:#e9f7ff;text-align:left;font:inherit;cursor:pointer}.insight-row:hover{border-color:#75d7f8;background:#173248}.insight-row strong{font-size:.86rem}.insight-row small{color:#9badc2;font-size:.74rem;text-align:right}.history-quality{margin-top:18px;padding:11px 13px;border:1px solid #29465c;border-radius:10px;background:#0b1928;color:#9badc2;font-size:.8rem;line-height:1.55}.history-quality summary{cursor:pointer;color:#cfe1ee;font-weight:700}.history-quality p{margin:9px 0 0}.history-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:800px){.statistics-unit{margin-left:0}.history-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.station-insights{grid-template-columns:1fr}}@media(max-width:520px){.statistics-toolbar{align-items:flex-start}.statistics-toolbar #history-export{width:100%}.statistics-radius,.statistics-period,.statistics-unit{width:100%}.history-kpis{grid-template-columns:1fr}.insight-row{align-items:flex-start;flex-direction:column}.insight-row small{text-align:left}}

/* Сводка на компьютере: задействуем свободную правую часть карточки. */
@media (min-width:641px) {
  .metric { display:grid; grid-template-columns:minmax(82px,.78fr) minmax(126px,1.22fr); grid-template-areas:'label insight' 'value insight' 'delta insight'; column-gap:12px; align-items:start; min-height:108px; padding:14px; }
  .metric > span:first-child { grid-area:label; }
  .metric strong { grid-area:value; margin:5px 0 2px; }
  .metric .delta { grid-area:delta; margin:0; }
  .metric-insight { grid-area:insight; align-self:center; margin:0; padding:0 0 0 10px; border-top:0; border-left:1px solid #294156; grid-template-columns:minmax(0,1fr) 66px; column-gap:7px; }
  .metric-mini { width:66px; height:30px; }
}