/* =============================================================================
   Game Server Manager – gsm- prefix stylesheet
   Integrates cleanly with the WoltLab Suite 6.2 default theme.
   ============================================================================= */

/* ── Variables (inherits WCF custom properties) ─────────────────────────── */
:root {
    --gsm-online-color:   #10b981;
    --gsm-online-soft:    rgba(16, 185, 129, .16);
    --gsm-offline-color:  #ef4444;
    --gsm-offline-soft:   rgba(239, 68, 68, .14);
    --gsm-pending-color:  #f59e0b;
    --gsm-maintenance-color: #f97316;
    --gsm-maintenance-soft: rgba(249, 115, 22, .16);
    --gsm-restart-color:    #8b5cf6;
    --gsm-restart-soft:     rgba(139, 92, 246, .16);
    --gsm-accent:         var(--wcfColor, #6366f1);
    --gsm-card-radius:    18px;
    --gsm-card-radius-sm: 14px;
    --gsm-card-shadow:    0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .08);
    --gsm-card-shadow-lg: 0 4px 8px rgba(15, 23, 42, .04), 0 20px 48px rgba(15, 23, 42, .12);
    --gsm-card-gap:       24px;
    --gsm-bar-height:     12px;
    --gsm-bar-radius:     999px;
    /* Volle Breite der Leiste = 100 % Kapazität (Track), Füllung = Belegung */
    --gsm-player-track-border: color-mix(in srgb, var(--wcfContentText) 26%, var(--wcfContentBorderColor));
    --gsm-player-track-face: color-mix(in srgb, var(--wcfContentText) 14%, var(--wcfContentBackground));
    --gsm-surface-glass:  linear-gradient(145deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 42%);
}

/* ── 2026 Redesign: WSC-native fleet controls, pips, grid/list surfaces ── */
.gsm-dashboard > .gsm-dashboardKpi,
.gsm-dashboard > .gsm-dashboardMain {
    display: none;
}

.gsm-fleetOverview,
.gsm-commandDashboard,
.gsm-categorySection,
.gsm-commandPanel {
    border: 1px solid var(--wcfContentBorderColor);
    border-radius: 8px;
    background: var(--wcfContentBackground);
}

.gsm-fleetOverview {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.gsm-fleetOverview__stats,
.gsm-commandPips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.gsm-fleetPip,
.gsm-commandPip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid var(--wcfContentBorderColor);
    border-radius: 8px;
    background: var(--wcfContentContainerBackground);
}

.gsm-fleetPip strong,
.gsm-commandPip strong {
    font-size: 1.35rem;
    line-height: 1;
}

.gsm-fleetPip span,
.gsm-commandPip span,
.gsm-commandDashboard__eyebrow {
    color: var(--wcfContentDimmedText);
    font-size: .85rem;
}

.gsm-fleetPip--online,
.gsm-commandPip--online {
    border-color: color-mix(in srgb, var(--gsm-online-color) 44%, var(--wcfContentBorderColor));
}

.gsm-fleetPip--offline,
.gsm-commandPip--offline {
    border-color: color-mix(in srgb, var(--gsm-offline-color) 38%, var(--wcfContentBorderColor));
}

.gsm-serverSearch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.gsm-serverSearch__field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 12px;
    min-height: 38px;
    border: 1px solid color-mix(in srgb, var(--wcfContentText) 18%, var(--wcfContentBorderColor));
    border-radius: 8px;
    background: color-mix(in srgb, var(--wcfContentText) 5%, var(--wcfInputBackground, var(--wcfContentContainerBackground)));
    box-sizing: border-box;
}

.gsm-serverSearch__field input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
}

.gsm-statusSegments {
    display: inline-flex;
    border: 1px solid var(--wcfContentBorderColor);
    border-radius: 8px;
    overflow: hidden;
}

.gsm-statusSegments__item {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    cursor: pointer;
}

.gsm-statusSegments__item + .gsm-statusSegments__item {
    border-left: 1px solid var(--wcfContentBorderColor);
}

.gsm-statusSegments__item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gsm-statusSegments__item.isActive {
    background: var(--wcfButtonPrimaryBackground);
    color: var(--wcfButtonPrimaryText);
}

.gsm-categoryNav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.gsm-categoryNav__item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--wcfContentBorderColor);
    border-radius: 8px;
    background: var(--wcfContentContainerBackground);
    text-decoration: none;
}

.gsm-categoryNav__item.isActive {
    border-color: var(--wcfColor);
    box-shadow: inset 0 0 0 1px var(--wcfColor);
}

.gsm-categoryNav__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsm-categoryNav__meta,
.gsm-categorySection__count {
    color: var(--wcfContentDimmedText);
    white-space: nowrap;
}

.gsm-categorySection__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.gsm-serverCard,
.gsm-serverRow,
.gsm-chartPanel,
.gsm-dashboardKpi__card,
.gsm-statsCard {
    border-radius: 8px !important;
}

.gsm-serverCard__media {
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--wcfContentContainerBackground);
}

.gsm-serverCard__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gsm-serverCard__cover--empty {
    display: grid;
    place-items: center;
    color: var(--wcfContentDimmedText);
    font-size: 2rem;
}

.gsm-serverRow__media {
    position: relative;
    display: block;
    width: 64px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--wcfContentContainerBackground);
}

.gsm-serverRow__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gsm-serverRow__media .gsm-gameBadgeSmall {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--wcfContentBackground);
}

.gsm-gameBadgeSmall--fallback {
    display: grid;
    place-items: center;
}

.gsm-serverRow__title {
    min-width: 0;
}

.gsm-serverHero {
    position: relative;
    min-height: 210px;
    margin-bottom: 16px;
    overflow: visible;
    border: 1px solid var(--wcfContentBorderColor);
    border-radius: 8px;
    background: var(--wcfContentContainerBackground);
}

.gsm-serverHero--image,
.gsm-serverHero--image .gsm-serverHero__image,
.gsm-serverHero--image::after {
    border-radius: 8px;
}

.gsm-serverHero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gsm-serverHero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .24) 62%, rgba(0, 0, 0, .08));
}

.gsm-serverHero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    gap: 16px;
    min-height: 210px;
    padding: 18px;
    color: #fff;
}

.gsm-serverHero__adminMenu {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
}

.gsm-serverHero__adminToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(0, 0, 0, .42);
    color: #fff;
    backdrop-filter: blur(6px);
}

.gsm-serverHero__adminToggle:hover,
.gsm-serverHero__adminToggle:focus-visible {
    background: rgba(0, 0, 0, .58);
    border-color: rgba(255, 255, 255, .42);
    color: #fff;
}

.gsm-serverHero__adminMenu .dropdownMenu {
    min-width: 240px;
}

.gsm-serverHero__adminAction {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.gsm-serverHero__adminAction:hover,
.gsm-serverHero__adminAction:focus-visible {
    background: color-mix(in srgb, var(--wcfContentText) 6%, transparent);
}

.gsm-serverHero__adminAction--active {
    color: var(--wcfStatusSuccessText, #16a34a);
}

.gsm-serverHero__adminAction--maintenance {
    color: var(--wcfStatusWarningText, #d97706);
}

.gsm-serverHero__adminAction--restart {
    color: var(--gsm-restart-color, #8b5cf6);
}

.gsm-serverHero__joinBtn {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    font-weight: 650;
    white-space: nowrap;
}

.gsm-serverHero__joinBtn:hover,
.gsm-serverHero__joinBtn:focus-visible {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
}

.gsm-serverHero__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(255, 255, 255, .35);
}

.gsm-serverHero__icon img {
    max-width: 58px;
    max-height: 58px;
}

.gsm-serverHero__title {
    margin: 0;
    color: #fff;
    font-size: 1.8rem;
}

.gsm-serverHero__eyebrow,
.gsm-serverHero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.gsm-serverHero__eyebrow {
    margin-bottom: 6px;
    font-size: .82rem;
    text-transform: uppercase;
}

.gsm-serverHero__meta {
    margin-top: 10px;
}

.gsm-commandDashboard {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.gsm-commandDashboard__head,
.gsm-commandPanel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gsm-commandDashboard__title,
.gsm-commandPanel__head h3 {
    margin: 0;
}

.gsm-commandDashboard__meter {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: conic-gradient(var(--wcfColor) var(--gsm-utilization), var(--wcfContentBorderColor) 0);
    color: var(--wcfContentText);
}

.gsm-commandDashboard__meter span,
.gsm-commandDashboard__meter small {
    grid-area: 1 / 1;
}

.gsm-commandDashboard__meter small {
    align-self: end;
    margin-bottom: 20px;
    font-size: .68rem;
    color: var(--wcfContentDimmedText);
}

.gsm-commandDashboard__meter span {
    align-self: start;
    margin-top: 28px;
    font-weight: 700;
}

.gsm-commandGrid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr);
    gap: 12px;
}

.gsm-commandPanel {
    padding: 14px;
}

.gsm-categoryMatrix,
.gsm-attentionList {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.gsm-categoryMatrix__row,
.gsm-attentionList__item {
    display: grid;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    background: var(--wcfContentContainerBackground);
    text-decoration: none;
}

.gsm-categoryMatrix__row {
    grid-template-columns: minmax(120px, 1fr) minmax(80px, auto) minmax(90px, .6fr) auto;
}

.gsm-categoryMatrix__pips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.gsm-categoryMatrix__pips i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gsm-offline-color);
}

.gsm-categoryMatrix__pips i.isOnline {
    background: var(--gsm-online-color);
}

.gsm-categoryMatrix__fill {
    height: 7px;
    border-radius: 7px;
    background: var(--wcfContentBorderColor);
    overflow: hidden;
}

.gsm-categoryMatrix__fill span {
    display: block;
    width: var(--gsm-fill);
    height: 100%;
    background: var(--wcfColor);
}

.gsm-attentionList__item {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

@media (max-width: 800px) {
    .gsm-serverSearch,
    .gsm-commandGrid,
    .gsm-categoryMatrix__row {
        grid-template-columns: 1fr;
    }

    .gsm-statusSegments {
        width: 100%;
    }

    .gsm-statusSegments__item {
        flex: 1 1 auto;
        justify-content: center;
    }

    .gsm-serverHero__content {
        align-items: flex-end;
        flex-wrap: wrap;
    }
}

/* ── Status Badges ──────────────────────────────────────────────────────── */
.gsm-statusBadge {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    padding:        3px 8px;
    border-radius:  0;
    font-size:      0.8rem;
    font-weight:    600;
    line-height:    1;
    white-space:    nowrap;
}

.gsm-statusBadge--online {
    background: var(--gsm-online-soft);
    color:      var(--gsm-online-color);
    border:     1px solid color-mix(in srgb, #7fffd4 64%, var(--gsm-online-color));
    box-shadow: 0 0 0 1px color-mix(in srgb, #34f5b2 40%, transparent),
                0 0 16px color-mix(in srgb, #22d3a2 34%, transparent);
}

.gsm-statusBadge--online fa-icon {
    font-size: 0.38em;
    transform-origin: center;
    animation: gsmOnlineDotPulse 1.6s ease-in-out infinite;
}

.gsm-statusBadge--offline {
    background: var(--gsm-offline-soft);
    color:      var(--gsm-offline-color);
    border:     1px solid color-mix(in srgb, var(--gsm-offline-color) 48%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gsm-offline-color) 22%, transparent);
}

.gsm-statusBadge--maintenance {
    background: var(--gsm-maintenance-soft);
    color:      var(--gsm-maintenance-color);
    border:     1px solid color-mix(in srgb, var(--gsm-maintenance-color) 52%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gsm-maintenance-color) 24%, transparent);
}

.gsm-statusBadge--restart {
    background: var(--gsm-restart-soft);
    color:      var(--gsm-restart-color);
    border:     1px solid color-mix(in srgb, var(--gsm-restart-color) 48%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gsm-restart-color) 22%, transparent);
}

.gsm-statusBadge--restart fa-icon {
    font-size: 0.85em;
}

.gsm-statusBadge--maintenance fa-icon {
    font-size: 0.85em;
}

.gsm-statusBadge--pending {
    background: rgba(243, 156, 18, .15);
    color:      var(--gsm-pending-color);
}

.gsm-statusBadge--accepted {
    background: rgba(46, 204, 113, .15);
    color:      var(--gsm-online-color);
}

.gsm-statusBadge--rejected {
    background: rgba(231, 76, 60, .15);
    color:      var(--gsm-offline-color);
}

.gsm-statusBadge--banned {
    background: rgba(142, 68, 173, .18);
    color:      #8e44ad;
}

/* Detail-Header: Titel + Status-Badge optisch ausgerichtet, klarer Abstand */
.contentHeaderTitle h1.contentTitle.gsm-contentTitle--withStatus {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    column-gap:  14px;
    row-gap:     8px;
}

.contentHeaderTitle h1.contentTitle .gsm-contentTitle__text {
    min-width:   0;
    line-height: 1.2;
}

.contentHeaderTitle .gsm-statusBadge {
    flex-shrink: 0;
}

/* Online-Badge im Seitenkopf: ruhiger als in Karten (weniger Glow) */
.contentHeaderTitle .gsm-statusBadge--online {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gsm-online-color) 35%, transparent);
}

.contentHeaderTitle .gsm-statusBadge--offline {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gsm-offline-color) 30%, transparent);
}

.contentHeaderTitle .gsm-statusBadge--maintenance {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gsm-maintenance-color) 32%, transparent);
}

.contentHeaderTitle .gsm-statusBadge--restart {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gsm-restart-color) 30%, transparent);
}

.gsm-statusDot {
    display:       inline-block;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    flex-shrink:   0;
}

.gsm-statusDot.gsm-statusBadge--online  { background: var(--gsm-online-color); }
.gsm-statusDot.gsm-statusBadge--offline { background: var(--gsm-offline-color); }
.gsm-statusDot.gsm-statusBadge--restart  { background: var(--gsm-restart-color); }
.gsm-statusDot.gsm-statusBadge--maintenance { background: var(--gsm-maintenance-color); }

/*
 * Meta-Badges (Spiel, Kategorie): gleiche Pillen-Form,
 * Spiel mit Marken-Akzent, Kategorie als neutrales Sekundär-Chip.
 */
.gsm-metaBadgeRow {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         8px;
}

/* Detail-Seite: gleicher Abstand Titel ↔ Labels ↔ Inhalt (kein extra „Loch“ unter den Chips) */
.contentHeaderDescription.gsm-metaBadgeRow--detailHeader {
    margin-top:    14px;
    margin-bottom: 14px;
}

.contentHeader.gsm-gameServerDetailHeader {
    margin-bottom:  0 !important;
    padding-bottom: 0 !important;
}

/* Detail-Hauptblock: kein doppelter Abstand unter den Meta-Chips */
.section.gsm-serverDetail.gsm-serverDetail--gamePage {
    margin-top: 0 !important;
}

.gsm-serverCard__metaBadges {
    margin-top: 2px;
}

.gsm-metaBadge {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    max-width:      100%;
    padding:        3px 10px;
    border-radius:  0;
    font-size:      0.8rem;
    font-weight:    600;
    line-height:    1;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    border:         1px solid transparent;
}

.gsm-metaBadge fa-icon {
    font-size:   0.72rem;
    flex-shrink: 0;
}

.gsm-metaBadge__label {
    overflow:       hidden;
    text-overflow:  ellipsis;
}

/* Spiel: Markenfarbe, leichter Verlauf + Glow (klar vom Kategorie-Chip getrennt) */
.gsm-metaBadge--game {
    background:   linear-gradient(
        180deg,
        color-mix(in srgb, var(--wcfColor) 28%, var(--wcfContentBackground)) 0%,
        color-mix(in srgb, var(--wcfColor) 14%, var(--wcfTabularBoxBackground)) 100%
    );
    color:          color-mix(in srgb, var(--wcfColor) 36%, var(--wcfContentText));
    border-color:   color-mix(in srgb, var(--wcfColor) 52%, var(--wcfContentBorderColor));
    box-shadow:     0 0 0 1px color-mix(in srgb, var(--wcfColor) 30%, transparent),
                    0 0 20px color-mix(in srgb, var(--wcfColor) 20%, transparent);
}

/* Kategorie: neutral / ohne Marken-Glow — optisch eigener Chip-Typ */
.gsm-metaBadge--category {
    background:   color-mix(in srgb, var(--wcfContentText) 7%, var(--wcfContentContainerBackground));
    color:        var(--wcfContentDimmedText);
    border-color: color-mix(in srgb, var(--wcfContentBorderColor) 82%, var(--wcfContentText));
    box-shadow:   inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

@keyframes gsmOnlineDotPulse {
    0% {
        transform: scale(1);
        opacity: 0.88;
        filter: drop-shadow(0 0 0 rgba(16, 185, 129, 0));
    }
    50% {
        transform: scale(0.92);
        opacity: 1;
        filter: drop-shadow(0 0 4px rgba(52, 245, 178, .5));
    }
    100% {
        transform: scale(1);
        opacity: 0.88;
        filter: drop-shadow(0 0 0 rgba(16, 185, 129, 0));
    }
}

/* ── Server Grid ────────────────────────────────────────────────────────── */
.gsm-serverGrid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 352px), 1fr));
    gap:                   var(--gsm-card-gap);
    margin-top:            8px;
}

/* ── Server Card ────────────────────────────────────────────────────────── */
.gsm-serverCard {
    position:      relative;
    border-radius: var(--gsm-card-radius);
    box-shadow:    var(--gsm-card-shadow);
    background:    var(--wcfContentBackground);
    background-image:
        var(--gsm-surface-glass),
        linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, transparent 38%);
    border:        1px solid var(--wcfContentBorderColor);
    transition:    transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, border-color .2s ease;
    overflow:      hidden;
    isolation:     isolate;
}

.gsm-serverCard::before {
    content:    '';
    position:   absolute;
    left:       0;
    right:      0;
    top:        0;
    height:     4px;
    z-index:    2;
    background: linear-gradient(90deg, var(--gsm-accent), color-mix(in srgb, var(--wcfColor) 55%, #a855f7));
    opacity:    .95;
}

.gsm-serverCard--online::before {
    background: linear-gradient(90deg, #059669, var(--gsm-online-color), #34d399);
}

.gsm-serverCard--offline::before {
    background: linear-gradient(90deg, #64748b, #94a3b8);
    opacity:    .85;
}

.gsm-serverCard:hover {
    transform:     translateY(-4px);
    box-shadow:    var(--gsm-card-shadow-lg);
    border-color:  color-mix(in srgb, var(--wcfColor) 28%, var(--wcfContentBorderColor));
}

.gsm-serverCard--offline {
    opacity: .88;
}

.gsm-serverCard--offline:hover {
    opacity: .95;
}

.gsm-serverCard__inner {
    display:         flex;
    flex-direction:  column;
    height:          100%;
    min-height:      228px;
    color:           inherit;
    text-decoration: none;
    padding:         22px 22px 20px;
    position:        relative;
    z-index:         1;
}

.gsm-serverCard__stretchLink {
    position:        absolute;
    inset:           0;
    z-index:         1;
    border-radius:   inherit;
    text-decoration: none;
    color:           transparent;
}

.gsm-serverCard__header,
.gsm-serverCard__dock,
.gsm-serverCard__titleLink,
.gsm-serverCard__joinBtn {
    position: relative;
    z-index:  2;
}

.gsm-serverCard__titleLink {
    color:           inherit;
    text-decoration: none;
}

.gsm-serverCard__titleLink:hover {
    text-decoration: underline;
}

.gsm-serverCard__header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    margin-bottom:   14px;
    gap:             10px;
}

.gsm-serverCard__body {
    flex:   1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.gsm-gameBadge {
    height:        42px;
    width:         auto;
    max-width:     152px;
    object-fit:    contain;
    border-radius: 12px;
    padding:       3px 6px;
    background:    color-mix(in srgb, var(--wcfContentText) 5%, transparent);
    border:        1px solid color-mix(in srgb, var(--wcfContentBorderColor) 80%, transparent);
}

.gsm-gameBadgeText {
    display:       inline-flex;
    align-items:   center;
    min-height:    32px;
    padding:       6px 12px;
    background:    color-mix(in srgb, var(--wcfColor) 12%, var(--wcfTabularBoxBackground));
    border-radius: 999px;
    font-size:     0.72rem;
    font-weight:   700;
    color:         var(--wcfContentText);
    text-transform: uppercase;
    letter-spacing: .08em;
    border:        1px solid color-mix(in srgb, var(--wcfColor) 22%, transparent);
}

.gsm-gameBadgeSmall,
.gsm-gameBadgeTextSmall {
    height:     20px;
    width:      auto;
    object-fit: contain;
}

.gsm-gameBadgeTextSmall {
    font-size:  0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color:      var(--wcfContentDimmedText);
}

.gsm-serverCard__titleBlock {
    margin-bottom: 14px;
}

.gsm-serverCard__title {
    font-size:     1.22rem;
    font-weight:   800;
    margin:        0 0 6px;
    color:         var(--wcfContentText);
    line-height:   1.25;
    letter-spacing: -0.02em;
}

.gsm-serverCard__shortDesc {
    margin:        8px 0 0;
    font-size:     0.82rem;
    line-height:   1.4;
    color:         var(--wcfContentDimmedText);
    white-space:   pre-wrap;
    word-break:    break-word;
}

.gsm-serverCard__shortDesc--offline {
    margin-bottom: 8px;
}

.gsm-serverCard__field {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    font-size:   0.875rem;
    color:       var(--wcfContentDimmedText);
    margin-top:  8px;
    padding:     8px 10px;
    border-radius: var(--gsm-card-radius-sm);
    background:  color-mix(in srgb, var(--wcfContentText) 4%, transparent);
}

.gsm-serverCard__fieldLabel {
    font-weight: 500;
    color:       var(--wcfContentText);
    opacity:     .75;
}

.gsm-serverCard__footer {
    margin-top:  auto;
    padding-top: 16px;
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
    border-top:  1px solid color-mix(in srgb, var(--wcfContentBorderColor) 70%, transparent);
    display:     flex;
    align-items: center;
    justify-content: space-between;
    font-size:   0.8rem;
    color:       var(--wcfContentDimmedText);
    gap:         10px;
    flex-wrap:   nowrap;
    flex-shrink: 0;
}

.gsm-serverCard__address {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    min-width:   0;
    flex:        1 1 auto;
    font-size:   0.8rem;
    color:       var(--wcfContentDimmedText);
    font-variant-numeric: tabular-nums;
}

.gsm-serverCard__addressText {
    min-width:     0;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.gsm-serverCard__offlineHint {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    font-size:   0.8rem;
    color:       var(--wcfContentDimmedText);
    font-variant-numeric: tabular-nums;
}

.gsm-serverCard__joinBtn,
.gsm-serverCard__joinHint {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    flex-shrink:     0;
    font-size:       0.78rem;
    color:           var(--wcfColor);
    font-weight:     700;
    padding:         6px 12px;
    border-radius:   999px;
    background:      color-mix(in srgb, var(--wcfColor) 14%, transparent);
    text-decoration: none;
    white-space:     nowrap;
}

.gsm-serverCard__joinBtn:hover {
    color:           var(--wcfColor);
    text-decoration: none;
    background:      color-mix(in srgb, var(--wcfColor) 22%, transparent);
}

/* ── Player Bar ─────────────────────────────────────────────────────────── */
.gsm-playerBar {
    margin: 8px 0;
}

.gsm-playerBar__label {
    display:         flex;
    align-items:     center;
    gap:             4px;
    font-size:       0.85rem;
    color:           var(--wcfContentDimmedText);
    margin-bottom:   4px;
}

.gsm-playerBar__track {
    position:      relative;
    height:        var(--gsm-bar-height);
    width:         100%;
    border-radius: var(--gsm-bar-radius);
    /* Klare „Rinne“: in Hell/Dunkel als Behälter erkennbar, Füllung wirkt als Segment darin */
    background:    linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(0, 0, 0, .18) 100%),
                   var(--gsm-player-track-face);
    border:        1px solid var(--gsm-player-track-border);
    overflow:      hidden;
    box-sizing:    border-box;
    box-shadow:    inset 0 1px 2px rgba(0, 0, 0, 0.35),
                   inset 0 -1px 1px rgba(255, 255, 255, 0.06);
}

.gsm-playerBar__track--inline {
    margin-top: 4px;
    width:      100%;
}

.gsm-playerBar__fill {
    display:       block;
    height:        100%;
    border-radius: inherit;
    /* Belegung = „Online“-Semantik: feste Smaragd-Töne statt Theme-akzent, damit der Balken immer sichtbar ist */
    background:    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 42%),
                   linear-gradient(90deg, #047857, var(--gsm-online-color, #10b981));
    transition:    width .45s cubic-bezier(.2, .8, .2, 1);
    min-width:     4px;
    box-shadow:    inset 0 1px 0 rgba(255, 255, 255, .28),
                   1px 0 0 rgba(0, 0, 0, 0.18);
}

/* ── List View (row) ────────────────────────────────────────────────────── */
.gsm-serverList {
    --gsm-server-row-cols: 72px minmax(140px, 2.2fr) 104px minmax(120px, 1.4fr) 76px minmax(140px, 1.8fr) 120px;
    width: 100%;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin-top:     12px;
}

.gsm-serverRow,
.gsm-serverRowHead {
    display:               grid;
    grid-template-columns: var(--gsm-server-row-cols);
    align-items:           center;
    gap:                   12px 16px;
    width:                 100%;
    box-sizing:            border-box;
}

.gsm-serverRowHead {
    padding:    0 16px 8px;
    font-size:  0.75rem;
    font-weight: 600;
    color:      var(--wcfContentDimmedText);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gsm-serverRowHead__cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsm-serverRowHead__cell--join {
    text-align: right;
}

.gsm-serverRow {
    padding:               12px 16px;
    background:            var(--wcfContentBackground);
    background-image:      linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, transparent 40%);
    border:                1px solid var(--wcfContentBorderColor);
    border-radius:         var(--gsm-card-radius-sm);
    box-shadow:            0 1px 2px rgba(15, 23, 42, .04);
    transition:            background .15s ease, box-shadow .2s ease, border-color .2s ease, transform .15s ease;
}

.gsm-serverRow:hover {
    background:   color-mix(in srgb, var(--wcfColor) 5%, var(--wcfContentBackground));
    border-color: color-mix(in srgb, var(--wcfColor) 52%, var(--wcfContentBorderColor));
    box-shadow:   var(--gsm-card-shadow);
    transform:    translateY(-1px);
}

.gsm-serverRow--offline {
    opacity: .82;
}

.gsm-serverRow__title {
    min-width: 0;
}

.gsm-serverRow__title a {
    display:       block;
    font-weight:   600;
    color:         var(--wcfContentText);
    min-width:     0;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.gsm-serverRow__status {
    display:     flex;
    align-items: center;
    min-width:   0;
}

.gsm-serverRow__players,
.gsm-serverRow__gameName,
.gsm-serverRow__address {
    font-size: 0.875rem;
    color:     var(--wcfContentDimmedText);
    min-width: 0;
}

.gsm-serverRow__gameName {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.gsm-serverRow__players {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    white-space: nowrap;
}

.gsm-serverRow__address {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.gsm-serverRow__join {
    display:         flex;
    justify-content: flex-end;
    align-items:     center;
    justify-self:    end;
    min-width:       120px;
}

.gsm-rowJoinBtn {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    white-space: nowrap;
}

.gsm-serverTable__joinCol {
    width:       1%;
    white-space: nowrap;
    text-align:  right;
}

@media (max-width: 900px) {
    .gsm-serverRowHead {
        display: none;
    }

    .gsm-serverRow {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-areas:
            "media title join"
            "media status join"
            "media game join"
            "media players join"
            "media address join";
    }

    .gsm-serverRow__media { grid-area: media; }
    .gsm-serverRow__title { grid-area: title; }
    .gsm-serverRow__status { grid-area: status; }
    .gsm-serverRow__gameName { grid-area: game; }
    .gsm-serverRow__players { grid-area: players; }
    .gsm-serverRow__address {
        grid-area: address;
        font-size: 0.8rem;
    }
    .gsm-serverRow__join {
        grid-area:     join;
        align-self:    center;
        justify-self:  end;
        min-width:     0;
    }
}

/* ── Server Detail Page ─────────────────────────────────────────────────── */
.gsm-serverDetail {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 370px);
    grid-template-areas:
        "main sidebar"
        "footer footer";
    column-gap:          28px;
    row-gap:             20px;
    align-items:         start;
}

.gsm-serverDetail__main {
    grid-area: main;
}

.gsm-serverDetail__sidebar {
    grid-area: sidebar;
}

.gsm-serverDetail__footer {
    grid-area:       footer;
    min-width:       0;
    margin-top:      4px;
    padding:         16px 20px;
    border:          1px solid var(--wcfContentBorderColor);
    background:      var(--wcfContentContainerBackground);
}

.gsm-serverDetail__footer .gsm-actionLinks--footer {
    display:         flex;
    flex-direction:  row;
    flex-wrap:       wrap;
    align-items:     stretch;
    justify-content: flex-start;
    gap:             10px;
    margin:          0;
    padding:         0;
}

.gsm-serverDetail__actions {
    grid-area:   actions;
    min-width:   0;
    max-width:   100%;
    margin-top:  6px;
    padding-top: 16px;
    border-top:  1px solid color-mix(in srgb, var(--wcfContentBorderColor) 88%, transparent);
}

.gsm-serverDetail__main,
.gsm-serverDetail__sidebar {
    min-width: 0;
    max-width: 100%;
}

/* Unter ~1040px: eine Spalte — Reihenfolge: Sidebar → Hauptinhalt (Tabs) */
@media (max-width: 1040px) {
    .gsm-serverDetail {
        grid-template-columns: 1fr;
        grid-template-areas:
            "sidebar"
            "main"
            "footer";
        column-gap: 0;
        row-gap:    18px;
    }

    .gsm-serverDetail__sidebar {
        width:     100%;
        max-width: none;
    }

    .gsm-sidebarPanel__title {
        font-size: 0.85rem;
    }

    .gsm-sidebarFacts__label {
        font-size: 0.85rem;
    }

    .gsm-sidebarFacts__value,
    .gsm-serverAddress {
        font-size: 0.88rem;
    }
}

/* Aktionsleiste volle Breite: waagerecht, umbrechend */
.gsm-serverDetail__actions .gsm-actionLinks--footer {
    display:         flex;
    flex-direction:    row;
    flex-wrap:         wrap;
    align-items:       stretch;
    justify-content:   flex-start;
    gap:               10px;
    margin:            0;
    padding:           0;
}

/* ── Info Grid (detail overview) ────────────────────────────────────────── */
.gsm-infoGrid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   12px;
    padding:               16px 0;
    max-width:             920px;
    align-content:         start;
}

.gsm-infoGrid__item {
    display:        flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height:     0;
    padding:        16px 18px;
    background:     color-mix(in srgb, var(--wcfContentText) 4%, var(--wcfContentBackground));
    border-radius:  var(--gsm-card-radius-sm);
    border:         1px solid var(--wcfContentBorderColor);
    gap:            6px;
    box-shadow:     0 1px 2px rgba(15, 23, 42, .04);
    transition:     border-color .15s ease, transform .15s ease;
}

.gsm-infoGrid__item:hover {
    border-color: color-mix(in srgb, var(--wcfColor) 25%, var(--wcfContentBorderColor));
    transform:    translateY(-1px);
}

.gsm-infoGrid__icon {
    font-size:  1.2rem;
    color:      var(--wcfColor);
    margin-bottom: 2px;
}

.gsm-infoGrid__label {
    font-size:  0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:      var(--wcfContentDimmedText);
}

.gsm-infoGrid__value {
    font-size:  1.1rem;
    font-weight: 700;
    color:      var(--wcfContentText);
    line-height: 1.35;
    word-break:  break-word;
}

/* ── Uptime Bar ─────────────────────────────────────────────────────────── */
.gsm-uptimeBar {
    height:        var(--gsm-bar-height);
    border-radius: var(--gsm-bar-radius);
    background:    var(--wcfTabularBoxBackgroundActive);
    overflow:      hidden;
    margin-bottom: 4px;
}

.gsm-uptimeBar__fill {
    height:     100%;
    border-radius: var(--gsm-bar-radius);
    background: var(--gsm-online-color);
    transition: width .3s ease;
}

/* ── Statistics Grid ────────────────────────────────────────────────────── */
.gsm-statsGrid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
    padding:               16px 0;
}

.gsm-statsSwitch {
    display: inline-flex;
    gap: 8px;
    margin: 6px 0 14px;
    padding: 4px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--wcfContentText) 4%, var(--wcfContentBackground));
    border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 75%, transparent);
}

.gsm-statsSwitch .button {
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--wcfContentDimmedText);
    font-weight: 600;
    min-height: 32px;
    padding: 0 12px;
}

.gsm-statsSwitch .button.isActive {
    background: color-mix(in srgb, var(--wcfColor) 20%, var(--wcfContentBackground));
    border-color: color-mix(in srgb, var(--wcfColor) 40%, var(--wcfContentBorderColor));
    color: var(--wcfContentText);
}

.gsm-statsGrid--kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-top: 2px;
    padding-bottom: 14px;
}

@media (max-width: 700px) {
    .gsm-statsGrid { grid-template-columns: 1fr; }
    .gsm-statsGrid--kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gsm-statsCard {
    padding:       16px;
    background:    var(--wcfTabularBoxBackground);
    border-radius: 6px;
    border:        1px solid var(--wcfContentBorderColor);
}

.gsm-statsCard__period {
    font-size:     0.75rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color:         var(--wcfColor);
    margin:        0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--wcfContentBorderColor);
}

.gsm-statsCard__data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     6px 4px;
    margin:  0;
}

.gsm-statsCard__data dt {
    font-size:  0.8rem;
    color:      var(--wcfContentDimmedText);
    align-self: center;
}

.gsm-statsCard__data dd {
    font-size:  0.95rem;
    font-weight: 700;
    color:      var(--wcfContentText);
    margin:     0;
}

.gsm-statsCard__big {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--wcfContentText);
}

.gsm-chartPanel--stats {
    max-width: 100%;
    margin-top: 10px;
    padding: 16px 18px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 82%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--wcfContentBackground) 92%, var(--wcfContentText)) 0%,
        color-mix(in srgb, var(--wcfTabularBoxBackground) 90%, var(--wcfContentBackground)) 100%
    );
}

.gsm-chartPanel--stats .gsm-chartPanel__title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 10px;
}

.gsm-chartPanel--stats .gsm-chartPanel__canvas {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 65%, transparent);
    background: color-mix(in srgb, var(--wcfContentBackground) 96%, #020617);
}

/* ── Detail sidebar panel ───────────────────────────────────────────────── */
.gsm-sidebarPanel {
    position:      relative;
    border-radius: 12px;
    border:        1px solid color-mix(in srgb, var(--wcfContentBorderColor) 90%, transparent);
    background:    var(--wcfContentBackground);
    background-image:
        var(--gsm-surface-glass),
        linear-gradient(160deg, color-mix(in srgb, var(--wcfColor) 8%, transparent) 0%, transparent 55%);
    box-shadow:    var(--gsm-card-shadow);
    overflow:      hidden;
}

.gsm-sidebarPanel::before {
    content:    '';
    position:   absolute;
    left:       0;
    right:      0;
    top:        0;
    height:     3px;
    z-index:    2;
    background: linear-gradient(90deg, var(--gsm-accent), color-mix(in srgb, var(--wcfColor) 55%, #a855f7));
    opacity:    .92;
}

.gsm-sidebarPanel__hero {
    position:   relative;
    z-index:    1;
    padding:    12px 10px 10px;
    text-align: center;
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--wcfColor) 14%, transparent) 0%, transparent 62%),
        color-mix(in srgb, var(--wcfContentText) 4%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 65%, transparent);
}

/* Sidebar-Heldenzeile: reiner Layout-Slot (zentrieren); Grafik nur über img.gsm-serverHeroImage */
.gsm-sidebarHeroSlot {
    margin:     0 auto;
    padding:    0;
    text-align: center;
    width:      100%;
    max-width:  100%;
}

/* Server-Grafik: nur <img> — keine volle Breite erzwingen (width: auto), damit die Box zum Motiv passt */
img.gsm-serverHeroImage {
    display:         block;
    margin:          0 auto;
    width:           auto;
    max-width:       100%;
    max-height:      260px;
    height:          auto;
    object-fit:      contain;
    object-position: center;
    border-radius:   18px;
    padding:         0;
    background:      transparent;
    border:          0;
    box-shadow:      none;
}

/* Theme-„img“-Regeln in der Detail-Sidebar überschreiben */
.gsm-serverDetail__sidebar img.gsm-serverHeroImage {
    width:         auto !important;
    max-width:     100% !important;
    max-height:    260px !important;
    border-radius: 18px !important;
    object-fit:    contain !important;
}

.gsm-sidebarHeroSlot__fallback {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    max-width:       100%;
    margin:          0 auto;
    padding:         14px 20px;
    border-radius:   18px;
    font-size:       1.02rem;
    font-weight:     800;
    letter-spacing:  .03em;
    text-transform:  uppercase;
    line-height:     1.25;
    color:           var(--wcfButtonText);
    background:      linear-gradient(135deg, color-mix(in srgb, var(--wcfColor) 92%, #000) 0%, var(--wcfColor) 100%);
    box-shadow:      0 6px 20px color-mix(in srgb, var(--wcfColor) 28%, transparent);
}

.gsm-sidebarPanel__gameName {
    margin:        12px 0 0;
    font-size:     0.82rem;
    font-weight:   600;
    color:         var(--wcfContentDimmedText);
    line-height:   1.35;
}

.gsm-sidebarPanel__body {
    position:   relative;
    z-index:    1;
    padding:    12px 16px 14px;
}

.gsm-sidebarJoinBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 10px 14px;
    font-weight: 650;
}

.gsm-sidebarAdminToggles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 88%, transparent);
}

.gsm-sidebarMaintenance {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 88%, transparent);
}

.gsm-sidebarStatusBox {
    margin-bottom: 0;
}

.gsm-sidebarFacts--statusOnly .gsm-sidebarFacts__row {
    border-bottom: none;
    padding-bottom: 10px;
}

.gsm-sidebarStatusBox:not(:has(+ .gsm-sidebarFacts)) {
    margin-bottom: 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 88%, transparent);
}

.gsm-sidebarActionLinks {
    width:         100%;
    margin:        0 0 12px;
    padding:       0 0 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 88%, transparent);
}

.gsm-sidebarActionLinks--outside {
    margin:        12px 0 0;
    padding:       0;
    border-bottom: none;
    background:    transparent;
}

.gsm-sidebarActionLinks--outside .gsm-actionLinks--sidebar {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-top:     0;
}

.gsm-sidebarActionLinks .gsm-actionLinks--sidebar {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-top:     0;
}

.gsm-sidebarActionLinks .gsm-actionLinks--sidebar .button.gsm-actionBtn--sidebar,
.gsm-sidebarActionLinks--outside .gsm-actionLinks--sidebar .button.gsm-actionBtn--sidebar {
    width:           100%;
    justify-content: flex-start;
}

.gsm-maintenanceToggle {
    width: 100%;
    justify-content: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--gsm-maintenance-color) 42%, var(--wcfContentBorderColor));
    background: var(--gsm-maintenance-soft);
    color: var(--gsm-maintenance-color);
}

.gsm-maintenanceToggle:hover,
.gsm-maintenanceToggle:focus-visible {
    background: color-mix(in srgb, var(--gsm-maintenance-color) 18%, var(--wcfContentBackground));
    border-color: var(--gsm-maintenance-color);
    color: color-mix(in srgb, var(--gsm-maintenance-color) 88%, #000);
}

.gsm-maintenanceToggle--active {
    background: color-mix(in srgb, var(--gsm-maintenance-color) 22%, var(--wcfContentBackground));
    border-color: var(--gsm-maintenance-color);
    font-weight: 650;
}

.gsm-activeToggle {
    width: 100%;
    justify-content: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--wcfStatusSuccessBorder) 55%, var(--wcfContentBorderColor));
    background: color-mix(in srgb, var(--wcfStatusSuccessBackground) 72%, transparent);
    color: var(--wcfStatusSuccessText);
}

.gsm-activeToggle:hover,
.gsm-activeToggle:focus-visible {
    background: color-mix(in srgb, var(--wcfStatusSuccessBackground) 92%, var(--wcfContentBackground));
    border-color: var(--wcfStatusSuccessBorder);
    color: var(--wcfStatusSuccessText);
}

.gsm-activeToggle:not(.gsm-activeToggle--active) {
    border-color: color-mix(in srgb, var(--wcfStatusErrorBorder) 55%, var(--wcfContentBorderColor));
    background: color-mix(in srgb, var(--wcfStatusErrorBackground) 72%, transparent);
    color: var(--wcfStatusErrorText);
}

.gsm-activeToggle:not(.gsm-activeToggle--active):hover,
.gsm-activeToggle:not(.gsm-activeToggle--active):focus-visible {
    background: color-mix(in srgb, var(--wcfStatusErrorBackground) 92%, var(--wcfContentBackground));
    border-color: var(--wcfStatusErrorBorder);
    color: var(--wcfStatusErrorText);
}

.gsm-sidebarPanel__title {
    margin:        0 0 14px;
    padding:       0 2px 14px;
    font-size:     0.98rem;
    font-weight:   750;
    text-transform: none;
    letter-spacing: 0;
    color:         var(--wcfContentText);
    border-bottom: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 92%, transparent);
}

/* ── Sidebar Info (Definition List) ─────────────────────────────────────── */
.gsm-sidebarInfo {
    display:       block;
    margin:        0;
    padding:       0;
}

.gsm-sidebarInfo dt {
    margin:        16px 0 0;
    font-size:     0.68rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:         var(--wcfContentDimmedText);
}

.gsm-sidebarInfo dt:first-child {
    margin-top: 0;
}

.gsm-sidebarInfo dd {
    margin:        0;
    padding:       0 0 12px;
    color:         var(--wcfContentText);
    font-size:     0.95rem;
    font-weight:    600;
    word-break:     break-word;
    border-bottom:  1px solid color-mix(in srgb, var(--wcfContentBorderColor) 55%, transparent);
}

.gsm-sidebarInfo dd:last-of-type {
    padding-bottom: 4px;
    border-bottom:  none;
}

.gsm-serverAddress {
    font-size:    0.82rem;
    padding:      6px 10px;
    background:   color-mix(in srgb, var(--wcfContentText) 6%, var(--wcfTabularBoxBackground));
    border-radius: 8px;
    border:       1px solid color-mix(in srgb, var(--wcfContentBorderColor) 55%, transparent);
    user-select:  all;
}

.gsm-sidebarAddressRow {
    display:         flex;
    flex-wrap:       nowrap;
    align-items:     center;
    justify-content: flex-start;
    gap:             8px;
    width:           100%;
    max-width:       100%;
    min-width:       0;
}

.gsm-sidebarFacts__value--address .gsm-sidebarAddressRow {
    justify-content: flex-start;
}

.gsm-sidebarAddressRow .gsm-serverAddress {
    flex:           1 1 auto;
    min-width:      0;
    max-width:      100%;
    overflow-x:     visible;
    overflow-wrap:  anywhere;
    word-break:     break-word;
    text-align:     left;
}

.gsm-sidebarAddressRow .gsm-copyAddressTrigger {
    flex-shrink:        0;
    margin-inline-start: auto;
}

.gsm-sidebarCopyIcon {
    flex-shrink: 0;
}

.gsm-sidebarJoinBtn {
    display:    flex;
    align-items: center;
    gap:        8px;
    margin-top: 18px;
    width:      100%;
    justify-content: center;
    border-radius: 999px;
    padding-top:   12px;
    padding-bottom:  12px;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.gsm-playerTable,
.gsm-modTable,
.gsm-whitelistTable {
    width: 100%;
}

.gsm-playerTable.table th,
.gsm-playerTable.table td,
.gsm-whitelistTable.table th,
.gsm-whitelistTable.table td {
    overflow:    visible;
    text-indent: 0;
}

.gsm-whitelistActions {
    position:      relative;
    display:       flex;
    gap:           6px;
    flex-wrap:     wrap;
    align-items:   center;
    width:         1%;
    white-space:   nowrap;
}

/* ── Category Section ───────────────────────────────────────────────────── */
.gsm-categorySection {
    margin-top:    8px;
    margin-bottom: 8px;
    padding:       24px 26px 28px;
    border-radius: calc(var(--gsm-card-radius) + 4px);
    background:    color-mix(in srgb, var(--wcfContentText) 3.5%, var(--wcfContentBackground));
    border:        1px solid color-mix(in srgb, var(--wcfContentBorderColor) 85%, transparent);
    box-shadow:    0 1px 0 rgba(255, 255, 255, .04) inset, var(--gsm-card-shadow);
}

.gsm-categorySection + .gsm-categorySection {
    margin-top: 28px;
}

.gsm-categorySection__head {
    margin-bottom: 6px;
}

.gsm-categorySection__title {
    margin:        0;
    font-size:     1.35rem;
    font-weight:   800;
    letter-spacing: -0.03em;
    color:         var(--wcfContentText);
    padding-bottom: 12px;
    border-bottom: 2px solid color-mix(in srgb, var(--wcfColor) 45%, transparent);
    display:       inline-block;
    min-width:     min(100%, 320px);
}

.gsm-categoryDescription {
    font-size:   0.95rem;
    line-height: 1.45;
    color:       var(--wcfContentDimmedText);
    margin:      4px 0 12px;
    max-width:   72ch;
}

/* ── List hub header ───────────────────────────────────────────────────── */
.gsm-hubHeader {
    flex-direction: column;
    align-items:    stretch;
    gap:            0;
}

.gsm-hubHeader__title {
    letter-spacing: -0.03em;
}

.gsm-hubHeader__subtitle {
    margin:      2px 0 0;
    font-size:   0.95rem;
    line-height: 1.45;
    color:       var(--wcfContentDimmedText);
    max-width:   52ch;
}

/* ── Fleet toolbar (search + status + view icons) ──────────────────────── */
.gsm-fleetWorkbench.section {
    width:      100%;
    max-width:  none;
    padding:    0;
    margin-top: 12px;
}

.gsm-fleetToolbar {
    display:         flex;
    flex-wrap:       nowrap;
    align-items:     center;
    gap:             8px;
    width:           100%;
    min-height:      44px;
    padding:         5px 6px 5px 8px;
    box-sizing:      border-box;
    border-radius:   10px;
    border:          1px solid color-mix(in srgb, var(--wcfContentText) 12%, var(--wcfContentBorderColor));
    background:      var(--wcfContentContainerBackground);
}

.gsm-fleetToolbar__searchForm {
    display:     flex;
    flex:        1 1 0;
    align-items: center;
    gap:         8px;
    min-width:   0;
    margin:      0;
    flex-wrap:   nowrap;
}

.gsm-fleetToolbar__searchField {
    display:       flex;
    flex:          1 1 0;
    align-items:   center;
    gap:           8px;
    min-width:     0;
    min-height:    34px;
    padding:       0 12px;
    margin:        0;
    border:        0;
    border-radius: 8px;
    background:    color-mix(in srgb, var(--wcfContentText) 7%, var(--wcfContentBackground));
    box-sizing:    border-box;
    color:         var(--wcfContentDimmedText);
}

.gsm-fleetToolbar__searchField input {
    width:      100%;
    min-width:  0;
    border:     0;
    background: transparent;
    color:      var(--wcfContentText);
}

.gsm-fleetToolbar__searchField input::placeholder {
    color: var(--wcfContentDimmedText);
}

.gsm-fleetToolbar__statusLabel {
    flex:       0 0 auto;
    margin:     0;
    min-width:  0;
}

.gsm-fleetToolbar__statusSelect {
    width:         auto;
    min-width:     84px;
    max-width:     120px;
    min-height:    34px;
    padding:       6px 28px 6px 10px;
    border-radius: 8px;
    border:        1px solid color-mix(in srgb, var(--wcfContentText) 10%, var(--wcfContentBorderColor));
    background:    color-mix(in srgb, var(--wcfContentText) 5%, var(--wcfContentBackground));
    color:         var(--wcfContentText);
    font-size:     0.8125rem;
    font-weight:   600;
    box-sizing:    border-box;
    cursor:        pointer;
}

.gsm-fleetToolbar__views {
    display:         inline-flex;
    flex:            0 0 auto;
    align-items:     center;
    gap:             2px;
    margin:          0 0 0 auto;
    padding:         3px;
    border-radius:   8px;
    border:          1px solid color-mix(in srgb, var(--wcfContentText) 10%, var(--wcfContentBorderColor));
    background:      color-mix(in srgb, var(--wcfContentText) 4%, var(--wcfContentBackground));
}

.gsm-fleetToolbar a.gsm-viewToggle__iconBtn {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           34px;
    height:          32px;
    border-radius:   6px;
    color:           var(--wcfContentDimmedText) !important;
    text-decoration: none;
    transition:      background .15s ease, color .15s ease;
}

.gsm-fleetToolbar a.gsm-viewToggle__iconBtn:hover,
.gsm-fleetToolbar a.gsm-viewToggle__iconBtn:focus-visible {
    color:      var(--wcfContentText) !important;
    background: color-mix(in srgb, var(--wcfContentText) 10%, transparent);
}

.gsm-fleetToolbar a.gsm-viewToggle__iconBtn.isActive {
    background: var(--wcfColor);
    color:      var(--wcfButtonPrimaryText, #fff) !important;
}

.gsm-fleetToolbar a.gsm-viewToggle__iconBtn[data-tooltip]::after {
    content:          attr(data-tooltip);
    position:         absolute;
    bottom:           calc(100% + 7px);
    left:             50%;
    transform:        translateX(-50%) translateY(2px);
    padding:          4px 8px;
    border-radius:    6px;
    background:       color-mix(in srgb, var(--wcfContentText) 88%, #000);
    color:            #fff;
    font-size:        0.75rem;
    font-weight:      600;
    line-height:      1.2;
    white-space:      nowrap;
    pointer-events:   none;
    opacity:          0;
    visibility:       hidden;
    transition:       opacity .12s ease, transform .12s ease, visibility .12s ease;
    z-index:          20;
}

.gsm-fleetToolbar a.gsm-viewToggle__iconBtn[data-tooltip]:hover::after,
.gsm-fleetToolbar a.gsm-viewToggle__iconBtn[data-tooltip]:focus-visible::after {
    opacity:    1;
    visibility: visible;
    transform:  translateX(-50%) translateY(0);
}

@media (max-width: 720px) {
    .gsm-fleetToolbar {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
}

.gsm-isSearchHidden {
    display: none !important;
}

.gsm-searchEmpty[hidden] {
    display: none !important;
}

.gsm-searchEmpty:not([hidden]) {
    margin: 12px 0 0;
}

/* ── Detail: Übersicht (Statistik-Leiste direkt unter Tabs) ─────────────── */
.gsm-detailTabs--withStats {
    border:        1px solid var(--wcfContentBorderColor);
    border-radius: 8px;
    background:    var(--wcfContentBackground);
    overflow:      hidden;
}

.gsm-detailTabs--withStats .tabMenu > ul {
    padding:          0 8px;
    background:       var(--wcfContentContainerBackground);
    border-bottom:    1px solid var(--wcfContentBorderColor);
}

.gsm-detailTabs--withStats .tabMenuContent {
    padding: 20px;
}

.gsm-detailTabs--withStats #overview.tabMenuContent {
    padding-top: 20px !important;
}

.gsm-overviewStats {
    margin: 0;
    border-bottom: 1px solid var(--wcfContentBorderColor);
    background: color-mix(in srgb, var(--wcfContentText) 3%, var(--wcfContentBackground));
}

.gsm-overviewStats[hidden] {
    display: none !important;
}

.gsm-overviewStats .gsm-statRail {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0 !important;
    border: 0;
    margin: 0;
    overflow-x: auto;
}

.gsm-overviewStats .gsm-statRail__item {
    flex: 1 1 0;
    min-width: 128px;
    border-right: 1px solid var(--wcfContentBorderColor) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 72px !important;
}

.gsm-overviewStats .gsm-statRail__item:last-child {
    border-right: 0 !important;
}

.gsm-overviewStats .gsm-statRail__item--chart {
    flex: 1.35 1 0;
    min-width: 180px;
}

.gsm-overviewBody {
    padding: 0;
}

.gsm-overviewHero {
    margin:           0 0 18px;
    padding:          18px 18px 16px;
    border-radius:    var(--gsm-card-radius-sm);
    border:           1px solid color-mix(in srgb, var(--wcfColor) 26%, var(--wcfContentBorderColor));
    background:       color-mix(in srgb, var(--wcfContentText) 4.5%, var(--wcfContentBackground));
    background-image: linear-gradient(165deg, color-mix(in srgb, var(--wcfColor) 10%, transparent) 0%, transparent 52%);
    box-shadow:       0 1px 2px rgba(15, 23, 42, .05);
}

.gsm-statRail {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap:                   10px 12px;
    align-items:           stretch;
}

.gsm-statRail__item {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    padding:        10px 12px;
    border-radius:  12px;
    background:     linear-gradient(
        180deg,
        color-mix(in srgb, var(--gsm-overview-accent, var(--wcfColor)) 14%, var(--wcfContentBackground)) 0%,
        color-mix(in srgb, var(--gsm-overview-accent, var(--wcfColor)) 7%, var(--wcfTabularBoxBackground)) 100%
    );
    border:         1px solid color-mix(in srgb, var(--gsm-overview-accent, var(--wcfColor)) 26%, var(--wcfContentBorderColor));
    min-height:     64px;
    position:       relative;
    overflow:       hidden;
    box-shadow:     0 1px 2px rgba(2, 6, 23, .14), inset 0 1px 0 rgba(255,255,255,.03);
    transition:     border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.gsm-statRail__item::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--gsm-overview-accent, var(--wcfColor)) 45%, transparent 100%);
    opacity: .8;
}

.gsm-statRail__item:hover {
    border-color: color-mix(in srgb, var(--gsm-overview-accent, var(--wcfColor)) 46%, var(--wcfContentBorderColor));
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2, 6, 23, .24), inset 0 1px 0 rgba(255,255,255,.04);
}

.gsm-statRail__item--chart {
    grid-column: span 2;
    min-width:   200px;
}

@media (max-width: 640px) {
    .gsm-statRail__item--chart {
        grid-column: auto;
    }
}

.gsm-statRail__k {
    font-size:      0.62rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          color-mix(in srgb, var(--gsm-overview-accent, var(--wcfColor)) 40%, var(--wcfContentDimmedText));
    line-height:    1.25;
}

.gsm-statRail__v {
    font-size:          1.25rem;
    font-weight:        800;
    font-variant-numeric: tabular-nums;
    color:              var(--wcfContentText);
    line-height:        1.1;
}

/* Overview cards with same accent concept as stats KPI cards */
.gsm-statRail__item:nth-child(1) { --gsm-overview-accent: #22c55e; }
.gsm-statRail__item:nth-child(2) { --gsm-overview-accent: #38bdf8; }
.gsm-statRail__item:nth-child(3) { --gsm-overview-accent: #a78bfa; }
.gsm-statRail__item:nth-child(4) { --gsm-overview-accent: #f59e0b; }
.gsm-statRail__item:nth-child(5) { --gsm-overview-accent: #14b8a6; }

html[data-color-scheme="light"] .gsm-statRail__item {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--gsm-overview-accent, var(--wcfColor)) 8%, #ffffff) 0%,
        color-mix(in srgb, var(--gsm-overview-accent, var(--wcfColor)) 4%, #f8fafc) 100%
    );
    border-color: color-mix(in srgb, var(--gsm-overview-accent, var(--wcfColor)) 30%, var(--wcfContentBorderColor));
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.55);
}

.gsm-statRail__v--muted {
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--wcfContentDimmedText);
}

.gsm-statRail__v--up {
    color: var(--gsm-online-color);
}

.gsm-statRail__v--down {
    color: var(--gsm-offline-color);
}

.gsm-activityTrace {
    display:    block;
    width:      100%;
    height:     40px;
    margin-top: 2px;
    color:      color-mix(in srgb, var(--wcfColor) 82%, #38bdf8);
    opacity:    .95;
}

.gsm-playerCapacity {
    margin:        0 0 20px;
    padding:       14px 16px;
    border-radius: var(--gsm-card-radius-sm);
    border:        1px solid var(--wcfContentBorderColor);
    background:    color-mix(in srgb, var(--wcfContentText) 3.5%, var(--wcfContentBackground));
}

.gsm-playerCapacity__head {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             10px;
    margin-bottom:   8px;
}

.gsm-playerCapacity__label {
    font-size:   0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:       var(--wcfContentDimmedText);
}

.gsm-playerCapacity__nums {
    font-size:          0.95rem;
    font-weight:        800;
    font-variant-numeric: tabular-nums;
    color:              var(--wcfContentText);
}

.gsm-playerBar__track--hero {
    height: 12px;
}

.gsm-overviewFold {
    margin:        0 0 18px;
    padding:       10px 12px;
    border-radius: var(--gsm-card-radius-sm);
    border:        1px dashed color-mix(in srgb, var(--wcfContentBorderColor) 85%, transparent);
    background:    color-mix(in srgb, var(--wcfContentText) 3%, var(--wcfContentBackground));
}

.gsm-overviewFold__summary {
    cursor:        pointer;
    font-weight:   700;
    list-style:    none;
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    color:         var(--wcfContentText);
}

.gsm-overviewFold__summary::-webkit-details-marker {
    display: none;
}

.gsm-overviewFold__badge {
    display:       inline-flex;
    min-width:     26px;
    justify-content: center;
    padding:       2px 8px;
    border-radius: 999px;
    font-size:     0.72rem;
    font-weight:   800;
    background:    color-mix(in srgb, var(--wcfColor) 16%, transparent);
    color:         var(--wcfColor);
}

.gsm-overviewFold__hint {
    margin:    8px 0 10px;
    font-size: 0.88rem;
    color:     var(--wcfContentDimmedText);
    line-height: 1.45;
}

.gsm-techSection {
    margin-top: 4px;
}

.gsm-techSection__title {
    margin:        0 0 10px;
    font-size:     0.72rem;
    font-weight:   800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color:         var(--wcfContentDimmedText);
}

.gsm-infoGrid--dense {
    gap: 10px;
}

.gsm-infoGrid--dense .gsm-infoGrid__item {
    padding: 12px 14px;
}

/* ── Sidebar: Faktenliste (Icon + Label + Wert) ─────────────────────────── */
.gsm-sidebarFacts {
    list-style: none;
    margin:     0;
    padding:    0;
}

.gsm-sidebarFacts__row {
    display:               grid;
    /* Dritte Spalte darf schrumpfen — „max-content“ allein frisst schmalen Platz weg */
    grid-template-columns: 36px minmax(0, 1fr) minmax(0, max-content);
    gap:                   8px 10px;
    align-items:           center;
    padding:               12px 0;
    border-bottom:         1px solid rgba(148, 163, 184, 0.24);
}

.gsm-sidebarFacts__row:last-child {
    border-bottom: none;
}

/* Adresse: Zeile 1 = Icon + Titel, Zeile 2 = Hostname + Kopieren (eine Flex-Zeile, Text darf umbrechen) */
.gsm-sidebarFacts__row--address {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows:    auto auto;
    gap:                   6px 10px;
    align-items:           start;
}

.gsm-sidebarFacts__row--address .gsm-sidebarFacts__icon {
    grid-column: 1;
    grid-row:    1;
}

.gsm-sidebarFacts__row--address .gsm-sidebarFacts__label {
    grid-column: 2;
    grid-row:    1;
}

.gsm-sidebarFacts__row--address .gsm-sidebarFacts__value--address {
    grid-column:  1 / -1;
    grid-row:     2;
    padding-left: 46px; /* Icon + column gap: Wert bündig unter dem Label „Adresse“ */
}

/* LiF (u. a.): A2S_RULES-Block unter der Karte — volle Breite, grüner Titel wie „Gameserver-Informationen“ */
.gsm-sidebarFacts__row--rulePackHead {
    grid-column:   1 / -1;
    display:       block;
    padding:       10px 12px 8px;
    margin:        10px 0 4px;
    border-radius: 10px;
    background:    linear-gradient(
        90deg,
        color-mix(in srgb, var(--gsm-online-color) 88%, #047857) 0%,
        color-mix(in srgb, var(--gsm-online-color) 62%, #0f766e) 100%
    );
    box-shadow:    0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
    border:        1px solid color-mix(in srgb, var(--gsm-online-color) 55%, #065f46);
}

.gsm-sidebarRulePack__title {
    display:         block;
    font-size:       0.78rem;
    font-weight:     800;
    letter-spacing:  .08em;
    text-transform:  uppercase;
    color:           #f8fafc;
    line-height:     1.35;
}

.gsm-sidebarFacts__row--rulePack .gsm-sidebarFacts__value--rule {
    white-space:   normal;
    overflow-wrap: anywhere;
    word-break:    break-word;
    text-align:    right;
}

.gsm-sidebarFacts__icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           30px;
    height:          30px;
    border-radius:   12px;
    background:      transparent;
    color:           color-mix(in srgb, var(--wcfContentDimmedText) 80%, var(--wcfColor));
    font-size:       0.98rem;
    grid-column:     1;
    grid-row:        1;
}

.gsm-sidebarFacts__label {
    font-size:       0.9rem;
    font-weight:     500;
    text-transform:  none;
    letter-spacing:  .01em;
    color:           color-mix(in srgb, var(--wcfContentDimmedText) 96%, #9ca3af);
    line-height:     1.35;
    grid-column:     2;
    grid-row:        1;
    margin:          0;
    min-width:       0;
    word-break:      normal;
    overflow-wrap:   normal;
}

.gsm-sidebarFacts__label--titled {
    cursor: help;
}

.gsm-sidebarFacts__value {
    font-size:            0.9rem;
    font-weight:          500;
    color:                var(--wcfContentText);
    text-align:           right;
    word-break:           break-word;
    min-width:            0;
    grid-column:          3;
    grid-row:             1;
    white-space:          nowrap;
    font-variant-numeric: tabular-nums;
}

.gsm-sidebarFacts__value--address {
    text-align:    left;
    white-space:   normal;
    min-width:     0;
    max-width:     100%;
    justify-self:  stretch;
    overflow-wrap: anywhere;
}

.gsm-sidebarFacts__value--address .gsm-sidebarAddressBlock {
    display:   block;
    width:     100%;
    max-width: 100%;
    min-width: 0;
}

/* Schmale Viewports: Label + Wert untereinander (kein „Buchstaben-Stapel“) */
@media (max-width: 700px) {
    .gsm-sidebarFacts__row,
    .gsm-sidebarFacts__row--address {
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-rows:    auto auto;
        align-items:           start;
    }

    .gsm-sidebarFacts__icon {
        grid-column: 1;
        grid-row:    1 / span 2;
        align-self:  start;
    }

    .gsm-sidebarFacts__label {
        grid-column: 2;
        grid-row:    1;
    }

    .gsm-sidebarFacts__value {
        grid-column:   2;
        grid-row:      2;
        text-align:    left;
        white-space:   normal;
        justify-self:  stretch;
        max-width:     100%;
    }

    .gsm-sidebarFacts__value--address {
        justify-self: stretch;
        text-align:   left;
        padding-left: 0;
    }

    .gsm-sidebarFacts__row--address .gsm-sidebarFacts__icon {
        grid-row: 1 / span 2;
    }

    .gsm-sidebarFacts__row--address .gsm-sidebarFacts__value--address {
        grid-column:  2;
        grid-row:     2;
        padding-left: 0;
    }

    .gsm-sidebarAddressRow {
        flex-direction:  row;
        flex-wrap:       nowrap;
        align-items:     center;
        justify-content: flex-start;
        gap:             8px;
    }

    .gsm-sidebarAddressRow .gsm-serverAddress {
        flex:       1 1 auto;
        min-width:  0;
        width:      auto;
        text-align: left;
    }

    .gsm-serverDetail__sidebar .gsm-sidebarAddressRow .gsm-copyAddressBtn.button,
    .gsm-serverDetail__sidebar button.gsm-copyAddressBtn.button {
        align-self: center;
    }
}

@media (max-width: 520px) {
    /* Tabs: waagrecht scrollen statt unleserlicher Mehrspaltigkeit */
    .gsm-detailTabs .tabMenu > ul {
        flex-wrap:               nowrap;
        overflow-x:              auto;
        -webkit-overflow-scrolling: touch;
        gap:                     0 6px !important;
        padding-bottom:          4px;
        scrollbar-width:         thin;
    }

    .gsm-detailTabs .tabMenu > ul > li {
        flex: 0 0 auto;
    }

    .gsm-detailTabs .tabMenu > ul > li > a {
        white-space: nowrap !important;
    }
}

.gsm-sidebarFacts__primary {
    display: block;
    font-weight: 500;
    line-height: 1.3;
}

.gsm-sidebarFacts__secondary {
    display:     block;
    margin-top:  2px;
    font-size:   0.78rem;
    font-weight: 500;
    color:       var(--wcfContentDimmedText);
    line-height: 1.35;
}

.gsm-sidebarJoinBtn {
    margin-top:       10px;
    min-height:       44px;
}

.gsm-serverAddress {
    font-size:        0.9rem;
    line-height:      1.3;
    white-space:      normal;
    overflow-wrap:    anywhere;
    font-weight:      500;
    padding:          0;
    background:       transparent;
    border:           0;
}

/* Nur zwischen Tablet-Breite und Desktop: schmalere Sidebar — nicht auf Mobil (≤1040),
   sonst überschreibt diese Regel die Einspurigkeit der folgenden 1040px-Blöcke. */
@media (max-width: 1400px) and (min-width: 1041px) {
    .gsm-serverDetail {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
        grid-template-areas:
            "main sidebar"
            "footer footer";
    }
}

/* ── Server Rules ───────────────────────────────────────────────────────── */
.gsm-serverRules {
    padding: 8px 0;
}

/* ── Whitelist Apply Form ────────────────────────────────────────────────── */
.gsm-whitelistCheckbox {
    display:     inline-flex;
    align-items: flex-start;
    gap:         10px;
    line-height: 1.45;
    cursor:      pointer;
}

.gsm-whitelistCheckbox input {
    margin-top: 4px;
    flex-shrink: 0;
}

.gsm-whitelistCheckboxWrap {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.gsm-whitelistCheckboxHint {
    margin:        0;
    padding:       10px 12px;
    border-radius: 8px;
    font-size:     0.88em;
    line-height:   1.45;
    color:         color-mix(in srgb, var(--wcfContentText) 78%, transparent);
    background:    color-mix(in srgb, var(--wcfContentText) 6%, var(--wcfContentBackground));
    border:        1px solid var(--wcfContentBorderColor);
}

.gsm-whitelistApply,
.gsm-whitelistApplyForm {
    background:    color-mix(in srgb, var(--wcfContentText) 4%, var(--wcfContentBackground));
    border-radius: var(--gsm-card-radius-sm);
    border:        1px solid var(--wcfContentBorderColor);
    padding:       22px 24px;
    margin-bottom: 24px;
    box-shadow:    0 1px 2px rgba(15, 23, 42, .04);
}

.gsm-whitelistApply h3,
.gsm-whitelistApplyForm h3 {
    margin-top: 0;
}

.gsm-fsWhFieldHint {
    margin:      8px 0 0;
    font-size:   0.82rem;
    line-height: 1.45;
    color:       var(--wcfContentDimmedText);
}

/* ── Whitelist Status Colors ────────────────────────────────────────────── */
.gsm-whitelistStatus.gsm-statusBadge--accepted { color: var(--gsm-online-color); }
.gsm-whitelistStatus.gsm-statusBadge--rejected { color: var(--gsm-offline-color); }
.gsm-whitelistStatus.gsm-statusBadge--banned   { color: #8e44ad; }
.gsm-whitelistStatus.gsm-statusBadge--pending  { color: var(--gsm-pending-color); }

/* ── Dashboard (KPI + Charts + Topliste) ─────────────────────────────── */
.gsm-dashboard {
    margin-top: 4px;
}

.gsm-dashboardKpi {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:                   var(--gsm-card-gap);
    margin-bottom:         28px;
}

.gsm-dashboardKpi__card {
    position:      relative;
    border-radius: var(--gsm-card-radius);
    background:    var(--wcfContentBackground);
    border:        1px solid var(--wcfContentBorderColor);
    box-shadow:    var(--gsm-card-shadow);
    overflow:      hidden;
    transition:    transform .16s ease, box-shadow .16s ease;
}

.gsm-dashboardKpi__card:hover {
    transform:  translateY(-2px);
    box-shadow: var(--gsm-card-shadow-lg);
}

.gsm-dashboardKpi__accent {
    position:   absolute;
    left:       0;
    top:        0;
    bottom:     0;
    width:      4px;
    border-radius: 4px 0 0 4px;
}

.gsm-dashboardKpi__card--total  .gsm-dashboardKpi__accent { background: var(--gsm-accent); }
.gsm-dashboardKpi__card--online .gsm-dashboardKpi__accent { background: var(--gsm-online-color); }
.gsm-dashboardKpi__card--offline .gsm-dashboardKpi__accent { background: var(--gsm-offline-color); }
.gsm-dashboardKpi__card--players .gsm-dashboardKpi__accent { background: color-mix(in srgb, var(--wcfColor) 70%, #6366f1); }

.gsm-dashboardKpi__body {
    display:     flex;
    align-items: center;
    gap:         14px;
    padding:     18px 20px 18px 22px;
}

.gsm-dashboardKpi__icon {
    width:          44px;
    height:         44px;
    border-radius:  12px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      1.15rem;
    background:     var(--wcfTabularBoxBackground);
    color:          var(--wcfContentDimmedText);
}

.gsm-dashboardKpi__card--online .gsm-dashboardKpi__icon {
    background: rgba(46, 204, 113, .12);
    color:      var(--gsm-online-color);
}

.gsm-dashboardKpi__card--offline .gsm-dashboardKpi__icon {
    background: rgba(231, 76, 60, .12);
    color:      var(--gsm-offline-color);
}

.gsm-dashboardKpi__meta {
    flex: 1;
    min-width: 0;
}

.gsm-dashboardKpi__value {
    font-size:     1.85rem;
    font-weight:   800;
    line-height:   1.1;
    letter-spacing: -0.02em;
    color:         var(--wcfContentText);
}

.gsm-dashboardKpi__label {
    font-size:   0.82rem;
    color:       var(--wcfContentDimmedText);
    margin-top:  2px;
}

.gsm-dashboardMain {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap:                   24px;
    align-items:           start;
}

@media (max-width: 1100px) {
    .gsm-dashboardMain {
        grid-template-columns: 1fr;
    }
}

.gsm-dashboardMain__charts {
    display:       flex;
    flex-direction: column;
    gap:           20px;
    min-width:     0;
}

.gsm-dashboardChartEmpty {
    margin: 0 0 12px;
}

.gsm-chartPanel {
    position:      relative;
    border-radius: var(--gsm-card-radius);
    background:    linear-gradient(180deg, var(--wcfContentBackground) 0%, var(--wcfTabularBoxBackground) 120%);
    border:        1px solid var(--wcfContentBorderColor);
    box-shadow:    var(--gsm-card-shadow);
    padding:       20px 22px 18px;
}

.gsm-chartPanel--donut {
    max-width: 640px;
}

.gsm-chartPanel--top {
    position: sticky;
    top:      12px;
}

.gsm-chartPanel__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    flex-wrap:       wrap;
    margin-bottom:   4px;
}

.gsm-chartPanel__title {
    margin:    0;
    font-size: 0.88rem;
    font-weight: 700;
    color:     var(--wcfContentText);
}

.gsm-chartPanel__badge {
    font-size:     0.72rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding:        4px 10px;
    border-radius:  999px;
    background:     color-mix(in srgb, var(--wcfColor) 14%, transparent);
    color:          var(--wcfColor);
}

.gsm-chartPanel__hint {
    margin:    0 0 14px;
    font-size: 0.84rem;
    color:     var(--wcfContentDimmedText);
    line-height: 1.45;
}

.gsm-chartPanel__canvasWrap {
    width:         100%;
    min-height:    260px;
    border-radius: 10px;
    overflow:      hidden;
    background:    color-mix(in srgb, var(--wcfContentText) 3%, var(--wcfContentBackground));
    border:        1px solid var(--wcfContentBorderColor);
}

.gsm-chartPanel__canvas {
    display:   block;
    width:     100%;
    height:    auto;
    vertical-align: middle;
}

.gsm-donutRow {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         24px 32px;
}

.gsm-donutRow__chart {
    flex-shrink: 0;
}

.gsm-donutLegend {
    list-style: none;
    margin:     0;
    padding:    0;
    flex:       1;
    min-width:  180px;
}

.gsm-donutLegend li {
    display:               grid;
    grid-template-columns: 14px 1fr auto;
    gap:                   10px 12px;
    align-items:           center;
    padding:               8px 0;
    font-size:             0.88rem;
    border-bottom:         1px solid var(--wcfContentBorderColor);
}

.gsm-donutLegend li:last-child {
    border-bottom: none;
}

.gsm-donutLegend__swatch {
    width:         12px;
    height:        12px;
    border-radius: 3px;
    display:       inline-block;
}

.gsm-donutLegend__label {
    color: var(--wcfContentDimmedText);
}

.gsm-donutLegend__val {
    font-weight:          600;
    font-variant-numeric: tabular-nums;
    color:                var(--wcfContentText);
}

.gsm-donutLegend__pct {
    font-weight: 500;
    color:       var(--wcfContentDimmedText);
    font-size:   0.82rem;
}

.gsm-dashboardAside {
    min-width: 0;
}

.gsm-topServerList {
    list-style: none;
    margin:     12px 0 0;
    padding:    0;
}

.gsm-topServerList__item {
    display:               grid;
    grid-template-columns: 36px 1fr auto;
    gap:                   10px 12px;
    align-items:           center;
    padding:               12px 14px;
    margin-bottom:         8px;
    border-radius:         10px;
    border:                1px solid var(--wcfContentBorderColor);
    background:            var(--wcfContentBackground);
    transition:            border-color .15s ease, box-shadow .15s ease;
}

.gsm-topServerList__item:hover {
    border-color: color-mix(in srgb, var(--wcfColor) 35%, var(--wcfContentBorderColor));
    box-shadow:   0 4px 12px rgba(15, 23, 42, .06);
}

.gsm-topServerList__rank {
    width:          32px;
    height:         32px;
    border-radius:  10px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-weight:    800;
    font-size:      0.85rem;
    background:     var(--wcfTabularBoxBackground);
    color:          var(--wcfContentDimmedText);
}

.gsm-topServerList__body {
    min-width: 0;
}

.gsm-topServerList__name {
    display:     block;
    font-weight: 700;
    color:       var(--wcfContentText);
    text-decoration: none;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.gsm-topServerList__name:hover {
    color: var(--wcfColor);
}

.gsm-topServerList__game {
    font-size: 0.78rem;
    color:     var(--wcfContentDimmedText);
    margin-top: 2px;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.gsm-topServerList__players {
    font-variant-numeric: tabular-nums;
    font-weight:        700;
    font-size:          0.92rem;
    color:              var(--wcfContentText);
}

/* ── Server-Detail: Kopfzeile nur „Zur Übersicht“ ─────────────────────────── */
.gsm-serverDetailHeaderNav ul {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    align-items: center;
}

/* ── Map tab: Galerie + Giants + Livekarte (moderne Karten-Optik) ─────────── */
.gsm-mapTab {
    min-width:     0;
    padding-block: 4px 8px;
}

.gsm-mapTab__layout {
    display:        flex;
    flex-direction: column;
    gap:            32px;
    max-width:      640px;
    margin-inline:  auto;
    width:          100%;
}

.gsm-mapTabStack__block {
    min-width: 0;
}

.gsm-mapGallery {
    max-width:        100%;
    margin:           0 auto;
    border-radius:    18px;
    border:           1px solid color-mix(in srgb, var(--wcfContentBorderColor) 85%, transparent);
    background:       color-mix(in srgb, var(--wcfContentBackground) 94%, var(--wcfContentText));
    box-shadow:       0 14px 42px rgba(15, 23, 42, .12);
    overflow:         hidden;
    backdrop-filter:  blur(0);
}

.gsm-mapGallery__main {
    padding:    14px 14px 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--wcfTabularBoxBackground) 88%, transparent) 0%,
        var(--wcfTabularBoxBackground) 100%
    );
    text-align: center;
}

.gsm-mapGallery__mainImg {
    display:          block;
    width:            100%;
    max-width:        100%;
    height:           auto;
    max-height:       min(40vh, 420px);
    object-fit:       contain;
    margin:           0 auto;
    border-radius:    14px;
    box-shadow:       0 8px 28px rgba(15, 23, 42, .18);
}

.gsm-mapGallery__thumbs {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             12px;
    padding:         14px 14px 16px;
    border-top:      1px solid color-mix(in srgb, var(--wcfContentBorderColor) 70%, transparent);
    background:      var(--wcfContentBackground);
}

.gsm-mapGallery__thumb {
    -webkit-appearance: none;
    appearance:         none;
    margin:             0;
    padding:            0;
    border:             2px solid transparent;
    border-radius:      12px;
    cursor:             pointer;
    background:         color-mix(in srgb, var(--wcfContentBackground) 92%, var(--wcfContentText));
    overflow:           hidden;
    flex:               0 0 auto;
    width:              84px;
    max-width:          calc(20% - 10px);
    line-height:        0;
    transition:         border-color .18s ease, box-shadow .18s ease, transform .14s ease, filter .14s ease;
}

.gsm-mapGallery__thumb:hover {
    transform: translateY(-2px);
    filter:    brightness(1.04);
}

.gsm-mapGallery__thumb.is-active {
    border-color: var(--wcfColor);
    box-shadow:   0 0 0 2px color-mix(in srgb, var(--wcfColor) 35%, transparent);
}

.gsm-mapGallery__thumb:focus-visible {
    outline:        2px solid var(--wcfColor);
    outline-offset: 3px;
}

.gsm-mapGallery__thumbImg {
    display:      block;
    width:        100%;
    aspect-ratio: 1 / 1;
    object-fit:   cover;
}

.gsm-mapTabStack__block--feed {
    max-width: 100%;
    margin:    0 auto;
}

/* ── Giants-Kartenbild: dunkle JPEG-Vignette optisch abschwächen ─────────── */
.gsm-serverMapWrap {
    max-width:     100%;
    margin:        0 auto;
    border-radius: var(--gsm-card-radius-sm);
    overflow:      hidden;
    border:        1px solid var(--wcfContentBorderColor);
    background:    var(--wcfTabularBoxBackground);
    box-shadow:    var(--gsm-card-shadow);
    text-align:    center;
}

.gsm-serverMapWrap--tab {
    max-width:        100%;
    border-radius:    18px;
    border:           1px solid color-mix(in srgb, var(--wcfContentBorderColor) 85%, transparent);
    background:       color-mix(in srgb, var(--wcfTabularBoxBackground) 92%, #0f172a);
    box-shadow:       0 14px 42px rgba(15, 23, 42, .22);
    overflow:         hidden;
}

.gsm-serverMapWrap--tab .gsm-serverMapImage {
    display:         block;
    width:           100%;
    height:          auto;
    max-height:      min(42vh, 440px);
    object-fit:      contain;
    margin:          0 auto;
    transform:       scale(1.055);
    transform-origin: center center;
}

.gsm-serverMapImage {
    display:    block;
    width:      100%;
    height:     auto;
    max-height: min(38vh, 380px);
    object-fit: contain;
    margin:     0 auto;
}

.gsm-mapZoomTrigger {
    display:    block;
    width:      100%;
    padding:    0;
    margin:     0;
    border:     none;
    background: transparent;
    cursor:     zoom-in;
    text-align: center;
    position:   relative;
    color:      inherit;
    font:       inherit;
}

.gsm-mapZoomTrigger:focus-visible {
    outline:        2px solid color-mix(in srgb, var(--wcfColor) 70%, transparent);
    outline-offset: 3px;
}

.gsm-mapGallery__main .gsm-mapZoomTrigger {
    border-radius: var(--gsm-card-radius-sm);
    overflow:      hidden;
}

.gsm-mapLightbox {
    width:      100vw;
    height:     100vh;
    max-width:  100vw;
    max-height: 100vh;
    padding:    0;
    margin:     0;
    border:     none;
    background: transparent;
    overflow:   hidden;
}

.gsm-mapLightbox::backdrop {
    background:     rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(4px);
}

.gsm-mapLightbox__chrome {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    padding:         56px 20px 20px;
    box-sizing:      border-box;
}

.gsm-mapLightbox__img {
    display:       block;
    max-width:     min(96vw, 1600px);
    max-height:    92vh;
    width:         auto;
    height:        auto;
    object-fit:    contain;
    border-radius: 10px;
    box-shadow:    0 24px 64px rgba(0, 0, 0, 0.48);
}

.gsm-mapLightbox__close {
    position:        fixed;
    top:             16px;
    right:           16px;
    z-index:         2;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           42px;
    height:          42px;
    border-radius:   12px;
    border:          1px solid rgba(255, 255, 255, 0.22);
    background:      rgba(15, 23, 42, 0.72);
    color:           #fff;
    cursor:          pointer;
    transition:      background 0.15s ease, transform 0.12s ease;
}

.gsm-mapLightbox__close:hover {
    background: rgba(15, 23, 42, 0.92);
}

.gsm-mapLightbox__close:active {
    transform: scale(0.96);
}

/* ── Livekarte: Call-to-Action ───────────────────────────────────────────── */
.gsm-livemapOpen {
    display:         flex;
    justify-content: center;
    padding-top:     2px;
}

.gsm-livemapOpen__btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              10px;
    width:            min(100%, 360px);
    padding:          12px 24px;
    border-radius:    9999px;
    font-weight:      600;
    letter-spacing:   0.01em;
    border:           1px solid color-mix(in srgb, var(--wcfColor) 55%, transparent);
    box-shadow:       0 10px 26px color-mix(in srgb, var(--wcfColor) 22%, transparent);
}

/* ── Server description (overview tab) ─────────────────────────────────── */
.gsm-serverDescription {
    margin-top:    24px;
    padding-top:   20px;
    border-top:    1px solid var(--wcfContentBorderColor, #e5e7eb);
}

.gsm-serverDescription__title {
    margin:      0 0 12px;
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--wcfContentText);
}

.gsm-serverOverviewFooter {
    margin-top:    24px;
    padding-top:   20px;
    border-top:    1px solid var(--wcfContentBorderColor, #e5e7eb);
}

.gsm-serverOverviewFooter .gsm-actionLinks--footer {
    display:         flex;
    flex-direction:  row;
    flex-wrap:       wrap;
    align-items:     stretch;
    justify-content: flex-start;
    gap:             10px;
    margin:          0;
    padding:         0;
}

/* ── Optional action link buttons (Forum / Support / Download + extras) ─ */
.gsm-actionLinks {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    margin-top: 10px;
}

.gsm-actionLinks--header {
    margin-top: 0;
    gap:        6px;
}

.gsm-headerActionLinksItem {
    display:     flex;
    align-items: center;
}

.gsm-actionLinks--row {
    margin-top: 0;
    gap:        6px;
    justify-content: flex-end;
}

/* Aktionslinks: moderne, flache Kontrollen (WCF-Semantik, hell/dunkel automatisch) */
a.gsm-actionLinkBtn {
    position:        relative;
    z-index:         0;
    display:         inline-flex !important;
    align-items:     center;
    justify-content: stretch;
    box-sizing:      border-box;
    width:           auto;
    min-height:      44px;
    padding:         0;
    border-radius:   10px;
    font-size:       0.9rem;
    font-weight:     600;
    line-height:     1.35;
    letter-spacing:    0;
    text-decoration: none !important;
    color:           var(--wcfContentText) !important;
    border:          1px solid var(--wcfContentBorderColor) !important;
    background:      var(--wcfContentContainerBackground) !important;
    box-shadow:      0 1px 0 color-mix(in srgb, var(--wcfContentText) 5%, transparent) !important;
    transition:      border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* Spezifität + nur rgba in box-shadow: color-mix in Schatten kann sonst die ganze Deklaration ungültig machen */
a.gsm-actionLinkBtn:hover,
html body .gsm-actionLinks a.gsm-actionLinkBtn:hover {
    z-index:          2;
    color:            var(--wcfContentText) !important;
    text-decoration:  none !important;
    border-color:     color-mix(in srgb, var(--wcfColor) 42%, var(--wcfContentBorderColor)) !important;
    background:       color-mix(in srgb, var(--wcfColor) 10%, var(--wcfContentContainerBackground)) !important;
    box-shadow:       0 0 0 2px rgba(16, 185, 129, 0.78),
                      0 0 0 4px rgba(16, 185, 129, 0.28),
                      0 0 22px rgba(16, 185, 129, 0.5),
                      0 0 42px rgba(16, 185, 129, 0.24),
                      0 2px 10px rgba(15, 23, 42, 0.1) !important;
}

a.gsm-actionLinkBtn:focus-visible {
    outline:        2px solid var(--wcfColor);
    outline-offset: 2px;
}

.gsm-actionLinkBtn__inner {
    display:         flex;
    align-items:     center;
    gap:             12px;
    width:           100%;
    min-height:      inherit;
    padding:         10px 12px 10px 10px;
    box-sizing:      border-box;
}

.gsm-actionLinkBtn__iconWrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex:            0 0 auto;
    width:           36px;
    height:          36px;
    border-radius:   9px;
    font-size:       0.98rem;
    color:           var(--wcfColor);
    background:      color-mix(in srgb, var(--wcfColor) 14%, var(--wcfContentContainerBackground));
    box-shadow:      none;
}

a.gsm-actionLinkBtn--kind-download .gsm-actionLinkBtn__iconWrap {
    color:      color-mix(in srgb, #22c55e 82%, var(--wcfContentText));
    background: color-mix(in srgb, #22c55e 20%, var(--wcfContentContainerBackground));
}

a.gsm-actionLinkBtn--kind-forum .gsm-actionLinkBtn__iconWrap {
    color:      color-mix(in srgb, #64748b 75%, var(--wcfContentText));
    background: color-mix(in srgb, #64748b 18%, var(--wcfContentContainerBackground));
}

a.gsm-actionLinkBtn--kind-ticket .gsm-actionLinkBtn__iconWrap {
    color:      color-mix(in srgb, #f59e0b 78%, var(--wcfContentText));
    background: color-mix(in srgb, #f59e0b 22%, var(--wcfContentContainerBackground));
}

a.gsm-actionLinkBtn--kind-extra .gsm-actionLinkBtn__iconWrap {
    color:      color-mix(in srgb, #6366f1 78%, var(--wcfContentText));
    background: color-mix(in srgb, #818cf8 20%, var(--wcfContentContainerBackground));
}

.gsm-actionLinkBtn__label {
    flex:        1 1 auto;
    min-width:   0;
    text-align:  left;
    font-weight: 700;
}

.gsm-actionLinkBtn__ext {
    flex:         0 0 auto;
    margin-left: auto;
    opacity:      0.75;
    font-size:    0.85rem;
    color:        var(--wcfContentDimmedText) !important;
}

.gsm-actionLinks--footer .gsm-actionLinkBtn--footer {
    flex:      1 1 auto;
    min-width: min(100%, 120px);
    width:     auto;
    max-width: 100%;
}

.gsm-actionLinks--row .gsm-actionLinkBtn--row {
    min-height: 38px;
    border-radius: 10px;
}

.gsm-actionLinks--row .gsm-actionLinkBtn--row .gsm-actionLinkBtn__inner {
    padding:   6px 10px 6px 8px;
    gap:       8px;
}

.gsm-actionLinks--row .gsm-actionLinkBtn--row .gsm-actionLinkBtn__iconWrap {
    width:      30px;
    height:     30px;
    font-size:  0.88rem;
    border-radius: 8px;
}

.gsm-actionLinks--row .gsm-actionLinkBtn--row .gsm-actionLinkBtn__label {
    font-size: 0.82rem;
    font-weight: 650;
}

/* Aktionsleiste (volle Breite): Fläche wie Sidebar-Panel + Leuchtrand wie Meta-Chips */
.gsm-serverDetail__actions .gsm-actionLinks--footer a.gsm-actionLinkBtn.gsm-actionLinkBtn--footer {
    position:          relative;
    z-index:           0;
    flex:              1 1 auto !important;
    min-width:         min(100%, 120px) !important;
    width:             auto !important;
    max-width:         100% !important;
    min-height:        48px !important;
    justify-content:   stretch !important;
    cursor:            pointer !important;
    border-radius:     14px !important;
    border:            1px solid color-mix(in srgb, var(--wcfColor) 48%, var(--wcfContentBorderColor)) !important;
    background:        var(--wcfContentBackground) !important;
    background-image:  var(--gsm-surface-glass),
                       linear-gradient(160deg, color-mix(in srgb, var(--wcfColor) 8%, transparent) 0%, transparent 52%) !important;
    box-shadow:        0 0 0 1px color-mix(in srgb, var(--wcfColor) 28%, transparent),
                       0 0 22px color-mix(in srgb, var(--wcfColor) 18%, transparent),
                       inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent) !important;
    transition:        border-color 0.2s ease, box-shadow 0.22s ease, background 0.2s ease, transform 0.18s ease !important;
}

.gsm-serverDetail__actions .gsm-actionLinks--footer a.gsm-actionLinkBtn.gsm-actionLinkBtn--footer:hover,
html body .gsm-serverDetail__actions .gsm-actionLinks--footer a.gsm-actionLinkBtn.gsm-actionLinkBtn--footer:hover {
    z-index:          2;
    border-color:     color-mix(in srgb, var(--wcfColor) 68%, var(--wcfContentBorderColor)) !important;
    background-image: var(--gsm-surface-glass),
                      linear-gradient(160deg, color-mix(in srgb, var(--wcfColor) 16%, transparent) 0%, transparent 55%) !important;
    /* Schatten nur mit rgba: vermeidet „ganzer box-shadow ungültig“ wenn color-mix in Schatten scheitert */
    box-shadow:       0 0 0 2px rgba(16, 185, 129, 0.82),
                      0 0 0 4px rgba(16, 185, 129, 0.28),
                      0 0 26px rgba(16, 185, 129, 0.52),
                      0 0 48px rgba(16, 185, 129, 0.22),
                      0 0 0 1px color-mix(in srgb, var(--wcfColor) 42%, transparent),
                      0 0 32px color-mix(in srgb, var(--wcfColor) 28%, transparent),
                      0 10px 26px rgba(15, 23, 42, 0.12),
                      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transform:        translateY(-2px);
}

.gsm-serverDetail__actions .gsm-actionLinks--footer a.gsm-actionLinkBtn.gsm-actionLinkBtn--footer:active {
    transform:  translateY(0);
    box-shadow: inset 0 1px 5px color-mix(in srgb, var(--wcfContentText) 10%, transparent),
                0 0 0 1px color-mix(in srgb, var(--wcfColor) 22%, transparent) !important;
}

.gsm-serverDetail__actions .gsm-actionLinks--footer a.gsm-actionLinkBtn.gsm-actionLinkBtn--footer .gsm-actionLinkBtn__inner {
    flex-direction:   row !important;
    align-items:      center !important;
    justify-content:  flex-start !important;
    gap:              12px !important;
    padding:          10px 14px 10px 12px !important;
    text-align:       left;
}

.gsm-serverDetail__actions .gsm-actionLinks--footer .gsm-actionLinkBtn__iconWrap {
    width:         36px !important;
    height:        36px !important;
    border-radius: 10px !important;
    font-size:     0.98rem !important;
    flex-shrink:   0 !important;
    box-shadow:    inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent) !important;
}

.gsm-serverDetail__actions .gsm-actionLinks--footer .gsm-actionLinkBtn__label {
    flex:          1 1 auto !important;
    min-width:     0 !important;
    font-weight:   600 !important;
    font-size:     0.88rem !important;
    line-height:   1.3 !important;
    text-align:    left !important;
    word-break:    break-word;
    hyphens:       auto;
}

.gsm-serverDetail__actions .gsm-actionLinks--footer .gsm-actionLinkBtn__ext {
    display:     inline-flex !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    opacity:     0.75 !important;
}

/* ── Whitelist: Anträge-Tab (Suche + Liste) ─────────────────────────────── */
.gsm-whitelistRequests {
    margin-top: 0;
}

.gsm-whitelistRequests__title {
    margin:      0 0 8px;
    font-size:   1.1rem;
    font-weight: 700;
}

.gsm-whitelistRequests__intro {
    margin:    0 0 16px;
    color:     var(--wcfContentDimmedText);
    font-size: 0.95rem;
}

.gsm-whitelistSearch {
    margin:        0 0 18px;
    padding:       14px 16px;
    border-radius: var(--gsm-card-radius-sm);
    border:        1px solid var(--wcfContentBorderColor);
    background:    var(--wcfContentContainerBackground);
}

.gsm-whitelistSearch__label {
    display:       block;
    margin-bottom: 6px;
    font-weight:   600;
    font-size:     0.95rem;
}

.gsm-whitelistSearch__row {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    align-items: center;
}

.gsm-whitelistSearch__row .long {
    flex:       1 1 220px;
    min-width:  180px;
}

.gsm-whitelistApplyNotice {
    margin-bottom: 16px;
}

.gsm-whitelistMinecraftHint {
    margin-bottom: 12px;
}

.gsm-whitelistTable--requests {
    margin-top: 4px;
    overflow:   visible;
}

/* Tab-Inhalt / Tab-Container: Dropdown über Tabellenrand hinaus erlauben */
.tabMenuContainer.gsm-detailTabs {
    overflow: visible !important;
}

#whitelistrequests.tabMenuContent {
    overflow: visible !important;
}

.gsm-whitelistTable--requests.table tbody,
.gsm-whitelistTable--requests.table tr {
    overflow: visible;
}

/* Whitelist-Anträge: Drei-Punkte-Menü (<details> — natives Öffnen/Schließen, robust in Tabellen) */
details.gsm-whitelistMenu {
    position:   relative;
    display:    inline-block;
    align-self: flex-start;
}

.gsm-whitelistMenu__toggle {
    list-style:      none;
    min-width:       36px;
    justify-content: center;
    overflow:        visible;
}

.gsm-whitelistMenu__toggle::-webkit-details-marker {
    display: none;
}

/* Klick/Sicht: Icon blockiert keinen Summary-Klick */
.gsm-whitelistMenu__toggle fa-icon,
.gsm-whitelistMenu__item fa-icon {
    pointer-events: none;
}

details.gsm-whitelistMenu:not([open]) > .gsm-whitelistMenu__panel {
    display: none;
}

details.gsm-whitelistMenu[open] > .gsm-whitelistMenu__panel {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    position:       absolute;
    right:          0;
    top:            calc(100% + 4px);
    z-index:        500;
    min-width:      220px;
    padding:        6px;
    border-radius:  var(--gsm-card-radius-sm);
    border:         1px solid var(--wcfContentBorderColor);
    background:     var(--wcfContentContainerBackground);
    color:          var(--wcfContentText);
    box-shadow:     var(--gsm-card-shadow);
}

.gsm-whitelistMenu__hint {
    margin:      0;
    padding:     8px 10px;
    max-width:   280px;
    font-size:   0.85rem;
    line-height: 1.45;
    color:       var(--wcfContentDimmedText);
}

.gsm-whitelistMenu__item {
    display:        flex;
    align-items:    center;
    gap:            8px;
    width:          100%;
    margin:         0;
    padding:        8px 10px;
    border:         0;
    border-radius:  8px;
    background:     transparent;
    color:          var(--wcfContentText);
    font:           inherit;
    font-size:      0.95rem;
    line-height:    1.35;
    text-align:     left;
    cursor:         pointer;
}

.gsm-whitelistMenu__item:hover {
    background: rgba(0, 0, 0, .05);
}

html[data-color-scheme="dark"] .gsm-whitelistMenu__item:hover {
    background: rgba(255, 255, 255, .06);
}

.gsm-whitelistMenu__item--success:hover {
    background: var(--gsm-online-soft);
}

.gsm-whitelistMenu__item--danger:hover {
    background: var(--gsm-offline-soft);
}

/* ==========================================================================
   Final UI Overrides (Tabs / Stats / Sidebar Buttons)
   ========================================================================== */

/* Detail-Tabs: klassische Unterzeile (ohne äußeren Pillen-Kasten), ruhig & gut lesbar */
.gsm-detailTabs {
    margin-bottom:    16px;
    padding:          0 !important;
    border:           none !important;
    border-radius:    0 !important;
    background:       transparent !important;
    box-shadow:       none !important;
    border-bottom:    1px solid var(--wcfContentBorderColor) !important;
}

.gsm-detailTabs--withStats {
    border:           1px solid var(--wcfContentBorderColor) !important;
    border-radius:    8px !important;
    background:       var(--wcfContentBackground) !important;
    border-bottom:    1px solid var(--wcfContentBorderColor) !important;
    overflow:         hidden;
}

.gsm-detailTabs .tabMenu > ul {
    display:       flex;
    flex-wrap:     wrap;
    align-items:   stretch;
    gap:           0 2px !important;
    margin:        0;
    padding:       0;
}

.gsm-detailTabs .tabMenu > ul > li > a {
    display:         inline-flex !important;
    align-items:     center;
    gap:             6px;
    margin:          0 0 -1px 0 !important;
    padding:         10px 14px 12px !important;
    border-radius:   10px 10px 0 0 !important;
    border:          1px solid transparent !important;
    border-bottom:   2px solid transparent !important;
    background:      transparent !important;
    color:           var(--wcfContentDimmedText) !important;
    font-weight:     600 !important;
    font-size:       0.9rem !important;
    line-height:     1.3 !important;
    text-decoration: none !important;
    box-shadow:      none !important;
    transition:      color .15s ease, border-color .15s ease, background .15s ease !important;
}

.gsm-detailTabs .tabMenu > ul > li.active > a {
    color:              var(--wcfContentText) !important;
    border-bottom-color: var(--wcfColor) !important;
    background:         color-mix(in srgb, var(--wcfContentText) 4%, transparent) !important;
}

.gsm-detailTabs .tabMenu > ul > li > a:hover {
    color:        var(--wcfContentText) !important;
    background:   color-mix(in srgb, var(--wcfContentText) 5%, transparent) !important;
    border-color: color-mix(in srgb, var(--wcfContentBorderColor) 70%, transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--wcfColor) 45%, transparent) !important;
}

.gsm-detailTabs .tabMenu > ul > li.active > a:hover {
    border-bottom-color: var(--wcfColor) !important;
}

/* Zähler-Badges in Tabs */
.gsm-detailTabs .tabMenu > ul > li > a .badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       1.35em;
    padding:         0.1em 0.42em;
    border-radius:   6px;
    font-size:       0.72em;
    font-weight:     700;
    line-height:     1.2;
    background:      color-mix(in srgb, var(--wcfColor) 18%, var(--wcfContentContainerBackground));
    color:           var(--wcfContentText);
    border:          1px solid color-mix(in srgb, var(--wcfColor) 24%, var(--wcfContentBorderColor));
}

.gsm-detailTabs .tabMenu > ul > li.active > a .badge {
    background:   color-mix(in srgb, var(--wcfColor) 24%, var(--wcfContentContainerBackground));
    border-color: color-mix(in srgb, var(--wcfColor) 38%, var(--wcfContentBorderColor));
}

/* Stats section visual polish */
.gsm-statsHeader {
    display: flex;
    justify-content: flex-end;
}

.gsm-statsSwitch {
    background: color-mix(in srgb, var(--wcfContentText) 4%, var(--wcfContentBackground)) !important;
    border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 75%, transparent) !important;
    border-radius: 12px !important;
    padding: 4px !important;
}

.gsm-statsSwitch .button {
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--wcfContentDimmedText) !important;
}

.gsm-statsSwitch .button.isActive {
    background: color-mix(in srgb, var(--wcfColor) 20%, var(--wcfContentBackground)) !important;
    border-color: color-mix(in srgb, var(--wcfColor) 40%, var(--wcfContentBorderColor)) !important;
    color: var(--wcfContentText) !important;
}

.gsm-statsCard--accent {
    border-left: 3px solid #22c55e !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22c55e 18%, transparent) !important;
}

.gsm-chartPanel--stats {
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 82%, transparent) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--wcfContentBackground) 92%, var(--wcfContentText)) 0%,
        color-mix(in srgb, var(--wcfTabularBoxBackground) 90%, var(--wcfContentBackground)) 100%
    ) !important;
    padding: 16px 18px 14px !important;
}

.gsm-chartCanvasWrap {
    position: relative;
}

/* Statistik-Diagramme: Plot-Bereich vom Rand absetzen, Achsen besser lesbar */
#statistics .gsm-chartPanel--stats .gsm-chartCanvasWrap {
    margin-top:           4px;
    padding:              6px 6px 2px;
    border-radius:        12px;
    background:           color-mix(in srgb, var(--wcfContentText) 5%, var(--wcfContentBackground));
    border:               1px solid color-mix(in srgb, var(--wcfContentBorderColor) 72%, transparent);
    box-shadow:           inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.gsm-chartTooltip {
    position: absolute;
    z-index: 5;
    min-width: 86px;
    max-width: 140px;
    pointer-events: none;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--wcfColor) 35%, var(--wcfContentBorderColor));
    background: color-mix(in srgb, var(--wcfTabularBoxBackground) 92%, #000);
    color: #e2e8f0;
    font-size: 11px;
    line-height: 1.35;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}

/* Sidebar: Zeilentrenner (Serverbild: img.gsm-serverHeroImage oben) */
.gsm-sidebarFacts__row {
    border-bottom: 1px solid rgba(148, 163, 184, 0.34) !important;
}

/* Adresse kopieren: kompakter Icon-Button, weniger Leerraum neben der Adresse */
.gsm-serverDetail__sidebar button.gsm-copyAddressBtn.button,
button.gsm-copyAddressBtn.button.gsm-sidebarCopyBtn {
    -webkit-appearance: none !important;
    appearance:         none !important;
    display:            inline-flex !important;
    align-items:        center !important;
    justify-content:    center !important;
    flex-shrink:        0 !important;
    min-width:          34px !important;
    min-height:         34px !important;
    width:              34px !important;
    margin:             0 !important;
    padding:            0 !important;
    border-radius:      9px !important;
    font-size:          0.82rem !important;
    border:             1px solid var(--wcfContentBorderColor) !important;
    background:         var(--wcfContentContainerBackground) !important;
    color:              var(--wcfContentText) !important;
    box-shadow:         0 1px 0 color-mix(in srgb, var(--wcfContentText) 6%, transparent) !important;
    cursor:             pointer !important;
    transition:         border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease, transform .12s ease !important;
}

.gsm-serverDetail__sidebar button.gsm-copyAddressBtn.button:hover,
button.gsm-copyAddressBtn.button.gsm-sidebarCopyBtn:hover {
    border-color: color-mix(in srgb, var(--wcfColor) 55%, var(--wcfContentBorderColor)) !important;
    background:   color-mix(in srgb, var(--wcfColor) 14%, var(--wcfContentContainerBackground)) !important;
    color:        var(--wcfContentText) !important;
    box-shadow:   0 2px 10px color-mix(in srgb, var(--wcfColor) 22%, transparent) !important;
    transform:    translateY(-1px);
}

.gsm-serverDetail__sidebar button.gsm-copyAddressBtn.button:active,
button.gsm-copyAddressBtn.button.gsm-sidebarCopyBtn:active {
    transform:  translateY(0);
    box-shadow: inset 0 1px 3px color-mix(in srgb, var(--wcfContentText) 10%, transparent) !important;
}

.gsm-serverDetail__sidebar button.gsm-copyAddressBtn.button:focus-visible,
button.gsm-copyAddressBtn.button.gsm-sidebarCopyBtn:focus-visible {
    outline:        2px solid var(--wcfColor);
    outline-offset: 2px;
}

.gsm-copyAddressTrigger.isCopied {
    border-color: var(--gsm-online-color) !important;
    box-shadow:   0 0 0 2px color-mix(in srgb, var(--gsm-online-color) 35%, transparent) !important;
}

/* Stats cards: smaller + consistent */
.gsm-statsGrid--kpis {
    gap: 12px !important;
}

.gsm-statsGrid--kpis .gsm-statsCard {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 80%, transparent) !important;
    background: color-mix(in srgb, var(--wcfContentBackground) 94%, var(--wcfContentText)) !important;
    box-shadow: none !important;
}

.gsm-statsGrid--kpis .gsm-statsCard__period {
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--wcfContentDimmedText) !important;
}

.gsm-statsGrid--kpis .gsm-statsCard__big {
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--wcfContentText) !important;
}

/* Axis labels a little smaller visually */
.gsm-chartPanel--stats .gsm-chartPanel__canvas {
    image-rendering: auto;
}

/* KPI cards: cleaner premium treatment */
.gsm-statsGrid--kpis {
    gap: 14px !important;
}

.gsm-statsGrid--kpis .gsm-statsCard {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, var(--gsm-kpi-accent, var(--wcfColor)) 26%, var(--wcfContentBorderColor)) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--gsm-kpi-accent, var(--wcfColor)) 14%, var(--wcfContentBackground)) 0%,
        color-mix(in srgb, var(--gsm-kpi-accent, var(--wcfColor)) 7%, var(--wcfTabularBoxBackground)) 100%
    ) !important;
    box-shadow: 0 1px 2px rgba(2, 6, 23, .16), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.gsm-statsGrid--kpis .gsm-statsCard::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--gsm-kpi-accent, var(--wcfColor)) 45%, transparent 100%);
    opacity: .8;
}

.gsm-statsGrid--kpis .gsm-statsCard:hover {
    border-color: color-mix(in srgb, var(--gsm-kpi-accent, var(--wcfColor)) 48%, var(--wcfContentBorderColor)) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2, 6, 23, .26), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

.gsm-statsGrid--kpis .gsm-statsCard__period {
    opacity: .9;
    color: color-mix(in srgb, var(--gsm-kpi-accent, var(--wcfColor)) 40%, var(--wcfContentDimmedText)) !important;
}

.gsm-statsGrid--kpis .gsm-statsCard__big {
    letter-spacing: .01em !important;
    font-variant-numeric: tabular-nums;
}

/* 4 KPI cards with individual accents */
.gsm-statsGrid--kpis .gsm-statsCard:nth-child(1) { --gsm-kpi-accent: #22c55e; } /* Aktuell */
.gsm-statsGrid--kpis .gsm-statsCard:nth-child(2) { --gsm-kpi-accent: #38bdf8; }
.gsm-statsGrid--kpis .gsm-statsCard:nth-child(3) { --gsm-kpi-accent: #a78bfa; } /* Ø */
.gsm-statsGrid--kpis .gsm-statsCard:nth-child(4) { --gsm-kpi-accent: #f59e0b; } /* Uptime */

/* Light mode: keep cards colorful but less saturated */
html[data-color-scheme="light"] .gsm-statsGrid--kpis .gsm-statsCard {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--gsm-kpi-accent, var(--wcfColor)) 8%, #ffffff) 0%,
        color-mix(in srgb, var(--gsm-kpi-accent, var(--wcfColor)) 4%, #f8fafc) 100%
    ) !important;
    border-color: color-mix(in srgb, var(--gsm-kpi-accent, var(--wcfColor)) 30%, var(--wcfContentBorderColor)) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

/* Compact and consistent KPI cards (stats top row) */
.gsm-statsGrid--kpis .gsm-statsCard {
    padding: 12px 14px !important;
}

.gsm-statsGrid--kpis .gsm-statsCard__period {
    font-size: 0.66rem !important;
    letter-spacing: .08em !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
}

.gsm-statsGrid--kpis .gsm-statsCard__big {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

/* Whitelist-Antrag: Detail-Dialog (native <dialog>) */
.gsm-whitelistDetailsCell {
    white-space: nowrap;
}

button.gsm-whitelistDetailOpen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gsm-whitelistDetailDialog {
    width: min(760px, calc(100vw - 28px));
    max-height: min(88vh, 920px);
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 88%, var(--wcfContentText));
    border-radius: var(--gsm-card-radius);
    background: var(--wcfContentBackground);
    color: var(--wcfContentText);
    box-shadow: var(--gsm-card-shadow-lg);
    overflow: hidden;
    outline: none;
}

.gsm-whitelistDetailDialog::backdrop {
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(2px);
}

.gsm-whitelistDetailDialog__chrome {
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 920px);
}

.gsm-whitelistDetailDialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--wcfContentBorderColor);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--wcfContentText) 5%, var(--wcfContentBackground)) 0%,
        var(--wcfContentBackground) 100%
    );
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--wcfContentBorderColor) 55%, transparent);
}

.gsm-whitelistDetailDialog__title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.gsm-whitelistDetailDialog__iconClose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--wcfContentBorderColor);
    background: color-mix(in srgb, var(--wcfContentBorderColor) 14%, transparent);
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.gsm-whitelistDetailDialog__iconClose:hover {
    background: color-mix(in srgb, var(--gsm-accent) 12%, var(--wcfContentBackground));
    border-color: color-mix(in srgb, var(--gsm-accent) 35%, var(--wcfContentBorderColor));
}

.gsm-whitelistDetailDialog__iconClose:active {
    transform: scale(0.96);
}

.gsm-whitelistDetailDialog__body {
    padding: 16px 18px 18px;
    overflow: auto;
    background: color-mix(in srgb, var(--wcfContentText) 2.5%, var(--wcfContentBackground));
}

.gsm-whitelistDetailDialog__footer {
    padding: 12px 18px 16px;
    border-top: 1px solid var(--wcfContentBorderColor);
    display: flex;
    justify-content: flex-end;
    background: color-mix(in srgb, var(--wcfContentText) 3.5%, var(--wcfContentBackground));
}

/* Inhalt: Karten pro Abschnitt */
.gsm-whitelistDetail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gsm-whitelistDetailCard {
    border-radius: var(--gsm-card-radius-sm);
    border: 1px solid var(--wcfContentBorderColor);
    background: var(--wcfContentBackground);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--wcfContentBorderColor) 40%, transparent);
    overflow: hidden;
}

.gsm-whitelistDetailCard--staff {
    border-color: color-mix(in srgb, var(--gsm-accent) 22%, var(--wcfContentBorderColor));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gsm-accent) 10%, transparent);
}

.gsm-whitelistDetailCard__head {
    padding: 10px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 70%, transparent);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--gsm-accent) 9%, var(--wcfContentBackground)) 0%,
        var(--wcfContentBackground) 72%
    );
}

.gsm-whitelistDetailCard--staff .gsm-whitelistDetailCard__head {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--gsm-accent) 14%, var(--wcfContentBackground)) 0%,
        var(--wcfContentBackground) 78%
    );
}

.gsm-whitelistDetailCard__title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--wcfContentText) 58%, var(--wcfContentBackground));
}

.gsm-whitelistDetailCard__body {
    padding: 12px 14px 14px;
}

.gsm-whitelistDetail__dl {
    margin: 0;
}

.gsm-whitelistDetail__dl--grid {
    display: grid;
    grid-template-columns: minmax(132px, 32%) 1fr;
    column-gap: 14px;
    row-gap: 2px;
    align-items: start;
}

.gsm-whitelistDetail__dl dt {
    margin: 0;
    padding-top: 12px;
    font-weight: 600;
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--wcfContentText) 62%, var(--wcfContentBackground));
}

.gsm-whitelistDetail__dl--grid dt:first-of-type {
    padding-top: 0;
}

.gsm-whitelistDetail__dl dd {
    margin: 0;
    padding-top: 12px;
    font-size: 0.95rem;
    line-height: 1.45;
    word-break: break-word;
}

.gsm-whitelistDetail__dl--grid dd:first-of-type {
    padding-top: 0;
}

.gsm-whitelistDetail__userLink {
    font-weight: 600;
    text-decoration: none;
}

.gsm-whitelistDetail__userLink:hover {
    text-decoration: underline;
}

.gsm-whitelistDetail__processor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.gsm-whitelistDetail__meta {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--wcfContentText) 48%, var(--wcfContentBackground));
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 65%, transparent);
    background: color-mix(in srgb, var(--wcfContentBorderColor) 12%, transparent);
}

.gsm-whitelistDetail__metaLink {
    text-decoration: none;
}

.gsm-whitelistDetail__metaLink:hover .gsm-whitelistDetail__meta {
    border-color: color-mix(in srgb, var(--gsm-accent) 40%, var(--wcfContentBorderColor));
    color: color-mix(in srgb, var(--wcfContentText) 72%, var(--wcfContentBackground));
}

.gsm-whitelistDetail__userMissing {
    font-size: 0.9rem;
    font-style: italic;
    color: color-mix(in srgb, var(--wcfContentText) 52%, var(--wcfContentBackground));
}

.gsm-whitelistDetail__multiline {
    white-space: pre-wrap;
}

.gsm-whitelistDetail__nestedWrap {
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 80%, transparent);
    background: color-mix(in srgb, var(--wcfContentText) 3.5%, var(--wcfContentBackground));
}

.gsm-whitelistDetail__nestedDl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(100px, 34%) 1fr;
    column-gap: 10px;
    row-gap: 0;
}

.gsm-whitelistDetail__nestedDl dt {
    margin: 0;
    padding-top: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--wcfContentText) 55%, var(--wcfContentBackground));
}

.gsm-whitelistDetail__nestedDl dd {
    margin: 0;
    padding-top: 8px;
    font-size: 0.9rem;
}

.gsm-whitelistDetail__nestedDl dt:first-of-type,
.gsm-whitelistDetail__nestedDl dd:first-of-type {
    padding-top: 0;
}

.gsm-whitelistDetail__code {
    display: inline-block;
    max-width: 100%;
    font-size: 0.88rem;
    word-break: break-word;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 70%, transparent);
    background: color-mix(in srgb, var(--wcfContentText) 4%, var(--wcfContentBackground));
}

@media (max-width: 540px) {
    .gsm-whitelistDetail__dl--grid {
        grid-template-columns: 1fr;
    }

    .gsm-whitelistDetail__dl--grid dt {
        padding-top: 14px;
    }

    .gsm-whitelistDetail__dl--grid dd {
        padding-top: 4px;
    }

    .gsm-whitelistDetail__dl--grid dt:first-of-type {
        padding-top: 0;
    }

    .gsm-whitelistDetail__nestedDl {
        grid-template-columns: 1fr;
    }

    .gsm-whitelistDetail__nestedDl dt {
        padding-top: 10px;
    }

    .gsm-whitelistDetail__nestedDl dd {
        padding-top: 2px;
    }
}

/* ── BBCode / Media-Provider: eingebettete Server-Karte (Forum, Artikel, …) ─ */
.gsm-serverCard--embed {
    position:     relative;
    max-width:    min(100%, 420px);
    margin:       10px 0;
    min-height:   320px;
    overflow:     hidden;
}

.gsm-serverCard--embed .gsm-serverCard__inner {
    position:   relative;
    min-height: 320px;
    height:     100%;
    padding:    0;
}

.gsm-serverCard--embed .gsm-serverCard__media {
    position: absolute;
    inset:    0;
    z-index:  0;
}

.gsm-serverCard--embed .gsm-serverCard__cover,
.gsm-serverCard--embed .gsm-serverCard__cover--empty {
    width:      100%;
    height:     100%;
    min-height: 320px;
    object-fit: cover;
}

/* Verdunkelung unten – weicher Übergang zum Dock */
.gsm-serverCard--embed .gsm-serverCard__inner::after {
    content:        '';
    position:       absolute;
    left:           0;
    right:          0;
    bottom:         0;
    height:         28%;
    z-index:        1;
    pointer-events: none;
    background:     linear-gradient(
        to top,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0.08) 55%,
        rgba(0, 0, 0, 0) 100%
    );
}

.gsm-serverCard--embed .gsm-serverCard__embedStack {
    position:        absolute;
    left:            0;
    right:           0;
    bottom:          0;
    z-index:         3;
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
}

.gsm-serverCard--embed .gsm-serverCard__embedGameOverlay {
    width:           100%;
    padding:         0 12px 8px;
    display:         flex;
    justify-content: flex-start;
    pointer-events:  none;
}

.gsm-serverCard--embed .gsm-metaBadge--embedOverlay {
    pointer-events:  auto;
    padding:         4px 10px;
    font-size:       0.75rem;
    background:      rgba(8, 11, 18, 0.58) !important;
    border-color:    rgba(255, 255, 255, 0.2) !important;
    color:           rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:      0 2px 10px rgba(0, 0, 0, 0.22) !important;
}

/* Milchglas-Dock unten – leicht, wie Karten-Ansicht */
.gsm-serverCard--embed .gsm-serverCard__dock {
    position:        relative;
    left:            auto;
    right:           auto;
    bottom:          auto;
    z-index:         3;
    width:           100%;
    padding:         10px 12px 10px;
    display:         grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap:         6px;
    align-items:     start;
    justify-items:   start;
    text-align:      left;
    background:      linear-gradient(180deg, rgba(10, 14, 22, 0.36) 0%, rgba(6, 9, 15, 0.52) 100%);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border-top:      1px solid rgba(255, 255, 255, 0.14);
}

.gsm-serverCard--embed .gsm-serverCard__header {
    position:        absolute;
    top:             0;
    left:            0;
    right:           0;
    margin:          0;
    padding:         8px 10px;
    z-index:         4;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
}

.gsm-serverCard--embed .gsm-serverCard__embedCornerIcon {
    flex-shrink:     0;
    width:           56px;
    height:          56px;
    object-fit:      contain;
    padding:         5px;
    border-radius:   10px;
    background:      rgba(8, 11, 18, 0.82);
    border:          1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
}

.gsm-serverCard--embed .gsm-serverCard__embedCornerIcon--placeholder {
    display:    block;
    width:      56px;
    height:     56px;
    visibility: hidden;
}

.gsm-serverCard--embed .gsm-serverCard__embedTitle {
    width:       100%;
    text-align:  left;
}

.gsm-serverCard--embed .gsm-metaBadge--embed:not(.gsm-metaBadge--embedOverlay),
.gsm-serverCard--embed .gsm-metaBadge--game.gsm-metaBadge--embed:not(.gsm-metaBadge--embedOverlay) {
    display:         inline-flex !important;
    align-items:     center;
    justify-content: flex-start;
    min-width:       0;
    max-width:       100%;
    margin:          0;
    padding:         3px 8px;
    font-size:       0.75rem;
    font-weight:     700;
    line-height:     1.2;
    background:      rgba(0, 0, 0, 0.35) !important;
    border-color:    rgba(255, 255, 255, 0.16) !important;
    color:           rgba(255, 255, 255, 0.96) !important;
    box-shadow:      none !important;
}

.gsm-serverCard--embed .gsm-metaBadge__label {
    overflow:      hidden;
    text-overflow: ellipsis;
}

.gsm-serverCard--embed .gsm-statusBadge {
    flex-shrink:     0;
    padding:         3px 8px;
    border-radius:   999px;
    font-size:       0.68rem;
    font-weight:     700;
    line-height:     1.1;
    backdrop-filter: blur(8px);
}

.gsm-serverCard--embed .gsm-statusBadge--online {
    background: rgba(4, 120, 87, 0.98);
    color:      #fff;
    border:     1px solid rgba(255, 255, 255, 0.4);
}

.gsm-serverCard--embed .gsm-statusBadge--offline {
    background: rgba(185, 28, 28, 0.94);
    color:      #fff;
    border:     1px solid rgba(255, 255, 255, 0.28);
}

.gsm-serverCard--embed .gsm-statusBadge--maintenance {
    background: rgba(180, 83, 9, 0.94);
    color:      #fff;
    border:     1px solid rgba(255, 255, 255, 0.28);
}

.gsm-serverCard--embed .gsm-statusBadge--restart {
    background: rgba(109, 40, 217, 0.94);
    color:      #fff;
    border:     1px solid rgba(255, 255, 255, 0.28);
}

.gsm-serverCard--embed .gsm-serverCard__embedTitle,
.gsm-serverCard--embed .gsm-serverCard__title,
.gsm-serverCard--embed .gsm-serverCard__titleLink,
.gsm-serverCard--embed .gsm-serverCard__fieldLabel,
.gsm-serverCard--embed .gsm-serverCard__fieldValue,
.gsm-serverCard--embed .gsm-serverCard__address,
.gsm-serverCard--embed .gsm-serverCard__joinBtn,
.gsm-serverCard--embed .gsm-serverCard__offlineHint,
.gsm-serverCard--embed .gsm-playerBar__label {
    color:       #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.gsm-serverCard--embed .gsm-serverCard__embedTitle,
.gsm-serverCard--embed .gsm-serverCard__title,
.gsm-serverCard--embed h3.gsm-serverCard__title {
    font-size:     1.08rem;
    font-weight:   700;
    line-height:   1.2;
    margin:        0 !important;
    padding:       0 !important;
}

.gsm-serverCard--embed .gsm-serverCard__titleLink {
    margin:      0 !important;
    padding:     0 !important;
    line-height: inherit;
    display:     block;
    text-align:  left;
}

.gsm-serverCard--embed .gsm-serverCard__dockBody {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            6px;
    width:          100%;
}

.gsm-serverCard--embed .gsm-serverCard__field {
    background:  rgba(0, 0, 0, 0.22);
    border:      1px solid rgba(255, 255, 255, 0.08);
    font-size:   0.7rem;
    padding:     2px 5px;
    margin:      1px 0 0;
    line-height: 1.1;
}

.gsm-serverCard--embed .gsm-playerBar {
    width:       100%;
    margin:      0;
    line-height: 1.2;
}

.gsm-serverCard--embed .gsm-playerBar__label {
    display:     flex;
    align-items: center;
    gap:         6px;
    margin:      0 0 4px;
    font-size:   0.78rem;
    line-height: 1.2;
}

.gsm-serverCard--embed .gsm-playerBar__track {
    height:     3px;
    background: rgba(255, 255, 255, 0.2);
    border:     0;
}

.gsm-serverCard--embed .gsm-playerBar__fill {
    background: linear-gradient(90deg, rgba(5, 150, 105, 0.95), rgba(52, 211, 153, 0.95));
}

.gsm-serverCard--embed .gsm-serverCard__offlineHint {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    width:       100%;
    margin:      0;
    padding:     0;
    font-size:   0.78rem;
    line-height: 1.25;
    text-align:  left;
}

.gsm-serverCard--embed .gsm-serverCard__footer {
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    gap:             10px;
    width:           100%;
    margin:          0;
    margin-left:     0 !important;
    margin-right:    0 !important;
    padding:         8px 0 0;
    padding-left:    0 !important;
    padding-right:   0 !important;
    border-top:      1px solid rgba(255, 255, 255, 0.12);
    font-size:       0.78rem;
    line-height:     1.25;
}

.gsm-serverCard--embed .gsm-serverCard__address {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    min-width:   0;
    flex:        1 1 auto;
    text-align:  left;
}

.gsm-serverCard--embed .gsm-serverCard__joinBtn {
    font-size: 0.68rem;
}

.gsm-serverCard--embed:hover {
    transform: none;
}

.messageText .gsm-serverCard--embed,
.messageSidebarMessageGroup .gsm-serverCard--embed,
.contentItem .gsm-serverCard--embed {
    clear: both;
}

.messageText .gsm-serverCard--embed h3,
.messageText .gsm-serverCard--embed .gsm-serverCard__title,
.messageText .gsm-serverCard--embed .gsm-serverCard__titleLink {
    margin:  0 !important;
    padding: 0 !important;
}

/* Redesign final layer: keep the new fleet UI above legacy package styling. */
.gsm-dashboard > .gsm-dashboardKpi,
.gsm-dashboard > .gsm-dashboardMain {
    display: none !important;
}

.gsm-serverCard {
    border-radius: 8px !important;
}

.gsm-serverCard__media {
    order: -2;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--wcfContentContainerBackground);
}

.gsm-serverCard__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gsm-serverCard__cover--empty {
    display: grid;
    place-items: center;
    color: var(--wcfContentDimmedText);
    font-size: 2rem;
}

.gsm-serverHero,
.gsm-fleetOverview,
.gsm-commandDashboard,
.gsm-commandPanel {
    border-radius: 8px !important;
}

/* 2026 second pass: flat WSC-native layout, no rounded AI boxes, no glow strips. */
.gsm-fleetOverview,
.gsm-fleetWorkbench,
.gsm-commandDashboard,
.gsm-commandPanel,
.gsm-categorySection,
.gsm-serverCard,
.gsm-serverHero,
.gsm-serverSearch__field,
.gsm-statusSegments,
.gsm-statusSegments__item,
.gsm-categoryNav__item,
.gsm-spotlightServer,
.gsm-serverRow,
.gsm-tableScroller {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.gsm-serverCard::before,
.gsm-commandDashboard__meter::before {
    display: none !important;
}

.gsm-fleetWorkbench {
    padding: 0;
    border-width: 0;
    background: transparent;
    width: 100%;
}

.gsm-statusSegments {
    border-width: 0;
    background: var(--wcfContentContainerBackground);
}

.gsm-statusSegments__item {
    border-bottom: 2px solid transparent;
    background: transparent;
}

.gsm-statusSegments__item + .gsm-statusSegments__item {
    border-left: 0;
}

.gsm-statusSegments__item.isActive {
    color: var(--wcfLinkColor);
    background: transparent;
    border-bottom-color: var(--wcfLinkColor);
}

.gsm-statusSegments__item b {
    margin-left: 6px;
    font-weight: 600;
}

.gsm-categoryNav {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 12px;
}

.gsm-categoryNav__item {
    padding: 12px 0;
    border-width: 0 0 1px;
    background: transparent;
}

.gsm-categoryNav__item.isActive {
    box-shadow: none !important;
    border-color: var(--wcfLinkColor);
}

.gsm-categorySection {
    padding: 0;
    border-width: 0;
    background: transparent;
}

.gsm-categorySection__head {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wcfContentBorderColor);
}

.gsm-spotlightDeck {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: transparent;
}

.gsm-spotlightDeck--stack .gsm-spotlightServer {
    width: 100%;
    min-height: clamp(280px, 32vw, 420px);
}

.gsm-spotlightServer {
    position: relative;
    min-height: 310px;
    overflow: hidden;
    color: var(--wcfContentText);
    background: var(--wcfContentContainerBackground);
    text-decoration: none;
}

.gsm-spotlightServer__stretchLink {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.gsm-spotlightServer a.gsm-spotlightServer__joinBtn,
.gsm-spotlightServer__joinBtn {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-weight: 650;
    font-size: inherit;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--wcfBorderRadius, 4px);
    border: 1px solid rgba(255, 255, 255, .32);
    background-color: rgba(255, 255, 255, .12);
    background-image: var(--gsm-surface-glass);
    color: #fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.gsm-spotlightServer a.gsm-spotlightServer__joinBtn:hover,
.gsm-spotlightServer a.gsm-spotlightServer__joinBtn:focus-visible,
.gsm-spotlightServer__joinBtn:hover,
.gsm-spotlightServer__joinBtn:focus-visible {
    background-color: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .48);
    color: #fff;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .28);
    transform: translateY(-1px);
}

.gsm-spotlightServer__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gsm-spotlightServer__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.08) 0%,
        transparent 32%,
        transparent 55%,
        color-mix(in srgb, var(--wcfContentBackground) 35%, transparent) 100%
    );
}

.gsm-spotlightServer__panel {
    position:        absolute;
    top:             0;
    bottom:          0;
    left:            0;
    width:           clamp(210px, 26%, 360px);
    z-index:         1;
    pointer-events:  none;
    background:      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.48) 0%,
        rgba(8, 11, 18, 0.28) 72%,
        rgba(8, 11, 18, 0) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.gsm-spotlightServer__body {
    position:        absolute;
    top:             0;
    bottom:          0;
    left:            0;
    z-index:         2;
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    gap:             16px;
    width:           clamp(210px, 26%, 360px);
    min-height:      0;
    padding:         22px 24px;
    box-sizing:      border-box;
    pointer-events:  none;
}

.gsm-spotlightServer__head {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    gap:             12px;
}

.gsm-spotlightServer__headRow {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         12px;
}

.gsm-spotlightServer__icon {
    width:         56px;
    height:        56px;
    max-width:     56px;
    max-height:    56px;
    object-fit:    contain;
    border-radius: 10px;
    filter:        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.gsm-spotlightServer__foot {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-top:     auto;
}

.gsm-spotlightServer__body,
.gsm-spotlightServer__body strong,
.gsm-spotlightServer__gameName,
.gsm-spotlightServer__facts span {
    color:       #fff;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.gsm-spotlightServer__gameName {
    opacity:   0.88;
    font-size: 0.9rem;
}

.gsm-spotlightServer__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
}

.gsm-spotlightServer__head .gsm-statusBadge {
    padding:         5px 11px;
    border-radius:   999px;
    font-size:       0.75rem;
    font-weight:     700;
    letter-spacing:  0.02em;
    box-shadow:      0 2px 10px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
}

.gsm-spotlightServer__head .gsm-statusBadge--online {
    background: rgba(4, 120, 87, 0.82);
    color:      #fff;
    border:     1px solid rgba(255, 255, 255, 0.28);
}

.gsm-spotlightServer__head .gsm-statusBadge--offline {
    background: rgba(71, 85, 105, 0.84);
    color:      #fff;
    border:     1px solid rgba(255, 255, 255, 0.22);
}

.gsm-spotlightServer__head .gsm-statusBadge--maintenance {
    background: rgba(180, 83, 9, 0.84);
    color:      #fff;
    border:     1px solid rgba(255, 255, 255, 0.24);
}

.gsm-spotlightServer__head .gsm-statusBadge--restart {
    background: rgba(109, 40, 217, 0.86);
    color:      #fff;
    border:     1px solid rgba(255, 255, 255, 0.26);
}

.gsm-spotlightServer strong {
    font-size: 1.45rem;
    line-height: 1.15;
}

.gsm-statusPip {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--wcfContentDimmedText);
}

.gsm-statusPip.isOnline {
    background: var(--wcfStatusSuccess, #008a00);
}

.gsm-statusPip.isOffline {
    background: var(--wcfStatusError, #c00);
}

.gsm-statusPip.isRestart {
    background: var(--gsm-restart-color);
}

.gsm-statusPip.isMaintenance {
    background: var(--gsm-maintenance-color);
}

.gsm-tableScroller {
    overflow-x: auto;
    border: 1px solid var(--wcfContentBorderColor);
    border-width: 1px 0;
}

.gsm-serverTable {
    margin-bottom: 0;
}

.gsm-serverCard {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    border: 0 !important;
    background: var(--wcfContentContainerBackground);
}

.gsm-serverCard__inner {
    min-height: 360px;
}

.gsm-serverCard__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    z-index: 0;
}

.gsm-serverCard__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Leichter Verlauf — Text sitzt im Dock-Panel, Bild bleibt oben frei */
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.08) 0%,
        rgba(0, 0, 0, 0) 38%,
        rgba(0, 0, 0, 0.18) 72%,
        rgba(0, 0, 0, 0.42) 100%
    );
}

.gsm-serverCard__header,
.gsm-serverCard__body,
.gsm-serverCard__dock,
.gsm-serverCard__footer {
    position: relative;
    z-index: 1;
}

.gsm-serverCard:not(.gsm-serverCard--embed) > .gsm-serverCard__header {
    margin-top: auto;
}

/* Karten-Ansicht: Bild oben, halbtransparentes Dock unten, einheitliche Höhe */
.gsm-serverGrid--cards {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   24px;
    margin-top:            12px;
    background:            transparent;
    align-items:           stretch;
}

.gsm-serverGrid--cards .gsm-serverCard {
    display:        flex;
    flex-direction: column;
    height:         100%;
    min-height:     420px;
}

.gsm-serverGrid--cards .gsm-serverCard__inner {
    display:         flex;
    flex-direction:  column;
    flex:            1;
    justify-content: flex-end;
    padding:         0;
    min-height:      420px;
    height:          100%;
}

.gsm-serverGrid--cards .gsm-serverCard__stretchLink {
    z-index: 1;
}

.gsm-serverGrid--cards .gsm-serverCard__header {
    position:        absolute;
    top:             0;
    left:            0;
    right:           0;
    margin:          0;
    padding:         14px 16px;
    z-index:         3;
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             10px;
}

.gsm-serverGrid--cards .gsm-serverCard__dock,
.gsm-serverGrid--cards .gsm-serverCard__joinBtn {
    z-index: 3;
}

.gsm-serverGrid--cards .gsm-serverCard__headerBrand {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
    min-width:   0;
}

.gsm-serverGrid--cards .gsm-serverCard__gameBadge {
    flex-shrink:     0;
    padding:         5px 7px;
    border-radius:   12px;
    background:      rgba(8, 11, 18, 0.58);
    border:          1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
}

.gsm-serverGrid--cards .gsm-metaBadge--cardHeader {
    background:      rgba(8, 11, 18, 0.58);
    border-color:    rgba(255, 255, 255, 0.18);
    color:           rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    max-width:       100%;
}

.gsm-serverGrid--cards .gsm-gameBadge {
    background: transparent;
    border:     0;
}

.gsm-serverGrid--cards .gsm-gameBadgeText {
    background: transparent;
    border:     0;
    color:      rgba(255, 255, 255, 0.95);
    padding:    0;
    min-height: auto;
}

.gsm-serverGrid--cards .gsm-statusBadge {
    flex-shrink:     0;
    padding:         5px 11px;
    border-radius:   999px;
    font-size:       0.75rem;
    font-weight:     700;
    letter-spacing:  0.02em;
    box-shadow:      0 2px 10px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
}

.gsm-serverGrid--cards .gsm-statusBadge--online {
    background: rgba(4, 120, 87, 0.82);
    color:      #fff;
    border:     1px solid rgba(255, 255, 255, 0.28);
}

.gsm-serverGrid--cards .gsm-statusBadge--offline {
    background: rgba(71, 85, 105, 0.84);
    color:      #fff;
    border:     1px solid rgba(255, 255, 255, 0.22);
}

.gsm-serverGrid--cards .gsm-statusBadge--maintenance {
    background: rgba(180, 83, 9, 0.84);
    color:      #fff;
    border:     1px solid rgba(255, 255, 255, 0.24);
}

.gsm-serverGrid--cards .gsm-statusBadge--restart {
    background: rgba(109, 40, 217, 0.86);
    color:      #fff;
    border:     1px solid rgba(255, 255, 255, 0.26);
}

.gsm-serverGrid--cards .gsm-serverCard__dock {
    margin-top:      auto;
    width:           100%;
    min-height:      112px;
    max-height:      min(72%, 360px);
    padding:         11px 14px 10px;
    display:         flex;
    flex-direction:  column;
    gap:             2px;
    overflow:        hidden;
    background:      linear-gradient(180deg, rgba(10, 14, 22, 0.34) 0%, rgba(6, 9, 15, 0.48) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top:      1px solid rgba(255, 255, 255, 0.1);
}

.gsm-serverGrid--cards .gsm-serverCard__dockBody {
    flex:                1 1 auto;
    min-height:          0;
    overflow-y:          auto;
    overscroll-behavior: contain;
    scrollbar-width:     thin;
    padding-right:       2px;
}

.gsm-serverGrid--cards .gsm-serverCard__titleBlock {
    flex-shrink: 0;
}

.gsm-serverGrid--cards .gsm-serverCard__titleLink {
    color: #fff;
}

.gsm-serverGrid--cards .gsm-serverCard__title,
.gsm-serverGrid--cards .gsm-serverCard__fieldLabel,
.gsm-serverGrid--cards .gsm-serverCard__fieldValue,
.gsm-serverGrid--cards .gsm-serverCard__address,
.gsm-serverGrid--cards .gsm-serverCard__joinBtn,
.gsm-serverGrid--cards .gsm-serverCard__joinHint,
.gsm-serverGrid--cards .gsm-serverCard__offlineHint,
.gsm-serverGrid--cards .gsm-serverCard__shortDesc,
.gsm-serverGrid--cards .gsm-playerBar__label {
    color:       #fff;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}

.gsm-serverGrid--cards .gsm-serverCard__title {
    font-size:   1.05rem;
    font-weight: 700;
    line-height: 1.2;
    margin:      0 0 2px;
}

.gsm-serverGrid--cards .gsm-serverCard__shortDesc,
.gsm-serverGrid--cards .gsm-serverCard__field,
.gsm-serverGrid--cards .gsm-serverCard__address,
.gsm-serverGrid--cards .gsm-serverCard__joinBtn,
.gsm-serverGrid--cards .gsm-serverCard__joinHint,
.gsm-serverGrid--cards .gsm-serverCard__offlineHint {
    color: rgba(255, 255, 255, 0.92);
}

.gsm-serverGrid--cards .gsm-serverCard__shortDesc {
    margin:    0;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.gsm-serverGrid--cards .gsm-serverCard__field {
    background:    rgba(0, 0, 0, 0.18);
    border:        1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    margin-top:    4px;
    padding:       6px 8px;
    font-size:     0.8125rem;
}

.gsm-serverGrid--cards .gsm-playerBar {
    display:       block;
    margin-top:    0;
    padding-top:   6px;
}

.gsm-serverGrid--cards .gsm-playerBar__label {
    display:       flex;
    margin-bottom: 4px;
    font-size:     0.78rem;
    font-weight:   600;
}

.gsm-serverGrid--cards .gsm-playerBar__track {
    height:        5px;
    border-radius: 999px;
    background:    rgba(255, 255, 255, 0.2);
    border:        1px solid rgba(255, 255, 255, 0.14);
}

.gsm-serverGrid--cards .gsm-playerBar__fill {
    border-radius: 999px;
    background:    linear-gradient(90deg, rgba(5, 150, 105, 0.95), rgba(52, 211, 153, 0.95));
}

.gsm-serverGrid--cards .gsm-serverCard__footer {
    margin-top:    7px;
    padding-top:   7px;
    border-top:    1px solid rgba(255, 255, 255, 0.14);
    background:    transparent;
    border-radius: 0;
    flex-shrink:   0;
    font-size:     0.78rem;
}

.gsm-serverGrid--cards .gsm-serverCard__address,
.gsm-serverGrid--cards .gsm-serverCard__joinBtn,
.gsm-serverGrid--cards .gsm-serverCard__joinHint {
    font-size: 0.78rem;
}

.gsm-serverGrid--cards .gsm-serverCard__joinBtn,
.gsm-serverGrid--cards .gsm-serverCard__joinHint {
    background:   rgba(0, 0, 0, 0.22);
    border:       1px solid rgba(255, 255, 255, 0.14);
    color:        #fff;
    padding:      4px 9px;
}

.gsm-serverGrid--cards .gsm-serverCard__joinBtn:hover {
    color:        #fff;
    background:   rgba(0, 0, 0, 0.34);
}

.gsm-serverGrid--cards .gsm-serverCard__offlineHint {
    margin:      auto 0 0;
    padding-top: 6px;
    font-size:   0.78rem;
}

@media (max-width: 1280px) {
    .gsm-serverGrid--cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .gsm-serverGrid--cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gsm-serverGrid {
    gap: 20px;
    background: transparent;
}

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

.gsm-playerBar__label {
    display:         flex;
    align-items:     center;
    gap:             6px;
    margin:          0;
    font-size:       0.8125rem;
    font-weight:     600;
    color:           var(--wcfContentText);
    white-space:     nowrap;
}

.gsm-playerBar__track {
    height:        4px;
    border-radius: 0;
    background:    color-mix(in srgb, var(--wcfContentBorderColor) 80%, transparent);
    border:        0;
    box-shadow:    none;
    overflow:      hidden;
}

.gsm-playerBar__fill {
    display:       block;
    height:        100%;
    min-width:     0;
    border-radius: 0;
    background:    var(--wcfStatusSuccess, #008a00);
    box-shadow:    none;
    transition:    width .35s ease;
}

.gsm-serverCard--offline .gsm-playerBar__fill {
    background: var(--wcfContentDimmedText);
}

.gsm-serverHero {
    min-height: 340px;
    border-width: 0 0 1px;
}

.gsm-serverHero__content {
    min-height: 340px;
}

.gsm-commandDashboard {
    padding: 0;
    border: 0;
    background: transparent;
}

.gsm-commandDashboard__head {
    min-height: 220px;
    padding: 22px 0;
    border-bottom: 1px solid var(--wcfContentBorderColor);
}

.gsm-commandDashboard__title {
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: .95;
}

.gsm-commandDashboard__meter {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    text-align: right;
}

.gsm-commandDashboard__meter span {
    display: block;
    margin: 0;
    font-size: clamp(2.5rem, 7vw, 6rem);
    line-height: .9;
}

.gsm-commandDashboard__meter small {
    display: block;
    margin: 6px 0 0;
}

.gsm-commandPips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--wcfContentBorderColor);
}

.gsm-commandPip {
    min-height: 96px;
    border: 0;
    background: var(--wcfContentBackground);
}

.gsm-commandGrid {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr);
    gap: 1px;
    background: var(--wcfContentBorderColor);
}

.gsm-commandPanel {
    border: 0;
    background: var(--wcfContentBackground);
}

.gsm-categoryMatrix__row,
.gsm-attentionList__item {
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid var(--wcfContentBorderColor);
}

.gsm-categoryMatrix__pips i {
    border-radius: 0;
}

.gsm-categoryMatrix__fill,
.gsm-categoryMatrix__fill span {
    border-radius: 0;
}

.gsm-statusBadge,
.gsm-metaBadge,
.gsm-gameBadge,
.gsm-gameBadgeSmall {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.gsm-statusBadge--online,
.gsm-statusBadge--offline,
.gsm-statusBadge--maintenance,
.gsm-statusBadge--restart {
    border-radius: 0 !important;
}

.gsm-statusBadge--online {
    background: var(--gsm-online-soft) !important;
    color:      var(--gsm-online-color) !important;
    border:     1px solid color-mix(in srgb, var(--gsm-online-color) 50%, transparent) !important;
}

.gsm-statusBadge--offline {
    background: var(--gsm-offline-soft) !important;
    color:      var(--gsm-offline-color) !important;
    border:     1px solid color-mix(in srgb, var(--gsm-offline-color) 48%, transparent) !important;
}

.gsm-statusBadge--maintenance {
    background: var(--gsm-maintenance-soft) !important;
    color:      var(--gsm-maintenance-color) !important;
    border:     1px solid color-mix(in srgb, var(--gsm-maintenance-color) 52%, transparent) !important;
}

.gsm-statusBadge--restart {
    background: var(--gsm-restart-soft) !important;
    color:      var(--gsm-restart-color) !important;
    border:     1px solid color-mix(in srgb, var(--gsm-restart-color) 48%, transparent) !important;
}

.gsm-statusBadge--pending,
.gsm-metaBadge--game,
.gsm-metaBadge--category {
    background: var(--wcfContentContainerBackground) !important;
    border-color: var(--wcfContentBorderColor) !important;
    color: var(--wcfContentText) !important;
}

.gsm-statusBadge--online fa-icon {
    animation: none !important;
}

@media (max-width: 800px) {
    .gsm-serverSearch,
    .gsm-commandGrid,
    .gsm-commandPips {
        grid-template-columns: 1fr;
    }

    .gsm-commandDashboard__head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Third pass: fix screenshots - compact dashboard, flat tabs/sidebar/statistics. */
.gsm-commandDashboard__head {
    min-height: 0 !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding: 0 0 18px !important;
}

.gsm-commandDashboard__title {
    font-size: clamp(2rem, 4vw, 3.4rem) !important;
    line-height: 1 !important;
}

.gsm-commandDashboard__meter span {
    font-size: clamp(2rem, 4vw, 3.4rem) !important;
}

.gsm-commandPips {
    margin-top: 18px;
}

.gsm-commandPip {
    min-height: 78px !important;
}

.gsm-commandGrid {
    margin-top: 1px;
}

.gsm-detailTabs .tabMenu > ul {
    gap: 0 !important;
    border-bottom: 1px solid var(--wcfContentBorderColor) !important;
    background: transparent !important;
}

.gsm-detailTabs .tabMenu > ul > li > a {
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.gsm-detailTabs .tabMenu > ul > li.active > a,
.gsm-detailTabs .tabMenu > ul > li > a:hover {
    border-bottom-color: var(--wcfLinkColor) !important;
    color: var(--wcfLinkColor) !important;
    background: transparent !important;
}

.gsm-detailTabs .tabMenu > ul > li > a .badge {
    border-radius: 0 !important;
}

.gsm-statsCommand {
    display: grid;
    grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr);
    gap: 1px;
    margin-bottom: 18px;
    background: var(--wcfContentBorderColor);
}

.gsm-statsCommand__now,
.gsm-statsCompare {
    background: var(--wcfContentBackground);
}

.gsm-statsCommand__now {
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 18px;
}

.gsm-statsCommand__now strong {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: .95;
}

.gsm-statsCommand__now span,
.gsm-statsCommand__now small {
    color: var(--wcfContentDimmedText);
}

.gsm-statsCompare {
    display: grid;
    padding: 10px 18px;
}

.gsm-statsCompare__head,
.gsm-statsCompare__row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) repeat(3, minmax(80px, .35fr));
    gap: 12px;
    align-items: center;
    padding: 8px 0;
}

.gsm-statsCompare__head {
    order: -1;
    color: var(--wcfContentDimmedText);
    font-size: .82rem;
    border-bottom: 1px solid var(--wcfContentBorderColor);
}

.gsm-statsCompare__row + .gsm-statsCompare__row {
    border-top: 1px solid var(--wcfContentBorderColor);
}

.gsm-chartPanel--stats {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-width: 1px 0 !important;
}

.gsm-statsDeepGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1px;
    margin-top: 18px;
    background: var(--wcfContentBorderColor);
}

.gsm-statsFlatPanel {
    padding: 16px;
    background: var(--wcfContentBackground);
}

.gsm-statsFlatPanel h4 {
    margin-top: 0;
}

.gsm-mapDistribution,
.gsm-snapshotStream {
    display: grid;
}

.gsm-mapDistribution__row,
.gsm-snapshotStream__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid var(--wcfContentBorderColor);
}

.gsm-snapshotStream__row {
    grid-template-columns: auto auto auto minmax(0, 1fr);
}

.gsm-mapDistribution__row span,
.gsm-snapshotStream__row span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsm-serverDetail__sidebar .gsm-sidebarPanel {
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--wcfContentBackground) !important;
    border-width: 1px 0 !important;
}

.gsm-sidebarPanel::before {
    display: none !important;
}

.gsm-sidebarPanel__hero {
    background: var(--wcfContentContainerBackground) !important;
    border-bottom: 1px solid var(--wcfContentBorderColor);
}

.gsm-sidebarHeroSlot,
.gsm-serverDetail__sidebar img.gsm-serverHeroImage,
.gsm-sidebarHeroSlot__fallback {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.gsm-sidebarFacts__row {
    grid-template-columns: 28px minmax(90px, .55fr) minmax(0, 1fr) !important;
    border-bottom: 1px solid var(--wcfContentBorderColor) !important;
}

.gsm-sidebarFacts__icon {
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--wcfContentDimmedText) !important;
}

.gsm-sidebarAddressRow,
.gsm-sidebarCopyBtn {
    border-radius: 0 !important;
}

.gsmGlobalButtonAssignment__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 16px;
}

.gsmGlobalButtonAssignment__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--wcfContentBorderColor);
}

.gsmGlobalButtonAssignmentJsonHidden {
    display: none !important;
}

/* Statistics redesign: compact measurement table, no accent-card repetition. */
.gsm-statRail {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 0 !important;
    border-top: 1px solid var(--wcfContentBorderColor);
    border-bottom: 1px solid var(--wcfContentBorderColor);
}

.gsm-statRail__item {
    min-height: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-right: 1px solid var(--wcfContentBorderColor) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.gsm-statRail__item:last-child {
    border-right: 0 !important;
}

.gsm-statRail__item::before {
    display: none !important;
}

.gsm-statRail__k {
    color: var(--wcfContentDimmedText) !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.gsm-statRail__v {
    font-size: 1.1rem !important;
    font-weight: 650 !important;
}

.gsm-statsHeader {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.gsm-statsSwitch {
    gap: 0 !important;
    border: 1px solid var(--wcfContentBorderColor);
    background: transparent !important;
}

.gsm-statsSwitch .button {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.gsm-statsSwitch .button.isActive {
    background: var(--wcfContentContainerBackground) !important;
    color: var(--wcfContentText) !important;
}

.gsm-statsCommand {
    display: grid !important;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) !important;
    gap: 0 !important;
    margin-bottom: 22px !important;
    border: 1px solid var(--wcfContentBorderColor);
    background: transparent !important;
}

.gsm-statsCommand__now,
.gsm-statsCompare {
    background: transparent !important;
}

.gsm-statsCommand__now {
    align-content: center !important;
    padding: 14px 16px !important;
    border-right: 1px solid var(--wcfContentBorderColor);
}

.gsm-statsCommand__now strong {
    font-size: 2rem !important;
    line-height: 1.05 !important;
    font-weight: 650 !important;
}

.gsm-statsCompare {
    padding: 8px 14px !important;
}

.gsm-statsCompare__head,
.gsm-statsCompare__row {
    padding: 6px 0 !important;
}

.gsm-statsCompare__head {
    border-bottom: 0 !important;
    font-size: .78rem !important;
}

.gsm-statsCompare__row + .gsm-statsCompare__row {
    border-top: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 60%, transparent) !important;
}

.gsm-statsCompare__row b {
    font-weight: 650;
}

.gsm-chartPanel--stats {
    margin-top: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.gsm-chartPanel--stats .gsm-chartPanel__title {
    margin: 0 0 8px !important;
    font-size: .95rem !important;
}

#statistics .gsm-chartCanvasWrap {
    border: 1px solid var(--wcfContentBorderColor);
    background: var(--wcfContentContainerBackground);
}

.gsm-chartPanel--stats .gsm-chartPanel__canvas {
    height: 210px !important;
}

#gsmStatsUptimeChart {
    height: 160px !important;
}

.gsm-statsDeepGrid {
    background: transparent !important;
    gap: 16px !important;
}

.gsm-statsFlatPanel {
    border: 1px solid var(--wcfContentBorderColor);
    background: transparent !important;
}

@media (max-width: 800px) {
    .gsm-statsCommand {
        grid-template-columns: 1fr !important;
    }

    .gsm-statsCommand__now {
        border-right: 0;
        border-bottom: 1px solid var(--wcfContentBorderColor);
    }
}

@media (max-width: 900px) {
    .gsm-statsCommand,
    .gsm-statsDeepGrid {
        grid-template-columns: 1fr;
    }

    .gsm-statsCompare__head,
    .gsm-statsCompare__row {
        grid-template-columns: 1fr;
    }
}

/* Final statistics pass: replaced by .gsm-serverStats layout (see below). */
.gsm-overviewStats .gsm-statRail {
    margin: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: transparent !important;
}

.gsm-overviewStats .gsm-statRail__item {
    padding: 9px 14px !important;
    min-height: 58px !important;
}

.gsm-overviewStats .gsm-statRail__k {
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.gsm-overviewStats .gsm-statRail__v {
    margin-top: 3px !important;
    font-size: 1.05rem !important;
}

.gsm-overviewStats .gsm-activityTrace {
    height: 28px !important;
}

/* ── Server statistics tab (detail) ─────────────────────────────────────── */
.gsm-serverStats {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    padding-top:    4px;
}

.gsm-serverStats__toolbar {
    display:         flex;
    justify-content: flex-end;
    align-items:     center;
}

.gsm-serverStats__rangeSwitch {
    display:       inline-flex;
    flex-wrap:     wrap;
    gap:           6px;
    padding:       4px;
    border:        1px solid var(--wcfContentBorderColor);
    border-radius: 0;
    background:    var(--wcfContentContainerBackground);
}

.gsm-serverStats__rangeSwitch .button {
    min-height:    34px;
    padding:       0 14px;
    border-radius: 0;
    border:        1px solid transparent;
    background:    transparent;
    color:         var(--wcfContentDimmedText);
    font-weight:   600;
}

.gsm-serverStats__rangeSwitch .button.isActive {
    background:   color-mix(in srgb, var(--wcfColor) 14%, var(--wcfContentContainerBackground));
    border-color: color-mix(in srgb, var(--wcfColor) 35%, var(--wcfContentBorderColor));
    color:        var(--wcfContentText);
}

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

.gsm-serverStats__kpi {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    padding:        14px 16px;
    border:         1px solid var(--wcfContentBorderColor);
    background:     var(--wcfContentContainerBackground);
    border-radius:  var(--gsm-card-radius-sm, 0);
}

.gsm-serverStats__kpiLabel {
    font-size:   0.82rem;
    color:       var(--wcfContentDimmedText);
    line-height: 1.3;
}

.gsm-serverStats__kpiValue {
    font-size:   1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color:       var(--wcfContentText);
}

.gsm-serverStats__sectionTitle {
    margin:      0 0 12px;
    font-size:   1rem;
    font-weight: 700;
    color:       var(--wcfContentText);
}

.gsm-serverStats__compare .tableContainer {
    margin: 0;
}

.gsm-serverStats__compare .table th,
.gsm-serverStats__compare .table td {
    padding: 10px 12px;
}

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

.gsm-serverStats__chartCard {
    padding:    14px 16px 16px;
    border:     1px solid var(--wcfContentBorderColor);
    background: var(--wcfContentContainerBackground);
}

.gsm-serverStats__chartWrap {
    position:   relative;
    width:      100%;
    min-height: 220px;
}

.gsm-serverStats__chartCanvas {
    display:    block;
    width:      100%;
    max-width:  100%;
    border:     1px solid color-mix(in srgb, var(--wcfContentBorderColor) 80%, transparent);
    background: color-mix(in srgb, var(--wcfContentText) 3%, var(--wcfContentBackground));
}

.gsm-serverStats__chartTooltip {
    position:        absolute;
    z-index:         2;
    min-width:       88px;
    max-width:       150px;
    pointer-events:  none;
    padding:         8px 10px;
    border:          1px solid var(--wcfContentBorderColor);
    border-radius:   0;
    background:      var(--wcfTabularBoxBackground);
    color:           var(--wcfContentText);
    font-size:       0.8rem;
    line-height:     1.35;
    box-shadow:      0 4px 16px rgba(0, 0, 0, 0.18);
}

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

.gsm-serverStats__detailCard {
    margin:     0;
    padding:    14px 16px 16px;
    border:     1px solid var(--wcfContentBorderColor);
    background: var(--wcfContentContainerBackground);
}

.gsm-serverStats__detailCard .tableContainer {
    margin: 0;
}

.gsm-serverStats__detailCard .table th,
.gsm-serverStats__detailCard .table td {
    padding:    9px 12px;
    font-size:  0.92rem;
    vertical-align: middle;
}

.gsm-serverStats__detailCard .gsm-statusPip {
    margin-right: 6px;
    vertical-align: middle;
}

@media (max-width: 960px) {
    .gsm-serverStats__kpiRow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gsm-serverStats__charts,
    .gsm-serverStats__details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .gsm-serverStats__kpiRow {
        grid-template-columns: 1fr;
    }

    .gsm-serverStats__toolbar {
        justify-content: stretch;
    }

    .gsm-serverStats__rangeSwitch {
        width: 100%;
        justify-content: stretch;
    }

    .gsm-serverStats__rangeSwitch .button {
        flex: 1 1 auto;
        padding: 0 8px;
        font-size: 0.85rem;
    }
}

/* BBCode-Embed: Forum-Typografie zurücksetzen, Abstände über Dock-Grid steuern */
.messageText .gsm-serverCard--embed .gsm-serverCard__embedTitle,
.messageText .gsm-serverCard--embed .gsm-serverCard__titleLink,
.messageText .gsm-serverCard--embed h1,
.messageText .gsm-serverCard--embed h2,
.messageText .gsm-serverCard--embed h3,
.messageText .gsm-serverCard--embed h4,
.messageText .gsm-serverCard--embed p {
    margin:  0 !important;
    padding: 0 !important;
}

.gsm-serverCard--embed .gsm-serverCard__footer {
    margin-top:  0 !important;
    padding-top: 8px !important;
}

.gsm-serverCard--embed .gsm-playerBar {
    margin: 0 !important;
}

.gsm-serverCard--embed .gsm-serverCard__offlineHint {
    margin: 0 !important;
}

/* ── Server quick-switcher (frontend + ACP) ─────────────────────────────── */
.gsmQuickSwitch__menu {
    min-width: min(22rem, 92vw);
    padding-top: 0;
}

.gsmQuickSwitch__search {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 12px;
    border-bottom: 1px solid var(--wcfContentBorderInner, rgba(0, 0, 0, .08));
    background: var(--wcfContentContainerBackground, #fff);
}

.gsmQuickSwitch__search .long {
    width: 100%;
    margin: 0;
}

.gsmQuickSwitch__list {
    max-height: min(24rem, 52vh);
}

.gsmQuickSwitch__itemRow > a {
    display: block;
    padding: 8px 12px;
}

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

.gsmQuickSwitch__badge {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--wcfSidebarBackground, rgba(0, 0, 0, .04));
}

.gsmQuickSwitch__badge.gsm-statusPip {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 8px;
}

.gsmQuickSwitch__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gsmQuickSwitch__title {
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gsmQuickSwitch__meta {
    font-size: 0.78rem;
    line-height: 1.2;
    color: var(--wcfContentDimmedText, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gsmQuickSwitch__metaDot {
    opacity: 0.65;
}

.gsmQuickSwitch__status.gsm-statusBadge--online {
    color: var(--gsm-online-color, #10b981);
}

.gsmQuickSwitch__status.gsm-statusBadge--offline {
    color: var(--gsm-offline-color, #ef4444);
}

.gsmQuickSwitch__status.gsm-statusBadge--maintenance {
    color: var(--gsm-maintenance-color, #f97316);
}

.gsmQuickSwitch__status.gsm-statusBadge--restart {
    color: var(--gsm-restart-color, #8b5cf6);
}

.gsmQuickSwitch__empty {
    margin: 0;
    padding: 12px 14px 14px;
    font-size: 0.85rem;
    color: var(--wcfContentDimmedText, #64748b);
    text-align: center;
}

.gsmQuickSwitch__itemRow.active > a {
    background: var(--wcfTabularBoxBackgroundActive, rgba(99, 102, 241, .08));
}