/* =========================================================================
   DASHBOARD REDESIGN — "Vercel / Linear" style
   Berlaku HANYA di dalam .ds-dashboard-shell (area Dashboard Akun & Seller
   Center), jadi tidak menyentuh tampilan halaman publik/marketplace lain.
   Skala warna netral (zinc), 1 warna aksen, radius kecil, shadow tipis,
   tipografi rapat dan presisi, angka pakai font mono.
   ========================================================================= */

.ds-dashboard-shell {
	--v-bg: #fafafa;
	--v-surface: #ffffff;
	--v-surface-2: #f6f6f7;
	--v-border: #e6e6e9;
	--v-border-soft: #efeff1;
	--v-text: #16161a;
	--v-text-2: #52525b;
	--v-text-3: #94949c;
	--v-accent: #4f46e5;
	--v-accent-2: #4338ca;
	--v-accent-soft: rgba(79, 70, 229, .08);
	--v-success: #16803c;
	--v-success-soft: rgba(22, 128, 60, .1);
	--v-warning: #b45309;
	--v-warning-soft: rgba(180, 83, 9, .1);
	--v-danger: #b91c1c;
	--v-danger-soft: rgba(185, 28, 28, .1);
	--v-info: #0e7490;
	--v-info-soft: rgba(14, 116, 144, .1);
	--v-radius: 10px;
	--v-radius-sm: 7px;
	--v-radius-lg: 14px;
	--v-shadow: 0 1px 2px rgba(20, 20, 24, .04);
	--v-shadow-md: 0 4px 16px -4px rgba(20, 20, 24, .08);
	--v-font: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--v-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	background: var(--v-bg);
	font-family: var(--v-font);
	color: var(--v-text);
	padding-top: .5rem;
	padding-bottom: 2rem;
}
[data-bs-theme="dark"] .ds-dashboard-shell {
	--v-bg: #0a0a0b;
	--v-surface: #121214;
	--v-surface-2: #18181b;
	--v-border: #27272a;
	--v-border-soft: #212124;
	--v-text: #f4f4f5;
	--v-text-2: #a1a1aa;
	--v-text-3: #6b6b74;
	--v-accent: #818cf8;
	--v-accent-2: #a5b4fc;
	--v-accent-soft: rgba(129, 140, 248, .14);
	--v-success: #4ade80;
	--v-success-soft: rgba(74, 222, 128, .14);
	--v-warning: #fbbf24;
	--v-warning-soft: rgba(251, 191, 36, .14);
	--v-danger: #f87171;
	--v-danger-soft: rgba(248, 113, 113, .14);
	--v-info: #22d3ee;
	--v-info-soft: rgba(34, 211, 238, .14);
	--v-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	--v-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .55);
}

.ds-dashboard-shell, .ds-dashboard-shell * { letter-spacing: -.011em; }
.ds-dashboard-shell code, .ds-dashboard-shell .ds-mono { letter-spacing: 0; }

/* =========================================================================
   1. LAYOUT SHELL
   ========================================================================= */
.ds-dashboard-shell.py-4 { padding-top: 1.25rem !important; }
/* PENTING: sengaja TIDAK ada override max-width di sini. Dashboard & Seller
   Center harus memakai lebar .container bawaan Bootstrap yang sama persis
   dengan header/footer/halaman publik lain, supaya tepi kiri-kanan konten
   selalu sejajar dengan navbar di semua breakpoint (tidak menjorok/tidak
   lebih sempit dari halaman lain). */

/* =========================================================================
   2. SIDEBAR
   ========================================================================= */
.ds-dashboard-shell .ds-dash-sidebar {
	background: var(--v-surface);
	border: 1px solid var(--v-border);
	border-radius: var(--v-radius-lg);
	box-shadow: var(--v-shadow);
	padding: 0;
	overflow: hidden;
}
/* PENTING: "position: sticky" HANYA untuk desktop (>=992px). Elemen ini juga
   memakai class Bootstrap ".offcanvas-lg", yang di layar mobile (<992px) WAJIB
   "position: fixed" (dikeluarkan dari alur dokumen, disembunyikan off-canvas
   via transform+visibility:hidden). Karena selector 2-class di atas lebih
   spesifik dari ".offcanvas-lg" milik Bootstrap, kalau "position: sticky"
   tidak dibatasi @media, aturan ini MENIMPA "position: fixed" Bootstrap di
   mobile juga -> panel offcanvas yang "visibility:hidden" tetap ikut alur
   dokumen dan memakan tinggi penuh (seluruh menu akun), menyebabkan area
   kosong besar di atas konten sebelum breadcrumb. Dibatasi ke desktop saja
   supaya perilaku offcanvas mobile bawaan Bootstrap tidak terganggu. */
@media (min-width: 992px) {
	.ds-dashboard-shell .ds-dash-sidebar {
		position: sticky;
		top: 84px;
	}
}

/* --- user card di puncak sidebar --- */
.ds-dashboard-shell .ds-dash-profile {
	text-align: left;
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: 1rem 1.1rem;
	border-bottom: 1px solid var(--v-border-soft);
	margin-bottom: .5rem;
	background: var(--v-surface-2);
}
.ds-dashboard-shell .ds-dash-profile img {
	width: 38px; height: 38px; border-radius: 9px;
	box-shadow: none; border: 1px solid var(--v-border);
	object-fit: cover; flex: none;
}
/* Wrapper nama+email: dipaksa jadi kolom (nama di atas, email di bawah) &
   diberi min-width:0 supaya ellipsis truncation bekerja saat teks panjang,
   bukan malah mendorong keluar/tumpang tindih dengan avatar. */
.ds-dashboard-shell .ds-dash-profile-info {
	display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto;
}
.ds-dashboard-shell .ds-dash-profile .fw-bold {
	font-size: .86rem; font-weight: 600; color: var(--v-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-dashboard-shell .ds-dash-profile .small.text-muted {
	font-size: .74rem; color: var(--v-text-3); font-weight: 500;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- versi toko (Seller Center) --- */
.ds-dashboard-shell .ds-dash-profile--store {
	flex-direction: column; align-items: flex-start; text-align: left;
	padding: 0 0 1rem;
}
.ds-dashboard-shell .ds-dash-store-banner {
	width: 100%; height: 52px; border-radius: 0;
	background: var(--v-accent-soft) !important;
	margin-bottom: 26px; position: relative;
	border-bottom: 1px solid var(--v-border-soft);
}
.ds-dashboard-shell .ds-dash-store-logo {
	position: absolute; left: 1.1rem; bottom: -22px; transform: none;
	width: 44px; height: 44px; border-radius: 9px;
	border: 2px solid var(--v-surface); box-shadow: var(--v-shadow);
}
.ds-dashboard-shell .ds-dash-profile--store .fw-bold {
	padding: 0 1.1rem; font-size: .86rem; font-weight: 600;
}
.ds-dashboard-shell .ds-dash-profile--store .small.text-muted {
	padding: 0 1.1rem;
}
.ds-dashboard-shell .ds-dash-seller-badge--profile { margin: .45rem 1.1rem 0; }

.ds-dashboard-shell .ds-dash-seller-badge {
	background: var(--v-success-soft); color: var(--v-success);
	font-weight: 700; border-radius: 5px; padding: .16rem .5rem;
}
.ds-dashboard-shell .ds-dash-seller-badge i { color: var(--v-success); }

/* --- grup navigasi --- */
.ds-dashboard-shell .ds-dash-sidebar nav.nav { padding: 0 .5rem .75rem; }
.ds-dashboard-shell .ds-dash-sidebar .nav-link {
	color: var(--v-text-2); font-weight: 500; font-size: .855rem;
	border-radius: var(--v-radius-sm);
	padding: .48rem .6rem; margin: 0 0 1px; gap: .65rem;
	transition: background-color .12s ease, color .12s ease;
	position: relative;
}
.ds-dashboard-shell .ds-dash-sidebar .nav-link i {
	width: 16px; text-align: center; color: var(--v-text-3);
	font-size: .82rem; transition: color .12s ease;
}
.ds-dashboard-shell .ds-dash-sidebar .nav-link:hover {
	background: var(--v-surface-2); color: var(--v-text);
}
.ds-dashboard-shell .ds-dash-sidebar .nav-link:hover i { color: var(--v-text-2); }
.ds-dashboard-shell .ds-dash-sidebar .nav-link.active {
	background: var(--v-accent-soft); color: var(--v-accent-2);
	box-shadow: none; font-weight: 600;
}
.ds-dashboard-shell .ds-dash-sidebar .nav-link.active::before {
	content: ''; position: absolute; left: -.5rem; top: 20%; bottom: 20%;
	width: 3px; border-radius: 0 3px 3px 0; background: var(--v-accent);
}
.ds-dashboard-shell .ds-dash-sidebar .nav-link.active i { color: var(--v-accent); }

.ds-dashboard-shell .ds-dash-nav-badge {
	background: var(--v-text); color: var(--v-surface);
	font-size: .64rem; font-weight: 700; min-width: 18px; height: 18px;
}
.ds-dashboard-shell .ds-dash-sidebar .nav-link.active .ds-dash-nav-badge {
	background: var(--v-accent); color: #fff;
}
.ds-dashboard-shell .nav-link.text-danger { color: #b91c1c !important; }
.ds-dashboard-shell .nav-link.text-danger i { color: #b91c1c !important; }
.ds-dashboard-shell .nav-link.text-danger:hover { background: var(--v-danger-soft); }

.ds-dashboard-shell .ds-dash-menu-divider { background: var(--v-border-soft); margin: .6rem .6rem; }
.ds-dashboard-shell .ds-dash-menu-divider--tight { margin: .4rem .6rem; }
.ds-dashboard-shell .ds-dash-menu-label {
	padding: .9rem .8rem .35rem; font-size: .66rem; font-weight: 700;
	letter-spacing: .06em; color: var(--v-text-3);
}
.ds-dashboard-shell .ds-dash-menu-label i { color: var(--v-text-3); }

/* --- switch card (Seller Center <-> Profil Saya) --- */
.ds-dashboard-shell .ds-dash-switch-card {
	margin: .35rem .5rem .6rem; padding: .7rem .75rem;
	border-radius: var(--v-radius); gap: .65rem;
	background: var(--v-text); color: var(--v-surface);
	box-shadow: none;
}
.ds-dashboard-shell .ds-dash-switch-card:hover {
	transform: none; background: var(--v-accent-2); box-shadow: none; color: #fff;
}
.ds-dashboard-shell .ds-dash-switch-card-icon {
	width: 32px; height: 32px; border-radius: var(--v-radius-sm);
	background: rgba(255,255,255,.14); font-size: .9rem;
}
.ds-dashboard-shell .ds-dash-switch-card-label { font-size: .82rem; font-weight: 600; }
.ds-dashboard-shell .ds-dash-switch-card-sub { font-size: .7rem; }
.ds-dashboard-shell .ds-dash-switch-card-badge { background: rgba(255,255,255,.2); }
.ds-dashboard-shell .ds-dash-switch-card--muted {
	background: var(--v-surface); color: var(--v-text);
	border: 1px solid var(--v-border);
}
.ds-dashboard-shell .ds-dash-switch-card--muted:hover {
	background: var(--v-surface-2); color: var(--v-text); border-color: var(--v-border);
}
.ds-dashboard-shell .ds-dash-switch-card--muted .ds-dash-switch-card-icon {
	background: var(--v-accent-soft); color: var(--v-accent);
}
.ds-dashboard-shell .ds-dash-switch-card--muted .ds-dash-switch-card-sub { color: var(--v-text-3); }
.ds-dashboard-shell .ds-dash-switch-card--muted .ds-dash-switch-card-arrow { color: var(--v-text-3); }

@media (min-width: 992px) {
	.ds-dashboard-shell .ds-dash-sidebar.offcanvas-lg { background-color: var(--v-surface) !important; }
}
@media (max-width: 991.98px) {
	.ds-dashboard-shell .ds-dash-sidebar.offcanvas-lg { width: 300px; }
	.ds-dashboard-shell .ds-dash-sidebar .offcanvas-header {
		border-bottom: 1px solid var(--v-border-soft); padding: .9rem 1.1rem;
	}
}

/* =========================================================================
   3. BREADCRUMB (versi ringkas, khusus dashboard)
   ========================================================================= */
.ds-dashboard-shell .ds-breadcrumb-wrap { margin-bottom: 1rem; }
.ds-dashboard-shell .ds-breadcrumb-list {
	background: transparent; border: none; box-shadow: none; padding: 0; gap: .4rem;
}
.ds-dashboard-shell .ds-breadcrumb-item a,
.ds-dashboard-shell .ds-breadcrumb-item span {
	font-size: .78rem; color: var(--v-text-3); font-weight: 500;
}
.ds-dashboard-shell .ds-breadcrumb-item a i { color: var(--v-text-3); font-size: .72rem; }
.ds-dashboard-shell .ds-breadcrumb-item.active span { color: var(--v-text-2); font-weight: 500; }
.ds-dashboard-shell .ds-breadcrumb-sep { color: var(--v-text-3); font-size: .55rem; }

/* =========================================================================
   4. PAGE HEADER
   ========================================================================= */
.ds-dashboard-shell .ds-dash-page-header {
	align-items: center; margin-bottom: 1.5rem; padding-bottom: 1.15rem;
	border-bottom: 1px solid var(--v-border);
}
.ds-dashboard-shell .ds-dash-page-title { gap: .6rem; }
.ds-dashboard-shell .ds-dash-page-title h4 {
	font-size: 1.28rem; font-weight: 650; color: var(--v-text); letter-spacing: -.02em;
}
.ds-dashboard-shell .ds-dash-page-title .ds-dash-page-icon {
	width: 30px; height: 30px; border-radius: 8px;
	background: var(--v-surface-2); border: 1px solid var(--v-border);
	color: var(--v-text-2); font-size: .78rem;
}
.ds-dashboard-shell .ds-dash-page-title small { color: var(--v-text-3); }

/* Eyebrow + hero greeting (opsional, dipakai di index dashboard & seller) */
.ds-dash-hero-eyebrow {
	font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: var(--v-text-3); margin-bottom: .3rem; display: block;
}
.ds-dash-hero-title { font-size: 1.34rem; font-weight: 650; color: var(--v-text); letter-spacing: -.02em; margin: 0; }
.ds-dash-hero-sub { font-size: .86rem; color: var(--v-text-3); margin-top: .2rem; }

/* =========================================================================
   5. BUTTONS &amp; BADGES (scoped)
   ========================================================================= */
.ds-dashboard-shell .btn {
	border-radius: var(--v-radius-sm); font-weight: 550; font-size: .84rem;
	letter-spacing: -.01em; transition: background-color .12s ease, border-color .12s ease, color .12s ease;
	white-space: nowrap;
}
/* Tombol aksi di dalam tabel (mis. "Hentikan" pada Flash Sale) wajib sejajar
   satu baris — ikon & teks tidak boleh pecah jadi 2 baris walau kolom sempit. */
.ds-dashboard-shell .table .btn,
.ds-dashboard-shell td[data-label] .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .35em; white-space: nowrap;
}
.ds-dashboard-shell .btn-primary {
	background: var(--v-text); border-color: var(--v-text); color: var(--v-surface);
}
.ds-dashboard-shell .btn-primary:hover, .ds-dashboard-shell .btn-primary:focus {
	background: var(--v-accent-2); border-color: var(--v-accent-2); color: #fff;
}
.ds-dashboard-shell .btn-outline-primary {
	color: var(--v-text-2); border-color: var(--v-border); background: var(--v-surface);
}
.ds-dashboard-shell .btn-outline-primary:hover {
	background: var(--v-surface-2); color: var(--v-text); border-color: var(--v-border);
}
.ds-dashboard-shell .btn-sm { padding: .38rem .75rem; font-size: .8rem; }

.ds-dashboard-shell a.small, .ds-dashboard-shell .small > a {
	color: var(--v-accent); font-weight: 600; text-decoration: none; font-size: .8rem;
}
.ds-dashboard-shell a.small:hover { color: var(--v-accent-2); }

.ds-dashboard-shell .badge {
	font-weight: 600; font-size: .7rem; border-radius: 5px;
	padding: .32em .55em; letter-spacing: 0;
	display: inline-flex; align-items: center; gap: .35em;
}
.ds-dashboard-shell .badge::before {
	content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none;
}
.ds-dashboard-shell .badge.bg-success { background: var(--v-success-soft) !important; color: var(--v-success) !important; }
.ds-dashboard-shell .badge.bg-warning { background: var(--v-warning-soft) !important; color: var(--v-warning) !important; }
.ds-dashboard-shell .badge.bg-danger  { background: var(--v-danger-soft) !important; color: var(--v-danger) !important; }
.ds-dashboard-shell .badge.bg-info    { background: var(--v-info-soft) !important; color: var(--v-info) !important; }
.ds-dashboard-shell .badge.bg-secondary,
.ds-dashboard-shell .badge.bg-dark {
	background: var(--v-surface-2) !important; color: var(--v-text-2) !important;
	border: 1px solid var(--v-border);
}

/* =========================================================================
   6. STAT CARDS (menggantikan gaya gradient dengan gaya bordered flat)
   ========================================================================= */
.ds-dashboard-shell .ds-stat-grad,
.ds-dashboard-shell .ds-stat-card {
	background: var(--v-surface); border: 1px solid var(--v-border);
	border-radius: var(--v-radius); color: var(--v-text);
	box-shadow: none; min-height: auto; padding: 1.1rem 1.15rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ds-dashboard-shell .ds-stat-grad:hover,
.ds-dashboard-shell .ds-stat-card:hover {
	transform: none; border-color: var(--v-text-3); box-shadow: var(--v-shadow-md);
}
.ds-dashboard-shell .ds-stat-grad::before,
.ds-dashboard-shell .ds-stat-card::before { display: none; }
.ds-dashboard-shell .ds-stat-grad-bgicon { display: none; }

.ds-dashboard-shell .ds-stat-grad-icon,
.ds-dashboard-shell .ds-stat-icon {
	width: 30px; height: 30px; border-radius: 7px;
	background: var(--v-surface-2) !important; color: var(--v-text-2) !important;
	font-size: .82rem; box-shadow: none; margin-bottom: .8rem; backdrop-filter: none;
}
/* aksen warna tipis per kategori — hanya pada ikon, bukan seluruh kartu */
.ds-dashboard-shell .ds-stat-grad--blue .ds-stat-grad-icon   { background: var(--v-info-soft) !important; color: var(--v-info) !important; }
.ds-dashboard-shell .ds-stat-grad--teal .ds-stat-grad-icon   { background: var(--v-success-soft) !important; color: var(--v-success) !important; }
.ds-dashboard-shell .ds-stat-grad--orange .ds-stat-grad-icon { background: var(--v-warning-soft) !important; color: var(--v-warning) !important; }
.ds-dashboard-shell .ds-stat-grad--pink .ds-stat-grad-icon,
.ds-dashboard-shell .ds-stat-grad--purple .ds-stat-grad-icon { background: var(--v-accent-soft) !important; color: var(--v-accent) !important; }
.ds-dashboard-shell .ds-stat-grad--cyan .ds-stat-grad-icon   { background: var(--v-info-soft) !important; color: var(--v-info) !important; }
.ds-dashboard-shell .ds-stat-grad--gold .ds-stat-grad-icon   { background: var(--v-warning-soft) !important; color: var(--v-warning) !important; }

.ds-dashboard-shell .ds-stat-grad-value,
.ds-dashboard-shell .ds-stat-value {
	font-family: var(--v-mono); color: var(--v-text); font-weight: 600;
	font-size: clamp(1.2rem, 1.05rem + 1vw, 1.55rem); letter-spacing: -.01em;
}
.ds-dashboard-shell .ds-stat-grad-value--sm { font-size: clamp(.98rem, .86rem + .7vw, 1.18rem); }
.ds-dashboard-shell .ds-stat-grad-label {
	color: var(--v-text-3); font-weight: 500; font-size: .78rem; opacity: 1; margin-top: .3rem;
}
.ds-dashboard-shell .ds-stat-grad--compact { min-height: auto; padding: 1rem 1.1rem; }
.ds-dashboard-shell .ds-stat-grad--compact .ds-stat-grad-icon { width: 28px; height: 28px; margin-bottom: .7rem; font-size: .78rem; }

/* =========================================================================
   7. CARDS GENERIK &amp; TABLE
   ========================================================================= */
.ds-dashboard-shell .card {
	border: 1px solid var(--v-border); border-radius: var(--v-radius);
	box-shadow: none !important;
}
.ds-dashboard-shell .card-header {
	background: var(--v-surface); border-bottom: 1px solid var(--v-border-soft);
	padding: .95rem 1.15rem;
}
.ds-dashboard-shell .card-header h6, .ds-dashboard-shell .card-body h6 {
	font-size: .86rem; font-weight: 650; color: var(--v-text);
}
.ds-dashboard-shell .card-body { padding: 1.15rem; }
.ds-dashboard-shell .card-footer { background: var(--v-surface); border-top: 1px solid var(--v-border-soft); }

.ds-dashboard-shell .ds-table-card { box-shadow: none; border: 1px solid var(--v-border); }
.ds-dashboard-shell .ds-table-card .card-header { background: var(--v-surface); }
.ds-dashboard-shell .table thead th {
	background: var(--v-surface-2); color: var(--v-text-3);
	font-size: .68rem; font-weight: 700; letter-spacing: .05em;
	border-bottom: 1px solid var(--v-border); padding: .7rem 1.1rem;
}
.ds-dashboard-shell .table tbody td {
	padding: .7rem 1.1rem; border-color: var(--v-border-soft); font-size: .85rem; color: var(--v-text-2);
}
.ds-dashboard-shell .table tbody tr { transition: background-color .1s ease; }
.ds-dashboard-shell .table tbody tr:hover { background: var(--v-surface-2); }
.ds-dashboard-shell .table tbody td a.fw-semibold,
.ds-dashboard-shell .table tbody td.fw-semibold { color: var(--v-text); font-weight: 600 !important; }
.ds-dashboard-shell .table td[data-label="No. Order"],
.ds-dashboard-shell .table code { font-family: var(--v-mono); font-size: .78rem; }

.ds-dashboard-shell .list-group-item {
	background: transparent; border-color: var(--v-border-soft); padding: .85rem 1.15rem;
}

/* Empty state ringkas */
.ds-dashboard-shell .ds-empty {
	text-align: center; padding: 2.2rem 1rem; color: var(--v-text-3);
}
.ds-dashboard-shell .ds-empty i {
	width: 40px; height: 40px; border-radius: 50%; background: var(--v-surface-2);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1rem; color: var(--v-text-3); margin-bottom: .6rem;
}
.ds-dashboard-shell .ds-empty p { font-size: .83rem; margin: 0; }

/* alert kecil (link toko publik dll) */
.ds-dashboard-shell .alert {
	border: 1px solid var(--v-border); background: var(--v-surface-2);
	color: var(--v-text-2); border-radius: var(--v-radius); font-size: .82rem;
}
.ds-dashboard-shell .alert a { color: var(--v-accent); font-weight: 600; }

/* =========================================================================
   7B. KARTU SALDO (Saldo Saya) — pengecualian sengaja dari gaya flat di atas.
   Ini satu-satunya kartu "hero" di seluruh dashboard, jadi tetap tampil
   gradasi mewah (bukan putih polos) supaya saldo jadi elemen paling menonjol
   di halaman & tombol Tarik Dana/Top Up tetap kontras & terbaca jelas.
   ========================================================================= */
.ds-dashboard-shell .ds-wallet-hero {
	position: relative; overflow: hidden; border: none; color: #fff;
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.16), transparent 55%),
		radial-gradient(90% 120% at 0% 100%, rgba(255,255,255,.10), transparent 50%),
		linear-gradient(120deg, #312e81 0%, #4338ca 45%, #6d28d9 100%);
	box-shadow: 0 16px 36px -14px rgba(67,56,202,.55);
}
.ds-dashboard-shell .ds-wallet-hero:hover {
	border: none; box-shadow: 0 20px 42px -14px rgba(67,56,202,.62);
}
.ds-dashboard-shell .ds-wallet-hero-body,
.ds-dashboard-shell .ds-wallet-hero-actions { position: relative; z-index: 2; }
.ds-dashboard-shell .ds-wallet-hero .ds-stat-grad-bgicon {
	display: block !important; color: #fff; opacity: .14;
}
.ds-dashboard-shell .ds-wallet-hero .ds-stat-grad-icon {
	background: rgba(255,255,255,.16) !important; color: #fff !important;
	backdrop-filter: blur(3px);
}
.ds-dashboard-shell .ds-wallet-hero .ds-stat-grad-value,
.ds-dashboard-shell .ds-wallet-hero .ds-stat-grad-label {
	color: #fff !important;
}
.ds-dashboard-shell .ds-wallet-hero .ds-stat-grad-label { opacity: .82; }
.ds-dashboard-shell .ds-wallet-hero-actions { border-top-color: rgba(255,255,255,.22); }
.ds-dashboard-shell .ds-wallet-hero-btn {
	border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.14); color: #fff !important;
}
.ds-dashboard-shell .ds-wallet-hero-btn:hover,
.ds-dashboard-shell .ds-wallet-hero-btn:focus {
	background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.6); color: #fff !important;
}
.ds-dashboard-shell .ds-wallet-hero-btn--solid {
	background: #fff !important; border-color: #fff !important; color: #4338ca !important;
	box-shadow: 0 6px 16px -6px rgba(15,23,42,.35);
}
.ds-dashboard-shell .ds-wallet-hero-btn--solid:hover,
.ds-dashboard-shell .ds-wallet-hero-btn--solid:focus { background: #f5f3ff !important; color: #3730a3 !important; }

/* =========================================================================
   8. ONBOARDING GUIDE STEPS (seller — panduan tambah produk pertama)
   ========================================================================= */
.ds-dash-guide { padding: .3rem 0; }
.ds-dash-guide-steps {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1rem;
	position: relative;
}
@media (max-width: 767.98px) { .ds-dash-guide-steps { grid-template-columns: 1fr; } }
.ds-dash-guide-step { display: flex; gap: .7rem; }
.ds-dash-guide-step-num {
	width: 24px; height: 24px; border-radius: 50%; flex: none;
	background: var(--v-text); color: var(--v-surface);
	display: flex; align-items: center; justify-content: center;
	font-size: .72rem; font-weight: 700;
}
.ds-dash-guide-step-title { font-weight: 650; font-size: .84rem; color: var(--v-text); display: block; }
.ds-dash-guide-step-desc { font-size: .78rem; color: var(--v-text-3); margin: .15rem 0 0; line-height: 1.45; }

/* =========================================================================
   9. QUICK STAT BAR (opsional — dipakai di header hero jika diaktifkan)
   ========================================================================= */
.ds-dash-hero-card {
	background: var(--v-surface); border: 1px solid var(--v-border);
	border-radius: var(--v-radius-lg); padding: 1.25rem 1.4rem; margin-bottom: 1.5rem;
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.ds-dash-hero-avatar {
	width: 44px; height: 44px; border-radius: 10px; object-fit: cover;
	border: 1px solid var(--v-border); flex: none;
}
.ds-dash-hero-left { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.ds-dash-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* =========================================================================
   10. RESPONSIVE FINE-TUNE
   ========================================================================= */
@media (max-width: 767.98px) {
	.ds-dashboard-shell .ds-dash-page-header { margin-bottom: 1.1rem; padding-bottom: .9rem; }
	.ds-dashboard-shell .ds-stat-grad, .ds-dashboard-shell .ds-stat-card { padding: .9rem 1rem; }
	.ds-dashboard-shell .ds-table-mobile-cards tr { border-color: var(--v-border); box-shadow: none; }
}