.topology-controls{display:flex;gap:22px;align-items:center;justify-content:space-between;padding:17px 20px;margin-bottom:18px;background:#eaf0e1;border:1px solid #d4dfc8;border-radius:12px}
.topology-eyebrow{font-size:11px;letter-spacing:.7px;color:#536e45}.topology-controls h3{font-size:20px;letter-spacing:-.5px;margin-top:6px}
.topology-choices{display:flex;gap:8px}.topology-choices button{padding:11px 17px;background:#f8faf3;border:1px solid #cbd8bc;border-radius:8px;text-align:left;font-size:15px;font-weight:650;white-space:nowrap}.topology-choices small{display:block;font-size:11px;font-weight:400;margin-top:4px}.topology-choices button[aria-pressed=true]{background:#315641;color:#fff;border-color:#315641}
.topology-context{display:flex;gap:15px;justify-content:space-between;align-items:center;margin-bottom:14px;padding:11px 15px;background:#eef3e5;border:1px solid #d6e1c9;border-radius:8px;font-size:13px;line-height:1.5}.topology-context button{white-space:nowrap;text-decoration:underline;font-size:12px}
.topology-dock{flex-shrink:0;background:#fcfdf5;border-top:1px solid #d9e3cd;padding:15px 18px}.topology-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:11px;margin-bottom:10px;color:#557046}.topology-legend span:nth-child(2){color:#9b701d}.topology-legend span:last-child{color:#b84c3c}
.topology-dock>strong{display:block;font-size:17px}.topology-dock>p{font-size:13px;line-height:1.6;margin:7px 0 12px;overflow-wrap:anywhere}.topology-dock-actions{display:flex;gap:12px;flex-wrap:wrap}.topology-dock>small{display:block;font-size:11px;line-height:1.6;color:#667956;margin-top:10px}
.topology-details{margin-top:18px;padding:20px;border:1px solid #dce4d3;border-radius:12px;display:grid;grid-template-columns:1fr 1fr;gap:18px;background:#fafcf5}.topology-details p{font-size:14px;line-height:1.7;margin-top:7px}.topology-details .topology-note{grid-column:1/-1;border-top:1px solid #dfe6d4;padding-top:13px;font-size:12px;color:#5b704d}
.topology-mode .inspector{padding:20px}.topology-mode .inspector-hero{padding-top:10px}.topology-mode .device-icon{display:none}.topology-mode #inspector-content{margin-top:14px}.topology-mode .inspector h3{font-size:24px}
.topology-experiment{border:1px solid #9dbc7c55;background:#45624055;padding:12px;border-radius:8px;margin-bottom:14px;font-size:13px;line-height:1.7;color:#e6efda}
.cable-list{display:grid;gap:7px}.cable-toggle{padding:10px;text-align:left;border:1px solid #ffffff25;border-radius:7px;background:#ffffff09;color:#e5eedb;line-height:1.5}.cable-toggle strong{display:block;font-size:12px;font-weight:550}.cable-toggle small{font-size:11px;color:#bacfa8}.cable-toggle.broken{border-color:#e8a087;background:#7a392744}.cable-toggle.broken small{color:#ffbe9f}.cable-toggle.standby{border-style:dashed;border-color:#bfa06a}.topology-client-status{display:grid;gap:5px;font-size:12px;margin:12px 0;color:#d3e4bd}
.topology-mode .scene-status{font-size:11px}.topology-mode .network-legend{display:none}.topology-mode .scene-panel{cursor:default}
@media(max-width:1300px){.topology-controls{align-items:flex-start;flex-direction:column;gap:14px}.topology-choices{width:100%}.topology-choices button{flex:1}.topbar{gap:10px}.nav-tab{padding:10px;font-size:12px}.main-nav{gap:2px}}
@media(max-width:760px){.main-nav{flex-wrap:wrap}.nav-tab{flex:1}.topology-context{align-items:flex-start;flex-direction:column;gap:7px}.topology-details{grid-template-columns:1fr}.topology-controls{padding:15px}.topology-controls h3{font-size:18px}.topology-choices button{padding:10px;font-size:14px}.topology-choices small{font-size:11px;white-space:normal}}