:root {
    --surface-bg:
        radial-gradient(110% 120% at 100% 0%, rgba(37, 141, 169, 0.24) 0%, rgba(20, 29, 38, 0) 48%),
        linear-gradient(145deg, rgba(15, 21, 28, 0.94) 0%, rgba(11, 15, 21, 0.9) 100%);
    --surface-border: 1px solid rgba(150, 211, 220, 0.22);
    --surface-shadow: 0 12px 32px rgba(0, 0, 0, 0.33);
    --surface-muted: rgba(221, 241, 247, 0.78);
    --surface-input: rgba(20, 27, 36, 0.78);
    --surface-input-border: 1px solid rgba(146, 199, 211, 0.36);
}

body {
    background-color: #0f1418 !important;
    background-image:
        radial-gradient(140% 75% at 50% 0%, rgba(24, 74, 84, 0.34) 0%, rgba(12, 21, 30, 0.08) 50%, rgba(8, 12, 18, 0.7) 100%),
        linear-gradient(180deg, rgba(7, 13, 20, 0.28) 0%, rgba(7, 13, 20, 0.78) 100%),
        url('img/back1.jpg') !important;
    background-repeat: no-repeat !important;
    background-size: auto, auto, cover !important;
    background-position: center top, center, center !important;
    background-attachment: fixed !important;
    background-blend-mode: soft-light, multiply, normal !important;
    color: #e8eef2;
    position: relative;
    isolation: isolate;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(65% 45% at 20% 14%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 80%),
        radial-gradient(55% 35% at 84% 22%, rgba(243, 188, 93, 0.13) 0%, rgba(243, 188, 93, 0) 82%),
        radial-gradient(85% 70% at 50% 100%, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 74%);
    mix-blend-mode: soft-light;
    opacity: 0.7;
}

.navbar {
    background: var(--surface-bg) !important;
    border-bottom: var(--surface-border) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34) !important;
}

.mobile-menu {
    background: linear-gradient(145deg, rgba(10, 16, 22, 0.98) 0%, rgba(8, 12, 18, 0.96) 100%) !important;
}

.nav-button {
    background: var(--surface-input) !important;
    border: var(--surface-input-border) !important;
    color: #fff !important;
}

.notification,
.message,
.flash-message,
.inline-message,
.warn {
    background: var(--surface-bg) !important;
    border: var(--surface-border) !important;
    box-shadow: var(--surface-shadow) !important;
    color: #e8eef2 !important;
}

.form-container,
.shell,
.profile-container,
.profile-card,
.summary-card,
.card,
.calendar,
.contact-section,
.admin-shell,
.admin-card,
.admin-subcard,
.password-modal-content,
.booking-form,
.modal-content,
.order-item,
.reviews-section,
.clients-section,
.welcome-section,
.notifications-section,
.container .sidebar,
.container .content {
    background: var(--surface-bg) !important;
    border: var(--surface-border) !important;
    box-shadow: var(--surface-shadow) !important;
}

input,
select,
textarea,
button,
.field input,
.task-status-form select,
.inline-manage-form select,
.inline-manage-form input[type="text"] {
    border-radius: 8px;
}

input,
select,
textarea,
.field input,
.task-status-form select,
.inline-manage-form select,
.inline-manage-form input[type="text"] {
    background: var(--surface-input) !important;
    border: var(--surface-input-border) !important;
    color: #eef6f8 !important;
}

.site-footer,
.creator-section {
    background: var(--surface-bg) !important;
    border: var(--surface-border) !important;
    box-shadow: var(--surface-shadow) !important;
}

@media (max-width: 768px) {
    body {
        background-attachment: scroll !important;
        background-position: center top, center, 58% center !important;
    }
}