:root{
  --bg:#92979c;--panel:#d1d1d1;--panel2:#bdbdbd;--border:#777;
  --text:#171717;--muted:#555;--blue:#1d64aa;--blue2:#0f447d;
  --green:#50dc58;--red:#e24f4f;--yellow:#efc34d;
  --terminal:#070b08;--term:#74ff7c;--graph:#111611;--grid:#354235;
  --font:Arial,Helvetica,sans-serif;--mono:"Courier New",Consolas,monospace
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--font);color:var(--text);background:var(--bg)}
body{min-height:100vh;background:
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),#8d9297;background-size:18px 18px}
button,input,select{font:inherit}.hidden{display:none!important}.hidden-section{display:none}
button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}

.topbar{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:8px 14px;border-bottom:2px solid #666;background:linear-gradient(#efefef,#bcbcbc);
box-shadow:inset 0 1px #fff,0 2px 7px rgba(0,0,0,.25)}
.brand{display:flex;align-items:center;gap:10px}.brand h1{margin:0;font-size:18px}.brand p{margin:2px 0 0;color:#555;font-size:10px}
.brand-icon{width:40px;height:40px;display:flex;align-items:end;justify-content:center;gap:3px;padding-bottom:7px;border:2px outset #e9e9e9;background:#eee}
.brand-icon i{width:5px;background:#1f5d9d;border:1px solid #0e3d6c}.brand-icon i:nth-child(1){height:12px}.brand-icon i:nth-child(2){height:22px}.brand-icon i:nth-child(3){height:16px}
.top-status{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.runtime-badge,.lamp-badge{height:28px;display:flex;align-items:center;gap:6px;padding:0 9px;border:2px inset #d6d6d6;background:#c9c9c9;font-size:8px;font-weight:800}
.runtime-badge{font-family:var(--mono)}.lamp-badge i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(80,220,88,.6)}
.lamp-badge.off i{background:var(--red);box-shadow:0 0 6px rgba(226,79,79,.55)}

.workspace{display:grid;grid-template-columns:300px minmax(0,1fr);gap:10px;padding:10px;max-width:1920px;margin:auto}
.sidebar,.main{display:flex;flex-direction:column;gap:9px;min-width:0}
.panel{position:relative;padding:11px;border:2px outset #dedede;background:var(--panel);box-shadow:1px 1px 3px rgba(0,0,0,.14)}
.panel-title{min-height:25px;display:flex;align-items:center;margin:-11px -11px 11px;padding:4px 8px;border-bottom:1px solid #8d8d8d;background:linear-gradient(#e8e8e8,#b8b8b8);font-size:10px;font-weight:800;letter-spacing:.04em}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:9px}.field>span{font-size:9px;font-weight:700;color:#353535}
.field input,.field select,.tx-row input,.tx-row select,.graph-controls select{height:31px;border:2px inset #d8d8d8;border-radius:0;background:white;padding:0 7px;outline:none}
.field input:focus,.field select:focus,.tx-row input:focus,.tx-row select:focus{outline:1px dotted #000;outline-offset:-4px}
.port-row{display:grid;grid-template-columns:minmax(0,1fr) 34px 54px;gap:5px}
.btn{min-height:31px;border:2px outset #e4e4e4;border-radius:0;background:linear-gradient(#eee,#c5c5c5);padding:4px 9px;font-size:9px;font-weight:800}
.btn:active{border-style:inset;background:#c5c5c5}.btn.full{width:100%;margin-top:4px}.btn.square{width:34px;padding:0;font-size:16px}.btn.debug{padding:0 5px;font-size:7px;background:linear-gradient(#fff3aa,#d4b551)}
.btn.primary,.btn.send{color:#fff;background:linear-gradient(#4d91d1,#1c5fa8);border-color:#7ea6cd}.btn.primary.disconnect{background:linear-gradient(#e47a7a,#b43d3d);border-color:#cc8888}
.btn.tiny{min-height:23px;height:23px;padding:0 7px;font-size:8px}.btn.record{color:#6d1717;background:linear-gradient(#ffd3d3,#df8989);border-color:#d6a0a0}.btn.record.active{color:#fff;background:linear-gradient(#df6666,#a92d2d)}
.fixed-setting,.web-port-card{min-height:34px;display:flex;align-items:center;justify-content:space-between;margin:3px 0 9px;padding:5px 8px;border:2px inset #d7d7d7;background:#bababa;font-size:9px}
.web-port-card{min-height:48px;flex-direction:column;align-items:flex-start;justify-content:center}.web-port-card small{margin-top:3px;color:#555;font-size:8px}
.scan-state{min-height:30px;display:grid;grid-template-columns:10px auto minmax(0,1fr);gap:5px;align-items:center;margin-top:5px;padding:4px 6px;border:2px inset #d3d3d3;background:#bdbdbd;font-size:8px}
.scan-state i{width:8px;height:8px;border-radius:50%;border:1px solid #555;background:#888}.scan-state.scanning i{background:var(--yellow);box-shadow:0 0 5px rgba(239,195,77,.7)}.scan-state.ok i{background:var(--green);box-shadow:0 0 5px rgba(80,220,88,.6)}.scan-state.error i{background:var(--red)}
.scan-state small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#555}
.big-readout>span{display:block;margin-bottom:4px;font-size:9px;font-weight:700}.big-readout>div{height:54px;display:flex;align-items:baseline;justify-content:center;gap:5px;padding:7px;border:2px inset #aaa;background:#0c160d}
.big-readout strong{color:#6cff75;font:700 27px var(--mono);text-shadow:0 0 7px rgba(108,255,117,.38)}.big-readout em{color:#91aa93;font:10px var(--mono);font-style:normal}
.readout-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:8px 0}.readout-grid>div{padding:6px;border:2px inset #d2d2d2;background:#bcbcbc}.readout-grid span{display:block;margin-bottom:3px;color:#4e4e4e;font-size:8px}.readout-grid strong{display:block;font:700 9px var(--mono)}
.record-state{min-height:44px;display:flex;align-items:center;gap:9px;margin-bottom:5px;padding:6px 8px;border:2px inset #d1d1d1;background:#bcbcbc}.record-state>i{width:16px;height:16px;border-radius:50%;border:2px inset #ddd;background:#595959}.record-state.active>i{background:#f13d3d;box-shadow:0 0 8px rgba(241,61,61,.65)}
.record-state strong{display:block;font-size:9px}.record-state small{display:block;margin-top:2px;color:#555;font:8px var(--mono)}.note{margin:7px 0 0;color:#5c5c5c;font-size:8px}

.metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.metrics>div{min-height:57px;display:flex;flex-direction:column;justify-content:center;padding:7px 8px;border:2px outset #dedede;background:#cfcfcf}.metrics span{color:#4b4b4b;font-size:8px;font-weight:700}.metrics strong{margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 13px var(--mono)}
.split-title{justify-content:space-between;gap:8px}.inline-tools{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:8px;font-weight:400;letter-spacing:0}.inline-tools label{display:flex;align-items:center;gap:3px}
.terminal{height:310px;margin:0;padding:10px;overflow:auto;border:3px inset #a5a5a5;background:var(--terminal);color:var(--term);font:10px/1.55 var(--mono);white-space:pre-wrap;word-break:break-word}.terminal-time{color:#74a878}.terminal-tx{color:#6ab6ff}.terminal-error{color:#ff6f6f}.terminal-hint{color:#527156}
.tx-row{display:grid;grid-template-columns:35px minmax(0,1fr) 105px 68px;gap:5px;align-items:center;margin-top:7px}.tx-row>span{height:31px;display:grid;place-items:center;border:2px inset #d2d2d2;background:#bcbcbc;color:#124b82;font:800 10px var(--mono)}

.graph-head{position:relative;justify-content:space-between;gap:8px;overflow:visible}.graph-head>div:first-child{display:flex;flex-direction:column;gap:2px}.graph-head small{font-size:7px;font-weight:400;color:#5d5d5d;letter-spacing:0}
.graph-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:5px;font-size:8px;font-weight:400;letter-spacing:0}.graph-controls label{display:flex;align-items:center;gap:4px}.graph-controls select{height:23px;width:65px;padding:0 3px;font-size:8px}
.channel-picker{position:relative}.channel-trigger{min-width:110px;color:#173d65}.channel-popup{position:absolute;z-index:40;top:calc(100% + 5px);right:0;width:235px;max-height:350px;padding:7px;border:2px outset #e3e3e3;background:#d2d2d2;box-shadow:4px 5px 14px rgba(0,0,0,.28)}
.popup-head{display:flex;align-items:center;justify-content:space-between;padding:4px 5px 7px;border-bottom:1px solid #8b8b8b;font-size:9px}.icon-close{width:22px;height:20px;padding:0;border:2px outset #ddd;background:#c8c8c8;font-weight:800}.popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px 0}.popup-actions button{min-height:24px;border:2px outset #dedede;background:#c8c8c8;font-size:8px;font-weight:700}
.channel-list{max-height:250px;overflow:auto;border:2px inset #d3d3d3;background:#bdbdbd;padding:4px}.channel-item{display:flex;align-items:center;gap:6px;min-height:26px;padding:3px 5px;border-bottom:1px solid #9c9c9c;font-size:9px}.channel-item:last-child{border-bottom:0}.channel-item input{width:13px;height:13px}.channel-color{width:16px;height:3px;border:1px solid rgba(0,0,0,.2)}
.graph-info{min-height:28px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;padding:4px 7px;border:2px inset #d0d0d0;background:#bdbdbd;color:#444;font-size:8px}.chart-wrap{height:390px;padding:7px;border:3px inset #9f9f9f;background:var(--graph)}.chart-wrap canvas{width:100%!important;height:100%!important}
.sheet-wrap{max-height:430px;overflow:auto;border:3px inset #a4a4a4;background:#fff}.sheet{width:100%;border-collapse:collapse;font:9px var(--mono)}.sheet th,.sheet td{min-width:74px;padding:4px 6px;border-right:1px solid #bcbcbc;border-bottom:1px solid #c9c9c9;text-align:right;white-space:nowrap}.sheet th{position:sticky;top:0;z-index:2;background:linear-gradient(#f2f2f2,#bcbcbc);border-bottom:2px solid #777;font-weight:800}.sheet th:first-child,.sheet td:first-child{min-width:48px;text-align:center;background:#dedede}.sheet td:nth-child(2){text-align:left}.raw-cell{max-width:380px;overflow:hidden;text-overflow:ellipsis;text-align:left!important}.empty-row td{height:70px;color:#777;text-align:center!important;background:#f7f7f7!important}
.empty-message{color:#626262;font-size:8px}

.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px;background:rgba(25,25,25,.58)}
.modal.hidden{display:none!important}
.modal-card{width:min(760px,96vw);max-height:88vh;padding:11px;border:2px outset #e3e3e3;background:#cecece;box-shadow:6px 8px 25px rgba(0,0,0,.35)}
.modal-title{min-height:28px;display:flex;align-items:center;justify-content:space-between;margin:-11px -11px 8px;padding:4px 8px;border-bottom:1px solid #888;background:linear-gradient(#e8e8e8,#b8b8b8);font-size:10px}
.modal-x{width:25px;height:23px;border:2px outset #ddd;background:#c8c8c8;font-size:15px;font-weight:800}.modal-card p{margin:5px 0 8px;color:#444;font-size:9px}.debug-output{height:min(55vh,440px);margin:0;padding:9px;overflow:auto;border:3px inset #9f9f9f;background:#0c100d;color:#7bff86;font:10px/1.45 var(--mono);white-space:pre-wrap;word-break:break-word}.modal-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}
.toast-stack{position:fixed;right:12px;bottom:12px;z-index:300;width:min(360px,calc(100vw - 24px));display:flex;flex-direction:column;gap:6px}.toast{padding:9px 10px;border:2px outset #e3e3e3;background:#d6d6d6;box-shadow:2px 2px 8px rgba(0,0,0,.25);font-size:9px}.toast.error{border-color:#d68e8e}.toast.success{border-color:#8dbf91}

@media(max-width:1200px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
@media(max-width:650px){.topbar{align-items:flex-start;flex-direction:column}.top-status{justify-content:flex-start}.sidebar{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.tx-row{grid-template-columns:32px minmax(0,1fr)}.chart-wrap{height:300px}.graph-head{align-items:flex-start;flex-direction:column}.channel-popup{left:0;right:auto}}


/* =========================================================
   EKSerialScope v2.1.0 — login + optimized adaptive graph
   ========================================================= */
.login-gate{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:20px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    #787d82;
  background-size:18px 18px;
}
.login-gate.hidden{display:none!important}
.login-card{
  width:min(360px,94vw);
  padding:24px;
  border:2px outset #e7e7e7;
  background:#d3d3d3;
  box-shadow:7px 9px 28px rgba(0,0,0,.32);
  text-align:center;
}
.login-logo{
  width:56px;
  height:56px;
  margin:0 auto 12px;
  display:flex;
  align-items:end;
  justify-content:center;
  gap:4px;
  padding-bottom:10px;
  border:2px outset #e9e9e9;
  background:#eee;
}
.login-logo i{
  width:7px;
  background:#1f5d9d;
  border:1px solid #0e3d6c;
}
.login-logo i:nth-child(1){height:17px}
.login-logo i:nth-child(2){height:31px}
.login-logo i:nth-child(3){height:23px}
.login-card h2{margin:0;font-size:21px}
.login-card>p{margin:5px 0 18px;color:#555;font-size:10px}
.login-field{display:flex;flex-direction:column;gap:5px;text-align:left}
.login-field span{font-size:9px;font-weight:700}
.login-field input{
  width:100%;
  height:36px;
  padding:0 9px;
  border:2px inset #d8d8d8;
  background:#fff;
  outline:none;
  font:13px var(--mono);
}
.login-field input:focus{outline:1px dotted #000;outline-offset:-4px}
.login-button{width:100%;margin-top:10px}
.login-error{
  margin-top:9px;
  padding:7px;
  border:2px inset #d2abab;
  background:#e8baba;
  color:#711d1d;
  font-size:9px;
  font-weight:700;
}
.adaptive-toggle{
  height:23px;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  padding:0 6px;
  border:2px inset #d4d4d4;
  background:#bebebe;
  font-size:8px;
  font-weight:700;
  white-space:nowrap;
}
.adaptive-toggle input{
  width:12px;
  height:12px;
  margin:0;
}
.chart-wrap.graph-busy::after{
  content:"Preparing graph...";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:6px 9px;
  border:2px outset #d8d8d8;
  background:#cfcfcf;
  color:#222;
  font:9px var(--mono);
}
.chart-wrap{position:relative}


/* =========================================================
   EKSerialScope v2.2.0 — high-speed acquisition engine
   ========================================================= */
.highspeed-status{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  margin:7px 0 9px;
  padding:6px 8px;
  border:2px inset #c9c9c9;
  background:#b9b9b9;
}
.hs-led{
  width:11px;
  height:11px;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid #19541d;
  background:#51d457;
  box-shadow:0 0 7px rgba(81,212,87,.62);
}
.highspeed-status strong{
  display:block;
  font-size:8px;
  letter-spacing:.03em;
}
.highspeed-status small{
  display:block;
  margin-top:3px;
  color:#555;
  font:7px var(--mono);
}


/* =========================================================
   EKSerialScope v2.3.0 — native Canvas waveform
   ========================================================= */
.chart-wrap canvas{
  display:block;
  width:100%;
  height:100%;
  image-rendering:auto;
}
.native-canvas-note{
  font:7px var(--mono);
  color:#555;
}