/* =========================================================================
   Premium Vendor Dashboard — Singair Mart  (.vd-* namespace)
   App-shell layout: fixed left sidebar, sticky topbar, main + right columns.
   Matches the seller-dashboard mockup. Mobile-first responsive.
   ========================================================================= */

:root {
	--vd-primary:    var(--singair-primary, #ff6a21);
	--vd-ink:        #111827;
	--vd-muted:      #6b7280;
	--vd-faint:      #9ca3af;
	--vd-line:       #eef0f3;
	--vd-border:     1px solid #e5e7eb;
	--vd-bg:         #f7f8fa;
	--vd-surface:    #ffffff;
	--vd-radius:     14px;
	--vd-radius-sm:  10px;
	--vd-radius-xs:  8px;
	--vd-shadow:     0 1px 3px rgba(17, 24, 39, .06), 0 1px 2px rgba(17, 24, 39, .04);
	--vd-shadow-lg:  0 12px 40px rgba(17, 24, 39, .12);
	--vd-transition: .18s ease;
	--vd-sidebar-w:  266px;
	--vd-green:      #16a34a;
	--vd-red:        #dc2626;

	--vd-c-orange:   #ff6a21;
	--vd-c-green:    #22c55e;
	--vd-c-blue:     #3b82f6;
	--vd-c-purple:   #a855f7;
	--vd-c-amber:    #f59e0b;
	--vd-c-slate:    #64748b;
}

/* ── Break the app out of the theme's centered container ─────────────────── */
.singair-vendor-dashboard-page .singair-container {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
.singair-vendor-dashboard-page .singair-breadcrumb,
.singair-vendor-dashboard-page .woocommerce-breadcrumb { display: none !important; }
.singair-vendor-dashboard-page .singair-main { padding: 0 !important; }

/* ── Standalone full-screen shell (dedicated template, no storefront chrome) ─ */
body.vd-standalone { margin: 0; background: var(--vd-bg); }
body.vd-standalone .vd-app { min-height: 100vh; }

/* Sit the sticky sidebar/topbar below the WordPress admin bar. */
.admin-bar .vd-sidebar { top: 32px; height: calc(100vh - 32px); }
.admin-bar .vd-topbar  { top: 32px; }
body.vd-standalone.admin-bar .vd-app { min-height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
	.admin-bar .vd-sidebar { top: 46px; height: calc(100vh - 46px); }
	.admin-bar .vd-topbar  { top: 46px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════════════════════════════════════════ */
.vd-app {
	display: grid;
	grid-template-columns: var(--vd-sidebar-w) minmax(0, 1fr);
	background: var(--vd-bg);
	color: var(--vd-ink);
	min-height: 100vh;
	font-size: 14px;
	line-height: 1.5;
}
.vd-app * { box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════════════════
   LEFT SIDEBAR
   ══════════════════════════════════════════════════════════════════════════ */
.vd-sidebar {
	grid-row: 1 / -1;
	background: var(--vd-surface);
	border-right: var(--vd-border);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}
.vd-sidebar__scroll {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
}
.vd-sidebar__scroll::-webkit-scrollbar { width: 6px; }
.vd-sidebar__scroll::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }

/* Brand */
.vd-brand {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: 1.15rem 1.25rem;
	border-bottom: var(--vd-border);
}
.vd-brand__logo {
	width: 40px; height: 40px; flex-shrink: 0;
	border-radius: 11px;
	background: linear-gradient(135deg, #ff8a4c, var(--vd-primary));
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 1.15rem;
	box-shadow: 0 4px 12px rgba(255, 106, 33, .35);
}
.vd-brand__name { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.vd-brand__name span { color: var(--vd-primary); }
.vd-brand__sub { font-size: .68rem; color: var(--vd-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Profile card */
.vd-vprofile {
	margin: 1rem 1rem 0;
	padding: 1rem;
	border: var(--vd-border);
	border-radius: var(--vd-radius-sm);
	background: linear-gradient(180deg, #fff, #fcfcfd);
}
.vd-vprofile__top { display: flex; align-items: center; gap: .7rem; }
.vd-vprofile__avatar {
	width: 46px; height: 46px; flex-shrink: 0;
	border-radius: 11px; object-fit: cover;
	background: #111827; color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: .95rem;
}
.vd-vprofile__id { min-width: 0; }
.vd-vprofile__name {
	display: flex; align-items: center; gap: .3rem;
	font-weight: 700; font-size: .9rem;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vd-vprofile__verify { color: var(--vd-c-blue); font-size: .75rem; }
.vd-vprofile__email {
	font-size: .74rem; color: var(--vd-muted);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vd-vprofile__rating {
	display: flex; align-items: center; gap: .35rem;
	margin-top: .6rem; font-size: .78rem; font-weight: 600;
}
.vd-vprofile__rating i { color: #f5b400; }
.vd-vprofile__rating small { color: var(--vd-muted); font-weight: 500; }
.vd-vprofile__status {
	margin-top: .5rem; display: inline-flex; align-items: center; gap: .3rem;
	font-size: .68rem; font-weight: 700; text-transform: capitalize;
	padding: .15rem .5rem; border-radius: 999px;
}
.vd-vprofile__status--active    { background: #dcfce7; color: #15803d; }
.vd-vprofile__status--pending   { background: #fef9c3; color: #854d0e; }
.vd-vprofile__status--suspended { background: #fee2e2; color: #991b1b; }

/* Navigation */
.vd-nav { padding: .85rem .75rem 0; }
.vd-nav__item {
	display: flex; align-items: center; gap: .75rem;
	padding: .6rem .7rem; margin-bottom: 2px;
	border-radius: var(--vd-radius-xs);
	color: #374151; font-weight: 500; font-size: .875rem;
	position: relative;
	transition: background var(--vd-transition), color var(--vd-transition);
}
.vd-nav__item:hover { background: #f5f6f8; color: var(--vd-ink); }
.vd-nav__item i { width: 18px; text-align: center; font-size: .95rem; color: var(--vd-faint); transition: color var(--vd-transition); }
.vd-nav__item:hover i { color: var(--vd-primary); }
.vd-nav__item.is-active {
	background: linear-gradient(90deg, rgba(255, 106, 33, .12), rgba(255, 106, 33, .04));
	color: var(--vd-primary); font-weight: 600;
}
.vd-nav__item.is-active i { color: var(--vd-primary); }
.vd-nav__item.is-active::before {
	content: ""; position: absolute; left: -.75rem; top: 50%; transform: translateY(-50%);
	width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--vd-primary);
}
.vd-nav__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-nav__badge {
	min-width: 20px; height: 20px; padding: 0 6px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--vd-primary); color: #fff;
	font-size: .68rem; font-weight: 700; border-radius: 999px;
}
.vd-nav__pill {
	font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
	color: var(--vd-c-green); background: #dcfce7; padding: .1rem .4rem; border-radius: 5px;
}
.vd-nav__item--logout { color: var(--vd-red); margin-top: .35rem; }
.vd-nav__item--logout i { color: var(--vd-red); }
.vd-nav__divider { height: 1px; background: var(--vd-line); margin: .6rem .3rem; }

/* Support card */
.vd-support {
	margin: 1rem; padding: 1rem;
	border-radius: var(--vd-radius-sm);
	background: linear-gradient(160deg, #fff5ef, #fff);
	border: 1px solid #ffe0cc; text-align: center;
}
.vd-support__icon {
	width: 40px; height: 40px; margin: 0 auto .55rem;
	border-radius: 50%; background: #fff;
	display: flex; align-items: center; justify-content: center;
	color: var(--vd-primary); font-size: 1.05rem;
	box-shadow: var(--vd-shadow);
}
.vd-support__title { font-weight: 700; font-size: .85rem; margin: 0 0 .15rem; }
.vd-support__text { font-size: .74rem; color: var(--vd-muted); margin: 0 0 .75rem; }
.vd-support__btns { display: grid; gap: .4rem; }

/* ══════════════════════════════════════════════════════════════════════════
   CONTENT COLUMN (topbar + body)
   ══════════════════════════════════════════════════════════════════════════ */
.vd-content { display: flex; flex-direction: column; min-width: 0; }

/* Topbar */
.vd-topbar {
	position: sticky; top: 0; z-index: 40;
	display: flex; align-items: center; gap: 1rem;
	padding: .8rem 1.5rem;
	background: rgba(255, 255, 255, .85);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: var(--vd-border);
}
.vd-hamburger {
	display: none; width: 40px; height: 40px; flex-shrink: 0;
	border: var(--vd-border); border-radius: var(--vd-radius-xs);
	background: #fff; color: var(--vd-ink); cursor: pointer; font-size: 1rem;
}
.vd-search { flex: 1; max-width: 460px; position: relative; }
.vd-search__input {
	width: 100%; height: 42px; padding: 0 3.5rem 0 2.6rem;
	border: var(--vd-border); border-radius: var(--vd-radius-sm);
	background: #f7f8fa; font-size: .875rem; color: var(--vd-ink);
	transition: border-color var(--vd-transition), background var(--vd-transition);
}
.vd-search__input:focus { outline: none; border-color: var(--vd-primary); background: #fff; }
.vd-search__icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--vd-faint); }
.vd-search__kbd {
	position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
	font-size: .68rem; color: var(--vd-muted); background: #fff;
	border: var(--vd-border); border-radius: 6px; padding: .12rem .4rem; font-weight: 600;
}
.vd-topbar__spacer { flex: 1; }
.vd-topbar__actions { display: flex; align-items: center; gap: .6rem; }

.vd-btn-store {
	display: inline-flex; align-items: center; gap: .45rem;
	height: 40px; padding: 0 1rem;
	border: 1px solid var(--vd-primary); border-radius: var(--vd-radius-sm);
	color: var(--vd-primary); font-weight: 600; font-size: .82rem;
	background: #fff; transition: background var(--vd-transition), color var(--vd-transition);
}
.vd-btn-store:hover { background: var(--vd-primary); color: #fff; }

.vd-iconbtn {
	position: relative; width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	border: var(--vd-border); border-radius: var(--vd-radius-sm);
	background: #fff; color: #4b5563; cursor: pointer; font-size: 1rem;
	transition: border-color var(--vd-transition), color var(--vd-transition);
}
.vd-iconbtn:hover { border-color: var(--vd-primary); color: var(--vd-primary); }
.vd-iconbtn__dot {
	position: absolute; top: -6px; right: -6px;
	min-width: 18px; height: 18px; padding: 0 5px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--vd-primary); color: #fff;
	font-size: .62rem; font-weight: 700; border-radius: 999px; border: 2px solid #fff;
}
.vd-topbar__profile {
	display: flex; align-items: center; gap: .6rem;
	padding: .3rem .6rem .3rem .3rem;
	border: var(--vd-border); border-radius: var(--vd-radius-sm); cursor: pointer;
	transition: border-color var(--vd-transition);
}
.vd-topbar__profile:hover { border-color: var(--vd-primary); }
.vd-topbar__profile-av {
	width: 34px; height: 34px; border-radius: 9px; object-fit: cover;
	background: #111827; color: #fff; display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: .8rem;
}
.vd-topbar__profile-meta { line-height: 1.15; }
.vd-topbar__profile-name { font-size: .82rem; font-weight: 700; }
.vd-topbar__profile-role { font-size: .68rem; color: var(--vd-muted); }
.vd-topbar__profile i { color: var(--vd-faint); font-size: .7rem; }

/* Body */
.vd-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }

/* Welcome */
.vd-welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vd-welcome__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .2rem; }
.vd-welcome__title .wave { display: inline-block; }
.vd-welcome__sub { color: var(--vd-muted); margin: 0; font-size: .9rem; }
.vd-daterange {
	display: inline-flex; align-items: center; gap: .6rem;
	height: 44px; padding: 0 1rem; background: #fff;
	border: var(--vd-border); border-radius: var(--vd-radius-sm);
	font-weight: 600; font-size: .82rem; cursor: pointer;
}
.vd-daterange i:first-child { color: var(--vd-primary); }
.vd-daterange i:last-child { color: var(--vd-faint); font-size: .7rem; }

/* ── Card base ─────────────────────────────────────────────────────────── */
.vd-card {
	background: var(--vd-surface);
	border: var(--vd-border);
	border-radius: var(--vd-radius);
	box-shadow: var(--vd-shadow);
}
.vd-card__head {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.15rem 1.25rem; border-bottom: var(--vd-line) solid 1px;
}
.vd-card__title { font-size: 1rem; font-weight: 700; margin: 0; }
.vd-card__link { color: var(--vd-primary); font-weight: 600; font-size: .8rem; }
.vd-card__link:hover { text-decoration: underline; }
.vd-card__body { padding: 1.25rem; }

/* ══════════════════════════════════════════════════════════════════════════
   STAT CARDS
   ══════════════════════════════════════════════════════════════════════════ */
.vd-stats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem;
}
.vd-stat {
	background: var(--vd-surface); border: var(--vd-border);
	border-radius: var(--vd-radius); padding: 1.15rem;
	display: flex; flex-direction: column; gap: .7rem;
	box-shadow: var(--vd-shadow);
	transition: transform var(--vd-transition), box-shadow var(--vd-transition);
}
.vd-stat:hover { transform: translateY(-3px); box-shadow: var(--vd-shadow-lg); }
.vd-stat__top { display: flex; align-items: center; justify-content: space-between; }
.vd-stat__icon {
	width: 46px; height: 46px; border-radius: 12px;
	display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.vd-stat__label { font-size: .8rem; color: var(--vd-muted); font-weight: 500; }
.vd-stat__value { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.vd-stat__foot { display: flex; align-items: center; gap: .4rem; font-size: .76rem; }
.vd-stat__delta { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; }
.vd-stat__delta--up   { color: var(--vd-green); }
.vd-stat__delta--down { color: var(--vd-red); }
.vd-stat__delta--flat { color: var(--vd-muted); }
.vd-stat__period { color: var(--vd-faint); }

/* Accent tints */
.vd-tint-orange { background: #fff1e9; color: #ea580c; }
.vd-tint-green  { background: #dcfce7; color: #16a34a; }
.vd-tint-blue   { background: #dbeafe; color: #2563eb; }
.vd-tint-purple { background: #f3e8ff; color: #9333ea; }
.vd-tint-amber  { background: #fef3c7; color: #d97706; }
.vd-tint-slate  { background: #eef2f7; color: #475569; }

/* ══════════════════════════════════════════════════════════════════════════
   COLUMNS (main + right)
   ══════════════════════════════════════════════════════════════════════════ */
.vd-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 1.5rem;
	align-items: start;
}
.vd-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.vd-side { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

/* ── Chart (Sales Overview) ────────────────────────────────────────────── */
.vd-chart__legend { display: flex; align-items: center; gap: 1rem; }
.vd-chart__legend span { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--vd-muted); font-weight: 600; }
.vd-chart__legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.vd-chart__legend .dot--this { background: var(--vd-primary); }
.vd-chart__legend .dot--last { background: #d1d5db; }
.vd-chart__tools { display: flex; align-items: center; gap: .6rem; }
.vd-select {
	height: 36px; padding: 0 .7rem; border: var(--vd-border);
	border-radius: var(--vd-radius-xs); background: #fff; font-weight: 600; font-size: .8rem; cursor: pointer;
}
.vd-chart__wrap { position: relative; padding: 1.25rem; }
.vd-chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.vd-chart__area { transition: opacity var(--vd-transition); }
.vd-chart__tooltip {
	position: absolute; pointer-events: none; opacity: 0;
	transform: translate(-50%, -110%); transition: opacity .12s ease;
	background: #fff; border: var(--vd-border); border-radius: var(--vd-radius-xs);
	box-shadow: var(--vd-shadow-lg); padding: .6rem .75rem; min-width: 150px; z-index: 5;
}
.vd-chart__tooltip.is-visible { opacity: 1; }
.vd-chart__tt-date { font-size: .72rem; color: var(--vd-muted); margin-bottom: .35rem; font-weight: 600; }
.vd-chart__tt-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .8rem; }
.vd-chart__tt-row .k { display: inline-flex; align-items: center; gap: .35rem; color: var(--vd-muted); }
.vd-chart__tt-row .k .dot { width: 8px; height: 8px; border-radius: 50%; }
.vd-chart__tt-row .v { font-weight: 700; }
.vd-chart__dot { transition: opacity var(--vd-transition); }
.vd-chart__empty, .vd-empty {
	padding: 2.5rem 1rem; text-align: center; color: var(--vd-muted);
}
.vd-empty i { font-size: 1.6rem; color: var(--vd-faint); margin-bottom: .5rem; display: block; }

/* ── Recent Orders table ───────────────────────────────────────────────── */
.vd-orders__wrap { overflow-x: auto; }
.vd-orders-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.vd-orders-table thead th {
	text-align: left; padding: .8rem 1.25rem; color: var(--vd-muted);
	font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
	border-bottom: var(--vd-line) solid 1px; white-space: nowrap;
}
.vd-orders-table tbody td { padding: .85rem 1.25rem; border-bottom: var(--vd-line) solid 1px; vertical-align: middle; }
.vd-orders-table tbody tr:last-child td { border-bottom: 0; }
.vd-orders-table tbody tr { transition: background var(--vd-transition); }
.vd-orders-table tbody tr:hover { background: #fafafa; }
.vd-order-id { font-weight: 700; color: var(--vd-ink); background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.vd-order-id:hover { color: var(--vd-primary); text-decoration: underline; }
.vd-order-cust { display: inline-flex; align-items: center; gap: .5rem; }
.vd-order-cust__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.vd-order-cust__name { font-weight: 500; white-space: nowrap; }
.vd-order-thumbs { display: inline-flex; align-items: center; }
.vd-order-thumb {
	width: 30px; height: 30px; border-radius: 7px; object-fit: cover;
	border: 2px solid #fff; margin-left: -8px; background: #f3f4f6;
}
.vd-order-thumb:first-child { margin-left: 0; }
.vd-order-thumb-more { font-size: .72rem; color: var(--vd-muted); margin-left: .35rem; font-weight: 600; }
.vd-order-amount { font-weight: 700; white-space: nowrap; }
.vd-order-date { color: var(--vd-muted); white-space: nowrap; }
.vd-icon-btn {
	width: 32px; height: 32px; border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	border: var(--vd-border); background: #fff; color: var(--vd-muted);
	transition: border-color var(--vd-transition), color var(--vd-transition);
}
.vd-icon-btn:hover { border-color: var(--vd-primary); color: var(--vd-primary); }
.vd-orders__empty-cell { text-align: center; color: var(--vd-muted); padding: 2.5rem 1rem !important; }

/* Status badges */
.vd-badge {
	display: inline-flex; align-items: center; gap: .3rem;
	padding: .22rem .6rem; border-radius: 999px;
	font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.vd-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vd-badge--pending    { background: #fef9c3; color: #a16207; }
.vd-badge--processing { background: #ffedd5; color: #c2410c; }
.vd-badge--packed     { background: #e0e7ff; color: #4338ca; }
.vd-badge--shipped    { background: #dbeafe; color: #1d4ed8; }
.vd-badge--delivered  { background: #dcfce7; color: #15803d; }
.vd-badge--completed  { background: #dcfce7; color: #15803d; }
.vd-badge--cancelled  { background: #fee2e2; color: #b91c1c; }
.vd-badge--refunded   { background: #f3f4f6; color: #4b5563; }

/* ── Pagination + toolbar ──────────────────────────────────────────────── */
.vd-orders__toolbar { display: flex; align-items: center; gap: .6rem; }
.vd-orders__filter {
	height: 34px; padding: 0 .6rem; border: var(--vd-border);
	border-radius: var(--vd-radius-xs); background: #fff; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.vd-pagination { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: 1rem; }
.vd-page-btn {
	min-width: 34px; height: 34px; padding: 0 .5rem;
	border: var(--vd-border); border-radius: 8px; background: #fff;
	font-weight: 600; font-size: .82rem; color: var(--vd-ink); cursor: pointer;
	transition: all var(--vd-transition);
}
.vd-page-btn:hover:not(:disabled) { border-color: var(--vd-primary); color: var(--vd-primary); }
.vd-page-btn.is-active { background: var(--vd-primary); border-color: var(--vd-primary); color: #fff; }
.vd-page-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Quick actions ─────────────────────────────────────────────────────── */
.vd-quick-grid {
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; padding: 1.25rem;
}
.vd-quick {
	display: flex; flex-direction: column; align-items: center; gap: .6rem;
	padding: 1.15rem .75rem; border-radius: var(--vd-radius-sm);
	border: var(--vd-border); background: #fff; text-align: center;
	transition: transform var(--vd-transition), box-shadow var(--vd-transition), border-color var(--vd-transition);
}
.vd-quick:hover { transform: translateY(-3px); box-shadow: var(--vd-shadow-lg); border-color: transparent; }
.vd-quick__icon {
	width: 48px; height: 48px; border-radius: 13px;
	display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.vd-quick__label { font-size: .78rem; font-weight: 600; color: #374151; line-height: 1.25; }

/* ══════════════════════════════════════════════════════════════════════════
   RIGHT SIDEBAR CARDS
   ══════════════════════════════════════════════════════════════════════════ */

/* Sales by channel (donut) */
.vd-donut__wrap { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 1.25rem; }
.vd-donut { position: relative; width: 168px; height: 168px; }
.vd-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vd-donut__seg { transition: stroke-width var(--vd-transition), opacity var(--vd-transition); cursor: pointer; }
.vd-donut__seg:hover { opacity: .85; }
.vd-donut__center {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center;
}
.vd-donut__total { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.vd-donut__cap { font-size: .68rem; color: var(--vd-muted); }
.vd-channels { width: 100%; display: flex; flex-direction: column; gap: .7rem; }
.vd-channel { display: flex; align-items: center; gap: .6rem; font-size: .82rem; }
.vd-channel__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.vd-channel__name { flex: 1; font-weight: 500; }
.vd-channel__pct { font-weight: 700; }
.vd-channel__val { color: var(--vd-muted); min-width: 74px; text-align: right; }

/* Store performance */
.vd-perf { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.25rem; }
.vd-perf__row { display: grid; grid-template-columns: 1fr auto 84px; align-items: center; gap: .75rem; }
.vd-perf__label { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 500; }
.vd-perf__label i { color: var(--vd-c-green); }
.vd-perf__value { font-weight: 800; font-size: .9rem; }
.vd-perf__spark { width: 84px; height: 28px; }

/* Announcements */
.vd-annc { display: flex; flex-direction: column; }
.vd-annc__item {
	display: flex; gap: .8rem; padding: 1rem 1.25rem;
	border-bottom: var(--vd-line) solid 1px;
}
.vd-annc__item:last-child { border-bottom: 0; }
.vd-annc__icon {
	width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
	display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.vd-annc__body { min-width: 0; }
.vd-annc__title { font-weight: 700; font-size: .84rem; margin: 0 0 .15rem; }
.vd-annc__text { font-size: .76rem; color: var(--vd-muted); margin: 0 0 .3rem; line-height: 1.4; }
.vd-annc__date { font-size: .7rem; color: var(--vd-faint); }
.vd-annc__prio {
	margin-left: auto; align-self: flex-start; font-size: .6rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: .03em; padding: .12rem .4rem; border-radius: 5px;
}
.vd-annc__prio--high { background: #fee2e2; color: #b91c1c; }
.vd-annc__prio--info { background: #dbeafe; color: #1d4ed8; }
.vd-annc__prio--success { background: #dcfce7; color: #15803d; }

/* Wallet */
.vd-wallet { padding: 1.25rem; }
.vd-wallet__card {
	background: linear-gradient(135deg, #111827, #1f2937);
	border-radius: var(--vd-radius); padding: 1.25rem; color: #fff; position: relative; overflow: hidden;
}
.vd-wallet__card::after {
	content: ""; position: absolute; right: -30px; top: -30px;
	width: 120px; height: 120px; border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 106, 33, .5), transparent 70%);
}
.vd-wallet__top { display: flex; align-items: center; justify-content: space-between; position: relative; }
.vd-wallet__cap { font-size: .74rem; opacity: .8; }
.vd-wallet__chip { width: 34px; height: 26px; border-radius: 5px; background: linear-gradient(135deg, #ffd479, #f0a020); }
.vd-wallet__balance { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; margin: .35rem 0 .9rem; }
.vd-wallet__meta { display: flex; gap: 1.25rem; font-size: .74rem; }
.vd-wallet__meta div span { display: block; opacity: .7; }
.vd-wallet__meta div strong { font-size: .9rem; }
.vd-wallet__actions { display: grid; grid-template-columns: 1fr auto; gap: .6rem; margin-top: 1rem; }
.vd-wallet__latest { margin-top: .9rem; font-size: .74rem; color: var(--vd-muted); display: flex; align-items: center; gap: .4rem; }
.vd-wallet__latest i { color: var(--vd-green); }

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */
.vd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
	height: 40px; padding: 0 1rem; border-radius: var(--vd-radius-sm);
	font-weight: 600; font-size: .82rem; cursor: pointer; border: var(--vd-border);
	background: #fff; color: var(--vd-ink);
	transition: background var(--vd-transition), border-color var(--vd-transition), transform var(--vd-transition);
}
.vd-btn:hover { transform: translateY(-1px); }
.vd-btn--primary { background: var(--vd-primary); border-color: var(--vd-primary); color: #fff; }
.vd-btn--primary:hover { background: #e85d13; }
.vd-btn--ghost { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
.vd-btn--sm { height: 34px; padding: 0 .8rem; font-size: .78rem; }
.vd-btn--block { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   COMMAND / SEARCH PALETTE
   ══════════════════════════════════════════════════════════════════════════ */
.vd-palette {
	position: fixed; inset: 0; z-index: 1000; display: none;
	align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem;
	background: rgba(17, 24, 39, .45); backdrop-filter: blur(2px);
}
.vd-palette.is-open { display: flex; }
.vd-palette__box {
	width: 100%; max-width: 560px; background: #fff;
	border-radius: var(--vd-radius); box-shadow: var(--vd-shadow-lg); overflow: hidden;
}
.vd-palette__input {
	width: 100%; height: 56px; border: 0; border-bottom: var(--vd-line) solid 1px;
	padding: 0 1.25rem; font-size: 1rem; outline: none;
}
.vd-palette__list { max-height: 320px; overflow-y: auto; padding: .5rem; }
.vd-palette__item {
	display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem;
	border-radius: var(--vd-radius-xs); cursor: pointer; font-size: .875rem;
}
.vd-palette__item:hover, .vd-palette__item.is-active { background: #f5f6f8; }
.vd-palette__item i { color: var(--vd-faint); width: 18px; text-align: center; }
.vd-palette__empty { padding: 1.5rem; text-align: center; color: var(--vd-muted); font-size: .85rem; }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.vd-toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1100; display: flex; flex-direction: column; gap: .6rem; }
.vd-toast {
	display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem;
	background: #111827; color: #fff; border-radius: var(--vd-radius-sm);
	box-shadow: var(--vd-shadow-lg); font-size: .84rem; font-weight: 500;
	opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease;
}
.vd-toast.is-visible { opacity: 1; transform: translateY(0); }
.vd-toast i { color: var(--vd-c-green); }

/* ── Skeleton loading ──────────────────────────────────────────────────── */
.vd-skeleton { position: relative; overflow: hidden; background: #eef0f3; border-radius: 6px; }
.vd-skeleton::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
	transform: translateX(-100%); animation: vd-shimmer 1.3s infinite;
}
@keyframes vd-shimmer { 100% { transform: translateX(100%); } }
.vd-is-loading { opacity: .55; pointer-events: none; }

/* Overlay for drawer */
.vd-overlay {
	position: fixed; inset: 0; z-index: 45; background: rgba(17, 24, 39, .5);
	opacity: 0; visibility: hidden; transition: opacity var(--vd-transition);
}
.vd-overlay.is-open { opacity: 1; visibility: visible; }

/* ══════════════════════════════════════════════════════════════════════════
   TAB VIEWS
   ══════════════════════════════════════════════════════════════════════════ */
.vd-tab { display: flex; flex-direction: column; gap: 1.5rem; }
.vd-tab__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vd-tab__title { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .2rem; }
.vd-tab__sub { color: var(--vd-muted); margin: 0; font-size: .88rem; }

.vd-analytics-grid,
.vd-withdraw-grid,
.vd-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) {
	.vd-analytics-grid, .vd-withdraw-grid, .vd-settings-grid { grid-template-columns: 1fr; }
}

/* Forms */
.vd-form { display: flex; flex-direction: column; gap: 1rem; }
.vd-field { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; font-weight: 600; color: #374151; }
.vd-input {
	width: 100%; height: 42px; padding: 0 .85rem;
	border: var(--vd-border); border-radius: var(--vd-radius-sm);
	background: #fff; font-size: .875rem; color: var(--vd-ink); font-weight: 400;
	transition: border-color var(--vd-transition);
}
textarea.vd-input { height: auto; padding: .6rem .85rem; resize: vertical; }
.vd-input:focus { outline: none; border-color: var(--vd-primary); }

/* Performance bar (analytics) */
.vd-perf__bar { width: 84px; height: 7px; border-radius: 4px; background: #eef0f3; overflow: hidden; }
.vd-perf__bar span { display: block; height: 100%; border-radius: 4px; }

/* Reviews */
.vd-reviews { display: flex; flex-direction: column; }
.vd-review { padding: 1.25rem; border-bottom: var(--vd-line) solid 1px; }
.vd-review:last-child { border-bottom: 0; }
.vd-review__top { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.vd-review__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.vd-review__name { font-weight: 700; font-size: .88rem; }
.vd-review__stars { color: #f5b400; font-size: .8rem; }
.vd-review__date { margin-left: auto; font-size: .74rem; color: var(--vd-faint); }
.vd-review__title { font-weight: 700; margin: 0 0 .25rem; }
.vd-review__body { color: #4b5563; margin: 0 0 .75rem; font-size: .88rem; }
.vd-review__reply { background: #f8fafc; border-radius: var(--vd-radius-xs); padding: .6rem .8rem; font-size: .84rem; }
.vd-review__form { display: flex; gap: .5rem; }
.vd-review__form .vd-input { height: 38px; }

/* ══════════════════════════════════════════════════════════════════════════
   ORDER DETAIL MODAL
   ══════════════════════════════════════════════════════════════════════════ */
.vd-modal {
	position: fixed; inset: 0; z-index: 1000; display: none;
	align-items: center; justify-content: center; padding: 1rem;
	background: rgba(17, 24, 39, .5); backdrop-filter: blur(2px);
}
.vd-modal.is-open { display: flex; }
.vd-modal__box {
	width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
	background: #fff; border-radius: var(--vd-radius); box-shadow: var(--vd-shadow-lg);
}
.vd-modal__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 1.1rem 1.25rem; border-bottom: var(--vd-line) solid 1px; position: sticky; top: 0; background: #fff;
}
.vd-modal__title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.vd-modal__close { width: 34px; height: 34px; border: var(--vd-border); border-radius: 8px; background: #fff; cursor: pointer; color: var(--vd-muted); }
.vd-modal__close:hover { color: var(--vd-ink); border-color: var(--vd-primary); }
.vd-modal__body { padding: 1.25rem; }
.vd-modal__loading { padding: 2.5rem; text-align: center; color: var(--vd-faint); font-size: 1.5rem; }

.vd-omodal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.vd-omodal-num { font-size: 1.15rem; font-weight: 800; margin-right: .6rem; }
.vd-omodal-date { font-size: .78rem; color: var(--vd-muted); }
.vd-omodal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.1rem; }
.vd-omodal-grid h4 { margin: 0 0 .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--vd-muted); }
.vd-omodal-grid p { margin: 0; font-size: .85rem; }
.vd-omodal-muted { color: var(--vd-muted) !important; font-size: .8rem !important; }
.vd-omodal-muted i { margin-right: .25rem; opacity: .7; }
.vd-omodal-contact { margin: .3rem 0 0 !important; font-size: .85rem !important; font-weight: 600; }
.vd-omodal-contact i { color: var(--vd-primary); margin-right: .3rem; }
.vd-omodal-contact a { color: var(--vd-ink); }
.vd-omodal-contact a:hover { color: var(--vd-primary); }
/* Make the delivery address span its own column comfortably */
.vd-omodal-grid > div:nth-child(2) { grid-column: 1 / -1; }
.vd-omodal-sec { margin: .5rem 0 .6rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--vd-muted); }
.vd-omodal-item { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-bottom: var(--vd-line) solid 1px; }
.vd-omodal-item img { border-radius: 8px; object-fit: cover; }
.vd-omodal-item__name { flex: 1; font-size: .85rem; font-weight: 500; }
.vd-omodal-item__qty { color: var(--vd-muted); font-size: .82rem; }
.vd-omodal-item__total { font-weight: 700; font-size: .85rem; }
.vd-omodal-totals { margin-top: 1rem; display: flex; flex-direction: column; gap: .45rem; }
.vd-omodal-totals > div { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; }
.vd-omodal-totals > div span:first-child { color: var(--vd-muted); }
.vd-omodal-net { border-top: var(--vd-line) solid 1px; padding-top: .55rem; font-weight: 800; font-size: .95rem !important; }
.vd-omodal-net span:first-child { color: var(--vd-ink) !important; }
.vd-omodal-status { margin-top: 1.25rem; padding-top: 1rem; border-top: var(--vd-line) solid 1px; }
.vd-omodal-status__row { display: flex; gap: .6rem; }
.vd-omodal-status__row .vd-input { flex: 1; height: 40px; }

/* Unread notification accent */
.vd-annc__item.is-unread { background: #fff7f2; cursor: pointer; }

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT MANAGEMENT (Products tab)
   ══════════════════════════════════════════════════════════════════════════ */
.vp-wrap { display: flex; flex-direction: column; gap: 1.1rem; }

.vp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vp-title { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.vp-total { color: var(--vd-primary); }
.vp-head__actions { display: flex; gap: .6rem; }

/* Stat cards (quick filters) */
.vp-stats { display: grid; grid-template-columns: repeat(7, 1fr); gap: .7rem; }
.vp-stat {
	display: flex; align-items: center; gap: .65rem; text-align: left;
	background: #fff; border: var(--vd-border); border-radius: var(--vd-radius-sm);
	padding: .8rem .9rem; cursor: pointer; box-shadow: var(--vd-shadow);
	transition: transform var(--vd-transition), border-color var(--vd-transition);
}
.vp-stat:hover { transform: translateY(-2px); border-color: var(--vd-primary); }
.vp-stat.is-active { border-color: var(--vd-primary); background: #fff7f2; }
.vp-stat .vd-stat__icon { width: 36px; height: 36px; font-size: .9rem; border-radius: 10px; }
.vp-stat__meta strong { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.1; }
.vp-stat__meta small { color: var(--vd-muted); font-size: .68rem; }

/* Filters */
.vp-filters { padding: .9rem 1rem; }
.vp-filters__row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.vp-search { position: relative; flex: 1; min-width: 220px; }
.vp-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--vd-faint); font-size: .8rem; }
.vp-search input {
	width: 100%; height: 38px; padding: 0 .8rem 0 2.2rem;
	border: var(--vd-border); border-radius: var(--vd-radius-xs);
	background: #f7f8fa; font-size: .84rem;
}
.vp-search input:focus { outline: none; border-color: var(--vd-primary); background: #fff; }
.vp-select {
	height: 38px; padding: 0 .6rem; border: var(--vd-border);
	border-radius: var(--vd-radius-xs); background: #fff;
	font-size: .8rem; font-weight: 600; cursor: pointer;
}

/* Bulk bar */
.vp-bulk {
	display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
	background: #fff7f2; border: 1px solid #ffd9c2; border-radius: var(--vd-radius-sm);
	padding: .6rem .9rem;
}
#vp-bulk-count { font-size: .8rem; font-weight: 700; color: var(--vd-primary); }

/* Table specifics */
.vp-col-check { width: 34px; }
.vp-check, #vp-check-all { width: 15px; height: 15px; accent-color: var(--vd-primary); }
.vp-product { display: flex; align-items: center; gap: .6rem; }
.vp-product img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: #f3f4f6; flex-shrink: 0; }
.vp-product__meta { min-width: 0; }
.vp-product__name { font-weight: 700; color: var(--vd-ink); display: block; line-height: 1.3; }
.vp-product__name:hover { color: var(--vd-primary); }
.vp-product__meta small { color: var(--vd-muted); font-size: .7rem; }
.vp-featured-mark { color: #3b82f6; font-size: .68rem; margin-left: .2rem; }
.vp-price strong { display: block; }
.vp-price del { color: #9ca3af; font-size: .74rem; }
.vp-qty { display: block; color: var(--vd-muted); font-size: .7rem; margin-top: .2rem; }
.vp-rating .fa-star { color: #f5b400; font-size: .74rem; }

/* Row action dropdown */
.vp-menu { position: relative; display: inline-block; }
.vp-menu__list {
	display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
	min-width: 185px; background: #fff; border: var(--vd-border);
	border-radius: var(--vd-radius-sm); box-shadow: var(--vd-shadow-lg); padding: .35rem;
}
.vp-menu.is-open .vp-menu__list { display: block; }
.vp-menu__list a, .vp-menu__list button {
	display: flex; align-items: center; gap: .55rem; width: 100%;
	padding: .5rem .65rem; border: 0; background: none; cursor: pointer;
	font-size: .8rem; font-weight: 500; color: #374151; text-align: left;
	border-radius: 7px; text-decoration: none;
}
.vp-menu__list a:hover, .vp-menu__list button:hover { background: #f5f6f8; color: var(--vd-ink); }
.vp-menu__list i { width: 16px; text-align: center; color: var(--vd-faint); }
.vp-menu__danger { color: var(--vd-red) !important; }
.vp-menu__danger i { color: var(--vd-red) !important; }

/* Quick edit inline row */
.vp-qe-row > td { background: #fffaf6 !important; }
.vp-qe { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; padding: .35rem 0; }
.vp-qe label { display: flex; flex-direction: column; gap: .25rem; font-size: .7rem; font-weight: 700; color: var(--vd-muted); text-transform: uppercase; letter-spacing: .02em; }
.vp-qe input, .vp-qe select {
	height: 36px; padding: 0 .6rem; border: var(--vd-border);
	border-radius: 8px; font-size: .82rem; min-width: 110px; background: #fff;
}
.vp-qe input[name="name"] { min-width: 200px; }
.vp-qe__actions { display: flex; gap: .45rem; margin-left: auto; }

/* Footer */
.vp-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; flex-wrap: wrap; }
.vp-perpage { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--vd-muted); }

/* Empty state */
.vp-empty { text-align: center; padding: 3.5rem 1.5rem; }
.vp-empty > i { font-size: 2.4rem; color: #d1d5db; display: block; margin-bottom: .8rem; }
.vp-empty h2 { margin: 0 0 .3rem; }
.vp-empty p { color: var(--vd-muted); margin: 0 0 1.25rem; }
.vp-empty__tips {
	list-style: none; margin: 2rem auto 0; padding: 0; max-width: 420px;
	display: flex; flex-direction: column; gap: .6rem; text-align: left; font-size: .84rem;
}
.vp-empty__tips i { color: var(--vd-primary); width: 20px; }

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT EDITOR (Add / Edit)
   ══════════════════════════════════════════════════════════════════════════ */
.pe-wrap { display: flex; flex-direction: column; gap: 1.1rem; }
.pe-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pe-head > div { display: flex; align-items: center; gap: .8rem; }
.pe-title { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.pe-savestate { font-size: .78rem; font-weight: 600; color: var(--vd-muted); }
.pe-savestate[data-state="saved"] { color: var(--vd-green); }
.pe-savestate[data-state="saving"] { color: var(--vd-c-blue); }
.pe-savestate[data-state="dirty"] { color: var(--vd-c-amber); }

.pe-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.pe-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pe-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1rem; }

.pe-section { padding: 0; overflow: visible; }
.pe-section__title {
	display: flex; align-items: center; gap: .6rem; margin: 0;
	padding: 1rem 1.25rem; font-size: .95rem; font-weight: 800; cursor: pointer;
}
.pe-section__title > i:first-child { color: var(--vd-primary); }
.pe-caret { margin-left: auto; color: var(--vd-faint); transition: transform .2s ease; }
.pe-section.is-open .pe-caret { transform: rotate(180deg); }
.pe-section__body { display: none; padding: 0 1.25rem 1.25rem; }
.pe-section.is-open .pe-section__body { display: block; }
.pe-muted-card { opacity: .6; }

.pe-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; font-size: .8rem; font-weight: 700; color: #374151; }
.pe-field em { color: var(--vd-red); font-style: normal; }
.pe-field__label { display: block; font-size: .8rem; font-weight: 700; color: #374151; margin-bottom: .35rem; }
.pe-input {
	width: 100%; height: 40px; padding: 0 .8rem;
	border: var(--vd-border); border-radius: var(--vd-radius-xs);
	font-size: .86rem; font-weight: 400; background: #fff;
}
textarea.pe-input { height: auto; padding: .55rem .8rem; resize: vertical; }
.pe-input:focus { outline: none; border-color: var(--vd-primary); }
.pe-count { color: var(--vd-faint); font-weight: 500; font-size: .68rem; align-self: flex-end; }
.pe-error { color: var(--vd-red); font-weight: 600; font-size: .72rem; }
.pe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.pe-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pe-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pe-flags { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: .9rem; }
.pe-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 500; cursor: pointer; }
.pe-check input { accent-color: var(--vd-primary); }
.pe-check--mid { align-self: center; margin-top: 1.1rem; }
.pe-preview-price { font-size: 1.15rem; color: var(--vd-primary); }

/* Media */
.pe-media { display: grid; grid-template-columns: 220px 1fr; gap: 1.25rem; }
.pe-imgbox {
	width: 100%; aspect-ratio: 1; border: 2px dashed #d1d5db; border-radius: var(--vd-radius-sm);
	background: #fafafa; cursor: pointer; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: .4rem; color: var(--vd-muted);
	font-size: .8rem; overflow: hidden;
}
.pe-imgbox:hover { border-color: var(--vd-primary); }
.pe-imgbox i { font-size: 1.4rem; color: #9ca3af; }
.pe-imgbox.has-image { border-style: solid; padding: 0; }
.pe-imgbox.has-image img { width: 100%; height: 100%; object-fit: cover; }
.pe-gallery__grid { display: flex; flex-wrap: wrap; gap: .55rem; }
.pe-thumb {
	position: relative; width: 72px; height: 72px; border-radius: 10px;
	border: var(--vd-border); overflow: hidden; background: #f3f4f6;
}
.pe-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pe-thumb__x {
	position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
	border: 0; border-radius: 50%; background: rgba(17,24,39,.75); color: #fff;
	cursor: pointer; font-size: .7rem; line-height: 1;
}
.pe-thumb--add {
	display: flex; align-items: center; justify-content: center;
	border: 2px dashed #d1d5db; background: #fafafa; color: var(--vd-muted);
	font-size: 1.3rem; cursor: pointer;
}
.pe-thumb--add:hover { border-color: var(--vd-primary); color: var(--vd-primary); }

.pe-cats { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; border: var(--vd-border); border-radius: var(--vd-radius-xs); padding: .7rem .8rem; }

/* Attributes */
.pe-attr { border: var(--vd-border); border-radius: var(--vd-radius-sm); padding: .8rem .9rem; margin-bottom: .7rem; }
.pe-attr__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pe-attr__head strong { font-size: .86rem; }
.pe-attr__x, .pe-var__x { margin-left: auto; border: 0; background: none; color: var(--vd-red); cursor: pointer; font-size: 1rem; }
.pe-attr__terms { display: flex; flex-wrap: wrap; gap: .7rem; }
.pe-attr-add { display: flex; gap: .55rem; }
.pe-attr-add .pe-input { max-width: 260px; }

/* Variations */
.pe-var-tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.pe-var-bulk { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 600; color: var(--vd-muted); }
.pe-var-bulk .pe-input { width: 110px; height: 34px; }
.pe-var { border: var(--vd-border); border-radius: var(--vd-radius-sm); padding: .7rem .9rem; margin-bottom: .6rem; }
.pe-var__head { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.pe-var__head strong { font-size: .84rem; text-transform: capitalize; }
.pe-var__fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.pe-var__fields label { display: flex; flex-direction: column; gap: .2rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--vd-muted); }
.pe-var__fields .pe-input { height: 34px; }

/* Linked products */
.pe-linked { position: relative; }
.pe-linked__results {
	display: none; position: absolute; z-index: 20; left: 0; right: 0; top: 42px;
	background: #fff; border: var(--vd-border); border-radius: var(--vd-radius-sm);
	box-shadow: var(--vd-shadow-lg); max-height: 220px; overflow-y: auto;
}
.pe-linked__item {
	display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .7rem;
	border: 0; background: none; cursor: pointer; font-size: .8rem; text-align: left;
}
.pe-linked__item:hover { background: #f5f6f8; }
.pe-linked__item img { border-radius: 6px; }
.pe-linked__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.pe-chip {
	display: inline-flex; align-items: center; gap: .35rem;
	background: #eef2f7; border-radius: 999px; padding: .25rem .65rem;
	font-size: .74rem; font-weight: 600;
}
.pe-chip button { border: 0; background: none; cursor: pointer; color: var(--vd-muted); }
.pe-chip button:hover { color: var(--vd-red); }

/* Sidebar */
.pe-publish h3, .pe-stats h3 { margin: 0 0 .8rem; font-size: .9rem; font-weight: 800; }
.pe-publish { padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .55rem; }
.pe-stats { padding: 1.1rem 1.25rem; }
.pe-stats__row { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: .5rem; }
.pe-danger { color: var(--vd-red); }
.pe-danger:hover { border-color: var(--vd-red); }
.vo-progress__bar { height: 8px; border-radius: 4px; background: var(--vd-line); overflow: hidden; margin-bottom: .7rem; }
.vo-progress__bar span { display: block; height: 100%; background: linear-gradient(90deg, #ff8a4c, var(--vd-primary)); transition: width .3s ease; }

/* Mobile bar */
.pe-mobilebar { display: none; }
@media (max-width: 1024px) {
	.pe-layout { grid-template-columns: 1fr; }
	.pe-side { position: static; }
	.pe-mobilebar {
		display: flex; align-items: center; justify-content: space-between; gap: 1rem;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		background: #fff; border-top: var(--vd-border); padding: .6rem 1rem;
	}
	.pe-wrap { padding-bottom: 4rem; }
	.pe-grid, .pe-grid--3, .pe-grid--4 { grid-template-columns: 1fr 1fr; }
	.pe-media { grid-template-columns: 1fr; }
	.pe-var__fields { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1200px) { .vp-stats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) {
	.vp-stats { grid-template-columns: repeat(2, 1fr); }
	.vp-filters__row .vp-select { flex: 1; min-width: 130px; }
	.vp-table .vp-col-check { display: none; }
	.vp-menu__list { right: auto; left: 0; }
}

/* Mobile bottom nav */
.vd-bottomnav { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* Right column drops below main */
@media (max-width: 1200px) {
	.vd-columns { grid-template-columns: 1fr; }
	.vd-stats { grid-template-columns: repeat(3, 1fr); }
}

/* Sidebar → off-canvas drawer */
@media (max-width: 1024px) {
	.vd-app { grid-template-columns: 1fr; }
	.vd-sidebar {
		position: fixed; left: 0; top: 0; bottom: 0; height: 100%;
		width: 280px; z-index: 50; transform: translateX(-100%);
		transition: transform .28s ease; box-shadow: var(--vd-shadow-lg);
	}
	.vd-sidebar.is-open { transform: translateX(0); }
	.vd-hamburger { display: inline-flex; align-items: center; justify-content: center; }
	.vd-search__kbd { display: none; }
}

@media (max-width: 768px) {
	.vd-body { padding: 1rem; gap: 1rem; }
	.vd-stats { grid-template-columns: repeat(2, 1fr); }
	.vd-quick-grid { grid-template-columns: repeat(3, 1fr); }
	.vd-welcome__title { font-size: 1.25rem; }
	.vd-btn-store span, .vd-topbar__profile-meta { display: none; }
	.vd-search { max-width: none; }

	/* Orders table → stacked cards */
	.vd-orders-table thead { display: none; }
	.vd-orders-table, .vd-orders-table tbody, .vd-orders-table tr, .vd-orders-table td { display: block; width: 100%; }
	.vd-orders-table tr {
		border: var(--vd-border); border-radius: var(--vd-radius-sm);
		margin-bottom: .75rem; padding: .35rem .25rem;
	}
	.vd-orders-table tbody td { border: 0; padding: .5rem .9rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
	.vd-orders-table tbody td::before {
		content: attr(data-label); font-weight: 700; font-size: .72rem;
		text-transform: uppercase; letter-spacing: .03em; color: var(--vd-muted);
	}
	.vd-order-cust, .vd-order-thumbs { justify-content: flex-end; }

	/* Sticky bottom nav for quick section jumps */
	.vd-bottomnav {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
		background: #fff; border-top: var(--vd-border); padding: .4rem;
		justify-content: space-around;
	}
	.vd-bottomnav a {
		flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
		padding: .35rem; font-size: .62rem; color: var(--vd-muted); font-weight: 600;
	}
	.vd-bottomnav a i { font-size: 1rem; }
	.vd-bottomnav a.is-active { color: var(--vd-primary); }
	.vd-body { padding-bottom: 4.5rem; }
}

@media (max-width: 480px) {
	.vd-stats { grid-template-columns: 1fr 1fr; }
	.vd-quick-grid { grid-template-columns: repeat(2, 1fr); }
	.vd-topbar { padding: .6rem .8rem; gap: .5rem; }
	.vd-iconbtn { width: 40px; }
}

/* Collapsed sidebar (desktop preference) */
@media (min-width: 1025px) {
	.vd-sidebar-collapsed .vd-app { grid-template-columns: 78px minmax(0, 1fr); }
	.vd-sidebar-collapsed .vd-brand__name,
	.vd-sidebar-collapsed .vd-brand__sub,
	.vd-sidebar-collapsed .vd-vprofile,
	.vd-sidebar-collapsed .vd-nav__label,
	.vd-sidebar-collapsed .vd-nav__badge,
	.vd-sidebar-collapsed .vd-nav__pill,
	.vd-sidebar-collapsed .vd-support { display: none; }
	.vd-sidebar-collapsed .vd-nav__item { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.vd-stat, .vd-quick, .vd-btn, .vd-sidebar, .vd-toast { transition: none; }
}

/* Attribute "add value" row */
.pe-attr__new { display: flex; gap: .5rem; margin-top: .6rem; }
.pe-attr__new .pe-input { max-width: 240px; height: 34px; }

/* Variation attribute selects ("Any Color" / specific value) */
.pe-var__attr { width: auto; min-width: 130px; height: 34px; font-size: .78rem; font-weight: 600; }
.pe-var__head { flex-wrap: wrap; gap: .5rem; }
.pe-var__head .pe-check { margin-left: auto; }

/* Media size guidance note */
.pe-media-hint {
	display: flex; align-items: flex-start; gap: .55rem;
	background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--vd-radius-xs);
	padding: .65rem .85rem; font-size: .78rem; color: #713f12; margin: 0 0 1rem;
}
.pe-media-hint i { color: #d97706; margin-top: .1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Order management (vo-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* New status badges (existing palette lives near .vd-badge--pending) */
.vd-badge--confirmed     { background: #cffafe; color: #0e7490; }
.vd-badge--ready_to_ship { background: #e0e7ff; color: #4338ca; }
.vd-badge--failed        { background: #ffe4e6; color: #be123c; }

/* List header */
.vo-head__summary { margin: .2rem 0 0; font-size: .8rem; color: var(--vd-muted); }
.vo-head__summary strong { color: var(--vd-ink); }

/* Stat card growth chip */
.vp-stat { position: relative; }
.vo-stat__growth {
	margin-left: auto; font-size: .68rem; font-weight: 800; white-space: nowrap;
	display: inline-flex; align-items: center; gap: .25rem;
	padding: .18rem .45rem; border-radius: 999px;
}
.vo-stat__growth.is-up   { background: #dcfce7; color: #15803d; }
.vo-stat__growth.is-down { background: #fee2e2; color: #b91c1c; }
.vo-stats { grid-template-columns: repeat(4, 1fr); }

/* Filters: date row */
.vo-filters__dates { margin-top: .6rem; }
.vo-date { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; color: var(--vd-muted); }
.vo-date input { height: 38px; }
.vo-date-presets { display: inline-flex; gap: .4rem; }

/* Table cells */
.vo-number { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 800; color: var(--vd-primary); text-decoration: none; }
.vo-number:hover { text-decoration: underline; }
.vo-cust__meta { display: inline-flex; flex-direction: column; line-height: 1.25; }
.vo-cust__phone { color: var(--vd-faint); font-size: .72rem; }
.vo-net { display: block; font-weight: 600; color: var(--vd-faint); font-size: .7rem; }
.vo-pay { display: inline-flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.vo-pay small { color: var(--vd-faint); font-size: .72rem; }
.vo-track { display: inline-flex; flex-direction: column; line-height: 1.3; font-weight: 700; font-size: .78rem; }
.vo-track i { color: var(--vd-primary); margin-right: .25rem; }
.vo-track small { color: var(--vd-faint); font-weight: 600; font-size: .7rem; }
.vo-ship { font-size: .78rem; color: var(--vd-muted); }

/* Status group inside the row dropdown */
.vo-menu__group { border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; margin: .25rem 0; padding: .25rem 0; }
.vo-menu__label { display: block; padding: .3rem .9rem .15rem; font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--vd-faint); }

/* ── Details page ─────────────────────────────────────────────────────── */
.vo-view__head { align-items: flex-start; }
.vo-view__back { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: var(--vd-muted); text-decoration: none; margin-bottom: .35rem; }
.vo-view__back:hover { color: var(--vd-primary); }
.vo-view .vp-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vo-view__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; margin-top: 1.1rem; }
.vo-view__main, .vo-view__side { display: grid; gap: 1.25rem; min-width: 0; }

/* Items + totals */
.vo-items__total { text-align: right; }
.vo-totals { padding: 1rem 1.25rem; border-top: 1px solid #f3f4f6; display: grid; gap: .4rem; max-width: 360px; margin-left: auto; }
.vo-totals > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.vo-totals span { color: var(--vd-muted); }
.vo-totals__grand { border-top: 1px solid #e5e7eb; padding-top: .5rem; font-size: .95rem !important; }
.vo-totals__grand strong { font-size: 1.05rem; }
.vo-totals__muted strong { color: var(--vd-faint); }
.vo-totals__net { background: #fff7f2; border-radius: 8px; padding: .5rem .65rem; }
.vo-totals__net strong { color: var(--vd-primary); }

/* Key-value rows (payment / customer) */
.vo-kv { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .45rem 0; border-bottom: 1px solid #f7f8fa; font-size: .82rem; }
.vo-kv:last-child { border-bottom: 0; }
.vo-kv > span { color: var(--vd-muted); }
.vo-kv > span i { width: 16px; color: var(--vd-faint); }
.vo-kv a { color: var(--vd-primary); font-weight: 700; text-decoration: none; }

/* Customer card */
.vo-customer__id { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.vo-customer__id img { border-radius: 50%; }
.vo-customer__id div { display: grid; line-height: 1.3; }
.vo-customer__id a { font-size: .78rem; color: var(--vd-primary); text-decoration: none; }
.vo-address { margin-top: .8rem; }
.vo-address h3 { margin: 0 0 .3rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--vd-muted); }
.vo-address h3 i { color: var(--vd-faint); margin-right: .25rem; }
.vo-address address { font-style: normal; font-size: .82rem; line-height: 1.55; color: var(--vd-ink); }
.vo-address small { color: var(--vd-faint); }

/* Status card */
.vo-status { display: grid; gap: .7rem; }
.vo-hint { margin: 0; font-size: .74rem; color: var(--vd-faint); }

/* Timeline */
.vo-timeline { list-style: none; margin: 0; padding: 0; }
.vo-timeline__step { position: relative; display: flex; gap: .8rem; padding: 0 0 1.1rem 0; }
.vo-timeline__step::before {
	content: ""; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: #e5e7eb;
}
.vo-timeline__step:last-child { padding-bottom: 0; }
.vo-timeline__step:last-child::before { display: none; }
.vo-timeline__dot {
	flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #f3f4f6; color: #9ca3af; border: 2px solid #e5e7eb; font-size: .68rem;
}
.vo-timeline__step.is-done .vo-timeline__dot { background: #dcfce7; color: #15803d; border-color: #86efac; }
.vo-timeline__step.is-current .vo-timeline__dot { box-shadow: 0 0 0 4px rgba(255, 106, 33, .15); border-color: var(--vd-primary); }
.vo-timeline__step.is-terminal .vo-timeline__dot { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.vo-timeline__meta { display: grid; line-height: 1.35; padding-top: .2rem; }
.vo-timeline__meta strong { font-size: .84rem; }
.vo-timeline__meta small { color: var(--vd-faint); font-size: .72rem; }
.vo-timeline__step:not(.is-done):not(.is-terminal) .vo-timeline__meta strong { color: var(--vd-faint); font-weight: 600; }

/* Notes */
.vo-note-form textarea { width: 100%; resize: vertical; }
.vo-note-form__row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: .5rem; flex-wrap: wrap; }
.vo-note-form__check { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--vd-muted); cursor: pointer; }
.vo-notes__group { margin-top: 1.1rem; }
.vo-notes__group h3 { margin: 0 0 .5rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--vd-muted); }
.vo-notes__group h3 i { color: var(--vd-faint); margin-right: .25rem; }
.vo-notes__list { display: grid; gap: .5rem; }
.vo-notes__empty { margin: 0; font-size: .78rem; color: var(--vd-faint); }
.vo-note { background: #f9fafb; border: 1px solid #f3f4f6; border-radius: 10px; padding: .6rem .8rem; }
.vo-note p { margin: 0 0 .2rem; font-size: .82rem; white-space: pre-line; }
.vo-note small { color: var(--vd-faint); font-size: .7rem; }

/* Returns & refunds */
.vo-refundable { font-size: .78rem; color: var(--vd-muted); }
.vo-returns { display: grid; gap: .7rem; }
.vo-return { border: 1px solid #f3f4f6; border-radius: 10px; padding: .75rem .9rem; }
.vo-return__top { display: flex; align-items: center; gap: .6rem; }
.vo-return__top small { margin-left: auto; color: var(--vd-faint); }
.vo-return__reason { margin: .45rem 0 0; font-size: .82rem; }
.vo-return__note { margin: .3rem 0 0; font-size: .76rem; color: var(--vd-muted); }
.vo-return__actions { display: flex; gap: .5rem; margin-top: .6rem; }
.vo-refund-form { margin-top: 1rem; border-top: 1px solid #f3f4f6; padding-top: .9rem; }
.vo-refund-form h3 { margin: 0 0 .5rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--vd-muted); }
.vo-refund-form__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.vo-refund-form__row [name="amount"] { max-width: 130px; }
.vo-refund-form__row [name="reason"] { flex: 1; min-width: 180px; }

/* Responsive */
@media (max-width: 1200px) {
	.vo-stats { grid-template-columns: repeat(4, 1fr); }
	.vo-view__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
	.vo-stats { grid-template-columns: repeat(2, 1fr); }
	.vo-date { flex: 1; }
	.vo-date input { flex: 1; }
	.vo-totals { max-width: none; }
}

/* Print: only the orders table survives */
@media print {
	.vd-sidebar, .vd-topbar, .vd-bottomnav, .vp-head__actions, .vo-stats,
	.vp-filters, .vp-bulk, .vp-foot, .vp-actions, .vp-col-check, .vo-view__back { display: none !important; }
	.vd-app { display: block !important; }
	.vd-card { box-shadow: none; border: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Customer management (vc-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.vc-stats { grid-template-columns: repeat(5, 1fr); }

/* Layout: table + activity feed */
.vc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.vc-layout__main { display: grid; gap: 1rem; min-width: 0; }

/* Customer cell */
.vc-cust { text-decoration: none; color: inherit; }
.vc-cust:hover .vd-order-cust__name { color: var(--vd-primary); }
.vc-mail { color: var(--vd-muted); text-decoration: none; font-size: .8rem; }
.vc-mail:hover { color: var(--vd-primary); }

/* Segment labels */
.vc-label {
	display: inline-flex; align-items: center; gap: .25rem;
	font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
	padding: .12rem .45rem; border-radius: 999px;
}
.vc-label--vip        { background: #ede9fe; color: #6d28d9; }
.vc-label--high_value { background: #cffafe; color: #0e7490; }
.vc-label--frequent   { background: #dbeafe; color: #1d4ed8; }
.vc-label--returning  { background: #dcfce7; color: #15803d; }
.vc-label--new        { background: #fef9c3; color: #a16207; }

/* Activity feed */
.vc-activity { display: grid; gap: .35rem; }
.vc-event {
	display: flex; align-items: center; gap: .65rem; padding: .5rem .55rem;
	border-radius: 10px; text-decoration: none; color: inherit;
}
.vc-event:hover { background: #f9fafb; }
.vc-event img { border-radius: 50%; flex-shrink: 0; }
.vc-event__meta { display: grid; line-height: 1.35; min-width: 0; }
.vc-event__meta strong { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-event__meta small { color: var(--vd-faint); font-size: .72rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.vc-event__tag { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .08rem .4rem; border-radius: 999px; }
.vc-event__tag--new    { background: #fef9c3; color: #a16207; }
.vc-event__tag--repeat { background: #dcfce7; color: #15803d; }

/* Profile page */
.vc-view__title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vc-view__avatar { border-radius: 50%; }
.vc-view__labels { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.vc-summary { grid-template-columns: repeat(4, 1fr); margin-bottom: 1.1rem; }
.vc-summary__card { cursor: default; }
.vc-summary__card:hover { transform: none; border-color: var(--vd-border-color, #e5e7eb); }

/* Reviews */
.vc-reviews { display: grid; gap: .7rem; }
.vc-review { border: 1px solid #f3f4f6; border-radius: 10px; padding: .7rem .9rem; }
.vc-review__top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vc-review__top a { color: var(--vd-primary); font-weight: 700; text-decoration: none; font-size: .82rem; }
.vc-review__top small { margin-left: auto; color: var(--vd-faint); }
.vc-review p { margin: .4rem 0 0; font-size: .82rem; }
.vc-review .vd-review__stars { color: #f59e0b; font-size: .72rem; }

/* Notes */
.vc-note small { display: flex; align-items: center; gap: .5rem; }
.vc-note__delete { background: none; border: 0; padding: 0; cursor: pointer; color: var(--vd-faint); margin-left: auto; }
.vc-note__delete:hover { color: var(--vd-red, #b91c1c); }

/* Responsive */
@media (max-width: 1200px) {
	.vc-stats { grid-template-columns: repeat(3, 1fr); }
	.vc-layout { grid-template-columns: minmax(0, 1fr); }
	.vc-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.vc-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Reviews management (vr-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Export dropdown */
.vr-export { position: relative; display: inline-block; }
.vr-export__menu {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
	min-width: 160px; background: #fff; border: var(--vd-border); border-radius: var(--vd-radius-sm);
	box-shadow: 0 12px 30px rgba(17,24,39,.14); padding: .35rem; display: none;
}
.vr-export.is-open .vr-export__menu { display: block; }
.vr-export__menu button {
	display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem .7rem;
	background: none; border: 0; border-radius: 8px; cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--vd-ink); text-align: left;
}
.vr-export__menu button:hover { background: #f5f6f8; }
.vr-export__menu i { width: 16px; text-align: center; color: var(--vd-faint); }

/* Summary: score card + stat cards */
.vr-summary { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.vr-score { padding: 1.25rem; text-align: center; }
.vr-score__big { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--vd-ink); }
.vr-score__stars { color: #f59e0b; font-size: 1.05rem; margin: .35rem 0 .2rem; }
.vr-score__count { color: var(--vd-muted); font-size: .78rem; margin-bottom: .9rem; }
.vr-bars { display: grid; gap: .3rem; }
.vr-bar { display: flex; align-items: center; gap: .5rem; background: none; border: 0; padding: .15rem .2rem; cursor: pointer; border-radius: 6px; }
.vr-bar:hover, .vr-bar.is-active { background: #fff7f2; }
.vr-bar__label { font-size: .72rem; font-weight: 700; color: var(--vd-muted); width: 30px; text-align: right; white-space: nowrap; }
.vr-bar__track { flex: 1; height: 8px; background: #f1f3f5; border-radius: 999px; overflow: hidden; }
.vr-bar__fill { display: block; height: 100%; background: #f59e0b; border-radius: 999px; transition: width .3s; }
.vr-bar__count { font-size: .72rem; font-weight: 700; color: var(--vd-faint); width: 34px; text-align: left; }
.vr-stats { grid-template-columns: repeat(4, 1fr); }
.vr-stat__pct { color: var(--vd-faint); font-weight: 600; }

/* Layout: list + analytics */
.vr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.vr-list { display: grid; gap: 1rem; min-width: 0; }
.vr-list.vd-is-loading { opacity: .55; pointer-events: none; }
.vr-analytics { display: grid; gap: 1rem; position: sticky; top: 1rem; }

/* Review card */
.vr-card { background: #fff; border: var(--vd-border); border-radius: var(--vd-radius); padding: 1.1rem 1.25rem; }
.vr-card__head { display: flex; align-items: flex-start; gap: .7rem; }
.vr-card__avatar { border-radius: 50%; flex-shrink: 0; }
.vr-card__who { min-width: 0; flex: 1; }
.vr-card__name { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; flex-wrap: wrap; }
.vr-verified { display: inline-flex; align-items: center; gap: .25rem; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #15803d; background: #dcfce7; padding: .1rem .4rem; border-radius: 999px; }
.vr-card__stars { display: flex; align-items: center; gap: .15rem; color: #f59e0b; font-size: .82rem; margin-top: .2rem; }
.vr-card__date { color: var(--vd-faint); font-size: .72rem; font-weight: 600; margin-left: .5rem; }
.vr-card__status { flex-shrink: 0; }
.vr-card__title { margin: .7rem 0 .3rem; font-size: .95rem; font-weight: 700; }
.vr-card__body { margin: .4rem 0 0; font-size: .86rem; color: #374151; line-height: 1.55; white-space: pre-line; }
.vr-card__media { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; }
.vr-thumb { width: 56px; height: 56px; border: var(--vd-border); border-radius: 8px; overflow: hidden; padding: 0; cursor: zoom-in; background: #f8f9fa; }
.vr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vr-card__meta { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; flex-wrap: wrap; }
.vr-card__product { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--vd-muted); text-decoration: none; font-weight: 600; }
.vr-card__product img { width: 24px; height: 24px; border-radius: 5px; object-fit: cover; }
.vr-card__product:hover { color: var(--vd-primary); }
.vr-card__stat { font-size: .75rem; color: var(--vd-faint); font-weight: 600; }
.vr-card__stat--flag { color: var(--vd-red); }
.vr-card__reply-wrap.has-reply { margin-top: .8rem; }
.vr-reply { background: #fff7f2; border-left: 3px solid var(--vd-primary); border-radius: 8px; padding: .6rem .8rem; }
.vr-reply__label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--vd-primary); display: flex; align-items: center; gap: .3rem; }
.vr-reply__text { margin: .25rem 0 0; font-size: .82rem; color: #374151; white-space: pre-line; }
.vr-card__actions { display: flex; gap: .45rem; margin-top: .9rem; flex-wrap: wrap; }
.vr-danger { color: var(--vd-red); }
.vr-danger:hover { border-color: var(--vd-red); }
.vr-empty { padding: 2.5rem; text-align: center; }

/* Analytics panel */
.vr-analytics__card .vd-card__title i { color: var(--vd-primary); }
.vr-trend { padding: .3rem 0; }
.vr-trend__svg { width: 100%; height: 60px; display: block; }
.vr-trend__labels { display: flex; justify-content: space-between; margin-top: .4rem; font-size: .68rem; color: var(--vd-faint); font-weight: 600; }
.vr-metrics { display: grid; gap: .9rem; }
.vr-metric__label { font-size: .78rem; color: var(--vd-muted); }
.vr-metric__value { float: right; font-weight: 800; font-size: .82rem; }
.vr-metric--inline { display: flex; justify-content: space-between; align-items: center; }
.vr-metric--inline .vr-metric__value { float: none; }
.vr-plist { display: grid; gap: .55rem; }
.vr-plist__row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.vr-plist__name { font-size: .8rem; font-weight: 600; color: var(--vd-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-plist__name:hover { color: var(--vd-primary); }
.vr-plist__meta { font-size: .74rem; color: var(--vd-faint); white-space: nowrap; }
.vr-plist__meta i { color: #f59e0b; }
.vr-plist__meta--low { color: var(--vd-red); font-weight: 700; }
.vr-plist__meta--low i { color: var(--vd-red); }
.vr-lowrated .vd-card__title i { color: #f59e0b; }

/* Modals */
.vr-modal.is-open, .vr-drawer.is-open { display: flex; }
.vr-modal__review { background: #f9fafb; border-radius: 10px; padding: .7rem .9rem; margin-bottom: .9rem; }
.vr-modal__stars { color: #f59e0b; font-weight: 700; }
.vr-modal__author { color: var(--vd-ink); margin-left: .5rem; }
.vr-modal__quote { margin: .35rem 0 0; font-size: .82rem; color: #374151; }
.vr-modal__actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* Rich-text reply editor */
.vr-editor__toolbar { display: flex; gap: .3rem; margin-bottom: .5rem; }
.vr-editor__toolbar button { width: 32px; height: 32px; border: var(--vd-border); border-radius: 7px; background: #fff; cursor: pointer; color: var(--vd-muted); }
.vr-editor__toolbar button:hover { border-color: var(--vd-primary); color: var(--vd-primary); }
.vr-editor { min-height: 120px; border: var(--vd-border); border-radius: var(--vd-radius-sm); padding: .7rem .85rem; font-size: .88rem; line-height: 1.55; outline: none; }
.vr-editor:focus { border-color: var(--vd-primary); box-shadow: 0 0 0 3px rgba(255,106,33,.12); }
.vr-editor:empty::before { content: attr(data-placeholder); color: var(--vd-faint); }

/* Detail drawer */
.vr-drawer__box { max-width: 560px; width: 100%; }
.vr-detail__head { display: flex; align-items: center; gap: .7rem; }
.vr-detail__head img { border-radius: 50%; }
.vr-detail__head > div:first-of-type { flex: 1; }
.vr-detail__title { margin: .8rem 0 .3rem; font-size: 1rem; }
.vr-detail__body { font-size: .88rem; line-height: 1.6; color: #374151; white-space: pre-line; margin: .5rem 0; }
.vr-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1rem 0; }
.vr-detail__kv { display: flex; flex-direction: column; gap: .1rem; font-size: .82rem; }
.vr-detail__kv span { color: var(--vd-muted); font-size: .72rem; }
.vr-detail__kv a { color: var(--vd-primary); text-decoration: none; }
.vr-detail__section { border-top: 1px solid #f3f4f6; padding-top: .9rem; margin-top: .9rem; }
.vr-detail__section h5 { margin: 0 0 .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--vd-muted); }
.vr-detail__hist { font-size: .82rem; }
.vr-detail__admin { font-size: .82rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: .6rem .8rem; color: #713f12; }
.vr-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.vr-timeline li { display: flex; gap: .7rem; align-items: flex-start; }
.vr-timeline__dot { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .64rem; background: #dcfce7; color: #15803d; }
.vr-timeline__dot.is-flag { background: #fee2e2; color: var(--vd-red); }
.vr-timeline li strong { font-size: .82rem; display: block; }
.vr-timeline li small { color: var(--vd-faint); font-size: .74rem; }

/* Lightbox */
.vr-lightbox { position: fixed; inset: 0; z-index: 1300; background: rgba(17,24,39,.9); display: none; align-items: center; justify-content: center; padding: 3rem; }
.vr-lightbox.is-open { display: flex; }
.vr-lightbox__img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; cursor: zoom-in; transition: transform .2s; }
.vr-lightbox__img.is-zoomed { transform: scale(1.8); cursor: zoom-out; }
.vr-lightbox__close, .vr-lightbox__download { position: absolute; top: 1.25rem; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.vr-lightbox__close { right: 1.25rem; }
.vr-lightbox__download { right: 5rem; }
.vr-lightbox__close:hover, .vr-lightbox__download:hover { background: rgba(255,255,255,.3); }

/* Responsive */
@media (max-width: 1200px) {
	.vr-stats { grid-template-columns: repeat(4, 1fr); }
	.vr-layout { grid-template-columns: minmax(0, 1fr); }
	.vr-analytics { position: static; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.vr-summary { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.vr-stats { grid-template-columns: repeat(2, 1fr); }
	.vr-analytics { grid-template-columns: 1fr; }
	.vr-detail__grid { grid-template-columns: 1fr; }
	.vr-card__actions .vd-btn { flex: 1; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Wallet & Earnings (vw-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wallet header */
.vw-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.vw-header__balances {
	flex: 1; min-width: 280px; display: flex; align-items: stretch; gap: 1.25rem;
	background: linear-gradient(135deg, #111827 0%, #1f2937 100%); color: #fff;
	border-radius: var(--vd-radius); padding: 1.25rem 1.4rem; flex-wrap: wrap;
}
.vw-hero { display: flex; flex-direction: column; justify-content: center; min-width: 180px; }
.vw-hero__label { font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.65); display: flex; align-items: center; gap: .4rem; }
.vw-hero__label i { color: var(--vd-primary); }
.vw-hero__value { font-size: 2rem; font-weight: 800; line-height: 1.1; margin: .3rem 0 .15rem; }
.vw-hero__meta { font-size: .72rem; color: rgba(255,255,255,.5); }
.vw-hero__split { display: flex; gap: 1.4rem; align-items: center; border-left: 1px solid rgba(255,255,255,.12); padding-left: 1.25rem; flex-wrap: wrap; }
.vw-mini { display: flex; flex-direction: column; gap: .15rem; }
.vw-mini__label { font-size: .7rem; color: rgba(255,255,255,.55); }
.vw-mini__value { font-size: 1.05rem; font-weight: 700; }
.vw-mini__value--green { color: #4ade80; }
.vw-mini__value--amber { color: #fbbf24; }
.vw-header__actions { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.vw-ghost { background: #fff; }

/* Summary cards */
.vw-summary { grid-template-columns: repeat(4, 1fr); }
.vw-card { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; text-align: left; cursor: default; }
.vw-card:hover { transform: translateY(-2px); border-color: var(--vd-primary); }
.vw-card__top { display: flex; align-items: center; justify-content: space-between; }
.vw-growth { font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; gap: .2rem; padding: .12rem .4rem; border-radius: 999px; }
.vw-growth.is-up { background: #dcfce7; color: #15803d; }
.vw-growth.is-down { background: #fee2e2; color: #b91c1c; }
.vw-card__value { font-size: 1.25rem; font-weight: 800; line-height: 1.15; }
.vw-card__label { font-size: .8rem; color: var(--vd-muted); font-weight: 600; }
.vw-card__compare { font-size: .7rem; color: var(--vd-faint); }

/* Layout */
.vw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.vw-layout__main { display: grid; gap: 1.25rem; min-width: 0; }
.vw-layout__side { display: grid; gap: 1.25rem; position: sticky; top: 1rem; }

/* Chart */
.vw-chart__head { flex-wrap: wrap; gap: .7rem; }
.vw-chart__controls { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.vw-metrics { display: flex; gap: .3rem; flex-wrap: wrap; }
.vw-metric { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; color: var(--vd-muted); background: #f5f6f8; border: 1px solid transparent; border-radius: 999px; padding: .28rem .6rem; cursor: pointer; }
.vw-metric__dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.vw-metric.is-on { color: var(--vd-ink); background: #fff; border-color: var(--m); }
.vw-metric.is-on .vw-metric__dot { background: var(--m); }
.vw-chart__custom { display: flex; gap: .6rem; align-items: flex-end; margin: .8rem 0 0; flex-wrap: wrap; }
.vw-chart__totals { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .9rem 0 .3rem; }
.vw-total { display: flex; align-items: center; gap: .45rem; }
.vw-total__dot { width: 10px; height: 10px; border-radius: 3px; }
.vw-total__meta { display: flex; flex-direction: column; line-height: 1.2; }
.vw-total__meta strong { font-size: .95rem; font-weight: 800; }
.vw-total__meta small { font-size: .68rem; color: var(--vd-faint); text-transform: uppercase; letter-spacing: .03em; }
.vw-chart__canvas { margin-top: .6rem; min-height: 240px; }
.vw-chart__plot { position: relative; }
.vw-chart__svg { width: 100%; height: 240px; display: block; overflow: visible; }
.vw-chart__xlabels { position: relative; height: 16px; margin-top: 2px; }
.vw-chart__xlabels span { position: absolute; transform: translateX(-50%); font-size: .62rem; color: var(--vd-faint); white-space: nowrap; }
.vw-chart__tip { position: absolute; top: 0; transform: translateX(-50%); background: #111827; color: #fff; font-size: .72rem; padding: .5rem .65rem; border-radius: 8px; pointer-events: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(17,24,39,.25); z-index: 5; }
.vw-chart__tip strong { display: block; margin-bottom: .2rem; }
.vw-dot { transition: r .15s; }
.vw-chart__svg:hover .vw-dot { r: 3; }

/* Transaction table */
.vw-txn-id { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 800; color: var(--vd-primary); font-variant-numeric: tabular-nums; }
.vw-txn-id:hover { text-decoration: underline; }
.vw-type { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .82rem; }
.vw-type__icon { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; }
.vw-type__icon--credit { background: #dcfce7; color: #15803d; }
.vw-type__icon--debit { background: #fee2e2; color: #b91c1c; }
.vw-credit { color: #15803d; font-weight: 700; font-variant-numeric: tabular-nums; }
.vw-debit { color: #b91c1c; font-weight: 700; font-variant-numeric: tabular-nums; }
.vw-balance { font-weight: 700; font-variant-numeric: tabular-nums; }
.vw-amt { max-width: 90px; }

/* Insights */
.vw-spark { width: 100%; height: 48px; display: block; }
.vw-spark__note { margin: .4rem 0 0; font-size: .72rem; color: var(--vd-faint); }
.vw-insights { display: grid; gap: .8rem; }
.vw-insight { display: flex; align-items: center; gap: .7rem; }
.vw-insight .vd-stat__icon { width: 38px; height: 38px; font-size: .85rem; border-radius: 10px; flex-shrink: 0; }
.vw-insight__meta { display: flex; flex-direction: column; line-height: 1.25; }
.vw-insight__meta strong { font-size: .95rem; }
.vw-insight__meta small { font-size: .74rem; color: var(--vd-muted); }
.vw-rate { margin-top: .3rem; }
.vw-rate__row { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: .3rem; }
.vw-rate__row strong { font-weight: 800; }

/* Transaction detail modal */
.vw-modal.is-open { display: flex; }
.vw-txn__amount { font-size: 1.8rem; font-weight: 800; display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.vw-txn__amount--credit { color: #15803d; }
.vw-txn__amount--debit { color: #b91c1c; }
.vw-txn__amount .vd-badge { font-size: .7rem; }
.vw-txn__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1rem; }
.vw-txn__note { font-size: .84rem; color: #374151; white-space: pre-line; }

/* Responsive */
@media (max-width: 1200px) {
	.vw-summary { grid-template-columns: repeat(4, 1fr); }
	.vw-layout { grid-template-columns: minmax(0, 1fr); }
	.vw-layout__side { position: static; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.vw-summary { grid-template-columns: repeat(2, 1fr); }
	.vw-header__balances { flex-direction: column; }
	.vw-hero__split { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding-left: 0; padding-top: .9rem; }
}
@media (max-width: 768px) {
	.vw-layout__side { grid-template-columns: 1fr; }
	.vw-txn__grid { grid-template-columns: 1fr; }
	.vw-header__actions { width: 100%; }
	.vw-header__actions .vd-btn { flex: 1; justify-content: center; }
	.vw-chart__svg { height: 200px; }
}
@media (max-width: 480px) {
	.vw-summary { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Questions & Answers (vq-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.vq-stats { grid-template-columns: repeat(4, 1fr); }
.vq-list { display: grid; gap: 1rem; }
.vq-list.vd-is-loading { opacity: .55; pointer-events: none; }
.vq-empty { padding: 2.5rem; text-align: center; }

.vq-card { background: #fff; border: var(--vd-border); border-radius: var(--vd-radius); padding: 1.1rem 1.25rem; }
.vq-card__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.vq-card__avatar { border-radius: 50%; flex-shrink: 0; }
.vq-card__who { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.vq-card__asker { font-weight: 700; font-size: .88rem; }
.vq-card__meta { font-size: .74rem; color: var(--vd-faint); }
.vq-card__meta a { color: var(--vd-muted); text-decoration: none; }
.vq-card__meta a:hover { color: var(--vd-primary); }
.vq-card__question { margin: 0 0 .8rem; font-size: .92rem; color: #1f2937; font-weight: 600; line-height: 1.55; }
.vq-card__question::before { content: "Q"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--vd-primary); color: #fff; font-size: .68rem; font-weight: 800; margin-right: .45rem; vertical-align: 1px; }

.vq-answer { background: #f0fdf4; border-left: 3px solid #22c55e; border-radius: 8px; padding: .6rem .8rem; margin-bottom: .7rem; }
.vq-answer__label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #15803d; display: flex; align-items: center; gap: .3rem; }
.vq-answer__text { margin: .25rem 0 0; font-size: .84rem; color: #374151; white-space: pre-line; }

.vq-form { display: block; }
.vq-form .vq-input { width: 100%; resize: vertical; min-height: 44px; }
.vq-form__actions { display: flex; gap: .5rem; margin-top: .5rem; }
.vq-danger { color: var(--vd-red); }
.vq-danger:hover { border-color: var(--vd-red); }

@media (max-width: 1200px) { .vq-stats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .vq-stats { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════════════════════════════════════════════════════════════
   Store settings (vs-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.vs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.vs-main { display: grid; gap: 1.25rem; min-width: 0; }
.vs-side { display: grid; gap: 1.25rem; position: sticky; top: 1rem; }
.vs-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.vs-field--full { grid-column: 1 / -1; }
.vs-hint { font-size: .76rem; color: var(--vd-faint); margin: .6rem 0 0; }

/* Branding banner + logo */
.vs-banner { position: relative; height: 150px; border-radius: 12px; background: #f1f3f5 center/cover no-repeat; display: flex; align-items: flex-end; padding: .8rem; }
.vs-logo { position: absolute; left: 1rem; bottom: -22px; width: 76px; height: 76px; border-radius: 16px; background: #fff; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(17,24,39,.15); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.vs-logo img { width: 100%; height: 100%; object-fit: cover; }
.vs-logo span { font-weight: 800; color: var(--vd-primary); font-size: 1.4rem; }
.vs-brand-actions { margin-left: auto; display: flex; gap: .45rem; }
.vs-form .vs-banner + input + .vs-hint { margin-top: 1.9rem; }

/* Vacation switch */
.vs-switch { display: flex; align-items: center; gap: .6rem; cursor: pointer; margin-bottom: .5rem; }
.vs-switch input { position: absolute; opacity: 0; }
.vs-switch__slider { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #d1d5db; transition: background .15s; flex-shrink: 0; }
.vs-switch__slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.vs-switch input:checked + .vs-switch__slider { background: #f59e0b; }
.vs-switch input:checked + .vs-switch__slider::after { transform: translateX(18px); }
.vs-switch__label { font-weight: 600; font-size: .88rem; }
.vs-save { width: 100%; justify-content: center; }

@media (max-width: 1200px) { .vs-grid { grid-template-columns: minmax(0,1fr); } .vs-side { position: static; } }
@media (max-width: 640px)  { .vs-fields { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Inventory (vi-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.vi-stats { grid-template-columns: repeat(4, 1fr); }
.vi-stock { display: inline-flex; align-items: center; gap: .3rem; }
.vi-stock .vi-step { width: 30px; height: 34px; min-height: 0; padding: 0; border: 1px solid #e5e7eb; background: #f5f6f8; border-radius: 8px; cursor: pointer; font-size: 1rem; color: var(--vd-ink); }
.vi-stock .vi-step:hover { border-color: var(--vd-primary); color: var(--vd-primary); }
.vi-stock .vi-qty { width: 64px; height: 34px; text-align: center; border: 1px solid #e5e7eb; border-radius: 8px; font-weight: 700; }
.vi-stock .vi-save { margin-left: .2rem; }
.vi-unmanaged { color: var(--vd-faint); font-size: .8rem; font-style: italic; }

/* Track toggle */
.vi-toggle { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.vi-toggle input { position: absolute; opacity: 0; }
.vi-toggle span { position: absolute; inset: 0; background: #d1d5db; border-radius: 999px; transition: background .15s; }
.vi-toggle span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.vi-toggle input:checked + span { background: #22c55e; }
.vi-toggle input:checked + span::after { transform: translateX(18px); }

.vi-bulk-amount { max-width: 90px; }

/* Change-log modal */
.vi-modal.is-open { display: flex; }
.vi-log { display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; padding: .55rem 0; border-bottom: 1px solid #f3f4f6; }
.vi-log__name { font-weight: 600; font-size: .85rem; }
.vi-log__delta { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.vi-log__delta.is-up { color: #15803d; }
.vi-log__delta.is-down { color: #b91c1c; }
.vi-log__meta { grid-column: 1 / -1; font-size: .74rem; color: var(--vd-faint); }

@media (max-width: 1200px) { .vi-stats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .vi-stats { grid-template-columns: repeat(2, 1fr); } }