/* =========================================================================
   xray-panel — premium dark theme
   -------------------------------------------------------------------------
   Everything here is layered *on top of* Tailwind CDN utilities, so existing
   templates keep working while getting a refined look. We override a handful
   of Tailwind classes (slate-*, indigo-*, rounded-*) via higher specificity
   or !important where the utility uses inline styles.
   ========================================================================= */

/* ----- tokens ----- */
:root {
  /* Surfaces — a cool, near-black palette with a faint violet tint. */
  --bg-void:       #05060a;
  --bg-deep:       #0a0b12;
  --bg-panel:      rgba(18, 20, 32, 0.62);
  --bg-panel-hi:   rgba(26, 28, 46, 0.70);
  --bg-input:      rgba(10, 11, 18, 0.75);

  /* Borders — soft, layered. */
  --border-hair:   rgba(255, 255, 255, 0.05);
  --border-soft:   rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Text — never pure white; eases the eyes. */
  --text-primary:  #ebebf5;
  --text-soft:     #c6c6d8;
  --text-muted:    #8b8ba5;
  --text-faint:    #5f6079;

  /* Accent — indigo → violet, with a cyan companion for arcs/highlights. */
  --accent:        #8b8dff;
  --accent-strong: #6366f1;
  --accent-glow:   rgba(124, 127, 255, 0.35);
  --accent-soft:   rgba(124, 127, 255, 0.12);
  --cyan:          #5ee3d2;

  /* Status. */
  --ok:            #34d3a8;
  --warn:          #f5b866;
  --err:           #ff8787;

  /* Motion. */
  --ease:          cubic-bezier(.22, .61, .36, 1);
}

/* ----- base ----- */
[x-cloak] { display: none !important; }

html, body {
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: "Inter", "Inter Variable", -apple-system, "SF Pro Text",
               "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Fleet controls: a compact, readable control strip that still wraps into
   full-width touch targets on mobile.  It replaces hunting through a long
   mixed list when dozens of nodes are present. */
.fleet-filter-bar {
  display: grid;
  grid-template-columns: auto minmax(220px, 1.5fr) repeat(4, minmax(130px, .7fr)) auto;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(13, 15, 26, .82);
}
.fleet-filter-title { display: grid; gap: 2px; min-width: 88px; }
.fleet-filter-bar select,
.fleet-search input {
  width: 100%; min-height: 42px; padding: 0 11px;
  color: var(--text-primary); background: var(--bg-input);
  border: 1px solid var(--border-soft); border-radius: 10px;
  font-size: 14px;
}
.fleet-search { display: flex; align-items: center; gap: 8px; padding: 0 11px; min-height: 42px; color: var(--text-muted); background: var(--bg-input); border: 1px solid var(--border-soft); border-radius: 10px; }
.fleet-search input { min-height: 0; padding: 0; border: 0; background: transparent; }
.fleet-filter-reset { min-height: 42px; padding: 0 12px; color: var(--text-soft); border: 1px solid var(--border-soft); border-radius: 10px; font-size: 13px; }
.fleet-filter-reset:hover { color: var(--text-primary); background: rgba(255,255,255,.06); }
.fleet-empty { margin-top: 16px; padding: 30px 16px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: 14px; }
.fleet-node-card { min-height: 236px; line-height: 1.45; }
.fleet-node-card h3 { font-size: 16px; line-height: 1.25; }
.fleet-node-card .text-sm { font-size: 14px; }
.fleet-node-card .text-xs { line-height: 1.4; }

@media (max-width: 1280px) {
  .fleet-filter-bar { grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(140px, 1fr)); }
  .fleet-filter-title { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
}
@media (max-width: 720px) {
  .fleet-filter-bar { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
  .fleet-filter-title, .fleet-search { grid-column: 1 / -1; }
  .fleet-filter-reset { grid-column: 1 / -1; }
}

body {
  /* Very subtle radial wash — gives the globe behind a "spotlit" feel. */
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,    rgba(99, 102, 241, 0.10),  transparent 60%),
    radial-gradient(ellipse 70% 60% at 90% 100%,  rgba(80, 220, 220, 0.04),  transparent 50%),
    linear-gradient(180deg, #0a0b12 0%, #05060a 100%);
  background-attachment: fixed;
  /* Give body its own stacking context so #globe-bg (z-index: -1) is
     painted above the body background but below content — otherwise the
     canvas sinks all the way to the root and becomes invisible. */
  isolation: isolate;
}

/* Headings — tighter letter spacing, lighter weight than Tailwind default. */
h1, h2, h3, h4 {
  letter-spacing: -0.022em;
  font-weight: 600;
}
h1 { font-weight: 600; }
.text-lg, .text-xl, .text-2xl { letter-spacing: -0.02em; }

/* ----- ambient network background ----- */
#globe-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Never intercept clicks / hovers — the canvas sits at the bottom of
     the stacking context but should be transparent to mouse events so
     content layers above always receive them, and so Vanta's WebGL
     renderer doesn't pin a hit-test region the size of the viewport. */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1400ms var(--ease);
}
#globe-bg.is-ready { opacity: 0.42; }   /* muted — never fights content  */
#globe-bg canvas { display: block; }

/* Vignette so content at the edges is always legible. */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, transparent 50%,
                    rgba(5, 6, 10, 0.65) 100%);
}

/* Disable globe for reduced-motion users and on small screens where it's
   both heavy and visually cluttered. */
@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  #globe-bg { display: none; }
}

/* ----- glass surfaces (Tailwind overrides) ----- */
.bg-slate-900,
.bg-slate-900\/70,
.bg-slate-900\/60 {
  background: var(--bg-panel) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.bg-slate-950,
.bg-slate-950\/80 {
  background: var(--bg-input) !important;
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.bg-slate-800,
.hover\:bg-slate-800:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(10px);
}
.bg-slate-700,
.hover\:bg-slate-700:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

/* Borders softened universally. */
.border-slate-800, .border-slate-700, .border-slate-600 {
  border-color: var(--border-soft) !important;
}

/* Text colours — the stock Tailwind slate is too cold and greenish here. */
.text-slate-100, .text-white { color: var(--text-primary) !important; }
.text-slate-200              { color: var(--text-soft) !important; }
.text-slate-300              { color: var(--text-soft) !important; }
.text-slate-400              { color: var(--text-muted) !important; }
.text-slate-500              { color: var(--text-faint) !important; }
.text-slate-600              { color: var(--text-faint) !important; opacity: .85; }

/* ----- cards ----- */
.rounded-xl, .rounded-2xl, .rounded-lg {
  /* Slightly softer corner radii than Tailwind defaults. */
  border-radius: 14px !important;
}
.rounded-2xl { border-radius: 18px !important; }
.rounded-full { border-radius: 999px !important; }

/* Hover lift for clickable cards (server list, etc). */
.hover\:border-indigo-600:hover {
  border-color: rgba(124, 127, 255, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(124, 127, 255, 0.20) inset,
    0 12px 40px -12px rgba(99, 102, 241, 0.35);
  transform: translateY(-2px);
}
.grid > div, .grid > article { transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease); }

/* ----- buttons ----- */
button, a.button {
  transition:
    background-color 180ms var(--ease),
    color            180ms var(--ease),
    transform        140ms var(--ease),
    box-shadow       180ms var(--ease),
    filter           180ms var(--ease) !important;
}
button:active { transform: translateY(1px) scale(0.99); }
button:disabled, button[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* Primary (indigo) — gradient + glow. */
.bg-indigo-600, .bg-indigo-700 {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #fff !important;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(124, 127, 255, 0.30),
    0 10px 32px -10px rgba(99, 102, 241, 0.55);
}
.hover\:bg-indigo-500:hover, .hover\:bg-indigo-600:hover {
  filter: brightness(1.10) saturate(1.10);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.12) inset,
    0 0 0 1px rgba(124, 127, 255, 0.45),
    0 12px 36px -8px rgba(99, 102, 241, 0.65);
}
/* Faded indigo (tab-active pill in header, pressed states). */
.text-indigo-300 { color: #b8b9ff !important; }
.bg-indigo-900\/40, .bg-indigo-900 {
  background: rgba(99, 102, 241, 0.15) !important;
}

/* Emerald — secondary CTA. */
.bg-emerald-700, .bg-emerald-600 {
  background: linear-gradient(135deg, #10b981 0%, #34d3a8 100%) !important;
  color: #05241d !important;
  box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.55);
}
.hover\:bg-emerald-500:hover, .hover\:bg-emerald-600:hover { filter: brightness(1.08); }
.bg-emerald-900 { background: rgba(16, 185, 129, 0.18) !important; }
.text-emerald-300, .text-emerald-400 { color: var(--ok) !important; }

/* Amber — warnings. */
.bg-amber-700, .bg-amber-600 {
  background: linear-gradient(135deg, #d97706 0%, #f5b866 100%) !important;
  color: #1a1000 !important;
}
.bg-amber-950 { background: rgba(245, 184, 102, 0.10) !important; }
.border-amber-700 { border-color: rgba(245, 184, 102, 0.35) !important; }
.text-amber-200, .text-amber-300 { color: #f5cf8c !important; }

/* Red — destructive. */
.bg-red-800, .bg-red-700, .bg-red-900 {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important;
}
.bg-red-900 { background: rgba(239, 68, 68, 0.18) !important; }
.text-red-300, .text-red-400 { color: var(--err) !important; }

/* ----- form controls ----- */
input, select, textarea {
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease),
              background 160ms var(--ease) !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* Focus ring override on Tailwind's utility. */
.focus\:border-indigo-500:focus {
  border-color: var(--accent) !important;
}

/* ----- header/nav ----- */
header {
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background: rgba(10, 11, 18, 0.55) !important;
  border-bottom: 1px solid var(--border-hair) !important;
}
nav button {
  position: relative;
}
nav button::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 180ms var(--ease);
}
nav button.bg-slate-800::after { opacity: 1; }

/* ----- tables / code ----- */
pre, code, kbd {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;
  font-variant-ligatures: none;
}

/* ----- icons (Lucide) ----- */
/* Default size + alignment for every <i data-lucide> inside buttons/rows. */
[data-lucide],
.lucide {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
  display: inline-block;
  vertical-align: -0.19em;
  flex-shrink: 0;
}
button [data-lucide], button .lucide {
  margin-right: 2px;
}
/* Subtle icon-only buttons (close "×" etc). */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: var(--text-muted);
  background: transparent;
}
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}
.icon-btn [data-lucide],
.icon-btn svg {
  width: 18px; height: 18px;
  margin: 0;
}
/* Let clicks on icons bubble to the button. Lucide swaps <i data-lucide> for
   an <svg>; without this, rapid clicks can land on an inner <line>/<path>
   and Chrome on some zoom levels doesn't retarget to the <button> ancestor.
   The close "×" icon-btns were the most visible casualty of that. */
button svg,
button [data-lucide],
button .lucide {
  pointer-events: none;
}

/* One-liner install boxes, vless links, etc. */
.bg-slate-950 code, pre.bg-slate-950 {
  color: var(--text-soft) !important;
}

/* ----- scrollbars ----- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.12); background-clip: padding-box; }

/* ----- selection ----- */
::selection { background: var(--accent-soft); color: var(--text-primary); }

/* ----- toast ----- */
[x-show*="toast"] > div {
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* ----- login page special-cases ----- */
body.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-card {
  width: 100%;
  max-width: 22rem;
}
.login-card h1 {
  font-size: 1.75rem;
  font-weight: 600;
  background: linear-gradient(135deg, #fff 0%, #b8b9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* A subtle animated accent line under major section titles. */
section > .flex > h2 {
  position: relative;
  padding-bottom: 2px;
}

/* =========================================================================
   Light theme — toggled via <html data-theme="light">. Reassigns the root
   design tokens so every rule above automatically picks up the new values.
   ========================================================================= */
html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="light"]:root,
html[data-theme="light"] body {
  --bg-void:       #f2f3f8;
  --bg-deep:       #e9ebf3;
  --bg-panel:      rgba(255, 255, 255, 0.78);
  --bg-panel-hi:   rgba(255, 255, 255, 0.9);
  --bg-input:      rgba(255, 255, 255, 0.9);

  --border-hair:   rgba(16, 19, 38, 0.06);
  --border-soft:   rgba(16, 19, 38, 0.10);
  --border-strong: rgba(16, 19, 38, 0.18);

  --text-primary:  #151729;
  --text-soft:     #2a2c42;
  --text-muted:    #595c78;
  --text-faint:    #8e90a8;

  --accent:        #4f52d9;
  --accent-strong: #4a4de4;
  --accent-glow:   rgba(99, 102, 241, 0.28);
  --accent-soft:   rgba(99, 102, 241, 0.10);
}

html[data-theme="light"] body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,    rgba(99, 102, 241, 0.14),  transparent 60%),
    radial-gradient(ellipse 70% 60% at 90% 100%,  rgba(80, 220, 220, 0.06),  transparent 50%),
    linear-gradient(180deg, #f6f7fb 0%, #e9ebf3 100%);
  color: var(--text-primary);
}

html[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, transparent 50%,
                    rgba(240, 241, 248, 0.55) 100%);
}

html[data-theme="light"] #globe-bg.is-ready { opacity: 0.22; }

/* Re-tint the Tailwind slate utilities when in light mode. */
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-white       { color: var(--text-primary) !important; }
html[data-theme="light"] .text-slate-200   { color: var(--text-soft) !important; }
html[data-theme="light"] .text-slate-300   { color: var(--text-soft) !important; }
html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-slate-500   { color: var(--text-muted) !important; }
html[data-theme="light"] .text-slate-600   { color: var(--text-faint) !important; }

html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-900\/70,
html[data-theme="light"] .bg-slate-900\/60 { background: var(--bg-panel) !important; }
html[data-theme="light"] .bg-slate-950,
html[data-theme="light"] .bg-slate-950\/80 { background: var(--bg-input) !important; }
html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] .hover\:bg-slate-800:hover { background: rgba(16, 19, 38, 0.04) !important; }
html[data-theme="light"] .bg-slate-700,
html[data-theme="light"] .hover\:bg-slate-700:hover { background: rgba(16, 19, 38, 0.07) !important; }

html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-700,
html[data-theme="light"] .border-slate-600 { border-color: var(--border-soft) !important; }

.metric-tile,
.chart-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}

.metric-tile {
  min-height: 88px;
  padding: 0.75rem;
}

.chart-panel {
  padding: 1rem;
  min-width: 0;
}

.chart-frame {
  position: relative;
  width: 100%;
  height: 280px;
  min-height: 280px;
}

.chart-frame > canvas {
  width: 100% !important;
  height: 100% !important;
}

/* =========================================================================
   Mobile (≤ 768 px) layout tightening
   -------------------------------------------------------------------------
   The panel is built desktop-first with Tailwind ``flex flex-wrap`` toolbars
   and centered ``fixed inset-0`` modals. On a 390-pixel phone viewport the
   defaults blow up: the 8-tab header nav wraps into 8 rows, the 9-button
   server-detail toolbar wraps into 6 rows of one button each, and modals
   that exceed the viewport hide their Save/Cancel footer below the fold
   with no way to scroll to it.

   Everything below is *additive* CSS. No template structure or behaviour
   changes — just responsive overrides that kick in on phones.
   ========================================================================= */

/* Disable the browser's vertical overscroll handler (Safari/Chrome on iOS
   trigger a page reload when the user pull-to-refreshes from the top of a
   fast-scrolling list — that's exactly what was happening on the clients
   table on the server-detail page). */
html, body {
  overscroll-behavior-y: contain;
}

/* ----- header: keep the nav on a single horizontally-scrollable row ----- */
@media (max-width: 768px) {
  header > div {
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  header nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: 0.25rem !important;
    min-width: 0;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav > button {
    flex-shrink: 0;
    white-space: nowrap;
  }
  header h1 {
    flex-shrink: 0;
    font-size: 1rem;
  }
  /* The right cluster (theme / username / logout) — keep it from
     pushing the nav off-screen by collapsing the username label. */
  header > div > .ml-auto {
    flex-shrink: 0;
    gap: 0.5rem !important;
  }
  header > div > .ml-auto > span {
    display: none;
  }
}

/* ----- action toolbars: more aggressive wrapping, smaller buttons ----- */
@media (max-width: 640px) {
  .chart-frame {
    height: 230px;
    min-height: 230px;
  }
  /* Generic ``flex flex-wrap`` button rows — the server-detail
     management toolbar, modal preset chips, dashboard quick actions.
     Tighter padding + slightly smaller text means 2-3 buttons fit per
     row instead of 1, so the toolbar collapses from ~280 px tall to
     ~120 px tall on a 390-px-wide viewport. */
  .flex.flex-wrap > button,
  .flex.flex-wrap > a.button {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    font-size: 0.8125rem !important;
    gap: 0.375rem !important;
  }
  .flex.flex-wrap > button > i,
  .flex.flex-wrap > button > svg,
  .flex.flex-wrap > a.button > i,
  .flex.flex-wrap > a.button > svg {
    width: 14px;
    height: 14px;
  }
  /* ``ml-auto`` on the destructive button inside the toolbar pushes it
     into its own row on narrow screens — kill that on mobile so it
     wraps inline with the rest. */
  .flex.flex-wrap > .ml-auto {
    margin-left: 0 !important;
  }
}

/* ----- modals: make them scrollable inside the viewport ----- */
/* The inner card of every modal (``bg-slate-900 ... rounded-2xl``)
   doesn't cap its own height, so when the form is taller than the
   screen the bottom Save/Cancel row sits below the fold with no way
   to reach it. Cap its height to the visible viewport and let it
   scroll internally. ``dvh`` accounts for the iOS Safari URL bar. */
.fixed.inset-0 > .bg-slate-900,
.fixed.inset-0 > .border-slate-800.bg-slate-900,
.fixed.inset-0 > div:not([class*="bg-black"]):not(.fixed) {
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* The bulk-upgrade dialog has dense status tables. Keep their own
   horizontal scroller inside the modal instead of clipping the right-hand
   status/message columns on narrow phones. */
.upgrade-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: thin;
}
.upgrade-table {
  min-width: 620px;
}

@media (max-width: 640px) {
  /* Anchor modals to the top on mobile instead of vertical center, so
     when the form grows taller than the viewport the *top* stays on
     screen (with the close button) and the bottom is reachable via
     internal scroll. */
  .fixed.inset-0.flex.items-center {
    align-items: flex-start !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  /* The modal card itself: full-width with a tight margin, slightly
     smaller padding so form fields actually fit. */
  .fixed.inset-0 > .bg-slate-900,
  .fixed.inset-0 > .border-slate-800.bg-slate-900 {
    padding: 1rem !important;
    max-height: calc(100dvh - 1.5rem);
  }
  .upgrade-modal-card {
    min-width: 0;
    width: 100%;
  }
  .upgrade-table-wrap {
    padding-bottom: .15rem;
  }
}

/* ----- tables: let the clients table scroll horizontally on mobile ----- */
/* The wrapper around the clients table uses ``overflow-hidden`` which
   clips the rightmost actions column (link / copy / pause / edit /
   reset / delete) — six buttons that don't fit in 390 px. Allow
   horizontal scroll so they're reachable on mobile. */
@media (max-width: 768px) {
  .bg-slate-900.border-slate-800.rounded-xl.overflow-hidden:has(> table),
  .bg-slate-900.border.border-slate-800.rounded-xl.overflow-hidden:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .bg-slate-900.border-slate-800.rounded-xl.overflow-hidden:has(> table) > table,
  .bg-slate-900.border.border-slate-800.rounded-xl.overflow-hidden:has(> table) > table {
    min-width: 560px;
  }
}

/* ----- main content padding: tighter on phones ----- */
@media (max-width: 640px) {
  main.max-w-6xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 1rem !important;
  }
}

/* =========================================================================
   NodeFlow-inspired application shell
   ========================================================================= */
:root {
  --sidebar-width: 248px;
  --accent: #fb7185;
  --accent-strong: #e11d48;
  --accent-glow: rgba(244, 63, 94, .28);
  --accent-soft: rgba(244, 63, 94, .12);
}

body {
  background:
    radial-gradient(circle at 82% -10%, rgba(244, 63, 94, .10), transparent 30rem),
    #08090d;
}

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  padding: 1rem .8rem;
  color: #f8fafc;
  background: #07080b;
  border-right: 1px solid rgba(255,255,255,.075);
  box-shadow: 18px 0 60px rgba(0,0,0,.18);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 52px;
  padding: .35rem .55rem 1rem;
  margin-bottom: .45rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: white;
  border-radius: 11px;
  background: linear-gradient(145deg, #fb7185, #be123c);
  box-shadow: 0 10px 28px rgba(225,29,72,.32);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-lockup h1 { line-height: 1.1; font-size: 1rem; font-weight: 700; }
.brand-lockup span { display: block; margin-top: .18rem; color: #71717a; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-close { display: none; margin-left: auto; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  overflow-y: auto;
  padding: .15rem;
}
.nav-caption {
  padding: 1rem .75rem .35rem;
  color: #52525b;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.sidebar-nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 42px;
  padding: .62rem .75rem;
  color: #a1a1aa;
  font-size: .84rem;
  font-weight: 500;
  text-align: left;
  border-radius: 9px;
}
.sidebar-nav button::after { display: none; }
.sidebar-nav button:hover { color: #fafafa; background: rgba(255,255,255,.05); }
.sidebar-nav button.is-active {
  color: #fff1f2;
  background: linear-gradient(90deg, rgba(244,63,94,.18), rgba(244,63,94,.055));
  box-shadow: inset 2px 0 #fb7185;
}
.sidebar-nav button.is-active svg { color: #fb7185; }

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: auto;
  padding: .8rem .25rem 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.user-chip {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  margin-right: auto;
}
.user-chip b, .user-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip b { max-width: 95px; color: #e4e4e7; font-size: .75rem; }
.user-chip small { color: #52525b; font-size: .64rem; }
.user-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fecdd3;
  font-size: .75rem;
  font-weight: 700;
  border: 1px solid rgba(251,113,133,.3);
  border-radius: 9px;
  background: rgba(244,63,94,.12);
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 68px;
  margin-left: var(--sidebar-width);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 clamp(1rem, 3vw, 2.25rem);
  background: rgba(8,9,13,.82) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  backdrop-filter: blur(18px) saturate(140%);
}
.mobile-menu-button { display: none; }
.page-heading { display: flex; flex-direction: column; line-height: 1.1; }
.page-heading .eyebrow { color: #71717a; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.page-heading strong { margin-top: .28rem; color: var(--text-primary); font-size: .98rem; }
.topbar-actions { display: flex; align-items: center; gap: .65rem; margin-left: auto; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 30px;
  padding: .35rem .65rem;
  color: #a1a1aa;
  font-size: .7rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
}
.status-pill > span { width: 6px; height: 6px; border-radius: 99px; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.1); }

.content-shell {
  width: calc(100% - var(--sidebar-width));
  max-width: 1480px;
  min-height: calc(100vh - 68px);
  margin: 0 0 0 var(--sidebar-width);
  padding-left: clamp(1rem, 3vw, 2.25rem) !important;
  padding-right: clamp(1rem, 3vw, 2.25rem) !important;
}

/* Cleaner, denser operational cards. */
.content-shell .bg-slate-900 {
  background: rgba(16,17,22,.88) !important;
  backdrop-filter: blur(14px) saturate(120%);
}
.content-shell .rounded-xl,
.content-shell .rounded-2xl { border-radius: 12px !important; }
.content-shell .hover\:border-indigo-600:hover {
  border-color: rgba(251,113,133,.48) !important;
  box-shadow: 0 14px 42px -22px rgba(244,63,94,.7);
}
.bg-indigo-600, .bg-indigo-700 {
  background: linear-gradient(135deg, #f43f5e, #be123c) !important;
  box-shadow: 0 10px 28px -12px rgba(244,63,94,.7);
}
.text-indigo-300 { color: #fda4af !important; }
.bg-indigo-900, .bg-indigo-900\/40 { background: rgba(244,63,94,.14) !important; }
input:focus, select:focus, textarea:focus {
  border-color: #fb7185 !important;
  box-shadow: 0 0 0 3px rgba(244,63,94,.11) !important;
}

.protocol-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: .15rem .48rem;
  color: #fecdd3;
  font-size: .66rem;
  font-weight: 650;
  border: 1px solid rgba(251,113,133,.24);
  border-radius: 999px;
  background: rgba(244,63,94,.095);
}
.protocol-badge.is-hy2 {
  color: #bae6fd;
  border-color: rgba(56,189,248,.24);
  background: rgba(14,165,233,.10);
}

/* ----- capability routing console ----- */
.routing-hero {
  background:
    radial-gradient(circle at 88% 10%, rgba(139,92,246,.16), transparent 32%),
    linear-gradient(145deg, rgba(22,24,40,.88), rgba(10,11,18,.78));
}
.route-service-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(139,92,246,.22) !important;
  transition: border-color .2s var(--ease), opacity .2s var(--ease), transform .2s var(--ease);
}
.route-service-card:hover { border-color: rgba(167,139,250,.45) !important; transform: translateY(-1px); }
.route-service-card.is-disabled { opacity: .64; border-color: var(--border-soft) !important; }
.route-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  color: #c4b5fd;
  border: 1px solid rgba(139,92,246,.3);
  border-radius: 13px;
  background: rgba(109,40,217,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.route-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(24,24,32,.9);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.route-switch span {
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 999px;
  background: #71717a;
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
  transform: translateX(0);
  transition: transform .22s var(--ease), background .2s var(--ease);
}
.route-switch.is-on { border-color: rgba(52,211,168,.48); background: rgba(6,78,59,.38); }
.route-switch.is-on span { transform: translateX(24px); background: var(--ok); }
.route-switch.is-busy span { animation: route-pulse .8s ease-in-out infinite alternate; }
.route-node-switch {
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.route-node-switch.is-on {
  border-color: rgba(45,212,191,.38);
  background: rgba(13,148,136,.13);
  color: rgb(94 234 212);
}
.route-node-switch.is-off {
  border-color: rgba(251,113,133,.38);
  background: rgba(159,18,57,.14);
  color: rgb(253 164 175);
}
.route-node-switch:focus-visible {
  outline: 2px solid rgb(167 139 250);
  outline-offset: 2px;
}
@keyframes route-pulse { to { opacity: .45; } }
.route-metric {
  min-width: 0;
  padding: .7rem .6rem;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(5,6,10,.38);
  text-align: center;
}
.route-metric b { display: block; color: #f5f3ff; font: 600 1rem/1.15 "JetBrains Mono", monospace; }
.route-metric span { display: block; margin-top: .22rem; color: var(--text-faint); font-size: .65rem; }
.route-target-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  min-height: 28px;
  padding: .25rem .55rem;
  color: #cbd5e1;
  border: 1px solid rgba(71,85,105,.55);
  border-radius: 9px;
  background: rgba(15,23,42,.55);
  font-size: .7rem;
}
.route-target-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-table-wrap { width: 100%; overflow: hidden; }
.route-table { table-layout: fixed; border-collapse: collapse; }
.route-table th,
.route-table td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-soft); }
.route-table th { color: var(--text-faint); background: rgba(5,6,10,.38); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.route-table th:first-child,
.route-table td:first-child { width: 28%; }
.route-table tbody tr:last-child td { border-bottom: 0; }
.route-table tbody tr:hover td { background: rgba(139,92,246,.035); }
.route-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: .2rem .5rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 650;
  white-space: nowrap;
}
.route-pill.route-direct { color: #6ee7b7; border-color: rgba(52,211,168,.34); background: rgba(6,78,59,.22); }
.route-pill.route-forward { color: #c4b5fd; border-color: rgba(139,92,246,.38); background: rgba(76,29,149,.22); }
.route-pill.route-disabled { color: #a1a1aa; border-color: rgba(113,113,122,.35); background: rgba(39,39,42,.35); }
.route-pill.route-unavailable { color: #fda4af; border-color: rgba(251,113,133,.36); background: rgba(136,19,55,.2); }
@media (prefers-reduced-motion: reduce) {
  .route-service-card, .route-switch, .route-switch span, .route-node-switch { transition: none; }
  .route-switch.is-busy span { animation: none; }
}

.mobile-dock { display: none; }
.sidebar-scrim { display: none; }

html[data-theme="light"] body { background: #f4f4f5; }
html[data-theme="light"] .app-topbar { background: rgba(250,250,250,.88) !important; }
html[data-theme="light"] .content-shell .bg-slate-900 { background: rgba(255,255,255,.88) !important; }

@media (max-width: 900px) {
  .app-sidebar {
    width: min(82vw, 286px);
    transform: translateX(-105%);
    transition: transform .22s var(--ease);
  }
  .app-sidebar.is-open { transform: translateX(0); }
  .sidebar-close { display: inline-flex; }
  .sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 39;
    display: block;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(3px);
  }
  .app-topbar {
    height: 60px;
    margin-left: 0;
    padding: 0 .8rem;
  }
  .mobile-menu-button { display: inline-flex; width: 40px; height: 40px; }
  .content-shell {
    width: 100%;
    min-height: calc(100vh - 60px);
    margin-left: 0;
    padding: 1rem .8rem 6.2rem !important;
  }
  .status-pill { display: none; }
  .mobile-dock {
    position: fixed;
    inset: auto .55rem max(.55rem, env(safe-area-inset-bottom)) .55rem;
    z-index: 35;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: .35rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: rgba(10,10,13,.94);
    box-shadow: 0 16px 50px rgba(0,0,0,.45);
    backdrop-filter: blur(22px);
  }
  /* Dialogs must sit above the fixed dock so the last action stays reachable. */
  .fixed.inset-0.z-20 { z-index: 50; }
  .mobile-dock button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-height: 50px;
    padding: .25rem .1rem;
    color: #71717a;
    font-size: .59rem;
    border-radius: 11px;
  }
  .mobile-dock button svg { width: 18px; height: 18px; margin: 0; }
  .mobile-dock button.is-active { color: #fda4af; background: rgba(244,63,94,.12); }

  /* Finger-friendly targets and reachable modal controls. */
  button:not(.mobile-dock button):not(.icon-btn), select, input { min-height: 42px; }
  .fixed.inset-0 { padding: .55rem !important; }
  .fixed.inset-0 > .bg-slate-900,
  .fixed.inset-0 > .border-slate-800.bg-slate-900 {
    max-height: calc(100dvh - 1.1rem);
    padding: .9rem !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 520px) {
  .page-heading .eyebrow { display: none; }
  .page-heading strong { margin-top: 0; }
  .content-shell .grid-cols-2,
  .content-shell .grid-cols-3,
  .fixed.inset-0 .grid-cols-2,
  .fixed.inset-0 .grid-cols-3 {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .content-shell section > .flex.items-center.justify-between > div {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .content-shell section > .flex.items-center.justify-between > div button {
    justify-content: center;
    min-width: 0;
  }
}