*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-base:#0d1117;--bg-surface:#161b22;--bg-elevated:#21262d;--border:#21262d;--border-muted:#30363d;--text-primary:#e6edf3;--text-body:#c9d1d9;--text-muted:#8b949e;--text-faint:#6e7681;--text-dim:#484f58;--red:#ee3124;--green:#3fb950;--yellow:#d29922;--blue:#3d85c8;--purple:#9b59b6;--blue-link:#58a6ff}body{background:var(--bg-base);color:var(--text-body);height:100vh;font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden}.toolbar{background:var(--bg-surface);border-bottom:1px solid var(--border);z-index:200;align-items:center;gap:14px;height:52px;padding:0 20px;display:flex;position:fixed;top:0;left:0;right:0}.t-logo{background:var(--red);color:#fff;letter-spacing:-.5px;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:14px;font-weight:900;text-decoration:none;display:flex}.t-title{color:var(--text-primary);font-size:14px;font-weight:600}.t-sub{color:var(--text-faint);margin-top:1px;font-size:10px}.t-spacer{flex:1}.t-live{color:var(--text-faint);align-items:center;gap:6px;font-size:11px;display:flex}.t-dot{background:var(--green);border-radius:50%;flex-shrink:0;width:7px;height:7px;animation:2.5s ease-in-out infinite blink}.t-dot.offline{background:var(--text-dim);animation:none}.t-btn{background:var(--bg-elevated);border:1px solid var(--border-muted);color:var(--text-body);cursor:pointer;border-radius:6px;align-items:center;padding:5px 13px;font-size:12px;text-decoration:none;transition:background .15s;display:inline-flex}.t-btn:hover{color:var(--text-primary);background:#2d333b}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.canvas{background:radial-gradient(ellipse at 33% 50%, #ee312408 0%, transparent 55%), radial-gradient(ellipse at 67% 50%, #0078d40a 0%, transparent 55%), var(--bg-base);position:fixed;inset:52px 0 0;overflow:hidden}.canvas:before{content:"";pointer-events:none;background-image:linear-gradient(#21262db3 1px,#0000 1px),linear-gradient(90deg,#21262db3 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0}.v-line{pointer-events:none;background:linear-gradient(#0000 0%,#21262de6 10% 90%,#0000 100%);width:1px;position:absolute;top:0;bottom:0}.region-label{letter-spacing:2px;text-transform:uppercase;color:var(--border-muted);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:9px;font-weight:700;position:absolute;top:14px}.svg-overlay{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.fl{fill:none;stroke-width:2px;stroke-dasharray:9 5;stroke-linecap:round}.fl-vpn{stroke:#3d85c8;animation:.65s linear infinite fd}.fl-sdwan{stroke:#2ecc71;animation:.65s linear infinite fd}.fl-dc{stroke:#9b59b6;animation:.65s linear infinite fd}@keyframes fd{0%{stroke-dashoffset:0}to{stroke-dashoffset:-14px}}.line-lbl{paint-order:stroke;stroke:var(--bg-base);stroke-width:5px;font-family:Segoe UI,system-ui,sans-serif;font-size:10px}.node{cursor:grab;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;display:flex;position:absolute}.node.dragging{cursor:grabbing;z-index:100}.node-card{background:var(--bg-surface);border:2px solid var(--border);border-radius:16px;justify-content:center;align-items:center;width:88px;height:88px;transition:border-color .2s,box-shadow .2s;display:flex;position:relative}.node:hover .node-card{border-color:var(--blue-link);box-shadow:0 0 0 3px #58a6ff1f,0 8px 24px #00000080}.node-card.c-fortinet{background:#160e09;border-color:#ee312488}.node-card.c-azure{background:#08121e;border-color:#0078d488}.node-card.c-dc{background:#0f0a1a;border-color:#7c3aed88}.node-card.c-client{background:#0a160d;border-color:#23863688}.node-card.large{width:108px;height:108px}.node-svg{width:52px;height:52px;display:block}.node-card.large .node-svg{width:66px;height:66px}.badge{border:2.5px solid var(--bg-base);border-radius:50%;width:18px;height:18px;position:absolute;top:-7px;right:-7px}.badge.online{background:var(--green);box-shadow:0 0 8px #3fb95080}.badge.warning{background:var(--yellow);box-shadow:0 0 8px #d2992280}.badge.offline{background:#f85149;box-shadow:0 0 8px #f8514980}.badge.unknown{background:var(--text-dim)}.badge.online:after{content:"";border:1.5px solid var(--green);opacity:0;border-radius:50%;animation:2.5s ease-out infinite ring;position:absolute;inset:-5px}@keyframes ring{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(2.2)}}.node-label{color:var(--text-primary);text-align:center;max-width:140px;margin-top:10px;font-size:12px;font-weight:600;line-height:1.35}.node-sub{color:var(--text-dim);text-align:center;margin-top:3px;font-size:10px}.tip{background:var(--bg-surface);border:1px solid var(--border-muted);white-space:nowrap;pointer-events:none;opacity:0;z-index:300;border-radius:10px;min-width:200px;padding:11px 15px;font-size:11px;transition:opacity .15s;position:absolute;bottom:calc(100% + 14px);left:50%;transform:translate(-50%);box-shadow:0 12px 32px #0009}.node:hover .tip{opacity:1}.tip-title{color:var(--text-muted);letter-spacing:.8px;text-transform:uppercase;margin-bottom:7px;font-size:11px;font-weight:700}.tip-row{justify-content:space-between;gap:20px;padding:2.5px 0;display:flex}.tip-k{color:var(--text-faint)}.tip-v{color:var(--text-primary)}.tip-v.ok{color:var(--green)}.tip-v.warn{color:var(--yellow)}.tip-v.action{color:var(--blue-link)}.tip-hr{border:none;border-top:1px solid var(--border);margin:7px 0}.modal-overlay{z-index:500;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;background:#000000a6;justify-content:center;align-items:center;transition:opacity .15s;display:flex;position:fixed;inset:0}.modal-overlay.open{opacity:1;pointer-events:auto}.modal-box{background:var(--bg-surface);border:1px solid var(--border-muted);border-radius:14px;width:660px;max-width:92vw;animation:.18s modalIn;overflow:hidden;box-shadow:0 20px 60px #000000b3}@keyframes modalIn{0%{opacity:0;transform:scale(.96)translateY(6px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:18px 20px 16px;display:flex}.modal-head-left{align-items:center;gap:12px;display:flex}.modal-head-icon{background:#1c0e09;border:1.5px solid #ee312455;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;display:flex}.modal-head-icon svg{width:28px;height:28px}.modal-title{color:var(--text-primary);font-size:15px;font-weight:600}.modal-sub-text{color:var(--text-faint);margin-top:2px;font-size:11px}.modal-close{color:var(--text-faint);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:18px;line-height:1;transition:background .15s,color .15s}.modal-close:hover{background:var(--bg-elevated);color:var(--text-primary)}.add-modal-body{padding:20px}.add-modal-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.add-modal-option{background:var(--bg-base);border:1.5px solid var(--border-muted);cursor:pointer;border-radius:10px;align-items:center;gap:12px;padding:16px;transition:border-color .15s,background .15s;display:flex}.add-modal-option:hover{border-color:var(--blue-link);background:#161b2a}.add-modal-option-icon{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.add-modal-option-icon svg{width:26px;height:26px}.add-modal-option-label{color:var(--text-primary);font-size:13px;font-weight:600}.add-modal-option-sub{color:var(--text-faint);margin-top:2px;font-size:11px}.pop-table-wrap{padding:6px 20px 22px}.pop-table{border-collapse:collapse;width:100%;font-size:12px}.pop-table th{letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);text-align:left;padding:12px 12px 8px 0;font-size:9px;font-weight:700}.pop-table td{border-top:1px solid var(--border);color:var(--text-body);vertical-align:middle;padding:11px 12px 11px 0}.pop-table tr:hover td{background:#ffffff05}.pop-table tr.is-current td{background:#ee31240a}.pop-dot{vertical-align:middle;border-radius:50%;width:9px;height:9px;display:inline-block}.pop-dot.online{background:var(--green);box-shadow:0 0 5px #3fb95080}.pop-dot.warning{background:var(--yellow)}.pop-dot.maintenance{background:var(--text-dim)}.pop-status.online{color:var(--green)}.pop-status.warning{color:var(--yellow)}.pop-status.maintenance{color:var(--text-dim)}.lat-pill{border-radius:20px;padding:2px 8px;font-size:11px;display:inline-block}.lat-pill.fast{color:var(--green);background:#3fb9501f}.lat-pill.medium{color:var(--yellow);background:#d299221f}.lat-pill.slow{color:#f85149;background:#f851491f}.lat-pill.none{background:var(--bg-elevated);color:var(--text-dim)}.connected-tag{letter-spacing:1px;text-transform:uppercase;color:var(--red);vertical-align:middle;background:#ee312433;border-radius:4px;margin-left:7px;padding:2px 6px;font-size:9px;font-weight:700;display:inline-block}.legend{background:var(--bg-surface);border:1px solid var(--border);z-index:150;border-radius:10px;padding:12px 16px;font-size:11px;position:fixed;bottom:20px;left:20px}.legend-title{color:var(--text-dim);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:9px;font-size:9px;font-weight:700}.legend-row{color:var(--text-muted);align-items:center;gap:9px;margin:5px 0;display:flex}.legend-dash{background:repeating-linear-gradient(to right, var(--c) 0px, var(--c) 8px, transparent 8px, transparent 13px);flex-shrink:0;width:32px;height:3px}.fab{background:var(--red);color:#fff;cursor:pointer;z-index:150;border:none;border-radius:50%;justify-content:center;align-items:center;width:46px;height:46px;font-size:24px;transition:background .15s,transform .15s;display:flex;position:fixed;bottom:22px;right:22px;box-shadow:0 4px 18px #ee312480}.fab:hover{background:#c0392b;transform:scale(1.07)}.login-page{background:var(--bg-base);justify-content:center;align-items:center;min-height:100vh;display:flex}.login-box{background:var(--bg-surface);border:1px solid var(--border-muted);text-align:center;border-radius:16px;width:360px;padding:40px 36px;box-shadow:0 20px 60px #00000080}.login-logo{justify-content:center;margin-bottom:18px;display:flex}.login-title{color:var(--text-primary);margin-bottom:4px;font-size:18px;font-weight:700}.login-sub{color:var(--text-faint);margin-bottom:28px;font-size:12px}.login-form{text-align:left}.login-label{color:var(--text-muted);margin-top:14px;margin-bottom:6px;font-size:12px;font-weight:600;display:block}.login-label:first-of-type{margin-top:0}.login-input{background:var(--bg-base);border:1px solid var(--border-muted);width:100%;color:var(--text-primary);border-radius:8px;outline:none;padding:9px 12px;font-size:14px;transition:border-color .15s}.login-input:focus{border-color:var(--blue-link)}.login-error{color:#f85149;background:#f851491a;border:1px solid #f851494d;border-radius:8px;margin-top:12px;padding:9px 12px;font-size:12px}.login-btn{background:var(--red);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;margin-top:20px;padding:10px;font-size:14px;font-weight:600;transition:background .15s}.login-btn:hover:not(:disabled){background:#c0392b}.login-btn:disabled{opacity:.6;cursor:not-allowed}.settings-page{background:var(--bg-base);padding:32px;position:fixed;inset:52px 0 0;overflow-y:auto}.settings-section{max-width:800px;margin:0 auto 40px}.settings-h{color:var(--text-primary);margin-bottom:16px;font-size:16px;font-weight:700}.settings-table{border-collapse:collapse;width:100%;font-size:13px}.settings-table th{letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);text-align:left;border-bottom:1px solid var(--border);padding:8px 12px 8px 0;font-size:10px;font-weight:700}.settings-table td{border-top:1px solid var(--border);color:var(--text-body);vertical-align:middle;padding:11px 12px 11px 0}.settings-table tr:hover td{background:#ffffff04}.settings-btn-row{gap:8px;display:flex}.settings-btn{background:var(--bg-elevated);border:1px solid var(--border-muted);color:var(--text-body);cursor:pointer;border-radius:6px;padding:4px 10px;font-size:11px;transition:background .15s}.settings-btn:hover{color:var(--text-primary);background:#2d333b}.settings-btn.danger{color:#f85149;border-color:#f851494d}.settings-btn.danger:hover{background:#f851491a}.settings-add-btn{background:var(--bg-elevated);border:1px solid var(--border-muted);color:var(--text-body);cursor:pointer;border-radius:8px;margin-top:12px;padding:7px 14px;font-size:12px;transition:background .15s}.settings-add-btn:hover{background:#2d333b}.edit-form{flex-direction:column;gap:10px;padding:16px 0;display:flex}.edit-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.edit-label{color:var(--text-faint);min-width:100px;font-size:11px}.edit-input{background:var(--bg-base);border:1px solid var(--border-muted);color:var(--text-primary);border-radius:6px;outline:none;min-width:180px;padding:6px 10px;font-size:13px;transition:border-color .15s}.edit-input:focus{border-color:var(--blue-link)}.edit-select{background:var(--bg-base);border:1px solid var(--border-muted);color:var(--text-primary);border-radius:6px;outline:none;min-width:160px;padding:6px 10px;font-size:13px}.edit-actions{gap:8px;margin-top:4px;display:flex}.edit-save{background:var(--red);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600}.edit-save:hover{background:#c0392b}.edit-cancel{background:var(--bg-elevated);border:1px solid var(--border-muted);color:var(--text-body);cursor:pointer;border-radius:6px;padding:6px 14px;font-size:12px}.edit-cancel:hover{background:#2d333b}.type-pill{letter-spacing:.5px;border-radius:20px;padding:2px 8px;font-size:10px;font-weight:600;display:inline-block}.type-pill.forticlient-windows{color:#3fb950;background:#23863626}.type-pill.fortisase-cloud{color:var(--red);background:#ee312426}.type-pill.fortigate-azure{color:#4da6ff;background:#0078d426}.type-pill.fortigate-dc{color:#a78bfa;background:#7c3aed26}