:root {
  --bg: #03080c; --panel: #060d12; --border: #0d3344;
  --accent: #00ff9f; --accent2: #00c8ff; --warn: #ffb700;
  --danger: #ff2244; --ice: #9933ff; --text: #7aebc8; --text-dim: #3a7a62;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Share Tech Mono', monospace; background: var(--bg); color: var(--text); height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px); pointer-events: none; z-index: 1000; }

/* TOP BAR */
#top-bar { display: flex; align-items: center; gap: 12px; padding: 7px 14px; background: var(--panel); border-bottom: 2px solid #0a2030; flex-shrink: 0; flex-wrap: wrap; }
#top-bar h1 { font-family: 'Orbitron', monospace; font-size: 12px; font-weight: 900; color: var(--accent); letter-spacing: 5px; text-shadow: 0 0 20px var(--accent); white-space: nowrap; }
.sep { color: #0a2a1a; font-size: 20px; }
.os-section { display: flex; align-items: center; gap: 7px; }
.os-label { font-family: 'Orbitron', monospace; font-size: 9px; letter-spacing: 2px; color: var(--text-dim); }
.os-value { font-family: 'Orbitron', monospace; font-size: 24px; font-weight: 700; color: var(--accent); text-shadow: 0 0 20px var(--accent); min-width: 40px; text-align: center; transition: color 0.4s; }
.os-bar-container { width: 130px; height: 9px; background: #050f0a; border: 1px solid #0a2010; }
.os-bar { height: 100%; background: var(--accent); transition: width 0.3s, background 0.3s; box-shadow: 0 0 8px var(--accent); }
.icon-btn { background: none; border: 1px solid var(--border); color: var(--text-dim); font-family: 'Share Tech Mono', monospace; font-size: 12px; width: 26px; height: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.round-section { display: flex; align-items: center; gap: 5px; }
.round-label { font-size: 9px; letter-spacing: 2px; color: var(--text-dim); }
.round-value { font-family: 'Orbitron', monospace; font-size: 18px; color: var(--accent2); text-shadow: 0 0 10px var(--accent2); min-width: 26px; text-align: center; }
.alarm-section { display: flex; align-items: center; gap: 7px; }
.alarm-label { font-size: 9px; letter-spacing: 2px; color: var(--text-dim); }
.alarm-btn { font-family: 'Orbitron', monospace; font-size: 9px; letter-spacing: 2px; padding: 4px 10px; border: 1px solid; cursor: pointer; background: none; transition: all 0.3s; min-width: 100px; }
.alarm-none    { border-color: var(--text-dim); color: var(--text-dim); }
.alarm-passive { border-color: var(--warn); color: var(--warn); box-shadow: 0 0 12px rgba(255,183,0,0.4); }
.alarm-active  { border-color: var(--danger); color: var(--danger); box-shadow: 0 0 20px rgba(255,34,68,0.6); animation: blink 0.9s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.5} }
.os-warn-text    { color: var(--danger) !important; text-shadow: 0 0 20px var(--danger) !important; animation: blink 1s infinite; }
.os-caution-text { color: var(--warn)   !important; text-shadow: 0 0 10px var(--warn)   !important; }
.io-section { display: flex; gap: 5px; margin-left: auto; }
.io-btn { font-family: 'Share Tech Mono', monospace; font-size: 9px; padding: 4px 9px; border: 1px solid var(--border); background: none; color: var(--text-dim); cursor: pointer; letter-spacing: 1px; transition: all 0.2s; }
.io-btn.save { border-color: #0a4a30; color: #2a8a58; }
.io-btn.save:hover { border-color: var(--accent); color: var(--accent); }
.io-btn.load { border-color: #0a3040; color: #2a6a8a; }
.io-btn.load:hover { border-color: var(--accent2); color: var(--accent2); }
.zoom-section { display: flex; align-items: center; gap: 5px; }
.zoom-label { font-size: 9px; letter-spacing: 2px; color: var(--text-dim); }
.zoom-val { font-family: 'Orbitron', monospace; font-size: 12px; color: var(--accent2); min-width: 36px; text-align: center; }

/* MAIN */
#main { display: flex; flex: 1; overflow: hidden; }

/* MAP CONTAINER */
#map-container { flex: 1; position: relative; overflow: hidden; border-right: 1px solid #0a2030; display: flex; flex-direction: column; }

/* TABS */
#tab-bar { display: flex; align-items: stretch; background: #040b10; border-bottom: 1px solid #0a2030; flex-shrink: 0; overflow-x: auto; overflow-y: hidden; min-height: 32px; }
#tab-bar::-webkit-scrollbar { height: 3px; }
#tab-bar::-webkit-scrollbar-thumb { background: #0d2a20; }
.tab { display: flex; align-items: center; border-right: 1px solid #0a2030; flex-shrink: 0; }
.tab-name { font-family: 'Share Tech Mono', monospace; font-size: 10px; padding: 0 10px; cursor: pointer; color: var(--text-dim); white-space: nowrap; height: 100%; display: flex; align-items: center; transition: all 0.15s; letter-spacing: 1px; border-bottom: 2px solid transparent; }
.tab-name:hover { color: var(--text); }
.tab.active .tab-name { color: var(--accent2); border-bottom-color: var(--accent2); }
.tab-rename { background: none; border: none; color: #1a3a50; cursor: pointer; font-size: 9px; padding: 0 3px 0 0; }
.tab-rename:hover { color: var(--accent2); }
.tab-del { background: none; border: none; color: #1a3a50; cursor: pointer; font-size: 10px; padding: 0 7px 0 0; }
.tab-del:hover { color: var(--danger); }
#add-tab-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0 12px; font-size: 16px; flex-shrink: 0; }
#add-tab-btn:hover { color: var(--accent); }

/* MAP HEADER */
#map-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid #0a2030; flex-shrink: 0; gap: 6px; flex-wrap: wrap; }
.map-title { font-family: 'Orbitron', monospace; font-size: 9px; letter-spacing: 3px; color: var(--accent2); }
.map-tools { display: flex; gap: 5px; flex-wrap: wrap; }
.tool-btn { font-family: 'Share Tech Mono', monospace; font-size: 9px; padding: 3px 9px; border: 1px solid var(--border); background: none; color: var(--text-dim); cursor: pointer; transition: all 0.2s; letter-spacing: 1px; }
.tool-btn:hover, .tool-btn.active { border-color: var(--accent2); color: var(--accent2); box-shadow: 0 0 8px rgba(0,200,255,0.2); }
.tool-btn.sel-active { border-color: var(--warn); color: var(--warn); }

/* NETWORK MAP */
#network-map { position: relative; flex: 1; overflow: hidden; touch-action: none; }
#svg-layer { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.map-hint { position: absolute; bottom: 10px; left: 12px; font-size: 9px; color: #1a4a36; pointer-events: none; }
#sel-info  { position: absolute; bottom: 10px; right: 12px; font-size: 9px; color: var(--warn); pointer-events: none; display: none; }

/* NODES */
.node { position: absolute; width: 76px; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: grab; user-select: none; -webkit-user-select: none; z-index: 10; touch-action: none; }
.node:active { cursor: grabbing; }
.node-icon { width: 50px; height: 50px; border: 2px solid; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: all 0.3s; }
.node.s-unknown .node-icon { border-color: #1a3540; background: #060d12; color: #1a3540; }
.node.s-known   .node-icon { border-color: #0055aa; background: #02101e; color: var(--accent2); box-shadow: 0 0 12px rgba(0,120,255,0.35); }
.node.s-comp    .node-icon { border-color: var(--accent); background: #02160a; color: var(--accent); box-shadow: 0 0 16px rgba(0,255,159,0.45); }
.node.s-alarm   .node-icon { border-color: var(--danger); background: #180006; color: var(--danger); box-shadow: 0 0 18px rgba(255,34,68,0.6); animation: blink 0.8s infinite; }
.node.selected  .node-icon { outline: 2px dashed var(--warn) !important; outline-offset: 3px; }
.node-label { font-size: 9px; color: var(--text-dim); text-align: center; max-width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-marks { display: flex; gap: 3px; }
.mark-dot { width: 9px; height: 9px; border: 1px solid #0050aa; background: none; cursor: pointer; transition: all 0.15s; min-width: 18px; min-height: 18px; }
.mark-dot.on { background: var(--accent2); box-shadow: 0 0 5px var(--accent2); border-color: var(--accent2); }

/* NODE POPUP */
#node-popup { position: absolute; background: #030c12; border: 1px solid var(--accent2); padding: 10px; min-width: 170px; z-index: 200; box-shadow: 0 0 25px rgba(0,200,255,0.3); display: none; }
#node-popup h3 { font-family: 'Orbitron', monospace; font-size: 9px; letter-spacing: 2px; color: var(--accent2); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.popup-row { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 3px; color: var(--text-dim); }
.popup-row span:last-child { color: var(--text); }
.popup-close { position: absolute; top: 5px; right: 7px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; }
.popup-close:hover { color: var(--danger); }
.status-btns { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; }
.st-btn { font-size: 9px; padding: 3px 6px; border: 1px solid var(--border); background: none; color: var(--text-dim); cursor: pointer; font-family: 'Share Tech Mono', monospace; letter-spacing: 1px; }
.st-btn:hover { border-color: var(--accent); color: var(--accent); }
.st-btn.on { border-color: var(--accent); color: var(--accent); background: rgba(0,255,159,0.08); }
.popup-action-btns { display: flex; gap: 4px; margin-top: 6px; }
.copy-btn { font-size: 9px; padding: 3px 8px; border: 1px solid var(--accent2); background: none; color: var(--accent2); cursor: pointer; font-family: 'Share Tech Mono', monospace; }
.del-btn  { font-size: 9px; padding: 3px 8px; border: 1px solid var(--danger); background: none; color: var(--danger); cursor: pointer; font-family: 'Share Tech Mono', monospace; }
.popup-rename { display: flex; gap: 4px; margin-top: 7px; border-top: 1px solid var(--border); padding-top: 7px; }
.popup-rename input { flex: 1; background: #020910; border: 1px solid var(--border); color: var(--text); font-family: 'Share Tech Mono', monospace; font-size: 11px; padding: 3px 6px; outline: none; min-width: 0; }
.popup-rename input:focus { border-color: var(--accent); }
.popup-rename input.err { border-color: var(--danger); }
.rename-toggle-btn { font-size: 9px; padding: 3px 8px; border: 1px solid var(--text-dim); background: none; color: var(--text-dim); cursor: pointer; font-family: 'Share Tech Mono', monospace; }
.rename-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.rename-ok { font-size: 9px; padding: 3px 8px; border: 1px solid var(--accent); background: none; color: var(--accent); cursor: pointer; font-family: 'Share Tech Mono', monospace; white-space: nowrap; }
.rename-ok:hover { background: rgba(0,255,159,0.1); }

/* RIGHT PANEL */
#right-panel { width: 295px; display: flex; flex-direction: column; overflow: hidden; }
.panel-block { display: flex; flex-direction: column; border-bottom: 1px solid #0a2030; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; background: var(--panel); border-bottom: 1px solid #0a2030; flex-shrink: 0; }
.panel-title { font-family: 'Orbitron', monospace; font-size: 9px; letter-spacing: 3px; }
.t-ice  { color: var(--ice); }
.t-init { color: var(--accent2); }
.add-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 20px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.add-btn:hover { color: var(--accent); }

/* ICE */
#ice-list { overflow-y: auto; padding: 5px; max-height: 220px; flex: 1; }
.ice-card { background: #060d12; border: 1px solid #0d2030; margin-bottom: 5px; padding: 7px; position: relative; }
.ice-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.ice-badge { font-size: 8px; padding: 2px 5px; border: 1px solid var(--ice); color: var(--ice); letter-spacing: 1px; }
.ice-name { font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ice-r { font-family: 'Orbitron', monospace; font-size: 13px; color: var(--ice); }
.ice-status { font-family: 'Share Tech Mono', monospace; font-size: 10px; background: #030810; border: 1px solid var(--border); color: var(--text-dim); padding: 2px 4px; cursor: pointer; width: 100%; margin-bottom: 5px; outline: none; }
.ice-dice { font-size: 10px; color: var(--text-dim); margin-bottom: 5px; }
.ice-dice span { color: var(--text); }
.dmg-row { display: flex; align-items: center; gap: 5px; }
.dmg-lbl { font-size: 10px; color: var(--text-dim); min-width: 28px; }
.dmg-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.d-dot { width: 10px; height: 10px; border: 1px solid #1a3040; background: none; cursor: pointer; transition: all 0.12s; min-width: 18px; min-height: 18px; }
.d-dot.on { background: var(--danger); border-color: var(--danger); box-shadow: 0 0 4px var(--danger); }
.ice-del { position: absolute; top: 5px; right: 6px; background: none; border: none; color: #1a3040; cursor: pointer; font-size: 11px; }
.ice-del:hover { color: var(--danger); }

/* INITIATIVE */
#init-list { overflow-y: auto; padding: 5px; max-height: 185px; flex: 1; }
.init-item { display: flex; align-items: center; gap: 7px; padding: 5px 8px; margin-bottom: 4px; border: 1px solid transparent; transition: all 0.2s; }
.init-item.cur { border-color: var(--accent); background: rgba(0,255,159,0.04); box-shadow: 0 0 10px rgba(0,255,159,0.15); }
.init-item.mx { border-left: 2px solid var(--accent2); }
.init-item.ph { border-left: 2px solid var(--warn); }
.init-val  { font-family: 'Orbitron', monospace; font-size: 16px; min-width: 34px; text-align: right; }
.init-name { flex: 1; font-size: 11px; }
.init-tag  { font-size: 9px; color: var(--text-dim); }
.init-del  { background: none; border: none; color: #1a3040; cursor: pointer; font-size: 10px; }
.init-del:hover { color: var(--danger); }
.ctrl-btn { margin: 4px 5px 0; padding: 5px; background: none; border: 1px solid; font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 2px; cursor: pointer; transition: all 0.2s; }
.next-act { border-color: var(--accent2); color: var(--accent2); }
.next-act:hover { background: rgba(0,200,255,0.08); }
.next-rnd { border-color: var(--warn); color: var(--warn); }
.next-rnd:hover { background: rgba(255,183,0,0.08); }
.empty-hint { padding: 10px; font-size: 10px; color: var(--text-dim); text-align: center; }

/* QUICK REF */
#quickref { border-top: 1px solid #0a2030; flex-shrink: 0; max-height: 40vh; display: flex; flex-direction: column; overflow: hidden; }
#qr-toggle { display: flex; align-items: center; justify-content: space-between; padding: 7px 16px; background: var(--panel); border: none; width: 100%; text-align: left; cursor: pointer; font-family: 'Orbitron', monospace; font-size: 9px; letter-spacing: 3px; color: var(--warn); flex-shrink: 0; }
#qr-body { display: none; padding: 8px; overflow: auto; }
#qr-body.open { display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start; }
.ref-card { background: #060d12; border: 1px solid var(--border); padding: 8px 10px; min-width: 155px; flex-shrink: 0; }
.ref-card h4 { font-family: 'Orbitron', monospace; font-size: 8px; letter-spacing: 2px; color: var(--warn); margin-bottom: 6px; }
.ref-row { font-size: 10px; color: var(--text-dim); margin-bottom: 3px; line-height: 1.4; }
.ref-row b { color: var(--text); }

/* MODALS */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 500; align-items: center; justify-content: center; }
.overlay.open { display: flex; }
.modal { background: #030c12; border: 1px solid var(--accent2); padding: 20px; min-width: 270px; box-shadow: 0 0 40px rgba(0,200,255,0.25); max-height: 80vh; display: flex; flex-direction: column; }
.modal h2 { font-family: 'Orbitron', monospace; font-size: 11px; letter-spacing: 3px; color: var(--accent2); margin-bottom: 15px; flex-shrink: 0; }
.mf { margin-bottom: 11px; }
.mf label { display: block; font-size: 9px; letter-spacing: 2px; color: var(--text-dim); margin-bottom: 4px; }
.mf input, .mf select { width: 100%; background: #020910; border: 1px solid var(--border); color: var(--text); font-family: 'Share Tech Mono', monospace; font-size: 13px; padding: 5px 7px; outline: none; transition: border 0.2s; }
.mf input:focus, .mf select:focus { border-color: var(--accent2); }
.mf select option { background: #020910; }
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-shrink: 0; }
.btn-x  { padding: 6px 14px; background: none; border: 1px solid var(--border); color: var(--text-dim); font-family: 'Share Tech Mono', monospace; font-size: 11px; cursor: pointer; }
.btn-x:hover { border-color: var(--danger); color: var(--danger); }
.btn-ok { padding: 6px 14px; background: none; border: 1px solid var(--accent); color: var(--accent); font-family: 'Share Tech Mono', monospace; font-size: 11px; cursor: pointer; }
.btn-ok:hover { background: rgba(0,255,159,0.08); }

/* CONN MANAGER */
#conn-list { overflow-y: auto; flex: 1; min-height: 60px; max-height: 340px; padding: 5px 0; }
.conn-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #060f14; font-size: 10px; }
.conn-row:hover { background: #060d12; }
.conn-lbl { flex: 1; color: var(--text-dim); }
.conn-lbl span { color: var(--text); }
.conn-del { background: none; border: 1px solid #1a2030; color: #1a3040; cursor: pointer; font-size: 10px; padding: 2px 7px; font-family: 'Share Tech Mono', monospace; }
.conn-del:hover { border-color: var(--danger); color: var(--danger); }

/* COPY-TO-TAB MODAL */
.tab-pick-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.tab-pick-btn { background: #030810; border: 1px solid var(--border); color: var(--text); font-family: 'Share Tech Mono', monospace; font-size: 11px; padding: 7px 12px; cursor: pointer; text-align: left; transition: all 0.15s; }
.tab-pick-btn:hover { border-color: var(--accent2); color: var(--accent2); }

/* RANDOM NETWORK MODAL */
.diff-btn { background: #030810; border: 1px solid var(--border); color: var(--text-dim); font-family: 'Orbitron', monospace; font-size: 9px; letter-spacing: 1px; padding: 7px 12px; cursor: pointer; text-align: center; transition: all 0.2s; flex: 1; line-height: 1.6; }
.diff-btn span { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0; color: var(--text-dim); }
.diff-btn:hover { border-color: #2acfef; color: #2acfef; }
.diff-btn.active { border-color: #2acfef; color: #2acfef; background: rgba(42,207,239,0.07); }
.diff-btn.active span { color: #2acfef; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #0d2a20; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* TOUCH / MOBILE */
@media (pointer: coarse) {
  .icon-btn { min-width: 36px; min-height: 36px; font-size: 14px; }
  .tool-btn { padding: 6px 12px; font-size: 10px; }
  .st-btn { padding: 6px 10px; font-size: 10px; }
  .node-icon { width: 56px; height: 56px; font-size: 22px; }
  .tab-name { padding: 0 14px; min-height: 36px; font-size: 11px; }
  .tab-del, .tab-rename { font-size: 12px; padding: 0 8px; }
  #add-tab-btn { padding: 0 14px; font-size: 18px; }
  .alarm-btn { padding: 6px 12px; font-size: 10px; }
  .io-btn { padding: 6px 12px; font-size: 10px; }
  .ice-del, .init-del { min-width: 30px; min-height: 30px; font-size: 14px; }
  .ctrl-btn { padding: 8px; font-size: 11px; }
  .add-btn { min-width: 32px; min-height: 32px; font-size: 22px; }
  .popup-close { min-width: 30px; min-height: 30px; font-size: 16px; }
  .copy-btn, .del-btn, .rename-toggle-btn, .rename-ok { padding: 6px 12px; font-size: 10px; }
  .conn-del { padding: 5px 10px; font-size: 12px; }
}

@media (max-width: 700px) {
  #main { flex-direction: column; }
  #right-panel { width: 100%; flex-direction: row; flex-wrap: wrap; max-height: 45vh; overflow-y: auto; border-top: 1px solid #0a2030; }
  .panel-block { flex: 1; min-width: 250px; }
  #map-container { border-right: none; min-height: 40vh; }
}