/* ===== GLOBAL STYLES ===== */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    background-color: #0b1326;
    color: #dae2fd;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* ===== GLASS CARD COMPONENT ===== */
.glass-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.glass-card:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: #d0bcff;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
    transform: translateY(-2px);
}

.glass-panel {
    background: rgba(23, 31, 51, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== ANIMATIONS ===== */
.online-pulse {
    position: relative;
}

.online-pulse::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #4edea3;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px #4edea3;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.8; }
}

.hero-glow {
    background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
}

.step-transition {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glow-primary {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
}

/* ===== FORM INPUTS ===== */
.input-focus-glow:focus {
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3);
    border-color: #0ea5e9;
}

/* ===== MATERIAL ICONS ===== */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.mobile-nav summary { list-style: none; cursor: pointer; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav[open] .mobile-nav-panel { display: block; }
.mobile-nav[open] .mobile-nav-trigger { color: #d0bcff; border-color: rgba(208, 188, 255, .45); background: rgba(208, 188, 255, .08); }
.mobile-nav-link { display: flex; min-height: 44px; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; color: #cbc3d7; font-size: 14px; text-decoration: none; transition: background .16s ease, color .16s ease; }
.mobile-nav-link:hover, .mobile-nav-link:focus-visible { outline: none; background: rgba(208, 188, 255, .1); color: #d0bcff; }
.mobile-nav-link > .material-symbols-outlined { font-size: 20px; }

.desktop-nav { gap: 4px; padding: 5px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.desktop-nav-link { position: relative; display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; color: #aeb7ca; font-size: 13px; font-weight: 650; text-decoration: none; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
.desktop-nav-link > .material-symbols-outlined { font-size: 19px; color: #9a88c5; transition: color .18s ease, transform .18s ease; }
.desktop-nav-link:hover { transform: translateY(-1px); background: rgba(208,188,255,.08); color: #f1edff; }
.desktop-nav-link:hover > .material-symbols-outlined { color: #d0bcff; transform: scale(1.08); }
.desktop-nav-link.is-active { border-color: rgba(208,188,255,.16); background: linear-gradient(135deg,rgba(208,188,255,.16),rgba(137,206,255,.07)); color: #e7dcff; box-shadow: 0 3px 14px rgba(137,92,246,.1); }
.desktop-nav-link.is-active > .material-symbols-outlined { color: #d0bcff; }
.desktop-nav-link:focus-visible { outline: 2px solid #d0bcff; outline-offset: 3px; }

[data-favorite-button] [data-favorite-icon] {
    transition: transform 180ms ease, color 180ms ease, font-variation-settings 180ms ease;
}

[data-favorite-button][data-favorite="1"] [data-favorite-icon] {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    color: #ff6685;
    transform: scale(1.08);
}

/* ===== CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #060e20;
}

::-webkit-scrollbar-thumb {
    background: #2d3449;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #d0bcff;
}

/* ===== BACKGROUND EFFECTS ===== */
.bg-glow-blur {
    filter: blur(100px);
    opacity: 0.15;
}

/* ===== SERVER DIRECTORY CARDS ===== */
.server-card {
    min-height: 0;
    border-color: rgba(255, 255, 255, 0.09);
}

.server-card:hover {
    border-color: rgba(208, 188, 255, 0.55);
    box-shadow: 0 18px 45px rgba(3, 8, 22, 0.38), 0 0 24px rgba(139, 92, 246, 0.12);
}

.server-mark {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.server-mark img {
    image-rendering: pixelated;
}

.server-mark-minecraft {
    color: #d0bcff;
    background: linear-gradient(145deg, rgba(160, 120, 255, 0.25), rgba(19, 27, 46, 0.9));
}

.server-mark-hytale {
    color: #89ceff;
    background: linear-gradient(145deg, rgba(0, 162, 230, 0.25), rgba(19, 27, 46, 0.9));
}

.address-panel {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(6, 14, 32, 0.82), rgba(19, 27, 46, 0.72));
}