@font-face { font-family: ScreenSans; src: url('../fonts/DingTalkJinBuTi.ttf') format('truetype'); font-display: swap; }
:root { color-scheme: light; --bg: #eaf5ff; --surface: rgba(255, 255, 255, .94); --surface-2: rgba(239, 249, 255, .96); --line: rgba(75, 136, 172, .24); --line-strong: rgba(47, 111, 151, .42); --text: #17364d; --muted: #58758b; --cyan: #087f9b; --green: #198754; --blue: #2563a9; --orange: #a85a00; --purple: #6e51ad; --danger: #c23d50; --shadow: 0 14px 34px rgba(38, 91, 123, .14); }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; background: var(--bg); color: var(--text); font-family: ScreenSans, "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
body { background: radial-gradient(1500px 820px at 50% -18%, #d4efff 0%, #eaf6ff 48%, #f7fbff 100%) fixed; }
button, input { font: inherit; }
button { color: inherit; }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { box-shadow: 0 0 12px 2px currentColor; opacity: .65; } }
@keyframes borderFlow { 0% { background-position: 0% 0; } 100% { background-position: 300% 0; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.screen-shell { width: min(1920px, 100%); min-height: 100vh; margin: 0 auto; padding: clamp(14px, 2.1vw, 34px) clamp(14px, 3vw, 58px) 22px; position: relative; overflow: hidden; }
.screen-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(1200px 520px at 18% -8%, rgba(46, 230, 255, .09), transparent 60%), radial-gradient(1000px 620px at 88% 108%, rgba(79, 163, 255, .08), transparent 60%), linear-gradient(rgba(84, 150, 205, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(84, 150, 205, .055) 1px, transparent 1px); background-size: auto, auto, 44px 44px, 44px 44px; }
.screen-header, .kpi-grid, .main-grid, .screen-footer, .notice-bar, .fatal-state { position: relative; z-index: 1; }
.screen-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; position: relative; padding-bottom: 20px; }
.screen-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--cyan) 18%, var(--blue) 50%, var(--cyan) 82%, transparent 100%); background-size: 300% 100%; animation: borderFlow 9s linear infinite; opacity: .75; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; position: relative; border: 1px solid var(--cyan); color: var(--cyan); font-size: 25px; font-weight: 800; background: linear-gradient(150deg, rgba(46, 230, 255, .2), rgba(46, 230, 255, .03)); box-shadow: 0 0 22px rgba(46, 230, 255, .32), inset 0 0 16px rgba(46, 230, 255, .2); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.brand h1 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: 2px; background: linear-gradient(90deg, #f2fbff 20%, #8fd9ff 60%, #c9ecff 90%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 34px rgba(46, 230, 255, .25); }
.brand p { margin: 7px 0 0; color: var(--muted); font-size: 13px; letter-spacing: 1px; }
.header-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.clock { border-right: 1px solid var(--line-strong); padding-right: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.clock strong { font: 600 26px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cyan); text-shadow: 0 0 16px rgba(46, 230, 255, .4); }
.clock span { color: var(--muted); font-size: 12px; }
.source-badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(46, 230, 255, .4); color: var(--cyan); padding: 7px 10px; font-size: 12px; white-space: nowrap; background: rgba(46, 230, 255, .07); box-shadow: inset 0 0 14px rgba(46, 230, 255, .08); }
.source-badge.full { color: var(--green); border-color: rgba(47, 227, 160, .45); background: rgba(47, 227, 160, .07); }
.source-badge i, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; display: inline-block; animation: livePulse 2.2s ease-in-out infinite; }
.icon-button, .quiet-button, .primary-button { border: 1px solid var(--line-strong); background: rgba(16, 32, 56, .7); cursor: pointer; transition: .2s ease; }
.icon-button { width: 37px; height: 37px; display: grid; place-items: center; color: var(--cyan); font-size: 20px; }
.icon-button:hover, .quiet-button:hover { border-color: var(--cyan); color: #fff; background: rgba(46, 230, 255, .16); box-shadow: 0 0 16px rgba(46, 230, 255, .3); }
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 22px 0 16px; }
.kpi-grid.has-finance { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-card, .panel { background: linear-gradient(160deg, rgba(17, 34, 60, .82), rgba(9, 19, 36, .86)); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.kpi-card { min-width: 0; min-height: 174px; padding: 17px 18px; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; animation: riseIn .5s ease both; }
.kpi-card:nth-child(2) { animation-delay: .05s; } .kpi-card:nth-child(3) { animation-delay: .1s; } .kpi-card:nth-child(4) { animation-delay: .15s; } .kpi-card:nth-child(5) { animation-delay: .2s; } .kpi-card:nth-child(6) { animation-delay: .25s; }
.kpi-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(2, 8, 18, .65), 0 0 26px color-mix(in srgb, var(--accent) 22%, transparent); }
.kpi-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--accent), transparent 72%); box-shadow: 0 0 12px var(--accent); }
.kpi-card::after { content: ""; position: absolute; right: -35px; bottom: -46px; width: 92px; height: 92px; border: 1px solid var(--accent); background: transparent; opacity: .2; transform: rotate(45deg); }
.kpi-card > * { position: relative; z-index: 1; }
.accent-cyan { --accent: var(--cyan); } .accent-green { --accent: var(--green); } .accent-blue { --accent: var(--blue); } .accent-orange { --accent: var(--orange); } .accent-purple { --accent: var(--purple); } .accent-finance { --accent: #ffd479; }
.kpi-head, .kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-head { color: var(--muted); font-size: 13px; letter-spacing: 1px; }
.kpi-head b { color: var(--accent); font-size: 20px; font-family: ui-monospace, monospace; text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
.kpi-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 82px; }
.kpi-body > div:first-child { min-width: 0; }
.kpi-body strong { display: block; color: var(--text); font: 700 34px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 8px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 34%, transparent); }
.kpi-body strong em { font-size: .38em; color: var(--muted); font-style: normal; font-weight: 500; }
.kpi-body small { color: var(--muted); display: block; font-size: 10px; min-height: 15px; }
.kpi-foot { margin-top: 8px; padding-top: 9px; border-top: 1px solid rgba(94, 168, 215, .18); color: var(--muted); font-size: 10px; }
.trend-chip { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 2px 5px; }
.progress { height: 4px; background: rgba(84, 150, 205, .16); margin-top: 15px; overflow: hidden; }
.progress span { height: 100%; display: block; background: var(--green); box-shadow: 0 0 10px var(--green); transition: width .45s ease; }
.progress.orange span { background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.main-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr) minmax(280px, .95fr); grid-template-areas: "trend trend energy" "lines equipment quality" "delivery work alert" "activity activity activity"; gap: 14px; }
.trend-panel { grid-area: trend; } .energy-panel { grid-area: energy; } .line-panel { grid-area: lines; } .equipment-panel { grid-area: equipment; } .quality-panel { grid-area: quality; } .delivery-panel { grid-area: delivery; } .alert-panel { grid-area: alert; } .work-panel { grid-area: work; } .activity-panel { grid-area: activity; }
.panel { min-width: 0; padding: 18px 20px; min-height: 220px; position: relative; }
.panel::before, .panel::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; }
.panel::before { left: -1px; top: -1px; border-left: 2px solid var(--cyan); border-top: 2px solid var(--cyan); filter: drop-shadow(0 0 6px rgba(46, 230, 255, .7)); }
.panel::after { right: -1px; bottom: -1px; border-right: 2px solid rgba(79, 163, 255, .8); border-bottom: 2px solid rgba(79, 163, 255, .8); filter: drop-shadow(0 0 6px rgba(79, 163, 255, .6)); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.eyebrow { color: var(--cyan); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 0 10px rgba(46, 230, 255, .45); }
.panel h2 { margin: 4px 0 0; font-size: 17px; font-weight: 600; letter-spacing: 1px; }
.panel-count { color: var(--muted); font-size: 11px; border: 1px solid var(--line); background: rgba(94, 168, 215, .07); padding: 4px 7px; white-space: nowrap; }
.danger-count, .alert-count { color: var(--danger); border-color: rgba(255, 92, 114, .4); background: rgba(255, 92, 114, .08); text-shadow: 0 0 10px rgba(255, 92, 114, .4); }
.legend { display: flex; gap: 14px; color: var(--muted); font-size: 11px; padding-top: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; } .legend i { width: 9px; height: 3px; display: inline-block; } .legend-cyan { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); } .legend-orange { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.chart-wrap { height: 230px; position: relative; } .chart-loading, .empty { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 12px; }
.trend-svg { width: 100%; height: 100%; overflow: visible; } .chart-grid { stroke: rgba(94, 168, 215, .18); stroke-width: 1; stroke-dasharray: 3 5; } .chart-axis { fill: #64849f; font: 10px ui-monospace, monospace; } .trend-area { fill: url(#outputArea); } .trend-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; } .output-line { stroke: var(--cyan); filter: drop-shadow(0 0 5px rgba(46, 230, 255, .55)); } .defect-line { stroke: var(--orange); stroke-width: 2; stroke-dasharray: 5 4; opacity: .95; filter: drop-shadow(0 0 4px rgba(255, 180, 84, .45)); } .trend-dot { stroke: var(--bg); stroke-width: 2; } .output-dot { fill: var(--cyan); filter: drop-shadow(0 0 6px rgba(46, 230, 255, .8)); } .rate-axis { fill: var(--orange); }
.trend-summary { display: flex; gap: 22px; border-top: 1px solid var(--line); padding-top: 12px; color: var(--muted); font-size: 11px; } .trend-summary b { color: var(--cyan); font: 600 15px ui-monospace, monospace; margin-left: 4px; text-shadow: 0 0 12px rgba(46, 230, 255, .35); }
.mini-bars { width: 76px; height: 46px; display: flex; align-items: flex-end; gap: 3px; padding: 4px 0; }
.mini-bars i { flex: 1 1 0; min-width: 3px; max-width: 7px; border-radius: 2px 2px 0 0; background: linear-gradient(to top, color-mix(in srgb, var(--cyan) 45%, transparent), var(--cyan)); box-shadow: 0 0 8px rgba(46, 230, 255, .35); opacity: .92; }
.mini-bars.blue i { background: linear-gradient(to top, rgba(79, 163, 255, .45), var(--blue)); box-shadow: 0 0 8px rgba(79, 163, 255, .35); } .mini-bars.purple i { background: linear-gradient(to top, rgba(169, 139, 255, .45), var(--purple)); box-shadow: 0 0 8px rgba(169, 139, 255, .35); } .mini-bars.green i { background: linear-gradient(to top, rgba(47, 227, 160, .45), var(--green)); box-shadow: 0 0 8px rgba(47, 227, 160, .35); }
.mini-bars i.zero { opacity: .18; box-shadow: none; }
.mini-chart-empty { color: var(--muted); font-size: 9px; }
.metric-gauge { --gauge: 0; --gauge-color: var(--cyan); width: 66px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative; flex: 0 0 auto; background: conic-gradient(var(--gauge-color) calc(var(--gauge) * 1%), rgba(84, 150, 205, .15) 0); filter: drop-shadow(0 0 9px color-mix(in srgb, var(--gauge-color) 42%, transparent)); }
.metric-gauge::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: rgba(9, 19, 36, .94); box-shadow: inset 0 0 0 1px rgba(94, 168, 215, .22); }
.metric-gauge span { position: relative; z-index: 1; display: grid; place-items: center; }
.metric-gauge b { font: 700 14px/1 ui-monospace, monospace; color: var(--text); }
.metric-gauge small { margin-top: 4px; min-height: 0; font-size: 8px; color: var(--muted); }
.metric-gauge.green { --gauge-color: var(--green); } .metric-gauge.orange { --gauge-color: var(--orange); } .metric-gauge.blue { --gauge-color: var(--blue); } .metric-gauge.finance { --gauge-color: #ffd479; }
.energy-chart-wrap { height: 190px; }
.energy-svg { width: 100%; height: 100%; }
.energy-bar { fill: var(--purple); opacity: .88; filter: drop-shadow(0 0 5px rgba(169, 139, 255, .45)); } .energy-bar.zero { fill: rgba(84, 150, 205, .2); filter: none; }
.energy-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.energy-summary div { min-width: 0; padding-right: 8px; border-right: 1px solid rgba(94, 168, 215, .16); }
.energy-summary div:last-child { border-right: 0; }
.energy-summary span, .energy-summary small { display: block; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.energy-summary strong { display: block; color: var(--text); font: 700 15px/1.4 ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.distribution-graphic { min-height: 150px; display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 12px; }
.donut-wrap { width: 126px; height: 126px; position: relative; }
.donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.donut-track, .donut-segment { fill: none; stroke-width: 13; }
.donut-track { stroke: rgba(84, 150, 205, .14); }
.donut-segment { stroke-linecap: butt; filter: drop-shadow(0 0 5px rgba(46, 230, 255, .3)); }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-center b { color: var(--text); font: 700 24px/1 ui-monospace, monospace; text-shadow: 0 0 16px rgba(46, 230, 255, .35); }
.donut-center small { color: var(--muted); font-size: 9px; margin-top: 5px; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.donut-legend-row { display: grid; grid-template-columns: 7px minmax(0, 1fr) 26px 32px; align-items: center; gap: 6px; font-size: 10px; }
.donut-legend-row i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.donut-legend-row span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend-row b { text-align: right; font: 600 11px ui-monospace, monospace; }
.donut-legend-row em { text-align: right; color: var(--muted); font-size: 9px; font-style: normal; }
.graphic-empty { min-height: 74px; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 10px; border: 1px dashed rgba(94, 168, 215, .3); background: rgba(94, 168, 215, .05); }
.delivery-graphic { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; }
.delivery-ring .metric-gauge { width: 82px; }
.delivery-ring .metric-gauge::after { inset: 10px; }
.delivery-ring .metric-gauge b { font-size: 18px; }
.delivery-main { min-width: 0; }
.order-trend { display: grid; grid-template-columns: minmax(0, 1fr) 110px; align-items: end; gap: 8px; padding-top: 10px; color: var(--muted); font-size: 9px; }
.order-trend .mini-bars { width: 110px; height: 30px; }
.status-bars { display: flex; flex-direction: column; gap: 9px; }
.status-bar-row > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.status-bar-row span { display: inline-flex; align-items: center; gap: 5px; }
.status-bar-row span i { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.status-bar-row b { color: var(--text); font: 600 11px ui-monospace, monospace; }
.status-bar-row > em { display: block; height: 5px; margin-top: 4px; background: rgba(84, 150, 205, .14); overflow: hidden; }
.status-bar-row > em i { display: block; height: 100%; box-shadow: 0 0 8px currentColor; }
.line-list, .equipment-list, .distribution-list, .alert-list, .activity-list { display: flex; flex-direction: column; gap: 9px; }
.line-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 9px; } .line-rank { color: var(--cyan); font: 700 11px ui-monospace, monospace; text-shadow: 0 0 10px rgba(46, 230, 255, .5); } .line-main { min-width: 0; } .line-title { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin-bottom: 6px; } .line-title strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status { font-size: 10px; white-space: nowrap; } .status.good { color: var(--green); } .status.warn { color: var(--orange); } .status.danger { color: var(--danger); } .status.neutral { color: var(--muted); } .line-track { height: 5px; background: rgba(84, 150, 205, .16); } .line-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 10px rgba(46, 230, 255, .5); } .line-value { text-align: right; } .line-value strong { display: block; color: var(--text); font: 600 13px ui-monospace, monospace; } .line-value small { color: var(--muted); font-size: 10px; }
.equipment-stat { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; align-items: center; gap: 10px; } .equipment-icon { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(46, 230, 255, .38); color: var(--cyan); background: rgba(46, 230, 255, .07); } .equipment-icon.e-1 { color: var(--green); border-color: rgba(47, 227, 160, .38); background: rgba(47, 227, 160, .07); } .equipment-icon.e-2 { color: var(--orange); border-color: rgba(255, 180, 84, .38); background: rgba(255, 180, 84, .07); } .equipment-icon.e-3 { color: var(--danger); border-color: rgba(255, 92, 114, .38); background: rgba(255, 92, 114, .07); } .equipment-stat strong, .equipment-stat small { display: block; } .equipment-stat strong { font-size: 12px; } .equipment-stat small { color: var(--muted); font-size: 10px; margin-top: 2px; } .equipment-percent { color: var(--muted); font: 12px ui-monospace, monospace; }
.equipment-foot, .quality-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 11px; color: var(--muted); font-size: 11px; } .equipment-foot strong, .quality-foot strong { color: var(--green); font: 600 19px ui-monospace, monospace; text-shadow: 0 0 14px rgba(47, 227, 160, .45); }
.distribution-row { display: grid; grid-template-columns: 9px minmax(0, 1fr) 40px 34px; gap: 8px; align-items: center; font-size: 12px; } .distribution-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px currentColor; } .d-1 { background: var(--orange); } .d-2 { background: var(--purple); } .d-3 { background: var(--muted); } .distribution-name { color: var(--muted); } .distribution-row strong { text-align: right; color: var(--text); font: 600 12px ui-monospace, monospace; } .distribution-row em { color: var(--muted); font-size: 10px; font-style: normal; text-align: right; }
.delivery-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; border-bottom: 1px solid var(--line); padding-bottom: 15px; } .delivery-metrics div { min-width: 0; } .delivery-metrics strong { display: block; color: var(--text); font: 600 21px ui-monospace, monospace; } .delivery-metrics span { color: var(--muted); font-size: 10px; white-space: nowrap; } .warn-text strong { color: var(--orange); text-shadow: 0 0 12px rgba(255, 180, 84, .4); } .danger-text strong, .danger-text { color: var(--danger) !important; text-shadow: 0 0 12px rgba(255, 92, 114, .4); } .mini-status-list { display: flex; flex-wrap: wrap; gap: 8px 13px; padding-top: 14px; } .mini-status-list span { color: var(--muted); font-size: 11px; display: inline-flex; align-items: center; gap: 5px; } .mini-status-list b { color: var(--text); font: 600 12px ui-monospace, monospace; margin-left: 2px; } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); } .status-dot.good { background: var(--green); box-shadow: 0 0 8px var(--green); } .status-dot.warn { background: var(--orange); box-shadow: 0 0 8px var(--orange); } .status-dot.danger { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.alert-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 9px; border-left: 2px solid var(--orange); background: linear-gradient(90deg, rgba(255, 180, 84, .13), rgba(255, 180, 84, .03)); } .alert-row.critical { border-color: var(--danger); background: linear-gradient(90deg, rgba(255, 92, 114, .15), rgba(255, 92, 114, .03)); } .alert-row.info { border-color: var(--cyan); background: linear-gradient(90deg, rgba(46, 230, 255, .12), rgba(46, 230, 255, .03)); } .alert-mark { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid currentColor; color: var(--orange); font-weight: 700; font-size: 12px; box-shadow: 0 0 10px color-mix(in srgb, currentColor 35%, transparent); } .critical .alert-mark { color: var(--danger); } .info .alert-mark { color: var(--cyan); } .alert-row strong, .alert-row small { display: block; } .alert-row strong { font-size: 12px; } .alert-row small { color: var(--muted); font-size: 10px; margin-top: 3px; } .alert-row b { color: var(--text); font: 600 13px ui-monospace, monospace; }
.work-graphic { display: grid; grid-template-columns: minmax(130px, 1.35fr) minmax(110px, .9fr) minmax(90px, .7fr); gap: 15px; align-items: stretch; }
.work-graphic section { min-width: 0; padding-right: 14px; border-right: 1px solid rgba(94, 168, 215, .16); }
.work-graphic section:last-child { border-right: 0; padding-right: 0; }
.work-graphic h3 { margin: 0 0 12px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 1px; }
.inventory-visual { display: flex; flex-direction: column; align-items: center; }
.inventory-visual h3 { align-self: flex-start; }
.inventory-visual .metric-gauge { width: 76px; }
.inventory-visual p { margin: 10px 0 0; color: var(--muted); font-size: 9px; }
.inventory-visual p b { color: var(--text); font: 700 14px ui-monospace, monospace; }
.shortage-visual { display: grid; grid-template-columns: minmax(0, 1fr) 18px; grid-template-areas: "title title" "number meter" "hint meter"; gap: 4px 10px; }
.shortage-visual h3 { grid-area: title; }
.shortage-number { grid-area: number; align-self: center; }
.shortage-number strong { display: block; color: var(--orange); font: 700 31px/1 ui-monospace, monospace; text-shadow: 0 0 16px rgba(255, 180, 84, .5); }
.shortage-number span { color: var(--muted); font-size: 9px; }
.shortage-visual small { grid-area: hint; color: var(--danger); font-size: 9px; }
.risk-meter { grid-area: meter; align-self: stretch; min-height: 85px; display: flex; align-items: flex-end; padding: 3px; background: rgba(255, 92, 114, .07); border: 1px solid rgba(255, 92, 114, .25); }
.risk-meter i { width: 100%; min-height: 0; background: linear-gradient(to top, var(--danger), var(--orange)); box-shadow: 0 0 12px rgba(255, 92, 114, .55); }
.activity-row { display: grid; grid-template-columns: 45px 8px minmax(0, 1fr); gap: 9px; align-items: start; } .activity-time { color: var(--muted); font: 10px ui-monospace, monospace; padding-top: 2px; } .activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); margin-top: 3px; box-shadow: 0 0 8px currentColor; } .activity-dot.good { color: var(--green); background: var(--green); } .activity-dot.warn { color: var(--orange); background: var(--orange); } .activity-dot.danger { color: var(--danger); background: var(--danger); } .activity-row strong, .activity-row small { display: block; } .activity-row strong { font-size: 12px; } .activity-row small { color: var(--muted); font-size: 10px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-footer { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 10px; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; } .screen-footer span { min-width: 0; } .screen-footer b { color: var(--cyan); font: 600 11px ui-monospace, monospace; } .live-dot { margin-right: 6px; background: var(--green); color: var(--green); } .live-dot.offline { background: var(--orange); color: var(--orange); }
.notice-bar { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 10px 13px; border: 1px solid rgba(255, 180, 84, .4); color: var(--orange); background: rgba(255, 180, 84, .08); font-size: 12px; box-shadow: 0 0 18px rgba(255, 180, 84, .12); } .notice-bar button { margin-left: auto; border: 0; color: currentColor; background: transparent; cursor: pointer; font-size: 18px; }
.fatal-state { min-height: 65vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; } .fatal-icon { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--danger); color: var(--danger); font: 700 28px ui-monospace, monospace; box-shadow: 0 0 24px rgba(255, 92, 114, .35); } .fatal-state h2 { margin: 6px 0 0; font-size: 22px; } .fatal-state p { max-width: 520px; color: var(--muted); margin: 0; font-size: 13px; } .fatal-state small { color: var(--muted); margin-top: 6px; font-size: 11px; }
.primary-button, .quiet-button { padding: 9px 14px; font-size: 12px; } .primary-button { color: #04222c; border-color: var(--cyan); background: linear-gradient(135deg, #5ff0ff, var(--cyan)); font-weight: 700; box-shadow: 0 0 18px rgba(46, 230, 255, .4); } .primary-button:hover { background: linear-gradient(135deg, #9df5ff, #5ff0ff); box-shadow: 0 0 26px rgba(46, 230, 255, .6); }
.quiet-button { color: var(--muted); }
.settings-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(3, 8, 16, .62); backdrop-filter: blur(3px); display: flex; justify-content: flex-end; } .settings-panel { width: min(430px, 100%); height: 100%; overflow-y: auto; padding: 28px; background: #0a1526; border-left: 1px solid var(--line-strong); box-shadow: -20px 0 50px rgba(2, 8, 18, .6); } .settings-head { display: flex; justify-content: space-between; align-items: flex-start; } .settings-head h2 { margin-top: 6px; } .settings-copy, .settings-hint { color: var(--muted); font-size: 12px; line-height: 1.7; } .field { margin-top: 22px; } .field label { display: block; color: var(--text); font-size: 12px; margin-bottom: 8px; } .field input { width: 100%; border: 1px solid var(--line-strong); background: rgba(16, 32, 56, .7); color: var(--text); padding: 11px 12px; outline: none; } .field input:focus { border-color: var(--cyan); box-shadow: 0 0 14px rgba(46, 230, 255, .25); } .segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-strong); } .segmented button { border: 0; padding: 9px 7px; color: var(--muted); background: #0d1c33; cursor: pointer; font-size: 11px; } .segmented button.active { color: #04222c; background: var(--cyan); font-weight: 700; } .settings-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 26px; }
.muted { color: var(--muted) !important; }
@media (min-width: 1221px) {
  .activity-panel { min-height: 145px; }
  .activity-list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
  .activity-row { grid-template-columns: 8px minmax(0, 1fr); grid-template-areas: "dot time" "dot content"; gap: 3px 7px; min-width: 0; padding-right: 9px; border-right: 1px solid rgba(94, 168, 215, .16); }
  .activity-row:last-child { padding-right: 0; border-right: 0; }
  .activity-time { grid-area: time; }
  .activity-dot { grid-area: dot; }
  .activity-row > div { grid-area: content; min-width: 0; }
}
@media (min-width: 1501px) and (min-height: 900px) {
  .screen-shell { height: 100vh; min-height: 900px; padding: 16px 34px 10px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .screen-header { padding-bottom: 11px; }
  .brand-mark { width: 40px; height: 40px; font-size: 21px; }
  .brand h1 { font-size: 27px; }
  .brand p { margin-top: 4px; font-size: 11px; }
  .clock strong { font-size: 22px; }
  .clock span, .source-badge { font-size: 10px; }
  .icon-button { width: 34px; height: 34px; font-size: 17px; }
  .kpi-grid { gap: 10px; margin: 10px 0; }
  .kpi-card { min-height: 126px; padding: 11px 14px; }
  .kpi-head { font-size: 11px; }
  .kpi-head b { font-size: 17px; }
  .kpi-body { min-height: 58px; gap: 8px; }
  .kpi-body strong { margin: 4px 0 3px; font-size: 29px; }
  .kpi-foot { margin-top: 3px; padding-top: 5px; }
  .mini-bars { width: 66px; height: 35px; }
  .metric-gauge { width: 54px; }
  .metric-gauge::after { inset: 7px; }
  .metric-gauge b { font-size: 12px; }
  .metric-gauge small { margin-top: 3px; font-size: 7px; }
  .main-grid { min-height: 0; gap: 10px; grid-template-rows: minmax(210px, 1.4fr) minmax(178px, 1fr) minmax(178px, 1fr) 120px; }
  .panel { min-height: 0; padding: 11px 14px; overflow: hidden; }
  .panel-head { margin-bottom: 8px; }
  .panel h2 { margin-top: 2px; font-size: 15px; }
  .eyebrow { font-size: 9px; }
  .trend-panel, .energy-panel, .activity-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  .activity-panel { grid-template-rows: auto minmax(0, 1fr); }
  .chart-wrap, .energy-chart-wrap { height: auto; min-height: 0; }
  .trend-summary { gap: 16px; padding-top: 7px; }
  .trend-summary b { font-size: 13px; }
  .energy-summary { padding-top: 7px; }
  .distribution-graphic { min-height: 0; height: 102px; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; }
  .donut-wrap { width: 94px; height: 94px; }
  .donut-center b { font-size: 20px; }
  .donut-legend { gap: 5px; }
  .quality-foot { height: 22px; margin-top: 0; padding-top: 2px; overflow: hidden; }
  .quality-foot strong { line-height: 1; }
  .delivery-ring .metric-gauge { width: 70px; }
  .delivery-graphic { grid-template-columns: 74px minmax(0, 1fr); gap: 10px; }
  .delivery-metrics { padding-bottom: 8px; }
  .delivery-metrics strong { font-size: 18px; }
  .order-trend { padding-top: 5px; }
  .mini-status-list { gap: 5px 10px; padding-top: 7px; }
  .work-graphic { gap: 10px; }
  .work-graphic section { padding-right: 9px; }
  .work-graphic h3 { margin-bottom: 7px; }
  .inventory-visual .metric-gauge { width: 62px; }
  .inventory-visual p { margin-top: 5px; }
  .risk-meter { min-height: 64px; }
  .alert-list { gap: 6px; }
  .alert-row { padding: 6px 7px; }
  .activity-list { align-content: center; gap: 8px; }
  .activity-row strong { font-size: 11px; }
  .activity-row small { font-size: 9px; }
  .screen-footer { margin-top: 7px; padding-top: 6px; }
}
@media (min-width: 1221px) and (max-width: 1500px) { .kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kpi-grid.has-finance { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpi-card { padding: 15px; } .kpi-body strong { font-size: 29px; } }
@media (max-width: 1220px) { .kpi-grid, .kpi-grid.has-finance { grid-template-columns: repeat(3, minmax(0, 1fr)); } .main-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "trend trend" "energy lines" "equipment quality" "delivery alert" "work work" "activity activity"; } .distribution-graphic { grid-template-columns: 120px minmax(0, 1fr); } }
@media (max-width: 760px) { .screen-shell { padding: 12px 12px 18px; } .screen-header { align-items: flex-start; flex-direction: column; gap: 15px; padding-bottom: 16px; } .header-meta { width: 100%; justify-content: flex-start; } .clock { margin-right: auto; align-items: flex-start; border-right: 0; padding-right: 0; } .kpi-grid, .kpi-grid.has-finance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 14px; } .kpi-card { min-height: 160px; padding: 13px; } .kpi-body strong { font-size: 24px; } .metric-gauge { width: 58px; } .mini-bars { width: 58px; } .main-grid { display: flex; flex-direction: column; gap: 10px; } .panel { min-height: 0; padding: 15px; } .trend-panel { order: 0; } .energy-panel { order: 1; } .line-panel { order: 2; } .equipment-panel { order: 3; } .quality-panel { order: 4; } .delivery-panel { order: 5; } .work-panel { order: 6; } .alert-panel { order: 7; } .activity-panel { order: 8; } .screen-footer { flex-direction: column; gap: 6px; } .screen-footer span:last-child { text-align: left; } .delivery-graphic { grid-template-columns: 76px minmax(0, 1fr); } .delivery-ring .metric-gauge { width: 72px; } .delivery-metrics { gap: 5px; } .delivery-metrics strong { font-size: 17px; } .work-graphic { grid-template-columns: 1fr 1fr; } .work-graphic section { padding-right: 10px; } .shortage-visual { grid-column: 1 / -1; border-right: 0 !important; border-top: 1px solid rgba(94, 168, 215, .16); padding: 12px 0 0 !important; } }
@media (max-width: 430px) { .brand h1 { font-size: 20px; } .brand p { font-size: 10px; } .header-meta { gap: 7px; } .source-badge { order: 5; width: 100%; } .kpi-body { grid-template-columns: minmax(0, 1fr) auto; gap: 5px; } .kpi-body strong { font-size: 22px; } .kpi-body small { font-size: 8px; } .kpi-foot { font-size: 9px; } .metric-gauge { width: 52px; } .metric-gauge::after { inset: 7px; } .metric-gauge b { font-size: 12px; } .mini-bars { width: 48px; height: 38px; gap: 2px; } .legend { gap: 7px; flex-direction: column; } .chart-wrap { height: 190px; } .distribution-graphic { grid-template-columns: 108px minmax(0, 1fr); gap: 8px; } .donut-wrap { width: 105px; height: 105px; } .delivery-graphic { grid-template-columns: 1fr; } .delivery-ring { display: flex; justify-content: center; } .order-trend { grid-template-columns: 1fr; } .order-trend .mini-bars { width: 100%; } .work-graphic { grid-template-columns: 1fr; } .work-graphic section { border-right: 0; border-bottom: 1px solid rgba(94, 168, 215, .16); padding: 0 0 12px; } .work-graphic section:last-child { border-bottom: 0; } .shortage-visual { grid-column: auto; } }

/* Light blue production theme: retain the existing layout and data visuals while
   keeping long-duration wall displays readable in bright workshops. */
.screen-shell::before { background: radial-gradient(1200px 520px at 18% -8%, rgba(8, 127, 155, .08), transparent 60%), radial-gradient(1000px 620px at 88% 108%, rgba(37, 99, 169, .07), transparent 60%), linear-gradient(rgba(75, 136, 172, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 136, 172, .09) 1px, transparent 1px); }
.screen-header::after { opacity: .6; }
.brand-mark { background: linear-gradient(150deg, rgba(8, 127, 155, .14), rgba(8, 127, 155, .03)); box-shadow: 0 5px 18px rgba(8, 127, 155, .16), inset 0 0 12px rgba(8, 127, 155, .1); }
.brand h1 { background: linear-gradient(90deg, #17364d 20%, #087f9b 58%, #2563a9 92%); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
.clock strong { text-shadow: none; }
.source-badge { background: rgba(8, 127, 155, .08); box-shadow: inset 0 0 10px rgba(8, 127, 155, .05); }
.source-badge.full { background: rgba(25, 135, 84, .08); }
.icon-button, .quiet-button, .primary-button { background: rgba(255, 255, 255, .8); }
.icon-button:hover, .quiet-button:hover { color: var(--blue); background: rgba(8, 127, 155, .1); box-shadow: 0 6px 16px rgba(8, 127, 155, .16); }
.kpi-card, .panel { background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(235, 247, 255, .94)); box-shadow: var(--shadow); }
.kpi-card:hover { box-shadow: 0 18px 38px rgba(38, 91, 123, .18), 0 0 22px color-mix(in srgb, var(--accent) 18%, transparent); }
.kpi-head b, .kpi-body strong { text-shadow: none; }
.panel::before { filter: drop-shadow(0 0 5px rgba(8, 127, 155, .35)); }
.panel::after { filter: drop-shadow(0 0 5px rgba(37, 99, 169, .28)); }
.eyebrow { text-shadow: none; }
.metric-gauge { filter: drop-shadow(0 3px 7px color-mix(in srgb, var(--gauge-color) 22%, transparent)); }
.metric-gauge::after { background: #f7fcff; box-shadow: inset 0 0 0 1px rgba(75, 136, 172, .25); }
.donut-center b { text-shadow: none; }
.graphic-empty { background: rgba(75, 136, 172, .06); }
.line-rank { text-shadow: none; }
.line-track span, .progress span, .status-bar-row > em i { box-shadow: 0 0 7px color-mix(in srgb, currentColor 28%, transparent); }
.equipment-icon { background: rgba(8, 127, 155, .06); }
.equipment-icon.e-1 { background: rgba(25, 135, 84, .06); }
.equipment-icon.e-2 { background: rgba(168, 90, 0, .06); }
.equipment-icon.e-3 { background: rgba(194, 61, 80, .06); }
.equipment-foot strong, .quality-foot strong { text-shadow: none; }
.warn-text strong, .danger-text strong, .danger-text { text-shadow: none; }
.alert-row { background: linear-gradient(90deg, rgba(168, 90, 0, .1), rgba(168, 90, 0, .025)); }
.alert-row.critical { background: linear-gradient(90deg, rgba(194, 61, 80, .1), rgba(194, 61, 80, .025)); }
.alert-row.info { background: linear-gradient(90deg, rgba(8, 127, 155, .09), rgba(8, 127, 155, .025)); }
.shortage-number strong { text-shadow: none; }
.risk-meter { background: rgba(194, 61, 80, .06); }
.screen-footer b { text-shadow: none; }
.notice-bar { background: rgba(168, 90, 0, .07); box-shadow: 0 5px 16px rgba(168, 90, 0, .08); }
.fatal-icon { box-shadow: 0 7px 20px rgba(194, 61, 80, .18); }
.primary-button { color: #fff; background: linear-gradient(135deg, #0d9ab8, #087f9b); box-shadow: 0 7px 16px rgba(8, 127, 155, .2); }
.primary-button:hover { background: linear-gradient(135deg, #13abc9, #0d8fa9); box-shadow: 0 9px 20px rgba(8, 127, 155, .26); }
.settings-backdrop { background: rgba(20, 59, 83, .28); }
.settings-panel { background: #f6fbff; box-shadow: -14px 0 36px rgba(38, 91, 123, .18); }
.field input { background: #fff; color: var(--text); }
.segmented button { color: var(--muted); background: #eaf5ff; }
.segmented button.active { color: #fff; background: var(--cyan); }