:root {
  --dashboard-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: dark;
  --bg: #0b0f14;
  --surface: #121822;
  --surface-2: #161e2b;
  --panel2: #111824;
  --line: #222c3a;
  --text: #e8edf4;
  --muted: #8a97a8;
  --green: #3ddc84;
  --amber: #ffb84d;
  --red: #ff5c5c;
  --critical: #ff9f43;
  --cyan: #5b8cff;
  --violet: #a78bfa;
  --blue: #5b8cff;
  --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.028) 46%, rgba(255, 184, 77, 0.045));
  --glass-bg-deep: linear-gradient(145deg, rgba(18, 24, 34, 0.74), rgba(12, 17, 24, 0.54));
  --glass-line: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 20px 46px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --shadow: var(--glass-shadow);
}

* {
  box-sizing: border-box;
  font-family: var(--dashboard-font) !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 184, 77, 0.14), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(91, 140, 255, 0.1), transparent 28%),
    linear-gradient(135deg, #070a0f 0%, var(--bg) 45%, #0d131d 100%);
  color: var(--text);
  font-family: var(--dashboard-font);
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(255, 255, 255, 0.035) 19%, transparent 28%),
    linear-gradient(295deg, transparent 0 58%, rgba(255, 184, 77, 0.035) 60%, transparent 70%);
  opacity: 0.8;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

body:not(.is-authenticated) .shell {
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
}

.hidden {
  display: none !important;
}

@media print {
  .login-page,
  .two-factor-qr-card,
  .agent-token-panel,
  #twoFactorSecretInput,
  #agentSecretOutput,
  #agentInstallCommandOutput {
    display: none !important;
  }
}

.login-page {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  min-height: 100vh;
  background: #070a0f;
  transition: opacity 240ms ease, visibility 240ms ease;
}

.login-page.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.login-video {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(255, 184, 77, 0.14), transparent 24%), linear-gradient(135deg, #080c12 0%, #111926 48%, #080c12 100%);
}

.login-video::before,
.login-video::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255, 184, 77, 0.2);
  border-radius: 50%;
  animation: loginPulse 5.6s ease-in-out infinite;
}

.login-video::after {
  inset: 23%;
  border-color: rgba(91, 140, 255, 0.22);
  animation-delay: -2.2s;
}

.login-orbit {
  position: absolute;
  width: min(560px, 74vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 184, 77, 0.28);
  animation: loginOrbit 16s linear infinite;
}

.login-orbit::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 28px rgba(255, 184, 77, 0.9);
}

.login-logo-motion {
  position: relative;
  z-index: 1;
  width: min(290px, 52vw);
  filter: drop-shadow(0 24px 38px rgba(0, 0, 0, 0.55));
  animation: logoFloat 4.8s ease-in-out infinite;
}

.login-scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: translateY(-100%);
  animation: scanline 4s linear infinite;
}

.login-panel {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(28px, 5vw, 64px);
  background: linear-gradient(145deg, rgba(9, 13, 18, 0.82), rgba(22, 30, 43, 0.62));
  border-left: 1px solid var(--glass-line);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08);
}

.login-panel img {
  width: 100px;
  margin-bottom: 12px;
}

.login-panel label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.login-panel input {
  width: 100%;
  margin-top: 7px;
  padding: 11px 12px;
  color: var(--text);
  background: rgba(14, 19, 27, 0.66);
  border: 1px solid var(--glass-line);
  border-radius: 8px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 20px;
  background: linear-gradient(180deg, rgba(9, 13, 18, 0.8), rgba(9, 13, 18, 0.56));
  border-right: 1px solid var(--glass-line);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand-mark {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

.brand strong,
.brand span {
  display: block;
}

.brand span,
.label,
small {
  color: var(--muted);
}

.label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.nav {
  display: grid;
  gap: 9px;
}

.nav-item {
  min-height: 39px;
  padding: 0 13px;
  color: var(--muted);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--glass-line);
  text-align: left;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-item img,
.settings-nav-item img,
.ui-icon,
.inline-title-icon,
.section-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}

.nav-item img {
  width: 26px;
  height: 26px;
}

.nav-item.active,
.nav-item:hover {
  color: var(--text);
  background: linear-gradient(180deg, rgba(91, 140, 255, 0.34), rgba(91, 140, 255, 0.08));
  border-color: rgba(91, 140, 255, 0.46);
  transform: translateX(2px);
}

.session-panel {
  margin-top: auto;
  padding: 16px;
  border: 1px solid var(--glass-line);
  background: var(--glass-bg-deep);
  border-radius: 10px;
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  box-shadow: var(--glass-shadow);
}

.session-panel select,
.confirm-field input,
.login-card input {
  width: 100%;
  margin: 8px 0;
  padding: 9px 10px;
  color: var(--text);
  background: rgba(14, 19, 27, 0.68);
  border: 1px solid var(--glass-line);
  border-radius: 6px;
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.content {
  padding: 28px;
  overflow: auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.18;
}

h2 {
  margin-bottom: 0;
  color: var(--amber);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.18;
}

h3 {
  font-size: 13.5px;
  font-weight: 600;
}

.top-actions,
.dialog-actions,
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.top-actions {
  min-height: 38px;
}

.top-heartbeat {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(61, 220, 132, 0.22);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 48%, rgba(61, 220, 132, 0.16), rgba(8, 14, 21, 0.52) 64%, rgba(8, 14, 21, 0.22));
}

.top-heartbeat .agent-heart {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.top-heartbeat .agent-heart::before,
.top-heartbeat .agent-heart::after {
  width: 18px;
  height: 18px;
}

.top-heartbeat .agent-heart::before {
  top: -9px;
}

.top-heartbeat .agent-heart::after {
  left: 9px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 1px 8px;
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.status-pill.live,
.status-pill.ok {
  color: var(--green);
  border-color: rgba(61, 220, 132, 0.25);
  background: rgba(61, 220, 132, 0.15);
}

.status-pill.live {
  min-height: 38px;
  padding: 0 14px;
  color: #092214;
  border-color: rgba(61, 220, 132, 0.5);
  background: linear-gradient(180deg, rgba(91, 255, 170, 0.9), rgba(61, 220, 132, 0.58));
  box-shadow: 0 0 0 rgba(61, 220, 132, 0);
  animation: liveCardPulse 2.4s ease-in-out infinite;
}

.status-pill.warn {
  color: var(--amber);
  border-color: rgba(255, 184, 77, 0.28);
  background: rgba(255, 184, 77, 0.13);
}

.status-pill.critical {
  color: var(--red);
  border-color: rgba(255, 93, 93, 0.34);
  background: rgba(255, 93, 93, 0.1);
}

.ghost-button,
.primary-button,
.danger-button,
.control-button {
  --button-accent: var(--amber);
  appearance: none;
  position: relative;
  overflow: hidden;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 230, 184, 0.54);
  color: rgba(255, 244, 218, 0.96);
  background:
    radial-gradient(circle at 50% 112%, color-mix(in srgb, var(--button-accent) 36%, transparent), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 42%, rgba(255, 184, 77, 0.16)),
    rgba(255, 184, 77, 0.13);
  backdrop-filter: blur(18px) saturate(185%);
  -webkit-backdrop-filter: blur(18px) saturate(185%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.66),
    inset 0 -2px 3px rgba(255, 255, 255, 0.2),
    inset 0 -12px 20px rgba(255, 255, 255, 0.08),
    inset 0 -32px 48px rgba(0, 0, 0, 0.3),
    0 2px 1px rgba(255, 255, 255, 0.15),
    0 8px 0 rgba(0, 0, 0, 0.18),
    0 20px 30px rgba(0, 0, 0, 0.36),
    0 0 30px color-mix(in srgb, var(--button-accent) 24%, transparent);
  font-size: 12.5px;
  font-weight: 800;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.24),
    0 5px 10px rgba(0, 0, 0, 0.34);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, filter 0.16s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ghost-button:hover,
.primary-button:hover,
.danger-button:hover,
.control-button:hover {
  transform: translateY(-3px) scale(1.018);
  border-color: rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(circle at 50% 112%, color-mix(in srgb, var(--button-accent) 48%, transparent), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08) 42%, rgba(255, 184, 77, 0.2)),
    rgba(255, 184, 77, 0.16);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.78),
    inset 0 -2px 3px rgba(255, 255, 255, 0.25),
    inset 0 -14px 22px rgba(255, 255, 255, 0.12),
    inset 0 -34px 52px rgba(0, 0, 0, 0.26),
    0 3px 1px rgba(255, 255, 255, 0.18),
    0 12px 0 rgba(0, 0, 0, 0.16),
    0 28px 42px rgba(0, 0, 0, 0.42),
    0 0 42px color-mix(in srgb, var(--button-accent) 38%, transparent);
  filter: saturate(1.16);
}

.ghost-button::before,
.primary-button::before,
.danger-button::before,
.control-button::before,
.nav-item::before,
.settings-nav-item::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 45%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent);
  opacity: 0.68;
  pointer-events: none;
}

.ghost-button::after,
.primary-button::after,
.danger-button::after,
.control-button::after {
  content: "";
  position: absolute;
  inset: -42% auto auto -22%;
  width: 70%;
  height: 170%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: rotate(22deg);
  opacity: 0;
  transition: opacity 170ms ease, transform 420ms ease;
  pointer-events: none;
}

.ghost-button:hover::after,
.primary-button:hover::after,
.danger-button:hover::after,
.control-button:hover::after {
  opacity: 1;
  transform: translateX(145%) rotate(22deg);
}

.nav-item,
.settings-nav-item {
  position: relative;
  overflow: hidden;
}

.nav-item > *,
.settings-nav-item > *,
.ghost-button > *,
.primary-button > *,
.danger-button > *,
.control-button > * {
  position: relative;
  z-index: 1;
}

.ghost-button:active,
.primary-button:active,
.danger-button:active,
.control-button:active {
  transform: translateY(1px) scale(0.99);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    inset 0 8px 22px rgba(0, 0, 0, 0.28),
    inset 0 -18px 32px rgba(255, 255, 255, 0.08),
    0 5px 0 rgba(0, 0, 0, 0.2),
    0 14px 22px rgba(0, 0, 0, 0.34),
    0 0 28px color-mix(in srgb, var(--button-accent) 24%, transparent);
}

.primary-button {
  --button-accent: var(--amber);
  border-color: rgba(255, 184, 77, 0.7);
}

.danger-button,
.control-button.danger {
  --button-accent: #ff5d3d;
  background:
    radial-gradient(circle at 50% 112%, rgba(255, 77, 49, 0.4), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 42%, rgba(255, 93, 61, 0.2)),
    rgba(255, 93, 61, 0.14);
  border-color: rgba(255, 159, 67, 0.72);
}

.control-button.danger-soft {
  --button-accent: #ffb84d;
  color: rgba(255, 246, 226, 0.96);
  background:
    radial-gradient(circle at 50% 112%, rgba(255, 184, 77, 0.4), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.065) 42%, rgba(255, 184, 77, 0.2)),
    rgba(255, 184, 77, 0.14);
  border-color: rgba(255, 184, 77, 0.64);
}

.login-preview,
.metric-grid,
.overview-layout,
.app-grid,
.vps-app-list,
.settings-grid,
.security-grid {
  display: grid;
  gap: 16px;
}

.login-preview {
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--glass-bg-deep);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--glass-shadow);
}

.access-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.access-icon-button {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
}

.access-icon-button .ui-icon {
  width: 27px;
  height: 27px;
}

.access-icon-button::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  min-width: max-content;
  padding: 6px 9px;
  border: 1px solid rgba(255, 184, 77, 0.34);
  border-radius: 8px;
  color: var(--amber);
  background: rgba(10, 13, 18, 0.92);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 20;
}

.access-icon-button:hover::after,
.access-icon-button:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 16px;
}

.metric-card,
.panel,
.app-card {
  background: var(--glass-bg-deep);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
}

.metric-card {
  position: relative;
  min-height: 126px;
  padding: 14px 16px;
  animation: panelIn 360ms ease both;
  overflow: hidden;
}

.metric-card::before,
.panel::before,
.server-row::before,
.vps-app-card::before,
.style-option::before,
.dialog-card::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 46%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0.5;
  pointer-events: none;
}

.card-icon {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0.86;
  pointer-events: none;
}

.metric-card span,
.metric-card strong,
.metric-card small {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 54px);
}

.metric-card span,
.metric-card small,
.metric-card strong {
  display: block;
}

.metric-card strong {
  margin: 8px 0 4px;
  font-size: 22px;
  font-weight: 700;
}

.metric-card.warn {
  border-color: rgba(255, 184, 77, 0.28);
  background: linear-gradient(145deg, rgba(255, 184, 77, 0.14), rgba(18, 24, 34, 0.58));
}

.overview-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.overview-layout .wide {
  grid-column: span 2;
}

.oracle-panel {
  position: relative;
}

.oracle-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}

.oracle-gauge-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.oracle-gauge-grid .gauge {
  min-height: 176px;
  align-content: center;
}

.oracle-gauge-grid .gauge-ring {
  width: 146px;
  height: 146px;
}

.oracle-gauge-grid .gauge-ring strong {
  font-size: 22px;
}

.oracle-placeholder {
  grid-column: 1 / -1;
  min-height: 150px;
  border: 1px dashed rgba(140, 159, 190, 0.22);
  border-radius: 10px;
  color: var(--muted);
  display: grid;
  place-items: center;
}

.oracle-chart-card {
  min-height: 336px;
  padding: 12px;
  border: 1px solid rgba(140, 159, 190, 0.18);
  border-radius: 10px;
  background: rgba(6, 11, 19, 0.34);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  position: relative;
}

.oracle-chart-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.oracle-chart-header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oracle-chart-header strong {
  color: var(--text);
  font-size: 13px;
}

.oracle-chart-card canvas {
  width: 100%;
  height: 300px;
  border-radius: 8px;
  cursor: crosshair;
}

.oracle-chart-tooltip {
  position: absolute;
  z-index: 4;
  min-width: 210px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(5, 10, 17, 0.94);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
  color: var(--text);
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 10px;
}

.oracle-chart-tooltip strong {
  grid-column: 1 / -1;
  color: #ffb000;
}

.oracle-chart-tooltip span {
  color: var(--muted);
  font-size: 12px;
}

.oracle-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.oracle-metric-grid div {
  min-height: 108px;
  padding: 14px;
  border: 1px solid rgba(140, 159, 190, 0.18);
  border-radius: 10px;
  background: rgba(6, 11, 19, 0.34);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 8px;
}

.oracle-metric-grid div.warning {
  border-color: rgba(255, 184, 77, 0.46);
  background: linear-gradient(145deg, rgba(255, 184, 77, 0.14), rgba(6, 11, 19, 0.38));
}

.oracle-metric-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oracle-metric-grid strong {
  color: var(--text);
  font-size: 24px;
}

.oracle-metric-grid small {
  color: var(--muted);
}

.vital-panel.critical,
.metric-card.critical {
  border-color: rgba(255, 159, 67, 0.58);
  background: linear-gradient(145deg, rgba(255, 159, 67, 0.16), rgba(18, 24, 34, 0.58));
}

.panel {
  position: relative;
  padding: 18px;
  margin-bottom: 16px;
  animation: panelIn 360ms ease both;
}

.panel-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.segmented {
  display: inline-grid;
  grid-template-columns: repeat(4, 1fr);
  min-width: 280px;
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(22, 30, 43, 0.56);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.segmented button {
  min-height: 34px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--glass-line);
}

.segmented button:last-child {
  border-right: 0;
}

.segmented button.active {
  color: var(--text);
  background: linear-gradient(145deg, rgba(91, 140, 255, 0.3), rgba(255, 255, 255, 0.05));
}

canvas {
  width: 100%;
  max-height: 350px;
  background: rgba(12, 17, 24, 0.78);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  box-shadow: none;
  filter: none;
}

.app-health,
.server-row,
.alert-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-health {
  flex-direction: column;
  align-items: stretch;
  padding: 14px 0;
  border-bottom: 1px solid #1a2330;
}

.app-health:last-child {
  border-bottom: 0;
}

.trading-stack-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.trading-stack-panel .panel-header {
  margin-bottom: 10px;
}

.trading-stack-panel .app-health {
  min-height: 210px;
  padding: 16px;
  border: 1px solid rgba(140, 159, 190, 0.18);
  border-radius: 10px;
  background: rgba(6, 11, 19, 0.34);
  justify-content: center;
  align-items: stretch;
}

.trading-stack-panel .app-health:not(:last-child) {
  border-bottom: 1px solid rgba(140, 159, 190, 0.18);
}

.trading-stack-panel > .app-health {
  margin-top: 0;
}

.trading-stack-panel .app-health + .app-health {
  margin-top: 0;
}

.trading-stack-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.trading-stack-panel .panel-header {
  grid-column: 1 / -1;
}

.app-health > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.bridge-stack-card {
  gap: 10px;
}

.agent-heartbeat-row {
  align-items: center;
}

.agent-heart {
  --heartbeat-color: var(--green);
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  transform: rotate(-45deg);
  border-radius: 6px;
  background:
    radial-gradient(circle at 32% 32%, rgba(255, 255, 255, 0.88), transparent 22%),
    linear-gradient(145deg, color-mix(in srgb, var(--heartbeat-color) 92%, white), color-mix(in srgb, var(--heartbeat-color) 62%, black));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    0 0 18px color-mix(in srgb, var(--heartbeat-color) 68%, transparent),
    0 0 34px color-mix(in srgb, var(--heartbeat-color) 28%, transparent);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.32));
}

.agent-heart::before,
.agent-heart::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: inherit;
}

.agent-heart::before {
  top: -13px;
  left: 0;
}

.agent-heart::after {
  top: 0;
  left: 13px;
}

.agent-heart.active {
  --heartbeat-color: #39ff88;
  animation: heartbeatPulse 1.35s ease-in-out infinite;
}

.agent-heart.warning {
  --heartbeat-color: #ffb000;
  animation: heartbeatPulse 1.85s ease-in-out infinite;
}

.agent-heart.inactive {
  --heartbeat-color: #2c3441;
  animation: none;
  opacity: 0.52;
  filter: grayscale(1) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.22));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    0 0 0 rgba(0, 0, 0, 0);
}

meter {
  width: 100%;
  height: 10px;
}

.app-gauge-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.trading-stack-panel .app-gauge-row {
  display: grid;
  width: 100%;
  justify-content: stretch;
  justify-items: center;
}

.trading-stack-panel .app-gauge-row .gauge {
  width: 100%;
  justify-self: center;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.status-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.status-panel + .status-panel {
  margin-top: 16px;
}

.status-service-table,
.status-check-grid {
  display: grid;
  gap: 10px;
}

.status-service-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.25fr) minmax(110px, 0.55fr) minmax(130px, 0.7fr) minmax(230px, 1.5fr);
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  background: rgba(8, 15, 24, 0.52);
}

.status-service-row strong,
.status-service-row span,
.status-service-row small {
  min-width: 0;
}

.status-service-row small {
  color: var(--muted);
}

.status-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.status-check-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  background: rgba(8, 15, 24, 0.46);
}

@media (max-width: 1050px) {
  .status-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-service-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .status-summary-grid,
  .status-check-grid { grid-template-columns: 1fr; }
  .status-service-row { grid-template-columns: 1fr; }
}

.server-table {
  display: grid;
  gap: 10px;
}

.server-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(110px, 0.45fr) minmax(420px, 1.75fr) minmax(330px, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: linear-gradient(145deg, rgba(17, 24, 36, 0.72), rgba(12, 17, 24, 0.48));
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.server-row:not(.empty-state):hover,
.vps-app-card:hover,
.metric-card:hover {
  transform: translateY(-2px);
}

.server-row.critical {
  border-color: rgba(255, 159, 67, 0.62);
  background: linear-gradient(145deg, rgba(255, 159, 67, 0.16), rgba(22, 30, 43, 0.55));
}

.server-row.bridge-site-row {
  border-color: rgba(63, 180, 255, 0.48);
  background: linear-gradient(145deg, rgba(16, 62, 92, 0.46), rgba(12, 27, 45, 0.72));
  box-shadow: inset 4px 0 0 rgba(63, 180, 255, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.server-row.bridge-site-row.critical {
  border-color: rgba(255, 159, 67, 0.62);
  box-shadow: inset 4px 0 0 rgba(255, 159, 67, 0.78);
}

.status-pill.standby {
  color: #a9c9ff;
  border-color: rgba(91, 145, 255, 0.42);
  background: rgba(53, 91, 164, 0.2);
}

.bridge-site-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  gap: 10px;
}

.bridge-site-metrics > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(91, 169, 224, 0.24);
  border-radius: 9px;
  background: rgba(4, 18, 30, 0.36);
}

.bridge-site-metrics span { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; }
.bridge-site-metrics strong { font-size: 1.05rem; }
.bridge-switch-button { border-color: rgba(76, 190, 255, 0.62); }

.bridge-site-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  grid-column: 1 / -1;
}

.bridge-site-overview-grid article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(63, 180, 255, 0.42);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(16, 62, 92, 0.4), rgba(12, 27, 45, 0.65));
}

.bridge-site-overview-grid article > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px clamp(28px, 4vw, 72px);
  min-width: 0;
}

.bridge-site-overview-grid article > div small {
  color: var(--muted);
  white-space: nowrap;
}

.bridge-site-gauges {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .bridge-site-overview-grid,
  .bridge-site-metrics { grid-template-columns: 1fr 1fr; }
}

.server-row.empty-state {
  grid-template-columns: 1fr;
  min-height: 110px;
  align-items: center;
}

.server-name {
  display: grid;
  gap: 4px;
}

.server-name strong,
.server-name small {
  display: block;
}

.server-status-stack {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.server-actions {
  display: grid;
  gap: 9px;
  justify-content: flex-end;
}

.action-line {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

.action-line .control-button {
  flex: 1 1 0;
  min-width: 116px;
  white-space: nowrap;
}

.server-actions .action-line {
  justify-self: stretch;
}

.gauge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(132px, 1fr));
  gap: 12px;
}

.gauge {
  min-height: 174px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  overflow: visible;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
}

.gauge.critical {
  background: transparent;
  border-color: transparent;
}

.gauge-ring {
  --value: 0;
  --color: #39ff88;
  width: 154px;
  height: 154px;
  margin: 0 auto 4px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  filter:
    drop-shadow(0 12px 18px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 22px color-mix(in srgb, var(--color) 22%, transparent));
  isolation: isolate;
}

.gauge-ring::before,
.gauge-ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gauge-ring::before {
  background:
    conic-gradient(from 220deg, rgba(255, 255, 255, 0.22) 0deg, rgba(255, 255, 255, 0.04) 36deg, rgba(255, 255, 255, 0.1) 136deg, rgba(255, 255, 255, 0.035) 272deg, transparent 272deg),
    radial-gradient(circle at 50% 50%, transparent 0 47%, rgba(255, 255, 255, 0.16) 48%, rgba(255, 255, 255, 0.02) 51%, transparent 52%);
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.08),
    0 0 28px color-mix(in srgb, var(--color) 18%, transparent);
  opacity: 0.9;
}

.gauge-ring::after {
  width: 78px;
  height: 78px;
  background:
    radial-gradient(circle at 48% 34%, rgba(255, 255, 255, 0.055), transparent 42%),
    linear-gradient(145deg, rgba(8, 10, 14, 0.96), rgba(2, 3, 5, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -16px 34px rgba(0, 0, 0, 0.48),
    0 0 32px color-mix(in srgb, var(--color) 22%, transparent);
  z-index: 2;
}

.gauge-glass {
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 35%, color-mix(in srgb, var(--color) 18%, transparent) 45%, rgba(255, 255, 255, 0.08) 52%, transparent 70%),
    linear-gradient(115deg, transparent 0 23%, rgba(255, 255, 255, 0.14) 33%, transparent 48%);
  mask: radial-gradient(circle, transparent 0 41%, #000 42% 68%, transparent 69%);
  -webkit-mask: radial-gradient(circle, transparent 0 41%, #000 42% 68%, transparent 69%);
  opacity: 0.95;
  backdrop-filter: blur(10px) saturate(170%);
  -webkit-backdrop-filter: blur(10px) saturate(170%);
  z-index: 1;
}

.gauge-arc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    conic-gradient(from 220deg, var(--color) 0deg, color-mix(in srgb, var(--color) 42%, white) var(--sweep), transparent var(--sweep), transparent 360deg);
  filter:
    drop-shadow(0 0 14px color-mix(in srgb, var(--color) 78%, transparent))
    drop-shadow(0 0 30px color-mix(in srgb, var(--color) 45%, transparent));
  mask: radial-gradient(circle, transparent 0 48.5%, #000 49% 50.8%, transparent 51.2%);
  -webkit-mask: radial-gradient(circle, transparent 0 48.5%, #000 49% 50.8%, transparent 51.2%);
  z-index: 4;
}

.gauge-end {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.98);
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-68px);
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.82),
    0 0 30px color-mix(in srgb, var(--color) 85%, transparent);
  z-index: 6;
}

.gauge-needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 52px;
  border-radius: 999px;
  transform-origin: 50% 0%;
  transform: translateX(-50%) rotate(calc(var(--angle) + 180deg));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--color) 45%, white), rgba(255, 255, 255, 0.18));
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.28),
    0 0 18px color-mix(in srgb, var(--color) 34%, transparent);
  z-index: 5;
}

.gauge-needle::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 18px color-mix(in srgb, var(--color) 80%, white);
}

.gauge-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.32),
    0 0 18px color-mix(in srgb, var(--color) 45%, transparent);
  z-index: 7;
}

.gauge-ring strong {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -42%);
  z-index: 8;
  font-size: 29px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
  text-shadow:
    0 0 12px color-mix(in srgb, var(--color) 28%, transparent),
    0 1px 8px rgba(0, 0, 0, 0.5);
}

.title-with-icon,
.server-name strong,
.process-title strong,
.app-health > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-icon {
  width: 30px;
  height: 30px;
}

.process-title .inline-title-icon,
.app-health .inline-title-icon {
  width: 30px;
  height: 30px;
}

.gauge span,
.gauge small {
  display: block;
}

.gauge span {
  margin-top: -5px;
  font-size: 12px;
  font-weight: 800;
  color: var(--color, var(--amber));
  text-transform: uppercase;
  letter-spacing: 0;
  text-shadow: 0 0 12px color-mix(in srgb, var(--color, var(--amber)) 45%, transparent);
}

.gauge small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
}

.control-button {
  min-width: 88px;
}

.control-button .ui-icon {
  width: 19px;
  height: 19px;
}

.control-button span {
  white-space: nowrap;
}

.icon-only-button {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
}

.icon-only-button .ui-icon {
  width: 25px;
  height: 25px;
}

.fleet-order-actions,
.table-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fleet-order-actions {
  margin-top: 8px;
}

.fleet-order-actions .mini-button {
  margin-top: 0;
}

.table-pagination {
  justify-content: flex-end;
  margin-top: 12px;
  color: var(--text);
  font-size: 12.5px;
}

.vps-app-card .process-title .inline-title-icon {
  width: 60px;
  height: 60px;
}

.two-factor-panel {
  align-items: end;
}

.two-factor-qr-card {
  display: grid;
  gap: 9px;
  justify-items: start;
}

.two-factor-qr-card img {
  display: none;
  width: 168px;
  height: 168px;
  padding: 10px;
  border: 1px solid rgba(255, 184, 77, 0.34);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 10px 28px rgba(0, 0, 0, 0.24);
}

.two-factor-qr-card img.ready {
  display: block;
}

.two-factor-qr-card small {
  color: var(--muted);
  font-size: 12px;
}

.agent-token-panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(20, 27, 38, 0.72), rgba(12, 17, 24, 0.5));
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.compact-header {
  margin-bottom: 12px;
}

.token-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.copy-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.copy-field input,
.install-command-field textarea {
  border-color: rgba(255, 184, 77, 0.32);
  background: rgba(7, 10, 14, 0.5);
}

.copy-field input {
  overflow: hidden;
  color: var(--amber);
  text-overflow: ellipsis;
}

.install-command-field {
  margin-top: 12px;
}

.install-command-field textarea {
  width: 100%;
  resize: vertical;
  min-height: 132px;
  color: var(--amber);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
}

.control-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.app-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vps-app-list {
  grid-template-columns: 1fr;
}

.vps-app-card {
  position: relative;
  padding: 16px;
  background: linear-gradient(145deg, rgba(17, 24, 36, 0.72), rgba(12, 17, 24, 0.48));
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-size: 980px;
}

.vps-app-card.critical {
  border-color: rgba(255, 159, 67, 0.62);
  background: linear-gradient(145deg, rgba(255, 159, 67, 0.16), rgba(22, 30, 43, 0.55));
}

.vps-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.vps-app-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.process-panel {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 320px;
  padding: 14px;
  background: rgba(15, 21, 32, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.process-panel.critical {
  border-color: rgba(255, 159, 67, 0.55);
  background: rgba(255, 159, 67, 0.08);
}

.bridge-panel {
  min-height: auto;
  align-content: start;
  background: rgba(10, 27, 31, 0.72);
  border-color: rgba(71, 211, 174, 0.24);
}

.bridge-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 8px;
}

.bridge-facts span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(4, 10, 15, 0.34);
}

.bridge-facts small,
.bridge-freshness {
  color: var(--muted);
}

.bridge-facts strong {
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.bridge-route-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(9, 17, 25, 0.7);
  border: 1px solid rgba(71, 211, 174, 0.2);
}

.bridge-route-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bridge-route-header h3 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 17px;
}

.bridge-route-header p,
.bridge-route-empty,
.bridge-route-summary small {
  margin: 0;
  color: var(--muted);
}


.bridge-template-panel {
  border-color: rgba(255, 178, 63, 0.24);
}

.bridge-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bridge-template-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(4, 10, 15, 0.35);
}

.bridge-template-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.bridge-template-title strong,
.bridge-template-meta code {
  color: var(--text);
}

.bridge-template-title small,
.bridge-template-meta span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.bridge-template-meta code {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.bridge-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bridge-route-list {
  display: grid;
  gap: 10px;
}

.bridge-route-list.compact .bridge-route-card {
  padding: 10px;
}

.bridge-route-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(4, 10, 15, 0.35);
}

.bridge-route-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bridge-route-summary strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}

.bridge-route-table {
  display: grid;
  gap: 6px;
  overflow-x: auto;
}

.bridge-route-row {
  display: grid;
  gap: 8px;
  align-items: center;
  min-width: 620px;
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.bridge-route-row.legacy {
  grid-template-columns: minmax(130px, 1.3fr) minmax(92px, 0.8fr) repeat(4, minmax(82px, 0.7fr));
}

.bridge-route-row.ingress {
  grid-template-columns: minmax(130px, 1.3fr) minmax(92px, 0.8fr) repeat(5, minmax(82px, 0.7fr));
  min-width: 850px;
}

.bridge-route-row.head {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.bridge-execution-evidence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0 0 4px;
  padding: 9px 12px;
  border: 1px solid rgba(77, 208, 225, 0.18);
  border-radius: 7px;
  background: rgba(8, 22, 30, 0.55);
  font-size: 12px;
}

.bridge-execution-evidence span small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.bridge-execution-evidence p {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
}

.bridge-execution-warning {
  color: var(--warning);
}

.trades-tabs {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 4px 0 16px;
}

.trades-tabs button {
  width: 100%;
}

.trade-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.trade-metric-grid article {
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(153, 171, 197, 0.16);
  border-radius: 10px;
  background: rgba(7, 15, 24, 0.55);
}

.trade-metric-grid span,
.trade-metric-grid small {
  display: block;
  color: var(--muted);
}

.trade-metric-grid strong {
  display: block;
  margin: 6px 0 3px;
  color: var(--text);
  font-size: 1.35rem;
}

.trade-table-wrap {
  overflow-x: auto;
  margin-top: 14px;
  border: 1px solid rgba(153, 171, 197, 0.14);
  border-radius: 10px;
}

.trade-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.trade-table th,
.trade-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(153, 171, 197, 0.1);
  text-align: left;
  white-space: nowrap;
}

.trade-table th {
  color: var(--muted);
  background: rgba(12, 23, 35, 0.86);
  font-size: 10px;
  text-transform: uppercase;
}

.trade-table td strong,
.trade-table td small { display: block; }
.trade-table td small { color: var(--muted); text-transform: capitalize; }
.trade-table td.trade-profit {
  color: #b9d8ff;
  background: linear-gradient(90deg, rgba(49, 112, 255, 0.34), rgba(49, 112, 255, 0.12));
  box-shadow: inset 3px 0 0 #6299ff;
  font-weight: 700;
}
.trade-table td.trade-loss {
  color: #ffc0ba;
  background: linear-gradient(90deg, rgba(224, 58, 67, 0.34), rgba(224, 58, 67, 0.12));
  box-shadow: inset 3px 0 0 #ff6670;
  font-weight: 700;
}
.trade-table td.trade-flat { color: var(--text); font-weight: 700; }

#tradePagination { align-items: center; }
#tradePagination .mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  min-width: 92px;
  min-height: 40px;
}
#tradePagination span,
#tradePagination select {
  min-height: 40px;
}
#tradePagination span { display: inline-flex; align-items: center; }

.latest-bridge-route-panel {
  margin-bottom: 12px;
}

@media (max-width: 760px) {
  .bridge-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bridge-route-header,
  .bridge-route-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .bridge-signal-filter,
  .bridge-template-grid {
    grid-template-columns: 1fr;
  }
}

.process-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0;
}

.process-substatus {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.process-substatus strong {
  color: var(--text);
}

.mt5-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 184, 77, 0.22);
  border-radius: 8px;
  background: rgba(7, 10, 14, 0.28);
  color: var(--muted);
  font-size: 12px;
}

.mt5-detail-grid span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.mt5-detail-grid strong {
  min-width: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mt5-detail-grid.muted strong {
  color: var(--amber);
}

.mt5-operational-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 10px;
}

.mt5-operational-strip span,
.mt5-summary-grid > div {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 184, 77, 0.2);
  border-radius: 8px;
  background: rgba(10, 15, 21, 0.38);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.mt5-operational-strip strong,
.mt5-summary-grid strong {
  color: var(--text);
  font-size: 13px;
  text-transform: none;
}

.mt5-operational-strip .warn strong {
  color: var(--orange);
}

.mt5-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.mt5-summary-grid strong.positive,
.mt5-trade-row .positive {
  color: var(--success);
}

.mt5-summary-grid strong.negative,
.mt5-trade-row .negative {
  color: var(--orange);
}

.mt5-trade-tables {
  display: grid;
  gap: 12px;
  margin: 10px 0 12px;
}

.mt5-table-wrap {
  min-width: 0;
}

.mt5-table-wrap h4 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 13px;
}

.mt5-trade-table {
  overflow-x: auto;
  border: 1px solid rgba(255, 184, 77, 0.18);
  border-radius: 8px;
  background: rgba(5, 8, 12, 0.22);
}

.mt5-trade-row {
  display: grid;
  grid-template-columns: 0.85fr 0.65fr 0.65fr 0.95fr 0.8fr 1fr 1fr;
  min-width: 860px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 184, 77, 0.12);
  color: var(--text);
  font-size: 12px;
}

.mt5-trade-row:first-child {
  border-top: 0;
}

.mt5-trade-row.head {
  color: var(--amber);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mt5-trade-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mt5-table-empty {
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
}

.app-card {
  padding: 18px;
}

.app-card p {
  color: var(--muted);
  line-height: 1.5;
  font-size: 12.5px;
}

.app-card .app-gauge-row {
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  margin-top: 14px;
}

.vps-app-card .app-gauge-row {
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 0;
}

.vps-app-card .app-gauge-row-tv {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.vps-app-card .app-gauge-row-mt5 {
  grid-template-columns: repeat(4, minmax(132px, 1fr));
}

.vps-app-card .gauge {
  display: grid;
  align-content: center;
  min-height: 238px;
  padding: 0;
}

.vps-app-card .gauge-ring {
  width: 214px;
  height: 214px;
  margin-bottom: 0;
  filter:
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 14px color-mix(in srgb, var(--color) 16%, transparent));
}

.vps-app-card .gauge-ring::before,
.vps-app-card .gauge-arc {
  width: 190px;
  height: 190px;
}

.vps-app-card .gauge-ring::after {
  width: 108px;
  height: 108px;
}

.vps-app-card .gauge-glass {
  inset: 18px;
  opacity: 0.78;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.vps-app-card .gauge-arc {
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--color) 52%, transparent));
}

.vps-app-card .gauge-needle {
  box-shadow: 0 0 10px color-mix(in srgb, var(--color) 24%, transparent);
}

.vps-app-card .gauge-needle {
  height: 74px;
}

.vps-app-card .gauge-end {
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-94px);
}

.vps-app-card .gauge-hub {
  width: 6px;
  height: 6px;
}

.vps-app-card .gauge-ring strong {
  font-size: 38px;
}

.vps-app-card .gauge span {
  margin-top: -10px;
  font-size: 13px;
}

.vps-app-card .gauge small {
  font-size: 12px;
}

.alert-list,
.command-list,
.audit-list,
.user-list {
  display: grid;
  gap: 12px;
}


.master-filter {
  position: relative;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0 0 8px;
}

.master-filter-title {
  color: #ffb84d;
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.master-filter-title::before {
  content: "🔍";
  margin-right: 6px;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.38));
}

.filter-segment {
  position: relative;
}

.filter-segment summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  color: var(--text);
  list-style: none;
  cursor: pointer;
  border: 1px solid rgba(91, 140, 255, 0.72);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(31, 41, 58, 0.96), rgba(21, 28, 41, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 30px rgba(0, 0, 0, 0.22);
}

.filter-segment summary::-webkit-details-marker {
  display: none;
}

.filter-segment summary span {
  color: #eef4ff;
  font-size: 16px;
  font-weight: 700;
}

.filter-segment summary strong {
  padding: 3px 10px;
  color: #6f99ff;
  background: rgba(91, 140, 255, 0.18);
  border-radius: 999px;
  font-size: 13px;
}

.filter-segment summary::after {
  content: "⌄";
  color: var(--muted);
  font-size: 12px;
}

.date-segment summary {
  border-color: rgba(255, 255, 255, 0.16);
}

.filter-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: min(360px, calc(100vw - 48px));
  padding: 16px;
  background: rgba(22, 30, 44, 0.98);
  border: 1px solid rgba(110, 128, 160, 0.28);
  border-radius: 14px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.filter-dropdown.wide {
  min-width: min(520px, calc(100vw - 48px));
}

.date-dropdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.filter-dropdown label,
.vps-registry-panel label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.filter-dropdown input,
.filter-dropdown select,
.page-selector,
.vps-registry-panel input {
  width: 100%;
  margin-top: 6px;
  padding: 10px 11px;
  color: var(--text);
  background: rgba(14, 19, 27, 0.66);
  border: 1px solid var(--glass-line);
  border-radius: 8px;
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.filter-dropdown select {
  min-width: 190px;
  color-scheme: dark;
  cursor: pointer;
}

.filter-dropdown input:focus,
.filter-dropdown select:focus {
  outline: none;
  border-color: rgba(91, 140, 255, 0.82);
  box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.18);
}

.trade-filter .filter-dropdown {
  min-width: 230px;
}

.trade-filter .date-segment .filter-dropdown {
  right: 0;
  left: auto;
  min-width: min(530px, calc(100vw - 48px));
}

.page-selector {
  width: auto;
  min-width: 112px;
  margin-top: 0;
  color-scheme: dark;
}

.alert-row,
.command-row,
.audit-row,
.user-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 160px minmax(220px, 1.4fr) 220px;
  gap: 10px 14px;
  align-items: center;
  padding: 14px;
  background: linear-gradient(145deg, rgba(17, 24, 36, 0.7), rgba(12, 17, 24, 0.48));
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.38;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.alert-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
}

.alert-actions .control-button {
  flex: 1 1 0;
  min-width: 116px;
}

.command-row {
  grid-template-columns: minmax(150px, 1fr) minmax(140px, 0.9fr) minmax(170px, 1fr) 118px minmax(135px, 0.85fr) minmax(220px, 1.3fr);
  gap: 12px 16px;
  padding-block: 16px;
}

.audit-row {
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 0.95fr) minmax(140px, 0.85fr) minmax(220px, 1.4fr) minmax(135px, 0.85fr);
  gap: 12px 16px;
}

.user-row {
  grid-template-columns: minmax(240px, 1.25fr) minmax(92px, 0.45fr) minmax(116px, 0.55fr) minmax(180px, 1fr);
}

.table-head {
  color: var(--orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  background: linear-gradient(145deg, rgba(255, 159, 67, 0.15), rgba(12, 17, 24, 0.5));
  border-color: rgba(255, 184, 77, 0.34);
}

.table-empty-row {
  grid-template-columns: minmax(180px, 0.4fr) minmax(220px, 1fr);
}

.alert-row > *,
.command-row > *,
.audit-row > *,
.user-row > * {
  min-width: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow-wrap: anywhere;
}

.alert-row strong,
.command-row strong,
.audit-row strong,
.user-row strong,
.alert-row small,
.command-row small,
.audit-row small,
.user-row small,
.alert-row .status-pill,
.command-row .status-pill,
.audit-row .status-pill,
.user-row .status-pill {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.user-list {
  margin-top: 14px;
}

.user-row {
  grid-template-columns: minmax(260px, 1fr) 128px 128px minmax(220px, 0.8fr);
  align-items: center;
  justify-items: stretch;
  padding-block: 17px;
}

.user-row .status-pill {
  justify-content: center;
  width: 100%;
  min-height: 31px;
  white-space: nowrap;
}

.user-row small:last-child {
  text-align: right;
}

.user-row-button {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.user-row-button:hover,
.user-row-button.active {
  border-color: rgba(255, 184, 77, 0.54);
  background: linear-gradient(145deg, rgba(255, 184, 77, 0.13), rgba(17, 24, 36, 0.56));
  transform: translateY(-1px);
}

.alert-row.high {
  border-color: rgba(255, 92, 92, 0.45);
  background: linear-gradient(145deg, rgba(255, 92, 92, 0.12), rgba(17, 24, 36, 0.54));
}

.alert-row.critical {
  border-color: rgba(255, 159, 67, 0.58);
  background: linear-gradient(145deg, rgba(255, 159, 67, 0.16), rgba(17, 24, 36, 0.54));
}

.command-row.completed {
  border-color: rgba(61, 220, 132, 0.24);
}

.command-row.failed {
  border-color: rgba(255, 159, 67, 0.58);
  background: linear-gradient(145deg, rgba(255, 159, 67, 0.16), rgba(17, 24, 36, 0.54));
}

.command-row.queued,
.command-row.sent {
  border-color: rgba(91, 140, 255, 0.35);
}

.audit-row.security-attention {
  border-color: rgba(255, 159, 67, 0.45);
  background: linear-gradient(145deg, rgba(255, 159, 67, 0.14), rgba(17, 24, 36, 0.54));
}

.security-grid,
.backup-summary {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.security-grid div,
.backup-summary div {
  min-height: 68px;
  display: grid;
  place-items: center;
  padding: 14px;
  background: linear-gradient(145deg, rgba(17, 24, 36, 0.7), rgba(12, 17, 24, 0.48));
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  text-align: center;
  overflow-wrap: anywhere;
  line-height: 1.35;
  font-size: 12.5px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.backup-summary div.critical-zone {
  border-color: rgba(255, 159, 67, 0.55);
  background: linear-gradient(145deg, rgba(255, 159, 67, 0.16), rgba(17, 24, 36, 0.54));
}

.settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-shell {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 16px;
}

.settings-nav {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 14px;
  background: var(--glass-bg-deep);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  box-shadow: var(--glass-shadow);
}

.settings-nav-item {
  min-height: 38px;
  padding: 0 12px;
  color: var(--muted);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
}

.settings-nav-item.active,
.settings-nav-item:hover {
  color: var(--text);
  border-color: rgba(91, 140, 255, 0.46);
  background: linear-gradient(180deg, rgba(91, 140, 255, 0.34), rgba(91, 140, 255, 0.08));
}

.settings-page {
  display: none;
}

.settings-page.active {
  display: block;
}

.settings-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-form.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vps-settings-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr);
  gap: 14px;
  align-items: start;
}

.vps-registry-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: rgba(15, 21, 32, 0.62);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.vps-settings-list {
  display: grid;
  gap: 8px;
  max-height: 310px;
  overflow: auto;
}

.vps-settings-item {
  min-height: 42px;
  padding: 9px 10px;
  color: var(--muted);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--glass-line);
  border-radius: 8px;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.vps-settings-item:hover,
.vps-settings-item.active {
  color: #1f1303;
  background: linear-gradient(180deg, #ffd08a, #ff9f43);
  border-color: rgba(255, 184, 77, 0.72);
  transform: translateX(2px);
}

.vps-settings-item small {
  display: block;
  margin-top: 3px;
  color: inherit;
  opacity: 0.72;
}

.settings-form label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-form input,
.settings-form select {
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  color: var(--text);
  background: rgba(14, 19, 27, 0.66);
  border: 1px solid var(--glass-line);
  border-radius: 6px;
  font-size: 13px;
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.profile-picture-control {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

.profile-picture-control img,
.user-identity img,
.user-identity > span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #0e131b;
  border: 1px solid var(--line);
}

.profile-picture-control img:not(.has-image) {
  background: linear-gradient(135deg, rgba(255, 184, 77, 0.18), rgba(255, 255, 255, 0.04));
}

.profile-picture-control input {
  margin-top: 0;
}

.mini-button {
  min-height: 30px;
  margin-top: 8px;
  padding: 0 10px;
}

.user-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.user-identity > span {
  display: inline-grid;
  place-items: center;
  color: #1f1303;
  background: linear-gradient(180deg, #ffd08a, #ff9f43);
  font-size: 12px;
  font-weight: 700;
}

.user-identity strong small {
  display: block;
  margin-top: 3px;
}

.style-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.style-option {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 176px;
  padding: 14px;
  color: var(--text);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.38;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.style-option:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 184, 77, 0.52);
  background: rgba(255, 184, 77, 0.08);
}

.style-option strong,
.style-option small {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.graph-preview {
  position: relative;
  height: 92px;
  overflow: hidden;
  background:
    linear-gradient(#263141 1px, transparent 1px) 0 0 / 100% 23px,
    linear-gradient(90deg, #263141 1px, transparent 1px) 0 0 / 25% 100%,
    #0c1118;
  border: 1px solid #263141;
  border-radius: 8px;
}

.graph-preview::before,
.graph-preview::after,
.graph-preview span {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  pointer-events: none;
}

.graph-line::before {
  top: 48px;
  height: 2px;
  background: linear-gradient(100deg, transparent 0 6%, #6fb58b 6% 18%, transparent 18% 23%, #6fb58b 23% 45%, transparent 45% 50%, #6fb58b 50% 80%, transparent 80%);
  transform: skewY(-12deg);
}

.graph-area::before {
  bottom: 14px;
  height: 54px;
  background: linear-gradient(180deg, rgba(120, 146, 189, 0.58), rgba(120, 146, 189, 0.05));
  clip-path: polygon(0 76%, 16% 48%, 32% 58%, 48% 28%, 66% 46%, 82% 18%, 100% 34%, 100% 100%, 0 100%);
}

.graph-area::after {
  bottom: 52px;
  height: 2px;
  background: #7892bd;
  transform: skewY(-10deg);
}

.graph-step::before {
  inset: 20px 12px 20px;
  background: #c58a4a;
  clip-path: polygon(0 62%, 18% 62%, 18% 38%, 40% 38%, 40% 68%, 62% 68%, 62% 28%, 84% 28%, 84% 52%, 100% 52%, 100% 56%, 80% 56%, 80% 32%, 66% 32%, 66% 72%, 36% 72%, 36% 42%, 22% 42%, 22% 66%, 0 66%);
}

.graph-spark {
  background: #0c1118;
}

.graph-spark::before {
  top: 45px;
  height: 2px;
  background: linear-gradient(100deg, #c0a064, #6fb58b 45%, #c58a4a 72%, #7892bd);
  transform: skewY(-16deg);
}

.dash-option > div {
  display: grid;
  place-items: center;
  height: 84px;
}

.dash-ring > div {
  width: 84px;
  justify-self: center;
  border-radius: 50%;
  background: conic-gradient(#ffb84d 0 72%, #263141 72% 100%);
}

.dash-ring > div span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #0c1118;
}

.dash-bar > div {
  align-items: end;
}

.dash-bar > div span {
  width: 100%;
  height: 16px;
  background: linear-gradient(90deg, #6fb58b 0 62%, #ffb84d 62% 82%, #263141 82%);
  border: 1px solid #364152;
  border-radius: 999px;
}

.dash-tile > div {
  background: linear-gradient(180deg, rgba(255, 184, 77, 0.16), rgba(12, 17, 24, 0.9));
  border: 1px solid rgba(255, 184, 77, 0.34);
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
}

.dash-radar > div {
  width: 84px;
  justify-self: center;
  border-radius: 50%;
  border: 1px solid rgba(111, 181, 139, 0.52);
  background: radial-gradient(circle, rgba(111, 181, 139, 0.32) 0 18%, transparent 19% 38%, rgba(111, 181, 139, 0.12) 39% 42%, transparent 43%);
}

.dropdown-menu {
  position: relative;
  margin-top: 6px;
}

.dropdown-button {
  width: 100%;
  min-height: 39px;
  padding: 0 36px 0 10px;
  color: var(--text);
  background: #0e131b;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-button::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-65%) rotate(45deg);
}

.dropdown-panel {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: none;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  background: #0e131b;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.dropdown-menu.open .dropdown-panel {
  display: grid;
  gap: 6px;
  animation: menuIn 140ms ease both;
}

.dropdown-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  text-transform: none;
  letter-spacing: 0;
}

.dropdown-panel input {
  width: auto;
  margin: 0;
}

.settings-form input:focus,
.settings-form select:focus {
  outline: none;
  border-color: var(--blue);
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.settings-actions > button {
  flex: 1 1 190px;
  white-space: nowrap;
}

.settings-actions > .settings-status {
  flex: 1 1 100%;
}

.settings-actions.compact-actions {
  justify-content: flex-end;
}

.settings-actions.compact-actions > button {
  flex: 0 0 auto;
  min-width: 146px;
  min-height: 42px;
  padding-inline: 16px;
}

.settings-actions.compact-actions > .settings-status {
  flex: 1 1 100%;
  text-align: right;
}

.settings-status {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.settings-status.ok {
  color: var(--green);
}

.settings-status.err {
  color: var(--red);
}

.role-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.role-matrix article {
  padding: 14px;
  background: linear-gradient(145deg, rgba(17, 24, 36, 0.7), rgba(12, 17, 24, 0.48));
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  overflow-wrap: anywhere;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.role-matrix h3 {
  margin-bottom: 10px;
  color: var(--amber);
}

.role-matrix ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menuIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loginOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes logoFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.025);
  }
}

@keyframes loginPulse {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.75;
  }
}

@keyframes scanline {
  to {
    transform: translateY(100%);
  }
}

@keyframes liveCardPulse {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(61, 220, 132, 0);
  }
  50% {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(61, 220, 132, 0.24);
  }
}

@keyframes heartbeatPulse {
  0%,
  100% {
    transform: rotate(-45deg) scale(0.94);
  }
  16% {
    transform: rotate(-45deg) scale(1.16);
  }
  28% {
    transform: rotate(-45deg) scale(0.98);
  }
  42% {
    transform: rotate(-45deg) scale(1.08);
  }
  58% {
    transform: rotate(-45deg) scale(0.96);
  }
}

dialog {
  max-width: min(460px, calc(100vw - 28px));
  padding: 0;
  color: var(--text);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  background: transparent;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dialog-card {
  position: relative;
  padding: 22px;
  background: var(--glass-bg-deep);
  border-radius: inherit;
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  box-shadow: var(--glass-shadow);
}

.login-card {
  display: grid;
  gap: 10px;
}

.confirm-field {
  display: block;
  margin: 18px 0;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .shell,
  .overview-layout {
    grid-template-columns: 1fr;
  }

  .overview-layout .wide {
    grid-column: auto;
  }

  .sidebar {
    position: static;
  }

  .metric-grid,
  .app-gauge-row,
  .app-grid,
  .vps-app-grid,
  .mt5-detail-grid,
  .mt5-operational-strip,
  .mt5-summary-grid,
  .settings-grid,
  .settings-shell,
  .style-gallery,
  .role-matrix,
  .security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .server-row {
    grid-template-columns: 1fr;
  }

  .server-actions,
  .action-line {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 680px) {
  .login-page {
    grid-template-columns: 1fr;
  }

  .login-video {
    min-height: 260px;
  }

  .login-panel {
    align-content: start;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .content,
  .sidebar {
    padding: 16px;
  }

  .topbar,
  .login-preview,
  .panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .metric-grid,
  .app-gauge-row,
  .app-grid,
  .vps-app-grid,
  .mt5-detail-grid,
  .mt5-operational-strip,
  .mt5-summary-grid,
  .settings-grid,
  .settings-shell,
    .settings-form,
    .settings-form.compact,
    .vps-settings-layout,
    .style-gallery,
    .role-matrix,
  .security-grid,
  .backup-summary,
  .alert-row,
  .command-row,
  .audit-row,
  .user-row,
  .server-row {
    grid-template-columns: 1fr;
  }

  .alert-actions {
    justify-content: flex-start;
  }

  .segmented {
    width: 100%;
    min-width: 0;
  }
}

/* Operational layout: keep the selected task and its current state in view. */
.content { min-width: 0; }
.topbar > div { min-width: 0; }
.top-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.connection-status { display: grid; gap: 5px; justify-items: start; }
.connection-status small { font-size: 12px; }
.connection-notice { padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--amber); border-radius: 10px; color: var(--text); }
.mobile-nav-toggle { display: none; }
body:not([data-view="overview"]) .metric-grid { display: none; }
.incident-panel { margin-bottom: 20px; padding: 16px 0; border-block: 1px solid var(--line); }
.incident-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.incident-header h2 { font-size: 20px; }
.incident-header p { margin: 6px 0 0; color: var(--muted); }
.incident-list { display: grid; }
.incident-row { display: grid; grid-template-columns: minmax(140px, .7fr) minmax(0, 2fr) auto; gap: 16px; align-items: center; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line); }
.incident-row small { display: block; margin-top: 4px; }
.incident-row p { margin: 0; overflow-wrap: anywhere; }
body:not([data-view="overview"]) .incident-list { display: none; }
body:not([data-view="overview"]) .incident-panel { padding: 10px 0; margin-bottom: 16px; }
body:not([data-view="overview"]) .incident-header h2 { display: none; }
body:not([data-view="overview"]) .incident-header p { margin: 0; }
.server-table { container-type: inline-size; min-width: 0; }
.server-row { grid-template-columns: minmax(150px, .65fr) minmax(100px, .4fr) minmax(0, 2fr); }
.server-row > * { min-width: 0; }
.server-row .gauge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.server-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-start; padding-top: 12px; border-top: 1px solid var(--line); }
.server-actions .action-line { flex: 1 1 320px; width: auto; flex-wrap: wrap; justify-content: flex-start; }
.server-actions .control-button { min-width: 0; white-space: normal; min-height: 44px; }
.server-name { overflow-wrap: anywhere; }
.server-row:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
@container (max-width: 850px) {
  .server-row { grid-template-columns: minmax(0, 1fr) auto; }
  .server-row .gauge-grid { grid-column: 1 / -1; }
}
@container (max-width: 480px) {
  .server-row { grid-template-columns: minmax(0, 1fr); }
  .server-status-stack { display: flex; flex-wrap: wrap; }
  .server-row .gauge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand span { display: none; }
  .brand strong { font-size: 14px; }
  .mobile-nav-toggle { display: inline-flex; align-items: center; min-height: 44px; }
  .sidebar .nav, .sidebar .session-panel { display: none; }
  .sidebar.nav-open .nav { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sidebar.nav-open .session-panel:not(.hidden) { display: block; width: 100%; }
  .nav-item { min-height: 44px; }
}
@media (max-width: 680px) {
  .brand { flex: 1 1 160px; }
  .sidebar.nav-open .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { gap: 12px; }
  .topbar h1 { font-size: 18px; line-height: 1.3; }
  .topbar .eyebrow { display: none; }
  .top-actions { justify-content: space-between; }
  .incident-header { align-items: flex-start; }
  .incident-header .ghost-button { flex-shrink: 0; min-height: 44px; }
  .incident-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .incident-row button { justify-self: start; min-height: 44px; }
  .server-row { grid-template-columns: minmax(0, 1fr); }
  .server-row .gauge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { min-width: 0; overflow-wrap: anywhere; }
}

/* Precision Gold: responsive vector charts with readable screen-sized labels. */
.chart-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px; color:var(--muted); font-size:14px; }
.chart-toolbar label { display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:var(--text); }
.chart-toolbar select { min-height:44px; padding:8px 12px; border:1px solid var(--glass-line); border-radius:8px; background:#121822; color:var(--text); font:inherit; }
.precision-chart { position:relative; min-width:0; padding:14px 8px 10px; background:#10161e; border-radius:10px; }
.precision-plot { display:block; width:100%; height:260px; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; touch-action:pan-y; }
.precision-plot:focus-visible,.chart-toolbar select:focus-visible { outline:2px solid #efb65e; outline-offset:3px; }
.precision-meta { min-height:24px; display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; padding:0 10px 8px; color:#efb65e; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.precision-series { display:inline-flex; gap:8px; align-items:center; }
.precision-series i { display:inline-block; width:20px; }
.precision-note { padding:8px 10px 0; color:#b3bfcd; font-size:12px; line-height:1.5; }
.precision-tooltip { position:absolute; z-index:3; left:12px; right:12px; bottom:40px; padding:10px 12px; border:1px solid #4b5869; border-radius:6px; background:#17212d; color:#edf2f7; font-size:13px; line-height:1.5; pointer-events:none; }
.oracle-agent-heading { color:var(--text); font-size:15px; font-weight:600; margin:22px 0 10px; }
@media(max-width:680px) { .precision-chart { padding-inline:0; } .chart-toolbar label { width:100%; } .chart-toolbar select { flex:1; } }
.overview-layout > .panel { min-width:0; }
.precision-plot { min-width:0; max-width:100%; }
.oracle-dashboard { grid-template-columns:minmax(0,1fr); }
.oracle-dashboard > *, .oracle-chart-card > * { min-width:0; }
.oracle-chart-card { grid-template-columns:minmax(0,1fr); grid-template-rows:none; }
@media(max-width:1100px) { .oracle-gauge-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .oracle-chart-header { flex-wrap:wrap; } }
@media(max-width:380px) { .oracle-gauge-grid { grid-template-columns:minmax(0,1fr); } }
.oracle-metric-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); }

/* Keep authentication reachable when mobile browser chrome or the keyboard opens. */
.login-page { min-height:0; height:100vh; height:100dvh; overflow-y:auto; overscroll-behavior:contain; }
.login-submit-actions button { width:100%; min-height:48px; }
@media (max-width:680px), (max-height:600px) and (pointer:coarse) {
  .login-page { display:block; inset:auto 0; top:var(--login-viewport-top,0px); height:var(--login-viewport-height,100dvh); scroll-padding-block:20px 90px; }
  .login-video { display:none; }
  .login-panel { display:flex; flex-direction:column; min-height:100%; gap:12px; padding: max(20px,env(safe-area-inset-top)) 20px max(16px,env(safe-area-inset-bottom)); border:0; }
  .login-panel > img { width:56px; margin-bottom:0; }
  .login-panel h1 { font-size:20px; line-height:1.3; margin-bottom:4px; }
  .login-panel > .label { margin-bottom:0; }
  .login-panel label { font-size:12px; }
  .login-panel input { font-size:16px; min-height:44px; scroll-margin-block:20px 90px; }
  .login-panel .settings-status { margin:0; font-size:13px; line-height:1.45; }
  .login-submit-actions { position:sticky; bottom:0; z-index:2; margin-top:auto; padding:12px 0 max(12px,env(safe-area-inset-bottom)); background:#111824; }
  .login-submit-actions button { min-height:48px; }
}

/* Phone layout: every dashboard view and settings page must fit the viewport. */
@media (max-width: 680px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .shell,
  .content,
  .view,
  .view > *,
  .settings-shell,
  .settings-page,
  .settings-page > *,
  .panel,
  .overview-layout,
  .oracle-dashboard,
  .oracle-chart-card,
  .trading-stack-panel,
  .vps-app-card,
  .process-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .content {
    padding: 18px 16px max(24px, env(safe-area-inset-bottom));
    overflow-x: clip;
  }

  .panel {
    padding: 14px;
    margin-bottom: 14px;
  }

  .topbar h1,
  .panel-header h2,
  .vps-app-header strong,
  .process-title strong,
  .brand strong,
  .settings-status,
  .copy-field,
  .token-output-grid,
  .alert-row > *,
  .command-row > *,
  .audit-row > *,
  .user-row > * {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .topbar,
  .top-actions,
  .access-actions,
  .panel-header,
  .vps-app-header,
  .process-title,
  .app-health > div,
  .settings-actions,
  .button-row,
  .alert-actions,
  .table-pagination {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .topbar h1 {
    font-size: clamp(18px, 5.3vw, 22px);
  }

  .panel-header h2 {
    font-size: clamp(22px, 7vw, 28px);
  }

  .top-actions {
    justify-content: flex-start;
  }

  .top-actions .access-actions {
    width: auto;
  }

  .incident-header {
    flex-wrap: wrap;
  }

  .metric-grid,
  .overview-layout,
  .trading-stack-panel,
  .app-grid,
  .vps-app-grid,
  .settings-grid,
  .settings-form,
  .settings-form.compact,
  .vps-settings-layout,
  .token-output-grid,
  .style-gallery,
  .role-matrix,
  .security-grid,
  .backup-summary,
  .mt5-detail-grid,
  .mt5-operational-strip,
  .mt5-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .trading-stack-panel {
    display: grid;
  }

  .trading-stack-panel .panel-header {
    grid-column: 1;
  }

  .trading-stack-panel .app-health {
    min-height: 0;
    padding: 14px;
  }

  .app-health > div,
  .process-title {
    align-items: flex-start;
  }

  .app-health > div > strong,
  .process-title > strong {
    flex: 1 1 180px;
  }

  .app-health .status-pill,
  .process-title .status-pill {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
  }

  .app-gauge-row,
  .app-card .app-gauge-row,
  .vps-app-card .app-gauge-row,
  .vps-app-card .app-gauge-row-tv,
  .vps-app-card .app-gauge-row-mt5 {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .gauge,
  .vps-app-card .gauge {
    min-width: 0;
    min-height: 205px;
    padding-block: 8px;
  }

  .gauge-ring,
  .vps-app-card .gauge-ring {
    width: clamp(138px, 52vw, 184px);
    height: clamp(138px, 52vw, 184px);
    max-width: 100%;
    margin-inline: auto;
  }

  .vps-app-card .gauge-ring strong {
    font-size: clamp(30px, 10vw, 42px);
  }

  .agent-heartbeat-row {
    align-items: flex-start;
  }

  .agent-heartbeat-row > div:last-child {
    min-width: 0;
  }

  .process-panel {
    min-height: 0;
    padding: 12px;
  }

  .mt5-detail-grid strong {
    white-space: normal;
  }

  .mt5-trade-table {
    overflow: visible;
  }

  .mt5-trade-row.head {
    display: none;
  }

  .mt5-trade-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 12px;
  }

  .mt5-trade-row span {
    white-space: normal;
    overflow: visible;
  }

  .mt5-trade-row span::before {
    display: inline-block;
    width: 82px;
    margin-right: 8px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .mt5-trade-row span:nth-child(1)::before { content: "Symbol"; }
  .mt5-trade-row span:nth-child(2)::before { content: "Side"; }
  .mt5-trade-row span:nth-child(3)::before { content: "Volume"; }
  .mt5-trade-row span:nth-child(4)::before { content: "Price"; }
  .mt5-trade-row span:nth-child(5)::before { content: "P/L"; }
  .mt5-trade-row span:nth-child(6)::before { content: "Opened"; }
  .mt5-trade-row span:nth-child(7)::before { content: "Closed"; }

  .settings-nav {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    padding: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .settings-nav-item {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
  }

  .settings-form input,
  .settings-form select,
  .filter-dropdown input,
  .vps-registry-panel input,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }

  .master-filter {
    align-items: stretch;
  }

  .filter-segment summary {
    width: 100%;
    justify-content: space-between;
  }

  .filter-dropdown,
  .filter-dropdown.wide {
    left: 0;
    min-width: min(100%, calc(100vw - 32px));
  }

  .date-dropdown {
    grid-template-columns: 1fr;
  }

  .profile-picture-control,
  .copy-field {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-picture-control img {
    justify-self: start;
  }

  .copy-field .ghost-button,
  .settings-actions > button,
  .settings-actions.compact-actions > button,
  .button-row > button,
  .alert-actions > button,
  .table-pagination > button {
    flex: 1 1 140px;
    min-width: 0;
    min-height: 44px;
  }

  .alert-row,
  .command-row,
  .audit-row,
  .user-row,
  .table-empty-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    justify-items: stretch;
  }

  .table-head {
    display: none;
  }

  .alert-row > span,
  .alert-row > small,
  .command-row > span,
  .command-row > small,
  .audit-row > span,
  .audit-row > small,
  .user-row > span,
  .user-row > small {
    text-align: left;
  }

  .user-row .status-pill {
    width: auto;
    justify-self: start;
  }

  .user-row small:last-child {
    text-align: left;
  }

  .dropdown-panel {
    width: min(100%, 320px);
    max-width: calc(100vw - 48px);
  }

  .dialog-card {
    width: min(100%, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
  }

  .oracle-gauge-grid,
  .oracle-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oracle-gauge-grid .gauge {
    min-height: 168px;
  }

  .oracle-gauge-grid .gauge-ring {
    width: min(34vw, 132px);
    height: min(34vw, 132px);
  }

  .oracle-metric-grid div,
  .security-grid div,
  .backup-summary div {
    min-width: 0;
    padding: 12px 10px;
  }

  .oracle-metric-grid strong {
    font-size: clamp(18px, 6vw, 24px);
  }

  .style-option {
    min-height: 0;
  }

  .segmented {
    width: 100%;
    min-width: 0;
  }

  .segmented button,
  button,
  select {
    min-height: 44px;
  }
}

@media (max-width: 374px) {
  .metric-grid,
  .oracle-gauge-grid,
  .oracle-metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .content {
    padding-inline: 12px;
  }
}

/* Compact landscape and tablets: available content width is narrow after navigation. */
@media (max-width: 1100px) {
  .settings-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .vps-app-card,
  .vps-app-header,
  .vps-app-grid,
  .process-panel,
  .process-title,
  .process-substatus,
  .mt5-operational-strip,
  .mt5-detail-grid,
  .mt5-trade-table,
  .mt5-trade-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .vps-app-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .process-title,
  .vps-app-header {
    flex-wrap: wrap;
  }

  .process-title > strong,
  .vps-app-header > div {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .settings-nav {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    padding: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .settings-nav-item {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
  }

  .alert-row,
  .command-row,
  .audit-row,
  .user-row,
  .table-empty-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    justify-items: stretch;
  }

  .table-head {
    display: none;
  }

  .alert-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .alert-actions > button {
    flex: 1 1 160px;
    min-height: 44px;
  }

  .alert-row > span,
  .alert-row > small,
  .command-row > span,
  .command-row > small,
  .audit-row > span,
  .audit-row > small,
  .user-row > span,
  .user-row > small {
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .user-row .status-pill,
  .user-row small:last-child {
    width: auto;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 680px) {
  .server-row .gauge-ring {
    width: min(38vw, 138px);
    height: min(38vw, 138px);
  }

  .server-row .gauge-ring strong {
    font-size: clamp(27px, 9vw, 36px);
  }
}

@media (hover: none) {
  .server-row:not(.empty-state):hover,
  .vps-app-card:hover,
  .metric-card:hover,
  .style-option:hover,
  .user-row-button:hover {
    transform: none;
  }
}


.bridge-symbol-settings-panel {
  margin-top: 16px;
}

.bridge-symbol-policy-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  padding: 14px;
  background: linear-gradient(145deg, rgba(91, 140, 255, 0.14), rgba(17, 24, 36, 0.68));
  border: 1px solid rgba(91, 140, 255, 0.26);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bridge-symbol-policy-card p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 13px;
}

.bridge-symbol-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: start;
}

.bridge-symbol-form,
.bridge-symbol-checklist {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: rgba(15, 21, 32, 0.62);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.bridge-symbol-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bridge-symbol-form label,
.bridge-symbol-toggle {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bridge-symbol-form input,
.bridge-symbol-form select {
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  color: var(--text);
  background: rgba(14, 19, 27, 0.66);
  border: 1px solid var(--glass-line);
  border-radius: 6px;
  font-size: 13px;
}

.bridge-symbol-wide,
.bridge-symbol-form button {
  grid-column: 1 / -1;
}

.bridge-symbol-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--glass-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.bridge-symbol-toggle input,
.bridge-symbol-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #ffb84d;
}

.bridge-symbol-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
}

.bridge-symbol-row.disabled {
  opacity: 0.68;
}

.bridge-symbol-row strong,
.bridge-symbol-row small,
.bridge-symbol-row code {
  display: block;
}

.bridge-symbol-row small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.bridge-symbol-row code {
  margin-top: 6px;
  color: #8ee7ff;
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .bridge-symbol-layout,
  .bridge-symbol-form {
    grid-template-columns: 1fr;
  }
}

.settings-bridge-template-grid { margin-top: 12px; }

.bridge-route-edit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 4px;
}

.bridge-route-edit label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bridge-route-edit input {
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  color: var(--text);
  background: rgba(14, 19, 27, 0.66);
  border: 1px solid var(--glass-line);
  border-radius: 8px;
}

@media (max-width: 760px) {
  .bridge-route-edit {
    grid-template-columns: 1fr;
  }
}

.bridge-latency-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 14px 0 16px;
}

.bridge-latency-card {
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(12, 17, 24, 0.42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 14px 26px rgba(0, 0, 0, 0.22);
}

.bridge-latency-card span {
  display: block;
  color: color-mix(in srgb, var(--muted) 88%, var(--cyan));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bridge-latency-card strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.bridge-latency-card small {
  display: block;
  margin-top: 6px;
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
  font-size: 12px;
  line-height: 1.35;
}

.bridge-latency-card-accent {
  border-color: rgba(255, 184, 77, 0.28);
  background: linear-gradient(145deg, rgba(255, 184, 77, 0.12), rgba(12, 17, 24, 0.44));
}

.relationship-panel {
  margin-top: 16px;
}

.relationship-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.relationship-record {
  display: grid;
  gap: 12px;
  min-height: 132px;
  padding: 14px;
  background: rgba(14, 19, 27, 0.42);
  border-radius: 12px;
}

.relationship-record-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.relationship-record-header strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}

.relationship-record-header small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

#vpsPolicyTable {
  overflow-x: auto;
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(17, 24, 36, 0.68), rgba(8, 13, 20, 0.52));
}

#vpsPolicyTable table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

#vpsPolicyTable th,
#vpsPolicyTable td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
}

#vpsPolicyTable th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(7, 12, 19, 0.52);
}

#vpsPolicyTable td {
  color: var(--text);
  font-size: 13px;
  border-top: 1px solid rgba(135, 157, 191, 0.14);
}

#vpsPolicyTable tbody tr {
  transition: background 160ms ease;
}

#vpsPolicyTable tbody tr:hover {
  background: rgba(83, 137, 255, 0.08);
}

.relationship-lines,
.symbol-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.relationship-lines span,
.symbol-chip {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  color: var(--text);
  background: rgba(14, 19, 27, 0.7);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
}

.symbol-chip.ok {
  color: #78ffad;
  border-color: rgba(120, 255, 173, 0.28);
  background: rgba(42, 179, 101, 0.13);
}

.symbol-chip.warn {
  color: #ffc56f;
  border-color: rgba(255, 197, 111, 0.32);
  background: rgba(255, 184, 77, 0.12);
}

.symbol-chip.role-chip {
  color: #b9c8ff;
  border-color: rgba(91, 140, 255, 0.28);
  background: rgba(91, 140, 255, 0.12);
}

.symbol-policy-list {
  display: grid;
  gap: 8px;
}

.vps-symbol-policy-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 9px 10px;
  color: var(--text);
  background: rgba(14, 19, 27, 0.62);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
}

.vps-symbol-policy-row.disabled {
  opacity: 0.64;
}

.vps-symbol-policy-row input {
  width: 16px;
  height: 16px;
  accent-color: #5b8cff;
}

.vps-symbol-policy-row strong,
.vps-symbol-policy-row small {
  display: block;
}

.vps-symbol-policy-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.vps-symbol-assignment-form {
  margin-bottom: 14px;
}

.vps-symbol-assignment-form .primary-button {
  align-self: end;
}

@media (max-width: 980px) {
  .relationship-grid {
    grid-template-columns: 1fr;
  }

  .vps-symbol-policy-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .vps-symbol-policy-row .mini-button {
    grid-column: 2;
    justify-self: start;
  }
}


.gateway-policy-export {
  display: grid;
  gap: 14px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(255, 184, 77, 0.18);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 184, 77, 0.08), rgba(10, 14, 20, 0.36));
}

.gateway-policy-copy-field {
  align-items: stretch;
}

.gateway-policy-copy-field textarea {
  min-height: 82px;
  width: 100%;
  resize: vertical;
  color: var(--amber);
  border-color: rgba(255, 184, 77, 0.32);
  background: rgba(7, 10, 14, 0.58);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.gateway-policy-node-list {
  display: grid;
  gap: 10px;
}

.gateway-policy-node {
  display: grid;
  gap: 9px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gateway-policy-node strong,
.gateway-policy-node small {
  display: block;
}

.gateway-policy-node small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.gateway-policy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.gateway-policy-actions .settings-status {
  margin: 0;
}

.gateway-policy-node:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}


.gateway-policy-compare {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(7, 10, 14, 0.38);
}

.gateway-policy-compare > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.gateway-policy-compare strong,
.gateway-policy-compare small,
.gateway-policy-diff-list span {
  display: block;
}

.gateway-policy-compare small,
.gateway-policy-diff-list span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.gateway-policy-diff-list {
  display: grid;
  gap: 3px;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .gateway-policy-compare {
    display: grid;
  }
}


.tv-alert-payload-generator {
  border-color: rgba(96, 165, 250, 0.28);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(8, 13, 24, 0.96));
}

.tv-payload-form {
  margin-top: 1rem;
}

.tv-payload-copy-field textarea {
  min-height: 340px;
  font-family: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  line-height: 1.45;
}


.tv-placeholder-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.42);
}

.tv-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.tv-placeholder-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.28);
}

.tv-placeholder-option input {
  margin-top: 0.25rem;
  accent-color: var(--accent);
}

.tv-placeholder-option strong,
.tv-placeholder-option small,
.tv-placeholder-option code {
  display: block;
}

.tv-placeholder-option small {
  margin: 0.2rem 0 0.35rem;
  color: var(--muted);
  line-height: 1.35;
}

#verificationChecksGrid .bridge-route-card { min-height: 208px; }
#verificationChecksGrid .bridge-route-card code { display: block; white-space: normal; overflow-wrap: anywhere; margin-top: 10px; color: var(--muted); font-size: .76rem; }
#verificationChecksGrid .verification-meta { display: grid; gap: 5px; margin-top: 12px; color: var(--muted); font-size: .8rem; }
.verification-details { margin-top: 10px; color: var(--muted); font-size: .78rem; }
.verification-details summary { cursor: pointer; color: var(--text); }
.verification-details pre { max-height: 180px; margin: 8px 0 0; overflow: auto; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: rgba(4, 11, 21, .55); color: var(--muted); font: .72rem/1.35 var(--font-mono, monospace); white-space: pre-wrap; overflow-wrap: anywhere; }
.verification-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.verification-summary-item { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(14, 24, 40, .62); }
.verification-summary-item strong { font-size: 1.25rem; color: var(--text); }
.verification-summary-item span { color: var(--muted); font-size: .78rem; }
.verification-summary-item.ok { border-color: rgba(53, 219, 139, .45); }
.verification-summary-item.err { border-color: rgba(255, 99, 117, .45); }
.verification-summary-item.warn { border-color: rgba(255, 180, 74, .45); }
@media (max-width: 760px) { .verification-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .verification-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.user-account-field {
  display: grid !important;
  gap: 7px;
  align-content: start;
}

.user-account-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.user-account-entry input {
  margin-top: 0 !important;
}

.chip-remove {
  width: 17px;
  height: 17px;
  margin-left: 6px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.chip-remove:hover,
.chip-remove:focus-visible {
  color: #ff9f43;
  outline: none;
}
.notification-preference-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:18px}.notification-preference-card{border:1px solid rgba(120,151,195,.22);background:linear-gradient(145deg,rgba(17,27,43,.92),rgba(8,17,30,.78));border-radius:14px;padding:14px}.notification-preference-card{display:grid;gap:10px}.notification-preference-card>strong{color:var(--amber);font-size:15px}.notification-preference-card label{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--text)}.notification-select-wrap{position:relative;display:block;min-width:132px}.notification-select-wrap::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:2px solid #8fb5ff;border-bottom:2px solid #8fb5ff;transform:translateY(-68%) rotate(45deg);pointer-events:none}.notification-preference-card select{width:100%;min-height:40px;padding:8px 34px 8px 12px;appearance:none;-webkit-appearance:none;color:var(--text);font:inherit;font-weight:700;background:linear-gradient(145deg,rgba(24,38,61,.98),rgba(12,23,40,.98));border:1px solid rgba(91,140,232,.5);border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.18);cursor:pointer}.notification-preference-card select:hover{border-color:rgba(255,184,77,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 2px rgba(255,184,77,.08)}.notification-preference-card select:focus-visible{outline:2px solid rgba(91,140,232,.72);outline-offset:2px}.notification-preference-card select:disabled{cursor:not-allowed;opacity:.48}.notification-preference-card select option{color:#f4f7ff;background:#111d30}.notification-policy-table{overflow-x:auto;padding-bottom:4px}.notification-policy-grid{display:grid;grid-template-columns:minmax(210px,1.8fr) repeat(3,minmax(130px,1fr));min-width:650px;border:1px solid rgba(120,151,195,.22);border-radius:14px;overflow:hidden;background:linear-gradient(145deg,rgba(17,27,43,.92),rgba(8,17,30,.78))}.notification-policy-grid>*{display:flex;align-items:center;min-height:54px;padding:12px 16px;border-right:1px solid rgba(120,151,195,.16);border-bottom:1px solid rgba(120,151,195,.16)}.notification-policy-grid>*:nth-child(4n){border-right:0}.notification-policy-grid>*:nth-last-child(-n+4){border-bottom:0}.notification-policy-header{justify-content:center;color:var(--amber);font-weight:800;text-align:center;background:rgba(32,48,72,.72)}.notification-policy-header.notification-policy-type{justify-content:flex-start}.notification-policy-type{font-weight:750;color:var(--text)}.notification-policy-cell{justify-content:center;cursor:pointer}.notification-policy-cell input{width:20px;height:20px;cursor:pointer;accent-color:var(--amber)}.notification-policy-cell:hover{background:rgba(255,184,77,.06)}.notification-settings-panel{margin-top:18px}

.bridge-application-card{border-color:rgba(255,184,77,.34);background:linear-gradient(145deg,rgba(43,35,22,.72),rgba(13,20,31,.66))}.application-status-stack{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.bridge-instance-panel{min-height:0}.bridge-instance-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.bridge-instance-summary span{display:grid;gap:4px;padding:11px 12px;border:1px solid rgba(255,184,77,.16);border-radius:9px;background:rgba(7,13,22,.55)}.bridge-instance-summary small{color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.bridge-instance-summary strong{overflow-wrap:anywhere}.bridge-instance-gauges{grid-template-columns:repeat(3,minmax(150px,1fr))}

@media (max-width:760px){.bridge-instance-summary{grid-template-columns:1fr 1fr}.application-status-stack{justify-content:flex-start}.notification-select-wrap{min-width:150px}}

.notification-center-button{position:relative;min-width:42px;padding:9px}.notification-count{position:absolute;right:2px;top:2px;z-index:2;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;color:#09111d;background:var(--amber);font-size:10px;font-weight:900}.notification-center{position:fixed;z-index:80;right:22px;top:82px;width:min(420px,calc(100vw - 28px));max-height:70vh;overflow:auto;padding:16px;border:1px solid rgba(255,184,77,.35);border-radius:14px;background:rgba(8,17,30,.98);box-shadow:0 24px 70px rgba(0,0,0,.55);backdrop-filter:blur(18px)}.notification-center-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.notification-center-list{display:grid;gap:9px}.notification-center-item{display:grid;gap:5px;padding:12px;border:1px solid rgba(120,151,195,.18);border-radius:10px;background:rgba(18,29,47,.78)}.notification-center-item.unread{border-color:rgba(255,184,77,.42);box-shadow:inset 3px 0 0 var(--amber)}.notification-center-item strong{color:var(--text)}.notification-center-item p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}.notification-center-item small{color:var(--muted);font-size:10px}.notification-center-item a{color:#8fb5ff;font-size:11px;font-weight:700;text-decoration:none}@media(max-width:760px){.notification-center{right:14px;top:72px}}

.notification-broadcast{margin:18px 0;padding:16px;border:1px solid rgba(120,151,195,.2);border-radius:12px;background:rgba(11,23,39,.45)}
.notification-broadcast-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}.notification-broadcast-grid label{display:grid;gap:7px}.notification-broadcast-grid .wide{grid-column:1/-1}.notification-broadcast-grid textarea{resize:vertical;min-height:84px}
@media(max-width:900px){.notification-broadcast-grid{grid-template-columns:1fr}.notification-broadcast-grid .wide{grid-column:auto}}

/* Status topology: native buttons remain keyboard accessible on desktop and mobile. */
.infra-controls { display:flex; flex-wrap:wrap; gap:8px; }
.infra-controls button[aria-pressed="true"] { border-color:var(--gold, #ffb347); color:var(--gold, #ffb347); }
.infra-caption { color:var(--muted); font-size:13px; line-height:1.6; margin:14px 0; }
.infra-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:18px; }
.infra-scroll { overflow:auto; border:1px solid var(--glass-line); border-radius:14px; background:rgba(8,15,24,.52); }
.infra-canvas { width:1070px; height:600px; position:relative; }
.infra-canvas svg { position:absolute; inset:0; width:100%; height:100%; color:#92a9c0; }
.infra-edge { fill:none; stroke:#7693b1; stroke-width:2; stroke-dasharray:6 5; transition:opacity .2s; }
.infra-edge.healthy { stroke:#4bc499; stroke-dasharray:none; }
.infra-edge.warning { stroke:#ffb347; }
.infra-edge.dim { opacity:.1; }
.infra-node { position:absolute; width:290px; height:110px; padding:12px 16px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; text-align:left; color:var(--text, #edf2f7); background:#172332; border:1px solid #526174; border-radius:12px; font-family:inherit; cursor:pointer; }
.infra-node.gateways { background:#1b2e3c; border-color:#5791b0; }
.infra-node.healthy { border-left:4px solid #4bc499; }
.infra-node.warning { border-left:4px solid #ffb347; }
.infra-node[aria-pressed="true"] { outline:2px solid #ffb347; outline-offset:3px; }
.infra-node:focus-visible, .infra-scroll:focus-visible { outline:2px solid #ffb347; outline-offset:3px; }
.infra-node-state { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.infra-node.healthy .infra-node-state { color:#69dbb3; }
.infra-node strong { font-size:14px; }
.infra-node small { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.infra-detail { padding:18px; border:1px solid var(--glass-line); border-radius:14px; background:rgba(8,15,24,.52); }
.infra-detail h3 { margin:10px 0 14px; font-size:18px; }
.infra-detail ul { padding-left:18px; margin:18px 0 0; }
.infra-detail li { color:var(--muted); font-size:13px; line-height:1.6; margin-bottom:12px; overflow-wrap:anywhere; }
.infra-rails { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.infra-rail { padding:9px 12px; border:1px solid var(--glass-line); border-radius:9px; color:var(--muted); font-size:12px; }
.infra-rail.verified { color:#69dbb3; background:rgba(52,179,132,.07); }
@media(max-width:1200px) { .infra-layout { grid-template-columns:1fr; } .infra-detail ul { columns:2; column-gap:28px; } .infra-detail li { break-inside:avoid; } }
@media(max-width:680px) { .infra-detail ul { columns:1; } .infra-scroll { max-width:100%; } }
@media(prefers-reduced-motion:reduce) { .infra-edge { transition:none; } }

/* Vertical topology: server racks and software terminals have distinct silhouettes. */
.infra-canvas { width:900px; height:1460px; }
.infra-node { height:155px; padding:15px; gap:5px; justify-content:flex-end; }
.infra-node.hardware { border-radius:9px 9px 17px 17px; background:linear-gradient(150deg,#243745,#101c27); box-shadow:0 8px 0 -3px #09131c,0 12px 15px #0005; }
.infra-node.software { border-radius:16px; background:linear-gradient(145deg,#1c2c3f,#131d2b); border-top:8px solid #45617c; }
.infra-node.terminal { border-radius:10px 10px 5px 5px; border:3px solid #536478; box-shadow:0 9px 0 -4px #28384a; }
.infra-product-logo { position:absolute; left:15px; top:12px; width:40px; height:40px; object-fit:contain; }
.infra-rack { position:absolute; top:12px; left:15px; right:55px; display:grid; gap:4px; }
.infra-rack i { height:9px; border-radius:2px; background:repeating-linear-gradient(90deg,#536879 0 8px,#17232f 8px 11px); border-right:22px solid #367b65; }
.infra-software-symbol { position:absolute; top:7px; left:15px; font-size:36px; color:#91adca; }
.infra-heartbeat { position:absolute; top:17px; right:15px; width:9px; height:9px; border-radius:50%; background:#7890a4; }
.infra-node.healthy .infra-heartbeat { background:#60e4ad; animation:infra-heartbeat 1.8s ease-out infinite; }
.infra-node.warning .infra-heartbeat { background:#ffbd66; animation:infra-heartbeat 3s ease-out infinite; }
.infra-node.disconnected { border-left:4px solid #ec7777; }
.infra-node.disconnected .infra-heartbeat { background:#ec7777; }
.infra-node.unknown .infra-heartbeat { background:#c1a16d; }
.infra-node.configured .infra-heartbeat { background:#7190b4; }
.infra-link { transition:opacity .2s; }
.infra-link.dim { opacity:.1; }
.infra-edge.disconnected { stroke:#ec7777; stroke-dasharray:none; }
.infra-edge.unknown { stroke:#b69969; }
.infra-flow { fill:none; stroke:#9affd2; stroke-width:3; stroke-dasharray:3 30; animation:infra-flow 2.4s linear infinite; pointer-events:none; }
.infra-break { fill:#101b26; stroke:#ec7777; stroke-width:2; }
.infra-break.unknown { stroke:#b69969; }
.infra-break-label { fill:#ec7777; font-size:18px; font-weight:700; }
.infra-break-label.unknown { fill:#d5b77f; }
@keyframes infra-flow { to { stroke-dashoffset:-66; } }
@keyframes infra-heartbeat { 0% { box-shadow:0 0 0 0 currentColor; opacity:1; } 65% { box-shadow:0 0 0 8px transparent; } 100% { box-shadow:0 0 0 0 transparent; opacity:.75; } }
@media(prefers-reduced-motion:reduce) { .infra-flow, .infra-node .infra-heartbeat { animation:none; } }

.infra-node.healthy .infra-heartbeat { color:#60e4ad; }
.infra-node.warning .infra-heartbeat { color:#ffbd66; }

/* Details always follow the map, leaving its full width available. */
.infra-layout { grid-template-columns:minmax(0,1fr); }
.infra-detail { width:100%; box-sizing:border-box; }
.infra-node.terminal { height:195px; }
.infra-account { display:grid; gap:3px; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.infra-account b { color:#d7e7ee; font-weight:600; }

#statusInfrastructure:fullscreen, #statusInfrastructure.infra-fullscreen-fallback { background:#101720; padding:24px; box-sizing:border-box; overflow:auto; width:100%; height:100%; }
#statusInfrastructure.infra-fullscreen-fallback { position:fixed; inset:0; width:100vw; height:100dvh; z-index:10000; }
#statusInfrastructure:fullscreen .infra-controls, #statusInfrastructure.infra-fullscreen-fallback .infra-controls { position:sticky; top:0; z-index:5; padding:10px; background:#101720; border-radius:12px; }

.infra-mobile-map { display:none; }
@media(max-width:680px) {
 .infra-canvas { display:none; }
 .infra-mobile-map { display:grid; gap:22px; padding:14px; }
 .infra-scroll { height:auto !important; overflow-x:hidden !important; }
 .infra-mobile-group { min-width:0; display:grid; gap:12px; }
 .infra-mobile-group h3 { margin:0 0 4px; color:var(--muted); font-size:14px; }
 .infra-mobile-map .infra-node { position:relative; left:auto; top:auto; width:100%; min-width:0; box-sizing:border-box; height:auto; min-height:150px; margin:0 0 5px; padding:65px 15px 15px; }
 .infra-mobile-map .infra-node strong { font-size:15px; overflow-wrap:anywhere; }
 .infra-mobile-map .infra-node small, .infra-mobile-map .infra-account { font-size:13px; }
 .infra-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
 .infra-controls button { min-height:44px; padding:9px; white-space:normal; font-size:12px; }
 .infra-controls [data-infra-fit] { display:none; }
 .infra-mobile-link { display:flex; align-items:center; gap:12px; padding:5px 8px; color:#91a8be; }
 .infra-mobile-link b { font-size:12px; font-weight:600; }
 .infra-mobile-link small { display:block; margin-top:4px; line-height:1.5; font-size:12px; overflow-wrap:anywhere; }
 .infra-mobile-wire { display:grid; place-items:center; border:1px dashed currentColor; border-radius:14px; flex:0 0 26px; height:38px; }
 .infra-mobile-link.healthy { color:#69dbb3; }
 .infra-mobile-link.healthy .infra-mobile-wire { border-style:solid; animation:infra-heartbeat 2.4s ease-out infinite; }
 .infra-mobile-link.disconnected { color:#ec7777; }
 .infra-mobile-link.unknown { color:#d5b77f; }
 .infra-mobile-link.dim { display:none; }
 .infra-detail { padding:15px; }
 .infra-rails { display:grid; grid-template-columns:1fr; }
 #statusInfrastructure:fullscreen, #statusInfrastructure.infra-fullscreen-fallback { padding:12px; }
}
@media(prefers-reduced-motion:reduce) { .infra-mobile-link.healthy .infra-mobile-wire { animation:none; } }

/* Rounded pipe housings with a lit core and moving observed flow. */
.infra-pipe-shell { fill:none; stroke:#071019; stroke-width:10; stroke-linejoin:round; stroke-linecap:round; }
.infra-edge { stroke-width:6; stroke-linejoin:round; stroke-linecap:round; }
.infra-flow { stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.infra-mobile-wire { border-width:3px; border-radius:12px; background:linear-gradient(90deg,#071019,#243a45,#071019); box-shadow:inset 1px 0 3px #ffffff20,0 0 0 2px #071019; }

.infra-canvas { height:1720px; }

/* Supplied hardware artwork and explicit observed node execution mode. */
.infra-hardware-icon { position:absolute; width:50px; height:50px; object-fit:contain; left:50%; top:12px; transform:translateX(-50%); }
.infra-mode { display:flex; align-items:center; gap:6px; font-size:11px; color:#a5b3c1; }
.infra-mode i { width:8px; height:8px; border-radius:50%; background:currentColor; animation:infra-heartbeat 2s ease-out infinite; }
.infra-mode.dry-run { color:#65b8ff; }
.infra-mode.live { color:#60e4ad; }
.infra-mode.disconnected { color:#ec7777; }
.infra-mode.disabled { color:#ffbd66; }
.infra-canvas { height:1490px; }
@media(max-width:680px) {
 .infra-mobile-group { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .infra-mobile-group > :not(.account) { grid-column:1 / -1; }
 .infra-mobile-map .infra-node.account { min-height:180px; padding:65px 10px 12px; }
 .infra-mobile-map .infra-node.account strong { font-size:13px; }
 .infra-mobile-map .infra-node.account small { font-size:11px; }
 .infra-mobile-map .infra-node.hardware { padding-top:78px; }
}
@media(prefers-reduced-motion:reduce) { .infra-mode i { animation:none; } }

.infra-canvas { height:1960px; }

/* Keep each service beside its own storage and backup evidence. */
.infra-canvas { height:1680px; }
@media(max-width:680px) {
 .infra-mobile-group > .database, .infra-mobile-group > .backup { grid-column:auto; min-height:190px; padding:65px 10px 12px; }
 .infra-mobile-group > .database strong, .infra-mobile-group > .backup strong { font-size:13px; }
 .infra-mobile-group > .database small, .infra-mobile-group > .backup small { font-size:11px; }
}

.infra-canvas { width:1500px; height:1490px; }

.infra-canvas { width:2060px; height:1532px; }

.storage-icon-heading { display:flex; align-items:center; gap:12px; }
.storage-icon-heading img { width:40px; height:40px; object-fit:contain; flex-shrink:0; }

.notification-center-summary{color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 12px}.notification-center #notificationActiveAlertsBtn{margin-bottom:12px}.notification-count{min-width:24px;font-size:10px}

.infra-canvas [data-infra-node="commander"] .infra-hardware-icon { width:70px; height:70px; }

/* Route color identifies purpose; failures retain their status colors. */
.infra-link[data-layer="signals"] .infra-edge.healthy,
.infra-link[data-layer="signals"] .infra-edge.configured { stroke:#4bc499; }
.infra-link[data-layer="control"] .infra-edge.healthy,
.infra-link[data-layer="control"] .infra-edge.configured,
.infra-link[data-layer="recovery"] .infra-edge.healthy,
.infra-link[data-layer="recovery"] .infra-edge.configured { stroke:#75b5ed; }
.infra-link[data-layer="control"] .infra-flow,
.infra-link[data-layer="recovery"] .infra-flow { stroke:#b5ddff; }
.infra-mobile-link[data-layer="signals"].configured { color:#69dbb3; }
.infra-mobile-link[data-layer="control"].healthy,
.infra-mobile-link[data-layer="control"].configured,
.infra-mobile-link[data-layer="recovery"].healthy,
.infra-mobile-link[data-layer="recovery"].configured { color:#75b5ed; }

.bridge-site-overview-grid article.bridge-overview-standby { background:transparent; }
.bridge-site-overview-grid .status-pill.ok,
.bridge-site-overview-grid .status-pill.standby { font-size:16.5px; min-height:32px; padding:3px 12px; }
.bridge-site-overview-grid article > div .bridge-connected-count { color:var(--text); font-weight:600; padding:5px 10px; border-radius:8px; background:rgba(117,181,237,.12); border:1px solid rgba(117,181,237,.3); }

/* Room for separated control lanes and crossover bridges. */
.infra-canvas { height:1652px; }

.fleet-storage-status { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.fleet-storage-status .status-pill { display:inline-flex; align-items:center; gap:6px; white-space:normal; }
.fleet-storage-status .inline-title-icon { width:24px; height:24px; object-fit:contain; }
/* Collapsible navigation: the same icon rail on desktop and mobile. */
.shell {grid-template-columns:76px minmax(0,1fr)}
.shell.navigation-expanded {grid-template-columns:264px minmax(0,1fr)}
.sidebar {padding:16px 10px;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;min-width:0}
.mobile-nav-toggle {display:flex;justify-content:center;min-height:44px;font-size:24px}
.sidebar .nav,.sidebar.nav-open .nav {display:flex;flex-direction:column;width:100%;gap:6px}
.sidebar .brand>div,.sidebar .session-panel,.sidebar .nav-label {display:none}
.sidebar.nav-open .brand>div,.sidebar.nav-open .nav-label {display:block}
.sidebar.nav-open .session-panel:not(.hidden) {display:block}
.sidebar:not(.nav-open) .nav-item {justify-content:center;padding:10px}
.nav-item {min-height:44px;min-width:44px}
.nav-placeholder {display:inline-flex;width:28px;min-width:28px;height:28px;align-items:center;justify-content:center;color:#e6bb64;font-size:24px}
.policy-text {white-space:pre-wrap;overflow-wrap:anywhere;min-height:200px;background:#080d13;padding:20px;border-radius:12px}
#policyTabs {display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
#settings-compliance label {display:grid;gap:8px;margin:16px 0}
#settings-compliance textarea {width:100%;background:#080d13;color:#eee;border:1px solid #70603f;padding:12px}
#policyAcceptanceDialog {max-width:800px;width:calc(100% - 24px);max-height:90vh;overflow:auto;background:#0c121b;color:#eee;border:1px solid #b89550;border-radius:16px;padding:24px}
#policyAcceptanceDialog::backdrop {background:rgba(0,0,0,.88)}
.policy-review {max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #596270;padding:16px;margin:12px 0}
#policyAcceptanceDocuments label {display:block;margin-bottom:24px}
@media(max-width:900px){.shell,.shell.navigation-expanded{grid-template-columns:64px minmax(0,1fr)}.shell.navigation-expanded .sidebar{width:240px;position:fixed;inset:0 auto 0 0;z-index:80;overflow:auto;background:#0c121b}.shell.navigation-expanded .content{grid-column:2}.sidebar{padding:12px 5px}.sidebar .brand-mark{width:40px}.content{min-width:0;padding:12px}.sidebar:not(.nav-open) .nav-item img{width:26px;height:26px}}
/* Keep the navigation rail usable on tall mobile pages. */
.sidebar .brand { flex:0 0 auto; }
.sidebar .mobile-nav-toggle,.sidebar .nav { flex-shrink:0; }
@media(max-width:900px){.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;align-self:start;box-sizing:border-box}}

/* Overview infrastructure and trading stack hierarchy. */
.trading-stack-panel{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto}
.trading-stack-panel .bridge-stack-card{grid-column:1/-1}
.bridge-stack-card #bridgeStackMetrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.nav-tooltip{position:fixed;z-index:10000;padding:8px 12px;border:1px solid #ae8843;border-radius:8px;background:#111923;color:#f8e8be;font-size:14px;pointer-events:none;box-shadow:0 4px 16px #0008}
@media(max-width:680px){.trading-stack-panel{grid-template-columns:minmax(0,1fr)}.bridge-stack-card #bridgeStackMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

.infra-canvas{width:2400px;height:1900px}
[data-infra-zoom-label]{min-width:48px;text-align:center;align-self:center}

.notification-center-button{overflow:visible!important;width:44px;height:44px;padding:9px;display:inline-flex;align-items:center;justify-content:center}
.notification-count{top:-9px;right:-9px;min-width:24px;height:24px;padding:0 6px;background:#ff3b30;color:white;border:2px solid #101722;font-size:12px;font-weight:700;line-height:1;box-sizing:border-box;box-shadow:0 2px 5px #0005;pointer-events:none}
.notification-count.hidden{display:none}
.is-refreshing .ui-icon{animation:reload-spin 1s linear infinite}
@keyframes reload-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.is-refreshing .ui-icon{animation:none;opacity:.5}}

/* Larger hardware artwork; card bounds remain unchanged. */
.infra-hardware-icon{width:100px;height:100px}
.infra-canvas [data-infra-node="commander"] .infra-hardware-icon{width:140px;height:140px}
.infra-canvas{height:2050px}
.infra-canvas [data-infra-node="signals"] .infra-product-logo{width:200px;height:200px;left:50%;transform:translateX(-50%);top:20px}
/* Keep enlarged artwork in normal flow so labels cannot collide with it. */
.infra-canvas .infra-node.hardware .infra-hardware-icon,
.infra-canvas [data-infra-node="signals"] .infra-product-logo{position:static;transform:none;align-self:center;object-fit:contain;min-height:0;flex-shrink:1;margin:0 auto 5px}
.infra-canvas .infra-node.hardware .infra-hardware-icon{width:100px;height:100px}
.infra-canvas [data-infra-node="commander"] .infra-hardware-icon,
.infra-canvas [data-infra-node="signals"] .infra-product-logo{width:140px;height:140px;flex-shrink:0}
.infra-node>strong,.infra-node>small,.infra-node>.infra-node-state,.infra-node>.infra-mode,.infra-node>.infra-account{flex-shrink:0}
.infra-mobile-map .infra-node.hardware{padding-top:15px}
.infra-mobile-map .infra-node.hardware .infra-hardware-icon,
.infra-mobile-map [data-infra-node="signals"] .infra-product-logo{position:static;transform:none;align-self:center;margin:0 auto 10px;width:100px;height:100px;object-fit:contain}
.infra-mobile-map [data-infra-node="commander"] .infra-hardware-icon,
.infra-mobile-map [data-infra-node="signals"] .infra-product-logo{width:140px;height:140px}
.infra-mobile-map [data-infra-node="signals"]{padding-top:15px}
.infra-canvas .infra-node.hardware[data-infra-node="commander"] .infra-hardware-icon{width:140px;height:140px;flex-shrink:0}
.infra-mobile-map .infra-node.hardware[data-infra-node="commander"] .infra-hardware-icon{width:140px;height:140px}

/* Bridge summaries must fit the content column beside the mobile navigation rail. */
.bridge-site-overview-grid,.bridge-site-overview-grid article{min-width:0}
.bridge-site-overview-grid article{flex-wrap:wrap}
.bridge-site-overview-grid article>div{flex:1 1 160px;overflow-wrap:anywhere}
.bridge-site-overview-grid article>div .bridge-connected-count{white-space:normal;max-width:100%;box-sizing:border-box}
@media(max-width:760px){
 .bridge-site-overview-grid{grid-template-columns:minmax(0,1fr)}
 .bridge-site-overview-grid article{padding:12px;gap:10px}
 .bridge-site-overview-grid article>div{flex-basis:100%}
}

.oracle-metric-grid>div{min-width:0}
.oracle-metric-grid strong,.oracle-metric-grid small{max-width:100%;overflow-wrap:anywhere}