:root{--navy:#0b294b;--blue:#147bea;--bg:#f4f7fb;--card:#fff;--text:#17304f;--muted:#71839a;--line:#dce5ef;--green:#18b86a;--yellow:#f5b51b;--red:#ef4444;--shadow:0 4px 16px rgba(25,55,90,.08)}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px}button,input,select,textarea{font:inherit}.app{display:flex;min-height:100vh}.sidebar{width:220px;flex:0 0 220px;background:linear-gradient(180deg,#0b294b,#08223e);color:#fff;position:fixed;left:0;top:0;bottom:0;padding:16px 10px;z-index:20}.brand{display:flex;gap:10px;align-items:center;padding:5px 8px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:12px}.brand-icon{width:40px;height:40px;border-radius:9px;background:#fff;color:var(--navy);display:grid;place-items:center;font-size:20px;font-weight:800;flex:0 0 40px}.brand b{font-size:13px;line-height:1.12}.brand span{font-size:10px;opacity:.72}nav a{display:flex;align-items:center;gap:11px;color:#dce9f8;text-decoration:none;padding:10px 11px;border-radius:8px;margin:3px 0;font-size:12px}nav a:hover,nav a.active{background:#147bea;color:#fff}.ico{width:20px;text-align:center;font-size:16px;flex:0 0 20px}.main{margin-left:220px;width:calc(100% - 220px);min-width:0}.top{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:10}.title h1{font-size:18px;margin:0;color:#183957}.title p{font-size:11px;color:var(--muted);margin:3px 0}.topright{display:flex;gap:18px;align-items:center;font-size:11px;color:#53687e}.online{color:var(--green);font-weight:700}.content{padding:20px 24px 28px;max-width:1900px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.page-head h2{font-size:20px;margin:0}.page-head p{margin:4px 0;color:var(--muted);font-size:11px}.grid{display:grid;gap:14px}.kpis{grid-template-columns:repeat(6,minmax(120px,1fr))}.two{grid-template-columns:2fr 1fr}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.card{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:14px;min-width:0}.kpi{min-height:100px}.kpi .label{font-size:11px;color:var(--muted)}.kpi .value{font-size:24px;font-weight:750;margin-top:8px}.kpi .sub{font-size:10px;margin-top:5px;color:var(--muted)}.good{color:var(--green)}.warn{color:var(--yellow)}.bad{color:var(--red)}.blue{color:var(--blue)}.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px}.card-head h3{margin:0;font-size:13px}.card-head span{font-size:10px;color:var(--muted)}.machine-grid{grid-template-columns:repeat(5,minmax(145px,1fr))}.machine{padding:10px}.machine .mhead{display:flex;justify-content:space-between;align-items:center;gap:5px}.machine b{font-size:13px}.status{font-size:9px;padding:4px 8px;border-radius:14px;font-weight:700;white-space:nowrap}.status.run{background:#dcf8e9;color:#0c9b55}.status.idle{background:#fff2ca;color:#a87500}.status.fault{background:#ffe0e0;color:#c53030}.machine-img{height:68px;margin:8px 0;background:linear-gradient(180deg,#f8fbfe,#eef3f8);border-radius:6px;position:relative;overflow:hidden}.machine-img:before{content:"";position:absolute;left:8%;right:8%;top:31px;height:5px;background:#7892aa;border-radius:3px}.machine-img:after{content:"";position:absolute;left:38%;top:13px;width:55px;height:31px;border:3px solid #3e709d;border-radius:4px;background:#d9e7f4;box-shadow:0 28px 0 -13px #7892aa}.spec{font-size:10px;line-height:1.8;color:#60758c}.spec b{float:right;color:#213f61}table{width:100%;border-collapse:collapse;font-size:10.5px}th{text-align:left;background:#f7f9fc;color:#63778c;font-weight:700}th,td{padding:9px;border-bottom:1px solid #e7edf4}tr:last-child td{border-bottom:0}.badge{padding:3px 7px;border-radius:12px;font-size:9px;font-weight:700;white-space:nowrap}.badge.red{background:#ffe4e4;color:#c53030}.badge.green{background:#ddf7e9;color:#0b9851}.badge.blue{background:#e0efff;color:#1668b4}.badge.yellow{background:#fff1cb;color:#a26f00}.barrow{display:grid;grid-template-columns:35px 1fr 45px;gap:8px;align-items:center;margin:8px 0;font-size:10px}.bar{height:8px;background:#e9eef5;border-radius:8px;overflow:hidden}.bar i{display:block;height:100%;background:#18b86a;border-radius:8px}.chart{height:210px;position:relative;border-left:1px solid #ccd7e2;border-bottom:1px solid #ccd7e2;background:repeating-linear-gradient(to bottom,transparent 0,transparent 41px,#edf2f7 42px)}.line{position:absolute;left:4%;right:2%;top:22%;height:58%;border-top:3px solid #147bea;transform:skewY(-6deg);filter:drop-shadow(0 2px 2px rgba(20,123,234,.2))}.line:after{content:"";position:absolute;left:0;right:0;top:42%;border-top:3px solid #18b86a;transform:skewY(7deg)}.axis{display:flex;justify-content:space-between;color:#8798aa;font-size:8px;margin-top:6px}.donut{width:135px;height:135px;border-radius:50%;background:conic-gradient(var(--green) 0 77%,var(--yellow) 77% 90%,var(--red) 90% 100%);display:grid;place-items:center;flex:0 0 auto}.donut:after{content:"24 Hrs";width:82px;height:82px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}.flex{display:flex;gap:18px;align-items:center}.btn{border:1px solid #cdd9e6;background:#fff;padding:8px 12px;border-radius:7px;font-size:10px;color:#24425f}.btn.primary{background:#147bea;color:#fff;border-color:#147bea}.btn.danger{background:#ef4444;color:#fff;border-color:#ef4444}.filters{display:flex;gap:7px}.input,.select{padding:8px;border:1px solid #d4dfeb;border-radius:7px;background:#fff;font-size:10px;color:#3b536c}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.field label{display:block;font-size:10px;color:#61758a;margin-bottom:5px}.field input,.field select,.field textarea{width:100%;padding:9px;border:1px solid #d4dfeb;border-radius:7px;font-size:11px}.notice{padding:10px 12px;border-radius:8px;background:#edf6ff;border:1px solid #cce5ff;color:#1d5e9b;font-size:10px}.footer{color:#8a9bad;font-size:9px;text-align:right;margin-top:16px}
@media (min-width:768px) and (max-width:1199px){.sidebar{width:76px;padding:14px 8px}.brand{justify-content:center;padding:4px 0 16px}.brand>div:last-child{display:none}nav a{justify-content:center;padding:12px 7px;font-size:0}.ico{font-size:18px}.main{margin-left:76px;width:calc(100% - 76px)}.top{padding:0 16px}.topright span:first-child{display:none}.content{padding:16px}.kpis{grid-template-columns:repeat(3,1fr)}.machine-grid{grid-template-columns:repeat(3,1fr)}.two{grid-template-columns:1.4fr 1fr}.three{grid-template-columns:repeat(2,1fr)}.four{grid-template-columns:repeat(2,1fr)}.card:has(table){overflow-x:auto}table{min-width:650px}}
@media (max-width:767px){body{font-size:13px;overflow-x:hidden}.sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:64px;padding:6px 5px;background:#0b294b;z-index:20;box-shadow:0 -4px 18px rgba(0,0,0,.15)}.brand{display:none}.main{margin-left:0;width:100%;padding-bottom:68px}nav{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;height:100%}nav a{margin:0;padding:5px 2px;height:52px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;border-radius:7px;font-size:8px;text-align:center}nav a .ico{font-size:17px;line-height:18px;width:auto}.online{font-size:9px}nav a:nth-child(n+6){display:none}.top{height:auto;min-height:58px;padding:9px 11px}.title h1{font-size:13px;max-width:235px;line-height:1.15}.title p{font-size:9px}.topright{gap:5px}.topright span:first-child,.topright span:last-child{display:none}.content{padding:11px 9px 18px}.page-head{display:block}.page-head h2{font-size:18px}.page-head p{font-size:10px}.page-head .filters,.page-head>button{margin-top:8px}.grid,.kpis,.two,.three,.four,.formgrid{grid-template-columns:1fr!important}.machine-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}.machine{padding:8px}.machine-img{height:48px}.machine-img:before{top:22px}.machine-img:after{top:9px;width:42px;height:24px}.spec{font-size:8.5px;line-height:1.7}.status{font-size:8px;padding:3px 6px}.card{padding:10px;border-radius:8px}.card-head h3{font-size:12px}.card-head span{font-size:9px}.kpi{min-height:82px}.kpi .value{font-size:21px}.chart{height:165px}.axis{font-size:7px}.card:has(table){overflow-x:auto}table{min-width:650px;font-size:9px}.filters{display:grid;grid-template-columns:1fr 1fr;gap:6px}.filters .btn,.filters .select{width:100%}.flex{flex-wrap:wrap;justify-content:center}.donut{width:120px;height:120px}.donut:after{width:72px;height:72px;font-size:11px}.footer{text-align:center;font-size:8px}}
@media (max-width:420px){.title h1{font-size:12px;max-width:190px}.title p{display:none}.top{min-height:53px}.content{padding:9px 7px}.machine{padding:7px}.machine-img{height:42px}.spec{font-size:8px}.kpi .value{font-size:20px}.chart{height:150px}nav a{font-size:7px}}
@media print{.sidebar,.top{position:static}.sidebar{display:none}.main{margin:0;width:100%}.content{padding:10px}.card{box-shadow:none;break-inside:avoid}}