:root{--bg:#07101c;--bg2:#0a1422;--panel:#0e1b2b;--panel2:#101f31;--line:#203149;--text:#f5f8fc;--muted:#8fa0b7;--blue:#4da3ff;--green:#35d09f;--amber:#f3b74a;--red:#ff6678;--violet:#a989ff;--shadow:0 18px 46px rgba(0,0,0,.24)}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:radial-gradient(circle at 80% -10%,#18304d 0,transparent 34%),linear-gradient(180deg,#07101c,#08111e 45%,#060d17);color:var(--text);min-height:100vh}.app-shell{max-width:1540px;margin:auto;padding:30px 34px 24px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}.brand{display:flex;align-items:center;gap:18px}.brand-logo{width:72px;height:72px;border-radius:20px;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow);overflow:hidden}.brand-logo img{max-width:86%;max-height:86%;object-fit:contain}.eyebrow,.section-kicker{font-size:11px;letter-spacing:.18em;font-weight:800;color:#70b7ff}.brand h1{font-size:28px;margin:4px 0 3px;letter-spacing:-.03em}.brand p{margin:0;color:var(--muted);font-size:13px}.top-actions{display:flex;gap:10px;align-items:center}.live-pill,.icon-btn{border:1px solid var(--line);background:rgba(14,27,43,.88);color:#dce7f5;border-radius:14px;height:42px;display:flex;align-items:center;gap:9px;padding:0 14px}.live-pill span{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(243,183,74,.1)}.live-pill.live span{background:var(--green);box-shadow:0 0 0 5px rgba(53,208,159,.1)}.icon-btn{width:42px;justify-content:center;font-size:23px;cursor:pointer;padding:0}.control-bar{display:flex;align-items:center;justify-content:space-between;background:rgba(12,24,39,.75);border:1px solid var(--line);border-radius:18px;padding:10px 12px 10px 14px;margin-bottom:18px;backdrop-filter:blur(10px)}.period-tabs{display:flex;gap:6px;flex-wrap:wrap}.period-tabs button{border:0;color:#91a4bd;background:transparent;padding:9px 14px;border-radius:10px;font-weight:700;cursor:pointer}.period-tabs button.active{background:#18314f;color:#fff;box-shadow:inset 0 0 0 1px #294f78}.range-copy{text-align:right}.range-copy span{display:block;font-weight:800;font-size:13px}.range-copy small{color:var(--muted)}main{display:flex;flex-direction:column;gap:18px}.hero-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}.hero-card,.panel{background:linear-gradient(180deg,rgba(17,33,51,.98),rgba(12,25,40,.98));border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:21px}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.section-head.compact{margin-bottom:15px}.section-head h2{font-size:18px;margin:4px 0 0;letter-spacing:-.02em}.source-badge{background:#122d46;border:1px solid #23547d;color:#84c4ff;padding:6px 9px;border-radius:9px;font-size:10px;font-weight:800;text-transform:uppercase}.source-badge.muted{background:#172234;border-color:#29394f;color:#8fa0b7}.metric-grid{display:grid;gap:9px}.metric-grid.five{grid-template-columns:repeat(5,1fr)}.metric{min-height:115px;border:1px solid #22354e;border-radius:16px;padding:14px;background:linear-gradient(180deg,#102238,#0c1a2a);display:flex;flex-direction:column;justify-content:center}.metric span{color:#9aabc1;font-size:11px;font-weight:700}.metric strong{font-size:30px;margin:6px 0 2px;letter-spacing:-.04em}.metric small{color:#64758d;font-size:10px}.metric.danger{border-color:rgba(255,102,120,.32);background:linear-gradient(180deg,rgba(98,32,43,.24),#0d1a29)}.metric.danger strong{color:#ff7b8a}.oee-layout{display:grid;grid-template-columns:145px 1fr;gap:22px;align-items:center}.oee-ring,.donut{--value:0;--ring:#4da3ff;width:138px;height:138px;border-radius:50%;background:conic-gradient(var(--ring) calc(var(--value)*1%),#1a2a3f 0);display:grid;place-items:center;position:relative}.oee-ring:after,.donut:after{content:"";position:absolute;inset:12px;border-radius:50%;background:#0f1d2d}.oee-ring div,.donut div{z-index:1;text-align:center}.oee-ring strong{font-size:31px;display:block}.oee-ring span,.donut span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.15em}.apq-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.apq-grid div{border:1px solid #22344d;background:#0c1928;border-radius:14px;padding:12px}.apq-grid span{display:block;color:#7f91a9;font-size:10px}.apq-grid b{font-size:18px;display:block;margin-top:5px}.summary-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.summary-strip article{background:#0d1b2b;border:1px solid var(--line);border-radius:17px;padding:14px;display:flex;gap:12px;align-items:center}.summary-strip small{display:block;color:#8698af;font-size:10px}.summary-strip b{font-size:21px;margin-top:2px;display:block}.mini-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:900}.mini-icon.red{color:#ff7181;background:rgba(255,102,120,.1)}.mini-icon.amber{color:#ffc85e;background:rgba(243,183,74,.1)}.mini-icon.green{color:#4be1b1;background:rgba(53,208,159,.1)}.mini-icon.blue{color:#6bb4ff;background:rgba(77,163,255,.1)}.mini-icon.violet{color:#bda8ff;background:rgba(169,137,255,.1)}.content-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.span-2{grid-column:span 2}.panel-stat{text-align:right}.panel-stat small{display:block;color:#7d8fa7;font-size:10px}.panel-stat b{font-size:17px}.bar-list{display:flex;flex-direction:column;gap:11px}.bar-row{display:grid;grid-template-columns:minmax(160px,1.1fr) 2.2fr 78px;gap:12px;align-items:center}.bar-label{min-width:0}.bar-label b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-label small{color:#71859f}.bar-track{height:9px;background:#19293d;border-radius:999px;overflow:hidden}.bar-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#3f94eb,#65b8ff)}.bar-value{text-align:right}.bar-value b{font-size:12px}.bar-value small{display:block;color:#7488a1;font-size:9px}.donut-wrap{display:flex;align-items:center;justify-content:center;gap:24px;min-height:210px}.donut{--ring:#4da3ff;width:150px;height:150px}.donut strong{font-size:28px;display:block}.legend-list{display:flex;flex-direction:column;gap:13px;min-width:115px}.legend-list span{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:8px;color:#95a6bc;font-size:11px}.legend-list i{width:8px;height:8px;border-radius:50%}.lg-open{background:var(--blue)}.lg-closed{background:var(--green)}.legend-list b{color:#fff}.target-note{font-size:10px;color:#8295ac}.machine-table{overflow:auto}.machine-table table{width:100%;border-collapse:collapse;min-width:650px}.machine-table th{text-align:left;color:#71859f;font-size:9px;text-transform:uppercase;letter-spacing:.08em;padding:8px;border-bottom:1px solid #21334a}.machine-table td{padding:10px 8px;border-bottom:1px solid #17283c;font-size:11px}.machine-table td b{font-size:12px}.machine-name small{display:block;color:#6f839d;margin-top:2px}.score{display:inline-flex;min-width:55px;justify-content:center;padding:5px 7px;border-radius:8px;font-weight:800}.score.good{background:rgba(53,208,159,.11);color:#4bdcaf}.score.warn{background:rgba(243,183,74,.11);color:#ffc660}.score.bad{background:rgba(255,102,120,.11);color:#ff7b8a}.workforce-list{display:flex;flex-direction:column;gap:10px}.workforce-list div{display:flex;align-items:center;justify-content:space-between;border:1px solid #203249;background:#0b1928;border-radius:14px;padding:13px}.workforce-list span{color:#9aabc0;font-size:11px}.workforce-list b{font-size:19px}.attention{padding-bottom:15px}.attention-count{min-width:31px;height:31px;border-radius:9px;background:rgba(255,102,120,.12);color:#ff7b8a;display:grid;place-items:center;font-size:12px;font-weight:900}.attention-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.attention-item{border:1px solid #29384d;border-left:3px solid var(--amber);background:#0a1725;border-radius:13px;padding:12px 13px}.attention-item.critical{border-left-color:var(--red)}.attention-item.good{border-left-color:var(--green)}.attention-item b{display:block;font-size:11px}.attention-item span{color:#7f92aa;font-size:10px;margin-top:4px;display:block}.empty{color:#71849d;font-size:11px;padding:22px;text-align:center;border:1px dashed #25384f;border-radius:13px}footer{text-align:center;color:#52647b;font-size:10px;padding:6px 0 2px}@media(max-width:1100px){.hero-grid{grid-template-columns:1fr}.metric-grid.five{grid-template-columns:repeat(3,1fr)}.summary-strip{grid-template-columns:repeat(3,1fr)}.content-grid{grid-template-columns:1fr 1fr}.span-2{grid-column:span 2}.attention-list{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.app-shell{padding:18px 14px}.topbar{align-items:flex-start}.brand-logo{width:55px;height:55px;border-radius:15px}.brand h1{font-size:20px}.brand p{display:none}.live-pill{display:none}.control-bar{align-items:flex-start;gap:12px;flex-direction:column}.range-copy{text-align:left}.metric-grid.five{grid-template-columns:1fr 1fr}.summary-strip{grid-template-columns:1fr 1fr}.content-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.oee-layout{grid-template-columns:120px 1fr}.oee-ring{width:116px;height:116px}.attention-list{grid-template-columns:1fr}.bar-row{grid-template-columns:1fr 1.4fr 65px}}@media(max-width:470px){.metric-grid.five,.summary-strip{grid-template-columns:1fr 1fr}.metric{min-height:94px}.metric strong{font-size:25px}.oee-layout{grid-template-columns:1fr}.oee-ring{margin:auto}.apq-grid{grid-template-columns:1fr 1fr}.top-actions{margin-left:auto}.brand{gap:10px}.brand-logo{width:48px;height:48px}.brand .eyebrow{font-size:8px}.brand h1{font-size:17px}.bar-row{grid-template-columns:1fr}.bar-value{text-align:left}}
.integration-warning{margin:0 46px 20px;padding:14px 16px;border:1px solid rgba(255,183,77,.35);background:rgba(255,183,77,.08);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:16px}.integration-warning.hidden{display:none}.integration-warning strong{display:block;margin-bottom:4px}.integration-warning p{margin:0;color:#aebed2;font-size:12px;max-width:900px}.source-checks{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.source-checks span{padding:6px 9px;border-radius:999px;font-size:10px;font-weight:800;border:1px solid #29415d}.source-checks .ok{color:#48d3a5;background:rgba(52,208,159,.08)}.source-checks .bad{color:#ff8791;background:rgba(255,91,105,.08)}
@media(max-width:900px){.integration-warning{margin:0 18px 16px;align-items:flex-start;flex-direction:column}.source-checks{justify-content:flex-start}}