:root {
    color-scheme: dark;
    --bg: #061329;
    --panel: #0a2340;
    --text: #e7f3ff;
    --muted: #83a6c8;
    --cyan: #53e6fa;
    --blue: #4a98ff;
    --green: #68e3b2;
    --amber: #ffc56d;
    --line: rgba(82, 174, 217, .25);
    --gap: clamp(10px, 1cqw, 18px);
    --number-font: 'DIN Alternate', Bahnschrift, 'Arial Narrow', monospace;
}
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; color: var(--text); font-family: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif; background: radial-gradient(ellipse at 50% -10%, #133a66 0, transparent 55%), radial-gradient(ellipse at 5% 80%, #092744 0, transparent 40%), var(--bg); }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(82,174,217,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(82,174,217,.13) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(transparent, #000); }
p, h1, h2 { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.screen-frame { position: absolute; width: 1920px; height: 1080px; container-type: size; transform-origin: top left; }
.screen { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; gap: var(--gap); padding: clamp(12px, 1.1cqw, 22px); }
.screen-header { display: grid; grid-template-columns: 1fr 1.7fr 1fr; align-items: center; gap: var(--gap); min-height: clamp(76px, 7.5cqh, 92px); flex-shrink: 0; }
.location { font-size: 12px; color: var(--muted); white-space: nowrap; line-height: 1.4; }
.location span { margin-left: 10px; color: #7095b5; }
.clock-line { display: flex; align-items: center; margin: 3px 0; }
.clock-line time { font-family: var(--number-font); font-variant-numeric: tabular-nums; font-size: 62px; line-height: 1; letter-spacing: 2px; }
.date { font-size: 32px; line-height: 1.08; color: #bed7ee; white-space: nowrap; }
.screen-brand { position: relative; align-self: center; text-align: center; padding-bottom: 8px; border-bottom: 1px solid rgba(83,230,250,.35); }
.screen-brand::before, .screen-brand::after { content: ''; position: absolute; bottom: -1px; width: 30px; height: 2px; background: var(--cyan); }
.screen-brand::before { left: 0; }
.screen-brand::after { right: 0; }
.brand-kicker { color: #73afcf; font-size: 9px; letter-spacing: 4px; }
.screen-brand h1 { font-size: clamp(25px, 2.2cqw, 42px); line-height: 1.4; letter-spacing: 5px; font-weight: 650; text-shadow: 0 0 24px rgba(98,192,245,.25); }
.brand-subtitle { font-size: 11px; letter-spacing: 2px; color: var(--muted); }
.weather-box { justify-self: end; max-width: 100%; text-align: right; }
.weather { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.weather>img { height: 72px; width: 72px; object-fit: contain; }
.weather>img[hidden] { display: none; }
#weather { display: grid; grid-template-columns: auto auto; gap: 3px 10px; align-items: baseline; text-align: left; }
#weatherCondition { font-size: 26px; }
#weatherTemperature { color: var(--cyan); font-family: var(--number-font); font-size: 64px; line-height: 1; }
.weather-range { grid-column: 1 / -1; color: #bed7ee; font-size: 19px; text-align: right; white-space: nowrap; }
.weather-meta { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: flex-end; gap: 8px; margin-top: 5px; color: #7095b5; font-size: 10px; line-height: 13px; white-space: nowrap; }
.weather-meta>span, .weather-sources { flex-shrink: 0; }
.weather-sources { display: inline-flex; align-items: baseline; padding-left: 8px; border-left: 1px solid var(--line); }
#weather[data-status='stale'], #weather[data-status='unavailable'] { color: var(--amber); }

/* Keep the existing header footprint while enlarging its information groups. */
.site-clock, .weather-box { position: relative; height: 84px; width: 100%; }
.clock-content, .weather-content { position: absolute; top: 50%; transform: translateY(-50%); }
.clock-content { left: clamp(24px,3.5cqw,72px); }
.weather-content { right: clamp(24px,3.5cqw,72px); }
.screen {
    --station-metric-min: clamp(164px,10cqw,192px);
    --station-list-min: clamp(258px,17.5cqw,340px);
    --station-history-min: clamp(150px,10cqw,192px);
    --arrival-hero-min: clamp(224px,13.5cqw,260px);
    --arrival-history-min: clamp(142px,9.5cqw,184px);
    --order-summary-min: clamp(128px,13.5cqh,150px);
    --order-types-min: clamp(190px,16cqw,272px);
    --order-matrix-min: clamp(260px,17cqw,328px);
}
.screen>.dashboard-grid { min-height: max(calc(var(--station-metric-min) + var(--station-list-min) + var(--station-history-min) + var(--gap) * 2),calc(var(--arrival-hero-min) + 185px + var(--arrival-history-min) + var(--gap) * 2),calc(var(--order-summary-min) + var(--order-types-min) + var(--order-matrix-min) + var(--gap) * 2)); }
.screen .station-column { grid-template-rows: minmax(var(--station-metric-min),.9fr) minmax(var(--station-list-min),1.55fr) minmax(var(--station-history-min),.65fr); }
.screen .arrival-column { grid-template-rows: minmax(var(--arrival-hero-min),1.05fr) minmax(185px,1.55fr) minmax(var(--arrival-history-min),.8fr); }
.screen .order-column { grid-template-rows: var(--order-summary-min) minmax(var(--order-types-min),.8fr) minmax(var(--order-matrix-min),1fr); }


.dashboard-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: var(--gap); }
.column { display: grid; gap: var(--gap); min-width: 0; min-height: 0; }
.station-column { grid-template-rows: minmax(164px,.9fr) minmax(240px,1.55fr) minmax(150px,.65fr); }
.arrival-column { grid-template-rows: minmax(200px,1.05fr) minmax(185px,1.55fr) minmax(142px,.8fr); }
.order-column { grid-template-rows: clamp(128px,13.5cqh,150px) clamp(153px,20cqh,224px) minmax(218px,1fr); }
.panel { min-height: 0; min-width: 0; position: relative; padding: clamp(12px, 1cqw, 20px); border: 1px solid var(--line); background: linear-gradient(150deg, rgba(13,52,86,.88), rgba(7,27,52,.88)); box-shadow: inset 0 0 32px rgba(53,116,154,.07); animation: panel-enter .7s ease-out both; }
.panel::before { content: ''; position: absolute; inset: -1px; pointer-events: none; background: linear-gradient(var(--cyan),var(--cyan)) left top / 22px 2px no-repeat, linear-gradient(var(--cyan),var(--cyan)) left top / 2px 13px no-repeat, linear-gradient(#3d8aaa,#3d8aaa) right bottom / 22px 2px no-repeat, linear-gradient(#3d8aaa,#3d8aaa) right bottom / 2px 13px no-repeat; }
.column:nth-child(2) .panel { animation-delay: .1s; }
.column:nth-child(3) .panel { animation-delay: .2s; }
.panel-heading { min-height: 22px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid rgba(105,172,210,.17); }
.panel-heading h2 { display: flex; align-items: center; gap: 7px; font-size: clamp(12px, .94cqw, 17px); font-weight: 550; letter-spacing: 1px; }
.panel-heading h2::before { content: ''; width: 3px; height: 12px; background: var(--cyan); box-shadow: 0 0 9px rgba(83,230,250,.35); }
.module-tag, .panel-unit { color: var(--muted); white-space: nowrap; font-size: 10px; }
.module-tag { border: 1px solid rgba(105,172,210,.24); padding: 1px 5px; }
.metric-label { font-size: clamp(11px, .84cqw, 15px); color: var(--muted); }
.metric-panel>.metric-label { margin-top: clamp(6px, 1.2cqh, 15px); }
.metric-value { display: flex; align-items: baseline; gap: 9px; position: relative; z-index: 1; }
.metric-value strong { color: var(--cyan); font-family: var(--number-font); font-size: clamp(38px, 3.3cqw, 68px); line-height: 1.17; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.metric-value>span { color: var(--muted); font-size: 12px; }
.volume-totals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 24px; }
.volume-totals>div+div { padding-left: 12px; border-left: 1px solid var(--line); }
.volume-totals .metric-label { font-size: 18px; line-height: 1.3; }
.volume-totals .metric-value { gap: 6px; margin-top: 4px; }
.volume-totals .metric-value strong { font-size: 64px; line-height: 1.1; letter-spacing: 0; }
.volume-totals .metric-value>span { font-size: 14px; }
#outboundTotal { color: var(--green); }
.metric-foot { position: absolute; left: clamp(12px,1cqw,20px); right: clamp(12px,1cqw,20px); bottom: 12px; display: flex; justify-content: space-between; gap: 4px; color: var(--muted); font-size: 10px; }
.metric-foot b { color: var(--green); font-weight: 500; }
.signal-dot, .legend-dot, .type-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.signal-dot { margin-right: 5px; box-shadow: 0 0 8px rgba(104,227,178,.45); }
.legend-dot { margin-right: 6px; background: var(--amber); }
.warehouse-symbol { position: absolute; right: 18px; top: 45px; width: clamp(44px,4.5cqw,84px); height: auto; stroke: #63c9e6; stroke-width: 1; opacity: .28; }
.station-panel { display: flex; flex-direction: column; }
.station-list { flex: 1; display: flex; flex-direction: column; gap: 5px; min-height: 0; padding-top: 5px; }
.station-column .station-list { overflow-y: auto; }
.station-column .station-list { gap: 1px; padding-top: 3px; }
.station-column .station-item { flex: 1 0 48px; border-bottom: 1px solid rgba(105,172,210,.12); padding: 0; }
.station-column .metric-panel>.metric-label { margin-top: 6px; }
.station-column .station-item-heading { gap: 7px; line-height: clamp(16px,1.2cqw,22px); }
.station-column .station-name { min-width: 0; flex: 1; gap: 7px; }
.station-details { min-width: 0; }
.station-column .station-name strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; letter-spacing: 0; }
.station-column .station-index, .station-counts { flex-shrink: 0; }
.station-counts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 230px; align-items: center; gap: 12px; font-family: var(--number-font); white-space: nowrap; color: var(--cyan); }
.station-counts>span { display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: baseline; gap: 4px; }
.station-counts small { font-family: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif; font-size: 15px; }
.station-counts b { font-size: 32px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; text-align: right; }
.station-counts .outbound { color: var(--green); }
.outbound-summary { color: var(--muted); font-size: 11px; margin-top: 2px; }
.outbound-summary strong { color: var(--green); font-family: var(--number-font); font-size: 18px; margin: 0 4px; }
.monitor-login { color: var(--cyan); border: 1px solid rgba(83,230,250,.3); padding: 2px 5px; border-radius: 3px; font-size: 10px; text-decoration: none; }
.station-item[data-state="failed"] .station-item-foot, .station-item[data-state="waiting_login"] .station-item-foot, .station-item[data-state="stale"] .station-item-foot { color: #ffc56d; }
.station-item { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.station-item-heading { display: flex; align-items: center; justify-content: space-between; }
.station-name { display: flex; align-items: center; gap: 9px; }
.station-index { font-family: var(--number-font); font-size: 12px; color: #50839f; }
.station-name strong { font-size: clamp(13px,.94cqw,18px); font-weight: 500; letter-spacing: 1px; }
.station-value { font-family: var(--number-font); font-size: clamp(20px,1.45cqw,30px); font-weight: 500; }
.station-bar { height: 3px; margin: 4px 0 3px; background: rgba(99,167,204,.12); }
.station-bar>span { display: block; height: 100%; background: linear-gradient(90deg,#1789c7,var(--cyan)); box-shadow: 0 0 8px rgba(83,230,250,.12); }
.station-item-foot { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 10px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.panel-note { margin-top: 5px; color: #668da9; font-size: 10px; text-align: right; }
.trend-panel, .arrival-trend-panel { display: flex; flex-direction: column; }
.history-table-shell { flex: 1; min-height: 0; display: flex; padding: 8px 0 3px; color: var(--muted); font-size: 11px; }
.history-matrix { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: center; font-variant-numeric: tabular-nums; }
.history-matrix th, .history-matrix td { padding: 3px 1px; border: 1px solid rgba(105,172,210,.18); white-space: nowrap; }
.history-matrix thead th { background: #123653; color: #bed8ed; font-size: clamp(9px,.7cqw,13px); font-weight: 500; }
.history-matrix th:first-child { width: 11%; }
.history-matrix tbody th { font-size: clamp(10px,.78cqw,15px); font-weight: 500; }
.history-matrix .history-value { font-family: var(--number-font); font-size: clamp(11px,.83cqw,17px); font-weight: 650; }
.history-matrix .history-missing { color: #7896ad; font-size: clamp(8px,.62cqw,12px); }
.history-matrix tbody tr:nth-child(even) { background: rgba(69,132,175,.1); }
.history-inbound { color: var(--cyan); }
.history-outbound { color: var(--green); }
.history-arrival { color: #9bccff; }
.trend-note { flex-shrink: 0; margin-top: 2px; color: #668da9; font-size: 9px; text-align: right; }
#arrivalAverageCoverage { color: var(--muted); font-size: 9px; font-weight: 400; }
.average-value { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.arrival-hero { display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(circle at 80% 45%,rgba(38,112,163,.18),transparent 45%), linear-gradient(140deg,rgba(13,52,86,.93),rgba(8,26,53,.92)); }
.arrival-total { flex: 1; margin: 8px 0; position: relative; z-index: 1; }
.arrival-number { display: flex; align-items: baseline; gap: 12px; }
.arrival-number strong { color: #f2fcff; font-family: var(--number-font); font-size: clamp(46px,4.2cqw,84px); line-height: 1.08; letter-spacing: 4px; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(83,230,250,.17); }
.arrival-number>span { color: var(--muted); font-size: 13px; }
.arrival-total>p { margin-top: 3px; color: var(--muted); font-size: 11px; }
.arrival-total>p>b { color: var(--green); font-weight: 500; margin-left: 7px; }
.arrival-total>p>span { margin-left: 14px; color: #537f9f; }
.arrival-summary { display: grid; flex-shrink: 0; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(99,167,204,.18); padding-top: 8px; position: relative; z-index: 1; }
.arrival-summary>div { display: flex; flex-direction: column; gap: 3px; padding-left: 12px; border-left: 1px solid rgba(99,167,204,.2); }
.arrival-summary>div:first-child { border: 0; padding-left: 0; }
.arrival-summary span { color: var(--muted); font-size: 11px; }
.arrival-summary strong { font-family: var(--number-font); font-size: clamp(18px,1.4cqw,29px); font-weight: 500; }
.arrival-updated { margin-left: auto; margin-right: 12px; color: var(--muted); font-size: 9px; position: relative; z-index: 1; }
.arrival-visual { position: absolute; right: 4%; top: 26%; width: clamp(94px,10cqw,175px); aspect-ratio: 1; opacity: .75; }
.arrival-visual svg { position: absolute; inset: 17%; width: 66%; height: 66%; stroke: #6ce9f5; stroke-width: 1.15; filter: drop-shadow(0 0 5px rgba(83,230,250,.4)); }
.orbit { position: absolute; border: 1px solid rgba(83,230,250,.35); border-radius: 50%; }
.orbit-outer { inset: 0; border-top-color: var(--cyan); border-right-color: transparent; animation: orbit 28s linear infinite; }
.orbit-inner { inset: 9%; border-style: dashed; opacity: .45; animation: orbit 40s linear infinite reverse; }
.feed-panel { display: flex; flex-direction: column; }
.feed-panel .panel-heading { flex-shrink: 0; }
.feed-subtitle { display: block; margin-top: 4px; color: #7296b8; font-size: 10px; }
.live-badge { color: #72e7c2; font-size: 10px; white-space: nowrap; }
.arrival-table { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 8px; }
.feed-row { display: grid; grid-template-columns: 44px minmax(0,1fr) minmax(60px,.4fr) minmax(158px,.8fr); align-items: center; gap: 6px; height: clamp(35px,4.75cqh,52px); padding: 0 8px; border-bottom: 1px solid rgba(101,170,205,.07); background: rgba(54,113,157,.06); font-size: clamp(11px,.85cqw,15px); }
.feed-row.is-alternate { background: rgba(54,113,157,.13); }
.feed-row>span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-head { color: #87b3d3; font-size: 11px; height: 30px; flex-shrink: 0; background: rgba(77,139,183,.17); border-bottom-color: rgba(83,230,250,.12); }
.feed-viewport { flex: 1; min-height: 0; overflow: hidden; }
.feed-row.is-new { animation: feed-arrival .6s ease-in-out 1; }
.feed-index { color: #648ba8; font-family: var(--number-font); }
.tracking-number { font-family: var(--number-font); color: #e2f4ff; letter-spacing: .3px; }
.feed-station { color: #9fcae5; }
.feed-time { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; font-family: var(--number-font); color: #6cb4c6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.feed-calendar { font-size: clamp(10px,.78cqw,15px); color: #83a6c8; }
.feed-clock { font-size: clamp(12px,.9cqw,17px); color: #8bd8e7; }
.feed-head>span:last-child { text-align: right; }
.feed-foot { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; color: #668ba8; padding-top: 8px; flex-shrink: 0; }
.order-metric .metric-value strong { color: var(--amber); font-size: clamp(38px,3.3cqw,60px); line-height: 1.05; }
.order-metric { display: flex; flex-direction: column; padding-top: 12px; padding-bottom: 12px; }
.order-summary { flex: 1; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.3fr); align-items: center; gap: 12px; margin-top: 4px; }
.order-pending, .order-side-info { min-width: 0; }
.order-pending .metric-label { font-size: clamp(10px,.8cqw,14px); margin-bottom: 4px; }
.order-mini-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; font-size: 14px; line-height: 1.2; color: var(--muted); }
.order-mini-metrics>div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; white-space: nowrap; }
.order-mini-metrics b { color: var(--cyan); font-size: 36px; line-height: 1.05; font-family: var(--number-font); font-variant-numeric: tabular-nums; font-weight: 500; }
#completedOrders { color: var(--green); }
.order-updated { margin-top: 6px; color: #7296b8; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.order-column[data-status='stale'] #orderStatus, .order-column[data-status='unavailable'] #orderStatus, .order-column[data-status='stale'] .order-updated, .order-column[data-status='unavailable'] .order-updated { color: var(--amber); }
.assessment-panel { display: flex; flex-direction: column; }
.assessment-panel .panel-unit { font-size: 16px; font-weight: 600; color: #c3d8eb; white-space: nowrap; }
.assessment-list { flex: 0 0 76px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 5px; margin-top: 7px; }
.assessment-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; border: 1px solid rgba(105,172,210,.2); background: rgba(69,132,175,.08); padding: 0 9px; }
.assessment-row>span { color: #c3d8eb; font-size: 14px; }
.assessment-row>b { color: var(--cyan); font-size: 29px; line-height: 1; font-family: var(--number-font); font-weight: 500; font-variant-numeric: tabular-nums; }
.assessment-row:first-child>b { color: #ef937b; }
.assessment-row:nth-child(4)>b { color: var(--amber); }
.assessment-stations-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 9px 0 5px; color: var(--muted); font-size: 11px; }
.assessment-stations-heading h3 { margin: 0; color: #c3d8eb; font-size: 14px; font-weight: 500; }
.assessment-stations-heading b { font-family: var(--number-font); font-size: 23px; color: #ef937b; font-weight: 500; }
.assessment-stations { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: minmax(0,1fr); gap: 5px; }
.assessment-station { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 2px; border: 1px solid rgba(105,172,210,.2); background: rgba(69,132,175,.08); }
.assessment-station span { color: #bad5e9; font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; text-align: center; }
.assessment-station b { font-family: var(--number-font); font-size: 24px; line-height: 1; font-weight: 500; color: #ef937b; font-variant-numeric: tabular-nums; }
.assessment-updated { margin-top: 6px; color: #7296b8; font-size: 10px; line-height: 1.3; }
.assessment-panel[data-status='stale'] .assessment-updated, .assessment-panel[data-status='unavailable'] .assessment-updated { color: var(--amber); }
.order-chart-wrap { position: relative; flex: 1 0 88px; min-height: 88px; max-height: 200px; margin: 5px 0; }
.order-chart-wrap>.chart { height: 100%; }
.donut-label { pointer-events: none; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; }
.donut-label strong { font-family: var(--number-font); font-size: clamp(22px,1.7cqw,34px); color: var(--text); font-weight: 500; }
.donut-label span { font-size: 10px; color: var(--muted); }
.order-type-list { flex: 1; padding-top: 10px; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; scrollbar-width: thin; scrollbar-color: #305c7b transparent; }
.order-type-bar { grid-column: 1 / -1; height: 4px; background: rgba(105,172,210,.13); }
.order-type-bar>span { display: block; height: 100%; }
.completion-panel { display: flex; flex-direction: column; }
.order-station-list { flex: 1; min-height: 0; overflow-y: auto; margin-top: 8px; scrollbar-width: thin; scrollbar-color: #305c7b transparent; }
.order-station-matrix { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; text-align: center; font-variant-numeric: tabular-nums; }
.order-station-matrix th, .order-station-matrix td { padding: 2px; line-height: 1.2; border-bottom: 1px solid rgba(105,172,210,.2); overflow-wrap: anywhere; }
.order-station-matrix th:first-child { width: 24%; text-align: left; padding-left: 7px; }
.order-station-matrix th:last-child { width: 9%; }
.order-station-matrix thead th { background: #123653; color: #bad5e9; font-size: clamp(10px,.72cqw,13px); font-weight: 550; height: clamp(32px,4cqh,44px); }
.order-station-matrix tbody tr { height: clamp(22px,3cqh,34px); }
.order-station-matrix tbody th { color: #d8eafa; font-size: clamp(11px,.8cqw,15px); font-weight: 500; }
.order-station-matrix tbody tr:nth-child(even) { background: rgba(69,132,175,.1); }
.order-station-matrix td { font-family: var(--number-font); font-size: clamp(14px,1.1cqw,22px); }
.order-station-matrix .matrix-count { color: var(--cyan); }
.order-station-matrix .matrix-zero { color: #54778f; }
.order-station-matrix .matrix-total { color: var(--amber); background: rgba(255,197,109,.05); }
.order-station-matrix tfoot { color: var(--amber); background: rgba(255,197,109,.06); }
.order-station-matrix tfoot th { font-size: clamp(10px,.75cqw,14px); font-weight: 500; }
.order-station-matrix tfoot td { font-weight: 600; }
.order-station-matrix tfoot tr { height: clamp(28px,3.3cqh,36px); }
.order-type-item { flex-shrink: 0; display: grid; grid-template-columns: minmax(0,1fr) auto 48px; align-items: center; gap: 4px; line-height: 1.1; font-size: clamp(11px,.9cqw,16px); }
.order-type-label { display: flex; align-items: center; gap: 8px; color: #c3d8eb; }
.order-type-label>span { overflow-wrap: anywhere; }
.type-dot { width: 6px; height: 6px; border-radius: 1px; }
.order-type-item>b { font-size: clamp(15px,1.1cqw,22px); font-family: var(--number-font); font-weight: 500; text-align: right; }
.type-percentage { color: #6c95b6; font-size: 10px; text-align: right; }
.completion-heading { display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px; font-size: 11px; color: var(--muted); }
.completion-heading>strong { color: var(--amber); font-family: var(--number-font); font-size: clamp(20px,1.7cqw,32px); font-weight: 500; }
.completion-heading small { font-size: 11px; color: var(--muted); }
.completion-note { display: flex; justify-content: space-between; gap: 4px; margin-top: 8px; font-size: 10px; color: #6c95b6; }
.completion-note b { color: #a8c7d8; font-weight: 500; }
.screen-footer { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-shrink: 0; min-height: 16px; color: #7396b5; font-size: 10px; letter-spacing: .5px; }
.footer-weather { white-space: nowrap; }
@keyframes panel-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes feed-arrival { 0%, 100% { box-shadow: inset 3px 0 transparent; } 50% { background: rgba(83,230,250,.25); box-shadow: inset 3px 0 var(--cyan); } }


@media (prefers-reduced-motion: reduce) {
    .panel, .orbit, .feed-row.is-new { animation: none; }
}