/*
 * ═══════════════════════════════════════════════════════════════
 *  DIGIAS CYBER SAAS — Final Design System
 *  #547E72 · #000000 · Glassmorphism · Enterprise Dashboard
 * ═══════════════════════════════════════════════════════════════
 */

/* ── Token enforcement ── */
:root {
    --primary: #547E72 !important;
    --primary-rgb: 84, 126, 114 !important;
    --primary-light: rgba(84, 126, 114, 0.72) !important;
    --primary-dark: rgba(84, 126, 114, 0.32) !important;
    --accent-rgb: 84, 126, 114 !important;
    --bg: #000000 !important;
    --bg-dark: #000000 !important;
    --bg-surface: #000000 !important;
    --danger: rgba(84, 126, 114, 0.35) !important;
    --success: #547E72 !important;
    --warning: rgba(84, 126, 114, 0.55) !important;
    --paypal: rgba(84, 126, 114, 0.65) !important;
    --dash-surface: rgba(0, 0, 0, 0.55) !important;
    --dash-surface-raised: rgba(84, 126, 114, 0.08) !important;
    --dash-border: rgba(255, 255, 255, 0.06) !important;
    --dash-border-hover: rgba(84, 126, 114, 0.28) !important;
    --cyber-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cyber-radius: 14px;
    --cyber-radius-lg: 20px;
}

/* ── Global canvas — dashboard only (do not flatten public/marketing pages) ── */
body.in-corefi-app,
#page-dashboard,
#page-dashboard.active,
#page-servers,
#page-servers.active,
#page-profile.active,
#page-payments.active,
#page-marketplace.active,
#page-referral.active {
    background: #000000 !important;
    background-color: #000000 !important;
}

#page-dashboard.active,
#page-servers.active,
#page-profile.active,
#page-payments.active,
#page-marketplace.active,
#page-referral.active {
    background-image: none !important;
}

/* Public pages keep their own layered backgrounds */
#page-home,
#page-home.active,
.page.route-page,
.page.route-page.active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

body::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(ellipse 70% 55% at 12% -5%, rgba(84, 126, 114, 0.20), transparent 58%),
        radial-gradient(ellipse 55% 45% at 92% 8%, rgba(84, 126, 114, 0.12), transparent 52%),
        radial-gradient(ellipse 45% 35% at 50% 105%, rgba(84, 126, 114, 0.08), transparent 55%),
        #000000 !important;
    animation: cyberMeshDrift 32s ease-in-out infinite alternate !important;
}

body::after {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.28 !important;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px) !important;
    background-size: 56px 56px !important;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, black, transparent) !important;
}

@keyframes cyberMeshDrift {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.03) translate(1.5%, -0.8%); }
}

.page-ambient-orb,
.page-ambient::before,
.page-ambient::after {
    background: radial-gradient(circle, rgba(84, 126, 114, 0.45), transparent 68%) !important;
    filter: blur(110px) !important;
}

.page-ambient-orb.a2,
.page-ambient::after {
    background: radial-gradient(circle, rgba(84, 126, 114, 0.28), transparent 70%) !important;
}

/* ── Navbar — premium glass sticky ── */
.top-nav {
    position: fixed !important;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(32px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
    border-bottom: 1px solid rgba(84, 126, 114, 0.22) !important;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.55), 0 0 40px rgba(84, 126, 114, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transition: background 0.35s var(--cyber-ease), box-shadow 0.35s var(--cyber-ease), border-color 0.35s var(--cyber-ease) !important;
}

.top-nav.nav-scrolled {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(40px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(160%) !important;
    border-bottom-color: rgba(84, 126, 114, 0.22) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(84, 126, 114, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.nav-logo span {
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    background: linear-gradient(135deg, #ffffff 0%, rgba(84, 126, 114, 0.85) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.nav-logo-icon {
    background: rgba(84, 126, 114, 0.12) !important;
    border: 1px solid rgba(84, 126, 114, 0.28) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 16px rgba(84, 126, 114, 0.10) !important;
}

.nav-links {
    background: rgba(84, 126, 114, 0.14) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 999px !important;
    padding: 4px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px rgba(0, 0, 0, 0.30) !important;
}

.nav-link {
    color: var(--text-dim) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    transition: color 0.22s var(--cyber-ease), background 0.22s var(--cyber-ease), box-shadow 0.22s var(--cyber-ease) !important;
}

.nav-link:hover {
    color: #ffffff !important;
    background: rgba(84, 126, 114, 0.10) !important;
}

.nav-link.active {
    color: #ffffff !important;
    background: rgba(84, 126, 114, 0.22) !important;
    box-shadow: 0 0 20px rgba(84, 126, 114, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.cart-btn,
.btn-login,
#themeToggle,
#langToggle,
.nav-menu-btn {
    background: rgba(84, 126, 114, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 12px !important;
    color: var(--text) !important;
    transition: transform 0.22s var(--cyber-ease), box-shadow 0.25s var(--cyber-ease), border-color 0.25s var(--cyber-ease) !important;
}

.cart-btn:hover,
.btn-login:hover,
#themeToggle:hover,
#langToggle:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(84, 126, 114, 0.35) !important;
    box-shadow: 0 0 24px rgba(84, 126, 114, 0.14) !important;
}

.btn-login {
    background: linear-gradient(135deg, rgba(84, 126, 114, 0.45), rgba(84, 126, 114, 0.22)) !important;
    border-color: rgba(84, 126, 114, 0.35) !important;
    color: #ffffff !important;
}

/* ── Sidebar — glass enterprise nav ── */
.corefi-sidebar,
.guild-side,
.dash-sidebar {
    background: rgba(0, 0, 0, 0.40) !important;
    backdrop-filter: blur(40px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(140%) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04), 4px 0 32px rgba(0, 0, 0, 0.35) !important;
}

.corefi-brand {
    padding-bottom: 16px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.corefi-brand span,
.dash-sidebar__brand span {
    font-weight: 800 !important;
    font-size: 14px !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
}

.corefi-nav-item,
.guild-side-link,
.guild-side-sublink,
.dash-sidebar__link {
    color: var(--text-dim) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.22s var(--cyber-ease) !important;
}

.corefi-nav-item:hover,
.guild-side-link:hover,
.guild-side-sublink:hover,
.dash-sidebar__link:hover {
    background: rgba(84, 126, 114, 0.10) !important;
    color: #ffffff !important;
}

.corefi-nav-item.active,
.guild-side-link.active,
.guild-side-sublink.active,
.dash-sidebar__link.active {
    background: rgba(84, 126, 114, 0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(84, 126, 114, 0.28) !important;
    box-shadow: 0 0 20px rgba(84, 126, 114, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.corefi-sidebar-user,
.dash-sidebar__user {
    background: rgba(84, 126, 114, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--cyber-radius) !important;
    backdrop-filter: blur(12px) !important;
}

.corefi-sidebar-user strong,
.dash-sidebar__user strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.corefi-sidebar-user span,
.dash-sidebar__user span {
    color: var(--text-muted) !important;
}

.guild-category-header i.main-icon,
.guild-category-group.expanded .guild-category-header i.chevron {
    color: #547E72 !important;
}

.guild-side-sublink.active {
    background: rgba(84, 126, 114, 0.14) !important;
    border-color: rgba(84, 126, 114, 0.22) !important;
    color: #ffffff !important;
}

.guild-side-sublink.active::before,
.guild-side-sublink:hover::before {
    background: #547E72 !important;
    box-shadow: 0 0 10px rgba(84, 126, 114, 0.50) !important;
}

/* ── Dashboard shell ── */
.corefi-app {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--cyber-radius-lg) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.50), 0 0 40px rgba(84, 126, 114, 0.04) !important;
    overflow: hidden !important;
}

.corefi-topbar {
    background: rgba(84, 126, 114, 0.06) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.corefi-topbar h1,
.corefi-topbar h2,
.dash-section__title {
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
}

.corefi-topbar p,
.dash-section__desc,
.dash-breadcrumb {
    color: var(--text-dim) !important;
}

.corefi-scroll,
.dash-overview-scroll {
    gap: 24px !important;
    padding: 28px 32px 40px !important;
}

/* ── Cards — universal glass ── */
.stat-card,
.sys-stat-card,
.corefi-metric-card,
.corefi-panel,
.corefi-ticker,
.dash-kpi-card,
.dash-quick-card,
.dash-section-card,
.sub-card-v2,
.server-card-v2,
.server-card,
.bot-card,
.pricing-card,
.feature-card,
.overview-welcome,
.sys-mod-card,
.sys-chart-card,
.sys-price-card,
.dp-welcome-card,
.dp-welcome-item,
.dp-product-card,
.price-calc-card,
.music-bot-card,
.guild-card,
.shortcut-item,
.faq-item,
.marketplace-card,
.status-card,
.route-metric,
.price-card,
.commands-panel,
.command-item {
    background: rgba(84, 126, 114, 0.08) !important;
    backdrop-filter: blur(24px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(130%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--cyber-radius) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: transform 0.30s var(--cyber-ease), box-shadow 0.35s var(--cyber-ease), border-color 0.30s var(--cyber-ease) !important;
}

.stat-card:hover,
.sys-stat-card:hover,
.corefi-metric-card:hover,
.dash-kpi-card:hover,
.dash-quick-card:hover,
.sub-card-v2:hover,
.server-card-v2:hover,
.server-card:hover,
.bot-card:hover,
.pricing-card:hover,
.dp-product-card:hover,
.dp-welcome-item:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(84, 126, 114, 0.30) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.50), 0 0 32px rgba(84, 126, 114, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

/* KPI accent stripes — primary variants only */
.dash-kpi-card--total::after,
.dash-kpi-card--active::after,
.dash-kpi-card--warning::after,
.dash-kpi-card--danger::after,
.dash-kpi-card--servers::after {
    background: #547E72 !important;
    opacity: 0.85;
}

.dash-kpi-card--active::after { opacity: 1; }
.dash-kpi-card--warning::after { opacity: 0.65; }
.dash-kpi-card--danger::after { opacity: 0.35; }
.dash-kpi-card--servers::after { opacity: 0.75; }

.dash-kpi-card--total .dash-kpi-card__icon,
.dash-kpi-card--active .dash-kpi-card__icon,
.dash-kpi-card--warning .dash-kpi-card__icon,
.dash-kpi-card--danger .dash-kpi-card__icon,
.dash-kpi-card--servers .dash-kpi-card__icon {
    color: #547E72 !important;
    background: rgba(84, 126, 114, 0.12) !important;
    border: 1px solid rgba(84, 126, 114, 0.18) !important;
}

.dash-kpi-card__value,
.corefi-metric-card .metric-value,
.sys-stat-card strong {
    color: #ffffff !important;
}

.dash-kpi-card__label,
.dash-quick-card span,
.sub-card-v2__type {
    color: var(--text-dim) !important;
}

/* Subscription status — primary opacity scale */
.sub-card-v2__stripe,
.sub-card-v2--active .sub-card-v2__stripe { background: #547E72 !important; }
.sub-card-v2--expiring_soon .sub-card-v2__stripe { background: rgba(84, 126, 114, 0.55) !important; }
.sub-card-v2--paused .sub-card-v2__stripe { background: rgba(84, 126, 114, 0.25) !important; }
.sub-card-v2--expired .sub-card-v2__stripe { background: rgba(84, 126, 114, 0.12) !important; }

.sub-status--pill.active,
.sub-status--pill.expiring,
.sub-status--pill.paused,
.sub-status--pill.expired {
    background: rgba(84, 126, 114, 0.10) !important;
    border-color: rgba(84, 126, 114, 0.25) !important;
    color: #ffffff !important;
}

.sub-status--pill.active { border-color: rgba(84, 126, 114, 0.45) !important; color: #547E72 !important; }
.sub-status--pill.expiring { opacity: 0.85; }
.sub-status--pill.paused { opacity: 0.65; color: var(--text-dim) !important; }
.sub-status--pill.expired { opacity: 0.50; color: var(--text-muted) !important; }

.sub-card-v2__days--ok,
.sub-card-v2__days--warn,
.sub-card-v2__days--bad {
    background: rgba(84, 126, 114, 0.10) !important;
    color: #547E72 !important;
}

.sub-card-v2__days--warn { opacity: 0.75; }
.sub-card-v2__days--bad { opacity: 0.50; color: var(--text-muted) !important; }

/* ── Buttons ── */
.btn-hero-primary,
.btn-primary,
.corefi-btn--primary,
.btn-save,
.btn-add-cart {
    background: linear-gradient(135deg, rgba(84, 126, 114, 0.50) 0%, rgba(84, 126, 114, 0.28) 100%) !important;
    border: 1px solid rgba(84, 126, 114, 0.38) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 30px rgba(84, 126, 114, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    transition: transform 0.25s var(--cyber-ease), box-shadow 0.30s var(--cyber-ease) !important;
}

.btn-hero-primary:hover,
.btn-primary:hover,
.corefi-btn--primary:hover,
.btn-save:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 0 40px rgba(84, 126, 114, 0.20), 0 12px 36px rgba(0, 0, 0, 0.40) !important;
}

.btn-hero-outline,
.btn-secondary,
.corefi-btn {
    background: rgba(84, 126, 114, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text-dim) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.25s var(--cyber-ease) !important;
}

.btn-hero-outline:hover,
.btn-secondary:hover,
.corefi-btn:hover {
    border-color: rgba(84, 126, 114, 0.32) !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(84, 126, 114, 0.10) !important;
    transform: translateY(-2px) !important;
}

/* ── Forms ── */
.form-input,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='url'],
textarea,
select,
.dash-toolbar .subs-search-input,
.dash-toolbar .subs-filter-select,
.subs-toolbar .subs-search-input,
.subs-toolbar .subs-filter-select {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    transition: border-color 0.25s, box-shadow 0.25s !important;
}

.form-input:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: rgba(84, 126, 114, 0.40) !important;
    box-shadow: 0 0 0 3px rgba(84, 126, 114, 0.12), 0 0 20px rgba(84, 126, 114, 0.08) !important;
}

.form-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

label,
.sys-form-group label {
    color: var(--text-dim) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* ── Tables ── */
table,
.data-table,
.pricing-table {
    background: rgba(84, 126, 114, 0.04) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--cyber-radius) !important;
    overflow: hidden !important;
}

table thead th {
    background: rgba(84, 126, 114, 0.12) !important;
    color: var(--text-dim) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 14px 16px !important;
}

table tbody td {
    color: var(--text-dim) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    padding: 14px 16px !important;
    transition: background 0.20s var(--cyber-ease), color 0.20s var(--cyber-ease) !important;
}

table tbody tr:hover td {
    background: rgba(84, 126, 114, 0.08) !important;
    color: #ffffff !important;
}

/* ── Modals & overlays ── */
.modal-overlay,
.invoice-overlay,
.cart-overlay,
.nav-backdrop {
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.modal-content,
.invoice-modal,
.cart-panel {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(40px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--cyber-radius-lg) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.60), 0 0 48px rgba(84, 126, 114, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.modal-content h2,
.modal-content h3,
.invoice-modal h2 {
    color: #ffffff !important;
}

/* Dropdowns */
.nav-user-menu,
.dropdown-menu,
.guild-dropdown,
.sys-period-menu {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(28px) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: var(--cyber-radius) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 24px rgba(84, 126, 114, 0.06) !important;
}

/* ── Toolbars ── */
.dash-toolbar,
.subs-toolbar {
    background: rgba(84, 126, 114, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--cyber-radius) !important;
    backdrop-filter: blur(16px) !important;
}

/* ── Server cards ── */
.server-card-v2--music:hover {
    border-color: rgba(84, 126, 114, 0.35) !important;
}

.server-card-v2__icon {
    background: rgba(0, 0, 0, 0.50) !important;
    border-color: rgba(84, 126, 114, 0.20) !important;
}

/* ── Status indicators ── */
.status-indicator.online,
.status-pill--active,
.sub-status.active {
    color: #547E72 !important;
    background: rgba(84, 126, 114, 0.12) !important;
    border-color: rgba(84, 126, 114, 0.28) !important;
}

.status-indicator.offline {
    color: var(--text-muted) !important;
}

/* ── Announcements — primary only ── */
.site-announcement--operational,
.site-announcement--degraded,
.site-announcement--maintenance,
.site-announcement--outage {
    background: rgba(84, 126, 114, 0.88) !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.site-announcement--degraded { opacity: 0.80; }
.site-announcement--maintenance { opacity: 0.65; }
.site-announcement--outage { opacity: 0.50; }

/* ── Hero & landing ── */
.sys-hero h1,
.route-hero h1 {
    background: linear-gradient(135deg, #ffffff 0%, rgba(84, 126, 114, 0.80) 60%, #547E72 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.sys-hero-badge,
.sys-tag,
.route-kicker {
    background: rgba(84, 126, 114, 0.10) !important;
    border: 1px solid rgba(84, 126, 114, 0.22) !important;
    color: var(--text-dim) !important;
    backdrop-filter: blur(12px) !important;
}

/* ── Toast ── */
.toast {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(84, 126, 114, 0.25) !important;
    box-shadow: 0 0 24px rgba(84, 126, 114, 0.10) !important;
    color: #ffffff !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #000000;
}

::-webkit-scrollbar-thumb {
    background: rgba(84, 126, 114, 0.35);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(84, 126, 114, 0.55);
}

/* ── Tabs ── */
.tab {
    color: var(--text-dim) !important;
    border-radius: 10px !important;
    transition: all 0.22s var(--cyber-ease) !important;
}

.tab:hover {
    color: #ffffff !important;
    background: rgba(84, 126, 114, 0.08) !important;
}

.tab.active {
    background: rgba(84, 126, 114, 0.22) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(84, 126, 114, 0.10) !important;
}

/* ── Guild sub-nav ── */
.guild-sub-nav-btn {
    background: rgba(84, 126, 114, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--text-dim) !important;
    border-radius: 10px !important;
}

.guild-sub-nav-btn:hover {
    background: rgba(84, 126, 114, 0.10) !important;
    color: #ffffff !important;
}

.guild-sub-nav-btn.active {
    background: rgba(84, 126, 114, 0.22) !important;
    border-color: rgba(84, 126, 114, 0.32) !important;
    color: #ffffff !important;
}

.guild-category-group {
    background: rgba(84, 126, 114, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
}

.guild-category-group.expanded {
    background: rgba(84, 126, 114, 0.06) !important;
    border-color: rgba(84, 126, 114, 0.12) !important;
}

/* ── Music dashboard ── */
.music-dist-zone {
    background: rgba(84, 126, 114, 0.04) !important;
    border: 1px dashed rgba(84, 126, 114, 0.28) !important;
}

/* ── Page transitions ── */
.page.enter-slide-up,
.page.enter-fade-scale,
.page.enter-radial {
    animation-timing-function: var(--cyber-ease) !important;
}

.reveal-on-scroll.is-visible {
    animation: cyberReveal 0.65s var(--cyber-ease) forwards;
}

@keyframes cyberReveal {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ── Section dividers ── */
.dash-section + .dash-section {
    border-top-color: rgba(255, 255, 255, 0.04) !important;
}

.dash-section__title i {
    background: rgba(84, 126, 114, 0.12) !important;
    color: #547E72 !important;
}

/* ── Footer ── */
.footer {
    background: rgba(0, 0, 0, 0.60) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .nav-links {
        background: rgba(0, 0, 0, 0.85) !important;
        backdrop-filter: blur(40px) !important;
        border-radius: 0 !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .corefi-scroll,
    .dash-overview-scroll {
        padding: 20px 16px 32px !important;
        gap: 20px !important;
    }

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

    .page-ambient-orb.a3,
    .page-ambient::after {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .dash-kpi-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    .page-ambient-orb,
    .page-ambient::before,
    .page-ambient::after {
        animation: none !important;
    }
}

/* ── Color enforcement — primary-only overrides ── */
.sys-premium-action-btn.renew-btn,
.sys-premium-action-btn.renew-btn:hover {
    background: rgba(84, 126, 114, 0.06) !important;
    border-color: rgba(84, 126, 114, 0.20) !important;
    box-shadow: 0 8px 25px rgba(84, 126, 114, 0.10) !important;
}

.anti-raid-alert-banner.secure .status-indicator-glow,
.anti-raid-alert-banner.secure .status-icon {
    background: #547E72 !important;
    color: #547E72 !important;
}

.status-indicator.online,
.sys-health-ok,
.health-dot--ok {
    color: #547E72 !important;
}

.danger-text,
.text-danger,
.error-text {
    color: var(--text-muted) !important;
}

.server-card-v2__status.status-badge--active {
    background: rgba(84, 126, 114, 0.14) !important;
    color: #547E72 !important;
}

.server-card-v2__status.status-badge--invite {
    background: rgba(84, 126, 114, 0.10) !important;
    color: #ffffff !important;
}

.server-card-v2__status.status-badge--expired {
    background: rgba(84, 126, 114, 0.06) !important;
    color: var(--text-muted) !important;
}

.music-license-card__status--ok {
    background: rgba(84, 126, 114, 0.14) !important;
    color: #547E72 !important;
}

.music-license-card__status--warn {
    background: rgba(84, 126, 114, 0.10) !important;
    color: #ffffff !important;
}

.music-license-card__status--bad {
    background: rgba(84, 126, 114, 0.06) !important;
    color: var(--text-muted) !important;
}

/* ── Servers pick page ── */
#page-servers:not(.dash-guild-focus) .corefi-main {
    overflow: hidden !important;
}

#page-servers:not(.dash-guild-focus) .srv-pick-scroll {
    background: transparent !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#page-servers:not(.dash-guild-focus) .srv-pick-grid,
#page-servers:not(.dash-guild-focus) .servers-grid-corefi {
    flex-shrink: 0 !important;
    overflow: visible !important;
    align-items: start !important;
    grid-auto-rows: minmax(min-content, auto) !important;
}

.srv-pick-card {
    background: rgba(84, 126, 114, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.srv-pick-card:hover {
    border-color: rgba(84, 126, 114, 0.32) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 32px rgba(84, 126, 114, 0.12) !important;
}

.srv-pick-hero__icon {
    box-shadow: 0 0 36px rgba(84, 126, 114, 0.22) !important;
}

.srv-pick-view .corefi-search {
    all: unset;
}

.srv-pick-view .srv-tier-btn {
    width: auto !important;
    white-space: nowrap !important;
    justify-content: center !important;
}