/* „Карта на загубите“ — видеостена. Всичко е в rem, а rem следва ширината на екрана,
   така че една и съща страница стои еднакво на лаптоп, на 4K и на видеостена. */
:root {
  --bg: #030a14;
  --ink: #e6f1ff;
  --muted: #8aa4c2;
  --dim: #4c6583;
  --glass: rgba(6, 18, 34, 0.74);
  --line: rgba(94, 234, 212, 0.16);
  --teal: #2dd4bf;
  --cyan: #38bdf8;
  --violet: #a78bfa;
  --ok: #22c55e;
  --warn: #f59e0b;
  --crit: #ef4444;
  --hot: #ff2d78;
  --grey: #94a3b8;
}

/* 16:9 → по ширината; по-тесни/по-ниски екрани → по височината */
html { font-size: clamp(7px, min(0.78vw, 1.39vh), 44px); }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); overflow: hidden; }
body.wall { font-family: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.muted { color: var(--muted); }

.wall-map { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 45%, #07182c 0%, #030a14 70%); }
.wall-map.leaflet-container { background: radial-gradient(ellipse at 50% 45%, #07182c 0%, #030a14 70%); font-family: inherit; }
.leaflet-control-attribution { background: transparent !important; color: var(--dim) !important; font-size: 0.75rem; }
.leaflet-control-attribution a { color: var(--dim) !important; }
.wall-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 450; }
/* тъмни преливания горе и долу — заглавието и легендата се четат над светещите зони */
body.wall::before, body.wall::after { content: ''; position: fixed; left: 0; right: 0; pointer-events: none; z-index: 900; }
body.wall::before { top: 0; height: 13rem; background: linear-gradient(rgba(3, 10, 20, 0.92), rgba(3, 10, 20, 0)); }
body.wall::after { bottom: 0; height: 8rem; background: linear-gradient(rgba(3, 10, 20, 0), rgba(3, 10, 20, 0.9)); }

/* горе вляво */
.wall-title { position: fixed; top: 1.6rem; left: 2rem; z-index: 1000; pointer-events: none; }
.wall-kicker { font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
.wall-title h1 { margin: 0.2rem 0 0.4rem; font-size: 3.1rem; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #e6f1ff 0%, #9be7ff 60%, #5eead4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wall-crumbs { pointer-events: auto; font-size: 1.15rem; color: var(--muted); display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.wall-crumbs a { color: var(--ink); text-decoration: none; cursor: pointer; border-bottom: 1px dashed var(--dim); }
.wall-crumbs .sep { color: var(--dim); }

/* горе в средата */
.wall-timeline { position: fixed; top: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 1000; text-align: center; width: 30rem; }
.tl-label { font-size: 0.9rem; letter-spacing: 0.3em; color: var(--teal); }
.tl-label.is-scenario { color: var(--violet); }
.tl-date { font-size: 3.6rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 0 2rem rgba(56, 189, 248, 0.35); }
.tl-bar { position: relative; height: 0.35rem; margin: 0.9rem 0.8rem 1.6rem; background: rgba(148, 163, 184, 0.18); border-radius: 1rem; }
.tl-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 1rem; background: linear-gradient(90deg, var(--teal), var(--violet)); box-shadow: 0 0 1rem rgba(45, 212, 191, 0.6); }
.tl-tick { position: absolute; top: 0.7rem; transform: translateX(-50%); font-size: 0.8rem; color: var(--dim); }
.tl-buttons { display: inline-flex; gap: 0.3rem; background: var(--glass); border: 1px solid var(--line); border-radius: 2rem; padding: 0.25rem; backdrop-filter: blur(8px); }
.tl-buttons button { border: 0; background: transparent; padding: 0.35rem 1rem; border-radius: 2rem; cursor: pointer; color: var(--muted); font-size: 0.95rem; }
.tl-buttons button.is-on { background: rgba(45, 212, 191, 0.18); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.5); }

/* горе вдясно */
.wall-clock { position: fixed; top: 1.6rem; right: 2rem; z-index: 1000; text-align: right; }
.clock { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.live-badge { font-size: 0.95rem; letter-spacing: 0.18em; color: var(--ok); display: flex; align-items: center; gap: 0.45rem; justify-content: flex-end; }
.live-badge .muted { letter-spacing: 0.02em; }
.live-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); animation: pulse 1.6s infinite; display: inline-block; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } 70% { box-shadow: 0 0 0 0.8rem rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.proto-badge { display: inline-block; margin-top: 0.5rem; font-size: 0.75rem; letter-spacing: 0.2em; padding: 0.2rem 0.6rem; border: 1px solid rgba(245, 158, 11, 0.55); color: var(--warn); border-radius: 0.3rem; }

/* вляво: показатели */
.wall-kpis { position: fixed; left: 2rem; top: 13.5rem; bottom: 4.6rem; width: 21rem; overflow: hidden; z-index: 1000; display: flex; flex-direction: column; gap: 0.8rem; }
.kpi { background: var(--glass); border: 1px solid var(--line); border-radius: 0.9rem; padding: 0.8rem 1rem 0.9rem; backdrop-filter: blur(10px); position: relative; overflow: hidden; }
.kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 0.25rem; background: linear-gradient(var(--teal), var(--cyan)); opacity: 0.8; }
.kpi-label { font-size: 0.9rem; color: var(--muted); }
.kpi-value { font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-value .unit { font-size: 1.2rem; font-weight: 600; color: var(--muted); margin-left: 0.3rem; }
.kpi-value .sep { margin: 0 0.5rem; }
.kpi-value .num2 { color: var(--ok); }
.kpi-sub { font-size: 0.85rem; color: var(--dim); min-height: 1rem; }
.kpi-bar { height: 0.25rem; margin-top: 0.4rem; background: rgba(148, 163, 184, 0.15); border-radius: 1rem; overflow: hidden; }
.kpi-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--cyan)); border-radius: 1rem; transition: width 0.6s ease; }
.kpi.flash { animation: flash 1.2s ease; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0); } 30% { box-shadow: 0 0 1.4rem 0.2rem rgba(34, 197, 94, 0.45); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.reality { font-size: 0.9rem; color: var(--muted); background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); border-radius: 0.9rem; padding: 0.8rem 1rem; line-height: 1.45; }
.reality b { color: var(--ink); font-size: 1.25rem; }
.reality .hot { color: #fca5a5; }

/* вдясно: панел и събития */
.wall-side { position: fixed; right: 2rem; top: 10.5rem; bottom: 1.2rem; width: 30rem; z-index: 1000; display: flex; flex-direction: column; gap: 0.8rem; }
.panel { background: var(--glass); border: 1px solid var(--line); border-radius: 0.9rem; padding: 1rem 1.1rem; backdrop-filter: blur(10px); overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: rgba(94,234,212,.25) transparent; }
.panel h2 { margin: 0; font-size: 1.6rem; font-weight: 800; }
.panel h3 { margin: 0.9rem 0 0.4rem; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.panel .sub { color: var(--muted); font-size: 0.95rem; }
.panel .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.6rem; }
.panel .cell { background: rgba(148, 163, 184, 0.07); border-radius: 0.6rem; padding: 0.45rem 0.6rem; }
.panel .cell b { display: block; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.panel .cell span { font-size: 0.78rem; color: var(--muted); }
.panel .chart { position: relative; height: 9rem; margin-top: 0.3rem; }
.panel .list { list-style: none; margin: 0; padding: 0; }
.panel .list li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0.2rem; border-bottom: 1px solid rgba(148, 163, 184, 0.08); font-size: 0.95rem; cursor: pointer; }
.panel .list li:hover { background: rgba(45, 212, 191, 0.08); }
.panel .list .v { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel .bar { height: 0.3rem; border-radius: 1rem; background: linear-gradient(90deg, var(--warn), var(--hot)); margin-top: 0.2rem; }
.panel .links { margin-top: auto; padding-top: 0.6rem; display: flex; gap: 0.8rem; flex-wrap: wrap; font-size: 0.9rem; }
.panel .links a { color: var(--cyan); text-decoration: none; }
.panel .note { font-size: 0.8rem; color: var(--dim); margin-top: 0.4rem; }
.stack { display: flex; height: 0.8rem; border-radius: 1rem; overflow: hidden; margin: 0.5rem 0 0.3rem; background: rgba(148, 163, 184, 0.15); }
.stack i { display: block; height: 100%; transition: width 0.5s ease; }
.stack-legend { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; letter-spacing: 0.14em; padding: 0.2rem 0.6rem; border-radius: 1rem; margin-top: 0.4rem; }
.badge.live { color: var(--ok); background: rgba(34, 197, 94, 0.12); }
.badge.stale { color: var(--warn); background: rgba(245, 158, 11, 0.12); }
.badge.rep { color: var(--grey); background: rgba(148, 163, 184, 0.12); }
.big-now { font-size: 2.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.big-now small { font-size: 1.1rem; color: var(--muted); font-weight: 600; margin-left: 0.3rem; }

.feed { flex: 0 0 11.5rem; background: var(--glass); border: 1px solid var(--line); border-radius: 0.9rem; padding: 0.7rem 1rem; backdrop-filter: blur(10px); overflow: hidden; }
.feed-head { font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.feed ol { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 4.6rem 0.7rem 1fr; gap: 0.5rem; align-items: baseline; font-size: 0.92rem; padding: 0.3rem 0; border-bottom: 1px solid rgba(148, 163, 184, 0.07); animation: slidein 0.6s ease; cursor: pointer; }
.feed li .t { color: var(--dim); font-variant-numeric: tabular-nums; }
.feed li .d { width: 0.55rem; height: 0.55rem; border-radius: 50%; align-self: center; }
.feed li .x { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed li .x b { font-weight: 600; }
@keyframes slidein { from { opacity: 0; transform: translateX(1.5rem); background: rgba(45, 212, 191, 0.12); } to { opacity: 1; transform: none; } }

/* долу */
.wall-legend { position: fixed; left: 25rem; bottom: 0.7rem; right: 34rem; z-index: 1000; font-size: 0.78rem; color: var(--muted); pointer-events: none; overflow: hidden; white-space: nowrap; display: flex; flex-direction: column; gap: 0.3rem; }
.lg-row { display: flex; gap: 0.8rem; flex-wrap: nowrap; align-items: center; }
.lg { display: inline-flex; align-items: center; gap: 0.45rem; }
.lg i { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 50%; }
.g-live { background: #5eead4; box-shadow: 0 0 0.6rem 0.2rem rgba(94, 234, 212, 0.7); }
.g-stale { background: rgba(245, 158, 11, 0.45); }
.g-rep { border: 1.5px solid rgba(148, 163, 184, 0.7); width: 0.75rem !important; height: 0.75rem !important; }
.g-ac { border: 2px dashed var(--violet); }
.g-leak { border: 2px solid var(--crit); box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0.25); }
.g-pt { background: var(--cyan); border-radius: 0.15rem !important; transform: rotate(45deg) scale(0.75); }
.lg-scale .sw { display: inline-block; width: 1.4rem; height: 0.55rem; border-radius: 0.2rem; margin: 0 0.25rem 0 0.6rem; vertical-align: middle; }
.lg-src { font-size: 0.72rem; color: var(--dim); line-height: 1.35; white-space: normal; }

.wall-controls { position: fixed; left: 2rem; bottom: 1.2rem; z-index: 1001; display: flex; gap: 0.4rem; }
.wall-controls button, .wall-controls a { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--glass); border: 1px solid var(--line); color: var(--ink); border-radius: 0.7rem; padding: 0.55rem 0.9rem; cursor: pointer; font-size: 1rem; text-decoration: none; backdrop-filter: blur(8px); }
.wall-controls button.is-on { background: rgba(167, 139, 250, 0.2); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.6); }
.wall-controls button.is-wait { animation: music-wait 1.6s ease-in-out infinite; }
@keyframes music-wait { 0%, 100% { box-shadow: inset 0 0 0 1px var(--line); } 50% { box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.9), 0 0 1.2rem rgba(167, 139, 250, 0.45); } }
/* фонова музика: браузърът чака първо действие на зрителя (ambient.js) */
.wall-music-hint { position: fixed; left: 50%; top: 42%; transform: translateX(-50%); z-index: 1003; pointer-events: none;
  background: rgba(3, 10, 20, 0.82); border: 1px solid rgba(167, 139, 250, 0.6); border-radius: 0.9rem; padding: 0.7rem 1.3rem;
  font-size: 1.15rem; color: var(--ink); backdrop-filter: blur(8px); animation: music-wait 1.6s ease-in-out infinite; }
.wall-music-hint[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .wall-controls button.is-wait, .wall-music-hint { animation: none; } }

.wall-tip { position: fixed; z-index: 1002; pointer-events: none; background: rgba(3, 10, 20, 0.92); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.4rem 0.6rem; font-size: 0.9rem; transform: translate(0.8rem, 0.8rem); max-width: 22rem; }
.wall-caption { position: fixed; left: 50%; bottom: 14rem; transform: translateX(-50%); z-index: 1001; font-size: 1.9rem; font-weight: 700; text-align: center; max-width: 55rem;
  background: rgba(3, 10, 20, 0.7); border: 1px solid var(--line); border-radius: 1rem; padding: 0.8rem 1.6rem; backdrop-filter: blur(8px); animation: fadein 0.8s ease; }
.wall-caption small { display: block; font-size: 1.05rem; font-weight: 500; color: var(--muted); margin-top: 0.3rem; }
@keyframes fadein { from { opacity: 0; transform: translate(-50%, 1rem); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (max-aspect-ratio: 4/3) {
  .wall-kpis { width: 17rem; }
  .wall-side { width: 20rem; }
  .wall-timeline { width: 22rem; }
}

/* легенда: пътят на водата */
.g-flow { width: 1.4rem !important; height: 0.2rem !important; border-radius: 1rem !important; background: #38bdf8; box-shadow: 0 0 0.4rem rgba(56, 189, 248, 0.8); }
.g-noflow { width: 1.4rem !important; height: 0 !important; border-radius: 0 !important; border-top: 2px dashed rgba(148, 163, 184, 0.7); }
.g-lossp { background: radial-gradient(circle, #ef4444 0 25%, transparent 30%), radial-gradient(circle at 80% 20%, #ef4444 0 12%, transparent 16%), radial-gradient(circle at 15% 80%, #ef4444 0 12%, transparent 16%); }

/* долу: пътят на водата и на данните */
.wall-flow { position: fixed; left: 25rem; right: 34rem; bottom: 4.2rem; z-index: 1000; background: var(--glass); border: 1px solid var(--line); border-radius: 0.9rem; padding: 0.6rem 1rem 0.7rem; backdrop-filter: blur(10px); }
.flow-head { display: flex; align-items: baseline; gap: 0.8rem; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.45rem; }
.flow-head b { color: var(--teal); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.flow-head span { color: var(--ink); font-weight: 600; }
.flow-head em { margin-left: auto; font-style: normal; color: var(--dim); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.flow-head b, .flow-head span { white-space: nowrap; }
.flow-row { display: flex; align-items: stretch; gap: 0.4rem; }
.st { flex: 1 1 0; min-width: 0; background: rgba(148, 163, 184, 0.07); border-radius: 0.6rem; padding: 0.45rem 0.6rem; }
.st-label { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.st-label i { color: var(--cyan); margin-right: 0.2rem; }
.st-val { font-size: 0.95rem; margin-top: 0.2rem; line-height: 1.35; }
.st-val b { font-size: 1.15rem; }
.mtr { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; padding: 0.1rem 0.45rem; border-radius: 1rem; white-space: nowrap; }
.mtr.on { color: #7dd3fc; background: rgba(56, 189, 248, 0.14); }
.mtr.part { color: #fcd34d; background: rgba(245, 158, 11, 0.13); }
.mtr.off { color: var(--grey); background: rgba(148, 163, 184, 0.12); }
.arw { flex: 0 0 2.2rem; display: flex; align-items: center; }
.arw i { position: relative; display: block; width: 100%; height: 0.22rem; border-radius: 1rem; background-size: 1.2rem 100%; animation: flowdash 0.9s linear infinite; }
.arw i::after { content: ''; position: absolute; right: -0.1rem; top: 50%; transform: translateY(-50%); border: 0.35rem solid transparent; border-left-color: inherit; border-left: 0.5rem solid; border-right: 0; }
.arw.on i { background-image: linear-gradient(90deg, #38bdf8 60%, transparent 60%); color: #38bdf8; box-shadow: 0 0 0.5rem rgba(56, 189, 248, 0.6); }
.arw.part i { background-image: linear-gradient(90deg, #f59e0b 60%, transparent 60%); color: #f59e0b; }
.arw.off i { background-image: linear-gradient(90deg, rgba(148, 163, 184, 0.6) 40%, transparent 40%); color: rgba(148, 163, 184, 0.6); animation-duration: 2.4s; }
@keyframes flowdash { from { background-position: 0 0; } to { background-position: 1.2rem 0; } }
.flow-bal { flex: 1.8 1 0; min-width: 0; background: rgba(148, 163, 184, 0.07); border-radius: 0.6rem; padding: 0.45rem 0.6rem; }
.bal { display: flex; height: 1.5rem; border-radius: 0.4rem; overflow: hidden; margin-top: 0.3rem; background: rgba(148, 163, 184, 0.12); }
.bal i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 0.8rem; font-weight: 700; color: #03101d; transition: width 0.6s ease; min-width: 0; overflow: hidden; white-space: nowrap; }
.bal .b-billed { background: #38bdf8; }
.bal .b-uac { background: #64748b; }
.bal .b-apparent { background: #f59e0b; }
.bal .b-real { background: #ef4444; color: #fff; }
.bal .b-unknown { color: #fecaca; background: repeating-linear-gradient(45deg, rgba(239, 68, 68, 0.45) 0 0.45rem, rgba(148, 163, 184, 0.3) 0.45rem 0.9rem); }
.bal-legend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; }
.bal-legend em { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 0.15rem; margin-right: 0.3rem; vertical-align: -0.05rem; }
.bal-legend em.hatch { background: repeating-linear-gradient(45deg, rgba(239, 68, 68, 0.7) 0 0.2rem, rgba(148, 163, 184, 0.5) 0.2rem 0.4rem); }
.bal-note { font-size: 0.75rem; color: var(--dim); margin-top: 0.15rem; }

/* панел: четирите показателя */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-top: 0.7rem; }
.tile { background: rgba(148, 163, 184, 0.07); border: 1px solid rgba(148, 163, 184, 0.08); border-radius: 0.7rem; padding: 0.55rem 0.7rem; min-width: 0; }
.t-label { font-size: 0.8rem; color: var(--teal); letter-spacing: 0.04em; display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.t-big { font-size: 2.15rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.t-big small { font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-left: 0.25rem; }
.t-sub { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.t-sub .hot, .hot { color: #fca5a5; }
.tag { font-size: 0.68rem; letter-spacing: 0.06em; padding: 0.05rem 0.4rem; border-radius: 1rem; color: var(--muted); background: rgba(148, 163, 184, 0.14); }
.tag.on { color: #7dd3fc; background: rgba(56, 189, 248, 0.14); }
.tag.rep { color: var(--grey); background: rgba(148, 163, 184, 0.16); }
.t-gauge { display: flex; align-items: center; gap: 0.5rem; }
.gauge { width: 6.2rem; flex: 0 0 auto; }
.cmp { margin-top: 0.35rem; display: flex; flex-direction: column; gap: 0.15rem; }
.cmp-row { display: grid; grid-template-columns: 4.6rem 1fr 2.8rem; gap: 0.35rem; align-items: center; font-size: 0.72rem; color: var(--dim); }
.cmp-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-row i { height: 0.35rem; background: rgba(148, 163, 184, 0.1); border-radius: 1rem; overflow: hidden; }
.cmp-row i b { display: block; height: 100%; background: rgba(148, 163, 184, 0.55); border-radius: 1rem; }
.cmp-row em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.cmp-row.me { color: var(--ink); font-weight: 600; }
.cmp-row.me i b { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.coverage { font-size: 0.9rem; color: var(--muted); margin-top: 0.4rem; }
.coverage b { color: var(--ink); }
.dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.45rem; vertical-align: 0.05rem; }
.dot.st2 { background: #5eead4; box-shadow: 0 0 0.35rem #5eead4; }
.dot.st1 { background: rgba(245, 158, 11, 0.6); }
.dot.st0 { border: 1px solid #94a3b8; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font-size: 0.75rem; color: var(--muted); }
.ch-legend em { display: inline-block; width: 0.8rem; height: 0.25rem; border-radius: 1rem; margin-right: 0.3rem; vertical-align: 0.15rem; }
.now-row { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: center; margin-top: 0.5rem; }
.badge.ac { color: #a78bfa; background: rgba(167, 139, 250, 0.14); }

.lg-icons .lg > i { color: #cbd5e1; }
.lg .ic { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: rgba(6, 18, 34, 0.95); border: 1.5px solid rgba(56, 189, 248, 0.95); color: #7dd3fc; font-size: 0.62rem; }
.lg .ic.w { border-color: rgba(226, 232, 240, 0.8); color: #e2e8f0; }
.lg .ic.v { border-color: rgba(167, 139, 250, 0.95); color: #c4b5fd; }
.ili-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; margin-top: 0.55rem; }
.ili-scale span { border-top: 0.3rem solid var(--c); background: rgba(148, 163, 184, 0.06); border-radius: 0.3rem; padding: 0.25rem 0.4rem; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ili-scale span b { color: var(--c); margin-right: 0.35rem; font-size: 0.95rem; }
.ili-scale span em { display: block; font-style: normal; font-size: 0.7rem; color: var(--dim); }
.ili-scale span.me { background: rgba(148, 163, 184, 0.16); box-shadow: inset 0 0 0 1px var(--c); color: var(--ink); }

/* знаци по СТ СИВ 3506-81 */
.sym { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.lg .sym { width: 1.6rem; height: 1.3rem; margin-right: 0.1rem; }
.st-label .sym { width: 1.5rem; height: 1.2rem; margin-right: 0.25rem; vertical-align: -0.3rem; }
.mtr.na { color: var(--dim); background: rgba(148, 163, 184, 0.08); }
.lg-icons { gap: 0.6rem; }