/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║   DIGIAS ULTRA-PREMIUM — Final Override Layer               ║
 * ║   #547E72 + deep black + neon-glass aesthetic                ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ━━━ CSS Custom Properties Override ━━━ */
:root {
    --neon: #6EEAC3 !important;
    --neon-rgb: 110, 234, 195 !important;
    --accent: #547E72 !important;
    --accent-bright: #7DBFAE !important;
    --accent-dim: #3A5B52 !important;
    --surface-glass: rgba(10, 10, 10, 0.6) !important;
    --surface-glass-hover: rgba(84, 126, 114, 0.12) !important;
    --glow-sm: 0 0 15px rgba(110, 234, 195, 0.12) !important;
    --glow-md: 0 0 30px rgba(110, 234, 195, 0.15), 0 0 60px rgba(84, 126, 114, 0.08) !important;
    --glow-lg: 0 0 40px rgba(110, 234, 195, 0.2), 0 0 80px rgba(84, 126, 114, 0.1), 0 0 120px rgba(84, 126, 114, 0.05) !important;
    --gradient-brand: linear-gradient(135deg, #547E72 0%, #6EEAC3 50%, #547E72 100%) !important;
    --gradient-surface: linear-gradient(145deg, rgba(14,14,14,0.7) 0%, rgba(8,8,8,0.9) 100%) !important;
    --border-glow: rgba(110, 234, 195, 0.18) !important;
    --text-gradient: linear-gradient(135deg, #fff 0%, #6EEAC3 100%) !important;
}

/* ━━━ KEYFRAMES ━━━ */
@keyframes dp-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes dp-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(1deg); }
    50% { transform: translateY(-5px) rotate(0deg); }
    75% { transform: translateY(-12px) rotate(-1deg); }
}

@keyframes dp-pulse-ring {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0; }
    100% { transform: scale(0.8); opacity: 0; }
}

@keyframes dp-glow-breathe {
    0%, 100% { opacity: 0.4; filter: blur(80px); }
    50% { opacity: 0.7; filter: blur(100px); }
}

@keyframes dp-border-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes dp-reveal-up {
    from { opacity: 0; transform: translateY(40px) scale(0.97); filter: blur(6px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes dp-reveal-scale {
    from { opacity: 0; transform: scale(0.85); filter: blur(10px); }
    to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes dp-slide-in-left {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes dp-slide-in-right {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes dp-counter-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes dp-gradient-x {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes dp-morph-blob {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
    75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; }
}

@keyframes dp-sparkle {
    0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

@keyframes dp-typing-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ━━━ GLOBAL BODY ENHANCEMENTS (dark theme only) ━━━ */
[data-theme="dark"] body {
    background: #000000 !important;
    color: #fff !important;
    overflow-x: hidden !important;
}

[data-theme="dark"] body::after {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E") !important;
    pointer-events: none !important;
    z-index: 1 !important;
    mix-blend-mode: overlay !important;
}

/* ━━━ ANIMATED MESH BACKGROUND (replaces plain orbs) ━━━ */
.page-ambient {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 1 !important;
}

.page-ambient-orb {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(100px) !important;
    opacity: 0.22 !important;
    animation-timing-function: ease-in-out !important;
    will-change: transform, opacity !important;
}

.page-ambient-orb.a1 {
    top: -15% !important;
    left: 5% !important;
    width: 55vw !important;
    height: 55vw !important;
    background: radial-gradient(circle, rgba(110, 234, 195, 0.3) 0%, rgba(84, 126, 114, 0.1) 40%, transparent 70%) !important;
    animation: dp-morph-blob 20s ease-in-out infinite, dp-glow-breathe 8s ease-in-out infinite !important;
}

.page-ambient-orb.a2 {
    bottom: -20% !important;
    right: -5% !important;
    width: 50vw !important;
    height: 50vw !important;
    background: radial-gradient(circle, rgba(84, 126, 114, 0.35) 0%, rgba(58, 91, 82, 0.1) 50%, transparent 70%) !important;
    animation: dp-morph-blob 25s ease-in-out infinite reverse, dp-glow-breathe 10s ease-in-out infinite 2s !important;
}

.page-ambient-orb.a3 {
    top: 40% !important;
    right: 15% !important;
    width: 40vw !important;
    height: 40vw !important;
    background: radial-gradient(circle, rgba(110, 234, 195, 0.18) 0%, transparent 60%) !important;
    animation: dp-morph-blob 18s ease-in-out infinite 3s, dp-glow-breathe 12s ease-in-out infinite 1s !important;
    opacity: 0.15 !important;
}

/* ━━━ TOP NAVBAR — Premium Glass (dark only) ━━━ */
[data-theme="dark"] .top-nav {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(24px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
    border-bottom: 1px solid rgba(110, 234, 195, 0.08) !important;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(110, 234, 195, 0.06) !important;
}

[data-theme="dark"] .nav-logo > span {
    background: linear-gradient(135deg, #fff 0%, #6EEAC3 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800 !important;
}

[data-theme="light"] .nav-logo > span {
    background: none !important;
    -webkit-text-fill-color: #1a1a1a !important;
    color: #1a1a1a !important;
}

/* Nav links - underline glow effect */
[data-theme="dark"] .nav-link {
    position: relative !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 0.3s ease !important;
}

[data-theme="dark"] .nav-link:hover {
    color: #6EEAC3 !important;
}

.nav-link::after {
    background: linear-gradient(90deg, #547E72, #6EEAC3, #547E72) !important;
    height: 2px !important;
    filter: drop-shadow(0 0 6px rgba(110, 234, 195, 0.5)) !important;
}

/* Login button glow */
.btn-login,
.nav-actions .btn-login {
    background: linear-gradient(135deg, #547E72 0%, #6EEAC3 100%) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(110, 234, 195, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-login:hover,
.nav-actions .btn-login:hover {
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 8px 30px rgba(110, 234, 195, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ━━━ HERO SECTION — Dramatic Overhaul ━━━ */
.sys-hero {
    position: relative !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background: transparent !important;
}

.sys-hero::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 600px !important;
    height: 600px !important;
    transform: translate(-50%, -50%) !important;
    background: radial-gradient(circle, rgba(110, 234, 195, 0.08) 0%, transparent 70%) !important;
    pointer-events: none !important;
    animation: dp-glow-breathe 6s ease-in-out infinite !important;
}

.sys-hero-inner {
    position: relative !important;
    z-index: 2 !important;
}

/* Hero title — gradient text */
.sys-hero-copy h1 {
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    background: linear-gradient(135deg, #ffffff 0%, #d1efe6 30%, #6EEAC3 60%, #547E72 100%) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: dp-gradient-x 8s ease infinite !important;
    text-shadow: none !important;
}

.sys-hero-copy h1 em {
    font-style: normal !important;
    -webkit-text-fill-color: #6EEAC3 !important;
    text-shadow: 0 0 20px rgba(110, 234, 195, 0.4) !important;
    filter: drop-shadow(0 0 8px rgba(110, 234, 195, 0.3)) !important;
}

.sys-hero-copy p {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: clamp(1rem, 2vw, 1.15rem) !important;
    line-height: 1.7 !important;
    max-width: 550px !important;
}

/* Hero badge — glass pill */
.sys-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    background: rgba(110, 234, 195, 0.08) !important;
    border: 1px solid rgba(110, 234, 195, 0.2) !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6EEAC3 !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 0 20px rgba(110, 234, 195, 0.08) !important;
    margin-bottom: 20px !important;
    animation: dp-reveal-up 0.8s ease-out both !important;
}

/* Hero action buttons */
.btn-hero {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    padding: 14px 28px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
}

.btn-hero-primary,
a.btn-hero-primary {
    background: linear-gradient(135deg, #547E72 0%, #6EEAC3 100%) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 6px 25px rgba(110, 234, 195, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.btn-hero-primary:hover,
a.btn-hero-primary:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 12px 40px rgba(110, 234, 195, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    filter: brightness(1.1) !important;
}

/* Shimmer effect on primary buttons */
.btn-hero-primary::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s ease !important;
}

.btn-hero-primary:hover::after {
    left: 100% !important;
}

.btn-hero-outline,
a.btn-hero-outline {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(110, 234, 195, 0.25) !important;
    color: #fff !important;
    backdrop-filter: blur(8px) !important;
}

.btn-hero-outline:hover,
a.btn-hero-outline:hover {
    background: rgba(110, 234, 195, 0.1) !important;
    border-color: rgba(110, 234, 195, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(110, 234, 195, 0.15) !important;
}

/* Hero tags */
.sys-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    background: rgba(110, 234, 195, 0.06) !important;
    border: 1px solid rgba(110, 234, 195, 0.12) !important;
    border-radius: 100px !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(6px) !important;
    transition: all 0.3s ease !important;
}

.sys-tag:hover {
    background: rgba(110, 234, 195, 0.12) !important;
    border-color: rgba(110, 234, 195, 0.3) !important;
    color: #6EEAC3 !important;
    transform: translateY(-1px) !important;
}

.sys-tag i {
    color: #547E72 !important;
}

/* ━━━ HERO PREVIEW CARD — 3D Glass Panel ━━━ */
.sys-hero-preview {
    perspective: 1000px !important;
}

.sys-hero-preview > div,
.sys-preview-bar,
.sys-preview-body {
    background: rgba(10, 10, 10, 0.7) !important;
    border: 1px solid rgba(110, 234, 195, 0.12) !important;
    backdrop-filter: blur(20px) !important;
}

.sys-preview-bar {
    border-bottom: 1px solid rgba(110, 234, 195, 0.1) !important;
    border-radius: 14px 14px 0 0 !important;
    background: rgba(14, 14, 14, 0.8) !important;
}

.sys-preview-body {
    border-radius: 0 0 14px 14px !important;
    border-top: none !important;
}

.sys-preview-dots span {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
}

.sys-preview-dots span:nth-child(1) { background: #ff5f56 !important; }
.sys-preview-dots span:nth-child(2) { background: #ffbd2e !important; }
.sys-preview-dots span:nth-child(3) { background: #27c93f !important; }

/* Preview metric cards */
.sys-preview-metric {
    background: rgba(110, 234, 195, 0.05) !important;
    border: 1px solid rgba(110, 234, 195, 0.1) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    transition: all 0.3s ease !important;
}

.sys-preview-metric:hover {
    border-color: rgba(110, 234, 195, 0.3) !important;
    background: rgba(110, 234, 195, 0.08) !important;
    transform: translateY(-2px) !important;
}

.sys-preview-metric b {
    color: #6EEAC3 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

/* Preview chart bars — animated gradient */
.sys-preview-chart .bar {
    background: linear-gradient(180deg, #6EEAC3 0%, #547E72 100%) !important;
    border-radius: 4px 4px 0 0 !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 0.85 !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.sys-preview-chart .bar:hover {
    opacity: 1 !important;
    transform: scaleY(1.05) !important;
    box-shadow: 0 0 12px rgba(110, 234, 195, 0.3) !important;
}

/* ━━━ STATS STRIP — Floating Glass Cards ━━━ */
.sys-stats-strip {
    position: relative !important;
    z-index: 2 !important;
}

.sys-stat-card {
    background: rgba(10, 10, 10, 0.6) !important;
    border: 1px solid rgba(110, 234, 195, 0.1) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 1px rgba(110, 234, 195, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.sys-stat-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #6EEAC3, transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.sys-stat-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: rgba(110, 234, 195, 0.3) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(110, 234, 195, 0.15) !important;
}

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

.sys-stat-card i {
    color: #6EEAC3 !important;
    filter: drop-shadow(0 0 6px rgba(110, 234, 195, 0.3)) !important;
    font-size: 24px !important;
}

.sys-stat-card strong {
    background: linear-gradient(135deg, #fff 0%, #6EEAC3 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 900 !important;
    font-size: 28px !important;
}

/* ━━━ FEATURE CARDS — Premium Glass Tiles ━━━ */
.sys-feature-card,
article.sys-feature-card {
    background: rgba(10, 10, 10, 0.55) !important;
    border: 1px solid rgba(110, 234, 195, 0.08) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Gradient border on hover */
.sys-feature-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 18px !important;
    padding: 1px !important;
    background: linear-gradient(135deg, transparent 0%, rgba(110, 234, 195, 0.3) 50%, transparent 100%) !important;
    background-size: 200% 200% !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    animation: dp-border-flow 4s ease infinite !important;
}

.sys-feature-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: rgba(110, 234, 195, 0.25) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(110, 234, 195, 0.12) !important;
}

.sys-feature-card:hover::before {
    opacity: 1 !important;
}

/* Feature icon glow */
.sys-feature-icon {
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: rgba(110, 234, 195, 0.08) !important;
    border: 1px solid rgba(110, 234, 195, 0.12) !important;
    transition: all 0.3s ease !important;
}

.sys-feature-card:hover .sys-feature-icon {
    background: rgba(110, 234, 195, 0.15) !important;
    border-color: rgba(110, 234, 195, 0.35) !important;
    box-shadow: 0 0 20px rgba(110, 234, 195, 0.2) !important;
    transform: scale(1.08) !important;
}

.sys-feature-icon i {
    color: #6EEAC3 !important;
    font-size: 22px !important;
    filter: drop-shadow(0 0 4px rgba(110, 234, 195, 0.3)) !important;
}

.sys-feature-card h3 {
    color: #fff !important;
    font-weight: 700 !important;
}

.sys-feature-card p {
    color: rgba(255, 255, 255, 0.55) !important;
    line-height: 1.6 !important;
}

/* ━━━ HUB PROMO SECTION ━━━ */
.sys-hub-promo-frame {
    background: rgba(8, 8, 8, 0.7) !important;
    border: 1px solid rgba(110, 234, 195, 0.1) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(110, 234, 195, 0.08) !important;
    overflow: hidden !important;
    transition: all 0.4s ease !important;
}

.sys-hub-promo-frame:hover {
    border-color: rgba(110, 234, 195, 0.25) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 50px rgba(110, 234, 195, 0.12) !important;
    transform: translateY(-4px) !important;
}

.sys-hub-promo-glow {
    background: radial-gradient(circle at 50% 50%, rgba(110, 234, 195, 0.12) 0%, transparent 70%) !important;
    animation: dp-glow-breathe 4s ease-in-out infinite !important;
}

.sys-hub-promo-badge {
    background: rgba(110, 234, 195, 0.08) !important;
    border: 1px solid rgba(110, 234, 195, 0.2) !important;
    color: #6EEAC3 !important;
    border-radius: 100px !important;
}

.sys-hub-promo-copy h2 {
    background: linear-gradient(135deg, #fff 0%, #6EEAC3 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800 !important;
}

.sys-hub-promo-points li i {
    color: #6EEAC3 !important;
}

/* Hub mock card styling */
.hub-mock {
    background: rgba(10, 10, 10, 0.9) !important;
}

.hub-mock-pill {
    border-radius: 100px !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border: 1px solid rgba(110, 234, 195, 0.12) !important;
    background: rgba(110, 234, 195, 0.06) !important;
    color: #6EEAC3 !important;
}

.hub-mock-pill.ok {
    background: rgba(110, 234, 195, 0.1) !important;
    border-color: rgba(110, 234, 195, 0.25) !important;
    color: #6EEAC3 !important;
}

.hub-mock-pill.warn {
    background: rgba(243, 156, 18, 0.1) !important;
    border-color: rgba(243, 156, 18, 0.25) !important;
    color: #f39c12 !important;
}

.hub-mock-pill.accent {
    background: rgba(110, 234, 195, 0.12) !important;
    border-color: rgba(110, 234, 195, 0.3) !important;
    color: #6EEAC3 !important;
}

/* ━━━ SPLIT SECTION ━━━ */
.sys-split-visual {
    background: rgba(10, 10, 10, 0.55) !important;
    border: 1px solid rgba(110, 234, 195, 0.1) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden !important;
}

.sys-split-row {
    border-bottom: 1px solid rgba(110, 234, 195, 0.06) !important;
    transition: all 0.3s ease !important;
}

.sys-split-row:hover {
    background: rgba(110, 234, 195, 0.04) !important;
    padding-inline-start: 8px !important;
}

.sys-split-row b {
    color: #6EEAC3 !important;
}

/* ━━━ CTA BAND — Glowing Gradient ━━━ */
.sys-cta-band {
    position: relative !important;
    overflow: hidden !important;
}

.sys-cta-inner {
    background: rgba(10, 10, 10, 0.6) !important;
    border: 1px solid rgba(110, 234, 195, 0.15) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(110, 234, 195, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}

.sys-cta-inner::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(135deg, rgba(110, 234, 195, 0.15), transparent 40%, transparent 60%, rgba(84, 126, 114, 0.15)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: dp-border-flow 6s ease infinite !important;
    background-size: 200% 200% !important;
}

.sys-cta-inner h3 {
    background: linear-gradient(135deg, #fff, #6EEAC3) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ━━━ PRICING CARDS — Premium Glass Tier ━━━ */
.sys-price-card,
.pricing-card {
    background: rgba(10, 10, 10, 0.55) !important;
    border: 1px solid rgba(110, 234, 195, 0.1) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.sys-price-card:hover,
.pricing-card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    border-color: rgba(110, 234, 195, 0.35) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 50px rgba(110, 234, 195, 0.15) !important;
}

/* ━━━ FAQ ITEMS ━━━ */
.faq-item {
    background: rgba(10, 10, 10, 0.5) !important;
    border: 1px solid rgba(110, 234, 195, 0.08) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.3s ease !important;
}

.faq-item:hover {
    border-color: rgba(110, 234, 195, 0.2) !important;
    background: rgba(110, 234, 195, 0.04) !important;
}

/* ━━━ FOOTER ━━━ */
.home-footer,
footer.home-footer {
    background: rgba(4, 4, 4, 0.8) !important;
    border-top: 1px solid rgba(110, 234, 195, 0.08) !important;
    backdrop-filter: blur(20px) !important;
}

/* ━━━ DASHBOARD SIDEBAR — Premium Glass ━━━ */
.corefi-sidebar {
    background: rgba(6, 6, 6, 0.75) !important;
    backdrop-filter: blur(24px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
    border-color: rgba(110, 234, 195, 0.08) !important;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3) !important;
}

/* Sidebar brand logo glow */
.corefi-brand-icon img {
    filter: drop-shadow(0 0 8px rgba(110, 234, 195, 0.3)) !important;
    transition: filter 0.3s ease !important;
}

.corefi-brand:hover .corefi-brand-icon img {
    filter: drop-shadow(0 0 14px rgba(110, 234, 195, 0.5)) !important;
}

.corefi-brand span {
    background: linear-gradient(135deg, #fff, #6EEAC3) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800 !important;
}

/* Nav items */
.corefi-nav-item {
    border-radius: 10px !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

.corefi-nav-item:hover {
    background: rgba(110, 234, 195, 0.06) !important;
    color: #fff !important;
}

.corefi-nav-item.active {
    background: linear-gradient(135deg, rgba(84, 126, 114, 0.3), rgba(110, 234, 195, 0.15)) !important;
    color: #6EEAC3 !important;
    border: 1px solid rgba(110, 234, 195, 0.2) !important;
    box-shadow: 0 4px 15px rgba(110, 234, 195, 0.1), inset 0 0 20px rgba(110, 234, 195, 0.05) !important;
}

.corefi-nav-item.active i {
    color: #6EEAC3 !important;
    filter: drop-shadow(0 0 4px rgba(110, 234, 195, 0.4)) !important;
}

/* Sidebar user area */
.corefi-sidebar-user {
    background: rgba(110, 234, 195, 0.04) !important;
    border-top: 1px solid rgba(110, 234, 195, 0.08) !important;
}

.corefi-sidebar-user img {
    border: 2px solid rgba(110, 234, 195, 0.2) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 12px rgba(110, 234, 195, 0.15) !important;
}

/* ━━━ DASHBOARD MAIN AREA ━━━ */
[data-theme="dark"] .corefi-main {
    background: #000 !important;
}

.corefi-topbar {
    border-bottom: 1px solid rgba(110, 234, 195, 0.06) !important;
}

.corefi-topbar h1 {
    background: linear-gradient(135deg, #fff, #6EEAC3) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800 !important;
}

/* Ticker bar */
.corefi-ticker {
    background: rgba(10, 10, 10, 0.55) !important;
    border: 1px solid rgba(110, 234, 195, 0.08) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(16px) !important;
}

.corefi-ticker-item i {
    color: #6EEAC3 !important;
}

.corefi-ticker-item strong {
    color: #6EEAC3 !important;
    font-weight: 800 !important;
}

/* Dashboard panels */
.corefi-panel {
    background: rgba(10, 10, 10, 0.55) !important;
    border: 1px solid rgba(110, 234, 195, 0.08) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden !important;
}

.corefi-panel-head {
    border-bottom: 1px solid rgba(110, 234, 195, 0.06) !important;
}

.corefi-panel-head h2 i {
    color: #6EEAC3 !important;
}

/* Dashboard buttons */
.corefi-btn {
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

.corefi-btn.ghost {
    background: rgba(110, 234, 195, 0.06) !important;
    border: 1px solid rgba(110, 234, 195, 0.15) !important;
    color: #6EEAC3 !important;
}

.corefi-btn.ghost:hover {
    background: rgba(110, 234, 195, 0.12) !important;
    border-color: rgba(110, 234, 195, 0.3) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(110, 234, 195, 0.1) !important;
}

/* ━━━ SERVER CARDS — Premium Tile ━━━ */
.server-card {
    background: rgba(10, 10, 10, 0.55) !important;
    border: 1px solid rgba(110, 234, 195, 0.08) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.server-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #547E72, #6EEAC3, #547E72) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.server-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: rgba(110, 234, 195, 0.3) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(110, 234, 195, 0.12) !important;
}

.server-card:hover::before {
    opacity: 1 !important;
}

/* ━━━ BOT CARDS ━━━ */
.bot-card {
    background: rgba(10, 10, 10, 0.55) !important;
    border: 1px solid rgba(110, 234, 195, 0.08) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.bot-card:hover {
    transform: translateY(-6px) scale(1.01) !important;
    border-color: rgba(110, 234, 195, 0.25) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45), 0 0 25px rgba(110, 234, 195, 0.1) !important;
}

/* ━━━ FORM INPUTS — Glass Fields ━━━ */
.form-input,
input[type='text'],
input[type='search'],
input[type='number'],
textarea,
select {
    background: rgba(10, 10, 10, 0.6) !important;
    border: 1px solid rgba(110, 234, 195, 0.1) !important;
    border-radius: 10px !important;
    color: #fff !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.25s ease !important;
}

.form-input:focus,
input[type='text']:focus,
input[type='search']:focus,
input[type='number']:focus,
textarea:focus,
select:focus {
    border-color: rgba(110, 234, 195, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(110, 234, 195, 0.08), 0 0 20px rgba(110, 234, 195, 0.1) !important;
    background: rgba(14, 14, 14, 0.8) !important;
    outline: none !important;
}

/* ━━━ MODAL OVERLAYS ━━━ */
.modal-overlay,
.invoice-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(12px) !important;
}

.modal-content,
.invoice-modal {
    background: rgba(12, 12, 12, 0.9) !important;
    border: 1px solid rgba(110, 234, 195, 0.12) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(24px) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(110, 234, 195, 0.08) !important;
}

/* ━━━ PRIMARY BUTTONS ━━━ */
.btn-save,
.btn-primary,
.bot-settings-save {
    background: linear-gradient(135deg, #547E72, #6EEAC3) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(110, 234, 195, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-save:hover,
.btn-primary:hover,
.bot-settings-save:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 30px rgba(110, 234, 195, 0.35) !important;
    filter: brightness(1.1) !important;
}

/* ━━━ GUILD SIDEBAR ━━━ */
.guild-side {
    background: rgba(6, 6, 6, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    border-color: rgba(110, 234, 195, 0.08) !important;
}

.guild-side-link {
    border-radius: 10px !important;
    transition: all 0.25s ease !important;
}

.guild-side-link:hover {
    background: rgba(110, 234, 195, 0.06) !important;
}

.guild-side-link.active {
    background: linear-gradient(135deg, rgba(84, 126, 114, 0.25), rgba(110, 234, 195, 0.1)) !important;
    border: 1px solid rgba(110, 234, 195, 0.2) !important;
    color: #6EEAC3 !important;
}

.guild-sub-nav-btn.active {
    background: linear-gradient(135deg, #547E72, #6EEAC3) !important;
    color: #000 !important;
}

/* ━━━ SCROLLBAR ━━━ */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f0f2f5 !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15) !important;
    border-color: #f0f2f5 !important;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #050505 !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(110, 234, 195, 0.15) !important;
    border: 2px solid #050505 !important;
}

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

[data-theme="dark"] * {
    scrollbar-color: rgba(110, 234, 195, 0.15) #050505 !important;
    scrollbar-width: thin !important;
}

/* ━━━ SECTION HEADINGS ━━━ */
.sys-section-head h2 {
    background: linear-gradient(135deg, #fff 0%, #6EEAC3 50%, #547E72 100%) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: dp-gradient-x 6s ease infinite !important;
    font-weight: 800 !important;
}

.sys-section-head p {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ━━━ OVERVIEW WELCOME CARD ━━━ */
.overview-welcome {
    background: rgba(10, 10, 10, 0.55) !important;
    border: 1px solid rgba(110, 234, 195, 0.1) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 20px rgba(110, 234, 195, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
}

.overview-welcome::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #6EEAC3, transparent) !important;
}

/* ━━━ DROPDOWN ━━━ */
.nav-user-dropdown {
    background: rgba(10, 10, 10, 0.9) !important;
    border: 1px solid rgba(110, 234, 195, 0.12) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(24px) !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(110, 234, 195, 0.06) !important;
}

/* ━━━ RESPONSIVE ━━━ */
@media (max-width: 768px) {
    .sys-hero-copy h1 {
        font-size: clamp(1.6rem, 6vw, 2.5rem) !important;
    }
    
    .sys-stat-card:hover,
    .sys-feature-card:hover,
    .server-card:hover {
        transform: translateY(-4px) scale(1.01) !important;
    }
}

/* ━━━ REDUCED MOTION ━━━ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ━━━ PREMIUM INTERACTIVE EMBED BUILDER ━━━ */
.embed-builder-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
    align-items: start;
    margin-top: 15px;
}

@media (max-width: 1024px) {
    .embed-builder-container {
        grid-template-columns: 1fr;
    }
}

.embed-builder-preview-sticky {
    position: sticky;
    top: 90px;
    z-index: 10;
}

/* Discord Mock Message and Embed Preview CSS */
.discord-message-mock {
    background-color: #313338 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    display: flex !important;
    gap: 16px !important;
    font-family: "gg sans", "Whitney", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4), var(--glow-sm) !important;
    backdrop-filter: blur(10px) !important;
    transition: box-shadow 0.3s ease !important;
}

.discord-message-mock:hover {
    box-shadow: 0 10px 35px rgba(0,0,0,0.5), 0 0 25px rgba(110, 234, 195, 0.15) !important;
}

.discord-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

.discord-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.discord-message-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.discord-message-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.375 !important;
}

.discord-bot-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #f2f3f5 !important;
    cursor: pointer !important;
}

.discord-bot-name:hover {
    text-decoration: underline !important;
}

.discord-bot-tag {
    font-size: 10px !important;
    font-weight: 700 !important;
    background-color: #5865f2 !important;
    color: #ffffff !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.discord-message-timestamp {
    font-size: 12px !important;
    color: #949ba4 !important;
    font-weight: 500 !important;
}

.discord-embed-mock {
    background-color: #2b2d31 !important;
    border-left: 4px solid #6EEAC3 !important;
    border-radius: 4px !important;
    padding: 12px 16px !important;
    max-width: 520px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

.discord-embed-grid {
    display: flex !important;
    gap: 16px !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

.discord-embed-core {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.discord-embed-author {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}

.discord-embed-author-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

.discord-embed-author-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.discord-embed-author-name[href]:hover {
    text-decoration: underline !important;
}

.discord-embed-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    color: #ffffff !important;
    line-height: 1.375 !important;
}

.discord-embed-title a {
    color: #00a8fc !important;
    text-decoration: none !important;
}

.discord-embed-title a:hover {
    text-decoration: underline !important;
}

.discord-embed-description {
    font-size: 14px !important;
    color: #dbdee1 !important;
    line-height: 1.375 !important;
    white-space: pre-wrap !important;
    font-weight: 400 !important;
}

.discord-embed-fields {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.discord-embed-field {
    font-size: 13px !important;
    line-height: 1.375 !important;
    grid-column: span 1 !important;
}

.discord-embed-field.block-field {
    grid-column: span 3 !important;
}

.discord-embed-field-name {
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-bottom: 2px !important;
}

.discord-embed-field-value {
    color: #dbdee1 !important;
    white-space: pre-wrap !important;
    font-weight: 400 !important;
}

.discord-embed-thumbnail-container {
    flex-shrink: 0 !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.discord-embed-thumbnail {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.discord-embed-image-container {
    margin-top: 8px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    max-height: 300px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
}

.discord-embed-image {
    width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.discord-embed-footer {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.discord-embed-footer-icon {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

.discord-embed-footer-text {
    font-size: 12px !important;
    color: #949ba4 !important;
    font-weight: 500 !important;
}

/* Embed Builder interactive field designer rows */
.embed-field-row {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-end !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    position: relative !important;
    animation: dp-reveal-up 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.embed-field-row .embed-field-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.embed-field-row .embed-field-col-sm {
    flex: 0 0 80px !important;
}

.embed-field-row .btn-remove-field {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

.embed-field-row .btn-remove-field:hover {
    background: #ef4444 !important;
    color: #fff !important;
}

.btn-glowing-neon {
    box-shadow: var(--glow-sm) !important;
    transition: all 0.3s ease !important;
}

.btn-glowing-neon:hover {
    box-shadow: var(--glow-md) !important;
    transform: translateY(-2px) !important;
}

/* ━━━ ANTI-RAID INCIDENT PANEL HUD SYSTEM ━━━ */
.anti-raid-alert-banner {
    display: flex !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    margin-bottom: 24px !important;
    align-items: center !important;
    border: 2px solid transparent !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.anti-raid-alert-banner.secure {
    background: rgba(46, 204, 113, 0.05) !important;
    border-color: rgba(46, 204, 113, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 20px rgba(46, 204, 113, 0.08) !important;
}

.anti-raid-alert-banner.attack {
    background: rgba(239, 68, 68, 0.08) !important;
    animation: raid-alarm-pulse 2s infinite !important;
}

.anti-raid-alert-banner.lockdown {
    background: rgba(52, 152, 219, 0.06) !important;
    border-color: rgba(52, 152, 219, 0.35) !important;
    animation: raid-lockdown-pulse 2.5s infinite !important;
}

@keyframes raid-alarm-pulse {
    0%, 100% {
        border-color: rgba(239, 68, 68, 0.3) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 20px rgba(239, 68, 68, 0.15) !important;
    }
    50% {
        border-color: rgba(239, 68, 68, 1) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 35px rgba(239, 68, 68, 0.55), inset 0 0 15px rgba(239, 68, 68, 0.15) !important;
    }
}

@keyframes raid-lockdown-pulse {
    0%, 100% {
        border-color: rgba(52, 152, 219, 0.3) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 20px rgba(52, 152, 219, 0.15) !important;
    }
    50% {
        border-color: rgba(52, 152, 219, 0.85) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 30px rgba(52, 152, 219, 0.45) !important;
    }
}

.status-indicator-glow {
    position: absolute !important;
    top: -50% !important;
    left: -20% !important;
    width: 200px !important;
    height: 200px !important;
    border-radius: 50% !important;
    filter: blur(80px) !important;
    pointer-events: none !important;
    opacity: 0.15 !important;
    transition: background 0.4s ease !important;
}

.anti-raid-alert-banner.secure .status-indicator-glow { background: #2ecc71 !important; }
.anti-raid-alert-banner.attack .status-indicator-glow { background: #ef4444 !important; opacity: 0.25 !important; }
.anti-raid-alert-banner.lockdown .status-indicator-glow { background: #3498db !important; }

.status-alert-content {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    z-index: 2 !important;
}

.status-alert-content .status-icon {
    font-size: 28px !important;
    transition: transform 0.3s ease !important;
}

.anti-raid-alert-banner.secure .status-icon { color: #2ecc71 !important; }
.anti-raid-alert-banner.attack .status-icon {
    color: #ef4444 !important;
    animation: alarm-spin-shake 0.8s infinite !important;
}
.anti-raid-alert-banner.lockdown .status-icon { color: #3498db !important; }

@keyframes alarm-spin-shake {
    0%, 100% { transform: rotate(0deg) scale(1); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-8deg) scale(1.1); }
    20%, 40%, 60%, 80% { transform: rotate(8deg) scale(1.1); }
}

.status-alert-content h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #ffffff !important;
}

/* Metrics Grid styles */
.anti-raid-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

@media (max-width: 900px) {
    .anti-raid-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 550px) {
    .anti-raid-metrics-grid {
        grid-template-columns: 1fr !important;
    }
}

.anti-raid-metric-card {
    background: rgba(10, 10, 10, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.3s ease !important;
}

.anti-raid-metric-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}

.anti-raid-alert-banner.attack ~ .anti-raid-metrics-grid .anti-raid-metric-card {
    border-color: rgba(239, 68, 68, 0.15) !important;
}

.anti-raid-metric-card .metric-icon {
    font-size: 24px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.02) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.anti-raid-metric-card .metric-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.anti-raid-metric-card .metric-label {
    font-size: 11px !important;
    color: #949ba4 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.anti-raid-metric-card .metric-value {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* Specific glows for critical states */
.text-glow-red {
    color: #ef4444 !important;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.6) !important;
    animation: text-pulse-blink 1s infinite alternate !important;
}

.text-glow-green {
    color: #2ecc71 !important;
    text-shadow: 0 0 15px rgba(46, 204, 113, 0.3) !important;
}

@keyframes text-pulse-blink {
    from { opacity: 0.7; }
    to { opacity: 1; }
}

/* Panic control buttons styling */
.emergency-action-card {
    border-color: rgba(255, 255, 255, 0.04) !important;
    transition: all 0.3s ease !important;
}

.anti-raid-alert-banner.attack ~ * .emergency-action-card {
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.05) !important;
}

.btn-panic-red {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #ef4444 !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.06) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-panic-red:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.45) !important;
    transform: translateY(-2px) !important;
}

.btn-safe-green {
    background: rgba(46, 204, 113, 0.12) !important;
    border: 1px solid rgba(46, 204, 113, 0.35) !important;
    color: #2ecc71 !important;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.06) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.btn-safe-green:hover {
    background: #2ecc71 !important;
    color: #ffffff !important;
    border-color: #2ecc71 !important;
    box-shadow: 0 0 25px rgba(46, 204, 113, 0.45) !important;
    transform: translateY(-2px) !important;
}

.btn-neutral-teal {
    background: rgba(110, 234, 195, 0.1) !important;
    border: 1px solid rgba(110, 234, 195, 0.3) !important;
    color: #6EEAC3 !important;
    box-shadow: var(--glow-sm) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.btn-neutral-teal:hover {
    background: #6EEAC3 !important;
    color: #000000 !important;
    border-color: #6EEAC3 !important;
    box-shadow: var(--glow-md) !important;
    transform: translateY(-2px) !important;
}

.spammer-feed-avatar-cell {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.spammer-feed-avatar-img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.spammer-badge-ban {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    padding: 2px 8px !important;
    border-radius: 100px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* ━━━ GROWTH ANALYTICS PREMIUM STYLING ━━━ */
#tab-syestm-analytics {
    display: none;
    animation: dp-reveal-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
#tab-syestm-analytics.active {
    display: block !important;
}

.sys-analytics-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 24px !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.sys-analytics-title-area h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

.sys-analytics-title-area p {
    font-size: 14px !important;
    color: var(--text-dim) !important;
    margin: 0 !important;
}

.sys-analytics-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.premium-select-wrapper {
    position: relative !important;
    display: inline-block !important;
}

.premium-select {
    background: rgba(10, 10, 10, 0.8) !important;
    border: 1px solid rgba(110, 234, 195, 0.25) !important;
    border-radius: 10px !important;
    padding: 10px 40px 10px 18px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: var(--glow-sm) !important;
    min-width: 140px !important;
}

[dir="rtl"] .premium-select {
    padding: 10px 18px 10px 40px !important;
}

.premium-select:hover, .premium-select:focus {
    border-color: var(--neon) !important;
    box-shadow: var(--glow-md) !important;
    background: rgba(20, 20, 20, 0.9) !important;
}

.select-chevron {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--neon) !important;
    pointer-events: none !important;
    font-size: 12px !important;
    transition: all 0.3s ease !important;
}

[dir="rtl"] .select-chevron {
    right: auto !important;
    left: 16px !important;
}

.btn-refresh-analytics {
    background: rgba(84, 126, 114, 0.1) !important;
    border: 1px solid rgba(84, 126, 114, 0.3) !important;
    color: var(--text-dim) !important;
    border-radius: 10px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.btn-refresh-analytics:hover {
    background: var(--surface-glass-hover) !important;
    border-color: var(--neon) !important;
    color: #ffffff !important;
    transform: rotate(180deg) !important;
}

/* KPI CARDS */
.sys-analytics-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 28px !important;
}

.sys-analytics-kpi-card {
    background: linear-gradient(135deg, rgba(14, 14, 14, 0.75) 0%, rgba(6, 6, 6, 0.85) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: default !important;
}

.sys-analytics-kpi-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent) !important;
}

.sys-analytics-kpi-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(110, 234, 195, 0.2) !important;
    box-shadow: 0 12px 40px rgba(110, 234, 195, 0.05), 0 8px 24px rgba(0,0,0,0.6) !important;
}

.kpi-icon-glow {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    position: relative !important;
}

.kpi-icon-glow.icon-blue {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #3b82f6 !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2) !important;
}

.kpi-icon-glow.icon-purple {
    background: rgba(168, 85, 247, 0.1) !important;
    color: #a855f7 !important;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.2) !important;
}

.kpi-icon-glow.icon-teal {
    background: rgba(20, 184, 166, 0.1) !important;
    color: #14b8a6 !important;
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.2) !important;
}

.kpi-icon-glow.icon-orange {
    background: rgba(249, 115, 22, 0.1) !important;
    color: #f97316 !important;
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.2) !important;
}

.kpi-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.kpi-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--text-dim) !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}

.kpi-value {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.1) !important;
}

.kpi-trend {
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.kpi-trend.trend-up {
    color: #6EEAC3 !important;
    text-shadow: 0 0 8px rgba(110, 234, 195, 0.2) !important;
}

.kpi-trend.trend-down {
    color: #ef4444 !important;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.2) !important;
}

.kpi-trend.trend-neutral {
    color: var(--text-dim) !important;
}

/* CHARTS VISUALIZATIONS */
.sys-analytics-charts-layout {
    display: grid !important;
    grid-template-columns: 1.8fr 1.2fr !important;
    gap: 24px !important;
    margin-bottom: 30px !important;
}

@media (max-width: 1024px) {
    .sys-analytics-charts-layout {
        grid-template-columns: 1fr !important;
    }
}

.sys-chart-glass-card {
    background: linear-gradient(145deg, rgba(12, 12, 12, 0.8) 0%, rgba(6, 6, 6, 0.9) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.sys-chart-glass-card::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    right: -1px;
    bottom: -1px;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(110, 234, 195, 0.15), transparent 40%, transparent 60%, rgba(255, 255, 255, 0.02)) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sys-chart-glass-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    z-index: 1 !important;
}

.chart-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.chart-header-left .header-icon {
    font-size: 18px !important;
    color: var(--neon) !important;
    background: rgba(110, 234, 195, 0.08) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 10px rgba(110, 234, 195, 0.1) !important;
}

.chart-header-left h3 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 4px 0 !important;
}

.chart-header-left .card-desc {
    font-size: 12px !important;
    color: var(--text-dim) !important;
    margin: 0 !important;
}

.chart-legends-custom {
    display: flex !important;
    gap: 12px !important;
}

.chart-legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

.chart-legend-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
}

.sys-chart-canvas-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 320px !important;
    z-index: 1 !important;
}

.sys-chart-canvas-wrapper.doughnut-wrapper {
    height: 240px !important;
}

.sys-analytics-side-charts {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

/* Glowing text styling helpers */
.text-glow-green {
    text-shadow: 0 0 10px rgba(110, 234, 195, 0.6) !important;
}
}

/* ━━━ TIERED SERVER GRID & HOVER QUICK-STATS STYLING ━━━ */
.servers-grid-corefi {
    position: relative !important;
}

/* Tiered Card Status Badges */
.server-card-status-badge {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    padding: 4px 10px !important;
    border-radius: 100px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    z-index: 2 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

.status-badge--active {
    background: rgba(110, 234, 195, 0.12) !important;
    color: #6EEAC3 !important;
    border: 1px solid rgba(110, 234, 195, 0.25) !important;
}

.status-badge--invite {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #3b82f6 !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
}

.status-badge--expired {
    background: rgba(249, 115, 22, 0.12) !important;
    color: #f97316 !important;
    border: 1px solid rgba(249, 115, 22, 0.25) !important;
}

/* Base Tiered Card Styles */
.server-card-lux {
    position: relative !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Tier 1: Active */
.server-card--active {
    border-color: rgba(110, 234, 195, 0.15) !important;
}
.server-card--active:hover {
    border-color: rgba(110, 234, 195, 0.45) !important;
    box-shadow: 0 12px 40px rgba(110, 234, 195, 0.08), 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}
.server-card--active .server-action {
    background: rgba(110, 234, 195, 0.1) !important;
    border: 1px solid rgba(110, 234, 195, 0.25) !important;
    color: #6EEAC3 !important;
}
.server-card--active:hover .server-action {
    background: #6EEAC3 !important;
    color: #000000 !important;
    border-color: #6EEAC3 !important;
    box-shadow: var(--glow-md) !important;
}

/* Tier 2: Invite Required */
.server-card--invite {
    border-color: rgba(59, 130, 246, 0.15) !important;
    filter: saturate(0.8) !important;
}
.server-card--invite:hover {
    filter: saturate(1.1) !important;
    border-color: rgba(59, 130, 246, 0.45) !important;
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.08), 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}
.server-card--invite .server-action {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    color: #3b82f6 !important;
}
.server-card--invite:hover .server-action {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4) !important;
}

/* Tier 3: Expired */
.server-card--expired {
    border-color: rgba(249, 115, 22, 0.15) !important;
    opacity: 0.9 !important;
}
.server-card--expired:hover {
    opacity: 1 !important;
    border-color: rgba(249, 115, 22, 0.45) !important;
    box-shadow: 0 12px 40px rgba(249, 115, 22, 0.08), 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}
.server-card--expired .server-action {
    background: rgba(249, 115, 22, 0.1) !important;
    border: 1px solid rgba(249, 115, 22, 0.25) !important;
    color: #f97316 !important;
}
.server-card--expired:hover .server-action {
    background: #f97316 !important;
    color: #ffffff !important;
    border-color: #f97316 !important;
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.4) !important;
}

/* Top Toolbar Tier Filter Buttons */
.srv-tier-filters {
    display: flex !important;
    background: rgba(10, 10, 10, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 4px !important;
    border-radius: 12px !important;
    gap: 4px !important;
    margin-right: 16px !important;
}

[dir="rtl"] .srv-tier-filters {
    margin-right: 0 !important;
    margin-left: 16px !important;
}

.srv-tier-btn {
    background: transparent !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    color: var(--text-dim) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.srv-tier-btn:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.04) !important;
}

.srv-tier-btn.active {
    background: var(--surface-glass-hover) !important;
    border: 1px solid rgba(110, 234, 195, 0.15) !important;
    color: var(--neon) !important;
    box-shadow: var(--glow-sm) !important;
}

/* Hover Quick-Stats Popover Card */
.srv-quick-stats-popover {
    position: fixed !important;
    width: 280px !important;
    background: linear-gradient(135deg, rgba(14, 14, 14, 0.95) 0%, rgba(6, 6, 6, 0.98) 100%) !important;
    border: 1px solid rgba(110, 234, 195, 0.25) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(110, 234, 195, 0.15) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    z-index: 10000 !important;
    pointer-events: none !important;
    transform: scale(0.9) translate(15px, 15px) !important;
    opacity: 0 !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
}

.srv-quick-stats-popover.visible {
    transform: scale(1) translate(15px, 15px) !important;
    opacity: 1 !important;
}

.srv-quick-stats-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
}

.srv-quick-stats-head h4 {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.srv-quick-stats-head .stats-badge {
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 100px !important;
}

.srv-quick-stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.srv-quick-stats-item {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.srv-quick-stats-item span {
    font-size: 10px !important;
    color: var(--text-dim) !important;
    font-weight: 600 !important;
}

.srv-quick-stats-item strong {
    font-size: 12px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

.srv-quick-stats-item.full-span {
    grid-column: span 2 !important;
}

.srv-quick-stats-popover-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: var(--neon) !important;
    font-size: 12px !important;
    padding: 16px 0 !important;
}

.srv-quick-stats-foot {
    margin-top: 12px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    font-size: 10px !important;
    color: var(--text-dim) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.srv-quick-stats-foot i {
    color: var(--neon) !important;
}

/* ━━━ RESILIENT SCROLLING FIXES FOR SERVERS SELECTION ━━━ */
#page-servers.active .corefi-app {
    height: calc(100vh - 80px) !important;
}

#page-servers .corefi-main {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

#serversView.servers-view-corefi {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#serversView.servers-view-corefi .corefi-scroll {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 0 !important;
}

/* ━━━ PHASE 1: DISCORD CHAT SANDBOX & 3D TILT STYLING ━━━ */

/* 3D Feature Cards Parallax */
.sys-features-grid {
    perspective: 1000px !important;
}

.sys-feature-card {
    position: relative !important;
    transform-style: preserve-3d !important;
    transition: transform 0.15s ease-out, box-shadow 0.3s ease, border-color 0.3s ease !important;
    will-change: transform !important;
}

.sys-feature-card:hover {
    border-color: rgba(110, 234, 195, 0.4) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(110, 234, 195, 0.14) !important;
}

/* Custom Neon colors for different Feature cards */
.sys-feature-card:nth-child(1):hover { border-color: rgba(239, 68, 68, 0.45) !important; box-shadow: 0 16px 45px rgba(0,0,0,0.6), 0 0 25px rgba(239, 68, 68, 0.16) !important; }
.sys-feature-card:nth-child(2):hover { border-color: rgba(59, 130, 246, 0.45) !important; box-shadow: 0 16px 45px rgba(0,0,0,0.6), 0 0 25px rgba(59, 130, 246, 0.16) !important; }
.sys-feature-card:nth-child(3):hover { border-color: rgba(168, 85, 247, 0.45) !important; box-shadow: 0 16px 45px rgba(0,0,0,0.6), 0 0 25px rgba(168, 85, 247, 0.16) !important; }
.sys-feature-card:nth-child(4):hover { border-color: rgba(249, 115, 22, 0.45) !important; box-shadow: 0 16px 45px rgba(0,0,0,0.6), 0 0 25px rgba(249, 115, 22, 0.16) !important; }
.sys-feature-card:nth-child(5):hover { border-color: rgba(236, 72, 153, 0.45) !important; box-shadow: 0 16px 45px rgba(0,0,0,0.6), 0 0 25px rgba(236, 72, 153, 0.16) !important; }
.sys-feature-card:nth-child(6):hover { border-color: rgba(20, 184, 166, 0.45) !important; box-shadow: 0 16px 45px rgba(0,0,0,0.6), 0 0 25px rgba(20, 184, 166, 0.16) !important; }
.sys-feature-card:nth-child(7):hover { border-color: rgba(110, 234, 195, 0.45) !important; box-shadow: 0 16px 45px rgba(0,0,0,0.6), 0 0 25px rgba(110, 234, 195, 0.16) !important; }

/* Discord Sandbox Container */
.sys-sandbox-section {
    padding: 60px 0 !important;
}

.sys-sandbox-container {
    max-width: 1100px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 0 20px !important;
}

/* Command triggers bar */
.sys-sandbox-triggers {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.sandbox-trigger-btn {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 10px 24px !important;
    border-radius: 100px !important;
    color: var(--text-dim) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.sandbox-trigger-btn:hover {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.sandbox-trigger-btn.active {
    background: rgba(110, 234, 195, 0.1) !important;
    border-color: rgba(110, 234, 195, 0.35) !important;
    color: var(--neon) !important;
    box-shadow: 0 0 15px rgba(110, 234, 195, 0.2) !important;
}

/* Discord Window Mockup */
.sys-discord-window {
    background: rgba(14, 16, 20, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(110, 234, 195, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    overflow: hidden !important;
    height: 520px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: box-shadow 0.5s ease, border-color 0.5s ease !important;
}

/* Dynamic window glows */
.sys-discord-window.glow-help { border-color: rgba(110, 234, 195, 0.25) !important; box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 45px rgba(110, 234, 195, 0.08) !important; }
.sys-discord-window.glow-protection { border-color: rgba(239, 68, 68, 0.25) !important; box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 45px rgba(239, 68, 68, 0.08) !important; }
.sys-discord-window.glow-analytics { border-color: rgba(59, 130, 246, 0.25) !important; box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 45px rgba(59, 130, 246, 0.08) !important; }
.sys-discord-window.glow-welcome { border-color: rgba(168, 85, 247, 0.25) !important; box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 45px rgba(168, 85, 247, 0.08) !important; }

/* Chrome Bar */
.discord-chrome {
    background: #0f1115 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    flex-shrink: 0 !important;
}

.discord-chrome-left {
    display: flex !important;
    gap: 6px !important;
}

.discord-mac-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
}

.discord-mac-dot.close { background: #ff5f56 !important; }
.discord-mac-dot.minimize { background: #ffbd2e !important; }
.discord-mac-dot.maximize { background: #27c93f !important; }

.discord-chrome-center {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.discord-chrome-right {
    display: flex !important;
    gap: 14px !important;
    color: var(--text-dim) !important;
    font-size: 14px !important;
}

/* Sidebar & Chat Panel Layout */
.discord-inner-layout {
    display: flex !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Channels Sidebar */
.discord-sidebar-channels {
    width: 240px !important;
    background: rgba(12, 14, 18, 0.7) !important;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
}

@media (max-width: 768px) {
    .discord-sidebar-channels {
        display: none !important;
    }
}

.discord-guild-header {
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.discord-channels-list {
    padding: 12px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.channel-category {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: var(--text-dim) !important;
    text-transform: uppercase !important;
    padding: 6px 8px !important;
    margin-top: 8px !important;
}

.channel-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    color: var(--text-dim) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.channel-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
}

.channel-item.active {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

/* Chat Main panel */
.discord-chat-main {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    min-width: 0 !important;
}

.discord-chat-scroller {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Discord Message design */
.discord-msg-row {
    display: flex !important;
    gap: 16px !important;
    animation: msgReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes msgReveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.discord-msg-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #5865f2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.discord-msg-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.discord-msg-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.discord-msg-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.discord-msg-user {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.discord-msg-bot-badge {
    background: #5865F2 !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
}

.discord-msg-time {
    font-size: 10px !important;
    color: var(--text-dim) !important;
}

.discord-msg-text {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.6 !important;
}

/* Rich Embed Design */
.discord-embed {
    background: rgba(16, 18, 22, 0.7) !important;
    border-radius: 8px !important;
    border-inline-start: 4px solid #5865f2 !important;
    padding: 16px !important;
    margin-top: 6px !important;
    max-width: 520px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}

.discord-embed-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.discord-embed-description {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.6 !important;
}

.discord-embed-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 8px !important;
}

.discord-embed-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.discord-embed-field strong {
    font-size: 11px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

.discord-embed-field span {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.discord-embed-field.full-width {
    grid-column: span 2 !important;
}

.discord-embed-footer {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 10px !important;
    color: var(--text-dim) !important;
    margin-top: 8px !important;
}

.discord-embed-footer img {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
}

/* Typing Indicator */
.discord-chrome-logo,
.discord-guild-logo,
.discord-typing-avatar {
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

.discord-chrome-center {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.discord-typing-indicator {
    height: 24px !important;
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 20px !important;
    margin-bottom: 8px !important;
    font-size: 11px !important;
    color: var(--text-dim) !important;
}

.typing-dots {
    display: flex !important;
    gap: 3px !important;
}

.typing-dots span {
    width: 5px !important;
    height: 5px !important;
    background: var(--text-dim) !important;
    border-radius: 50% !important;
    animation: typingPulse 1.4s infinite !important;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s !important; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes typingPulse {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(-4px); opacity: 1; }
}

/* Chat Input Bar */
.discord-chat-input-area {
    padding: 0 20px 20px !important;
    display: flex !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

.discord-chat-input-area .input-wrapper {
    flex: 1 !important;
    background: #383a40 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    gap: 12px !important;
}

.discord-chat-input-area .input-wrapper i {
    color: #b5bac1 !important;
    font-size: 18px !important;
    cursor: pointer !important;
}

.discord-chat-input-area .input-wrapper i:hover {
    color: #dbdee1 !important;
}

.discord-chat-input-area input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #dbdee1 !important;
    font-size: 14px !important;
    padding: 12px 0 !important;
    font-family: inherit !important;
}

.input-icons {
    display: flex !important;
    gap: 12px !important;
}

@media (max-width: 480px) {
    .input-icons {
        display: none !important;
    }
}

.btn-send-discord {
    background: #5865F2 !important;
    border: none !important;
    border-radius: 8px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.btn-send-discord:hover {
    background: #4752c4 !important;
}

/* Discord Select Menu Styles */
.discord-action-row {
    margin-top: 8px !important;
    max-width: 520px !important;
    width: 100% !important;
}

.discord-select-menu-wrapper {
    position: relative !important;
    width: 100% !important;
}

.discord-select-menu {
    width: 100% !important;
    background: #2b2d31 !important;
    border: 1px solid #1e1f22 !important;
    border-radius: 4px !important;
    color: #dbdee1 !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    outline: none !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    text-align: right !important;
    direction: rtl !important;
}

.discord-select-menu-wrapper::after {
    content: "\f078" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #b5bac1 !important;
    font-size: 11px !important;
    pointer-events: none !important;
}

.discord-select-menu option {
    background: #1e1f22 !important;
    color: #dbdee1 !important;
    padding: 8px !important;
}