:root {
  /* surfaces */
  --nk-bg:        #0B0E14;
  --nk-surface:   #121722;
  --nk-surface-2: #0E121B;
  --nk-border:    #232C3D;
  --nk-border-2:  #1B2330;
  --nk-row-border:#1A2130;
  /* text */
  --nk-text:      #E6EAF2;
  --nk-text-dim:  #8A94A6;
  --nk-text-mute: #8A94A6;
  --nk-text-soft: #C4CBD8;
  /* brand + state */
  --nk-accent:    #FF4438;
  --nk-accent-hover:#FF5C52;
  --nk-accent-soft:#FF6A5E;
  --nk-accent-muted:#E0857D;
  --nk-ok:#22C55E; --nk-warn:#F59E0B; --nk-err:#EF4444;
  /* method hues */
  --nk-get:#34D399; --nk-post:#FBBF24; --nk-put:#60A5FA; --nk-del:#F87171; --nk-purple:#A78BFA;
  /* radii + space */
  --nk-r-sm:8px; --nk-r-md:9px; --nk-r-lg:14px;
  --nk-gap:14px;  --nk-pad:18px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body.nk {
  background:var(--nk-bg);
  font-family:'Manrope',-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--nk-text);
  letter-spacing:.015em;
  line-height:1.5;
}
.nk-mono, .nk pre { letter-spacing:.03em; }
.nk ::selection { background:rgba(255,68,56,.32); }
.nk ::-webkit-scrollbar { width:10px; height:10px; }
.nk ::-webkit-scrollbar-thumb { background:var(--nk-border); border-radius:8px; border:2px solid var(--nk-bg); }
.nk ::-webkit-scrollbar-track { background:transparent; }
@keyframes nkpulse { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 70%{box-shadow:0 0 0 7px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }
@keyframes nkfade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.nk pre, .nk-mono { font-family:'JetBrains Mono',monospace; }
.nk a { color:inherit; text-decoration:none; }

/* ---------- layout ---------- */
.nk-shell { display:flex; min-height:100vh; }
.nk-sidebar {
  width:248px; flex-shrink:0; background:var(--nk-surface-2);
  border-right:1px solid var(--nk-border-2);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.nk-brand { padding:20px 20px 16px; display:flex; align-items:center; gap:11px; border-bottom:1px solid var(--nk-border-2); }
.nk-logo { width:34px; height:34px; border-radius:9px; background:#B94A43; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; color:#fff; }
.nk-brand-name { font-weight:800; font-size:14.5px; letter-spacing:.03em; }
.nk-brand-sub { font-size:9.5px; color:var(--nk-text-mute); letter-spacing:.2em; text-transform:uppercase; }
.nk-nav { flex:1; padding:14px 12px; display:flex; flex-direction:column; gap:3px; overflow-y:auto; }
.nk-nav-label { font-size:10px; font-weight:700; color:var(--nk-text-mute); letter-spacing:.14em; text-transform:uppercase; padding:10px 12px 6px; }
.nk-nav-label.mt { padding-top:16px; }
.nk-nav-item {
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:transparent; border:none; border-left:3px solid transparent; border-radius:8px;
  padding:9px 11px; color:var(--nk-text-dim); font-family:inherit; font-size:13.5px; font-weight:500;
  white-space:nowrap; cursor:pointer;
}
.nk-nav-item:hover { background:rgba(255,255,255,.04); }
.nk-nav-item.active { background:rgba(255,68,56,.10); border-left-color:var(--nk-accent); color:var(--nk-accent-soft); font-weight:700; }
.nk-nav-item svg { width:18px; height:18px; flex-shrink:0; }
.nk-user { padding:12px; border-top:1px solid var(--nk-border-2); }
.nk-user-card { display:flex; align-items:center; gap:10px; padding:8px; border-radius:9px; background:var(--nk-surface); }
.nk-avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#FF4438,#7a1f1a); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; }
.nk-user-name { font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nk-user-role { font-size:10.5px; color:var(--nk-text-mute); }
.nk-icon-btn { background:none; border:none; color:var(--nk-text-mute); cursor:pointer; padding:4px; }
.nk-icon-btn:hover { color:var(--nk-accent-hover); }

.nk-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.nk-topbar {
  height:60px; flex-shrink:0; border-bottom:1px solid var(--nk-border-2);
  background:rgba(11,14,20,.8); backdrop-filter:blur(8px);
  display:flex; align-items:center; gap:16px; padding:0 26px; position:sticky; top:0; z-index:5;
}
.nk-crumb { font-size:14px; color:var(--nk-text-mute); font-family:'JetBrains Mono',monospace; }
.nk-pill { display:flex; align-items:center; gap:7px; background:var(--nk-surface); border:1px solid var(--nk-border); border-radius:999px; padding:5px 13px 5px 11px; font-size:12px; color:var(--nk-text-dim); font-family:'JetBrains Mono',monospace; }
.nk-dot-pulse { width:8px; height:8px; border-radius:50%; background:var(--nk-ok); animation:nkpulse 2.4s infinite; }
.nk-tag { font-size:12px; color:var(--nk-text-mute); font-family:'JetBrains Mono',monospace; background:var(--nk-surface); border:1px solid var(--nk-border); border-radius:8px; padding:6px 11px; }
.nk-content { flex:1; padding:26px 30px 60px; overflow-x:hidden; }
.nk-wrap { max-width:1180px; }
.nk-wrap-wide { max-width:1280px; }
.nk-wrap-narrow { max-width:860px; }

/* ---------- headers ---------- */
.nk-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
h1.nk-h1 { font-size:25px; font-weight:800; letter-spacing:-.01em; }
.nk-sub { font-size:13.5px; color:var(--nk-text-dim); margin-top:4px; }
.nk-section-label { font-size:11px; font-weight:700; color:var(--nk-text-mute); letter-spacing:.14em; text-transform:uppercase; margin:22px 0 10px; }

/* ---------- buttons ---------- */
.nk-btn { display:inline-flex; align-items:center; gap:8px; border-radius:var(--nk-r-md); padding:9px 15px; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; border:none; }
.nk-btn--primary { background:rgba(255,68,56,.10); border:1px solid rgba(224,133,125,.55); color:#F2B5AF; }
.nk-btn--primary:hover { background:rgba(255,68,56,.18); border-color:var(--nk-accent-muted); color:#FFD3CF; }
.nk-btn--ghost { background:var(--nk-surface); border:1px solid var(--nk-border); color:var(--nk-text); font-weight:600; }
.nk-btn--ghost:hover { border-color:var(--nk-accent); }
.nk-btn--danger { background:transparent; border:1px solid var(--nk-err); color:#F87171; }
.nk-btn--danger:hover { background:rgba(239,68,68,.12); }

/* ---------- cards / tables ---------- */
.nk-card { background:var(--nk-surface); border:1px solid var(--nk-border); border-radius:var(--nk-r-lg); }
.nk-card--pad { padding:var(--nk-pad); }
.nk-card--clip { overflow:hidden; }
.nk-card-title { padding:15px 18px; border-bottom:1px solid var(--nk-border); font-size:13.5px; font-weight:700; }
.nk-card-title.flex { display:flex; justify-content:space-between; align-items:center; }
.nk-thead { padding:11px 18px; border-bottom:1px solid var(--nk-border); font-size:11px; font-weight:700; color:var(--nk-text-mute); letter-spacing:.06em; text-transform:uppercase; }
.nk-trow { padding:12px 18px; border-bottom:1px solid var(--nk-row-border); align-items:center; }
.nk-trow:last-child { border-bottom:none; }
.nk-trow.link { cursor:pointer; }
.nk-trow.link:hover, .nk-trow.hov:hover { background:#161D29; }
.nk-grid { display:grid; gap:14px; }

/* ---------- badges ---------- */
.nk-badge { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; border-radius:6px; padding:3px 8px; }
.nk-badge--get  { color:var(--nk-get);  background:rgba(52,211,153,.12); }
.nk-badge--post { color:var(--nk-post); background:rgba(251,191,36,.12); }
.nk-badge--put  { color:var(--nk-put);  background:rgba(96,165,250,.12); }
.nk-badge--delete { color:var(--nk-del); background:rgba(248,113,113,.12); }
.nk-state { font-size:11px; font-weight:700; border-radius:6px; padding:3px 9px; }
.nk-chip { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--nk-purple); background:rgba(167,139,250,.12); border-radius:6px; padding:2px 8px; }

/* ---------- stats / banner ---------- */
.nk-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.nk-stat-label { font-size:11.5px; font-weight:600; color:var(--nk-text-dim); letter-spacing:.04em; text-transform:uppercase; }
.nk-stat-value { font-size:27px; font-weight:800; margin-top:9px; font-family:'JetBrains Mono',monospace; letter-spacing:-.02em; }
.nk-stat-delta { display:flex; align-items:center; gap:5px; margin-top:6px; font-size:12px; }
.nk-banner { display:flex; align-items:center; gap:16px; background:linear-gradient(90deg,rgba(34,197,94,.10),transparent); border:1px solid rgba(34,197,94,.3); border-radius:14px; padding:18px 22px; margin-bottom:18px; }
.nk-banner-ico { width:44px; height:44px; border-radius:50%; background:rgba(34,197,94,.16); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ---------- inputs ---------- */
.nk-input { width:100%; background:var(--nk-bg); border:1px solid var(--nk-border); border-radius:var(--nk-r-md); padding:10px 13px; color:var(--nk-text); font-family:inherit; font-size:13.5px; }
.nk-input:focus { border-color:var(--nk-accent); outline:none; }
.nk-label { display:block; font-size:12px; font-weight:600; color:var(--nk-text-dim); margin-bottom:6px; }
.nk-pre { font-family:'JetBrains Mono',monospace; font-size:12px; line-height:1.6; color:var(--nk-text-soft); background:var(--nk-bg); border:1px solid var(--nk-border); border-radius:12px; padding:16px; overflow:auto; white-space:pre-wrap; word-break:break-word; }

/* ---------- toggles ---------- */
.nk-toggle { width:42px; height:24px; border-radius:999px; position:relative; flex-shrink:0; }
.nk-toggle .knob { position:absolute; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; }
.nk-toggle.on { background:#B94A43; } .nk-toggle.on .knob { left:21px; }
.nk-toggle.off { background:var(--nk-border); } .nk-toggle.off .knob { left:3px; }

/* ---------- endpoint picker (api tester) ---------- */
.nk-ep-picker { position:relative; }
.nk-ep-menu {
  position:absolute; top:calc(100% + 6px); right:0; z-index:20; min-width:340px; max-height:300px; overflow:auto;
  background:var(--nk-surface); border:1px solid var(--nk-border); border-radius:11px; padding:6px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
}
.nk-ep-item {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:none; border-radius:8px; padding:9px 10px; cursor:pointer; font-family:inherit; font-size:12.5px;
}
.nk-ep-item:hover { background:#161D29; }

.nk-status-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.nk-empty { padding:40px 18px; text-align:center; color:var(--nk-text-mute); font-size:13px; }
.nk-fade { animation:nkfade .25s ease both; }


/* ---------- clickable rows (affordance) ---------- */
.nk-trow.link { position:relative; padding-right:40px; border-left:3px solid transparent; transition:background .12s, border-color .12s; }
.nk-trow.link::after {
  content:''; position:absolute; right:16px; top:50%; width:7px; height:7px;
  border-right:2px solid var(--nk-text-mute); border-top:2px solid var(--nk-text-mute);
  transform:translateY(-50%) rotate(45deg); transition:transform .12s, border-color .12s;
}
.nk-trow.link:hover { border-left-color:var(--nk-accent-muted); }
.nk-trow.link:hover::after { border-color:var(--nk-accent-soft); transform:translate(3px,-50%) rotate(45deg); }
/* Row that holds its own buttons: the link is stretched over the row (links can't be nested). */
.nk-row-link { position:absolute; inset:0; z-index:0; }
.nk-row-action { position:relative; z-index:1; }
.nk-retry-btn { display:inline-flex; align-items:center; gap:5px; justify-self:start; padding:3px 9px; border-radius:7px; font-size:11px; font-weight:600; text-decoration:none; background:var(--nk-surface); border:1px solid var(--nk-border); color:var(--nk-text-dim); }
.nk-retry-btn:hover { border-color:var(--nk-accent); color:var(--nk-accent-soft); }

/* ---------- collapsible widgets ---------- */
.nk-widget-head { display:flex; align-items:center; gap:8px; padding:15px 18px; border-bottom:1px solid var(--nk-border); font-size:13.5px; font-weight:700; }
.nk-widget-head .grow { flex:1; }
.nk-widget-btn { background:none; border:1px solid transparent; border-radius:6px; color:var(--nk-text-mute); cursor:pointer; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; font-family:inherit; }
.nk-widget-btn:hover { color:var(--nk-text); border-color:var(--nk-border); background:rgba(255,255,255,.04); }
.nk-widget-btn svg { transition:transform .15s; }
.nk-widget.collapsed .nk-widget-btn.toggle svg { transform:rotate(-90deg); }
.nk-widget.collapsed .nk-widget-body { display:none; }
.nk-widget.collapsed .nk-widget-head { border-bottom:none; }
.nk-widget.closed { display:none; }
.nk-widget-body.scroll { max-height:340px; overflow-y:auto; }
.nk-restore { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; font-size:12px; color:var(--nk-text-mute); }
.nk-restore:empty { display:none; }
.nk-restore button { background:var(--nk-surface); border:1px dashed var(--nk-border); border-radius:999px; color:var(--nk-text-dim); font-family:inherit; font-size:12px; padding:4px 12px; cursor:pointer; }
.nk-restore button:hover { border-color:var(--nk-accent-muted); color:var(--nk-text); }

/* ---------- alert ---------- */
.nk-alert { border:1px solid rgba(245,158,11,.35); background:rgba(245,158,11,.07); border-radius:var(--nk-r-lg); }
.nk-alert .nk-widget-head { border-bottom-color:rgba(245,158,11,.25); color:#F5C168; }

/* ---------- service health ---------- */
.nk-health { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.nk-health--yellow { background:var(--nk-warn); box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.nk-health--red { background:var(--nk-err); box-shadow:0 0 0 3px rgba(239,68,68,.20); }
.nk-svc.has-issue > .nk-trow { cursor:pointer; }
.nk-svc.has-issue > .nk-trow:hover { background:#161D29; }
.nk-svc-caret { transition:transform .15s; color:var(--nk-text-mute); flex-shrink:0; }
.nk-svc.open .nk-svc-caret { transform:rotate(180deg); }
.nk-svc-detail { display:none; background:var(--nk-surface-2); border-bottom:1px solid var(--nk-row-border); padding:4px 0; }
.nk-svc.open .nk-svc-detail { display:block; }

/* ---------- endpoint groups (accordion) ---------- */
.nk-grp-head { display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; user-select:none; }
.nk-grp-head:hover { background:#161D29; }
.nk-grp.open .nk-grp-head { border-bottom:1px solid var(--nk-border); }
.nk-grp-chevron { color:var(--nk-text-mute); transition:transform .15s; flex-shrink:0; }
.nk-grp.open .nk-grp-chevron { transform:rotate(90deg); color:var(--nk-accent-soft); }
.nk-grp-body { display:none; }
.nk-grp.open .nk-grp-body { display:block; }
.nk-fn-row.hl { background:rgba(255,68,56,.07); box-shadow:inset 3px 0 0 var(--nk-accent-muted); }
.nk-filter-chip { display:flex; align-items:center; gap:10px; margin-bottom:16px; font-size:12.5px; color:var(--nk-text-dim); }
.nk-filter-chip code { font-family:'JetBrains Mono',monospace; color:var(--nk-text-soft); background:var(--nk-surface); border:1px solid var(--nk-border); border-radius:6px; padding:2px 8px; }
a.nk-fn-link { color:var(--nk-accent-soft); border-bottom:1px dotted currentColor; }
a.nk-fn-link:hover { color:#FFD3CF; }

.nk-health--green { background:var(--nk-ok); box-shadow:0 0 0 3px rgba(34,197,94,.16); }
.nk-pill .nk-pill-dot { width:8px; height:8px; border-radius:50%; }
.nk-src-head { padding:10px 18px; font-size:11px; font-weight:700; color:var(--nk-text-dim); letter-spacing:.08em; text-transform:uppercase; background:var(--nk-surface-2); border-top:1px solid var(--nk-border); border-bottom:1px solid var(--nk-row-border); }

/* "Erledigt" dialog and the blue info icon that shows the resolve note on hover. */
.nk-dialog { position:fixed; inset:0; margin:auto; background:var(--nk-surface); color:var(--nk-text); border:1px solid var(--nk-border); border-radius:var(--nk-r-md); padding:22px; width:min(460px, 92vw); }
.nk-dialog::backdrop { background:rgba(0,0,0,.6); }
.nk-resolved-i { display:inline-flex; color:#60A5FA; cursor:help; }