/* NOC wall: host and seven styles. Fixed dark display, independent of the app theme. */
/* Wall host: fixed dark container, a 1920x1080 stage scaled to fit, and an auto-hiding style picker. */
.mdv-wall-host-root { position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: #05080c; }
.mdv-wall-host-stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center center; }
.mdv-wall-host-stale { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: 90vw; background: #b3261e; color: #fff; font: 600 18px/1.3 Inter, system-ui, sans-serif; padding: 10px 22px; border-radius: 999px; text-align: center; }
.mdv-wall-host-bar { position: absolute; top: 12px; right: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; transition: opacity .5s ease; }
.mdv-wall-host-bar-idle { opacity: 0; pointer-events: none; }
.mdv-wall-host-picker { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(17, 25, 34, 0.92); border: 1px solid #223044; }
.mdv-wall-host-pill { border: 0; border-radius: 999px; padding: 7px 14px; font: 600 14px/1.2 Inter, system-ui, sans-serif; color: #c4cbd8; background: transparent; cursor: pointer; }
.mdv-wall-host-pill:hover { background: #1d2838; }
.mdv-wall-host-pill:focus-visible { outline: 2px solid #8fb8f8; outline-offset: 1px; }
.mdv-wall-host-pill[aria-pressed="true"] { background: #eef1f6; color: #0b0f16; }
.mdv-wall-host-exit { background: rgba(17, 25, 34, 0.92); border: 1px solid #223044; }
@media (prefers-reduced-motion: reduce) { .mdv-wall-host-bar { transition: none; } }

/* Wall style A: meter and rings. Authored at exactly 1920x1080; fixed colours, independent of the app theme. */
.mdv-wa { width: 1920px; height: 1080px; box-sizing: border-box; background: radial-gradient(1200px 700px at 20% 0%, #16202e 0%, #0b0f16 60%); color: #eef1f6; font-family: Inter, system-ui, sans-serif; padding: 36px 44px; display: flex; flex-direction: column; gap: 26px; }
.mdv-wa-head { display: flex; justify-content: space-between; align-items: flex-end; }
.mdv-wa-title { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.mdv-wa-sub { font-size: 18px; color: #8b95a7; margin-top: 4px; }
.mdv-wa-clock { text-align: right; }
.mdv-wa-time { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mdv-wa-date { font-size: 18px; color: #8b95a7; }
.mdv-wa-grid { display: grid; grid-template-columns: 560px minmax(0, 1fr) 440px; gap: 26px; flex: 1; min-height: 0; }
.mdv-wa-left { display: flex; flex-direction: column; gap: 22px; }
.mdv-wa-panel { background: #121923; border: 1px solid #223044; border-radius: 28px; }
.mdv-wa-fleet { padding: 26px 28px 22px; display: flex; flex-direction: column; align-items: center; }
.mdv-wa-fleet-h { font-size: 20px; font-weight: 600; color: #aab3c4; align-self: flex-start; }
.mdv-wa-meter { margin-top: 6px; }
.mdv-wa-fleet-n { font-size: 22px; color: #aab3c4; margin-top: -4px; text-align: center; }
.mdv-wa-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mdv-wa-stat { background: #121923; border: 1px solid #223044; border-radius: 22px; padding: 16px 18px; }
.mdv-wa-stat b { display: block; font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.mdv-wa-stat span { display: block; font-size: 16px; color: #8b95a7; margin-top: 6px; }
.mdv-wa-rings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 16px; }
.mdv-wa-card { background: #121923; border: 1px solid #223044; border-radius: 26px; padding: 16px 16px 14px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-width: 0; color: inherit; font: inherit; cursor: pointer; transition: border-color .2s, transform .2s; animation: mdv-wa-in .5s ease both; }
.mdv-wa-card:hover, .mdv-wa-card:focus-visible { border-color: #46546b; transform: translateY(-2px); outline: none; }
.mdv-wa-card-t { text-align: center; min-width: 0; }
.mdv-wa-card-n { font-size: 21px; font-weight: 700; line-height: 1.15; }
.mdv-wa-card-s { font-size: 17px; color: #8b95a7; margin-top: 3px; }
.mdv-wa-arc { transition: stroke-dasharray .8s ease; }
.mdv-wa-needle { transition: transform .8s ease; }
.mdv-wa-attn { padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; }
.mdv-wa-attn-h { font-size: 26px; font-weight: 700; margin: 0; }
.mdv-wa-item { border-radius: 20px; background: #0e141d; padding: 14px 16px; display: flex; gap: 14px; align-items: center; }
.mdv-wa-item-bar { width: 12px; height: 44px; border-radius: 6px; flex: none; }
.mdv-wa-item-t { min-width: 0; flex: 1; }
.mdv-wa-item-t b { display: block; font-size: 18px; font-weight: 700; line-height: 1.25; }
.mdv-wa-item-t span { display: block; font-size: 15px; color: #8b95a7; margin-top: 2px; }
.mdv-wa-item-tag { font-size: 15px; font-weight: 700; white-space: nowrap; }
@keyframes mdv-wa-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mdv-wa-card, .mdv-wa-arc, .mdv-wa-needle { animation: none; transition: none; } }

/* Wall style B: radial bars. Authored at exactly 1920x1080; fixed colours, independent of the app theme. */
.mdv-wb { width: 1920px; height: 1080px; box-sizing: border-box; background: radial-gradient(900px 700px at 35% 55%, #17222f 0%, #0a0e14 65%); color: #eef1f6; font-family: Inter, system-ui, sans-serif; padding: 36px 44px; display: flex; flex-direction: column; gap: 20px; }
.mdv-wb-head { display: flex; justify-content: space-between; align-items: flex-end; }
.mdv-wb-title { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.mdv-wb-sub { font-size: 18px; color: #8b95a7; margin-top: 4px; }
.mdv-wb-clock { text-align: right; }
.mdv-wb-time { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mdv-wb-date { font-size: 18px; color: #8b95a7; }
.mdv-wb-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px; flex: 1; min-height: 0; }
.mdv-wb-radial { position: relative; width: 900px; height: 900px; align-self: center; justify-self: center; }
.mdv-wb-label { position: absolute; background: none; border: 0; padding: 0 4px; margin: 0; font: inherit; font-size: 18px; font-weight: 600; line-height: 20px; color: #c4cbd8; text-align: right; white-space: nowrap; cursor: pointer; border-radius: 10px; }
.mdv-wb-label b { font-weight: 800; }
.mdv-wb-label:hover, .mdv-wb-label:focus-visible { background: #1d2838; outline: none; }
.mdv-wb-arc { transition: stroke-dasharray .8s ease; animation: mdv-wb-sweep 1s ease both; }
.mdv-wb-side { display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.mdv-wb-types { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mdv-wb-type { background: #111922; border: 1px solid #223044; border-radius: 28px; padding: 20px 24px; display: flex; align-items: center; gap: 20px; }
.mdv-wb-type-n { font-size: 26px; font-weight: 700; }
.mdv-wb-type-s { font-size: 18px; color: #aab3c4; margin-top: 4px; }
.mdv-wb-type-d { font-size: 18px; color: #f0626a; font-weight: 600; margin-top: 2px; }
.mdv-wb-attn { background: #111922; border: 1px solid #223044; border-radius: 28px; padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow: hidden; }
.mdv-wb-attn-h { font-size: 26px; font-weight: 700; margin: 0; }
.mdv-wb-item { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; align-items: center; border-radius: 20px; background: #0c1219; padding: 14px 18px; }
.mdv-wb-item-tag { font-size: 14px; font-weight: 800; letter-spacing: 0.04em; border: 2px solid; border-radius: 999px; text-align: center; padding: 5px 0; }
.mdv-wb-item-t b { display: block; font-size: 20px; font-weight: 700; line-height: 1.25; }
.mdv-wb-item-t span { display: block; font-size: 15px; color: #8b95a7; margin-top: 2px; }
@keyframes mdv-wb-sweep { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mdv-wb-arc { animation: none; transition: none; } }

/* Wall style C: pill bars. Authored at exactly 1920x1080; fixed colours, independent of the app theme. */
.mdv-wc { width: 1920px; height: 1080px; box-sizing: border-box; background: linear-gradient(160deg, #101822 0%, #0a0e14 70%); color: #eef1f6; font-family: Inter, system-ui, sans-serif; padding: 36px 44px; display: flex; flex-direction: column; gap: 22px; }
.mdv-wc-head { display: flex; justify-content: space-between; align-items: flex-end; }
.mdv-wc-title { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.mdv-wc-sub { font-size: 18px; color: #8b95a7; margin-top: 4px; }
.mdv-wc-clock { text-align: right; }
.mdv-wc-time { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mdv-wc-date { font-size: 18px; color: #8b95a7; }
.mdv-wc-panel { background: #111922; border: 1px solid #223044; border-radius: 30px; }
.mdv-wc-h { font-size: 24px; font-weight: 700; }
.mdv-wc-fleet { padding: 22px 30px 20px; display: flex; flex-direction: column; gap: 14px; }
.mdv-wc-fleet-h { display: flex; justify-content: space-between; align-items: baseline; }
.mdv-wc-fleet-n { font-size: 20px; color: #aab3c4; }
.mdv-wc-stack { display: flex; height: 46px; border-radius: 999px; overflow: hidden; background: #18222f; gap: 3px; }
.mdv-wc-seg { border-radius: 999px; transition: width .8s ease; }
.mdv-wc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 26px; flex: 1; min-height: 0; }
.mdv-wc-rows { padding: 24px 30px; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; }
.mdv-wc-row { display: grid; grid-template-columns: 270px minmax(0, 1fr) 150px 110px; gap: 20px; align-items: center; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; border-radius: 999px; }
.mdv-wc-row:hover, .mdv-wc-row:focus-visible { background: #18222f; outline: none; }
.mdv-wc-name { font-size: 25px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdv-wc-track { height: 34px; border-radius: 999px; background: #18222f; overflow: hidden; display: block; }
.mdv-wc-fill { display: block; height: 34px; border-radius: 999px; transition: width .8s ease; animation: mdv-wc-grow .9s ease both; }
.mdv-wc-count { font-size: 24px; font-variant-numeric: tabular-nums; color: #c4cbd8; text-align: right; }
.mdv-wc-count b { color: #eef1f6; }
.mdv-wc-pct { font-size: 26px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.mdv-wc-side { display: flex; flex-direction: column; gap: 22px; min-height: 0; }
.mdv-wc-types { padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; }
.mdv-wc-type-h { display: flex; justify-content: space-between; font-size: 20px; margin-bottom: 8px; }
.mdv-wc-type-h > span { color: #aab3c4; }
.mdv-wc-type-track { height: 22px; border-radius: 999px; background: #18222f; overflow: hidden; }
.mdv-wc-type-fill { height: 22px; border-radius: 999px; transition: width .8s ease; }
.mdv-wc-attn { padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow: hidden; }
.mdv-wc-item { display: flex; gap: 14px; align-items: center; border-radius: 22px; background: #0c1219; padding: 14px 16px; }
.mdv-wc-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.mdv-wc-item-t { min-width: 0; }
.mdv-wc-item-t b { display: block; font-size: 19px; font-weight: 700; line-height: 1.25; }
.mdv-wc-item-t span { display: block; font-size: 15px; color: #8b95a7; margin-top: 2px; }
@keyframes mdv-wc-grow { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .mdv-wc-fill, .mdv-wc-seg, .mdv-wc-type-fill { animation: none; transition: none; } }

/* NOC wall F, heartbeat: fixed dark display, independent of the app theme. */
@keyframes mdv-wf-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes mdv-wf-beat { 0%, 100% { transform: scale(1); opacity: .9; } 14% { transform: scale(1.09); opacity: 1; } 28% { transform: scale(1); } 42% { transform: scale(1.05); } }
@keyframes mdv-wf-glow { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }

.mdv-wf-root { width: 1920px; height: 1080px; box-sizing: border-box; background: radial-gradient(1100px 700px at 30% 10%, #142230 0%, #090d13 65%); color: #eef1f6; font-family: Inter, system-ui, sans-serif; padding: 34px 44px; display: flex; flex-direction: column; gap: 20px; overflow: hidden; }
.mdv-wf-head { display: flex; justify-content: space-between; align-items: flex-end; }
.mdv-wf-title { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; }
.mdv-wf-what { font-size: 18px; color: #8b95a7; margin-top: 4px; }
.mdv-wf-clock { text-align: right; }
.mdv-wf-time { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mdv-wf-stale { background: #3a2a0c; border: 1px solid #d9a441; color: #f6d9a0; border-radius: 18px; padding: 10px 20px; font-size: 20px; font-weight: 600; }
.mdv-wf-body { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 26px; flex: 1; min-height: 0; }
.mdv-wf-side { display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.mdv-wf-card { background: #101821; border: 1px solid #223044; border-radius: 30px; }
.mdv-wf-fleet { border-radius: 34px; padding: 30px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; overflow: hidden; }
.mdv-wf-glow { position: absolute; inset: auto -60px -80px -60px; height: 260px; pointer-events: none; animation: mdv-wf-glow 3.2s ease-in-out infinite; }
.mdv-wf-h { font-size: 24px; font-weight: 700; color: #aab3c4; align-self: flex-start; }
.mdv-wf-beat { transform-origin: center; transform-box: fill-box; animation: mdv-wf-beat 1.6s ease-in-out infinite; }
.mdv-wf-counts { display: flex; gap: 26px; font-size: 20px; }
.mdv-wf-counts b { font-size: 32px; }
.mdv-wf-items { padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow: hidden; }
.mdv-wf-items .mdv-wf-h { color: #eef1f6; }
.mdv-wf-item { display: flex; gap: 14px; align-items: center; border-radius: 22px; background: #0b1118; padding: 13px 16px; }
.mdv-wf-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; animation: mdv-wf-glow 3.2s ease-in-out infinite; }
.mdv-wf-it { font-size: 18px; font-weight: 700; line-height: 1.25; }
.mdv-wf-is { font-size: 15px; color: #8b95a7; margin-top: 2px; }
.mdv-wf-rows { display: grid; gap: 10px; min-height: 0; }
.mdv-wf-row { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 250px minmax(0, 1fr) 150px; gap: 20px; align-items: center; background: #101821; border: 1px solid #223044; border-radius: 26px; padding: 0 26px; min-height: 0; overflow: hidden; }
.mdv-wf-row:focus-visible { outline: 3px solid #8fb8f8; outline-offset: 2px; }
.mdv-wf-name b { display: block; font-size: 23px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdv-wf-name small { display: block; font-size: 15px; color: #8b95a7; margin-top: 2px; }
.mdv-wf-row svg { max-height: 44px; }
.mdv-wf-tr { stroke-dasharray: 34 66; animation: mdv-wf-trace 3.4s linear infinite; filter: drop-shadow(0 0 4px var(--c)); }
.mdv-wf-pct { text-align: right; }
.mdv-wf-pct b { display: block; font-size: 34px; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; line-height: 1; }
.mdv-wf-pct small { display: block; font-size: 15px; color: #f0626a; font-weight: 600; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .mdv-wf-tr, .mdv-wf-beat, .mdv-wf-glow, .mdv-wf-dot { animation: none; }
  .mdv-wf-tr { stroke-dasharray: none; }
}

/* NOC wall G, radar: fixed dark display, independent of the app theme. */
@keyframes mdv-wg-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes mdv-wg-ping { 0% { opacity: 1; transform: scale(1.28); } 28% { opacity: .78; transform: scale(1); } 100% { opacity: .5; transform: scale(1); } }
@keyframes mdv-wg-ripple { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }

.mdv-wg-root { width: 1920px; height: 1080px; box-sizing: border-box; background: radial-gradient(1000px 800px at 28% 55%, #0f1f1b 0%, #070b0f 70%); color: #eef1f6; font-family: Inter, system-ui, sans-serif; padding: 34px 44px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.mdv-wg-head { display: flex; justify-content: space-between; align-items: flex-end; }
.mdv-wg-title { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; }
.mdv-wg-what { font-size: 18px; color: #8b95a7; margin-top: 4px; }
.mdv-wg-clock { text-align: right; }
.mdv-wg-time { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mdv-wg-stale { background: #3a2a0c; border: 1px solid #d9a441; color: #f6d9a0; border-radius: 18px; padding: 10px 20px; font-size: 20px; font-weight: 600; }
.mdv-wg-body { display: grid; grid-template-columns: 880px minmax(0, 1fr); gap: 30px; flex: 1; min-height: 0; }
.mdv-wg-radar { position: relative; width: 840px; height: 840px; align-self: center; margin-left: 20px; }
.mdv-wg-disc { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, #0e1a1a 0%, #091014 100%); border: 2px solid #1c2c33; box-shadow: 0 0 60px rgba(61, 187, 140, 0.12); }
.mdv-wg-radar > svg { position: absolute; inset: 0; }
.mdv-wg-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(61, 187, 140, 0) 0deg, rgba(61, 187, 140, 0) 276deg, rgba(61, 187, 140, 0.34) 360deg); -webkit-mask: radial-gradient(closest-side, #000 98%, transparent); mask: radial-gradient(closest-side, #000 98%, transparent); animation: mdv-wg-sweep var(--sweep) linear infinite; }
.mdv-wg-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.mdv-wg-big { font-size: 92px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.mdv-wg-sub { font-size: 22px; color: #8b95a7; margin-top: 6px; }
.mdv-wg-down { font-size: 22px; color: #f0626a; font-weight: 700; margin-top: 2px; }
.mdv-wg-blip { all: unset; box-sizing: border-box; position: absolute; cursor: pointer; border-radius: 50%; }
.mdv-wg-dot { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--c), var(--c2)); box-shadow: 0 0 22px var(--c); opacity: .5; animation: mdv-wg-ping var(--sweep) linear infinite; animation-delay: var(--d); }
.mdv-wg-blip:focus-visible { outline: 3px solid #8fb8f8; outline-offset: 4px; }
.mdv-wg-rip { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--c); animation: mdv-wg-ripple 2.8s ease-out infinite; }
.mdv-wg-label { position: absolute; top: 50%; width: 230px; margin-top: -12px; font-size: 19px; font-weight: 700; line-height: 1.15; text-shadow: 0 2px 8px #000; color: #eef1f6; }
.mdv-wg-label b { color: var(--c); }
.mdv-wg-r { left: calc(100% + 10px); text-align: left; }
.mdv-wg-l { right: calc(100% + 10px); text-align: right; }
.mdv-wg-side { display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.mdv-wg-card { background: #0d1519; border: 1px solid #1f3038; border-radius: 30px; padding: 24px 28px; display: flex; flex-direction: column; gap: 6px; }
.mdv-wg-h { font-size: 24px; font-weight: 700; margin-bottom: 2px; }
.mdv-wg-rank { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0, 1fr) 90px 80px; gap: 12px; align-items: center; font-size: 20px; padding: 2px 0; border-radius: 12px; }
.mdv-wg-rank:focus-visible { outline: 3px solid #8fb8f8; }
.mdv-wg-rank i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.mdv-wg-rn { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdv-wg-ru { color: #8b95a7; text-align: right; font-variant-numeric: tabular-nums; }
.mdv-wg-rank b { color: var(--c); text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.mdv-wg-items { flex: 1; min-height: 0; overflow: hidden; gap: 10px; padding: 22px 28px; }
.mdv-wg-item { display: flex; gap: 14px; align-items: center; border-radius: 20px; background: #091014; padding: 12px 16px; }
.mdv-wg-item i { width: 12px; height: 36px; border-radius: 6px; flex: none; }
.mdv-wg-it { font-size: 18px; font-weight: 700; line-height: 1.25; }
.mdv-wg-is { font-size: 14px; color: #8b95a7; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .mdv-wg-sweep, .mdv-wg-dot, .mdv-wg-rip { animation: none; }
  .mdv-wg-dot { opacity: 1; }
  .mdv-wg-rip { display: none; }
}

/* NOC wall H, liquid tanks: fixed dark display, independent of the app theme. --d = tank diameter, --k = d / 196 text scale. */
@keyframes mdv-wh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes mdv-wh-spin-back { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes mdv-wh-bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .7; } 100% { transform: translateY(-120px); opacity: 0; } }

.mdv-wh-root { width: 1920px; height: 1080px; box-sizing: border-box; background: radial-gradient(1000px 700px at 70% 0%, #12233a 0%, #080c12 65%); color: #eef1f6; font-family: Inter, system-ui, sans-serif; padding: 34px 44px; display: flex; flex-direction: column; gap: 20px; overflow: hidden; }
.mdv-wh-head { display: flex; justify-content: space-between; align-items: flex-end; }
.mdv-wh-title { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; }
.mdv-wh-what { font-size: 18px; color: #8b95a7; margin-top: 4px; }
.mdv-wh-clock { text-align: right; }
.mdv-wh-time { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mdv-wh-stale { background: #3a2a0c; border: 1px solid #d9a441; color: #f6d9a0; border-radius: 18px; padding: 10px 20px; font-size: 20px; font-weight: 600; }
.mdv-wh-grid { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 18px; flex: 1; min-height: 0; }
.mdv-wh-tile { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 24px; min-width: 0; min-height: 0; overflow: hidden; background: #0e151f; border: 1px solid #1f2e42; border-radius: 34px; padding: 10px 24px; }
button.mdv-wh-tile { cursor: pointer; }
.mdv-wh-tile:focus-visible { outline: 3px solid #8fb8f8; outline-offset: 2px; }
.mdv-wh-tank { position: relative; display: block; width: var(--d); height: var(--d); border-radius: 50%; overflow: hidden; border: 3px solid #27384d; background: #0a1018; flex: none; }
.mdv-wh-w1, .mdv-wh-w2 { position: absolute; left: 50%; width: calc(var(--d) * 2.04); height: calc(var(--d) * 2.04); margin-left: calc(var(--d) * -1.02); }
.mdv-wh-w1 { border-radius: 43%; opacity: .85; animation: mdv-wh-spin 9s linear infinite; }
.mdv-wh-w2 { border-radius: 41%; opacity: .55; animation: mdv-wh-spin-back 13s linear infinite; }
.mdv-wh-bub { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.5); animation: mdv-wh-bubble 5s ease-in infinite; }
.mdv-wh-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(48px * var(--k)); font-weight: 800; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); letter-spacing: -0.02em; color: #fff; }
.mdv-wh-txt { display: block; min-width: 0; }
.mdv-wh-txt b { display: block; font-size: max(16px, calc(26px * var(--k))); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.mdv-wh-txt small { display: block; font-size: max(14px, calc(19px * var(--k))); color: #8b95a7; margin-top: 8px; }
.mdv-wh-txt em { display: block; font-style: normal; font-size: max(15px, calc(21px * var(--k))); font-weight: 700; color: #f0626a; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .mdv-wh-w1, .mdv-wh-w2, .mdv-wh-bub { animation: none; }
  .mdv-wh-bub { display: none; }
}

/* NOC wall I, spotlight and ticker: fixed dark display, independent of the app theme.
 * The slide and highlight keyframes (mdv-wi-slide, mdv-wi-hi) are generated in the component for the branch count. */
@keyframes mdv-wi-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.mdv-wi-root { width: 1920px; height: 1080px; box-sizing: border-box; background: linear-gradient(150deg, #101b2a 0%, #080b11 70%); color: #eef1f6; font-family: Inter, system-ui, sans-serif; padding: 34px 44px 0; display: flex; flex-direction: column; gap: 20px; overflow: hidden; }
.mdv-wi-head { display: flex; justify-content: space-between; align-items: flex-end; }
.mdv-wi-title { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; }
.mdv-wi-what { font-size: 18px; color: #8b95a7; margin-top: 4px; }
.mdv-wi-clock { text-align: right; }
.mdv-wi-time { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mdv-wi-stale { background: #3a2a0c; border: 1px solid #d9a441; color: #f6d9a0; border-radius: 18px; padding: 10px 20px; font-size: 20px; font-weight: 600; }
.mdv-wi-body { display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 28px; flex: 1; min-height: 0; }
.mdv-wi-stage { position: relative; background: #0e1520; border: 1px solid #223044; border-radius: 40px; overflow: hidden; }
.mdv-wi-cap { position: absolute; left: 44px; top: 34px; font-size: 18px; font-weight: 700; letter-spacing: 0.12em; color: #8aa3c0; }
.mdv-wi-slide { position: absolute; inset: 0; padding: 78px 56px 40px; display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 50px; align-items: center; opacity: 0; animation: mdv-wi-slide var(--mdv-wi-cycle) linear infinite; }
.mdv-wi-slide svg { justify-self: center; }
.mdv-wi-info { min-width: 0; }
.mdv-wi-name { font-size: 78px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; overflow-wrap: anywhere; }
.mdv-wi-line { font-size: 34px; color: #aab3c4; margin-top: 14px; }
.mdv-wi-line b { color: #eef1f6; }
.mdv-wi-types { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }
.mdv-wi-type { display: grid; grid-template-columns: 200px minmax(0, 1fr) 110px; gap: 18px; align-items: center; font-size: 26px; }
.mdv-wi-type > span:first-child { font-weight: 600; color: #c4cbd8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdv-wi-bar { display: block; height: 22px; border-radius: 999px; background: #1b2838; overflow: hidden; }
.mdv-wi-bar span { display: block; height: 22px; border-radius: 999px; }
.mdv-wi-tn { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.mdv-wi-list { background: #0e1520; border: 1px solid #223044; border-radius: 36px; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.mdv-wi-lh { display: flex; justify-content: space-between; align-items: baseline; padding: 0 8px 6px; }
.mdv-wi-lh > div:first-child { font-size: 24px; font-weight: 700; }
.mdv-wi-lh > div:last-child { font-size: 18px; color: #aab3c4; }
.mdv-wi-hi { all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 0; min-height: 0; max-height: 52px; display: grid; grid-template-columns: 26px minmax(0, 1fr) 90px 84px; gap: 12px; align-items: center; border: 2px solid transparent; border-radius: 18px; padding: 0 14px; font-size: 21px; animation: mdv-wi-hi var(--mdv-wi-cycle) linear infinite; }
.mdv-wi-hi:focus-visible { outline: 3px solid #8fb8f8; }
.mdv-wi-hi i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.mdv-wi-ln { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdv-wi-lu { color: #8b95a7; text-align: right; font-variant-numeric: tabular-nums; }
.mdv-wi-hi b { color: var(--c); text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.mdv-wi-bottom { margin: 0 -44px; height: 74px; flex: none; background: #0b1018; border-top: 1px solid #223044; display: flex; align-items: center; overflow: hidden; }
.mdv-wi-latest { flex: none; height: 100%; display: flex; align-items: center; padding: 0 30px; background: #162234; font-size: 19px; font-weight: 800; letter-spacing: 0.12em; color: #8fb8f8; }
.mdv-wi-clip { overflow: hidden; flex: 1; }
.mdv-wi-mq { display: inline-flex; white-space: nowrap; animation: mdv-wi-marquee var(--mdv-wi-mq) linear infinite; }
.mdv-wi-k { font-size: 23px; padding: 0 34px; display: inline-flex; align-items: center; gap: 14px; }
.mdv-wi-k i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .mdv-wi-slide, .mdv-wi-hi, .mdv-wi-mq { animation: none; }
  .mdv-wi-slide { opacity: 0; }
  .mdv-wi-cap + .mdv-wi-slide { opacity: 1; }
  .mdv-wi-hi:first-of-type { background: #17263a; border-color: #2f4a6e; }
}
.mdv-wi-slide.mdv-wi-one, .mdv-wi-hi.mdv-wi-one { animation: none; opacity: 1; }
.mdv-wi-hi.mdv-wi-one { background: #17263a; border-color: #2f4a6e; }