/* ===== BTKCHC 網絡模擬器 樣式 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#f4f6fb; --panel:#ffffff; --line:#d8dee9; --ink:#1f2937; --sub:#6b7280;
  --brand:#1e5fa8; --brand2:#0e7c7b; --ok:#1a9d5a; --warn:#d98a00; --err:#c0392b;
  --net:#3b82f6; --srv:#8b5cf6; --end:#10b981; --iot:#f59e0b; --netc:#64748b;
}
html,body{ height:100%; }
body{
  font-family:"Noto Sans HK","PingFang HK","Microsoft JhengHei","微軟正黑體",sans-serif;
  background:var(--bg); color:var(--ink); overflow:hidden;
  font-size:14px; line-height:1.5;
}
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:13px; }

/* 佈局 */
#app{ display:grid; grid-template-rows:auto 1fr auto; height:100vh; }
#topbar{
  display:flex; align-items:center; gap:14px; padding:8px 16px;
  background:linear-gradient(90deg,#0e3a66,#1e5fa8); color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.15); z-index:20;
}
#topbar .logo{ height:42px; width:auto; background:#fff; border-radius:6px; padding:3px; }
#topbar h1{ font-size:18px; font-weight:700; letter-spacing:.5px; }
#topbar .sub{ font-size:12px; opacity:.85; font-weight:400; }
#topbar .spacer{ flex:1; }
#topbar .tb-group{ display:flex; gap:6px; flex-wrap:wrap; }
.tbtn{
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3);
  padding:7px 12px; border-radius:7px; font-size:13px; display:inline-flex; align-items:center; gap:6px;
  transition:.15s;
}
.tbtn:hover{ background:rgba(255,255,255,.28); }
.tbtn.primary{ background:#fff; color:var(--brand); border-color:#fff; font-weight:600; }
.tbtn.primary:hover{ background:#e9f1fb; }
.tbtn.danger{ background:#b5392f; border-color:#b5392f; }
.tbtn.danger:hover{ background:#cf463b; }

#main{ display:grid; grid-template-columns:236px 1fr 360px; min-height:0; }
.panel{ background:var(--panel); min-height:0; display:flex; flex-direction:column; }
#palette{ border-right:1px solid var(--line); overflow-y:auto; }
#right{ border-left:1px solid var(--line); overflow-y:auto; }
#stage-wrap{ position:relative; overflow:hidden; background:
  linear-gradient(#e9eef6 1px,transparent 1px) 0 0/26px 26px,
  linear-gradient(90deg,#e9eef6 1px,transparent 1px) 0 0/26px 26px,
  #f7f9fc; }

/* 設備庫 */
.cat{ border-bottom:1px solid var(--line); }
.cat-h{ padding:9px 12px; font-weight:700; font-size:13px; background:#eef3fa; color:var(--brand); cursor:pointer;
  display:flex; align-items:center; gap:8px; user-select:none; }
.cat-h .cnt{ margin-left:auto; background:#dbe6f5; color:var(--brand); border-radius:10px; padding:0 8px; font-size:11px; }
.cat-body{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:8px; }
.dev-chip{
  border:1px solid var(--line); border-radius:8px; padding:8px 4px; text-align:center;
  background:#fff; cursor:grab; transition:.12s; user-select:none;
}
.dev-chip:hover{ border-color:var(--brand); box-shadow:0 2px 8px rgba(30,95,168,.15); transform:translateY(-1px); }
.dev-chip:active{ cursor:grabbing; }
.dev-chip .ico{ font-size:22px; line-height:1; }
.dev-chip .ico svg{ width:30px; height:30px; display:block; margin:0 auto; }
.dev-chip .nm{ font-size:11px; margin-top:4px; color:var(--ink); line-height:1.25; }

/* 畫布與視圖變換 */
#stage{ position:absolute; inset:0; overflow:hidden; cursor:grab; touch-action:none; }
#stage.panning{ cursor:grabbing; }
#world{ position:absolute; left:0; top:0; transform-origin:0 0; }
#links{ position:absolute; left:0; top:0; overflow:visible; width:6000px; height:4000px; pointer-events:none; }
#devices{ position:absolute; left:0; top:0; }
#canvas-controls{ position:absolute; top:10px; right:10px; z-index:15; display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:10px; padding:5px 8px;
  box-shadow:0 2px 8px rgba(0,0,0,.12); }
#canvas-controls button{ border:1px solid var(--line); background:#fff; border-radius:7px; width:30px; height:30px;
  font-size:16px; color:var(--brand); display:inline-flex; align-items:center; justify-content:center; }
#canvas-controls button:hover{ background:#eef3fa; }
#canvas-controls .reset{ width:auto; padding:0 10px; font-size:12px; font-weight:600; }
#canvas-controls #zoom-label{ font-size:12px; font-weight:700; color:var(--ink); min-width:42px; text-align:center; }
.zoom-hint{ position:absolute; bottom:8px; left:10px; z-index:15; font-size:11px; color:var(--sub);
  background:rgba(255,255,255,.82); padding:3px 8px; border-radius:6px; border:1px solid var(--line); }
.device{
  position:absolute; width:96px; min-height:72px; background:#fff; border:2px solid var(--line);
  border-radius:10px; padding:6px 4px 14px; text-align:center; cursor:move; user-select:none;
  box-shadow:0 2px 6px rgba(0,0,0,.08); transition:border-color .12s, box-shadow .12s;
}
.device:hover{ box-shadow:0 4px 12px rgba(0,0,0,.14); }
.device.selected{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(30,95,168,.25); }
.device.connecting{ border-color:var(--brand2); }
.device .ico{ font-size:26px; line-height:1; }
.device .ico svg{ width:36px; height:36px; display:block; margin:0 auto; }
.device .nm{ font-size:11px; font-weight:600; margin-top:3px; word-break:break-word; }
.device .ip{ font-size:10px; color:var(--sub); margin-top:1px; }
.device .bar{ position:absolute; left:0; right:0; bottom:0; height:6px; border-radius:0 0 8px 8px; }
.port{
  position:absolute; width:13px; height:13px; background:#cbd5e1; border:2px solid #fff;
  border-radius:50%; bottom:-7px; cursor:crosshair; transition:.12s; z-index:3;
}
.port:hover{ background:var(--brand2); transform:scale(1.25); }
.port.used{ background:#7dd3fc; }
.port.link-src{ background:var(--brand2); box-shadow:0 0 0 3px rgba(14,124,123,.35); }

/* 右側面板分頁 */
.tabs{ display:flex; border-bottom:1px solid var(--line); background:#f0f4fa; position:sticky; top:0; z-index:5; }
.tab{ flex:1; padding:9px 4px; text-align:center; font-size:12.5px; font-weight:600; color:var(--sub);
  border-bottom:2px solid transparent; }
.tab.active{ color:var(--brand); border-bottom-color:var(--brand); background:#fff; }
.tab-body{ padding:12px; display:none; }
.tab-body.active{ display:block; }

/* 屬性表單 */
.field{ margin-bottom:10px; }
.field label{ display:block; font-size:12px; color:var(--sub); margin-bottom:3px; font-weight:600; }
.field input, .field select, .field textarea{
  width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink);
}
.field textarea{ resize:vertical; min-height:54px; }
.hint{ font-size:11px; color:var(--sub); }
.subhead{ font-size:13px; font-weight:700; color:var(--brand); margin:14px 0 8px; border-left:3px solid var(--brand); padding-left:8px; }
.ico-head{ display:flex; align-items:center; gap:8px; }
.ico-head svg{ width:26px; height:26px; flex:none; }
.empty{ color:var(--sub); font-size:13px; text-align:center; padding:24px 8px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.small-btn{ background:var(--brand); color:#fff; border:none; border-radius:6px; padding:5px 10px; font-size:12px; }
.small-btn:hover{ background:#16487f; }
.small-btn.ghost{ background:#eef3fa; color:var(--brand); border:1px solid var(--line); }
.small-btn.del{ background:#fdecea; color:var(--err); }
.rule-item, .rec-item{ border:1px solid var(--line); border-radius:7px; padding:7px; margin-bottom:7px; background:#fafcff; font-size:12px; }
.rule-item .top, .rec-item .top{ display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.tag{ font-size:10px; padding:1px 6px; border-radius:8px; font-weight:700; }
.tag.allow{ background:#e3f6ec; color:var(--ok); }
.tag.deny{ background:#fdecea; color:var(--err); }
.kv{ font-size:12px; color:var(--ink); }
.kv b{ color:var(--sub); font-weight:600; }

/* 狀態/日誌 */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.stat{ background:#f3f7fc; border:1px solid var(--line); border-radius:8px; padding:9px; }
.stat .k{ font-size:11px; color:var(--sub); }
.stat .v{ font-size:17px; font-weight:700; color:var(--brand); }
.stat .v.run{ color:var(--ok); }
.stat .v.stop{ color:var(--sub); }
.led{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#bbb; margin-right:5px; vertical-align:middle; }
.led.on{ background:var(--ok); box-shadow:0 0 6px var(--ok); }

/* 工具按鈕 */
.tool-btn{ display:block; width:100%; text-align:left; padding:9px 11px; margin-bottom:7px; border:1px solid var(--line);
  border-radius:8px; background:#fff; font-size:13px; color:var(--ink); transition:.12s; }
.tool-btn:hover{ border-color:var(--brand); background:#f3f8ff; }
.tool-btn .ic{ margin-right:7px; }

/* 底部日誌 */
#logbar{ height:190px; background:#0f172a; color:#cbd5e1; display:flex; flex-direction:column; position:relative; }
#log-resizer{ position:absolute; top:-4px; left:0; right:0; height:8px; cursor:ns-resize; z-index:30;
  background:transparent; display:flex; align-items:flex-start; justify-content:center; }
#log-resizer::before{ content:""; width:46px; height:4px; border-radius:3px; background:#94a3b8; margin-top:1px; opacity:.6; }
#log-resizer:hover::before{ background:#cbd5e1; opacity:.9; }
#logbar .lh{ display:flex; align-items:center; gap:10px; padding:6px 12px; background:#1e293b; color:#e2e8f0; font-size:12px; }
#logbar .lh .spacer{ flex:1; }
#log{ flex:1; overflow-y:auto; padding:8px 12px; font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; }
.log-line{ white-space:pre-wrap; word-break:break-all; margin-bottom:2px; }
.log-line .t{ color:#64748b; }
.log-line.info .m{ color:#cbd5e1; }
.log-line.ok .m{ color:#4ade80; }
.log-line.warn .m{ color:#fbbf24; }
.log-line.err .m{ color:#f87171; }
.log-line.cmd .m{ color:#7dd3fc; }
.log-clear{ background:#334155; color:#cbd5e1; border:none; padding:4px 10px; border-radius:5px; font-size:11px; }

/* 彈窗 */
#overlay{ position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; z-index:60; align-items:center; justify-content:center; }
#overlay.show{ display:flex; }
.modal{ background:#fff; width:min(720px,94vw); max-height:86vh; border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 18px 50px rgba(0,0,0,.35); }
.modal .mh{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:#1e5fa8; color:#fff; font-weight:700; }
.modal .mh .x{ margin-left:auto; background:rgba(255,255,255,.2); border:none; color:#fff; width:28px; height:28px; border-radius:6px; font-size:16px; }
.modal .mb{ padding:16px; overflow-y:auto; }
.modal .mf{ padding:12px 16px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; }
.out{ background:#0f172a; color:#d1fae5; border-radius:8px; padding:12px; font-family:Consolas,monospace; font-size:12.5px;
  white-space:pre-wrap; word-break:break-all; max-height:42vh; overflow:auto; margin-top:10px; }
.principle h3{ color:var(--brand); margin:14px 0 6px; font-size:15px; }
.principle p{ margin-bottom:8px; }
.principle code{ background:#eef3fa; padding:1px 5px; border-radius:4px; font-family:Consolas,monospace; }
.principle ul{ margin:0 0 8px 20px; }
.note-item{ border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:8px; }
.note-item .nt{ font-size:11px; color:var(--sub); }
.note-item .nx{ position:absolute; }

/* 工具提示 */
#tooltip{ position:fixed; pointer-events:none; background:#0f172a; color:#fff; font-size:12px; padding:5px 9px;
  border-radius:6px; z-index:80; display:none; max-width:240px; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#c2ccda; border-radius:5px; }
::-webkit-scrollbar-track{ background:transparent; }