/* V2 — optical chrome over quiet data surfaces. The V1 server is independent. */
:root{
 --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif;
 --bg:#dae7f0;--bg-top:#edf3f7;--panel:rgba(255,255,255,.9);--solid:#fff;--field:rgba(255,255,255,.88);--chrome:rgba(247,251,255,.58);
 --text:#202b39;--secondary:#4a5868;--muted:#5c6d7c;--line:rgba(52,81,109,.14);--strong:#a8bbc9;--inset:rgba(223,233,242,.48);--inset-strong:#e1eaf2;
 --ink:#1269b4;--accent:#0867ba;--accent-soft:#e1effc;--on-ink:#fff;
 --green:#147345;--green-fill:#187d4b;--green-soft:#e2f3e9;--amber:#795800;--amber-fill:#a97906;--amber-soft:#fff2cc;
 --red:#aa2732;--red-fill:#b72e3a;--red-soft:#fde9ec;--vac:#1469ad;--grip:#6d5896;
 --radius-sm:8px;--radius-control:10px;--radius-card:16px;--radius-inset:10px;
 --shadow:0 5px 18px -10px rgba(31,65,98,.2);--dialog-shadow:0 24px 64px -16px rgba(18,40,63,.32);
 --glass-edge:rgba(255,255,255,.9);--glass-shadow:0 8px 28px -15px rgba(34,67,102,.28),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(61,101,143,.1);
 --glass-tint:rgba(247,252,255,.62);--glass-fallback:rgba(247,252,255,.88);--glass-focus:rgba(255,255,255,.92);
 --diagram-stroke:#627d96;--diagram-fill:#e0ebf5;--diagram-base:#c9dded;--diagram-joint:#f8fbff;
 --belt:#e8eff5;--slat:#cbd8e4;--product:#fff;--product-edge:#9eafbe;
}
:root[data-theme=dark]{
 --bg:#111f2d;--bg-top:#24394a;--panel:rgba(23,38,59,.94);--solid:#26394b;--field:#1f3141;--chrome:rgba(31,49,66,.67);
 --text:#eff6fd;--secondary:#c6d5e2;--muted:#aebfcc;--line:rgba(192,218,240,.14);--strong:#677f93;--inset:rgba(17,34,49,.57);--inset-strong:#30485d;
 --ink:#176db4;--accent:#90c9fb;--accent-soft:#23435e;--on-ink:#fff;
 --green:#9adab8;--green-fill:#4bb17e;--green-soft:#244738;--amber:#efd084;--amber-fill:#c9a556;--amber-soft:#493d26;
 --red:#ffadb5;--red-fill:#c04958;--red-soft:#4e2f39;--vac:#99cef5;--grip:#d0bfee;
 --glass-edge:rgba(220,240,255,.2);--glass-shadow:0 10px 28px -15px rgba(0,0,0,.5),inset 0 1px 0 rgba(235,248,255,.24),inset 0 -1px 0 rgba(0,0,0,.28);
 --glass-tint:rgba(36,57,76,.64);--glass-fallback:rgba(36,57,76,.92);--glass-focus:rgba(98,139,175,.25);
 --dialog-shadow:0 24px 64px -16px rgba(0,0,0,.6);
 --diagram-stroke:#9cb9d1;--diagram-fill:#344e64;--diagram-base:#426681;--diagram-joint:#233a4d;
 --belt:#203346;--slat:#394f63;--product:#3e5b72;--product-edge:#8fa8be;
}
/* Continuous light fields: cobalt depth, ice-blue light and a peach caustic. */
:root{
 --wallpaper:radial-gradient(ellipse 100% 120% at 112% 108%,transparent 44%,rgba(255,255,255,.76) 45%,rgba(207,222,255,.12) 49%,transparent 57%),radial-gradient(ellipse 90% 105% at 107% 108%,#668afa 0%,#aebeff 38%,transparent 69%),radial-gradient(ellipse 75% 100% at -10% 65%,#50cce4 0%,rgba(141,226,240,.75) 33%,transparent 66%),radial-gradient(ellipse 70% 70% at 88% -18%,#f7bfb0 0%,#f4def6 43%,transparent 74%),linear-gradient(125deg,#b0d7f8 0%,#d6e5fb 36%,#e2eaff 60%,#a1b9f3 100%);
 --chrome-spectrum:linear-gradient(112deg,rgba(255,255,255,.3) 0%,rgba(186,239,255,.23) 32%,rgba(220,207,255,.22) 66%,rgba(255,221,207,.25) 100%);
 --panel-spectrum:linear-gradient(128deg,rgba(255,255,255,.45),rgba(234,246,255,.08) 45%,rgba(203,213,255,.15));
 --selection-spectrum:linear-gradient(135deg,#fff 0%,#e6f5ff 55%,#dce5ff 100%);
 --prism-edge:linear-gradient(115deg,rgba(255,255,255,1),rgba(124,217,250,.65) 28%,rgba(255,255,255,.9) 48%,rgba(161,161,242,.55) 73%,rgba(255,222,203,.9));
 --shadow:0 8px 24px -15px rgba(25,58,123,.25);
 --glass-shadow:0 12px 32px -18px rgba(40,66,137,.4),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(110,136,194,.2);
}
:root[data-theme=dark]{
 --wallpaper:radial-gradient(ellipse 100% 120% at 112% 108%,transparent 44%,rgba(108,173,255,.28) 45%,rgba(72,91,194,.08) 49%,transparent 57%),radial-gradient(ellipse 90% 105% at 107% 108%,#373477 0%,#233e80 38%,transparent 69%),radial-gradient(ellipse 75% 100% at -10% 65%,#125c6a 0%,rgba(21,66,91,.8) 33%,transparent 66%),radial-gradient(ellipse 70% 70% at 88% -18%,#674660 0%,#293453 43%,transparent 74%),linear-gradient(125deg,#112f49 0%,#0e203c 36%,#182443 60%,#273c70 100%);
 --chrome-spectrum:linear-gradient(112deg,rgba(118,187,226,.13),rgba(77,157,207,.09) 32%,rgba(130,108,220,.17) 66%,rgba(213,152,164,.13));
 --panel-spectrum:linear-gradient(128deg,rgba(101,165,204,.1),rgba(40,66,100,.03) 45%,rgba(87,86,161,.1));
 --selection-spectrum:linear-gradient(135deg,#34546d 0%,#284c6d 55%,#3b446f 100%);
 --prism-edge:linear-gradient(115deg,rgba(187,219,255,.55),rgba(73,184,218,.35) 28%,rgba(204,214,255,.42) 48%,rgba(147,135,227,.4) 73%,rgba(232,178,165,.4));
 --shadow:0 10px 26px -16px rgba(0,5,25,.6);
 --glass-shadow:0 14px 32px -18px rgba(0,5,25,.65),inset 0 1px 0 rgba(210,229,255,.28),inset 0 -1px 0 rgba(80,91,163,.3);
}
html{background:var(--bg)}
body,:root[data-theme=dark] body{font-family:var(--font);background:var(--wallpaper);background-attachment:fixed}
body::before{display:none}
.header,.rail,#dialog,.account-menu{--refraction:blur(0px);background:var(--glass-fallback);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
.header[data-refraction=active],.rail[data-refraction=active],#dialog[data-refraction=active],.account-menu[data-refraction=active]{background:var(--glass-tint);backdrop-filter:var(--refraction) blur(12px) saturate(1.35);-webkit-backdrop-filter:var(--refraction) blur(12px) saturate(1.35)}
.header{margin:10px 12px 0;height:66px;border-radius:16px;color:var(--text);gap:18px;top:10px}
.header .brand img{filter:none}.header .client-brand{color:var(--secondary);border-color:var(--line)}
.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:var(--text)}
.header .clock small,.header .user-name small,.header .header-recipe small{color:var(--secondary)}
.header .header-user{border-color:var(--line)}.header .avatar,.header .level{background:var(--accent-soft);color:var(--accent)}
.header .line-state{border:1px solid var(--glass-edge);background:var(--glass-focus);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);border-radius:10px;color:var(--green)}
.header .line-state.state-idle{color:var(--amber)}.header .line-state.state-fault{color:var(--red)}
.header .line-state .state-icon{border-radius:7px;background:var(--green-soft);color:var(--green)}
.header .state-idle .state-icon{background:var(--amber-soft);color:var(--amber)}.header .state-fault .state-icon{background:var(--red-soft);color:var(--red)}
.header .alarm-bell{background:var(--glass-focus);color:var(--secondary);border:1px solid var(--glass-edge);border-radius:10px}
.header .alarm-bell.has-alarms{background:var(--amber-soft);color:var(--amber)}.header .alarm-bell.critical{background:var(--red-soft);color:var(--red)}
.header .alarm-bell .badge{background:var(--amber);color:var(--solid);outline-color:var(--bg-top)}
.header .language select{background:var(--glass-focus);border-color:var(--line);color:var(--text);border-radius:8px}
.header .account-trigger{border-radius:10px}.header .account-trigger:hover,.header .account-trigger[aria-expanded=true]{background:var(--glass-focus)}
.rail{position:fixed;height:auto;max-height:calc(100dvh - 120px);justify-content:normal;left:12px;width:76px;top:calc(50% + 25px);bottom:auto;transform:translateY(-50%);padding:8px 6px;gap:4px;border-radius:18px}
.nav-item{min-height:68px;border-radius:11px;font-size:11px;color:var(--secondary)}.nav-item .settings-label{font-size:9px}
.nav-item[aria-current=page]{background:var(--glass-focus);color:var(--accent);box-shadow:0 2px 6px rgba(21,59,94,.07),inset 0 1px 0 var(--glass-edge)}
.nav-item[aria-current=page]::before{display:none}.nav-item:hover{background:var(--glass-focus)}
main{grid-column:2;grid-row:2;padding-top:22px}main:focus-visible{outline:none}.footer{border:0;color:var(--secondary)}
.card{background:var(--panel);border:1px solid var(--glass-edge);border-radius:16px;box-shadow:var(--shadow)}
.kpi-grid{border:1px solid var(--glass-edge);border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}
.kpi-grid>.card,.kpi-grid>.status-card{background:transparent;border-radius:0;box-shadow:none}
.kpi-grid>.card+.card{border-left-color:var(--line)}
.status-main>.state-icon{background:var(--green-soft);color:var(--green);border-radius:10px;box-shadow:none}
.state-idle .status-main>.state-icon{background:var(--amber-soft);color:var(--amber)}.state-fault .status-main>.state-icon{background:var(--red-soft);color:var(--red)}
.metric-value{font-weight:600;letter-spacing:-.03em}.metric-label{color:var(--secondary)}
.meter,.meter span{border-radius:3px}.plot span,.plot span.now{border-radius:3px 3px 0 0}.plot span{background:#b4cee3}.plot span.now{background:var(--accent)}
.goal small{background:transparent}.chip,.delta,.severity,.count-pill{border-radius:5px}
.machine{background:var(--inset);border:1px solid var(--line);border-radius:12px}
.robot{background:var(--field);border:1px solid var(--line);border-radius:9px}
.robot:hover{background:var(--solid);border-color:var(--accent);box-shadow:0 4px 12px -6px rgba(31,65,98,.25)}
.conveyor{border-radius:6px}.camera{border-radius:6px;background:var(--solid);box-shadow:0 2px 5px rgba(24,51,78,.06)}
.mini-alarm{border-radius:10px;background:var(--amber-soft);border-color:transparent}
.recipe-summary>span:first-child,.module-card .module-icon{border-radius:10px}
fluent-button.button,fluent-button.button.large,fluent-button.button.small,fluent-button.button.icon-only{
 font-family:var(--font);--fontFamilyBase:var(--font);--borderRadiusMedium:10px;border-radius:10px;
 --colorNeutralBackground1:var(--field);--colorNeutralForeground1:var(--text);--colorNeutralStroke1:var(--strong);
}
fluent-button.button.primary,fluent-button.button.go{--colorBrandBackground:#1269b4;--colorBrandBackgroundHover:#0b599a;--colorBrandBackgroundPressed:#084b84;--colorNeutralForegroundOnBrand:#fff}
input:not([type=checkbox]),select,.stepper,.library-item,.notice,.read-only,.unit,.account-facts,.level-scale li,.recovery-steps label{border-radius:9px}
.library-item.selected{box-shadow:none;border-color:var(--line);background:var(--accent-soft)}
.tabs{background:transparent}.tabs button[aria-selected=true]{background:transparent}.tabs button[aria-selected=true]::after{height:2px;border-radius:2px}
.segmented{border-radius:10px;padding:3px;gap:3px;background:var(--inset);border-color:var(--line)}
.segmented button{border-radius:7px;min-height:34px}.segmented button+button{border-left:0}
.segmented button[aria-selected=true],.segmented button[aria-checked=true]{background:var(--solid);box-shadow:0 2px 5px rgba(20,47,73,.1);color:var(--accent)}
.unit{background:var(--field)}.unit[aria-checked=true]{background:var(--accent-soft);box-shadow:inset 0 -2px var(--accent)}
.editor-footer{background:var(--inset)}.editor{padding:0}
#dialog{border-radius:20px;box-shadow:var(--glass-shadow),var(--dialog-shadow)}
#dialog::backdrop{background:rgba(14,32,49,.28);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.dialog-actions{background:var(--inset)}.account-menu{border-radius:16px;box-shadow:var(--glass-shadow),var(--dialog-shadow)}
#toast{background:var(--solid);color:var(--text);border:1px solid var(--line);border-radius:10px;box-shadow:var(--dialog-shadow)}
@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:760px){.rail{width:70px;left:10px}.header{gap:10px;margin-inline:10px}.card{border-radius:14px}}
@media(max-width:560px){
 :root{--header-height:68px;--section-padding:16px}
 .header{top:6px;height:58px;margin:6px 8px 0;padding-inline:10px;gap:6px;border-radius:12px}
 .header .line-state{border-radius:8px;padding-right:7px}.header .alarm-bell{border-radius:8px}
 .rail{left:8px;right:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;transform:none;border:1px solid var(--glass-edge);border-radius:16px;padding:5px;gap:2px}
 .nav-item{min-height:54px;border-radius:11px}.nav-item,.nav-item .settings-label{font-size:10px}
 main{padding-top:16px;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
 .kpi-grid,.kpi-grid>.card{border-radius:0}.kpi-grid{border-radius:14px}.kpi-grid>.card{padding:14px}
 .status-main>.state-icon{border-radius:8px}.card,.synoptic{border-radius:14px}.machine{padding:10px;border-radius:10px}.robot{border-radius:8px}
 .metric-label,.metric-footer,.robot-tool,.robot-rate,.robot .chip,.legend,.legend-hint{font-size:11px}
 .page-heading h1{font-size:24px}#dialog{border-radius:16px}.account-menu{border-radius:14px}
 .camera{border-radius:6px}.editor{padding:0}
}
@media(max-width:360px){.header{gap:4px;padding-inline:7px}.kpi-grid>.card{padding:11px}}
:root[data-contrast=true]{--panel:var(--solid);--field:var(--solid);--chrome:var(--solid);--secondary:var(--text);--muted:var(--text);--line:var(--strong)}
:root[data-contrast=true] body{background:var(--bg)}
:root[data-contrast=true] :is(.header,.rail,#dialog,.account-menu),:root[data-contrast=true] .header .line-state{background:var(--solid);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-color:var(--strong);color:var(--text)}
:root[data-contrast=true] #dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
@media(prefers-reduced-transparency:reduce){
 :root{--panel:var(--solid)}
 .header,.rail,#dialog,.account-menu{background:var(--solid);backdrop-filter:none;-webkit-backdrop-filter:none}
 #dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Content reduction: one place for each value, explicit exceptions on modules. */
.header .client-brand{display:block;border:0;padding:0;margin-left:0;flex:none}
.header .client-brand>span{display:inline-flex;align-items:center;justify-content:center;min-height:30px;border:1px dashed var(--strong);border-radius:7px;padding:5px 10px;color:var(--secondary);font-size:9px;letter-spacing:.07em;white-space:nowrap}
.header-recipe{border-radius:8px;padding:6px;text-align:left;min-width:0}
.header-recipe:hover{background:var(--glass-focus)}.header-recipe>.icon:last-child{width:14px;height:14px;color:var(--muted)}
.shift-value{font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--text)}.shift-value span{font-size:22px;font-weight:500;margin-left:8px;color:var(--secondary)}
.shift-elapsed{font-size:12px;color:var(--secondary)}.shift-elapsed b{font-weight:500;color:var(--text)}
.status-facts{display:block;margin:0;padding:10px 0}.status-facts>div{display:flex;justify-content:space-between;align-items:center}.status-facts dt,.status-facts dd{font-size:12px}.status-card>.button{margin-top:auto}
.home-grid{grid-template-columns:minmax(0,1fr);min-height:0}.home-aside{display:block}.home-aside>.card{display:block!important;padding:16px 20px!important}.home-aside .card-heading{margin-bottom:10px}
.home-aside .mini-alarm{min-height:58px}.home-aside .empty.compact{display:flex;justify-content:flex-start;padding:0;gap:8px}.home-aside .empty.compact>.icon{width:20px;height:20px}
.home-aside .card:has(.empty) .card-heading{margin-bottom:4px}
.robot-summary{font-size:12px;color:var(--secondary);white-space:nowrap}.robot-summary>span{margin-left:8px;color:var(--muted)}
.robot{min-height:0;padding:10px 8px;gap:4px;background:transparent;border-color:transparent;border-right:1px solid var(--line);border-radius:0;justify-content:center}
.robot:last-child{border-right:0}.robot:hover{border-color:var(--line);border-radius:8px;background:var(--field);box-shadow:none}
.robot .machine-robot{max-width:140px}.robot::before,.robot::after{display:none}.robot-id{position:static;left:auto;top:auto}.robot.warn,.robot.fault,.robot.off{border:1px solid var(--line);border-radius:8px}.robot.warn{border-color:var(--amber-fill)}.robot.fault{border-color:var(--red-fill)}
.lane-caption{display:flex;gap:12px;min-height:34px;flex-wrap:wrap}.lane-name{margin-right:auto}.lane-speed{margin-left:0;font-size:12px}
.lane-caption .camera,.out .lane-caption .camera{position:static;transform:none;left:auto;right:auto;top:auto;min-height:30px;padding:4px 8px;display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;border-radius:6px;box-shadow:none;background:transparent;color:var(--secondary)}
.lane-caption .camera:hover{transform:none;border-color:var(--strong);background:var(--field);box-shadow:none}
.lane-caption .camera b,.lane-caption .camera span{font-size:11px}.lane-caption .camera .icon{width:16px;height:16px}
.lane-caption .camera.warn{color:var(--amber);background:var(--amber-soft)}.lane-caption .camera.fault{color:var(--red);background:var(--red-soft)}.lane-caption .camera.off{border-style:dashed;border-color:var(--strong)}
.machine{gap:12px;flex:none;grid-template-rows:auto auto auto}.legend{margin-top:12px}
@media(min-width:561px) and (max-width:1100px){.header{gap:8px}.header .brand{width:64px}.header .client-brand>span{padding:5px 7px;font-size:8px}.header-recipe{gap:5px}.header-recipe strong{font-size:12px}.header-recipe>.icon:first-child{display:none}}
@container(max-width:660px){.robot:nth-child(4n){border-right:0}}
@container(max-width:380px){.robot{display:flex;text-align:center}.robot .machine-robot{max-width:90px}.robot-id{position:static}.robot:nth-child(2n){border-right:0}}
@media(max-width:560px){
 :root{--header-height:104px}
 .header{display:grid;height:98px;grid-template-columns:38px minmax(0,1fr) 34px 34px 49px;grid-template-rows:44px 28px;align-content:center;align-items:center;gap:4px 6px}
 .header::after,.header .spacer{display:none}
 .header .brand{grid-area:1/1;width:38px}.header .brand img{width:36px}
 .header .line-state{grid-area:1/2;min-width:0;gap:4px;padding:4px;justify-content:center}.header .line-state .state-icon{width:20px;height:25px;flex:none}.header .line-state strong{font-size:11px}
 .header .alarm-bell{grid-area:1/3;width:32px}.header .header-user{grid-area:1/4}.header .language{grid-area:1/5;width:49px}
 .header .client-brand{grid-area:2/1/3/3;justify-self:start;display:block}.header .client-brand>span{min-height:24px;padding:3px 6px;font-size:8px}
 .header .header-recipe{display:flex;grid-area:2/3/3/6;justify-content:flex-end;gap:4px;padding:0;width:100%;max-width:none}
 .header .header-recipe>span{min-width:0}.header .header-recipe small{font-size:9px}.header .header-recipe strong{font-size:10px}.header .header-recipe>.icon{width:13px;height:13px;flex:none}.header .header-recipe>.icon:first-child{display:none}
 .shift-value{font-size:28px}.shift-value span{font-size:17px;margin-left:4px}.shift-elapsed{font-size:11px;line-height:1.5}.status-facts{display:block;padding:6px 0}.status-facts dt,.status-facts dd{font-size:11px}
 .robot-summary{font-size:11px}.robot-summary>span{margin-left:4px}.robot{gap:0}.robot .machine-robot{max-width:90px}
 .lane-caption{column-gap:8px;row-gap:4px}.lane-name{flex:1;min-width:125px;font-size:11px}.lane-speed{font-size:11px}.lane-caption .camera{margin-left:auto}
 .home-aside>.card{padding:16px!important}.legend-hint{display:none}
}

/* Reading surfaces must occlude the dashboard beneath them. */
.header{--glass-tint:rgba(247,252,255,.94)}
:root[data-theme=dark] .header{--glass-tint:rgba(30,47,64,.96)}
#dialog,.account-menu{background:var(--solid)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;--refraction:none;opacity:1;box-shadow:var(--dialog-shadow)}
.account-menu{border:1px solid var(--line)}

/* Color belongs to the glass and its light, while operational text stays flat. */
.header,.rail{background-image:var(--chrome-spectrum)}
.header[data-refraction=active],.rail[data-refraction=active]{background-image:var(--chrome-spectrum)}
.header::before,.rail::before{content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;background:var(--prism-edge);pointer-events:none;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor}
.card,.kpi-grid{background-image:var(--panel-spectrum)}
.kpi-grid>.card,.kpi-grid>.status-card{background-image:none}
.nav-item[aria-current=page]{background:var(--selection-spectrum);box-shadow:0 3px 9px -4px rgba(30,64,130,.25),inset 0 1px 0 var(--glass-edge)}
:root[data-contrast=true] body{background:var(--bg)}
:root[data-contrast=true] :is(.header,.rail,.card,.kpi-grid,.nav-item[aria-current=page]){background-image:none}
:root[data-contrast=true] .header::before,:root[data-contrast=true] .rail::before{display:none}
@media(prefers-reduced-transparency:reduce){
 .header,.rail,.header[data-refraction=active],.rail[data-refraction=active],.card,.kpi-grid{background:var(--solid)}
 .kpi-grid>.card{background:transparent}.header::before,.rail::before{display:none}
}
/* Sfondo in movimento: il --wallpaper è scomposto in livelli fissi. La base resta ferma; le tre macchie di colore
   orbitano attorno al centro dello schermo, ognuna con il suo periodo e verso, e respirano leggermente.
   I livelli delle macchie sono grandi il doppio della finestra (posizioni e dimensioni dei gradienti dimezzate):
   ruotando non scoprono mai il bordo. Si animano solo rotate e scale: lavoro del compositor. */
:root{
 --wp-base:linear-gradient(125deg,#b0d7f8 0%,#d6e5fb 36%,#e2eaff 60%,#a1b9f3 100%);
 --wp-cyan:radial-gradient(ellipse 37.5% 50% at 32.5% 55%,#50cce4 0%,rgba(141,226,240,.7) 30%,rgba(141,226,240,.25) 52%,transparent 74%);
 --wp-blue:radial-gradient(ellipse 52% 62% at 72.5% 72.5%,transparent 34%,rgba(255,255,255,.22) 41%,rgba(255,255,255,.4) 46%,rgba(207,222,255,.14) 53%,transparent 63%),radial-gradient(ellipse 45% 52.5% at 70% 72.5%,#668afa 0%,#aebeff 36%,rgba(174,190,255,.35) 56%,transparent 76%);
 --wp-pink:radial-gradient(ellipse 35% 35% at 62.5% 27.5%,#f7bfb0 0%,#f4def6 40%,rgba(244,222,246,.35) 60%,transparent 80%);
}
:root[data-theme=dark]{
 --bg:#000;
 --wp-base:radial-gradient(ellipse 120% 90% at 50% 40%,#07080b 0%,#000 70%);
 --wp-cyan:radial-gradient(ellipse 37.5% 50% at 32.5% 55%,rgba(18,92,106,.85) 0%,rgba(21,66,91,.5) 30%,rgba(21,66,91,.18) 52%,transparent 72%);
 --wp-blue:radial-gradient(ellipse 52% 62% at 72.5% 72.5%,transparent 34%,rgba(108,173,255,.07) 42%,rgba(108,173,255,.12) 47%,rgba(72,91,194,.05) 54%,transparent 64%),radial-gradient(ellipse 45% 52.5% at 70% 72.5%,rgba(55,52,119,.9) 0%,rgba(35,62,128,.5) 32%,rgba(35,62,128,.18) 55%,transparent 75%);
 --wp-pink:radial-gradient(ellipse 35% 35% at 62.5% 27.5%,rgba(103,70,96,.8) 0%,rgba(41,52,83,.4) 38%,rgba(41,52,83,.12) 58%,transparent 78%);
}
/* Lo sfondo base resta su html: lo sfondo di body coprirebbe i livelli a z-index negativo. */
body,:root[data-theme=dark] body{background:transparent}
html::before,body::before,body::after,html::after{content:'';display:block;position:fixed;inset:0;z-index:-1;pointer-events:none}
html::before{background:var(--wp-base)}
body::before,body::after,html::after{inset:-50%;will-change:rotate,scale}
body::before{background:var(--wp-cyan);animation:orbit 90s linear infinite,breathe 23s ease-in-out infinite alternate}
body::after{background:var(--wp-blue);animation:orbit 120s linear infinite reverse,breathe 29s ease-in-out -11s infinite alternate}
html::after{background:var(--wp-pink);animation:orbit 150s linear -40s infinite,breathe 37s ease-in-out -7s infinite alternate}
@keyframes orbit{to{rotate:360deg}}
@keyframes breathe{from{scale:1}to{scale:1.18}}
body.no-motion::before,body.no-motion::after,html:has(body.no-motion)::after{animation:none}
:root[data-contrast=true]::before,:root[data-contrast=true]::after,:root[data-contrast=true] body::before,:root[data-contrast=true] body::after{display:none}
@media(prefers-reduced-motion:reduce){body::before,body::after,html::after{animation:none}}

/* Box con lo stesso vetro della barra laterale: tinta --glass-tint (62% chiaro, 64% scuro), sfocatura 12px, riflesso cromatico. */
:root{--panel:var(--glass-tint);--inset:rgba(255,255,255,.32)}
:root[data-theme=dark]:not([data-contrast=true]){--panel:var(--glass-tint);--inset:rgba(17,34,49,.38)}
.card,.kpi-grid{background-image:var(--chrome-spectrum);backdrop-filter:blur(12px) saturate(1.35);-webkit-backdrop-filter:blur(12px) saturate(1.35)}
.kpi-grid>.card,.kpi-grid>.status-card,.card .card{background-image:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Stesso materiale della barra: tinta un filo più chiara (misurata sulla barra), riflesso interno e filo prismatico sul bordo. */
:root{--card-glass:rgba(250,253,255,.62)}
:root[data-theme=dark]{--card-glass:rgba(48,60,86,.62)}
.card:not(.kpi-grid>.card):not(.card .card),.kpi-grid{position:relative;background-color:var(--card-glass);box-shadow:var(--glass-shadow)}
.card:not(.kpi-grid>.card):not(.card .card)::before,.kpi-grid::before{content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;background:var(--prism-edge);pointer-events:none;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor}
:root[data-contrast=true] :is(.card,.kpi-grid){background-color:var(--solid);box-shadow:none}
:root[data-contrast=true] :is(.card,.kpi-grid)::before{display:none}
:root[data-contrast=true] :is(.card,.kpi-grid){background-image:none;backdrop-filter:none;-webkit-backdrop-filter:none}
@media(prefers-reduced-transparency:reduce){:root,:root[data-theme=dark]:not([data-contrast=true]){--panel:var(--solid);--inset:var(--inset-strong);--card-glass:var(--solid)}:is(.card,.kpi-grid)::before{display:none}:is(.card,.kpi-grid){background-image:none;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Visioni: box dedicato accanto al nastro, sul lato della zona di scansione (ingresso a sinistra, uscita a destra). */
.lane-body{display:grid;grid-template-columns:184px minmax(0,1fr);gap:10px;align-items:stretch}
.out .lane-body{grid-template-columns:minmax(0,1fr) 184px}
.in .lane-body .vision-box{order:-1}
.vision-box{--v:var(--accent);--v-soft:var(--accent-soft);display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;min-height:64px;padding:8px 12px 8px 10px;border:1px solid var(--line);border-left:3px solid var(--v);border-radius:10px;background:var(--solid);color:var(--text);text-align:left;cursor:pointer;box-shadow:0 2px 8px -4px rgba(24,51,78,.25);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.out .vision-box{border-left-width:1px;border-right:3px solid var(--v)}
.vision-box:hover{box-shadow:0 6px 16px -8px rgba(24,51,78,.35);transform:translateY(-1px)}
.vision-box:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vision-icon{grid-row:1/3;align-self:center;display:grid;place-items:center;width:40px;height:40px;border-radius:9px;background:var(--v-soft);color:var(--v)}
.vision-icon .icon{width:22px;height:22px}
.vision-text{display:grid;gap:1px;min-width:0;line-height:1.15}
.vision-text b{font-size:15px;font-weight:650}
.vision-text small{overflow:hidden;color:var(--secondary);font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}
.vision-state{display:inline-flex;align-items:center;gap:6px;margin-top:2px;color:var(--secondary);font-size:12px}
.vision-state i{width:7px;height:7px;border-radius:50%;background:var(--v)}
.vision-box.run{--v:var(--green-fill);--v-soft:var(--green-soft)}
.vision-box.warn{--v:var(--amber-fill);--v-soft:var(--amber-soft);background:color-mix(in srgb,var(--amber-soft) 55%,var(--solid))}
.vision-box.fault{--v:var(--red-fill);--v-soft:var(--red-soft);background:color-mix(in srgb,var(--red-soft) 55%,var(--solid))}
.vision-box.off{--v:var(--strong);--v-soft:var(--inset);border-style:dashed}
.vision-box:is(.warn,.fault) .vision-state{color:var(--text);font-weight:600}
.lane-body .conveyor{height:64px;align-self:center}
@media(max-width:760px){
 .lane-body,.out .lane-body{grid-template-columns:minmax(0,1fr)}
 .lane-body .vision-box{order:-1}
}

/* Colori di stato più vivaci (notifiche, allarmi, chip, badge). Testo su tinta chiara/scura sopra 4.5:1. */
:root{
 --red:#c0142b;--red-fill:#e5243b;--red-soft:#ffe0e4;
 --amber:#8a5300;--amber-fill:#f5a300;--amber-soft:#ffeec2;
 --green:#0b7a3b;--green-fill:#12a150;--green-soft:#d9f6e4;
}
:root[data-theme=dark]{
 --red:#ff95a0;--red-fill:#e5243b;--red-soft:#5c1a27;
 --amber:#ffd36b;--amber-fill:#ffb300;--amber-soft:#523b07;
 --green:#7ce6a8;--green-fill:#2fd27f;--green-soft:#123f29;
}
.critical-banner{background:linear-gradient(110deg,var(--red-fill),#c4122d);box-shadow:0 10px 28px -12px rgba(229,36,59,.65),inset 0 1px 0 rgba(255,255,255,.3)}
.critical-banner .button{color:#b0102a}
.alarm-row.critical{background:color-mix(in srgb,var(--red-soft) 60%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--red-fill) 35%,transparent)}
.notice.warn{border-left:4px solid var(--amber-fill)}
.notice.fault{border-left:4px solid var(--red-fill)}
.badge.critical{box-shadow:0 0 0 3px color-mix(in srgb,var(--red-fill) 30%,transparent)}
.alarm-row.warning{background:color-mix(in srgb,var(--amber-soft) 50%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--amber-fill) 30%,transparent)}
.severity.critical{background:var(--red-fill);color:#fff}
.severity.warning{background:var(--amber-fill);color:#2a1a00}
.header .line-state.state-fault{background:var(--red-fill);border-color:transparent;color:#fff;box-shadow:0 6px 18px -8px rgba(229,36,59,.7)}
.header .line-state.state-fault .state-icon{background:rgba(255,255,255,.22);color:#fff}
.header .line-state.state-fault small{color:rgba(255,255,255,.85)}
.header .alarm-bell.critical{background:var(--red-fill);color:#fff;border-color:transparent}
.header .alarm-bell.has-alarms:not(.critical){background:var(--amber-fill);color:#2a1a00;border-color:transparent}

/* ---------- Grafici KPI: segni sottili, una sola tinta per la serie, assi e riferimenti in inchiostro tenue ---------- */
:root{--chart:var(--accent);--chart-soft:color-mix(in srgb,var(--accent) 34%,var(--solid));--chart-track:color-mix(in srgb,var(--accent) 14%,transparent);--chart-grid:color-mix(in srgb,var(--text) 14%,transparent)}
/* Pezzi per ora: colonne ≤24px, estremità superiore arrotondata 4px, quadrata sulla base. */
.plot{gap:0;border-bottom:1px solid var(--chart-grid);overflow:visible}
.plot .bar{position:relative;align-self:stretch;height:auto;min-height:0;background:none!important;border-radius:0!important;cursor:default}
.plot .bar::before{content:'';position:absolute;left:50%;bottom:0;width:min(24px,62%);height:var(--h);translate:-50% 0;border-radius:4px 4px 0 0;background:var(--chart-soft);transition:background-color .15s ease}
.plot .bar.now::before{background:var(--chart)}
.plot .bar:hover::before{background:var(--chart)}
.plot .bar b{position:absolute;left:50%;bottom:calc(var(--h) + 3px);translate:-50% 0;color:var(--text);font-size:11px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.plot .bar::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(var(--h) + 22px);translate:-50% 0;z-index:3;padding:4px 8px;border-radius:6px;background:var(--text);color:var(--solid);font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s ease}
.plot .bar:hover::after{opacity:1}
.plot .bar:first-child::after,.plot .bar:nth-child(2)::after{translate:-20% 0}
.plot .bar:last-child::after,.plot .bar:nth-last-child(2)::after{translate:-80% 0}
.goal{border-top:1px solid color-mix(in srgb,var(--text) 45%,transparent)}
.goal small{left:0;right:auto;bottom:3px;padding:0;background:none!important;color:var(--secondary);font-size:11px}
.chart-axis.hours{gap:0}
.chart-axis{color:var(--muted);font-size:11px}

/* Velocità: linea 2px con alone al 10%, punto finale con anello del colore della superficie, mirino al passaggio. */
.spark-wrap{position:relative;flex:1;display:flex;min-height:52px;margin-top:12px;cursor:crosshair}
.spark-wrap .spark{flex:1;height:auto;min-height:52px;margin:0}
.spark .line,.spark.good .line,.spark.low .line{stroke:var(--chart);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark .area,.spark.good .area,.spark.low .area{fill:color-mix(in srgb,var(--chart) 10%,transparent)}
.spark .target{stroke:color-mix(in srgb,var(--text) 45%,transparent);stroke-width:1;stroke-dasharray:none}
.spark-target{position:absolute;right:0;top:calc(14/36*100% - 16px);color:var(--secondary);font-size:11px;font-variant-numeric:tabular-nums;pointer-events:none}
.spark-dot{position:absolute;left:100%;width:10px;height:10px;border-radius:50%;background:var(--chart);box-shadow:0 0 0 2px var(--solid);translate:-50% -50%;pointer-events:none}
.spark-wrap.hovering .spark-dot{opacity:.35}
.spark-cross{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--text) 35%,transparent);pointer-events:none}
.spark-cross::after{content:'';position:absolute;left:50%;top:var(--y);width:10px;height:10px;border-radius:50%;background:var(--chart);box-shadow:0 0 0 2px var(--solid);translate:-50% -50%}
.spark-tip{position:absolute;bottom:calc(100% + 4px);translate:-50% 0;padding:4px 8px;border-radius:6px;background:var(--text);color:var(--solid);font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;z-index:3}

/* Meter (obiettivo turno e componenti OEE): binario nella stessa tinta schiarita, estremità arrotondate, tacca obiettivo che sporge. */
.meter,.oee .meter{height:8px;border-radius:999px!important;background:var(--chart-track);overflow:visible}
.meter span{border-radius:999px!important;background:var(--chart)}
.meter span.good{background:var(--green-fill)}
.meter span.low{background:var(--amber-fill)}
.meter span.good,.meter span.low{box-shadow:none}
.oee .meter:has(.good){background:color-mix(in srgb,var(--green-fill) 16%,transparent)}
.oee .meter:has(.low){background:color-mix(in srgb,var(--amber-fill) 18%,transparent)}
.meter .tick{top:-3px;bottom:-3px;width:2px;border-radius:1px;background:var(--text);opacity:.75;box-shadow:0 0 0 1.5px var(--solid)}
.oee{gap:10px}
.oee>div{row-gap:5px}

/* Pallino di stato di robot e nastri: 11px con alone del suo colore; in errore pulsa, escluso è un anello vuoto. */
.lane{--m:var(--muted)}
.lane.run{--m:var(--green-fill)}
.lane.warn{--m:var(--amber-fill)}
.lane.fault{--m:var(--red-fill)}
.lane.idle,.lane.stop{--m:var(--muted)}
.robot-id::after,.lane-name b::after{content:'';display:inline-block;width:11px;height:11px;margin:0 0 1px 9px;border-radius:50%;background:var(--m);box-shadow:0 0 0 3px color-mix(in srgb,var(--m) 24%,transparent);vertical-align:middle}
.robot.off .robot-id::after,.lane.off .lane-name b::after{background:transparent;box-shadow:inset 0 0 0 2px var(--muted)}
.robot.fault .robot-id::after,.lane.fault .lane-name b::after{animation:status-dot 1.4s ease-in-out infinite}
@keyframes status-dot{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--m) 12%,transparent)}}
body.no-motion :is(.robot-id,.lane-name b)::after{animation:none}
/* Legenda allineata ai pallini del sinottico. */
.legend i{width:10px;height:10px;box-shadow:0 0 0 2.5px color-mix(in srgb,currentColor 24%,transparent)}
.legend i.run{color:var(--green-fill)}.legend i.idle{color:var(--muted)}.legend i.warn{color:var(--amber-fill)}.legend i.fault{color:var(--red-fill)}
.legend i.off{box-shadow:inset 0 0 0 2px var(--muted);border:0}
.legend>span{gap:8px}
/* Intestazione con lo stesso vetro della barra laterale (prima era quasi piena: 94% / 96%). */
.header{--glass-tint:rgba(247,252,255,.62)}
:root[data-theme=dark] .header{--glass-tint:rgba(36,57,76,.64)}

/* Tema scuro neutro: superfici, vetro e macchina in grigi senza tinta sul fondo nero. Il blu resta solo come accento. */
:root[data-theme=dark]:not([data-contrast=true]){
 --bg-top:#1a1a1d;--solid:#1e1f22;--field:#1b1c1f;--inset-strong:#2b2c30;
 --line:rgba(255,255,255,.12);--glass-edge:rgba(255,255,255,.16);--glass-focus:rgba(255,255,255,.1);
 --glass-tint:rgba(30,31,34,.64);--glass-fallback:rgba(30,31,34,.92);--chrome:rgba(30,31,34,.67);
 --card-glass:rgba(34,35,38,.62);--inset:rgba(10,10,12,.4);
 --chrome-spectrum:linear-gradient(112deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 40%,rgba(255,255,255,.05));
 --prism-edge:linear-gradient(115deg,rgba(255,255,255,.4),rgba(255,255,255,.12) 35%,rgba(255,255,255,.28) 55%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.3));
 --glass-shadow:0 14px 32px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.4);
 --belt:#1c1d20;--slat:#3a3c41;--product:#50535a;--product-edge:#a3a7ad;
 --diagram-stroke:#b4b8be;--diagram-fill:#34363b;--diagram-base:#4a4e55;--diagram-joint:#25272b;
}
:root[data-theme=dark]:not([data-contrast=true]) .header{--glass-tint:rgba(30,31,34,.64)}

/* Mobile: loghi R4P e cliente impilati nella prima colonna, stessa larghezza (64px), allineati a sinistra. */
@media(max-width:560px){
 .header{grid-template-columns:64px minmax(0,1fr) 34px 34px 49px;grid-template-rows:40px 26px;row-gap:6px}
 .header .brand{grid-area:1/1;width:64px;height:100%;display:flex;align-items:center;justify-content:flex-start}
 .header .brand img{width:64px;height:auto}
 .header .client-brand{grid-area:2/1;justify-self:stretch;align-self:stretch;width:64px}
 .header .client-brand>span{display:grid;place-items:center;box-sizing:border-box;width:100%;height:100%;min-height:0;padding:0 3px;font-size:7px;letter-spacing:.06em;white-space:nowrap;border-radius:6px}
 .header .header-recipe{grid-area:2/2/3/6}
}
@media(max-width:350px){.header .line-state small{display:none}.header .line-state strong{white-space:nowrap}}

/* Mobile: stato linea in alto al centro. Colonne laterali uguali (74px) così il centro è quello dell'intestazione. */
@media(max-width:560px){
 .header{grid-template-columns:74px minmax(0,1fr) 74px;grid-template-rows:40px 28px;column-gap:8px}
 .header .line-state{grid-area:1/2;justify-self:center;width:auto;max-width:100%;padding:4px 12px 4px 4px;gap:8px}
 .header .alarm-bell{grid-area:1/3;justify-self:start}
 .header .header-user{grid-area:1/3;justify-self:end}
 .header .header-recipe{grid-area:2/2;justify-content:center;text-align:center}
 .header .header-recipe>span{align-items:center}
 .header .language{grid-area:2/3;justify-self:end;align-self:center}
 .header .language select{height:28px;min-height:0;padding-block:0;font-size:11px}
}
@media(max-width:350px){.header{grid-template-columns:70px minmax(0,1fr) 70px;column-gap:6px}.header .brand,.header .brand img,.header .client-brand{width:60px}}

/* Mobile, requisiti del brief in intestazione: data/ora e livello di accesso sempre visibili; più respiro attorno ai loghi. */
@media(max-width:560px){
 .header{height:auto;min-height:104px;padding:14px 14px 12px;grid-template-columns:96px minmax(0,1fr) 96px;grid-template-rows:40px 30px;row-gap:8px;column-gap:8px}
 .header .clock{display:grid;grid-area:2/3;justify-self:start;align-self:center;text-align:left;line-height:1.1}
 .header .clock strong{font-size:12px;font-weight:650}
 .header .clock small{font-size:9px;color:var(--secondary)}
 .header .language{grid-area:2/3;justify-self:end}
 .header .language select{width:46px;padding-inline:6px 2px}
 .header .account-trigger{position:relative}
 .header .user-name{display:block;position:absolute;right:-4px;bottom:-5px;pointer-events:none}
 .header .user-name strong{display:none}
 .header .user-name small{display:block;font-size:0;line-height:0}
 .header .user-name .level{display:inline-block;padding:2px 4px;border-radius:5px;font-size:8.5px;font-weight:700;line-height:1;background:var(--accent);color:#fff;box-shadow:0 0 0 1.5px var(--solid)}
}
@media(max-width:350px){
 .header{grid-template-columns:88px minmax(0,1fr) 88px;padding-inline:12px}
 .header .clock small{display:none}
}
/* Tablet: margine interno a sinistra per il logo (prima era a filo del bordo). */
@media(min-width:561px) and (max-width:1100px){.header{padding-left:18px}.header .brand{width:auto}}
/* Dove il nome utente è nascosto (sotto 1390px), il livello di accesso resta visibile come badge sull'avatar. */
@media(max-width:1390px){
 .header .account-trigger{position:relative}
 .header .user-name{display:block;position:absolute;right:-4px;bottom:-5px;pointer-events:none}
 .header .user-name strong{display:none}
 .header .user-name small{display:block;font-size:0;line-height:0}
 .header .user-name .level{display:inline-block;padding:2px 4px;border-radius:5px;font-size:8.5px;font-weight:700;line-height:1;background:var(--accent);color:#fff;box-shadow:0 0 0 1.5px var(--solid)}
}
@media(max-width:560px){
 .header .language select{width:36px;padding:0;text-align:center;text-align-last:center;-webkit-appearance:none;appearance:none}
 .header .language .select-wrap>.icon{display:none}
 .header .clock strong{font-size:11.5px}
 .header .user-name{bottom:-3px}
}
@media(max-width:350px){.header .clock strong{font-size:10.5px}}
@media(max-width:560px){.header .language{width:auto}.header .language .select-wrap{width:36px}}

/* Robot: separatore come linea indipendente al centro dello spazio tra le colonne, così il riquadro al passaggio è equidistante. */
.robots{column-gap:14px}
.robot{position:relative}
.robot:not(.warn):not(.fault):not(.off){border-right-color:transparent}
.robot::before{display:none}
.robot:not(:last-child)::after{content:'';display:block;position:absolute;top:10%;bottom:10%;left:auto;right:-8.5px;width:1px;height:auto;border:0;background:var(--line);translate:none;transform:none;pointer-events:none}
.robot:not(.warn):not(.fault):not(.off):is(:hover,:focus-visible){border-right-color:var(--line)}
@container(max-width:660px){.robot:nth-child(4n)::after{display:none}}
@container(max-width:380px){.robot:nth-child(2n)::after{display:none}}

/* Vetro al passaggio del mouse (solo desktop): riflesso morbido che segue il puntatore e bordo che si accende vicino al cursore. */
@property --glow{syntax:'<number>';inherits:true;initial-value:0}
@media(hover:hover) and (pointer:fine) and (min-width:1101px){
 .card:not(.kpi-grid>.card):not(.card .card),.kpi-grid{--mx:50%;--my:0px;transition:--glow .35s ease,box-shadow .35s ease}
 .card:not(.kpi-grid>.card):not(.card .card):hover,.kpi-grid:hover{--glow:1;box-shadow:var(--glass-shadow),0 18px 40px -24px rgba(0,0,0,.45)}
 .card:not(.kpi-grid>.card):not(.card .card),.kpi-grid{background-image:radial-gradient(380px circle at var(--mx) var(--my),rgb(255 255 255/calc(var(--glow)*.17)),rgb(255 255 255/calc(var(--glow)*.05)) 40%,rgb(255 255 255/0) 70%),var(--chrome-spectrum)}
 .card:not(.kpi-grid>.card):not(.card .card)::before,.kpi-grid::before{padding:1.5px;background:radial-gradient(240px circle at var(--mx) var(--my),rgb(255 255 255/calc(var(--glow)*.95)),rgb(255 255 255/0) 70%),var(--prism-edge)}
 :root:not([data-theme=dark]) .card:not(.kpi-grid>.card):not(.card .card),:root:not([data-theme=dark]) .kpi-grid{background-image:radial-gradient(380px circle at var(--mx) var(--my),rgb(255 255 255/calc(var(--glow)*.7)),rgb(255 255 255/calc(var(--glow)*.2)) 40%,rgb(255 255 255/0) 70%),var(--chrome-spectrum)}
}
@media(prefers-reduced-motion:reduce){.card,.kpi-grid{transition:none}}
:root[data-contrast=true] :is(.card,.kpi-grid){background-image:none!important}
@media(prefers-reduced-transparency:reduce){.card,.kpi-grid{background-image:none!important}.card::before,.kpi-grid::before{display:none}}

/* Tema scuro: riflesso più ampio e diffuso, ingresso più lento. */
@media(hover:hover) and (pointer:fine) and (min-width:1101px){
 :root[data-theme=dark] .card:not(.kpi-grid>.card):not(.card .card),:root[data-theme=dark] .kpi-grid{transition:--glow .6s ease,box-shadow .6s ease;background-image:radial-gradient(640px circle at var(--mx) var(--my),rgb(255 255 255/calc(var(--glow)*.13)),rgb(255 255 255/calc(var(--glow)*.07)) 30%,rgb(255 255 255/calc(var(--glow)*.025)) 58%,rgb(255 255 255/0) 80%),var(--chrome-spectrum)}
 :root[data-theme=dark] .card:not(.kpi-grid>.card):not(.card .card)::before,:root[data-theme=dark] .kpi-grid::before{background:radial-gradient(420px circle at var(--mx) var(--my),rgb(255 255 255/calc(var(--glow)*.8)),rgb(255 255 255/calc(var(--glow)*.25)) 45%,rgb(255 255 255/0) 80%),var(--prism-edge)}
}

/* Stesso riflesso su intestazione e barra laterale (solo desktop). */
@media(hover:hover) and (pointer:fine) and (min-width:1101px){
 .header,.rail{--mx:50%;--my:0px;transition:--glow .35s ease}
 .header:hover,.rail:hover{--glow:1}
 .header,.rail,.header[data-refraction=active],.rail[data-refraction=active]{background-image:radial-gradient(300px circle at var(--mx) var(--my),rgb(255 255 255/calc(var(--glow)*.5)),rgb(255 255 255/calc(var(--glow)*.15)) 40%,rgb(255 255 255/0) 70%),var(--chrome-spectrum)}
 .header::before,.rail::before{padding:1.5px;background:radial-gradient(200px circle at var(--mx) var(--my),rgb(255 255 255/calc(var(--glow)*.95)),rgb(255 255 255/0) 70%),var(--prism-edge)}
 :root[data-theme=dark] :is(.header,.rail){transition:--glow .6s ease}
 :root[data-theme=dark] :is(.header,.rail,.header[data-refraction=active],.rail[data-refraction=active]){background-image:radial-gradient(420px circle at var(--mx) var(--my),rgb(255 255 255/calc(var(--glow)*.24)),rgb(255 255 255/calc(var(--glow)*.11)) 30%,rgb(255 255 255/calc(var(--glow)*.04)) 58%,rgb(255 255 255/0) 80%),var(--chrome-spectrum)}
 :root[data-theme=dark] :is(.header,.rail)::before{background:radial-gradient(320px circle at var(--mx) var(--my),rgb(255 255 255/calc(var(--glow)*.8)),rgb(255 255 255/calc(var(--glow)*.25)) 45%,rgb(255 255 255/0) 80%),var(--prism-edge)}
}
:root[data-contrast=true] :is(.header,.rail){background-image:none!important}
@media(prefers-reduced-transparency:reduce){.header,.rail{background-image:none!important}}