:root {
    --primary: #000000;
    --primary-dark: #262626;
    --accent: #262626;
    --theme-card-radius: 16px;
}
/* Classic theme — monokrom hitam-putih (referensi zalora/) */

/* ── Token netral zalora ── */
body[data-theme="classic"] {
    --classic-content-max: 48rem;
    --classic-auth-max: 80rem;
    --classic-form-max: 56rem;
    --classic-pad-x: 1rem;
    --classic-pad-y: 1rem;
    --classic-gap: 1rem;
    --zalora-bg: #f4f4f4;
    --zalora-surface: #ffffff;
    --zalora-text: #262626;
    --zalora-text-muted: #737373;
    --zalora-border: #e5e7eb;
    --zalora-shadow-card: rgba(0, 0, 0, 0.1) 2px 2px 12px 0px;
    --zalora-shadow-nav: rgba(0, 0, 0, 0.08) 0px -2px 8px 0px;
    color: var(--zalora-text);
}

@media (min-width: 768px) {
    body[data-theme="classic"] {
        --classic-pad-x: 1.5rem;    /* 24px tablet+ */
        --classic-pad-y: 1.25rem;
        --classic-gap: 1.25rem;
    }
}

/* Halaman utama app */
body[data-theme="classic"] #pageHome,
body[data-theme="classic"] #pageTugas,
body[data-theme="classic"] #pageDompet,
body[data-theme="classic"] #pageAkun,
body[data-theme="classic"] .page {
    width: 100%;
    max-width: var(--classic-content-max);
    margin-left: auto;
    margin-right: auto;
    padding: var(--classic-pad-y) var(--classic-pad-x) !important;
    padding-bottom: 1.5rem !important;
    box-sizing: border-box;
}

body[data-theme="classic"] .page > .card-container,
body[data-theme="classic"] .page > .mySwiper,
body[data-theme="classic"] .page > .vf-x9marquee-wrap,
body[data-theme="classic"] .page > div[class*="grid"] {
    margin-bottom: var(--classic-gap);
}

/* Header & bottom nav selaras lebar konten */
body[data-theme="classic"] #mainHeader {
    width: 100%;
    max-width: var(--classic-content-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--classic-pad-x) !important;
    padding-right: var(--classic-pad-x) !important;
    box-sizing: border-box;
}

body[data-theme="classic"] #bottomNav {
    width: 100%;
    max-width: var(--classic-content-max);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding-left: var(--classic-pad-x) !important;
    padding-right: var(--classic-pad-x) !important;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
}

body[data-theme="classic"] #bottomNav button.nav-active {
    transform: scale(1.05);
}

/* Auth — padding & batas lebar */
body[data-theme="classic"] #authPage header {
    width: 100%;
    max-width: var(--classic-auth-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--classic-pad-x) !important;
    padding-right: var(--classic-pad-x) !important;
    box-sizing: border-box;
}

body[data-theme="classic"] #authPage .auth-split-inner {
    width: 100%;
    max-width: var(--classic-auth-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--classic-pad-x) !important;
    padding-right: var(--classic-pad-x) !important;
    box-sizing: border-box;
}

body[data-theme="classic"] #authPage .auth-card {
    width: 100%;
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body[data-theme="classic"] #authPage footer {
    width: 100%;
    max-width: var(--classic-content-max);
    margin-left: auto;
    margin-right: auto;
    padding: var(--classic-pad-y) var(--classic-pad-x) 1.5rem !important;
    box-sizing: border-box;
}

/* Kartu — ikut lebar kontainer induk */
body[data-theme="classic"] .card-container {
    width: 100%;
    box-sizing: border-box;
}

/* Top-up */
body[data-theme="classic"] header.sticky {
    padding-left: var(--classic-pad-x) !important;
    padding-right: var(--classic-pad-x) !important;
}

body[data-theme="classic"] main.max-w-5xl {
    width: 100%;
    max-width: var(--classic-form-max);
    margin-left: auto;
    margin-right: auto;
    padding: var(--classic-pad-y) var(--classic-pad-x) 2rem !important;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    body[data-theme="classic"] main.max-w-5xl {
        padding: 1.5rem 1.5rem 3rem !important;
    }
}

/* Verifikasi & halaman blocked — padding body */
body[data-theme="classic"].flex.items-center {
    padding: var(--classic-pad-x) !important;
    box-sizing: border-box;
}

body[data-theme="classic"] .max-w-2xl {
    width: 100%;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

body[data-theme="classic"] .max-w-md {
    width: 100%;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

body[data-page-bg="solid"],
body[data-page-bg="gradient"] {
    background: var(--zalora-bg) !important;
}

body[data-theme="classic"] ::selection {
    background: var(--primary);
    color: #ffffff;
}

body[data-theme="classic"] #pageHome,
body[data-theme="classic"] #pageTugas,
body[data-theme="classic"] #pageDompet,
body[data-theme="classic"] #pageAkun,
body[data-theme="classic"] .page,
body[data-theme="classic"] #authPage {
    background: var(--zalora-bg) !important;
}

body[data-theme="classic"] #mainHeader,
body[data-theme="classic"] #bottomNav,
body[data-theme="classic"] #authPage header {
    background: var(--zalora-surface) !important;
    border-color: var(--zalora-border) !important;
    box-shadow: var(--zalora-shadow-nav) !important;
}

body[data-theme="classic"] .card-container,
body[data-theme="classic"] .auth-card,
body[data-theme="classic"] .modal-panel,
body[data-theme="classic"] .glass-card,
body[data-theme="classic"] .top-up-card,
body[data-theme="classic"] .verif-card {
    background: var(--zalora-surface) !important;
    border: 1px solid var(--zalora-border) !important;
    box-shadow: var(--zalora-shadow-card) !important;
}

body[data-theme="classic"] .btn-shopee,
body[data-theme="classic"] .bg-blue-600,
body[data-theme="classic"] .from-blue-600,
body[data-theme="classic"] .to-blue-700 {
    color: #ffffff !important;
}

body[data-theme="classic"] .text-gray-600,
body[data-theme="classic"] .text-gray-500 {
    color: var(--zalora-text-muted) !important;
}

body[data-page-bg="gradient"] {
    background: var(--zalora-bg) !important;
}

body[data-layout-auth="split"] #authPage .auth-split-left {
    display: none;
}

@media (min-width: 1024px) {
    body[data-layout-auth="split"] #authPage .auth-split-left {
        display: flex;
    }
}

body[data-layout-auth="stacked"] #authPage .auth-split-left {
    display: none !important;
}

body[data-layout-auth="stacked"] #authPage .auth-split-inner {
    justify-content: center;
    gap: 2rem;
}

#authPage .auth-card,
.top-up-card,
.verif-card {
    border-radius: var(--theme-card-radius, 16px);
}

/* Override Tailwind blue-* → monokrom */
.text-blue-600, a.text-blue-600 { color: var(--primary) !important; }
.text-blue-700 { color: var(--primary-dark) !important; }
.border-blue-600, .border-blue-200, .border-blue-100, .border-blue-300 { border-color: var(--zalora-border) !important; }
.bg-blue-600, .from-blue-600, .to-blue-700 { background-color: var(--primary) !important; }
.bg-blue-50, .from-blue-50, .to-blue-50,
.hover\:bg-blue-50:hover { background-color: var(--zalora-bg) !important; }
.bg-blue-100, .from-blue-100, .to-blue-100, .to-blue-200 { background-color: #f0f0f0 !important; }
.bg-gradient-to-r.from-blue-600.to-blue-700 {
    background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
}
.bg-gradient-to-br.from-blue-100.to-blue-200,
.bg-gradient-to-br.from-blue-50.to-blue-100 {
    background-image: none !important;
    background-color: #f0f0f0 !important;
}
.from-blue-50.to-blue-100,
.from-blue-100.to-blue-200 {
    background-image: none !important;
    background-color: var(--zalora-bg) !important;
}
.border-t-blue-600 { border-top-color: var(--primary) !important; }
.hover\:text-blue-700:hover { color: var(--primary-dark) !important; }
.focus\:border-blue-600:focus { border-color: var(--primary) !important; }
.divide-blue-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--zalora-border) !important; }

.menu-icon {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: #ffffff !important;
    box-shadow: var(--zalora-shadow-card) !important;
}

.card-container {
    box-shadow: var(--zalora-shadow-card);
    border-color: var(--zalora-border);
}
.card-container:hover {
    box-shadow: rgba(0, 0, 0, 0.12) 2px 4px 16px 0px;
}

.topup-btn {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: #ffffff !important;
    box-shadow: var(--zalora-shadow-card) !important;
}
.topup-btn:hover {
    box-shadow: rgba(0, 0, 0, 0.15) 2px 4px 16px 0px !important;
}

.status-badge.completed {
    background: #f0f0f0 !important;
    color: var(--zalora-text) !important;
}