/* =========================================================================
 * NetSim Pro — styles.css
 * ========================================================================= */
:root{
  --header:#1b2430;
  --header-2:#232f3e;
  --accent:#049fd9;
  --accent-dark:#037cab;
  --ink:#1f2937;
  --muted:#64748b;
  --line:#d8dee6;
  --panel:#ffffff;
  --canvas-bg:#fafbfc;
  --led-up:#22c55e;
  --led-down:#ef4444;
  --led-blk:#f59e0b;
  --term-bg:#0c1117;
  --term-ink:#d2e4d2;
  --radius:8px;
  --shadow:0 8px 28px rgba(15,23,42,.18);
  font-size:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  color:var(--ink);
  display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--canvas-bg);
}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit}

/* ---------------- header ---------------- */
header{
  height:44px;flex:0 0 44px;
  background:linear-gradient(180deg,var(--header-2),var(--header));
  color:#e8edf3;
  display:flex;align-items:center;gap:14px;
  padding:0 12px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 2px 8px rgba(0,0,0,.25);
  z-index:20;
}
.mode-switch{display:flex;align-items:stretch;background:rgba(255,255,255,.08);border-radius:7px;padding:3px;gap:2px;height:32px}
.mode-switch button{
  border:0;background:transparent;color:#b9c6d4;
  padding:0 14px;border-radius:5px;font-weight:600;font-size:12.5px;
  display:inline-flex;align-items:center;
}
.mode-switch button.active{background:var(--accent);color:#fff}
header select{
  background:rgba(255,255,255,.08);color:#e8edf3;border:1px solid rgba(255,255,255,.15);
  border-radius:6px;padding:0 8px;max-width:240px;height:30px;
}
header select option{color:#111}
.hbtn{
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#dde6ee;border-radius:6px;padding:0 12px;font-size:12.5px;
  height:30px;display:inline-flex;align-items:center;white-space:nowrap;
}
.hbtn:hover{background:rgba(255,255,255,.14)}
.hbtn-icon{padding:0;width:32px;justify-content:center}
.hbtn-icon svg{display:block}
.hbtn:disabled{opacity:.32;cursor:default;background:rgba(255,255,255,.04)}
.hbtn:disabled:hover{background:rgba(255,255,255,.04)}
.spacer{flex:1}

/* ---------------- main layout ---------------- */
main{
  flex:1;display:flex;flex-direction:column;min-height:0;position:relative;
}

/* bottom toolbar */
aside{
  order:2;flex:0 0 auto;background:var(--panel);
  border-top:1px solid var(--line);
  display:flex;align-items:center;
  padding:6px 8px;gap:8px;overflow-x:auto;overflow-y:hidden;z-index:10;
}
aside h4{
  font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;margin:0 2px;white-space:nowrap;
}
.tools,.palette{
  display:flex;align-items:center;gap:6px;flex:0 0 auto;
}
.tools button,.palette button{
  border:1px solid var(--line);background:#fff;border-radius:7px;
  width:68px;height:48px;padding:0 4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:10.5px;color:#3b4656;flex:0 0 auto;
}
.tools button svg,.palette button svg{display:block;height:20px;width:auto;flex:0 0 20px}
.palette button svg{height:26px;flex-basis:26px}
aside h4{flex:0 0 auto}
.tools button:hover,.palette button:hover{border-color:var(--accent);background:#f2fafd}
.tools button.active,.palette button.active{
  border-color:var(--accent);background:#e3f4fb;color:var(--accent-dark);
  box-shadow:0 0 0 1px var(--accent) inset;
}

/* canvas */
.canvas-wrap{order:1;flex:1;position:relative;min-width:0;min-height:0}
#canvas{
  width:100%;height:100%;display:block;
  background:
    radial-gradient(circle,#cdd5de 1px,transparent 1.2px) 0 0/20px 20px,
    var(--canvas-bg);
  cursor:grab;
  touch-action:none;
}
#canvas.is-panning{cursor:grabbing}
.dev{cursor:grab}
.dev:active{cursor:grabbing}
.dev-halo{fill:transparent;stroke:transparent;stroke-width:1.6}
.dev:hover .dev-halo{fill:rgba(4,159,217,.06)}
.dev.sel .dev-halo{stroke:var(--accent);fill:rgba(4,159,217,.07);stroke-dasharray:5 4}
.dev.pdu-src .dev-halo{stroke:#f59e0b;fill:rgba(245,158,11,.10)}
.devlabel{font-size:12px;font-weight:700;text-anchor:middle;fill:#27313f}
.deviplabel{font-size:10px;text-anchor:middle;fill:#5a6b80}
.cable{stroke:#46535f;stroke-width:2.2}
.cable.preview{stroke:var(--accent);stroke-dasharray:6 5}
.cable-hit{stroke:transparent;stroke-width:14;cursor:pointer}
.link.sel .cable{stroke:var(--accent);stroke-width:3}
.led{stroke:#fff;stroke-width:1.4;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.portlabel{font-size:9.5px;fill:#5a6b80;text-anchor:middle;paint-order:stroke;stroke:#fafbfc;stroke-width:3}
.envelope{pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}

/* hint + status bar */
.statusbar{
  position:absolute;left:0;right:0;bottom:0;min-height:30px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(4px);
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:5px 10px;
  font-size:12px;color:var(--muted);z-index:5;
  flex-wrap:wrap;
}
#hint{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#41506b}
.legend{display:flex;align-items:center;gap:10px;white-space:nowrap}
.legend span{display:inline-flex;align-items:center}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}

#hint{min-width:180px}
.zoom-controls{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.zoom-controls .mini{min-width:34px;padding:2px 8px}

/* toast */
#toast{
  position:fixed;left:50%;top:64px;transform:translateX(-50%) translateY(-8px);
  background:#1b2430;color:#fff;border-radius:8px;padding:9px 18px;
  font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:300;
  box-shadow:var(--shadow);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------- PDU test dock (shown only when PDU tool active) ---------------- */
#pduDock{
  position:absolute;left:12px;bottom:42px;width:300px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 6px 20px rgba(15,23,42,.12);z-index:7;overflow:hidden;
}
#pduDock[hidden]{display:none}
.pdu-head{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;background:#f4f6f9;border-bottom:1px solid var(--line);
}
.pdu-title{font-size:12.5px;font-weight:700;color:#2b3950}
.pdu-head .spacer{flex:1}
#pduList{max-height:170px;overflow-y:auto;font-size:12px;padding:4px 0}
.pdu-row{display:flex;gap:8px;padding:4px 12px;align-items:baseline;border-bottom:1px dotted #eef1f5}
.pdu-row:last-child{border-bottom:0}
.pdu-status{font-weight:700;flex:0 0 40px;color:#8a96a8}
.pdu-row.ok .pdu-status{color:#16a34a}
.pdu-row.ng .pdu-status{color:#dc2626}
.pdu-detail{margin-left:auto;color:#7b8aa0;font-size:11px}
.empty{color:#9aa7b8;padding:10px 12px;font-size:12px}

/* ---------------- device window ---------------- */
.devwin{
  position:fixed;width:min(560px,calc(100vw - 24px));height:min(500px,calc(100vh - 24px));min-width:min(320px,calc(100vw - 24px));min-height:min(260px,calc(100vh - 24px));
  max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);
  background:var(--panel);border:1px solid #b9c4d0;border-radius:10px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  resize:both;overflow:hidden;z-index:60;
}
.devwin::after{
  content:"";
  position:absolute;right:4px;bottom:4px;width:12px;height:12px;
  border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;
  pointer-events:none;opacity:.75;
}
.devwin-head{
  height:38px;flex:0 0 38px;background:linear-gradient(180deg,#2b3950,#1f2c44);
  color:#fff;display:flex;align-items:center;gap:9px;padding:0 10px;
  cursor:move;user-select:none;border-radius:10px 10px 0 0;
}
.devwin-icon{display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:6px;width:28px;height:28px;flex:0 0 28px;
  box-shadow:0 1px 2px rgba(0,0,0,.3)}
.devwin-title{font-size:12.5px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.devwin-close{
  border:0;background:transparent;color:#cdd7e2;font-size:19px;line-height:1;
  padding:2px 8px;border-radius:5px;
}
.devwin-close:hover{background:#e8554d;color:#fff}
.devwin-tabs{
  display:flex;gap:2px;background:#ecf0f4;padding:5px 8px 0;border-bottom:1px solid var(--line);
}
.devwin-tabs button{
  border:1px solid transparent;border-bottom:0;background:transparent;
  padding:6px 14px;font-size:12.5px;color:#56657c;border-radius:7px 7px 0 0;font-weight:600;
}
.devwin-tabs button.active{
  background:#fff;border-color:var(--line);color:var(--accent-dark);
  box-shadow:0 -2px 0 var(--accent) inset;
}
.devwin-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.devwin-body>*{flex:1}

/* terminal */
.term{
  display:flex;flex-direction:column;background:var(--term-bg);
  font-family:Consolas,"MS Gothic",monospace;font-size:13px;min-height:0;
}
.term-out{
  flex:1;overflow-y:auto;padding:10px 12px 2px;color:var(--term-ink);
  white-space:pre-wrap;word-break:break-all;line-height:1.45;
}
.term-row{display:flex;padding:2px 12px 10px;align-items:baseline}
.term-prompt{color:#7ad17a;white-space:pre}
.term-input{
  flex:1;background:transparent;border:0;outline:0;color:#e6f0e6;
  font:inherit;caret-color:#7ad17a;padding-left:6px;
}

/* config forms */
.cfg{padding:16px 20px;overflow-y:auto;background:#fbfcfd}
.cfg h3{
  font-size:13px;color:#2b3950;margin:14px 0 8px;padding-bottom:4px;
  border-bottom:2px solid #e3eaf2;
}
.cfg h3:first-child{margin-top:0}
.cfg .row{display:flex;align-items:center;gap:10px;margin:7px 0;flex-wrap:wrap}
.cfg .row:has(.field){align-items:flex-end}
.cfg .row .field{margin:0}
.cfg .row .cfg-msg{align-self:center;padding-bottom:7px}
.cfg .field{display:flex;flex-direction:column;gap:3px;margin:6px 0;max-width:300px}
.cfg .field span{font-size:11.5px;color:var(--muted);font-weight:600}
.cfg input[type=text],.cfg input:not([type]),.cfg textarea{
  border:1px solid #c6d0dc;border-radius:6px;padding:6px 9px;background:#fff;
}
.cfg input:focus,.cfg textarea:focus{outline:2px solid rgba(4,159,217,.3);border-color:var(--accent)}
.cfg input:disabled{background:#eef1f5;color:#9aa7b8}
.cfg textarea{width:100%;max-width:520px;font-family:Consolas,monospace;font-size:12px}
.cfg .kv{font-size:12.5px;color:#41506b;margin:3px 0;font-family:Consolas,monospace}
.cfg .note{font-size:12px;color:var(--muted);margin:4px 0 8px}
.cfg-msg{font-size:12px;color:#16a34a;font-weight:600}
.btn{
  border:1px solid #c6d0dc;background:#fff;border-radius:6px;padding:6px 16px;
  font-size:12.5px;color:#33415c;font-weight:600;
}
.btn:hover{border-color:var(--accent);color:var(--accent-dark)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-dark)}
.mini{
  border:1px solid #c6d0dc;background:#fff;border-radius:5px;font-size:11px;padding:2px 9px;color:#56657c;
  white-space:nowrap;
}
.mini.on{background:#dcfce7;border-color:#86efac;color:#166534}
.iftable{border-collapse:collapse;width:100%;font-size:12px;background:#fff;margin:6px 0}
.iftable th{background:#eef2f6;color:#42526b;text-align:left;font-size:11px;padding:5px 9px;border:1px solid #e0e6ed;white-space:nowrap}
.iftable td{padding:4px 9px;border:1px solid #e9eef4;font-family:Consolas,monospace}
.iftable td.up{color:#16a34a;font-weight:700}
.iftable td.down{color:#dc2626;font-weight:700}
.iftable tr.subif td{color:#7b8aa0;font-size:11.5px}

/* web browser tab */
.webbrowser{display:flex;flex-direction:column;min-height:0}
.urlbar{display:flex;gap:8px;padding:10px;background:#eef2f6;border-bottom:1px solid var(--line)}
.urlbar .url{flex:1;border:1px solid #c6d0dc;border-radius:18px;padding:7px 14px}
.webpage{flex:1;overflow:auto;padding:18px;background:#fff}
.web-placeholder{color:#9aa7b8;text-align:center;margin-top:60px}
.web-error{color:#7b2c2c;background:#fdf1f1;border:1px solid #f3c9c9;border-radius:8px;padding:16px;max-width:420px;margin:40px auto;font-size:13px;line-height:1.7}
.dns-records{margin:6px 0}
.dns-rec{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:3px 0}
.dns-rec code{background:#eef2f6;border-radius:4px;padding:1px 7px}
.dns-rec .mini{margin-left:8px}

/* port pick menu */
.port-menu{
  position:fixed;z-index:200;background:#fff;border:1px solid #b9c4d0;border-radius:9px;
  box-shadow:var(--shadow);padding:6px;min-width:200px;max-height:330px;overflow-y:auto;
}
.port-menu-title{font-size:11px;color:var(--muted);font-weight:700;padding:4px 8px 6px}
.port-menu button{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  border:0;background:transparent;padding:7px 10px;border-radius:6px;
  font-size:12.5px;font-family:Consolas,monospace;color:#2b3950;
}
.port-menu button:hover{background:#e3f4fb;color:var(--accent-dark)}
.port-dot{width:8px;height:8px;border-radius:50%}

/* help modal */
#helpModal{
  position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;
  align-items:center;justify-content:center;z-index:400;
}
#helpModal.open{display:flex}
.help-card{
  background:#fff;border-radius:12px;max-width:680px;width:92%;max-height:84vh;
  overflow-y:auto;padding:26px 30px;box-shadow:var(--shadow);
}
.help-card h2{font-size:17px;margin-bottom:12px;color:#1f2c44}
.help-card h3{font-size:13.5px;margin:16px 0 6px;color:var(--accent-dark)}
.help-card p,.help-card li{font-size:13px;line-height:1.8;color:#41506b}
.help-card ul{padding-left:20px}
.help-card code{background:#eef2f6;border-radius:4px;padding:1px 7px;font-size:12px}
.help-card .btn{margin-top:16px}

@media (max-width:900px){
  #simPanel{max-width:90vw;right:6px}
  #pduDock{left:12px;width:260px}
  header{gap:8px}
  header select{max-width:190px}
  .hbtn{padding:0 8px}
  .legend{display:none}
  .devwin{width:min(520px,calc(100vw - 20px));height:min(500px,calc(100vh - 20px))}
}

/* ---------------- live demo tutorial overlay ---------------- */
#demoOverlay{ position:fixed; inset:0; z-index:4000; background:transparent; }
.demo-cursor{
  position:fixed; left:0; top:0; z-index:4030; pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));
  transition:transform .6s cubic-bezier(.45,.05,.35,1);
}
.demo-cursor.press svg{ transform:scale(.82); }
.demo-cursor svg{ transition:transform .12s ease; display:block; }
.demo-click{
  position:absolute; left:-2px; top:-2px; width:30px; height:30px; border-radius:50%;
  border:2.5px solid var(--accent); opacity:0; pointer-events:none;
}
.demo-click.go{ animation:demoRip .45s ease-out; }
@keyframes demoRip{ 0%{opacity:.9;transform:scale(.3)} 100%{opacity:0;transform:scale(1.8)} }
.demo-ring{
  position:fixed; z-index:4010; pointer-events:none; border-radius:12px;
  border:3px solid var(--accent); box-shadow:0 0 0 4px rgba(4,159,217,.25);
  animation:demoRing 1.2s ease-in-out infinite;
}
@keyframes demoRing{ 50%{box-shadow:0 0 0 9px rgba(4,159,217,.12)} }
.demo-caption{
  position:fixed; left:50%; bottom:118px; transform:translateX(-50%);
  z-index:4020; width:min(560px,calc(100vw - 28px));
  background:rgba(20,28,40,.96); color:#eef3f8; border-radius:14px;
  padding:14px 18px 12px; box-shadow:0 14px 44px rgba(0,0,0,.45); backdrop-filter:blur(4px);
}
.demo-cap-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:5px; }
.demo-cap-step{ font-size:11px; font-weight:700; letter-spacing:.5px; color:#5fc7ed; white-space:nowrap; }
.demo-cap-title{ font-size:15px; font-weight:700; }
.demo-cap-text{ font-size:12.5px; line-height:1.7; color:#c2cedb; margin:0 0 10px; }
.demo-cap-btns{ display:flex; align-items:center; gap:8px; }
.demo-cap-btns .spacer{ flex:1; }
.demo-cap-btns .btn{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  color:#e8eef5; font-size:12px; padding:0 12px; height:28px;
  display:inline-flex; align-items:center; border-radius:6px; cursor:pointer;
}
.demo-cap-btns .btn:hover{ background:rgba(255,255,255,.18); }
@media (max-width:560px){
  .demo-caption{ bottom:96px; padding:12px 14px 10px; }
  .demo-cap-text{ font-size:12px; }
}