* { box-sizing: border-box; }
:root {
  --bg:#0f1115; --fg:#f2f5f9; --accent:#3da9fc; --accent-alt:#ef4565; --panel:#1d232b; --panel-alt:#242d38; --good:#2cb67d; --warn:#ffb800; --error:#ff5470; --focus:#ffee99;
  --mono: 'Fira Mono', 'Consolas', monospace;
  --trans-fast: 150ms;
}
body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif; background: var(--bg); color: var(--fg); }
.app-header, .app-footer { padding: .75rem 1rem; background: #161b22; border-bottom:1px solid #222; }
.app-footer { border-top:1px solid #222; border-bottom:none; font-size:.8rem; text-align:center; }
.subtitle { margin-top:0; font-weight:400; font-size: 1rem; opacity:.85; }

.layout { display:grid; grid-template-areas: 'topology inspector' 'controls inspector'; grid-template-columns: 2fr 1fr; grid-template-rows: auto 260px; gap: .75rem; padding: .75rem; }
.topology { grid-area: topology; position:relative; min-height:340px; background: var(--panel); border:1px solid #2a3038; border-radius:8px; padding: .5rem; overflow:hidden; }
.inspector { grid-area: inspector; background: var(--panel); border:1px solid #2a3038; border-radius:8px; display:flex; flex-direction:column; }
.controls { grid-area: controls; background: var(--panel); border:1px solid #2a3038; border-radius:8px; padding:.5rem; display:flex; flex-direction:column; gap:.5rem; }

.nodes { display:flex; justify-content:space-between; align-items:center; position:relative; z-index:2; margin:2rem 1rem 0 1rem; }
.node { width:80px; height:80px; background:var(--panel-alt); border:2px solid var(--accent); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.8rem; gap:.4rem; position:relative; cursor:pointer; transition: border-color var(--trans-fast), transform var(--trans-fast); }
.node.router { border-color: var(--accent-alt); }
.node:focus, .node:hover { outline:none; border-color: var(--good); transform: translateY(-3px); }
.node.active-hop { border-color: var(--good) !important; box-shadow:0 0 10px 2px rgba(44,182,125,0.55); transform:translateY(-3px); }
.node.next-hop { border-color: var(--accent-alt) !important; box-shadow:0 0 8px 1px rgba(239,69,101,0.45); }
.node-label { position:absolute; top:100%; margin-top:.25rem; white-space:nowrap; font-weight:600; }

#links-svg { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.link-line { stroke:#555; stroke-width:3; }
.link-arrow { fill:#888; }

.packet { position:absolute; width:34px; height:34px; border-radius:50%; background: linear-gradient(135deg,var(--accent),var(--accent-alt)); display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:600; color:#fff; box-shadow:0 0 0 2px #0008; pointer-events:none; opacity:0; }
.packet.reply { background:linear-gradient(135deg,var(--good),var(--accent)); }
.packet.error { background:linear-gradient(135deg,var(--error),var(--accent-alt)); }
.packet.active { animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { box-shadow:0 0 0 2px #0008, 0 0 6px 0 var(--accent); } 60% { box-shadow:0 0 0 2px #0008, 0 0 0 0 var(--accent); } 100% { box-shadow:0 0 0 2px #0008, 0 0 6px 0 var(--accent); } }

.legend { position:absolute; right:.5rem; top:.5rem; background:#111a; backdrop-filter:blur(4px); padding:.6rem .85rem; border:1px solid #333; border-radius:6px; font-size:.72rem; max-width:240px; line-height:1.35; }
.legend-box { display:inline-block; width:12px; height:12px; margin-right:.3rem; border-radius:3px; background:var(--accent); }
.legend-box.l2 { background:var(--accent); }
.legend-box.l3 { background:var(--accent-alt); }
.legend-box.icmp { background:var(--good); }

.tabs { display:flex; }
.tab { flex:1; background:#111; border:none; color:var(--fg); padding:.5rem; cursor:pointer; font-weight:600; border-bottom:3px solid transparent; transition: background var(--trans-fast), border-color var(--trans-fast); }
.tab.active { background:var(--panel-alt); border-bottom-color: var(--accent); }
.tab:focus { outline:2px solid var(--focus); outline-offset:2px; }
.panels { flex:1; overflow:auto; padding:.6rem; font-family: var(--mono); font-size:.85rem; }
.panel { display:block; }
.panel[hidden] { display:none; }
.router-decision { min-height:60px; padding:.6rem; border-top:1px solid #333; font-size:.8rem; line-height:1.4; background:#151b22; }

.control-row { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.control-row button, .control-row select { background:#18202a; color:var(--fg); border:1px solid #2f3944; padding:.5rem .8rem; border-radius:4px; cursor:pointer; font-size:.8rem; }
.control-row button:disabled { opacity:.4; cursor:not-allowed; }
.control-row button:focus, .control-row select:focus { outline:2px solid var(--focus); outline-offset:1px; }
.checkbox-inline { display:flex; align-items:center; gap:.35rem; font-size:.7rem; }
.checkbox-inline input { transform:scale(1.1); }

.timeline { display:flex; gap:.3rem; flex-wrap:wrap; font-size:.65rem; font-family:var(--mono); }
.timeline-item { padding:.2rem .4rem; background:#182027; border:1px solid #2a323d; border-radius:4px; opacity:.6; transition:opacity var(--trans-fast), transform var(--trans-fast), background var(--trans-fast); }
.timeline-item.active { opacity:1; background:#223040; transform:scale(1.04); border-color: var(--accent); }
.timeline-item.error { border-color: var(--error); }

.status { font-size:.9rem; min-height:2.1rem; line-height:1.35; }
.status code { font-family: var(--mono); background:#222; padding:0 .25rem; border-radius:3px; font-size:.85em; }
.status strong { color: var(--good); }
.cmd-hint { font-family: var(--mono); background:#111; border:1px solid #2f3944; padding:.5rem .7rem; border-radius:4px; font-size:.75rem; line-height:1.35; white-space:nowrap; overflow:auto; max-width:100%; }
.cmd-hint code { color: var(--good); }
.flash-change { animation: flash-bg 800ms ease; }
@keyframes flash-bg { 0% { background: #333; } 50% { background: var(--accent-alt); } 100% { background:#333; } }

.field-row { display:grid; grid-template-columns: 120px 1fr; gap:.25rem .5rem; align-items:center; margin-bottom:.25rem; }
.field-label { text-align:right; opacity:.8; }
.field-value { background:#111; padding:.2rem .3rem; border:1px solid #333; border-radius:3px; position:relative; }
.field-value.changed { border-color: var(--warn); color: var(--warn); }
.field-value.error { border-color: var(--error); color: var(--error); }
.field-value.good { border-color: var(--good); color: var(--good); }

.fade-out { animation: fadeOut .35s forwards; }
.fade-in { animation: fadeIn .35s forwards; }
@keyframes fadeOut { to { opacity:0; transform:translateY(-4px); } }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.blink { animation: blink 900ms ease-in-out 1; }
@keyframes blink { 0%,100% { background:#111; } 40% { background:#333; } 60% { background:#555; } }

@media (max-width: 1100px) {
  .layout { grid-template-areas: 'topology' 'inspector' 'controls'; grid-template-columns: 1fr; grid-template-rows:auto auto auto; }
  .nodes { margin-top:3rem; }
}
@media (max-width: 600px) {
  .node { width:60px; height:60px; }
  .node-label { font-size:.6rem; }
  .legend { font-size:.55rem; }
}

/* Dynamische Legend-Positionierung bei Überlappung */
.topology.legend-bottom { padding-bottom:140px; }
.topology.legend-bottom .legend { top:auto; bottom:.5rem; }
.topology.legend-bottom .nodes { margin-top:2.2rem; }