@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap";:root{color:#e9f2f5;font-synthesis:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#09151e;font-family:IBM Plex Sans Thai,Tahoma,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:4px;outline:2px solid #4de0d2}button{color:inherit;background:0 0;border:1px solid #334855;padding:10px 15px}button:disabled{opacity:.6;cursor:wait}input,select{color:#edf7fa;background:#101f2a;border:1px solid #334855;border-radius:3px;width:100%;padding:12px}label{color:#b2c6cf;gap:8px;font-size:14px;display:grid}h1{letter-spacing:-.5px;margin:10px 0 22px;font-size:32px;line-height:1.35}h2{margin:8px 0;font-size:24px}p{line-height:1.65}.wordmark{letter-spacing:2px;font-size:27px;font-weight:700}.wordmark span{color:#8ca4b3;letter-spacing:2px;margin-top:3px;font-size:10px;display:block}.eyebrow{color:#6edbd0;letter-spacing:2px;font-size:11px;font-weight:600}.login-layout{grid-template-columns:1.25fr 1fr;min-height:100vh;display:grid}.intro{background:radial-gradient(at 30% 80%,#123e44,#0000 70%),#0c202c;border-right:1px solid #284250;padding:65px 10vw 60px 7vw}.intro>.eyebrow{margin-top:95px}.intro h1{font-size:clamp(40px,4vw,66px);line-height:1.25}.intro-copy{color:#adc0c8;font-size:18px}.flow{letter-spacing:2px;color:#e8f3f5;white-space:nowrap;margin-top:75px;font-size:11px}.flow span{color:#57d8ca;margin:0 14px}.login-panel{align-self:center;width:100%;max-width:510px;margin:auto;padding:55px}.login-panel h2{font-size:30px}.login-panel p{color:#a1b6c3;font-size:14px}.login-panel form{gap:22px;margin-top:32px;display:grid}.primary{color:#08262a;background:#59d9cd;border:none;padding:14px;font-weight:700}.mode{letter-spacing:1.5px;color:#7ce2d5;font-size:10px;font-weight:700}.footnote{color:#92aab6;margin-top:28px;font-size:12px}.error{background:#422229;border-left:3px solid #ff8070;padding:12px 16px;font-size:14px;color:#ffc2bd!important}.shell{grid-template-columns:236px 1fr;min-height:100vh;display:grid}aside{background:#0c1a25;border-right:1px solid #233643;flex-direction:column;padding:32px 24px;display:flex}.nav-label{letter-spacing:2px;color:#718996;margin-top:64px;font-size:10px}nav{gap:8px;display:grid}nav button{text-align:left;color:#a7bdc8;border:0;padding:15px 12px}nav button span{color:#617e8d;margin-right:18px;font-size:10px}.active{background:#183b42;color:#71e3d6!important;border-left:2px solid #59d9cd!important}.sidebar-bottom{margin-top:auto;padding-top:80px}.sidebar-bottom p{overflow-wrap:anywhere;color:#90a5b3;font-size:11px}.sidebar-bottom button{padding:8px 12px;font-size:12px}main{min-width:0}header{border-bottom:1px solid #283d49;justify-content:space-between;align-items:center;gap:20px;height:112px;padding:24px 42px;display:flex}header strong{font-size:20px}header p{margin:0 0 5px}.selector{width:230px;font-size:11px}.selector select{padding:8px;font-size:13px}.content{min-height:calc(100vh - 174px);padding:25px 42px 48px}.notice{letter-spacing:1px;color:#88ded2;align-items:center;gap:10px;padding-bottom:25px;font-size:10px;display:flex}.notice>span:last-child{color:#8b9fae;letter-spacing:0;font-size:12px}.dot{background:#72daca;border-radius:50%;width:6px;height:6px}.section-title{justify-content:space-between;align-items:center;gap:20px;display:flex}.quiet{color:#99afbc;font-size:13px}.stats{border-top:1px solid #314954;border-bottom:1px solid #314954;grid-template-columns:repeat(4,1fr);margin:10px 0 30px;display:grid}.stats section{border-right:1px solid #293d49;padding:15px 22px 20px}.stats section:first-child{padding-left:0}.stats section:last-child{border:0}.stats p{color:#a5b8c3;margin:0 0 8px;font-size:12px}.stats strong{font-size:42px;font-weight:500;line-height:1.2}.alarm-text{color:#f5b478}.machine-panel{background:#10232e;border:1px solid #2a414e;padding:28px}.machine-heading{justify-content:space-between;align-items:center;gap:15px;display:flex}.machine-heading p{color:#8fa9b8;font-size:12px}.status{letter-spacing:1px;border:1px solid #506676;padding:8px 18px;font:600 13px Tahoma,sans-serif}.status.run{color:#72e7bc;background:#173a35;border-color:#285e4c}.status.alarm{color:#ffc18e;background:#412f24;border-color:#805438}.status.stop{color:#d5dfea;background:#293743}.status.offline{color:#c4c8d5;background:#292d38}.status.small{padding:5px 10px;font-size:10px}.signal-flow{letter-spacing:1.4px;border-top:1px solid #304752;border-bottom:1px solid #304752;align-items:center;gap:20px;margin:18px 0;padding:30px 0;font-size:11px;display:flex}.signal-flow i{color:#55bfb6;font-style:normal}.details{grid-template-columns:1.2fr 1.2fr 1fr;gap:18px;display:grid}.details p{color:#8fa9b8;font-size:11px}.details strong{font-size:13px;font-weight:500}.table-wrap{margin-top:25px;overflow:auto}.access-table{table-layout:fixed}.access-table td{white-space:normal;overflow-wrap:anywhere}.access-table form{gap:10px;display:grid}.access-table select{min-width:0}@media (width<=650px){.access-table thead{display:none}.access-table,.access-table tbody,.access-table tr,.access-table td{width:100%;display:block}.access-table tr{border:1px solid #263d49;margin-bottom:16px}.access-table td{border:0;padding:10px}}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;color:#a2b9c6;background:#10232e;padding:14px;font-size:11px;font-weight:500}td{white-space:nowrap;border-bottom:1px solid #263d49;padding:17px 14px}.settings{border-top:1px solid #304752;grid-template-columns:1fr 1fr;gap:24px;margin:30px 0;padding-top:28px;display:grid}.settings input{color:#9fb6c4;font-size:13px}.empty{color:#a2b9c6;text-align:center;border:1px dashed #304752;padding:30px}.content footer{margin-top:30px}footer{letter-spacing:1px;color:#6e8a9b;border-top:1px solid #233946;justify-content:space-between;padding:20px 42px;font-size:10px;display:flex}@media (width<=950px){.shell{grid-template-columns:190px 1fr}aside{padding:25px 15px}header{padding:20px 25px}.content{padding:25px}.stats{grid-template-columns:1fr 1fr}.stats section{padding:18px!important}.details{grid-template-columns:1fr}.section-title .quiet{display:none}.signal-flow{gap:10px;font-size:10px}}@media (width<=640px){.login-layout{display:block}.intro{padding:30px}.intro>.eyebrow{margin-top:30px}.intro h1{font-size:38px}.intro-copy,.flow{display:none}.login-panel{padding:35px 25px}.shell{display:block}aside{border:0;padding:16px;display:block}.wordmark{font-size:21px}.nav-label,.sidebar-bottom p,.sidebar-bottom .mode{display:none}nav{gap:5px;margin-top:15px;display:flex}nav button{padding:9px}nav button span{display:none}.sidebar-bottom{padding:0;position:absolute;top:12px;right:16px}header{align-items:start;height:auto;padding:18px}.selector{flex-shrink:0;width:145px}header strong{font-size:16px}header .eyebrow{letter-spacing:.5px;font-size:9px}.content{padding:18px}h1{font-size:26px}.notice{flex-wrap:wrap}.machine-panel{padding:18px}.machine-heading{flex-direction:column;align-items:start}.signal-flow{flex-wrap:wrap}.settings{grid-template-columns:1fr}.stats strong{font-size:36px}footer{padding:18px}}.box-id{color:#82aaaf;font-size:13px;font-weight:400}.pwa-bar{color:#b8ced4;background:#102935;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:10px 20px;font-size:13px;display:flex}.pwa-bar button{color:#35dfd5;cursor:pointer;background:0 0;border:1px solid #35dfd5;border-radius:6px;padding:8px 12px}.pwa-help{color:#edf7f8;background:#173641;padding:16px 20px;line-height:1.8}.pwa-offline{max-width:640px;margin:40px auto;padding:24px;line-height:1.8}