/* Outlook direction: opaque Fluent surfaces, Segoe typography, flat 2D geometry. */
:root{
 --font:'Segoe UI Variable','Segoe UI',Inter,system-ui,sans-serif;
 --bg:#f5f5f5;--bg-top:#f5f5f5;--panel:#fff;--solid:#fff;--chrome:#f5f5f5;--field:#fff;
 --text:#242424;--secondary:#424242;--muted:#616161;--line:#e0e0e0;--strong:#bdbdbd;--inset:#f5f5f5;--inset-strong:#ebebeb;
 --ink:#0f6cbd;--accent:#0f6cbd;--accent-soft:#ebf3fc;--on-ink:#fff;
 --green:#107c41;--green-fill:#107c41;--green-soft:#e7f3ec;
 --amber:#835b00;--amber-fill:#b37b00;--amber-soft:#fff4ce;
 --red:#b10e1c;--red-fill:#c50f1f;--red-soft:#fde7e9;
 --vac:#0f6cbd;--grip:#7160a1;--belt:#f0f2f4;--slat:#d5dae0;--product:#fff;--product-edge:#a6b1bd;
 --radius-sm:4px;--radius-control:4px;--radius-card:4px;--radius-inset:4px;
 --space:20px;--control-height:40px;--section-padding:20px;
 --shadow:none;--dialog-shadow:0 8px 28px rgba(0,0,0,.2);--glass-floating:#fff;
 --diagram-stroke:#607285;--diagram-fill:#e3eaf1;--diagram-base:#d1ddea;--diagram-joint:#fff;
}
:root[data-theme=dark]{
 --bg:#1f1f1f;--bg-top:#1f1f1f;--panel:#292929;--solid:#292929;--chrome:#242424;--field:#242424;
 --text:#f5f5f5;--secondary:#d6d6d6;--muted:#b8b8b8;--line:#424242;--strong:#707070;--inset:#242424;--inset-strong:#383838;
 --ink:#0f6cbd;--accent:#75b6e7;--accent-soft:#123d59;--on-ink:#fff;
 --green:#92cfa5;--green-fill:#3fa567;--green-soft:#173c25;--amber:#ebc65f;--amber-fill:#caa044;--amber-soft:#463a16;
 --red:#f4a6ac;--red-fill:#c50f1f;--red-soft:#4d1f25;--vac:#75b6e7;--grip:#c7b9ec;
 --belt:#252a30;--slat:#3d4650;--product:#4c5967;--product-edge:#92a0af;
 --diagram-stroke:#a1b4c7;--diagram-fill:#344353;--diagram-base:#40576d;--diagram-joint:#263341;--glass-floating:#292929;
}
/* Deliberately remove all inherited optical treatments, including pseudo-elements. */
*,*::before,*::after{background-image:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body,html{background:var(--bg);font-family:var(--font)}
.header{background:#0f6cbd;color:#fff;border-bottom:1px solid #0f6cbd;box-shadow:none;gap:18px}
.header .brand img{filter:brightness(0) invert(1);opacity:1}
.header .client-brand{color:#fff;border-color:#438dcc}
.header .header-recipe,.header .header-recipe small,.header .header-recipe strong,.header .clock small,.header .user-name small,.header .user-name strong,.header .account-trigger>.icon,.header .language .icon{color:#fff}
.header .header-user{border-color:#438dcc}.header .avatar{background:#fff;color:#0f6cbd;box-shadow:none}
.header .level{background:#fff;color:#0f6cbd}
.header .line-state{background:#fff;border:0;box-shadow:none;color:#107c41;border-radius:4px}
.header .line-state.state-idle{color:#835b00}.header .line-state.state-fault{color:#b10e1c}
.header .line-state .state-icon{border-radius:4px;background:#107c41;color:#fff}
.header .state-idle .state-icon{background:#fff4ce;color:#835b00}.header .state-fault .state-icon{background:#c50f1f;color:#fff}
.header .alarm-bell{background:#115ea3;border:0;color:#fff;box-shadow:none;border-radius:4px}
.header .alarm-bell.has-alarms{background:#fff4ce;color:#835b00}
.header .alarm-bell.critical{background:#c50f1f;color:#fff}
.header .alarm-bell .badge{outline-color:#0f6cbd;background:#242424;color:#fff}
.header .language select{background:#115ea3;border-color:#438dcc;color:#fff;border-radius:4px}
.header .language option{background:var(--solid);color:var(--text)}
.header .account-trigger:hover,.header .account-trigger[aria-expanded=true]{background:#115ea3}
.header .account-menu{color:var(--text)}
.header .account-menu .avatar{background:var(--accent-soft);color:var(--accent)}
.rail{background:var(--chrome);border-right:1px solid var(--line);box-shadow:none;border-radius:0;gap:8px;padding-inline:10px}
.nav-item{border-radius:4px;font-size:12px;font-weight:500;box-shadow:none}
.nav-item .settings-label{font-size:10px}
.nav-item[aria-current=page]{background:var(--accent-soft);color:var(--accent);box-shadow:none}
.nav-item[aria-current=page]::before{left:-10px;width:3px;top:15px;bottom:15px;background:var(--accent);border-radius:0}
.nav-item:hover{background:var(--inset-strong)}
main{padding-top:22px}.footer{border-top:1px solid var(--line);font-size:11px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:none}
.card-heading h2{font-size:16px;font-weight:600}
.kpi-grid{gap:0;border:1px solid var(--line);border-radius:4px;background:var(--panel);overflow:hidden}
.kpi-grid>.card{background:var(--panel);border:0;border-radius:0;box-shadow:none}
.kpi-grid>.card+.card{border-left:1px solid var(--line)}
.kpi-grid>.status-card{background:var(--panel)}
.status-main>.state-icon{border-radius:4px;box-shadow:none;background:var(--state-fill)}
.status-main strong{font-size:25px;font-weight:600}
.status-facts{background:transparent;border-radius:0;border-top:1px solid var(--line)}
.metric-label{font-size:13px;color:var(--secondary)}.metric-value{font-size:38px;font-weight:600}
.delta,.chip,.count-pill,.severity{border-radius:4px}
.delta.good{background:var(--green-soft)}.delta.low{background:var(--amber-soft)}
.meter,.meter span{border-radius:0}.plot span,.plot span.now{border-radius:0;background:#a9cdec}.plot span.now{background:#0f6cbd}
:root[data-theme=dark] .plot span{background:#345a76}:root[data-theme=dark] .plot span.now{background:#75b6e7}
.goal small{background:var(--panel)}
.count-pill{background:var(--inset);border-radius:4px}.count-pill.warn{background:var(--amber-soft)}
.machine{background:var(--inset);border:1px solid var(--line);border-radius:4px;padding:16px;gap:16px}
.robot{border:1px solid var(--line);border-radius:4px;background:var(--panel);box-shadow:none}
.robot:hover{background:var(--accent-soft);border-color:var(--accent);box-shadow:none}
.robot.fault{background:var(--red-soft);border-color:var(--red-fill)}.robot.off{background:var(--inset)}
.robot-id{font-size:13px}.robot-tool{font-size:11px}.robot-rate{font-size:12px}.robot .chip{font-size:11px}
/* The actual machine graphics are SVGs, not raster canvas illustrations. */
.machine-robot{display:block;width:100%;max-width:146px;aspect-ratio:200/166;overflow:visible}
.diagram-structure{stroke:var(--diagram-stroke);stroke-width:2.5}
.robot-base{fill:var(--diagram-base);stroke:var(--diagram-stroke);stroke-width:2}
.robot-motor{fill:var(--panel);stroke:var(--diagram-stroke);stroke-width:2}
.robot-link{stroke-width:4;fill:none}.robot-link.rear{stroke:var(--strong);stroke-width:2}
.robot-rod{stroke-width:2;fill:none}
.robot-joint{fill:var(--diagram-joint);stroke-width:2}
.robot-wrist{fill:var(--diagram-fill);stroke-width:2}.robot-stem{stroke-width:3}
.diagram-vac{stroke:var(--vac);fill:var(--accent-soft);stroke-width:2.5}
.diagram-grip{stroke:var(--grip);fill:none;stroke-width:3}
.robot.fault .robot-motor{stroke:var(--red-fill);fill:var(--red-soft)}
.robot.off .machine-robot{opacity:.4}
.conveyor{border:1px solid var(--strong);border-radius:4px;background:var(--belt);box-shadow:none}
.conveyor .machine-belt{display:block;width:100%;height:100%;pointer-events:none}
.belt-track{stroke:var(--product-edge);stroke-width:1;fill:none}
.belt-mark{stroke:var(--slat);stroke-width:1;fill:none}
.belt-product{fill:var(--product);stroke:var(--product-edge);stroke-width:1.25}
.product-seam{stroke:var(--product-edge);stroke-width:1;fill:none}
.conveyor:hover{box-shadow:none;border-color:var(--accent)}.conveyor:hover .machine-belt{filter:none}
.scan-zone{background:transparent;border-color:var(--accent)}
.camera{border-radius:4px;border:1px solid var(--strong);background:var(--solid);box-shadow:none}
.camera:hover{transform:translateY(-50%);box-shadow:none;border-color:var(--accent)}
.camera.warn{background:var(--amber-soft);border-color:var(--amber-fill)}.camera.fault{background:var(--red-soft);border-color:var(--red-fill)}
.mini-alarm{border-radius:4px;background:var(--amber-soft);border:1px solid #eed58b}
:root[data-theme=dark] .mini-alarm{border-color:#65501d}
.mini-alarm.critical{background:var(--red-soft);border-color:var(--red-fill)}
.mini-alarm strong{font-size:13px}.mini-alarm small{font-size:12px}
.recipe-summary>span:first-child,.module-card .module-icon{background:var(--accent-soft);border-radius:4px;box-shadow:none}
.recipe-summary strong{font-size:15px}.specs>div{font-size:13px}
fluent-button.button{--fontFamilyBase:var(--font);--borderRadiusMedium:4px;border-radius:4px;font-family:var(--font);box-shadow:none;--colorNeutralBackground1:var(--field);--colorNeutralForeground1:var(--text);--colorNeutralStroke1:var(--strong)}
fluent-button.button.primary{--colorBrandBackground:#0f6cbd;--colorBrandBackgroundHover:#115ea3;--colorBrandBackgroundPressed:#0c3b5e;--colorNeutralForegroundOnBrand:#fff}
fluent-button.button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input:not([type=checkbox]),select,.stepper,.unit,.library-item,.notice,.read-only,.segmented,.segmented button,.quick-ranges button,.alarm-summary>span,.account-facts,.level-scale li,.recovery-steps li{border-radius:4px;box-shadow:none}
input:not([type=checkbox]),select,.stepper{background:var(--field);border-color:var(--strong)}
.stepper input{background:transparent}.switch{box-shadow:none}.switch::before{box-shadow:none}
.library-item.selected{background:var(--accent-soft);border-color:transparent;box-shadow:inset 2px 0 var(--accent)}
.tabs{background:var(--panel)}.tabs button[aria-selected=true]::after{border-radius:0;height:3px}
.segmented{background:var(--inset);border:1px solid var(--line)}
.segmented button[aria-selected=true],.segmented button[aria-checked=true]{background:var(--solid);color:var(--accent);box-shadow:none;outline:1px solid var(--line)}
.editor-footer,.read-only,.account-facts{background:var(--inset)}
#dialog,.account-menu,#toast{background:var(--solid);border:1px solid var(--strong);border-radius:4px;box-shadow:var(--dialog-shadow);animation:none}
#dialog::backdrop{background:rgba(0,0,0,.35);backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.dialog-actions{background:var(--inset)}
/* One shared component scale across dashboard, editors, tables and dialogs. */
h1,.page-heading h1{font-size:24px;font-weight:600;letter-spacing:-.02em}
h2,.card-heading h2,.settings-card>h2,.manual-group>h2{font-size:16px;font-weight:600;letter-spacing:0}
h3,.form-section h3,.module-card h3{font-size:14px;font-weight:600;letter-spacing:0}
.editor-header h2,.dialog-header h2{font-size:20px;font-weight:600;letter-spacing:-.01em}
.page-heading p,.setting-row span.description,.toggle-row label>span,.dialog-body p{font-size:13px;line-height:1.5}
.page-heading{margin:4px 0 20px}.card-heading{margin-bottom:16px}
.card,.synoptic{padding:var(--section-padding)}.editor{padding:0}.alarm-card{padding:0}
.editor-header,.form-panel{padding:var(--section-padding)}.tabs{padding-inline:var(--section-padding)}
.editor-footer,.dialog-actions{padding:16px var(--section-padding)}
.dialog-header{padding:20px 20px 12px}.dialog-body{padding:12px 20px 20px}
.home-grid,.home-aside,.settings-grid,.recipes-layout{gap:20px}.form-grid{gap:20px}
.kpi-grid>.card{padding:20px}.metric-value{letter-spacing:-.025em}
.library-item{padding:12px}.read-only{padding:16px}
fluent-button.button,fluent-button.button.large,fluent-button.button.small,fluent-button.button.icon-only{
 min-height:var(--control-height);border-radius:4px;font-size:13px;--fontSizeBase300:13px;--borderRadiusMedium:4px;
}
fluent-button.button .icon{width:18px;height:18px}
fluent-button.button.go{--colorBrandBackground:#0f6cbd;--colorBrandBackgroundHover:#115ea3;--colorBrandBackgroundPressed:#0c3b5e;--colorNeutralForegroundOnBrand:#fff}
input:not([type=checkbox]),select,.filters input,.filters select,.stepper{height:var(--control-height);border-radius:4px;font-size:14px}
.stepper input,.stepper button{height:calc(var(--control-height) - 2px);border-radius:0}
.stepper input{font-size:14px}.stepper button{width:38px}
.stepper:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.stepper input:focus-visible{outline:none}
.segmented{padding:0;gap:0;background:var(--panel);border-color:var(--strong);overflow:hidden}
.segmented button{min-height:var(--control-height);border-radius:0;font-size:13px;font-weight:600}
.segmented button+button{border-left:1px solid var(--line)}
.segmented button[aria-selected=true],.segmented button[aria-checked=true]{background:var(--accent-soft);color:var(--accent);outline:none;box-shadow:inset 0 -2px var(--accent)}
.tabs button{min-height:44px;font-size:13px}.tabs button[aria-selected=true]{background:transparent}
.unit{background:var(--panel)}.unit:hover{background:var(--inset)}.unit[aria-checked=true]{background:var(--accent-soft)}
.chip,.severity,.delta{font-weight:600;font-size:11px;line-height:1.4;border-radius:4px}
.page-actions>.chip.idle{background:var(--amber-soft);color:var(--amber)}
.nav-item,.nav-item .settings-label{font-size:11px;font-weight:400}.nav-item[aria-current=page]{font-weight:600}
.nav-item .icon{width:22px;height:22px}.count-pill .icon,.metric-label .icon,.tabs .icon{width:18px;height:18px}
.count-pill{font-size:12px}.legend,.legend-hint,.chart-axis,.goal small,.metric-footer{font-size:11px}
.robot-tool .icon,.legend-tool .icon{width:14px;height:14px}
.module-card .module-icon{background:var(--inset);color:var(--secondary)}
.recovery-steps label,.permissions small{border-radius:4px}.recovery-steps label{font-size:14px}
:root[data-contrast=true] .header{background:#0f6cbd;color:#fff}
:root[data-contrast=true] .header .line-state{background:#fff}

@media(max-width:1100px){.kpi-grid>.card:nth-child(3){border-left:0}.kpi-grid>.card:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:560px){
 :root{--control-height:44px;--section-padding:16px}
 .home-grid,.home-aside,.settings-grid,.recipes-layout{gap:16px}.page-heading h1{font-size:24px}
 .kpi-grid>.card{padding:14px}.editor-header h2,.dialog-header h2{font-size:20px}
 .header{gap:7px}.rail{left:0;right:0;bottom:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);border-radius:0;background:var(--solid);box-shadow:none}
 .nav-item{font-size:10px;border-radius:4px}.nav-item .settings-label{font-size:10px}
 .kpi-grid{gap:0;border-radius:4px}.kpi-grid>.card{padding:14px;border-radius:0;min-height:192px}
 .metric-label,.metric-footer,.metric-value small,.delta,.oee>div,.status-main small{font-size:11px}.metric-value{font-size:30px}.status-main strong{font-size:19px}.status-main>.state-icon{border-radius:4px}
 .card,.synoptic{border-radius:4px}.robot{border-radius:4px}.machine{border-radius:4px;padding:10px;gap:13px}.conveyor,.camera{border-radius:4px}
 .robot-id{font-size:12px}.robot-tool,.robot-rate,.robot .chip,.lane-name,.lane-speed,.lane-caption .chip,.legend,.legend-hint,.camera b,.camera small{font-size:11px}
 .robot .machine-robot{max-width:60px}.diagram-structure{stroke-width:3}.robot-link{stroke-width:5}.robot-rod{stroke-width:3}
 .module-card .chip{font-size:11px}.editor{padding:0}#dialog,.account-menu{border-radius:4px}
}
@media(max-width:360px){.header{gap:5px}.kpi-grid>.card{padding:11px}.status-main strong{font-size:19px}.robot{grid-template-columns:34px minmax(0,1fr)}.robot-id{font-size:11px}.robot .machine-robot{max-width:34px}}
:root[data-contrast=true]{--secondary:var(--text);--muted:var(--text);--line:var(--strong)}
:root[data-contrast=true] .card{outline:none}