/* Elyra Router app — visual language lifted from the landing page:
   paper surface + deep indigo gradient, NB Architekt headings, mono body, label tags with double bars,
   cut-corner buttons, dashed grid with registration crosses, bracketed cards. */
@font-face { font-family:'nb'; src:url('/wp-content/themes/startdigital/static/font/nb_architekt.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'nb'; src:url('/wp-content/themes/startdigital/static/font/nb_architekt_bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'ki'; src:url('/wp-content/themes/startdigital/static/font/ki.woff') format('woff'); font-display:swap; }

:root{
  --ink:#091e3c; --ink2:#2b3d5e; --dim:#6b7792; --paper:#efefef; --card:rgba(255,255,255,.72);
  --indigo:#4951B7; --peri:#6267af; --royal:#2f2fa8; --deep:#141047;
  --line:rgba(9,30,60,.14); --line2:rgba(9,30,60,.08);
  --ok:#0f9d6b; --warn:#b97a0a; --bad:#d23a55; --sim:#8a5cf6;
  --mono:'ki',ui-monospace,Consolas,monospace; --head:'nb','ki',system-ui,sans-serif;
  --side:248px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font:13px/1.6 var(--mono);overflow:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .12 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:var(--indigo);text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--indigo);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:rgba(73,81,183,.35)}::-webkit-scrollbar-track{background:transparent}

.app{display:grid;grid-template-columns:var(--side) 1fr;height:100vh;position:relative;z-index:1}

/* ---------- sidebar ---------- */
.side{position:relative;display:flex;flex-direction:column;color:#fff;overflow:hidden;
  background:radial-gradient(130% 70% at 0% 105%,rgba(98,103,175,.9),transparent 62%),radial-gradient(90% 50% at 110% 0%,rgba(73,81,183,.55),transparent 60%),linear-gradient(180deg,#0a1b45 0%,#1a1473 58%,#2b2aa0 100%)}
.side::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.side>*{position:relative}
.brand{display:flex;align-items:center;gap:12px;padding:22px 22px 18px}
.brand img.mark{height:30px;width:auto}
.brand .wm{font:700 22px/1 var(--head);letter-spacing:3px}
.brand .ver{margin-left:auto;font-size:9px;letter-spacing:2px;opacity:.6;border:1px solid rgba(255,255,255,.3);padding:2px 6px}
nav{padding:6px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.grp{font-size:9px;letter-spacing:3.5px;opacity:.55;padding:18px 12px 8px}
.nav{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid transparent;background:none;color:rgba(255,255,255,.78);cursor:pointer;text-align:left;
  font:700 11px var(--mono);letter-spacing:2px;text-transform:uppercase;position:relative;transition:.15s}
.nav svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:square}
.nav:hover{background:rgba(255,255,255,.1);color:#fff}
.nav.on{background:#fff;color:var(--ink);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.nav .n{margin-left:auto;font-size:9px;letter-spacing:1px;padding:1px 6px;background:rgba(255,255,255,.18)}
.nav.on .n{background:var(--indigo);color:#fff}
.nodecard{margin:12px;padding:14px;border:1px dashed rgba(255,255,255,.35);font-size:10px;letter-spacing:1px;line-height:1.9;background:rgba(9,30,60,.35)}
.nodecard b{color:#fff;font-weight:400}.nodecard .k{opacity:.6}
.nodecard .id{word-break:break-all;opacity:.9}

/* ---------- main ---------- */
.main{display:flex;flex-direction:column;min-width:0;height:100vh}
.top{display:flex;align-items:center;gap:14px;padding:0 32px;height:60px;flex:none;border-bottom:1px solid var(--line);background:rgba(239,239,239,.82);backdrop-filter:blur(8px)}
.crumb{font-size:10px;letter-spacing:3px;color:var(--dim)}.crumb b{color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1.5px;padding:6px 12px;border:1px solid var(--line);background:rgba(255,255,255,.6);text-transform:uppercase;white-space:nowrap}
.chip.sim{color:var(--sim);border-color:rgba(138,92,246,.4)}
.top .r{margin-left:auto;display:flex;gap:10px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(15,157,107,.5);animation:ping 2.2s infinite}
.dot.off{background:var(--bad);animation:none}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(15,157,107,0)}100%{box-shadow:0 0 0 0 rgba(15,157,107,0)}}
.scroll{flex:1;overflow-y:auto;padding:0 0 80px;position:relative}
.view{display:none;animation:rise .35s both}.view.on{display:block}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}