/* Relaytab artwork and shared workspace controls. */
.brand .brand-mark { display: block; width: 30px; height: 30px; flex-shrink: 0; }
.relay-icon { display: block; width: 27px; height: 27px; flex-shrink: 0; }
.server-icon .relay-icon, .relay-cell .relay-icon { width: 22px; height: 22px; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.theme-toggle { min-width: 105px; gap: 7px; }
.theme-toggle [data-theme-icon] { font-size: 15px; line-height: 1; }
.fleet-relay-art {
  display: grid;
  place-items: center;
  margin-left: 22px;
  width: 92px;
  height: 82px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--plum);
  color: var(--signal);
}
.fleet-relay-art .relay-icon { width: 42px; height: 42px; }
.relay-cell { display: flex; align-items: center; gap: 10px; }
.relay-cell .relay-icon { color: var(--pink); }
.relay-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 20px; }
.relay-card {
  justify-content: flex-start;
  gap: 15px;
  white-space: normal;
  text-align: left;
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
  padding: 18px;
}
.relay-card strong, .relay-card small { display: block; }
.relay-card strong { font-size: 12px; }
.relay-card small { font-size: 10px; margin-top: 5px; color: var(--muted); font-weight: 450; line-height: 1.5; }
.relay-card .relay-icon { color: var(--pink); }
.relay-card:hover, .relay-card[aria-pressed=true] { background: var(--pink-soft); border-color: var(--pink); }
.relay-card[aria-pressed=true] { box-shadow: 0 0 0 1px var(--pink); }
.relay-card-check { margin-left: auto; color: var(--pink); opacity: 0; }
.relay-card[aria-pressed=true] .relay-card-check { opacity: 1; }
.relay-picker { background: linear-gradient(120deg, var(--surface), var(--bg)); }

:root[data-theme=dark] {
  color-scheme: dark;
  --pink: #ffa4bc;
  --pink-soft: #432b43;
  --ink: var(--paper);
  --muted: #d5c1d9;
  --border: #51405e;
  --surface: #2c2137;
  --bg: var(--plum);
  background: var(--bg);
  color: var(--ink);
}
[data-theme=dark] .sidebar,[data-theme=dark] .topbar,[data-theme=dark] .panel,[data-theme=dark] .metric{background:var(--surface);border-color:var(--border)}
[data-theme=dark] .nav-label,[data-theme=dark] .nav-item,[data-theme=dark] .metric-label,[data-theme=dark] .metric small,[data-theme=dark] dt,[data-theme=dark] label,[data-theme=dark] .topbar,[data-theme=dark] .sidebar-note p{color:var(--muted)}
[data-theme=dark] .topbar strong,[data-theme=dark] .entity-link,[data-theme=dark] .network-banner h2,[data-theme=dark] .sidebar-note strong{color:var(--ink)}
[data-theme=dark] .separator,[data-theme=dark] .row-link,[data-theme=dark] .count{color:#c6aabc}
[data-theme=dark] .nav-item.selected,[data-theme=dark] .nav-item:hover,[data-theme=dark] .avatar,[data-theme=dark] .count,[data-theme=dark] .device-count,[data-theme=dark] .server-icon,[data-theme=dark] .empty-icon{background:var(--pink-soft);color:var(--pink);border-color:#56354b}
[data-theme=dark] .sidebar-note,[data-theme=dark] .network-banner{background:linear-gradient(120deg,var(--surface),var(--pink-soft));border-color:var(--border)}
[data-theme=dark] .network-banner p{color:#d4b0c6}
[data-theme=dark] .secondary{color:#e8c6d9;background:#30232e;border-color:#614357}
[data-theme=dark] .secondary:hover{background:#432b3b;border-color:var(--pink)}
[data-theme=dark] .danger{background:#361f2d;border-color:#82455f;color:#ffb0ca}
[data-theme=dark] .danger:hover{background:#4d2b3b}
[data-theme=dark] .copy-button{color:var(--pink);background:transparent}
[data-theme=dark] .copy-button:hover{background:var(--pink-soft)}
[data-theme=dark] .copy-status{background:#f08ab9;color:#24121e}
[data-theme=dark] th{color:#c5aebf;background:#2b202d;border-color:var(--border)}
[data-theme=dark] td{border-color:#3a2b38}
[data-theme=dark] tbody tr:hover{background:#2c202c}
[data-theme=dark] .config-label{color:#8bd8b3}
[data-theme=dark] .config-label.pending{color:#e9c68e}
[data-theme=dark] .badge{background:var(--pink-soft);border-color:#67435a;color:#f0b0d0}
[data-theme=dark] .badge.neutral{background:#2e2430;border-color:#57414f;color:#d3bacb}
[data-theme=dark] .badge.active,[data-theme=dark] .notice.success{color:#99dfbd;background:#1d352d;border-color:#395a49}
[data-theme=dark] .ip-address{color:#ffb7db;background:#3a2333;border-color:#643b52}
[data-theme=dark] summary{color:#f0a1c8}
[data-theme=dark] .remove summary,[data-theme=dark] .error-text{color:#ffacc7}
[data-theme=dark] .notice{color:#f0bfd9;background:#362131;border-color:#674057}
[data-theme=dark] input:not([type=hidden]):not([type=checkbox]),[data-theme=dark] select,[data-theme=dark] textarea{color:var(--ink);background:#2b202e;border-color:#63465c}
[data-theme=dark] input::placeholder,[data-theme=dark] textarea::placeholder{color:#b19aab}
[data-theme=dark] .search input{background:#2b202e!important;border-color:#63465c!important}
[data-theme=dark] footer strong{color:#c8a6bd}
[data-theme=dark] .section-rule,[data-theme=dark] .workspace-user,[data-theme=dark] footer,[data-theme=dark] .user-account{border-color:var(--border)}
[data-theme=dark] :focus-visible{outline-color:#f5a5d0}
[data-theme=dark] .skip-link:focus{background:var(--surface);color:var(--pink)}
@media(max-width:850px){.topbar-actions{gap:10px}.sidebar nav{flex-wrap:wrap}}
@media(max-width:560px){.fleet-relay-art{display:none}.theme-toggle{min-width:auto}.relay-cards{grid-template-columns:1fr}.relay-card{padding:14px}.portal-public .topbar{padding:0 18px;gap:12px}.portal-public .brand{font-size:17px}.topbar-actions .theme-toggle{padding:8px 10px}.relay-picker .section-heading{align-items:flex-start}}
/* Contain visually hidden table labels inside their horizontal scroll area. */
.table-scroll{position:relative}
.region-filter{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.region-filter label{margin:0}.region-filter select{width:auto;min-width:180px}.region-pings{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.region-ping{display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:7px;padding:10px 12px;font-size:10px}.latency-value{font-variant-numeric:tabular-nums}.latency-value[data-latency-state=ready]{color:#357d5c}.latency-value[data-latency-state=unavailable]{color:var(--muted)}.relay-card .latency-value{font-size:10px}.relay-card[hidden],.region-ping[hidden]{display:none}[data-theme=dark] .latency-value[data-latency-state=ready]{color:#99dfbd}.latency-explanation{line-height:1.6}.relay-picker .section-heading{gap:18px}@media(max-width:560px){.region-filter{width:100%}.region-filter select{flex:1;min-width:0}.region-ping{flex:1;min-width:150px}}
@media(max-width:560px){.relay-picker .section-heading{flex-direction:column;align-items:stretch}}