/* TeamSpeak visual refresh aligned with the public graphite/orange shell. */
body[data-voice="1"] {
  --ts-refresh-accent: #f25539;
  --ts-refresh-panel: #0b0e10;
  --ts-refresh-panel-deep: #060708;
  --ts-refresh-line: rgba(255, 255, 255, .1);
}

body[data-voice="1"] .ts-monitoring-alert {
  position: relative;
  margin-bottom: 12px;
  padding: 11px 16px 11px 42px;
  border-color: rgba(242, 85, 52, .34);
  background: linear-gradient(90deg, rgba(83, 29, 17, .58), rgba(11, 13, 14, .96));
  color: #d6b8a6;
  font-size: 10px;
}

body[data-voice="1"] .ts-monitoring-alert::before {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid var(--ts-refresh-accent);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(242, 85, 57, .35);
  content: "";
  transform: translateY(-50%);
}

.ts3e-shell {
  margin-bottom: 56px;
}

.ts3e-hero {
  min-height: 320px;
  border-color: var(--ts-refresh-line);
  background-color: var(--ts-refresh-panel-deep);
}

.ts3e-hero-copy {
  width: min(610px, 58%);
  padding-left: clamp(28px, 4vw, 64px);
}

.ts3e-hero h1 {
  font-size: clamp(46px, 4.5vw, 66px);
  white-space: nowrap;
}

.ts3e-actions {
  flex-wrap: wrap;
}

.ts3e-actions a,
.ts3e-actions button {
  min-height: 44px;
  border-radius: 0;
  white-space: nowrap;
}

.ts3e-actions a {
  border-color: var(--ts-refresh-accent);
  background: var(--ts-refresh-accent);
  color: #190806;
  box-shadow: 0 10px 26px rgba(242, 85, 57, .18);
}

.ts3e-actions button {
  padding-inline: 18px;
  border-color: var(--ts-refresh-line);
  background: rgba(7, 8, 9, .72);
}

.ts3e-nav {
  scrollbar-width: none;
}

.ts3e-nav::-webkit-scrollbar {
  display: none;
}

.ts3e-nav a.active {
  border-radius: 0;
  background: var(--ts-refresh-accent);
  color: #1b0906;
  box-shadow: inset 0 -2px rgba(255, 255, 255, .18);
}

.ts3e-overview,
.ts3e-live-layout,
.ts3e-quick {
  margin-right: 0;
  margin-left: 0;
}

.ts3e-metrics,
.ts3e-online,
.ts3e-activity,
.ts3e-channels,
.ts3e-quick > a {
  border-color: var(--ts-refresh-line);
  background-color: var(--ts-refresh-panel);
}

.ts3e-metrics,
.ts3e-online {
  background-image: linear-gradient(115deg, rgba(242, 85, 57, .06), transparent 45%);
}

.ts3e-activity {
  background: radial-gradient(circle at 74% 18%, rgba(242, 85, 57, .08), transparent 36%), var(--ts-refresh-panel);
}

.ts3e-quick > a {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(135deg, rgba(242, 85, 57, .055), transparent 54%);
}

.ts3e-quick > a::after {
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: rgba(242, 85, 57, .5);
  content: "→";
  font: 16px var(--mono, monospace);
  transition: transform .18s ease;
}

.ts3e-quick > a:hover {
  border-color: rgba(242, 85, 57, .58);
  box-shadow: inset 3px 0 var(--ts-refresh-accent);
  transform: translateY(-2px);
}

.ts3e-quick > a:hover::after {
  transform: translateX(3px);
}

/* Shared TeamSpeak subpages keep the same surface and controls. */
.ts-shell .ts-hero,
.ts-shell .ts-section,
.ts-shell .ts-server-card,
.ts-shell .ts-article {
  border-color: var(--ts-refresh-line);
  background-color: var(--ts-refresh-panel);
}

.ts-shell .ts-button.primary {
  border-color: var(--ts-refresh-accent);
  background: var(--ts-refresh-accent);
  color: #190806;
  box-shadow: 0 10px 26px rgba(242, 85, 57, .18);
}

@media (max-width: 820px) {
  .ts3e-hero-copy {
    width: min(660px, 82%);
  }
}

@media (max-width: 580px) {
  body[data-voice="1"] .ts-monitoring-alert {
    padding: 10px 12px 10px 34px;
    line-height: 1.45;
  }

  body[data-voice="1"] .ts-monitoring-alert::before {
    left: 13px;
  }

  .ts3e-hero {
    min-height: 390px;
  }

  .ts3e-hero-copy {
    width: 100%;
    padding: 30px 18px;
  }

  .ts3e-hero h1 {
    font-size: clamp(39px, 13vw, 50px);
    white-space: nowrap;
  }

  .ts3e-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .ts3e-actions a,
  .ts3e-actions button {
    width: 100%;
    padding-inline: 10px;
    font-size: 9px;
  }

  .ts3e-overview,
  .ts3e-live-layout,
  .ts3e-quick {
    margin-right: 0;
    margin-left: 0;
  }

  .ts3e-metrics {
    height: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .ts3e-metrics article {
    min-height: 84px;
    border-right: 1px solid rgba(178, 103, 57, .3);
    border-bottom: 0;
  }

  .ts3e-metrics article:last-child {
    border-right: 0;
  }

  .ts3e-metrics strong {
    font-size: 31px;
  }

  .ts3e-metrics span {
    padding-inline: 4px;
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ts3e-quick > a,
  .ts3e-quick > a::after {
    transition: none;
  }
}