:root {
    --lp-bg-main: #16181c;
    --lp-bg-card: #1d1f23;
    --lp-bg-soft: #242831;
    --lp-bg-field: #34363c;
    --lp-line: #42444a;
    --lp-text-main: #ffffff;
    --lp-text-secondary: #9aa6b5;
    --lp-accent: #1bd96a;
    --lp-accent-strong: #0faa4f;
    --lp-focus-ring: rgba(27, 217, 106, 0.38);

    --bg-main: var(--lp-bg-main);
    --bg-card: var(--lp-bg-card);
    --bg-field: var(--lp-bg-field);
    --line: var(--lp-line);
    --text-main: var(--lp-text-main);
    --text-secondary: var(--lp-text-secondary);
    --accent: var(--lp-accent);
    --accent-strong: var(--lp-accent-strong);
    --focus-ring: var(--lp-focus-ring);

    --surface-1: var(--lp-bg-main);
    --surface-2: var(--lp-bg-card);
    --surface-3: var(--lp-bg-soft);
    --surface-4: var(--lp-bg-field);
    --surface-5: var(--lp-line);
    --color-bg: var(--lp-bg-main);
    --color-raised-bg: var(--lp-bg-card);
    --color-button-bg: var(--lp-bg-field);
    --color-button-border: var(--lp-line);
    --color-text-primary: var(--lp-text-main);
    --color-text-secondary: var(--lp-text-secondary);
    --color-brand: var(--lp-accent);
    --color-brand-shadow: var(--lp-focus-ring);
}

body {
    background: var(--lp-bg-main) !important;
    color: var(--lp-text-main) !important;
}

* {
    scrollbar-color: var(--lp-bg-field) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--lp-bg-field);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: #4b4f57;
    background-clip: content-box;
}

.logo-icon {
    background: var(--lp-accent) !important;
    box-shadow: 0 8px 20px rgba(27, 217, 106, 0.25) !important;
}

.top-btn {
    color: #aeb9d0 !important;
}

.top-btn i {
    color: #7e8aa8 !important;
}

.top-btn:hover {
    color: var(--lp-text-main) !important;
}

.top-btn:hover i,
.top-btn.active i {
    color: var(--lp-accent) !important;
}

.user-avatar,
.profile-avatar {
    border-color: rgba(27, 217, 106, 0.45) !important;
    background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-strong)) !important;
    box-shadow: 0 6px 16px rgba(27, 217, 106, 0.26) !important;
}

:where(
    .auth-container,
    .universal-card,
    .login-card,
    .register-card,
    .profile-layout,
    .settings-layout,
    .settings-sidebar,
    .settings-content,
    .add-card,
    .preview-card-wrap,
    .plan-card,
    .hero,
    .server-card,
    .server-hero,
    .server-description-card,
    .server-info-card,
    .server-links-card,
    .server-tags-card,
    .sidebar-panel,
    .version-filter-toggle,
    .version-filter-content,
    .session-entry,
    .server-link-item,
    .compat-chip,
    .server-tag-chip,
    .add-note,
    .profile-card,
    .news-btn,
    .settings-button,
    .server-section-btn,
    .site-footer-logo
) {
    border-color: var(--lp-line) !important;
}

:where(
    .auth-container,
    .universal-card,
    .login-card,
    .register-card,
    .profile-layout,
    .settings-layout,
    .settings-sidebar,
    .settings-content,
    .add-card,
    .preview-card-wrap,
    .plan-card,
    .hero,
    .server-hero,
    .server-card,
    .server-description-card,
    .server-info-card,
    .server-links-card,
    .server-tags-card,
    .sidebar-panel,
    .version-filter-toggle,
    .version-filter-content,
    .session-entry,
    .server-link-item,
    .compat-chip,
    .server-tag-chip,
    .add-note,
    .field-input,
    .field-textarea,
    .metric-description-editor,
    .server-search-wrap input,
    .version-filter-search input,
    .settings-button,
    .news-btn
) {
    background-color: var(--lp-bg-card) !important;
}

:where(
    .field-input,
    .field-textarea,
    .metric-description-editor,
    .server-search-wrap input,
    .version-filter-search input
) {
    background-color: var(--lp-bg-field) !important;
    border-color: var(--lp-line) !important;
    color: var(--lp-text-main) !important;
}

:where(input, textarea, select)::placeholder {
    color: var(--lp-text-secondary) !important;
}

:where(
    .field-input,
    .field-textarea,
    .metric-description-editor,
    .server-search-wrap input,
    .version-filter-search input
):focus {
    box-shadow: 0 0 0 4px var(--lp-focus-ring) !important;
}

:where(
    .submit-btn,
    .btn.primary,
    .hero-btn.primary,
    .buy-btn,
    .join-btn.primary
):not(:disabled) {
    background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-strong)) !important;
    color: #fff !important;
    border: none !important;
}

:where(
    .submit-btn,
    .btn.primary,
    .hero-btn.primary,
    .buy-btn,
    .join-btn.primary
):disabled {
    background: #2a303a !important;
    border: 1px solid #3e4653 !important;
    color: #8e9ab0 !important;
    cursor: not-allowed !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
}

:where(
    .preview-subtitle,
    .add-subtitle,
    .register-subtitle,
    .auth-subtitle,
    .profile-subtitle,
    .page-subtitle,
    .field-help,
    .terms,
    .settings-group-title,
    .settings-button,
    .server-link-main,
    .server-link-item,
    .session-meta,
    .plan-level,
    .site-footer-disclaimer,
    .site-footer-copyright,
    .site-footer-link
) {
    color: var(--lp-text-secondary) !important;
}

:where(
    .page-title,
    .add-title,
    .preview-title,
    .plan-name,
    .server-name,
    .profile-login,
    .logo-text h1,
    .auth-title,
    .site-footer-heading,
    .site-footer-title
) {
    color: var(--lp-text-main) !important;
}

.site-footer-logo {
    background: var(--lp-accent) !important;
    box-shadow: 0 8px 16px rgba(27, 217, 106, 0.28) !important;
    color: #ffffff !important;
}

/* Sort dropdown: keep structure from page styles, only align colors with theme */
.sort-panel {
    background: var(--lp-bg-card) !important;
    border-color: var(--lp-line) !important;
}

.sort-toggle {
    background: var(--lp-bg-card) !important;
}

.sort-title {
    color: var(--lp-text-main) !important;
}

.sort-prefix {
    color: var(--lp-text-secondary) !important;
}

.sort-current {
    color: var(--lp-text-main) !important;
}

.sort-arrow {
    color: var(--lp-text-secondary) !important;
}

.sort-panel.is-open .sort-arrow {
    color: var(--lp-text-main) !important;
}

.sort-content {
    background: var(--lp-bg-card) !important;
    border-color: var(--lp-line) !important;
}

.sort-option {
    color: var(--lp-text-secondary) !important;
}

.sort-option:hover,
.sort-option:focus-visible {
    background: var(--lp-bg-field) !important;
    color: var(--lp-text-main) !important;
}

.sort-option.is-active {
    background: rgba(27, 217, 106, 0.2) !important;
    color: var(--lp-text-main) !important;
}

.sort-list {
    scrollbar-color: var(--lp-bg-field) transparent;
}

.sort-list::-webkit-scrollbar-thumb {
    background: var(--lp-bg-field) !important;
}

.sort-list::-webkit-scrollbar-thumb:hover {
    background: #4b4f57 !important;
}