:root{
  --bg:#edf5fc;--bg2:#f8fbff;--panel:rgba(255,255,255,.90);--panel2:rgba(238,247,255,.92);
  --line:rgba(24,89,145,.15);--line-strong:rgba(20,105,177,.25);--text:#123454;--muted:#6d8298;
  --blue:#0878d1;--blue2:#1bacee;--deep:#0b3f73;--green:#148a5b;--orange:#b96b09;--red:#c63e50;
  --shadow:0 22px 60px rgba(37,78,118,.12);--shadow-soft:0 10px 30px rgba(37,78,118,.08);--radius:20px
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 76% -12%,rgba(96,192,247,.35),transparent 34%),radial-gradient(circle at -10% 35%,rgba(83,151,217,.15),transparent 28%),linear-gradient(135deg,var(--bg2),var(--bg))}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(28,112,177,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(28,112,177,.032) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent 82%)}button,input,select,textarea{font:inherit}.hidden{display:none!important}.glass{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(240,248,255,.88));border:1px solid rgba(27,107,171,.14);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.muted{color:var(--muted)}.eyebrow{margin:0 0 6px;color:#1677c2;font-size:11px;letter-spacing:.19em;font-weight:850}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto;box-shadow:0 0 12px currentColor}.dot.online{background:var(--green);color:var(--green)}.dot.warn{background:#e5982c;color:#e5982c}.dot.offline{background:var(--red);color:var(--red)}code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:rgba(18,74,130,.08);padding:.1em .32em;border-radius:5px;color:#164d80}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:30px;position:relative;overflow:hidden}.login-glow{position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(45,161,230,.20),transparent 68%);filter:blur(10px);animation:breathe 5s ease-in-out infinite}.login-card{width:min(520px,100%);border-radius:30px;padding:34px 44px 36px;text-align:center;position:relative}.login-logo{width:min(410px,94%);height:auto;filter:drop-shadow(0 14px 26px rgba(44,105,157,.15))}.login-rule{height:1px;background:linear-gradient(90deg,transparent,#4ea4df,transparent);margin:8px 0 25px}.login-card h1{font-size:31px;margin:0 0 8px;color:#123d69}.login-card>p.muted{margin:0 auto 22px;max-width:400px;line-height:1.55}.login-form{display:grid;gap:14px;text-align:left}.login-form label,.form-grid label{display:grid;gap:7px;color:#375976;font-size:12px;font-weight:750;letter-spacing:.02em}.login-form input,.form-grid input,.form-grid select,textarea{width:100%;border:1px solid rgba(40,117,176,.20);background:rgba(255,255,255,.88);color:var(--text);border-radius:12px;padding:13px 14px;outline:none;transition:.2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}.login-form input:focus,.form-grid input:focus,.form-grid select:focus,textarea:focus{border-color:#188bd5;box-shadow:0 0 0 3px rgba(24,139,213,.10)}.login-foot{margin-top:20px;padding-top:18px;border-top:1px solid rgba(38,112,171,.11);font-size:11px;color:#66829a;display:flex;gap:8px;justify-content:center;align-items:center}.form-error{color:#b9273e;font-size:12px;min-height:18px;margin:0}
.btn{border:1px solid rgba(38,112,171,.19);border-radius:11px;padding:10px 14px;color:#183f63;cursor:pointer;font-weight:780;transition:.2s;background:rgba(238,247,255,.92);box-shadow:0 5px 14px rgba(33,79,121,.05)}.btn:hover{transform:translateY(-1px);border-color:rgba(22,126,203,.46);box-shadow:0 9px 20px rgba(33,79,121,.09)}.btn.primary{color:white;background:linear-gradient(135deg,#0b66bb,#0ba9e9);border-color:#1c9ee1;box-shadow:0 9px 26px rgba(0,117,202,.18)}.btn.ghost{background:rgba(255,255,255,.70)}.btn.danger{color:#ad2d40;border-color:rgba(198,62,80,.25);background:rgba(255,239,242,.90)}.btn.wide{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.app-shell{min-height:100vh;display:grid;grid-template-columns:240px 1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:240px;border-right:1px solid rgba(35,105,161,.14);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(234,245,253,.96));display:flex;flex-direction:column;padding:18px 14px;z-index:20;box-shadow:8px 0 36px rgba(40,80,120,.06)}.brand-mini{height:92px;display:flex;align-items:center;padding:0 5px 12px;border-bottom:1px solid rgba(37,109,166,.11)}.brand-mini img{width:100%;max-height:82px;object-fit:contain;filter:drop-shadow(0 7px 14px rgba(33,92,140,.09))}.nav{display:grid;gap:6px;margin-top:18px}.nav-item{border:0;background:transparent;color:#648098;text-align:left;padding:11px 12px;border-radius:11px;display:flex;gap:11px;align-items:center;cursor:pointer;font-weight:720}.nav-item:hover{background:rgba(45,135,200,.09);color:#164a76}.nav-item.active{background:linear-gradient(90deg,rgba(22,119,194,.14),rgba(47,172,232,.06));color:#0b477a;box-shadow:inset 3px 0 #1b97da}.nav-icon{width:18px;text-align:center;color:#208bcf}.sidebar-bottom{margin-top:auto;display:grid;gap:11px}.gateway-mini{padding:12px;border:1px solid rgba(45,122,180,.14);background:rgba(255,255,255,.68);border-radius:12px;display:flex;align-items:center;gap:10px}.gateway-mini div{display:grid;gap:2px}.gateway-mini strong{font-size:12px;color:#244b6d}.gateway-mini small{color:#6a859b;font-size:10px}.version-badge{text-align:center;color:#7890a5;font-size:9px;letter-spacing:.08em;text-transform:uppercase}.main{grid-column:2;padding:0 30px 38px;min-width:0}.topbar{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(43,110,164,.11);margin-bottom:24px}.topbar h2{margin:0;font-size:25px;color:#123d68}.top-actions{display:flex;align-items:center;gap:12px}.live-pill{padding:9px 12px;border:1px solid rgba(20,138,91,.14);background:rgba(229,248,239,.86);border-radius:999px;font-size:10px;letter-spacing:.12em;color:#26785a;display:flex;align-items:center;gap:8px}.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 13px rgba(20,138,91,.6);animation:pulse 1.5s infinite}.warning-bar{margin:-10px 0 18px;padding:11px 14px;border-radius:10px;background:rgba(255,244,221,.88);border:1px solid rgba(209,139,44,.24);color:#8c5913;font-size:12px}.page{display:none}.page.active{display:block}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:14px}.kpi{border-radius:17px;padding:17px 18px;box-shadow:var(--shadow-soft)}.kpi-top{display:flex;justify-content:space-between;color:#6c849a;font-size:11px;font-weight:760;text-transform:uppercase;letter-spacing:.06em}.kpi strong{display:block;font-size:27px;margin:13px 0 2px;color:#123f68}.kpi small{font-size:10px;color:#7a91a4}.metric-icon{color:#2396d7}.resource-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:17px}.resource-card{border-radius:14px;padding:13px 15px;box-shadow:var(--shadow-soft)}.resource-card>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.resource-card span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#70899e;font-weight:750}.resource-card strong{font-size:16px;color:#17496f}.resource-card small{display:block;color:#8397a9;font-size:9px;margin-top:6px}.meter{height:5px;background:#dce9f4;border-radius:999px;overflow:hidden;margin-top:8px}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1584cb,#29b2e8);border-radius:inherit;transition:width .4s ease}
.panel{border-radius:var(--radius);padding:20px;margin-bottom:17px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}.panel-head h3{margin:0;font-size:17px;color:#173f63}.legend{font-size:10px;color:#728a9f;display:flex;gap:7px;align-items:center}.legend .dot{margin-left:8px}.topology-panel{min-height:345px}.topology-map{display:grid;grid-template-columns:220px 1fr;gap:42px;align-items:center;min-height:265px;position:relative;padding:5px 8px}.gateway-node{border:1px solid rgba(29,141,210,.28);background:radial-gradient(circle at 50% 0,rgba(87,183,239,.20),rgba(255,255,255,.82));border-radius:18px;padding:18px;text-align:center;position:relative;box-shadow:0 12px 34px rgba(24,112,177,.08)}.gateway-node:after{content:"";position:absolute;right:-43px;top:50%;width:43px;height:2px;background:linear-gradient(90deg,#2a9ddd,rgba(42,157,221,.16));box-shadow:0 0 8px rgba(42,157,221,.35)}.gateway-node .server-icon{font-size:35px;color:#2297d8;margin-bottom:7px}.gateway-node strong{display:block;color:#19496e}.gateway-node small{display:block;margin-top:5px;color:#748ca1}.branch-list{display:grid;gap:11px;position:relative}.branch-list:before{content:"";position:absolute;left:-1px;top:18px;bottom:18px;width:2px;background:rgba(38,143,221,.24)}.network-branch{position:relative;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:13px 15px;border:1px solid rgba(43,126,185,.13);border-radius:13px;background:linear-gradient(90deg,rgba(255,255,255,.86),rgba(236,247,255,.75));margin-left:25px;overflow:visible}.network-branch:before{content:"";position:absolute;left:-26px;top:50%;width:26px;height:2px;background:rgba(45,163,241,.38)}.network-branch.online:after{content:"";position:absolute;left:-28px;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#22a9e5;box-shadow:0 0 10px rgba(34,169,229,.65);animation:travel 2.4s linear infinite}.network-branch strong{font-size:13px;color:#244f72}.network-branch small{display:block;color:#758fa4;margin-top:3px;font-size:10px}.branch-meta{text-align:right;font-size:10px;color:#7890a3}.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.status-list,.compact-list{display:grid;gap:9px}.status-row,.compact-row{display:flex;align-items:center;justify-content:space-between;padding:10px 11px;border-radius:10px;background:rgba(248,252,255,.82);border:1px solid rgba(44,126,184,.09)}.status-name,.compact-left{display:flex;align-items:center;gap:9px}.status-row span,.compact-row span{font-size:11px}.status-row small,.compact-row small{color:#7690a4}.network-grid{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:14px}.network-card{padding:17px;border:1px solid rgba(42,126,187,.13);border-radius:14px;background:rgba(248,252,255,.87);position:relative;overflow:hidden}.network-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#239edc;opacity:.85}.network-card.offline:before{background:var(--red)}.network-card h4{margin:0 0 5px;color:#244e70}.network-card .cidr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#117ac0;font-size:15px}.network-card dl{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:15px 0 0}.network-card dt{color:#7a91a4;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.network-card dd{margin:2px 0 0;font-size:11px;color:#315675}.table-wrap{overflow:auto;border:1px solid rgba(50,127,183,.11);border-radius:12px;background:rgba(255,255,255,.57)}table{width:100%;border-collapse:collapse;min-width:760px}th,td{text-align:left;padding:11px 12px;border-bottom:1px solid rgba(50,127,183,.08);font-size:11px}th{color:#6e879c;text-transform:uppercase;font-size:9px;letter-spacing:.08em;background:rgba(232,244,253,.75)}td{color:#335873}tbody tr:hover{background:rgba(33,143,210,.045)}.status-cell{display:flex;align-items:center;gap:7px}.key-mini{font-family:ui-monospace,monospace;color:#7a90a2;font-size:9px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.service-card{padding:16px;border:1px solid rgba(46,129,188,.12);border-radius:13px;background:rgba(250,253,255,.84)}.service-card .service-head{display:flex;justify-content:space-between;align-items:center}.service-card strong{font-size:12px;color:#244c6d}.service-card .latency{font-size:20px;margin:12px 0 2px;color:#174c75}.service-card small{color:#7b91a4;font-size:9px}.panel-copy{font-size:11px;margin-top:-6px;line-height:1.55}.empty{padding:25px;text-align:center;color:#7a91a5;font-size:11px}.hint{color:#7c91a3;font-weight:500;font-size:10px}
.security-grid,.proxy-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr);gap:18px;align-items:start}.span-wide{grid-column:1/-1}.tls-status-grid,.proxy-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.tls-status-card{display:flex;gap:12px;align-items:flex-start;padding:15px;border:1px solid rgba(18,71,128,.13);background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(229,243,255,.75));border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}.tls-status-card>.dot{margin-top:7px;flex:0 0 auto}.tls-status-card div{display:flex;flex-direction:column;gap:3px;min-width:0}.tls-status-card small{font-size:.68rem;text-transform:uppercase;letter-spacing:.11em;color:#66829b}.tls-status-card strong{font-size:.92rem;color:#0d315c;overflow-wrap:anywhere}.tls-status-card span:last-child{font-size:.76rem;color:#71879c;overflow-wrap:anywhere}.cert-details{display:grid;gap:0;border-top:1px solid rgba(18,71,128,.12)}.cert-details>div{display:grid;grid-template-columns:135px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid rgba(18,71,128,.09);align-items:start}.cert-details span{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#71889c}.cert-details strong{font-size:.83rem;color:#183d66;overflow-wrap:anywhere}.tls-form{margin-top:16px}.tls-confirm{display:flex!important;align-items:flex-start!important;gap:12px;padding:14px 15px;border:1px solid rgba(210,133,33,.26);border-radius:14px;background:rgba(255,245,226,.72);cursor:pointer}.tls-confirm input{width:18px;height:18px;margin-top:2px;accent-color:#1269bd}.tls-confirm span{display:flex;flex-direction:column;gap:4px;color:#714b16}.tls-confirm small{font-weight:400;line-height:1.45;color:#8a6735}.success-note{padding:13px 15px;border:1px solid rgba(39,147,91,.26);background:rgba(225,249,236,.78);color:#17663d;border-radius:13px;font-size:.84rem;line-height:1.45}.tls-tech-note{margin-top:17px;padding:13px 15px;border-left:3px solid #1b80da;background:rgba(222,241,255,.67);border-radius:0 12px 12px 0;color:#365b80;font-size:.81rem;line-height:1.5}.tls-tech-note strong{color:#123e69}.direct-access-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px;border:1px solid rgba(42,123,181,.12);background:rgba(247,252,255,.82);border-radius:14px}.direct-access-row>div{display:grid;gap:4px}.direct-access-row strong{font-size:16px;color:#174b75}.direct-access-row span{font-size:12px}.direct-access-row small{max-width:760px;color:#72899d;line-height:1.45}.state-ok{color:#187151}.state-warn{color:#9d6014}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,37,56,.46);backdrop-filter:blur(8px);z-index:100;display:grid;place-items:center;padding:24px}.modal{width:min(680px,100%);max-height:92vh;overflow:auto;border-radius:20px;padding:22px}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.modal-head h3{margin:0;font-size:20px;color:#173f63}.icon-btn{border:1px solid rgba(55,127,183,.16);background:rgba(247,251,255,.92);color:#53718b;width:34px;height:34px;border-radius:9px;font-size:20px;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.span-2{grid-column:span 2}.form-grid fieldset{border:1px solid rgba(53,130,187,.13);border-radius:12px;padding:12px}.form-grid legend{font-size:11px;color:#607f99;padding:0 6px}.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.check-item{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important;padding:9px;border-radius:9px;background:rgba(245,250,254,.90);font-weight:650!important}.check-item input{width:auto!important}.toggle-row{grid-template-columns:auto auto 1fr!important;align-items:center!important;gap:8px!important;margin-top:20px}.toggle-row>input{position:absolute;opacity:0;pointer-events:none}.toggle{width:37px;height:21px;border-radius:999px;background:#cbd9e4;position:relative;border:1px solid rgba(71,128,173,.16);transition:.2s}.toggle:before{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:#718ca3;top:2px;left:2px;transition:.2s}.toggle-row input:checked+.toggle{background:#188bcf}.toggle-row input:checked+.toggle:before{left:18px;background:white}.modal-note{font-size:10px;line-height:1.5;color:#536f87;border-left:2px solid #158bd8;padding:9px 12px;background:rgba(224,242,255,.67);border-radius:4px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:2px}.result-modal{width:min(820px,100%)}.result-grid{display:grid;grid-template-columns:310px 1fr;gap:22px}.qr-wrap{background:white;border:1px solid #dbe7ef;border-radius:14px;padding:13px;text-align:center}.qr-wrap img{width:100%;display:block}.qr-wrap p{color:#26425a;font-size:10px;margin:8px 0 2px}.success-chip{display:inline-flex;gap:8px;align-items:center;background:rgba(228,248,239,.88);border:1px solid rgba(39,147,91,.2);border-radius:999px;padding:8px 11px;font-size:11px;color:#17683f}.result-grid .muted{font-size:10px;line-height:1.55}.result-grid textarea{height:250px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;line-height:1.55;resize:none}.result-actions{display:flex;gap:9px;margin-top:10px}

/* v0.5.0 – Monitoring, HAProxy-Routing, Firewall und Zugriffsmatrix */
.network-branch{display:block}.network-branch-head{display:flex;justify-content:space-between;gap:18px;align-items:center}.network-branch-head>div:first-child{min-width:0}.network-branch-head .dot{margin-right:7px}.network-branch-head strong{vertical-align:middle}.network-branch-head small{display:block;margin:5px 0 0 18px;color:#7890a3;font-size:10px}.topo-peer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:11px;padding-top:10px;border-top:1px solid rgba(35,123,184,.09)}.topo-peer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 9px;border:1px solid rgba(48,127,185,.10);border-radius:10px;background:rgba(255,255,255,.62);position:relative;overflow:hidden}.topo-peer.online:after{content:"";position:absolute;left:-18px;bottom:0;width:18px;height:2px;background:#1ca5e5;box-shadow:0 0 8px rgba(28,165,229,.8);animation:peerTravel 2.8s linear infinite}.topo-peer strong{display:block;font-size:10px;color:#2b5272}.topo-peer small{display:block;font-size:8px;color:#7d92a3;margin-top:2px}.topo-peer>span:last-child{font-size:8px;color:#6b869d;white-space:nowrap}.topo-no-peer{margin-top:9px;padding:8px 10px;border-radius:9px;background:rgba(242,248,253,.70);color:#8396a7;font-size:9px}.gateway-live-beam{height:3px;margin:13px auto 0;width:72%;border-radius:999px;background:linear-gradient(90deg,transparent,#1da5e8,transparent);position:relative;overflow:hidden}.gateway-live-beam:after{content:"";position:absolute;width:18px;height:100%;left:-18px;background:white;box-shadow:0 0 10px #2aa8e5;animation:beam 2s linear infinite}
.monitor-grid{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.5fr);gap:17px}.monitor-alert-panel,.monitor-history-panel{min-height:310px}.alert-list{display:grid;gap:9px}.monitor-alert{display:grid;grid-template-columns:34px 1fr;gap:11px;padding:12px;border-radius:12px;border:1px solid rgba(42,123,181,.10);background:rgba(248,252,255,.82)}.monitor-alert .alert-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;font-weight:900}.monitor-alert strong{font-size:11px;color:#244d6f}.monitor-alert p{font-size:10px;line-height:1.4;color:#657f95;margin:4px 0}.monitor-alert small{font-size:8px;color:#8397a8}.monitor-alert.critical{border-color:rgba(198,62,80,.24);background:rgba(255,239,242,.72)}.monitor-alert.critical .alert-icon{background:rgba(198,62,80,.12);color:var(--red)}.monitor-alert.warning{border-color:rgba(185,107,9,.22);background:rgba(255,247,230,.75)}.monitor-alert.warning .alert-icon{background:rgba(185,107,9,.12);color:var(--orange)}.monitor-alert.info .alert-icon{background:rgba(18,126,203,.11);color:var(--blue)}.monitor-ok{min-height:160px;display:flex;align-items:center;justify-content:center;gap:12px;text-align:left;color:#37715b}.monitor-ok strong{display:block;font-size:12px}.monitor-ok small{display:block;color:#789487;margin-top:4px;max-width:380px}.history-grid{display:grid;gap:11px}.history-block{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:end;padding:10px 0;border-bottom:1px solid rgba(40,123,184,.08)}.history-block>div:first-child{align-self:center}.history-block strong{font-size:10px;color:#315a7b;display:block}.history-block span{font-size:8px;color:#8095a6}.history-bars{height:55px;display:flex;gap:2px;align-items:end;padding:4px 3px;background:linear-gradient(180deg,rgba(226,242,253,.55),rgba(255,255,255,.2));border-radius:8px;overflow:hidden}.history-bar{display:block;flex:1;min-width:2px;max-width:9px;border-radius:2px 2px 0 0;background:#29a4db;opacity:.9}.history-bar.good{background:#2aa474}.history-bar.warn{background:#e19a31}.history-bar.bad{background:#d35466}.history-bar.load{background:#348bc7}.history-bar.memory{background:#6a91c4}
.route-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:17px}.haproxy-flow-panel{overflow:hidden}.flow-origin{display:flex;align-items:center;gap:10px;width:max-content;margin:8px auto 20px;padding:10px 14px;border-radius:999px;background:linear-gradient(135deg,#0d4c83,#0d87cc);color:white;box-shadow:0 9px 24px rgba(18,93,150,.18)}.flow-origin .flow-public{font-size:8px;letter-spacing:.14em;font-weight:850;background:rgba(255,255,255,.14);padding:5px 7px;border-radius:999px}.flow-origin i{width:28px;height:1px;background:rgba(255,255,255,.55)}.flow-origin strong{font-size:12px}.flow-origin span:last-child{font-size:9px;opacity:.8}.haproxy-route-flow{display:grid;gap:11px}.route-flow-row{display:grid;grid-template-columns:minmax(170px,.8fr) 62px minmax(190px,1fr) 62px minmax(230px,1.2fr);align-items:stretch;border:1px solid rgba(38,124,184,.12);border-radius:16px;padding:11px;background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(236,247,255,.68));position:relative;overflow:hidden}.route-flow-row.internal{box-shadow:inset 3px 0 #20a0df}.route-stage{border:1px solid rgba(38,124,184,.10);border-radius:12px;padding:11px;background:rgba(255,255,255,.73);min-width:0}.route-stage small{display:block;color:#7790a4;font-size:7px;letter-spacing:.12em;font-weight:800}.route-stage>strong{display:block;color:#214e72;font-size:11px;margin:4px 0;overflow-wrap:anywhere}.route-stage>span{display:block;color:#7890a4;font-size:8px;overflow-wrap:anywhere}.route-stage.matcher{background:rgba(232,247,255,.72)}.route-stage.backend{background:rgba(245,251,255,.85)}.flow-arrow{display:grid;place-items:center;align-content:center;gap:4px}.flow-arrow i{height:2px;width:100%;background:linear-gradient(90deg,rgba(31,150,215,.25),#1d9bd9,rgba(31,150,215,.25));position:relative}.flow-arrow i:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;top:-2px;left:0;background:#24a9e4;box-shadow:0 0 8px rgba(36,169,228,.65);animation:routeTravel 2.2s linear infinite}.flow-arrow span{font-size:7px;font-weight:800;color:#5a819f;letter-spacing:.08em}.route-servers{display:grid;gap:5px;margin-top:7px}.route-server{display:flex;align-items:center;gap:7px;padding:6px 7px;border-radius:8px;background:rgba(241,248,253,.88);border:1px solid rgba(39,125,184,.08)}.route-server.internal{background:rgba(224,244,255,.80)}.route-server strong{font-size:9px;color:#2a5676;display:block}.route-server small{font-size:7px;color:#7a92a5;letter-spacing:0;font-weight:500}.route-detail-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.4fr);gap:17px}.internal-route-groups{display:grid;gap:10px}.internal-route-group{border:1px solid rgba(38,126,188,.12);border-radius:13px;overflow:hidden;background:rgba(250,253,255,.82)}.internal-group-head{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;background:rgba(226,244,255,.72)}.internal-group-head strong{display:block;font-size:11px;color:#21527a}.internal-group-head span{font-size:8px;color:#6889a2}.internal-group-head b{font-size:9px;color:#247cad}.internal-route-item{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:9px 11px;border-top:1px solid rgba(36,122,182,.08)}.internal-route-item strong{display:block;font-size:9px;color:#315773}.internal-route-item small{display:block;font-size:7px;color:#7e93a4;margin-top:2px}.internal-route-item>span:last-child{font-size:8px;color:#638097}.network-pill{display:inline-flex;padding:4px 7px;border-radius:999px;background:rgba(26,146,208,.10);border:1px solid rgba(26,146,208,.15);color:#1d75aa;font-size:8px;font-weight:780}
.firewall-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.25fr);gap:17px}.policy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.policy-card{padding:13px;border-radius:12px;border:1px solid rgba(46,126,184,.12);background:rgba(249,253,255,.84);display:grid;gap:3px}.policy-card small{font-size:7px;letter-spacing:.12em;color:#7c91a2}.policy-card strong{font-size:12px;color:#305675}.policy-card span{font-size:8px;color:#748da1}.policy-card.ok{border-left:3px solid #28a16f}.policy-card.danger{border-left:3px solid #ce5061}.policy-card.warn{border-left:3px solid #d99631}.firewall-note{margin-top:13px;padding:12px;border-radius:11px;background:rgba(226,242,253,.72);border-left:3px solid #1b8dd1;font-size:9px;line-height:1.55;color:#55738b}.firewall-form{margin-top:3px}.firewall-rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.managed-rule{background:rgba(225,244,255,.42)}.managed-rule td:first-child{box-shadow:inset 3px 0 #1c9bd8}
@keyframes peerTravel{0%{transform:translateX(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(360px);opacity:0}}@keyframes beam{from{left:-18px}to{left:100%}}@keyframes routeTravel{from{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:calc(100% - 6px);opacity:0}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}@keyframes breathe{0%,100%{transform:scale(.96);opacity:.7}50%{transform:scale(1.06);opacity:1}}@keyframes travel{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(27px);opacity:0}}
@media(max-width:1180px){.kpi-grid,.resource-strip,.route-kpi-grid{grid-template-columns:repeat(2,1fr)}.network-grid,.service-grid{grid-template-columns:repeat(2,1fr)}.security-grid,.proxy-grid,.monitor-grid,.route-detail-grid,.firewall-grid,.firewall-rules-grid{grid-template-columns:1fr}.span-wide{grid-column:auto}}
@media(max-width:960px){.route-flow-row{grid-template-columns:1fr}.flow-arrow{height:32px}.flow-arrow i{width:2px;height:100%;background:linear-gradient(180deg,rgba(31,150,215,.25),#1d9bd9,rgba(31,150,215,.25))}.flow-arrow i:after{animation:none;left:-2px;top:45%}.topo-peer-list{grid-template-columns:1fr}}
@media(max-width:840px){.app-shell{display:block}.sidebar{position:relative;width:auto;height:auto;inset:auto}.brand-mini{height:72px}.brand-mini img{width:200px}.nav{grid-template-columns:repeat(3,1fr)}.sidebar-bottom{display:none}.main{padding:0 16px 28px}.topbar{height:auto;padding:18px 0;align-items:flex-start}.top-actions{flex-direction:column;align-items:flex-end}.topology-map{grid-template-columns:1fr;gap:18px}.gateway-node:after{display:none}.branch-list{margin-left:0}.split-grid{grid-template-columns:1fr}.result-grid{grid-template-columns:1fr}.qr-wrap{max-width:330px;margin:auto}.form-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.direct-access-row{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.login-card{padding:24px 20px}.kpi-grid,.resource-strip,.network-grid,.service-grid,.tls-status-grid,.proxy-status-grid,.route-kpi-grid,.policy-grid{grid-template-columns:1fr}.nav{grid-template-columns:repeat(2,1fr)}.topbar{gap:12px}.top-actions .btn{display:none}.legend{display:none}.check-grid{grid-template-columns:1fr}.cert-details>div{grid-template-columns:1fr;gap:4px}}

/* v0.5.0 – Netzwerk-Zugriffsmatrix */
.matrix-panel{overflow:hidden}.matrix-legend{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 16px;font-size:8px;color:#66859d}.matrix-legend span{display:inline-flex;align-items:center;gap:6px}.matrix-dot{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid rgba(28,90,128,.12)}.matrix-dot.allow{background:#2aa474}.matrix-dot.drop{background:#cf5363}.matrix-dot.mixed{background:linear-gradient(135deg,#2aa474 0 50%,#cf5363 50%)}.matrix-dot.unmanaged{background:#dce7ee}.access-matrix-wrap{overflow:auto;border:1px solid rgba(36,122,182,.10);border-radius:15px;background:rgba(250,253,255,.72)}.access-matrix{width:100%;min-width:760px;border-collapse:separate;border-spacing:0}.access-matrix th,.access-matrix td{border-right:1px solid rgba(39,124,184,.08);border-bottom:1px solid rgba(39,124,184,.08);padding:8px;vertical-align:middle}.access-matrix thead th{position:sticky;top:0;z-index:2;background:#eef8fe;text-align:left;min-width:185px}.access-matrix tbody th{position:sticky;left:0;z-index:1;background:#f5fbff;text-align:left;width:190px}.access-matrix th strong{display:block;font-size:9px;color:#2b5776}.access-matrix th small{display:block;margin-top:3px;font-size:7px;color:#7f95a7}.matrix-corner{min-width:190px!important}.matrix-corner span,.matrix-corner b{display:block;font-size:7px;color:#6687a0}.matrix-corner b{margin-top:3px;color:#2e668d}.matrix-self{background:repeating-linear-gradient(135deg,rgba(227,238,245,.55),rgba(227,238,245,.55) 7px,rgba(245,249,252,.7) 7px,rgba(245,249,252,.7) 14px);text-align:center}.matrix-self span{font-size:7px;color:#93a4b2;text-transform:uppercase;letter-spacing:.08em}.matrix-cell{width:100%;min-height:70px;border:1px solid rgba(45,124,180,.11);border-radius:12px;background:rgba(255,255,255,.82);display:grid;grid-template-columns:12px 1fr;grid-template-rows:auto auto;column-gap:7px;text-align:left;padding:10px;cursor:pointer;transition:.16s ease;box-shadow:none}.matrix-cell:hover{transform:translateY(-1px);border-color:rgba(28,141,209,.28);box-shadow:0 7px 17px rgba(29,103,151,.08)}.matrix-cell-dot{grid-row:1/3;align-self:center;width:9px;height:9px;border-radius:50%;background:#dce7ee}.matrix-cell strong{font-size:8px;color:#315a77}.matrix-cell small{font-size:7px;color:#7c92a4;margin-top:2px}.matrix-cell.allow{background:rgba(231,249,240,.75);border-color:rgba(42,164,116,.20)}.matrix-cell.allow .matrix-cell-dot,.matrix-cell.allow-partial .matrix-cell-dot{background:#2aa474;box-shadow:0 0 0 4px rgba(42,164,116,.08)}.matrix-cell.drop{background:rgba(255,238,241,.73);border-color:rgba(207,83,99,.20)}.matrix-cell.drop .matrix-cell-dot,.matrix-cell.drop-partial .matrix-cell-dot{background:#cf5363;box-shadow:0 0 0 4px rgba(207,83,99,.08)}.matrix-cell.allow-partial{background:rgba(239,250,245,.65)}.matrix-cell.drop-partial{background:rgba(255,244,246,.65)}.matrix-cell.mixed{background:linear-gradient(135deg,rgba(233,249,241,.74),rgba(255,241,244,.74));border-color:rgba(132,112,133,.18)}.matrix-cell.mixed .matrix-cell-dot{background:linear-gradient(135deg,#2aa474 0 50%,#cf5363 50%)}.matrix-cell.unmanaged{background:rgba(248,251,253,.76)}.matrix-editor-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:17px}.matrix-action{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:7px;font-weight:850;letter-spacing:.06em}.matrix-action.allow{background:rgba(42,164,116,.11);color:#23845e;border:1px solid rgba(42,164,116,.16)}.matrix-action.drop{background:rgba(207,83,99,.10);color:#b94455;border:1px solid rgba(207,83,99,.15)}
@media(max-width:1180px){.matrix-editor-grid{grid-template-columns:1fr}}
@media(max-width:600px){.matrix-legend{gap:8px}.access-matrix-wrap{margin:0 -4px}.matrix-cell{min-height:62px;padding:8px}}

/* v0.6.0 – verwaltete WireGuard-Netze & Geräte-/Peer-Matrix */
.network-manage-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:17px;margin-bottom:17px}.network-create-flow{display:grid;gap:10px}.network-create-flow>div{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:10px 11px;border:1px solid rgba(40,126,184,.10);border-radius:12px;background:rgba(248,252,255,.82)}.network-create-flow b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#146ba8,#23a5df);color:#fff;font-size:9px;box-shadow:0 5px 13px rgba(19,111,171,.16)}.network-create-flow strong{display:block;font-size:9px;color:#285674}.network-create-flow small{display:block;margin-top:2px;font-size:7px;color:#7d94a5}.network-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.managed-badge,.existing-badge{display:inline-flex;padding:4px 7px;border-radius:999px;font-size:7px;font-weight:850;letter-spacing:.08em}.managed-badge{background:rgba(35,156,214,.11);border:1px solid rgba(35,156,214,.18);color:#157db1}.existing-badge{background:rgba(108,136,156,.09);border:1px solid rgba(108,136,156,.13);color:#6b8293}.managed-network{box-shadow:inset 0 0 0 1px rgba(35,156,214,.09)}.network-actions{margin-top:12px;padding-top:10px;border-top:1px solid rgba(40,126,184,.09);display:flex;justify-content:flex-end}.network-actions .btn{font-size:8px}.endpoint-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.endpoint-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;text-align:left;padding:11px;border:1px solid rgba(38,124,184,.11);border-radius:12px;background:rgba(250,253,255,.84);cursor:pointer;transition:.16s ease}.endpoint-card:hover{transform:translateY(-1px);border-color:rgba(28,141,209,.28);box-shadow:0 7px 17px rgba(29,103,151,.08)}.endpoint-card strong{display:block;font-size:9px;color:#285675}.endpoint-card small{display:block;margin-top:2px;font-size:7px;color:#7d93a5}.endpoint-card em{font-style:normal;font-size:7px;text-transform:uppercase;letter-spacing:.08em;color:#6f899d;padding:4px 6px;border-radius:999px;background:rgba(39,126,184,.07)}
@media(max-width:1180px){.network-manage-grid{grid-template-columns:1fr}.endpoint-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.endpoint-grid{grid-template-columns:1fr}}


/* v0.6.1 – dunkleres, interaktiveres Control-Deck */
:root{
  --bg:#0f1c27;--bg2:#152735;--panel:rgba(22,39,53,.94);--panel2:rgba(27,48,64,.93);
  --line:rgba(102,178,224,.16);--line-strong:rgba(91,184,239,.30);--text:#e8f3fb;--muted:#91a9bb;
  --blue:#2aa7e8;--blue2:#65cbf3;--deep:#0e5f97;--green:#36c987;--orange:#e6a646;--red:#ef6b78;
  --shadow:0 22px 60px rgba(2,12,20,.30);--shadow-soft:0 10px 28px rgba(2,12,20,.22)
}
html,body{background:radial-gradient(circle at 78% -14%,rgba(32,138,201,.22),transparent 34%),radial-gradient(circle at -10% 42%,rgba(39,108,150,.12),transparent 30%),linear-gradient(135deg,#0c1720,var(--bg2) 62%,#0d1b25);color:var(--text)}
body:before{background-image:linear-gradient(rgba(110,192,237,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(110,192,237,.035) 1px,transparent 1px);opacity:.85}
.glass{background:linear-gradient(145deg,rgba(26,46,61,.95),rgba(17,33,45,.92));border-color:rgba(101,189,238,.15);box-shadow:var(--shadow)}
.muted{color:var(--muted)}.eyebrow{color:#68c8f3}.metric-icon,.nav-icon{color:#54bce9}code{background:rgba(104,198,243,.09);color:#9edcff}
.sidebar{background:linear-gradient(180deg,rgba(10,24,34,.99),rgba(13,30,41,.98));border-right-color:rgba(96,184,233,.16);box-shadow:12px 0 40px rgba(0,8,14,.22);transition:width .26s ease,padding .26s ease}
.brand-mini{height:96px;margin:0 0 2px;padding:8px 9px 12px;border-bottom:0;background:linear-gradient(145deg,#f7fbff,#dfeaf2);border-radius:16px;box-shadow:0 10px 26px rgba(0,8,16,.22)}
.brand-mini img{filter:drop-shadow(0 7px 13px rgba(28,71,102,.15))}
.nav-item{color:#91aabd;transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}.nav-item:hover{background:rgba(75,169,220,.11);color:#d8f1ff;transform:translateX(2px)}.nav-item.active{background:linear-gradient(90deg,rgba(43,150,210,.20),rgba(47,172,232,.06));color:#f0f9ff;box-shadow:inset 3px 0 #52c2ef,0 8px 22px rgba(2,11,18,.12)}
.gateway-mini{border-color:rgba(89,178,226,.16);background:rgba(25,44,58,.76)}.gateway-mini strong{color:#d9edf9}.gateway-mini small,.version-badge{color:#7e9aae}
.main{transition:padding-left .26s ease}.topbar{border-bottom-color:rgba(91,181,230,.13);backdrop-filter:blur(12px)}.topbar h2{color:#eff8ff}
.live-pill{border-color:rgba(54,201,135,.22);background:rgba(24,78,59,.44);color:#72daa9;box-shadow:inset 0 0 18px rgba(54,201,135,.04)}
.btn{color:#dceef8;border-color:rgba(91,180,230,.20);background:rgba(27,49,65,.88);box-shadow:0 7px 18px rgba(0,9,16,.12);position:relative;overflow:hidden}.btn:hover{border-color:rgba(96,199,247,.48);box-shadow:0 11px 26px rgba(0,9,16,.18);background:rgba(34,60,78,.96)}.btn:active{transform:translateY(0) scale(.98)}.btn.primary{background:linear-gradient(135deg,#116ca7,#1aa8df);border-color:#4bc2ed;box-shadow:0 10px 28px rgba(12,116,169,.28)}.btn.ghost{background:rgba(23,42,56,.72)}.btn.danger{color:#ff9ba5;border-color:rgba(239,107,120,.28);background:rgba(91,34,43,.40)}
.compact-btn{width:40px;height:40px;padding:0;display:grid;place-items:center;font-size:18px}
.login-shell{background:radial-gradient(circle at 50% 35%,rgba(38,140,198,.15),transparent 36%)}.login-card{background:linear-gradient(145deg,rgba(21,39,53,.97),rgba(12,26,36,.96));border-color:rgba(91,181,230,.18)}.login-logo{background:linear-gradient(145deg,#fbfdff,#e2edf4);border-radius:20px;padding:12px 18px;box-shadow:0 15px 34px rgba(0,7,12,.28);filter:none}.login-card h1{color:#eef8ff}.login-form label,.form-grid label{color:#b9cedd}.login-form input,.form-grid input,.form-grid select,textarea{border-color:rgba(98,185,232,.20);background:rgba(9,24,34,.70);color:#eef8ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}.login-form input:focus,.form-grid input:focus,.form-grid select:focus,textarea:focus{border-color:#4fc1ee;box-shadow:0 0 0 3px rgba(62,177,230,.12),0 8px 20px rgba(0,8,14,.15)}.login-foot{border-top-color:rgba(91,181,230,.13);color:#88a4b7}
.kpi,.resource-card,.panel,.network-card,.service-card,.policy-card,.tls-status-card,.proxy-status-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}.kpi:hover,.resource-card:hover,.network-card:hover,.service-card:hover,.policy-card:hover,.tls-status-card:hover,.proxy-status-card:hover{transform:translateY(-2px);border-color:rgba(91,194,241,.28);box-shadow:0 18px 38px rgba(0,7,13,.26)}.panel:hover{border-color:rgba(91,194,241,.22)}
.kpi-top,.resource-card span,.resource-card small,.kpi small,.legend{color:#8fa9bb}.kpi strong,.resource-card strong,.panel-head h3{color:#edf8ff}.meter{background:#203d50}.meter i{background:linear-gradient(90deg,#238fc8,#5bc8ef);box-shadow:0 0 14px rgba(91,200,239,.25)}
.clickable-kpi{cursor:pointer}.clickable-kpi:after{content:"Öffnen →";display:block;margin-top:8px;font-size:9px;letter-spacing:.08em;color:#6cbfe6;opacity:0;transform:translateY(3px);transition:.18s}.clickable-kpi:hover:after,.clickable-kpi:focus-within:after{opacity:1;transform:none}
.warning-bar{background:rgba(104,67,18,.44);border-color:rgba(230,166,70,.25);color:#f1bf73}
.topology-hint{font-size:10px;color:#7797ac;margin:-6px 0 10px;letter-spacing:.02em}.gateway-node{border-color:rgba(72,180,232,.30);background:radial-gradient(circle at 50% 0,rgba(47,160,217,.20),rgba(17,34,47,.92));box-shadow:0 13px 35px rgba(0,8,14,.28);transition:.2s}.gateway-node:hover{transform:translateY(-2px);border-color:rgba(82,197,242,.46)}.gateway-node strong{color:#e5f6ff}.gateway-node small{color:#88a5b8}.gateway-node:after{background:linear-gradient(90deg,#4ebbe9,rgba(63,169,219,.12));box-shadow:0 0 11px rgba(59,183,233,.25)}
.branch-list:before{background:rgba(74,181,232,.26)}.network-branch{background:linear-gradient(90deg,rgba(23,43,57,.96),rgba(20,38,51,.82));border-color:rgba(81,177,224,.18);cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}.network-branch:hover{transform:translateX(3px);border-color:rgba(88,197,241,.35);background:linear-gradient(90deg,rgba(27,52,69,.98),rgba(22,44,58,.90));box-shadow:0 10px 30px rgba(0,8,14,.18)}.network-branch strong{color:#dff3ff}.network-branch small,.branch-meta{color:#86a5b9}.network-branch.is-collapsed .topo-peer-list,.network-branch.is-collapsed .topo-no-peer{display:none}.network-branch.is-collapsed{padding-bottom:13px}.network-branch-head:after{content:"⌄";margin-left:10px;color:#71c7ed;font-size:14px;transition:transform .18s}.network-branch.is-collapsed .network-branch-head:after{transform:rotate(-90deg)}
.topo-peer{background:rgba(11,27,38,.58)!important;border-color:rgba(81,177,224,.12)!important;transition:.18s}.topo-peer:hover{background:rgba(27,58,76,.70)!important;border-color:rgba(86,195,240,.26)!important;transform:translateX(2px)}
.status-row,.compact-row{border-color:rgba(92,178,225,.12)!important;background:rgba(13,29,40,.38)!important;transition:.18s}.status-row:hover,.compact-row:hover{background:rgba(27,53,69,.60)!important;border-color:rgba(87,194,239,.23)!important;transform:translateX(2px)}
.service-card,.network-card,.policy-card,.tls-status-card,.proxy-status-card{background:linear-gradient(145deg,rgba(24,45,60,.94),rgba(15,31,42,.91))!important;border-color:rgba(91,181,230,.15)!important}.network-card h4,.service-card strong,.policy-card strong,.tls-status-card strong,.proxy-status-card strong{color:#e7f5ff!important}.key-mini,.network-card dt,.network-card small,.service-card small,.tls-status-card span,.proxy-status-card span{color:#82a0b5!important}.network-card .cidr,.network-pill,.managed-badge{background:rgba(39,137,191,.13)!important;color:#84d4f6!important;border-color:rgba(83,190,238,.17)!important}
.table-wrap{border-color:rgba(90,178,226,.14)!important;background:rgba(12,27,37,.45)!important}table{color:#dcecf6}th{background:rgba(18,38,51,.94)!important;color:#9cb7c9!important;border-color:rgba(91,181,230,.12)!important}td{border-color:rgba(91,181,230,.09)!important}tbody tr{transition:background .15s ease}tbody tr:hover{background:rgba(44,102,134,.14)!important}
.modal{background:linear-gradient(145deg,rgba(23,43,57,.99),rgba(12,28,38,.99));border-color:rgba(91,190,237,.20)}.modal-backdrop{background:rgba(1,7,12,.72);backdrop-filter:blur(8px)}.modal-note{background:rgba(34,87,114,.20)!important;border-color:rgba(84,184,230,.18)!important;color:#a9c6d8!important}.success-note{background:rgba(30,104,76,.34)!important;border-color:rgba(54,201,135,.22)!important;color:#94e3ba!important}
.route-stage,.internal-route-group,.route-detail,.matrix-cell,.endpoint-card,.network-create-flow>div{background:rgba(15,32,43,.72)!important;border-color:rgba(85,181,227,.14)!important;transition:.18s}.route-stage:hover,.internal-route-group:hover,.matrix-cell:hover,.endpoint-card:hover,.network-create-flow>div:hover{border-color:rgba(89,196,240,.31)!important;background:rgba(26,52,68,.84)!important;transform:translateY(-1px)}
.flow-arrow i{background:linear-gradient(90deg,rgba(71,181,230,.24),#55c2ee,rgba(71,181,230,.24))!important}.route-stage strong,.internal-group-head strong,.internal-route-item strong,.endpoint-card strong{color:#e3f4ff!important}
.matrix-cell.unmanaged{background:rgba(16,33,45,.66)!important;color:#90a9ba!important}.matrix-cell.allow,.matrix-cell.allow-partial{background:rgba(27,97,69,.34)!important}.matrix-cell.drop,.matrix-cell.drop-partial{background:rgba(104,42,50,.34)!important}.matrix-cell.mixed{background:rgba(101,74,27,.35)!important}
.activity-signal{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;border:1px solid rgba(83,183,231,.16);background:rgba(17,37,50,.70);color:#8fb2c8;font-size:10px;white-space:nowrap}.activity-wave{height:14px;display:flex;align-items:end;gap:2px}.activity-wave i{width:2px;border-radius:2px;background:#5fc9ef;animation:wave 1.1s ease-in-out infinite}.activity-wave i:nth-child(1){height:5px}.activity-wave i:nth-child(2){height:11px;animation-delay:.16s}.activity-wave i:nth-child(3){height:7px;animation-delay:.32s}.activity-signal.warn{border-color:rgba(230,166,70,.22);color:#e7b96e}.activity-signal.offline{border-color:rgba(239,107,120,.24);color:#f0929c}.activity-signal.offline .activity-wave i{background:#ef6b78;animation-play-state:paused}
.toast-stack{position:fixed;right:22px;bottom:22px;display:grid;gap:9px;z-index:120;width:min(360px,calc(100vw - 44px));pointer-events:none}.toast{pointer-events:auto;border:1px solid rgba(91,187,234,.20);background:rgba(11,26,36,.96);color:#e5f4fd;border-radius:13px;padding:12px 14px;box-shadow:0 18px 44px rgba(0,5,10,.38);display:flex;gap:10px;align-items:flex-start;animation:toastIn .22s ease both}.toast small{display:block;color:#86a4b7;margin-top:2px}.toast.success{border-color:rgba(54,201,135,.26)}.toast.warn{border-color:rgba(230,166,70,.28)}.toast.error{border-color:rgba(239,107,120,.30)}
body.sidebar-collapsed .app-shell{grid-template-columns:78px 1fr}body.sidebar-collapsed .sidebar{width:78px;padding-left:10px;padding-right:10px}body.sidebar-collapsed .brand-mini{height:64px;padding:7px}body.sidebar-collapsed .brand-mini img{max-height:50px}body.sidebar-collapsed .nav-item{justify-content:center;padding:11px 8px}body.sidebar-collapsed .nav-item>span:last-child,body.sidebar-collapsed .gateway-mini div,body.sidebar-collapsed .version-badge,body.sidebar-collapsed #logoutBtn{display:none}body.sidebar-collapsed .gateway-mini{justify-content:center;padding:11px}body.sidebar-collapsed .main{grid-column:2;padding-left:24px}
.page.active{animation:pageIn .22s ease both}
@keyframes pageIn{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes wave{0%,100%{transform:scaleY(.65);opacity:.55}50%{transform:scaleY(1.15);opacity:1}}@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:980px){.activity-signal{display:none}.top-actions{gap:8px}.sidebar{width:210px}.app-shell{grid-template-columns:210px 1fr}.main{padding-left:22px;padding-right:22px}}
@media (max-width:760px){.app-shell{display:block}.sidebar{transform:translateX(-100%);transition:transform .24s ease;width:235px}.sidebar.mobile-open{transform:none}.main{padding:0 14px 28px}.topbar{height:auto;min-height:90px;padding:14px 0;gap:12px;align-items:flex-start}.top-actions{flex-wrap:wrap;justify-content:flex-end}.kpi-grid,.resource-strip,.split-grid{grid-template-columns:1fr 1fr}.topology-map{grid-template-columns:1fr;gap:20px}.gateway-node:after{display:none}.toast-stack{right:12px;bottom:12px;width:calc(100vw - 24px)}}
@media (max-width:520px){.kpi-grid,.resource-strip,.split-grid{grid-template-columns:1fr}.top-actions .live-pill{order:3}.top-actions #addPeerTop{order:4;width:100%}.topbar{display:grid;grid-template-columns:1fr auto}.top-actions{max-width:180px}.login-card{padding:28px 22px}}

/* v0.7.0 – Secure Network / Zero-Trust foundation */
.panel-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.secure-hero-panel{overflow:hidden;position:relative}.secure-hero-panel:before{content:"";position:absolute;inset:-120px auto auto 35%;width:420px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(48,157,214,.12),transparent 70%);pointer-events:none}.secure-site-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;position:relative}.secure-site-card{border:1px solid rgba(91,181,230,.15);background:linear-gradient(145deg,rgba(21,43,58,.94),rgba(12,29,40,.90));border-radius:15px;padding:14px;box-shadow:0 12px 30px rgba(0,7,13,.16);transition:.2s}.secure-site-card:hover{border-color:rgba(91,194,241,.31);transform:translateY(-2px)}.secure-site-card.unassigned{border-style:dashed}.secure-site-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:11px}.secure-site-head strong{display:block;color:#e7f6ff;font-size:13px}.secure-site-head small{display:block;color:#7fa0b5;font-size:9px;margin-top:4px}.secure-site-head>span{font-size:10px;color:#91b0c2;white-space:nowrap}.secure-device-chips{display:grid;gap:7px}.secure-device-chip{width:100%;border:1px solid rgba(90,179,225,.12);background:rgba(8,23,33,.52);border-radius:11px;color:#dff3ff;padding:9px 10px;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;transition:.18s}.secure-device-chip:hover{border-color:rgba(88,197,241,.32);background:rgba(28,57,74,.68);transform:translateX(2px)}.secure-device-chip span:not(.dot){display:grid;gap:2px}.secure-device-chip b{font-size:11px}.secure-device-chip small{font-size:9px;color:#83a2b7}.secure-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.secure-admin-grid>.panel{margin-bottom:0}.compact-form{margin-bottom:14px}.compact-check-grid{max-height:150px;overflow:auto;padding-right:4px}.object-list{display:grid;gap:7px;max-height:250px;overflow:auto}.object-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(86,178,224,.12);background:rgba(10,26,36,.48);border-radius:10px}.object-row>div{display:grid;gap:2px}.object-row strong{color:#ddf2ff;font-size:11px}.object-row small{color:#7e9eb3;font-size:9px}.object-row .icon-btn{width:28px;height:28px}.connection-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:850;letter-spacing:.07em;border:1px solid rgba(91,181,230,.16);background:rgba(32,79,103,.25);color:#8ed4f2}.connection-badge.gateway{color:#91ddbb;border-color:rgba(59,197,133,.22);background:rgba(29,101,73,.25)}.connection-badge.direct{color:#7bd8ff}.connection-badge.relay{color:#e6bd73;border-color:rgba(230,166,70,.22);background:rgba(105,75,22,.28)}.connection-badge.offline{color:#ef9ca5;border-color:rgba(239,107,120,.22);background:rgba(102,42,50,.28)}.secure-policy-panel{margin-top:17px}.secure-policy-form{grid-template-columns:repeat(4,minmax(0,1fr))}.secure-policy-form .span-2{grid-column:span 4}.policy-preview{border:1px solid rgba(88,184,231,.16);background:rgba(11,29,40,.58);border-radius:11px;padding:12px;display:grid;gap:6px;color:#9bb9cb;font-size:10px;min-height:58px}.policy-preview strong{color:#dff4ff;font-size:12px}.policy-preview span{line-height:1.55}.compact-empty{padding:8px!important;font-size:9px!important}.network-diagnostic{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;max-height:260px;overflow:auto;background:rgba(8,21,30,.66);border:1px solid rgba(239,107,120,.18);border-radius:9px;padding:10px;color:#e9a3aa}
@media (max-width:1100px){.secure-admin-grid{grid-template-columns:1fr}.secure-policy-form{grid-template-columns:repeat(2,minmax(0,1fr))}.secure-policy-form .span-2{grid-column:span 2}}
@media (max-width:650px){.secure-policy-form{grid-template-columns:1fr}.secure-policy-form .span-2{grid-column:span 1}.secure-site-map{grid-template-columns:1fr}.panel-actions{width:100%}.panel-actions .btn{flex:1}}
#networkError{white-space:pre-wrap;max-height:280px;overflow:auto}
.host-capability{margin-top:14px;border:1px solid rgba(90,179,225,.14);background:rgba(9,25,35,.52);border-radius:12px;padding:11px 12px;display:flex;align-items:flex-start;gap:10px}.host-capability>div{display:grid;gap:3px}.host-capability strong{color:#dff3ff;font-size:11px}.host-capability small{color:#86a5b9;font-size:9px;line-height:1.45}.host-capability.ready{border-color:rgba(54,201,135,.23);background:rgba(24,87,64,.20)}.host-capability.failed{border-color:rgba(239,107,120,.24);background:rgba(96,39,47,.24)}.cap-flags{font-size:9px;color:#7397ad;letter-spacing:.03em}

/* v0.7.1 – Contrast & Surface Pass
   Entfernt verbliebene graue/helle Legacy-Flächen aus dem Dark-Theme,
   erhöht die Lesbarkeit und vereinheitlicht Karten, Matrix, Tabellen und Formulare. */
:root{
  --surface-0:#0b1822;
  --surface-1:#102532;
  --surface-2:#153244;
  --surface-3:#1a3d51;
  --surface-blue:#123b55;
  --surface-blue-strong:#164d6b;
  --text-strong:#f3f9fd;
  --text-soft:#bdd2df;
  --text-dim:#8eabba;
  --accent:#59c8f1;
  --accent-soft:rgba(89,200,241,.14);
}

/* Grundflächen: keine neutral-grauen Karten mehr */
.panel,.kpi,.resource-card{
  background:linear-gradient(145deg,rgba(22,45,60,.97),rgba(13,30,41,.96))!important;
  border-color:rgba(89,190,237,.17)!important;
}
.panel-head h3,.kpi strong,.resource-card strong{color:var(--text-strong)!important}
.panel-copy,.hint,.muted{color:#9eb7c7!important}

/* Formulare / Eingaben */
.form-grid input,.form-grid select,.login-form input,textarea{
  background:linear-gradient(180deg,rgba(8,24,34,.90),rgba(11,29,40,.90))!important;
  border-color:rgba(91,190,237,.22)!important;
  color:#edf8ff!important;
}
.form-grid input::placeholder,textarea::placeholder,.login-form input::placeholder{color:#6f91a7!important}
.form-grid label,.login-form label{color:#c2d7e4!important}
.form-grid fieldset{border-color:rgba(89,190,237,.17)!important;background:rgba(9,25,35,.28)!important}
.form-grid legend{color:#8fc3dc!important}
.check-item{
  background:linear-gradient(145deg,rgba(18,42,56,.90),rgba(12,31,42,.88))!important;
  border:1px solid rgba(89,188,235,.14)!important;
  color:#dceef8!important;
}
.check-item:hover{border-color:rgba(89,200,241,.30)!important;background:rgba(25,55,72,.92)!important}
.toggle{background:#28495d!important;border-color:rgba(112,190,229,.22)!important}.toggle:before{background:#93adbd!important}

/* Modal / Hinweisflächen */
.modal-head h3{color:#eff9ff!important}
.icon-btn{background:rgba(17,39,52,.94)!important;border-color:rgba(91,190,237,.20)!important;color:#acd5e9!important}
.icon-btn:hover{background:rgba(28,59,76,.96)!important;color:#effaff!important}
.tls-confirm{
  background:linear-gradient(145deg,rgba(87,61,20,.32),rgba(51,39,20,.31))!important;
  border-color:rgba(230,166,70,.28)!important;
}
.tls-confirm span{color:#f1c57e!important}.tls-confirm small{color:#c8a66e!important}
.tls-tech-note,.firewall-note{
  background:linear-gradient(90deg,rgba(22,77,106,.34),rgba(14,42,57,.30))!important;
  color:#b5d2e2!important;
  border-color:#40afe0!important;
}
.tls-tech-note strong{color:#e8f7ff!important}
.direct-access-row{
  background:linear-gradient(145deg,rgba(19,44,59,.94),rgba(12,31,42,.92))!important;
  border-color:rgba(89,190,237,.16)!important;
}
.direct-access-row strong{color:#eaf8ff!important}.direct-access-row small,.direct-access-row span{color:#9bb7c8!important}

/* Dashboard / Statuslisten */
.status-row,.compact-row,.topo-no-peer{
  background:linear-gradient(145deg,rgba(16,38,51,.88),rgba(11,29,40,.84))!important;
  border-color:rgba(86,181,227,.14)!important;
  color:#dceef7!important;
}
.status-row small,.compact-row small,.topo-no-peer{color:#91afc0!important}
.gateway-node,.network-branch{
  box-shadow:0 14px 34px rgba(0,7,13,.24),inset 0 1px 0 rgba(132,211,247,.025)!important;
}

/* Monitoring: Warnungen klar nach Status statt grau */
.monitor-alert{
  background:linear-gradient(145deg,rgba(17,40,54,.94),rgba(12,30,41,.91))!important;
  border-color:rgba(88,184,231,.15)!important;
}
.monitor-alert strong{color:#e8f7ff!important}.monitor-alert p{color:#a6bfce!important}.monitor-alert small{color:#7f9fb2!important}
.monitor-alert.critical{background:linear-gradient(145deg,rgba(93,38,47,.42),rgba(49,27,34,.48))!important;border-color:rgba(239,107,120,.30)!important}
.monitor-alert.warning{background:linear-gradient(145deg,rgba(103,72,25,.38),rgba(54,41,22,.44))!important;border-color:rgba(230,166,70,.29)!important}
.history-block{border-color:rgba(89,184,230,.11)!important}.history-block strong{color:#dceff9!important}.history-block span{color:#87a7b9!important}
.history-bars{background:linear-gradient(180deg,rgba(19,48,65,.76),rgba(9,26,36,.58))!important;border:1px solid rgba(84,178,224,.09)}
.monitor-ok{color:#78d7aa!important}.monitor-ok small{color:#91b7a5!important}

/* HAProxy-Routen: durchgehend blaue Dark-Surfaces */
.route-flow-row{
  background:linear-gradient(90deg,rgba(18,42,56,.96),rgba(12,30,41,.90))!important;
  border-color:rgba(87,183,229,.16)!important;
}
.route-stage,.route-stage.matcher,.route-stage.backend,.route-detail,.internal-route-group{
  background:linear-gradient(145deg,rgba(20,47,62,.94),rgba(12,31,42,.91))!important;
  border-color:rgba(89,187,233,.16)!important;
}
.route-stage small,.route-stage>span,.internal-group-head span,.internal-route-item small,.internal-route-item>span:last-child{color:#91aebe!important}
.route-stage>strong,.internal-group-head strong,.internal-route-item strong{color:#e8f7ff!important}
.route-server,.route-server.internal{
  background:rgba(12,33,45,.88)!important;
  border-color:rgba(84,177,223,.13)!important;
}
.route-server strong{color:#dff3ff!important}.route-server small{color:#85a6b9!important}
.internal-group-head{background:linear-gradient(90deg,rgba(23,65,86,.68),rgba(17,45,61,.62))!important}
.internal-group-head b{color:#75d0f3!important}

/* Firewall / Tabellen */
.policy-card{
  background:linear-gradient(145deg,rgba(19,43,58,.96),rgba(12,30,41,.92))!important;
  border-color:rgba(87,182,229,.16)!important;
}
.policy-card strong{color:#edf8ff!important}.policy-card small,.policy-card span{color:#95b1c2!important}
.table-wrap{
  background:rgba(8,24,34,.58)!important;
  border-color:rgba(89,187,232,.16)!important;
}
th{background:linear-gradient(180deg,rgba(24,54,70,.98),rgba(16,39,53,.98))!important;color:#b9d4e2!important}
td{color:#d8eaf4!important}
tbody tr:nth-child(even){background:rgba(18,41,55,.28)}
tbody tr:hover{background:rgba(37,91,118,.28)!important}
.managed-rule{background:rgba(20,67,91,.27)!important}

/* Zugriffsmatrix – größte Kontrastkorrektur */
.access-matrix-wrap{
  background:linear-gradient(145deg,rgba(9,26,36,.94),rgba(13,34,46,.92))!important;
  border-color:rgba(91,190,237,.22)!important;
  box-shadow:inset 0 1px 0 rgba(117,207,246,.025);
}
.access-matrix th,.access-matrix td{border-color:rgba(89,182,226,.13)!important}
.access-matrix thead th{
  background:linear-gradient(180deg,#183b4f,#122f40)!important;
  color:#d7ecf6!important;
}
.access-matrix tbody th{
  background:linear-gradient(90deg,#17384b,#112d3d)!important;
  color:#d7edf7!important;
}
.access-matrix th strong{font-size:10px!important;color:#e9f8ff!important;letter-spacing:.02em}
.access-matrix th small{font-size:8.5px!important;color:#91b3c5!important}
.matrix-corner span,.matrix-corner b{font-size:8.5px!important;color:#8fb6ca!important}.matrix-corner b{color:#69c8ef!important}
.matrix-self{
  background:repeating-linear-gradient(135deg,#17394b,#17394b 8px,#1c4357 8px,#1c4357 16px)!important;
  box-shadow:inset 0 0 0 1px rgba(100,196,239,.10);
}
.matrix-self span{font-size:8.5px!important;color:#9fc3d5!important;font-weight:800}
.matrix-cell{
  min-height:76px!important;
  background:linear-gradient(145deg,#15384b,#102c3c)!important;
  border-color:rgba(93,191,237,.18)!important;
  box-shadow:inset 0 1px 0 rgba(132,216,250,.025),0 8px 18px rgba(0,8,14,.12)!important;
}
.matrix-cell:hover,.matrix-cell:focus-visible{
  background:linear-gradient(145deg,#1c4a62,#15384b)!important;
  border-color:rgba(91,205,249,.48)!important;
  box-shadow:0 10px 24px rgba(0,7,13,.26),0 0 0 2px rgba(82,193,239,.09)!important;
}
.matrix-cell strong{font-size:10px!important;color:#effaff!important;font-weight:800!important;line-height:1.25}
.matrix-cell small{font-size:8.5px!important;color:#a5c0cf!important;line-height:1.35}
.matrix-cell-dot{background:#6e9bb2!important;box-shadow:0 0 0 4px rgba(110,155,178,.09)}
.matrix-cell.unmanaged{
  background:linear-gradient(145deg,#17394b,#102c3c)!important;
  color:#d9edf7!important;
}
.matrix-cell.unmanaged .matrix-cell-dot{background:#72b7d8!important;box-shadow:0 0 0 4px rgba(77,181,226,.10)}
.matrix-cell.allow,.matrix-cell.allow-partial{
  background:linear-gradient(145deg,rgba(24,93,67,.78),rgba(16,55,44,.88))!important;
  border-color:rgba(63,211,144,.28)!important;
}
.matrix-cell.drop,.matrix-cell.drop-partial{
  background:linear-gradient(145deg,rgba(105,42,51,.78),rgba(57,28,35,.90))!important;
  border-color:rgba(239,107,120,.30)!important;
}
.matrix-cell.mixed{
  background:linear-gradient(135deg,rgba(42,91,66,.82),rgba(87,57,31,.72),rgba(91,39,48,.84))!important;
  border-color:rgba(226,167,85,.28)!important;
}
.matrix-legend{color:#9fb9c8!important}.matrix-dot.unmanaged{background:#72b7d8!important;border-color:rgba(102,197,238,.28)!important}
.matrix-action.allow{color:#8ce3b8!important;background:rgba(33,126,87,.32)!important;border-color:rgba(63,211,144,.22)!important}
.matrix-action.drop{color:#f29ca5!important;background:rgba(117,44,54,.34)!important;border-color:rgba(239,107,120,.24)!important}

/* Netzwerk-Assistent / Endpoint-Karten */
.network-create-flow>div,.endpoint-card,.host-capability{
  background:linear-gradient(145deg,rgba(18,43,57,.95),rgba(12,30,41,.92))!important;
  border-color:rgba(88,184,230,.16)!important;
}
.network-create-flow strong,.endpoint-card strong,.host-capability strong{color:#e9f8ff!important}
.network-create-flow small,.endpoint-card small,.host-capability small{color:#96b3c4!important}
.endpoint-card em,.existing-badge{
  background:rgba(41,104,134,.32)!important;
  border:1px solid rgba(91,184,228,.16)!important;
  color:#a8cadb!important;
}
.host-capability.ready{background:linear-gradient(145deg,rgba(22,83,61,.42),rgba(14,49,39,.48))!important}
.host-capability.failed{background:linear-gradient(145deg,rgba(99,38,48,.44),rgba(51,27,34,.50))!important}

/* Secure Network */
.secure-site-card,.object-row,.secure-device-chip,.policy-preview{
  box-shadow:inset 0 1px 0 rgba(132,211,247,.02),0 9px 24px rgba(0,7,13,.13);
}
.object-row{background:linear-gradient(145deg,rgba(17,40,54,.88),rgba(10,28,38,.86))!important}
.policy-preview{background:linear-gradient(145deg,rgba(14,39,53,.88),rgba(9,28,39,.88))!important;color:#a8c3d2!important}

/* Statusfarben auf dunklem Grund besser lesbar */
.state-ok{color:#72dfaa!important}.state-warn{color:#f0ba6a!important}.form-error{color:#ff9ca8!important}

/* Scrollbars passend zum Portal */
*{scrollbar-color:#2d718f #0e2431;scrollbar-width:thin}
*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:#0e2431}*::-webkit-scrollbar-thumb{background:#2d718f;border-radius:999px;border:2px solid #0e2431}*::-webkit-scrollbar-thumb:hover{background:#3d93b8}

@media(max-width:600px){
  .matrix-cell{min-height:68px!important}.matrix-cell strong{font-size:9px!important}.matrix-cell small{font-size:8px!important}
}

/* v0.7.2 – geplante/leere Netze und Host-Erkennung */
.planned-badge{display:inline-flex;padding:4px 7px;border-radius:999px;font-size:7px;font-weight:850;letter-spacing:.08em;background:rgba(205,154,54,.16);border:1px solid rgba(240,183,75,.25);color:#f2c76f}
.network-card.planned:before{background:#e3ad4c!important}.network-card.planned{border-color:rgba(226,173,76,.22)!important;background:linear-gradient(145deg,rgba(52,46,28,.58),rgba(22,35,43,.94))!important}.network-card.offline:not(.planned):before{background:var(--red)!important}
.network-state-line{display:flex;align-items:center;gap:8px;margin-top:11px;padding:8px 10px;border-radius:9px;border:1px solid rgba(93,184,228,.12);background:rgba(9,28,39,.45)}.network-state-line strong{font-size:8px;letter-spacing:.08em}.network-state-line span{font-size:8.5px;color:#9db8c8}.network-state-line.online strong{color:#72dfaa}.network-state-line.offline strong{color:#ff9ca8}.network-state-line.planned strong{color:#f2c76f}.network-state-line.planned{border-color:rgba(231,177,73,.16);background:rgba(88,63,23,.20)}
.network-actions{gap:8px;flex-wrap:wrap}.network-actions .btn{min-width:92px}
.network-branch.planned{background:linear-gradient(90deg,rgba(76,58,25,.38),rgba(26,42,51,.82))!important;border-color:rgba(228,178,77,.22)!important}.network-branch.planned:after{display:none!important}.network-branch.planned strong{color:#f4d087!important}.network-branch.planned small,.network-branch.planned .branch-meta{color:#bcae8f!important}
.host-capability.warning{border-color:rgba(229,174,72,.28)!important;background:linear-gradient(145deg,rgba(86,61,25,.42),rgba(43,38,27,.52))!important}.host-capability.warning strong{color:#f2cb79!important}
#networkEditCIDR[readonly]{opacity:.72;cursor:not-allowed;background:rgba(7,23,32,.72)!important}

/* v0.8.0 – SNX branding, Edge, Shield, Routed Networks / IPAM */
.snx-brand{width:100%;min-height:76px;border-radius:16px;padding:11px 13px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:end;column-gap:9px;background:radial-gradient(circle at 18% 20%,rgba(50,190,246,.24),transparent 34%),linear-gradient(145deg,#f9fdff,#dcebf4);border:1px solid rgba(114,196,233,.44);box-shadow:inset 0 1px 0 #fff,0 8px 24px rgba(0,9,17,.24);overflow:hidden;position:relative}.snx-brand:before{content:"";position:absolute;inset:auto -25% -42% 23%;height:64%;transform:rotate(-7deg);background:linear-gradient(90deg,transparent,rgba(0,151,224,.24),transparent)}.snx-brand strong{grid-row:1/3;font-size:34px;line-height:.9;letter-spacing:-.07em;color:#073e70;text-shadow:0 1px 0 #fff}.snx-brand span{font-size:14px;font-weight:900;letter-spacing:.2em;color:#087ec3}.snx-brand small{font-size:7px;letter-spacing:.07em;color:#315c76;font-weight:800}.snx-brand-login{width:min(410px,94%);margin:0 auto 10px;min-height:112px;padding:20px 24px}.snx-brand-login strong{font-size:56px}.snx-brand-login span{font-size:22px}.snx-brand-login small{font-size:10px}.brand-mini{height:104px}.login-logo{display:none}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:17px}.feature-card{border-radius:15px;padding:14px 16px;display:flex;gap:13px;align-items:center;cursor:pointer;transition:.2s}.feature-card:hover{transform:translateY(-2px);border-color:rgba(73,192,239,.35)!important}.feature-card>span{width:37px;height:37px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(31,130,172,.35),rgba(15,76,104,.35));border:1px solid rgba(85,193,237,.18);color:#71d5fa;font-size:19px}.feature-card div{display:grid;gap:2px}.feature-card small{font-size:8px;text-transform:uppercase;letter-spacing:.1em;color:#7fa2b5}.feature-card strong{font-size:14px;color:#eaf8ff}.feature-card em{font-style:normal;font-size:9px;color:#8faebf}
.routed-layout{align-items:start}.config-preview{min-height:300px;max-height:430px;overflow:auto;white-space:pre-wrap;background:#071922;color:#c9e8f5;border:1px solid rgba(78,177,222,.18);border-radius:13px;padding:16px;font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:inset 0 0 30px rgba(0,0,0,.22)}.inline-editor{padding:14px;border:1px solid rgba(83,177,221,.12);border-radius:13px;background:rgba(8,27,38,.42);margin-bottom:15px}.route-type{display:inline-flex;padding:4px 7px;border-radius:999px;font-size:7px;font-weight:900;letter-spacing:.11em}.route-type.web{color:#8cddff;background:rgba(22,115,158,.26);border:1px solid rgba(76,188,235,.2)}.route-type.mail{color:#c0b5ff;background:rgba(74,64,148,.28);border:1px solid rgba(146,129,243,.2)}
#page-routed .network-card{min-height:250px}#page-edge .modal-note,#page-shield .modal-note{margin-bottom:14px}.compact-kpis .kpi{min-height:114px}
#shieldBlockList{margin-top:14px}.shield-unblock{padding:6px 10px!important;font-size:9px!important}.network-actions .btn.primary{min-width:112px}
@media(max-width:1100px){.feature-grid{grid-template-columns:1fr}.routed-layout{grid-template-columns:1fr}.compact-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.compact-kpis{grid-template-columns:1fr}.snx-brand-login strong{font-size:45px}.snx-brand-login span{font-size:18px}}

/* v0.8.0 – vom Benutzer bereitgestelltes SNX-Gateway-Logo (unverändert) */
.snx-logo{display:block;max-width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.24))}
.snx-logo-login{width:min(500px,96%);max-height:315px;margin:0 auto 8px}
.brand-mini{height:128px!important;padding:5px 4px!important;display:grid!important;place-items:center!important;background:radial-gradient(circle at 50% 50%,rgba(20,126,184,.12),transparent 68%);border-bottom:1px solid rgba(72,174,222,.12)}
.snx-logo-sidebar{width:100%;max-height:118px;padding:0 1px;filter:drop-shadow(0 7px 18px rgba(0,0,0,.30))}
.snx-brand{display:none!important}
body.sidebar-collapsed .brand-mini{height:72px!important;padding:5px!important}
body.sidebar-collapsed .snx-logo-sidebar{max-height:62px}
@media(max-width:700px){.snx-logo-login{width:min(430px,98%);max-height:270px}.brand-mini{height:112px!important}.snx-logo-sidebar{max-height:102px}}

/* v0.8.2 – gruppierte, scrollbare Sidebar-Navigation */
.sidebar{overflow:hidden}
.brand-mini{flex:0 0 auto}
.nav{
  display:flex!important;
  flex-direction:column;
  gap:8px!important;
  margin-top:14px!important;
  padding:2px 3px 14px 0;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(91,190,237,.28) transparent;
}
.nav::-webkit-scrollbar{width:6px}.nav::-webkit-scrollbar-track{background:transparent}.nav::-webkit-scrollbar-thumb{background:rgba(91,190,237,.24);border-radius:999px}.nav::-webkit-scrollbar-thumb:hover{background:rgba(91,190,237,.42)}
.nav-group{border:1px solid transparent;border-radius:13px;transition:background .18s ease,border-color .18s ease}
.nav-group.open{background:rgba(17,43,57,.42);border-color:rgba(88,184,231,.07)}
.nav-group-toggle{
  width:100%;border:0;background:transparent;color:#7f9daf;padding:9px 10px;border-radius:11px;
  display:grid;grid-template-columns:20px 1fr 18px;align-items:center;gap:8px;text-align:left;cursor:pointer;
  font-size:10px;font-weight:850;letter-spacing:.075em;text-transform:uppercase;transition:.18s ease;
}
.nav-group-toggle:hover{background:rgba(75,169,220,.08);color:#c8e5f4}
.nav-group-icon{color:#4db8e7;text-align:center;font-size:13px}.nav-group-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-group-chevron{justify-self:end;color:#7297aa;font-size:14px;transition:transform .2s ease,color .2s ease}
.nav-group.open>.nav-group-toggle .nav-group-chevron{transform:rotate(180deg);color:#61c5ee}
.nav-group-items{display:grid;gap:3px;max-height:0;opacity:0;overflow:hidden;padding:0 5px;transition:max-height .26s ease,opacity .18s ease,padding .22s ease}
.nav-group.open>.nav-group-items{max-height:420px;opacity:1;padding:1px 5px 7px}
.nav-group-items .nav-item{padding:9px 10px 9px 12px;font-size:12px;border-radius:9px;min-height:37px}
.nav-group-items .nav-item .nav-icon{font-size:12px}
.sidebar-bottom{
  flex:0 0 auto!important;
  margin-top:0!important;
  padding-top:12px;
  border-top:1px solid rgba(91,190,237,.12);
  background:linear-gradient(180deg,rgba(10,24,34,.18),rgba(10,24,34,.96) 18%);
  position:relative;
  z-index:2;
}
.sidebar-logout{display:flex;align-items:center;justify-content:center;gap:8px;min-height:39px;color:#dceef7!important;background:rgba(19,47,62,.78)!important;border-color:rgba(91,190,237,.18)!important}
.sidebar-logout:hover{background:rgba(28,66,85,.92)!important;border-color:rgba(91,200,241,.38)!important;color:#fff!important}
.logout-icon{font-size:14px;color:#5fc6ed}.logout-label{white-space:nowrap}

/* Eingeklappte Desktop-Sidebar: Kategorien bleiben als Symbole erreichbar, Logout bleibt sichtbar. */
body.sidebar-collapsed .nav{padding-right:0;align-items:stretch}
body.sidebar-collapsed .nav-group{background:transparent;border-color:transparent}
body.sidebar-collapsed .nav-group-toggle{grid-template-columns:1fr;padding:10px 7px;justify-items:center}
body.sidebar-collapsed .nav-group-label,body.sidebar-collapsed .nav-group-chevron{display:none}
body.sidebar-collapsed .nav-group-icon{font-size:15px}
body.sidebar-collapsed .nav-group-items{display:none!important}
body.sidebar-collapsed .sidebar-bottom{gap:8px}
body.sidebar-collapsed #logoutBtn{display:flex!important;width:100%;padding:10px 6px}
body.sidebar-collapsed .logout-label{display:none}
body.sidebar-collapsed .logout-icon{font-size:16px}
body.sidebar-collapsed .gateway-mini{min-height:40px}

@media(max-height:760px){
  .brand-mini{height:82px!important}.snx-logo-sidebar{max-height:74px!important}
  .nav{margin-top:9px!important;gap:5px!important}.nav-group-toggle{padding-top:7px;padding-bottom:7px}.nav-group-items .nav-item{min-height:34px;padding-top:7px;padding-bottom:7px}
  .sidebar-bottom{padding-top:8px;gap:7px}.gateway-mini{padding:9px}.version-badge{font-size:8px}
}
@media(max-width:760px){
  .sidebar{height:100dvh;position:fixed!important;inset:0 auto 0 0!important;padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .nav{grid-template-columns:none!important;display:flex!important;margin-top:12px!important}
  .sidebar-bottom{display:grid!important}
  .nav-group-toggle{padding:10px}
  .nav-group-items .nav-item{font-size:12px}
}
@media(max-width:980px){.sidebar-bottom{display:grid!important}}

/* v0.8.3 – AllowedIPs direkt im Verbindungsassistenten */
.access-fieldset{padding:14px!important}.field-help{margin:0 0 10px;color:#8faebe;font-size:10px;line-height:1.55}.field-help code{color:#8edcff;background:rgba(32,104,137,.22);border:1px solid rgba(83,185,230,.14);padding:1px 5px;border-radius:5px}.access-choice strong{color:#e5f5ff;font-size:10px}.allowed-preview{margin-top:10px;padding:9px 11px;border-radius:9px;background:rgba(16,54,72,.55);border:1px solid rgba(78,187,235,.18);color:#9eddf6;font:10px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}.disabled-option{opacity:.48}.disabled-option .toggle{cursor:not-allowed}.result-access{margin:10px 0;padding:10px 12px;border:1px solid rgba(76,188,235,.17);background:rgba(14,45,61,.54);border-radius:10px;display:grid;gap:4px}.result-access strong{font-size:9px;letter-spacing:.10em;text-transform:uppercase;color:#75caed}.result-access span{font:10px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#d8f2ff}.result-access small{font-size:9px;color:#85cda7}.routing-hints{margin:9px 0;padding:10px 12px;border-left:3px solid #e5a94e;background:rgba(91,64,22,.28);border-radius:7px;display:grid;gap:5px}.routing-hints strong{color:#f1c77f;font-size:10px}.routing-hints span{color:#d8bd91;font-size:9px;line-height:1.5}.client-routes{color:#77c9e8!important}
.mandatory-access{border-color:rgba(81,202,235,.28)!important;background:linear-gradient(145deg,rgba(17,60,77,.92),rgba(13,40,53,.90))!important}.mandatory-access input{accent-color:#48bee8}

/* v0.8.4 – SNX SSH Guard */
.ssh-guard-panel{margin-top:18px}.ssh-guard-panel textarea{min-height:86px;resize:vertical}.ssh-guard-panel label small{display:block;margin-top:4px;color:var(--muted);font-size:10px;font-weight:600}.ssh-guard-summary{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding:11px 13px;border-radius:10px;border:1px solid rgba(79,157,210,.16);background:rgba(19,39,54,.58);color:#aec8d9;font-size:11px}.ssh-guard-summary code{color:#8fd1f4}.status-badge.online{border-color:rgba(56,190,128,.28);background:rgba(30,125,88,.15);color:#83e2b3}.status-badge.warning{border-color:rgba(230,170,65,.28);background:rgba(156,106,25,.15);color:#f0c878}