:root{
 --navy:#062847;--navy2:#07345B;--blue:#0F77D9;--text:#102545;--sub:#60738C;--border:#DCE5F0;
 --green:#22B35B;--orange:#F29A17;--red:#E52E3D;--purple:#7A3ED1;--bg:#F6F8FC;
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px}button,input,select{font-family:inherit}.vc-app{min-width:1280px;min-height:760px;width:100%;height:100%;display:grid;grid-template-columns:235px 1fr;overflow:hidden;background:var(--bg)}
.sidebar{background:var(--navy);display:grid;grid-template-rows:205px 1fr 205px;min-height:760px}.sidebar-brand{background:#fff;padding:12px 18px;display:grid;grid-template-rows:1fr auto;align-items:center}.sidebar-brand img{max-width:100%;max-height:155px;justify-self:center;object-fit:contain}.sidebar-brand a{color:#195C9E;text-decoration:underline;text-align:center;font-size:12px}.nav-stack{overflow:auto;padding:0 0 6px}.nav-btn{height:43px;margin:2px 10px;padding:0 12px;color:#fff;background:transparent;border:0;border-radius:6px;width:calc(100% - 20px);cursor:pointer;display:grid;grid-template-columns:30px 1fr;align-items:center;text-align:left;font-size:14px}.nav-btn:hover{background:#13588D}.nav-btn.active{background:#0B79E3}.nav-btn svg{width:17px;height:17px;fill:#fff;stroke:#fff;stroke-width:0;justify-self:start}.nav-btn.eff svg{fill:none;stroke-width:2}.sidebar-bottom{padding:8px 12px 15px;align-self:end}.side-box{background:#0A365D;border-radius:7px;padding:13px;margin-bottom:7px;color:#fff}.side-head{display:flex;justify-content:space-between;align-items:center}.side-head b{font-size:16px}.active-side{font-size:11px}.active-side i{display:inline-block;width:8px;height:8px;background:#23C96B;border-radius:50%;margin-right:6px}.side-sub,.side-label{color:#C7DAEA;font-size:10px}.shift-box .side-sub{font-size:11px;margin-top:8px}.clock-grid{display:grid;grid-template-columns:36px 1fr}.clock-icon{width:30px;height:30px;border-radius:50%;background:#0E4F82;color:#59C6F0;display:flex;align-items:center;justify-content:center;font-size:21px}.clock-time{font-size:19px;font-weight:600;color:#fff}.system-status{display:flex;align-items:flex-start;margin:7px 10px 0;color:#fff}.refresh-circle{width:20px;height:20px;border-radius:50%;background:#1FAD60;display:flex;align-items:center;justify-content:center;font-size:12px;margin-right:9px}.system-status b{display:block;font-size:12px}.system-status div span{display:block;color:#C6D8E8;font-size:10px;margin-top:1px}
.right-shell{min-width:0;height:100vh;display:grid;grid-template-rows:78px 1fr 30px;overflow:hidden}.topbar{background:#fff;border-bottom:1px solid #E4E9F0;padding:0 24px;display:flex;align-items:center}.welcome{font-size:25px;font-weight:700;color:var(--text)}.page-subtitle{color:#59718B;font-size:13px;margin-top:2px}.page-host{min-height:0;overflow:auto;background:var(--bg)}.footer{background:#fff;border-top:1px solid #E1E7EF;padding:0 15px;color:#53677D;font-size:10px;display:flex;align-items:center;justify-content:space-between}
.card{background:#fff;border:1px solid var(--border);border-radius:9px}.page-margin{margin:16px 24px 18px}.dashboard{padding:16px 24px 18px}.dashboard-filter{padding:10px 14px;display:grid;grid-template-columns:1fr auto;align-items:center}.dashboard-filter .intro-title{font-size:13px;font-weight:600}.dashboard-filter .intro-sub{font-size:10px;color:#708198;margin-top:2px}.filter-row{display:flex;align-items:flex-end}.field{margin-right:10px}.field:last-child{margin-right:0}.field label{display:block;color:#60738C;font-size:9px;margin-bottom:2px}.vc-select,.vc-input,.vc-date{height:29px;border:1px solid #CFDAE6;background:#fff;padding:2px 7px;color:#213A55;font-size:12px}.filter-pill{background:#E8F3FE;color:#0F77D9;border-radius:13px;padding:5px 10px;font-size:10px;font-weight:600;margin:0 10px 2px 0}.primary-small,.button-blue{height:29px;background:#0F77D9;color:#fff;border:1px solid #0F77D9;padding:2px 11px;font-size:10px;font-weight:600;cursor:pointer}.kpi-top{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}.kpi-card{padding:17px;display:grid;grid-template-columns:51px 1fr;align-items:center;min-height:91px}.kpi-card img{width:46px;height:46px;object-fit:contain}.kpi-card .kt{font-size:11px;color:#3C526B}.kpi-card .kv{font-size:24px;font-weight:700;line-height:1.15;margin-top:1px}.kpi-card.active-load .kv{font-size:22px}.kpi-card .ks{font-size:13px;color:#74859A;margin-top:1px}
.dashboard-middle{display:grid;grid-template-columns:1.25fr 1.25fr .85fr;gap:10px;margin-top:13px}.dash-panel{min-height:320px;overflow:hidden}.panel-title-row{height:43px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #E4E9F0}.panel-title-row .title{font-size:14px;font-weight:600}.panel-link{border:0;background:transparent;color:#0F77D9;font-size:10px;cursor:pointer}.panel-head-table{height:29px;background:#FAFBFD;display:grid;align-items:center;padding:0 10px;font-size:10px;font-weight:600}.completed-head{grid-template-columns:.68fr 1.43fr .48fr .58fr .58fr .62fr}.active-head{grid-template-columns:.62fr 1.35fr .46fr .58fr 1.02fr .52fr}.panel-rows{max-height:246px;overflow:auto}.dash-row{min-height:41px;display:grid;align-items:center;padding:0 10px;border-bottom:1px solid #EEF2F6;font-size:10px}.dash-row.completed{grid-template-columns:.68fr 1.43fr .48fr .58fr .58fr .62fr}.dash-row.active{grid-template-columns:.62fr 1.35fr .46fr .58fr 1.02fr .52fr}.right{text-align:right}.progress-wrap{display:flex;align-items:center;gap:7px}.progress-track{height:6px;background:#E6EAF0;border-radius:4px;flex:1;min-width:55px;overflow:hidden}.progress-fill{height:100%;background:#22B35B;border-radius:4px}.alarm-list{padding:0}.alarm-item{padding:10px 16px;border-bottom:1px solid #EEF2F6;font-size:10px}.alarm-item b{display:block;font-size:11px;color:#102545}.alarm-item span{color:#60738C}
.shift-summary{margin-top:13px}.shift-summary-title{height:42px;display:flex;align-items:center;padding:0 16px;font-size:14px;font-weight:600;border-bottom:1px solid #E4E9F0}.shift-grid{display:grid;grid-template-columns:repeat(7,1fr);padding:12px 14px 13px}.shift-item{display:grid;grid-template-columns:52px 1fr;align-items:center;padding:0 4px;min-width:0}.shift-item img{width:46px;height:46px}.shift-item .st{font-size:10px;color:#60738C}.shift-item .sv{font-size:21px;font-weight:700;white-space:nowrap}.shift-item .ss{font-size:11px;color:#8795A5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-bottom{display:grid;grid-template-columns:.9fr .7fr 1.65fr;gap:10px;margin-top:13px}.bottom-card{padding:15px;min-height:130px}.idle-card{display:grid;grid-template-columns:54px 1fr}.idle-card img{width:46px;height:46px;align-self:center}.bottom-title{font-size:13px;font-weight:600}.idle-value{font-size:27px;font-weight:700;margin-top:7px}.bottom-sub{color:#708198;font-size:10px;margin-top:2px}.donut-body{display:grid;grid-template-columns:74px 1fr;margin-top:12px}.donut{width:64px;height:64px;border-radius:50%;background:conic-gradient(#22B35B 0 42%,#0F77D9 42% 68%,#F29A17 68% 80%,#9AA7B5 80%);display:flex;align-items:center;justify-content:center}.donut:after{content:"";width:42px;height:42px;background:#fff;border-radius:50%;position:absolute}.donut span{position:relative;z-index:1;font-size:15px;font-weight:700}.dist-lines{font-size:10px;color:#53677D;line-height:1.6}.trend-title{display:grid;grid-template-columns:auto 1fr auto;align-items:center}.trend-summary{text-align:center;font-size:9px;color:#60738C}.legend{display:flex;align-items:center;font-size:9px;color:#60738C}.legend i{width:18px;height:2px;margin:0 3px 0 10px}.trend-canvas{height:77px;margin-top:8px;position:relative}.trend-canvas svg{width:100%;height:100%;overflow:visible}
.module-header-card{padding:17px;display:grid;grid-template-columns:1fr auto;align-items:center}.module-title{font-size:23px;font-weight:700}.module-description{font-size:11px;color:#60738C;margin-top:4px}.module-title-lg{font-size:26px}.module-cards-2,.module-cards-3{display:grid;gap:14px;margin-top:16px;align-items:start}.module-cards-2{grid-template-columns:1fr 1fr}.module-cards-3{grid-template-columns:1fr 1fr 1fr}.module-button{background:#fff;border:1px solid #DCE5EE;border-radius:10px;min-height:205px;padding:24px;cursor:pointer;text-align:left;color:inherit}.module-button:hover{background:#F5F9FE;border-color:#9CC7ED}.module-button .m-title{font-size:18px;font-weight:600}.module-button.hub .m-title{font-size:20px;font-weight:700}.module-button .m-desc{font-size:11px;color:#60738C;margin-top:9px;line-height:1.35}.module-button img{display:block;max-width:280px;max-height:100px;object-fit:contain;margin:8px auto 0}.module-button.hub{height:188px;padding:22px}.backbar{padding:8px 10px;display:flex;align-items:center}.back-btn{height:32px;padding:0 13px;background:#F7FAFD;color:#29445F;border:1px solid #D7E2EC;cursor:pointer}.back-title{font-size:17px;font-weight:600;margin-left:14px}
.live-page{margin:16px 24px 18px;display:grid;grid-template-rows:96px auto;gap:12px}.live-head{padding:17px;display:grid;grid-template-columns:1fr auto;align-items:center}.live-title{font-size:23px;font-weight:700}.live-sub{font-size:11px;color:#60738C;margin-top:4px}.live-content{padding:12px}.live-cards{display:flex;flex-wrap:wrap;align-content:flex-start}.live-card{width:278px;height:236px;margin:7px;background:#fff;border:1.25px solid #22B35B;border-radius:9px;padding:10px;display:grid;grid-template-rows:47px 99px 21px 1px 48px;cursor:default}.live-card-header{display:grid;grid-template-columns:1fr auto}.live-machine-name{font-size:11.6px;line-height:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-machine-sub{font-size:9.4px;font-weight:600;color:#375A88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-badge{border-radius:14px;padding:5px 9px 5px 8px;color:#fff;font-size:9.2px;font-weight:700;align-self:start;display:flex;align-items:center;white-space:nowrap}.live-badge i{width:12px;height:12px;border:2px solid #fff;border-radius:50%;margin-right:6px}.live-body{display:grid;grid-template-columns:142px 1fr}.live-info{align-self:center;padding-left:2px}.live-line{height:33px;display:flex;align-items:center;font-size:11.6px;line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-line .label{color:#60738C;font-weight:500}.live-line b{font-weight:700;overflow:hidden;text-overflow:ellipsis}.live-machine-img{width:112px;height:84px;object-fit:contain;align-self:center;justify-self:center}.live-progress{display:grid;grid-template-columns:218px 1fr;align-items:center}.live-progress .track{width:214px;height:8px;border-radius:4px;background:#DCE8F2;overflow:hidden}.live-progress .fill{height:8px;border-radius:4px}.live-progress b{text-align:right;font-size:14px}.live-sep{background:#D5E7F5}.live-footer{display:grid;align-items:center;margin-top:4px}.live-footer.recipe{grid-template-columns:84px 78px 1fr}.live-footer.other{grid-template-columns:120px 1fr}.footer-info{align-self:center;min-width:0}.footer-info .fi-title{display:flex;align-items:center;color:#60738C;font-size:9.2px;font-weight:500;white-space:nowrap}.footer-info img{width:19px;height:19px;object-fit:contain}.footer-info .fi-value{font-size:9.2px;font-weight:700;margin-left:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-legend{height:32px;display:flex;align-items:center;justify-content:center;color:#53677D;font-size:10px}.live-legend span{display:flex;align-items:center;margin-right:14px}.live-legend i{width:8px;height:8px;border-radius:50%;margin-right:4px}.live-layout{height:700px;max-height:calc(100vh - 255px);background:#F3F6FA;position:relative;overflow:hidden}.layout-machine{position:absolute;text-align:center}.layout-machine img{object-fit:contain}.layout-balloon{background:#fff;border:1px solid #DCE5EE;border-radius:8px;padding:5px 8px;font-size:9px;box-shadow:0 2px 7px rgba(0,0,0,.12)}
.form-card{padding:16px}.page-title-row{display:grid;grid-template-columns:1fr auto}.page-title-23{font-size:23px;font-weight:700}.page-desc-11{color:#60738C;font-size:11px;margin-top:4px}.filters-line{display:flex;align-items:flex-end;gap:8px;margin-top:10px;flex-wrap:wrap}.filter-label{color:#60738C;font-size:9px;margin-bottom:2px}.filter-control{height:28px;padding:1px 6px;border:1px solid #CFDAE6;background:#fff;font-size:11px}.filter-btn{width:86px;height:29px;background:#0F77D9;color:#fff;border:0;font-size:11px;cursor:pointer}.content-card{margin-top:12px;padding:12px;min-height:280px}.empty-state{display:flex;align-items:center;justify-content:center;min-height:430px;background:#F8FAFD}.empty-state .e-title{font-size:18px;font-weight:600;color:#315476;text-align:center}.empty-state .e-sub{font-size:12px;color:#60738C;text-align:center;margin-top:8px}.tabbar{display:flex;border-bottom:1px solid #DCE5EE;margin-top:10px}.tab{padding:8px 15px;background:#F8FAFD;border:1px solid #DCE5EE;border-bottom:0;margin-right:3px;cursor:pointer;font-size:11px}.tab.active{background:#fff;color:#0F77D9;font-weight:600}.data-table{width:100%;border-collapse:collapse;font-size:10px}.data-table th{background:#F7F9FC;text-align:left;padding:7px 8px;border:1px solid #E2E8EF;font-weight:600}.data-table td{padding:7px 8px;border:1px solid #E7ECF2}.table-wrap{overflow:auto}.count-pill{background:#E8F3FE;border-radius:13px;padding:6px 11px;color:#0F77D9;font-size:10px;font-weight:600}.kpi-row-5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}.mini-kpi{padding:12px}.mini-kpi .label{font-size:10px;color:#60738C}.mini-kpi .value{font-size:20px;font-weight:700;margin-top:2px}.mini-kpi img{width:42px;height:42px;object-fit:contain;float:left;margin-right:9px}.clear{clear:both}
.ops-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}.ops-card{min-height:145px;background:#fff;border:1px solid #DCE5EE;border-radius:9px;padding:18px;display:grid;grid-template-columns:1fr 95px;cursor:pointer}.ops-card img{max-width:90px;max-height:85px;object-fit:contain;align-self:center;justify-self:center}.ops-title{font-size:15px;font-weight:600}.ops-desc{font-size:11px;color:#60738C;margin-top:4px;line-height:1.35}.recipe-step-card{padding:22px}.step-label{color:#0F77D9;font-size:11px;font-weight:600}.recipe-question{font-size:19px;font-weight:600;margin-top:18px}.recipe-question-sub{font-size:12px;color:#60738C;margin-top:6px}.recipe-selection{margin-top:22px;max-width:580px}.recipe-selection label{display:block;color:#334A66;font-size:11px;font-weight:600;margin:0 0 6px 1px}.recipe-selection select{height:34px;width:100%;border:1px solid #CFDAE6;padding:5px}.info-box{background:#F4F8FD;border:1px solid #D8E5F2;border-radius:8px;padding:13px;margin-top:12px;color:#60738C;font-size:11px}.continue-btn{height:34px;background:#0F77D9;color:#fff;border:0;padding:0 20px;min-width:120px;float:right;margin-top:24px}.connection-status{color:#70849A;font-size:10px;margin:10px 0 0 3px}
.context-menu{position:fixed;z-index:1000;background:#fff;border:1px solid #C9D6E3;box-shadow:0 3px 11px rgba(0,0,0,.18);min-width:120px;padding:3px}.context-menu button{width:100%;background:#fff;border:0;text-align:left;padding:7px 12px;font-size:11px;cursor:pointer}.context-menu button:hover{background:#E8F3FE}.hidden{display:none!important}.window-overlay{position:fixed;inset:0;background:rgba(0,0,0,.23);z-index:999;display:flex;align-items:center;justify-content:center}.window-frame{width:min(1450px,96vw);height:min(820px,94vh);background:#F6F8FC;border:1px solid #9DAEBD;box-shadow:0 8px 30px rgba(0,0,0,.28);overflow:hidden;display:grid;grid-template-rows:40px 1fr 30px}.window-titlebar{height:40px;background:#fff;border-bottom:1px solid #E1E7EF;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:12px}.window-close{border:0;background:transparent;font-size:23px;width:38px;height:38px;cursor:pointer}.window-body{overflow:auto;padding:16px 18px}.window-footer{height:30px;background:#fff;border-top:1px solid #E1E7EF;padding:0 15px;display:flex;align-items:center;justify-content:space-between;color:#53677D;font-size:10px}.detail-header{display:grid;grid-template-columns:1fr auto;align-items:center;margin-bottom:12px}.detail-title{font-size:25px;font-weight:700}.detail-sub{font-size:12px;color:#60738C}.online-badge{background:#E7F8ED;border-radius:10px;padding:3px 8px;color:#16964A;font-size:10px;font-weight:600;margin-left:12px}.state-badge{background:#E8F3FE;border-radius:12px;padding:5px 10px;color:#0F77D9;font-weight:600}.detail-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.detail-card{padding:15px}.detail-card .dk-title{color:#60738C;font-size:10px}.detail-card .dk-value{font-size:20px;font-weight:700;margin-top:3px}.detail-card .dk-sub{color:#60738C;font-size:13px}.detail-second{display:grid;grid-template-columns:1.3fr 1.2fr repeat(4,.7fr);gap:10px;margin-top:10px}.consumption-line{margin-top:10px;padding:12px 15px;display:grid;grid-template-columns:1.2fr repeat(4,.7fr)}
.eff-page{background:#071422;color:#F5F8FC;min-height:100%;padding:24px}.eff-head{height:88px;display:grid;grid-template-columns:1fr auto 1fr}.eff-title{font-size:30px;font-weight:700}.eff-scope{color:#35A7FF;font-size:16px;margin-top:5px}.eff-clock{text-align:center;min-width:330px}.eff-clock b{display:block;font-size:34px}.eff-clock span{color:#9FB2C5;font-size:14px}.eff-period{text-align:right;font-size:18px;font-weight:600}.eff-period span{display:block;color:#9FB2C5;font-size:13px;margin-top:4px}.eff-filter{height:72px;background:#0D2032;border:1px solid #24425C;border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:12px}.eff-filter select{height:42px;min-width:180px;font-size:15px;padding:2px 8px}.eff-filter button{height:42px;width:112px;background:#0F77D9;color:#fff;border:0;font-size:15px;font-weight:600}.eff-status{margin-left:auto;color:#9FB2C5;font-size:13px}.eff-status i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#53D77A;margin-right:8px}.eff-kpis{display:grid;grid-template-columns:repeat(5,1fr);margin:10px -6px 4px}.eff-kpi{height:210px;background:#0D2032;border:1px solid #24425C;border-radius:12px;margin:6px;padding:20px 18px}.eff-kpi .ek-title{color:#9FB2C5;font-size:15px;font-weight:600}.eff-kpi .ek-value{font-size:54px;font-weight:700;margin-top:14px}.eff-kpi .ek-sub{color:#9FB2C5;font-size:13px}.eff-machine-head{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 6px}.eff-machine-head b{font-size:21px}.eff-machine-head span{color:#9FB2C5;font-size:14px}.eff-machines{background:#0D2032;border:1px solid #24425C;border-radius:12px;padding:12px;display:flex;flex-wrap:wrap}.eff-machine{width:224px;height:132px;background:#10283D;border:1px solid #24425C;border-radius:10px;margin:7px;padding:14px}.eff-machine .em-name{font-size:16px;font-weight:600}.eff-machine .em-val{font-size:34px;font-weight:700;color:#53D77A;margin-top:15px}.eff-machine .em-sub{color:#9FB2C5;font-size:11px;margin-top:11px}.eff-foot{display:flex;justify-content:space-between;color:#9FB2C5;font-size:12px;padding:5px 4px 0}
@media(max-width:1350px){.shift-grid{grid-template-columns:repeat(4,1fr);row-gap:12px}.dashboard-middle{grid-template-columns:1fr 1fr}.dashboard-middle>.dash-panel:last-child{grid-column:1/3}.filter-row{flex-wrap:wrap}.kpi-top{grid-template-columns:repeat(3,1fr)}}
.kpi-row-6{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}.health-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.cons-kpi-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:12px 0 8px}.mini-sub{font-size:9px;color:#7B8DA2;margin-top:5px;line-height:1.25}.mini-sub.warn{color:#A45A00}.health-current{font-size:10px;color:#315476;font-weight:600;margin-top:3px}.subtle-pill{display:inline-block;background:#F4F8FC!important;color:#315476!important;border:1px solid #DCE5EE}.filter-note{color:#7B8DA2;font-size:8.5px;margin:2px 0 0 1px}.table-section-head{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 8px}.table-section-head b{display:block;color:#102545;font-size:15px;font-weight:600}.table-section-head div span{display:block;color:#60738C;font-size:9px;margin-top:2px}.table-section-head>span{color:#60738C;font-size:10px}.cons-value{font-size:18px!important}.consumption-table{margin-top:8px;padding:0}.chemical-rule{background:#fff;border:1px solid #DCE5EE;border-radius:8px;padding:12px;color:#536F8C;font-size:11px;margin:8px 0 10px}.chemical-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:12px}.chemical-grid>.card{padding:0;overflow:auto}.chemical-title{height:42px;padding:12px 14px 0;color:#102545;font-weight:600;font-size:14px}
@media(max-width:1450px){.kpi-row-6{grid-template-columns:repeat(3,1fr)}.cons-kpi-row{grid-template-columns:repeat(4,1fr)}.health-kpi-row{grid-template-columns:repeat(2,1fr)}}
.recipe-library-head{padding:18px;display:flex;justify-content:space-between;align-items:center}.recipe-badges{display:flex;gap:8px;margin-top:7px}.recipe-badges span:first-child{background:#EAF4FE;border:1px solid #D3E8FA;border-radius:12px;padding:5px 10px;color:#0F77D9;font-size:11px;font-weight:600}.recipe-badges span:last-child{background:#ECF8F1;border:1px solid #D5EDDF;border-radius:12px;padding:5px 10px;color:#208A51;font-size:11px;font-weight:600}.recipe-list-card{margin-top:12px;background:#E0F1E6;border:1px solid #B8D9C4;border-radius:9px;padding:18px}.recipe-list-title{font-size:18px;font-weight:600;color:#102545}.recipe-filter{background:#fff;border:1px solid #B8D9C4;border-radius:6px;padding:6px 8px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;margin:8px 0}.recipe-filter span{font-size:10px;font-weight:600;color:#536A82}.recipe-filter input{width:100%}.recipe-actions{display:flex;gap:7px;margin-top:12px}
.comparison-top{padding:15px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}.comparison-filters{display:grid;grid-template-columns:130px 130px 190px 95px 210px 130px 1fr;gap:12px;align-items:end}.comparison-check{font-size:10px;color:#A45A00;margin-bottom:7px;white-space:nowrap}.comparison-active-filter{font-size:10px;color:#60738C;margin:0 0 7px 2px}.comparison-grid-wrap{margin-top:10px;min-height:390px;overflow:auto}.comparison-empty{min-height:390px;display:flex;align-items:center;justify-content:center;color:#72849A;font-size:14px}.comparison-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:#60738C;font-size:10px}
.shift-select-window{width:min(660px,96vw);height:min(570px,94vh);display:block;background:#F3F6F9}.shift-select{height:100%;display:grid;grid-template-rows:74px 1fr 68px}.shift-select-head{background:#fff;border-bottom:1px solid #DCE5EE;padding:15px 22px 10px}.shift-blue-label{color:#0F77D9;font-size:10px;font-weight:700}.shift-select-title{color:#102545;font-size:20px;font-weight:700;margin-top:4px}.shift-select-body{overflow:auto;padding:18px 22px}.shift-select-card{background:#fff;border:1px solid #DCE5EE;border-radius:8px;padding:16px;margin-bottom:14px}.shift-two{display:grid;grid-template-columns:1fr 18px 1fr}.shift-two>div:nth-child(2){grid-column:3}.shift-three{display:grid;grid-template-columns:1fr 14px 1fr 14px 1fr}.shift-three>div:nth-child(2){grid-column:3}.shift-three>div:nth-child(3){grid-column:5}.field-label10{color:#60738C;font-size:10px;margin-bottom:5px}.shift-input{width:100%;height:34px;padding:3px 8px;background:#fff;border:1px solid #C9D6E3}.shift-section-label{color:#315476;font-size:10px;font-weight:600;margin-top:16px}.shift-note{color:#60738C;font-size:10.5px;margin-top:5px}.shift-select-foot{background:#fff;border-top:1px solid #DCE5EE;display:flex;justify-content:flex-end;align-items:center;padding:0 18px}.shift-cancel,.shift-create{height:32px;border:1px solid #B8C9DA;padding:0 16px;margin-left:8px}.shift-cancel{width:90px;background:#fff;color:#315476}.shift-create{width:128px;background:#0F77D9;border-color:#0F77D9;color:#fff;font-weight:600}.shift-report-window{width:min(920px,96vw);height:min(900px,94vh)}.report-canvas-wrap{background:#DCE3EA;padding:18px;display:flex;justify-content:center}.shift-report-page{width:794px;min-height:1123px;background:#fff;padding:34px;box-shadow:0 1px 4px rgba(0,0,0,.14);color:#102545}.srp-head{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid #DCE5EE;padding-bottom:16px}.srp-factory{font-size:25px;font-weight:700;margin-top:5px}.srp-sub{font-size:9.5px;color:#60738C;margin-top:4px}.srp-created{text-align:right}.srp-created span,.srp-created b{display:block}.srp-created span{font-size:8.5px;color:#7890A8}.srp-created b{font-size:10px;color:#315476;margin-top:3px}.srp-created em{display:inline-block;background:#E8F3FE;border-radius:10px;padding:4px 9px;color:#0F77D9;font-size:9px;font-style:normal;font-weight:600;margin-top:8px}.srp-period{display:grid;grid-template-columns:1fr auto;background:#F7FAFD;border:1px solid #E0E7EF;border-radius:6px;padding:12px;margin-top:12px}.srp-period>div:last-child{text-align:right}.srp-period b,.srp-period span,.srp-period small{display:block}.srp-period>div:first-child b{font-size:14px}.srp-period span{font-size:10px;color:#315476;margin-top:4px}.srp-period small{font-size:8.5px;color:#7890A8;margin-top:4px}.srp-kpi4,.srp-kpi5{display:grid;gap:7px;margin-top:9px}.srp-kpi4{grid-template-columns:repeat(4,1fr)}.srp-kpi5{grid-template-columns:repeat(5,1fr)}.srp-card{border:1px solid #DCE5EE;border-radius:6px;padding:11px;min-height:78px}.srp-card span{font-size:8.5px;color:#7890A8;display:block}.srp-card b{font-size:16px;color:#103B70;display:block;margin-top:6px}.srp-card small{font-size:8.2px;color:#7890A8;display:block;margin-top:5px}.srp-section{color:#315476;font-size:10px;font-weight:700;margin:17px 0 5px}.srp-time{border:1px solid #DCE5EE;border-radius:6px;padding:14px;display:grid;grid-template-columns:190px 180px 1fr;gap:12px;align-items:center}.srp-donut{width:160px;height:160px;border-radius:50%;background:conic-gradient(#22B35B 0 84%,#0F77D9 84% 97%,#F29A17 97%);display:flex;align-items:center;justify-content:center}.srp-donut:before{content:"";width:108px;height:108px;background:#fff;border-radius:50%;position:absolute}.srp-donut div{position:relative;z-index:2;text-align:center;color:#7890A8;font-size:8px}.srp-donut b{display:block;color:#102545;font-size:15px;margin-top:3px}.srp-time>div:nth-child(2) span,.srp-time>div:nth-child(2) b{display:block}.srp-time>div:nth-child(2) span{font-size:9px;color:#60738C}.srp-time>div:nth-child(2) b{font-size:17px;color:#103B70;margin:4px 0 12px}.srp-time strong{font-size:9px;color:#315476}.srp-time p{font-size:9px;color:#60738C;line-height:1.4}.srp-time>div:last-child b{font-size:9px;color:#315476}.srp-footer{display:flex;justify-content:space-between;border-top:1px solid #E1E7EF;margin-top:18px;padding-top:8px;color:#60738C;font-size:8.5px}
.ops-content{padding:8px 12px 12px}.local-tabs{display:flex;border-bottom:1px solid #DCE5EE;margin-bottom:10px}.local-panel{padding:8px}.ops-section-head{margin-bottom:9px}.ops-section-head b{display:block;font-size:17px;color:#102545}.ops-section-head span{display:block;font-size:11px;color:#60738C;margin-top:4px}.button-head{display:flex;justify-content:space-between;align-items:center}.inline-check{align-self:end;margin:0 0 7px 6px;font-size:10px;color:#29445F}.inner-table{margin-top:10px;border-radius:5px}.backup-bottom{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;margin-top:10px}.wide-btn{width:auto;min-width:170px}.backup-history-foot{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;margin-top:10px}.backup-detail{background:#F8FAFD;border:1px solid #DCE5EE;border-radius:5px;padding:10px;color:#29445F;font-size:11px}.danger-text{color:#B4232C}.profile-info{background:#F7FAFD;border:1px solid #DCE5EE;border-radius:6px;padding:10px;color:#4E657F;font-size:10px;line-height:1.35}.transfer-title{font-size:19px;font-weight:700;margin:3px 0 12px}.transfer-layout{display:grid;grid-template-columns:1fr 112px 1fr;gap:10px;align-items:start}.transfer-actions{display:flex;gap:5px;margin-bottom:7px}.transfer-middle{display:grid;gap:8px;align-content:center;padding-top:55px}.transfer-middle button{width:102px}.transfer-middle span{height:8px}.transfer-hint{font-size:9px;color:#60738C;margin-top:8px;line-height:1.35}.transfer-footer{display:grid;grid-template-columns:1fr auto;margin-top:10px}.transfer-step-head{display:grid;grid-template-columns:1fr auto;align-items:center}.transfer-badge{display:inline-block;background:#EEF6FE;border:1px solid #CFE4F8;border-radius:14px;padding:5px 11px;color:#0F77D9;font-size:10px;font-weight:600}.transfer-step-card{width:650px;max-width:100%;margin:22px auto 0;background:#fff;border:1px solid #DCE5EE;border-radius:9px;padding:34px}.step-pill{display:inline-block;background:#EAF4FE;border:1px solid #D3E8FA;border-radius:18px;padding:6px 12px;color:#0F77D9;font-size:11px;font-weight:600}.transfer-rule{font-size:11px;margin-top:6px}.transfer-list-head{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:start;margin-bottom:12px}.transfer-list-head b{font-size:19px;color:#102545}
.chem-two-col{display:grid;grid-template-columns:1.18fr 12px .82fr;gap:0;align-items:start;padding:10px}.chem-two-col>div:first-child{grid-column:1}.chem-two-col>.chem-editor{grid-column:3}.chem-two-col.group-layout{grid-template-columns:1.05fr 12px .95fr}.chem-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.chem-section-head b{font-size:16px;color:#102545}.chem-section-head span{font-size:9.5px;color:#60738C}.chem-editor{background:#F7FAFD;border:1px solid #DCE5EE;border-radius:8px;padding:14px}.chem-editor-title{font-size:16px;font-weight:700;color:#102545}.chem-editor-note{color:#60738C;font-size:9px;margin:3px 0 10px}.chem-form-two{display:grid;grid-template-columns:1fr 9px 1fr}.chem-form-two>.chem-field:first-child{grid-column:1}.chem-form-two>.chem-field:last-child{grid-column:3}.chem-field{margin-top:8px}.chem-field>.filter-control{width:100%;height:28px}.chem-readonly{height:28px;background:#fff;border:1px solid #D7E2EC;padding:5px 7px;color:#29445F;font-size:10px}.chem-input-unit{display:grid;grid-template-columns:1fr 6px 42px}.chem-input-unit input{grid-column:1;width:100%}.chem-input-unit span{grid-column:3;height:28px;background:#fff;border:1px solid #D7E2EC;display:flex;align-items:center;justify-content:center;color:#29445F;font-size:10px}.chem-small-note{color:#60738C;font-size:8.8px;line-height:1.35;margin-top:8px}.chem-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}.chem-actions.compact{margin-top:8px;margin-bottom:7px}.chem-components-head,.chem-component-row{display:grid;grid-template-columns:24px 1fr 8px 90px;align-items:center}.chem-components-head{margin-top:10px;color:#60738C;font-size:9px}.chem-components-head span:nth-child(2){grid-column:2}.chem-components-head span:nth-child(3){grid-column:4}.chem-component-row{margin-top:5px}.chem-component-row>select{grid-column:2;width:100%}.chem-component-row>input{grid-column:4;width:100%}.chem-total-ratio{background:#fff;border:1px solid #DCE5EE;border-radius:5px;padding:8px 6px;margin-top:9px;color:#60738C;font-size:10px}.chem-total-ratio b{color:#102545}.chem-transfer-head{display:flex;justify-content:space-between;align-items:center;margin:0 10px 9px}.chem-transfer-head b{display:block;font-size:16px;color:#102545}.chem-transfer-head span{display:block;color:#60738C;font-size:9.5px;margin-top:3px}.chem-transfer-head strong{color:#0F77D9;font-size:10px}.chem-transfer-grid{display:grid;grid-template-columns:1fr 10px 1fr 10px 1.2fr;align-items:stretch}.chem-transfer-card{border:1px solid #DCE5EE;border-radius:6px;padding:9px;background:#fff;min-width:0}.chem-transfer-card:nth-child(1){grid-column:1}.chem-transfer-card:nth-child(2){grid-column:3}.chem-transfer-card:nth-child(3){grid-column:5;background:#F7FAFD}.chem-add-right{display:block;margin:8px 0 0 auto}.chem-capacity{display:flex;justify-content:space-between;align-items:center;color:#60738C;font-size:9px;margin-top:8px}.chem-send-box{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:#fff;border:1px solid #DCE5EE;border-radius:5px;padding:8px;margin-top:9px;color:#60738C;font-size:9.3px}
.operation-library-window{width:min(920px,96vw);height:min(720px,94vh)}.operation-library-body{padding:18px;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px}.operation-library-filter{display:flex;align-items:center;gap:6px}.operation-library-filter span{color:#536A82;font-size:10px;font-weight:600;margin-left:12px}.operation-library-filter span:first-child{margin-left:0}.operation-library-table{min-height:0;overflow:auto}.operation-library-foot{display:flex;justify-content:space-between;align-items:center}
.maintenance-counts{display:grid;grid-template-columns:repeat(3,150px);gap:10px;margin:12px 0}.maintenance-count{padding:10px 14px}.maintenance-count span{display:block;color:#60738C;font-size:9px}.maintenance-count b{display:block;color:#102545;font-size:20px;margin-top:2px}.maintenance-count.open b{color:#C36A00}.maintenance-count.planned b{color:#315476}.maintenance-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.maintenance-head b{display:block;color:#102545;font-size:15px;font-weight:600}.maintenance-head span{display:block;color:#60738C;font-size:10px;margin-top:4px}.maintenance-head button{margin-left:6px}.alarm-events-card{margin-top:12px}.alarm-filter-row{display:flex;align-items:flex-end;gap:10px;margin-bottom:10px}.alarm-count{margin-left:auto;align-self:center;color:#60738C;font-size:10px}.event-split{display:grid;grid-template-rows:1fr 1fr;gap:12px}.event-box{border:1px solid #DCE5EE;border-radius:6px;padding:10px}.event-box-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.event-box-head b{font-size:13px;color:#102545}.event-box-head span{font-size:10px;color:#60738C}.event-filter-two{display:flex;gap:10px;align-items:flex-end;margin-bottom:8px}

/* UI417 RecipeTimelineAnalysisControl / RecipeHistoryDetailWindow / RecipeComparisonView web port */
.exact-detail-window{width:min(1500px,97vw);height:min(900px,96vh)}
.exact-detail-body{background:#F6F8FC;padding:16px 18px 20px;overflow:auto}
.detail-header.exact{margin:-16px -18px 12px;padding:12px 24px;background:#fff;border-bottom:1px solid #E1E7EF;min-height:72px}
.detail-source{color:#60738C;font-size:11px;margin-right:12px}
.detail-kpis.six,.detail-second.six{grid-template-columns:1.25fr 1.25fr .62fr .8fr 1fr .95fr}
.analysis-control{margin-top:12px;background:#fff;border:1px solid #DCE5F0;border-radius:9px;padding:12px;min-height:610px}
.analysis-tabs{display:flex;gap:7px;align-items:center;border-bottom:1px solid #EDF1F5;padding-bottom:8px}
.analysis-tab{height:33px;padding:0 16px;background:transparent;color:#60738C;border:1px solid transparent;border-radius:7px;font:600 12px Segoe UI;cursor:pointer}
.analysis-tab:hover{background:#F3F7FB;color:#244B70}.analysis-tab.active{background:#EAF3FC;border-color:#B5D1EC;color:#0F5FAE}
.analysis-body{padding:10px 4px 4px}.analysis-graph{min-width:880px}.graph-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.graph-head b{font-size:13px;color:#102545}.graph-head span{font-size:10px;color:#60738C}
.lane-row,.analysis-graph-row,.time-axis{display:grid;grid-template-columns:92px 1fr;align-items:stretch;min-height:32px}.lane-row.small{min-height:30px}.analysis-label{display:flex;flex-direction:column;justify-content:center;padding-right:8px;color:#34516D;font-size:10px}.analysis-label b{font-size:10px}.analysis-label span{font-size:9px;color:#60738C;margin-top:2px}
.lane-canvas{height:28px;background:#F8FBFE;position:relative;overflow:hidden}.lane-canvas.green{background:#F8FCFA}.lane-canvas.red{background:#FFF9F9}.lane-block{position:absolute;top:3px;height:22px;overflow:hidden;border:1px solid rgba(52,81,109,.16);border-radius:4px;padding:0 5px;color:#29445F;font:600 9px Segoe UI;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.lane-block.cmd{top:4px;height:20px;font-size:8.5px;font-weight:500}.lane-block:hover{outline:1px solid #0F77D9;z-index:3}
.analysis-graph-row{height:72px;border-top:1px solid #F0F3F7}.metric-svg{width:100%;height:68px;background:#FBFCFE}.timeline-mark{position:absolute;top:8px;width:10px;height:10px;border:2px solid #fff;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.16);cursor:pointer}.chem-mark{background:#287A60}.alarm-mark{background:#D83B3B}.event-mark{background:#0F77D9}.action-mark{background:#7357C9}.timeline-mark:hover{width:14px;height:14px;top:6px}.time-axis{height:30px}.time-axis-line{position:relative;border-top:1px solid #DCE5EE;margin-top:9px}.time-axis-line span{position:absolute;top:4px;transform:translateX(-50%);font-size:8.5px;color:#60738C}.time-axis-line span:first-child{transform:none}.time-axis-line span:last-child{transform:translateX(-100%)}
.analysis-table-wrap{overflow:auto;max-height:500px}.analysis-table{min-width:1080px}.analysis-table .flow-op td{background:#F8FBFE;color:#164F7C}.analysis-table .flow-cmd td{background:#fff}.flow-indent{padding-left:24px;display:flex;flex-direction:column;gap:2px}.flow-indent span{font-size:10px;color:#536C85}.flow-indent em{font-size:10px;color:#287A60;font-style:normal;font-weight:600}.events-head{color:#102545;font-size:13px;font-weight:600;margin:3px 0 9px}
.history-exact-table tbody tr{cursor:default}.history-exact-table tbody tr:hover{background:#F1F7FD}.history-exact-table tbody tr:active{background:#E5F1FC}
.history-detail-header{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #DCE5F0;border-radius:9px;padding:12px 16px;margin-bottom:11px}.history-title-line{display:flex;align-items:center;gap:10px}.history-title-line>b{font-size:25px;color:#102545}.history-detail-header>div>span{display:block;color:#60738C;font-size:11px;margin-top:3px}.completed-badge{background:#E8F7EE;color:#138B45;border-radius:11px;padding:3px 9px;font-size:9px;font-weight:600}.history-head-actions{display:flex;align-items:center;gap:14px}.history-head-actions>div{text-align:right}.history-head-actions>div span{display:block;color:#60738C;font-size:9px}.history-head-actions>div b{display:block;background:#F0F6FD;border:1px solid #B9D4F0;border-radius:6px;padding:6px 14px;color:#0F5FAE;font:700 18px Consolas;margin-top:3px}
.history-summary-grid{display:grid;gap:10px}.history-summary-grid.five{grid-template-columns:1.25fr 1.25fr 1.1fr .62fr .95fr}.history-metrics{display:grid;background:#fff;border:1px solid #DCE5F0;border-radius:9px;margin-top:11px}.history-metrics.six{grid-template-columns:repeat(6,1fr)}.history-metrics.four{grid-template-columns:repeat(4,1fr)}.metric-box{padding:11px 14px;border-right:1px solid #EDF1F5}.metric-box:last-child{border-right:0}.metric-box span{display:block;color:#60738C;font-size:10px}.metric-box b{display:block;color:#102545;font-size:19px;margin-top:2px}.metric-box.good b{color:#138B45}.metric-box.bad b{color:#D83B3B}
.recipe-extra{margin-top:11px;color:#102545;font-size:11px}.recipe-extra summary{font-weight:600;cursor:pointer;padding:8px 2px}.recipe-extra-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:#fff;border:1px solid #DCE5F0;border-radius:9px;padding:14px;color:#516A83;line-height:1.55}
.recipe-report-page{width:1050px;min-height:740px;background:#fff;margin:0 auto;padding:34px 42px;box-shadow:0 1px 8px rgba(16,37,69,.12);color:#102545}.rr-head{display:flex;justify-content:space-between;border-bottom:2px solid #0F5FAE;padding-bottom:12px}.rr-head>div:first-child b{display:block;color:#173F70;font-size:22px}.rr-head>div:first-child span{font-size:10px;color:#60738C}.rr-head>div:last-child{text-align:right}.rr-head>div:last-child span{display:block;font-size:9px;color:#60738C}.rr-head>div:last-child strong{font:700 14px Consolas;color:#0F5FAE}.rr-info{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.25fr;gap:8px;margin-top:14px}.rr-info>div,.rr-resources .metric-box{border:1px solid #DCE5EE;border-radius:5px;padding:9px}.rr-info span{display:block;color:#60738C;font-size:8.5px}.rr-info b{display:block;margin-top:3px;font-size:11px}.rr-resources{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.rr-section{font-size:13px;color:#173F70;font-weight:700;margin:18px 0 8px;border-bottom:1px solid #DCE5EE;padding-bottom:5px}.rr-foot{display:flex;justify-content:space-between;border-top:1px solid #DCE5EE;margin-top:18px;padding-top:8px;font-size:8.5px;color:#60738C}
.comparison-result-page{padding-bottom:18px}.comparison-result-head{display:flex;justify-content:space-between;align-items:flex-start;padding:16px}.comparison-result-head>div:last-child{display:flex;gap:10px;align-items:center}.comparison-mode-badge{background:#E8F3FE;border-radius:13px;padding:6px 11px;color:#0F77D9;font-size:10px;font-weight:600}.trolley-flow{margin-top:10px;padding:0;overflow:hidden}.trolley-flow>div:first-child{padding:12px 14px 8px}.trolley-flow>div:first-child b{display:block;color:#173F70;font-size:13px}.trolley-flow>div:first-child span{display:block;color:#60738C;font-size:10px;margin-top:3px}.trolley-flow tbody tr{cursor:pointer}.selected-row{background:#EAF3FC!important}
.comparison-pair-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.compare-summary{padding:14px}.compare-summary.reference{border:2px solid #0F77D9}.compare-card-title{display:flex;justify-content:space-between}.compare-card-title span{display:block;color:#0F77D9;font-size:10px;font-weight:700}.compare-card-title b{display:block;color:#102545;font-size:18px;margin-top:3px}.compare-card-title em{background:#E8F3FE;color:#0F77D9;border-radius:12px;padding:4px 9px;font-size:9px;font-style:normal;font-weight:700;height:max-content}.compare-card-title em.amber{background:#FFF2DC;color:#A56700}.compare-summary>p{color:#60738C;font-size:10px;margin:5px 0 0}.compare-metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:12px}.compare-metrics>div span{display:block;color:#60738C;font-size:9px}.compare-metrics>div b{display:block;color:#102545;font-size:15px;margin-top:2px}.compare-metrics>div:first-child b{font-size:17px}.compare-metrics small{display:block;font-size:9px;color:#D83B1B;margin-top:1px}.main-finding{padding:13px;margin-top:10px}.main-finding b{display:block;color:#173F70;font-size:11px}.main-finding span{display:block;color:#29445F;font-size:12px;line-height:19px;margin-top:5px}
.comparison-tabs{display:flex;align-items:center;padding:10px;margin-top:10px}.cmp-tab{height:31px;padding:0 12px;margin-right:7px;background:#fff;color:#315476;border:1px solid #BFCEDF;cursor:pointer}.cmp-tab.active{background:#0F77D9;color:#fff;border-color:#0F77D9}.comparison-tabs label{margin-left:auto;color:#526D86;font-size:10px}.comparison-ops-head,.compare-op-main,.compare-command-row{display:grid;grid-template-columns:190px 1fr 1fr 110px 90px;align-items:center}.comparison-ops-head{background:#F5F8FC;border:1px solid #DCE5EE;border-radius:7px;padding:7px 8px;color:#34516D;font-size:10px;font-weight:600}.comparison-ops-head span:not(:first-child){text-align:center}.compare-op-card{background:#fff;border:1px solid #DCE5EE;border-radius:9px;margin-top:7px;overflow:hidden}.compare-op-main{padding:6px 8px;min-height:54px;position:relative}.compare-op-main>button{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:1px solid #AAB9C8;background:#fff;color:#53677D;font-size:9px;margin:0;z-index:2}.compare-op-main>b{padding-left:28px;color:#164F7C}.compare-op-main>div{text-align:center;color:#29445F}.compare-op-main small{display:block;color:#71879B;font-size:8px;margin-top:2px}.compare-op-main>strong{text-align:center;font-size:10px}.diff-red,.status-red{color:#D83B1B!important}.diff-green,.status-green{color:#22A85A!important}.compare-commands{border-top:1px solid #EDF1F5}.compare-command-row{padding:9px 8px;border-top:1px solid #EDF1F5}.compare-command-row:first-child{border-top:0}.compare-command-row>div:first-child{padding-left:28px}.compare-command-row>div{display:flex;flex-direction:column;text-align:center}.compare-command-row>div:first-child{text-align:left}.compare-command-row span{font-size:9px;color:#60738C;margin-top:2px}.compare-command-row>strong{text-align:center;font-size:9px}.comparison-two-tables{display:grid;grid-template-columns:1fr 1fr;gap:10px}.comparison-two-tables>.card{padding:0;overflow:hidden}.comparison-two-tables>.card>b{display:block;padding:10px 12px;color:#173F70;font-size:11px}.comparison-chem-table{overflow:auto}.comparison-result-actions{margin-top:10px;display:flex;justify-content:flex-start}.compare-incompatible{opacity:.38}.compare-incompatible input{pointer-events:none}.order-hidden{display:none}
.comparison-chart{padding:10px;min-height:880px}.compare-chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.compare-chart-head>b{font-size:13px;color:#102545}.compare-chart-head>div{font-size:10px;color:#34516D}.solid-line,.dash-line{display:inline-block;width:22px;border-top:2px solid #34516D;margin:0 6px 3px 12px}.dash-line{border-top-style:dashed}.compare-lane,.compare-metric,.compare-marker-lane,.compare-axis{display:grid;grid-template-columns:92px 1fr;align-items:center}.compare-lane>b,.compare-marker-lane>b{font-size:10px;color:#34516D}.double-lane{height:80px;background:#F8FBFE;position:relative}.double-lane>div{height:38px;position:relative}.double-lane>div+div{border-top:1px dashed #DCE5EE}.double-lane .lane-block{top:8px}.double-lane .dashed-lane .lane-block{border-style:dashed}.compare-metric{height:136px}.compare-metric>div{display:flex;flex-direction:column}.compare-metric>div b{font-size:11px}.compare-metric>div span{font-size:9px;color:#60738C}.compare-metric svg{width:100%;height:126px;background:#FBFCFE}.compare-marker-lane{height:48px}.compare-marker-lane>div{height:44px;background:#FAFCFF;position:relative}.compare-marker-lane i{position:absolute;width:9px;height:9px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.14)}.compare-axis{height:34px}.compare-axis>span{font-size:9px;color:#60738C}.compare-axis>div{position:relative;border-top:1px solid #DCE5EE;height:28px}.compare-axis i{position:absolute;top:5px;transform:translateX(-50%);font-size:8.5px;color:#60738C;font-style:normal}
@media(max-width:1200px){.detail-kpis.six,.detail-second.six,.history-summary-grid.five{grid-template-columns:repeat(3,1fr)}.history-metrics.six{grid-template-columns:repeat(3,1fr)}.compare-metrics{grid-template-columns:repeat(3,1fr)}.comparison-ops-head,.compare-op-main,.compare-command-row{grid-template-columns:180px 1fr 1fr 90px 80px}}

/* UI417 ordered live-card clipping parity.
   Keep the original 278x236 geometry; only reproduce WPF TextTrimming/min-width behavior. */
.live-card{overflow:hidden}
.live-card-header{min-width:0;overflow:hidden}
.live-card-header>div:first-child{min-width:0;overflow:hidden;padding-right:6px}
.live-machine-name,.live-machine-sub{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-badge{flex:0 0 auto;max-width:108px;overflow:hidden}
.live-body{min-width:0;overflow:hidden}
.live-info{min-width:0;overflow:hidden}
.live-line{min-width:0;max-width:142px;overflow:hidden}
.live-line .label{flex:0 0 auto;min-width:0}
.live-line b{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-progress{min-width:0;overflow:hidden}
.live-footer{min-width:0;overflow:hidden}
.footer-info{min-width:0;overflow:hidden}
.footer-info .fi-title{min-width:0;max-width:100%;overflow:hidden}
.footer-info .fi-title span{display:block;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.footer-info .fi-value{min-width:0;max-width:calc(100% - 22px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* UI417 exact grid placement: inactive cards span body through progress row without creating an auto-grid placeholder. */
.live-card-header{grid-row:1}
.live-body{grid-row:2}
.live-body[style*="grid-row:2 / span 2"]{grid-row:2 / span 2 !important}
.live-progress{grid-row:3}
.live-sep{grid-row:4}
.live-footer{grid-row:5}

/* UI417 bilingual demo language switch */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px}.demo-lang-switch{display:inline-flex;align-items:center;border:1px solid #cfdceb;border-radius:7px;padding:2px;background:#f7faff;margin-right:16px}.demo-lang-switch button{border:0;background:transparent;color:#60758d;font:700 10px Segoe UI,Arial,sans-serif;padding:6px 8px;border-radius:5px;cursor:pointer}.demo-lang-switch button.active{background:#0f5fae;color:#fff}

/* Desktop VisionCore parity: 6 + 4 consumption KPI cards, 5 health cards. */
.cons-kpi-main{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:12px 0}
.cons-kpi-extra{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 12px}
.health-kpi-row{grid-template-columns:repeat(5,minmax(0,1fr))}
.cons-kpi-main .mini-kpi,.cons-kpi-extra .mini-kpi,.health-kpi-row .mini-kpi{min-width:0}
.consumption-table{overflow:auto;max-width:100%}
.consumption-table .data-table{min-width:1320px}
[data-detail-table] tbody tr{cursor:pointer}
[data-detail-table] tbody tr:hover{background:#ECF5FC}
.demo-performance-window{width:min(1320px,96vw);height:min(800px,94vh)}
.demo-performance-body{padding:15px;overflow:auto;min-height:0}
.demo-performance-summary{padding:15px 18px;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.demo-performance-summary h2{font-size:21px;margin:0 0 5px}
.demo-performance-summary span{font-size:11px;color:#60738C}
.demo-performance-panel{padding:12px;min-height:380px}
.demo-performance-panel .tabbar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.demo-performance-footer{padding:6px 15px;background:white;border-top:1px solid #DCE5EE;font-size:10px;color:#60738C}
@media(max-width:1550px){.cons-kpi-main{grid-template-columns:repeat(3,minmax(0,1fr))}.health-kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1350px){.cons-kpi-extra{grid-template-columns:repeat(2,minmax(0,1fr))}}

.maintenance-row-detail,.maintenance-row-print{background:transparent;border:0;color:#0F77D9;font:600 11px Segoe UI;cursor:pointer;padding:3px}
.maintenance-row-detail:hover,.maintenance-row-print:hover{text-decoration:underline}
.demo-maintenance-window{width:min(1250px,95vw);height:min(810px,94vh)}
.maint-demo-body{overflow:auto;padding:15px;min-height:0}
.demo-maint-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.demo-maint-head h2{font-size:21px;margin:0}
.demo-maint-head span{font-size:11px;color:#60738C}
.maint-preview-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.maint-demo-section{padding:14px;margin-bottom:12px}
.maint-demo-section h3{font-size:16px;margin:0 0 12px}
.maint-demo-section p{font-size:12px;margin:8px 0}
.maint-demo-section p span{display:inline-block;min-width:135px;color:#60738C}
.maint-demo-section .data-table{width:100%}
.maint-demo-section .maint-help{font-size:10px;color:#60738C;margin:12px 0}
.maint-demo-footer{display:flex;justify-content:flex-end;gap:8px;padding:6px 14px;background:white;border-top:1px solid #DCE5EE}

/* Desktop rows show totals and per-kg values in the same column, not separate columns. */
.cons-detail-metric{display:flex;flex-direction:column;gap:4px;min-width:86px;padding:3px 0}
.cons-detail-metric span{white-space:nowrap;font-weight:500}
.cons-detail-metric small{font-size:10px;color:#60738C;white-space:nowrap}
.consumption-table .data-table td{vertical-align:middle;min-height:56px}
/* Print previews in the demo print only their modal contents, not the surrounding website. */
@media print {
 body:has(#windowOverlay:not(.hidden)) .vc-app{display:none!important}
 body:has(#windowOverlay:not(.hidden)) #contextMenu{display:none!important}
 body:has(#windowOverlay:not(.hidden)) #windowOverlay{position:static!important;display:block!important;background:#fff!important;inset:auto!important}
 body:has(#windowOverlay:not(.hidden)) #windowFrame{display:block!important;width:100%!important;height:auto!important;max-height:none!important;border:0!important;box-shadow:none!important;overflow:visible!important}
 body:has(#windowOverlay:not(.hidden)) .window-titlebar,body:has(#windowOverlay:not(.hidden)) .maint-demo-footer,body:has(#windowOverlay:not(.hidden)) .demo-performance-footer{display:none!important}
 body:has(#windowOverlay:not(.hidden)) .maint-demo-body,body:has(#windowOverlay:not(.hidden)) .demo-performance-body{overflow:visible!important;padding:0!important}
}

/* Desktop spin-health card: effectiveness is based on average effective time,
   current/reference samples and failures are displayed instead of rpm. */
.health-kpi-row .spin-health-kpi{display:flex;align-items:flex-start;gap:7px}
.health-kpi-row .spin-health-kpi>img{float:none;flex:none;margin:0;width:40px;height:40px}
.spin-health-body{flex:1;min-width:0}
.spin-health-line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:start;margin-top:4px}
.spin-health-line .value{margin:0;white-space:nowrap}
.spin-health-detail{font-size:9px;font-weight:600;color:#315476;line-height:1.35;overflow-wrap:normal}
.spin-health-compare{color:#7B8DA2;font-size:9px;line-height:1.35;margin-top:6px}
.spin-health-compare span:first-child{white-space:nowrap}

/* Machine operations shares Maintenance / Health module card styling. */
.machine-ops-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.machine-ops-grid .module-button.hub{height:auto;min-height:188px;min-width:0}.machine-ops-grid .module-button img{max-width:min(280px,100%)}.machine-ops-grid .module-button:focus-visible{outline:3px solid #0F77D9;outline-offset:3px}@media(max-width:1100px){.machine-ops-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.machine-ops-grid{grid-template-columns:minmax(0,1fr)}}