/* ============================================
   DANCO RUST — Premium Gaming Portal
   ============================================ */

/* --- Reset & Variables --- */
:root {
    --bg-dark: #0e0e16;
    --bg-body: #111119;
    --bg-card: rgba(22, 22, 34, 0.9);
    --bg-card-hover: rgba(30, 30, 46, 0.95);
    --bg-glass: rgba(18, 18, 30, 0.6);
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(205, 60, 50, 0.35);
    --accent: #cd4132;
    --accent-light: #e8554a;
    --accent-glow: rgba(205, 65, 50, 0.4);
    --text-primary: #f0f0f2;
    --text-secondary: #b0b0c4;
    --text: #f0f0f2;
    --text-muted: #a0a0b2;
    --text-dim: #72728a;
    --card-bg: rgba(22, 22, 34, 0.9);
    --red: #cd3c32;
    --red-light: #e8534a;
    --red-glow: rgba(205, 60, 50, 0.4);
    --orange: #e87040;
    --gold: #f0a030;
    --green: #4ade80;
    --green-glow: rgba(74, 222, 128, 0.3);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.4);
    --shadow-lg: 0 16px 64px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 40px rgba(205, 60, 50, 0.15);
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Rajdhani', 'Inter', sans-serif;

    /* Responsive layout presets */
    --layout-container-max: 1080px;
    --layout-container-gutter: 36px;
    --layout-navbar-max: 1120px;
    --layout-navbar-height: 56px;
    --layout-navbar-gap: 12px;
    --layout-brand-gap: 10px;
    --layout-brand-logo: 30px;
    --layout-brand-size: 1rem;
    --layout-nav-gap: 3px;
    --layout-nav-link-py: 6px;
    --layout-nav-link-px: 10px;
    --layout-nav-font-size: 0.98rem;
    --layout-nav-icon-size: 19px;
    --layout-nav-actions-gap: 8px;
    --layout-hero-bottom: 76px;
    --layout-hero-top-strip: 56px;
    --layout-hero-gap: 42px;
    --layout-hero-title: clamp(2.4rem, 5vw, 4.5rem);
    --layout-hero-desc-size: 0.96rem;
    --layout-hero-desc-max: 460px;
    --layout-hero-actions-gap: 12px;
    --layout-hero-visual-offset: 88px;
    --layout-hero-card-width: 560px;
    --layout-hero-card-bottom: 48px;
    --layout-hero-tag-min: 210px;
    --layout-hero-tag-pad-y: 12px;
    --layout-hero-tag-pad-x: 16px;
    --layout-hero-tag-gap: 10px;
    --layout-hero-tag-title-size: 0.88rem;
    --layout-hero-tag-icon-size: 38px;
    --layout-section-space: 64px;
    --layout-section-head-space: 38px;
    --layout-section-title: clamp(1.7rem, 3vw, 2.45rem);
    --layout-section-subtitle: 0.96rem;
    --layout-stats-gap: 16px;
    --layout-stat-pad-y: 26px;
    --layout-stat-pad-x: 18px;
    --layout-servers-min: 250px;
    --layout-servers-gap: 16px;
    --layout-feature-pad-y: 24px;
    --layout-feature-pad-x: 20px;
    --layout-feature-icon-size: 42px;
    --layout-dashboard-top: 88px;
    --layout-dashboard-bottom: 60px;
    --layout-dashboard-sidebar: 270px;
    --layout-dashboard-gap: 18px;
    --layout-dashboard-card-pad: 20px;
    --layout-dash-tabs-pad: 4px;
    --layout-dash-tab-pad-y: 9px;
    --layout-dash-tab-pad-x: 16px;
    --layout-dash-tab-font: 0.84rem;
    --layout-dash-overview-min: 160px;
    --layout-dash-overview-gap: 12px;
    --layout-dash-stat-pad-y: 16px;
    --layout-dash-stat-pad-x: 14px;
    --layout-dash-stat-value: 1.4rem;
    --layout-delivery-pad-y: 14px;
    --layout-delivery-pad-x: 16px;
    --layout-footer-top: 52px;
    --layout-footer-bottom: 26px;
    --layout-footer-gap: 24px;
    --layout-footer-margin-top: 28px;
}

@media (max-width: 1366px) {
    :root {
        --layout-container-max: 1120px;
        --layout-container-gutter: 32px;
        --layout-navbar-max: 1180px;
        --layout-navbar-height: 58px;
        --layout-brand-size: 1.04rem;
        --layout-nav-font-size: 0.94rem;
        --layout-hero-gap: 32px;
        --layout-hero-title: clamp(2.25rem, 4.4vw, 4rem);
        --layout-hero-desc-size: 0.92rem;
        --layout-section-space: 60px;
        --layout-section-title: clamp(1.65rem, 2.9vw, 2.3rem);
        --layout-dashboard-sidebar: 280px;
    }
}

@media (max-width: 1180px) {
    :root {
        --layout-container-max: 1040px;
        --layout-container-gutter: 28px;
        --layout-navbar-max: 1080px;
        --layout-brand-size: 0.98rem;
        --layout-nav-font-size: 0.9rem;
        --layout-hero-gap: 26px;
        --layout-hero-title: clamp(2.1rem, 4vw, 3.5rem);
        --layout-hero-desc-size: 0.9rem;
        --layout-section-space: 54px;
        --layout-section-title: clamp(1.55rem, 2.7vw, 2.1rem);
        --layout-dashboard-sidebar: 260px;
        --layout-dash-tab-font: 0.8rem;
    }
}

/* --- Light Theme Override --- */
[data-theme="light"] {
    --bg-dark: #e8e8ec;
    --bg-body: #f2f2f5;
    --bg-card: rgba(255, 255, 255, 0.92);
    --bg-card-hover: rgba(245, 245, 250, 0.98);
    --bg-glass: rgba(255, 255, 255, 0.7);
    --border: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(205, 60, 50, 0.3);
    --text: #1a1a2e;
    --text-muted: #5a5a72;
    --text-dim: #8a8a9c;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.1);
    --shadow-lg: 0 16px 64px rgba(0,0,0,0.12);
    --shadow-glow: 0 0 40px rgba(205, 60, 50, 0.08);
}

[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(0,0,0,0.05);
}

[data-theme="light"] .navbar.scrolled {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

[data-theme="light"] .hero-bg::after {
    background:
        linear-gradient(180deg, rgba(20,20,35,0.1) 0%, rgba(20,20,35,0.3) 35%, rgba(30,30,45,0.45) 60%, rgba(242,242,245,0.85) 80%, var(--bg-body) 100%),
        radial-gradient(ellipse at 30% 20%, rgba(205,60,50,0.1), transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(232,112,64,0.06), transparent 50%);
}

[data-theme="light"] .hero-bg-img {
    opacity: 0.55;
}

[data-theme="light"] .hero-card-preview {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
}

[data-theme="light"] .hero-card-preview::before {
    display: none;
}

[data-theme="light"] .hero-floating-stat {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

[data-theme="light"] .floating-value {
    color: var(--text);
}

[data-theme="light"] .hero-title,
[data-theme="light"] .hero-desc,
[data-theme="light"] .hero-scroll {
    color: #eeeef0;
}

[data-theme="light"] .hero-title {
    -webkit-text-fill-color: #eeeef0;
}

[data-theme="light"] .hero-title span {
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .hero-desc {
    color: rgba(238, 238, 240, 0.85);
}

[data-theme="light"] .hero-badge {
    color: var(--red-light);
    background: rgba(205,60,50,0.15);
    border-color: rgba(205,60,50,0.3);
}

[data-theme="light"] .hero-scroll {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

[data-theme="light"] .hero-scroll i {
    color: #ffffff;
}

[data-theme="light"] .stat-card,
[data-theme="light"] .server-card,
[data-theme="light"] .feature-card {
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

[data-theme="light"] .dash-banner-overlay {
    background: linear-gradient(180deg, rgba(242,242,245,0.1) 0%, rgba(242,242,245,0.75) 100%);
}

[data-theme="light"] .site-footer {
    background: rgba(235, 235, 240, 0.98);
}

[data-theme="light"] .profile-menu {
    background: rgba(255, 255, 255, 0.97);
}

[data-theme="light"] .navbar-name {
    background: linear-gradient(135deg, var(--text), var(--red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .stat-value {
    background: linear-gradient(135deg, var(--text), var(--red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .navbar-toggle span {
    background: var(--text);
}

/* --- Theme Toggle Button --- */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition);
}

.theme-toggle:hover {
    color: var(--text);
    border-color: var(--border-hover);
    background: rgba(205, 60, 50, 0.08);
}

.theme-toggle .fa-sun { display: none; }
.theme-toggle .fa-moon { display: inline-block; }

[data-theme="light"] .theme-toggle .fa-sun { display: inline-block; }
[data-theme="light"] .theme-toggle .fa-moon { display: none; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Custom Scrollbar (Dark) --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(205, 60, 50, 0.4);
}

/* --- Custom Scrollbar (Light) --- */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: #e8e8ec;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(205, 60, 50, 0.4);
}

html {
    scroll-behavior: auto;
    scroll-padding-top: 80px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) var(--bg-dark);
}

[data-theme="light"] {
    scrollbar-color: rgba(0, 0, 0, 0.15) #e8e8ec;
}

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg-body);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body.modal-open {
    overflow: hidden;
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 18% 18%, rgba(232, 112, 64, 0.1), transparent 22%),
        radial-gradient(circle at 80% 20%, rgba(76, 121, 255, 0.08), transparent 20%),
        rgba(8, 10, 16, 0.52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.js-runtime body.page-loader-active .page-loader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.page-loader__spinner {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.14);
    border-top-color: rgba(255, 180, 106, 0.96);
    border-right-color: rgba(232, 85, 74, 0.72);
    box-shadow: 0 0 24px rgba(232, 85, 74, 0.18);
    animation: pageLoaderSpin 0.82s linear infinite;
}

@keyframes pageLoaderSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

[data-theme="light"] .page-loader {
    background:
        radial-gradient(circle at 18% 18%, rgba(232, 112, 64, 0.08), transparent 22%),
        radial-gradient(circle at 80% 20%, rgba(76, 121, 255, 0.06), transparent 20%),
        rgba(244, 247, 251, 0.48);
}

[data-theme="light"] .page-loader__spinner {
    border-color: rgba(24, 34, 48, 0.14);
    border-top-color: rgba(232, 112, 64, 0.96);
    border-right-color: rgba(205, 65, 50, 0.72);
    box-shadow: 0 0 22px rgba(232, 112, 64, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .page-loader,
    .page-loader__spinner {
        transition: none;
        animation: none;
    }

    .page-loader__spinner {
        border-top-color: rgba(255, 180, 106, 0.72);
        border-right-color: rgba(255, 180, 106, 0.72);
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgba(232, 85, 74, 0.95);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(232, 85, 74, 0.18);
}

:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

.container {
    width: min(var(--layout-container-max), calc(100% - var(--layout-container-gutter)));
    margin: 0 auto;
}

.ui-surface {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.ui-badge--accent {
    background: rgba(205, 60, 50, 0.1);
    border-color: rgba(205, 60, 50, 0.2);
    color: var(--red-light);
}

.ui-badge--pending {
    background: rgba(240, 160, 48, 0.12);
    border-color: rgba(240, 160, 48, 0.18);
    color: var(--gold);
}

.ui-badge--processing {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.ui-badge--delivered,
.ui-badge--online {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.18);
    color: var(--green);
}

.ui-badge--failed,
.ui-badge--offline {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

.ui-badge--refunded {
    background: rgba(168, 85, 247, 0.14);
    border-color: rgba(168, 85, 247, 0.2);
    color: #c084fc;
}

.ui-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 180px;
    padding: 36px 24px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.015) 100%);
}

.ui-empty-state p {
    margin-bottom: 0;
}

.ui-empty-state span {
    max-width: 420px;
}

button.is-loading,
input[type="submit"].is-loading {
    position: relative;
    pointer-events: none;
}

.btn.is-loading,
.dash-notification-delete.is-loading,
.profile-menu-logout.is-loading {
    color: transparent !important;
}

.btn.is-loading i,
.dash-notification-delete.is-loading i,
.profile-menu-logout.is-loading i {
    opacity: 0;
}

.btn.is-loading::before,
.dash-notification-delete.is-loading::before,
.profile-menu-logout.is-loading::before {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0 -7.5px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.24);
    border-top-color: #ffffff;
    animation: app-btn-spin 0.75s linear infinite;
}

@keyframes app-btn-spin {
    to { transform: rotate(360deg); }
}

.app-feedback-root {
    position: relative;
    z-index: 220;
    pointer-events: none;
}

.app-feedback-root-admin {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

.app-feedback-root-site {
    position: relative;
}

.app-feedback-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(16, 18, 30, 0.94);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: auto;
    transition: opacity 0.24s ease, transform 0.24s ease, filter 0.24s ease;
}

.app-feedback-toast {
    position: fixed;
    right: 24px;
    width: min(360px, calc(100vw - 32px));
    z-index: 260;
    transform: translateY(-10px) translateX(14px) scale(0.98);
    filter: blur(4px);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.app-feedback-root-site .app-feedback-toast {
    top: 92px;
}

.app-feedback-root-admin .app-feedback-toast {
    top: 24px;
}

.app-feedback-item.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.app-feedback-toast.is-visible {
    transform: translateY(0) translateX(0) scale(1);
    filter: blur(0);
}

.app-feedback-item.is-hiding {
    opacity: 0;
}

.app-feedback-toast.is-hiding {
    transform: translateY(-8px) translateX(10px) scale(0.985);
    filter: blur(3px);
}

.app-feedback-success {
    border-color: rgba(74, 222, 128, 0.2);
}

.app-feedback-error {
    border-color: rgba(232, 85, 74, 0.24);
}

.app-feedback-info {
    border-color: rgba(96, 165, 250, 0.24);
}

.app-feedback-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    flex: 0 0 auto;
}

.app-feedback-success .app-feedback-icon {
    color: var(--green);
    background: rgba(74, 222, 128, 0.12);
}

.app-feedback-error .app-feedback-icon {
    color: var(--accent-light);
    background: rgba(232, 85, 74, 0.12);
}

.app-feedback-info .app-feedback-icon {
    color: #8ec5ff;
    background: rgba(96, 165, 250, 0.14);
}

.app-feedback-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.app-feedback-copy strong {
    font-size: 0.94rem;
    color: var(--text-primary);
}

.app-feedback-copy span {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
}

.app-feedback-close {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
}

.app-feedback-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .app-feedback-toast {
        top: auto;
        right: 10px;
        left: 10px;
        width: auto;
        bottom: 18px;
    }

    .app-feedback-root-site .app-feedback-toast,
    .app-feedback-root-admin .app-feedback-toast {
        top: auto;
    }
}

/* ===================== NAVBAR ===================== */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(14, 14, 22, 0.75);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background var(--transition), box-shadow var(--transition);
}

.navbar.scrolled {
    background: rgba(14, 14, 22, 0.95);
    box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--layout-navbar-height);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--layout-brand-gap);
    z-index: 101;
}

.navbar-logo {
    width: var(--layout-brand-logo);
    height: var(--layout-brand-logo);
    min-width: var(--layout-brand-logo);
    max-width: var(--layout-brand-logo);
    min-height: var(--layout-brand-logo);
    max-height: var(--layout-brand-logo);
    object-fit: contain;
    filter: drop-shadow(0 0 8px var(--red-glow));
    flex-shrink: 0;
}

.navbar-name {
    font-family: var(--font-display);
    font-size: var(--layout-brand-size);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--text), var(--red-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--layout-nav-gap);
}

.navbar-nav__center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--layout-nav-gap);
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--layout-nav-actions-gap);
}

@media (min-width: 769px) {
    .navbar-inner {
        width: min(var(--layout-navbar-max), calc(100% - 24px));
        display: grid;
        grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
        align-items: center;
        column-gap: var(--layout-navbar-gap);
    }

    .navbar-brand {
        justify-self: start;
    }

    .navbar-nav {
        justify-self: center;
        min-width: 0;
    }

    .navbar-actions {
        justify-self: end;
        justify-content: flex-end;
        min-width: max-content;
    }
}

.nav-link {
    padding: var(--layout-nav-link-py) var(--layout-nav-link-px);
    font-size: var(--layout-nav-font-size);
    font-weight: 600;
    color: rgba(240, 240, 242, 0.78);
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.22);
}

.nav-link i { font-size: 0.8rem; color: rgba(228, 228, 232, 0.62); }

.nav-icon {
    width: var(--layout-nav-icon-size);
    height: var(--layout-nav-icon-size);
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity var(--transition);
}

.nav-link:hover .nav-icon {
    opacity: 1;
}

.nav-link:hover {
    color: var(--text);
    background: rgba(255,255,255,0.05);
}

.nav-link--store {
    color: #e2bd56;
    text-shadow: 0 0 6px rgba(226, 189, 86, 0.14);
    animation: storeNavGlow 1.8s ease-in-out infinite;
}

.nav-link--store::before {
    content: none;
}

.nav-link--store .nav-icon {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(226, 189, 86, 0.18));
}

.nav-link--store:hover {
    color: #f0cf72;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 0 10px rgba(240, 207, 114, 0.2);
}

.nav-link--store:focus-visible {
    color: #f0cf72;
    background: transparent;
}

@keyframes storeNavGlow {
    0%,
    100% {
        text-shadow: 0 0 4px rgba(226, 189, 86, 0.1);
    }
    50% {
        text-shadow: 0 0 8px rgba(240, 207, 114, 0.18);
    }
}

[data-theme="light"] .nav-link {
    color: var(--text);
    text-shadow: none;
}

[data-theme="light"] .nav-link i {
    color: var(--text-muted);
}

[data-theme="light"] .nav-link--store {
    color: #a96a00;
    text-shadow: none;
}

.nav-logout { margin: 0; }

/* ===================== BUTTONS ===================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn-sm { padding: 8px 18px; font-size: 0.82rem; }
.btn-md { padding: 12px 28px; }
.btn-lg { padding: 14px 36px; font-size: 1rem; }

.btn-glow {
    background: linear-gradient(135deg, var(--red), var(--red-light));
    color: #fff;
    box-shadow: 0 4px 20px var(--red-glow);
    position: relative;
    overflow: hidden;
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 200%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.6s ease;
}

.btn-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(205,60,50,0.55);
}

.btn-glow:hover::before { left: 100%; }

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-outline:hover {
    border-color: var(--border-hover);
    background: rgba(205,60,50,0.08);
}

.btn-steam-logout {
    background: linear-gradient(135deg, rgba(232, 85, 74, 0.18), rgba(255, 148, 77, 0.22));
    color: #fff;
    border: 1px solid rgba(255, 148, 77, 0.34);
    box-shadow: 0 10px 28px rgba(232, 85, 74, 0.24);
}

.btn-steam-logout:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 184, 92, 0.55);
    background: linear-gradient(135deg, rgba(232, 85, 74, 0.28), rgba(255, 184, 92, 0.32));
    box-shadow: 0 14px 34px rgba(232, 85, 74, 0.32);
}

.btn-ghost {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
}

.btn-ghost:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.btn-connect {
    width: 100%;
    padding: 10px 16px;
    background: rgba(205,60,50,0.1);
    border: 1px solid rgba(205,60,50,0.2);
    color: var(--red-light);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.85rem;
    transition: all var(--transition);
    cursor: pointer;
}

.btn-connect:hover {
    background: linear-gradient(135deg, var(--red), var(--red-light));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 20px var(--red-glow);
    transform: translateY(-1px);
}

/* Hamburger */
.navbar-toggle {
    display: none;
    .navbar-toggle:focus-visible {
        border-color: var(--border-hover);
    }
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
    z-index: 101;
}

.navbar-toggle span {
    display: block;
    width: 24px; height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all var(--transition);
}

/* ===================== HERO ===================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 70px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10,10,15,0.2) 0%, rgba(10,10,15,0.5) 40%, rgba(13,13,20,0.95) 85%, var(--bg-body) 100%),
        radial-gradient(ellipse at 30% 20%, rgba(205,60,50,0.12), transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(232,112,64,0.06), transparent 50%);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 0 var(--layout-hero-bottom);
}

.hero-top-strip {
    display: flex;
    justify-content: center;
    margin-bottom: var(--layout-hero-top-strip);
}

.hero-inner {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--layout-hero-gap);
    align-items: center;
}

.hero-badge {
    padding-inline: 16px;
    background: rgba(205,60,50,0.1);
    border: 1px solid rgba(205,60,50,0.2);
    color: var(--red-light);
    margin-bottom: 24px;
    animation: none;
}

.hero-badge.ui-badge--online {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.24);
    color: var(--green);
}

.hero-badge.ui-badge--offline {
    background: rgba(205, 60, 50, 0.1);
    border-color: rgba(205, 60, 50, 0.2);
    color: var(--red-light);
    animation: pulse-border 3s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% { border-color: rgba(205,60,50,0.2); }
    50% { border-color: rgba(205,60,50,0.5); }
}

.hero-badge i {
    animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.hero-title {
    font-family: var(--font-display);
    font-size: var(--layout-hero-title);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-title span {
    background: linear-gradient(135deg, var(--red-light), var(--orange), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-desc {
    font-size: var(--layout-hero-desc-size);
    color: var(--text-muted);
    max-width: var(--layout-hero-desc-max);
    line-height: 1.7;
    margin-bottom: 32px;
}

.hero-actions {
    display: flex;
    gap: var(--layout-hero-actions-gap);
    flex-wrap: nowrap;
    align-items: center;
}

.hero-action-form {
    display: inline-flex;
    flex: 0 0 auto;
}

.hero-actions > .btn,
.hero-actions > a {
    flex: 0 0 auto;
}

/* Hero visual (right side) */
.hero-visual {
    position: relative;
}

.hero-visual-servers {
    width: min(100%, 1020px);
    justify-self: end;
    margin-left: auto;
    transform: translateX(var(--layout-hero-visual-offset));
}

.hero-card-shell {
    position: relative;
    width: min(100%, var(--layout-hero-card-width));
    margin-left: auto;
    padding-top: 18px;
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: var(--layout-hero-card-bottom);
}

/* ── Hero Tags ── */
.hero-orbit-tag {
    display: flex;
    align-items: center;
    gap: var(--layout-hero-tag-gap);
    min-width: var(--layout-hero-tag-min);
    padding: var(--layout-hero-tag-pad-y) var(--layout-hero-tag-pad-x);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(18, 24, 36, 0.94), rgba(9, 12, 20, 0.92));
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    white-space: nowrap;
    animation: float 6s ease-in-out infinite;
}

.hero-orbit-tag:nth-child(2) { animation-delay: -2s; }
.hero-orbit-tag:nth-child(3) { animation-delay: -4s; }

.hero-tags-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

.hero-orbit-tag strong {
    display: block;
    font-size: var(--layout-hero-tag-title-size);
    font-weight: 700;
    color: #f8fafc;
}

.hero-orbit-tag span {
    display: block;
    font-size: 0.74rem;
    color: rgba(203, 213, 225, 0.68);
    margin-top: 2px;
}

.hero-orbit-tag-icon {
    width: var(--layout-hero-tag-icon-size);
    height: var(--layout-hero-tag-icon-size);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.hero-orbit-tag-icon--orange {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.hero-orbit-tag-icon--blue {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.hero-orbit-tag-icon--green {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

@media (max-width: 768px) {
    .hero-top-strip {
        margin-bottom: 18px;
    }

    .hero-tags-row {
        flex-direction: column;
        width: 100%;
    }

    .hero-orbit-tag {
        padding: 8px 12px;
        gap: 8px;
        min-width: min(100%, 320px);
    }

    .hero-card-shell {
        padding: 0 0 58px;
    }

    .hero-orbit-tag strong {
        font-size: 0.78rem;
    }
    .hero-orbit-tag span {
        font-size: 0.65rem;
    }
    .hero-orbit-tag-icon {
        width: 30px;
        height: 30px;
        font-size: 0.82rem;
    }

    .hero-floating-stat-top {
        top: 10px;
        right: 10px;
    }
}

.hero-card-preview {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(10, 14, 22, 0.96), rgba(7, 10, 18, 0.98));
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255,255,255,0.03),
        0 0 46px rgba(232,85,74,0.08);
    aspect-ratio: 1.42 / 1;
    max-width: 640px;
    min-height: 340px;
    margin-left: auto;
    transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.hero-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

.hero-card-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), transparent 45%),
        linear-gradient(180deg, rgba(255,255,255,0.02), transparent 35%, rgba(0,0,0,0.18));
    z-index: 1;
}

.hero-card-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.35s ease, background 0.35s ease;
}

.hero-card-preview.is-online {
    border-color: var(--border);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.hero-card-preview.is-online::after {
    background:
        linear-gradient(180deg, rgba(8, 10, 16, 0.08) 0%, rgba(8, 10, 16, 0.2) 100%),
        radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.06), transparent 28%);
}

.hero-card-preview.is-offline {
    border-color: var(--border);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.hero-card-preview.is-offline::after {
    background:
        linear-gradient(180deg, rgba(8, 10, 16, 0.12) 0%, rgba(8, 10, 16, 0.28) 100%),
        radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.04), transparent 28%);
}

.hero-card-preview.is-transitioning {
    transform: translateY(-2px);
}

.hero-card-preview.is-transitioning::after {
    opacity: 0.72;
}

.hero-card-copy {
    position: absolute;
    inset: auto 22px 22px 22px;
    z-index: 2;
    display: grid;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(7,10,16,0.26), rgba(7,10,16,0.86));
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(14px);
    box-shadow: 0 16px 34px rgba(0,0,0,0.24);
}

.hero-card-kicker {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.58);
}

.hero-card-copy strong {
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.55rem;
    line-height: 1;
}

.hero-card-name {
    display: block;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.28s ease, opacity 0.28s ease, filter 0.28s ease;
}

.hero-card-name.is-switching {
    transform: translateY(16px);
    opacity: 0;
    filter: blur(3px);
}

.hero-card-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding-inline: 12px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.hero-card-progress {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 12px;
    z-index: 2;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    overflow: hidden;
}

.hero-card-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-light), var(--gold));
    box-shadow: 0 0 14px rgba(232,85,74,0.4);
}

.hero-card-progress span.is-animating {
    animation: hero-progress-ring 4.5s linear forwards;
}

@keyframes hero-progress-ring {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.hero-floating-stat {
    position: absolute;
    z-index: 5;
    min-width: 104px;
    padding: 7px 9px;
    background: linear-gradient(180deg, rgba(15, 19, 30, 0.95), rgba(8, 11, 19, 0.92));
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 16px 30px rgba(0,0,0,0.28);
    animation: float 6s ease-in-out infinite;
}

.hero-floating-stat-top {
    top: 10px;
    right: 10px;
    animation-delay: -2s;
}

.hero-floating-stat-ac {
    bottom: 50px;
    left: -30px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
    animation-delay: -4s;
}

.floating-ac-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #22c55e;
    flex-shrink: 0;
}

.floating-value--ac {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.7);
    font-family: 'Inter', sans-serif;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.floating-label {
    font-size: 0.52rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}

.floating-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}

.floating-value .dot-online {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 12px var(--green-glow);
    margin-right: 0;
    animation: blink 2s ease-in-out infinite;
}

.floating-value .dot-online.is-offline {
    background: #f87171;
    box-shadow: none;
}

.hero-server-dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(10, 10, 18, 0.7);
    border: 1px solid var(--border);
    backdrop-filter: blur(12px);
}

.hero-server-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(255,255,255,0.26);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.hero-server-dot.is-active {
    background: var(--accent-light);
    box-shadow: 0 0 14px rgba(232,85,74,0.45);
    transform: scale(1.18);
}

.hero-scroll {
    position: absolute;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    animation: bounce-down 2s ease-in-out infinite;
}

@keyframes bounce-down {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

.hero-scroll i { font-size: 1rem; }

/* ===================== SECTIONS ===================== */
.section {
    padding: var(--layout-section-space) 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: var(--layout-section-head-space);
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background: rgba(205,60,50,0.12);
    border: 1px solid rgba(205,60,50,0.2);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--red-light);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
}

.section-title {
    font-family: var(--font-display);
    font-size: var(--layout-section-title);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: var(--layout-section-subtitle);
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ===================== COMMUNITY STATS ===================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--layout-stats-gap);
    max-width: 900px;
    margin: 0 auto;
}

.stat-card {
    position: relative;
    text-align: center;
    padding: var(--layout-stat-pad-y) var(--layout-stat-pad-x);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
    opacity: 0;
    transition: opacity var(--transition);
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md), var(--shadow-glow);
}

.stat-card:hover::before { opacity: 1; }

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--layout-stat-icon-size); height: var(--layout-stat-icon-size);
    border-radius: var(--radius-md);
    background: rgba(205,60,50,0.1);
    color: var(--red-light);
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.stat-value {
    font-family: var(--font-display);
    font-size: var(--layout-stat-value);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
    background: linear-gradient(135deg, var(--text), var(--red-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

/* ===================== SERVER CARDS ===================== */
.servers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--layout-servers-min), 1fr));
    gap: var(--layout-servers-gap);
}

.server-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
    position: relative;
}

.server-card.is-offline {
    border-color: rgba(239, 68, 68, 0.22);
    background: linear-gradient(180deg, rgba(27, 19, 22, 0.98), rgba(17, 13, 15, 0.98));
}

.server-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md), var(--shadow-glow);
}

.server-card-img {
    position: relative;
    height: 160px;
    overflow: hidden;
}

.server-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.server-card:hover .server-card-img img {
    transform: scale(1.05);
}

.server-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(10,10,15,0.9) 100%);
}

.server-card-status {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(10, 10, 18, 0.75);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}

.status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green-glow);
    animation: blink 2s ease-in-out infinite;
}

.status-dot.offline {
    background: var(--red);
    box-shadow: 0 0 8px var(--red-glow);
}

.server-card-body {
    display: grid;
    gap: 14px;
    padding: var(--layout-server-card-pad);
}

.server-card-name {
    font-family: var(--font-display);
    font-size: var(--layout-server-card-title);
    font-weight: 700;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.server-card-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
}

.server-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.server-meta-item i {
    width: 16px;
    text-align: center;
    color: var(--red-light);
    font-size: 0.75rem;
}

.server-players {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0;
}

.server-player-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.server-player-count strong {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1rem;
}

.server-player-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.server-player-status.is-online {
    background: rgba(74, 222, 128, 0.12);
    color: var(--green);
}

.server-player-status.is-offline {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.server-bar-track {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 16px;
}

.server-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--red), var(--orange));
    transition: width 1s ease;
    position: relative;
}

.server-bar-fill::after {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 10px rgba(232,112,64,0.5);
}

.server-card.is-offline .server-bar-fill {
    background: linear-gradient(90deg, #b45309, #ef4444);
}

.btn-connect.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    filter: saturate(0.8);
}

/* ===================== FEATURES ===================== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--layout-features-gap);
}

.feature-card {
    position: relative;
    padding: var(--layout-feature-pad-y) var(--layout-feature-pad-x);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: -50%; right: -50%;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(205,60,50,0.08), transparent 70%);
    transition: all var(--transition);
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}

.feature-card:hover::before {
    background: radial-gradient(circle, rgba(205,60,50,0.15), transparent 70%);
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--layout-feature-icon-size); height: var(--layout-feature-icon-size);
    border-radius: var(--radius-md);
    background: rgba(205,60,50,0.1);
    color: var(--red-light);
    font-size: 1.1rem;
    margin-bottom: 18px;
}

.feature-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.feature-card p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ===================== GLOW DIVIDER ===================== */
.glow-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
    opacity: 0.3;
    margin: 0;
}

/* ===================== DASHBOARD ===================== */
.dashboard-shell {
    padding: var(--layout-dashboard-top) 0 var(--layout-dashboard-bottom);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: var(--layout-dashboard-sidebar) 1fr;
    gap: var(--layout-dashboard-gap);
}

.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--layout-dashboard-card-pad);
}

.avatar {
    width: 90px; height: 90px;
    border-radius: var(--radius-md);
    object-fit: cover;
    border: 2px solid var(--border);
    margin-bottom: 16px;
}

.profile-card h1 {
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.profile-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.rewards-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--layout-dashboard-card-pad);
}

.rewards-card .section-head { margin-bottom: 20px; }

.delivery-list {
    display: grid;
    gap: 12px;
}

.delivery-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition);
}

.delivery-item:hover {
    border-color: var(--border-hover);
    background: rgba(255,255,255,0.04);
}

.delivery-item strong {
    display: block;
    margin-bottom: 4px;
}

.delivery-item p {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.delivery-status {
    white-space: nowrap;
}

.delivery-status-pending {
    background: rgba(240,160,48,0.12);
    color: var(--gold);
}

.delivery-status-delivered {
    background: rgba(74,222,128,0.12);
    color: var(--green);
}

/* ===================== ERROR / 404 ===================== */
.error-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
}

.error-card {
    text-align: center;
    padding: 48px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    max-width: 500px;
    width: 100%;
}

.error-card h1 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    margin-bottom: 12px;
}

.error-card p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

.eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--red-light);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}

.section-head { margin-bottom: 18px; }
.muted { color: var(--text-muted); }

/* ===================== FOOTER ===================== */
.site-footer {
    padding: var(--layout-footer-top) 0 var(--layout-footer-bottom);
    background: rgba(8, 8, 12, 0.95);
    border-top: 1px solid var(--border);
    margin-top: var(--layout-footer-margin-top);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--layout-footer-gap);
    padding-bottom: var(--layout-footer-gap);
    border-bottom: 1px solid var(--border);
}

.footer-logo {
    width: 42px; height: 42px;
    object-fit: contain;
    margin-bottom: 12px;
}

.footer-brand h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.footer-brand p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 300px;
}

.footer-links h4 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    color: var(--text);
}

.footer-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text-muted);
    padding: 6px 0;
    transition: color var(--transition);
}

.footer-links a:hover { color: var(--red-light); }

.footer-bottom {
    padding-top: 24px;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.78rem;
    color: var(--text-dim);
}

/* ===================== PROFILE DROPDOWN ===================== */
.profile-dropdown {
    position: relative;
}

.profile-cart-link {
    position: relative;
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    transition: color var(--transition), opacity var(--transition);
    margin-left: 6px;
}

.profile-cart-link:hover {
    color: var(--text);
    opacity: 0.95;
}

.profile-cart-link i {
    font-size: 0.88rem;
}

.profile-cart-link.is-adding {
    animation: cart-link-pop 0.62s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.profile-cart-link.is-adding i {
    animation: cart-icon-wiggle 0.62s ease;
}

.profile-cart-wrap {
    position: relative;
    margin-left: 6px;
}

.profile-cart-wrap.is-open::after,
.profile-cart-wrap:focus-within::after {
    content: "";
    position: absolute;
    top: 100%;
    right: -88px;
    width: 300px;
    height: 14px;
}

.profile-cart-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: -88px;
    width: 300px;
    background: rgba(12, 13, 18, 0.98);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: all 0.16s ease;
    z-index: 260;
    pointer-events: none;
}

.profile-cart-wrap:focus-within .profile-cart-dropdown,
.profile-cart-wrap.is-open .profile-cart-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.profile-cart-dropdown__head {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    font-size: 0.94rem;
    font-weight: 700;
}

.profile-cart-dropdown__head i {
    color: #ff3b3b;
}

.profile-cart-dropdown__list {
    padding: 8px 10px 4px;
    display: grid;
    gap: 6px;
}

.profile-cart-dropdown__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
}

.profile-cart-dropdown__item-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.profile-cart-dropdown__item-copy strong {
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-cart-dropdown__item-copy span {
    font-size: 0.73rem;
    color: var(--text-dim);
}

.profile-cart-dropdown__item-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.profile-cart-dropdown__item-actions strong {
    font-size: 0.8rem;
}

.profile-cart-dropdown__remove {
    background: transparent;
    border: none;
    color: #ff3b3b;
    cursor: pointer;
    font-size: 0.82rem;
}

.profile-cart-dropdown__total {
    margin: 4px 12px 0;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
}

.profile-cart-dropdown__total strong {
    font-size: 1.05rem;
    line-height: 1;
}

.profile-cart-dropdown__actions {
    padding: 0 10px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.profile-cart-dropdown__actions .btn.btn-sm {
    padding: 7px 10px;
    font-size: 0.78rem;
}

.profile-cart-dropdown__actions .btn {
    width: 100%;
}

.profile-cart-dropdown__empty {
    padding: 12px;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.profile-cart-dropdown__suggestions {
    display: grid;
    gap: 6px;
    padding: 0 10px 10px;
}

.profile-cart-dropdown__suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition);
}

.profile-cart-dropdown__suggestion:hover {
    border-color: rgba(255, 59, 59, 0.28);
    background: rgba(255, 59, 59, 0.08);
}

.profile-cart-dropdown__suggestion-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.profile-cart-dropdown__suggestion-copy strong {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-cart-dropdown__suggestion-copy small {
    font-size: 0.7rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-cart-dropdown__suggestion-price {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffd9a6;
}

.profile-cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--red);
    color: #fff;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-cart-badge.is-bump {
    animation: cart-badge-bump 0.42s ease;
}

@keyframes cart-link-pop {
    0% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-1px) scale(1.09); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes cart-icon-wiggle {
    0% { transform: rotate(0deg); }
    22% { transform: rotate(-11deg); }
    46% { transform: rotate(8deg); }
    70% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes cart-badge-bump {
    0% { transform: scale(1); }
    45% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

.profile-trigger {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    transition: opacity var(--transition);
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    max-width: 230px;
}

.profile-trigger:hover {
    opacity: 0.95;
}

[data-theme="light"] .profile-trigger {
    background: transparent;
}

.profile-trigger-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-trigger-name {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--text);
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-trigger-gems {
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: #ffd778;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.profile-trigger-gems i {
    font-size: 0.74rem;
}

.profile-trigger-arrow {
    margin-left: 2px;
    color: var(--text-dim);
    font-size: 0.68rem;
    line-height: 1;
    transition: transform 0.18s ease, color var(--transition);
}

.profile-dropdown.open .profile-trigger-arrow {
    transform: rotate(180deg);
    color: var(--text);
}

/* ── Steam Avatar with Frame ───────── */
.steam-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.steam-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.steam-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(232, 85, 74, 0.24), rgba(59, 130, 246, 0.2));
    color: rgba(255,255,255,0.82);
    border: 1px solid rgba(255,255,255,0.08);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.steam-avatar-placeholder::before {
    content: "";
    width: 34%;
    height: 34%;
    border-radius: 50%;
    background: currentColor;
    position: absolute;
    top: 20%;
    opacity: 0.92;
}

.steam-avatar-placeholder::after {
    content: "";
    width: 62%;
    height: 34%;
    border-radius: 999px 999px 12px 12px;
    background: currentColor;
    position: absolute;
    bottom: 16%;
    opacity: 0.92;
}

.steam-avatar-frame {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    object-fit: contain;
    max-width: none;
    pointer-events: none;
    z-index: 1;
}

/* Steam avatar sizes */
.steam-avatar.sa-xs   { width: 28px; height: 28px; }
.steam-avatar.sa-sm   { width: 38px; height: 38px; }
.steam-avatar.sa-md   { width: 40px; height: 40px; }
.steam-avatar.sa-lg   { width: 96px; height: 96px; }
.steam-avatar.sa-tbl  { width: 30px; height: 30px; }

.steam-avatar.sa-round .steam-avatar-img { border-radius: 50%; }
.steam-avatar.sa-sq .steam-avatar-img    { border-radius: 8px; }
.steam-avatar.sa-round .steam-avatar-placeholder { border-radius: 50%; }
.steam-avatar.sa-sq .steam-avatar-placeholder    { border-radius: 8px; }

.steam-avatar.sa-xs .steam-avatar-frame {
    inset: -8%;
    width: 116%;
    height: 116%;
}

.steam-avatar.sa-sm .steam-avatar-frame,
.steam-avatar.sa-md .steam-avatar-frame,
.steam-avatar.sa-tbl .steam-avatar-frame {
    inset: -9%;
    width: 118%;
    height: 118%;
}

.steam-avatar.sa-lg .steam-avatar-frame {
    inset: -18%;
    width: 136%;
    height: 136%;
}

.steam-avatar.sa-lg .steam-avatar-img {
    border: 3px solid var(--bg-body);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
}

.steam-avatar.sa-lg .steam-avatar-placeholder {
    border: 3px solid var(--bg-body);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
}

.steam-avatar.sa-md .steam-avatar-img {
    border: 1px solid var(--border);
}

.steam-avatar.sa-md .steam-avatar-placeholder {
    border: 1px solid var(--border);
}

.profile-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.profile-notif-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 8px var(--red-glow);
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.profile-menu {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    width: 260px;
    background: rgba(20, 20, 32, 0.97);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.97);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    overflow: hidden;
}

.profile-dropdown.open::after,
.profile-dropdown:focus-within::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 260px;
    height: 18px;
}

.profile-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.profile-menu-item:focus-visible,
.nav-link:focus-visible,
.players-page-link:focus-visible,
.server-selector-tab:focus-visible,
.player-card-link:focus-visible {
    border-radius: var(--radius-md);
}

.profile-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.profile-menu-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}

.profile-menu-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.profile-menu-id {
    font-size: 0.72rem;
    color: var(--text-dim);
    font-family: monospace;
}

.profile-menu-gems {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: #ffd778;
}

.profile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 0.88rem;
    color: var(--text-muted);
    transition: all var(--transition);
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
}

.profile-menu-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text);
}

.profile-menu-item i {
    width: 18px;
    text-align: center;
    font-size: 0.85rem;
}

.menu-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--red);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-menu-logout {
    color: var(--red-light) !important;
}

.profile-menu-logout:hover {
    background: rgba(205, 60, 50, 0.1) !important;
}

.profile-menu-form {
    margin: 0;
}

/* ===================== DASHBOARD PAGE ===================== */
.dashboard-shell {
    padding: 100px 0 80px;
}

.store-cart-shell {
    padding-top: 108px;
    padding-bottom: 80px;
}

.store-cart-shell .container {
    width: min(760px, calc(100% - 32px)) !important;
    margin-inline: auto;
}

.store-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.store-cart-title {
    margin-top: 8px;
    font-size: 1.6rem;
    font-weight: 800;
}

.store-cart-subtitle {
    margin-top: 6px;
    color: var(--text-dim);
    font-size: 0.84rem;
}

.store-cart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.store-cart-list {
    display: grid;
    gap: 12px;
}

.store-cart-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(205, 142, 25, 0.5);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(47, 32, 11, 0.52), rgba(34, 23, 10, 0.5));
}

.store-cart-item__media img,
.store-cart-item__placeholder {
    width: 56px;
    height: 56px;
    border-radius: 10px;
}

.store-cart-item__media img {
    object-fit: cover;
    border: 1px solid var(--border);
}

.store-cart-item__placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.03);
}

.store-cart-item__content h3 {
    font-size: 1rem;
    line-height: 1.15;
}

.store-cart-item__content p {
    margin-top: 2px;
    color: var(--text-dim);
    font-size: 0.78rem;
}

.store-cart-item__meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.store-cart-item__qty-label {
    color: var(--text-dim);
}

.store-cart-qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.store-cart-qty-btn {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 0;
    cursor: pointer;
    line-height: 1;
}

.store-cart-qty-btn:hover {
    color: #fff;
}

.store-cart-qty-btn i {
    font-size: 0.66rem;
}

.store-cart-qty-value {
    min-width: 12px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}

.store-cart-item__actions {
    display: grid;
    gap: 6px;
    justify-items: end;
}

.store-cart-item__actions strong {
    font-size: 0.8rem;
}

.store-cart-item__text-action {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: opacity var(--transition), color var(--transition);
}

.store-cart-item__text-action i {
    font-size: 0.72rem;
}

.store-cart-item__text-action--gift {
    color: #d7b6ff;
}

.store-cart-item__content .store-cart-item__text-action--gift {
    margin-top: 6px;
}

.store-cart-item__text-action--gift:hover {
    color: #ebd7ff;
    opacity: 0.95;
}

.store-cart-item__text-action--remove {
    color: #ff4f4f;
}

.store-cart-item__text-action--remove:hover {
    color: #ff7676;
    opacity: 0.95;
}

.store-cart-summary {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(12, 13, 18, 0.95);
    height: fit-content;
    position: static;
}

.store-cart-summary h3 {
    font-size: 1.2rem;
    font-weight: 700;
}

.store-cart-summary__line {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
}

.store-cart-summary__line span {
    font-size: 0.86rem;
}

.store-cart-summary__line strong {
    font-size: 0.84rem;
}

.store-cart-summary__hint {
    margin-top: 12px;
    color: var(--text-dim);
    font-size: 0.74rem;
}

.store-cart-summary__checkout,
.store-cart-summary__clear {
    width: 100%;
    margin-top: 14px;
}

.store-cart-summary__checkout.btn-md {
    min-height: 38px;
    font-size: 0.82rem;
    border-radius: 10px;
}

.store-cart-summary__checkout-note {
    margin-top: 10px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.68rem;
    line-height: 1.35;
}

.cart-gift-modal {
    position: relative;
    width: min(400px, calc(100% - 24px));
    padding: 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(12, 18, 31, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.26);
    box-shadow: 0 26px 56px rgba(0, 0, 0, 0.42);
}

.cart-gift-modal .modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(30, 41, 59, 0.75);
    box-shadow: none;
    backdrop-filter: none;
}

.cart-gift-modal .modal-close:hover {
    border-color: rgba(226, 232, 240, 0.55);
    background: rgba(51, 65, 85, 0.85);
}

.cart-gift-modal__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-right: 34px;
}

.cart-gift-modal__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, 0.16);
    color: #dbe7ff;
}

.cart-gift-modal__header h3 {
    margin: 0;
    font-size: 1.05rem;
}

.cart-gift-modal__header p {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--text-dim);
}

.cart-gift-modal__label {
    display: block;
    margin-top: 9px;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #e8edf8;
}

.cart-gift-modal__input {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.62);
    color: #f3f6fd;
    padding: 9px 11px;
    font-size: 0.9rem;
}

.cart-gift-modal__input::placeholder {
    color: rgba(221, 228, 244, 0.58);
}

.cart-gift-modal__input:focus {
    outline: none;
    border-color: rgba(147, 197, 253, 0.62);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.cart-gift-modal__help {
    margin-top: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.44);
    padding: 9px;
    font-size: 0.76rem;
    color: #cdd8ec;
}

.cart-gift-modal__help strong {
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cart-gift-modal__help ol {
    margin: 8px 0 8px 18px;
    padding: 0;
}

.cart-gift-modal__help li {
    margin: 2px 0;
}

.cart-gift-modal__help a {
    color: #dbe7ff;
    font-weight: 600;
    font-size: 0.76rem;
}

.cart-gift-modal__note {
    margin-top: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 9px;
    padding: 9px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.78rem;
    color: #cfd8ec;
    background: rgba(15, 23, 42, 0.36);
}

.cart-gift-modal__actions {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cart-gift-modal__actions .btn {
    width: 100%;
    min-height: 36px;
    font-size: 0.82rem;
}

.dashboard-shell .container {
    width: min(1400px, calc(100% - 40px));
}

.dash-profile-header {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: visible;
    border: 1px solid var(--border);
    margin-bottom: 32px;
    background: var(--bg-card);
}

.dash-profile-banner {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: #12141c;
    background-size: cover;
    background-position: center;
}

.dash-profile-banner.has-cover {
    background-image: var(--dash-profile-cover);
}

.dash-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,15,0.2) 0%, rgba(10,10,15,0.85) 100%);
}

.dash-profile-info {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 36px 32px;
    margin-top: -48px;
    position: relative;
    z-index: 2;
}

.dash-avatar {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-md);
    object-fit: cover;
    border: 3px solid var(--bg-body);
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

.dash-profile-text h1 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.dash-steamid {
    font-size: 0.88rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.dash-banned-tag {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: linear-gradient(135deg, #dc2626, #991b1b);
    border: 2px solid var(--bg-body, #0e1117);
    border-radius: 6px;
    white-space: nowrap;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

.dash-ban-reason {
    font-size: 0.78rem;
    color: #f87171;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.dash-profile-actions {
    margin-left: auto;
}

.dash-banner-actions {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 3;
}

.dash-banner-actions .btn {
    background: rgba(10, 10, 18, 0.6);
    backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.dash-banner-actions .btn:hover {
    background: rgba(10, 10, 18, 0.85);
    border-color: rgba(255, 255, 255, 0.3);
}

.dash-tabs-spacer {
    flex: 1;
}

/* Dashboard Tabs */
.dash-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--layout-dash-tabs-pad);
    margin-bottom: 32px;
    overflow-x: auto;
}

.dash-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--layout-dash-tab-pad-y) var(--layout-dash-tab-pad-x);
    font-size: var(--layout-dash-tab-font);
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.dash-tab:hover {
    color: var(--text);
    background: rgba(255,255,255,0.04);
}

.dash-tab.active {
    color: var(--text);
    background: rgba(205, 60, 50, 0.12);
    box-shadow: inset 0 0 0 1px rgba(205, 60, 50, 0.2);
}

.dash-tab[aria-selected="true"] {
    color: var(--text);
    background: rgba(205, 60, 50, 0.12);
    box-shadow: inset 0 0 0 1px rgba(205, 60, 50, 0.2);
}

.tab-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--red);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tab Content */
.dash-tab-content {
    display: none;
}

.dash-tab-content.active {
    display: block;
}

/* Overview Stats Grid */
.dash-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--layout-dash-overview-min), 1fr));
    gap: var(--layout-dash-overview-gap);
    margin-bottom: 24px;
}

.dash-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--layout-dash-stat-pad-y) var(--layout-dash-stat-pad-x);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition);
}

.dash-stat-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.dash-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(205, 60, 50, 0.1);
    color: var(--red-light);
    font-size: 1rem;
    flex-shrink: 0;
}

.dash-stat-info {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.dash-stat-icon.pending {
    background: rgba(240, 160, 48, 0.1);
    color: var(--gold);
}

.dash-stat-icon.delivered {
    background: rgba(74, 222, 128, 0.1);
    color: var(--green);
}

.dash-stat-icon.vip {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.dash-stat-value {
    font-family: var(--font-display);
    font-size: var(--layout-dash-stat-value);
    font-weight: 700;
    display: block;
    line-height: 1;
}

.dash-stat-label {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 0;
    line-height: 1.25;
}

/* Dashboard Section */
.dash-section {
    padding: clamp(24px, 3vw, 32px);
    margin-bottom: 32px;
}

.dash-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dash-section-title i {
    color: var(--red-light);
    font-size: 0.9rem;
}

.dash-section-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
}

.dash-section-headline .dash-section-title {
    margin-bottom: 0;
}

.dash-section-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Enhanced Delivery Items */
.delivery-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition);
}

.delivery-item:hover {
    border-color: var(--border-hover);
    background: rgba(255,255,255,0.04);
}

.delivery-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    font-size: 0.95rem;
}

.delivery-item-icon.pending {
    background: rgba(240, 160, 48, 0.1);
    color: var(--gold);
}

.delivery-item-icon.delivered {
    background: rgba(74, 222, 128, 0.1);
    color: var(--green);
}

.delivery-item-info {
    flex: 1;
    min-width: 0;
}

.delivery-item-info strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.delivery-item-info p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
}

/* Notification unread */
.notification-unread {
    border-color: rgba(205, 60, 50, 0.15);
    background: rgba(205, 60, 50, 0.03);
}

.notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 8px var(--red-glow);
    flex-shrink: 0;
}

.dash-notification-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

.dash-notification-delete {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

.dash-notification-delete:hover {
    color: #fff;
    border-color: rgba(205, 60, 50, 0.28);
    background: rgba(205, 60, 50, 0.12);
}

/* Empty State */
.dash-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--text-dim);
}

.dash-empty i {
    font-size: 2.8rem;
    margin-bottom: 14px;
    opacity: 0.4;
    display: block;
}

.dash-empty p {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.dash-empty span {
    font-size: 0.82rem;
}

/* ===================== SCROLL REVEAL ===================== */
[data-animate] {
    opacity: 1;
    transform: none;
    transition: opacity 0.35s ease;
}

[data-animate].visible {
    opacity: 1;
    transform: none;
}

/* ===================== RESPONSIVE ===================== */
@media (min-width: 1367px) {
    html {
        font-size: 14px;
    }

    .container {
        width: min(1080px, calc(100% - 36px));
    }

    .navbar-inner {
        width: min(1120px, calc(100% - 28px));
        height: 52px;
        column-gap: 10px;
    }

    .navbar-logo {
        width: 28px;
        height: 28px;
        min-width: 28px;
        max-width: 28px;
        min-height: 28px;
        max-height: 28px;
    }

    .navbar-name {
        font-size: 0.98rem;
    }

    .navbar-nav__center {
        gap: 1px;
    }

    .nav-link {
        padding: 3px 6px;
        font-size: 0.98rem;
    }

    .nav-icon {
        height: 14px;
    }

    .navbar-actions {
        gap: 5px;
    }

    .profile-trigger {
        height: 36px;
        max-width: 200px;
        gap: 6px;
    }

    .profile-trigger-name {
        max-width: 80px;
        font-size: 0.88rem;
    }

    .profile-trigger-gems {
        font-size: 0.74rem;
    }

    .hero-content {
        padding: 0 0 76px;
    }

    .hero-top-strip {
        margin-bottom: 56px;
    }

    .hero-inner {
        gap: 42px;
    }

    .hero-title {
        font-size: clamp(2.4rem, 5vw, 4.5rem);
        margin-bottom: 16px;
    }

    .hero-desc {
        font-size: 0.96rem;
        max-width: 460px;
        margin-bottom: 24px;
    }

    .hero-actions {
        gap: 12px;
    }

    .hero-visual-servers {
        transform: translateX(88px);
    }

    .hero-card-shell {
        width: min(100%, 560px);
        padding-bottom: 48px;
    }

    .hero-orbit-tag {
        min-width: 210px;
        padding: 12px 16px;
        gap: 10px;
    }

    .hero-orbit-tag strong {
        font-size: 0.88rem;
    }

    .hero-orbit-tag-icon {
        width: 38px;
        height: 38px;
        font-size: 0.92rem;
    }

    .section {
        padding: 64px 0;
    }

    .section-header {
        margin-bottom: 38px;
    }

    .section-title {
        font-size: clamp(1.7rem, 3vw, 2.45rem);
    }

    .section-subtitle {
        font-size: 0.96rem;
    }

    .stats-grid,
    .features-grid {
        gap: 16px;
    }

    .stat-card {
        padding: 26px 18px;
    }

    .stat-icon {
        width: 46px;
        height: 46px;
        font-size: 1.05rem;
    }

    .stat-value {
        font-size: 2.2rem;
    }

    .servers-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
    }

    .server-card-body {
        padding: 18px;
        gap: 12px;
    }

    .server-card-name {
        font-size: 1.05rem;
    }

    .feature-card {
        padding: 24px 20px;
    }

    .feature-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }

    .dashboard-shell {
        padding: 88px 0 60px;
    }

    .dashboard-grid {
        grid-template-columns: 270px 1fr;
        gap: 18px;
    }

    .profile-card,
    .rewards-card {
        padding: 20px;
    }

    .avatar {
        width: 78px;
        height: 78px;
    }

    .dash-tabs {
        padding: 4px;
        margin-bottom: 22px;
    }

    .dash-tab {
        padding: 9px 16px;
        font-size: 0.84rem;
    }

    .dash-overview-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
    }

    .dash-stat-card {
        padding: 16px 14px;
    }

    .dash-stat-value {
        font-size: 1.4rem;
    }

    .dash-section {
        margin-bottom: 24px;
    }

    .delivery-item {
        padding: 14px 16px;
    }

    .site-footer {
        padding: 52px 0 26px;
        margin-top: 28px;
    }

    .footer-grid {
        gap: 24px;
        padding-bottom: 28px;
    }

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

    .srv-hero-content {
        gap: 24px;
        padding-top: 104px;
        padding-bottom: 42px;
    }

    .srv-hero-text .section-title {
        font-size: 2.3rem;
    }

    .srv-hero-gif {
        width: 260px;
    }

    .srv-stats-row {
        gap: 14px;
    }

    .srv-stat-pill {
        min-width: 150px;
        padding: 12px 18px;
    }

    .srv-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 18px;
    }

    .srv-card-banner {
        height: 150px;
    }

    .srv-card-content {
        padding: 16px 16px 0;
    }

    .srv-card-footer {
        padding: 14px 16px 16px;
    }

    .players-page {
        padding: 112px 0 56px;
    }

    .players-title {
        font-size: clamp(2.1rem, 4vw, 3.3rem);
    }

    .players-subtitle {
        font-size: 0.92rem;
        max-width: 640px;
    }

    .players-filters {
        grid-template-columns: minmax(220px, 1.15fr) minmax(190px, 0.85fr) minmax(190px, 0.85fr) auto;
        gap: 12px;
    }

    .players-search-group input,
    .players-select-group select {
        height: 46px;
    }

    .players-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .player-card {
        min-height: 182px;
        padding: 16px 12px;
    }

    .store-shell {
        padding: 108px 0 48px;
    }

    .store-shell .container {
        width: min(1360px, calc(100% - 36px));
    }

    .store-shell .page-header {
        margin-bottom: 18px;
    }

    .store-trust-strip {
        margin-bottom: 18px;
    }

    .store-hero-panel {
        grid-template-columns: minmax(0, 1.3fr) minmax(240px, 320px);
        gap: 14px;
        margin-bottom: 22px;
        padding: 20px;
        border-radius: 22px;
    }

    .store-hero-copy h2,
    .store-bundle-copy h2 {
        font-size: clamp(1.9rem, 3vw, 2.9rem);
    }

    .store-hero-copy p,
    .store-bundle-copy p {
        font-size: 0.9rem;
    }

    .store-hero-actions .btn,
    .store-bundle-price .btn {
        min-height: 42px;
        padding-inline: 16px;
    }

    .store-hero-metric {
        min-height: 120px;
        padding: 14px;
    }

    .store-hero-metric--accent {
        min-height: 140px;
    }

    .store-hero-metric small {
        font-size: 0.8rem;
    }

    .server-selector {
        gap: 12px;
        margin-bottom: 26px;
    }

    .server-selector-tabs {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
    }

    .server-selector-tab {
        min-height: 64px;
        padding: 12px 14px;
        border-radius: 16px;
    }

    .server-selector-name {
        font-size: 1rem;
    }

    .store-category {
        margin-bottom: 28px;
    }

    .store-search-bar {
        gap: 12px;
        margin-bottom: 20px;
        padding: 14px 16px;
    }

    .store-search-input {
        min-height: 46px;
        font-size: 0.9rem;
    }

    .store-filter-chip {
        min-height: 38px;
        padding: 0 14px;
        font-size: 0.78rem;
    }

    .store-grid {
        grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
        gap: 14px;
    }

    .store-grid--locked {
        grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
    }

    .store-grid--resources {
        grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    }

    .store-grid--ranks .store-card {
        flex: 0 0 264px;
    }

    .store-card {
        border-radius: 16px;
    }

    .store-card-inner {
        padding: 13px 13px 10px;
        gap: 10px;
    }

    .store-card-title {
        font-size: 1.18rem;
    }

    .store-card-desc,
    .store-card-features li {
        font-size: 0.76rem;
    }

    .store-card-price-main {
        font-size: 1.5rem;
    }

    .store-card-footer {
        padding: 0 13px 13px;
    }

    .store-card-btn-primary {
        min-height: 38px;
        font-size: 0.74rem;
    }

    .store-card-btn-secondary {
        min-height: 34px;
        font-size: 0.72rem;
    }

    .store-card-gems-media {
        width: 72px;
        height: 72px;
    }

    .store-card-title--gems {
        font-size: 1.42rem;
    }

    .store-bundle-banner {
        gap: 12px;
        margin-bottom: 26px;
        padding: 18px 20px;
        border-radius: 20px;
    }
}

@media (max-width: 1366px) {
    html {
        font-size: 15px;
    }

    .container {
        width: min(1120px, calc(100% - 32px));
    }

    .navbar-inner {
        width: min(1180px, calc(100% - 20px));
        height: 54px;
        column-gap: 10px;
    }

    .navbar-logo {
        width: 28px;
        height: 28px;
        min-width: 28px;
        max-width: 28px;
        min-height: 28px;
        max-height: 28px;
    }

    .navbar-name {
        font-size: 0.98rem;
    }

    .navbar-nav__center {
        gap: 1px;
    }

    .nav-link {
        padding: 7px 12px;
        font-size: 0.92rem;
    }

    .navbar-actions {
        gap: 5px;
    }

    .profile-trigger {
        height: 36px;
        gap: 6px;
    }

    .profile-trigger-name {
        padding: 4px 7px;
        font-size: 0.96rem;
    }

    .profile-trigger-gems {
        height: 36px;
        gap: 6px;
    }

    .section {
        padding: 68px 0;
    }

    .section-header {
        margin-bottom: 38px;
    }

    .hero-top-strip {
        margin-bottom: 68px;
    }

    .hero-inner {
        gap: 32px;
    }

    .stats-grid,
    .features-grid {
        gap: 18px;
    }

    .servers-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 18px;
    }

    .stat-card {
        padding: 28px 18px;
    }

    .stat-value {
        font-size: 2.3rem;
    }

    .server-card-body {
        padding: 18px;
        gap: 12px;
    }

    .feature-card {
        padding: 26px 22px;
    }

    .dashboard-shell {
        padding: 92px 0 64px;
    }

    .dashboard-grid {
        grid-template-columns: 280px 1fr;
        gap: 20px;
    }

    .profile-card,
    .rewards-card {
        padding: 22px;
    }

    .dash-tabs {
        padding: 5px;
        margin-bottom: 24px;
    }

    .dash-tab {
        padding: 10px 18px;
    }

    .dash-section {
        margin-bottom: 24px;
    }

    .site-footer {
        margin-top: 28px;
    }

    .footer-grid {
        gap: 28px;
        padding-bottom: 28px;
    }

    .srv-hero-content {
        gap: 28px;
        padding-top: 108px;
        padding-bottom: 48px;
    }

    .srv-hero-text .section-title {
        font-size: 2.45rem;
    }

    .srv-hero-gif {
        width: 280px;
    }

    .srv-stats-row {
        gap: 16px;
    }

    .srv-stat-pill {
        min-width: 160px;
        padding: 14px 22px;
    }

    .srv-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 20px;
    }

    .srv-card-content {
        padding: 18px 18px 0;
    }

    .srv-card-footer {
        padding: 14px 18px 18px;
    }

    .players-page {
        padding: 118px 0 60px;
    }

    .players-filters {
        grid-template-columns: minmax(220px, 1.15fr) minmax(180px, 0.85fr) minmax(180px, 0.85fr) auto;
        gap: 12px;
    }

    .players-search-group input,
    .players-select-group select {
        height: 48px;
    }

    .players-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .player-card {
        min-height: 196px;
        padding: 18px 14px;
    }

    .store-shell {
        padding: 110px 0 52px;
    }

    .store-shell .container {
        width: min(1480px, calc(100% - 32px));
    }

    .store-hero-panel {
        grid-template-columns: minmax(0, 1.35fr) minmax(260px, 360px);
        gap: 16px;
        padding: 22px;
        border-radius: 24px;
    }

    .store-hero-copy {
        gap: 12px;
    }

    .store-hero-copy p,
    .store-bundle-copy p {
        font-size: 0.92rem;
    }

    .store-hero-metric {
        min-height: 132px;
        padding: 16px;
    }

    .store-hero-metric--accent {
        min-height: 152px;
    }

    .server-selector-tabs {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 12px;
    }

    .server-selector-tab {
        min-height: 70px;
        padding: 14px 16px;
    }

    .server-selector-name {
        font-size: 1.1rem;
    }

    .store-search-bar {
        gap: 12px;
        padding: 16px 18px;
    }

    .store-grid {
        grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
        gap: 16px;
    }

    .store-grid--locked {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    .store-grid--resources {
        grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
    }

    .store-grid--ranks .store-card {
        flex: 0 0 280px;
    }

    .store-card-inner {
        padding: 14px 14px 10px;
        gap: 11px;
    }

    .store-card-title {
        font-size: 1.26rem;
    }

    .store-card-desc,
    .store-card-features li {
        font-size: 0.78rem;
    }

    .store-card-price-main {
        font-size: 1.6rem;
    }

    .store-card-footer {
        padding: 0 14px 14px;
    }

    .store-card-btn-primary {
        min-height: 40px;
        font-size: 0.76rem;
    }

    .store-card-gems-media {
        width: 76px;
        height: 76px;
    }

    .store-card-title--gems {
        font-size: 1.5rem;
    }

    .store-bundle-banner {
        gap: 14px;
        padding: 20px 22px;
        border-radius: 22px;
    }
}

@media (max-width: 1180px) {
    html {
        font-size: 14px;
    }

    .container {
        width: min(1040px, calc(100% - 28px));
    }

    .navbar-inner {
        width: min(1060px, calc(100% - 16px));
        height: 52px;
        column-gap: 8px;
    }

    .navbar-logo {
        width: 26px;
        height: 26px;
        min-width: 26px;
        max-width: 26px;
        min-height: 26px;
        max-height: 26px;
    }

    .navbar-name {
        font-size: 0.92rem;
    }

    .navbar-nav__center {
        gap: 0;
    }

    .nav-link {
        padding: 4px 6px;
        font-size: 0.86rem;
    }

    .navbar-actions {
        gap: 4px;
    }

    .dashboard-grid {
        grid-template-columns: 260px 1fr;
    }

    .stats-grid {
        max-width: none;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .srv-stat-pill {
        min-width: 0;
        flex: 1 1 220px;
    }

    .players-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .players-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .store-hero-panel {
        grid-template-columns: 1fr;
    }

    .store-hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .server-selector-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .store-search-bar {
        grid-template-columns: 1fr;
    }

    .store-filter-chips {
        justify-content: flex-start;
    }
}

@media (max-width: 1024px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }

    .hero-visual {
        max-width: 500px;
        margin: 0 auto;
    }

    .hero-visual-servers {
        width: min(100%, 560px);
        transform: none;
    }

    .hero-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-card-copy {
        text-align: left;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .footer-brand { grid-column: 1 / -1; }

    .dash-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .navbar-toggle { display: flex; }

    .navbar-actions {
        margin-left: auto;
        padding-right: 44px;
    }

    .navbar-nav {
        position: fixed;
        top: 0; right: -100%;
        width: 280px; height: 100vh;
        flex-direction: column;
        align-items: flex-start;
        padding: 90px 24px 30px;
        background: rgba(10, 10, 15, 0.97);
        backdrop-filter: blur(20px);
        border-left: 1px solid var(--border);
        transition: right var(--transition);
        gap: 4px;
    }

    .navbar-nav__center {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .navbar-nav.open { right: 0; }

    .nav-link {
        width: 100%;
        padding: 12px 16px;
        font-size: 0.95rem;
    }

    .nav-link--store {
        justify-content: center;
    }

    .hero {
        min-height: auto;
        padding-bottom: 48px;
    }

    .hero-content {
        padding-top: 8px;
    }

    .hero-top-strip {
        margin-bottom: 20px;
    }

    .hero-floating-stat { display: none; }

    .hero-visual {
        width: min(100%, 420px);
    }

    .hero-visual-servers {
        width: min(100%, 420px);
        transform: none;
    }

    .hero-card-preview {
        min-height: 320px;
    }

    .hero-card-copy {
        inset: auto 16px 16px 16px;
        padding: 14px 16px;
        gap: 10px;
    }

    .hero-server-dots {
        bottom: 8px;
        padding: 8px 12px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
    }

    .servers-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }

    .dash-overview-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dash-profile-info {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .dash-profile-actions {
        margin-left: 0;
    }

    .dash-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
        overflow: visible;
    }

    .dash-tabs-spacer {
        display: none;
    }

    .dash-tab,
    .theme-toggle {
        width: 100%;
        justify-content: center;
    }

    .dash-section {
        padding: 22px 18px;
    }

    .dash-section-headline {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .dash-section-actions {
        width: 100%;
    }

    .delivery-item {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 14px;
        padding: 16px;
    }

    .delivery-item-info {
        flex-basis: calc(100% - 58px);
    }

    .delivery-status,
    .dash-notification-actions {
        margin-left: 58px;
    }

    .server-card-body {
        padding: 18px;
        gap: 12px;
    }

    .server-players {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-dropdown {
        position: fixed;
        right: 58px;
        top: 18px;
        z-index: 102;
    }

    .profile-cart-link {
        position: fixed;
        right: 22px;
        top: 28px;
        z-index: 102;
        margin-left: 0;
    }

    .profile-cart-link i {
        font-size: 0.82rem;
    }

    .profile-cart-wrap {
        position: fixed;
        right: 22px;
        top: 28px;
        z-index: 102;
        margin-left: 0;
    }

    .profile-cart-dropdown {
        right: 0;
        width: 320px;
    }

    .profile-trigger {
        padding-right: 8px;
    }

    .profile-trigger-name {
        max-width: 70px;
    }

    .profile-trigger-gems {
        font-size: 0.74rem;
    }

    .profile-trigger-arrow {
        font-size: 0.64rem;
    }

    .store-cart-grid {
        grid-template-columns: 1fr;
    }

    .store-cart-summary {
        position: static;
    }
}

@media (max-width: 768px) {
    [data-theme="light"] .navbar-nav {
        background: rgba(255, 255, 255, 0.97);
    }
}

@media (max-width: 480px) {
    .container { width: calc(100% - 24px); }
    .hero-title { font-size: 2.2rem; }
    .section-title { font-size: 1.5rem; }

    .hero-actions {

    .hero-tags-row--top {
        margin-bottom: 14px;
    }

        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-card-preview {
        min-height: 280px;
    }

    .dash-overview-grid {
        grid-template-columns: 1fr;
    }

    .dash-tabs {
        grid-template-columns: 1fr;
    }

    .dash-profile-info {
        padding: 0 20px 24px;
    }

    .delivery-item-info,
    .delivery-status,
    .dash-notification-actions {
        flex-basis: 100%;
        margin-left: 0;
    }

    .profile-dropdown {
        right: 54px;
        top: 16px;
    }

    .profile-cart-link {
        right: 0;
        top: 0;
    }

    .profile-cart-link i {
        font-size: 0.78rem;
    }

    .profile-cart-wrap {
        right: 18px;
        top: 24px;
    }

    .profile-cart-dropdown {
        width: 300px;
        right: -8px;
    }

    .profile-cart-dropdown__total strong {
        font-size: 1.6rem;
    }

    .profile-trigger {
        height: 38px;
        padding: 4px 8px 4px 5px;
        gap: 6px;
    }

    .profile-trigger-name {
        max-width: 52px;
        font-size: 0.84rem;
    }

    .profile-trigger-gems {
        font-size: 0.68rem;
        gap: 4px;
    }

    .profile-trigger-arrow {
        font-size: 0.6rem;
    }

    .store-cart-head {
        flex-direction: column;
        align-items: stretch;
    }

    .store-cart-title {
        font-size: 1.8rem;
    }

    .store-cart-item {
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: start;
    }

    .store-cart-item__media img,
    .store-cart-item__placeholder {
        width: 64px;
        height: 64px;
    }

    .store-cart-item__actions {
        grid-column: 1 / -1;
        justify-items: stretch;
    }
}

/* ===================================
   SERVERS PAGE  (v2 – modern glow)
   =================================== */

/* ---------- Hero ---------- */
.srv-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.srv-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.srv-hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.srv-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(14, 14, 22, 0.35) 0%,
        rgba(14, 14, 22, 0.65) 55%,
        var(--bg-body) 100%);
}

.srv-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-top: 120px;
    padding-bottom: 60px;
}

.srv-hero-text { max-width: 520px; }

.srv-hero-text .section-title {
    font-size: 2.8rem;
    margin-bottom: 8px;
}

.text-accent { color: var(--accent); }

.srv-hero-visual {
    flex-shrink: 0;
}

.srv-hero-gif {
    width: 320px;
    border-radius: 18px;
    border: 2px solid rgba(205, 65, 50, 0.25);
    box-shadow: 0 0 50px rgba(205, 65, 50, 0.22),
               0 0 100px rgba(205, 65, 50, 0.08);
}

/* ---------- Floating stats bar ---------- */
.srv-hero-stats {
    position: relative;
    z-index: 3;
    padding-bottom: 40px;
}

.srv-stats-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.srv-stat-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 32px;
    background: rgba(28, 28, 44, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
               0 0 0 1px rgba(255, 255, 255, 0.04);
    min-width: 180px;
}

.srv-stat-pill-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.2rem;
    background: rgba(205, 65, 50, 0.2);
    color: var(--accent);
    box-shadow: 0 0 12px rgba(205, 65, 50, 0.15);
}

.srv-stat-pill-icon.green {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}

.srv-stat-pill-icon.gold {
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.15);
}

.srv-stat-pill-data {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.srv-stat-pill-data strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}

.srv-stat-pill-data span {
    font-size: 0.78rem;
    color: #9a9ab4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------- Section ---------- */
.srv-section {
    padding: 40px 0 60px;
}

/* ---------- Grid ---------- */
.srv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 28px;
}

/* ---------- Card v2 ---------- */
.srv-card-v2 {
    position: relative;
    background: rgba(26, 26, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.srv-card-v2:hover {
    transform: translateY(-6px);
    border-color: rgba(205, 65, 50, 0.5);
    box-shadow: 0 8px 40px rgba(205, 65, 50, 0.2),
                0 0 0 1px rgba(205, 65, 50, 0.3),
                0 0 80px rgba(205, 65, 50, 0.08);
}

.srv-card-v2.is-offline {
    opacity: 0.72;
    filter: saturate(0.55);
}

.srv-card-v2.is-offline:hover {
    opacity: 0.9;
    filter: saturate(0.8);
}

/* Card inner sits above glow */
.srv-card-banner {
    position: relative;
    z-index: 1;
}

.srv-card-content,
.srv-card-footer {
    position: relative;
    z-index: 1;
}

/* ---------- Banner image ---------- */
.srv-card-banner {
    position: relative;
    height: 170px;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
}

.srv-card-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.srv-card-v2:hover .srv-card-banner-img {
    transform: scale(1.08);
}

.srv-card-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 40%,
        rgba(26, 26, 42, 0.85) 100%);
}

/* Status badge */
.srv-card-status-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.srv-card-status-badge.online {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.srv-card-status-badge.offline {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.srv-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.srv-card-status-badge.online .srv-pulse {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
    animation: srvPulse 2s ease-in-out infinite;
}

.srv-card-status-badge.offline .srv-pulse {
    background: #ef4444;
}

@keyframes srvPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

/* Player badge */
.srv-card-players-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(205, 65, 50, 0.18);
    color: var(--accent);
    border: 1px solid rgba(205, 65, 50, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ---------- Card content ---------- */
.srv-card-content {
    padding: 22px 22px 0;
    background: rgba(26, 26, 42, 0.95);
}

.srv-card-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.srv-card-desc {
    color: #b0b0c4;
    font-size: 0.84rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Info grid */
.srv-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}

.srv-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.srv-info-item > i {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 0.88rem;
    background: rgba(205, 65, 50, 0.15);
    color: #e8554a;
    flex-shrink: 0;
}

.srv-info-item > div { display: flex; flex-direction: column; }

.srv-info-val {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #eee;
    line-height: 1.2;
}

.srv-info-label {
    font-size: 0.72rem;
    color: #8a8aa2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Player bar */
.srv-progress { margin-bottom: 6px; }

.srv-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #9a9ab2;
    margin-bottom: 6px;
}

.srv-progress-pct {
    font-weight: 700;
    color: var(--accent);
}

.srv-progress-track {
    width: 100%;
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.srv-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), #ff6b4a);
    box-shadow: 0 0 10px rgba(205, 65, 50, 0.4);
    transition: width 0.6s ease;
}

/* ---------- Card footer ---------- */
.srv-card-footer {
    display: flex;
    gap: 10px;
    padding: 18px 22px 22px;
    background: rgba(26, 26, 42, 0.95);
}

.srv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
}

.srv-btn-connect {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 20px rgba(205, 65, 50, 0.35);
}

.srv-btn-connect:hover {
    background: #b83a2a;
    box-shadow: 0 8px 30px rgba(205, 65, 50, 0.5);
    transform: translateY(-2px);
    color: #fff;
}

.srv-btn-offline {
    background: rgba(255, 255, 255, 0.08);
    color: #888;
    cursor: not-allowed;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.srv-btn-store {
    background: rgba(255, 255, 255, 0.04);
    color: #c0c0d0;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.srv-btn-store:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(205, 65, 50, 0.08);
}

/* ---------- Public Luna-style servers ---------- */
.srv-list-shell {
    max-width: 1080px;
    margin: 0 auto;
}

.srv-list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 18px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.srv-list-kicker {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #6c748c;
}

.srv-list-head h2 {
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2rem, 4vw, 2.5rem);
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.srv-list-counter {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-transform: uppercase;
}

.srv-list-counter span {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #606884;
}

.srv-list-counter strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    color: #fff;
}

.srv-luna-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 22px;
}

.srv-luna-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 380px;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(18, 20, 30, 0.92);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.srv-luna-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42);
}

.srv-luna-card.is-offline {
    opacity: 0.78;
    filter: saturate(0.78);
}

.srv-luna-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.srv-luna-card__banner {
    position: relative;
    min-height: 156px;
    padding: 18px;
    background: var(--srv-banner, linear-gradient(135deg, rgba(17, 24, 39, 0.96), rgba(31, 41, 55, 0.82)));
}

.srv-luna-card__banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(10, 12, 20, 0.82)),
        url('/rust/img/background.png') center/cover no-repeat;
    opacity: 0.32;
    transition: transform 0.7s ease, opacity 0.4s ease;
}

.srv-luna-card:hover .srv-luna-card__banner::before {
    transform: scale(1.06);
    opacity: 0.42;
}

.srv-luna-card__banner::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 70%;
    background: linear-gradient(180deg, transparent, rgba(17, 18, 28, 0.94));
}

.srv-luna-card__topbar,
.srv-luna-card__body {
    position: relative;
    z-index: 2;
}

.srv-luna-card__topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.srv-copy-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(8, 10, 18, 0.62);
    color: #e8edf8;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.srv-copy-btn:hover {
    background: rgba(232, 85, 74, 0.18);
    border-color: rgba(232, 85, 74, 0.42);
    color: #fff;
}

.srv-luna-card__chip,
.srv-detail-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(8, 10, 18, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.srv-luna-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    gap: 18px;
}

.srv-luna-card__identity h3 {
    margin: 0 0 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
    line-height: 0.95;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.srv-luna-card__identity p {
    margin: 0;
    color: #98a1b9;
    font-size: 0.92rem;
    line-height: 1.6;
}

.srv-luna-card__status-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8a93ac;
}

.srv-luna-card__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

.srv-luna-card__status-dot.is-online {
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.45);
}

.srv-luna-card__players {
    display: grid;
    gap: 10px;
}

.srv-luna-card__players-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.srv-luna-card__players-head span,
.srv-luna-card__footer-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #66708b;
}

.srv-luna-card__players-head strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
}

.srv-luna-card__progress,
.srv-detail-progress {
    position: relative;
    overflow: hidden;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.srv-luna-card__progress-fill,
.srv-detail-progress__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(72, 232, 171, 0.96), rgba(232, 85, 74, 0.96));
    box-shadow: 0 0 18px rgba(72, 232, 171, 0.22);
    transition: width 0.5s ease;
}

.srv-luna-card__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.srv-luna-card__stats {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.srv-luna-card__stats span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #aab3ca;
}

.srv-luna-card__stats b {
    color: #e8554a;
}

.srv-detail-page {
    position: relative;
    overflow: hidden;
    padding: 34px 0 72px;
}

.srv-detail-page .container {
    width: min(1280px, calc(100% - 44px));
}

.srv-detail-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top, rgba(72, 232, 171, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(5, 9, 18, 0.18), rgba(5, 9, 18, 0.74) 24%, rgba(7, 10, 19, 0.96));
    pointer-events: none;
}

.srv-detail-shell {
    position: relative;
    z-index: 1;
}

.srv-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #9ca6bf;
    font-size: 0.86rem;
}

.srv-breadcrumb a {
    color: #d7def1;
    text-decoration: none;
}

.srv-detail-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-height: 300px;
    padding: 30px 34px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(12, 16, 28, 0.48), rgba(12, 16, 28, 0.34)),
        var(--srv-banner, linear-gradient(140deg, rgba(17, 24, 39, 0.92), rgba(31, 41, 55, 0.72)));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

.srv-detail-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.srv-detail-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.66;
    transform: scale(1.04);
    filter: saturate(1.02) contrast(1.06) brightness(0.74);
}

.srv-detail-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 11, 18, 0.88) 0%, rgba(8, 11, 18, 0.58) 38%, rgba(8, 11, 18, 0.42) 62%, rgba(8, 11, 18, 0.74) 100%),
        linear-gradient(180deg, rgba(7, 10, 16, 0.16) 0%, rgba(10, 13, 20, 0.22) 50%, rgba(8, 11, 18, 0.62) 100%);
}

.srv-detail-hero__copy,
.srv-detail-hero__actions {
    position: relative;
    z-index: 1;
}

.srv-detail-hero__copy {
    display: grid;
    align-content: end;
    justify-items: start;
    min-height: 220px;
    gap: 8px;
}

.srv-detail-hero__status {
    justify-self: start;
    width: fit-content;
    padding: 6px 12px;
    gap: 7px;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    background: rgba(9, 12, 20, 0.52);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.01);
}

.srv-detail-hero__copy h1 {
    margin: 10px 0 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2.8rem, 6vw, 4.8rem);
    line-height: 0.92;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.srv-detail-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: #dbe3f7;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
}

.srv-detail-hero__meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.96rem;
    line-height: 1;
}

.srv-detail-hero__meta-item {
    color: #eef2ff;
}

.srv-detail-hero__meta-separator {
    color: rgba(255, 255, 255, 0.36);
    font-weight: 400;
}

.srv-detail-hero__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.srv-detail-command,
.srv-detail-rank-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    color: #dbe3f7;
}

.srv-detail-command {
    min-width: 292px;
    width: fit-content;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    text-align: left;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.srv-detail-command:hover {
    transform: translateY(-1px);
    border-color: rgba(232, 85, 74, 0.34);
    background: rgba(232, 85, 74, 0.08);
}

.srv-detail-command:focus-visible {
    outline: 2px solid rgba(255, 112, 92, 0.72);
    outline-offset: 2px;
}

.srv-detail-command span {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7c87a4;
}

.srv-detail-command code {
    color: #fff;
    font-size: 0.92rem;
}

.srv-detail-rank-card {
    min-width: 210px;
    width: 210px;
    margin-left: auto;
    justify-content: center;
    padding: 14px 22px;
    border: 1px solid rgba(255, 132, 96, 0.32);
    background: linear-gradient(135deg, rgba(232, 85, 74, 0.92), rgba(255, 132, 96, 0.92));
    box-shadow: 0 18px 34px rgba(232, 85, 74, 0.18);
    cursor: default;
}

.srv-detail-rank-card__emoji {
    font-size: 0.96rem;
    line-height: 1;
}

.srv-detail-rank-card strong {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
}

.srv-copy-btn--hero,
.srv-detail-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    color: #eef2ff;
    font-weight: 700;
    text-decoration: none;
}

.srv-detail-action--primary {
    background: linear-gradient(135deg, rgba(232, 85, 74, 0.92), rgba(255, 112, 92, 0.92));
    border-color: rgba(255, 112, 92, 0.55);
    box-shadow: 0 16px 32px rgba(232, 85, 74, 0.22);
}

.srv-detail-action.is-disabled {
    opacity: 0.62;
    pointer-events: none;
}

.srv-detail-card {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 18, 28, 0.88);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.srv-detail-card__eyebrow,
.srv-detail-card__hint,
.srv-detail-fact span {
    display: block;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6d7792;
}

.srv-detail-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.82fr) minmax(240px, 276px);
    gap: 16px;
    align-items: start;
}

.srv-detail-card--leaderboard,
.srv-detail-card--killfeed {
    border-color: rgba(255, 255, 255, 0.10);
    background: linear-gradient(180deg, rgba(22, 26, 38, 0.97), rgba(18, 22, 33, 0.95));
    min-height: 100%;
}

.srv-detail-card--server-map {
    position: relative;
    padding: 20px;
    overflow: hidden;
    border-color: rgba(109, 178, 255, 0.18);
    background:
        radial-gradient(circle at top right, rgba(62, 142, 255, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(20, 25, 39, 0.98), rgba(14, 18, 29, 0.96));
}

.srv-server-map__head {
    align-items: center;
    position: relative;
    margin: -20px -20px 18px;
    padding: 16px 20px 14px;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(90deg, rgba(133, 84, 35, 0.42) 0%, rgba(83, 62, 39, 0.28) 38%, rgba(32, 44, 67, 0.34) 100%);
    border-bottom: 1px solid rgba(255, 168, 82, 0.12);
}

.srv-server-map__head::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 159, 78, 0.18) 0%, rgba(255, 159, 78, 0.08) 34%, rgba(104, 162, 255, 0.08) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.srv-server-map__head > * {
    position: relative;
    z-index: 1;
}

.srv-server-map__head > div {
    display: grid;
    gap: 8px;
}

.srv-server-map__subtitle {
    margin: 0;
    color: #d3ddf4;
    font-size: 0.84rem;
    font-weight: 700;
}

.srv-server-map {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
    gap: 18px;
    align-items: start;
}

.srv-server-map__media {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top left, rgba(99, 175, 255, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(14, 19, 29, 0.96), rgba(10, 14, 24, 0.98));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.srv-server-map__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
}

.srv-server-map__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 11, 18, 0.06) 0%, rgba(7, 11, 18, 0) 38%, rgba(7, 11, 18, 0.54) 100%),
        linear-gradient(90deg, rgba(7, 11, 18, 0.42), rgba(7, 11, 18, 0) 28%);
    pointer-events: none;
}

.srv-server-map__media.is-empty {
    display: grid;
    place-items: center;
}

.srv-server-map__placeholder {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    width: min(100%, 360px);
    padding: 28px;
    justify-items: start;
}

.srv-server-map__placeholder i {
    font-size: 1.8rem;
    color: #7eb4ff;
}

.srv-server-map__placeholder strong {
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 900;
}

.srv-server-map__placeholder p {
    margin: 0;
    color: #9aa7c5;
    line-height: 1.55;
}

.srv-server-map__media-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.srv-server-map__chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(10, 14, 24, 0.64);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #eef4ff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.srv-server-map__aside {
    display: grid;
    gap: 16px;
    align-content: start;
}

.srv-server-map__cta {
    display: inline-grid;
    gap: 3px;
    min-width: 224px;
    padding: 13px 16px;
    border-radius: 16px;
    border: 1px solid rgba(90, 168, 255, 0.28);
    background: linear-gradient(135deg, rgba(44, 112, 198, 0.86), rgba(96, 175, 255, 0.88));
    box-shadow: 0 16px 34px rgba(30, 75, 138, 0.26);
    color: #ffffff;
    text-decoration: none;
}

.srv-server-map__cta span {
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.srv-server-map__cta strong {
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 900;
}

.srv-server-map__meta,
.srv-server-map__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.srv-server-map__meta-item,
.srv-server-map__stat {
    display: grid;
    gap: 8px;
    min-height: 96px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.srv-server-map__meta-item span,
.srv-server-map__stat span,
.srv-server-map__biomes-head span {
    color: #7d8daf;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.srv-server-map__meta-item strong {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.srv-server-map__stat strong {
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.srv-server-map__biomes {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.035);
}

.srv-server-map__biomes-head {
    display: grid;
    gap: 6px;
}

.srv-server-map__biomes-head strong,
.srv-server-map__biome-top strong,
.srv-server-map__biome-top span {
    color: #f5f8ff;
}

.srv-server-map__biomes-list {
    display: grid;
    gap: 12px;
}

.srv-server-map__biome {
    --srv-biome-color: #7eb4ff;
    display: grid;
    gap: 8px;
}

.srv-server-map__biome.is-forest {
    --srv-biome-color: #4bd27c;
}

.srv-server-map__biome.is-desert {
    --srv-biome-color: #f7c35f;
}

.srv-server-map__biome.is-snow {
    --srv-biome-color: #d5e9ff;
}

.srv-server-map__biome.is-tundra {
    --srv-biome-color: #6cd4ff;
}

.srv-server-map__biome.is-jungle {
    --srv-biome-color: #22c55e;
}

.srv-server-map__biome-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.srv-server-map__biome-top strong {
    font-size: 0.96rem;
    font-weight: 800;
}

.srv-server-map__biome-top span {
    color: #d5def3;
    font-size: 0.88rem;
    font-weight: 800;
}

.srv-server-map__biome-bar {
    position: relative;
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.srv-server-map__biome-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--srv-biome-color), color-mix(in srgb, var(--srv-biome-color) 72%, white));
    box-shadow: 0 0 14px color-mix(in srgb, var(--srv-biome-color) 28%, transparent);
}

.srv-server-map__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-left: auto;
}

.srv-server-map__toggle,
.srv-server-map__biome-strip-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ff9a3d;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}

.srv-server-map__toggle i {
    font-size: 0.9rem;
}

.srv-server-map__external {
    color: #7d8caf;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.srv-server-map__external:hover {
    color: #dbe6ff;
}

.srv-server-map__biome-strip {
    display: none;
}

.srv-server-map__biome-strip-bar {
    display: flex;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.srv-server-map__biome-strip-segment,
.srv-server-map__biome-strip-legend-item i {
    background: var(--srv-biome-color, #7eb4ff);
}

.srv-server-map__biome-strip-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.srv-server-map__biome-strip-legend-item {
    --srv-biome-color: #7eb4ff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #96a5c4;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.srv-server-map__biome-strip-legend-item i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.srv-server-map__biome-strip-link {
    justify-content: center;
    color: #66779b;
    font-size: 0.7rem;
}

.srv-server-map__biome-strip-legend,
.srv-server-map__biome-strip-link {
    display: none;
}

.srv-server-map__media-overlay {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.srv-server-map__meta,
.srv-server-map__biomes {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map {
    grid-template-columns: 212px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__media,
.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__media img {
    min-height: 208px;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__media {
    border-radius: 16px;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__media img {
    padding: 10px;
    object-fit: contain;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__media::after {
    background: linear-gradient(180deg, rgba(7, 11, 18, 0.04), rgba(7, 11, 18, 0.18));
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__media-overlay,
.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__meta,
.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__biomes {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    display: none;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__aside {
    gap: 10px;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__stat {
    min-height: 78px;
    padding: 12px 10px;
    border-radius: 12px;
    background: rgba(5, 8, 15, 0.42);
    justify-items: center;
    text-align: center;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__stat strong {
    font-size: 1.72rem;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__biome-strip {
    display: grid;
    gap: 0;
    padding-top: 0;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map {
    grid-template-columns: 1fr;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__media,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__media img {
    min-height: 620px;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__media img {
    padding: 22px;
    object-fit: contain;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__media-overlay {
    opacity: 1;
    transform: translateY(0);
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__meta,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__biomes {
    opacity: 1;
    transform: translateY(0);
    display: grid;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__biome-strip {
    display: none;
}

.srv-server-map__biome.is-forest,
.srv-server-map__biome-strip-segment.is-forest,
.srv-server-map__biome-strip-legend-item.is-forest {
    --srv-biome-color: #4bd27c;
}

.srv-server-map__biome.is-desert,
.srv-server-map__biome-strip-segment.is-desert,
.srv-server-map__biome-strip-legend-item.is-desert {
    --srv-biome-color: #f7c35f;
}

.srv-server-map__biome.is-snow,
.srv-server-map__biome-strip-segment.is-snow,
.srv-server-map__biome-strip-legend-item.is-snow {
    --srv-biome-color: #d5e9ff;
}

.srv-server-map__biome.is-tundra,
.srv-server-map__biome-strip-segment.is-tundra,
.srv-server-map__biome-strip-legend-item.is-tundra {
    --srv-biome-color: #6cd4ff;
}

.srv-server-map__biome.is-jungle,
.srv-server-map__biome-strip-segment.is-jungle,
.srv-server-map__biome-strip-legend-item.is-jungle {
    --srv-biome-color: #22c55e;
}

.srv-server-map {
    grid-template-columns: minmax(0, 208px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.srv-server-map__modes,
.srv-server-map__biomes {
    grid-column: 1 / -1;
}

.srv-server-map__media {
    grid-column: 1;
}

.srv-server-map__aside {
    grid-column: 2;
}

.srv-server-map__modes {
    display: none;
    align-items: center;
    gap: 18px;
    padding: 0 4px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.srv-server-map__mode {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #6d7a97;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}

.srv-server-map__mode i {
    font-size: 0.85rem;
}

.srv-server-map__mode.is-active {
    color: #ff9a3d;
    border-bottom-color: #ff9a3d;
}

.srv-server-map__media {
    min-height: 260px;
    background: linear-gradient(180deg, rgba(11, 39, 55, 0.96), rgba(8, 25, 39, 0.98));
}

.srv-server-map__image-backdrop,
.srv-server-map__image-base,
.srv-server-map__image-icons {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
    transform-origin: center center;
}

.srv-server-map__image-backdrop {
    z-index: 0;
}

.srv-server-map__image-base {
    z-index: 1;
}

.srv-server-map__image-backdrop {
    transform: scale(1.42);
    filter: blur(22px) brightness(0.52) saturate(1.04);
    opacity: 0.62;
}

.srv-server-map__image-icons,
.srv-server-map__heatmap-layer,
.srv-server-map__biome-layer {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.srv-server-map__heatmap-layer,
.srv-server-map__biome-layer {
    z-index: 2;
}

.srv-server-map__image-icons {
    z-index: 3;
}

.srv-server-map__heatmap-layer,
.srv-server-map__biome-layer {
    position: absolute;
    inset: 12px;
    border-radius: 16px;
}

.srv-server-map__heatmap-layer {
    background:
        radial-gradient(circle at 24% 68%, rgba(255, 113, 55, 0.42), transparent 14%),
        radial-gradient(circle at 62% 34%, rgba(255, 169, 41, 0.28), transparent 16%),
        radial-gradient(circle at 78% 76%, rgba(255, 74, 74, 0.34), transparent 13%),
        linear-gradient(180deg, rgba(255, 136, 56, 0.08), rgba(255, 136, 56, 0.22));
    mix-blend-mode: screen;
}

.srv-server-map__biome-layer {
    background:
        linear-gradient(180deg, rgba(213, 233, 255, 0.26) 0%, rgba(213, 233, 255, 0.18) 22%, rgba(78, 196, 124, 0.16) 22%, rgba(78, 196, 124, 0.12) 58%, rgba(247, 195, 95, 0.18) 58%, rgba(247, 195, 95, 0.22) 100%);
    mix-blend-mode: soft-light;
}

.srv-server-map[data-srv-map-mode='monuments'] .srv-server-map__image-icons,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map[data-srv-map-mode='monuments'] .srv-server-map__image-icons {
    opacity: 1;
}

.srv-server-map[data-srv-map-mode='heatmaps'] .srv-server-map__heatmap-layer {
    opacity: 1;
}

.srv-server-map[data-srv-map-mode='biomes'] .srv-server-map__biome-layer {
    opacity: 1;
}

.srv-server-map__stats--bottom {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.srv-server-map__stat {
    min-height: 78px;
    padding: 12px 10px;
    border-radius: 12px;
    background: rgba(5, 8, 15, 0.42);
    justify-items: center;
    text-align: center;
}

.srv-server-map__stat strong {
    font-size: 1.72rem;
}

.srv-server-map__biome-strip {
    display: grid;
    gap: 10px;
    padding-top: 2px;
}

.srv-server-map__biomes {
    display: none;
    margin-top: 2px;
}

.srv-server-map[data-srv-map-mode='biomes'] .srv-server-map__biomes {
    display: grid;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__modes {
    display: none;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__media-overlay {
    display: flex;
    opacity: 1;
    transform: none;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__media,
.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__media img {
    min-height: 250px;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__image-base,
.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__image-icons {
    transform: scale(1.12);
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__external {
    display: none;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__biome-strip-link {
    display: inline-flex;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__modes {
    display: flex;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__biome-strip {
    display: grid;
    gap: 0;
    padding-top: 0;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__biomes {
    display: none;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map[data-srv-map-mode='biomes'] .srv-server-map__biomes {
    display: grid;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__media,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__media img {
    min-height: 390px;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__image-base,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__image-icons {
    object-position: center center;
    transform: scale(1.34);
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__external {
    display: inline-flex;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__biome-strip-link {
    display: none;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__media-overlay {
    opacity: 1;
    transform: none;
    top: 14px;
    left: 14px;
    max-width: calc(100% - 28px);
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__chip:last-child {
    display: none;
}

.srv-detail-card--killfeed {
    padding: 16px 16px 14px;
}

.srv-detail-card--snapshot {
    min-height: 0;
}

.srv-detail-card--leaderboard {
    padding: 0;
    overflow: hidden;
}

.srv-detail-card--killfeed .srv-detail-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.srv-killfeed-title-wrap {
    display: grid;
    min-width: 0;
    gap: 0;
}

.srv-killfeed-title-wrap h2 {
    margin: 0;
}

.srv-detail-card__eyebrow--killfeed {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f0f4ff;
    font-size: 0.92rem;
    letter-spacing: 0.16em;
}

.srv-detail-card__eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e85a4f;
    box-shadow: 0 0 12px rgba(232, 90, 79, 0.3);
    animation: srvPulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

.srv-detail-card--leaderboard .srv-detail-card__head {
    padding: 18px 20px 14px;
    margin-bottom: 0;
}

.srv-detail-card--leaderboard .srv-detail-card__head > div {
    display: grid;
    gap: 0;
}

.srv-detail-table-wrap--leaderboard {
    overflow: hidden;
}

.srv-detail-table--leaderboard {
    min-width: 0;
    table-layout: auto;
}

.srv-detail-table--leaderboard th,
.srv-detail-table--leaderboard td {
    padding: 13px 12px;
}

.srv-detail-table--leaderboard th {
    font-size: 0.76rem;
    letter-spacing: 0.12em;
}

.srv-detail-table--leaderboard th:first-child,
.srv-detail-table--leaderboard td:first-child {
    width: 52px;
    text-align: center;
}

.srv-detail-table--leaderboard td:first-child {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.18rem;
    font-weight: 800;
    color: #ff7c59;
}

.srv-detail-ranking-value {
    text-align: center;
}

.srv-detail-ranking-value-text {
    display: inline-block;
    color: #eef2ff;
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
}

.srv-detail-ranking-value-text--muted,
.srv-detail-ranking-value-text--dim {
    color: #8d9ab8;
    font-weight: 700;
}

.srv-detail-sort-head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7381a3;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.srv-detail-sort-head.is-active {
    color: #f5f7ff;
}

.srv-detail-sort-head__arrow {
    color: #ff7c59;
    font-size: 0.9em;
    opacity: 0;
    transform: translateY(-1px);
}

.srv-detail-sort-head.is-active .srv-detail-sort-head__arrow {
    opacity: 1;
}

.srv-detail-player-link {
    gap: 14px;
}

.srv-detail-player-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.srv-detail-player-copy strong {
    color: #ffffff;
    font-size: 1.03rem;
    font-weight: 900;
    white-space: nowrap;
}

.srv-detail-player-copy small {
    color: #6f81a6;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.srv-detail-card__head h2 {
    margin: 0;
    font-size: 2.05rem;
    line-height: 0.98;
}

.srv-detail-card--leaderboard .srv-detail-card__hint {
    font-size: 0.82rem;
    color: #8c97b4;
}

.srv-detail-hs-stat {
    display: inline-grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    margin-inline: auto;
}

.srv-detail-hs-stat__value {
    color: #b7c4e4;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1;
}

.srv-detail-hs-stat__bar {
    position: relative;
    display: block;
    width: 48px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.srv-detail-hs-stat__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffc928, #f4b400);
    box-shadow: 0 0 10px rgba(255, 201, 40, 0.22);
}

.srv-killfeed-meta,
.srv-killfeed-list {
    display: grid;
    gap: 7px;
}

.srv-killfeed-meta {
    justify-items: end;
    align-content: start;
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.srv-killfeed-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.srv-killfeed-live.is-online {
    color: #34d776;
}

.srv-killfeed-live.is-online .srv-pulse {
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.52);
    animation: srvPulse 1.4s ease-in-out infinite;
}

.srv-killfeed-live.is-offline {
    color: #ff8b8b;
}

.srv-killfeed-live.is-offline .srv-pulse {
    background: #e85a4f;
    box-shadow: 0 0 10px rgba(232, 90, 79, 0.34);
    animation: none;
}

.srv-detail-killfeed__stamp {
    color: #6f81a6;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.srv-detail-killfeed__stamp[hidden] {
    display: none;
}

.srv-killfeed-meta[hidden] {
    display: none;
}

.srv-killfeed-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 11px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.035);
    transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}

@keyframes srvKillfeedLiveFlash {
    0% {
        background: linear-gradient(135deg, rgba(132, 28, 44, 0.88), rgba(82, 18, 30, 0.82));
        border-color: rgba(255, 117, 136, 0.50);
        box-shadow: 0 0 0 1px rgba(255, 117, 136, 0.10), 0 12px 24px rgba(83, 12, 24, 0.24);
        transform: translateY(-1px);
    }
    100% {
        background: rgba(255, 255, 255, 0.035);
        border-color: transparent;
        box-shadow: none;
        transform: translateY(0);
    }
}

.srv-killfeed-item.is-live {
    animation: srvKillfeedLiveFlash 1.55s ease-out forwards;
}

.srv-killfeed-item.is-live .srv-killfeed-item__summary,
.srv-killfeed-item.is-live .srv-killfeed-item__details,
.srv-killfeed-item.is-live .srv-killfeed-item__victim--solo {
    color: #fff0f2;
}

.srv-killfeed-item__names,
.srv-killfeed-item__meta {
    display: grid;
    gap: 3px;
}

.srv-killfeed-item__killer,
.srv-killfeed-item__victim,
.srv-killfeed-weapon {
    font-weight: 900;
    line-height: 1.05;
}

.srv-killfeed-item__names--single {
    gap: 5px;
}

.srv-killfeed-item__killer {
    color: #2ed06e;
    font-size: 0.95rem;
}

.srv-killfeed-item__victim {
    color: #ff5353;
    font-size: 0.95rem;
}

.srv-killfeed-item__victim--solo {
    color: #f5f7ff;
}

.srv-killfeed-item__summary {
    color: #90a0c1;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}

.srv-killfeed-item__meta {
    justify-items: end;
    gap: 5px;
}

.srv-killfeed-item__weapon-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.srv-killfeed-weapon {
    color: #ff7a43;
    font-size: 0.94rem;
    letter-spacing: 0.01em;
}

.srv-killfeed-cause-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 173, 71, 0.12);
    border: 1px solid rgba(255, 173, 71, 0.22);
    color: #ffb56c;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.srv-killfeed-item--death .srv-killfeed-weapon,
.srv-killfeed-item--suicide .srv-killfeed-weapon {
    color: #ffd166;
}

.srv-killfeed-hs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(255, 83, 83, 0.14);
    border: 1px solid rgba(255, 83, 83, 0.24);
    color: #ff6a6a;
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.srv-killfeed-item__details {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
    color: #7788aa;
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.srv-activity-list--snapshot {
    display: grid;
    gap: 8px;
}

.srv-activity-list--snapshot .srv-activity-row {
    border-radius: 10px;
    padding: 11px 10px;
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.06);
}

.srv-detail-snapshot-actions {
    display: grid;
    gap: 10px;
}

.srv-detail-snapshot-actions__meta {
    display: grid;
    gap: 4px;
    padding: 12px 12px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.srv-detail-snapshot-actions__meta strong {
    color: #f5f7ff;
    font-size: 0.98rem;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.srv-detail-snapshot-actions__meta span {
    color: #8091b3;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.srv-detail-snapshot-actions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 120, 82, 0.18), rgba(232, 85, 74, 0.12));
    color: #f7f9fc;
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.srv-detail-snapshot-actions__btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 164, 110, 0.32);
    background: linear-gradient(180deg, rgba(255, 120, 82, 0.24), rgba(232, 85, 74, 0.16));
}

.srv-detail-snapshot-actions__btn--ghost {
    background: rgba(255, 255, 255, 0.035);
}

.srv-detail-snapshot-actions__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.06);
}

.srv-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(340px, 0.98fr);
    align-items: start;
    gap: 22px;
    max-width: none;
    margin: 22px 0 0;
}
.srv-detail-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}
.srv-detail-summary-card {
    position: relative;
    display: grid;
    gap: 8px;
    min-height: 102px;
    padding: 14px 15px 13px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 42%),
        linear-gradient(180deg, rgba(22, 26, 38, 0.97), rgba(18, 22, 33, 0.95));
    overflow: hidden;
}

.srv-detail-summary-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--srv-summary-tint, rgba(255, 255, 255, 0.03)), transparent 62%);
    pointer-events: none;
}

.srv-detail-summary-card::after {
    content: '';
    position: absolute;
    inset: auto -28px -38px auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--srv-summary-glow, rgba(255, 255, 255, 0.14)), transparent 68%);
    opacity: 0.55;
    pointer-events: none;
}

.srv-detail-summary-card > * {
    position: relative;
    z-index: 1;
}

.srv-detail-summary-card--players {
    --srv-summary-tint: rgba(232, 85, 74, 0.16);
    --srv-summary-glow: rgba(232, 85, 74, 0.16);
    border-color: rgba(232, 85, 74, 0.18);
}

.srv-detail-summary-card--wipe {
    --srv-summary-tint: rgba(67, 144, 255, 0.14);
    --srv-summary-glow: rgba(67, 144, 255, 0.14);
    border-color: rgba(67, 144, 255, 0.16);
}

.srv-detail-summary-card--map {
    --srv-summary-tint: rgba(255, 194, 61, 0.14);
    --srv-summary-glow: rgba(255, 194, 61, 0.14);
    border-color: rgba(255, 194, 61, 0.16);
}

.srv-detail-summary-card--connect {
    --srv-summary-tint: rgba(53, 208, 148, 0.14);
    --srv-summary-glow: rgba(53, 208, 148, 0.14);
    border-color: rgba(53, 208, 148, 0.16);
}
.srv-detail-summary-card__headline {
    color: #f7f9fc;
    font-size: 1.72rem;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.srv-detail-summary-card--players .srv-detail-summary-card__headline {
    color: #fff4f1;
}

.srv-detail-summary-card--wipe .srv-detail-summary-card__rows strong {
    color: #d7e7ff;
}

.srv-detail-summary-card--map .srv-detail-summary-card__rows strong {
    color: #fff2a8;
}

.srv-detail-summary-card--connect .srv-detail-summary-card__rows strong {
    color: #bff7df;
}
.srv-detail-summary-card__label,
.srv-detail-summary-card__rows span {
    color: rgba(211, 220, 237, 0.55);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.srv-detail-summary-card__subvalue {
    color: #8d9ab8;
    font-size: 0.72rem;
    font-weight: 700;
}

.srv-detail-summary-card--players .srv-detail-summary-card__subvalue {
    color: #f0b4a9;
}
.srv-detail-summary-card__rows {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 10px;
    align-items: center;
}
.srv-detail-summary-card__rows strong {
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 900;
    text-align: right;
    line-height: 1.1;
}

.srv-detail-main,
.srv-detail-side {
    display: grid;
    gap: 22px;
    min-width: 0;
}
.srv-detail-side {
    align-content: start;
}

.srv-detail-card {
    padding: 24px;
}

.srv-detail-side .srv-detail-card {
    background: linear-gradient(180deg, rgba(18, 21, 33, 0.92), rgba(15, 18, 28, 0.88));
}

.srv-detail-side .srv-detail-card--killfeed {
    position: sticky;
    top: 96px;
}

.srv-detail-side .srv-detail-card--killfeed {
    padding: 18px 18px 16px;
}

.srv-detail-side .srv-detail-card--killfeed .srv-detail-card__head h2 {
    font-size: 1.78rem;
}

.srv-detail-side .srv-detail-card--killfeed .srv-detail-empty--tight {
    padding: 26px 14px;
}

.srv-detail-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.srv-detail-card__head h2 {
    margin: 8px 0 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.8rem;
    letter-spacing: -0.04em;
}

.srv-detail-table-wrap {
    overflow-x: auto;
}

.srv-detail-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.srv-detail-table th,
.srv-detail-table td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
}

.srv-detail-table th {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #67718b;
}

.srv-detail-table td {
    color: #edf2ff;
}

.srv-detail-player-link,
.srv-roster-card,
.srv-activity-row,
.srv-mini-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.srv-detail-player-link span {
    white-space: nowrap;
}

.srv-roster-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.srv-roster-card,
.srv-activity-row,
.srv-mini-list__item {
    padding: 14px 15px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.srv-roster-card:hover,
.srv-activity-row:hover,
.srv-mini-list__item:hover {
    transform: translateY(-2px);
    border-color: rgba(232, 85, 74, 0.30);
    background: rgba(232, 85, 74, 0.08);
}

.srv-roster-card__copy,
.srv-activity-row__copy {
    display: grid;
    gap: 4px;
}

.srv-roster-card__copy strong,
.srv-activity-row__copy strong,
.srv-mini-list__item strong {
    color: #fff;
}

.srv-roster-card__copy span,
.srv-activity-row__copy span,
.srv-mini-list__item span,
.srv-detail-empty p {
    color: #a7b1cb;
}

.srv-detail-facts {
    display: grid;
    gap: 14px;
}

.srv-detail-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.srv-detail-fact strong {
    text-align: right;
    color: #fff;
}

.srv-detail-empty {
    display: grid;
    gap: 12px;
    justify-items: center;
    text-align: center;
    padding: 22px 14px;
}

.srv-detail-empty i {
    font-size: 1.4rem;
    color: #6f7993;
}

.srv-detail-empty--tight {
    padding: 18px 12px;
}

.srv-mini-list__item {
    justify-content: space-between;
}

/* ---------- Server Detail Layout Override ---------- */
.srv-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.92fr) minmax(252px, 0.52fr);
    align-items: start;
    gap: 16px;
    max-width: none;
    margin: 16px 0 0;
}

.srv-detail-main,
.srv-detail-side {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.srv-detail-main > .srv-detail-summary-grid {
    margin-top: 0;
}

.srv-detail-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.srv-detail-summary-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: 14px;
    min-height: 164px;
    padding: 18px 18px 16px;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    transform: translateY(0);
}

.srv-detail-summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
    border-color: rgba(255, 255, 255, 0.16);
}

.srv-detail-summary-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.42rem;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22));
    transition: transform 0.22s ease, filter 0.22s ease;
}

.srv-detail-summary-card:hover .srv-detail-summary-card__icon {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28));
}

.srv-detail-summary-card--players .srv-detail-summary-card__icon {
    color: #a66bff;
}

.srv-detail-summary-card--wipe .srv-detail-summary-card__icon {
    color: #d9e7ff;
}

.srv-detail-summary-card--map .srv-detail-summary-card__icon {
    color: #8fe29b;
}

.srv-detail-summary-card--connect .srv-detail-summary-card__icon {
    color: #73d9ff;
}

.srv-detail-summary-card__headline {
    font-size: 2.18rem;
    line-height: 0.9;
    margin-top: auto;
}

.srv-detail-summary-card__label,
.srv-detail-summary-card__rows span {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
}

.srv-detail-summary-card__rows span {
    font-size: 0.58rem;
    letter-spacing: 0.13em;
}

.srv-detail-summary-card__subvalue {
    margin-top: -8px;
    font-size: 0.78rem;
    line-height: 1.2;
}

.srv-detail-summary-card__rows {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 14px;
    align-content: end;
    margin-top: auto;
}

.srv-detail-summary-card__rows strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.94rem;
    line-height: 1.02;
}

.srv-detail-summary-card--players .srv-detail-summary-card__label {
    margin-top: auto;
}

.srv-detail-summary-card--players .srv-detail-summary-card__subvalue {
    color: #f2b9af;
}

.srv-detail-summary-card--wipe .srv-detail-summary-card__rows,
.srv-detail-summary-card--map .srv-detail-summary-card__rows,
.srv-detail-summary-card--connect .srv-detail-summary-card__rows {
    gap: 10px 12px;
}

.srv-detail-side {
    align-content: start;
    width: 100%;
    max-width: 312px;
    justify-self: end;
}

.srv-detail-side .srv-detail-card {
    background: linear-gradient(180deg, rgba(18, 21, 33, 0.92), rgba(15, 18, 28, 0.88));
}

.srv-detail-side .srv-detail-card--killfeed {
    position: sticky;
    top: 96px;
    min-height: 0;
    padding: 11px 11px 10px;
    max-width: 312px;
}

.srv-detail-side .srv-detail-card--killfeed .srv-detail-card__head {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.srv-detail-side .srv-detail-card--killfeed .srv-detail-card__head h2 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1;
    text-transform: uppercase;
}

.srv-detail-side .srv-detail-card--killfeed .srv-detail-empty--tight {
    padding: 14px 10px;
}

.srv-killfeed-meta,
.srv-killfeed-list {
    gap: 6px;
}

.srv-killfeed-meta {
    justify-items: end;
    margin: 0;
}

.srv-killfeed-item {
    gap: 6px;
    padding: 8px 8px;
    border-radius: 7px;
}

.srv-killfeed-item__killer,
.srv-killfeed-item__victim {
    font-size: 0.8rem;
}

.srv-killfeed-item__summary {
    font-size: 0.7rem;
}

.srv-killfeed-weapon {
    font-size: 0.78rem;
}

.srv-killfeed-item__details {
    gap: 6px;
    font-size: 0.68rem;
}

.srv-detail-empty {
    display: grid;
    gap: 9px;
    justify-items: center;
    text-align: center;
    padding: 14px 10px;
}

.srv-detail-empty--tight {
    padding: 14px 10px;
}

.srv-mini-list__item--ghost {
    border-style: dashed;
}

.srv-theme-1 .srv-luna-card__chip { color: #77f7bd; }
.srv-theme-2 .srv-luna-card__chip { color: #ffb18f; }
.srv-theme-3 .srv-luna-card__chip { color: #ffd36f; }
.srv-theme-4 .srv-luna-card__chip { color: #7ec8ff; }
.srv-theme-5 .srv-luna-card__chip { color: #ef9bdf; }
.srv-theme-6 .srv-luna-card__chip { color: #9fe28d; }

.srv-detail-hero__status.is-online {
    color: #9ff4bd;
    background: rgba(15, 30, 21, 0.44);
    border-color: rgba(84, 199, 128, 0.18);
}

.srv-detail-hero__status.is-online .srv-pulse {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.48);
    animation: srvPulse 1.4s ease-in-out infinite;
}

.srv-detail-hero__status.is-offline {
    color: #ffb0b0;
    background: rgba(34, 15, 18, 0.44);
    border-color: rgba(239, 68, 68, 0.18);
}

.srv-detail-hero__status.is-offline .srv-pulse {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.44);
    animation: srvPulse 1.4s ease-in-out infinite;
}

.srv-detail-live-sync {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(240, 160, 48, 0.18);
    background: rgba(240, 160, 48, 0.10);
    color: #f7c96b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.srv-detail-live-sync[hidden] {
    display: none;
}

.srv-detail-live-sync.is-stale {
    border-color: rgba(240, 160, 48, 0.26);
    background: rgba(240, 160, 48, 0.14);
}

.srv-luna-card.is-offline .srv-luna-card__chip { color: #ff8c8c; }

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

    .srv-detail-side {
        max-width: none;
        justify-self: stretch;
    }

    .srv-detail-side .srv-detail-card--killfeed {
        position: static;
        top: auto;
        max-width: none;
    }

    .srv-detail-main > .srv-detail-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .srv-detail-main > .srv-detail-summary-grid {
        grid-template-columns: 1fr;
    }

    .srv-detail-summary-grid {
        gap: 12px;
    }

    .srv-detail-summary-card {
        min-height: 146px;
        padding: 16px 16px 14px;
        border-radius: 18px;
    }

    .srv-detail-summary-card__icon {
        width: 38px;
        height: 38px;
        font-size: 1.24rem;
    }

    .srv-detail-summary-card__headline {
        font-size: 1.92rem;
    }

    .srv-detail-summary-card__rows {
        gap: 10px 12px;
    }

    .srv-detail-summary-card__rows strong {
        font-size: 1rem;
    }

    .srv-detail-card,
    .srv-detail-hero {
        padding: 18px;
    }

    .srv-detail-hero {
        min-height: 300px;
    }

    .srv-detail-hero__copy {
        min-height: 220px;
    }

    .srv-server-map__media,
    .srv-server-map__media img {
        min-height: 280px;
    }

    .srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__media,
    .srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__media img {
        min-height: 220px;
    }

    .srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__media,
    .srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__media img {
        min-height: 320px;
    }

    .srv-detail-hero__foot,
    .srv-killfeed-meta,
    .srv-killfeed-item {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .srv-server-map__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .srv-server-map {
        grid-template-columns: 1fr;
    }

    .srv-server-map__media,
    .srv-server-map__aside,
    .srv-server-map__modes,
    .srv-server-map__biomes {
        grid-column: auto;
    }

    .srv-server-map__actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .srv-server-map__biome-strip-legend {
        gap: 8px 12px;
    }

    .srv-server-map__mode {
        font-size: 0.72rem;
    }

    .srv-killfeed-item__meta {
        grid-template-columns: 1fr;
    }

    .srv-killfeed-item__details {
        margin: 6px 0 12px;
        justify-content: flex-start;
    }

    .srv-luna-card__stats {
        justify-items: start;
    }
}

/* ===================================
   SERVER MAP LUNA FINAL OVERRIDES
   =================================== */

.srv-detail-summary-card__rows span {
    color: #97a4c2;
    font-size: 0.56rem;
    letter-spacing: 0.13em;
}

.srv-detail-summary-card__rows strong {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font-size: 0.84rem;
}

.srv-detail-summary-card--wipe .srv-detail-summary-card__rows strong,
.srv-detail-summary-card--map .srv-detail-summary-card__rows strong,
.srv-detail-summary-card--connect .srv-detail-summary-card__rows strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.srv-detail-summary-card--wipe .srv-detail-summary-card__rows,
.srv-detail-summary-card--map .srv-detail-summary-card__rows,
.srv-detail-summary-card--connect .srv-detail-summary-card__rows {
    gap: 8px 10px;
}

.srv-server-map__head > div {
    gap: 6px;
}

.srv-server-map__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.srv-server-map__title-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 186, 116, 0.18);
    background: linear-gradient(135deg, rgba(28, 26, 31, 0.88), rgba(17, 21, 31, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #d4deef;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.srv-server-map__subtitle,
.srv-server-map__modes {
    display: none !important;
}

.srv-server-map {
    grid-template-columns: 228px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.srv-server-map__media {
    border: 0;
    box-shadow: none;
}

.srv-server-map__viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.srv-server-map__stage {
    position: absolute;
    inset: 0;
    --srv-map-scale: 1;
    --srv-map-translate-x: 0px;
    --srv-map-translate-y: 0px;
    transform: translate(var(--srv-map-translate-x), var(--srv-map-translate-y)) scale(var(--srv-map-scale));
    transform-origin: center center;
    will-change: transform;
}

.srv-server-map__hud {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: none;
    align-items: center;
    gap: 6px;
}

.srv-server-map__hud-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 6px;
    background: rgba(8, 11, 17, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #c7d3ea;
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.srv-server-map__hud-button {
    appearance: none;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.srv-server-map__hud-button:hover {
    color: #eef4ff;
    border-color: rgba(255, 255, 255, 0.18);
}

.srv-detail-card--server-map[data-srv-map-grid-visible='true'] .srv-server-map__hud-button {
    background: rgba(255, 154, 61, 0.16);
    border-color: rgba(255, 154, 61, 0.44);
    color: #ffd8b7;
}

.srv-server-map__hud-badge--position {
    min-width: 112px;
    justify-content: flex-start;
}

.srv-server-map__grid,
.srv-server-map__grid-lines {
    position: absolute;
    inset: 0;
}

.srv-server-map__grid {
    display: none;
    pointer-events: none;
    z-index: 4;
}

.srv-server-map__grid-lines {
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(123, 155, 190, 0.18) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(123, 155, 190, 0.18) 1px, transparent 1px);
    background-size:
        calc(100% / var(--srv-map-grid-count)) calc(100% / var(--srv-map-grid-count)),
        calc(100% / var(--srv-map-grid-count)) calc(100% / var(--srv-map-grid-count));
}

.srv-server-map__grid-labels,
.srv-server-map__grid-rows {
    position: absolute;
    z-index: 1;
    color: rgba(162, 186, 216, 0.7);
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.srv-server-map__grid-labels {
    left: 12px;
    right: 12px;
    display: grid;
    grid-template-columns: repeat(var(--srv-map-grid-count), minmax(0, 1fr));
    justify-items: center;
}

.srv-server-map__grid-labels--top {
    top: 4px;
}

.srv-server-map__grid-labels--bottom {
    bottom: 4px;
}

.srv-server-map__grid-rows {
    top: 12px;
    bottom: 12px;
    display: grid;
    grid-template-rows: repeat(var(--srv-map-grid-count), minmax(0, 1fr));
    align-items: center;
}

.srv-server-map__grid-rows--left {
    left: 4px;
}

.srv-server-map__grid-rows--right {
    right: 4px;
}

.srv-server-map__biomes-panel {
    display: none;
    gap: 10px;
}

.srv-server-map__biomes-panel-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.srv-server-map__biomes-panel-item,
.srv-server-map__biomes-panel-extra {
    display: grid;
    gap: 6px;
    padding: 12px 12px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(7, 11, 18, 0.42);
}

.srv-server-map__biomes-panel-item span,
.srv-server-map__biomes-panel-extra span {
    color: #8ea0c0;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.srv-server-map__biomes-panel-item strong,
.srv-server-map__biomes-panel-extra strong {
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 0.9;
}

.srv-server-map__biomes-panel-extras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.srv-server-map__mode {
    display: inline-grid;
    justify-items: center;
    gap: 6px;
    min-width: 98px;
    padding: 2px 0 11px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #7585a2;
    cursor: pointer;
}

.srv-server-map__mode-icon {
    font-size: 1rem;
    line-height: 1;
}

.srv-server-map__mode-label {
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.srv-server-map__mode.is-active {
    color: #ff9a3d;
    border-bottom-color: #ff9a3d;
}

.srv-detail-card--server-map.is-map-zoomed .srv-server-map__viewport {
    cursor: grab;
}

.srv-server-map.is-map-dragging .srv-server-map__viewport,
.srv-detail-card--server-map.is-map-dragging .srv-server-map__viewport {
    cursor: grabbing;
}

.srv-server-map__aside {
    gap: 12px;
}

.srv-server-map__actions {
    gap: 10px;
}

.srv-server-map__external {
    color: #7e8cab;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.srv-server-map__stats--bottom {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.srv-server-map__biome-strip {
    display: grid;
    gap: 8px;
    padding-top: 0;
}

.srv-server-map__biome-strip-bar {
    height: 8px;
}

.srv-server-map__biome-strip-segment {
    flex: 0 0 auto;
}

.srv-server-map__biome-strip-copy {
    margin: 0;
    color: #91a1bf;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.45;
}

.srv-server-map__biome-strip-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
}

.srv-server-map__biome-strip-legend-item {
    color: #95a5c4;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.srv-server-map__biome-strip-link {
    display: none;
    justify-content: center;
    width: 100%;
    margin-top: 2px;
    color: #7e8cab;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
}

.srv-server-map__biome-strip-link:hover {
    color: #d7e0f3;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map {
    grid-template-columns: 228px minmax(0, 1fr);
    gap: 16px;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__media,
.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__media img {
    min-height: 250px;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__biome-strip-legend {
    display: flex;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__biome-strip-link {
    display: inline-flex;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__grid,
.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__hud {
    display: none;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__viewport,
.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__stage {
    position: absolute;
    inset: 0;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__image-icons {
    opacity: 0;
}

.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__heatmap-layer,
.srv-detail-card--server-map[data-srv-map-state='compact'] .srv-server-map__biome-layer {
    opacity: 0;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map {
    grid-template-columns: 1fr;
    gap: 18px;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__modes {
    display: flex !important;
    align-items: flex-end;
    gap: 18px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__media,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__aside,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__biomes,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__biomes-panel,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__modes {
    grid-column: 1 / -1;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__media,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__media img {
    min-height: 680px;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__grid-labels,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__grid-rows {
    color: rgba(222, 235, 255, 0.94);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.72);
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__grid-labels--top {
    top: 8px;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__grid-labels--bottom {
    bottom: 8px;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__grid-rows--left {
    left: 8px;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__grid-rows--right {
    right: 8px;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__viewport {
    inset: 8px;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__stage {
    inset: 0;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__image-base,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__image-icons,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__heatmap-layer,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__biome-layer,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__grid {
    inset: 0;
    min-height: 0;
    padding: 0;
    object-fit: contain;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__image-base,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__image-icons {
    transform: scale(1);
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__biome-strip {
    display: none;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__biomes {
    display: grid;
    margin-top: 0;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__hud {
    display: flex;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'][data-srv-map-grid-visible='true'] .srv-server-map__grid {
    display: block;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'][data-srv-map-grid-visible='false'] .srv-server-map__grid {
    display: none;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__image-icons,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__heatmap-layer,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__biome-layer {
    opacity: 0;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map[data-srv-map-mode='monuments'] .srv-server-map__image-icons {
    opacity: 1;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map[data-srv-map-mode='heatmaps'] .srv-server-map__heatmap-layer {
    opacity: 1;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map[data-srv-map-mode='biomes'] .srv-server-map__biome-layer {
    opacity: 1;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map[data-srv-map-mode='biomes'] .srv-server-map__biomes-panel {
    display: grid;
}

.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map[data-srv-map-mode='monuments'] .srv-server-map__biomes-panel,
.srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map[data-srv-map-mode='heatmaps'] .srv-server-map__biomes-panel {
    display: none;
}

@media (max-width: 900px) {
    .srv-server-map__biomes-panel-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .srv-detail-card--server-map[data-srv-map-state='expanded'] .srv-server-map__modes {
        gap: 10px;
        justify-content: space-between;
    }

    .srv-server-map__mode {
        min-width: 0;
        flex: 1 1 0;
    }
}

/* ===================================
   PLAYERS PAGE
   =================================== */

.players-page {
    position: relative;
    min-height: 100vh;
    padding: 130px 0 72px;
    overflow: hidden;
}

.players-page-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.players-page-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.62;
    filter: saturate(1.02) contrast(1.04) brightness(0.88);
    transform: scale(1.02);
}

.players-page-bg-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 136, 62, 0.16), transparent 22%),
        radial-gradient(circle at 80% 72%, rgba(143, 23, 38, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(7, 10, 16, 0.32) 0%, rgba(14, 18, 28, 0.18) 28%, rgba(18, 14, 24, 0.38) 68%, rgba(10, 8, 16, 0.62) 100%);
}

.players-shell {
    position: relative;
    z-index: 1;
}

.players-header {
    margin-bottom: 28px;
}

.players-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: #fff;
    margin-top: 12px;
}

.players-subtitle {
    max-width: 720px;
    margin-top: 14px;
    color: rgba(255,255,255,0.72);
    font-size: 1rem;
}

.players-helper-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(20, 22, 31, 0.42);
    color: rgba(255,255,255,0.74);
    font-size: 0.86rem;
}

.players-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) minmax(220px, 0.8fr) minmax(220px, 0.8fr) auto;
    gap: 14px;
    margin-bottom: 18px;
    align-items: center;
}

.players-search-group input,
.players-select-group select {
    width: 100%;
    height: 52px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(32, 31, 43, 0.88);
    color: #e7e8ef;
    padding: 0 16px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.players-search-group input:focus,
.players-select-group select:focus {
    border-color: rgba(232, 85, 74, 0.45);
    background: rgba(36, 34, 46, 0.96);
}

.players-meta {
    color: rgba(255,255,255,0.78);
    margin-bottom: 24px;
    font-size: 0.92rem;
}

.players-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.player-card {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 22px 18px;
    min-height: 216px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(62, 55, 66, 0.54);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.14);
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    position: relative;
    overflow: hidden;
}

.player-card:hover {
    transform: translateY(-3px);
    border-color: rgba(232, 85, 74, 0.28);
    background: rgba(72, 60, 70, 0.64);
}

.player-card::before {
    content: "";
    position: absolute;
    inset: auto -20% -45% -20%;
    height: 120px;
    background: radial-gradient(circle, rgba(232, 85, 74, 0.18), transparent 65%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.player-card:hover::before {
    opacity: 1;
}

.player-card-link {
    text-decoration: none;
    color: inherit;
}

.player-card-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
}

.player-card-avatar {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    transition: transform 220ms ease, filter 220ms ease;
}

.steam-avatar.player-card-avatar .steam-avatar-img,
.steam-avatar.player-card-avatar .steam-avatar-placeholder {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 18px;
    box-shadow: none;
    object-fit: cover;
    object-position: center;
    transition: transform 220ms ease, filter 220ms ease;
}

.steam-avatar.player-card-avatar .steam-avatar-frame {
    display: none;
}

.player-card:hover .player-card-avatar,
.player-card:focus-visible .player-card-avatar {
    transform: translateY(-2px);
    filter: saturate(1.04);
}

.player-card:hover .steam-avatar.player-card-avatar .steam-avatar-img,
.player-card:hover .steam-avatar.player-card-avatar .steam-avatar-placeholder,
.player-card:focus-visible .steam-avatar.player-card-avatar .steam-avatar-img,
.player-card:focus-visible .steam-avatar.player-card-avatar .steam-avatar-placeholder {
    transform: scale(1.04);
    filter: brightness(1.05);
}

.player-presence-dot {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #b0b7c4;
    border: 2px solid rgba(28, 28, 36, 0.95);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.04);
}

.player-presence-dot.online {
    background: #53df7a;
    box-shadow: 0 0 0 4px rgba(83, 223, 122, 0.18);
}

.player-card-body {
    min-width: 0;
    text-align: center;
    width: 100%;
}

.player-card-body h3 {
    font-size: 1.02rem;
    color: #f4f4f8;
    margin-bottom: 8px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-card-id,
.player-card-meta-row {
    font-size: 0.8rem;
    color: rgba(233, 235, 243, 0.74);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-card-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(15, 17, 24, 0.44);
    border: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.76);
}

.player-card-meta-row.muted {
    color: rgba(199, 201, 214, 0.56);
    margin-top: 8px;
}

.player-card-meta-row.is-online {
    color: #8ae4a3;
}

.player-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: rgba(255,255,255,0.84);
    font-size: 0.82rem;
    font-weight: 700;
}

.player-card-cta i {
    font-size: 0.78rem;
    color: #ff9f90;
}

/* ===================================
   GLOBAL LEADERBOARD
   =================================== */

.players-leaderboard-page {
    position: relative;
    min-height: 100vh;
    padding: 124px 0 72px;
    overflow: hidden;
}

.players-leaderboard-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 18%, rgba(235, 122, 54, 0.18), transparent 24%),
        radial-gradient(circle at 86% 12%, rgba(74, 146, 227, 0.16), transparent 18%),
        radial-gradient(circle at 52% 100%, rgba(116, 24, 27, 0.32), transparent 36%),
        linear-gradient(180deg, rgba(8, 10, 16, 0.12) 0%, rgba(8, 10, 16, 0.82) 54%, rgba(8, 10, 16, 0.98) 100%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 22px);
    pointer-events: none;
}

.players-leaderboard-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
}

.players-leaderboard-page .container {
    width: min(1240px, calc(100% - 28px));
}

.players-leaderboard-top,
.players-leaderboard-table-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(18, 22, 32, 0.92), rgba(11, 14, 21, 0.94));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.players-leaderboard-top {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 16px 20px 18px;
    border-radius: 28px;
    overflow: hidden;
}

.players-leaderboard-top::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 10, 16, 0.66), rgba(7, 10, 16, 0.9)),
        url('../img/background.png') center/cover no-repeat;
    opacity: 0.42;
    pointer-events: none;
}

.players-leaderboard-top::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 12, 18, 0.1), rgba(9, 12, 18, 0.34));
    pointer-events: none;
}

.players-leaderboard-hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.players-leaderboard-copy {
    display: grid;
    gap: 4px;
}

.players-leaderboard-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.7vw, 2.8rem);
    line-height: 0.88;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: #f6f8fd;
}

.players-leaderboard-title span {
    color: #ffb164;
}

.players-leaderboard-count {
    margin: 0;
    color: rgba(226, 232, 242, 0.78);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.players-leaderboard-filters {
    display: grid;
    grid-template-columns: minmax(250px, 330px) minmax(170px, 210px);
    gap: 8px;
}

.players-leaderboard-search,
.players-leaderboard-server {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 36px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(5, 7, 12, 0.72);
    color: rgba(232, 236, 243, 0.86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.players-leaderboard-search i {
    position: absolute;
    left: 13px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.8rem;
}

.players-leaderboard-search input,
.players-leaderboard-server select {
    width: 100%;
    min-height: 36px;
    border: 0;
    outline: none;
    background: transparent;
    color: #f7f9fc;
    font-size: 0.78rem;
    font-weight: 600;
    color-scheme: dark;
}

.players-leaderboard-search input {
    padding: 0 10px 0 33px;
}

.players-leaderboard-server select {
    padding: 0 28px 0 10px;
    appearance: none;
}

.players-leaderboard-search input::placeholder {
    color: rgba(232, 236, 243, 0.56);
}

.players-leaderboard-server select option {
    background: #0d1119;
    color: #f7f9fc;
}

.players-leaderboard-search input:-webkit-autofill,
.players-leaderboard-search input:-webkit-autofill:hover,
.players-leaderboard-search input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f7f9fc;
    -webkit-box-shadow: 0 0 0 1000px #0d1119 inset;
    transition: background-color 9999s ease-in-out 0s;
}

.players-leaderboard-server::after {
    content: '\f078';
    position: absolute;
    right: 12px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.44);
    pointer-events: none;
}

.players-leaderboard-podium {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 334px 360px 334px;
    justify-content: center;
    gap: 12px;
    align-items: start;
    padding-top: 18px;
    padding-bottom: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.players-podium-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    justify-items: center;
    gap: 18px;
    padding: 22px 22px 20px;
    width: 100%;
    max-width: none;
    min-height: 288px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(18, 20, 30, 0.92);
    text-decoration: none;
    color: #f7f9fc;
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

.players-podium-card--mock {
    cursor: default;
}

.players-podium-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 175, 92, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 42%);
    pointer-events: none;
}

.players-podium-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42);
}

.players-podium-card--champion {
    justify-self: stretch;
    max-width: none;
    min-height: 336px;
    padding-top: 26px;
    border-color: rgba(232, 85, 74, 0.34);
    background: linear-gradient(180deg, rgba(21, 18, 24, 0.96), rgba(16, 18, 28, 0.94));
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.42);
}

.players-podium-card--runner-up,
.players-podium-card--third {
    max-width: none;
    min-height: 270px;
    margin-top: 44px;
}

.players-podium-card--runner-up {
    justify-self: stretch;
}

.players-podium-card--third {
    justify-self: stretch;
}

.players-podium-card__avatar-wrap {
    position: relative;
    width: 84px;
    height: 84px;
    margin-top: 0;
    transition: transform 220ms ease, filter 220ms ease;
}

.players-podium-card--champion .players-podium-card__avatar-wrap {
    width: 94px;
    height: 94px;
}

.players-podium-card__avatar-wrap .steam-avatar {
    width: 100%;
    height: 100%;
}

.steam-avatar.players-podium-avatar .steam-avatar-img,
.steam-avatar.players-podium-avatar .steam-avatar-placeholder {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 24px;
    box-shadow: none;
    object-fit: cover;
    object-position: center;
    transition: transform 220ms ease, filter 220ms ease;
}

.steam-avatar.players-podium-avatar .steam-avatar-frame {
    display: none;
}

.players-podium-card__avatar-wrap .players-podium-card__avatar-art {
    object-fit: contain;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 24px;
    background: radial-gradient(circle at 50% 35%, rgba(255, 196, 122, 0.3), rgba(18, 21, 31, 0.92) 72%);
}

.players-podium-card:hover .players-podium-card__avatar-wrap {
    transform: translateY(-2px);
    filter: saturate(1.04);
}

.players-podium-card:hover .steam-avatar.players-podium-avatar .steam-avatar-img,
.players-podium-card:hover .steam-avatar.players-podium-avatar .steam-avatar-placeholder {
    transform: scale(1.04);
    filter: brightness(1.05);
}

.players-podium-card--runner-up .players-podium-card__avatar-wrap,
.players-podium-card--third .players-podium-card__avatar-wrap {
    width: 82px;
    height: 82px;
}

.players-podium-card__badge {
    position: absolute;
    right: -4px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(248, 173, 74, 0.92);
    background: rgba(17, 21, 31, 0.96);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    font-size: 0.78rem;
}

.players-podium-card__identity {
    display: grid;
    gap: 8px;
    justify-items: center;
    width: 100%;
    padding-top: 2px;
}

.players-podium-card__identity strong {
    font-size: 1.04rem;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    line-height: 1.02;
}

.players-podium-card--champion .players-podium-card__identity strong {
    font-size: 1.12rem;
}

.players-podium-card__identity small {
    color: rgba(228, 234, 243, 0.6);
    font-size: 0.54rem;
    letter-spacing: 0.12em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.players-podium-card__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.players-podium-card__metrics div {
    display: grid;
    gap: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
}

.players-podium-card__metrics span {
    color: rgba(228, 234, 243, 0.58);
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.players-podium-card__metrics strong {
    font-size: 1rem;
    color: #ffffff;
    line-height: 1;
}

.players-podium-card__metrics div:last-child strong {
    color: #47f59a;
}

.players-podium-card--placeholder {
    border-style: solid;
    border-color: rgba(133, 104, 82, 0.16);
    background: linear-gradient(180deg, rgba(13, 16, 22, 0.52), rgba(10, 13, 20, 0.72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    pointer-events: none;
    opacity: 0.78;
}

.players-podium-card--placeholder::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 40%);
}

.players-podium-card__avatar-wrap--placeholder {
    display: grid;
    place-items: center;
}

.players-podium-card__avatar-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 22px;
    border: 1px dashed rgba(227, 147, 77, 0.28);
    background: rgba(255, 255, 255, 0.018);
    color: rgba(255, 198, 139, 0.72);
    font-size: 1.4rem;
}

.players-podium-card--placeholder .players-podium-card__metrics strong {
    color: rgba(235, 239, 245, 0.44);
}

.players-leaderboard-table-card {
    padding: 12px;
    border-radius: 30px;
}

.players-leaderboard-table-wrap {
    overflow-x: auto;
    border-radius: 22px;
}

.players-leaderboard-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
}

.players-leaderboard-table thead th {
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(214, 220, 229, 0.66);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: left;
}

.players-leaderboard-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.18s ease;
}

.players-leaderboard-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.players-leaderboard-table tbody td {
    padding: 17px 16px;
    color: #f5f8fb;
    vertical-align: middle;
}

.players-leaderboard-rank {
    width: 68px;
    color: #e8554a;
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
}

.players-leaderboard-player-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.players-leaderboard-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.steam-avatar.players-leaderboard-avatar .steam-avatar-img,
.steam-avatar.players-leaderboard-avatar .steam-avatar-placeholder {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    object-fit: cover;
    object-position: center;
    transition: transform 220ms ease, filter 220ms ease;
}

.steam-avatar.players-leaderboard-avatar .steam-avatar-frame {
    display: none;
}

.players-leaderboard-table tbody tr:hover .steam-avatar.players-leaderboard-avatar .steam-avatar-img,
.players-leaderboard-table tbody tr:hover .steam-avatar.players-leaderboard-avatar .steam-avatar-placeholder {
    transform: scale(1.04);
    filter: brightness(1.05);
}

.players-leaderboard-player-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.players-leaderboard-player-name-row {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

.players-leaderboard-player-name-row strong {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.players-leaderboard-player-copy small {
    color: rgba(214, 220, 229, 0.54);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}

.players-leaderboard-player-style {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.players-leaderboard-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.players-leaderboard-sort__arrow {
    opacity: 0.35;
    transform: translateY(-1px);
    transition: opacity 0.18s ease, color 0.18s ease;
}

.players-leaderboard-sort.is-active {
    color: #ffb164;
}

.players-leaderboard-sort.is-active .players-leaderboard-sort__arrow {
    opacity: 1;
}

.players-leaderboard-stat {
    font-weight: 700;
    white-space: nowrap;
}

.players-leaderboard-stat--muted {
    color: rgba(214, 220, 229, 0.68);
}

.players-leaderboard-stat--hs {
    min-width: 130px;
}

.players-leaderboard-pagination {
    display: grid;
    gap: 14px;
    padding: 18px 14px 8px;
}

.players-leaderboard-pagination__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.players-leaderboard-pagination .players-page-link,
.players-leaderboard-pagination .players-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(238, 242, 248, 0.78);
    text-decoration: none;
    font-weight: 700;
}

.players-leaderboard-pagination .players-page-link.active {
    border-color: rgba(255, 177, 100, 0.26);
    background: rgba(255, 177, 100, 0.14);
    color: #ffcb93;
}

.players-leaderboard-pagination__summary {
    color: rgba(214, 220, 229, 0.56);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.players-leaderboard-empty,
.players-leaderboard-empty-row {
    color: rgba(226, 232, 242, 0.68);
    text-align: center;
}

.players-leaderboard-empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    border-radius: 22px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    font-weight: 700;
}

.players-leaderboard-empty-row {
    padding: 42px 18px;
}

@media (max-width: 980px) {
    .players-leaderboard-hero {
        grid-template-columns: 1fr;
    }

    .players-leaderboard-filters {
        grid-template-columns: 1fr;
    }

    .players-leaderboard-podium {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .players-podium-card--runner-up,
    .players-podium-card--third {
        margin-top: 0;
        max-width: none;
    }

    .players-podium-card--champion {
        min-height: 0;
        max-width: none;
    }
}

@media (max-width: 640px) {
    .players-leaderboard-page {
        padding-top: 106px;
    }

    .players-leaderboard-top,
    .players-leaderboard-table-card {
        border-radius: 22px;
    }

    .players-leaderboard-top {
        padding: 16px 14px;
    }

    .players-leaderboard-title {
        font-size: 1.55rem;
    }

    .players-podium-card {
        min-height: 0;
        padding: 16px 14px;
    }

    .players-leaderboard-table thead th,
    .players-leaderboard-table tbody td {
        padding-left: 12px;
        padding-right: 12px;
    }
}

.pp-page {
    position: relative;
    padding: 118px 0 56px;
    overflow: clip;
}

.pp-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(205, 65, 50, 0.24), transparent 28%),
        radial-gradient(circle at 82% 12%, rgba(255, 166, 77, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(6, 8, 14, 0) 0%, rgba(6, 8, 14, 0.64) 68%, rgba(6, 8, 14, 0.92) 100%);
    pointer-events: none;
}

.pp-shell {
    position: relative;
    display: grid;
    gap: 22px;
}

.pp-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(15, 18, 28, 0.72);
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
}

.pp-back:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(22, 26, 38, 0.88);
}

.pp-hero,
.pp-card,
.pp-qs {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(23, 27, 38, 0.9), rgba(13, 16, 25, 0.92));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}

.pp-hero {
    border-radius: 28px;
    overflow: hidden;
}

.pp-banner {
    position: relative;
    min-height: 220px;
    background:
        linear-gradient(135deg, rgba(35, 23, 26, 0.92), rgba(75, 34, 29, 0.92)),
        radial-gradient(circle at 18% 24%, rgba(255, 176, 76, 0.28), transparent 24%),
        radial-gradient(circle at 84% 24%, rgba(255, 255, 255, 0.12), transparent 18%);
}

.pp-banner.has-cover {
    background:
        linear-gradient(180deg, rgba(8, 10, 15, 0.1) 0%, rgba(8, 10, 15, 0.42) 58%, rgba(8, 10, 15, 0.88) 100%),
        var(--pp-cover) center/cover no-repeat;
}

.pp-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 9, 15, 0.04) 0%, rgba(7, 9, 15, 0.18) 40%, rgba(7, 9, 15, 0.88) 100%);
    pointer-events: none;
}

.pp-hero-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    gap: 28px;
    padding: 0 30px 30px;
    margin-top: -88px;
}

.pp-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 160px;
    height: 160px;
    display: grid;
    place-items: center;
}

.pp-avatar-shell {
    position: relative;
    display: grid;
    place-items: center;
    width: 160px;
    height: 160px;
    padding: 4px;
    border-radius: 24px;
    background: transparent;
    box-shadow: none;
    transition: transform 220ms ease, filter 220ms ease;
}

.pp-avatar {
    width: 138px;
    height: 138px;
    display: grid;
    place-items: center;
    transition: transform 220ms ease;
}

.steam-avatar.pp-avatar .steam-avatar-img,
.steam-avatar.pp-avatar .steam-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    border: 0;
    box-shadow: none;
    object-fit: cover;
    object-position: center;
    transition: transform 220ms ease, filter 220ms ease;
}

.steam-avatar.pp-avatar .steam-avatar-frame {
    inset: -14%;
    width: 128%;
    height: 128%;
    opacity: 0.9;
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(90, 145, 255, 0.18));
    transition: transform 260ms ease, filter 260ms ease, opacity 260ms ease;
}

.pp-avatar-shell:hover,
.pp-avatar-shell:focus-within {
    transform: translateY(-4px);
    filter: saturate(1.06);
}

.pp-avatar-shell:hover .pp-avatar,
.pp-avatar-shell:focus-within .pp-avatar {
    transform: scale(1.015);
}

.pp-avatar-shell:hover .steam-avatar.pp-avatar .steam-avatar-img,
.pp-avatar-shell:hover .steam-avatar.pp-avatar .steam-avatar-placeholder,
.pp-avatar-shell:focus-within .steam-avatar.pp-avatar .steam-avatar-img,
.pp-avatar-shell:focus-within .steam-avatar.pp-avatar .steam-avatar-placeholder {
    transform: scale(1.035);
    filter: brightness(1.05) saturate(1.04);
}

.pp-avatar-shell:hover .steam-avatar.pp-avatar .steam-avatar-frame,
.pp-avatar-shell:focus-within .steam-avatar.pp-avatar .steam-avatar-frame {
    opacity: 1;
    transform: scale(1.025);
    filter: drop-shadow(0 0 10px rgba(90, 145, 255, 0.24));
}

@media (prefers-reduced-motion: reduce) {
    .pp-avatar-shell,
    .pp-avatar,
    .steam-avatar.pp-avatar .steam-avatar-img,
    .steam-avatar.pp-avatar .steam-avatar-placeholder,
    .steam-avatar.pp-avatar .steam-avatar-frame {
        transition: none;
    }

    .pp-avatar-shell:hover,
    .pp-avatar-shell:focus-within,
    .pp-avatar-shell:hover .pp-avatar,
    .pp-avatar-shell:focus-within .pp-avatar,
    .pp-avatar-shell:hover .steam-avatar.pp-avatar .steam-avatar-img,
    .pp-avatar-shell:hover .steam-avatar.pp-avatar .steam-avatar-placeholder,
    .pp-avatar-shell:focus-within .steam-avatar.pp-avatar .steam-avatar-img,
    .pp-avatar-shell:focus-within .steam-avatar.pp-avatar .steam-avatar-placeholder,
    .pp-avatar-shell:hover .steam-avatar.pp-avatar .steam-avatar-frame,
    .pp-avatar-shell:focus-within .steam-avatar.pp-avatar .steam-avatar-frame {
        transform: none;
        filter: none;
    }
}

.pp-online-dot {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 4px solid rgba(12, 15, 23, 0.92);
    background: #8f97aa;
}

.pp-online-dot.is-on {
    background: #58d97d;
    box-shadow: 0 0 0 6px rgba(88, 217, 125, 0.12);
}

.pp-identity {
    min-width: 0;
    display: grid;
    gap: 14px;
    flex: 1;
}

.pp-name-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.pp-name-row h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.45rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.pp-chip,
.pp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.82rem;
    font-weight: 700;
}

.pp-chip-online,
.pp-badge-ok,
.pp-badge-ok i {
    color: #73df96;
}

.pp-chip-online {
    border-color: rgba(88, 217, 125, 0.28);
    background: rgba(88, 217, 125, 0.12);
}

.pp-steam-id {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.72);
}

.pp-steam-id code {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.9rem;
}

.pp-now-playing,
.pp-last-server {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.78);
}

.pp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.pp-profile-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.84rem;
    line-height: 1.6;
}

.pp-profile-note i {
    color: rgba(255, 255, 255, 0.56);
    margin-top: 2px;
}

.pp-quick-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.pp-qs {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
}

.pp-qs-icon,
.pp-sec-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(205, 65, 50, 0.14);
    color: #ff8a6e;
    flex-shrink: 0;
}

.pp-qs-data {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.pp-qs-data span,
.pp-info-label,
.pp-sec-label,
.pp-rust-big-label,
.pp-game-info span,
.pp-history-dates,
.pp-empty p {
    color: rgba(255, 255, 255, 0.62);
}

.pp-qs-data strong,
.pp-info-value,
.pp-sec-item strong,
.pp-rust-big-value,
.pp-game-info strong,
.pp-history-top strong {
    color: #fff;
}

.pp-tone-ok {
    color: #76e39a;
}

.pp-tone-warn {
    color: #ffd073;
}

.pp-tone-danger {
    color: #ff8c80;
}

.pp-tone-muted {
    color: rgba(255, 255, 255, 0.58);
}

.pp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.88fr);
    gap: 20px;
}

.pp-col {
    display: grid;
    gap: 20px;
}

.pp-card {
    border-radius: 24px;
    overflow: hidden;
}

.pp-card-alert {
    border-color: rgba(232, 85, 74, 0.24);
    box-shadow: 0 18px 50px rgba(86, 18, 12, 0.18);
}

.pp-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 24px 0;
    color: rgba(255, 255, 255, 0.82);
}

.pp-card-head h2 {
    margin: 0;
    font-size: 1.08rem;
    color: #fff;
}

.pp-card-head .pp-badge {
    margin-left: auto;
}

.pp-badge-danger {
    color: #ff8c80;
    border-color: rgba(232, 85, 74, 0.28);
    background: rgba(232, 85, 74, 0.12);
}

.pp-badge-warn {
    color: #ffd073;
    border-color: rgba(255, 208, 115, 0.22);
    background: rgba(255, 208, 115, 0.1);
}

.pp-badge-muted {
    color: rgba(255, 255, 255, 0.7);
}

.pp-card-body {
    padding: 20px 24px 24px;
}

.pp-info-grid,
.pp-security-grid {
    display: grid;
    gap: 12px;
}

.pp-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pp-info-item,
.pp-sec-item,
.pp-history-row,
.pp-game-row {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 18px;
}

.pp-info-item {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.pp-history {
    display: grid;
    gap: 12px;
}

.pp-history-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
}

.pp-history-icon {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.pp-history-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.05);
}

.pp-dot-ok {
    background: #73df96;
    box-shadow: 0 0 0 6px rgba(115, 223, 150, 0.12);
}

.pp-dot-warn {
    background: #ffd073;
    box-shadow: 0 0 0 6px rgba(255, 208, 115, 0.12);
}

.pp-dot-muted {
    background: #8993a8;
}

.pp-history-content {
    display: grid;
    gap: 10px;
}

.pp-history-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.pp-history-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    font-size: 0.9rem;
}

.pp-history-dates span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pp-sec-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
}

.pp-sec-item.is-flagged {
    border-color: rgba(232, 85, 74, 0.22);
    background: rgba(232, 85, 74, 0.08);
}

.pp-sec-icon.ok {
    background: rgba(88, 217, 125, 0.14);
    color: #73df96;
}

.pp-sec-icon.danger {
    background: rgba(232, 85, 74, 0.16);
    color: #ff8c80;
}

.pp-sec-icon.muted {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
}

.pp-sec-note,
.pp-rust-status,
.pp-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 16px;
    padding: 14px 16px;
    margin-top: 14px;
}

.pp-sec-note,
.pp-rust-status.muted,
.pp-empty {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.74);
}

.pp-rust-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pp-rust-big {
    border-radius: 20px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
        radial-gradient(circle at 90% 10%, rgba(255, 166, 77, 0.18), transparent 24%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.pp-rust-big-value {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.pp-rust-status.ok {
    background: rgba(88, 217, 125, 0.12);
    color: #73df96;
}

.pp-rust-status.warn {
    background: rgba(255, 208, 115, 0.12);
    color: #ffd073;
}

.pp-games {
    display: grid;
    gap: 12px;
}

.pp-game-row {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px;
}

.pp-game-icon {
    height: 60px;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.2);
}

.pp-game-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-game-info {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.pp-weapons-grid {
    display: grid;
    gap: 10px;
}

.dash-stats-shell {
    display: grid;
    gap: 22px;
}

.dash-stats-shell__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.dash-stats-shell__intro {
    margin: 8px 0 0;
    max-width: 720px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.92rem;
}

.dash-stats-switcher {
    display: inline-flex;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    gap: 6px;
    flex-shrink: 0;
}

.dash-stats-switcher__btn {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    padding: 10px 16px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.dash-stats-switcher__btn.is-active {
    background: linear-gradient(135deg, rgba(232, 85, 74, 0.28), rgba(255, 166, 77, 0.22));
    color: #fff6ef;
    box-shadow: 0 12px 24px rgba(232, 85, 74, 0.18);
}

.dash-stats-panel {
    display: none;
    gap: 18px;
}

.dash-stats-panel.is-active {
    display: grid;
}

.dash-stats-info-grid {
    margin-top: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-item-metric-section {
    display: grid;
    gap: 14px;
}

.dash-item-metric-section__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.92);
}

.dash-item-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.dash-item-metric {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
}

.dash-item-metric__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 20, 28, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.dash-item-metric__icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}

.dash-item-metric__copy {
    display: grid;
    gap: 4px;
}

.dash-item-metric__copy strong {
    font-size: 1.05rem;
    color: #fff;
}

.dash-item-metric__copy span {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.66);
}

.pp-weapon-item--iconic {
    justify-content: flex-start;
    gap: 14px;
}

.pp-weapon-media {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 20, 28, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    flex-shrink: 0;
}

.pp-weapon-media img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.pp-weapon-copy {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.dash-stats-note {
    margin-top: 4px;
}

.pp-weapon-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.pp-weapon-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pp-weapon-stats {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
}

.pp-weapon-stats i {
    margin-right: 4px;
    font-size: 0.72rem;
}

.pp-empty {
    justify-content: center;
    text-align: center;
}

[data-theme="light"] .pp-back {
    background: rgba(255, 255, 255, 0.82);
    color: #263245;
    border-color: rgba(27, 39, 56, 0.1);
}

[data-theme="light"] .pp-back:hover {
    background: rgba(255, 255, 255, 0.96);
}

[data-theme="light"] .pp-hero,
[data-theme="light"] .pp-card,
[data-theme="light"] .pp-qs {
    border-color: rgba(27, 39, 56, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 247, 251, 0.98));
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.08);
}

[data-theme="light"] .pp-banner {
    background:
        linear-gradient(135deg, rgba(238, 244, 250, 0.94), rgba(250, 234, 226, 0.96)),
        radial-gradient(circle at 20% 25%, rgba(205, 65, 50, 0.12), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(255, 166, 77, 0.14), transparent 20%);
}

[data-theme="light"] .pp-banner::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(242, 247, 251, 0.18) 46%, rgba(242, 247, 251, 0.92) 100%);
}

[data-theme="light"] .steam-avatar.pp-avatar .steam-avatar-img,
[data-theme="light"] .steam-avatar.pp-avatar .steam-avatar-placeholder {
    border: 0;
    box-shadow: none;
}

[data-theme="light"] .pp-chip i,
[data-theme="light"] .pp-badge i {
    color: #5c6777;
}

[data-theme="light"] .pp-chip-online,
[data-theme="light"] .pp-badge-ok {
    color: #15803d;
    border-color: rgba(22, 163, 74, 0.2);
    background: rgba(22, 163, 74, 0.08);
}

[data-theme="light"] .pp-chip-online i,
[data-theme="light"] .pp-badge-ok i {
    color: #16a34a;
}

[data-theme="light"] .pp-name-row h1,
[data-theme="light"] .pp-qs-data strong,
[data-theme="light"] .pp-info-value,
[data-theme="light"] .pp-sec-item strong,
[data-theme="light"] .pp-rust-big-value,
[data-theme="light"] .pp-game-info strong,
[data-theme="light"] .pp-history-top strong,
[data-theme="light"] .pp-card-head h2,
[data-theme="light"] .pp-steam-id code {
    color: #182230;
}

[data-theme="light"] .pp-chip,
[data-theme="light"] .pp-badge,
[data-theme="light"] .pp-steam-id code,
[data-theme="light"] .pp-info-item,
[data-theme="light"] .pp-sec-item,
[data-theme="light"] .pp-history-row,
[data-theme="light"] .pp-game-row,
[data-theme="light"] .pp-rust-big,
[data-theme="light"] .pp-sec-note,
[data-theme="light"] .pp-rust-status.muted,
[data-theme="light"] .pp-empty {
    border-color: rgba(27, 39, 56, 0.08);
    background: rgba(255, 255, 255, 0.68);
    color: #263245;
}

[data-theme="light"] .pp-steam-id,
[data-theme="light"] .pp-now-playing,
[data-theme="light"] .pp-last-server,
[data-theme="light"] .pp-profile-note,
[data-theme="light"] .pp-qs-data span,
[data-theme="light"] .pp-info-label,
[data-theme="light"] .pp-sec-label,
[data-theme="light"] .pp-rust-big-label,
[data-theme="light"] .pp-game-info span,
[data-theme="light"] .pp-history-dates,
[data-theme="light"] .pp-empty p,
[data-theme="light"] .pp-card-head {
    color: #5c6777;
}

[data-theme="light"] .pp-online-dot {
    border-color: rgba(255, 255, 255, 0.94);
}

[data-theme="light"] .pp-profile-note i {
    color: #7a8798;
}

[data-theme="light"] .pp-weapon-item {
    border-color: rgba(27, 39, 56, 0.08);
    background: rgba(255, 255, 255, 0.68);
}

[data-theme="light"] .dash-stats-shell__intro {
    color: rgba(38, 50, 69, 0.74);
}

[data-theme="light"] .dash-stats-switcher {
    border-color: rgba(27, 39, 56, 0.08);
    background: rgba(255, 255, 255, 0.78);
}

[data-theme="light"] .dash-stats-switcher__btn {
    color: rgba(38, 50, 69, 0.72);
}

[data-theme="light"] .dash-item-metric,
[data-theme="light"] .pp-weapon-media,
[data-theme="light"] .dash-item-metric__icon {
    border-color: rgba(27, 39, 56, 0.08);
}

[data-theme="light"] .dash-item-metric {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 251, 0.94));
}

[data-theme="light"] .dash-item-metric__copy strong,
[data-theme="light"] .dash-item-metric-section__title,
[data-theme="light"] .pp-weapon-name {
    color: var(--text);
}

[data-theme="light"] .dash-item-metric__copy span,
[data-theme="light"] .pp-weapon-stats {
    color: var(--text-dim);
}

[data-theme="light"] .pp-weapon-name {
    color: #182230;
}

[data-theme="light"] .pp-weapon-stats {
    color: #5c6777;
}

@media (max-width: 1180px) {
    .pp-quick-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pp-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .pp-page {
        padding-top: 108px;
    }

    .pp-hero-body {
        margin-top: -70px;
        padding: 0 22px 22px;
        flex-direction: column;
        align-items: start;
    }

    .pp-avatar-wrap,
    .pp-avatar-shell {
        width: 146px;
        height: 146px;
    }

    .pp-avatar {
        width: 126px;
        height: 126px;
    }

    .pp-info-grid,
    .pp-rust-stats,
    .pp-quick-stats {
        grid-template-columns: 1fr 1fr;
    }

    .dash-stats-shell__head {
        flex-direction: column;
    }

    .dash-stats-switcher {
        width: 100%;
        justify-content: stretch;
    }

    .dash-stats-switcher__btn {
        flex: 1;
    }

    .dash-stats-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .pp-shell {
        gap: 18px;
    }

    .pp-banner {
        min-height: 180px;
    }

    .pp-hero-body {
        margin-top: -54px;
        padding: 0 16px 16px;
        gap: 18px;
    }

    .pp-avatar-wrap,
    .pp-avatar-shell {
        width: 120px;
        height: 120px;
    }

    .pp-avatar {
        width: 104px;
        height: 104px;
    }

    .pp-name-row h1 {
        font-size: 1.9rem;
    }

    .pp-card-head,
    .pp-card-body,
    .pp-qs {
        padding-left: 16px;
        padding-right: 16px;
    }

    .pp-quick-stats,
    .pp-info-grid,
    .pp-rust-stats {
        grid-template-columns: 1fr;
    }

    .dash-stats-info-grid {
        grid-template-columns: 1fr;
    }

    .pp-game-row {
        grid-template-columns: 1fr;
    }

    .pp-game-icon {
        height: 86px;
    }

    .pp-history-dates,
    .pp-steam-id,
    .pp-actions,
    .pp-name-row {
        gap: 10px;
    }
}

.players-pagination {
    display: flex;
    gap: 8px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.players-page-link {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(26, 26, 38, 0.55);
    color: rgba(255,255,255,0.7);
    font-weight: 700;
}

.lp-page {
    position: relative;
    padding: 118px 0 56px;
    overflow: clip;
}

.lp-page .container {
    width: min(1280px, calc(100% - 40px));
}

.lp-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 14% 18%, rgba(191, 61, 30, 0.24), transparent 24%),
        radial-gradient(circle at 86% 14%, rgba(255, 170, 84, 0.18), transparent 22%),
        linear-gradient(180deg, rgba(7, 9, 14, 0) 0%, rgba(7, 9, 14, 0.72) 64%, rgba(7, 9, 14, 0.94) 100%);
    pointer-events: none;
}

.lp-shell {
    position: relative;
    display: grid;
    gap: 22px;
}

.lp-hero,
.lp-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(21, 25, 36, 0.94), rgba(11, 14, 22, 0.96));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}

.lp-hero {
    border-radius: 30px;
    overflow: hidden;
}

.lp-hero-cover {
    min-height: 250px;
    background:
        linear-gradient(135deg, rgba(53, 25, 18, 0.94), rgba(104, 42, 28, 0.88)),
        radial-gradient(circle at 16% 18%, rgba(255, 185, 88, 0.26), transparent 24%),
        radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.12), transparent 18%);
}

.lp-hero-cover.has-cover {
    background:
        linear-gradient(180deg, rgba(8, 10, 16, 0.12) 0%, rgba(8, 10, 16, 0.5) 60%, rgba(8, 10, 16, 0.9) 100%),
        var(--lp-cover) center/cover no-repeat;
}

.lp-hero-body {
    position: relative;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 28px;
    padding: 0 30px 30px;
    margin-top: -86px;
}

.lp-hero-media {
    display: grid;
    justify-items: center;
    gap: 12px;
}

.lp-level-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 173, 74, 0.22), rgba(232, 85, 74, 0.18));
    border: 1px solid rgba(255, 196, 110, 0.24);
    color: #fff0db;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.lp-avatar {
    width: 182px;
    height: 182px;
}

.steam-avatar.lp-avatar .steam-avatar-img,
.steam-avatar.lp-avatar .steam-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid rgba(11, 14, 22, 0.92);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.3);
}

.steam-avatar.lp-avatar .steam-avatar-frame {
    inset: -14%;
    width: 128%;
    height: 128%;
}

.lp-hero-copy {
    display: grid;
    gap: 18px;
    align-content: end;
}

.lp-role-line,
.lp-tag-row,
.lp-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.lp-role-chip,
.lp-tag,
.lp-steam-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.83rem;
    font-weight: 700;
}

.lp-role-chip {
    background: rgba(255, 170, 84, 0.12);
    border-color: rgba(255, 170, 84, 0.24);
    color: #ffe6ca;
}

.lp-tag {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.76);
}

.lp-hero-copy h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.lp-hero-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
}

.lp-summary-stat {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.lp-summary-stat strong {
    color: #fff;
    margin-right: 4px;
}

.lp-headline-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.lp-headline-card,
.lp-mini-metric,
.lp-impact-item,
.lp-activity-row,
.lp-achievement-item,
.lp-killfeed-item,
.lp-weapon-item {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
}

.lp-headline-card {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
}

.lp-headline-card span,
.lp-card-head span,
.lp-achievement-item span,
.lp-activity-row span,
.lp-killfeed-item span,
.lp-weapon-metrics,
.lp-empty,
.lp-card-note {
    color: rgba(255, 255, 255, 0.66);
}

.lp-headline-card strong,
.lp-mini-metric strong,
.lp-achievement-item strong,
.lp-activity-row strong,
.lp-killfeed-item strong,
.lp-weapon-head strong,
.lp-impact-item strong {
    color: #fff;
}

.lp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.86fr);
    gap: 20px;
}

.lp-col {
    display: grid;
    gap: 20px;
}

.lp-card {
    border-radius: 26px;
    overflow: hidden;
}

.lp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 0;
}

.lp-card-head h2 {
    margin: 0;
    color: #fff;
    font-size: 1.04rem;
    letter-spacing: 0.08em;
}

.lp-impact-shell,
.lp-weapon-list,
.lp-activity-table,
.lp-achievement-list,
.lp-killfeed-list,
.lp-mini-metrics {
    padding: 20px 24px 24px;
}

.lp-impact-shell {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}

.lp-impact-figure {
    position: relative;
    height: 260px;
    display: grid;
    place-items: center;
}

.lp-figure-head,
.lp-figure-torso,
.lp-figure-arms,
.lp-figure-legs {
    position: absolute;
    background: linear-gradient(180deg, rgba(255, 166, 77, 0.22), rgba(232, 85, 74, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.lp-figure-head {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    top: 10px;
}

.lp-figure-torso {
    width: 74px;
    height: 102px;
    border-radius: 28px;
    top: 72px;
}

.lp-figure-arms {
    width: 132px;
    height: 20px;
    border-radius: 999px;
    top: 102px;
}

.lp-figure-legs {
    width: 24px;
    height: 92px;
    border-radius: 999px;
    box-shadow: 42px 0 0 0 rgba(255, 166, 77, 0.16);
    top: 176px;
}

.lp-impact-list,
.lp-weapon-list,
.lp-achievement-list,
.lp-killfeed-list {
    display: grid;
    gap: 12px;
}

.lp-achievement-list--stack {
    gap: 10px;
}

.lp-impact-item {
    padding: 14px 16px;
    display: grid;
    gap: 10px;
}

.lp-impact-item__top,
.lp-weapon-head,
.lp-killfeed-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lp-impact-bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.lp-impact-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #e8554a, #ffb04d);
}

.lp-weapon-item,
.lp-achievement-item,
.lp-killfeed-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
}

.lp-weapon-copy,
.lp-killfeed-main {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 6px;
}

.lp-achievement-copy {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 5px;
}

.lp-weapon-media {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 21, 31, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.lp-weapon-media img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.lp-weapon-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.84rem;
}

.lp-activity-table,
.lp-mini-metrics {
    display: grid;
    gap: 12px;
}

.lp-activity-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 16px;
    padding: 18px;
    min-height: 84px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.lp-activity-row div,
.lp-achievement-item div,
.lp-mini-metric {
    display: grid;
    gap: 6px;
}

.lp-activity-row > div:first-child strong {
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.lp-activity-row > div:first-child span {
    color: rgba(223, 228, 236, 0.7);
    font-size: 0.85rem;
}

.lp-activity-row > div:not(:first-child) strong {
    color: rgba(223, 229, 238, 0.56);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.lp-activity-row > div:not(:first-child) span {
    color: #f4f6fa;
    font-size: 0.84rem;
    font-weight: 700;
}

.lp-achievement-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 170, 84, 0.12);
    border: 1px solid rgba(255, 170, 84, 0.22);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.lp-mini-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lp-mini-metric {
    padding: 16px;
}

.lp-killfeed-item.is-kill {
    border-color: rgba(88, 217, 125, 0.16);
}

.lp-killfeed-item.is-death {
    border-color: rgba(232, 85, 74, 0.16);
}

.lp-empty {
    padding: 20px 24px 24px;
}

[data-theme="light"] .lp-hero,
[data-theme="light"] .lp-card {
    border-color: rgba(27, 39, 56, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 251, 0.98));
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.08);
}

[data-theme="light"] .lp-hero-cover {
    background:
        linear-gradient(135deg, rgba(249, 240, 232, 0.96), rgba(241, 246, 251, 0.96)),
        radial-gradient(circle at 18% 18%, rgba(232, 85, 74, 0.12), transparent 24%),
        radial-gradient(circle at 82% 20%, rgba(255, 166, 77, 0.14), transparent 18%);
}

[data-theme="light"] .lp-role-chip,
[data-theme="light"] .lp-tag,
[data-theme="light"] .lp-steam-link,
[data-theme="light"] .lp-headline-card,
[data-theme="light"] .lp-mini-metric,
[data-theme="light"] .lp-impact-item,
[data-theme="light"] .lp-activity-row,
[data-theme="light"] .lp-achievement-item,
[data-theme="light"] .lp-killfeed-item,
[data-theme="light"] .lp-weapon-item,
[data-theme="light"] .lp-weapon-media {
    border-color: rgba(27, 39, 56, 0.08);
    background: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .lp-hero-copy h1,
[data-theme="light"] .lp-card-head h2,
[data-theme="light"] .lp-summary-stat strong,
[data-theme="light"] .lp-headline-card strong,
[data-theme="light"] .lp-mini-metric strong,
[data-theme="light"] .lp-achievement-item strong,
[data-theme="light"] .lp-activity-row strong,
[data-theme="light"] .lp-killfeed-item strong,
[data-theme="light"] .lp-weapon-head strong,
[data-theme="light"] .lp-impact-item strong {
    color: #182230;
}

[data-theme="light"] .lp-card-head span,
[data-theme="light"] .lp-summary-stat,
[data-theme="light"] .lp-achievement-item span,
[data-theme="light"] .lp-activity-row span,
[data-theme="light"] .lp-killfeed-item span,
[data-theme="light"] .lp-weapon-metrics,
[data-theme="light"] .lp-empty,
[data-theme="light"] .lp-card-note {
    color: #5c6777;
}

@media (max-width: 1120px) {
    .lp-grid,
    .lp-hero-body {
        grid-template-columns: 1fr;
    }

    .lp-hero-media {
        justify-items: start;
    }

    .lp-headline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-impact-shell,
    .lp-activity-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .lp-page {
        padding-top: 108px;
    }

    .lp-hero-body {
        margin-top: -60px;
        padding: 0 18px 18px;
        gap: 18px;
    }

    .lp-avatar {
        width: 132px;
        height: 132px;
    }

    .lp-headline-grid,
    .lp-mini-metrics {
        grid-template-columns: 1fr;
    }

    .lp-hero-summary {
        gap: 10px;
    }

    .lp-impact-shell,
    .lp-weapon-list,
    .lp-activity-table,
    .lp-achievement-list,
    .lp-killfeed-list,
    .lp-mini-metrics {
        padding-left: 16px;
        padding-right: 16px;
    }

    .lp-card-head {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.lp-shell {
    gap: 14px;
}

.lp-topline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    min-height: 30px;
}

.lp-categories {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 0;
}

.lp-category-link {
    color: rgba(138, 149, 170, 0.76);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.lp-category-link:hover {
    color: rgba(225, 232, 242, 0.92);
}

.lp-category-link.is-active {
    color: #ff8754;
}

.lp-category-separator {
    color: rgba(113, 123, 143, 0.52);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.lp-hero {
    border-radius: 28px;
    border-color: rgba(255, 151, 109, 0.14);
    background:
        linear-gradient(135deg, rgba(22, 19, 28, 0.98), rgba(13, 17, 26, 0.96) 48%, rgba(24, 17, 18, 0.96) 100%);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.28);
}

.lp-hero-cover {
    min-height: 188px;
    background:
        radial-gradient(circle at 12% 16%, rgba(255, 170, 96, 0.12), transparent 24%),
        radial-gradient(circle at 88% 18%, rgba(118, 203, 104, 0.14), transparent 24%),
        linear-gradient(180deg, rgba(4, 8, 14, 0.12), rgba(4, 8, 14, 0.8)),
        linear-gradient(135deg, rgba(31, 24, 30, 0.96), rgba(10, 17, 27, 0.97));
}

.lp-hero-body {
    position: relative;
    grid-template-columns: 178px minmax(0, 1fr);
    gap: 28px;
    margin-top: -72px;
    padding: 0 238px 22px 30px;
    align-items: end;
}

.lp-hero-media {
    position: relative;
    display: grid;
    justify-items: center;
    align-items: center;
}

.lp-level-pill {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    right: 6px;
    bottom: 6px;
    z-index: 3;
    min-width: 72px;
    min-height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.94);
    border: 1px solid rgba(255, 163, 105, 0.12);
    color: #ff9e59;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.34);
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.lp-avatar-shell {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    width: 160px;
}

.lp-avatar-shell__frame {
    position: relative;
    display: grid;
    place-items: center;
    width: 160px;
    height: 160px;
    padding: 4px;
    border-radius: 24px;
    background: transparent;
    transition: transform 220ms ease, filter 220ms ease;
    box-shadow: none;
}

.lp-level-progress {
    display: grid;
    gap: 6px;
    width: 100%;
    padding: 0 6px;
}

.lp-level-progress__top,
.lp-level-progress__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lp-level-progress__top span {
    color: rgba(227, 233, 241, 0.62);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lp-level-progress__top strong {
    color: #ffd8b8;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.lp-level-progress__track {
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.lp-level-progress__track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff9e59 0%, #ffd36b 52%, #8dc3ff 100%);
    box-shadow: 0 0 16px rgba(255, 182, 110, 0.32);
}

.lp-level-progress__bottom {
    color: rgba(219, 226, 235, 0.7);
    font-size: 0.62rem;
    font-weight: 700;
}

.lp-level-progress__bottom span:last-child {
    color: rgba(255, 184, 120, 0.84);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lp-avatar {
    width: 138px;
    transition: transform 220ms ease;
    height: 138px;
}

.steam-avatar.lp-avatar .steam-avatar-img,
.steam-avatar.lp-avatar .steam-avatar-placeholder {
    border-radius: 14px;
    border: 0;
    box-shadow: none;
    object-fit: cover;
    transition: transform 220ms ease, filter 220ms ease;
    object-position: center;
}

.steam-avatar.lp-avatar .steam-avatar-frame {
    inset: -14%;
    width: 128%;
    height: 128%;
    opacity: 0.9;
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(90, 145, 255, 0.18));
    transition: transform 260ms ease, filter 260ms ease, opacity 260ms ease;
}

.lp-avatar-shell:hover .lp-avatar-shell__frame,
.lp-avatar-shell:focus-within .lp-avatar-shell__frame {
    transform: translateY(-4px);
    filter: saturate(1.06);
}

.lp-avatar-shell:hover .lp-avatar,
.lp-avatar-shell:focus-within .lp-avatar {
    transform: scale(1.015);
}

.lp-avatar-shell:hover .steam-avatar.lp-avatar .steam-avatar-img,
.lp-avatar-shell:hover .steam-avatar.lp-avatar .steam-avatar-placeholder,
.lp-avatar-shell:focus-within .steam-avatar.lp-avatar .steam-avatar-img,
.lp-avatar-shell:focus-within .steam-avatar.lp-avatar .steam-avatar-placeholder {
    transform: scale(1.035);
    filter: brightness(1.05) saturate(1.04);
}

.lp-avatar-shell:hover .steam-avatar.lp-avatar .steam-avatar-frame,
.lp-avatar-shell:focus-within .steam-avatar.lp-avatar .steam-avatar-frame {
    opacity: 1;
    transform: scale(1.025);
    filter: drop-shadow(0 0 10px rgba(90, 145, 255, 0.24));
}

.lp-avatar-shell:hover .lp-level-pill,
.lp-avatar-shell:focus-within .lp-level-pill {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.38);
}

@media (prefers-reduced-motion: reduce) {
    .lp-avatar-shell,
    .lp-avatar-shell__frame,
    .lp-avatar,
    .steam-avatar.lp-avatar .steam-avatar-img,
    .steam-avatar.lp-avatar .steam-avatar-placeholder,
    .steam-avatar.lp-avatar .steam-avatar-frame,
    .lp-level-pill,
    .lp-level-progress__track span {
        transition: none;
    }

    .lp-avatar-shell:hover,
    .lp-avatar-shell:focus-within,
    .lp-avatar-shell:hover .lp-avatar-shell__frame,
    .lp-avatar-shell:focus-within .lp-avatar-shell__frame,
    .lp-avatar-shell:hover .lp-avatar,
    .lp-avatar-shell:focus-within .lp-avatar,
    .lp-avatar-shell:hover .steam-avatar.lp-avatar .steam-avatar-img,
    .lp-avatar-shell:hover .steam-avatar.lp-avatar .steam-avatar-placeholder,
    .lp-avatar-shell:focus-within .steam-avatar.lp-avatar .steam-avatar-img,
    .lp-avatar-shell:focus-within .steam-avatar.lp-avatar .steam-avatar-placeholder,
    .lp-avatar-shell:hover .steam-avatar.lp-avatar .steam-avatar-frame,
    .lp-avatar-shell:focus-within .steam-avatar.lp-avatar .steam-avatar-frame,
    .lp-avatar-shell:hover .lp-level-pill,
    .lp-avatar-shell:focus-within .lp-level-pill {
        transform: none;
        filter: none;
    }
}

.lp-hero-copy {
    gap: 14px;
    padding-top: 12px;
    padding-bottom: 18px;
}

.lp-name-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.lp-role-line,
.lp-tag-row,
.lp-action-row {
    gap: 9px;
}

.lp-role-chip,
.lp-tag,
.lp-steam-link {
    min-height: 32px;
    padding: 0 13px;
    border-radius: 10px;
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.lp-role-chip {
    background: linear-gradient(135deg, rgba(78, 73, 102, 0.64), rgba(37, 33, 54, 0.88));
    color: #ffe9cf;
}

.lp-steam-link--muted {
    color: rgba(220, 226, 235, 0.72);
}

.lp-hero-copy h1 {
    font-size: clamp(2.5rem, 4vw, 3.8rem);
    line-height: 0.9;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    color: #fff4e6;
    text-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.lp-identity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: rgba(214, 222, 234, 0.7);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: none;
}

.lp-identity-meta__item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.lp-identity-meta__item--link {
    color: inherit;
    text-decoration: none;
    border-radius: 999px;
    padding: 2px 6px 2px 0;
    transition: opacity 180ms ease, transform 180ms ease, color 180ms ease, text-shadow 180ms ease, box-shadow 180ms ease;
}

.lp-identity-meta__item--link:hover,
.lp-identity-meta__item--link:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
    text-shadow: 0 0 14px rgba(255, 208, 176, 0.18);
}

.lp-identity-meta__item--link:hover .lp-identity-meta__value,
.lp-identity-meta__item--link:focus-visible .lp-identity-meta__value {
    color: #fff3e7;
}

.lp-identity-meta__label {
    color: rgba(248, 223, 211, 0.92);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lp-identity-meta__value {
    color: rgba(226, 232, 241, 0.82);
    letter-spacing: 0.04em;
}

.lp-tag {
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(248, 223, 211, 0.86);
}

.lp-tag-row--achievements {
    gap: 8px;
    margin-bottom: -2px;
}

.lp-tag--achievement {
    gap: 8px;
    padding: 0 12px 0 10px;
    border-color: rgba(255, 177, 119, 0.16);
    background: linear-gradient(135deg, rgba(255, 170, 84, 0.12), rgba(255, 255, 255, 0.04));
    color: #ffe9cf;
}

.lp-tag__icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff0e0;
    font-size: 0.76rem;
    line-height: 1;
}

.lp-tag__label {
    line-height: 1;
}

.lp-action-row {
    position: absolute;
    top: -94px;
    right: 30px;
    z-index: 3;
    padding-top: 2px;
    gap: 12px;
}

.lp-hero-btn {
    min-height: 46px;
    min-width: 182px;
    padding: 0 20px;
    border-radius: 14px;
    border-color: rgba(255, 239, 214, 0.24);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(245, 162, 73, 0.14));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    color: #fff7ee;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.lp-btn-secondary {
    border-color: rgba(255, 255, 255, 0.06);
    color: rgba(224, 230, 238, 0.82);
}

.lp-hero-side {
    position: absolute;
    top: 118px;
    right: 30px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.lp-hero-kpi {
    display: grid;
    gap: 6px;
    min-width: 90px;
    justify-items: start;
}

.lp-hero-kpi span {
    color: rgba(214, 221, 232, 0.5);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.lp-hero-kpi strong {
    color: #fff6ed;
    font-size: 1.95rem;
    line-height: 1;
    letter-spacing: -0.05em;
}

.lp-hero-kpi--accent strong {
    color: #6af1b1;
}

.lp-headline-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
    gap: 14px;
}

.lp-headline-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-height: 126px;
    padding: 16px 16px 15px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 18px 30px rgba(0, 0, 0, 0.24);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.lp-headline-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 56%);
    pointer-events: none;
    transition: opacity 220ms ease, background 220ms ease;
}

.lp-headline-card__icon {
    position: relative;
    z-index: 1;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: transparent;
    box-shadow: none;
    font-size: 1.52rem;
    transform-origin: center;
    transition: transform 220ms ease, filter 220ms ease, text-shadow 220ms ease;
}

.lp-headline-card:hover,
.lp-headline-card:focus-within {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 26px 38px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
    filter: saturate(1.08);
}

.lp-headline-card:hover::before,
.lp-headline-card:focus-within::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 64%);
}

.lp-headline-card:hover .lp-headline-card__icon,
.lp-headline-card:focus-within .lp-headline-card__icon {
    transform: scale(1.18);
    filter: brightness(1.12) saturate(1.12);
}

.lp-headline-card__copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
    width: 100%;
}

.lp-headline-card__copy strong {
    font-size: clamp(1.56rem, 2.2vw, 2.18rem);
    line-height: 0.92;
    letter-spacing: -0.06em;
}

.lp-headline-card__copy span {
    max-width: 100%;
    color: rgba(231, 236, 244, 0.68);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lp-headline-card--kills {
    background: linear-gradient(135deg, rgba(53, 30, 35, 0.92), rgba(24, 18, 24, 0.94));
    border-color: rgba(237, 114, 108, 0.48);
    box-shadow: inset 0 0 0 1px rgba(255, 228, 225, 0.05), 0 18px 30px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(237, 114, 108, 0.16), 0 0 24px rgba(237, 114, 108, 0.12);
}

.lp-headline-card--kills .lp-headline-card__icon {
    color: #ff9f97;
    text-shadow: 0 0 20px rgba(237, 114, 108, 0.32);
}

.lp-headline-card--deaths {
    background: linear-gradient(135deg, rgba(33, 24, 39, 0.94), rgba(20, 17, 30, 0.96));
    border-color: rgba(168, 111, 255, 0.44);
    box-shadow: inset 0 0 0 1px rgba(236, 227, 255, 0.05), 0 18px 30px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(168, 111, 255, 0.15), 0 0 24px rgba(168, 111, 255, 0.11);
}

.lp-headline-card--deaths .lp-headline-card__icon {
    color: #bf88ff;
    text-shadow: 0 0 20px rgba(168, 111, 255, 0.32);
}

.lp-headline-card--distance {
    background: linear-gradient(135deg, rgba(41, 43, 17, 0.94), rgba(22, 26, 18, 0.96));
    border-color: rgba(226, 204, 87, 0.46);
    box-shadow: inset 0 0 0 1px rgba(255, 247, 196, 0.05), 0 18px 30px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(226, 204, 87, 0.15), 0 0 24px rgba(226, 204, 87, 0.12);
}

.lp-headline-card--distance .lp-headline-card__icon {
    color: #f0dd6b;
    text-shadow: 0 0 20px rgba(226, 204, 87, 0.32);
}

.lp-headline-card--time {
    background: linear-gradient(135deg, rgba(11, 53, 43, 0.96), rgba(15, 28, 31, 0.96));
    border-color: rgba(64, 232, 186, 0.48);
    box-shadow: inset 0 0 0 1px rgba(215, 255, 244, 0.05), 0 18px 30px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(64, 232, 186, 0.15), 0 0 24px rgba(64, 232, 186, 0.13);
}

.lp-headline-card--time .lp-headline-card__icon {
    color: #59f0c4;
    text-shadow: 0 0 20px rgba(64, 232, 186, 0.34);
}

@media (prefers-reduced-motion: reduce) {
    .lp-identity-meta__item--link,
    .lp-headline-card,
    .lp-headline-card::before,
    .lp-headline-card__icon {
        transition: none;
    }

    .lp-identity-meta__item--link:hover,
    .lp-identity-meta__item--link:focus-visible,
    .lp-headline-card:hover,
    .lp-headline-card:focus-within,
    .lp-headline-card:hover .lp-headline-card__icon,
    .lp-headline-card:focus-within .lp-headline-card__icon {
        transform: none;
        filter: none;
    }
}

.lp-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(380px, 0.64fr);
    align-items: start;
    gap: 20px;
}

.lp-col {
    gap: 18px;
}

.lp-col-main {
    gap: 28px;
}

.lp-main-upper {
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.lp-card {
    border-radius: 24px;
    border-color: rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(20, 24, 34, 0.96), rgba(9, 12, 20, 0.98));
}

.lp-card-head {
    align-items: center;
    padding: 20px 22px 0;
}

.lp-card-head--showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.lp-card-head--impact {
    display: flex;
    align-items: center;
    padding: 20px 20px 0 20px;
}

.lp-card-head h2 {
    font-size: 0.94rem;
    letter-spacing: 0.18em;
    margin: 0;
}

.lp-card-head span {
    color: rgba(214, 222, 232, 0.54);
    font-size: 0.72rem;
    font-weight: 700;
}

.lp-card-head--showcase h2 {
    max-width: 16ch;
    line-height: 1.24;
}

.lp-card--impact .lp-card-head--showcase h2,
.lp-card--weapons .lp-card-head--showcase h2 {
    max-width: none;
    white-space: nowrap;
    font-size: 1.08rem;
    letter-spacing: 0.18em;
}

.lp-card--impact .lp-card-head--impact h2 {
    max-width: none;
    white-space: nowrap;
    font-size: 1.1rem;
    letter-spacing: 0.18em;
}

.lp-card--activity .lp-card-head--showcase h2,
.lp-card--killfeed .lp-card-head--showcase h2,
.lp-card--telemetry .lp-card-head--showcase h2,
.lp-card--achievements .lp-card-head--showcase h2 {
    max-width: none;
    white-space: nowrap;
}
.lp-card--killfeed .lp-card-head--showcase h2,
.lp-card--telemetry .lp-card-head--showcase h2,
.lp-card--achievements .lp-card-head--showcase h2 {
    font-size: 0.82rem;
    letter-spacing: 0.16em;
}

.lp-card-head__meta {
    margin-top: 4px;
    max-width: 11ch;
    justify-self: end;
    text-align: right;
    color: rgba(208, 216, 228, 0.46);
    font-size: 0.61rem;
    line-height: 1.32;
    letter-spacing: 0.06em;
    text-transform: none;
}

.lp-card-head__action {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    min-height: 24px;
    color: rgba(232, 238, 246, 0.52);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.18s ease, transform 0.18s ease;
}

.lp-card-head__action:hover,
.lp-card-head__action:focus-visible {
    color: rgba(255, 183, 114, 0.96);
    transform: translateY(-1px);
}

.lp-impact-shell,
.lp-weapon-list,
.lp-activity-table,
.lp-achievement-list,
.lp-killfeed-list,
.lp-mini-metrics {
    padding: 18px 22px 22px;
}

.lp-card--achievements .lp-achievement-list,
.lp-card--killfeed .lp-killfeed-list,
.lp-card--telemetry .lp-mini-metrics {
    padding-left: 18px;
    padding-right: 18px;
}

.lp-card--achievements .lp-card-head,
.lp-card--killfeed .lp-card-head,
.lp-card--telemetry .lp-card-head {
    padding-left: 18px;
    padding-right: 18px;
}

.lp-card--achievements .lp-card-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-bottom: 14px;
}

.lp-card--achievements .lp-card-head::after {
    content: '';
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.lp-card--achievements .lp-achievement-list {
    gap: 12px;
    padding-top: 16px;
    padding-bottom: 14px;
}

.lp-card--achievements .lp-achievement-item {
    min-height: 78px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.lp-card--achievements .lp-achievement-item.is-active {
    border-color: rgba(255, 170, 84, 0.24);
    background: linear-gradient(180deg, rgba(255, 177, 108, 0.12), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 28px rgba(0, 0, 0, 0.16);
}

.lp-card--achievements .lp-achievement-item.is-locked {
    border-color: rgba(255, 255, 255, 0.045);
    background: rgba(255, 255, 255, 0.016);
    opacity: 1;
}

.lp-card--achievements .lp-achievement-item.is-locked .lp-achievement-icon {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.34);
}

.lp-card--achievements .lp-achievement-item.is-locked .lp-achievement-copy strong {
    color: rgba(255, 255, 255, 0.64);
}

.lp-card--achievements .lp-achievement-item.is-locked .lp-achievement-copy span {
    color: rgba(219, 226, 235, 0.38);
}

.lp-card--achievements .lp-achievement-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 170, 84, 0.16), rgba(91, 59, 44, 0.32));
    border-color: rgba(255, 170, 84, 0.16);
    font-size: 1rem;
}

.lp-card--achievements .lp-achievement-copy {
    gap: 4px;
}

.lp-card--achievements .lp-achievement-copy strong {
    font-size: 0.92rem;
    letter-spacing: -0.02em;
}

.lp-card--achievements .lp-achievement-copy span {
    color: rgba(219, 226, 235, 0.72);
    font-size: 0.77rem;
    line-height: 1.34;
}

.lp-card--achievements .lp-achievement-state {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #ff9a63;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.lp-card--achievements .lp-achievement-footer {
    padding: 0 18px 18px;
}

.lp-card--achievements .lp-achievement-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 183, 114, 0.96);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.18s ease, transform 0.18s ease;
}

.lp-card--achievements .lp-achievement-more:hover,
.lp-card--achievements .lp-achievement-more:focus-visible {
    color: #ffd0aa;
    transform: translateX(2px);
}

.lp-card--impact {
    border-color: rgba(255, 169, 109, 0.14);
}

.lp-card--weapons {
    min-height: 100%;
}

.lp-main-upper .lp-card {
    min-height: 596px;
}

.lp-impact-shell {
    display: block;
}

.lp-card--impact .lp-impact-shell {
    padding: 10px 18px 24px 18px;
    user-select: none;
    -webkit-user-select: none;
}

.lp-impact-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 4px;
    justify-content: stretch;
    align-items: center;
    padding: 8px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.lp-impact-stage__media,
.lp-impact-stage__stats {
    min-width: 0;
}

.lp-impact-stage__media {
    position: relative;
    display: grid;
    gap: 14px;
}

.lp-impact-viewer {
    position: relative;
    width: 100%;
    height: 474px;
    min-height: 474px;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    user-select: none;
    -webkit-user-select: none;
}

.lp-impact-viewer::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 24px;
    width: 220px;
    height: 240px;
    transform: translateX(-50%);
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 126, 95, 0.18), rgba(255, 126, 95, 0) 54%),
        radial-gradient(circle at 50% 72%, rgba(150, 85, 255, 0.26), rgba(150, 85, 255, 0) 62%);
    filter: blur(12px);
    pointer-events: none;
}

.lp-impact-viewer::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 164px;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: radial-gradient(circle at center, rgba(120, 90, 255, 0.28), rgba(120, 90, 255, 0) 72%);
    filter: blur(10px);
    pointer-events: none;
}

.lp-impact-viewer canvas {
    display: block;
    width: 100%;
    height: 100%;
    filter: saturate(1.15) brightness(1.1) drop-shadow(0 18px 34px rgba(0, 0, 0, 0.22));
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

.lp-impact-viewer__fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    transition: opacity 0.26s ease;
}

.lp-impact-viewer__fallback span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 44%, rgba(255, 255, 255, 0.02) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 38px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(16px);
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    animation: lp-impact-loader-pulse 1.9s ease-in-out infinite;
}

.lp-impact-viewer[data-ready="true"] .lp-impact-viewer__fallback {
    opacity: 0;
}

.lp-impact-model-meta,
.lp-impact-model-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.lp-impact-model-meta {
    padding-top: 2px;
}

.lp-impact-model-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 10px;
    color: rgba(232, 238, 246, 0.42);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.lp-impact-model-toggle {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(234, 240, 248, 0.74);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.lp-impact-model-toggle:hover,
.lp-impact-model-toggle:focus-visible {
    border-color: rgba(255, 176, 98, 0.26);
    background: rgba(255, 176, 98, 0.08);
    color: rgba(255, 255, 255, 0.92);
    transform: translateY(-1px);
}

.lp-impact-model-toggle i {
    font-size: 0.92rem;
}

.lp-impact-stage__stats {
    display: grid;
    gap: 18px;
    align-content: center;
    width: 138px;
    justify-self: center;
    transform: translateX(8px);
    user-select: none;
    -webkit-user-select: none;
}

.lp-impact-list {
    display: grid;
    gap: 22px;
    width: 138px;
}

.lp-impact-item {
    --impact-tone: rgba(255, 255, 255, 0.88);
    --impact-line-width: 132px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: grid;
    gap: 9px;
    transition: opacity 0.18s ease;
}

.lp-impact-item--head {
    --impact-tone: #ff7d64;
}

.lp-impact-item--chest {
    --impact-tone: #69a7ff;
}

.lp-impact-item--stomach {
    --impact-tone: #f3c758;
}

.lp-impact-item--arms {
    --impact-tone: #52e4a6;
}

.lp-impact-item--legs {
    --impact-tone: #b37cff;
}

.lp-impact-item:hover,
.lp-impact-item.is-active {
    transform: none;
    border-color: transparent;
    background: transparent;
    opacity: 1;
}

.lp-impact-item__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: var(--impact-line-width);
    justify-self: start;
    align-items: center;
    gap: 6px;
}

.lp-impact-item__top strong {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--impact-tone);
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lp-impact-item__top strong::before {
    content: '';
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--impact-tone);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    animation: lp-impact-pulse 1.7s ease-in-out infinite;
}

.lp-impact-item__top span {
    color: rgba(242, 246, 251, 0.92);
    font-size: 0.72rem;
    font-weight: 800;
    min-width: 30px;
    text-align: right;
    white-space: nowrap;
}

.lp-impact-bar {
    width: var(--impact-line-width);
    height: 6px;
    justify-self: start;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.lp-impact-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

@keyframes lp-impact-pulse {
    0%,
    100% {
        background: var(--impact-tone);
        transform: scale(1);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 0 rgba(255, 255, 255, 0.06);
    }

    50% {
        background: #ffffff;
        transform: scale(1.22);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 6px rgba(255, 255, 255, 0.04);
    }
}

@keyframes lp-impact-loader-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 38px rgba(0, 0, 0, 0.24);
    }

    50% {
        transform: scale(1.06);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 22px 44px rgba(0, 0, 0, 0.28);
    }
}

.lp-weapon-list {
    display: grid;
    gap: 14px;
}

.lp-weapon-item {
    min-height: 84px;
    padding: 16px 16px 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.lp-weapon-head strong {
    font-size: 0.98rem;
    letter-spacing: -0.02em;
}

.lp-weapon-head span {
    color: rgba(255, 150, 107, 0.94);
    font-size: 0.78rem;
    font-weight: 800;
}

.lp-weapon-metrics {
    gap: 10px;
    font-size: 0.74rem;
    letter-spacing: 0.03em;
}

.lp-empty--weapons {
    display: grid;
    align-content: center;
    gap: 10px;
    min-height: 492px;
    margin: 0;
    padding: 28px 22px 24px;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.lp-empty--weapons strong {
    color: #fff4e6;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.lp-empty--weapons span {
    max-width: 28ch;
    color: rgba(219, 226, 236, 0.72);
    font-size: 0.94rem;
    line-height: 1.6;
}

.lp-impact-item--head .lp-impact-bar span {
    background: linear-gradient(90deg, #ff6b5a, #ff8d68);
}

.lp-impact-item--chest .lp-impact-bar span {
    background: linear-gradient(90deg, #5c84ff, #75b1ff);
}

.lp-impact-item--stomach .lp-impact-bar span {
    background: linear-gradient(90deg, #f3c758, #ffd973);
}

.lp-impact-item--arms .lp-impact-bar span {
    background: linear-gradient(90deg, #39d58b, #61efb1);
}

.lp-impact-item--legs .lp-impact-bar span {
    background: linear-gradient(90deg, #a95dff, #cf8dff);
}

.lp-impact-note {
    margin: 0;
    max-width: 44ch;
    color: rgba(214, 222, 232, 0.42);
    font-size: 0.74rem;
    line-height: 1.55;
}

.lp-weapon-item,
.lp-achievement-item,
.lp-killfeed-item,
.lp-mini-metric,
.lp-activity-row {
    border-radius: 18px;
}

.lp-weapon-item,
.lp-killfeed-item,
.lp-achievement-item {
    padding: 16px;
}

.lp-weapon-media,
.lp-achievement-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

.lp-achievement-icon {
    background: rgba(255, 180, 106, 0.14);
}

.lp-mini-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.lp-mini-metric {
    padding: 16px;
}

.lp-killfeed-item.is-kill {
    border-color: rgba(57, 213, 139, 0.16);
}

.lp-killfeed-item.is-death {
    border-color: rgba(255, 107, 90, 0.14);
}

.lp-page--achievements .lp-shell {
    gap: 18px;
}

.lp-page--achievements .container {
    width: min(1186px, calc(100% - 36px));
}

.lp-archive-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.88fr);
    gap: 20px;
    padding: 22px 24px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top left, rgba(255, 132, 92, 0.14), rgba(255, 132, 92, 0) 32%),
        radial-gradient(circle at bottom right, rgba(102, 214, 255, 0.12), rgba(102, 214, 255, 0) 36%),
        linear-gradient(180deg, rgba(10, 16, 26, 0.92), rgba(10, 15, 24, 0.82));
    box-shadow: 0 30px 62px rgba(4, 9, 16, 0.28);
}

.lp-archive-hero__identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    min-width: 0;
}

.lp-archive-avatar {
    width: 96px;
    height: 96px;
}

.lp-level-pill--archive {
    min-width: 62px;
    min-height: 28px;
    padding: 0 10px;
    justify-content: center;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
}

.lp-level-progress--archive {
    max-width: 160px;
    padding: 0 4px;
}

.lp-level-progress--archive .lp-level-progress__top span {
    font-size: 0.54rem;
}

.lp-level-progress--archive .lp-level-progress__top strong {
    font-size: 0.76rem;
}

.lp-level-progress--archive .lp-level-progress__bottom {
    font-size: 0.58rem;
}

.lp-archive-hero__copy {
    display: grid;
    gap: 11px;
    min-width: 0;
}

.lp-archive-kicker {
    color: rgba(255, 193, 135, 0.92);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.lp-archive-hero__copy h1 {
    margin: 0;
    color: #f6f8fb;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
}

.lp-archive-hero__description {
    margin: 0;
    max-width: 44ch;
    color: rgba(218, 226, 236, 0.72);
    font-size: 0.82rem;
    line-height: 1.55;
}

.lp-archive-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lp-archive-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 11px 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 177, 119, 0.16);
    background: linear-gradient(135deg, rgba(255, 170, 84, 0.12), rgba(255, 255, 255, 0.04));
    color: #ffe9cf;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lp-archive-tag__icon {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff0e0;
    font-size: 0.74rem;
}

.lp-archive-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lp-archive-hero__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    color: rgba(231, 237, 245, 0.76);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.lp-archive-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lp-archive-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #f5f7fb;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.lp-archive-action:hover,
.lp-archive-action:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 180, 106, 0.28);
    background: rgba(255, 180, 106, 0.08);
}

.lp-archive-hero__summary {
    display: grid;
    gap: 12px;
    align-content: start;
}

.lp-archive-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.lp-archive-summary-card {
    position: relative;
    display: grid;
    gap: 6px;
    min-height: 84px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 28px rgba(4, 9, 16, 0.12);
}

.lp-archive-summary-card--unlock {
    border-color: rgba(255, 164, 118, 0.18);
    background:
        radial-gradient(circle at top right, rgba(255, 164, 118, 0.18), rgba(255, 164, 118, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
}

.lp-archive-summary-card--progress {
    border-color: rgba(110, 210, 255, 0.18);
    background:
        radial-gradient(circle at top right, rgba(110, 210, 255, 0.18), rgba(110, 210, 255, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
}

.lp-archive-summary-card--category {
    border-color: rgba(193, 147, 255, 0.18);
    background:
        radial-gradient(circle at top right, rgba(193, 147, 255, 0.2), rgba(193, 147, 255, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
}

.lp-archive-summary-card span {
    color: rgba(211, 220, 231, 0.58);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lp-archive-summary-card strong {
    color: #fff6ea;
    font-size: 1.12rem;
    letter-spacing: -0.045em;
}

.lp-archive-next-card {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 173, 108, 0.18);
    background: linear-gradient(180deg, rgba(255, 173, 108, 0.1), rgba(255, 173, 108, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 30px rgba(24, 12, 5, 0.12);
}

.lp-archive-next-card.is-complete {
    border-color: rgba(69, 214, 144, 0.18);
    background: linear-gradient(180deg, rgba(69, 214, 144, 0.1), rgba(69, 214, 144, 0.04));
}

.lp-archive-next-card > span {
    color: rgba(255, 208, 165, 0.72);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lp-archive-next-card strong {
    color: #fff;
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.lp-archive-next-card p {
    margin: 0;
    color: rgba(232, 237, 244, 0.7);
    font-size: 0.78rem;
    line-height: 1.45;
}

.lp-archive-next-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: rgba(255, 233, 211, 0.82);
    font-size: 0.7rem;
    font-weight: 700;
}

.lp-archive-sync-note {
    padding: 11px 14px;
    border-radius: 15px;
    border: 1px solid rgba(255, 214, 107, 0.18);
    background: rgba(255, 214, 107, 0.07);
    color: rgba(244, 231, 199, 0.78);
    font-size: 0.74rem;
    line-height: 1.52;
}

.lp-archive-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 20px;
    align-items: start;
}

.lp-archive-main,
.lp-archive-side {
    display: grid;
    gap: 16px;
}

.lp-archive-side {
    position: sticky;
    top: 88px;
}

.lp-card--archive-side .lp-card-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.lp-card--archive-side .lp-card-head h2 {
    max-width: none;
    white-space: nowrap;
}

.lp-archive-category {
    --archive-accent: #ff7b5c;
    --archive-accent-soft: rgba(255, 123, 92, 0.18);
    display: grid;
    gap: 16px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(11, 17, 27, 0.88), rgba(10, 15, 24, 0.78));
    box-shadow: 0 22px 42px rgba(4, 9, 16, 0.24);
}

.lp-archive-category--combat {
    --archive-accent: #ff7b5c;
    --archive-accent-soft: rgba(255, 123, 92, 0.18);
}

.lp-archive-category--time {
    --archive-accent: #ffd36b;
    --archive-accent-soft: rgba(255, 211, 107, 0.18);
}

.lp-archive-category--farm {
    --archive-accent: #5fe39b;
    --archive-accent-soft: rgba(95, 227, 155, 0.18);
}

.lp-archive-category--build {
    --archive-accent: #8dc3ff;
    --archive-accent-soft: rgba(141, 195, 255, 0.18);
}

.lp-archive-category--raid {
    --archive-accent: #ff9b5e;
    --archive-accent-soft: rgba(255, 155, 94, 0.18);
}

.lp-archive-category--pve {
    --archive-accent: #7ee1ff;
    --archive-accent-soft: rgba(126, 225, 255, 0.18);
}

.lp-archive-category--network {
    --archive-accent: #bb8cff;
    --archive-accent-soft: rgba(187, 140, 255, 0.18);
}

.lp-archive-category--events {
    --archive-accent: #f09dff;
    --archive-accent-soft: rgba(240, 157, 255, 0.18);
}

.lp-archive-category--economy {
    --archive-accent: #61d8b1;
    --archive-accent-soft: rgba(97, 216, 177, 0.18);
}

.lp-archive-category__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.lp-archive-category__title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.lp-archive-category__icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: linear-gradient(180deg, var(--archive-accent-soft), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-size: 1.12rem;
}

.lp-archive-category__title h2 {
    margin: 0;
    color: #fff;
    font-size: 0.88rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lp-archive-category__title p {
    margin: 9px 0 0;
    max-width: 56ch;
    color: rgba(216, 224, 235, 0.68);
    font-size: 0.8rem;
    line-height: 1.54;
}

.lp-archive-category__summary {
    text-align: right;
}

.lp-archive-category__summary strong {
    display: block;
    color: #fff;
    font-size: 1.02rem;
    letter-spacing: -0.04em;
}

.lp-archive-category__summary span {
    color: rgba(214, 222, 232, 0.52);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lp-archive-achievement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.lp-archive-achievement {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    min-height: 148px;
    padding: 18px 18px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 26px rgba(4, 9, 16, 0.14);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.lp-archive-achievement:hover {
    transform: translateY(-2px);
    border-color: var(--archive-accent-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.024));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 32px rgba(4, 9, 16, 0.18);
}

.lp-archive-achievement.is-unlocked {
    border-color: var(--archive-accent-soft);
    background:
        radial-gradient(circle at top right, var(--archive-accent-soft), rgba(255, 255, 255, 0) 54%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.022));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 18px 34px rgba(4, 9, 16, 0.18);
}

.lp-archive-achievement__icon {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--archive-accent-soft), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    font-size: 1.28rem;
}

.lp-archive-achievement__body {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.lp-archive-achievement__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.lp-archive-achievement__top strong {
    color: #fff;
    font-size: 0.94rem;
    letter-spacing: -0.015em;
}

.lp-archive-achievement__top span {
    color: var(--archive-accent);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lp-archive-achievement__body p {
    margin: 0;
    color: rgba(220, 227, 236, 0.68);
    font-size: 0.8rem;
    line-height: 1.54;
}

.lp-archive-achievement__progress {
    display: grid;
    gap: 8px;
}

.lp-archive-progress-bar {
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.lp-archive-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--archive-accent), rgba(255, 255, 255, 0.84));
}

.lp-archive-achievement__meta,
.lp-archive-featured-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 14px;
    color: rgba(214, 222, 232, 0.58);
    font-size: 0.68rem;
    font-weight: 700;
}

.lp-achievement-list--archive-side {
    gap: 12px;
}

.lp-achievement-list--archive-side .lp-achievement-item {
    align-items: flex-start;
    min-height: 132px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.lp-achievement-list--archive-side .lp-achievement-item.is-active {
    border-color: rgba(255, 170, 84, 0.22);
    background: linear-gradient(180deg, rgba(255, 177, 108, 0.14), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 28px rgba(0, 0, 0, 0.16);
}

.lp-achievement-list--archive-side .lp-achievement-item.is-locked {
    border-color: rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.018);
}

.lp-achievement-list--archive-side .lp-achievement-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 170, 84, 0.16), rgba(91, 59, 44, 0.32));
    border-color: rgba(255, 170, 84, 0.16);
    font-size: 1rem;
}

.lp-achievement-list--archive-side .lp-achievement-item.is-locked .lp-achievement-icon {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.34);
}

.lp-achievement-list--archive-side .lp-achievement-copy {
    gap: 6px;
}

.lp-achievement-list--archive-side .lp-achievement-copy strong {
    font-size: 0.92rem;
    letter-spacing: -0.02em;
}

.lp-achievement-list--archive-side .lp-achievement-copy span {
    color: rgba(219, 226, 235, 0.74);
    font-size: 0.78rem;
    line-height: 1.42;
}

.lp-achievement-list--archive-side .lp-achievement-item.is-locked .lp-achievement-copy strong {
    color: rgba(255, 255, 255, 0.7);
}

.lp-achievement-list--archive-side .lp-achievement-item.is-locked .lp-achievement-copy span {
    color: rgba(219, 226, 235, 0.46);
}

.lp-archive-featured-footer {
    display: grid;
    gap: 10px;
}

.lp-archive-featured-meta {
    justify-content: flex-start;
    gap: 8px 12px;
}

.lp-archive-equip-form {
    margin: 0;
}

.lp-archive-equip-button,
.lp-archive-equip-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lp-archive-equip-button {
    cursor: pointer;
    background: rgba(255, 183, 114, 0.1);
    border-color: rgba(255, 183, 114, 0.18);
    color: #ffd2ac;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.lp-archive-equip-button:hover,
.lp-archive-equip-button:focus-visible {
    transform: translateY(-1px);
    background: rgba(255, 183, 114, 0.16);
    border-color: rgba(255, 183, 114, 0.26);
}

.lp-archive-equip-button--ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(231, 237, 245, 0.84);
}

.lp-archive-equip-button--ghost:hover,
.lp-archive-equip-button--ghost:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

.lp-archive-equip-chip.is-equipped {
    background: rgba(95, 227, 155, 0.12);
    border-color: rgba(95, 227, 155, 0.2);
    color: #8bf0b5;
}

.lp-archive-equip-chip.is-unlocked {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(231, 237, 245, 0.8);
}

.lp-archive-stat-list {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.lp-archive-stat-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}

.lp-archive-stat-item span {
    color: rgba(214, 222, 232, 0.56);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lp-archive-stat-item strong {
    color: #fff;
    font-size: 0.9rem;
    letter-spacing: -0.02em;
}

[data-theme="light"] .lp-breadcrumbs {
    color: rgba(38, 50, 69, 0.44);
}

[data-theme="light"] .lp-card-head__action {
    color: rgba(38, 50, 69, 0.56);
}

[data-theme="light"] .lp-card-head__action:hover,
[data-theme="light"] .lp-card-head__action:focus-visible {
    color: #d77932;
}

[data-theme="light"] .lp-archive-hero,
[data-theme="light"] .lp-archive-category,
[data-theme="light"] .lp-archive-summary-card,
[data-theme="light"] .lp-archive-next-card,
[data-theme="light"] .lp-archive-achievement,
[data-theme="light"] .lp-archive-stat-item,
[data-theme="light"] .lp-archive-sync-note {
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 16px 38px rgba(16, 24, 40, 0.08);
}

[data-theme="light"] .lp-archive-summary-card--unlock {
    background: linear-gradient(180deg, rgba(255, 160, 112, 0.16), rgba(255, 255, 255, 0.92));
    border-color: rgba(255, 160, 112, 0.22);
}

[data-theme="light"] .lp-archive-summary-card--progress {
    background: linear-gradient(180deg, rgba(112, 205, 255, 0.16), rgba(255, 255, 255, 0.92));
    border-color: rgba(112, 205, 255, 0.22);
}

[data-theme="light"] .lp-archive-summary-card--category {
    background: linear-gradient(180deg, rgba(187, 140, 255, 0.16), rgba(255, 255, 255, 0.92));
    border-color: rgba(187, 140, 255, 0.22);
}

[data-theme="light"] .lp-archive-next-card {
    background: linear-gradient(180deg, rgba(255, 183, 122, 0.18), rgba(255, 255, 255, 0.9));
    border-color: rgba(215, 121, 50, 0.18);
}

[data-theme="light"] .lp-archive-next-card.is-complete {
    background: linear-gradient(180deg, rgba(69, 214, 144, 0.16), rgba(255, 255, 255, 0.9));
    border-color: rgba(69, 214, 144, 0.2);
}

[data-theme="light"] .lp-tag--achievement,
[data-theme="light"] .lp-archive-tag {
    border-color: rgba(215, 121, 50, 0.16);
    background: rgba(255, 245, 236, 0.92);
    color: #7c461d;
}

[data-theme="light"] .lp-tag__icon,
[data-theme="light"] .lp-archive-tag__icon {
    background: rgba(215, 121, 50, 0.12);
    color: #d77932;
}

[data-theme="light"] .lp-card--achievements .lp-achievement-item {
    border-color: rgba(27, 39, 56, 0.08);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.06);
}

[data-theme="light"] .lp-card--achievements .lp-achievement-item.is-active {
    border-color: rgba(215, 121, 50, 0.18);
    background: linear-gradient(180deg, rgba(255, 191, 145, 0.22), rgba(255, 255, 255, 0.95));
}

[data-theme="light"] .lp-card--achievements .lp-achievement-item.is-locked {
    background: rgba(244, 247, 251, 0.88);
}

[data-theme="light"] .lp-card--achievements .lp-achievement-item.is-locked .lp-achievement-copy strong {
    color: #556273;
}

[data-theme="light"] .lp-card--achievements .lp-achievement-item.is-locked .lp-achievement-copy span {
    color: #7a8698;
}

[data-theme="light"] .lp-card--achievements .lp-achievement-icon {
    background: linear-gradient(135deg, rgba(255, 183, 122, 0.2), rgba(255, 255, 255, 0.92));
    border-color: rgba(215, 121, 50, 0.14);
}

[data-theme="light"] .lp-card--achievements .lp-achievement-state,
[data-theme="light"] .lp-card--achievements .lp-achievement-more {
    color: #d77932;
}

[data-theme="light"] .lp-card--achievements .lp-achievement-more {
    border-top-color: rgba(27, 39, 56, 0.08);
}

[data-theme="light"] .lp-achievement-list--archive-side .lp-achievement-item {
    border-color: rgba(27, 39, 56, 0.08);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.06);
}

[data-theme="light"] .lp-achievement-list--archive-side .lp-achievement-item.is-active {
    border-color: rgba(215, 121, 50, 0.18);
    background: linear-gradient(180deg, rgba(255, 191, 145, 0.22), rgba(255, 255, 255, 0.95));
}

[data-theme="light"] .lp-achievement-list--archive-side .lp-achievement-item.is-locked {
    background: rgba(244, 247, 251, 0.88);
}

[data-theme="light"] .lp-achievement-list--archive-side .lp-achievement-icon {
    background: linear-gradient(135deg, rgba(255, 183, 122, 0.2), rgba(255, 255, 255, 0.92));
    border-color: rgba(215, 121, 50, 0.14);
}

[data-theme="light"] .lp-achievement-list--archive-side .lp-achievement-item.is-locked .lp-achievement-copy strong {
    color: #556273;
}

[data-theme="light"] .lp-achievement-list--archive-side .lp-achievement-item.is-locked .lp-achievement-copy span {
    color: #7a8698;
}

[data-theme="light"] .lp-archive-equip-button {
    background: rgba(215, 121, 50, 0.08);
    border-color: rgba(215, 121, 50, 0.16);
    color: #d77932;
}

[data-theme="light"] .lp-archive-equip-button--ghost {
    background: rgba(16, 24, 40, 0.04);
    border-color: rgba(16, 24, 40, 0.08);
    color: #45546a;
}

[data-theme="light"] .lp-archive-equip-chip.is-equipped {
    background: rgba(28, 146, 86, 0.1);
    border-color: rgba(28, 146, 86, 0.16);
    color: #15803d;
}

[data-theme="light"] .lp-archive-equip-chip.is-unlocked {
    background: rgba(16, 24, 40, 0.04);
    color: #45546a;
}

[data-theme="light"] .lp-archive-hero__copy h1,
[data-theme="light"] .lp-archive-summary-card strong,
[data-theme="light"] .lp-archive-next-card strong,
[data-theme="light"] .lp-archive-category__title h2,
[data-theme="light"] .lp-archive-category__summary strong,
[data-theme="light"] .lp-archive-achievement__top strong,
[data-theme="light"] .lp-archive-stat-item strong {
    color: #182230;
}

[data-theme="light"] .lp-archive-hero__description,
[data-theme="light"] .lp-archive-category__title p,
[data-theme="light"] .lp-archive-achievement__body p,
[data-theme="light"] .lp-archive-achievement__meta,
[data-theme="light"] .lp-archive-featured-meta,
[data-theme="light"] .lp-archive-stat-item span,
[data-theme="light"] .lp-archive-next-card p,
[data-theme="light"] .lp-archive-sync-note {
    color: #5b6777;
}

[data-theme="light"] .lp-archive-hero__meta span {
    background: rgba(16, 24, 40, 0.04);
    border-color: rgba(16, 24, 40, 0.07);
    color: #45546a;
}

[data-theme="light"] .lp-archive-action {
    border-color: rgba(16, 24, 40, 0.08);
    background: rgba(16, 24, 40, 0.04);
    color: #253041;
}

[data-theme="light"] .lp-archive-sync-note {
    border-color: rgba(214, 151, 41, 0.18);
    background: rgba(214, 151, 41, 0.08);
}

[data-theme="light"] .lp-hero,
[data-theme="light"] .lp-card,
[data-theme="light"] .lp-impact-viewer,
[data-theme="light"] .lp-impact-stage {
    box-shadow: 0 16px 38px rgba(16, 24, 40, 0.08);
}

[data-theme="light"] .lp-impact-stage,
[data-theme="light"] .lp-card {
    background: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .lp-hero-kpi span {
    color: rgba(38, 50, 69, 0.52);
}

[data-theme="light"] .lp-hero-kpi strong {
    color: #182230;
}

[data-theme="light"] .lp-hero-kpi--accent strong {
    color: #15803d;
}

[data-theme="light"] .lp-impact-note,
[data-theme="light"] .lp-impact-item__top span {
    color: #5c6777;
}

[data-theme="light"] .lp-category-link {
    color: #415069;
}

[data-theme="light"] .lp-category-link.is-active {
    color: #d77932;
}

[data-theme="light"] .lp-category-separator {
    color: rgba(90, 104, 124, 0.42);
}

@media (max-width: 1220px) {
    .lp-page .container {
        width: min(1180px, calc(100% - 36px));
    }

    .lp-hero-body {
        grid-template-columns: 172px minmax(0, 1fr);
        padding-right: 226px;
    }

    .lp-headline-grid {
        grid-template-columns: repeat(4, minmax(148px, 1fr));
    }

    .lp-main-upper {
        grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
    }

    .lp-main-upper .lp-card {
        min-height: 548px;
    }

    .lp-hero-side {
        position: absolute;
        display: flex;
        gap: 22px;
        padding-left: 22px;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 0;
    }

    .lp-archive-layout {
        grid-template-columns: 1fr;
    }

    .lp-archive-side {
        position: static;
        top: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .lp-hero-body,
    .lp-activity-row {
        grid-template-columns: 1fr;
    }

    .lp-topline {
        display: flex;
        justify-content: flex-start;
    }

    .lp-hero-body {
        margin-top: -60px;
        padding: 0 20px 18px;
    }

    .lp-hero-copy {
        padding-top: 0;
    }

    .lp-action-row,
    .lp-hero-side {
        position: static;
        right: auto;
        top: auto;
    }

    .lp-grid,
    .lp-main-upper {
        grid-template-columns: 1fr;
    }

    .lp-card--achievements .lp-card-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-card-head__action {
        justify-self: start;
    }

    .lp-archive-hero,
    .lp-archive-hero__identity,
    .lp-archive-category__head,
    .lp-archive-achievement-grid,
    .lp-archive-side,
    .lp-archive-summary-grid {
        grid-template-columns: 1fr;
    }

    .lp-archive-hero {
        padding: 18px 16px;
    }

    .lp-archive-hero__identity {
        gap: 14px;
    }

    .lp-archive-avatar {
        width: 84px;
        height: 84px;
    }

    .lp-archive-achievement__top,
    .lp-archive-next-card__meta {
        grid-template-columns: 1fr;
    }

    .lp-archive-achievement__meta,
    .lp-archive-featured-meta,
    .lp-archive-next-card__meta {
        justify-content: flex-start;
    }

    .lp-main-upper .lp-card {
        min-height: auto;
    }

    .lp-hero-side,
    .lp-mini-metrics,
    .lp-headline-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lp-hero-side {
        display: grid;
        gap: 12px;
        padding-left: 0;
        border-left: 0;
        margin-top: 18px;
    }

    .lp-impact-viewer {
        min-height: 320px;
    }

    .lp-impact-stage {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .lp-impact-stage__stats,
    .lp-impact-list {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .lp-hero-body {
        padding: 0 16px 16px;
        gap: 18px;
    }

    .lp-name-row {
        gap: 10px;
        align-items: flex-start;
    }

    .lp-avatar-shell {
        width: 132px;
    }

    .lp-avatar-shell__frame {
        width: 132px;
        height: 132px;
    }

    .lp-avatar {
        width: 112px;
        height: 112px;
    }

    .lp-level-progress {
        gap: 5px;
        padding: 0 2px;
    }

    .lp-level-progress__top span {
        font-size: 0.52rem;
    }

    .lp-level-progress__top strong,
    .lp-level-progress__bottom {
        font-size: 0.58rem;
    }

    .lp-level-pill {
        right: 5px;
        bottom: 5px;
        min-width: 62px;
        min-height: 24px;
        padding: 0 9px;
        font-size: 0.82rem;
    }

    .lp-hero-copy h1 {
        font-size: 2rem;
    }

    .lp-hero-side,
    .lp-mini-metrics,
    .lp-headline-grid {
        grid-template-columns: 1fr;
    }

    .lp-hero-side {
        gap: 10px;
    }

    .lp-breadcrumbs {
        gap: 8px;
        letter-spacing: 0.18em;
    }

    .lp-categories {
        flex-wrap: wrap;
        gap: 6px;
    }

    .lp-category-link {
        font-size: 0.68rem;
        letter-spacing: 0.18em;
    }

    .lp-category-separator {
        font-size: 0.74rem;
    }
}

.players-page-link.active,
.players-page-link:hover {
    border-color: rgba(232, 85, 74, 0.32);
    background: rgba(232, 85, 74, 0.12);
    color: #fff;
}

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

    .players-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .players-page {
        padding-top: 110px;
    }

    .players-helper-note {
        width: 100%;
        justify-content: center;
        border-radius: 14px;
    }

    .players-filters {
        grid-template-columns: 1fr;
    }

    .players-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   STORE PAGE
   =================================== */

.store-shell {
    position: relative;
    padding: 120px 0 60px;
    min-height: 100vh;
    overflow: hidden;
    background:
    radial-gradient(circle at top left, rgba(205, 65, 50, 0.05), transparent 26%),
    radial-gradient(circle at 85% 18%, rgba(59, 130, 246, 0.04), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(249, 115, 22, 0.035), transparent 30%),
    linear-gradient(180deg, rgba(8, 11, 16, 0.06), rgba(12, 15, 22, 0.16));
}

.store-shell__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.store-shell__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.78;
    transform: scale(1.03);
    filter: saturate(1.05) contrast(1.01) brightness(1.12);
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.store-shell__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 8, 14, 0.26) 0%, rgba(8, 10, 16, 0.18) 18%, rgba(10, 12, 18, 0.14) 52%, rgba(10, 12, 18, 0.28) 100%),
        radial-gradient(circle at top left, rgba(205, 65, 50, 0.025), transparent 30%),
        radial-gradient(circle at 85% 18%, rgba(59, 130, 246, 0.02), transparent 24%);
}

.store-shell::before,
.store-shell::after {
    content: '';
    position: absolute;
    inset: auto;
    pointer-events: none;
    filter: blur(8px);
}

.store-shell::before {
    top: 92px;
    left: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(205, 65, 50, 0.04) 0%, rgba(205, 65, 50, 0) 68%);
}

.store-shell::after {
    right: -140px;
    bottom: 40px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, rgba(37, 99, 235, 0) 70%);
}

.store-shell .container {
    position: relative;
    z-index: 1;
    width: min(1720px, calc(100% - 48px));
}

.store-shell .page-header {
    position: relative;
    padding: 8px 0 22px;
    margin-bottom: 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.store-shell .page-header::after {
    content: none;
}

.store-nav-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
}

.store-nav-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.store-inline-tag {
    margin: 0;
    white-space: nowrap;
    padding: 8px 16px;
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(11, 15, 22, 0.74), rgba(11, 15, 22, 0.58));
    color: #fff3ee;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    box-shadow: 0 14px 34px rgba(4, 8, 15, 0.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.store-inline-tag i {
    color: #ff8e74;
}

.store-theme-toggle {
    width: auto;
    min-width: 42px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
}

.store-theme-toggle:hover {
    background: rgba(205, 65, 50, 0.12);
}

.store-trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 22px;
    padding: 0;
}

    font-size: clamp(1.34rem, 2.15vw, 1.78rem);
    line-height: 0.9;
.store-bundle-banner {
    position: relative;
    overflow: hidden;
}

.store-trust-strip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
    padding: 0 16px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.store-trust-strip span:nth-child(1) {
    color: #8ce8af;
}

.store-trust-strip span:nth-child(2) {
    color: #82b8ff;
}

.store-trust-strip span:nth-child(3) {
    color: #cda3ff;
}

.store-trust-strip span + span {
    position: relative;
}

.store-trust-strip span + span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.24);
    transform: translateY(-50%);
}

.store-trust-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    font-size: 0.36rem;
    line-height: 1;
    will-change: opacity, transform, filter;
    animation: store-trust-icon-pulse 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.store-trust-icon--green {
    color: #58d68d;
    animation-delay: 0s;
}

.store-trust-icon--blue {
    color: #60a5fa;
    animation-delay: 0.28s;
}

.store-trust-icon--violet {
    color: #c084fc;
    animation-delay: 0.56s;
}

@keyframes store-trust-icon-pulse {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
        filter: drop-shadow(0 0 0 currentColor);
    }

    45% {
        opacity: 0.78;
        transform: scale(1.08);
        filter: drop-shadow(0 0 3px currentColor);
    }

    70% {
        opacity: 1;
        transform: scale(1.16);
        filter: drop-shadow(0 0 5px currentColor);
    }
}

.store-hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 420px);
    gap: 18px;
    margin-bottom: 26px;
    padding: 28px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top right, rgba(205, 65, 50, 0.18), transparent 28%),
        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.12), transparent 26%),
        linear-gradient(145deg, rgba(17, 20, 31, 0.98), rgba(8, 10, 18, 0.99));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34);
}

.store-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    min-width: 0;
}

.store-hero-kicker,
.store-bundle-kicker,
.server-selector-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: #ffd4cd;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.store-hero-copy h2,
.store-bundle-copy h2 {
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 0.95;
    letter-spacing: 0.01em;
    color: #f8fafc;
    text-transform: uppercase;
}

.store-hero-copy p,
.store-bundle-copy p {
    margin: 0;
    max-width: 58ch;
    color: #b8c3d6;
    font-size: 0.98rem;
    line-height: 1.75;
}

.store-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.store-hero-actions .btn,
.store-bundle-price .btn {
    min-height: 46px;
    padding-inline: 18px;
}

.store-hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-content: stretch;
}

.store-hero-metric {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    min-height: 150px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.store-hero-metric--accent {
    grid-column: 1 / -1;
    min-height: 178px;
    background:
        radial-gradient(circle at top right, rgba(205, 65, 50, 0.26), transparent 38%),
        linear-gradient(180deg, rgba(205, 65, 50, 0.18), rgba(255, 255, 255, 0.04));
}

.store-hero-metric span {
    color: rgba(226, 232, 240, 0.68);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.store-hero-metric strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 0.9;
    color: #fff;
}

.store-hero-metric small {
    color: rgba(226, 232, 240, 0.72);
    font-size: 0.88rem;
}

.server-selector {
    display: grid;
    gap: 14px;
    margin-bottom: 34px;
}

.server-selector-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.server-selector-tab {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: var(--layout-delivery-pad-y) var(--layout-delivery-pad-x);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(18, 21, 33, 0.96), rgba(11, 14, 22, 0.98));
    color: #dbe5f4;
    text-decoration: none;
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.16);
}

.server-selector-tab:hover {
    transform: translateY(-3px);
    border-color: rgba(205, 65, 50, 0.28);
    box-shadow: 0 28px 50px rgba(0, 0, 0, 0.22);
}

.server-selector-tab.active {
    border-color: rgba(205, 65, 50, 0.35);
    background:
        radial-gradient(circle at top right, rgba(205, 65, 50, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(25, 20, 24, 0.98), rgba(12, 11, 18, 0.99));
    box-shadow: 0 30px 56px rgba(205, 65, 50, 0.12);
}

.server-selector-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.12);
}

.server-selector-dot.online {
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.12);
}

.server-selector-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.24rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1;
}

.server-selector-players {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(241, 245, 249, 0.9);
    font-size: 0.8rem;
    font-weight: 700;
}

/* Store Category */
.store-category {
    margin-bottom: 36px;
    position: relative;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

/* ─── Store Search Bar ─────────────────────────────────────── */
.store-search-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 26px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 24px 42px rgba(0, 0, 0, 0.16);
}

.store-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.store-search-icon {
    position: absolute;
    left: 16px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.95rem;
    pointer-events: none;
}

.store-search-input {
    width: 100%;
    min-height: 50px;
    padding: 12px 44px 12px 42px;
    font-family: 'Inter', sans-serif;
    font-size: 0.96rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.store-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.store-search-input:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.06);
}
@media (max-width: 1100px) {
    .srv-detail-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.store-search-clear {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 4px 6px;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.store-search-clear:hover {
    color: var(--accent);
    background: rgba(205, 65, 50, 0.1);
}

.store-filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.store-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 16px;
    font-family: 'Inter', sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.66);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
}

.store-filter-chip:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

.store-filter-chip.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

/* ─── Store Card Purchased Badge ───────────────────────────── */
.store-card--purchased {
    opacity: 0.75;
    position: relative;
}

.store-card--purchased:hover {
    opacity: 1;
}

.store-card-purchased-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #43e97b;
    background: rgba(67, 233, 123, 0.14);
    border: 1px solid rgba(67, 233, 123, 0.22);
    border-radius: 6px;
    backdrop-filter: blur(8px);
}

/* ─── Dashboard Balance Card ───────────────────────────────── */
.dash-stat-icon.balance {
    background: rgba(67, 233, 123, 0.12);
    color: #43e97b;
}

.dash-stat-card--balance {
    border: 1px solid rgba(67, 233, 123, 0.15);
}

.dash-stat-card--balance .dash-stat-value {
    color: #43e97b;
}

.store-category-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.34rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.94;
}

.store-category-title i {
    color: var(--accent);
}

/* ─── Store Grid ───────────────────────────────────────────── */
.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 20px;
}

.store-grid--locked {
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}

.store-grid--ranks {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
    -webkit-overflow-scrolling: touch;
}

.store-grid--ranks::-webkit-scrollbar { height: 4px; }
.store-grid--ranks::-webkit-scrollbar-track { background: transparent; }
.store-grid--ranks::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 999px; }
.store-grid--ranks .store-card { flex: 0 0 300px; min-width: 0; }

.store-grid--resources {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ─── Store Card Base ──────────────────────────────────────── */
.store-card {
    --store-card-accent: #3b82f6;
    --store-card-accent-soft: rgba(59, 130, 246, 0.15);
    --store-card-highlight: #bfdbfe;
    position: relative;
    background: linear-gradient(158deg, rgba(15, 19, 30, 0.96) 0%, rgba(8, 11, 19, 0.98) 100%);
    border: 1px solid color-mix(in srgb, var(--store-card-accent) 22%, transparent);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.28s ease;
    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.store-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top left, var(--store-card-accent-soft), transparent 60%);
    z-index: 0;
    pointer-events: none;
}

.store-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 24px 56px var(--store-card-accent-soft),
        0 10px 22px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-color: color-mix(in srgb, var(--store-card-accent) 45%, transparent);
}

.store-card--discounted { border-color: rgba(240, 160, 48, 0.2); }
.store-card--purchased  { opacity: 0.74; }
.store-card--purchased:hover { opacity: 1; }

/* ─── Card Background ──────────────────────────────────────── */
.store-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.55;
    z-index: 0;
    transition: opacity 0.3s;
    mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.15) 80%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.15) 80%, rgba(0,0,0,0) 100%);
}

.store-card:hover .store-card-bg { opacity: 0.7; }

/* ─── Card Inner ───────────────────────────────────────────── */
.store-card-inner {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 16px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* ─── Card Head ────────────────────────────────────────────── */
.store-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.store-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 0 8px;
    font-size: 0.52rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    border-radius: 7px;
    backdrop-filter: blur(12px);
}

.store-card-badge.vip      { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.store-card-badge.kit      { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
.store-card-badge.gems     { background: linear-gradient(135deg, #facc15, #ca8a04); color: #111827; }
.store-card-badge.rank     { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; }
.store-card-badge.item     { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
.store-card-badge.weapon   { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; }
.store-card-badge.resource { background: linear-gradient(135deg, #0ea5e9, #0369a1); color: #fff; }
.store-card-badge.building { background: linear-gradient(135deg, #84cc16, #4d7c0f); color: #fff; }
.store-card-badge.utility  { background: linear-gradient(135deg, #eab308, #a16207); color: #fff; }

.store-card-tone {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(8, 12, 18, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(241, 245, 249, 0.86);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

/* ─── Card Hero (icon + title + desc) ─────────────────────── */
.store-card-hero {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.store-card-icon-img {
    display: none;
}

.store-card-cat-icon {
    display: none;
}

.store-card-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.42rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.06;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.store-card-desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.82rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ─── Card Features ────────────────────────────────────────── */
.store-card-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
}

.store-card-features li {
    position: relative;
    padding-left: 16px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.44;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.store-card-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.46em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--store-card-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--store-card-accent) 16%, transparent);
}

.store-card-feature--highlight {
    color: var(--store-card-highlight) !important;
    font-weight: 700;
}

/* ─── Card Availability ────────────────────────────────────── */
.store-card-availability {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
}

.store-card-availability__label {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.42);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
}

.store-card-server-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.store-card-server-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 7px;
    background: var(--store-card-accent-soft);
    border: 1px solid color-mix(in srgb, var(--store-card-accent) 26%, transparent);
    color: var(--store-card-highlight);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.store-card-server-pill--dur {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

/* ─── Card Price Row ───────────────────────────────────────── */
.store-card-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 2px;
}

.store-card-price-main {
    font-family: 'Rajdhani', 'Segoe UI Variable Display', 'Segoe UI', sans-serif;
    font-size: 1.86rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.store-card-price-was {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.36);
    text-decoration: line-through;
}

.store-card-discount-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(240, 160, 48, 0.14);
    border: 1px solid rgba(240, 160, 48, 0.22);
    color: #f0a030;
    font-size: 0.66rem;
    font-weight: 800;
}

.store-card-owned {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: #43e97b;
    font-weight: 600;
}

/* ─── Card Footer ──────────────────────────────────────────── */
.store-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 16px;
}

.store-card-btn-primary {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 12px 26px rgba(205, 65, 50, 0.18);
}

.store-card-btn-secondary {
    width: 100%;
    justify-content: center;
    min-height: 36px;
    border-radius: 10px;
    font-size: 0.76rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.store-card-btn-secondary:hover { opacity: 0.9; }

.store-card--gems {
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.16), transparent 26%),
        linear-gradient(160deg, rgba(24, 20, 9, 0.98), rgba(10, 12, 19, 0.99));
}

.store-card-gems-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
}

.store-card-gems-media {
    width: 86px;
    height: 86px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(250, 204, 21, 0.22);
    background: linear-gradient(145deg, rgba(250, 204, 21, 0.18), rgba(120, 53, 15, 0.28));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.store-card-gems-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-card-gems-media__icon {
    font-size: 2rem;
    color: #fde68a;
}

.store-card-gems-copy {
    display: grid;
    gap: 6px;
}

.store-card-gems-kicker {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(254, 240, 138, 0.78);
    font-weight: 700;
}

.store-card-title--gems {
    font-size: 1.7rem;
    line-height: 0.96;
}

.store-card-gems-bonus {
    margin: 0;
    color: #fde68a;
    font-size: 0.88rem;
    font-weight: 700;
}

.store-card-availability--gems {
    margin-top: 2px;
}

.store-card-price-row--gems {
    padding-top: 6px;
}

.store-card-gems-note {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.74rem;
    line-height: 1.45;
}

.store-card--purchased .store-card-btn-primary {
    background: rgba(67, 233, 123, 0.12) !important;
    border: 1px solid rgba(67, 233, 123, 0.22) !important;
    color: #43e97b !important;
    box-shadow: none !important;
}

.store-bundle-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 34px;
    padding: 24px 26px;
    border-radius: 26px;
    border: 1px solid rgba(245, 158, 11, 0.18);
    background:
        radial-gradient(circle at top left, rgba(245, 158, 11, 0.16), transparent 28%),
        linear-gradient(145deg, rgba(36, 22, 10, 0.98), rgba(16, 11, 7, 0.99));
    box-shadow: 0 30px 72px rgba(0, 0, 0, 0.22);
}

.store-bundle-copy {
    display: grid;
    gap: 14px;
}

.store-bundle-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.store-bundle-tags span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fef3c7;
    font-size: 0.82rem;
    font-weight: 600;
}

.store-bundle-price {
    display: grid;
    justify-items: end;
    gap: 8px;
    min-width: 220px;
}

.store-bundle-price small {
    color: rgba(254, 243, 199, 0.62);
    font-size: 0.84rem;
    text-decoration: line-through;
}

.store-bundle-price strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.92;
    color: #fff7ed;
}

.store-card[data-category="vip"] {
    --store-card-accent: #8b5cf6;
    --store-card-accent-soft: rgba(139, 92, 246, 0.15);
    --store-card-highlight: #e9d5ff;
}

.store-card[data-category="kit"] {
    --store-card-accent: #3b82f6;
    --store-card-accent-soft: rgba(59, 130, 246, 0.15);
    --store-card-highlight: #bfdbfe;
}

.store-card[data-category="gems"] {
    --store-card-accent: #eab308;
    --store-card-accent-soft: rgba(234, 179, 8, 0.16);
    --store-card-highlight: #fde68a;
}

.store-card[data-category="rank"] {
    --store-card-accent: #8b5cf6;
    --store-card-accent-soft: rgba(139, 92, 246, 0.15);
    --store-card-highlight: #e9d5ff;
}

.store-card[data-category="item"] {
    --store-card-accent: #22c55e;
    --store-card-accent-soft: rgba(34, 197, 94, 0.14);
    --store-card-highlight: #bbf7d0;
}

.store-card[data-category="weapon"] {
    --store-card-accent: #ef4444;
    --store-card-accent-soft: rgba(239, 68, 68, 0.14);
    --store-card-highlight: #fecaca;
}

.store-card[data-category="resource"] {
    --store-card-accent: #0ea5e9;
    --store-card-accent-soft: rgba(14, 165, 233, 0.14);
    --store-card-highlight: #bae6fd;
}

.store-card[data-category="building"] {
    --store-card-accent: #84cc16;
    --store-card-accent-soft: rgba(132, 204, 22, 0.14);
    --store-card-highlight: #d9f99d;
}

.store-card[data-category="utility"] {
    --store-card-accent: #eab308;
    --store-card-accent-soft: rgba(234, 179, 8, 0.14);
    --store-card-highlight: #fde047;
}

/* Store Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s;
}

.modal-box:focus {
    outline: none;
}

.modal-close {
    position: sticky;
    top: 10px;
    right: 0;
    margin-left: auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(10, 14, 20, 0.88);
    color: #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    z-index: 30;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

.modal-close:hover {
    border-color: rgba(205, 65, 50, 0.35);
    background: rgba(205, 65, 50, 0.18);
    color: #fff;
}

.modal-close:focus-visible,
.btn-buy:focus-visible {
    border-radius: 12px;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
    max-width: 420px;
    width: 100%;
    transform: translateY(20px);
    transition: transform 0.3s;
}

#purchaseModal .modal-box {
    max-width: 500px;
    padding: 28px 28px 24px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(circle at top left, rgba(205, 65, 50, 0.16), transparent 28%),
        linear-gradient(180deg, rgba(18, 19, 33, 0.985), rgba(10, 11, 21, 0.995));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.46);
}

#purchaseModal .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    margin-left: 0;
}

.modal-icon {
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(205, 65, 50, 0.22), rgba(249, 115, 22, 0.12));
    color: #ffd8d2;
    box-shadow: 0 20px 42px rgba(205, 65, 50, 0.18);
}

.modal-icon i {
    font-size: 1.5rem;
}

.modal-desc {
    font-size: 0.98rem;
    line-height: 1.7;
    max-width: 34ch;
}

#purchaseModal .modal-actions {
    margin-top: 8px;
}

#purchaseModal .modal-actions .btn {
    min-height: 48px;
}

.modal-overlay.active .modal-box {
    transform: translateY(0);
}

.modal-overlay-wide {
    padding: 10px 21px;
    background: rgba(4, 7, 12, 0.84);
}

.modal-box-wide {
    width: min(1180px, calc(100vw - 32px));
    max-width: 1180px;
}

.modal-box-kit-preview {
    --kit-preview-accent: #3b82f6;
    --kit-preview-accent-soft: rgba(59, 130, 246, 0.2);
    --kit-preview-highlight: #60a5fa;
    width: min(860px, calc(100vw - 40px));
    max-width: 860px;
    min-height: auto;
    max-height: 97vh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(75, 85, 99, 0.3);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(8, 11, 16, 0.985), rgba(12, 17, 24, 0.99) 46%, rgba(0, 0, 0, 0.995));
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(107, 114, 128, 0.2);
}

.modal-box-kit-preview::before,
.modal-box-kit-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.modal-box-kit-preview::before {
    inset: 0 0 auto;
    height: 4px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    z-index: 2;
}

.modal-box-kit-preview[data-category="vip"] {
    --kit-preview-accent: #8b5cf6;
    --kit-preview-accent-soft: rgba(139, 92, 246, 0.2);
    --kit-preview-highlight: #e9d5ff;
}

.modal-box-kit-preview[data-category="kit"] {
    --kit-preview-accent: #3b82f6;
    --kit-preview-accent-soft: rgba(59, 130, 246, 0.2);
    --kit-preview-highlight: #93c5fd;
}

.modal-box-kit-preview[data-category="gems"] {
    --kit-preview-accent: #eab308;
    --kit-preview-accent-soft: rgba(234, 179, 8, 0.2);
    --kit-preview-highlight: #fde68a;
}

.modal-box-kit-preview[data-category="rank"] {
    --kit-preview-accent: #f59e0b;
    --kit-preview-accent-soft: rgba(245, 158, 11, 0.2);
    --kit-preview-highlight: #fde68a;
}

.modal-box-kit-preview[data-category="item"] {
    --kit-preview-accent: #22c55e;
    --kit-preview-accent-soft: rgba(34, 197, 94, 0.18);
    --kit-preview-highlight: #bbf7d0;
}

.modal-box-kit-preview[data-category="weapon"] {
    --kit-preview-accent: #ef4444;
    --kit-preview-accent-soft: rgba(239, 68, 68, 0.22);
    --kit-preview-highlight: #fecaca;
}

.modal-box-kit-preview[data-category="resource"] {
    --kit-preview-accent: #0ea5e9;
    --kit-preview-accent-soft: rgba(14, 165, 233, 0.2);
    --kit-preview-highlight: #bae6fd;
}

.modal-box-kit-preview[data-category="building"] {
    --kit-preview-accent: #84cc16;
    --kit-preview-accent-soft: rgba(132, 204, 22, 0.2);
    --kit-preview-highlight: #d9f99d;
}

.modal-box-kit-preview[data-category="utility"] {
    --kit-preview-accent: #eab308;
    --kit-preview-accent-soft: rgba(234, 179, 8, 0.18);
    --kit-preview-highlight: #fde047;
}

.modal-box-kit-preview::after {
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.025);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 16%);
    opacity: 1;
}

.modal-box h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.modal-box p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 24px;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 12px;
}

.modal-actions .btn {
    flex: 1;
    text-align: center;
    justify-content: center;
}

.btn-cancel {
    padding: 12px 24px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-cancel:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* ─── Kit Preview Header ───────────────────────────────────── */
.kit-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 21px;
    border-bottom: 1px solid rgba(55, 65, 81, 0.52);
    position: relative;
    z-index: 2;
}

.kit-preview-header__main {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}

.kit-preview-header__icon {
    width: 51px;
    height: 51px;
    border-radius: 10.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.24), rgba(37, 99, 235, 0.18));
    border: 1px solid rgba(59, 130, 246, 0.34);
    color: #60a5fa;
    font-size: 1.12rem;
    flex-shrink: 0;
}

.kit-preview-header__body {
    min-width: 0;
    flex: 1;
}

.kit-preview-header__body h3 {
    font-family: inherit;
    font-size: 26.25px;
    font-weight: 700;
    color: var(--kit-preview-accent);
    margin: 0;
    line-height: 31.5px;
    letter-spacing: 0;
}

.kit-preview-header__meta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    flex-wrap: nowrap;
    width: 100%;
}

.kit-preview-tabs--header {
    display: none;
}

.modal-box-kit-preview .kit-preview-header__desc {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(209, 213, 219, 0.92);
    font-size: 14px;
    line-height: 21px;
    min-width: 0;
    flex: 1 1 auto;
}

.kit-preview-header__desc i {
    color: rgba(156, 163, 175, 0.9);
    font-size: 0.9rem;
}

.modal-box-kit-preview .modal-close {
    position: static;
    align-self: flex-start;
    flex-shrink: 0;
    z-index: 3;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin-top: -4px;
    margin-right: 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #ef4444;
    font-size: 1.36rem;
    line-height: 1;
}

.modal-box-kit-preview .modal-close:hover,
.modal-box-kit-preview .modal-close:focus-visible {
    color: #f87171;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* ─── Kit Preview Content ──────────────────────────────────── */
.kit-preview-content {
    flex: 1;
    overflow-y: auto;
    padding: 21px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 114, 128, 0.55) transparent;
}

.kit-preview-content::-webkit-scrollbar { width: 6px; }
.kit-preview-content::-webkit-scrollbar-track { background: transparent; }
.kit-preview-content::-webkit-scrollbar-thumb { background: rgba(107, 114, 128, 0.52); border-radius: 999px; }

.kit-preview-section-title {
    margin: 0;
    font-family: inherit;
    font-size: 21px;
    line-height: 28px;
    letter-spacing: 0;
    font-weight: 600;
    color: #d1d5db;
    display: inline-flex;
    align-items: center;
    gap: 10.5px;
}

.kit-preview-section-title i {
    color: #facc15;
    font-size: 0.82em;
}

.kit-preview-benefits {
    display: grid;
    gap: 12px;
}

.kit-preview-benefits-grid {
    display: grid;
    gap: 10.5px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kit-preview-feature-grid {
    display: grid;
    gap: 10.5px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kit-preview-feature-card {
    border: 1px solid rgba(55, 65, 81, 0.5);
    background: rgba(17, 24, 39, 0.68);
    border-radius: 10.5px;
    padding: 14px;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.kit-preview-feature-card__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
    min-width: 0;
}

.kit-preview-feature-card.has-icon .kit-preview-feature-card__head {
    grid-template-columns: 35px minmax(0, 1fr);
}

.kit-preview-feature-card__copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.kit-preview-feature-card::after {
    content: '';
    position: absolute;
    inset: auto 14px 14px;
    height: 24px;
    border-radius: 7px;
    background: rgba(59, 130, 246, 0.12);
}

.kit-preview-feature-card.is-upgrade::after {
    background: rgba(245, 158, 11, 0.12);
}

.kit-preview-feature-card.is-muted::after {
    background: rgba(107, 114, 128, 0.12);
}

.kit-preview-feature-card__label,
.kit-preview-feature-card__value,
.kit-preview-feature-card__note {
    position: relative;
    z-index: 1;
}

.kit-preview-feature-card__icon {
    position: relative;
    z-index: 1;
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
    font-size: 0.92rem;
}

.kit-preview-feature-card.is-upgrade .kit-preview-feature-card__icon {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

.kit-preview-feature-card.is-muted .kit-preview-feature-card__icon {
    background: rgba(71, 85, 105, 0.24);
    color: #cbd5e1;
}

.kit-preview-feature-card__icon.is-pink {
    background: rgba(236, 72, 153, 0.16);
    color: #f472b6;
}

.kit-preview-feature-card__icon.is-blue {
    background: rgba(59, 130, 246, 0.16);
    color: #60a5fa;
}

.kit-preview-feature-card__icon.is-green {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

.kit-preview-feature-card__icon.is-yellow {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

.kit-preview-feature-card__icon.is-red {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
}

.kit-preview-feature-card__icon.is-muted {
    background: rgba(71, 85, 105, 0.24);
    color: #cbd5e1;
}

.kit-preview-feature-card__label {
    color: #cbd5e1;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
}

.kit-preview-feature-card__value {
    color: #f8fafc;
    font-family: 'Segoe UI Variable Display', 'Segoe UI', var(--font);
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.kit-preview-feature-card__value.is-enabled {
    color: #4ade80;
}

.kit-preview-feature-card__value.is-pink {
    color: #f472b6;
}

.kit-preview-feature-card__value.is-yellow {
    color: #fbbf24;
}

.kit-preview-feature-card__value.is-blue {
    color: #60a5fa;
}

.kit-preview-feature-card__value.is-green {
    color: #4ade80;
}

.kit-preview-feature-card__value.is-red {
    color: #f87171;
}

.kit-preview-feature-card__note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 7px;
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
}

.kit-preview-feature-card.is-upgrade .kit-preview-feature-card__note {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
}

.kit-preview-feature-card.is-muted .kit-preview-feature-card__note {
    background: rgba(71, 85, 105, 0.24);
    color: #cbd5e1;
}

.kit-preview-benefit-card {
    border: 1px solid rgba(55, 65, 81, 0.5);
    background: rgba(31, 41, 55, 0.6);
    border-radius: 10.5px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    min-height: 104px;
    transition: border-color 0.2s ease, transform 0.2s ease;
    font-size: 14px;
    line-height: 21px;
}

.kit-preview-benefit-card__head {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-width: 0;
}

.kit-preview-benefit-card.is-green {
    border-color: rgba(34, 197, 94, 0.28);
}

.kit-preview-benefit-card.is-yellow {
    border-color: rgba(245, 158, 11, 0.28);
}

.kit-preview-benefit-card.is-blue {
    border-color: rgba(59, 130, 246, 0.3);
}

.kit-preview-benefit-card.is-red {
    border-color: rgba(239, 68, 68, 0.28);
}

.kit-preview-benefit-card__label {
    color: #9ca3af;
    font-size: 10.5px;
    line-height: 14px;
    font-weight: 400;
    letter-spacing: 0;
    position: relative;
    z-index: 1;
}

.kit-preview-benefit-card strong {
    color: #93c5fd;
    font-family: 'Segoe UI Variable Display', 'Segoe UI', var(--font);
    font-size: 15.75px;
    font-weight: 700;
    line-height: 1.2;
    display: block;
    margin: 0;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    position: relative;
    z-index: 1;
}

#kitPreviewBenefitCommands {
    color: #4ade80;
}

.kit-preview-benefit-card small {
    margin-top: auto;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 7px;
    width: 100%;
    gap: 6px;
    color: #4ade80;
    background: rgba(34, 197, 94, 0.18);
    font-size: 10.5px;
    line-height: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    position: relative;
    z-index: 1;
    text-align: center;
}

.kit-preview-benefit-card__icon {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.16);
    color: #60a5fa;
    font-size: 0.92rem;
    position: relative;
    z-index: 1;
}

.kit-preview-benefit-card__copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.kit-preview-benefit-card.is-green small {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.18);
}

.kit-preview-benefit-card.is-blue small {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.18);
}

.kit-preview-benefit-card.is-yellow small {
    color: #facc15;
    background: rgba(245, 158, 11, 0.18);
}

.kit-preview-benefit-card.is-red small {
    color: #f87171;
    background: rgba(239, 68, 68, 0.18);
}

.kit-preview-benefit-card.is-green .kit-preview-benefit-card__icon {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

.kit-preview-benefit-card.is-blue .kit-preview-benefit-card__icon {
    background: rgba(59, 130, 246, 0.16);
    color: #60a5fa;
}

#kitPreviewBenefitItemsCard .kit-preview-benefit-card__icon {
    background: rgba(59, 130, 246, 0.16);
    color: #60a5fa;
}

.kit-preview-benefit-card.is-yellow .kit-preview-benefit-card__icon {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

.kit-preview-benefit-card.is-red .kit-preview-benefit-card__icon {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
}

.kit-preview-details {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kit-preview-details__head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.kit-preview-details__titlebar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.kit-preview-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kit-preview-tabs--header {
    display: none !important;
}

.kit-preview-tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8.75px;
    border: 1px solid rgba(55, 65, 81, 0.5);
    background: rgba(31, 41, 55, 0.45);
    color: #9ca3af;
    font-family: inherit;
    font-size: 11.5px;
    line-height: 16px;
    font-weight: 700;
    cursor: default;
}

.kit-preview-tab[data-preview-server-id]:not([disabled]) {
    cursor: pointer;
}

.kit-preview-tab:disabled {
    opacity: 1;
}

.kit-preview-tab.is-locked {
    opacity: 0.48;
}

.kit-preview-tab.is-active {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    box-shadow: none;
}

.kit-preview-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 21px;
}

.kit-preview-tabs--inline {
    align-items: center;
    gap: 8px;
}

/* ─── Kit Preview Footer ──────────────────────────────────── */
.kit-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 21px;
    border-top: 1px solid rgba(55, 65, 81, 0.52);
    background: rgba(31, 41, 55, 0.52);
    backdrop-filter: blur(14px);
}

.kit-preview-footer__price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kit-preview-footer__label {
    font-size: 14px;
    font-weight: 400;
    color: #9ca3af;
}

.kit-preview-footer__price strong {
    font-family: 'Rajdhani', 'Segoe UI Variable Display', 'Segoe UI', sans-serif;
    font-size: 26.25px;
    font-weight: 700;
    color: var(--kit-preview-accent);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    text-shadow: none;
}

.kit-preview-footer__buy {
    min-height: 42px;
    min-width: 176px;
    padding: 0 18px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18) !important;
}

/* ─── Kit Preview Board (updated) ─────────────────────────── */

.kit-preview-board {
    border: 1px solid rgba(55, 65, 81, 0.5);
    border-radius: 10.5px;
    background: rgba(31, 41, 55, 0.6);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: none;
}

.kit-preview-board::before {
    content: none;
}

.kit-preview-board::after {
    content: none;
}

.kit-preview-board__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0;
    padding: 14px;
    border-bottom: 1px solid rgba(55, 65, 81, 0.5);
    position: relative;
    z-index: 1;
}

.kit-preview-board__head--stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.kit-preview-board__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.kit-preview-board__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
}

.kit-preview-board__meta-item i {
    color: #9ca3af;
    font-size: 0.86rem;
}

.kit-preview-board__meta-item strong {
    color: #d1d5db;
    font-weight: 600;
}

.kit-preview-board__title {
    font-family: inherit;
    font-size: 17.5px;
    font-weight: 600;
    color: #d1d5db;
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kit-preview-board__title i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.98rem;
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.kit-preview-board--resources .kit-preview-board__title i {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.22);
}

.kit-preview-board--weapons .kit-preview-board__title i {
    color: #f87171;
    background: rgba(248, 113, 113, 0.16);
    border-color: rgba(248, 113, 113, 0.22);
}

.kit-preview-board__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(55, 65, 81, 0.5);
    background: rgba(17, 24, 39, 0.7);
    color: #e5e7eb;
    font-family: 'Segoe UI Variable Text', 'Segoe UI', var(--font);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.kit-preview-grid {
    display: grid;
    gap: 8px;
    width: 100%;
    position: relative;
    z-index: 1;
    align-content: start;
    padding: 14px;
}

.kit-preview-grid--details {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.kit-preview-slot {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(59, 68, 82, 0.58);
    border-radius: 8.75px;
    background: linear-gradient(180deg, rgba(18, 24, 33, 0.94), rgba(8, 12, 18, 0.98));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 3.5px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -10px 16px rgba(0, 0, 0, 0.28);
}

.kit-preview-slot:not(.is-empty):hover {
    transform: translateY(-1px);
    border-color: rgba(123, 137, 156, 0.78);
}

.kit-preview-slot:not(.is-empty) {
    border-color: rgba(59, 68, 82, 0.58);
    background: linear-gradient(180deg, rgba(18, 24, 33, 0.94), rgba(8, 12, 18, 0.98));
}

.kit-preview-slot.is-empty {
    opacity: 1;
    background: linear-gradient(180deg, rgba(18, 24, 33, 0.94), rgba(8, 12, 18, 0.98));
}

.kit-preview-slot img {
    width: 100% !important;
    height: 100% !important;
    max-width: 240px;
    max-height: 240px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42));
    transform: scale(1.08);
    transform-origin: center;
    z-index: 1;
}

.kit-preview-slot__amount,
.kit-preview-slot__flag {
    position: absolute;
    border-radius: 4px;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.075em;
    z-index: 2;
}

.kit-preview-slot__amount {
    right: 3px;
    bottom: 3px;
    min-width: 18px;
    min-height: 18px;
    padding: 1px 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.92);
    border: 0;
    color: rgba(229, 231, 235, 0.9);
    font-family: 'Segoe UI Variable Text', 'Segoe UI', var(--font);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    box-shadow: none;
}

.kit-preview-slot__flag {
    top: 7px;
    left: 7px;
    padding: 4px 7px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

.kit-preview-slot::before {
    content: none;
}

.kit-preview-slot::after {
    content: none;
}

.kit-preview-hover-card {
    position: fixed;
    left: 0;
    top: 0;
    width: min(260px, calc(100vw - 24px));
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(circle at top left, var(--kit-preview-accent-soft), transparent 34%),
        linear-gradient(160deg, rgba(25, 31, 42, 0.98), rgba(9, 13, 21, 0.995));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(18px);
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    z-index: 10020;
    opacity: 0;
    pointer-events: none;
    transform: perspective(900px) translate3d(0, 8px, 0) rotateX(var(--hover-tilt-x, 0deg)) rotateY(var(--hover-tilt-y, 0deg)) scale(0.96);
    transform-origin: center;
    transition: opacity 0.18s ease, transform 0.2s ease;
}

.kit-preview-hover-card.is-visible {
    opacity: 1;
    transform: perspective(900px) translate3d(0, 0, 0) rotateX(var(--hover-tilt-x, 0deg)) rotateY(var(--hover-tilt-y, 0deg)) scale(1);
}

.kit-preview-hover-card__media {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.14), transparent 42%),
        linear-gradient(180deg, rgba(36, 45, 59, 0.98), rgba(14, 18, 27, 0.995));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 34px rgba(0, 0, 0, 0.22);
}

.kit-preview-hover-card__media img {
    width: 84%;
    height: 84%;
    object-fit: contain;
    filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.45));
}

.kit-preview-hover-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.kit-preview-hover-card__eyebrow {
    display: inline-flex;
    align-self: flex-start;
    padding: 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--kit-preview-highlight) 14%, transparent);
    color: var(--kit-preview-highlight);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kit-preview-hover-card__title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.18rem;
    line-height: 1.05;
    color: #f8fafc;
}

.kit-preview-hover-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kit-preview-hover-card__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 7px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: #dce3ef;
    font-size: 0.74rem;
    font-weight: 600;
}

.kit-preview-commands {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.kit-preview-command-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--kit-preview-highlight) 18%, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(19, 36, 47, 0.94), rgba(10, 19, 26, 0.99));
}

.kit-preview-command-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--kit-preview-highlight) 14%, transparent);
    color: var(--kit-preview-highlight);
    font-size: 0.95rem;
}

.kit-preview-command-card__copy {
    display: grid;
    gap: 4px;
}

.kit-preview-command-card__copy strong {
    color: #e5e7eb;
    font-size: 0.82rem;
}

.kit-preview-command-card__copy span {
    color: #a7b0c2;
    font-size: 0.76rem;
    line-height: 1.4;
    word-break: break-word;
}

.kit-preview-command-card__amount {
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(14, 18, 25, 0.92);
    color: #f9fafb;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

@media (max-width: 760px) {
    .modal-overlay-wide {
        padding: 10px 21px;
    }

    .modal-box-kit-preview {
        width: calc(100vw - 28px);
    }

    .kit-preview-header {
        padding: 21px;
    }

    .kit-preview-details__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .kit-preview-header__meta {
        flex-direction: row;
        align-items: center;
    }

    .kit-preview-tabs--header {
        display: none !important;
    }

    .kit-preview-content {
        padding: 21px;
        gap: 22px;
    }

    .kit-preview-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kit-preview-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kit-preview-details-grid {
        grid-template-columns: 1fr;
    }

    .kit-preview-footer {
        padding: 21px;
    }
}

@media (max-width: 640px) {
    .kit-preview-header__desc {
        flex: 0 1 118px;
    }

    .kit-preview-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .kit-preview-footer__buy {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .modal-overlay-wide {
        padding: 12px;
    }

    .kit-preview-header__meta {
        flex-wrap: wrap;
    }

    .kit-preview-header__body h3 {
        font-size: 24px;
        line-height: 1.2;
    }

    .kit-preview-section-title {
        font-size: 18px;
        line-height: 1.3;
    }

    .kit-preview-benefits-grid {
        grid-template-columns: 1fr;
    }

    .kit-preview-feature-grid {
        grid-template-columns: 1fr;
    }

    .kit-preview-grid--details {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .kit-preview-hover-card {
        width: min(240px, calc(100vw - 20px));
        grid-template-columns: 76px minmax(0, 1fr);
    }
}

[data-theme="light"] .store-theme-toggle {
    background: rgba(15, 23, 42, 0.04);
    color: #334155;
    border-color: rgba(148, 163, 184, 0.3);
}

[data-theme="light"] .store-shell {
    background:
        radial-gradient(circle at top left, rgba(205, 65, 50, 0.08), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(59, 130, 246, 0.06), transparent 22%),
        linear-gradient(180deg, #eef2f7, #e6ebf3 45%, #e9edf4 100%);
}

[data-theme="light"] .store-shell__video {
    opacity: 0.3;
    filter: saturate(0.96) contrast(1.01) brightness(1.02);
}

[data-theme="light"] .srv-detail-hero__video {
    opacity: 0.36;
    filter: saturate(0.92) contrast(1.01) brightness(0.96);
}

[data-theme="light"] .srv-detail-hero__overlay {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.84) 0%, rgba(250, 250, 252, 0.54) 38%, rgba(245, 247, 252, 0.44) 62%, rgba(255, 255, 255, 0.76) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(250, 250, 252, 0.10) 50%, rgba(255, 255, 255, 0.52) 100%);
}

[data-theme="light"] .store-shell__overlay {
    background:
        linear-gradient(180deg, rgba(244, 247, 251, 0.4) 0%, rgba(238, 242, 247, 0.42) 34%, rgba(233, 238, 245, 0.58) 72%, rgba(232, 236, 243, 0.72) 100%),
        radial-gradient(circle at top left, rgba(205, 65, 50, 0.06), transparent 30%),
        radial-gradient(circle at 85% 18%, rgba(59, 130, 246, 0.05), transparent 24%);
}

[data-theme="light"] .store-shell::before {
    background: radial-gradient(circle, rgba(205, 65, 50, 0.08) 0%, rgba(205, 65, 50, 0) 68%);
}

[data-theme="light"] .store-shell::after {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0) 70%);
}

[data-theme="light"] .store-hero-metric,
[data-theme="light"] .store-search-bar,
[data-theme="light"] .store-category,
[data-theme="light"] .server-selector-tab {
    border-color: rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.98));
    box-shadow: 0 20px 48px rgba(148, 163, 184, 0.16);
}

[data-theme="light"] .store-hero-metric,
[data-theme="light"] .store-search-bar,
[data-theme="light"] .store-category,
[data-theme="light"] .server-selector-tab {
    box-shadow: 0 20px 48px rgba(148, 163, 184, 0.16);
}

[data-theme="light"] .store-hero-panel {
    border-color: rgba(148, 163, 184, 0.18);
    background:
        radial-gradient(circle at top right, rgba(205, 65, 50, 0.12), transparent 28%),
        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.08), transparent 26%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(236, 241, 247, 1));
    box-shadow: 0 26px 64px rgba(148, 163, 184, 0.2);
}

[data-theme="light"] .store-bundle-banner {
    border-color: rgba(245, 158, 11, 0.22);
    background:
        radial-gradient(circle at top left, rgba(245, 158, 11, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(255, 251, 235, 0.98), rgba(255, 245, 230, 1));
    box-shadow: 0 24px 60px rgba(217, 119, 6, 0.12);
}

[data-theme="light"] .store-hero-kicker,
[data-theme="light"] .store-bundle-kicker,
[data-theme="light"] .server-selector-label {
    border-color: rgba(205, 65, 50, 0.14);
    background: rgba(205, 65, 50, 0.08);
    color: #b53d31;
}

[data-theme="light"] .store-hero-copy p,
[data-theme="light"] .store-bundle-copy p,
[data-theme="light"] .store-bundle-price small,
[data-theme="light"] .server-selector-players,
[data-theme="light"] .store-card-tone,
[data-theme="light"] .store-card-offer__label,
[data-theme="light"] .store-card-signal__label,
[data-theme="light"] .store-card-feature-list li {
    color: #546174;
}

[data-theme="light"] .store-hero-copy h2,
[data-theme="light"] .store-bundle-copy h2,
[data-theme="light"] .store-bundle-price strong,
[data-theme="light"] .server-selector-name,
[data-theme="light"] .store-hero-metric strong {
    color: #18212f;
}

[data-theme="light"] .store-inline-tag,
[data-theme="light"] .store-bundle-tags span,
[data-theme="light"] .store-card-kicker {
    color: #b45309;
}

[data-theme="light"] .store-trust-icon--green {
    color: #16a34a;
}

[data-theme="light"] .store-trust-icon--blue {
    color: #2563eb;
}

[data-theme="light"] .store-trust-icon--violet {
    color: #9333ea;
}

[data-theme="light"] .store-trust-strip span:nth-child(1) {
    color: #15803d;
}

[data-theme="light"] .store-trust-strip span:nth-child(2) {
    color: #1d4ed8;
}

[data-theme="light"] .store-trust-strip span:nth-child(3) {
    color: #7e22ce;
}

[data-theme="light"] .store-trust-strip span {
    background: transparent;
    box-shadow: none;
}

[data-theme="light"] .store-trust-strip span + span::before {
    background: rgba(100, 116, 139, 0.26);
}

[data-theme="light"] .store-hero-metric span,
[data-theme="light"] .store-hero-metric small {
    color: #64748b;
}

[data-theme="light"] .store-hero-metric--accent {
    background:
        radial-gradient(circle at top right, rgba(205, 65, 50, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(255, 245, 243, 0.98), rgba(255, 255, 255, 0.98));
}

[data-theme="light"] .store-bundle-tags span {
    border-color: rgba(245, 158, 11, 0.16);
    background: rgba(255, 255, 255, 0.76);
}

[data-theme="light"] .section-tag,
[data-theme="light"] .store-category-title,
[data-theme="light"] .section-title,
[data-theme="light"] .store-card-title,
[data-theme="light"] .store-card-price,
[data-theme="light"] .modal-title,
[data-theme="light"] .kit-preview-board__title,
[data-theme="light"] .kit-preview-command-card__copy strong {
    color: #18212f;
}

[data-theme="light"] .store-inline-tag {
    border-color: rgba(148, 163, 184, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 247, 251, 0.9));
    color: #8f2d1e;
    text-shadow: none;
    box-shadow: 0 12px 28px rgba(148, 163, 184, 0.16);
}

[data-theme="light"] .store-inline-tag i {
    color: #c2410c;
}

[data-theme="light"] .section-subtitle,
[data-theme="light"] .store-card-desc,
[data-theme="light"] .kit-preview-desc,
[data-theme="light"] .kit-preview-command-card__copy span {
    color: #5c6778;
}

[data-theme="light"] .modal-desc {
    color: #5c6778;
}

[data-theme="light"] .modal-overlay-wide {
    background: rgba(228, 233, 241, 0.78);
}

[data-theme="light"] .modal-box-kit-preview {
    border-color: rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 251, 0.98));
    box-shadow: 0 18px 55px rgba(15, 23, 42, 0.16);
}

[data-theme="light"] #purchaseModal .modal-box {
    border-color: rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(circle at top left, rgba(205, 65, 50, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 251, 0.98));
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
}

[data-theme="light"] .modal-icon {
    border-color: rgba(205, 65, 50, 0.14);
    background: linear-gradient(135deg, rgba(205, 65, 50, 0.14), rgba(249, 115, 22, 0.08));
    color: #b53d31;
    box-shadow: 0 16px 36px rgba(205, 65, 50, 0.12);
}

[data-theme="light"] .modal-box-kit-preview::before {
    background:
        radial-gradient(circle at top left, rgba(205, 65, 50, 0.08), transparent 24%),
        radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.06), transparent 24%);
}

[data-theme="light"] .modal-box-kit-preview::after {
    border-color: rgba(148, 163, 184, 0.16);
    opacity: 0.22;
}

[data-theme="light"] .modal-close {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.9);
    color: #1f2937;
}

[data-theme="light"] .modal-close:hover {
    border-color: rgba(205, 65, 50, 0.25);
    background: rgba(205, 65, 50, 0.1);
    color: #a8352c;
}

[data-theme="light"] .kit-preview-header__icon {
    background: rgba(205, 65, 50, 0.1);
    border-color: rgba(205, 65, 50, 0.18);
    color: #b53d31;
}

[data-theme="light"] .kit-preview-header__text h3 {
    color: #18212f;
}

[data-theme="light"] .kit-preview-header__sub {
    color: #64748b;
}

[data-theme="light"] .kit-preview-header {
    border-color: rgba(148, 163, 184, 0.14);
}

[data-theme="light"] .kit-preview-server-strip {
    border-color: rgba(148, 163, 184, 0.14);
}

[data-theme="light"] .kit-preview-server-pill {
    background: rgba(205, 65, 50, 0.08);
    border-color: rgba(205, 65, 50, 0.14);
    color: #b53d31;
}

[data-theme="light"] .kit-preview-server-pill--dur,
[data-theme="light"] .kit-preview-server-pill--items {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(148, 163, 184, 0.18);
    color: #475569;
}

[data-theme="light"] .kit-preview-content {
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

[data-theme="light"] .kit-preview-footer {
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(244, 247, 251, 0.92);
}

[data-theme="light"] .kit-preview-footer__label {
    color: #94a3b8;
}

[data-theme="light"] .kit-preview-footer__price strong {
    color: #b53d31;
}

[data-theme="light"] .kit-preview-board,
[data-theme="light"] .kit-preview-slot,
[data-theme="light"] .kit-preview-command-card {
    border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="light"] .kit-preview-board {
    background: linear-gradient(180deg, rgba(250, 251, 253, 0.98), rgba(237, 242, 248, 0.98));
}

[data-theme="light"] .kit-preview-slot {
    background: linear-gradient(180deg, #ffffff, #ebf0f6);
}

[data-theme="light"] .kit-preview-slot__amount {
    background: rgba(15, 23, 42, 0.9);
}

[data-theme="light"] .store-card-offer {
    border: none;
    background: none;
    box-shadow: none;
}

[data-theme="light"] .store-card-tone {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.82);
}

[data-theme="light"] .store-card-banner__server,
[data-theme="light"] .store-card-meta-pill,
[data-theme="light"] .store-card-signal {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.76);
}

[data-theme="light"] .store-card-offer__label,
[data-theme="light"] .store-card-duration-badge__label,
[data-theme="light"] .store-card-signal__label {
    color: #64748b;
}

[data-theme="light"] .store-card-discount-badge {
    background: rgba(200, 140, 30, 0.1);
    border-color: rgba(200, 140, 30, 0.18);
    color: #9a670a;
}

[data-theme="light"] .store-card-price-old {
    color: #94a3b8;
}

[data-theme="light"] .store-card-kicker,
[data-theme="light"] .store-card-meta i,
[data-theme="light"] .store-card-meta-pill i {
    color: var(--store-card-accent);
}

[data-theme="light"] .store-card-banner__server,
[data-theme="light"] .store-card-meta-pill {
    color: #1e293b;
}

[data-theme="light"] .store-card-signal strong {
    color: #0f172a;
}

[data-theme="light"] .store-card-duration-badge {
    border-color: rgba(249, 115, 22, 0.2);
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.12), transparent 52%),
        linear-gradient(160deg, rgba(255, 250, 245, 0.98), rgba(255, 242, 234, 0.98));
    box-shadow: 0 16px 28px rgba(249, 115, 22, 0.1);
}

[data-theme="light"] .store-card-duration-badge strong {
    color: #9a3412;
}

[data-theme="light"] .store-card-duration-badge.permanent {
    border-color: rgba(34, 197, 94, 0.18);
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.12), transparent 52%),
        linear-gradient(160deg, rgba(245, 255, 249, 0.98), rgba(233, 250, 240, 0.98));
}

[data-theme="light"] .store-card-duration-badge.permanent strong {
    color: #166534;
}

[data-theme="light"] .kit-preview-command-card {
    background: linear-gradient(180deg, #ffffff, #edf4fb);
}

.dash-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.dash-empty i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.3;
}

.store-cart-empty {
    max-width: 560px;
    margin: 22px auto 8px;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background:
        radial-gradient(circle at top, rgba(245, 158, 11, 0.12), transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
}

.store-cart-empty i {
    color: #f59e0b;
    opacity: 0.85;
    margin-bottom: 4px;
}

.store-cart-empty p {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.store-cart-empty span {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 430px;
}

.store-cart-empty__cta {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid rgba(245, 158, 11, 0.42);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.14));
    color: #ffe7c2;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 8px 18px rgba(245, 158, 11, 0.18);
}

.store-cart-empty__cta i {
    font-size: 0.74rem;
}

.store-cart-empty__cta:hover {
    transform: translateY(-1px);
    border-color: rgba(251, 191, 36, 0.62);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.18));
    box-shadow: 0 14px 28px rgba(245, 158, 11, 0.25);
    color: #fff7ea;
}

.store-cart-empty__cta:focus-visible {
    outline: 2px solid rgba(251, 191, 36, 0.5);
    outline-offset: 2px;
}

.cart-remove-modal {
    position: relative;
    width: min(360px, calc(100vw - 32px));
    padding: 20px 18px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.13), transparent 45%),
        linear-gradient(180deg, rgba(24, 26, 34, 0.98), rgba(16, 18, 24, 0.99));
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.42);
}

.cart-remove-modal h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: #f8fafc;
}

.cart-remove-modal p {
    margin: 8px 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.cart-remove-modal p strong {
    color: #fcd34d;
    font-weight: 700;
}

.cart-remove-modal__label {
    display: block;
    margin-top: 12px;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #cbd5e1;
}

.cart-remove-modal__input {
    width: 100%;
    height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.05);
    color: #f8fafc;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0 10px;
    outline: none;
}

.cart-remove-modal__input:focus {
    border-color: rgba(251, 191, 36, 0.65);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.14);
}

.cart-remove-modal__actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cart-remove-modal .modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}

.cart-remove-modal .modal-close:hover {
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.16);
    color: #fff7ed;
}

[data-theme="light"] .cart-remove-modal {
    border-color: rgba(148, 163, 184, 0.25);
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.12), transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 248, 252, 0.99));
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .cart-remove-modal h3 {
    color: #0f172a;
}

[data-theme="light"] .cart-remove-modal p {
    color: #475569;
}

[data-theme="light"] .cart-remove-modal__label {
    color: #334155;
}

[data-theme="light"] .cart-remove-modal__input {
    border-color: rgba(148, 163, 184, 0.32);
    background: #ffffff;
    color: #0f172a;
}

/* ===================================
   LIGHT THEME - Store/Servers overrides
   =================================== */
[data-theme="light"] .servers-stats-bar,
[data-theme="light"] .srv-card,
[data-theme="light"] .store-card,
[data-theme="light"] .modal-box {
    background: #fff;
    border-color: #e5e7eb;
}

[data-theme="light"] .store-card-banner {
    border-color: #e5e7eb;
}

[data-theme="light"] .kit-preview-board {
    border-color: rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(250, 251, 253, 0.98), rgba(237, 242, 248, 0.98));
}

[data-theme="light"] .kit-preview-board__title,
[data-theme="light"] .kit-preview-command-card__copy strong,
[data-theme="light"] .kit-preview-command-card__amount {
    color: #0f172a;
}

[data-theme="light"] .kit-preview-slot {
    border-color: rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, #ffffff, #e2e8f0);
}

[data-theme="light"] .kit-preview-hover-card {
    border-color: rgba(148, 163, 184, 0.18);
    background:
        radial-gradient(circle at top left, rgba(205, 65, 50, 0.08), transparent 34%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(238, 243, 249, 0.99));
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

[data-theme="light"] .kit-preview-hover-card__media {
    border-color: rgba(148, 163, 184, 0.16);
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.86), transparent 42%),
        linear-gradient(180deg, #ffffff, #e2e8f0);
}

[data-theme="light"] .kit-preview-hover-card__eyebrow {
    background: rgba(205, 65, 50, 0.1);
    color: #b53d31;
}

[data-theme="light"] .kit-preview-hover-card__title {
    color: #0f172a;
}

[data-theme="light"] .kit-preview-hover-card__meta span {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.9);
    color: #334155;
}

[data-theme="light"] .kit-preview-slot__amount {
    background: rgba(15, 23, 42, 0.88);
}

[data-theme="light"] .kit-preview-command-card {
    border-color: rgba(56, 189, 248, 0.18);
    background: linear-gradient(180deg, #eff6ff, #dbeafe);
}

[data-theme="light"] .kit-preview-command-card__copy span {
    color: #475569;
}

[data-theme="light"] .server-selector-tab {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.98));
    border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="light"] .server-selector-tab.active {
    background:
        radial-gradient(circle at top right, rgba(205, 65, 50, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 247, 245, 0.98), rgba(255, 255, 255, 1));
}

[data-theme="light"] .store-card-footer {
    border-color: #e5e7eb;
}

[data-theme="light"] .store-search-bar {
    background: rgba(0, 0, 0, 0.02);
    border-color: #e5e7eb;
}

[data-theme="light"] .store-search-input {
    background: #fff;
    border-color: #d1d5db;
    color: #1f2937;
}

[data-theme="light"] .store-search-input::placeholder {
    color: #9ca3af;
}

[data-theme="light"] .store-search-icon {
    color: #9ca3af;
}

[data-theme="light"] .store-search-clear {
    color: #6b7280;
}

[data-theme="light"] .store-filter-chip {
    color: #6b7280;
    background: #f3f4f6;
    border-color: #e5e7eb;
}

[data-theme="light"] .store-filter-chip:hover {
    color: #374151;
    background: #e5e7eb;
}

[data-theme="light"] .store-card-purchased-badge {
    color: #059669;
    background: rgba(5, 150, 105, 0.08);
    border-color: rgba(5, 150, 105, 0.2);
}

/* ===================================
   RESPONSIVE - Servers/Store
   =================================== */
@media (max-width: 768px) {
    .store-nav-actions,
    .store-nav-meta {
        flex-wrap: wrap;
    }

    .store-nav-actions {
        justify-content: space-between;
        row-gap: 8px;
    }

    .store-hero-panel,
    .store-bundle-banner,
    .store-search-bar {
        grid-template-columns: 1fr;
    }

    .store-trust-strip {
        justify-content: flex-start;
        gap: 8px;
        padding: 0;
    }

    .store-trust-strip span {
        padding: 0 12px 0 0;
        font-size: 0.82rem;
    }

    .store-trust-icon {
        font-size: 0.34rem;
    }

    .store-trust-strip span + span::before {
        left: -7px;
        height: 12px;
    }

    .store-hero-panel,
    .store-category,
    .store-bundle-banner {
        padding: 20px;
        border-radius: 22px;
    }

    .store-hero-copy h2,
    .store-bundle-copy h2 {
        font-size: clamp(1.9rem, 7vw, 2.6rem);
    }

    .store-hero-metrics {
        grid-template-columns: 1fr;
    }

    .store-hero-metric,
    .store-hero-metric--accent {
        min-height: 132px;
    }

    .server-selector-tabs,
    .store-grid,
    .store-grid--locked,
    .store-grid--ranks,
    .store-grid--resources {
        grid-template-columns: 1fr;
    }

    .store-search-bar {
        align-items: stretch;
    }

    .store-filter-chips {
        justify-content: flex-start;
    }

    .store-card-top,
    .store-card-headline,
    .store-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .store-card-headline {
        gap: 14px;
    }

    .store-card-offer,
    .store-card-signal {
        width: 100%;
    }

    .store-card-signal {
        justify-items: start;
    }

    .servers-list {
        grid-template-columns: 1fr;
    }

    .servers-stats-bar {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .srv-card-stats {
        grid-template-columns: 1fr 1fr;
    }

    .store-card-actions {
        justify-content: stretch;
        flex-wrap: wrap;
    }

    .store-card-actions .btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .kit-preview-content {
        padding: 16px;
    }

    .modal-box-kit-preview {
        padding: 0;
    }

    .server-selector {
        flex-direction: column;
    }

    .server-selector-tab {
        justify-content: center;
    }
}

/* ===================================
   ACCESSIBILITY - Reduced Motion
   =================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .srv-pulse,
    .hero-card-progress span,
    .dot-online::before,
    .status-dot::before {
        animation: none !important;
    }
}

/* ===================================
   Copy SteamID Button & Toast
   =================================== */
.btn-copy-steamid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-left: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    font-size: 0.7rem;
    vertical-align: middle;
    transition: all 0.15s;
}

.btn-copy-steamid:hover {
    color: var(--accent);
    background: rgba(205, 65, 50, 0.12);
    border-color: rgba(205, 65, 50, 0.25);
}

.copy-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 10px 22px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    background: rgba(67, 233, 123, 0.92);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
}

.copy-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.copy-toast i {
    margin-right: 6px;
}

[data-theme="light"] .btn-copy-steamid {
    background: rgba(0, 0, 0, 0.04);
    border-color: #d1d5db;
    color: #6b7280;
}

[data-theme="light"] .btn-copy-steamid:hover {
    color: var(--accent);
    background: rgba(205, 65, 50, 0.08);
}

/* ===================================
   Reports UI
   =================================== */
.dash-reports-shell {
    display: grid;
    gap: 24px;
}

.dash-report-headline {
    align-items: flex-start;
}

.dash-report-subtitle {
    margin-top: 8px;
    max-width: 62ch;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.dash-report-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.dash-report-summary-card {
    display: grid;
    gap: 6px;
    padding: 18px 18px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
}

.dash-report-summary-card strong {
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1;
    color: var(--text);
}

.dash-report-summary-card__label {
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dash-report-summary-card.is-open {
    border-color: rgba(240, 160, 48, 0.2);
    background: linear-gradient(180deg, rgba(240, 160, 48, 0.12), rgba(240, 160, 48, 0.04));
}

.dash-report-summary-card.is-reviewing {
    border-color: rgba(59, 130, 246, 0.22);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.04));
}

.dash-report-summary-card.is-resolved {
    border-color: rgba(74, 222, 128, 0.22);
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.12), rgba(74, 222, 128, 0.04));
}

.dash-report-list {
    display: grid;
    gap: 14px;
}

.dash-report-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

.dash-report-row__main {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 12px;
}

.dash-report-row__headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dash-report-row__headline strong {
    font-size: 1rem;
    color: var(--text);
}

.dash-report-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.dash-report-row__meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dash-report-row__description {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.dash-report-row__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(74, 222, 128, 0.16);
    border-radius: 14px;
    background: rgba(74, 222, 128, 0.08);
    color: var(--text);
}

.dash-report-row__note i {
    color: var(--green);
    margin-top: 2px;
}

.dash-report-row__side {
    min-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.dash-report-row__reviewer {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: right;
}

.dash-report-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(205, 65, 50, 0.08), rgba(255, 255, 255, 0.02) 55%);
}

.dash-report-overview__intro {
    display: grid;
    gap: 8px;
    align-content: start;
}

.dash-report-overview__eyebrow {
    color: var(--accent-light);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dash-report-overview__intro h4 {
    margin: 0;
    color: var(--text);
    font-size: 1.15rem;
}

.dash-report-overview__intro p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.dash-report-overview__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.dash-report-overview-card {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
}

.dash-report-overview-card span,
.dash-report-overview-card small {
    color: var(--text-muted);
}

.dash-report-overview-card strong {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1;
}

.dash-report-overview-card.is-waiting {
    border-color: rgba(240, 160, 48, 0.16);
    background: rgba(240, 160, 48, 0.08);
}

.dash-report-overview-card.is-evidence {
    border-color: rgba(59, 130, 246, 0.16);
    background: rgba(59, 130, 246, 0.08);
}

.dash-report-overview-card.is-rate {
    border-color: rgba(74, 222, 128, 0.16);
    background: rgba(74, 222, 128, 0.08);
}

.dash-report-row__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dash-report-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.dash-report-chip.has-evidence {
    border-color: rgba(59, 130, 246, 0.16);
    color: #9ec8ff;
}

.dash-report-row__timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dash-report-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    color: var(--text-dim);
    font-size: 0.74rem;
    font-weight: 600;
}

.dash-report-step.is-done {
    border-style: solid;
    border-color: rgba(74, 222, 128, 0.18);
    color: var(--text);
    background: rgba(74, 222, 128, 0.08);
}

.dash-report-step.is-current {
    border-color: rgba(232, 85, 74, 0.2);
    background: rgba(232, 85, 74, 0.1);
}

.dash-report-row__side-block {
    display: grid;
    gap: 3px;
    text-align: right;
}

.dash-report-row__side-label,
.dash-report-row__side-block small {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.dash-report-row__side-block strong {
    color: var(--text);
    font-size: 0.92rem;
}

.pp-report-card__body {
    display: grid;
    gap: 16px;
}

.pp-report-card {
    position: relative;
    border: 1px solid rgba(232, 85, 74, 0.14);
    background:
        radial-gradient(circle at top right, rgba(232, 85, 74, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

.pp-report-card::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(232, 85, 74, 0.8), rgba(232, 85, 74, 0.08));
}

.pp-report-card .pp-card-head {
    position: relative;
}

.pp-report-card .pp-card-head i {
    color: #ff8c80;
}

.pp-report-card__signals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pp-report-signal {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.pp-report-signal__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pp-report-signal__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.pp-report-signal__copy span {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.pp-report-signal__copy strong {
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.35;
}

.pp-report-signal-ok .pp-report-signal__icon {
    color: #73df96;
    background: rgba(88, 217, 125, 0.14);
}

.pp-report-signal-warn .pp-report-signal__icon {
    color: #ffd073;
    background: rgba(255, 208, 115, 0.14);
}

.pp-report-signal-danger .pp-report-signal__icon {
    color: #ff8c80;
    background: rgba(232, 85, 74, 0.16);
}

.pp-report-signal-muted .pp-report-signal__icon {
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.08);
}

.pp-report-card__notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    line-height: 1.65;
}

.pp-report-card__notice i {
    margin-top: 2px;
}

.pp-report-card__notice-ok {
    border-color: rgba(88, 217, 125, 0.16);
    background: rgba(88, 217, 125, 0.08);
}

.pp-report-card__notice-ok i {
    color: #73df96;
}

.pp-report-card__notice-warn {
    border-color: rgba(255, 208, 115, 0.16);
    background: rgba(255, 208, 115, 0.08);
}

.pp-report-card__notice-warn i {
    color: #ffd073;
}

.pp-report-card__notice-danger {
    border-color: rgba(232, 85, 74, 0.18);
    background: rgba(232, 85, 74, 0.08);
}

.pp-report-card__notice-danger i {
    color: #ff8c80;
}

.pp-report-card__text {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.pp-report-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pp-report-card__actions .btn:first-child {
    box-shadow: 0 14px 28px rgba(205, 65, 50, 0.16);
}

.report-modal {
    position: relative;
    max-width: min(720px, 96vw);
    padding: 30px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(circle at top left, rgba(205, 65, 50, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(18, 19, 33, 0.985), rgba(10, 11, 21, 0.995));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.46);
}

.report-modal .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    margin-left: 0;
}

.report-modal__header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
    padding-right: 54px;
}

.report-modal__icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #ffe1dc;
    background: linear-gradient(135deg, rgba(205, 65, 50, 0.26), rgba(232, 112, 64, 0.16));
    border: 1px solid rgba(205, 65, 50, 0.22);
    box-shadow: 0 20px 38px rgba(205, 65, 50, 0.16);
}

.report-modal__header h3 {
    margin-bottom: 8px;
}

.report-modal__header p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
}

.report-modal__form {
    display: grid;
    gap: 18px;
}

.report-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.report-modal__field {
    display: grid;
    gap: 8px;
}

.report-modal__field--wide {
    grid-column: 1 / -1;
}

.report-modal__field label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.report-modal__field input,
.report-modal__field select,
.report-modal__field textarea {
    width: 100%;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font: inherit;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.report-modal__field select {
    appearance: none;
}

.report-modal__field textarea {
    min-height: 150px;
    resize: vertical;
}

.report-modal__field input::placeholder,
.report-modal__field textarea::placeholder {
    color: var(--text-dim);
}

.report-modal__field input:focus,
.report-modal__field select:focus,
.report-modal__field textarea:focus {
    border-color: rgba(232, 85, 74, 0.46);
    box-shadow: 0 0 0 4px rgba(232, 85, 74, 0.12);
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.report-modal__note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(205, 65, 50, 0.16);
    background: rgba(205, 65, 50, 0.08);
    color: var(--text-secondary);
    line-height: 1.65;
}

.report-modal__note i {
    color: var(--accent-light);
    margin-top: 2px;
}

.report-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 860px) {
    .dash-report-row {
        flex-direction: column;
    }

    .dash-report-overview {
        grid-template-columns: 1fr;
    }

    .dash-report-overview__stats {
        grid-template-columns: 1fr;
    }

    .dash-report-row__side {
        min-width: 0;
        align-items: flex-start;
    }

    .dash-report-row__reviewer {
        text-align: left;
    }

    .dash-report-row__side-block {
        text-align: left;
    }

    .report-modal {
        padding: 24px;
    }

    .report-modal__grid {
        grid-template-columns: 1fr;
    }

    .report-modal__field--wide {
        grid-column: auto;
    }

    .pp-report-card__signals {
        grid-template-columns: 1fr;
    }

    .pp-report-card__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

[data-theme="light"] .dash-report-summary-card,
[data-theme="light"] .dash-report-row {
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,245,250,0.82));
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .dash-report-overview {
    border-color: rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, rgba(205, 65, 50, 0.08), rgba(255, 255, 255, 0.82) 55%);
}

[data-theme="light"] .dash-report-overview-card,
[data-theme="light"] .dash-report-chip,
[data-theme="light"] .dash-report-step {
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .pp-report-card {
    border-color: rgba(205, 65, 50, 0.14);
    background:
        radial-gradient(circle at top right, rgba(205, 65, 50, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(246,247,251,0.98));
}

[data-theme="light"] .pp-report-signal {
    border-color: rgba(27, 39, 56, 0.08);
    background: rgba(255, 255, 255, 0.74);
}

[data-theme="light"] .pp-report-signal__copy span {
    color: #5c6777;
}

[data-theme="light"] .pp-report-signal__copy strong {
    color: #182230;
}

[data-theme="light"] .pp-report-card__notice {
    border-color: rgba(27, 39, 56, 0.08);
}

[data-theme="light"] .report-modal {
    border-color: rgba(0, 0, 0, 0.08);
    background:
        radial-gradient(circle at top left, rgba(205, 65, 50, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 242, 247, 0.98));
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.16);
}

[data-theme="light"] .report-modal__field input,
[data-theme="light"] .report-modal__field select,
[data-theme="light"] .report-modal__field textarea {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .report-modal__field input:focus,
[data-theme="light"] .report-modal__field select:focus,
[data-theme="light"] .report-modal__field textarea:focus {
    background: #fff;
}

[data-theme="light"] .report-modal__note {
    background: rgba(205, 65, 50, 0.08);
    border-color: rgba(205, 65, 50, 0.18);
}

/* ===================================
   Value Proposition Cards (Home)
   =================================== */
.value-props-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 10px;
}

.value-prop-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 28px 32px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.25s, border-color 0.25s;
}

.value-prop-card:hover {
    transform: translateY(-4px);
    border-color: rgba(205, 65, 50, 0.25);
}

.value-prop-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--accent);
    background: rgba(205, 65, 50, 0.1);
    border-radius: 14px;
    margin-bottom: 18px;
}

.value-prop-content h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.value-prop-content p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.55;
}

.value-prop-accent {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent);
    border-radius: 3px 3px 0 0;
    opacity: 0;
    transition: opacity 0.25s;
}

.value-prop-card:hover .value-prop-accent {
    opacity: 1;
}

[data-theme="light"] .value-prop-card {
    background: #fff;
    border-color: #e5e7eb;
}

[data-theme="light"] .value-prop-content p {
    color: #6b7280;
}

@media (max-width: 768px) {
    .value-props-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ===================================
   Bulk Actions (Admin Payments)
   =================================== */
.adm-bulk-select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    user-select: none;
}

.adm-bulk-select-all input[type="checkbox"] {
    accent-color: var(--accent, #cd4132);
}

.adm-payment-check {
    display: flex;
    align-items: center;
    padding: 0 4px 0 0;
}

.adm-payment-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent, #cd4132);
    cursor: pointer;
}

.adm-bulk-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.adm-bulk-count {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent, #cd4132);
}

.adm-btn-sm {
    padding: 5px 14px;
    font-size: 0.8rem;
}