/* ============ APP STYLES ============ */
/* task manager */
.tm{
  height:100%;display:grid;grid-template-columns:180px minmax(0,1fr);font-size:12.5px;color:#f6f1ec;
  background:linear-gradient(180deg,#171312,#111111);
}
.tm-side{
  display:flex;flex-direction:column;gap:10px;padding:12px 10px 10px;
  background:linear-gradient(180deg,#211917,#181311);border-right:1px solid rgba(255,255,255,.06);
}
.tm-side-head,.tm-side-foot{display:flex;justify-content:center}
.tm-side-btn{
  width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);
  color:#efe6dd;font-size:16px;cursor:pointer;
}
.tm-nav{display:grid;gap:4px;align-content:start}
.tm-side .item{
  min-height:42px;border-radius:12px;border:1px solid transparent;background:transparent;cursor:pointer;
  color:#d8cdc2;display:flex;align-items:center;gap:12px;padding:0 12px;text-align:left;font:inherit;position:relative;
}
.tm-side .item:hover{background:rgba(255,255,255,.05)}
.tm-side .item.active{background:rgba(255,255,255,.08);color:#fff}
.tm-side .item.active::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:999px;background:#53b8ff;
}
.tm-nav-ico{width:18px;text-align:center;font-size:15px;opacity:.9}
.tm-nav-label{line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.tm-shell{display:flex;flex-direction:column;min-width:0;background:linear-gradient(180deg,#141211,#111111)}
.tm-top{
  display:grid;grid-template-columns:auto minmax(260px,1fr) auto;align-items:center;gap:14px;
  padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(34,24,21,.88);
}
.tm-top-title{font-size:15px;font-weight:600;color:#f5efe9}
.tm-search{
  min-width:0;height:38px;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);color:#d0c3b8;
}
.tm-search input{
  min-width:0;flex:1;background:transparent;border:0;outline:0;color:#f7f0ea;font:inherit;
}
.tm-search input::placeholder{color:#b6a79c}
.tm-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.tm-actions button{
  height:36px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);color:#f3ece7;font:inherit;cursor:pointer;
}
.tm-actions button.active{border-color:rgba(104,230,151,.26);background:rgba(104,230,151,.08);color:#d8ffe2}
.tm-actions button:disabled{opacity:.42;cursor:not-allowed}
.tm-main{min-height:0;overflow:hidden}
.tm-pane{height:100%;display:flex;flex-direction:column;min-height:0}
.tm-pane-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:18px 20px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.tm-pane-head h3{margin:0;font-size:28px;font-weight:650;letter-spacing:-.02em}
.tm-pane-head p{margin:8px 0 0;color:#b8aba0;line-height:1.6}
.tm-pane-meta{
  font-size:11px;color:#ccbfb2;font-family:var(--mono);letter-spacing:.04em;text-align:right;line-height:1.6;
}
.tm-table-wrap{flex:1;min-height:0;overflow:auto;padding:0 20px 20px}
.tm-table{width:100%;border-collapse:collapse;table-layout:fixed;background:#161616;border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden}
.tm-table thead th{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:500;color:#d7cac0;background:#1a1716}
.tm-table thead th span{display:block;font-size:24px;color:#fff;font-family:var(--mono);font-weight:600}
.tm-table thead th small{display:block;margin-top:4px;font-size:11px;color:#baaea4;font-weight:500}
.tm-table .name-col{width:34%;text-align:left}
.tm-table .status-col{width:14%;text-align:left}
.tm-table .metric-col{width:13%;text-align:right;background:rgba(15,45,92,.18)}
.tm-table .metric-col.selected{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.tm-table tbody td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.05)}
.tm-table tbody tr.selected td:not(.tm-metric-cell){background:rgba(255,255,255,.045)}
.tm-name-cell{display:flex;align-items:center;gap:10px}
.tm-arrow{width:10px;color:#94877d;font-size:16px;transform:translateY(-1px)}
.tm-picon{
  width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:700;
  color:#fff;background:linear-gradient(180deg,var(--picon),color-mix(in srgb,var(--picon) 68%,#111));
}
.tm-name-copy{min-width:0;display:grid;gap:3px}
.tm-name-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.tm-name-copy span{font-size:11px;color:#aa9c92;font-family:var(--mono)}
.tm-status-cell{color:#8ef7a1;font-size:11px}
.tm-leaf{display:inline-flex;align-items:center;gap:6px}
.tm-metric-cell{
  text-align:right;font-family:var(--mono);color:#eef6ff;
  background:linear-gradient(180deg,rgba(21,68,136,var(--heat)),rgba(21,68,136,var(--heat)));
}
.tm-perf{
  flex:1;min-height:0;display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px;padding:14px 16px 16px;
}
.tm-perf-list{display:grid;gap:10px;align-content:start;overflow:auto;padding-right:4px}
.tm-perf-card{
  min-height:78px;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:#171615;color:#efe8e2;cursor:pointer;
  display:grid;grid-template-columns:1fr 92px;gap:10px;align-items:center;padding:12px 14px;text-align:left;
}
.tm-perf-card.active{border-color:rgba(83,184,255,.35);background:#1c2027;box-shadow:inset 0 0 0 1px rgba(83,184,255,.16)}
.tm-perf-card span{display:block;font-size:11px;color:#b8aba0;letter-spacing:.02em}
.tm-perf-card strong{display:block;margin-top:5px;font-size:18px;color:#fff}
.tm-perf-card small{display:block;margin-top:4px;font-size:11px;color:#958880}
.tm-perf-card canvas{width:92px;height:50px;display:block}
.tm-perf-main{min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px}
.tm-perf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tm-perf-head h4{margin:0;font-size:34px;font-weight:650}
.tm-perf-head p{margin:8px 0 0;color:#baaea3}
.tm-perf-big{font-size:30px;font-family:var(--mono);font-weight:650;color:#f4fbff}
.tm-perf-chart{min-height:0;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:#15191d;padding:14px}
.tm-perf-chart canvas{width:100%;height:240px;display:block}
.tm-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tm-detail-grid div,.tm-info-card,.tm-secondary-note{
  padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:#171615;
}
.tm-detail-grid span,.tm-info-card span{display:block;font-size:11px;color:#a99b90}
.tm-detail-grid b,.tm-info-card b{display:block;margin-top:8px;font-size:18px;color:#fff}
.tm-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 20px 20px}
.tm-secondary-note{margin:0 20px 20px;color:#c4b8ad;line-height:1.7}
.proc-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px}
.proc-table th,.proc-table td{padding:7px 10px;text-align:left;border-bottom:1px solid rgba(140,180,220,.08)}
.proc-table th{color:#9db1c2;font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;background:rgba(10,18,26,.6);position:sticky;top:0}
.proc-table td.n{text-align:right;color:#cfe0ec}
.proc-table td.hi{color:#ffb547}
.proc-table td.max{color:#ff5f6d}

/* scada */
.scada{padding:10px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;font-size:12px;grid-template-rows:auto auto auto auto;align-content:start}
.scada .tile{background:rgba(8,16,24,.6);border:1px solid var(--line);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:4px}
.scada .tile h5{margin:0;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:#9db1c2;font-weight:500}
.scada .tile .val{font-family:var(--mono);font-size:20px;font-weight:600;color:#6ad8ff}
.scada .tile .unit{font-size:11px;color:#9db1c2;margin-left:3px}
.scada .tile.ok .val{color:#7cfc9a}
.scada .tile.warn .val{color:#ffb547}
.scada .full{grid-column:1/-1}
.scada .line-view{
  position:relative;height:80px;background:radial-gradient(ellipse at center,rgba(0,60,100,.35),rgba(0,0,0,.4));
  border-radius:6px;border:1px dashed rgba(120,180,255,.2);overflow:hidden;
}
.conv{position:absolute;left:0;right:0;top:50%;height:22px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,#2a3846 0 20px,#1a2632 20px 40px);
  border-top:1px solid #445668;border-bottom:1px solid #0a121a;
}
.box{position:absolute;top:50%;width:20px;height:20px;transform:translateY(-50%);
  background:linear-gradient(145deg,#d48b3d,#8a4e1b);border-radius:3px;box-shadow:0 3px 6px rgba(0,0,0,.5);
}
.arm{position:absolute;top:4px;right:30%;width:3px;height:36px;background:#6ad8ff;border-radius:2px;transform-origin:top center;animation:arm 2.4s ease-in-out infinite}
.arm::after{content:"";position:absolute;bottom:-4px;left:-5px;width:13px;height:8px;background:#6ad8ff;border-radius:2px}
@keyframes arm{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(14deg)}}

/* ethercat */
.ecat{padding:18px;height:100%;display:flex;flex-direction:column;gap:12px}
.ecat h3{margin:0;font-size:14px;color:#6ad8ff;font-weight:600;letter-spacing:.05em}
.ecat .stats{display:flex;gap:14px;font-family:var(--mono);font-size:11px;color:#9db1c2;flex-wrap:wrap}
.ecat .stats b{color:#7cfc9a;font-weight:500}
.ecat .topology{
  flex:1;position:relative;background:rgba(5,12,20,.6);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;min-height:260px;
}
.ecat svg{width:100%;height:100%;display:block}
.node circle{fill:#0a1622;stroke:#23d6b1;stroke-width:2}
.node.master circle{stroke:#00a4ef;fill:#0a1a28}
.node text{fill:#d7e6f2;font-size:10px;font-family:var(--mono);text-anchor:middle}
.node .lbl{fill:#9db1c2;font-size:9px}
.wire{stroke:#23d6b1;stroke-width:2;opacity:.35;fill:none}
.pulse{stroke:#6ad8ff;stroke-width:3;fill:none;stroke-linecap:round}

/* io */
.ioapp{padding:18px;font-size:12px}
.ioapp h4{margin:0 0 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9db1c2;font-weight:500}
.io-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.io-pin{
  background:rgba(8,16,24,.6);border:1px solid var(--line);border-radius:8px;padding:12px;
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;
}
.io-pin .led{width:28px;height:28px;border-radius:50%;background:#1a2632;border:2px solid #2a3846;transition:.2s}
.io-pin.on .led{background:#7cfc9a;box-shadow:0 0 14px #7cfc9a,inset 0 0 8px #0a3018;border-color:#4ad470}
.io-pin .lbl{font-family:var(--mono);font-size:11px;color:#cfe0ec}
.io-pin .st{font-size:10px;color:#9db1c2}
.io-pin.on .st{color:#7cfc9a}

/* alarms */
.alarms{padding:14px;font-size:12px}
.alarms table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px}
.alarms th,.alarms td{padding:8px 10px;text-align:left;border-bottom:1px solid rgba(140,180,220,.08)}
.alarms th{color:#9db1c2;font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}
.alarms .sev{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600}
.alarms .sev.w{background:rgba(255,181,71,.15);color:#ffb547}
.alarms .sev.i{background:rgba(106,216,255,.15);color:#6ad8ff}
.alarms .sev.e{background:rgba(255,95,109,.2);color:#ff5f6d}
.alarms .sev.o{background:rgba(124,252,154,.15);color:#7cfc9a}

/* sysinfo */
.sys{padding:16px;font-size:13px;display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;height:100%;overflow:auto;align-items:start}
.sys .devimg{
  aspect-ratio:1.08;border-radius:12px;background:linear-gradient(145deg,#2a343e,#0f151b);
  display:grid;place-items:center;padding:10px;max-width:156px;justify-self:start;
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.sys .devimg img{
  display:block;max-width:132px;max-height:108px;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
}
.sys h2{margin:0 0 4px;font-size:20px;font-weight:600}
.sys .sub{color:#9db1c2;margin-bottom:16px;font-size:12px}
.sys dl{display:grid;grid-template-columns:140px 1fr;gap:8px 18px;margin:0}
.sys dt{color:#9db1c2;font-size:12px}
.sys dd{margin:0;font-family:var(--mono);font-size:12.5px;color:#e8f1f8}
.sys dd.ok{color:#7cfc9a}

/* stress tools */
.stress{padding:12px;font-size:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px;height:100%;align-content:start}
.stress h4{margin:0 0 6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#9db1c2;font-weight:500}
.stress p{color:#9db1c2;margin:0 0 10px;line-height:1.4;font-size:11px;grid-column:1/-1}
.stress .grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stress button{
  text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;
  background:rgba(8,16,24,.7);border:1px solid var(--line);color:#e8f1f8;
  display:flex;flex-direction:column;gap:2px;
}
.stress button:hover{border-color:rgba(0,164,239,.5);background:rgba(0,164,239,.1)}
.stress button b{font-size:11.5px}
.stress button span{font-size:9.5px;color:#9db1c2}
.stress button.on{border-color:#7cfc9a;background:rgba(124,252,154,.08)}
.stress button.on b::after{content:" ●";color:#7cfc9a}

/* display test */
.disp{padding:0;height:100%;display:flex;flex-direction:column;background:#05080c}
.disp-bar{display:flex;gap:6px;padding:10px 14px;background:rgba(8,16,24,.9);border-bottom:1px solid var(--line)}
.disp-bar button{padding:6px 12px;background:rgba(22,32,42,.8);border:1px solid var(--line);border-radius:6px;color:#cfe0ec;font-size:11px;cursor:pointer}
.disp-bar button.on{background:rgba(0,164,239,.2);border-color:#6ad8ff;color:#fff}
.disp-bar .info{margin-left:auto;font-family:var(--mono);font-size:11px;color:#6ad8ff;display:flex;gap:14px;align-items:center}
.disp-stage{flex:1;position:relative;overflow:hidden;cursor:crosshair}
.disp-stage .bars{position:absolute;inset:0;display:flex}
.disp-stage .bars div{flex:1}
.disp-grad{position:absolute;inset:0;background:linear-gradient(90deg,#000,#fff);display:none}
.disp-angle{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-family:var(--mono);color:#fff;font-size:14px}
.disp-angle .plate{padding:30px 50px;border:2px solid rgba(106,216,255,.5);border-radius:12px;text-align:center;background:rgba(0,0,0,.4);backdrop-filter:blur(6px)}
.disp-angle .big{font-size:38px;color:#6ad8ff;font-weight:700;margin:10px 0}
.touch-ripple{position:absolute;width:60px;height:60px;border:2px solid #6ad8ff;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:ripple .8s ease-out forwards}
@keyframes ripple{from{width:0;height:0;opacity:1}to{width:120px;height:120px;opacity:0}}
.disp-foot{padding:10px 14px;background:rgba(8,16,24,.9);border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:#9db1c2;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.disp-foot b{color:#7cfc9a}
.fault-banner{
  margin:6px 0 8px;padding:6px 10px;border-radius:8px;
  background:linear-gradient(180deg,rgba(0,164,239,.12),rgba(0,164,239,.05));
  border:1px solid rgba(106,216,255,.22);color:#d8eefb;font-size:10.5px;line-height:1.5;
}
.tag-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
}
.tag-row{
  padding:6px 8px;border-radius:7px;background:rgba(8,16,24,.58);
  border:1px solid rgba(140,180,220,.1);display:grid;gap:3px;
}
.tag-row span{
  font-size:9px;font-family:var(--mono);letter-spacing:.08em;color:#89a7bb;
}
.tag-row b{
  font-family:var(--mono);font-size:12px;font-weight:600;color:#eef8ff;
}
.log-list{
  display:grid;gap:5px;max-height:90px;overflow:auto;padding-right:4px;
}
.log-list div{
  display:grid;grid-template-columns:58px 62px 1fr;gap:6px;align-items:center;
  padding:5px 8px;border-radius:6px;background:rgba(8,16,24,.58);border:1px solid rgba(140,180,220,.08);
}
.log-list div span:first-child{
  color:#89a7bb;font-family:var(--mono);font-size:10px;
}
.log-list div b{
  color:#6ad8ff;font-family:var(--mono);font-size:10px;font-weight:600;
}
.log-list div span:last-child{
  color:#d7e6f2;font-size:11px;line-height:1.5;
}
.touch-demo-panel{
  position:absolute;inset:18px;display:none;flex-direction:column;gap:14px;
  padding:18px;border-radius:18px;background:
    radial-gradient(circle at 80% 20%,rgba(0,164,239,.18),transparent 22%),
    linear-gradient(180deg,rgba(6,17,27,.96),rgba(4,10,17,.96));
  border:1px solid rgba(106,216,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.touch-demo-top{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
}
.touch-stat{
  padding:12px 14px;border-radius:14px;background:rgba(8,23,36,.74);
  border:1px solid rgba(106,216,255,.12);display:grid;gap:6px;
}
.touch-stat span{
  font-size:10px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8ab2cc;
}
.touch-stat b{
  font-size:20px;font-weight:650;color:#eef8ff;
}
.touch-hmi-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.touch-hmi-btn{
  min-height:72px;border-radius:16px;border:1px solid rgba(106,216,255,.12);cursor:pointer;
  background:linear-gradient(180deg,rgba(13,33,50,.96),rgba(7,18,29,.92));color:#eaf6ff;
  font-size:15px;font-weight:600;letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.touch-hmi-btn.primary{
  background:linear-gradient(135deg,rgba(0,164,239,.34),rgba(35,214,177,.18));
  border-color:rgba(106,216,255,.28);
}
.touch-hmi-btn:hover{border-color:rgba(106,216,255,.28)}
.touch-slider-group{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.touch-slider-group label{
  padding:14px;border-radius:16px;background:rgba(8,23,36,.74);border:1px solid rgba(106,216,255,.12);
  display:grid;gap:10px;font-size:12px;color:#cfe3f0;
}
.touch-slider-group b{color:#7cfc9a}
.touch-slider-group input[type=range]{
  width:100%;accent-color:#00a4ef;
}
.touch-hint{
  margin-top:auto;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);font-size:11px;color:#9db1c2;line-height:1.6;
}
.stress-section{margin-top:18px}
.fault-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;
}
.fault-btn{
  text-align:left;padding:12px 14px;border-radius:10px;cursor:pointer;
  background:rgba(35,12,18,.45);border:1px solid rgba(255,95,109,.18);color:#f6dfe2;
  display:flex;flex-direction:column;gap:4px;
}
.fault-btn:hover{border-color:rgba(255,95,109,.4);background:rgba(60,18,25,.55)}
.fault-btn b{font-size:13px}
.fault-btn span{font-size:10.5px;color:#e7b8bf}
.fault-btn.on{
  background:rgba(255,95,109,.14);border-color:rgba(255,95,109,.5);
}
.fault-clear{
  width:100%;margin-top:10px;padding:10px 12px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#eef8ff;font-size:12px;font-weight:600;
}
.configurator{
  height:100%;padding:14px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:14px;background:rgba(10,14,20,.35);
}
.config-panel,.config-summary{
  min-width:0;padding:18px;border-radius:16px;background:rgba(8,16,24,.62);border:1px solid var(--line);
}
.config-panel{overflow:auto}
.config-summary{display:grid;align-content:start;gap:14px}
.config-head h3,.compare-head h3{margin:0;font-size:18px;font-weight:650;color:#eef8ff}
.config-head p,.compare-head p{margin:8px 0 0;font-size:12.5px;color:#9db1c2;line-height:1.7}
.config-group{margin-top:18px;display:grid;gap:10px}
.config-group h4{
  margin:0;font-size:10px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#89b5d0;
}
.option-row{display:flex;flex-wrap:wrap;gap:10px}
.option-pill{
  padding:10px 14px;border-radius:999px;border:1px solid rgba(106,216,255,.14);background:rgba(255,255,255,.03);
  cursor:pointer;font-size:12px;color:#d9e7f2;transition:background .2s,border-color .2s,transform .2s;
}
.option-pill:hover{transform:translateY(-1px);border-color:rgba(106,216,255,.3);background:rgba(0,164,239,.08)}
.option-pill.on{
  background:linear-gradient(135deg,rgba(0,164,239,.22),rgba(35,214,177,.12));
  border-color:rgba(106,216,255,.34);color:#fff;
}
.config-summary dl{
  margin:0;display:grid;grid-template-columns:132px 1fr;gap:10px 16px;
}
.config-summary dt{
  font-size:11px;color:#9db1c2;
}
.config-summary dd{
  margin:0;font-family:var(--mono);font-size:12px;line-height:1.55;color:#eef8ff;
}
.config-summary .summary-badge{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  background:rgba(124,252,154,.1);border:1px solid rgba(124,252,154,.18);color:#bfffd1;font-size:11px;font-weight:600;
}
.compare{
  height:100%;padding:18px;display:grid;gap:14px;background:rgba(10,14,20,.35);overflow:auto;
}
.compare-table{
  width:100%;border-collapse:collapse;border-radius:14px;overflow:hidden;background:rgba(8,16,24,.62);border:1px solid var(--line);
}
.compare-table th,.compare-table td{
  padding:14px 16px;border-bottom:1px solid rgba(140,180,220,.08);text-align:left;font-size:12px;
}
.compare-table th{
  font-size:10px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#89b5d0;background:rgba(9,18,28,.86);
}
.compare-table td{color:#d8e7f2;line-height:1.65}
.compare-table td.good{color:#7cfc9a}
.compare-table td.bad{color:#ffb547}
.compare-note{
  padding:14px 16px;border-radius:14px;background:rgba(0,164,239,.08);border:1px solid rgba(0,164,239,.18);
  font-size:12px;color:#d7e6f2;line-height:1.75;
}
.mobile-preview-grid article.active{
  border-color:rgba(106,216,255,.34);background:linear-gradient(180deg,rgba(11,33,49,.96),rgba(8,20,30,.9));
  box-shadow:0 20px 34px rgba(0,0,0,.24);
}
.reveal-block{
  opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal-block.in{opacity:1;transform:none}
.win.compact .tm{grid-template-columns:64px 1fr}
.win.compact .tm-nav-label{display:none}
.win.compact .tm-side .item{justify-content:center;padding:0}
.win.compact .tm-top{grid-template-columns:1fr;gap:10px}
.win.compact .tm-actions{justify-content:flex-start}
.win.compact .tm-actions button{padding:0 10px;font-size:11px}
.win.compact .tm-perf{grid-template-columns:248px 1fr}
.win.compact .tm-card-grid,
.win.compact .tm-detail-grid{grid-template-columns:1fr 1fr}
.win.compact .scada,
.win.compact .ecat,
.win.compact .ioapp,
.win.compact .stress,
.win.compact .portsapp,
.win.compact .compare,
.win.compact .pwr,
.win.compact .sys{padding:14px}
.win.compact .stress .grid,
.win.compact .fault-grid,
.win.compact .pwr{grid-template-columns:1fr}
.win.compact .proc-table th,
.win.compact .proc-table td{padding:6px 8px;font-size:10.5px}
.win.compact .scada{grid-template-columns:repeat(2,minmax(0,1fr))}
.win.compact .scada .tile .val{font-size:22px}
.win.compact .tag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.win.compact .log-list div{grid-template-columns:64px 62px 1fr;gap:8px}
.win.compact .io-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.win.compact .disp-bar{flex-wrap:wrap}
.win.compact .touch-demo-panel{inset:12px;padding:14px}
.win.compact .touch-demo-top,
.win.compact .touch-hmi-grid,
.win.compact .touch-slider-group,
.win.compact .configurator{grid-template-columns:1fr}
.win.compact .config-panel,
.win.compact .config-summary{padding:14px}
.win.compact .config-summary dl{grid-template-columns:104px 1fr;gap:8px 12px}
.win.compact .compare-table{display:block;overflow:auto;white-space:nowrap}
.win.compact .panel-view{padding:14px}
.win.compact .port-row{gap:8px}
.win.compact .thermal{height:156px}
.win.short .scada .line-view{height:118px}
.win.short .ecat .topology{min-height:210px}
.win.short .touch-demo-panel{gap:10px}
.win.narrow .tm{grid-template-columns:1fr}
.win.narrow .tm-side{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
  padding:8px;border-right:0;border-bottom:1px solid rgba(255,255,255,.06);
}
.win.narrow .tm-side .item{
  justify-content:center;padding:10px 8px;border-left:0;border-radius:10px;text-align:center;
}
.win.narrow .tm-side .item.active{
  padding-left:8px;border-left:0;box-shadow:inset 0 -2px 0 #53b8ff;
}
.win.narrow .tm-side .item.active::before{display:none}
.win.narrow .tm-nav-label{display:none}
.win.narrow .tm-top{grid-template-columns:1fr}
.win.narrow .tm-actions{justify-content:flex-start}
.win.narrow .tm-perf,
.win.narrow .tm-card-grid,
.win.narrow .tm-detail-grid{grid-template-columns:1fr}
.win.narrow .scada,
.win.narrow .tag-grid,
.win.narrow .touch-demo-top,
.win.narrow .touch-hmi-grid,
.win.narrow .touch-slider-group{grid-template-columns:1fr}
.win.narrow .log-list div{grid-template-columns:1fr;gap:4px}
.win.narrow .sys{grid-template-columns:1fr;padding:16px}
.win.narrow .sys dl{grid-template-columns:110px 1fr;gap:8px 12px}
.win.narrow .disp-bar .info{margin-left:0;width:100%;justify-content:space-between}
@media (prefers-reduced-motion: reduce){
  .reveal-block{opacity:1;transform:none;transition:none}
}
@media (max-width:880px){
  .tag-grid,.touch-demo-top,.touch-slider-group,.configurator{grid-template-columns:1fr}
  .touch-hmi-grid,.fault-grid{grid-template-columns:1fr}
  .config-summary dl{grid-template-columns:110px 1fr}
}

/* ports */
.portsapp{padding:16px;height:100%;overflow:auto}
.portsapp h4{margin:0 0 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9db1c2;font-weight:500}
.panel-view{
  position:relative;background:linear-gradient(180deg,#2a343e,#0f151b);
  border-radius:10px;padding:20px;border:1px solid #1a2632;
  box-shadow:inset 0 0 30px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.4);
  margin-bottom:14px;
}
.panel-view .plabel{font-size:10px;color:#5b6a77;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;font-weight:600}
.port-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.port{
  position:relative;min-width:60px;padding:10px 12px;border-radius:6px;
  background:linear-gradient(180deg,#0a1420,#05090e);
  border:1px solid #1a2632;cursor:pointer;transition:.2s;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.port:hover{border-color:rgba(0,164,239,.5);transform:translateY(-2px)}
.port .pn{font-family:var(--mono);font-size:9px;color:#5b6a77;letter-spacing:.1em}
.port .pl{font-size:10px;color:#cfe0ec;font-weight:600}
.port .led{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:#2a3846}
.port.active .led{background:#7cfc9a;box-shadow:0 0 6px #7cfc9a;animation:blink 1.2s infinite}
.port.active2 .led{background:#ffb547;box-shadow:0 0 6px #ffb547}
@keyframes blink{50%{opacity:.4}}
.port-info{font-size:11px;color:#9db1c2;padding:10px 12px;background:rgba(0,164,239,.06);border:1px solid rgba(0,164,239,.25);border-radius:6px;font-family:var(--mono);min-height:36px}
.port-info b{color:#6ad8ff}

/* serial terminal */
.term{height:100%;background:#030508;display:flex;flex-direction:column;font-family:var(--mono);font-size:12px}
.term-bar{padding:8px 12px;background:#0a141e;border-bottom:1px solid #1a2632;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.term-bar button{padding:5px 10px;background:transparent;border:1px solid #1a2632;border-radius:4px;color:#9db1c2;font-size:10px;cursor:pointer;font-family:var(--mono)}
.term-bar button.on{background:rgba(0,164,239,.18);border-color:#6ad8ff;color:#fff}
.term-bar select{background:#0a141e;border:1px solid #1a2632;border-radius:4px;color:#cfe0ec;font-size:10px;padding:5px 8px;font-family:var(--mono)}
.term-bar .s{margin-left:auto;color:#7cfc9a;font-size:10px;display:flex;gap:12px}
.term-body{flex:1;padding:10px 14px;overflow-y:auto;color:#7cfc9a;line-height:1.6}
.term-body .rx{color:#7cfc9a}
.term-body .tx{color:#6ad8ff}
.term-body .ts{color:#5b6a77;margin-right:8px}
.term-body .cm{color:#9db1c2}

/* power & thermal */
.pwr{padding:18px;height:100%;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pwr .full{grid-column:1/-1}
.pwr .card{background:rgba(8,16,24,.6);border:1px solid var(--line);border-radius:8px;padding:14px}
.pwr h5{margin:0 0 8px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#9db1c2;font-weight:500;display:flex;justify-content:space-between}
.pwr .big{font-family:var(--mono);font-size:34px;font-weight:600;color:#6ad8ff}
.pwr .big small{font-size:14px;color:#9db1c2;margin-left:6px}
.pwr .range{height:6px;background:rgba(140,180,220,.1);border-radius:3px;overflow:hidden;margin-top:10px}
.pwr .range i{display:block;height:100%;background:linear-gradient(90deg,#23d6b1,#00a4ef);transition:width .3s}
.pwr .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(124,252,154,.12);color:#7cfc9a;font-size:11px;font-weight:600;border:1px solid rgba(124,252,154,.3)}
.thermal{position:relative;height:180px;border-radius:6px;overflow:hidden;background:#05080c;border:1px solid var(--line)}
.thermal svg{width:100%;height:100%}
.pwr-meta{font-family:var(--mono);font-size:11px;color:#9db1c2;line-height:1.7}
.pwr-meta b{color:#d7e6f2}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(140,180,220,.18);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(140,180,220,.32)}

@media (max-width:900px){
  .landing-wrap{grid-template-columns:1fr;gap:30px}
  .device{max-width:100%;padding:0 0 74px}
  .panelpc-hero{width:min(100%,760px);aspect-ratio:1.52/1}
  .panel-ui{--panel-ui-scale:.78}
  .scada-body{grid-template-columns:1fr}
  .scada-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-bottom{grid-template-columns:1fr}
  .tb-search,.tb-search-panel{display:none}
  .desktop-assist{display:none}
}
@media (max-width:640px){
  .cta-links{gap:10px}
  .cta-link,.ghost-btn{width:100%;justify-content:center}
  .product-ribbon,.story-grid,.connectivity-grid,.usecase-grid{grid-template-columns:1fr}
  .hotspot-card{left:14px;right:14px;bottom:58px;width:auto}
  .hero-hotspot{font-size:9px;padding:6px 8px}
  .hs-display{top:6%;left:30%}
  .hs-ip65{top:18%;left:8%}
  .hs-usb{left:11%;bottom:17%}
  .hs-lan{right:10%;top:36%}
  .hs-rs232{right:3%;top:46%}
  .hs-rs485{right:5%;top:56%}
  .hs-hdmi{right:13%;bottom:29%}
  .hs-dio{right:13%;bottom:18%}
  .hs-fanless{left:18%;bottom:6%}
  .device{aspect-ratio:auto;padding:0 0 52px}
  .panelpc-hero{aspect-ratio:1.3/1}
  .panel-shell{padding:10px}
  .panel-screen{border-width:10px}
  .panel-ui{--panel-ui-scale:.72}
  .scada-topbar{padding:14px 14px 10px}
  .scada-topbar strong{font-size:13px}
  .scada-state{padding:6px 10px;font-size:10px}
  .scada-body{padding:0 14px 14px}
  .scada-metrics{grid-template-columns:1fr 1fr}
  .metric-card .value{font-size:22px}
  .process-stage{min-height:220px}
  .flow-station{width:72px;height:42px;font-size:9px}
  .panel-brand img{height:18px}
  .panel-btn{width:30px;height:22px}
}