html {
  font-size: 14px;
  font-family: Arial, sans-serif;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  font-family: Arial, sans-serif;
}

*, button, input, textarea, select {
  font-family: inherit;
}

.network-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1220px, calc(100% - 28px));
  margin: 14px auto 0;
  border: 1px solid rgba(13, 110, 253, .22);
  background: #0e1115;
}

.network-logo-link {
  display: grid;
  place-items: center;
  min-height: 76px;
  padding: 8px;
  border-left: 1px solid rgba(255, 255, 255, .12);
}

.network-logo-link:first-child {
  border-left: 0;
}

.network-logo-link:hover,
.network-logo-link.network-primary {
  background: rgba(13, 110, 253, .08);
}

.network-logo-link img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: #000;
  padding: 4px;
}

.network-logo-link:nth-child(2) img {
  border-radius: 50%;
}

.local-site-nav .navbar-brand {
  padding: 0;
}

.local-site-nav .navbar-brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

@media (max-width: 760px) {
  .network-strip {
    width: 100%;
    margin-top: 0;
    border-left: 0;
    border-right: 0;
  }

  .network-logo-link {
    min-height: 66px;
  }

  .local-site-nav .navbar-collapse {
    padding-top: 10px;
  }
}

.network-notification {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100000;
  max-width: min(360px, calc(100vw - 36px));
  padding: 13px 16px;
  border: 1px solid rgba(13, 110, 253, .35);
  border-left: 5px solid #0d6efd;
  border-radius: 6px;
  background: rgba(255, 255, 255, .96);
  color: #0b1f3a;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.35;
}

.network-notification[hidden] {
  display: none;
}

.echo-radial {
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 100001;
  width: 58px;
  height: 58px;
  pointer-events: none;
}

.echo-radial.open {
  inset: 0;
  width: auto;
  height: auto;
  z-index: 100010;
}

.echo-radial.open[data-hover-label]::after {
  content: attr(data-hover-label);
  position: fixed;
  left: 50vw;
  top: 50vh;
  z-index: 1;
  max-width: min(360px, 70vw);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 196, 255, .7);
  border-radius: 999px;
  background: rgba(1, 8, 17, .82);
  box-shadow: 0 0 30px rgba(0, 174, 255, .36);
  color: #f8fbff;
  padding: 12px 22px;
  font-size: 18px;
  font-weight: 950;
  pointer-events: none;
  text-align: center;
}

.echo-radial-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  border: 0;
  background: rgba(1, 8, 17, .42);
  backdrop-filter: blur(3px);
  cursor: default;
  overflow: hidden;
}

.echo-radial-backdrop::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("/echoboard-radial-logo.webp?v=20260723-1");
  background-position: center;
  background-repeat: no-repeat;
  background-size: min(82vmin, 900px) auto;
  opacity: .18;
  pointer-events: none;
}

.echo-radial.open .echo-radial-backdrop {
  display: block;
  pointer-events: auto;
}

.echo-radial-core,
.echo-radial-item {
  position: absolute;
  display: grid;
  align-items: center;
  border: 1px solid rgba(13, 110, 253, .42);
  background: rgba(255, 255, 255, .98);
  color: #0b1f3a;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
  font-weight: 900;
  letter-spacing: 0;
  text-decoration: none;
  transition: opacity .16s ease, transform .21s cubic-bezier(.2,.8,.2,1), background .16s ease, color .16s ease;
}

.echo-radial-core {
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  place-items: center;
  border-radius: 18px;
  border: 2px solid rgba(0, 196, 255, .88);
  background: rgba(1, 8, 17, .72);
  color: #ffffff;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, .18),
    0 0 24px rgba(0, 174, 255, .48);
  cursor: pointer;
  pointer-events: auto;
}

.echo-radial.open .echo-radial-core {
  left: 50vw;
  top: 50vh;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.75);
}

.echo-radial-core img {
  display: block;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 0 10px rgba(13, 110, 253, .42));
}

.echo-radial-item {
  left: 50vw;
  top: 50vh;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 10px;
  width: 210px;
  min-height: 52px;
  padding: 6px 14px 6px 7px;
  border-radius: 999px;
  font-size: .82rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.45);
}

.echo-radial-item:has(.echo-radial-logo-mark) {
  grid-template-columns: 1fr;
  place-items: center;
  width: 108px;
  min-height: 108px;
  padding: 0;
  border: 2px solid rgba(0, 196, 255, .82);
  border-radius: 50%;
  background: rgba(1, 8, 17, .24);
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, .16),
    0 0 26px rgba(0, 174, 255, .46),
    inset 0 0 22px rgba(0, 174, 255, .1);
}

.echo-radial-item strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(13, 110, 253, .35);
  border-radius: 50%;
  color: #0d6efd;
  font-size: .7rem;
}

.echo-radial-item strong.echo-radial-logo-mark {
  width: 86px;
  height: 86px;
  border: 0;
  background: transparent;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(13, 110, 253, .78)) drop-shadow(0 0 16px rgba(0, 180, 255, .34));
}

.echo-radial-item strong.echo-radial-logo-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.echo-radial-item span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.echo-radial-item:has(.echo-radial-logo-mark) > span {
  display: none;
}

.echo-radial.open .echo-radial-item {
  opacity: 1;
  pointer-events: auto;
}

.echo-radial-core:hover,
.echo-radial-item:hover {
  background: #0d6efd;
  color: #ffffff;
}

.echo-radial-core:hover {
  background: transparent;
  box-shadow: none;
}

.echo-radial.open .item-0 { transform: translate(-50%, -50%) translate(0, -230px); }
.echo-radial.open .item-1 { transform: translate(-50%, -50%) translate(176px, -176px); }
.echo-radial.open .item-2 { transform: translate(-50%, -50%) translate(244px, -46px); }
.echo-radial.open .item-3 { transform: translate(-50%, -50%) translate(214px, 112px); }
.echo-radial.open .item-4 { transform: translate(-50%, -50%) translate(84px, 230px); }
.echo-radial.open .item-5 { transform: translate(-50%, -50%) translate(-84px, 230px); }
.echo-radial.open .item-6 { transform: translate(-50%, -50%) translate(-214px, 112px); }
.echo-radial.open .item-7 { transform: translate(-50%, -50%) translate(-244px, -46px); }
.echo-radial.open .item-8 { transform: translate(-50%, -50%) translate(-176px, -176px); }

@media (max-width: 760px) {
  .echo-radial-item {
    width: 152px;
    min-height: 46px;
    font-size: .7rem;
  }

  .echo-radial.open .item-0 { transform: translate(-50%, -50%) translate(0, -168px); }
  .echo-radial.open .item-1 { transform: translate(-50%, -50%) translate(124px, -124px); }
  .echo-radial.open .item-2 { transform: translate(-50%, -50%) translate(166px, -32px); }
  .echo-radial.open .item-3 { transform: translate(-50%, -50%) translate(144px, 80px); }
  .echo-radial.open .item-4 { transform: translate(-50%, -50%) translate(54px, 168px); }
  .echo-radial.open .item-5 { transform: translate(-50%, -50%) translate(-54px, 168px); }
  .echo-radial.open .item-6 { transform: translate(-50%, -50%) translate(-144px, 80px); }
  .echo-radial.open .item-7 { transform: translate(-50%, -50%) translate(-166px, -32px); }
  .echo-radial.open .item-8 { transform: translate(-50%, -50%) translate(-124px, -124px); }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

:root {
  --echo-display-scale: 1;
}

html {
  font-size: calc(16px * var(--echo-display-scale));
}

.echoDisplayGear {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 5000;
  display: grid;
  justify-items: end;
}

.echoDisplayGearButton {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(13, 110, 253, .62);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(13, 110, 253, .28), transparent 44%),
    linear-gradient(145deg, rgba(8, 24, 45, .98), rgba(2, 8, 18, .96));
  color: #eff6ff;
  box-shadow:
    0 0 18px rgba(13, 110, 253, .34),
    0 0 34px rgba(30, 120, 220, .24),
    inset 0 0 18px rgba(13, 110, 253, .16);
}

.echoDisplayGearButton span {
  font-size: 16px;
  font-weight: 1000;
  line-height: 1;
}

.echoDisplayGearButton small {
  color: #bad7ff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.echoDisplayPanel {
  position: absolute;
  right: 70px;
  bottom: 0;
  width: min(276px, calc(100vw - 110px));
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(13, 110, 253, .48);
  border-radius: 8px;
  background: rgba(2, 10, 24, .98);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.98);
  transition: opacity 140ms ease, transform 140ms ease;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .52),
    0 0 26px rgba(13, 110, 253, .18);
}

.echoDisplayGear:hover .echoDisplayPanel,
.echoDisplayGear:focus-within .echoDisplayPanel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.echoDisplayPanel section {
  display: grid;
  gap: 7px;
}

.echoDisplayPanel section > span {
  color: #bad7ff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.echoDisplayPanel section > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.echoDisplayPanel button {
  min-height: 30px;
  border: 1px solid rgba(13, 110, 253, .34);
  border-radius: 6px;
  background: rgba(9, 31, 56, .96);
  color: #eff6ff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.echoDisplayPanel button.active {
  border-color: #bad7ff;
  background: #bad7ff;
  color: #04111f;
}

html.echo-display-layout-mobile main,
html.echo-display-layout-mobile .container {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: 10px;
}

html.echo-display-layout-desktop .container {
  max-width: 1500px;
}

html.echo-display-theme-contrast body {
  filter: contrast(1.06);
}

html.echo-display-theme-whiteblack {
  color-scheme: dark;
  background: #000;
  color: #fff;
}

html.echo-display-theme-blackwhite {
  color-scheme: light;
  background: #fff;
  color: #000;
}

html.echo-display-theme-whiteblack body,
html.echo-display-theme-whiteblack main,
html.echo-display-theme-whiteblack .container,
html.echo-display-theme-whiteblack .navbar,
html.echo-display-theme-whiteblack .footer,
html.echo-display-theme-whiteblack .card,
html.echo-display-theme-whiteblack .table,
html.echo-display-theme-whiteblack .form-control,
html.echo-display-theme-whiteblack .btn,
html.echo-display-theme-whiteblack .echoDisplayPanel,
html.echo-display-theme-whiteblack .echoDisplayGearButton,
html.echo-display-theme-whiteblack .echo-radial-core,
html.echo-display-theme-whiteblack .echo-radial-item {
  background: #000 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .72) !important;
  box-shadow: none !important;
}

html.echo-display-theme-blackwhite body,
html.echo-display-theme-blackwhite main,
html.echo-display-theme-blackwhite .container,
html.echo-display-theme-blackwhite .navbar,
html.echo-display-theme-blackwhite .footer,
html.echo-display-theme-blackwhite .card,
html.echo-display-theme-blackwhite .table,
html.echo-display-theme-blackwhite .form-control,
html.echo-display-theme-blackwhite .btn,
html.echo-display-theme-blackwhite .echoDisplayPanel,
html.echo-display-theme-blackwhite .echoDisplayGearButton,
html.echo-display-theme-blackwhite .echo-radial-core,
html.echo-display-theme-blackwhite .echo-radial-item {
  background: #fff !important;
  color: #000 !important;
  border-color: rgba(0, 0, 0, .72) !important;
  box-shadow: none !important;
}

html.echo-display-theme-whiteblack a,
html.echo-display-theme-whiteblack button,
html.echo-display-theme-blackwhite a,
html.echo-display-theme-blackwhite button {
  color: inherit;
}

.floating-site-menu {
  position: fixed;
  z-index: 80;
  top: 18px;
  left: 18px;
  width: 86px;
  height: 86px;
  pointer-events: none;
}

.echo-persistent-chrome {
  display: contents;
}

.floating-site-menu.open {
  inset: 0;
  width: auto;
  height: auto;
  z-index: 4000;
}

.floating-site-backdrop {
  position: fixed;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(3, 24, 54, 0.82), rgba(1, 5, 18, 0.94) 52%, rgba(0, 0, 6, 0.98)),
    rgba(1, 7, 20, 0.92);
  backdrop-filter: blur(3px);
  cursor: default;
  pointer-events: auto;
  overflow: hidden;
}

.floating-site-backdrop::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("/echoboard-radial-logo.webp?v=20260723-1");
  background-position: center;
  background-repeat: no-repeat;
  background-size: min(82vmin, 900px) auto;
  opacity: 0.42;
  pointer-events: none;
  filter:
    drop-shadow(0 0 22px rgba(72, 215, 255, 0.34))
    drop-shadow(0 0 42px rgba(0, 119, 255, 0.18));
}

.floating-logo-button {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border: 2px solid rgba(0, 196, 255, 0.88);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 42%, rgba(72, 215, 255, 0.2), transparent 56%),
    linear-gradient(145deg, rgba(2, 16, 36, 0.98), rgba(0, 3, 14, 0.98));
  color: #f2fbff;
  cursor: pointer;
  pointer-events: auto;
  overflow: hidden;
  padding: 0;
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.18),
    0 0 24px rgba(0, 174, 255, 0.48);
}

.floating-site-menu.open .floating-logo-button {
  left: 50vw;
  top: 50vh;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.75);
}

.floating-logo-button:hover,
.floating-logo-button:focus-visible {
  border-color: rgba(77, 255, 157, 0.86);
  background:
    radial-gradient(circle at 50% 42%, rgba(77, 255, 157, 0.18), transparent 58%),
    linear-gradient(145deg, rgba(2, 22, 38, 0.98), rgba(0, 5, 16, 0.98));
  box-shadow:
    0 0 0 2px rgba(77, 255, 157, 0.18),
    0 0 28px rgba(77, 255, 157, 0.36);
}

.floating-logo-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  filter: drop-shadow(0 0 10px rgba(126, 232, 255, 0.42));
}

.echo-notification-menu {
  position: fixed;
  left: 50vw;
  top: 50vh;
  z-index: 3;
  width: min(430px, calc(100vw - 56px));
  max-height: min(820px, calc(100vh - 48px));
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(126, 232, 255, 0.66);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(72, 215, 255, 0.12), transparent 42%),
    linear-gradient(145deg, rgba(2, 13, 31, 0.96), rgba(0, 3, 13, 0.97));
  box-shadow:
    0 24px 90px rgba(0, 0, 0, 0.52),
    0 0 34px rgba(72, 215, 255, 0.24),
    inset 0 0 24px rgba(72, 215, 255, 0.08);
  color: #f2fbff;
  pointer-events: auto;
  overflow: hidden;
}

.echo-notification-menu > header {
  display: grid;
  gap: 4px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(72, 215, 255, 0.22);
  background: linear-gradient(135deg, rgba(4, 25, 56, 0.92), rgba(0, 5, 18, 0.96));
}

.echo-notification-menu > header span,
.echo-notification-menu > header small,
.echo-notification-section h3 {
  color: #8bdfff;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.echo-notification-menu > header strong {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.05;
}

.echo-notification-scroll {
  min-height: 0;
  max-height: min(706px, calc(100vh - 166px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
}

.echo-notification-section {
  display: grid;
  gap: 8px;
}

.echo-notification-section + .echo-notification-section {
  margin-top: 14px;
}

.echo-notification-section h3 {
  margin: 0;
  color: #dff8ff;
}

.echo-notification-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 9px;
  min-height: 64px;
  padding: 11px 12px;
  border: 1px solid rgba(72, 215, 255, 0.28);
  border-radius: 8px;
  background: rgba(1, 8, 22, 0.84);
  color: #dff8ff;
  text-decoration: none;
  box-shadow: inset 0 0 14px rgba(72, 215, 255, 0.08);
}

.echo-notification-item > span {
  width: 9px;
  height: 9px;
  margin-top: 3px;
  border-radius: 50%;
  background: #48d7ff;
  box-shadow: 0 0 12px rgba(72, 215, 255, 0.8);
}

.echo-notification-item.red > span {
  background: #ff386b;
  box-shadow: 0 0 12px rgba(255, 56, 107, 0.82);
}

.echo-notification-item.yellow > span {
  background: #ffe66d;
  box-shadow: 0 0 12px rgba(255, 230, 109, 0.76);
}

.echo-notification-item strong,
.echo-notification-item small {
  display: block;
  line-height: 1.08;
}

.echo-notification-item strong {
  color: #ffffff;
  font-size: 0.82rem;
}

.echo-notification-item small {
  margin-top: 4px;
  color: #9bc8e8;
  font-size: 0.72rem;
}

.floating-logo-pulse {
  opacity: 0;
  display: none;
}

.floating-site-menu.open .floating-logo-pulse {
  animation: floatingLogoPulse 1.35s ease-out infinite;
}

.echo-profile-menu {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 5400;
  display: grid;
  justify-items: end;
}

.echo-profile-button {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(126, 232, 255, 0.68);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, rgba(126, 232, 255, 0.28), transparent 46%),
    linear-gradient(145deg, rgba(4, 22, 46, 0.98), rgba(2, 7, 17, 0.96));
  color: #f2fbff;
  cursor: pointer;
  font-size: 1.18rem;
  font-weight: 1000;
  line-height: 1;
  box-shadow:
    0 0 18px rgba(72, 215, 255, 0.38),
    inset 0 0 16px rgba(72, 215, 255, 0.12);
}

.echo-profile-panel {
  position: absolute;
  top: 82px;
  right: 0;
  width: min(324px, calc(100vw - 34px));
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(126, 232, 255, 0.58);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(72, 215, 255, 0.12), transparent 42%),
    linear-gradient(145deg, rgba(2, 15, 36, 0.99), rgba(0, 3, 12, 0.99));
  color: #f2fbff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(0.98);
  transition: opacity 140ms ease, transform 140ms ease;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.52),
    0 0 26px rgba(72, 215, 255, 0.18);
}

.echo-profile-menu:hover .echo-profile-panel,
.echo-profile-menu:focus-within .echo-profile-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.echo-profile-panel section {
  display: grid;
  gap: 3px;
}

.echo-profile-panel section > span {
  color: #8bdfff;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.echo-profile-panel strong {
  color: #f8fbff;
  font-size: 0.95rem;
  line-height: 1.08;
}

.echo-profile-panel small {
  color: #9bc8e8;
  font-size: 0.72rem;
  line-height: 1;
  text-transform: uppercase;
}

.echo-profile-panel a,
.echo-profile-panel button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid rgba(72, 215, 255, 0.42);
  border-radius: 6px;
  background: rgba(4, 19, 42, 0.96);
  color: #dff8ff;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.echo-profile-panel a:hover,
.echo-profile-panel a:focus-visible,
.echo-profile-panel button:hover,
.echo-profile-panel button:focus-visible {
  border-color: rgba(126, 232, 255, 0.86);
  outline: none;
}

.echo-display-gear {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 3400;
  display: grid;
  justify-items: end;
}

.echo-display-gear-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 2px solid rgba(126, 232, 255, 0.74);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(216, 226, 235, 0.18), transparent 46%),
    linear-gradient(145deg, rgba(98, 112, 125, 0.52), rgba(20, 25, 31, 0.46));
  color: #f2fbff;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  box-shadow:
    0 0 18px rgba(72, 215, 255, 0.48),
    0 0 34px rgba(0, 119, 255, 0.28),
    inset 0 0 18px rgba(72, 215, 255, 0.18);
}

.echo-display-gear-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  filter:
    drop-shadow(0 0 8px rgba(72, 215, 255, 0.88))
    drop-shadow(0 0 18px rgba(0, 119, 255, 0.58));
}

.echo-display-panel {
  position: absolute;
  right: 70px;
  bottom: 0;
  width: min(276px, calc(100vw - 110px));
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(126, 232, 255, 0.52);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(82, 92, 104, 0.72), rgba(15, 18, 22, 0.66));
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transition: opacity 140ms ease, transform 140ms ease;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.52),
    0 0 26px rgba(72, 215, 255, 0.18);
}

.echo-display-gear:hover .echo-display-panel,
.echo-display-gear:focus-within .echo-display-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.echo-display-panel section {
  display: grid;
  gap: 7px;
}

.echo-display-panel section > span {
  color: #8bdfff;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.echo-display-panel section > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.echo-display-panel button {
  min-height: 30px;
  border: 1px solid rgba(72, 215, 255, 0.32);
  border-radius: 6px;
  background: rgba(4, 19, 42, 0.96);
  color: #dff8ff;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.echo-display-panel button.active {
  border-color: #7ee8ff;
  background: #7ee8ff;
  color: #03111f;
}

.echo-display-panel button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

html.echo-display-layout-mobile .app-shell {
  width: min(860px, calc(100vw - 10px));
}

html.echo-display-layout-mobile .dashboard-layout,
html.echo-display-layout-mobile .connection-telemetry,
html.echo-display-layout-mobile .command-band,
html.echo-display-layout-mobile .status-banner-grid {
  gap: 6px;
}

html.echo-display-layout-desktop .app-shell {
  width: min(1860px, calc(100vw - 10px));
}

.radial-site-links {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.radial-site-hover-label {
  position: fixed;
  left: 50vw;
  top: calc(50vh - 122px);
  z-index: 1;
  max-width: min(360px, 70vw);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 196, 255, 0.7);
  border-radius: 999px;
  background: rgba(1, 8, 17, 0.82);
  box-shadow: 0 0 30px rgba(0, 174, 255, 0.36);
  color: #f8fbff;
  padding: 12px 22px;
  font-size: 18px;
  font-weight: 950;
  pointer-events: none;
  text-align: center;
}

.radial-site-link {
  position: absolute;
  top: 50vh;
  left: 50vw;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 218px;
  min-height: 58px;
  padding: 0 13px 0 8px;
  border: 1px solid rgba(72, 215, 255, 0.46);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(6, 33, 68, 0.95), rgba(2, 8, 18, 0.96));
  color: #eaf8ff;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
  transition:
    opacity 150ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 150ms ease,
    box-shadow 150ms ease;
  transition-delay: 0ms;
  box-shadow:
    0 0 16px rgba(72, 215, 255, 0.2),
    inset 0 0 14px rgba(72, 215, 255, 0.12);
}

.radial-site-link:has(.radial-site-glyph.logo) {
  justify-content: center;
  min-width: 148px;
  min-height: 148px;
  width: 148px;
  height: 148px;
  padding: 0;
  border: 2px solid rgba(126, 232, 255, 0.92);
  border-radius: 18px;
  background: rgba(1, 8, 17, 0.18);
  overflow: hidden;
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.16),
    0 0 26px rgba(0, 174, 255, 0.46),
    inset 0 0 22px rgba(0, 174, 255, 0.1);
}

.radial-site-link.featured:has(.radial-site-glyph.logo) {
  min-width: 190px;
  min-height: 190px;
  width: 190px;
  height: 190px;
  border-width: 3px;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.18),
    0 0 34px rgba(0, 174, 255, 0.62),
    0 0 72px rgba(72, 215, 255, 0.18),
    inset 0 0 28px rgba(0, 174, 255, 0.14);
}

.radial-site-link:has(.radial-site-glyph.logo) > span:last-child {
  display: none;
}

.floating-site-menu.open .radial-site-link {
  pointer-events: auto;
  opacity: 1;
  transform: translate(-50%, -50%) translate(var(--radial-x), var(--radial-y)) scale(var(--radial-scale, 1));
  transition-delay: var(--radial-delay);
}

.radial-site-link:hover,
.radial-site-link:focus-visible {
  border-color: rgba(77, 255, 157, 0.84);
  color: #ffffff;
  box-shadow:
    0 0 22px rgba(77, 255, 157, 0.34),
    0 0 34px rgba(72, 215, 255, 0.28),
    inset 0 0 16px rgba(72, 215, 255, 0.16);
}

.radial-site-link.yellow {
  border-color: rgba(255, 230, 109, 0.62);
}

.radial-site-link.red {
  border-color: rgba(255, 56, 107, 0.68);
  box-shadow:
    0 0 16px rgba(255, 56, 107, 0.22),
    inset 0 0 14px rgba(255, 56, 107, 0.1);
}

.radial-site-glyph {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(126, 232, 255, 0.58);
  background: rgba(3, 14, 34, 0.9);
  color: #bff5ff;
  font-size: 0.76rem;
  font-weight: 1000;
  text-shadow: 0 0 8px rgba(72, 215, 255, 0.82);
}

.radial-site-glyph.logo {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  border-radius: inherit;
  overflow: hidden;
  filter: drop-shadow(0 0 8px rgba(126, 232, 255, 0.78)) drop-shadow(0 0 16px rgba(0, 119, 255, 0.34));
}

.radial-site-glyph.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .radial-site-link {
    min-width: 168px;
    min-height: 50px;
    max-width: 168px;
    font-size: 0.72rem;
  }

  .floating-site-menu.open .radial-site-link {
    transform: translate(-50%, -50%) translate(calc(var(--radial-x) * 0.62), calc(var(--radial-y) * 0.62)) scale(calc(var(--radial-scale, 1) * 0.92));
  }

  .radial-site-link:has(.radial-site-glyph.logo) {
    min-width: 118px;
    min-height: 118px;
    width: 118px;
    height: 118px;
  }

  .radial-site-link.featured:has(.radial-site-glyph.logo) {
    min-width: 146px;
    min-height: 146px;
    width: 146px;
    height: 146px;
  }
}