:root{--ink:#172033;--navy:#111b2d;--teal:#168f87;--mint:#50d2c2;--bg:#f3f6fa;--line:#dce4ec;--muted:#64748b;--green:#2aa477;--shadow:0 8px 28px rgba(28,43,67,.07)}
*{box-sizing:border-box}html{font-family:Inter,"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;background:var(--bg);color:var(--ink)}body{margin:0;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}.side{position:fixed;inset:0 auto 0 0;width:236px;padding:22px 16px;background:var(--navy);color:#b7c2d2;z-index:10}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 30px}.brand>b{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--mint);color:#102938;font-size:18px}.brand strong,.brand small{display:block}.brand strong{color:white}.brand small{margin-top:3px;color:#77869b;font-size:12px}.side nav{display:grid;gap:5px}.nav{padding:11px 13px;border:0;border-radius:10px;color:#97a6ba;background:transparent;text-align:left}.nav:hover,.nav.active{background:#263a57;color:white}.mode{position:absolute;left:16px;right:16px;bottom:18px;padding:14px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.04);color:#78eee0;font-size:13px;line-height:1.6}.mode i,.connected i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green)}.mode span{color:#8796aa}main{margin-left:236px}header{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--line);background:white}header small,header strong{display:block}header small{color:var(--muted)}header strong{margin-top:3px}.connected{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}.content{max-width:1460px;margin:auto;padding:30px}.mobile-nav{display:none}.view{display:none}.view.active{display:block}.heading,.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:24px}.heading em{color:var(--teal);font-style:normal;font-weight:700}.heading h1,.page-head h1{margin:7px 0 0;font-size:31px;letter-spacing:-.03em}.heading p{margin:7px 0 0;color:var(--muted)}.actions{display:flex;gap:9px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink);font-weight:700}.btn:hover{border-color:#9eb0c2}.btn.primary{border-color:var(--teal);background:var(--teal);color:white}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:18px}.metrics article,.card{border:1px solid var(--line);border-radius:17px;background:white;box-shadow:var(--shadow)}.metrics article{position:relative;padding:20px}.metrics article:after{content:"";position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:12px;background:#e8faf7}.metrics span{color:var(--muted);font-size:14px}.metrics strong{display:block;margin-top:9px;font-size:30px;letter-spacing:-.03em}.metrics strong small{font-size:15px;color:var(--muted)}.metrics p{margin:14px 0 0;color:var(--muted);font-size:12px}.work{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(330px,.8fr);gap:18px}.card-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #edf1f5}.card-head h2,.card h2{margin:0;font-size:17px}.card-head p,.chart>p{margin:5px 0 0;color:var(--muted);font-size:13px}.card-head button{border:0;background:none;color:var(--teal);font-weight:700}.task{display:flex;align-items:center;gap:13px;padding:17px 20px;border-bottom:1px solid #edf1f5}.task:last-child{border:0}.task-dot{width:9px;height:9px;border-radius:50%;background:#3778dd}.task[data-state=running] .task-dot{background:#e69b31}.task[data-state=done] .task-dot{background:var(--green)}.task-main{min-width:0;flex:1}.task-title{display:flex;align-items:center;gap:9px;font-weight:700}.task-title code{color:#94a3b8;font-size:12px}.task-detail{margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:13px}.pill{padding:5px 9px;border-radius:99px;font-size:12px;font-weight:700}.pill.wait{background:#eaf2ff;color:#2b66bd}.pill.run{background:#fff4df;color:#a96a13}.pill.done{background:#e9f8f1;color:#197653}.queue footer{padding:13px 20px;border-top:1px solid #edf1f5;background:#f9fbfd;color:var(--muted);font-size:13px}.equipment{padding:21px;border-radius:17px;background:linear-gradient(145deg,#172b47,#132238);color:white;box-shadow:var(--shadow)}.equip-head{display:flex;justify-content:space-between}.equip-head span{color:#b7c3d2;font-size:14px}.equip-head h2{margin:4px 0}.equip-head>b{height:max-content;padding:6px 9px;border-radius:99px;background:rgba(80,210,194,.15);color:#79efe1;font-size:12px}.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.status-grid>div{padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.045)}.status-grid small{color:#9cacbf}.status-grid strong{display:block;margin-top:4px;font-size:25px}.bar-label{display:flex;justify-content:space-between;margin:22px 0 8px;color:#b7c3d2;font-size:12px}.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}.bar i{display:block;width:78%;height:100%;background:var(--mint)}.equip-note{color:#9cacbf;font-size:12px;line-height:1.6}.lower{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:18px}.chart,.alerts,.table-card{padding:20px}.bars{display:flex;align-items:end;gap:10px;height:150px;margin-top:20px}.bar-col{display:flex;flex:1;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:end}.bar-col i{width:100%;border-radius:6px 6px 2px 2px;background:#b8e8e2}.bar-col small{color:#94a3b8;font-size:11px}.alerts>div{margin-top:12px;padding:13px;border-radius:12px;background:#f6f8fb}.alerts>div b{font-size:13px}.alerts>div p{margin:5px 0 0;color:var(--muted);font-size:12px}.alerts .btn{width:100%;margin-top:15px}.table-card{overflow:auto}.table-card h2{margin-bottom:16px}table{width:100%;border-collapse:collapse}th,td{padding:13px 16px;border-bottom:1px solid #edf1f5;text-align:left;font-size:13px}th{color:var(--muted);background:#f9fbfd}#toast{position:fixed;right:22px;bottom:22px;transform:translateY(18px);opacity:0;padding:13px 16px;border-radius:12px;background:var(--navy);color:white;box-shadow:0 18px 45px rgba(15,23,42,.25);transition:.25s;z-index:30}#toast.show{transform:none;opacity:1}
@media(max-width:1050px){.side{display:none}main{margin-left:0}.mobile-nav{display:flex;gap:7px;overflow:auto;padding:10px 18px;background:var(--navy)}.mobile-nav .nav{white-space:nowrap}.metrics{grid-template-columns:1fr 1fr}.work,.lower{grid-template-columns:1fr}.content{padding:22px 18px}}
@media(max-width:640px){header{padding:0 16px}.connected{display:none}.content{padding:18px 13px}.metrics{grid-template-columns:1fr}.heading{align-items:flex-start;flex-direction:column}.heading h1{font-size:27px}.task{align-items:flex-start;flex-wrap:wrap}.bars{gap:5px}table{min-width:650px}}