:root {
    --bg: #08050f;
    --surface: #120b20;
    --surface-2: #1b1030;
    --card: #171023;
    --card-2: #211336;
    --border: rgba(168, 85, 247, 0.23);
    --border-strong: rgba(168, 85, 247, 0.42);
    --text: #f5f3ff;
    --muted: #a8a0bd;
    --primary: #8b5cf6;
    --primary-2: #a855f7;
    --primary-soft: rgba(139, 92, 246, 0.16);
    --pink: #d946ef;
}

html,
body {
    background:
        radial-gradient(circle at 8% 18%, rgba(139, 92, 246, 0.18), transparent 28%),
        radial-gradient(circle at 90% 8%, rgba(217, 70, 239, 0.11), transparent 26%),
        linear-gradient(180deg, #07040d 0%, #10091b 48%, #08050f 100%) !important;
    color: var(--text);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.34;
    z-index: -1;
}

.navbar,
.loco-navbar {
    background: rgba(5, 3, 10, 0.86) !important;
    border-bottom: 1px solid rgba(168, 85, 247, 0.22) !important;
    backdrop-filter: blur(14px);
}

.loco-navbar-inner {
    min-height: 58px;
}

.loco-brand {
    display: inline-flex !important;
    align-items: center;
    text-decoration: none !important;
    line-height: 1;
}

.loco-brand-logo {
    display: block;
    width: auto;
    height: 68px;
    max-width: 220px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.30));
}

.loco-nav-links a,
.nav-links a {
    color: #bdb4d4 !important;
}

.loco-nav-links a:hover,
.nav-links a:hover {
    color: #ffffff !important;
}

.card,
.panel,
.loco-product-card,
.loco-activate-card,
.product-status-row,
.server-card,
.reseller-card,
.loco-contact-card,
.loco-terms-card,
.loco-products-empty,
.dashboard-panel,
.stat-card,
.file-card {
    background:
        radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.11), transparent 34%),
        rgba(18, 11, 32, 0.88) !important;
    border-color: var(--border) !important;
}

input,
select,
textarea {
    background: #0b0614 !important;
    border-color: rgba(168, 85, 247, 0.28) !important;
    color: var(--text) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(168, 85, 247, 0.72) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.13) !important;
}

button,
.btn,
.button,
.loco-product-buy,
.loco-activate-button,
.home-main-button,
.loco-home-primary {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    color: #ffffff !important;
    border-color: rgba(216, 180, 254, 0.30) !important;
    box-shadow: 0 10px 34px rgba(139, 92, 246, 0.20);
}

button:hover,
.btn:hover,
.button:hover,
.loco-product-buy:hover,
.loco-activate-button:hover,
.home-main-button:hover,
.loco-home-primary:hover {
    filter: brightness(1.08);
}

.badge.green,
.status-pill.safe,
.status-pill.operational,
.loco-product-pill-green {
    color: #c4b5fd !important;
    background: rgba(139, 92, 246, 0.18) !important;
    border-color: rgba(168, 85, 247, 0.35) !important;
}

.loco-home-pill span,
.home-pill span,
.loco-activate-kicker,
.resellers-eyebrow,
.jobs-eyebrow,
.spoofer-eyebrow,
.loco-static-hero span {
    background: rgba(139, 92, 246, 0.22) !important;
    border-color: rgba(168, 85, 247, 0.42) !important;
    color: #ddd6fe !important;
}

.loco-site-footer {
    background: #050309 !important;
    border-color: rgba(168, 85, 247, 0.18) !important;
}