:root {
    --sevoura-card: rgba(9, 15, 29, 0.78);
    --sevoura-card-strong: rgba(7, 12, 23, 0.88);
    --sevoura-border: rgba(148, 163, 184, 0.16);
    --sevoura-border-soft: rgba(255, 255, 255, 0.10);
    --sevoura-text: #e5edf8;
    --sevoura-muted: #94a3b8;
}

html {
    min-height: 100%;
    background: #050914;
}

body.sevoura-bg {
    min-height: 100vh;
    background-color: #050914 !important;
    background-image:
        linear-gradient(180deg, rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.82)),
        radial-gradient(circle at 22% 8%, rgba(56, 189, 248, 0.12), transparent 32%),
        radial-gradient(circle at 88% 78%, rgba(168, 85, 247, 0.18), transparent 34%),
        url('sevoura-bg.png') !important;
    background-size: cover, cover, cover, cover !important;
    background-position: center, center, center, center !important;
    background-attachment: fixed, fixed, fixed, fixed !important;
    color: var(--sevoura-text);
}

body.sevoura-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        radial-gradient(circle at center, transparent 0, rgba(2,6,23,0.24) 55%, rgba(2,6,23,0.62) 100%);
    background-size: 48px 48px, 48px 48px, 100% 100%;
    opacity: 0.65;
}

body.sevoura-bg > * {
    position: relative;
    z-index: 1;
}

/* Background layer that existed in older templates; keep it subtle so the new visual is visible. */
body.sevoura-bg > .fixed.inset-0.-z-10 {
    opacity: 0.42;
}

/* Make old Tailwind cards look consistent without rewriting every block. */
body.sevoura-bg [class*="bg-[#0c1220]"],
body.sevoura-bg [class*="bg-[#0d1322]"],
body.sevoura-bg [class*="bg-[#0e1422]"],
body.sevoura-bg [class*="bg-[#080d19]"],
body.sevoura-bg [class*="bg-[#070c17]"],
body.sevoura-bg [class*="bg-[#161c2d]"] {
    background-color: var(--sevoura-card) !important;
    border-color: var(--sevoura-border) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.sevoura-bg input[type="text"],
body.sevoura-bg input[type="password"],
body.sevoura-bg input[type="file"],
body.sevoura-bg textarea,
body.sevoura-bg select {
    background-color: rgba(2, 6, 23, 0.68) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.sevoura-bg input:focus,
body.sevoura-bg textarea:focus,
body.sevoura-bg select:focus {
    border-color: rgba(96, 165, 250, 0.85) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body.sevoura-bg header,
body.sevoura-bg form,
body.sevoura-bg article,
body.sevoura-bg section {
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

body.sevoura-bg article:hover {
    border-color: rgba(96, 165, 250, 0.28) !important;
    transform: translateY(-1px);
}

body.sevoura-bg button,
body.sevoura-bg a {
    -webkit-tap-highlight-color: transparent;
}

body.sevoura-bg .sevoura-topline {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .55), rgba(168, 85, 247, .55), transparent);
}

@media (max-width: 768px) {
    body.sevoura-bg {
        background-attachment: scroll, scroll, scroll, scroll !important;
    }
}