:root{font-family:Avenir Next,Segoe UI,sans-serif;color:#111827;background:radial-gradient(circle at top left,#dbeafe,#f8fafc 45%,#e5e7eb)}*{box-sizing:border-box}body{margin:0}.app-shell{min-height:100vh}.top-nav{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid #d1d5db;background:#ffffffe6;position:sticky;top:0;z-index:10}.nav-link{text-decoration:none;color:#0f172a;border:1px solid #cbd5e1;border-radius:999px;padding:6px 12px;background:#f8fafc;font-weight:600}.nav-link.active{background:#0f766e;color:#fff;border-color:#0f766e}.page{min-height:100vh;padding:16px;display:grid;gap:12px}.panel{background:#ffffffeb;border:1px solid #d1d5db;border-radius:12px;padding:12px}.header{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.header h1{margin:0;font-size:1.5rem}.layout{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}.graph-panel{overflow:auto}.graph{width:100%;min-height:680px}.node-label,.edge-label{font-size:13px;fill:#111827;font-weight:700}.edge-label{paint-order:stroke;stroke:#ffffffe6;stroke-width:4px;pointer-events:none}.node-label-box{fill:#fff;stroke:#d1d5db;stroke-width:1}.zone-box{fill:#94a3b81a;stroke:#64748b;stroke-width:1.5;stroke-dasharray:6 4}.zone-label{font-size:14px;font-weight:700;fill:#1e293b}.controls h2{margin:0 0 10px;font-size:1rem}.event-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:620px;overflow:auto}.event-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #e5e7eb;padding-bottom:6px}button{border:0;background:#0f766e;color:#fff;border-radius:8px;padding:8px 12px;cursor:pointer;font-size:.95rem}button.secondary{background:#1f2937}.event-btn.danger{background:#dc2626}.error{border-color:#ef4444;color:#991b1b}.footer{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.troubleshooting h2{margin:0 0 8px}.troubleshooting p{margin:8px 0}.troubleshooting-list{margin:0;padding-left:20px;display:grid;gap:4px}.zone-events h2{margin-top:0}.zone-event-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.zone-event-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px;border:1px solid #e5e7eb;border-radius:10px}.power-layout{grid-template-columns:2fr 1fr}.power-feed{stroke-width:4;stroke-linecap:round;opacity:.85}.power-feed.usv.up{stroke:#16a34a;stroke-dasharray:12 6;animation:feed-flow 2s linear infinite}.power-feed.mains.up{stroke:#d4ae19;stroke-dasharray:12 6;animation:feed-flow 2s linear infinite}.power-feed.poe.up{stroke:#0f766e;stroke-dasharray:8 5;animation:feed-flow 2s linear infinite}.power-feed.down{stroke:#9ca3af;stroke-dasharray:3 6;animation:none}.node-interactive{cursor:pointer}.button-row{display:flex;gap:8px}.legend{display:flex;gap:10px;font-size:.9rem}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}.dot.up{background:#16a34a}.dot.down{background:#ef4444}.dot.passive{background:#facc15}.dot.isolated{background:#9ca3af}@keyframes feed-flow{0%{stroke-dashoffset:0}to{stroke-dashoffset:-36}}@media (max-width: 1200px){.layout,.power-layout,.zone-event-grid{grid-template-columns:1fr}.graph{min-height:520px}.event-list{max-height:300px}}