.live-screen {
  --ls-bg: #010814;
  --ls-panel: rgba(3, 20, 38, 0.82);
  --ls-panel-head: rgba(5, 42, 71, 0.72);
  --ls-line: rgba(19, 174, 222, 0.28);
  --ls-cyan: #18d8ff;
  --ls-cyan-soft: #a8efff;
  --ls-gold: #ffd15a;
  --ls-text: #d8f5ff;
  --ls-muted: #6f9caf;
  position: fixed;
  inset: 0;
  z-index: 1200;
  min-width: 1180px;
  min-height: 680px;
  overflow: hidden;
  color: var(--ls-text);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background:
    radial-gradient(ellipse at 52% 44%, rgba(8, 67, 106, 0.2), transparent 42%),
    linear-gradient(180deg, #020a17 0%, #010916 52%, #010611 100%);
  isolation: isolate;
}

.workspace > .live-screen {
  width: 100vw;
  max-width: none;
  margin: 0;
}

.live-screen[hidden] { display: none !important; }
body.live-screen-active { overflow: hidden; }

.live-screen-noise,
.live-screen::before,
.live-screen::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
}

.live-screen-noise {
  opacity: 0.1;
  background-image:
    linear-gradient(rgba(35, 181, 222, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 181, 222, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
}

.live-screen::before {
  background: linear-gradient(90deg, transparent, rgba(28, 207, 255, 0.035), transparent);
  transform: translateX(-100%);
  animation: live-screen-scan 10s linear infinite;
}

.live-screen::after {
  inset: auto 0 0;
  height: 1px;
  box-shadow: 0 -38px 100px rgba(25, 199, 248, 0.16);
}

/* 顶部总览，比例按 1920 × 1080 数据大屏设计 */
.live-screen-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 34% 42% 24%;
  align-items: start;
  height: 108px;
  padding: 10px 20px 0;
}

.live-screen-brand {
  display: grid;
  grid-template-columns: 50px 190px minmax(190px, 1fr);
  align-items: start;
  min-width: 0;
  height: 86px;
}

.live-screen-live-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: 13px;
  color: var(--ls-cyan);
  border: 1px solid rgba(24, 216, 255, 0.78);
  clip-path: polygon(17% 0, 83% 0, 100% 50%, 83% 100%, 17% 100%, 0 50%);
  font: 700 9px/1 ui-monospace, Consolas, monospace;
  text-shadow: 0 0 10px var(--ls-cyan);
}

.live-screen-store-total,
.live-screen-overview-total {
  position: relative;
  display: grid;
  grid-template-columns: 35px 1fr;
  grid-template-rows: 22px 30px 25px;
  align-items: center;
  height: 78px;
  padding: 0 14px;
  border-right: 1px solid rgba(48, 166, 204, 0.24);
}

.live-screen-store-total > small,
.live-screen-overview-total > small {
  grid-column: 1 / -1;
  color: #5c9bb6;
  font-size: 11px;
}

.live-screen-store-total > strong,
.live-screen-overview-total > strong {
  align-self: center;
  color: #f7fcff;
  font: 800 21px/1 ui-monospace, Consolas, monospace;
}

.live-screen-store-total > span,
.live-screen-overview-total > span {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: #759caf;
  font-size: 9px;
}

.live-screen-store-total > span { grid-column: 2; grid-row: 2 / 4; flex-direction: column; align-items: flex-start; gap: 5px; }
.live-screen-overview-total { grid-template-columns: 1fr; }
.live-screen-overview-total > strong { color: var(--ls-gold); font-size: 18px; }
.live-screen-overview-total > span { gap: 18px; }
.live-screen-store-total b,
.live-screen-overview-total b { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; white-space: nowrap; }
.live-screen-store-total em,
.live-screen-overview-total em { color: #c6e8f4; font-style: normal; }

.live-screen-store-total i,
.live-screen-overview-total i,
.live-screen-map-legend i,
.live-screen-trend-card header span i {
  display: inline-block;
  width: 17px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.54);
  background: linear-gradient(#fff 0 33%, #1768d4 33% 66%, #e83f4d 66%);
}

.live-screen-store-total i.is-amazon,
.live-screen-overview-total i.is-amazon,
.live-screen-map-legend i.is-amazon,
.live-screen-trend-card header span i.is-amazon {
  background: repeating-linear-gradient(to bottom, #be3341 0 1px, #fff 1px 2px);
}

.live-screen-title {
  display: grid;
  grid-template-columns: 86px minmax(420px, 1fr) 86px;
  justify-content: center;
  align-items: start;
  gap: 10px;
  text-align: center;
}

.live-screen-title > span {
  position: relative;
  height: 48px;
  margin-top: 8px;
  border-top: 2px solid rgba(25, 219, 255, 0.9);
}

.live-screen-title > span:first-child { border-left: 2px solid rgba(25, 219, 255, 0.9); }
.live-screen-title > span:nth-of-type(2) { border-right: 2px solid rgba(25, 219, 255, 0.9); }
.live-screen-title > span::after {
  position: absolute;
  top: -5px;
  width: 8px;
  height: 8px;
  background: var(--ls-cyan);
  box-shadow: 0 0 14px var(--ls-cyan);
  transform: rotate(45deg);
  content: "";
}
.live-screen-title > span:first-child::after { right: -4px; }
.live-screen-title > span:nth-of-type(2)::after { left: -4px; }

.live-screen-title h1 {
  display: grid;
  gap: 6px;
  margin: 0;
  color: #cef5ff;
  font-size: clamp(28px, 2.2vw, 43px);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-shadow: 0 0 20px rgba(70, 216, 255, 0.3);
}
.live-screen-title h1 small {
  color: #43b7d4;
  font: 700 8px/1 ui-monospace, Consolas, monospace;
  letter-spacing: 0.52em;
}
.live-screen-title time {
  grid-column: 1 / -1;
  margin-top: -1px;
  color: #a8efff;
  font: 700 20px/1 ui-monospace, Consolas, monospace;
  letter-spacing: 0.13em;
}

.live-screen-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 9px;
}
.live-screen-status { display: grid; grid-template-columns: 8px auto; align-items: center; gap: 0 7px; }
.live-screen-status i,
.live-screen-ticker header i {
  grid-row: 1 / 3;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ls-cyan);
  box-shadow: 0 0 0 5px rgba(33, 215, 255, 0.08), 0 0 14px var(--ls-cyan);
  animation: live-screen-pulse 1.9s ease-in-out infinite;
}
.live-screen-status small { color: #5f8aa1; font-size: 10px; }
.live-screen-status strong { color: var(--ls-cyan); font-size: 14px; }
.live-screen-actions button {
  min-width: 46px;
  height: 34px;
  padding: 0 13px;
  color: #c4f1fb;
  border: 1px solid rgba(35, 196, 238, 0.52);
  border-radius: 7px;
  background: rgba(4, 29, 51, 0.72);
  cursor: pointer;
}
.live-screen-actions button:hover { color: #fff; border-color: var(--ls-cyan); background: rgba(7, 72, 101, 0.72); }

/* 三栏骨架；地图从中栏溢出成为整屏底图 */
.live-screen-grid {
  position: absolute;
  inset: 108px 0 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 21.5% 55% 23.5%;
  gap: 0;
}
.live-screen-left,
.live-screen-right { position: relative; z-index: 8; display: grid; min-width: 0; padding-top: 62px; }
.live-screen-left { grid-template-rows: 47% 53%; padding-left: 16px; }
.live-screen-right { grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 14px; }
.live-screen-center { position: relative; z-index: 2; display: grid; grid-template-rows: 112px 1fr 315px; min-width: 0; }

.live-screen-card,
.live-screen-ticker { position: relative; min-width: 0; overflow: hidden; }
.live-screen-card { background: transparent; }

.live-screen-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 31px;
  border: 0;
  background: rgba(3, 24, 44, 0.9);
}
.live-screen-tabs b {
  position: relative;
  display: grid;
  place-items: center;
  color: #5b8195;
  border-right: 1px solid rgba(24, 167, 211, 0.14);
  font-size: 11px;
  font-weight: 500;
}
.live-screen-tabs b.is-active { color: #b9edfa; }
.live-screen-tabs b.is-active::after {
  position: absolute;
  inset: auto 28% 0;
  height: 2px;
  background: var(--ls-cyan);
  box-shadow: 0 0 10px var(--ls-cyan);
  content: "";
}
.live-screen-table-head,
.live-screen-platform-row,
.live-screen-sales-head {
  display: grid;
  grid-template-columns: 1.05fr 0.72fr 1fr;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  gap: 8px;
}
.live-screen-table-head,
.live-screen-sales-head { color: #a8d5e6; background: rgba(7, 53, 87, 0.78); font-size: 11px; }
.live-screen-table-head span:not(:first-child),
.live-screen-platform-row strong,
.live-screen-platform-row em,
.live-screen-sales-head span:not(:first-child) { text-align: right; }
.live-screen-platform-row { min-height: 46px; color: #c9e8f2; font-size: 12px; }
.live-screen-platform-row b {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-width: 83px;
  height: 28px;
  padding: 0 10px;
  gap: 8px;
  color: #d9f8ff;
  border: 1px solid rgba(24, 216, 255, 0.72);
  border-radius: 3px;
  background: rgba(0, 132, 177, 0.16);
  box-shadow: 0 0 12px rgba(24, 216, 255, 0.18);
  font-size: 11px;
}
.live-screen-platform-row.is-amazon b { color: #ffe38a; border-color: rgba(255, 209, 90, 0.76); background: rgba(145, 99, 0, 0.16); box-shadow: 0 0 12px rgba(255, 209, 90, 0.18); }
.live-screen-platform-row b i { width: 8px; height: 8px; border-radius: 50%; background: var(--ls-cyan); box-shadow: 0 0 10px var(--ls-cyan); }
.live-screen-platform-row.is-amazon b i { background: var(--ls-gold); box-shadow: 0 0 10px var(--ls-gold); }
.live-screen-platform-row strong,
.live-screen-platform-row em { color: #edfaff; font: 700 12px/1 ui-monospace, Consolas, monospace; font-style: normal; }

.live-screen-ranking { align-self: stretch; }
.live-screen-ranking-list { display: grid; }
.live-screen-rank-row {
  display: grid;
  grid-template-columns: 0.72fr 1fr 0.72fr;
  align-items: center;
  min-height: 39px;
  padding: 0 14px;
  color: #e1f4fb;
  font: 700 12px/1 ui-monospace, Consolas, monospace;
}
.live-screen-rank-row span:nth-child(2),
.live-screen-rank-row span:nth-child(3) { text-align: right; }

.live-screen-kpis {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1.22fr;
  align-items: start;
  gap: 42px;
  padding: 0 18px;
}
.live-screen-kpis article {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 18px;
  padding-top: 1px;
}
.live-screen-kpis span { color: #a8cbd8; font-size: 14px; white-space: nowrap; }
.live-screen-kpis strong {
  color: var(--ls-gold);
  font: 800 clamp(38px, 3.2vw, 58px)/1 ui-monospace, Consolas, monospace;
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px rgba(255, 209, 90, 0.17);
  white-space: nowrap;
}
.live-screen-kpis small { display: none; }
.live-screen-number-flash { animation: live-screen-number-flash 720ms ease; }

.live-screen-map {
  position: absolute;
  z-index: 1;
  top: 135px;
  bottom: -65px;
  left: calc(-21.5vw + 15px);
  right: calc(-21.5vw + 15px);
  overflow: visible;
  pointer-events: none;
}
.live-screen-map::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 53% 50%, rgba(2, 55, 88, 0.2), transparent 63%);
  content: "";
}
.live-screen-map > svg { position: absolute; z-index: 2; top: 4%; left: -1%; width: 80%; height: 91%; overflow: visible; translate: 4.35vw 5px; transform: scale(1.175, 1.183); transform-origin: center; }
.live-screen-world-images { position: absolute; z-index: 1; top: 4%; left: -1%; width: 80%; height: 91%; translate: 4.35vw 5px; transform: scale(1.175, 1.183); transform-origin: center; }
.live-screen-world-images img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0.96; filter: drop-shadow(0 0 4px rgba(23, 195, 241, 0.22)); }
.live-screen-world-images img.is-north-america,
.live-screen-world-images img.is-australia { filter: drop-shadow(0 0 4px rgba(255, 200, 52, 0.28)); }
.live-screen-map-label { display: none; }
.live-screen-map-lines path { fill: none; stroke: rgba(45, 165, 202, 0.05); stroke-width: 1; stroke-dasharray: 3 9; }
.live-screen-route-lines path { fill: none; stroke: rgba(225, 248, 255, 0.28); stroke-width: 1.3; stroke-dasharray: 4 7; filter: url(#liveScreenGlow); animation: live-screen-route 5s linear infinite; }
.live-screen-route-beams path { fill: none; stroke: url(#liveScreenRouteGlow); stroke-width: 8; stroke-linecap: round; opacity: 0.22; filter: url(#liveScreenGlow); }
.live-screen-route-particle { fill: none; stroke: rgba(235, 254, 255, 0.97); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2.2px rgba(113, 235, 255, 0.9)); will-change: transform, opacity; }
.live-screen-route-particle.is-secondary { stroke: rgba(118, 229, 249, 0.82); stroke-width: 0.85; }
.live-screen-map-hubs circle:first-child { fill: rgba(34, 184, 255, 0.08); stroke: rgba(38, 210, 255, 0.45); animation: live-screen-map-ring 2.8s ease-out infinite; }
.live-screen-map-hubs circle:nth-child(2) { fill: #45d7ff; filter: url(#liveScreenGlow); }
.live-screen-map-hubs text { fill: #d5f6ff; font: 700 10px/1 ui-monospace, Consolas, monospace; text-anchor: middle; }
.live-screen-map-hubs .is-amazon circle:nth-child(2) { fill: var(--ls-gold); }
.live-screen-map-hubs .is-amazon text { fill: #ffe394; }
.live-screen-map-hubs .is-source circle:nth-child(2) { fill: #e4f8ff; }
.live-screen-source-cloud circle { fill: rgba(225, 248, 255, 0.82); filter: url(#liveScreenGlow); animation: live-screen-cloud 2.7s ease-in-out infinite alternate; }
.live-screen-source-cloud circle:nth-child(2n) { animation-delay: -1.2s; }
.live-screen-country-flag { transform-box: fill-box; transform-origin: center; }
.live-screen-country-flag use { filter: drop-shadow(0 0 5px rgba(206, 246, 255, 0.75)); }
.live-screen-bubble { transform-box: fill-box; transform-origin: center; }
.live-screen-bubble circle:first-child { fill: rgba(52, 205, 255, 0.018); stroke: rgba(56, 211, 255, 0.25); stroke-width: 0.65; animation: live-screen-map-ring var(--bubble-speed, 3s) ease-out var(--bubble-delay, 0s) infinite; }
.live-screen-bubble circle:nth-child(2) { fill: none; stroke: rgba(83, 217, 255, 0.42); stroke-width: 0.72; animation: live-screen-map-ring var(--bubble-speed-fast, 2.46s) ease-out calc(var(--bubble-delay, 0s) - 0.72s) infinite; }
.live-screen-bubble circle:nth-child(3) { fill: rgba(48, 171, 255, 0.16); stroke: rgba(104, 222, 255, 0.34); animation: live-screen-core-breathe var(--bubble-speed-core, 2.04s) ease-in-out var(--bubble-delay, 0s) infinite alternate; }
.live-screen-bubble circle:nth-child(4) { fill: rgba(48, 171, 255, 0.64); stroke: rgba(178, 244, 255, 0.94); filter: url(#liveScreenGlow); }
.live-screen-bubble.is-amazon circle:first-child { fill: rgba(255, 203, 72, 0.06); stroke: rgba(255, 208, 78, 0.32); }
.live-screen-bubble.is-amazon circle:nth-child(2) { fill: none; stroke: rgba(255, 218, 102, 0.38); }
.live-screen-bubble.is-amazon circle:nth-child(3) { fill: rgba(255, 207, 73, 0.2); stroke: rgba(255, 224, 118, 0.38); }
.live-screen-bubble.is-amazon circle:nth-child(4) { fill: rgba(255, 207, 73, 0.82); stroke: rgba(255, 241, 184, 0.98); }
.live-screen-map-legend { position: absolute; z-index: 6; right: 18%; bottom: 88px; display: flex; align-items: center; gap: 13px; color: #769fb1; font-size: 9px; }
.live-screen-map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.live-screen-map-legend small { color: #4d7587; }

.live-screen-ticker {
  z-index: 12;
  grid-row: 3;
  align-self: stretch;
  margin-right: 14px;
  margin-left: 18px;
  border-top: 1px solid rgba(24, 216, 255, 0.58);
  background: rgba(1, 12, 24, 0.78);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.16);
}
.live-screen-ticker::before,
.live-screen-trend-card::before {
  position: absolute;
  inset: 0 auto auto 0;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, var(--ls-cyan), transparent);
  box-shadow: 0 0 10px rgba(33, 215, 255, 0.55);
  content: "";
}
.live-screen-ticker > header,
.live-screen-trend-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 35px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(43, 173, 217, 0.17);
  background: linear-gradient(90deg, rgba(5, 74, 108, 0.48), transparent 72%);
}
.live-screen-ticker header div { display: flex; align-items: center; gap: 8px; }
.live-screen-ticker header span { color: #bcefff; font-size: 13px; }
.live-screen-ticker header small { color: #4da7c2; font: 700 8px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.16em; }
.live-screen-ticker header > b { color: #53a8c3; font-size: 9px; font-weight: 500; }
.live-screen-ticker-head,
.live-screen-ticker-row { display: grid; grid-template-columns: 0.65fr 0.72fr 0.88fr 1.15fr 0.92fr 0.82fr; align-items: center; min-height: 35px; padding: 0 12px; gap: 8px; }
.live-screen-ticker-head { color: #8ab8ca; background: rgba(7, 53, 87, 0.76); font-size: 10px; }
.live-screen-ticker-row { color: #c4e0e9; border-top: 1px solid rgba(51, 142, 177, 0.08); font-size: 10px; }
.live-screen-ticker-row.is-new { animation: live-screen-row-in 700ms cubic-bezier(.22,.8,.25,1); }
.live-screen-ticker-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-screen-ticker-row b { display: inline-flex; align-items: center; width: fit-content; padding: 3px 8px; color: #c8f5ff; border: 1px solid rgba(34, 211, 255, 0.46); border-radius: 2px; background: rgba(4, 109, 144, 0.2); font-size: 9px; }
.live-screen-ticker-row b.is-amazon { color: #ffe28c; border-color: rgba(255, 210, 90, 0.48); background: rgba(142, 100, 6, 0.16); }
.live-screen-ticker-row em { color: #f2fbff; text-align: right; font: 700 10px/1 ui-monospace, Consolas, monospace; font-style: normal; }
.live-screen-ticker-row time { color: #6c98a9; text-align: right; }

.live-screen-trend-card { border-top: 1px solid rgba(24, 216, 255, 0.58); background: rgba(2, 17, 32, 0.72); }
.live-screen-trend-card > header { height: 45px; }
.live-screen-trend-card header div { display: grid; gap: 2px; }
.live-screen-trend-card header small { color: #49bce0; font: 700 8px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.15em; }
.live-screen-trend-card header h2 { margin: 0; color: #c3efff; font-size: 13px; font-weight: 600; }
.live-screen-trend-card header h2::before { display: inline-block; width: 4px; height: 14px; margin-right: 7px; background: linear-gradient(#8cf3ff, #0ec8ee); box-shadow: 4px 0 0 rgba(22, 179, 218, 0.28); vertical-align: -2px; content: ""; }
.live-screen-trend-card header > strong { color: var(--ls-gold); font: 700 8px/1 ui-monospace, Consolas, monospace; }
.live-screen-trend-card header > span { display: flex; align-items: center; gap: 5px; color: #8aafbe; font-size: 8px; }
.live-screen-trend-card > svg { position: absolute; z-index: 2; inset: 57px 8px 22px 48px; width: calc(100% - 56px); height: calc(100% - 79px); overflow: visible; }
.live-screen-chart-scale { position: absolute; z-index: 3; top: 57px; bottom: 22px; left: 7px; display: flex; flex-direction: column; justify-content: space-between; color: #4b7b91; font: 700 7px/1 ui-monospace, Consolas, monospace; }
.live-screen-chart-axis { position: absolute; z-index: 3; inset: auto 9px 7px 48px; display: flex; justify-content: space-between; color: #4c7c91; font: 700 8px/1 ui-monospace, Consolas, monospace; }
.live-screen-chart-grid { fill: none; stroke: rgba(63, 144, 176, 0.17); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.live-screen-chart-area { fill: url(#liveScreenAreaGradient); stroke: none; transition: d 700ms ease; }
.live-screen-chart-line { fill: none; stroke: var(--ls-cyan); stroke-width: 2.4; filter: drop-shadow(0 0 5px rgba(33, 215, 255, 0.86)); vector-effect: non-scaling-stroke; transition: d 700ms ease; }
.live-screen-chart-line.is-amazon { stroke: var(--ls-gold); filter: drop-shadow(0 0 5px rgba(255, 210, 90, 0.78)); }
.live-screen-chart-dots circle { fill: #effdff; stroke: var(--ls-cyan); stroke-width: 4; filter: drop-shadow(0 0 6px var(--ls-cyan)); }
.live-screen-trend-card::after { position: absolute; z-index: 1; top: 48px; bottom: 5px; width: 20%; background: linear-gradient(90deg, transparent, rgba(55, 224, 255, 0.07), transparent); transform: translateX(-150%); animation: live-screen-chart-sweep 6s ease-in-out infinite; content: ""; pointer-events: none; }

.live-screen-footer { position: absolute; z-index: 30; inset: auto 17px 3px; display: flex; align-items: center; gap: 8px; color: #315f72; font: 700 7px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.14em; pointer-events: none; }
.live-screen-footer i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(36, 186, 226, 0.2), transparent); }
.live-screen-footer small { color: #3b7890; letter-spacing: 0; }

@keyframes live-screen-pulse { 50% { opacity: 0.45; transform: scale(0.75); } }
@keyframes live-screen-scan { 0%, 20% { transform: translateX(-100%); } 78%, 100% { transform: translateX(100%); } }
@keyframes live-screen-route { to { stroke-dashoffset: -44; } }
@keyframes live-screen-map-ring { from { opacity: 0.9; transform: scale(0.45); } to { opacity: 0; transform: scale(1.35); } }
@keyframes live-screen-core-breathe { from { opacity: 0.32; transform: scale(0.72); } to { opacity: 0.9; transform: scale(1.16); } }
@keyframes live-screen-row-in { from { opacity: 0; transform: translateY(-12px); background: rgba(26, 187, 228, 0.22); } to { opacity: 1; transform: translateY(0); background: transparent; } }
@keyframes live-screen-number-flash { 25% { color: #fff; text-shadow: 0 0 25px currentColor; transform: translateY(-2px); } }
@keyframes live-screen-chart-sweep { 0%, 20% { left: -30%; } 70%, 100% { left: 120%; } }
@keyframes live-screen-cloud { to { opacity: 0.48; transform: translateY(-3px); } }

@media (max-width: 1450px) {
  .live-screen-header { grid-template-columns: 32% 44% 24%; padding-inline: 14px; }
  .live-screen-brand { grid-template-columns: 46px 150px minmax(160px, 1fr); }
  .live-screen-store-total, .live-screen-overview-total { padding-inline: 9px; }
  .live-screen-title { grid-template-columns: 60px minmax(400px, 1fr) 60px; }
  .live-screen-kpis { gap: 25px; padding-inline: 8px; }
  .live-screen-kpis span { font-size: 12px; }
  .live-screen-platform-row strong, .live-screen-platform-row em { font-size: 10px; }
}

@media (max-height: 820px) {
  .live-screen-header { height: 92px; }
  .live-screen-grid { top: 92px; }
  .live-screen-title h1 { font-size: 28px; }
  .live-screen-title time { font-size: 16px; }
  .live-screen-left, .live-screen-right { padding-top: 50px; }
  .live-screen-center { grid-template-rows: 92px 1fr 250px; }
  .live-screen-kpis strong { font-size: 36px; }
  .live-screen-map { top: 104px; }
  .live-screen-ticker-head, .live-screen-ticker-row { min-height: 29px; }
  .live-screen-ranking-list .live-screen-rank-row:nth-child(n+6) { display: none; }
}

@media (max-width: 1180px) { .live-screen { overflow-x: auto; } }

@media (prefers-reduced-motion: reduce) {
  .live-screen *,
  .live-screen *::before,
  .live-screen *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Reference-calibrated 1569 × 914 stage. All layers scale from one frame. */
.live-screen { min-width:0; min-height:0; background:radial-gradient(ellipse at 50% 0,rgba(0,40,100,.2),transparent 55%),linear-gradient(#020816,#01060f,#000308); }
.live-screen-stage { position:absolute; left:0; top:0; width:1569px; height:914px; transform-origin:0 0; overflow:visible; font-weight:400; will-change:transform; }
.live-screen-stage *, .live-screen-stage *::before, .live-screen-stage *::after { box-sizing:border-box; }
.live-screen-stage .live-screen-header { position:absolute; inset:0 0 auto; height:108px; display:block; padding:0; }
.live-screen-stage .live-screen-brand { position:absolute; left:calc(23px - var(--ls-side-spread, 0px)); top:6px; width:428px; grid-template-columns:48px 183px 197px; height:80px; }
.live-screen-stage .live-screen-live-mark { width:32px; height:36px; margin-top:23px; font-weight:400; background:linear-gradient(60deg,transparent 12%,#00b8e6 12.5% 14%,transparent 14.5% 85%,#00b8e6 85.5% 87%,transparent 87.5%),linear-gradient(-60deg,transparent 12%,#00b8e6 12.5% 14%,transparent 14.5% 85%,#00b8e6 85.5% 87%,transparent 87.5%); }
.live-screen-stage .live-screen-store-total { grid-template-columns:1fr; grid-template-rows:22px 24px 28px; padding:0 6px; border:0; }
.live-screen-stage .live-screen-store-total > small { text-align:center; padding-right:42px; }
.live-screen-stage .live-screen-store-total > strong { font:700 17px Consolas,monospace; }
.live-screen-stage .live-screen-store-total > span { grid-column:1; grid-row:3; flex-direction:row; gap:13px; }
.live-screen-stage .live-screen-store-total b { font-size:10px; width:65px; white-space:normal; flex-wrap:wrap; gap:3px; }
.live-screen-stage .live-screen-store-total em { margin-left:29px; }
.live-screen-stage .live-screen-overview-total { grid-template-rows:18px 20px 42px; padding:0 14px; border-left:1px solid #09344a; border-right:0; }
.live-screen-stage .live-screen-overview-total > strong { font-size:17px; }
.live-screen-stage .live-screen-overview-total > span { gap:4px; align-items:flex-start; font-size:16px; flex-wrap:wrap; }
.live-screen-stage .live-screen-overview-total b { gap:0; }
.live-screen-stage .live-screen-overview-total i { width:28px; height:17px; }
.live-screen-stage .live-screen-title { position:absolute; top:12px; left:473px; width:617px; height:85px; display:block; }
.live-screen-stage .live-screen-title h1 { height:46px; line-height:46px; font-size:32px; font-weight:400; letter-spacing:8px; background:linear-gradient(90deg,transparent,#062345,transparent); }
.live-screen-stage .live-screen-title h1 small { display:none; }
.live-screen-stage .live-screen-title > span { position:absolute; top:0; width:10px; height:44px; margin:0; border-top:2px solid #00b8e6; border-bottom:2px solid #00b8e6; }
.live-screen-stage .live-screen-title > span:first-child { left:0; }
.live-screen-stage .live-screen-title > span:nth-of-type(2) { right:0; }
.live-screen-stage .live-screen-title > span::after { width:4px; height:4px; top:-9px; }
.live-screen-stage .live-screen-title::before { content:""; position:absolute; height:1px; top:-7px; left:46px; right:46px; background:linear-gradient(90deg,#00637d,#00b8e6,#00637d); }
.live-screen-stage .live-screen-title::after { content:""; position:absolute; left:50%; top:-11px; width:8px; height:8px; background:#00b8e6; transform:rotate(45deg); }
.live-screen-stage .live-screen-title time { display:block; margin-top:12px; font-size:23px; letter-spacing:2px; }
.live-screen-stage .live-screen-actions { position:absolute; top:8px; right:calc(24px - var(--ls-side-spread, 0px)); padding:0; gap:16px; }
.live-screen-stage .live-screen-actions button { min-width:38px; height:28px; padding:0 12px; font-size:12px; }
.live-screen-stage .live-screen-grid { inset:0; display:block; }
.live-screen-stage .live-screen-left { position:absolute; left:calc(13px - var(--ls-side-spread, 0px)); top:168px; width:323px; height:746px; padding:0; display:block; }
.live-screen-stage .live-screen-platforms { height:176px; }
.live-screen-stage .live-screen-ranking { position:absolute; top:381px; left:0; width:100%; }
.live-screen-stage .live-screen-right { position:absolute; left:calc(1197px + var(--ls-side-spread, 0px)); top:168px; width:354px; height:738px; padding:0; grid-template-rows:230px 230px 230px; gap:24px; }
.live-screen-stage .live-screen-center { position:static; display:block; }
.live-screen-stage .live-screen-kpis { position:absolute; left:326px; top:109px; width:917px; display:flex; justify-content:space-between; gap:90px; padding:0; }
.live-screen-stage .live-screen-kpis article { display:flex; align-items:baseline; gap:16px; padding:0; }
.live-screen-stage .live-screen-kpis span { font-size:16px; letter-spacing:1px; }
.live-screen-stage .live-screen-kpis strong { font:700 48px/1.1 Consolas,monospace; letter-spacing:2px; color:#ffd866; text-shadow:none; }
.live-screen-stage .live-screen-number-flash { animation:live-screen-gold-update .65s ease-out; }
@keyframes live-screen-gold-update { 40% { text-shadow:0 0 8px #ffd86655; } }
.live-screen-stage .live-screen-map { position:absolute; inset:0; width:1569px; height:914px; }
.live-screen-stage .live-screen-map > svg,
.live-screen-stage .live-screen-world-images { inset:0; width:1569px; height:914px; transform:none; translate:none; }
.live-screen-stage .live-screen-world-images img { filter:none; opacity:.95; }
.live-screen-stage .live-screen-motion-canvas { position:absolute; inset:0; width:1569px; height:914px; z-index:2; pointer-events:none; }
.live-screen-stage .live-screen-map-lines,
.live-screen-stage .live-screen-route-lines,
.live-screen-stage .live-screen-map-legend,
.live-screen-stage .live-screen-footer { display:none; }
.live-screen-stage .live-screen-route-beams path { stroke:none; opacity:0; filter:none; }
.live-screen-stage .live-screen-route-particle { fill:#aef4ff; stroke:none; filter:none; }
.live-screen-stage .live-screen-country-flag use { filter:drop-shadow(0 1px 2px #000); }
.live-screen-stage .live-screen-country-flag text { fill:#fff; font:700 11px Arial,sans-serif; text-anchor:middle; paint-order:stroke; stroke:#001226; stroke-width:3px; }
.live-screen-stage .live-screen-bubble { --point-color:#3fb6ff; }
.live-screen-stage .live-screen-bubble.is-amazon { --point-color:#ffd866; }
.live-screen-stage .live-screen-bubble circle:nth-child(-n+3) { fill:none; stroke:var(--point-color); stroke-width:.8; vector-effect:non-scaling-stroke; transform-box:view-box; transform-origin:0 0; animation:live-screen-reference-ring 2.8s linear infinite; animation-delay:var(--bubble-delay); filter:none; }
.live-screen-stage .live-screen-bubble circle:nth-child(2) { animation-delay:calc(var(--bubble-delay) - .933s); }
.live-screen-stage .live-screen-bubble circle:nth-child(3) { animation-delay:calc(var(--bubble-delay) - 1.867s); }
.live-screen-stage .live-screen-bubble circle:nth-child(4) { fill:var(--point-color); stroke:none; filter:none; animation:none; opacity:.97; }
@keyframes live-screen-reference-ring { from { transform:scale(1); opacity:.55; } to { transform:scale(4); opacity:0; } }
.live-screen-stage .live-screen-source circle { fill:none; stroke:#aef4ff; stroke-width:.8; filter:none; animation:live-screen-reference-ring 3s linear infinite; animation-delay:var(--source-delay); transform-origin:0 0; }
.live-screen-stage .live-screen-source circle:nth-child(2) { animation-delay:calc(var(--source-delay) - 1s); }
.live-screen-stage .live-screen-source circle:nth-child(3) { animation-delay:calc(var(--source-delay) - 2s); }
.live-screen-stage .live-screen-source circle:last-child { fill:#aef4ff; animation:none; }
.live-screen-stage .live-screen-tabs { height:30px; background:linear-gradient(#04182b55,transparent); }
.live-screen-stage .live-screen-tabs b { font-size:12px; border:0; }
.live-screen-stage .live-screen-tabs b:first-child { border-right:1px solid #063147; }
.live-screen-stage .live-screen-tabs b.is-active::after { inset:auto 32% 0; height:1px; background:linear-gradient(90deg,transparent,#00b8e6,transparent); box-shadow:none; }
.live-screen-stage .live-screen-table-head,
.live-screen-stage .live-screen-sales-head { min-height:37px; background:#07203f; color:#cfe9ff; font-size:13px; }
.live-screen-stage .live-screen-platform-row { min-height:43px; }
.live-screen-stage .live-screen-platform-row b { min-width:62px; height:24px; font:700 11px Consolas,monospace; letter-spacing:.5px; border-radius:1px; }
.live-screen-stage .live-screen-platform-row b i,
.live-screen-stage .live-screen-ticker-row b i { display:inline-block; width:16px; height:10px; border:1px solid #ffffff55; border-radius:0; background:linear-gradient(#fff 0 33%,#1769cf 33% 66%,#e73d4c 66%); box-shadow:none; }
.live-screen-stage .live-screen-platform-row.is-amazon b i,
.live-screen-stage .live-screen-ticker-row b.is-amazon i { background:repeating-linear-gradient(#c93443 0 1px,#fff 1px 2px); }
.live-screen-stage .live-screen-platform-row strong,
.live-screen-stage .live-screen-platform-row em { font:400 13px Consolas,monospace; }
.live-screen-stage .live-screen-sales-head { min-height:56px; }
.live-screen-stage .live-screen-rank-row { min-height:39px; font:400 13px Consolas,monospace; }
.live-screen-stage .live-screen-ranking-list .live-screen-rank-row:nth-child(n+6) { display:grid; }
.live-screen-stage .live-screen-ticker { position:absolute; top:610px; left:348px; width:833px; height:304px; margin:0; border:0; background:transparent; box-shadow:none; }
.live-screen-stage .live-screen-ticker::before,
.live-screen-stage .live-screen-trend-card::before { display:none; }
.live-screen-stage .live-screen-ticker > header,
.live-screen-stage .live-screen-trend-card > header { position:relative; height:30px; padding:0 12px; background:linear-gradient(105deg,#007d9655,transparent 45%); border-bottom:1px solid #00698177; }
.live-screen-stage .live-screen-ticker > header { width:calc(100% - 24px); margin-bottom:6px; }
.live-screen-stage .live-screen-ticker header span { font-size:15px; font-weight:400; letter-spacing:1px; }
.live-screen-stage .live-screen-ticker header small { font-style:italic; font-size:10px; }
.live-screen-stage .live-screen-ticker header > b { font-size:0; }
.live-screen-stage .live-screen-ticker header > b::after,
.live-screen-stage .live-screen-trend-card header::after { content:"•••"; color:#0089aa; font-size:12px; letter-spacing:2px; position:absolute; right:14px; top:8px; }
.live-screen-stage .live-screen-ticker-head,
.live-screen-stage .live-screen-ticker-row { grid-template-columns:90px 120px 170px 170px 160px 99px; gap:0; padding:0 12px; min-height:33px; font:13px Consolas,"Microsoft YaHei",monospace; }
.live-screen-stage .live-screen-ticker-head > span { text-align:center; }
.live-screen-stage .live-screen-ticker-head { background:#07203f; color:#cfe9ff; font-size:13px; }
.live-screen-stage .live-screen-ticker-row { border:0; }
.live-screen-stage .live-screen-ticker-row > span:first-child { text-align:center; }
.live-screen-stage .live-screen-ticker-row > span:nth-child(3) { text-align:center; }
.live-screen-stage .live-screen-ticker-row b { display:inline-flex; gap:5px; padding:3px 8px; font:700 11px Consolas,monospace; }
.live-screen-stage .live-screen-ticker-row em { font:700 12px Consolas,monospace; }
.live-screen-stage .live-screen-ticker-row time { color:#5a8bb8; font-size:12px; }
.live-screen-stage .live-screen-trend-card { overflow:visible; background:transparent; border:0; }
.live-screen-stage .live-screen-trend-card::after { display:none; }
.live-screen-stage .live-screen-trend-card header small { display:none; }
.live-screen-stage .live-screen-trend-card header h2 { font:400 15px Arial,"Microsoft YaHei",sans-serif; letter-spacing:1px; }
.live-screen-stage .live-screen-trend-card header > strong { position:absolute; top:51px; right:26px; font:9px Consolas,monospace; }
.live-screen-stage .live-screen-trend-card header > span { font-size:10px; padding-right:20px; gap:4px; }
.live-screen-stage .live-screen-trend-card > svg { inset:59px 20px 24px 65px; width:269px; height:155px; }
.live-screen-stage .live-screen-chart-scale { top:57px; bottom:33px; left:7px; color:#5a8bb8; font:9px Consolas,monospace; }
.live-screen-stage .live-screen-chart-axis { inset:auto 30px 8px 80px; font:9px Consolas,monospace; color:#5a8bb8; }
.live-screen-stage .live-screen-chart-line { stroke-width:1.4; filter:drop-shadow(0 0 3px #00d8ee88); }
.live-screen-stage .live-screen-chart-dots circle { stroke:#00d8ee; stroke-width:1; fill:#aef4ff; filter:drop-shadow(0 0 4px #00d8ee); }
.live-screen-stage .live-screen-chart-dots circle:first-child { fill:#00d8ee44; stroke-width:2; }
.live-screen-stage .live-screen-chart-dots rect { fill:#053342; stroke:#009aaf; stroke-width:1.5; }
.live-screen-stage .live-screen-chart-dots text { fill:#fff; text-anchor:middle; font:700 11px Consolas,monospace; }
.live-screen-stage .live-screen-chart-dots .is-amazon circle { stroke:#ffd866; fill:#ffd866; filter:drop-shadow(0 0 4px #ffd866); }
.live-screen-stage .live-screen-chart-dots .is-amazon rect { fill:#302807; stroke:#b5943a; }
@media (max-width:1180px) { .live-screen { overflow:hidden; } }
@media (prefers-reduced-motion:reduce) { .live-screen-stage * { animation:none!important; transition:none!important; } }