body { background: #0f1e46; }
        .main-content { background: #0f1e46; min-height: 100vh; }

        /* ── Header ─────────────────────────────────────────────────── */
        .topo-header {
            background: linear-gradient(135deg,#1a2e6e,#0d47a1);
            border-bottom: 2px solid rgba(255,255,255,.08);
            padding: 12px 20px;
            display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
        }
        .topo-header h5 { color:#fff; margin:0; font-weight:700; font-size:1.1rem; }
        .topo-header select, .topo-header .form-select {
            background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
            color: #fff; border-radius:6px; font-size:.85rem; padding:4px 10px;
        }
        .topo-header select option { background:#1a2e6e; color:#fff; }
        .view-btn {
            border: 1px solid rgba(255,255,255,.3); background: transparent; color: #b0c4ff;
            border-radius:6px; padding:4px 12px; font-size:.82rem; cursor:pointer; transition:.15s;
        }
        .view-btn.active, .view-btn:hover { background: #0d47a1; color:#fff; border-color:#3d7fdd; }

        /* ── View containers ─────────────────────────────────────────── */
        #viewTree  { display:block; }
        #viewMap   { display:none;  }
        #viewSplit { display:none;  }

        /* ── Tree Panel ──────────────────────────────────────────────── */
        .tree-wrap {
            padding: 16px 20px;
            overflow-y: auto;
            height: calc(100vh - 107px);
        }
        .server-block {
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 10px;
            margin-bottom: 18px;
            overflow: hidden;
        }
        .server-block-header {
            background: linear-gradient(90deg,rgba(13,71,161,.6),rgba(13,71,161,.2));
            padding: 10px 16px;
            display: flex; align-items: center; gap: 10px; cursor: pointer;
            user-select:none;
        }
        .server-block-header:hover { background: rgba(13,71,161,.5); }
        .server-block-header h6 { color:#fff; margin:0; font-weight:700; font-size:.95rem; }
        .server-block-body { padding: 12px 16px; }

        /* node cards */
        .node-card {
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.08);
            border-left: 4px solid;
            border-radius: 8px;
            margin-bottom: 8px;
            transition: background .15s;
        }
        .node-card:hover { background: rgba(255,255,255,.09); }
        .node-card-header {
            padding: 8px 12px;
            display: flex; align-items: center; gap: 8px; cursor: pointer;
        }
        .node-icon-badge {
            width:26px; height:26px; border-radius:6px; flex-shrink:0;
            display:flex; align-items:center; justify-content:center;
            font-size:.8rem; color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.35);
        }
        .node-card-header .node-name { color:#e8f0ff; font-weight:600; font-size:.88rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .node-card-header .node-ports { font-size:.75rem; color:#90a4ae; white-space:nowrap; }
        .node-card-header .toggle-icon { color:rgba(255,255,255,.4); font-size:.7rem; transition:transform .2s; }
        .node-card-header.open .toggle-icon { transform: rotate(180deg); }
        .node-card-children { padding: 0 12px 10px 28px; display:none; }
        .node-card-children.open { display:block; }

        /* inline leaf-client chips (pill layout, single row) */
        .inline-clients { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:5px 3px; padding:6px 0 8px 0; }
        .inline-arrow { color:#3d7fdd; font-size:.85rem; flex-shrink:0; user-select:none; }
        .inline-client { display:flex; flex-direction:row; align-items:center; gap:4px; background:rgba(61,127,221,.1); border:1px solid rgba(61,127,221,.22); border-radius:20px; padding:3px 10px 3px 4px; max-width:220px; min-width:0; cursor:default; transition:background .15s,border-color .15s; position:relative; white-space:nowrap; }
        .inline-client:hover { background:rgba(61,127,221,.18); border-color:rgba(61,127,221,.4); }
        .inline-client:hover .inline-client-acts { opacity:1; pointer-events:auto; }
        .inline-client-name { color:#e8f0ff; font-size:.79rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100px; }
        .inline-client-user { color:#7ea8cc; font-size:.68rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:80px; }
        .inline-client-acts { display:flex; gap:2px; opacity:0; transition:opacity .15s; pointer-events:none; flex-shrink:0; margin-left:2px; }

        /* ── Diagram Canvas View ──────────────────────────────────── */
        #viewDiagram { display:none; position:relative; height:calc(100vh - 107px); background:#080f22; overflow:hidden; }
        #dgCanvas { position:absolute; inset:0; overflow:hidden; cursor:grab; touch-action:none; user-select:none; }
        #dgCanvas.dg-panning { cursor:grabbing; }
        #dgViewport { position:absolute; top:0; left:0; will-change:transform; transform-origin:0 0; }
        #dgSvg { position:absolute; top:0; left:0; pointer-events:none; }
        #dgSvg g, #dgSvg line[id="dgPreviewLine"] { pointer-events:none; }
        #dgLinesG * { pointer-events:visibleStroke; }
        #dgTableWrap { display:none; }
        .dg-type-lbl { display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.03em; padding:1px 6px; border-radius:4px; white-space:nowrap; }
        .dg-node-foot { display:flex; align-items:center; gap:6px; padding:4px 10px 6px; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.12); border-radius:0 0 10px 10px; }
        .dg-node { position:absolute; background:linear-gradient(145deg,#1a2b4a,#152038); border:1px solid rgba(255,255,255,.14); border-radius:10px; min-width:148px; max-width:210px; box-shadow:0 4px 18px rgba(0,0,0,.55); z-index:2; user-select:none; }
        .dg-node.dg-sel { border-color:#3d7fdd; box-shadow:0 0 0 2px rgba(61,127,221,.3),0 4px 18px rgba(0,0,0,.55); }
        .dg-node-head { display:flex; align-items:center; gap:7px; padding:8px 28px 8px 10px; cursor:grab; border-radius:10px 10px 0 0; border-bottom:1px solid rgba(255,255,255,.07); position:relative; }
        .dg-node-head:active { cursor:grabbing; }
        .dg-node-icon { width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:.72rem; color:#fff; flex-shrink:0; box-shadow:0 1px 4px rgba(0,0,0,.4); }
        .dg-node-name { color:#e8f0ff; font-weight:600; font-size:.82rem; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .dg-node-btns { position:absolute; top:5px; right:28px; display:flex; gap:3px; }
        .dg-btn { width:22px; height:22px; border-radius:5px; border:1px solid rgba(255,255,255,.18); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.68rem; transition:background .15s,transform .1s; }
        .dg-btn:active { transform:scale(.9); }
        .dg-btn-edit { background:rgba(61,127,221,.55); color:#e3f2fd; } .dg-btn-edit:hover { background:#1565c0; border-color:#3d7fdd; }
        .dg-btn-del  { background:rgba(198,40,40,.55);  color:#ffcdd2; } .dg-btn-del:hover  { background:#b71c1c;  border-color:#e53935; }
        .dg-node-body { padding:5px 10px 8px; }
        .dg-user { color:#607d8b; font-size:.72rem; padding-bottom:3px; }
        .dg-port-row-dg { display:flex; align-items:center; gap:5px; padding:2px 0; }
        .dg-port-dot { width:13px; height:13px; border-radius:50%; border:2px solid rgba(255,255,255,.2); cursor:crosshair; flex-shrink:0; transition:transform .12s,box-shadow .12s; }
        .dg-port-dot:hover { transform:scale(1.5); box-shadow:0 0 6px #4caf50; border-color:#4caf50; }
        .dg-port-lbl { color:#78909c; font-size:.7rem; }
        .dg-conn-handle { position:absolute; right:-10px; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,#1565c0,#3d7fdd); border:2px solid #080f22; cursor:crosshair; display:none; z-index:10; align-items:center; justify-content:center; box-shadow:0 0 8px rgba(61,127,221,.6); }
        .dg-node:hover .dg-conn-handle { display:flex; }
        .dg-conn-handle:hover { background:linear-gradient(135deg,#3d7fdd,#64b5f6); transform:translateY(-50%) scale(1.2); }
        .dg-conn-handle i { font-size:.5rem; color:#fff; pointer-events:none; }
        #dgAddPanel { position:absolute; top:0; right:-290px; width:272px; height:100%; background:#111d38; border-left:1px solid rgba(255,255,255,.1); z-index:30; padding:16px; transition:right .25s ease; overflow-y:auto; }
        #dgAddPanel.open { right:0; }
        /* Node scale bar */
        .dg-scale-bar { display:flex; align-items:center; justify-content:flex-end; gap:4px; padding:3px 8px 5px; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.18); border-radius:0 0 10px 10px; user-select:none; }
        .dg-scale-lbl { font-size:.6rem; color:#546e7a; min-width:30px; text-align:center; font-variant-numeric:tabular-nums; }
        .dg-scale-btn { width:20px; height:20px; border-radius:4px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#90a4ae; cursor:pointer; font-size:.6rem; display:flex; align-items:center; justify-content:center; padding:0; transition:background .12s; }
        .dg-scale-btn:hover  { background:rgba(255,255,255,.18); color:#e8f0ff; }
        .dg-scale-btn:active { background:rgba(255,255,255,.28); transform:scale(.9); }
        /* On mobile: always show conn-handle + scale bar; action buttons always visible */
        @media (pointer:coarse) {
            .dg-node .dg-conn-handle { display:flex; }
            .dg-node-head { cursor:default; touch-action:none; }
        }

        /* child items */
        .child-item {
            border-left: 2px solid rgba(255,255,255,.12);
            margin-bottom: 6px;
            padding-left: 10px;
        }
        .child-item .child-label {
            color:#b0c4ff; font-size:.82rem; font-weight:600;
            display:flex; align-items:center; gap:6px; padding:3px 0;
        }
        .child-item .child-detail {
            color:#78909c; font-size:.75rem; padding-left:18px;
        }

        /* port row */
        .port-row {
            display:flex; align-items:center; gap:6px; padding:3px 0;
            border-bottom:1px solid rgba(255,255,255,.04);
            font-size:.78rem;
        }
        .port-row:last-child { border-bottom:none; }
        .port-dot {
            width:10px; height:10px; border-radius:50%; flex-shrink:0;
        }
        .port-num { color:#607d8b; font-weight:700; min-width:20px; }
        .port-name { color:#cfd8dc; }
        .port-empty { color:rgba(255,255,255,.2); font-style:italic; }
        .port-fiber { font-size:.7rem; padding:1px 5px; border-radius:3px; color:#fff; font-weight:600; }

        /* animated map line */
        @keyframes dash-flow {
            to { stroke-dashoffset: -29; }
        }
        .leaflet-overlay-pane svg path.anim-line {
            animation: dash-flow 0.9s linear infinite;
            stroke-dasharray: 5 24;
        }

        /* type color scheme */
        .type-tower   { border-left-color:#e53935; }
        .type-odc     { border-left-color:#8e24aa; }
        .type-odp     { border-left-color:#1565c0; }
        .type-splitter{ border-left-color:#00838f; }
        .type-htb     { border-left-color:#ef6c00; }
        .type-client  { border-left-color:#2e7d32; }
        .type-server  { border-left-color:#1b5e20; }
        .type-modem   { border-left-color:#4527a0; }
        .type-mikrotik{ border-left-color:#006064; }
        .type-olt     { border-left-color:#bf360c; }
        .type-switch  { border-left-color:#37474f; }
        .type-lainnya { border-left-color:#546e7a; }
        .type-unknown { border-left-color:#546e7a; }

        .badge-tower    { background:#e53935; color:#fff; }
        .badge-odc      { background:#8e24aa; color:#fff; }
        .badge-odp      { background:#1565c0; color:#fff; }
        .badge-splitter { background:#00838f; color:#fff; }
        .badge-htb      { background:#ef6c00; color:#fff; }
        .badge-client   { background:#2e7d32; color:#fff; }
        .badge-server   { background:#1b5e20; color:#fff; }
        .badge-modem    { background:#4527a0; color:#fff; }
        .badge-mikrotik { background:#006064; color:#fff; }
        .badge-olt      { background:#bf360c; color:#fff; }
        .badge-switch   { background:#37474f; color:#fff; }
        .badge-lainnya  { background:#546e7a; color:#fff; }
        .badge-unknown  { background:#546e7a; color:#fff; }

        /* port editor */
        .port-editor-table { border:1px solid rgba(255,255,255,.1); border-radius:6px; overflow:hidden; max-height:200px; overflow-y:auto; }
        .port-editor-head  { display:grid; grid-template-columns:28px 1fr 72px 96px; gap:4px; padding:4px 8px; background:rgba(255,255,255,.07); font-size:.66rem; color:#607d8b; font-weight:700; position:sticky; top:0; z-index:1; text-transform:uppercase; letter-spacing:.04em; }
        .port-editor-row   { display:grid; grid-template-columns:28px 1fr 72px 96px; gap:4px; padding:2px 8px; border-top:1px solid rgba(255,255,255,.04); align-items:center; min-height:30px; }
        .port-editor-row:hover { background:rgba(255,255,255,.03); }
        .port-num-badge    { background:rgba(255,255,255,.08); border-radius:3px; font-size:.68rem; font-weight:700; color:#607d8b; text-align:center; padding:2px 0; height:22px; line-height:18px; }
        .port-name-input   { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#e8f0ff; border-radius:3px; font-size:.73rem; padding:2px 5px; width:100%; height:24px; }
        .port-name-input:focus { border-color:#3d7fdd; outline:none; background:rgba(255,255,255,.1); }
        .port-dir-select, .port-type-select { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#e8f0ff; border-radius:3px; font-size:.68rem; padding:1px 2px; width:100%; height:24px; }
        .port-dir-select option, .port-type-select option { background:#1a2e6e; }
        /* port direction badges in tree */
        .pdir-in   { color:#42a5f5; font-size:.65rem; font-weight:700; }
        .pdir-out  { color:#66bb6a; font-size:.65rem; font-weight:700; }
        .pdir-io   { color:#ffa726; font-size:.65rem; font-weight:700; }
        .ptype-tag { font-size:.62rem; padding:1px 4px; border-radius:3px; background:rgba(255,255,255,.08); color:#90a4ae; margin-left:3px; }

        /* fiber colors */
        .fiber-biru   { background:#1565c0; }
        .fiber-merah  { background:#e53935; }
        .fiber-hijau  { background:#2e7d32; }
        .fiber-kuning { background:#f9a825; color:#000!important; }
        .fiber-putih  { background:#cfd8dc; color:#000!important; border:1px solid #aaa; }
        .fiber-hitam  { background:#212121; }
        .fiber-orange { background:#ef6c00; }
        .fiber-coklat { background:#4e342e; }
        .fiber-abu    { background:#607d8b; }
        .fiber-ungu   { background:#6a1b9a; }

        /* stats chip row */
        .stat-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
        .stat-chip {
            background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
            border-radius:6px; padding:6px 14px; font-size:.8rem; color:#b0c4ff;
            display:flex; align-items:center; gap:6px;
        }
        .stat-chip .num { font-size:.95rem; font-weight:700; color:#fff; }

        /* disconnected nodes */
        .disconnected-section { margin-top:12px; }
        .disconnected-title { color:#607d8b; font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; }

        /* ── Map Panel ───────────────────────────────────────────────── */
        #viewMap { position:relative; }
        #mapEl {
            height: calc(100vh - 107px);
            border-radius: 0;
            transform-origin: center center;
            transition: transform 0.4s ease;
        }

        /* ── Split view ──────────────────────────────────────────────── */
        #viewSplit { display:none; height:calc(100vh - 107px); }
        .split-left  { width:45%; overflow-y:auto; height:100%; border-right:2px solid rgba(255,255,255,.08); padding:12px; }
        .split-right { flex:1; height:100%; position:relative; }
        #mapElSplit  { height:100%; transform-origin: center center; transition: transform 0.4s ease; }
        /* Floating toolbar overlaid on map views */
        .map-overlay-toolbar {
            position:absolute; top:8px; left:8px; z-index:1000;
            display:flex; gap:5px; pointer-events:auto;
        }
        .map-overlay-btn {
            background:rgba(255,255,255,.88); backdrop-filter:blur(4px);
            border:1px solid rgba(0,0,0,.15); border-radius:6px;
            padding:4px 8px; font-size:.72rem; color:#1a2e6e;
            cursor:pointer; display:flex; align-items:center; gap:4px;
            box-shadow:0 1px 4px rgba(0,0,0,.2); white-space:nowrap;
        }
        .map-overlay-btn:hover { background:#fff; }

        /* search input */
        .topo-search {
            background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
            color:#fff; border-radius:6px; font-size:.82rem; padding:4px 10px; width:110px;
        }
        .topo-search::placeholder { color:rgba(255,255,255,.4); }
        .topo-search:focus { outline:none; border-color:#3d7fdd; background:rgba(255,255,255,.15); }

        /* highlight search match */
        .search-match { background:rgba(255,213,79,.15)!important; border-left-color:#ffd54f!important; }
        .search-hidden { display:none!important; }

        /* no data */
        .no-data { color:#546e7a; text-align:center; padding:40px; font-size:.9rem; }

        /* ── node action buttons ─────────────────────────────────────────── */
        .node-actions { display:none; gap:3px; margin-left:4px; flex-shrink:0; }
        .node-card:hover .node-actions { display:flex; }
        .node-act-btn { width:23px; height:23px; border-radius:4px; border:1px solid rgba(255,255,255,.18);
            background:rgba(255,255,255,.06); color:rgba(255,255,255,.5); cursor:pointer; font-size:.6rem;
            display:flex; align-items:center; justify-content:center; transition:.15s; padding:0; }
        .node-act-btn:hover { background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.35); }
        .node-act-btn.del:hover { background:rgba(239,83,80,.25); border-color:#ef5350; color:#ef5350; }
        .node-act-btn.conn:hover { background:rgba(0,131,143,.25); border-color:#00838f; color:#4dd0e1; }

        /* ── dark modal ──────────────────────────────────────────────────── */
        .modal-dark .modal-content { background:#0f1e46; border:1px solid rgba(255,255,255,.12); color:#e8f0ff; }
        .modal-dark .modal-header { border-bottom:1px solid rgba(255,255,255,.1); }
        .modal-dark .modal-footer { border-top:1px solid rgba(255,255,255,.1); }
        .modal-dark .modal-title { color:#fff; font-weight:700; }
        .modal-dark .form-label { color:#b0c4ff; font-size:.82rem; margin-bottom:3px; }
        .modal-dark .form-control, .modal-dark .form-select {
            background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); color:#e8f0ff; font-size:.85rem; }
        .modal-dark .form-control:focus, .modal-dark .form-select:focus {
            background:rgba(255,255,255,.1); border-color:#3d7fdd; box-shadow:0 0 0 2px rgba(61,127,221,.25); color:#fff; }
        .modal-dark .form-control::placeholder { color:rgba(255,255,255,.3); }
        .modal-dark select option { background:#1a2e6e; }
        .modal-dark .btn-close { filter:invert(1) opacity(.6); }
        .modal-dark .input-hint { color:#607d8b; font-size:.73rem; margin-top:2px; }

        /* Layer control - z-index above map buttons (z-index:20) */
        .leaflet-control-container { z-index: 1500 !important; }
        .leaflet-control-layers { z-index: 1200 !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,.2) !important; }
        .leaflet-control-layers-toggle { width: 36px !important; height: 36px !important; }
        /* Split view: split-right must be flex column so #mapElSplit fills height */
        .split-right { display: flex; flex-direction: column; }
        #mapElSplit  { flex: 1; min-height: 0; }
        @media(max-width:768px) {
            .topo-header { gap:6px; padding:8px 12px; }
            .topo-header h5 { font-size:.88rem; }
            .topo-search { width:110px; }
            /* Override inline flex-direction:row so split stacks vertically on mobile */
            #viewSplit { flex-direction:column !important; }
            .split-left { width:100%; max-height:38%; border-right:none; border-bottom:2px solid rgba(255,255,255,.08); }
            .split-right { flex:1; min-height:280px; }
            #mapElSplit { min-height:280px; }
            .leaflet-control-container { z-index: 1500 !important; }
            .leaflet-control-layers-list { min-width: 130px; }
            .leaflet-control-layers label { display: flex; align-items: center; gap: 6px; padding: 6px 2px !important; font-size: 13px !important; cursor: pointer; }
            .leaflet-control-layers input[type="radio"] { width: 16px; height: 16px; cursor: pointer; }
        }
        /* Small phone: hide view button text, keep icons – prevent header wrapping */
        @media(max-width:540px) {
            .topo-header h5 { font-size:0; width:0; overflow:hidden; margin:0; padding:0; }
            .view-btn { font-size:0 !important; padding:5px 8px !important; min-width:32px; }
            .view-btn i { font-size:.8rem !important; }
            .topo-search { width:80px; }
            .topo-header select { font-size:.78rem; padding:3px 6px; }
        }
        /* Map Tools FAB dropdown */
        .map-tools-dd { position:fixed; z-index:9999; background:#fff; border-radius:8px; box-shadow:0 3px 14px rgba(0,0,0,.28); min-width:195px; overflow:hidden; display:none; }
        .map-tools-dd .dd-hdr { padding:7px 14px; font-size:.72rem; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:.05em; background:#f8f9fa; border-bottom:1px solid #eee; display:flex; align-items:center; gap:6px; }
        .map-tools-dd a { display:flex; align-items:center; gap:10px; padding:9px 16px; font-size:.84rem; color:#333; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.05); cursor:pointer; transition:background .12s; }
        .map-tools-dd a:last-child { border-bottom:none; }
        .map-tools-dd a:hover { background:#f0f4ff; color:#1565c0; }