:root {
    --void: #08090a;
    --carbon: #0f1011;
    --obsidian: #15171a;
    --graphite: #23262b;
    --smoke: #34383e;
    --ash: #62666d;
    --fog: #8a8f98;
    --mist: #d3d8e0;
    --bone: #eceef1;
    --paper: #ffffff;
    --accent: #e4f222;
    --accent-ink: #0d1000;
    --success: #2fbf5a;
    --success-bg: rgba(47,191,90,.12);
    --danger: #f2555a;
    --danger-bg: rgba(242,85,90,.1);
    --info: #35c2d8;
    --violet: #7c7ff2;
    --radius-card: 14px;
    --radius-md: 8px;
    --radius-sm: 6px;
  }
  /* Light theme: not a naive invert — off-white paper surfaces, warm-gray
     hairlines (dark hairlines read as "disabled" on light backgrounds),
     the same acid-lime accent darkened slightly for AA contrast on white. */
  :root.light {
    --void: #f4f4f2;
    --carbon: #ffffff;
    --obsidian: #fafaf8;
    --graphite: #e2e2de;
    --smoke: #c7c7c1;
    --ash: #8b8b83;
    --fog: #5c5c55;
    --mist: #2c2c28;
    --bone: #16160f;
    --paper: #0a0a08;
    --accent: #a7b400;
    --accent-ink: #ffffff;
    --success: #1f9c47;
    --success-bg: rgba(31,156,71,.1);
    --danger: #d13a3f;
    --danger-bg: rgba(209,58,63,.08);
    --info: #1387a0;
    --violet: #5a5dd6;
  }
  /* Cyberpunk 2077-style neon theme: Night City triad (cyan/magenta/
     yellow) on near-black purple-tinted surfaces, with actual glow —
     not just brighter colors on the same dark palette. */
  :root.cyberpunk {
    --void: #08040f;
    --carbon: #0f0a1c;
    --obsidian: #150e24;
    --graphite: #2a1c42;
    --smoke: #4a2f6b;
    --ash: #8b6bb0;
    --fog: #b795d9;
    --mist: #e3d4fa;
    --bone: #f5ecff;
    --paper: #ffffff;
    --accent: #00f0ff;
    --accent-ink: #001217;
    --success: #00ff9f;
    --success-bg: rgba(0,255,159,.12);
    --danger: #ff2079;
    --danger-bg: rgba(255,32,121,.12);
    --info: #00f0ff;
    --violet: #ff2079;
    --neon-yellow: #fcee0a;
  }
  * { box-sizing: border-box; }
  body {
    background: var(--void);
    background-image:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(228,242,34,.05), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 0%, rgba(124,127,242,.05), transparent 55%);
    background-attachment: fixed;
    color: var(--mist);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-feature-settings: "cv01" on, "ss03" on, "zero" on;
    -webkit-font-smoothing: antialiased;
  }
  :root.cyberpunk body {
    background-image:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(0,240,255,.08), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 0%, rgba(255,32,121,.08), transparent 55%),
      repeating-linear-gradient(0deg, rgba(0,240,255,.015) 0px, rgba(0,240,255,.015) 1px, transparent 1px, transparent 3px);
  }
  ::selection { background: var(--accent); color: var(--accent-ink); }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--graphite); border-radius: 8px; border: 2px solid var(--void); }
  ::-webkit-scrollbar-track { background: transparent; }

  .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

  .card { background: var(--carbon); border: 1px solid var(--graphite); border-radius: var(--radius-card); }
  .card-flat { background: rgba(255,255,255,.015); border: 1px solid var(--graphite); border-radius: var(--radius-md); }
  .surface { background: var(--void); border: 1px solid var(--graphite); border-radius: var(--radius-md); }

  .btn { border-radius: var(--radius-sm); padding: .5rem 1rem; font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; transition: all .12s ease; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
  .btn:active { transform: scale(.97); }
  .btn-primary { background: var(--accent); color: var(--accent-ink); }
  .btn-primary:hover { background: #eef94a; }
  .btn-primary:disabled { opacity: .4; cursor: not-allowed; }
  :root.cyberpunk .btn-primary { box-shadow: 0 0 10px rgba(0,240,255,.6), 0 0 2px rgba(0,240,255,.8); }
  :root.cyberpunk .btn-primary:hover { background: var(--accent); box-shadow: 0 0 18px rgba(0,240,255,.9), 0 0 4px rgba(0,240,255,1); }
  :root.cyberpunk .card { box-shadow: inset 0 0 0 1px rgba(0,240,255,.04); }
  :root.cyberpunk .btn-danger { box-shadow: 0 0 8px rgba(255,32,121,.35); }
  .btn-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(242,85,90,.25); }
  .btn-danger:hover { background: rgba(242,85,90,.18); }
  .btn-ghost { background: transparent; color: var(--mist); border-color: var(--graphite); }
  .btn-ghost:hover { background: rgba(255,255,255,.04); border-color: var(--smoke); }
  .btn-sm { padding: .3rem .65rem; font-size: .75rem; }
  .btn-icon { padding: .4rem; }

  .input { background: rgba(255,255,255,.025); border: 1px solid var(--graphite); border-radius: var(--radius-sm); padding: .55rem .75rem; color: var(--bone); width: 100%; font-size: .8125rem; transition: border-color .12s; }
  .input::placeholder { color: var(--ash); }
  .input:focus { outline: none; border-color: var(--smoke); background: rgba(255,255,255,.04); }
  .label { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ash); }

  .dot { width: .5rem; height: .5rem; border-radius: 9999px; display: inline-block; flex-shrink: 0; }
  .dot-live { box-shadow: 0 0 0 3px rgba(47,191,90,.15); animation: dotPulse 2.2s ease-in-out infinite; }
  .dot-off { box-shadow: 0 0 0 3px rgba(255,255,255,.03); }
  @keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(47,191,90,.15); }
    50% { box-shadow: 0 0 0 6px rgba(47,191,90,.08); }
  }
  :root.cyberpunk .dot-live { box-shadow: 0 0 0 3px rgba(0,255,159,.25), 0 0 8px rgba(0,255,159,.7); animation: dotPulseNeon 2.2s ease-in-out infinite; }
  @keyframes dotPulseNeon {
    0%, 100% { box-shadow: 0 0 0 3px rgba(0,255,159,.25), 0 0 8px rgba(0,255,159,.7); }
    50% { box-shadow: 0 0 0 7px rgba(0,255,159,.12), 0 0 14px rgba(0,255,159,.9); }
  }
  :root.cyberpunk .node-card.is-online::before { background: linear-gradient(90deg, var(--success), var(--accent), transparent); box-shadow: 0 0 8px rgba(0,255,159,.6); }
  :root.cyberpunk .node-card:hover { border-color: var(--accent); box-shadow: 0 0 20px -4px rgba(0,240,255,.4), 0 10px 24px -12px rgba(0,0,0,.6); }

  .log { background: var(--void); border: 1px solid var(--graphite); border-radius: var(--radius-md); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .75rem; line-height: 1.55; white-space: pre-wrap; color: var(--fog); }

  .chip { font-size: .6875rem; font-weight: 500; border-radius: 9999px; padding: .3rem .7rem; background: var(--graphite); color: var(--fog); cursor: pointer; transition: all .12s; border: 1px solid transparent; }
  .chip:hover { color: var(--bone); }
  .chip.active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

  /* Resource metric pills — modeled on amnezia-control's server tiles:
     a bordered chip per metric (uptime/CPU/RAM/disk) rather than a
     progress bar, with the whole chip's border+value color shifting at
     warn/crit thresholds instead of a filled track. */
  .res-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--void); border: 1px solid var(--graphite); border-radius: var(--radius-sm); padding: .28rem .55rem; font-size: .75rem; white-space: nowrap; }
  .res-label { color: var(--ash); font-size: .625rem; text-transform: uppercase; letter-spacing: .04em; }
  .res-chip b { font-weight: 700; color: var(--mist); }
  .res-chip.res-warn { border-color: rgba(234,179,8,.4); }
  .res-chip.res-warn b { color: var(--neon-yellow, #eab308); }
  .res-chip.res-crit { border-color: rgba(242,85,90,.5); }
  .res-chip.res-crit b { color: var(--danger); }

  /* Protocol pills in the services list — colored per-protocol like
     amnezia-control's badge-amnezia, instead of plain monospace text. */
  .proto-pill { display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .6875rem; border-radius: var(--radius-sm); padding: .1rem .45rem; }

  .navlink { font-size: .8125rem; font-weight: 500; padding: .45rem .85rem; border-radius: var(--radius-sm); color: var(--fog); cursor: pointer; transition: all .12s; }
  .navlink:hover { color: var(--bone); }
  .navlink.active { background: rgba(255,255,255,.06); color: var(--paper); }

  .section-title { font-size: .9375rem; font-weight: 600; color: var(--bone); letter-spacing: -.01em; }
  .hairline { border-color: var(--graphite); }
  .backdrop { background: rgba(5,6,7,.72); backdrop-filter: blur(6px); }
  .fade-in { animation: fadeIn .15s ease-out; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  .node-card {
    background: var(--carbon); border: 1px solid var(--graphite); border-radius: var(--radius-card);
    padding: 1.1rem; cursor: pointer; position: relative; overflow: hidden;
    transition: border-color .18s ease, transform .18s cubic-bezier(.2,.8,.2,1), background .18s ease, box-shadow .18s ease;
    animation: cardIn .25s cubic-bezier(.2,.8,.2,1) backwards;
  }
  .node-card:hover { border-color: var(--smoke); background: var(--obsidian); transform: translateY(-3px); box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
  .node-card:active { transform: translateY(-1px) scale(.99); }
  .node-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--graphite); transition: background .3s; }
  .node-card.is-online::before { background: linear-gradient(90deg, var(--success), transparent); }
  @keyframes cardIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

  .svc-row { display: flex; align-items: center; justify-content: space-between; background: var(--void); border: 1px solid var(--graphite); border-radius: var(--radius-md); padding: .65rem .9rem; transition: border-color .15s ease, transform .15s ease, background .15s ease, box-shadow .15s ease; animation: cardIn .2s ease backwards; }
  .svc-row:hover { border-color: var(--smoke); background: rgba(255,255,255,.015); transform: translateX(2px); }
  .svc-row.focus-pulse { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px -6px var(--accent); animation: focusPulse 1.2s ease-in-out 2; }
  @keyframes focusPulse { 0%,100% { box-shadow: 0 0 0 1px var(--accent), 0 0 6px -2px var(--accent); } 50% { box-shadow: 0 0 0 1px var(--accent), 0 0 22px -4px var(--accent); } }

  /* Node-detail tiles — secondary sections open as modals instead of a stacked wall of cards */
  .node-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
    background: var(--void); border: 1px solid var(--graphite); border-radius: var(--radius-md);
    padding: .85rem .9rem; text-align: left; cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .node-tile:hover { border-color: var(--smoke); background: var(--obsidian); transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgba(0,0,0,.5); }
  .node-tile:active { transform: translateY(0) scale(.99); }
  .node-tile-icon { font-size: 1.15rem; line-height: 1; }
  .node-tile-label { font-weight: 600; font-size: .8125rem; color: var(--bone); margin-top: .25rem; }
  .node-tile-sub { font-size: .6875rem; color: var(--ash); }
  :root.cyberpunk .node-tile:hover { border-color: var(--accent); box-shadow: 0 0 16px -6px rgba(0,240,255,.4); }

  /* Protocol picker */
  .proto-card { background: var(--void); border: 1px solid var(--graphite); border-radius: var(--radius-md); padding: .85rem .7rem; text-align: center; cursor: pointer; transition: all .12s; }
  .proto-card:hover { border-color: var(--smoke); background: rgba(255,255,255,.02); }
  .proto-card.selected { border-color: var(--accent); background: rgba(228,242,34,.06); }
  .proto-icon { font-size: 1.5rem; line-height: 1; margin-bottom: .4rem; }
  .proto-label { font-size: .6875rem; font-weight: 600; color: var(--mist); line-height: 1.25; }
  .cat-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ash); margin: 1rem 0 .5rem; }
  .cat-label:first-child { margin-top: 0; }

  /* Reverse proxy control panel */
  .rp-tab { position: relative; padding: .55rem 1.1rem; font-size: .8125rem; font-weight: 600; color: var(--ash); border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; transition: color .15s; }
  .rp-tab:hover { color: var(--mist); }
  .rp-tab.active { color: var(--bone); }
  .rp-tab.active::after { content: ''; position: absolute; left: .4rem; right: .4rem; bottom: -1px; height: 2px; border-radius: 2px; background: var(--rp-accent, var(--accent)); }
  .rp-panel { border-top: 1px solid var(--graphite); }
  .rp-route { display: flex; align-items: center; gap: .75rem; padding: .65rem .85rem; border-radius: var(--radius-md); background: var(--void); border: 1px solid var(--graphite); transition: border-color .15s; }
  .rp-route:hover { border-color: var(--smoke); }
  .rp-endpoint { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .78rem; padding: .2rem .55rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mist); }
  .rp-arrow { color: var(--smoke); flex-shrink: 0; }
  .rp-badge { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 9999px; }
  .rp-empty { text-align: center; padding: 2.25rem 1rem; color: var(--ash); font-size: .8125rem; border: 1px dashed var(--graphite); border-radius: var(--radius-md); }

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