.gcp-wrapper {
    /* base wrapper */
    --gcp-radius: 18px;
    background: radial-gradient(circle at top, rgba(34,197,94,0.16), transparent 55%),
                radial-gradient(circle at bottom, rgba(15,23,42,0.96), #020617 70%);
    padding: 18px 12px 20px;
    border-radius: 20px;
    position: relative;
    overflow: visible;
}

.gcp-grid {
    display: grid;
    grid-template-columns: repeat(var(--gcp-cols-desktop, 3), minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1024px) {
    .gcp-grid {
        grid-template-columns: repeat(var(--gcp-cols-tablet, 2), minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .gcp-grid {
        grid-template-columns: repeat(var(--gcp-cols-mobile, 1), minmax(0, 1fr));
    }
}

/* Futuristische HUD-Card-Rahmen */

.gcp-card {
    background: radial-gradient(circle at top, rgba(37,99,235,0.16), transparent 55%),
                radial-gradient(circle at bottom, rgba(15,23,42,0.96), #020617 70%);
    border-radius: var(--gcp-radius);
    padding: 14px 14px 12px;
    color: var(--gcp-text, #f9fafb);
    border: 1px solid rgba(56,189,248,0.65);
    box-shadow: 0 20px 55px rgba(15,23,42,0.98);
    position: relative;
    overflow: visible;
    transition: transform 140ms ease-out, box-shadow 140ms ease-out, border-color 140ms ease-out, filter 140ms ease-out;
}

.gcp-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid rgba(59,130,246,0.45);
    opacity: 0.9;
    pointer-events: none;
}

/* HUD-Corner Frames */

.gcp-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(59,130,246,0.0) 0%, rgba(59,130,246,0.9) 10%, rgba(59,130,246,0.0) 20%) top left / 40% 2px no-repeat,
        linear-gradient(180deg, rgba(56,189,248,0.0) 0%, rgba(56,189,248,0.9) 20%, rgba(56,189,248,0.0) 40%) top left / 2px 40% no-repeat,
        linear-gradient(270deg, rgba(59,130,246,0.0) 0%, rgba(59,130,246,0.9) 10%, rgba(59,130,246,0.0) 20%) top right / 40% 2px no-repeat,
        linear-gradient(180deg, rgba(56,189,248,0.0) 0%, rgba(56,189,248,0.9) 20%, rgba(56,189,248,0.0) 40%) top right / 2px 40% no-repeat,
        linear-gradient(90deg, rgba(59,130,246,0.0) 0%, rgba(59,130,246,0.9) 10%, rgba(59,130,246,0.0) 20%) bottom left / 40% 2px no-repeat,
        linear-gradient(0deg, rgba(56,189,248,0.0) 0%, rgba(56,189,248,0.9) 20%, rgba(56,189,248,0.0) 40%) bottom left / 2px 40% no-repeat,
        linear-gradient(270deg, rgba(59,130,246,0.0) 0%, rgba(59,130,246,0.9) 10%, rgba(59,130,246,0.0) 20%) bottom right / 40% 2px no-repeat,
        linear-gradient(0deg, rgba(56,189,248,0.0) 0%, rgba(56,189,248,0.9) 20%, rgba(56,189,248,0.0) 40%) bottom right / 2px 40% no-repeat;
    opacity: 0.82;
}

/* Hologram Glow & Scanlines beim Hover */

.gcp-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 30px 80px rgba(15,23,42,1);
    border-color: rgba(129,140,248,0.95);
    filter: drop-shadow(0 0 18px rgba(59,130,246,0.75));
}

/* leichte Scanline-Illusion auf den Cards */
.gcp-card:hover .gcp-card-body::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(15,23,42,0.0) 0px,
        rgba(15,23,42,0.0) 2px,
        rgba(59,130,246,0.15) 3px,
        rgba(15,23,42,0.0) 4px
    );
    mix-blend-mode: soft-light;
    pointer-events: none;
}

/* Layout Fix für Body, Header, Footer als relative Bereiche */

.gcp-card-header,
.gcp-card-body,
.gcp-card-footer {
    position: relative;
    z-index: 2;
}

/* Header */

.gcp-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.gcp-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(15,23,42,0.9);
}

.gcp-title {
    margin: 0;
    font-size: 18px;
    letter-spacing: 0.06em;
    color: var(--gcp-header, #38bdf8);
    text-transform: uppercase;
}

/* Body / Servers */

.gcp-card-body {
    margin-top: 4px;
}

.gcp-server-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--gcp-server-min-width, 300px), 1fr));
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.gcp-server-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    background: rgba(15,23,42,0.96);
    border-radius: 10px;
    border: 1px solid rgba(31,41,55,1);
    transition: transform 120ms ease-out, box-shadow 120ms ease-out, border-color 120ms ease-out, background 120ms ease-out;
}

.gcp-server-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(15,23,42,0.96);
    border-color: rgba(59,130,246,0.9);
    background: radial-gradient(circle at top, rgba(37,99,235,0.24), rgba(15,23,42,0.98));
}

.gcp-server-main {
    display: flex;
    flex-direction: row; flex-wrap: wrap;
    gap: 1px;
}

.gcp-server-name {
    font-weight: 600;
    font-size: 14px;
}

.gcp-server-address {
    font-size: 12px;
    color: #9ca3af;
}

.gcp-server-status-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gcp-server-logo-wrap img.gcp-server-logo {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 0 12px rgba(15,23,42,0.9);
}

/* Status-Badges + HUD-LED + Ping */

.gcp-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: radial-gradient(circle at top, rgba(15,23,42,1), rgba(15,23,42,0.92));
}

.gcp-status-online {
    border-color: var(--gcp-online, #22c55e);
    color: var(--gcp-online, #22c55e);
    box-shadow: 0 0 0 1px rgba(34,197,94,0.4), 0 0 24px rgba(34,197,94,0.5);
}
.gcp-status-offline {
    border-color: var(--gcp-offline, #ef4444);
    color: var(--gcp-offline, #ef4444);
    box-shadow: 0 0 0 1px rgba(248,113,113,0.4), 0 0 24px rgba(248,113,113,0.5);
}
.gcp-status-pending {
    border-style: dashed;
    color: #e5e7eb;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top, rgba(15,23,42,1), rgba(15,23,42,0.92));
    animation: gcp-status-pending-pulse 1.2s ease-in-out infinite;
}

.gcp-status-pending::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(148,163,184,0.25) 40%, rgba(148,163,184,0.25) 60%, transparent 100%);
    transform: translateX(-120%);
    animation: gcp-status-pending-scan 1.6s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes gcp-status-pending-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(234,179,8,0.45); }
    60%  { box-shadow: 0 0 24px 4px rgba(234,179,8,0.65); }
    100% { box-shadow: 0 0 0 0 rgba(234,179,8,0.0); }
}

@keyframes gcp-status-pending-scan {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}
/* Status LED */

.gcp-status-led {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15,23,42,1);
    background: #4b5563;
}

.gcp-led-online {
    background: #22c55e;
    box-shadow: 0 0 0 1px rgba(22,163,74,0.7), 0 0 14px rgba(34,197,94,0.9);
    animation: gcp-led-pulse 1.4s ease-in-out infinite;
}
.gcp-led-offline {
    background: #ef4444;
    box-shadow: 0 0 0 1px rgba(239,68,68,0.7), 0 0 14px rgba(248,113,113,0.9);
    animation: gcp-led-pulse 0.8s ease-in-out infinite;
}
.gcp-led-pending {
    background: #eab308;
    box-shadow: 0 0 0 1px rgba(234,179,8,0.7), 0 0 14px rgba(250,204,21,0.9);
    animation: gcp-led-pulse 1.1s ease-in-out infinite;
}

@keyframes gcp-led-pulse {
    0%   { transform: scale(1); opacity: 0.6; }
    50%  { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 0.6; }
}

/* Ping Anzeige */

.gcp-ping {
    font-size: 11px;
    min-width: 46px;
    text-align: right;
    opacity: 0.85;
}

.gcp-ping-good {
    color: #22c55e;
}
.gcp-ping-warn {
    color: #eab308;
}
.gcp-ping-bad {
    color: #f97373;
}

/* Pop-Animation beim Statuswechsel */

.gcp-pop {
    animation: gcp-pop 0.35s ease-out;
}

@keyframes gcp-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* Footer / Buttons */

.gcp-card-footer {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.gcp-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gcp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    border: 1px solid transparent;
    text-decoration: none;
    transition: transform 120ms ease-out, box-shadow 120ms ease-out, background 120ms ease-out, border-color 120ms ease-out;
}

.gcp-btn-primary {
    background: var(--gcp-btn-primary-bg, #22c55e);
    color: var(--gcp-btn-primary-text, #022c22);
}
.gcp-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(16,185,129,0.65);
    border-color: rgba(74,222,128,1);
}

.gcp-btn-secondary {
    background: var(--gcp-btn-secondary-bg, #0f172a);
    color: var(--gcp-btn-secondary-text, #e5e7eb);
    border-color: rgba(148,163,184,0.7);
}
.gcp-btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(15,23,42,0.96);
    border-color: rgba(248,250,252,0.9);
}

.gcp-shortcode-hint {
    font-size: 11px;
    color: #9ca3af;
}
.gcp-shortcode-hint code {
    background: rgba(15,23,42,0.9);
    padding: 3px 6px;
    border-radius: 999px;
}

.gcp-empty, .gcp-no-servers {
    font-size: 13px;
    color: #9ca3af;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(15,23,42,0.95);
    border: 1px dashed rgba(55,65,81,1);
}

/* ---------------- Vollbild CSS-Partikel & globale HUD-Overlays ---------------- */

#gcp-css-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999995;
    overflow: visible;
}

/* Scanlines + Glitch Noise + Pulse Grid + Circuit Overlay + Neon Waves (als Shader über die Seite) */

#gcp-css-particles::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            to bottom,
            rgba(15,23,42,0.0) 0px,
            rgba(15,23,42,0.0) 2px,
            rgba(15,23,42,0.45) 3px,
            rgba(15,23,42,0.0) 4px
        );
    opacity: 0.10;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

#gcp-css-particles::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(59,130,246,0.35) 0, transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(34,197,94,0.25) 0, transparent 50%),
        radial-gradient(circle at 50% 0%, rgba(14,165,233,0.2) 0, transparent 40%),
        repeating-linear-gradient(
            135deg,
            rgba(15,23,42,0.0) 0px,
            rgba(37,99,235,0.22) 2px,
            rgba(15,23,42,0.0) 4px
        );
    opacity: 0.26;
    mix-blend-mode: screen;
    animation: gcp-pulse-grid 8s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes gcp-pulse-grid {
    0%   { opacity: 0.24; transform: scale(1) translate3d(0,0,0); }
    50%  { opacity: 0.38; transform: scale(1.02) translate3d(0,-4px,0); }
    100% { opacity: 0.3; transform: scale(1.03) translate3d(0,4px,0); }
}

/* Starlight */

.gcp-star {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 999px;
    background: rgba(248,250,252,0.85);
    box-shadow: 0 0 8px rgba(248,250,252,0.8);
    animation: gcp-star-twinkle 5s ease-in-out infinite;
}

@keyframes gcp-star-twinkle {
    0%   { opacity: 0.1; transform: scale(0.8); }
    30%  { opacity: 0.9; transform: scale(1.4); }
    70%  { opacity: 0.4; transform: scale(1); }
    100% { opacity: 0.1; transform: scale(0.8); }
}

/* Digital Rain (Matrix) */

.gcp-rain-column {
    position: absolute;
    top: -120%;
    width: auto;
    font-family: monospace;
    font-size: 13px;
    color: rgba(74,222,128,0.85);
    text-shadow: 0 0 8px rgba(34,197,94,0.9);
    white-space: pre;
    animation-name: gcp-rain-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes gcp-rain-fall {
    0%   { transform: translate3d(0, -10%, 0); opacity: 0; }
    10%  { opacity: 1; }
    80%  { transform: translate3d(0, 110vh, 0); opacity: 1; }
    100% { transform: translate3d(0, 130vh, 0); opacity: 0; }
}

/* Electric Sparks */

.gcp-spark {
    position: absolute;
    width: 34px;
    height: 2px;
    background: linear-gradient(to right, rgba(56,189,248,0.0), rgba(251,191,36,0.9), rgba(248,113,113,0.0));
    box-shadow: 0 0 14px rgba(251,191,36,0.85);
    opacity: 0;
    animation: gcp-spark-flash ease-out infinite;
    transform-origin: center left;
}

@keyframes gcp-spark-flash {
    0%   { opacity: 0; transform: scaleX(0); }
    20%  { opacity: 1; transform: scaleX(1); }
    60%  { opacity: 0.7; transform: scaleX(0.4); }
    100% { opacity: 0; transform: scaleX(0); }
}

/* Neon Waves */

.gcp-neon-wave {
    position: absolute;
    left: -20vw;
    width: 140vw;
    height: 80px;
    background: radial-gradient(circle at 10% 0%, rgba(56,189,248,0.0) 0, rgba(56,189,248,0.7) 35%, transparent 60%);
    opacity: 0.22;
    mix-blend-mode: screen;
    animation-name: gcp-neon-wave-move;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes gcp-neon-wave-move {
    0%   { transform: translate3d(0,0,0); opacity: 0.10; }
    40%  { transform: translate3d(10vw,-10px,0); opacity: 0.35; }
    80%  { transform: translate3d(18vw,6px,0); opacity: 0.26; }
    100% { transform: translate3d(24vw,0,0); opacity: 0.22; }
}

/* Schnee Engine */

.gcp-snowflake {
    position: absolute;
    top: -5%;
    color: #e5e7eb;
    opacity: 0.9;
    animation-name: gcp-snowfall;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes gcp-snowfall {
    0%   { transform: translate3d(0, -10%, 0); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate3d(-8px, 110vh, 0); opacity: 0; }
}

/* Schnee sammelt sich leicht auf Karten */

.gcp-wrapper.gcp-effect-snow .gcp-card::after {
    /* bereits Corner-Framing: Schnee-Effekt wird mit leichtem Overlay kombiniert */
    box-shadow: inset 0 4px 14px rgba(248,250,252,0.4);
}

/* Blütenregen */

.gcp-blossom {
    position: absolute;
    top: -10%;
    animation: gcp-blossom-fall linear infinite;
    opacity: 0.95;
}

@keyframes gcp-blossom-fall {
    0%   { transform: translate3d(0, -10%, 0) rotate3d(1, 1, 0, 0deg); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate3d(-20px, 110vh, 0) rotate3d(1, 1, 0, 180deg); opacity: 0; }
}

/* Herbstlaub */

.gcp-leaf {
    position: absolute;
    top: -10%;
    animation: gcp-leaf-fall linear infinite;
    opacity: 0.95;
}

@keyframes gcp-leaf-fall {
    0%   { transform: translate3d(0, -10%, 0) rotate3d(0,1,0,0deg); opacity: 0; }
    20%  { opacity: 1; }
    60%  { transform: translate3d(30px, 65vh, 0) rotate3d(0,1,0,130deg); opacity: 1; }
    100% { transform: translate3d(50px, 110vh, 0) rotate3d(0,1,0,220deg); opacity: 0; }
}

/* Ballons */

.gcp-balloon-wrap {
    position: absolute;
    bottom: -10%;
    animation: gcp-balloon-rise ease-in-out infinite;
}

.gcp-balloon {
    display: inline-block;
}

.gcp-balloon-string {
    display: block;
    width: 2px;
    height: 28px;
    margin: 0 auto -4px;
    border-radius: 999px;
    background: linear-gradient(to bottom, rgba(148,163,184,0.8), rgba(30,64,175,0.8));
    transform-origin: top center;
    animation: gcp-string-sway ease-in-out infinite;
    animation-duration: 3.6s;
}

@keyframes gcp-balloon-rise {
    0%   { transform: translate3d(0, 20px, 0) scale(0.9); opacity: 0; }
    20%  { opacity: 1; }
    80%  { transform: translate3d(0, -110vh, 0) scale(1.05); opacity: 1; }
    100% { transform: translate3d(0, -120vh, 0) scale(1); opacity: 0; }
}

@keyframes gcp-string-sway {
    0%   { transform: rotate(4deg); }
    50%  { transform: rotate(-4deg); }
    100% { transform: rotate(4deg); }
}

/* Santa */

.gcp-santa {
    position: fixed;
    top: 10%;
    left: -80px;
    font-size: 32px;
    animation: gcp-santa-fly 18s linear infinite;
    text-shadow: 0 0 12px rgba(248,250,252,0.9);
    z-index: 999999;
}

@keyframes gcp-santa-fly {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    10%  { opacity: 1; }
    40%  { transform: translate3d(60vw, -10px, 0); opacity: 1; }
    80%  { transform: translate3d(120vw, 4px, 0); opacity: 1; }
    100% { transform: translate3d(160vw, 0, 0); opacity: 0; }
}

/* Theme Variants */

.gcp-theme-military .gcp-card {
    background: radial-gradient(circle at top, rgba(21,128,61,0.25), transparent 55%),
                radial-gradient(circle at bottom, rgba(15,23,42,0.96), #020617 70%);
    border-color: rgba(34,197,94,0.7);
}
.gcp-theme-military .gcp-title {
    color: #bbf7d0;
}
.gcp-theme-military .gcp-status-online {
    border-color: #22c55e;
    color: #bbf7d0;
}
.gcp-theme-military .gcp-status-offline {
    border-color: #f97316;
    color: #fed7aa;
}

.gcp-theme-neon .gcp-card {
    background: radial-gradient(circle at top, rgba(147,51,234,0.3), transparent 55%),
                radial-gradient(circle at bottom, rgba(24,24,27,0.98), #020617 70%);
    border-color: rgba(236,72,153,0.85);
    box-shadow: 0 24px 70px rgba(24,24,27,1);
}
.gcp-theme-neon .gcp-title {
    color: #f9a8d4;
}
.gcp-theme-neon .gcp-status-online {
    border-color: #a855f7;
    color: #f5d0fe;
}
.gcp-theme-neon .gcp-status-offline {
    border-color: #fb7185;
    color: #fecaca;
}


/* Collapsible Groups */

.gcp-group-panel {
    margin-top: 6px;
}

.gcp-card.gcp-group-collapsed {
    opacity: 0.94;
}

.gcp-card.gcp-group-collapsed .gcp-card-header {
    opacity: 0.9;
}

.gcp-card-header {
    cursor: pointer;
}

/* Enhanced Hover Effects */
.gcp-server-container {
    position: relative;
}

.gcp-server-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(59,130,246,0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.gcp-server-container:hover::before {
    opacity: 1;
    transform: scale(1.03);
    box-shadow: 0 0 12px rgba(59,130,246,0.45);
}

/* Oscilloscope glow inner bar */
.gcp-server-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(34,197,94,0.75), transparent);
    animation: gcp-osci 1.8s ease-in-out infinite;
    opacity: 0;
    pointer-events: none;
}

.gcp-server-container:hover::after {
    opacity: 1;
}

@keyframes gcp-osci {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(10%); }
    100% { transform: translateX(120%); }
}

/* Server HUD bar under address */
.gcp-server-hud {
    margin-top: 4px;
}

.gcp-hud-bar {
    position: relative;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    overflow: visible;
    background: radial-gradient(circle at left, rgba(15,23,42,0.8), rgba(15,23,42,1));
}

.gcp-hud-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10%;
    background: linear-gradient(90deg, rgba(34,197,94,0.1), rgba(34,197,94,0.95), rgba(56,189,248,0.7));
    box-shadow: 0 0 10px rgba(34,197,94,0.8);
    transition: width 0.25s ease-out;
}

/* 3D hover for server items */
.gcp-server-item {
    transform-style: preserve-3d;
}

.gcp-server-item:hover {
    transform: perspective(700px) rotateX(4deg) rotateY(-3deg) translateY(-2px);
}

.gcp-ping-spark {
    width:80px;
    height:18px;
    display:block;
    margin-top:3px;
    opacity:0.85;
}

/* Full-width group container fix */
.gcp-card {
    width: 100%;
    max-width: 100%;
}

/* Server cards readable width */
.gcp-server-container {
    flex: 1 1 calc(33% - 12px);
    min-width: 260px;
    max-width: 100%;
}

.gcp-server-container {
    flex: 1 1 var(--gcp-server-width);
    min-width: var(--gcp-server-min-width);
    max-width: var(--gcp-server-max-width);
}

.gcp-card, .gcp-card-body, .gcp-group-panel, .gcp-grid {
    width: 100% !important;
    max-width: 100% !important;
}

.gcp-server-container {
    flex: 1 1 var(--gcp-server-width) !important;
    min-width: var(--gcp-server-min-width) !important;
    max-width: var(--gcp-server-max-width) !important;
}

/* Isolation Modes */
.gcp-wrapper.gcp-mode-safe * {
    all: unset;
    all: revert-layer;
}
.gcp-wrapper.gcp-mode-hybrid * {
    all: revert;
}
.gcp-wrapper.gcp-mode-theme * {
    /* minimal reset */
    box-sizing: border-box;
}


/* Enhanced starfield look */
.gcp-star {
    width: 1.5px;
    height: 1.5px;
    border-radius: 999px;
    background: rgba(248,250,252,0.9);
    box-shadow: 0 0 6px rgba(248,250,252,0.7);
}

.gcp-star.variant-big {
    width: 2.5px;
    height: 2.5px;
    box-shadow: 0 0 10px rgba(248,250,252,0.9);
}

.gcp-star.variant-small {
    width: 1px;
    height: 1px;
    box-shadow: 0 0 4px rgba(248,250,252,0.6);
}

@keyframes gcp-star-twinkle-soft {
    0%   { opacity: 0.15; transform: scale(0.8); }
    40%  { opacity: 0.9; transform: scale(1.25); }
    100% { opacity: 0.2; transform: scale(0.9); }
}