/* Shared visual system. Keep semantic status colours distinct in both themes. */
/* Instrument palette: cool slate neutrals, blue signal accent, semantic status reserved for meaning. */
:root,[data-theme="light"]{color-scheme:light;--bg:#eaeff6;--panel:#ffffff;--panel2:#f2f6fb;--line:#dbe3ee;--edge:#c6d2e2;--text:#111d2f;--muted:#5b6f8a;--accent:#1d4ed8;--accent2:#0e7490;--ok:#0f766e;--warn:#b45309;--crit:#be123c;--gray:#64748b;--active:#e6edfb;--shadow:0 1px 2px #0f1f3808,0 8px 24px #0f1f380a;--shadow-lg:0 2px 4px #0f1f380a,0 18px 48px #0f1f3812;--overlay:#0b162b8c;--grid:#d6e0ee}
[data-theme="dark"]{color-scheme:dark;--bg:#070c16;--panel:#101827;--panel2:#161f31;--line:#243247;--edge:#33455f;--text:#e8eff9;--muted:#93a7c2;--accent:#5b9bff;--accent2:#2dd4e6;--ok:#34d399;--warn:#fbbf24;--crit:#fb7185;--gray:#8296b0;--active:#1b2c49;--shadow:0 1px 2px #0006,0 8px 24px #00000040;--shadow-lg:0 2px 6px #00000059,0 20px 52px #0000005c;--overlay:#020814c7;--grid:#1c2942}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.1px;-webkit-font-smoothing:antialiased;background-image:radial-gradient(1200px 600px at 78% -12%,var(--active),transparent 62%);background-attachment:fixed}
button,input,select,textarea{font:inherit}button,select{cursor:pointer}button{background:var(--panel);color:var(--text);border:1px solid var(--edge);padding:8px 13px;border-radius:8px;font-weight:500;transition:background .15s,border-color .15s,color .15s}button:hover{background:var(--active);border-color:var(--accent);color:var(--accent)}button:active{transform:translateY(.5px)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input,select,textarea{accent-color:var(--accent)}input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}

/* Sidebar: a fixed instrument rail. */
.side{width:228px;position:sticky;top:0;height:100vh;background:var(--panel);padding:12px 10px;z-index:20;border-right:1px solid var(--line)}
.brand{padding:16px 12px 24px;border:0;font-size:19px;letter-spacing:.4px;display:flex;align-items:center;gap:10px;font-weight:680}.brand:before{content:'E';display:grid;place-items:center;width:33px;height:33px;border-radius:9px;background:linear-gradient(150deg,#4f8dfb,#1d4ed8);color:#fff;font-size:19px;font-weight:800;box-shadow:0 4px 12px #1d4ed840}.brand span{font-size:13px;letter-spacing:0;color:var(--muted);font-weight:500}
.nav{padding:8px 0}.nav:before{content:'工作空间';display:block;padding:0 14px 10px;color:var(--muted);font-size:11px;letter-spacing:1.4px;opacity:.75}
.nav a{border:0;border-radius:8px;margin:2px 0;padding:10px 14px;font-size:13px;gap:12px;position:relative;transition:background .14s,color .14s}
.nav a:hover{background:var(--panel2);color:var(--text)}
.nav a.active{background:var(--active);color:var(--accent);font-weight:640;box-shadow:none}
.nav a.active:before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:17px;border-radius:0 3px 3px 0;background:var(--accent)}
.nav .ic{display:flex;align-items:center;justify-content:center;width:19px;height:20px}.ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side-foot{padding:14px 14px;line-height:1.85;border-top:1px solid var(--line);font-size:12px}
.dot{width:7px;height:7px;position:relative}
.dot.ok{box-shadow:0 0 0 3px #10b98126}

/* Top bar */
.top{min-height:70px;padding:14px 30px;gap:10px;background:var(--panel);flex-wrap:wrap;border-bottom:1px solid var(--line)}
.top h1{font-size:20px;letter-spacing:-.4px;font-weight:660}
.top select,.top button{border-radius:8px;padding:8px 12px;background:var(--panel);font-size:12px}
.top select{max-width:260px;border-color:var(--edge)}
.content{padding:26px 30px 44px;width:100%;max-width:1920px;align-self:center}

/* KPI strip: one connected instrument panel, not seven floating cards. */
.kpis{gap:0;margin-bottom:22px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi{padding:16px 20px 18px;border-radius:0;box-shadow:none;position:relative;overflow:hidden;border:0;border-left:1px solid var(--line);background:transparent}
.kpi:first-child{border-left:0}
/* A hairline signal rule per reading; muted so the numbers stay dominant. */
.kpi:before{content:'';position:absolute;left:0;right:0;top:0;height:2px;width:auto;background:var(--accent);border-radius:0;opacity:.5}
.kpi.ok:before{background:var(--ok)}.kpi.warn:before{background:var(--warn)}.kpi.crit:before{background:var(--crit)}
.kpi .lbl{font-size:12px;margin-bottom:10px;color:var(--muted);font-weight:500}
.kpi .val{font-size:31px;font-weight:640;letter-spacing:-1.1px;font-variant-numeric:tabular-nums;line-height:1.05}
.kpi .val small{letter-spacing:0;margin-left:4px;font-size:13px;font-weight:500;color:var(--muted)}
.kpi.crit .val{color:var(--crit)}

/* Panels */
.row{gap:18px;margin-bottom:18px}
.panel{padding:20px;border-radius:12px;box-shadow:var(--shadow);min-width:0;overflow-x:auto;border:1px solid var(--line)}
/* Header sits flush against the panel edge, ruled off from the body. */
.panel h3{font-size:13px;margin:-20px -20px 18px;padding:14px 20px;font-weight:640;border-bottom:1px solid var(--line);letter-spacing:.1px;background:var(--panel2);border-radius:11px 11px 0 0}
.chart{height:320px}

/* Tables: dense, scannable, ruled. */
table{font-variant-numeric:tabular-nums;border-collapse:collapse}
th{background:var(--panel2);padding:11px 12px;font-size:11px;letter-spacing:.3px;color:var(--muted);font-weight:640;border-bottom:1px solid var(--edge)}
td{padding:12px;font-size:12.5px;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--active)}
.clickable:hover{cursor:pointer}

/* Status badges: quiet fills, legible in both themes. */
.badge{font-size:11px;font-weight:600;padding:3px 9px;line-height:1.55;border-radius:5px;letter-spacing:.2px}

/* Key-metric tiles */
.metrics{gap:12px}
.metric{background:var(--panel);border-radius:10px;padding:14px 16px;box-shadow:var(--shadow);border:1px solid var(--line)}
.metric .m-val{font-size:24px;letter-spacing:-.6px;font-variant-numeric:tabular-nums;font-weight:640}
.metric .m-lbl{line-height:1.6;font-size:12px}

/* Toolbar */
.toolbar{gap:9px;margin-bottom:18px}
.toolbar input,.toolbar select,.search{padding:9px 12px;border-radius:8px;background:var(--panel);min-height:37px;border:1px solid var(--edge)}
.toolbar input{max-width:100%}
.chip{border-radius:6px;padding:6px 11px;font-weight:500}
.chip.on,.err-box,.sc-el.alarm,.sc-block.on{color:var(--crit)}
.empty{padding:56px 20px;line-height:1.8}

/* SCADA canvas: engineering grid. */
.scada-canvas{border-radius:12px;background-color:var(--panel2);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;border-color:var(--line)}
.sc-label,.sc-progress,.sc-light,.sc-spark{background:var(--panel);box-shadow:var(--shadow);border-radius:7px}
.scada-side{width:270px}.scada-wrap{gap:18px}

/* Panels that opt out of padding inline keep their header inline too. */
.panel[style*="padding:0"] h3{margin:0 0 0;border-radius:11px 11px 0 0}
.panel[style*="padding:8px"] h3{margin:-8px -8px 10px}
#elMask .panel,#loginMask .panel{max-width:calc(100vw - 32px);max-height:90vh;overflow:auto;padding:26px}
#themeBtn{min-width:100px;color:var(--accent);border-color:var(--edge)}
#userName{font-size:12px}#userBox{flex-wrap:wrap}

/* Product image stays on its original white presentation surface. */
.am20{--ink:var(--text);--soft:var(--muted);--blue:var(--accent);background:var(--panel2);border-color:var(--line);box-shadow:var(--shadow-lg);border-radius:14px}
.am20-head,.am20-box,.am20-state,.am20-flow span{background:var(--panel);border-color:var(--line)}
.am20-eyebrow,.am20-box header,.am20-flow{color:var(--muted)}
.am20-flow b{color:var(--accent)}
.am20-machine{background:#fff;border-radius:14px;margin:0 14px}
.am20-machine img{object-fit:contain}
.am20-foot{background:var(--panel);color:var(--text);border-top:1px solid var(--line)}
.am20-stat{border-color:var(--line)}
.am20-stat label,.am20-stat small{color:var(--muted)}
.am20-notice{background:var(--active);color:var(--warn)}
.am20[data-live="true"] .am20-dot{background:var(--ok)}

@media(min-width:1600px){.content{padding:30px 42px}.top{padding-left:42px;padding-right:42px}.kpi{padding:18px 24px 20px}.kpi .val{font-size:33px}}
/* Grid wraps to a second rank on narrower screens; rules stay continuous. */
@media(max-width:1240px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi:nth-child(4n+1){border-left:0}.kpi:nth-child(n+5){border-top:1px solid var(--line)}}
@media(max-width:1100px){.side{width:190px}.brand{gap:7px;font-size:17px}.content{padding:22px}.top{padding:14px 22px}.top h1{min-width:130px}.scada-wrap{flex-direction:column}.scada-side{width:100%}}
@media(max-width:700px){
  .app{display:block}
  .side{position:relative;width:100%;height:auto;padding:8px 14px;border-right:0;border-bottom:1px solid var(--line)}
  .brand{padding:4px 4px 10px;font-size:17px}.brand:before{height:27px;width:27px;font-size:16px;border-radius:7px}
  .nav{display:flex;overflow-x:auto;padding:0;gap:4px}.nav:before,.side-foot{display:none}
  .nav a{flex-shrink:0;padding:9px 10px;gap:6px;font-size:12px}
  .nav a.active{box-shadow:inset 0 -2px var(--accent)}.nav a.active:before{display:none}
  .nav .ic{width:16px}
  .top{padding:14px 16px;gap:8px}.top h1{font-size:18px;min-width:calc(100% - 130px)}
  .top select{flex:1;max-width:100%;min-width:0}
  .content{padding:16px 14px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .kpi{padding:14px 15px 15px;border-top:1px solid var(--line)}
  .kpi:nth-child(odd){border-left:0}
  .kpi .val{font-size:25px}
  .panel{padding:15px}.panel h3{margin:-15px -15px 14px;padding:12px 15px}
  .row{gap:13px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric{padding:13px}
  .toolbar{gap:8px}
  .scada-canvas{min-height:480px}
  .am20-machine{margin:0}.am20-head{padding:20px}
  .top #themeBtn{order:0}#userBox{width:100%}
  th,td{padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Login: the one place the design raises its voice. */
#loginMask{background:var(--bg)!important;background-image:radial-gradient(900px 520px at 22% 12%,var(--active),transparent 60%),radial-gradient(700px 420px at 82% 88%,#0e749018,transparent 62%)!important}
#loginMask .panel{width:392px!important;box-shadow:var(--shadow-lg);padding:32px;border:1px solid var(--line)}
#loginMask h3{font-size:19px;margin:0 0 24px;padding:0;border:0;background:none;letter-spacing:-.3px}
#elMask{background:var(--overlay)!important;backdrop-filter:blur(6px)}
@media(max-width:700px){.top h1{flex-basis:100%}.top select{min-width:150px}.top #themeBtn{min-width:100px}}