:root {
    --da-black: #050505;
    --da-black-2: #0b0a07;
    --da-panel: #11100b;
    --da-panel-2: #1b1710;
    --da-gold: #d6b25e;
    --da-gold-soft: #fff2bd;
    --da-gold-dark: #9a6a1f;
    --da-white: #fff8e6;
    --da-muted: #d8c58c;
    --da-line: rgba(214, 178, 94, .26);
    --da-shadow: 0 18px 48px rgba(0, 0, 0, .38);
}

html,
body,
.Mobile-App-Container,
.bg-appBg {
    background:
        radial-gradient(circle at 50% -10%, rgba(214, 178, 94, .16), transparent 34%),
        linear-gradient(180deg, var(--da-black), var(--da-black-2) 42%, #030303) !important;
    color: var(--da-white) !important;
}

.Mobile-App-Container,
body > .relative,
body > div.relative {
    background:
        radial-gradient(circle at 22% 0%, rgba(214, 178, 94, .12), transparent 28%),
        var(--da-black) !important;
}

.bg-white,
.bg-white\/95,
.bg-slate-50,
.bonus-glass,
.admin-card,
.stat-card,
.item-card,
.user-card,
.form-card {
    background: linear-gradient(180deg, rgba(27, 23, 16, .98), rgba(12, 11, 8, .98)) !important;
    border-color: var(--da-line) !important;
    color: var(--da-white) !important;
    box-shadow: var(--da-shadow) !important;
}

.border-blue-500\/20,
.border-blue-500\/25,
.border-blue-500\/30,
.border-blue-400\/40,
.border-blue-300\/50,
.border-blue-200,
.border-blue-100,
.border-gray-100,
.border-gray-200,
.border-slate-100 {
    border-color: var(--da-line) !important;
}

.text-\[\#0a1628\],
.text-gray-700,
.text-gray-800,
.text-slate-800,
.text-slate-900,
.text-black {
    color: var(--da-white) !important;
}

.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-slate-500,
.text-slate-600,
.text-blue-600\/90 {
    color: var(--da-muted) !important;
}

.text-blue-600,
.text-blue-700,
.text-emerald-600,
.text-emerald-700,
.text-amber-600,
.text-yellow-600 {
    color: var(--da-gold) !important;
}

.bg-blue-50,
.bg-emerald-50,
.bg-amber-50,
.bg-gray-50,
.bg-gray-100,
.bg-slate-50,
.bg-blue-100,
.bg-emerald-100 {
    background: rgba(214, 178, 94, .11) !important;
    color: var(--da-gold-soft) !important;
    border-color: var(--da-line) !important;
}

.bg-gradient-to-r,
.bg-gradient-to-br,
.bg-\[\#111827\],
.from-blue-600,
.to-blue-700 {
    background-image: linear-gradient(135deg, var(--da-gold-soft), var(--da-gold) 48%, var(--da-gold-dark)) !important;
    background-color: var(--da-gold) !important;
    color: #050505 !important;
}

button,
.btn,
.auth-submit,
a[class*="rounded"] {
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

button:hover,
a[class*="rounded"]:hover {
    border-color: rgba(255, 242, 189, .55) !important;
}

input,
select,
textarea,
.form-control,
.search-box {
    background: #17140e !important;
    border-color: var(--da-line) !important;
    color: var(--da-white) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(216, 197, 140, .68) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.search-box:focus {
    border-color: var(--da-gold) !important;
    box-shadow: 0 0 0 4px rgba(214, 178, 94, .14) !important;
}

.bonus-pattern,
[style*="#0a1628"],
[style*="#1e3a8a"],
[style*="#1d4ed8"] {
    background:
        radial-gradient(circle at 86% 12%, rgba(255, 242, 189, .20), transparent 22%),
        linear-gradient(135deg, #050505 0%, #15120c 58%, #8a641f 100%) !important;
    border-color: rgba(214, 178, 94, .42) !important;
}

.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
    box-shadow: var(--da-shadow) !important;
}

.Swal2-popup,
.swal2-popup {
    background: #11100b !important;
    color: var(--da-white) !important;
    border: 1px solid var(--da-line) !important;
}

.swal2-confirm {
    background: linear-gradient(135deg, var(--da-gold-soft), var(--da-gold) 48%, var(--da-gold-dark)) !important;
    color: #050505 !important;
}

.bottom-nav,
nav.fixed,
.fixed.bottom-0 {
    background: rgba(5, 5, 5, .94) !important;
    border-color: var(--da-line) !important;
    backdrop-filter: blur(16px);
}

.da-card {
    background: linear-gradient(180deg, rgba(27, 23, 16, .98), rgba(8, 7, 5, .98));
    border: 1px solid var(--da-line);
    color: var(--da-white);
    box-shadow: var(--da-shadow);
}

.da-gold-text {
    color: var(--da-gold) !important;
}

.da-gold-button {
    background: linear-gradient(135deg, var(--da-gold-soft), var(--da-gold) 48%, var(--da-gold-dark)) !important;
    color: #050505 !important;
    border: 1px solid rgba(255, 242, 189, .36) !important;
}

/* Ruang kerja responsif untuk halaman lama yang sebelumnya terkunci 448px. */
@media (min-width: 900px) {
    body:not(.auth-page) > .max-w-md,
    body:not(.auth-page) > div > .max-w-md,
    body:not(.auth-page) .Mobile-App-Container,
    body:not(.auth-page) .mobile-app-container {
        width: min(calc(100% - 48px), 920px) !important;
        max-width: 920px !important;
    }

    body:not(.auth-page) .fixed.bottom-0.max-w-md,
    body:not(.auth-page) .fixed.bottom-0 > .max-w-md,
    body:not(.auth-page) .bottom-nav {
        width: min(calc(100% - 48px), 720px) !important;
        max-width: 720px !important;
    }
}

@media (hover: hover) {
    body:not(.auth-page) a,
    body:not(.auth-page) button { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease; }
    body:not(.auth-page) a:hover,
    body:not(.auth-page) button:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}