:root { color-scheme: light dark; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { background: light-dark(#e9edf2,#0c1015); }

.icon { width: 16px; height: 16px; flex: none; }
.brand-mark .icon, .account-mark .icon { width: 17px; height: 17px; }
.relay-core .icon { width: 24px; height: 24px; }

.desk {
  --desk-base: light-dark(#f7f8fa,#15191f); --desk-soft: light-dark(#eaedf1,#222933);
  --desk-text: light-dark(#1d2834,#edf0f5); --desk-muted: light-dark(#4b5b6c,#bbc3ce);
  --desk-line: light-dark(#ced6df,#343b47); --desk-action: light-dark(#354c62,#3a5066);
  --desk-danger: light-dark(#9e2525,#ffb0ab);
  background: linear-gradient(135deg,light-dark(#ffffffa6,#2b354548),transparent 55%),var(--desk-base);
  color: var(--desk-text);
  display: grid; grid-template-columns: 196px minmax(0,1fr); position: relative;
  min-height: 100vh; font: 400 14px/1.45 system-ui,sans-serif;
}
.sidebar {
  display: flex; flex-direction: column; gap: 18px; padding: 15px 9px 10px;
  background: radial-gradient(ellipse at top left,#2a3547 0,transparent 44%),#11151b; color: #ebeff5;
  border-inline-end: 1px solid #3b485c;
}
.wordmark, .sidebar-account { display: flex; gap: 8px; align-items: center; min-width: 0; }
.wordmark { padding: 0 3px 12px; border-bottom: 1px solid #343b47; }
.wordmark > div, .sidebar-account > div { display: grid; min-width: 0; }
.wordmark > div span, [data-role-name] { color: #b1bdcb; font-size: 12px; }
[data-viewer-email] { overflow-wrap: anywhere; font-size: 12px; }
.brand-mark, .account-mark {
  flex: none; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 7px;
  background: #242c37; color: #c5d5e5; border: 1px solid #4b5d70;
}
.brand-mark { background: linear-gradient(145deg,#415368,#1b242f); box-shadow: inset 0 1px #d0e0f94d,0 5px 14px #060b11; }
.sidebar nav { display: grid; gap: 4px; }
.nav-group {
  padding: 3px 8px; color: #aeb9c8; font: 600 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-transform: uppercase; letter-spacing: .095em;
}
.nav-group:not(:first-child) { margin-top: 10px; }
.sidebar nav button, .sign-out button {
  display: flex; align-items: center; gap: 8px; text-align: start; width: 100%;
  background: transparent; border-color: transparent; color: #c3cdd9;
}
.sidebar nav button[aria-current="page"] {
  color: #f2f5f9; background: linear-gradient(105deg,#3b485c,#252f3d);
  border-color: #566981; box-shadow: inset 2px 0 #c1d2e6,inset 0 1px #d9e7ff2b,0 3px 10px #06090e4d;
}
.sidebar button:focus-visible { outline-color: #bdcedf; }
.sidebar-account { margin-top: auto; padding: 9px 3px 0; border-top: 1px solid #343b47; font-size: 12px; }
.sidebar-account .account-mark { width: 28px; height: 28px; }
.sign-out { margin: -10px 0 0; }
.sign-out button { font-weight: 500; font-size: 13px; }
.workbench { min-width: 0; container-type: inline-size; }
.topbar, .location { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.topbar {
  justify-content: space-between; padding: 7px 19px; min-height: 52px; box-sizing: border-box;
  border-bottom: 1px solid var(--desk-line); color: var(--desk-muted); font-size: 13px;
  background: light-dark(#f8fafce0,#171d27ba);
}
.location strong { color: var(--desk-text); }
.location-divider { opacity: .65; }
.menu-toggle { display: none; }
.system-state {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  border: 1px solid var(--desk-line); background: var(--desk-soft); padding: 4px 8px; border-radius: 5px;
}
.system-state:empty { display: none; }
.system-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.system-state[data-tone="warn"] { color: light-dark(#79450f,#edc38f); }
.content { display: block; padding: 18px 19px 21px; max-width: 1120px; }
h2 { margin: 0; font: 690 clamp(24px,3.4vw,34px)/1.15 system-ui; letter-spacing: -.045em; }
h3 { margin: 0; font: 650 14px/1.4 system-ui; }
p { margin: 0; overflow-wrap: anywhere; }
button, input, select, .button {
  box-sizing: border-box; max-width: 100%; min-height: 40px; border: 1px solid var(--desk-line,#cad9e6); border-radius: 7px;
  padding: 6px 10px; color: var(--desk-text,#152c43); background: var(--desk-base,#f7fafc); font: inherit;
}
button, .button { font-weight: 600; cursor: pointer; }
.button { display: inline-flex; align-items: center; text-decoration: none; }
button:focus-visible, select:focus-visible, input:focus-visible, .button:focus-visible { outline: 2px solid light-dark(#345877,#b9d2e5); outline-offset: 2px; }
.primary {
  background: linear-gradient(155deg,#ffffff16,transparent 65%),var(--desk-action);
  border-color: #71859d; color: #fff; justify-self: start; box-shadow: inset 0 1px #e6f2ff29,0 3px 9px #09132338;
}
.danger { color: var(--desk-danger); border-color: currentColor; justify-self: start; }
button:disabled { background: var(--desk-soft); color: var(--desk-muted); cursor: not-allowed; box-shadow: none; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 9px 15px; }
.section-head p, .item-name p, .hint { color: var(--desk-muted); font-size: 13px; }
.section-head p { margin-top: 4px; }
.entries { display: grid; gap: 8px; list-style: none; padding: 0; margin: 16px 0; }
.entries li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px;
  border: 1px solid var(--desk-line); border-radius: 9px; padding: 11px 13px;
  background: linear-gradient(130deg,light-dark(#fff,#2b3542),transparent 70%),var(--desk-soft);
  box-shadow: inset 0 1px light-dark(#fff,#d5e5ff16);
}
.item-name { min-width: 0; overflow-wrap: anywhere; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 20px; background: var(--desk-soft); color: var(--desk-muted); font-size: 12px; font-weight: 650; }
.badge:empty { display: none; }
.badge::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge[data-tone="good"] { background: light-dark(#e8f6ef,#193e32); color: light-dark(#12643e,#96e4b5); }
.badge[data-tone="warn"] { background: light-dark(#fff1db,#49321f); color: light-dark(#854806,#ffcc86); }
.callout { background: var(--desk-soft); border-radius: 7px; padding: 8px 10px; margin-top: 12px; }
.announcement:not(:empty) { margin-bottom: 12px; color: light-dark(#12643e,#96e4b5); }
.loading { color: var(--desk-muted); }
.role-guide { display: grid; gap: 4px; color: var(--desk-muted); }
.back { margin-bottom: 8px; }
.fields { display: grid; gap: 9px; max-width: 470px; }
h2 + .fields { margin-top: 13px; }
[data-screen] > .fields { padding: 15px; background: var(--desk-soft); border: 1px solid var(--desk-line); border-radius: 9px; }
.fields label { display: grid; gap: 4px; font-weight: 600; }
.fields input, .fields select { width: 100%; font-weight: 400; }
.error:empty { display: none; }
.error, [aria-invalid="true"] { color: var(--desk-danger); border-color: currentColor; }
[data-screen="destinations"] > .error, [data-screen="access"] > .error { margin-top: 12px; }
.console-heading { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; }
.console-heading .hint { margin-top: 4px; }
.console-counter {
  color: #d4e0ee; font: 600 12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  font-variant-numeric: tabular-nums;
}
.patchboard {
  --node: #202a37; --node-border: #65768c; --live-wire: #a6bacd; --idle-wire: #657280;
  --warning-wire: #e5b77e; --wire: var(--idle-wire);
  --branch-width: clamp(23px,4vw,52px); --link-width: clamp(16px,2.6vw,32px);
  margin-top: 15px; border-radius: 11px; border: 1px solid #596b82; position: relative; overflow: hidden;
  background-color: #101620;
  background-image: linear-gradient(#48536439 1px,transparent 1px), linear-gradient(90deg,#48536439 1px,transparent 1px), radial-gradient(ellipse at 40% 48%,#52688761,transparent 64%),linear-gradient(145deg,#1e2b3c,transparent 55%);
  background-size: 22px 22px,22px 22px,100% 100%,100% 100%;
  color: #e9f6ff; box-shadow: inset 0 0 45px #080e1d63,0 12px 26px -20px #03081499;
}
.matrix-head {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 13px;
  padding: 8px 13px; border-bottom: 1px solid #576a80; background: linear-gradient(95deg,#2b384af5,#1a2331f5);
}
.matrix-head .channel-label { color: #d6e4f3; }
.matrix-scan {
  display: block; position: absolute; inset: 0 auto 0 0; width: 23%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg,transparent,#bfd8f32b,transparent);
}
.patchboard[data-input="good"] { --wire: var(--live-wire); }
.patch-grid {
  display: grid; grid-template-columns: minmax(122px,.62fr) minmax(115px,.57fr) minmax(0,1.5fr);
  position: relative; align-items: center; gap: var(--link-width); padding: 49px 23px 25px;
}
.patch-source {
  position: relative; display: grid; align-content: center; justify-items: start;
  gap: 5px; padding: 14px; border-radius: 8px; border: 1px solid var(--node-border);
  background: linear-gradient(150deg,#334153,transparent 63%),var(--node);
  box-shadow: inset 0 1px #d9eaff22,0 8px 18px #070c16a6;
}
.patch-source::after, .relay-node::after {
  content: ""; position: absolute; top: 50%; left: 100%; width: calc(var(--link-width) + 1px); height: 2px; background: var(--wire);
}
.patchboard[data-empty="true"] .relay-node::after { display: none; }
.patchboard[data-input="good"] .patch-source::after,
.patchboard[data-input="good"] .relay-node::after { box-shadow: 0 0 8px #9bb8d25b; }
.relay-node {
  position: relative; display: grid; justify-items: center; align-items: center; gap: 7px;
  padding: 12px; background: radial-gradient(ellipse at top,#394d65,#1d2837 76%);
  border: 1px solid #8195ad; border-radius: 10px;
  box-shadow: inset 0 1px #e7f4ff35,0 8px 24px #0a111d99;
}
.relay-core {
  box-sizing: border-box; width: 59px; height: 59px; display: grid; place-items: center; position: relative;
  border: 1px solid #9fb0c4; border-radius: 50%;
  background: radial-gradient(circle,#59708d,#28394d 75%); color: #eef7ff;
  box-shadow: inset 0 0 0 5px #9cb7d925,0 0 0 4px #96b0cc29,0 0 20px #bacce546;
}
.relay-core::after {
  content: ""; position: absolute; inset: 4px; border: 1px dashed #b9cde49c; border-radius: 50%; pointer-events: none;
}
.relay-id { display: grid; justify-items: center; gap: 1px; }
.relay-state { grid-column: 1 / -1; color: #c6deee; font-size: 12px; }
.channel-label {
  display: inline-flex; align-items: center; gap: 6px; color: #adc6db;
  font: 600 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; text-transform: uppercase; letter-spacing: .07em;
}
.patch-source strong { font-size: 19px; letter-spacing: -.025em; }
.patch-outputs { min-width: 0; position: relative; }
.output-tools {
  position: absolute; bottom: calc(100% + 3px); left: var(--branch-width); right: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px;
}
.output-tools button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 8px;
  color: #e4edf7; background: #263241; border-color: #566a80; font-size: 12px;
}
.output-tools button:focus-visible { outline-color: #a0f2fc; }
.route-list { list-style: none; padding: 0; margin: 0; }
.route { display: grid; grid-template-columns: var(--branch-width) minmax(0,1fr); align-items: center; min-height: 76px; }
.branch { position: relative; align-self: stretch; }
.branch::before, .branch::after { content: ""; position: absolute; }
.branch::before { top: 0; bottom: 0; left: 0; width: 2px; background: var(--wire); }
.route:first-child .branch::before { top: 50%; }
.route:last-child .branch::before { bottom: 50%; }
.route:only-child .branch::before { display: none; }
.branch::after { top: 50%; left: 0; right: 0; border-top: 2px solid var(--idle-wire); }
.route[data-tone="good"] .branch::after { border-color: var(--live-wire); }
.route[data-tone="warn"] .branch::after { border-color: var(--warning-wire); border-top-style: dashed; }
.route button {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; width: 100%;
  min-height: 58px; padding: 8px 10px; color: #e9f6ff; text-align: left;
  border-color: var(--node-border); background: linear-gradient(130deg,#304053,transparent 68%),var(--node);
  box-shadow: inset 0 1px #d5e6fd22,0 6px 14px #060b1477;
  transition: border-color 160ms ease,background-color 160ms ease,transform 160ms ease;
}
.route button[aria-pressed="true"] { border-color: #a4bfd7; background: linear-gradient(100deg,#3e5269,#263444); }
.route[data-tone="warn"] button[aria-pressed="true"] { border-color: #d9af7c; background: linear-gradient(110deg,#463831,#302a29); }
@media (hover:hover) {
  .route button:hover { border-color: #b4c9e0; transform: translateY(-1px); }
}
.route button:focus-visible { outline-color: #a0f2fc; }
.route-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.route-mark {
  flex: none; display: grid; place-items: center; min-width: 24px; height: 24px;
  border-radius: 4px; background: #27495f; color: #e9f6ff; font: 700 13px/1 system-ui;
}
.route-mark[data-brand="youtube"], .route-mark[data-brand="facebook"] { background: #354152; }
.patchboard .badge { background: #25394a; color: #d5e6f6; white-space: normal; }
.patchboard .badge[data-tone="good"] { background: #2e4052; color: #d4e5f5; }
.patchboard .badge[data-tone="warn"] { background: #4b3b2c; color: #f2cca3; }
.empty-patch { margin-inline-start: var(--branch-width); padding: 15px 0; color: #d5e6f6; }
.telemetry-details { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); gap: 10px; margin-top: 14px; }
.telemetry-details:has([data-inspector][hidden]) { grid-template-columns: 1fr; }
.patch-inspector, .session-feed {
  display: grid; align-content: start; gap: 7px; padding: 11px 12px; min-width: 0;
  background: linear-gradient(145deg,light-dark(#ffffffbd,#324154),transparent 80%),var(--desk-soft);
  border: 1px solid var(--desk-line); border-radius: 9px; box-shadow: inset 0 1px light-dark(#fff,#d5e5ff22);
}
.telemetry-details .channel-label { color: var(--desk-muted); }
.inspector-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; }
.inspector-identity h3 { font-size: 16px; overflow-wrap: anywhere; }
.patch-inspector p { color: var(--desk-muted); font-size: 13px; }
p.patch-footer { margin-top: 10px; }
.session-feed ol { list-style: none; margin: 0; padding: 0; }
.session-feed li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; padding: 3px 0; font-size: 12px; }
.session-feed li + li { border-top: 1px solid var(--desk-line); }
.session-feed time {
  color: var(--desk-muted); font: 500 12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; font-variant-numeric: tabular-nums;
}
.session-feed li span { overflow-wrap: anywhere; }
.connection-grid { display: grid; gap: 16px; margin-top: 15px; }
.connection-grid > section { padding: 13px; border: 1px solid var(--desk-line); border-radius: 8px; background: var(--desk-soft); }
.address-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 6px; }
.address-row input { flex: 1 1 205px; min-width: 0; }
.connection-steps { padding-inline-start: 19px; margin-block: 8px 10px; }
.connection-steps li + li { margin-top: 4px; }
.wire-pulse, .branch-pulse { position: absolute; top: calc(50% - 2px); height: 6px; pointer-events: none; overflow: hidden; }
.wire-pulse { left: 100%; width: calc(var(--link-width) + 1px); }
.branch-pulse { left: 0; right: 0; }
.wire-pulse::before, .branch-pulse::before {
  content: ""; position: absolute; left: -16px; top: 2px; width: 16px; height: 2px; opacity: 0;
  background: linear-gradient(90deg,transparent,#f3faff); box-shadow: 0 0 7px #d1e6ff;
}
.patchboard[data-empty="true"] .relay-node .wire-pulse { display: none; }
.patchboard[data-fx] .matrix-scan { animation: fpvm-matrix-scan 780ms ease-out both; }
.patchboard[data-fx][data-input="good"] .wire-pulse::before { animation: var(--wire-keyframes,fpvm-wire-x) 350ms ease-out both; }
.patchboard[data-fx] .relay-node .wire-pulse::before { animation-delay: 210ms; }
.patchboard[data-fx] .route[data-tone="good"] .branch-pulse::before { animation: fpvm-wire-x 370ms 410ms ease-out both; }
.patchboard[data-fx][data-input="good"] .relay-core::after { animation: fpvm-relay-glow 660ms 140ms ease-out both; }
.patchboard[data-fx] .route[data-tone="warn"] button { animation: fpvm-route-alert 580ms 390ms ease-out both; }
@keyframes fpvm-matrix-scan {
  from { transform: translateX(-100%); opacity: 0; }
  22% { opacity: .8; }
  to { transform: translateX(440%); opacity: 0; }
}
@keyframes fpvm-wire-x {
  from { left: -16px; opacity: 0; }
  25% { opacity: 1; }
  to { left: 100%; opacity: 0; }
}
@keyframes fpvm-wire-y {
  from { top: -16px; opacity: 0; }
  25% { opacity: 1; }
  to { top: 100%; opacity: 0; }
}
@keyframes fpvm-relay-glow {
  0%,100% { box-shadow: none; }
  35% { box-shadow: 0 0 16px #c7dffc92,inset 0 0 11px #c7dffc85; }
}
@keyframes fpvm-route-alert {
  0%,100% { box-shadow: inset 0 1px #d5e6fd22,0 6px 14px #060b1477; }
  28% { box-shadow: inset 0 1px #eac18b75,0 0 15px #e7b77c5e; }
}
@container (max-width: 650px) {
  .patch-grid { display: block; padding: 12px; }
  .patchboard { --branch-width: 20px; }
  .patch-source { padding: 9px 11px; }
  .patch-source::after, .relay-node::after { top: 100%; left: 12px; width: 2px; height: 28px; }
  .relay-node { margin-top: 12px; grid-template-columns: auto minmax(0,1fr) auto; justify-items: start; padding: 8px 10px; }
  .relay-core { width: 30px; height: 30px; }
  .relay-core .icon { width: 16px; height: 16px; }
  .relay-id { justify-items: start; }
  .relay-state { grid-column: auto; }
  .patch-outputs { margin: 54px 0 0 13px; }
  .output-tools { left: 0; }
  .relay-node::after { height: 54px; }
  .wire-pulse { --wire-keyframes: fpvm-wire-y; top: 100%; left: 10px; width: 6px; height: 12px; }
  .relay-node .wire-pulse { height: 54px; }
  .wire-pulse::before { left: 2px; top: -16px; width: 2px; height: 16px; background: linear-gradient(180deg,transparent,#f3faff); }
  .route:first-child .branch::before { top: 0; }
  .route:only-child .branch::before { display: block; bottom: 50%; }
  .telemetry-details { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .desk { display: block; }
  .sidebar {
    display: none; position: absolute; z-index: 2; top: var(--toolbar-height,52px); left: 0;
    box-sizing: border-box; width: min(232px,100%); border-bottom: 1px solid #4b5d70; border-radius: 0 0 9px 0;
    box-shadow: 8px 10px 24px #0005;
  }
  .sidebar[data-open] { display: flex; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; }
  .location-root, .location-divider { display: none; }
  .topbar, .content { padding-inline: 11px; }
}
@media (pointer: coarse) {
  button, .output-tools button, input, select, .button { min-height: 44px; }
  input, select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.auth-page {
  color-scheme: dark;
  --desk-base: #15191f; --desk-soft: #222933; --desk-text: #edf0f5; --desk-muted: #bbc3ce;
  --desk-line: #343b47; --desk-action: #3a5066;
  display: grid; min-height: 100vh; place-items: center; padding: 16px; box-sizing: border-box;
  background: radial-gradient(ellipse at top left,#2a3547 0,transparent 50%),#11151b; color: #ebeff5;
  font: 400 15px/1.5 system-ui,sans-serif;
}
.auth-card {
  display: grid; gap: 12px; width: min(420px,100%); box-sizing: border-box; padding: 24px;
  border: 1px solid #3b485c; border-radius: 12px;
  background: linear-gradient(150deg,#26303d,transparent 70%),#171d25; box-shadow: 0 24px 48px -30px #000;
}
.auth-card .wordmark { border-bottom-color: #343b47; }
.auth-card h1 { margin: 0; font: 690 26px/1.2 system-ui; letter-spacing: -.035em; }
.auth-card p { color: #c3cdd9; }
.auth-card .auth-message { color: #ffcc86; background: #49321f; border-radius: 7px; padding: 8px 10px; }
.auth-card form { margin: 4px 0 0; }