/*
   ShopAccount / GC MMO-inspired product UI
   This layer is intentionally last in the cascade. It consolidates the shared
   visual language without changing page handlers or business data.
*/

:root {
    --gcmmo-brand: #f43f5e;
    --gcmmo-brand-hover: #e11d48;
    --gcmmo-brand-soft: #fff1f3;
    --gcmmo-brand-border: #fecdd3;
    --gcmmo-ink: #18181b;
    --gcmmo-muted: #71717a;
    --gcmmo-subtle: #f7f7f8;
    --gcmmo-surface: #ffffff;
    --gcmmo-line: #e7e7ea;
    --gcmmo-line-strong: #d4d4d8;
    --gcmmo-success: #16a34a;
    --gcmmo-warning: #d97706;
    --gcmmo-danger: #dc2626;
    --gcmmo-radius-sm: 8px;
    --gcmmo-radius-md: 12px;
    --gcmmo-radius-lg: 16px;
    --gcmmo-shadow: 0 12px 34px rgb(24 24 27 / 6%);
    --gcmmo-shadow-soft: 0 5px 18px rgb(24 24 27 / 5%);
    --gcmmo-motion: 180ms cubic-bezier(.2, .7, .2, 1);
}

html {
    scroll-behavior: smooth;
}

body.marketplace-surface,
body.admin-surface {
    color: var(--gcmmo-ink);
    background: var(--gcmmo-subtle);
    font-family: Inter, "Be Vietnam Pro", "Segoe UI Variable Text", "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
}

body.marketplace-surface :is(button, input, select, textarea),
body.admin-surface :is(button, input, select, textarea) {
    font: inherit;
}

body.marketplace-surface :is(h1, h2, h3, h4, .market-brand b),
body.admin-surface :is(h1, h2, h3, h4, .brand b) {
    letter-spacing: -.025em;
}

body.marketplace-surface a,
body.admin-surface a {
    transition: color var(--gcmmo-motion), background-color var(--gcmmo-motion), border-color var(--gcmmo-motion), box-shadow var(--gcmmo-motion), transform var(--gcmmo-motion);
}

body.marketplace-surface :is(button, .mock-primary, .mock-secondary, .market-buy-now, .market-register, .topup-button),
body.admin-surface :is(button, .button, .mock-primary, .table-action, .danger-action) {
    transition: color var(--gcmmo-motion), background-color var(--gcmmo-motion), border-color var(--gcmmo-motion), box-shadow var(--gcmmo-motion), transform var(--gcmmo-motion);
}

body.marketplace-surface :is(button, .mock-primary, .mock-secondary, .market-buy-now, .market-register, .topup-button):hover,
body.admin-surface :is(button, .button, .mock-primary, .table-action, .danger-action):hover {
    transform: translateY(-1px);
}

body.marketplace-surface :is(input, select, textarea),
body.admin-surface :is(input, select, textarea) {
    border-color: var(--gcmmo-line);
    border-radius: var(--gcmmo-radius-sm);
    background: var(--gcmmo-surface);
    color: var(--gcmmo-ink);
    font-size: 13px;
}

body.marketplace-surface :is(input, select, textarea):focus,
body.admin-surface :is(input, select, textarea):focus {
    border-color: var(--gcmmo-brand);
    box-shadow: 0 0 0 3px rgb(244 63 94 / 12%);
    outline: 0;
}

/* One bordered surface for every search field with an embedded icon. */
.unified-search-field {
    min-width: 0;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--gcmmo-line);
    border-radius: 10px;
    background: var(--gcmmo-surface);
    padding: 0 10px;
    color: var(--gcmmo-ink);
    cursor: text;
    transition: border-color var(--gcmmo-motion), box-shadow var(--gcmmo-motion), background-color var(--gcmmo-motion);
}

.unified-search-field:focus-within {
    border-color: var(--gcmmo-brand);
    box-shadow: 0 0 0 3px rgb(244 63 94 / 12%);
}

.unified-search-field > .ui-icon {
    position: static !important;
    inset: auto !important;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--gcmmo-muted);
    pointer-events: none;
}

.unified-search-field > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    width: 100%;
    min-width: 0;
    min-height: 38px !important;
    height: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: inherit;
}

/* Shared motion hooks are added by site.js. */
.ui-reveal {
    --ui-reveal-delay: 0ms;
}

.ui-motion-ready .ui-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 460ms cubic-bezier(.2, .7, .2, 1) var(--ui-reveal-delay), transform 460ms cubic-bezier(.2, .7, .2, 1) var(--ui-reveal-delay);
}

.ui-motion-ready .ui-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Public marketplace shell */
body.marketplace-surface {
    --market-max: 1120px;
    background: #fff;
}

body.marketplace-surface .market-container {
    width: min(calc(100% - 40px), var(--market-max));
}

body.marketplace-surface .market-announcement-strip {
    min-height: 28px;
    border-bottom-color: var(--gcmmo-line);
    background: #fff;
    color: var(--gcmmo-muted);
    font-size: 11px;
}

body.marketplace-surface .market-announcement-strip strong {
    border-radius: 6px;
    background: var(--gcmmo-brand);
    padding: 4px 9px;
    font-size: 9px;
    letter-spacing: .04em;
}

body.marketplace-surface .market-announcement-strip > .market-container {
    gap: 14px;
}

body.marketplace-surface .market-header {
    border-bottom-color: var(--gcmmo-line);
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 7px 22px rgb(24 24 27 / 4%);
    backdrop-filter: blur(18px);
}

body.marketplace-surface .market-header-main {
    min-height: 66px;
    grid-template-columns: auto minmax(240px, 340px) minmax(300px, 1fr) auto;
    gap: 14px;
}

body.marketplace-surface .market-brand {
    gap: 8px;
}

body.marketplace-surface .market-brand > .market-brand-mark {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: var(--gcmmo-brand);
    box-shadow: 0 7px 16px rgb(244 63 94 / 20%);
}

body.marketplace-surface .market-brand b {
    color: var(--gcmmo-ink);
    font-size: 18px;
    font-weight: 800;
}

body.marketplace-surface .market-search {
    height: 40px;
    border-color: var(--gcmmo-line);
    border-radius: 10px;
    background: #fff;
}

body.marketplace-surface .market-search input[type="search"] {
    color: var(--gcmmo-ink);
    font-size: 12px;
}

body.marketplace-surface .market-primary-nav {
    gap: 2px;
}

body.marketplace-surface .market-primary-nav a {
    min-height: 66px;
    border-bottom-width: 2px;
    padding-inline: 11px;
    color: #3f3f46;
    font-size: 12px;
    font-weight: 700;
}

body.marketplace-surface .market-primary-nav a:hover,
body.marketplace-surface .market-primary-nav a.active {
    border-bottom-color: var(--gcmmo-brand);
    color: var(--gcmmo-brand-hover);
}

body.marketplace-surface .market-actions {
    gap: 6px;
}

body.marketplace-surface .market-action-link,
body.marketplace-surface .market-account,
body.marketplace-surface .market-wallet-shortcut,
body.marketplace-surface .market-login,
body.marketplace-surface .market-register {
    border-radius: 9px;
}

body.marketplace-surface .market-wallet-shortcut,
body.marketplace-surface .market-login {
    border-color: var(--gcmmo-line);
    background: #fff;
    color: #3f3f46;
}

body.marketplace-surface .market-register,
body.marketplace-surface .market-action-link.admin-access-button {
    background: var(--gcmmo-brand);
    color: #fff;
}

body.marketplace-surface .market-register:hover,
body.marketplace-surface .market-action-link.admin-access-button:hover {
    background: var(--gcmmo-brand-hover);
    box-shadow: 0 7px 16px rgb(244 63 94 / 20%);
}

body.marketplace-surface .market-account-dropdown {
    border-color: var(--gcmmo-line);
    border-radius: var(--gcmmo-radius-md);
    box-shadow: 0 18px 50px rgb(24 24 27 / 13%);
}

body.marketplace-surface .market-account-links a.active {
    border-color: var(--gcmmo-brand-border);
    background: var(--gcmmo-brand-soft);
    color: var(--gcmmo-brand-hover);
}

body.marketplace-surface .market-home-hero {
    min-height: 570px;
    border-bottom: 1px solid var(--gcmmo-line);
    background: #fff;
    padding-block: 64px 34px;
}

body.marketplace-surface .market-home-hero > .market-container {
    align-items: center;
    gap: 44px;
}

body.marketplace-surface .market-home-copy {
    max-width: 570px;
}

body.marketplace-surface .market-home-copy h1 {
    max-width: 570px;
    color: var(--gcmmo-ink);
    font-size: clamp(38px, 4vw, 52px);
    font-weight: 820;
    line-height: 1.01;
    letter-spacing: -.055em;
}

body.marketplace-surface .market-home-copy h1 em {
    display: block;
    max-width: 560px;
    color: var(--gcmmo-brand);
    font-style: normal;
    overflow-wrap: anywhere;
    white-space: normal;
}

body.marketplace-surface .market-home-copy > p:not(.market-home-eyebrow) {
    max-width: 500px;
    color: var(--gcmmo-muted);
    font-size: 14px;
    line-height: 1.75;
}

body.marketplace-surface .market-home-eyebrow {
    color: var(--gcmmo-brand-hover);
    font-size: 10px;
    font-weight: 820;
    letter-spacing: .16em;
}

body.marketplace-surface .market-home-actions {
    gap: 10px;
    margin-top: 26px;
}

body.marketplace-surface .market-home-actions :is(a, .mock-primary, .mock-secondary) {
    min-height: 44px;
    border-radius: 9px;
    padding-inline: 18px;
    font-size: 13px;
    font-weight: 760;
}

body.marketplace-surface .market-home-actions .mock-primary {
    background: var(--gcmmo-brand);
    box-shadow: 0 10px 20px rgb(244 63 94 / 18%);
}

body.marketplace-surface .market-home-actions .mock-secondary {
    border: 1px solid var(--gcmmo-line);
    background: #fff;
    color: var(--gcmmo-ink);
}

body.marketplace-surface .market-home-showcase {
    max-width: 500px;
}

body.marketplace-surface .market-home-showcase img {
    filter: drop-shadow(0 22px 35px rgb(24 24 27 / 10%));
}

body.marketplace-surface .market-home-assurance,
body.marketplace-surface .market-assurance-band {
    border: 1px solid var(--gcmmo-line);
    border-radius: var(--gcmmo-radius-md);
    background: #fff;
    box-shadow: var(--gcmmo-shadow-soft);
}

body.marketplace-surface .market-home-assurance > span,
body.marketplace-surface .market-assurance-band > span {
    padding: 17px 18px;
}

body.marketplace-surface .market-home-assurance .ui-icon,
body.marketplace-surface .market-assurance-band .ui-icon {
    color: var(--gcmmo-brand);
}

body.marketplace-surface .market-home-products,
body.marketplace-surface .market-home-flow,
body.marketplace-surface .market-catalog-page,
body.marketplace-surface .market-product-page,
body.marketplace-surface .market-store-page,
body.marketplace-surface .market-checkout-page {
    padding-block: 42px;
}

body.marketplace-surface .market-home-products > header,
body.marketplace-surface .market-page-heading,
body.marketplace-surface .market-results-toolbar {
    border-color: var(--gcmmo-line);
}

body.marketplace-surface .market-home-products > header h2,
body.marketplace-surface .market-page-heading h1,
body.marketplace-surface .market-results-toolbar h2 {
    color: var(--gcmmo-ink);
    font-size: 25px;
    font-weight: 800;
}

body.marketplace-surface .market-home-product-tabs a.active,
body.marketplace-surface .market-home-product-tabs a:hover,
body.marketplace-surface .market-results-toolbar a.active {
    color: var(--gcmmo-brand-hover);
}

body.marketplace-surface .shop-product-grid,
body.marketplace-surface .market-related-grid {
    gap: 16px;
}

body.marketplace-surface .shop-product-card,
body.marketplace-surface .market-product-card,
body.marketplace-surface .market-seller-card,
body.marketplace-surface .market-purchase-panel,
body.marketplace-surface .market-product-detail-card {
    border: 1px solid var(--gcmmo-line);
    border-radius: var(--gcmmo-radius-md);
    background: #fff;
    box-shadow: var(--gcmmo-shadow-soft);
}

body.marketplace-surface .shop-product-card:hover,
body.marketplace-surface .market-product-card:hover,
body.marketplace-surface .market-seller-card:hover {
    border-color: var(--gcmmo-brand-border);
    box-shadow: var(--gcmmo-shadow);
    transform: translateY(-3px);
}

body.marketplace-surface .shop-product-art,
body.marketplace-surface .market-product-image,
body.marketplace-surface .preview-product-art {
    border-radius: 11px;
    background: #f4f4f5;
}

body.marketplace-surface .shop-product-copy h2 a,
body.marketplace-surface .market-product-card h2 a {
    color: var(--gcmmo-ink);
    font-size: 15px;
    font-weight: 760;
}

body.marketplace-surface .shop-product-copy p,
body.marketplace-surface .market-product-card p {
    color: var(--gcmmo-muted);
    font-size: 12px;
}

body.marketplace-surface .shop-price strong,
body.marketplace-surface .market-product-card .price,
body.marketplace-surface .market-purchase-total strong {
    color: var(--gcmmo-brand-hover);
    font-size: 18px;
    font-weight: 820;
}

body.marketplace-surface .product-card-actions .buy,
body.marketplace-surface .market-buy-now,
body.marketplace-surface .market-coupon-field button,
body.marketplace-surface .market-filter-submit {
    border-radius: 8px;
    background: var(--gcmmo-brand);
    color: #fff;
    font-weight: 760;
}

body.marketplace-surface .product-card-actions .buy:hover,
body.marketplace-surface .market-buy-now:hover,
body.marketplace-surface .market-coupon-field button:hover,
body.marketplace-surface .market-filter-submit:hover {
    background: var(--gcmmo-brand-hover);
    box-shadow: 0 8px 18px rgb(244 63 94 / 18%);
}

/* Catalog, product, store and checkout */
body.marketplace-surface .market-catalog-layout,
body.marketplace-surface .market-product-lead,
body.marketplace-surface .market-checkout-page,
body.marketplace-surface .market-store-content {
    align-items: start;
    gap: 20px;
}

body.marketplace-surface .market-filter-panel,
body.marketplace-surface .market-gallery-stage,
body.marketplace-surface .market-product-summary,
body.marketplace-surface .checkout-order-review,
body.marketplace-surface .checkout-payment-card,
body.marketplace-surface .market-store-cover,
body.marketplace-surface .market-store-identity {
    border-color: var(--gcmmo-line);
    border-radius: var(--gcmmo-radius-md);
    background: #fff;
    box-shadow: var(--gcmmo-shadow-soft);
}

body.marketplace-surface .market-filter-panel {
    position: sticky;
    top: 90px;
    padding: 18px;
}

body.marketplace-surface .market-filter-panel header h2,
body.marketplace-surface .market-store-identity h1,
body.marketplace-surface .checkout-order-review h2,
body.marketplace-surface .checkout-payment-card h2 {
    color: var(--gcmmo-ink);
    font-size: 17px;
    font-weight: 780;
}

body.marketplace-surface .market-category-filter a.active,
body.marketplace-surface .market-stock-filter a.active,
body.marketplace-surface .market-currency-filter a.active {
    border-color: var(--gcmmo-brand-border);
    background: var(--gcmmo-brand-soft);
    color: var(--gcmmo-brand-hover);
}

body.marketplace-surface .market-gallery-stage {
    min-height: 410px;
    padding: 22px;
}

body.marketplace-surface .market-gallery-thumbs button.active {
    border-color: var(--gcmmo-brand);
    box-shadow: 0 0 0 3px rgb(244 63 94 / 10%);
}

body.marketplace-surface .market-product-labels mark,
body.marketplace-surface .discount-chip,
body.marketplace-surface .status-pill {
    border-radius: 999px;
    font-size: 11px;
    font-weight: 760;
}

body.marketplace-surface .market-product-tabs a.active {
    border-color: var(--gcmmo-brand);
    color: var(--gcmmo-brand-hover);
}

body.marketplace-surface .market-store-cover {
    min-height: 170px;
    overflow: hidden;
}

body.marketplace-surface .market-store-avatar {
    border: 4px solid #fff;
    box-shadow: 0 6px 16px rgb(24 24 27 / 12%);
}

body.marketplace-surface .market-store-content {
    padding-top: 24px;
}

body.marketplace-surface .checkout-price-lines,
body.marketplace-surface .checkout-protection-row,
body.marketplace-surface .market-product-spec-strip {
    border-color: var(--gcmmo-line);
}

/* Shared customer workspace pages */
body.customer-surface .workspace-main {
    padding: 30px 34px 72px;
}

body.customer-surface .workspace-context small,
body.customer-surface .admin-title .eyebrow,
body.customer-surface .orders-eyebrow {
    color: var(--gcmmo-brand-hover);
    font-size: 10px;
    font-weight: 820;
    letter-spacing: .12em;
}

body.customer-surface .mock-panel,
body.customer-surface .account-overview-card,
body.customer-surface .account-settings-panel,
body.customer-surface .profile-information-card,
body.customer-surface .profile-security-card,
body.customer-surface .orders-list-pane,
body.customer-surface .order-detail-pane,
body.customer-surface .wallet-payment-panel,
body.customer-surface .wallet-aside {
    border: 1px solid var(--gcmmo-line);
    border-radius: var(--gcmmo-radius-md);
    background: #fff;
    box-shadow: var(--gcmmo-shadow-soft);
}

body.customer-surface .dashboard-welcome,
body.customer-surface .account-profile-hero {
    border-radius: var(--gcmmo-radius-lg);
    background: linear-gradient(120deg, #fff 0%, #fff7f8 100%);
    box-shadow: var(--gcmmo-shadow-soft);
}

body.customer-surface .dashboard-welcome h1,
body.customer-surface .account-profile-hero h1,
body.customer-surface .wallet-page h1,
body.customer-surface .orders-page-heading h1 {
    color: var(--gcmmo-ink);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 820;
    line-height: 1.08;
}

body.customer-surface .dashboard-welcome h1 em {
    color: var(--gcmmo-brand);
    font-style: normal;
}

body.customer-surface .mock-kpi,
body.customer-surface .profile-purchase-metrics > div,
body.customer-surface .metric-grid > div {
    border: 1px solid var(--gcmmo-line);
    border-radius: var(--gcmmo-radius-md);
    background: #fff;
    box-shadow: var(--gcmmo-shadow-soft);
}

body.customer-surface .kpi-icon,
body.customer-surface .metric-icon {
    border-radius: 10px;
}

body.customer-surface .mock-tabs,
body.customer-surface .admin-tabs,
body.customer-surface .payment-tabs {
    gap: 4px;
}

body.customer-surface .mock-tabs > *,
body.customer-surface .admin-tabs > *,
body.customer-surface .payment-tabs > * {
    border-radius: 7px;
    color: var(--gcmmo-muted);
    font-size: 12px;
    font-weight: 700;
}

body.customer-surface .mock-tabs > *.active,
body.customer-surface .admin-tabs > *.active,
body.customer-surface .payment-tabs > *.active {
    background: var(--gcmmo-brand-soft);
    color: var(--gcmmo-brand-hover);
}

body.customer-surface .status-pill.success,
body.customer-surface mark.success,
body.admin-surface .status-pill.success {
    background: #ecfdf3;
    color: #15803d;
}

body.customer-surface .notice,
body.admin-surface .notice {
    border-radius: var(--gcmmo-radius-sm);
    box-shadow: var(--gcmmo-shadow-soft);
}

/* Admin shell: airy enough to read, dense enough to operate. */
body.admin-surface {
    --gcmmo-admin-rail: 264px;
    background: #f7f7f8;
}

body.admin-surface .app-shell {
    display: grid;
    grid-template-columns: var(--gcmmo-admin-rail) minmax(0, 1fr);
    min-height: 100dvh;
    background: #f7f7f8;
}

body.admin-surface .side-rail {
    position: sticky;
    top: 0;
    z-index: 90;
    height: 100dvh;
    overflow-y: auto;
    border-right: 1px solid var(--gcmmo-line);
    background: #fff;
    padding: 18px 14px;
}

body.admin-surface .side-rail .brand {
    height: 42px;
    margin: 0 8px 18px;
}

body.admin-surface .side-rail .brand > span {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--gcmmo-brand);
    color: #fff;
    font-size: 16px;
    font-weight: 850;
}

body.admin-surface .side-rail .brand b {
    color: var(--gcmmo-ink);
    font-size: 16px;
    font-weight: 820;
}

body.admin-surface .rail-nav {
    gap: 4px;
}

body.admin-surface .rail-nav-label,
body.admin-surface .rail-nav > small {
    margin: 14px 10px 6px;
    color: #a1a1aa;
    font-size: 10px;
    font-weight: 820;
    letter-spacing: .1em;
}

body.admin-surface .rail-nav > a,
body.admin-surface .rail-nav-group > summary,
body.admin-surface .rail-nav-group-links > a,
body.admin-surface .rail-nav-store {
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #52525b;
    font-size: 12px;
    font-weight: 680;
}

body.admin-surface .rail-nav > a:hover,
body.admin-surface .rail-nav-group > summary:hover,
body.admin-surface .rail-nav-group-links > a:hover,
body.admin-surface .rail-nav > a.active,
body.admin-surface .rail-nav-group-links > a.active {
    border-color: var(--gcmmo-brand-border);
    background: var(--gcmmo-brand-soft);
    color: var(--gcmmo-brand-hover);
}

body.admin-surface .rail-nav-group > summary {
    list-style: none;
    cursor: pointer;
}

body.admin-surface .rail-nav-group > summary::-webkit-details-marker {
    display: none;
}

body.admin-surface .rail-nav-group-links {
    display: grid;
    gap: 2px;
    padding: 3px 0 3px 16px;
}

body.admin-surface .rail-nav-group-links > a {
    min-height: 34px;
    font-size: 11px;
}

body.admin-surface .rail-nav-group-links > a .ui-icon {
    width: 15px;
    height: 15px;
}

body.admin-surface .rail-nav-store {
    margin-top: 18px;
    border-color: var(--gcmmo-line);
    background: #fafafa;
}

body.admin-surface .rail-support {
    margin: 20px 4px 0;
    border: 1px solid var(--gcmmo-brand-border);
    border-radius: var(--gcmmo-radius-md);
    background: var(--gcmmo-brand-soft);
    padding: 13px;
}

body.admin-surface .workspace {
    min-width: 0;
    background: #f7f7f8;
}

body.admin-surface .topbar {
    position: sticky;
    top: 0;
    z-index: 70;
    min-height: 66px;
    border-bottom: 1px solid var(--gcmmo-line);
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 7px 20px rgb(24 24 27 / 3%);
    backdrop-filter: blur(18px);
}

body.admin-surface .global-search {
    height: 40px;
    border-color: var(--gcmmo-line);
    border-radius: 10px;
    background: #fff;
}

body.admin-surface .global-search:focus-within {
    border-color: var(--gcmmo-brand);
    box-shadow: 0 0 0 3px rgb(244 63 94 / 12%);
}

body.admin-surface .top-actions > :is(a, button),
body.admin-surface .account-chip {
    border-radius: 9px;
}

body.admin-surface .workspace-main {
    min-width: 0;
    padding: 34px 40px 76px;
}

body.admin-surface .admin-page {
    width: min(100%, 1320px);
    margin-inline: auto;
}

body.admin-surface .admin-title {
    align-items: end;
    margin-bottom: 24px;
}

body.admin-surface .admin-title h1 {
    margin-top: 4px;
    color: var(--gcmmo-ink);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 820;
    line-height: 1.08;
}

body.admin-surface .admin-title > div > p:last-child {
    max-width: 680px;
    color: var(--gcmmo-muted);
    font-size: 13px;
}

body.admin-surface .admin-panel,
body.admin-surface .mock-panel,
body.admin-surface .config-card,
body.admin-surface .environment-card,
body.admin-surface .maintenance-card,
body.admin-surface .bank-list-card,
body.admin-surface .bank-global-settings,
body.admin-surface .marketing-side-column > *,
body.admin-surface .marketing-main-grid > * {
    border: 1px solid var(--gcmmo-line);
    border-radius: var(--gcmmo-radius-md);
    background: #fff;
    box-shadow: var(--gcmmo-shadow-soft);
}

body.admin-surface .metric-grid {
    gap: 14px;
    margin-bottom: 18px;
}

body.admin-surface .metric-grid > div {
    min-height: 118px;
    border: 1px solid var(--gcmmo-line);
    border-radius: var(--gcmmo-radius-md);
    background: #fff;
    box-shadow: var(--gcmmo-shadow-soft);
    padding: 18px;
}

body.admin-surface .metric-grid > div strong {
    color: var(--gcmmo-ink);
    font-size: 24px;
    font-weight: 820;
}

body.admin-surface .metric-grid > div em,
body.admin-surface .metric-grid > div small {
    color: var(--gcmmo-muted);
    font-size: 11px;
}

body.admin-surface .admin-grid,
body.admin-surface .admin-order-grid,
body.admin-surface .admin-users-filter,
body.admin-surface .product-editor-layout,
body.admin-surface .warehouse-browser,
body.admin-surface .marketing-main-grid {
    gap: 18px;
}

body.admin-surface .admin-panel > header,
body.admin-surface .panel-heading,
body.admin-surface .detail-pane-heading,
body.admin-surface .admin-panel > .panel-heading {
    border-bottom-color: var(--gcmmo-line);
    padding: 18px 20px;
}

body.admin-surface .admin-panel > header h2,
body.admin-surface .panel-heading h2,
body.admin-surface .detail-pane-heading h2 {
    color: var(--gcmmo-ink);
    font-size: 16px;
    font-weight: 780;
}

body.admin-surface .admin-panel > header small,
body.admin-surface .panel-heading p,
body.admin-surface .detail-pane-heading p {
    color: var(--gcmmo-muted);
    font-size: 11px;
}

body.admin-surface .data-table,
body.admin-surface .mock-table,
body.admin-surface .products-management-table,
body.admin-surface .users-management-table,
body.admin-surface .warehouse-inventory-table,
body.admin-surface .permission-table,
body.admin-surface .coupon-modern-table,
body.admin-surface .bank-config-table {
    overflow: auto;
}

body.admin-surface .data-row,
body.admin-surface .mock-tr,
body.admin-surface .product-admin-row,
body.admin-surface .user-row-tools,
body.admin-surface .warehouse-inventory-table > *,
body.admin-surface .audit-row,
body.admin-surface .queue-row {
    min-height: 54px;
    border-bottom-color: var(--gcmmo-line);
    color: #3f3f46;
    font-size: 12px;
}

body.admin-surface .data-head,
body.admin-surface .mock-th {
    min-height: 42px;
    background: #fafafa;
    color: #71717a;
    font-size: 10px;
    font-weight: 820;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.admin-surface .data-row:hover,
body.admin-surface .mock-tr:hover,
body.admin-surface .product-admin-row:hover,
body.admin-surface .audit-row:hover,
body.admin-surface .queue-row:hover {
    background: #fff9fa;
}

body.admin-surface .admin-form,
body.admin-surface .form-grid,
body.admin-surface .admin-form-grid,
body.admin-surface .settings-grid {
    gap: 14px;
}

body.admin-surface .admin-form label,
body.admin-surface .admin-form-grid label,
body.admin-surface .settings-grid label,
body.admin-surface .form-grid label {
    color: #52525b;
    font-size: 12px;
    font-weight: 700;
}

body.admin-surface .admin-form :is(input, select, textarea),
body.admin-surface .admin-form-grid :is(input, select, textarea),
body.admin-surface .settings-grid :is(input, select, textarea),
body.admin-surface .form-grid :is(input, select, textarea) {
    min-height: 42px;
    margin-top: 6px;
    border-color: var(--gcmmo-line);
    border-radius: 9px;
    background: #fff;
    padding-inline: 12px;
    font-size: 13px;
}

body.admin-surface .admin-form textarea,
body.admin-surface .admin-form-grid textarea,
body.admin-surface .settings-grid textarea,
body.admin-surface .form-grid textarea {
    min-height: 104px;
    padding-block: 10px;
}

body.admin-surface .button,
body.admin-surface .mock-primary,
body.admin-surface button.mock-primary {
    min-height: 40px;
    border: 1px solid var(--gcmmo-brand);
    border-radius: 9px;
    background: var(--gcmmo-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 780;
    padding-inline: 15px;
}

body.admin-surface .button:hover,
body.admin-surface .mock-primary:hover,
body.admin-surface button.mock-primary:hover {
    border-color: var(--gcmmo-brand-hover);
    background: var(--gcmmo-brand-hover);
    box-shadow: 0 8px 18px rgb(244 63 94 / 16%);
}

body.admin-surface .table-action,
body.admin-surface .danger-action {
    min-height: 34px;
    border: 1px solid var(--gcmmo-line);
    border-radius: 8px;
    background: #fff;
    color: #52525b;
    font-size: 11px;
    font-weight: 720;
    padding-inline: 11px;
}

body.admin-surface .danger-action {
    border-color: #fecaca;
    background: #fff7f7;
    color: #b91c1c;
}

body.admin-surface .admin-tabs,
body.admin-surface .page-tabs {
    border-bottom-color: var(--gcmmo-line);
}

body.admin-surface .admin-tabs > *.active,
body.admin-surface .page-tabs > *.active {
    border-color: var(--gcmmo-brand);
    background: var(--gcmmo-brand-soft);
    color: var(--gcmmo-brand-hover);
}

body.admin-surface .empty-state,
body.admin-surface .warehouse-data-empty,
body.admin-surface .warehouse-sales-empty,
body.admin-surface .warehouse-selector-empty {
    border: 1px dashed var(--gcmmo-line-strong);
    border-radius: var(--gcmmo-radius-md);
    background: #fff;
    color: var(--gcmmo-muted);
    padding: 36px 24px;
    text-align: center;
}

body.admin-surface .status-pill,
body.admin-surface .ticket-status,
body.admin-surface .transaction-state {
    border-radius: 999px;
    font-size: 10px;
    font-weight: 780;
}

body.admin-surface .site-footer {
    border-top-color: var(--gcmmo-line);
    background: #fff;
    color: var(--gcmmo-muted);
}

/* Shared dark mode */
html[data-color-scheme="dark"] body.marketplace-surface,
html[data-color-scheme="dark"] body.admin-surface {
    --gcmmo-ink: #fafafa;
    --gcmmo-muted: #a1a1aa;
    --gcmmo-subtle: #070707;
    --gcmmo-surface: #111111;
    --gcmmo-line: #292929;
    --gcmmo-line-strong: #3f3f46;
    --gcmmo-brand-soft: #2a1117;
    --gcmmo-brand-border: #6f1d2d;
    background: #070707;
    color: #fafafa;
}

html[data-color-scheme="dark"] body.marketplace-surface .market-header,
html[data-color-scheme="dark"] body.marketplace-surface .market-announcement-strip,
html[data-color-scheme="dark"] body.admin-surface .side-rail,
html[data-color-scheme="dark"] body.admin-surface .topbar,
html[data-color-scheme="dark"] body.admin-surface .site-footer {
    border-color: #292929;
    background: rgb(7 7 7 / 94%);
    color: #fafafa;
}

html[data-color-scheme="dark"] body.marketplace-surface .market-home-hero,
html[data-color-scheme="dark"] body.marketplace-surface .market-home-flow,
html[data-color-scheme="dark"] body.marketplace-surface .market-home-products,
html[data-color-scheme="dark"] body.marketplace-surface .market-catalog-page,
html[data-color-scheme="dark"] body.marketplace-surface .market-product-page,
html[data-color-scheme="dark"] body.marketplace-surface .market-store-page,
html[data-color-scheme="dark"] body.customer-surface .dashboard-welcome,
html[data-color-scheme="dark"] body.admin-surface .workspace,
html[data-color-scheme="dark"] body.admin-surface .app-shell {
    background: #070707;
}

html[data-color-scheme="dark"] body.marketplace-surface :is(.market-search, .market-wallet-shortcut, .market-login, .market-home-assurance, .market-assurance-band, .shop-product-card, .market-product-card, .market-filter-panel, .market-gallery-stage, .market-product-summary, .checkout-order-review, .checkout-payment-card, .market-store-cover, .market-store-identity, .market-account-dropdown),
html[data-color-scheme="dark"] body.customer-surface :is(.mock-panel, .mock-kpi, .account-overview-card, .account-settings-panel, .profile-information-card, .profile-security-card, .orders-list-pane, .order-detail-pane, .wallet-payment-panel, .wallet-aside),
html[data-color-scheme="dark"] body.admin-surface :is(.admin-panel, .mock-panel, .metric-grid > div, .config-card, .environment-card, .maintenance-card, .bank-list-card, .bank-global-settings, .marketing-main-grid > *, .marketing-side-column > *, .empty-state, .warehouse-data-empty, .warehouse-sales-empty, .warehouse-selector-empty) {
    border-color: #292929;
    background: #111111;
    box-shadow: 0 12px 34px rgb(0 0 0 / 26%);
}

html[data-color-scheme="dark"] body.marketplace-surface .market-home-showcase img {
    filter: drop-shadow(0 24px 40px rgb(45 212 191 / 16%));
}

html[data-color-scheme="dark"] body.marketplace-surface .market-home-copy h1 em,
html[data-color-scheme="dark"] body.marketplace-surface .market-primary-nav a.active,
html[data-color-scheme="dark"] body.marketplace-surface .market-primary-nav a:hover {
    color: #2dd4bf;
}

html[data-color-scheme="dark"] body.marketplace-surface .market-home-actions .mock-primary {
    background: #2dd4bf;
    border-color: #2dd4bf;
    color: #06221e;
}

html[data-color-scheme="dark"] body.marketplace-surface .market-home-actions .mock-secondary,
html[data-color-scheme="dark"] body.marketplace-surface .market-wallet-shortcut,
html[data-color-scheme="dark"] body.marketplace-surface .market-login {
    border-color: #292929;
    background: #111;
    color: #fafafa;
}

html[data-color-scheme="dark"] body.marketplace-surface :is(.market-brand b, .market-home-copy h1, .market-home-products > header h2, .market-page-heading h1, .market-results-toolbar h2, .shop-product-copy h2 a, .market-product-card h2 a, .market-filter-panel header h2, .market-store-identity h1, .checkout-order-review h2, .checkout-payment-card h2),
html[data-color-scheme="dark"] body.admin-surface :is(.brand b, .admin-title h1, .admin-panel > header h2, .panel-heading h2, .detail-pane-heading h2, .metric-grid > div strong) {
    color: #fafafa;
}

html[data-color-scheme="dark"] body.marketplace-surface .shop-price strong,
html[data-color-scheme="dark"] body.marketplace-surface .market-product-card .price,
html[data-color-scheme="dark"] body.marketplace-surface .market-purchase-total strong {
    color: #fb7185;
}

html[data-color-scheme="dark"] body.admin-surface .rail-nav > a,
html[data-color-scheme="dark"] body.admin-surface .rail-nav-group > summary,
html[data-color-scheme="dark"] body.admin-surface .rail-nav-group-links > a,
html[data-color-scheme="dark"] body.admin-surface .rail-nav-store {
    color: #a1a1aa;
}

html[data-color-scheme="dark"] body.admin-surface .rail-nav > a:hover,
html[data-color-scheme="dark"] body.admin-surface .rail-nav-group > summary:hover,
html[data-color-scheme="dark"] body.admin-surface .rail-nav-group-links > a:hover,
html[data-color-scheme="dark"] body.admin-surface .rail-nav > a.active,
html[data-color-scheme="dark"] body.admin-surface .rail-nav-group-links > a.active {
    border-color: #6f1d2d;
    background: #2a1117;
    color: #fb7185;
}

html[data-color-scheme="dark"] body.admin-surface :is(.global-search, .admin-form :is(input, select, textarea), .admin-form-grid :is(input, select, textarea), .settings-grid :is(input, select, textarea), .form-grid :is(input, select, textarea), .table-action) {
    border-color: #292929;
    background: #111;
    color: #fafafa;
}

html[data-color-scheme="dark"] body.admin-surface .data-head,
html[data-color-scheme="dark"] body.admin-surface .mock-th {
    background: #171717;
    color: #a1a1aa;
}

html[data-color-scheme="dark"] body.admin-surface .data-row:hover,
html[data-color-scheme="dark"] body.admin-surface .mock-tr:hover,
html[data-color-scheme="dark"] body.admin-surface .product-admin-row:hover,
html[data-color-scheme="dark"] body.admin-surface .audit-row:hover,
html[data-color-scheme="dark"] body.admin-surface .queue-row:hover {
    background: #1b1114;
}

/* Fixed activity ticker from the reference, kept small and non-blocking. */
body.marketplace-surface .market-live-ticker {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 75;
    display: flex;
    gap: 32px;
    overflow: hidden;
    min-height: 25px;
    border-top: 1px solid var(--gcmmo-line);
    background: rgb(255 255 255 / 94%);
    color: var(--gcmmo-muted);
    font-size: 10px;
    line-height: 25px;
    white-space: nowrap;
    backdrop-filter: blur(14px);
}

body.marketplace-surface .market-live-ticker::before {
    flex: 0 0 auto;
    content: "●  Hoạt động mua bán mới nhất";
    margin-left: max(20px, calc((100vw - var(--market-max)) / 2));
    color: var(--gcmmo-brand-hover);
    font-weight: 780;
}

body.marketplace-surface .market-live-ticker-track {
    display: inline-flex;
    gap: 36px;
    animation: gcmmo-ticker 28s linear infinite;
}

@keyframes gcmmo-ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-45%); }
}

html[data-color-scheme="dark"] body.marketplace-surface .market-live-ticker {
    border-color: #292929;
    background: rgb(7 7 7 / 94%);
}

/* Responsive boundaries */
@media (max-width: 1180px) {
    body.marketplace-surface .market-header-main {
        grid-template-columns: auto minmax(220px, 1fr) auto;
    }

    body.marketplace-surface .market-navigation {
        grid-column: 1 / -1;
        grid-row: 2;
        display: none;
    }

    body.marketplace-surface.market-nav-open .market-navigation {
        display: block;
    }

    body.marketplace-surface .market-header-main {
        min-height: 64px;
    }

    body.marketplace-surface .market-primary-nav a {
        min-height: 44px;
    }

    body.marketplace-surface .market-menu-toggle {
        display: inline-grid;
    }
}

@media (max-width: 1000px) {
    body.admin-surface .workspace-main,
    body.customer-surface .workspace-main {
        padding-inline: 24px;
    }

    body.admin-surface .side-rail {
        width: var(--gcmmo-admin-rail);
    }

    body.marketplace-surface .market-home-hero > .market-container {
        grid-template-columns: 1fr;
    }

    body.marketplace-surface .market-home-showcase {
        max-width: 540px;
        margin-inline: auto;
    }
}

@media (max-width: 760px) {
    body.marketplace-surface .market-container {
        width: min(calc(100% - 28px), var(--market-max));
    }

    body.marketplace-surface .market-header-main {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
    }

    body.marketplace-surface .market-brand b {
        font-size: 16px;
    }

    body.marketplace-surface .market-search {
        height: 38px;
    }

    body.marketplace-surface .market-actions > :is(.market-wallet-shortcut, .market-login, .market-register),
    body.marketplace-surface .market-account-trigger-name {
        display: none;
    }

    body.marketplace-surface .market-home-hero {
        min-height: auto;
        padding-block: 40px 24px;
    }

    body.marketplace-surface .market-home-copy h1 {
        font-size: clamp(34px, 10vw, 48px);
    }

    body.marketplace-surface .market-home-methods,
    body.marketplace-surface .market-home-assurance,
    body.marketplace-surface .market-assurance-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.marketplace-surface .market-catalog-layout,
    body.marketplace-surface .market-product-lead,
    body.marketplace-surface .market-store-content,
    body.marketplace-surface .checkout-review-layout {
        grid-template-columns: 1fr;
    }

    body.marketplace-surface .market-filter-panel {
        position: static;
    }

    body.admin-surface .app-shell {
        display: block;
    }

    body.admin-surface .side-rail {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, 290px);
        transform: translateX(-102%);
        transition: transform 220ms ease;
        box-shadow: 18px 0 40px rgb(24 24 27 / 16%);
    }

    body.admin-surface.nav-open .side-rail {
        transform: none;
    }

    body.admin-surface .workspace-main,
    body.customer-surface .workspace-main {
        padding: 24px 16px 64px;
    }

    body.admin-surface .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.admin-surface .admin-title {
        align-items: start;
        gap: 12px;
    }

    body.marketplace-surface .market-live-ticker::before {
        margin-left: 12px;
    }
}

@media (max-width: 520px) {
    body.marketplace-surface .market-home-methods,
    body.marketplace-surface .market-home-assurance,
    body.marketplace-surface .market-assurance-band,
    body.admin-surface .metric-grid {
        grid-template-columns: 1fr;
    }

    body.marketplace-surface .market-home-actions {
        align-items: stretch;
        flex-direction: column;
    }

    body.marketplace-surface .market-home-actions > a {
        justify-content: center;
    }

    body.marketplace-surface .shop-product-grid,
    body.marketplace-surface .market-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.marketplace-surface .shop-product-copy h2 a,
    body.marketplace-surface .market-product-card h2 a {
        font-size: 13px;
    }

    body.admin-surface .admin-title h1 {
        font-size: 28px;
    }
}

/* Final responsive containment fixes found during browser QA. */
body.admin-surface :is(.admin-page, .products-admin-grid, .products-table-column, .products-table-column > .mock-panel) {
    min-width: 0;
}

@media (max-width: 760px) {
    body.marketplace-surface .market-announcement-strip {
        overflow: hidden;
    }

    body.marketplace-surface .market-announcement-strip > .market-container {
        width: 100%;
        min-width: 0;
        padding-inline: 14px;
        overflow: hidden;
    }

    body.marketplace-surface .market-announcement-strip > .market-container > :is(i, span:nth-of-type(n + 2)) {
        display: none;
    }

    body.marketplace-surface .market-announcement-strip > .market-container > span:first-of-type {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.admin-surface .admin-products-page :is(.products-admin-grid, .products-table-column, .mock-panel) {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    body.admin-surface .admin-products-page .products-management-table {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    body.admin-surface .admin-products-page .products-management-table .mock-tr {
        min-width: 720px;
    }

    body.admin-surface .admin-products-page .table-command-bar > div {
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 3px;
    }
}
/* Generic grid item containment for legacy Admin page compositions. */
body.admin-surface .admin-page :is(.form-grid, .marketing-main-grid, .users-admin-layout) > * {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 760px) {
    body.admin-surface .admin-page .admin-users-filter {
        grid-template-columns: 1fr;
    }

    body.admin-surface .admin-page :is(.data-table, .mock-table) {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }
}
/* Product and profile mobile containment from the full storefront crawl. */
body.account-workspace-surface .profile-media-input {
    width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
}

@media (max-width: 760px) {
    body.marketplace-surface .market-product-primary,
    body.marketplace-surface .market-product-secondary {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    body.marketplace-surface .market-product-primary > *,
    body.marketplace-surface .market-purchase-panel form,
    body.marketplace-surface .market-package-options {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    body.marketplace-surface .market-gallery-stage {
        width: 100%;
        min-height: 0;
        max-width: 100%;
        aspect-ratio: 4 / 3;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .ui-motion-ready .ui-reveal {
        opacity: 1;
        transform: none;
    }
}


/* Deterministic service-aware artwork used whenever a product has no uploaded image. */
.product-fallback-visual {
    --pf-primary: #0f766e;
    --pf-secondary: #12364f;
    --pf-accent: #99f6e4;
    --pf-ink: #ffffff;
    position: relative;
    z-index: 1;
    isolation: isolate;
    container-type: inline-size;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(12px, 5%, 24px);
    color: var(--pf-ink);
    background:
        radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--pf-accent) 72%, transparent) 0, transparent 27%),
        radial-gradient(circle at 10% 105%, color-mix(in srgb, var(--pf-accent) 42%, transparent) 0, transparent 34%),
        linear-gradient(138deg, var(--pf-primary), var(--pf-secondary));
    text-align: left;
}

.product-fallback-visual::before {
    display: none;
    content: "";
    position: absolute;
    z-index: -2;
    inset: -25% -12% auto auto;
    width: 70%;
    aspect-ratio: 1;
    border: clamp(18px, 5cqw, 34px) solid color-mix(in srgb, var(--pf-ink) 11%, transparent);
    border-radius: 50%;
    transform: rotate(-14deg);
}

.product-fallback-visual::after {
    content: "";
    position: absolute;
    z-index: -3;
    inset: 0;
    opacity: .2;
    background-image: radial-gradient(circle, currentColor 1px, transparent 1.2px);
    background-size: 18px 18px;
    mask-image: linear-gradient(115deg, #000, transparent 58%);
}

.product-fallback-network {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: color-mix(in srgb, var(--pf-accent) 78%, transparent);
    stroke: color-mix(in srgb, var(--pf-ink) 25%, transparent);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.product-fallback-network path:last-of-type { stroke-dasharray: 7 10; }

.product-fallback-top,
.product-fallback-brand,
.product-fallback-copy {
    position: relative;
    z-index: 2;
}

.product-fallback-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.product-fallback-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(7px, 3.1cqw, 10px);
    font-weight: 800;
    letter-spacing: .13em;
    white-space: nowrap;
    opacity: .82;
}

.product-fallback-kicker i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--pf-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-accent) 17%, transparent);
}

.product-fallback-variant {
    font: 750 clamp(8px, 3cqw, 11px)/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    opacity: .46;
}

.product-fallback-brand {
    display: flex;
    align-items: center;
    gap: clamp(9px, 3.5cqw, 15px);
    margin-block: auto;
    transition: transform .28s ease;
}

.product-fallback-logo {
    flex: 0 0 auto;
    width: clamp(42px, 17cqw, 72px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--pf-ink) 30%, transparent);
    border-radius: 24%;
    background: color-mix(in srgb, var(--pf-ink) 14%, transparent);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--pf-secondary) 38%, transparent);
    backdrop-filter: blur(9px);
}

.product-fallback-logo svg {
    width: 58%;
    height: 58%;
    fill: currentColor;
}

.product-fallback-logo svg .is-cutout { fill: var(--pf-primary); }
.product-fallback-logo svg .is-stroke {
    fill: none;
    stroke: var(--pf-primary);
    stroke-linecap: round;
    stroke-width: 3;
}

.product-fallback-wordmark-icon {
    font-size: clamp(26px, 11cqw, 48px);
    font-weight: 900;
    letter-spacing: -.09em;
}

.product-fallback-wordmark-icon.is-wide { font-size: clamp(18px, 7cqw, 31px); }
.product-fallback-wordmark-icon.is-zalo { font-size: clamp(13px, 5.5cqw, 24px); letter-spacing: -.07em; }
.product-fallback-brand > span:last-child { min-width: 0; }
.product-fallback-brand strong,
.product-fallback-brand small { display: block; }

.product-fallback-brand strong {
    overflow: hidden;
    font-size: clamp(18px, 7.5cqw, 34px);
    font-weight: 850;
    letter-spacing: -.045em;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-fallback-brand small {
    margin-top: 6px;
    color: color-mix(in srgb, var(--pf-ink) 76%, transparent);
    font-size: clamp(8px, 3.2cqw, 12px);
    font-weight: 720;
}

.product-fallback-copy {
    display: grid;
    gap: 7px;
}

.product-fallback-copy > strong {
    display: -webkit-box;
    overflow: hidden;
    max-width: 92%;
    font-size: clamp(11px, 4.2cqw, 17px);
    font-weight: 780;
    line-height: 1.25;
    letter-spacing: -.015em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-fallback-copy > span {
    width: max-content;
    max-width: 90%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--pf-ink) 22%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--pf-secondary) 27%, transparent);
    font-size: clamp(7px, 2.8cqw, 10px);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.product-fallback-copy > span i {
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--pf-accent);
    box-shadow: 0 0 8px var(--pf-accent);
}

.product-fallback--v1::before { inset: auto auto -38% -8%; }
.product-fallback--v1 .product-fallback-network { transform: scaleX(-1); }
.product-fallback--v2::before { inset: -32% auto auto -12%; }
.product-fallback--v2 .product-fallback-logo { border-radius: 50%; }
.product-fallback--v3::before { inset: auto -18% -45% auto; }
.product-fallback--v3 .product-fallback-network { transform: scaleY(-1); }
.product-fallback--v4::before { inset: -38% -20% auto auto; transform: rotate(28deg); }
.product-fallback--v4 .product-fallback-logo { transform: rotate(-4deg); }
.product-fallback--v5::before { inset: 18% auto auto -32%; }
.product-fallback--v5 .product-fallback-network { transform: rotate(180deg); }

.product-fallback--facebook { --pf-primary: #1877f2; --pf-secondary: #0b3475; --pf-accent: #b9d7ff; }
.product-fallback--tiktok { --pf-primary: #15151f; --pf-secondary: #05050a; --pf-accent: #25f4ee; }
.product-fallback--tiktok .product-fallback-logo { box-shadow: -7px -4px 0 rgba(37, 244, 238, .28), 7px 5px 0 rgba(254, 44, 85, .28); }
.product-fallback--instagram { --pf-primary: #833ab4; --pf-secondary: #c9284d; --pf-accent: #fcb045; }
.product-fallback--instagram .product-fallback-logo svg { fill: none; stroke: currentColor; stroke-width: 4; }
.product-fallback--instagram .product-fallback-logo svg .is-filled { fill: currentColor; stroke: none; }
.product-fallback--youtube { --pf-primary: #ff2435; --pf-secondary: #82000d; --pf-accent: #ffd0d4; }
.product-fallback--gmail { --pf-primary: #ea4335; --pf-secondary: #9b1912; --pf-accent: #fbbc04; }
.product-fallback--outlook { --pf-primary: #0078d4; --pf-secondary: #003a71; --pf-accent: #8ed4ff; }
.product-fallback--telegram { --pf-primary: #2aabee; --pf-secondary: #0876ad; --pf-accent: #c5eeff; }
.product-fallback--discord { --pf-primary: #5865f2; --pf-secondary: #27318f; --pf-accent: #d2d5ff; }
.product-fallback--zalo { --pf-primary: #0874f9; --pf-secondary: #003b9d; --pf-accent: #c7e4ff; }
.product-fallback--x { --pf-primary: #202735; --pf-secondary: #030712; --pf-accent: #d9e1ef; }
.product-fallback--linkedin { --pf-primary: #0a66c2; --pf-secondary: #003d78; --pf-accent: #b9ddff; }
.product-fallback--spotify { --pf-primary: #1db954; --pf-secondary: #07552b; --pf-accent: #b6ffd0; }
.product-fallback--netflix { --pf-primary: #e50914; --pf-secondary: #4c0005; --pf-accent: #ffc2c5; }
.product-fallback--canva { --pf-primary: #00aeb7; --pf-secondary: #7133b7; --pf-accent: #b9fbff; }
.product-fallback--capcut { --pf-primary: #34363c; --pf-secondary: #08090b; --pf-accent: #ffffff; }
.product-fallback--pinterest { --pf-primary: #e60023; --pf-secondary: #780013; --pf-accent: #ffc5ce; }
.product-fallback--shopee { --pf-primary: #ee4d2d; --pf-secondary: #9d2512; --pf-accent: #ffd2c9; }
.product-fallback--snapchat { --pf-primary: #fff300; --pf-secondary: #e0bd00; --pf-accent: #161616; --pf-ink: #161616; }
.product-fallback--ocean { --pf-primary: #087f8c; --pf-secondary: #123568; --pf-accent: #8ff5ee; }
.product-fallback--violet { --pf-primary: #7556de; --pf-secondary: #342071; --pf-accent: #decfff; }
.product-fallback--sunset { --pf-primary: #ef6a3c; --pf-secondary: #a72649; --pf-accent: #ffe08a; }
.product-fallback--forest { --pf-primary: #17845b; --pf-secondary: #174434; --pf-accent: #a9f5c9; }
.product-fallback--midnight { --pf-primary: #2c55a5; --pf-secondary: #0d1a3e; --pf-accent: #b8ccff; }
.product-fallback--coral { --pf-primary: #ef5b62; --pf-secondary: #863356; --pf-accent: #ffd3c1; }

.market-product-media > .product-fallback-visual,
.shop-product-art > .product-fallback-visual,
.market-gallery-stage > .product-fallback-visual,
.checkout-product-image > .product-fallback-visual {
    position: absolute;
    inset: 0;
}

.market-product-card:hover .product-fallback-brand { transform: translateY(-2px); }
.market-gallery-stage > .product-fallback-visual { padding-bottom: 84px; }
.checkout-product-image > .product-fallback-visual { padding: 10px; }
.checkout-product-image .product-fallback-top,
.checkout-product-image .product-fallback-copy,
.checkout-product-image .product-fallback-brand > span:last-child,
.checkout-product-image .product-fallback-network { display: none; }
.checkout-product-image .product-fallback-brand { justify-content: center; margin: auto; }
.checkout-product-image .product-fallback-logo { width: 58px; }

@container (min-width: 500px) {
    .product-fallback-brand strong { font-size: 36px; }
    .product-fallback-copy > strong { max-width: 72%; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .product-fallback-brand { transition: none; }
}


@media (max-width: 640px) {
    .market-product-media .product-fallback-visual { padding: 10px; }
    .market-product-media .product-fallback-kicker { gap: 4px; font-size: 6px; letter-spacing: .08em; }
    .market-product-media .product-fallback-brand { gap: 6px; }
    .market-product-media .product-fallback-logo { width: 34px; }
    .market-product-media .product-fallback-brand strong { font-size: 12px; }
    .market-product-media .product-fallback-brand small { margin-top: 3px; font-size: 7px; }
    .market-product-media .product-fallback-copy > strong { max-width: 100%; font-size: 9px; }
    .market-product-media .product-fallback-copy > span { max-width: 100%; padding: 4px 6px; font-size: 6px; }
}


/* Compact customer dashboard v2 */
.commerce-workspace .dashboard-v2 {
    --dash-surface: #ffffff;
    --dash-page: #f4f6f8;
    --dash-ink: #17181c;
    --dash-muted: #687386;
    --dash-line: #dfe4ea;
    --dash-line-soft: #edf0f3;
    --dash-accent: #ff4658;
    --dash-accent-dark: #e93246;
    --dash-accent-soft: #fff0f2;
    --dash-blue: #2563eb;
    --dash-blue-soft: #eef5ff;
    max-width: 1480px;
    margin: 0 auto;
    padding: 24px 24px 40px;
    color: var(--dash-ink);
}

.commerce-workspace .dashboard-v2 .mock-panel {
    overflow: hidden;
    border: 1px solid var(--dash-line);
    border-radius: 14px;
    background: var(--dash-surface);
    box-shadow: 0 5px 18px rgba(28, 39, 55, .045);
}

.commerce-workspace .dashboard-command-band {
    min-height: 148px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--dash-line);
    border-radius: 15px;
    background: var(--dash-surface);
    box-shadow: 0 6px 20px rgba(28, 39, 55, .045);
}

.commerce-workspace .dashboard-command-intro {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
    padding: 20px 26px;
}

.commerce-workspace .dashboard-user-mark {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--dash-accent-soft);
    color: var(--dash-accent);
}

.commerce-workspace .dashboard-user-mark .ui-icon {
    width: 32px;
    height: 32px;
}

.commerce-workspace .dashboard-command-intro h1 {
    margin: 0;
    color: var(--dash-ink);
    font-size: clamp(22px, 2vw, 29px);
    font-weight: 820;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.commerce-workspace .dashboard-command-intro > div > p {
    margin: 3px 0 0;
    color: var(--dash-accent);
    font-size: clamp(21px, 2vw, 29px);
    font-weight: 820;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.commerce-workspace .dashboard-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.commerce-workspace .dashboard-command-actions :is(.mock-primary, .mock-secondary) {
    min-height: 38px;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: none;
}

.commerce-workspace .dashboard-command-actions .mock-primary {
    background: var(--dash-accent);
}

.commerce-workspace .dashboard-command-actions .mock-primary:hover {
    background: var(--dash-accent-dark);
}

.commerce-workspace .dashboard-command-actions .mock-secondary {
    border-color: var(--dash-line);
    color: #344054;
}

.commerce-workspace .dashboard-command-actions .ui-icon {
    width: 15px;
    height: 15px;
}

.commerce-workspace .dashboard-wallet-summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
    padding: 22px 26px;
    border-left: 1px solid var(--dash-line);
    color: var(--dash-ink);
    text-decoration: none;
    transition: background .18s ease;
}

.commerce-workspace .dashboard-wallet-summary:hover {
    background: #f9fbff;
}

.commerce-workspace .dashboard-wallet-summary > span {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: grid;
    place-items: center;
    border: 1px solid #bdd1ff;
    border-radius: 13px;
    background: var(--dash-blue-soft);
    color: var(--dash-blue);
}

.commerce-workspace .dashboard-wallet-summary > span .ui-icon {
    width: 27px;
    height: 27px;
}

.commerce-workspace .dashboard-wallet-summary div {
    min-width: 0;
}

.commerce-workspace .dashboard-wallet-summary :is(small, strong, em) {
    display: block;
}

.commerce-workspace .dashboard-wallet-summary small {
    color: var(--dash-muted);
    font-size: 11px;
    font-weight: 720;
}

.commerce-workspace .dashboard-wallet-summary strong {
    margin: 4px 0 2px;
    color: var(--dash-blue);
    font-family: "Bricolage Grotesque", Manrope, sans-serif;
    font-size: clamp(22px, 2vw, 29px);
    font-weight: 820;
    line-height: 1;
    white-space: nowrap;
}

.commerce-workspace .dashboard-wallet-summary em {
    color: var(--dash-muted);
    font-size: 10px;
    font-style: normal;
}

.commerce-workspace .dashboard-wallet-arrow {
    width: 16px;
    margin-left: auto;
    color: #98a2b3;
    transform: rotate(-90deg);
}

.commerce-workspace .dashboard-kpi-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--dash-line);
    border-radius: 13px;
    background: var(--dash-surface);
    box-shadow: 0 4px 16px rgba(28, 39, 55, .035);
}

.commerce-workspace .dashboard-kpi-rail > article {
    min-width: 0;
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 17px;
    border-left: 1px solid var(--dash-line);
}

.commerce-workspace .dashboard-kpi-rail > article:first-child {
    border-left: 0;
}

.commerce-workspace .dashboard-kpi-rail .kpi-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid currentColor;
    border-radius: 10px;
    background: transparent;
}

.commerce-workspace .dashboard-kpi-rail .kpi-icon .ui-icon {
    width: 19px;
    height: 19px;
}

.commerce-workspace .dashboard-kpi-rail .kpi-icon.blue { color: #2563eb; background: #eef5ff; border-color: #bfd2ff; }
.commerce-workspace .dashboard-kpi-rail .kpi-icon.green { color: #059669; background: #ecfdf5; border-color: #b7ead6; }
.commerce-workspace .dashboard-kpi-rail .kpi-icon.purple { color: #4f73df; background: #f1f5ff; border-color: #c6d2fa; }
.commerce-workspace .dashboard-kpi-rail .kpi-icon.orange { color: #d97706; background: #fff7ed; border-color: #fed7aa; }
.commerce-workspace .dashboard-kpi-rail .kpi-icon.cyan { color: #ef3f55; background: #fff1f3; border-color: #fecdd3; }

.commerce-workspace .dashboard-kpi-rail :is(small, strong, em) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.commerce-workspace .dashboard-kpi-rail small {
    color: var(--dash-muted);
    font-size: 10px;
    font-weight: 720;
    white-space: nowrap;
}

.commerce-workspace .dashboard-kpi-rail strong {
    margin: 4px 0 2px;
    color: var(--dash-ink);
    font-family: "Bricolage Grotesque", Manrope, sans-serif;
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
}

.commerce-workspace .dashboard-kpi-rail em {
    color: var(--dash-muted);
    font-size: 8px;
    font-style: normal;
    white-space: nowrap;
}

.commerce-workspace .dashboard-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.3fr) minmax(310px, 1fr);
    align-items: start;
    gap: 14px;
    margin-top: 14px;
}

.commerce-workspace .dashboard-utility-rail {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.commerce-workspace .dashboard-v2 .panel-heading {
    min-height: 61px;
    align-items: flex-start;
    padding: 14px 16px;
    border-bottom: 1px solid var(--dash-line-soft);
}

.commerce-workspace .dashboard-v2 .panel-heading h2 {
    margin: 0 0 4px;
    color: var(--dash-ink);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.commerce-workspace .dashboard-v2 .panel-heading p {
    margin: 0;
    color: var(--dash-muted);
    font-size: 10px;
    line-height: 1.4;
}

.commerce-workspace .dashboard-v2 .panel-heading > a {
    color: var(--dash-accent);
    font-size: 10px;
    font-weight: 780;
    white-space: nowrap;
}

.commerce-workspace .dashboard-v2 .recent-order-tabs {
    min-height: 42px;
    gap: 4px;
    padding: 0 12px;
    overflow-x: auto;
    border-bottom-color: var(--dash-line);
}

.commerce-workspace .dashboard-v2 .recent-order-tabs button {
    min-height: 42px;
    padding: 9px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #667085;
    font-size: 10px;
    font-weight: 730;
}

.commerce-workspace .dashboard-v2 .recent-order-tabs button.active {
    border-bottom-color: var(--dash-accent);
    color: var(--dash-accent);
}

.commerce-workspace .dashboard-v2 .dashboard-order-table .mock-tr {
    grid-template-columns: minmax(235px, 2fr) .55fr .8fr .85fr .85fr;
    min-height: 52px;
    padding: 8px 16px;
    gap: 12px;
    border-top-color: var(--dash-line-soft);
    font-size: 10px;
}

.commerce-workspace .dashboard-v2 .dashboard-order-table .mock-th {
    min-height: 36px;
    background: #f8f9fb;
    color: #778195;
    font-size: 8px;
    letter-spacing: .04em;
}

.commerce-workspace .dashboard-v2 .dashboard-order-table .product-cell i {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(145deg, #111827, #273551);
    font-size: 13px;
}

.commerce-workspace .dashboard-v2 .dashboard-order-table .product-cell b {
    color: var(--dash-ink);
    font-size: 10px;
    white-space: nowrap;
}

.commerce-workspace .dashboard-v2 .dashboard-order-table .product-cell small {
    font-size: 7px;
}

.commerce-workspace .dashboard-v2 .dashboard-order-table .status-pill {
    padding: 5px 8px;
    border: 1px solid #b5e3cf;
    border-radius: 999px;
    font-size: 8px;
}

.commerce-workspace .dashboard-favorite-empty {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 12px;
    border: 1px dashed #d7dde5;
    border-radius: 10px;
    color: #778195;
    font-size: 11px;
}

.commerce-workspace .dashboard-favorite-empty .ui-icon {
    width: 19px;
    height: 19px;
}

.commerce-workspace .dashboard-v2 .favorite-row {
    min-height: 52px;
    padding: 9px 14px;
    font-size: 10px;
}

.commerce-workspace .dashboard-v2 .quick-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.commerce-workspace .dashboard-v2 .quick-action-grid a {
    min-width: 0;
    min-height: 50px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 1px 7px;
    padding: 7px 8px;
    border: 1px solid var(--dash-line);
    border-radius: 9px;
    background: var(--dash-surface);
    color: var(--dash-ink);
    text-align: left;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.commerce-workspace .dashboard-v2 .quick-action-grid a:hover {
    border-color: #ffc1c8;
    background: #fff8f9;
    transform: translateY(-1px);
}

.commerce-workspace .dashboard-v2 .quick-action-grid i {
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: 7px;
}

.commerce-workspace .dashboard-v2 .quick-action-grid i.orange { background: #fff7ed; color: #d97706; }

.commerce-workspace .dashboard-v2 .quick-action-grid b {
    overflow: hidden;
    font-size: 8px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commerce-workspace .dashboard-v2 .quick-action-grid small {
    overflow: hidden;
    color: var(--dash-muted);
    font-size: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commerce-workspace .dashboard-lower-grid {
    display: grid;
    grid-template-columns: .95fr 1.1fr 1fr;
    align-items: stretch;
    gap: 14px;
    margin-top: 14px;
}

.commerce-workspace .dashboard-lower-grid > .mock-panel {
    min-width: 0;
}

.commerce-workspace .dashboard-v2 .deposit-quick .amount-chips {
    gap: 7px;
    padding: 12px 14px 10px;
}

.commerce-workspace .dashboard-v2 .deposit-quick .amount-chips span {
    padding: 8px 5px;
    border-color: var(--dash-line);
    border-radius: 8px;
    background: #fafbfc;
    color: #475467;
    font-size: 8px;
}

.commerce-workspace .dashboard-v2 .deposit-quick > .mock-primary {
    min-height: 36px;
    width: auto;
    margin: 0 14px 14px;
    padding: 9px 13px;
    border-radius: 8px;
    background: var(--dash-accent);
    box-shadow: none;
}

.commerce-workspace .dashboard-v2 .affiliate-mini-stats {
    gap: 8px;
    padding: 12px 14px 10px;
}

.commerce-workspace .dashboard-v2 .affiliate-mini-stats span {
    padding: 9px 10px;
    border-color: var(--dash-line);
    background: #fafbfc;
}

.commerce-workspace .dashboard-v2 .affiliate-mini-stats small {
    color: var(--dash-muted);
    font-size: 8px;
}

.commerce-workspace .dashboard-v2 .affiliate-mini-stats b {
    margin-top: 3px;
    color: #079455;
    font-size: 13px;
}

.commerce-workspace .dashboard-panel-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #fed7aa;
    border-radius: 9px;
    background: #fff7ed;
    color: #d97706;
}

.commerce-workspace .dashboard-panel-icon .ui-icon {
    width: 16px;
    height: 16px;
}

.commerce-workspace .dashboard-v2 .panel-bottom-link {
    padding: 9px 14px;
    color: var(--dash-accent);
    font-size: 9px;
}

.commerce-workspace .dashboard-v2 .support-panel > a {
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-top-color: var(--dash-line-soft);
    color: #344054;
    font-size: 9px;
}

.commerce-workspace .dashboard-v2 .support-panel > a > .ui-icon {
    width: 15px;
    height: 15px;
    color: var(--dash-accent);
}

.commerce-workspace .dashboard-v2 .support-panel > a > span {
    flex: 1;
}

.commerce-workspace .dashboard-v2 .support-panel > a > b {
    color: var(--dash-accent);
}

.commerce-workspace .dashboard-v2 :is(a, button):focus-visible {
    outline: 2px solid var(--dash-accent);
    outline-offset: 2px;
}

html[data-color-scheme="dark"] .commerce-workspace .dashboard-v2 {
    --dash-surface: #111827;
    --dash-page: #0b1220;
    --dash-ink: #f4f6fa;
    --dash-muted: #9aa6b8;
    --dash-line: #293548;
    --dash-line-soft: #222d3e;
    --dash-accent-soft: #381923;
}

html[data-color-scheme="dark"] .commerce-workspace .dashboard-v2 :is(.dashboard-order-table .mock-th, .deposit-quick .amount-chips span, .affiliate-mini-stats span) {
    background: #172132;
}

html[data-color-scheme="dark"] .commerce-workspace .dashboard-wallet-summary:hover,
html[data-color-scheme="dark"] .commerce-workspace .dashboard-v2 .quick-action-grid a:hover {
    background: #192334;
}

html[data-color-scheme="dark"] .commerce-workspace .dashboard-command-actions .mock-secondary,
html[data-color-scheme="dark"] .commerce-workspace .dashboard-v2 .support-panel > a {
    color: #d7deea;
}

@media (max-width: 1180px) {
    .commerce-workspace .dashboard-workspace-grid {
        grid-template-columns: 1fr;
    }

    .commerce-workspace .dashboard-utility-rail {
        grid-template-columns: 1fr 1fr;
    }

    .commerce-workspace .dashboard-lower-grid {
        grid-template-columns: 1fr 1fr;
    }

    .commerce-workspace .dashboard-lower-grid .support-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .commerce-workspace .dashboard-command-band {
        grid-template-columns: 1fr;
    }

    .commerce-workspace .dashboard-wallet-summary {
        border-top: 1px solid var(--dash-line);
        border-left: 0;
    }

    .commerce-workspace .dashboard-kpi-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commerce-workspace .dashboard-kpi-rail > article {
        border-top: 1px solid var(--dash-line);
    }

    .commerce-workspace .dashboard-kpi-rail > article:nth-child(odd) {
        border-left: 0;
    }

    .commerce-workspace .dashboard-kpi-rail > article:nth-child(-n + 2) {
        border-top: 0;
    }

    .commerce-workspace .dashboard-kpi-rail > article:last-child {
        grid-column: 1 / -1;
    }

    .commerce-workspace .dashboard-utility-rail,
    .commerce-workspace .dashboard-lower-grid {
        grid-template-columns: 1fr;
    }

    .commerce-workspace .dashboard-lower-grid .support-panel {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .commerce-workspace .dashboard-v2 {
        padding: 14px 12px 28px;
    }

    .commerce-workspace .dashboard-command-intro {
        align-items: flex-start;
        gap: 12px;
        padding: 17px;
    }

    .commerce-workspace .dashboard-user-mark {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .commerce-workspace .dashboard-user-mark .ui-icon {
        width: 23px;
        height: 23px;
    }

    .commerce-workspace .dashboard-command-intro h1,
    .commerce-workspace .dashboard-command-intro > div > p {
        font-size: 20px;
    }

    .commerce-workspace .dashboard-command-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .commerce-workspace .dashboard-command-actions :is(.mock-primary, .mock-secondary) {
        width: 100%;
    }

    .commerce-workspace .dashboard-wallet-summary {
        padding: 16px 17px;
    }

    .commerce-workspace .dashboard-kpi-rail > article {
        min-height: 75px;
        gap: 8px;
        padding: 11px;
    }

    .commerce-workspace .dashboard-kpi-rail .kpi-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .commerce-workspace .dashboard-kpi-rail strong {
        font-size: 14px;
    }

    .commerce-workspace .dashboard-kpi-rail small {
        font-size: 8px;
    }

    .commerce-workspace .dashboard-kpi-rail em {
        display: none;
    }

    .commerce-workspace .dashboard-v2 .quick-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-workspace .dashboard-v2 :is(a, button) {
        transition: none;
    }
}


/* Compact commerce administration v2 */
body.admin-surface .admin-compact-v2 {
    --admin-v2-surface: #fff;
    --admin-v2-subtle: #fafafa;
    --admin-v2-canvas: #f7f7f8;
    --admin-v2-line: #e4e4e7;
    --admin-v2-line-strong: #d4d4d8;
    --admin-v2-ink: #27272a;
    --admin-v2-muted: #71717a;
    --admin-v2-brand: #ff4658;
    --admin-v2-brand-soft: #fff1f2;
    --admin-v2-radius: 14px;
    width: min(100%, 1440px);
    color: var(--admin-v2-ink);
}

body.admin-surface .workspace-main:has(.admin-compact-v2) {
    padding: 24px 28px 56px;
}

body.admin-surface .admin-compact-v2 .admin-command-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 86px;
    margin: 0 0 12px;
    border: 1px solid var(--admin-v2-line);
    border-radius: var(--admin-v2-radius);
    background: var(--admin-v2-surface);
    box-shadow: none;
    padding: 14px 16px;
}

body.admin-surface .admin-compact-v2 .admin-command-heading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 13px;
}

body.admin-surface .admin-compact-v2 .admin-command-heading > div {
    min-width: 0;
}

body.admin-surface .admin-compact-v2 .admin-command-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid #fecdd3;
    border-radius: 12px;
    background: var(--admin-v2-brand-soft);
    color: var(--admin-v2-brand);
}

body.admin-surface .admin-compact-v2 .admin-command-icon .ui-icon {
    width: 21px;
    height: 21px;
}

body.admin-surface .admin-compact-v2 .admin-command-header .eyebrow {
    margin: 0 0 3px;
    color: var(--admin-v2-brand);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
}

body.admin-surface .admin-compact-v2 .admin-command-header h1 {
    margin: 0;
    color: var(--admin-v2-ink);
    font-size: clamp(20px, 2.2vw, 25px);
    font-weight: 820;
    line-height: 1.18;
    letter-spacing: -.025em;
}

body.admin-surface .admin-compact-v2 .admin-command-header .admin-command-heading p:last-child {
    max-width: 720px;
    margin: 4px 0 0;
    color: var(--admin-v2-muted);
    font-size: 12px;
    line-height: 1.45;
}

body.admin-surface .admin-compact-v2 .admin-command-header > :is(a, button),
body.admin-surface .admin-compact-v2 .admin-command-header .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    flex: 0 0 auto;
    gap: 7px;
    white-space: nowrap;
}

body.admin-surface .admin-compact-v2 .admin-command-header .ui-icon,
body.admin-surface .admin-compact-v2 :is(.mock-primary, .table-action, .button) > .ui-icon {
    width: 15px;
    height: 15px;
}

body.admin-surface .admin-compact-v2 .inline-notice,
body.admin-surface .admin-compact-v2 > .notice {
    margin: 0 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    padding: 10px 13px;
    font-size: 12px;
}

/* Continuous KPI rail */
body.admin-surface .admin-compact-v2 .admin-summary-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    margin: 0 0 12px;
    overflow: hidden;
    border: 1px solid var(--admin-v2-line);
    border-radius: var(--admin-v2-radius);
    background: var(--admin-v2-surface);
    box-shadow: none;
}

body.admin-surface .admin-compact-v2 .admin-summary-rail > article {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 78px;
    gap: 10px;
    border: 0;
    border-left: 1px solid var(--admin-v2-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 12px 13px;
}

body.admin-surface .admin-compact-v2 .admin-summary-rail > article:first-child {
    border-left: 0;
}

body.admin-surface .admin-compact-v2 .admin-summary-rail > article > div {
    min-width: 0;
}

body.admin-surface .admin-compact-v2 .admin-summary-rail .kpi-icon,
body.admin-surface .admin-compact-v2 .warehouse-metric-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid transparent;
    border-radius: 10px;
}

body.admin-surface .admin-compact-v2 .admin-summary-rail .kpi-icon .ui-icon,
body.admin-surface .admin-compact-v2 .warehouse-metric-icon .ui-icon {
    width: 17px;
    height: 17px;
}

body.admin-surface .admin-compact-v2 .admin-summary-rail .kpi-icon.blue,
body.admin-surface .admin-compact-v2 .warehouse-metric-icon.stock {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

body.admin-surface .admin-compact-v2 .admin-summary-rail .kpi-icon.green,
body.admin-surface .admin-compact-v2 .warehouse-metric-icon.live {
    border-color: #bbf7d0;
    background: #ecfdf5;
    color: #059669;
}

body.admin-surface .admin-compact-v2 .admin-summary-rail .kpi-icon.orange,
body.admin-surface .admin-compact-v2 .warehouse-metric-icon.warning {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #ea580c;
}

body.admin-surface .admin-compact-v2 .admin-summary-rail .kpi-icon.purple,
body.admin-surface .admin-compact-v2 .warehouse-metric-icon.sold,
body.admin-surface .admin-compact-v2 .warehouse-metric-icon.revenue {
    border-color: #ddd6fe;
    background: #f5f3ff;
    color: #7c3aed;
}

body.admin-surface .admin-compact-v2 .admin-summary-rail .kpi-icon.red,
body.admin-surface .admin-compact-v2 .admin-summary-rail .kpi-icon.coral,
body.admin-surface .admin-compact-v2 .warehouse-metric-icon.die {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #e11d48;
}

body.admin-surface .admin-compact-v2 .admin-summary-rail small,
body.admin-surface .admin-compact-v2 .admin-summary-rail em {
    display: block;
    overflow: hidden;
    color: var(--admin-v2-muted);
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-surface .admin-compact-v2 .admin-summary-rail small {
    font-size: 9px;
    font-weight: 790;
    letter-spacing: .045em;
    text-transform: uppercase;
}

body.admin-surface .admin-compact-v2 .admin-summary-rail strong {
    display: block;
    overflow: hidden;
    margin: 3px 0 1px;
    color: var(--admin-v2-ink);
    font-size: 18px;
    font-weight: 820;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-surface .admin-compact-v2 .admin-summary-rail em {
    font-size: 10px;
}

/* Shared panels, forms, tabs and tables */
body.admin-surface .admin-compact-v2 :is(.mock-panel, .admin-panel, .admin-form) {
    border-color: var(--admin-v2-line);
    border-radius: var(--admin-v2-radius);
    background: var(--admin-v2-surface);
    box-shadow: none;
}

body.admin-surface .admin-compact-v2 :is(.panel-heading, .detail-pane-heading, .admin-panel > header) {
    min-height: 62px;
    border-bottom: 1px solid var(--admin-v2-line);
    padding: 13px 16px;
}

body.admin-surface .admin-compact-v2 :is(.panel-heading, .detail-pane-heading, .admin-panel > header) h2,
body.admin-surface .admin-compact-v2 .admin-form > h2 {
    margin: 0;
    color: var(--admin-v2-ink);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
}

body.admin-surface .admin-compact-v2 :is(.panel-heading, .detail-pane-heading, .admin-panel > header) p {
    margin: 3px 0 0;
    color: var(--admin-v2-muted);
    font-size: 11px;
    line-height: 1.4;
}

body.admin-surface .admin-compact-v2 .admin-result-count {
    border: 1px solid var(--admin-v2-line);
    border-radius: 999px;
    background: var(--admin-v2-subtle);
    color: var(--admin-v2-muted);
    padding: 6px 9px;
    font-size: 10px;
    font-weight: 750;
}

body.admin-surface .admin-compact-v2 :is(.mock-tabs, .page-tabs) {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 44px;
    overflow-x: auto;
    border: 0;
    border-bottom: 1px solid var(--admin-v2-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 6px 10px 0;
}

body.admin-surface .admin-compact-v2 :is(.mock-tabs, .page-tabs) > a {
    min-height: 34px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    color: var(--admin-v2-muted);
    padding: 8px 11px;
    font-size: 11px;
    font-weight: 720;
    white-space: nowrap;
}

body.admin-surface .admin-compact-v2 :is(.mock-tabs, .page-tabs) > a:hover {
    background: var(--admin-v2-subtle);
    color: var(--admin-v2-ink);
}

body.admin-surface .admin-compact-v2 :is(.mock-tabs, .page-tabs) > a.active {
    border-bottom-color: var(--admin-v2-brand);
    background: var(--admin-v2-brand-soft);
    color: var(--admin-v2-brand);
}

body.admin-surface .admin-compact-v2 :is(.data-table, .mock-table) {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-inline: contain;
    overscroll-behavior-block: auto;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d8 transparent;
}

body.admin-surface .admin-compact-v2 :is(.data-head, .mock-th) {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 40px;
    background: var(--admin-v2-subtle);
    color: var(--admin-v2-muted);
    font-size: 9px;
    font-weight: 820;
    letter-spacing: .055em;
    text-transform: uppercase;
}

body.admin-surface .admin-compact-v2 :is(.data-row, .mock-tr) {
    min-height: 52px;
    border-bottom-color: var(--admin-v2-line);
    color: #3f3f46;
    font-size: 11px;
}

body.admin-surface .admin-compact-v2 :is(.data-row, .mock-tr):hover {
    background: #fff9fa;
}

body.admin-surface .admin-compact-v2 :is(.data-row, .mock-tr) small {
    color: var(--admin-v2-muted);
    font-size: 9px;
    line-height: 1.35;
}

body.admin-surface .admin-compact-v2 .table-command-bar {
    min-height: 50px;
    gap: 10px;
    border-bottom: 1px solid var(--admin-v2-line);
    background: var(--admin-v2-surface);
    padding: 9px 12px;
}

body.admin-surface .admin-compact-v2 .table-command-bar > div {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    flex-wrap: wrap;
}

body.admin-surface .admin-compact-v2 :is(.table-action, .danger-action) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: 8px;
    box-shadow: none;
    line-height: 1;
}

body.admin-surface .admin-compact-v2 .table-action:hover {
    border-color: #fda4af;
    background: var(--admin-v2-brand-soft);
    color: var(--admin-v2-brand);
}

body.admin-surface .admin-compact-v2 :is(input, select, textarea):focus {
    border-color: var(--admin-v2-brand);
    outline: 0;
    box-shadow: 0 0 0 3px rgb(255 70 88 / 11%);
}

body.admin-surface .admin-compact-v2 .status-pill {
    border: 1px solid transparent;
    padding: 4px 7px;
    font-size: 9px;
    font-weight: 780;
}

body.admin-surface .admin-compact-v2 .pagination {
    min-height: 48px;
    margin: 0;
    border-top: 1px solid var(--admin-v2-line);
    padding: 9px 12px;
}

/* Unified filter toolbar */
body.admin-surface .admin-compact-v2 .admin-filter-bar {
    display: grid;
    grid-template-columns: minmax(240px, 1.8fr) minmax(150px, .8fr) minmax(145px, .75fr) auto auto;
    align-items: center;
    gap: 8px;
    margin: 0;
    border-bottom: 1px solid var(--admin-v2-line);
    background: var(--admin-v2-subtle);
    padding: 10px 12px;
}

body.admin-surface .admin-compact-v2 .admin-filter-bar > :is(select, .table-action, .mock-primary),
body.admin-surface .admin-compact-v2 .admin-filter-bar .unified-search-field {
    width: 100%;
    min-height: 38px;
    margin: 0;
}

body.admin-surface .admin-compact-v2 .admin-filter-bar > select,
body.admin-surface .admin-compact-v2 .admin-filter-bar :is(input, select) {
    border: 1px solid var(--admin-v2-line-strong);
    border-radius: 9px;
    background: var(--admin-v2-surface);
    color: var(--admin-v2-ink);
    font-size: 11px;
}

body.admin-surface .admin-compact-v2 .admin-filter-bar .unified-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--admin-v2-line-strong);
    border-radius: 9px;
    background: var(--admin-v2-surface);
    padding: 0 10px;
}

body.admin-surface .admin-compact-v2 .admin-filter-bar .unified-search-field:focus-within {
    border-color: var(--admin-v2-brand);
    box-shadow: 0 0 0 3px rgb(255 70 88 / 11%);
}

body.admin-surface .admin-compact-v2 .admin-filter-bar .unified-search-field input {
    min-width: 0;
    height: 36px;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

body.admin-surface .admin-compact-v2 .admin-advanced-filters {
    grid-column: 1 / -1;
    border-top: 1px solid var(--admin-v2-line);
    margin: 2px -12px -10px;
}

body.admin-surface .admin-compact-v2 .admin-advanced-filters > summary {
    display: flex;
    align-items: center;
    width: max-content;
    min-height: 36px;
    gap: 6px;
    cursor: pointer;
    color: var(--admin-v2-muted);
    padding: 0 12px;
    font-size: 10px;
    font-weight: 750;
    list-style: none;
}

body.admin-surface .admin-compact-v2 .admin-advanced-filters > summary::-webkit-details-marker {
    display: none;
}

body.admin-surface .admin-compact-v2 .admin-advanced-filters > summary .ui-icon {
    width: 14px;
    height: 14px;
}

body.admin-surface .admin-compact-v2 .admin-advanced-filters .filter-chevron {
    transition: transform 160ms ease;
}

body.admin-surface .admin-compact-v2 .admin-advanced-filters[open] .filter-chevron {
    transform: rotate(180deg);
}

body.admin-surface .admin-compact-v2 .admin-advanced-filters > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    border-top: 1px solid var(--admin-v2-line);
    padding: 10px 12px 12px;
}

body.admin-surface .admin-compact-v2 .admin-advanced-filters label,
body.admin-surface .admin-compact-v2 .admin-date-range {
    color: var(--admin-v2-muted);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .025em;
}

body.admin-surface .admin-compact-v2 .admin-advanced-filters label :is(input, select) {
    width: 100%;
    min-height: 37px;
    margin-top: 5px;
    padding: 0 9px;
}

/* Products */
body.admin-surface .admin-products-page .products-admin-grid {
    display: block;
}

body.admin-surface .admin-products-page .products-table-column,
body.admin-surface .admin-products-page .products-table-column > .mock-panel {
    min-width: 0;
}

body.admin-surface .admin-products-page .products-management-table .mock-tr {
    min-width: 990px;
}

body.admin-surface .admin-products-page .product-admin-forms {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 12px;
    margin-top: 12px;
}

body.admin-surface .admin-products-page .product-admin-forms .admin-form {
    margin: 0;
    padding: 17px;
}

body.admin-surface .admin-products-page .category-side-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr);
    align-items: start;
    gap: 12px;
    margin-top: 12px;
}

body.admin-surface .admin-products-page .category-tree {
    max-height: 360px;
    overflow: auto;
}

body.admin-surface .admin-products-page .category-summary {
    margin: 0;
}

/* Categories */
body.admin-surface .admin-categories-page .category-management-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, .62fr);
    align-items: start;
    gap: 12px;
    margin-top: 0;
}

body.admin-surface .admin-categories-page #category-create {
    position: sticky;
    top: 80px;
    margin: 0;
    padding: 17px;
}

body.admin-surface .admin-categories-page .data-table {
    border-radius: 0 0 var(--admin-v2-radius) var(--admin-v2-radius);
}

body.admin-surface .admin-categories-page .category-row {
    min-width: 680px;
    cursor: pointer;
}

body.admin-surface .admin-categories-page .category-tree-item {
    border-bottom: 1px solid var(--admin-v2-line);
}

body.admin-surface .admin-categories-page .category-tree-item:last-child {
    border-bottom: 0;
}

body.admin-surface .admin-categories-page .category-tree-item[open] {
    background: #fffafa;
}

body.admin-surface .admin-categories-page .category-inline-editor {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--admin-v2-line);
    border-radius: 0;
    background: var(--admin-v2-subtle);
    padding: 15px;
}

body.admin-surface .admin-categories-page .category-row-actions {
    border-top-color: var(--admin-v2-line);
    background: var(--admin-v2-subtle);
    padding: 8px 15px 12px;
}

/* Product taxonomy */
body.admin-surface .admin-taxonomy-page .page-tabs {
    margin: 0 0 12px;
    border: 1px solid var(--admin-v2-line);
    border-radius: var(--admin-v2-radius);
    background: var(--admin-v2-surface);
}

body.admin-surface .admin-taxonomy-page .taxonomy-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.admin-surface .admin-taxonomy-page .editor-section {
    overflow: hidden;
}

body.admin-surface .admin-taxonomy-page .editor-grid {
    padding: 14px 16px 10px;
}

body.admin-surface .admin-taxonomy-page .editor-grid textarea {
    min-height: 230px;
    border-color: var(--admin-v2-line-strong);
    border-radius: 10px;
    background: var(--admin-v2-subtle);
    font: 500 11px/1.65 'DM Mono', Consolas, monospace;
}

body.admin-surface .admin-taxonomy-page .taxonomy-help {
    margin: 0 16px 10px;
    border: 1px solid #fed7aa;
    border-radius: 9px;
    background: #fff7ed;
    color: #9a3412;
    padding: 9px 11px;
    font-size: 10px;
}

body.admin-surface .admin-taxonomy-page .taxonomy-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    max-height: 230px;
    overflow: auto;
    border-top: 1px solid var(--admin-v2-line);
    padding: 0;
}

body.admin-surface .admin-taxonomy-page .taxonomy-list > span {
    min-width: 0;
    border: 0;
    border-right: 1px solid var(--admin-v2-line);
    border-bottom: 1px solid var(--admin-v2-line);
    border-radius: 0;
    background: transparent;
    padding: 9px 11px;
}

body.admin-surface .admin-taxonomy-page .editor-savebar {
    position: sticky;
    bottom: 10px;
    z-index: 8;
    margin-top: 12px;
    border: 1px solid var(--admin-v2-line);
    border-radius: 11px;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 8px 24px rgb(24 24 27 / 8%);
    backdrop-filter: blur(12px);
    padding: 9px 11px;
}

/* Suppliers */
body.admin-surface .admin-suppliers-page .supplier-list-panel {
    overflow: hidden;
}

body.admin-surface .admin-suppliers-page .supplier-sync-row {
    min-width: 960px;
}

body.admin-surface .admin-suppliers-page .supplier-editor {
    margin: 8px 10px;
    border-radius: 11px;
    background: var(--admin-v2-subtle);
}

body.admin-surface .admin-suppliers-page .supplier-editor > summary,
body.admin-surface .admin-suppliers-page .admin-create-drawer > summary {
    min-height: 48px;
    border-radius: inherit;
    cursor: pointer;
    color: var(--admin-v2-ink);
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 780;
}

body.admin-surface .admin-suppliers-page .supplier-editor[open] > summary,
body.admin-surface .admin-suppliers-page .admin-create-drawer[open] > summary {
    border-bottom: 1px solid var(--admin-v2-line);
    border-radius: 11px 11px 0 0;
    background: var(--admin-v2-brand-soft);
    color: var(--admin-v2-brand);
}

body.admin-surface .admin-suppliers-page .supplier-editor .admin-form,
body.admin-surface .admin-suppliers-page .supplier-create-form {
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 16px;
}

body.admin-surface .admin-suppliers-page .supplier-saved-config {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--admin-v2-line);
    border-radius: 10px;
    background: var(--admin-v2-surface);
}

body.admin-surface .admin-suppliers-page .supplier-saved-config > span {
    border-right: 1px solid var(--admin-v2-line);
    padding: 10px 12px;
}

body.admin-surface .admin-suppliers-page .supplier-saved-config > p {
    grid-column: 1 / -1;
    margin: 0;
    border-top: 1px solid var(--admin-v2-line);
    background: #fffbeb;
    color: #92400e;
    padding: 9px 12px;
    font-size: 10px;
}

body.admin-surface .admin-suppliers-page .supplier-config-section {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--admin-v2-line);
    border-radius: 11px;
    background: var(--admin-v2-surface);
}

body.admin-surface .admin-suppliers-page .supplier-config-section > header {
    min-height: 56px;
    border-bottom: 1px solid var(--admin-v2-line);
    background: var(--admin-v2-subtle);
    padding: 11px 13px;
}

body.admin-surface .admin-suppliers-page .supplier-section-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    background: var(--admin-v2-brand-soft);
    color: var(--admin-v2-brand);
}

body.admin-surface .admin-suppliers-page .supplier-connection-grid {
    padding: 13px;
}

body.admin-surface .admin-suppliers-page .supplier-sync-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
}

body.admin-surface .admin-suppliers-page .supplier-sync-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 168px);
    align-items: center;
    min-width: 0;
    min-height: 72px;
    gap: 10px;
    margin: 0;
    border: 0;
    border-right: 1px solid var(--admin-v2-line);
    border-bottom: 1px solid var(--admin-v2-line);
    border-radius: 0;
    background: transparent;
    padding: 10px 12px;
}

body.admin-surface .admin-suppliers-page .supplier-sync-option:nth-child(2n) {
    border-right: 0;
}

body.admin-surface .admin-suppliers-page .supplier-setting-label {
    min-width: 0;
}

body.admin-surface .admin-suppliers-page .supplier-setting-label i {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
}

body.admin-surface .admin-suppliers-page .supplier-setting-label b {
    font-size: 10px;
}

body.admin-surface .admin-suppliers-page .supplier-setting-label small {
    font-size: 9px;
    line-height: 1.35;
}

body.admin-surface .admin-suppliers-page .supplier-sync-option :is(input, select) {
    width: 100%;
    min-height: 36px;
    margin: 0;
    font-size: 10px;
}

body.admin-surface .admin-suppliers-page .supplier-sync-advanced {
    gap: 0;
    border-top: 0;
    padding: 0;
}

body.admin-surface .admin-suppliers-page .supplier-sync-advanced > label {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--admin-v2-line);
    border-radius: 0;
    background: var(--admin-v2-subtle);
    padding: 12px;
}

body.admin-surface .admin-suppliers-page .supplier-create-panel {
    margin-top: 12px;
}

/* Warehouse */
body.admin-surface .warehouse-browser-page .warehouse-browser {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

body.admin-surface .warehouse-browser-page .warehouse-selector {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow: hidden;
}

body.admin-surface .warehouse-browser-page .warehouse-selector-head {
    min-height: 58px;
    border-bottom: 1px solid var(--admin-v2-line);
    padding: 11px 12px;
}

body.admin-surface .warehouse-browser-page .warehouse-selector-search {
    margin: 10px;
    border-color: var(--admin-v2-line-strong);
    border-radius: 9px;
    background: var(--admin-v2-subtle);
}

body.admin-surface .warehouse-browser-page .warehouse-category-list {
    max-height: calc(100vh - 238px);
    overflow: auto;
    padding: 0 8px 10px;
}

body.admin-surface .warehouse-browser-page .warehouse-category > header {
    min-height: 34px;
    padding: 7px 6px 4px;
}

body.admin-surface .warehouse-browser-page .warehouse-product-link {
    min-height: 54px;
    margin: 2px 0;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 7px;
}

body.admin-surface .warehouse-browser-page .warehouse-product-link:hover {
    border-color: var(--admin-v2-line);
    background: var(--admin-v2-subtle);
}

body.admin-surface .warehouse-browser-page .warehouse-product-link.active {
    border-color: #fecdd3;
    background: var(--admin-v2-brand-soft);
    color: var(--admin-v2-brand);
}

body.admin-surface .warehouse-browser-page .warehouse-selected-card > header {
    min-height: 74px;
    padding: 12px 14px;
}

body.admin-surface .warehouse-browser-page .warehouse-metric-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 12px;
}

body.admin-surface .warehouse-browser-page .warehouse-status-tabs {
    min-height: 46px;
    margin: 12px 0;
    border: 1px solid var(--admin-v2-line);
    border-radius: 11px;
    background: var(--admin-v2-surface);
    padding: 5px;
}

body.admin-surface .warehouse-browser-page .warehouse-status-tabs > a {
    min-height: 34px;
    border-radius: 8px;
    font-size: 10px;
}

body.admin-surface .warehouse-browser-page .warehouse-status-tabs > a.active {
    background: var(--admin-v2-brand-soft);
    color: var(--admin-v2-brand);
}

body.admin-surface .warehouse-browser-page .warehouse-tool-drawers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

body.admin-surface .warehouse-browser-page .warehouse-tool-drawer > summary {
    min-height: 54px;
    padding: 10px 13px;
}

body.admin-surface .warehouse-browser-page .warehouse-tool-drawer[open] > summary {
    border-bottom: 1px solid var(--admin-v2-line);
    background: var(--admin-v2-subtle);
}

body.admin-surface .warehouse-browser-page .warehouse-data-panel,
body.admin-surface .warehouse-browser-page .warehouse-sales-panel {
    margin-top: 12px;
    overflow: hidden;
}

body.admin-surface .warehouse-browser-page .warehouse-inventory-table .mock-tr {
    min-width: 1040px;
}

body.admin-surface .warehouse-browser-page .warehouse-bulk-bar {
    min-height: 48px;
    border-bottom: 1px solid var(--admin-v2-line);
    background: var(--admin-v2-subtle);
    padding: 8px 12px;
}

/* Orders */
body.admin-surface .admin-orders-page .admin-order-filter {
    grid-template-columns: minmax(220px, 1.35fr) minmax(150px, .7fr) minmax(270px, 1fr) auto auto;
    margin-bottom: 12px;
    border: 1px solid var(--admin-v2-line);
    border-radius: 11px;
}

body.admin-surface .admin-orders-page .admin-date-range {
    min-width: 0;
}

body.admin-surface .admin-orders-page .admin-date-range > span {
    display: block;
    margin-bottom: 4px;
}

body.admin-surface .admin-orders-page .admin-date-range > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 5px;
}

body.admin-surface .admin-orders-page .admin-date-range input {
    width: 100%;
    min-width: 0;
    height: 36px;
    margin: 0;
    padding: 0 7px;
}

body.admin-surface .admin-orders-page .admin-date-range i {
    color: var(--admin-v2-muted);
    font-style: normal;
}

body.admin-surface .admin-orders-page .admin-order-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 310px);
    align-items: start;
    gap: 12px;
    margin: 0;
}

body.admin-surface .admin-orders-page .admin-order-grid > .mock-panel {
    min-width: 0;
    overflow: hidden;
}

body.admin-surface .admin-orders-page .admin-order-table .mock-tr {
    min-width: 1120px;
}

body.admin-surface .admin-orders-page .admin-order-detail {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow: auto;
}

body.admin-surface .admin-orders-page .admin-order-detail > section {
    border-bottom-color: var(--admin-v2-line);
    padding: 13px 15px;
}

body.admin-surface .admin-orders-page .admin-order-detail h3 {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.admin-surface .admin-orders-page .detail-refund {
    margin: 10px 12px;
}

@media (max-width: 1180px) {
    body.admin-surface .admin-compact-v2 .admin-summary-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.admin-surface .admin-compact-v2 .admin-summary-rail > article:nth-child(3n + 1) {
        border-left: 0;
    }

    body.admin-surface .admin-compact-v2 .admin-summary-rail > article:nth-child(n + 4) {
        border-top: 1px solid var(--admin-v2-line);
    }

    body.admin-surface .admin-products-page .category-side-panel,
    body.admin-surface .admin-products-page .product-admin-forms {
        grid-template-columns: 1fr;
    }

    body.admin-surface .admin-suppliers-page .supplier-sync-grid {
        grid-template-columns: 1fr;
    }

    body.admin-surface .admin-suppliers-page .supplier-sync-option {
        border-right: 0;
    }

    body.admin-surface .warehouse-browser-page .warehouse-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.admin-surface .admin-orders-page .admin-order-grid {
        grid-template-columns: 1fr;
    }

    body.admin-surface .admin-orders-page .admin-order-detail {
        position: static;
        max-height: none;
    }
}

@media (max-width: 900px) {
    body.admin-surface .workspace-main:has(.admin-compact-v2) {
        padding: 18px 14px 44px;
    }

    body.admin-surface .admin-compact-v2 .admin-filter-bar,
    body.admin-surface .admin-orders-page .admin-order-filter {
        grid-template-columns: minmax(0, 1fr) minmax(140px, .55fr) auto auto;
    }

    body.admin-surface .admin-compact-v2 .admin-filter-bar .unified-search-field {
        grid-column: span 2;
    }

    body.admin-surface .admin-orders-page .admin-date-range {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    body.admin-surface .admin-compact-v2 .admin-advanced-filters > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.admin-surface .admin-categories-page .category-management-grid,
    body.admin-surface .admin-taxonomy-page .taxonomy-layout,
    body.admin-surface .warehouse-browser-page .warehouse-browser {
        grid-template-columns: 1fr;
    }

    body.admin-surface .admin-categories-page #category-create,
    body.admin-surface .warehouse-browser-page .warehouse-selector {
        position: static;
        max-height: none;
    }

    body.admin-surface .warehouse-browser-page .warehouse-category-list {
        max-height: 430px;
    }
}

@media (max-width: 640px) {
    body.admin-surface .workspace-main:has(.admin-compact-v2) {
        padding: 12px 10px 32px;
    }

    body.admin-surface .admin-compact-v2 .admin-command-header {
        align-items: stretch;
        flex-direction: column;
        min-height: 0;
        gap: 12px;
        padding: 13px;
    }

    body.admin-surface .admin-compact-v2 .admin-command-heading {
        align-items: flex-start;
    }

    body.admin-surface .admin-compact-v2 .admin-command-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    body.admin-surface .admin-compact-v2 .admin-command-header h1 {
        font-size: 20px;
    }

    body.admin-surface .admin-compact-v2 .admin-command-header > :is(a, button),
    body.admin-surface .admin-compact-v2 .admin-command-header .button {
        width: 100%;
    }

    body.admin-surface .admin-compact-v2 .admin-summary-rail,
    body.admin-surface .warehouse-browser-page .warehouse-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.admin-surface .admin-compact-v2 .admin-summary-rail > article,
    body.admin-surface .admin-compact-v2 .admin-summary-rail > article:nth-child(3n + 1) {
        min-height: 68px;
        border-top: 1px solid var(--admin-v2-line);
        border-left: 1px solid var(--admin-v2-line);
        padding: 10px;
    }

    body.admin-surface .admin-compact-v2 .admin-summary-rail > article:nth-child(odd) {
        border-left: 0;
    }

    body.admin-surface .admin-compact-v2 .admin-summary-rail > article:nth-child(-n + 2) {
        border-top: 0;
    }

    body.admin-surface .admin-compact-v2 .admin-summary-rail em {
        display: none;
    }

    body.admin-surface .admin-compact-v2 .admin-summary-rail strong {
        font-size: 15px;
    }

    body.admin-surface .admin-compact-v2 .admin-summary-rail .kpi-icon,
    body.admin-surface .admin-compact-v2 .warehouse-metric-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    body.admin-surface .admin-compact-v2 .admin-filter-bar,
    body.admin-surface .admin-orders-page .admin-order-filter {
        grid-template-columns: 1fr;
    }

    body.admin-surface .admin-compact-v2 .admin-filter-bar .unified-search-field,
    body.admin-surface .admin-orders-page .admin-date-range {
        grid-column: auto;
        grid-row: auto;
    }

    body.admin-surface .admin-compact-v2 .admin-advanced-filters > div {
        grid-template-columns: 1fr;
    }

    body.admin-surface .admin-compact-v2 .table-command-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    body.admin-surface .admin-taxonomy-page .taxonomy-list,
    body.admin-surface .admin-suppliers-page .supplier-saved-config,
    body.admin-surface .warehouse-browser-page .warehouse-tool-drawers {
        grid-template-columns: 1fr;
    }

    body.admin-surface .admin-suppliers-page .supplier-saved-config > span {
        border-right: 0;
        border-bottom: 1px solid var(--admin-v2-line);
    }

    body.admin-surface .admin-suppliers-page .supplier-sync-option {
        grid-template-columns: 1fr;
    }

    body.admin-surface .warehouse-browser-page .warehouse-selected-card > header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.admin-surface .warehouse-browser-page .warehouse-selected-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

html[data-color-scheme="dark"] body.admin-surface .admin-compact-v2 {
    --admin-v2-surface: #111113;
    --admin-v2-subtle: #18181b;
    --admin-v2-canvas: #09090b;
    --admin-v2-line: #2b2b30;
    --admin-v2-line-strong: #3f3f46;
    --admin-v2-ink: #fafafa;
    --admin-v2-muted: #a1a1aa;
    --admin-v2-brand-soft: #2c1218;
}

html[data-color-scheme="dark"] body.admin-surface .admin-compact-v2 :is(.data-row, .mock-tr) {
    color: #e4e4e7;
}

html[data-color-scheme="dark"] body.admin-surface .admin-compact-v2 :is(.data-row, .mock-tr):hover,
html[data-color-scheme="dark"] body.admin-surface .admin-categories-page .category-tree-item[open] {
    background: #1f1518;
}

html[data-color-scheme="dark"] body.admin-surface .admin-taxonomy-page .taxonomy-help,
html[data-color-scheme="dark"] body.admin-surface .admin-suppliers-page .supplier-saved-config > p {
    border-color: #713f12;
    background: #281b0b;
    color: #fdba74;
}

html[data-color-scheme="dark"] body.admin-surface .admin-taxonomy-page .editor-savebar {
    background: rgb(17 17 19 / 94%);
}

@media (prefers-reduced-motion: reduce) {
    body.admin-surface .admin-compact-v2 :is(a, button, summary, .filter-chevron) {
        transition: none;
    }
}


/* Admin controls must remain visible and clickable even if reveal observation is delayed. */
body.admin-surface.ui-motion-ready .admin-compact-v2 .ui-reveal {
    opacity: 1;
    transform: none;
}


/* Admin v2 density corrections from rendered QA. */
body.admin-surface .admin-compact-v2 .table-action {
    border-color: var(--admin-v2-line);
    background: var(--admin-v2-surface);
    color: #52525b;
}

body.admin-surface .admin-compact-v2 .danger-action {
    border-color: #fecaca;
    background: #fff7f7;
    color: #b91c1c;
}

body.admin-surface .admin-products-page .product-bulk-adjustments > div {
    display: grid;
    grid-template-columns: minmax(190px, 1.35fr) auto minmax(150px, .75fr) auto auto;
    width: 100%;
    gap: 6px;
}

body.admin-surface .admin-products-page .product-bulk-adjustments :is(select, input) {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    margin: 0;
    border: 1px solid var(--admin-v2-line);
    border-radius: 8px;
    background: var(--admin-v2-surface);
    padding: 0 9px;
    font-size: 10px;
}

body.admin-surface .admin-suppliers-page .supplier-sync-row {
    grid-template-columns: 1.25fr 1.8fr 1.15fr .95fr 1.05fr;
}

body.admin-surface .admin-suppliers-page .supplier-sync-row > span {
    min-width: 0;
    overflow: hidden;
}

body.admin-surface .admin-suppliers-page .supplier-sync-row code,
body.admin-surface .admin-suppliers-page .supplier-sync-row small {
    display: block;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-surface .admin-orders-page .admin-order-detail {
    display: block;
}

body.admin-surface .admin-orders-page .admin-order-table .mock-tr > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.admin-surface .admin-orders-page .admin-order-table .mock-tr > span:not(.product-cell) {
    white-space: nowrap;
}

body.admin-surface .admin-orders-page .admin-order-table .product-cell b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-color-scheme="dark"] body.admin-surface .admin-compact-v2 .table-action {
    border-color: var(--admin-v2-line);
    background: var(--admin-v2-surface);
    color: #d4d4d8;
}

@media (max-width: 760px) {
    body.admin-surface .admin-products-page .product-bulk-adjustments > div {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.admin-surface .admin-products-page .product-bulk-adjustments .danger-action {
        grid-column: 1 / -1;
    }
}


@media (max-width: 640px) {
    body.admin-surface .admin-compact-v2 .admin-summary-rail > article:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        border-left: 0;
    }
}


/* Operations dashboard v3 */
body.admin-surface .admin-dashboard-v3 {
    display: grid;
    gap: 12px;
    width: min(100%, 1440px);
}

body.admin-surface .admin-dashboard-v3 .admin-command-header,
body.admin-surface .admin-dashboard-v3 .admin-summary-rail {
    margin: 0;
}

body.admin-surface .admin-dashboard-v3 .admin-dashboard-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    gap: 7px;
    border: 1px solid var(--admin-v2-line);
    border-radius: 9px;
    background: var(--admin-v2-subtle);
    color: var(--admin-v2-muted);
    padding: 0 11px;
    font: 750 11px/1.2 'DM Mono', Consolas, monospace;
    white-space: nowrap;
}

body.admin-surface .admin-dashboard-v3 .admin-dashboard-date .ui-icon {
    width: 15px;
    height: 15px;
    color: var(--admin-v2-brand);
}

body.admin-surface .admin-dashboard-v3 .dashboard-summary-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.admin-surface .admin-dashboard-v3 .dashboard-operations-grid,
body.admin-surface .admin-dashboard-v3 .dashboard-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.72fr) minmax(310px, .9fr);
    align-items: stretch;
    gap: 12px;
    min-width: 0;
}

body.admin-surface .admin-dashboard-v3 .dashboard-v3-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--admin-v2-line);
    border-radius: var(--admin-v2-radius);
    background: var(--admin-v2-surface);
    box-shadow: none;
}

body.admin-surface .admin-dashboard-v3 .dashboard-v3-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    gap: 12px;
    border-bottom: 1px solid var(--admin-v2-line);
    padding: 11px 15px;
}

body.admin-surface .admin-dashboard-v3 .dashboard-v3-heading h2 {
    margin: 0;
    color: var(--admin-v2-ink);
    font-size: 14px;
    font-weight: 820;
    letter-spacing: -.015em;
}

body.admin-surface .admin-dashboard-v3 .dashboard-v3-heading p {
    margin: 3px 0 0;
    color: var(--admin-v2-muted);
    font-size: 10px;
    line-height: 1.35;
}

body.admin-surface .admin-dashboard-v3 .dashboard-v3-heading > strong {
    color: var(--admin-v2-muted);
    font: 720 10px/1.2 'DM Mono', Consolas, monospace;
    white-space: nowrap;
}

body.admin-surface .admin-dashboard-v3 .dashboard-v3-heading > a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
    color: #315eae;
    font-size: 10px;
    font-weight: 780;
    white-space: nowrap;
}

body.admin-surface .admin-dashboard-v3 .dashboard-v3-heading > a .ui-icon {
    width: 13px;
    height: 13px;
    transform: rotate(-90deg);
}

/* Seven-day revenue */
body.admin-surface .admin-dashboard-v3 .dashboard-revenue-chart {
    position: relative;
    min-height: 215px;
    padding: 25px 15px 12px;
}

body.admin-surface .admin-dashboard-v3 .dashboard-chart-grid {
    position: absolute;
    inset: 26px 15px 36px;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    pointer-events: none;
}

body.admin-surface .admin-dashboard-v3 .dashboard-chart-grid i {
    border-top: 1px dashed var(--admin-v2-line);
}

body.admin-surface .admin-dashboard-v3 .dashboard-chart-grid i:last-child {
    border-bottom: 1px solid var(--admin-v2-line-strong);
}

body.admin-surface .admin-dashboard-v3 .dashboard-chart-columns {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    height: 178px;
    gap: clamp(7px, 1.6vw, 20px);
}

body.admin-surface .admin-dashboard-v3 .dashboard-chart-column {
    display: grid;
    grid-template-rows: 18px minmax(0, 1fr) 18px;
    align-items: end;
    min-width: 0;
    height: 100%;
    text-align: center;
}

body.admin-surface .admin-dashboard-v3 .dashboard-chart-column > span {
    overflow: hidden;
    color: #52525b;
    font: 680 8px/1 'DM Mono', Consolas, monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-surface .admin-dashboard-v3 .dashboard-chart-track {
    display: flex;
    align-items: end;
    justify-content: center;
    width: 100%;
    height: 100%;
}

body.admin-surface .admin-dashboard-v3 .dashboard-chart-track > i {
    display: block;
    width: min(62%, 30px);
    min-height: 5px;
    height: var(--dashboard-bar-height);
    border-radius: 5px 5px 2px 2px;
    background: var(--admin-v2-brand);
    box-shadow: 0 5px 12px rgb(255 70 88 / 15%);
    transform-origin: bottom;
    animation: dashboard-bar-rise 520ms cubic-bezier(.2, .75, .25, 1) both;
}

body.admin-surface .admin-dashboard-v3 .dashboard-chart-column:nth-child(2) i { animation-delay: 35ms; }
body.admin-surface .admin-dashboard-v3 .dashboard-chart-column:nth-child(3) i { animation-delay: 70ms; }
body.admin-surface .admin-dashboard-v3 .dashboard-chart-column:nth-child(4) i { animation-delay: 105ms; }
body.admin-surface .admin-dashboard-v3 .dashboard-chart-column:nth-child(5) i { animation-delay: 140ms; }
body.admin-surface .admin-dashboard-v3 .dashboard-chart-column:nth-child(6) i { animation-delay: 175ms; }
body.admin-surface .admin-dashboard-v3 .dashboard-chart-column:nth-child(7) i { animation-delay: 210ms; }

body.admin-surface .admin-dashboard-v3 .dashboard-chart-column > small {
    align-self: end;
    color: var(--admin-v2-muted);
    font: 650 9px/1 'DM Mono', Consolas, monospace;
}

@keyframes dashboard-bar-rise {
    from { opacity: .25; transform: scaleY(.08); }
    to { opacity: 1; transform: scaleY(1); }
}

/* Operational priorities */
body.admin-surface .admin-dashboard-v3 .dashboard-priority-list {
    display: grid;
}

body.admin-surface .admin-dashboard-v3 .dashboard-priority-list > a {
    display: grid;
    grid-template-columns: 38px 34px minmax(0, 1fr) 16px;
    align-items: center;
    min-height: 69px;
    gap: 9px;
    border-bottom: 1px solid var(--admin-v2-line);
    padding: 9px 14px;
    transition: background 150ms ease, padding 150ms ease;
}

body.admin-surface .admin-dashboard-v3 .dashboard-priority-list > a:last-child {
    border-bottom: 0;
}

body.admin-surface .admin-dashboard-v3 .dashboard-priority-list > a:hover {
    background: var(--admin-v2-subtle);
    padding-left: 17px;
}

body.admin-surface .admin-dashboard-v3 .dashboard-priority-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 10px;
}

body.admin-surface .admin-dashboard-v3 .dashboard-priority-icon .ui-icon {
    width: 17px;
    height: 17px;
}

body.admin-surface .admin-dashboard-v3 .dashboard-priority-icon.danger {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #e11d48;
}

body.admin-surface .admin-dashboard-v3 .dashboard-priority-icon.warning {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #ea580c;
}

body.admin-surface .admin-dashboard-v3 .dashboard-priority-icon.blue {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

body.admin-surface .admin-dashboard-v3 .dashboard-priority-list > a > strong {
    color: var(--admin-v2-brand);
    font: 820 19px/1 'DM Mono', Consolas, monospace;
}

body.admin-surface .admin-dashboard-v3 .dashboard-priority-list > a > span:nth-child(3) {
    min-width: 0;
}

body.admin-surface .admin-dashboard-v3 .dashboard-priority-list b,
body.admin-surface .admin-dashboard-v3 .dashboard-priority-list small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-surface .admin-dashboard-v3 .dashboard-priority-list b {
    color: var(--admin-v2-ink);
    font-size: 10px;
    font-weight: 780;
}

body.admin-surface .admin-dashboard-v3 .dashboard-priority-list small {
    margin-top: 3px;
    color: var(--admin-v2-muted);
    font-size: 9px;
}

body.admin-surface .admin-dashboard-v3 .dashboard-row-arrow {
    width: 14px;
    height: 14px;
    color: var(--admin-v2-muted);
    transform: rotate(-90deg);
}

/* Product attention table */
body.admin-surface .admin-dashboard-v3 .dashboard-data-table {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

body.admin-surface .admin-dashboard-v3 .dashboard-data-table table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    table-layout: fixed;
}

body.admin-surface .admin-dashboard-v3 .dashboard-data-table th {
    height: 36px;
    border-bottom: 1px solid var(--admin-v2-line);
    background: var(--admin-v2-subtle);
    color: var(--admin-v2-muted);
    padding: 0 13px;
    font-size: 8px;
    font-weight: 820;
    letter-spacing: .055em;
    text-align: left;
    text-transform: uppercase;
}

body.admin-surface .admin-dashboard-v3 .dashboard-data-table th:first-child { width: 42%; }
body.admin-surface .admin-dashboard-v3 .dashboard-data-table th:nth-child(2) { width: 22%; }
body.admin-surface .admin-dashboard-v3 .dashboard-data-table th:nth-child(3) { width: 16%; }
body.admin-surface .admin-dashboard-v3 .dashboard-data-table th:last-child { width: 20%; }

body.admin-surface .admin-dashboard-v3 .dashboard-data-table td {
    height: 49px;
    overflow: hidden;
    border-bottom: 1px solid var(--admin-v2-line);
    color: #52525b;
    padding: 7px 13px;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-surface .admin-dashboard-v3 .dashboard-data-table tr:last-child td {
    border-bottom: 0;
}

body.admin-surface .admin-dashboard-v3 .dashboard-data-table tbody tr:hover {
    background: #fff9fa;
}

body.admin-surface .admin-dashboard-v3 .dashboard-data-table td:first-child a,
body.admin-surface .admin-dashboard-v3 .dashboard-data-table td:first-child small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.admin-surface .admin-dashboard-v3 .dashboard-data-table td:first-child a {
    color: var(--admin-v2-ink);
    font-size: 10px;
    font-weight: 780;
}

body.admin-surface .admin-dashboard-v3 .dashboard-data-table td:first-child small {
    margin-top: 2px;
    color: var(--admin-v2-muted);
    font-size: 8px;
}

body.admin-surface .admin-dashboard-v3 .dashboard-data-table td > b {
    color: var(--admin-v2-ink);
    font: 750 10px/1.2 'DM Mono', Consolas, monospace;
}

body.admin-surface .admin-dashboard-v3 .dashboard-stock-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

body.admin-surface .admin-dashboard-v3 .dashboard-stock-state > i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
}

body.admin-surface .admin-dashboard-v3 .dashboard-stock-state > b {
    color: var(--admin-v2-ink);
    font: 760 10px/1 'DM Mono', Consolas, monospace;
}

body.admin-surface .admin-dashboard-v3 .dashboard-stock-state > small {
    font-size: 8px;
    font-weight: 720;
}

body.admin-surface .admin-dashboard-v3 .dashboard-stock-state.success > i { background: #10b981; }
body.admin-surface .admin-dashboard-v3 .dashboard-stock-state.success > small { color: #059669; }
body.admin-surface .admin-dashboard-v3 .dashboard-stock-state.warning > i { background: #f59e0b; }
body.admin-surface .admin-dashboard-v3 .dashboard-stock-state.warning > small { color: #d97706; }
body.admin-surface .admin-dashboard-v3 .dashboard-stock-state.danger > i { background: #f43f5e; }
body.admin-surface .admin-dashboard-v3 .dashboard-stock-state.danger > small { color: #e11d48; }

/* Recent order list */
body.admin-surface .admin-dashboard-v3 .dashboard-order-list {
    display: grid;
}

body.admin-surface .admin-dashboard-v3 .dashboard-order-list > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(72px, auto);
    align-items: center;
    min-height: 59px;
    gap: 9px;
    border-bottom: 1px solid var(--admin-v2-line);
    padding: 8px 13px;
    transition: background 150ms ease;
}

body.admin-surface .admin-dashboard-v3 .dashboard-order-list > a:last-child {
    border-bottom: 0;
}

body.admin-surface .admin-dashboard-v3 .dashboard-order-list > a:hover {
    background: var(--admin-v2-subtle);
}

body.admin-surface .admin-dashboard-v3 .dashboard-order-list > a > span {
    min-width: 0;
}

body.admin-surface .admin-dashboard-v3 .dashboard-order-list b,
body.admin-surface .admin-dashboard-v3 .dashboard-order-list small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-surface .admin-dashboard-v3 .dashboard-order-list b {
    color: var(--admin-v2-ink);
    font: 720 9px/1.2 'DM Mono', Consolas, monospace;
}

body.admin-surface .admin-dashboard-v3 .dashboard-order-list small {
    margin-top: 4px;
    color: var(--admin-v2-muted);
    font-size: 8px;
}

body.admin-surface .admin-dashboard-v3 .dashboard-order-list > a > strong {
    color: var(--admin-v2-ink);
    font: 780 10px/1.2 'DM Mono', Consolas, monospace;
    text-align: right;
    white-space: nowrap;
}

body.admin-surface .admin-dashboard-v3 .dashboard-order-list .status-pill {
    white-space: nowrap;
}

body.admin-surface .admin-dashboard-v3 .dashboard-empty {
    margin: 0;
    color: var(--admin-v2-muted);
    padding: 38px 16px;
    text-align: center;
}

/* Responsive dashboard composition */
@media (max-width: 1180px) {
    body.admin-surface .admin-dashboard-v3 .dashboard-summary-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.admin-surface .admin-dashboard-v3 .dashboard-summary-rail > article {
        border-top: 0;
        border-left: 1px solid var(--admin-v2-line);
    }

    body.admin-surface .admin-dashboard-v3 .dashboard-summary-rail > article:first-child {
        border-left: 0;
    }
}

@media (max-width: 900px) {
    body.admin-surface .admin-dashboard-v3 .dashboard-summary-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.admin-surface .admin-dashboard-v3 .dashboard-summary-rail > article,
    body.admin-surface .admin-dashboard-v3 .dashboard-summary-rail > article:first-child {
        border-top: 1px solid var(--admin-v2-line);
        border-left: 1px solid var(--admin-v2-line);
    }

    body.admin-surface .admin-dashboard-v3 .dashboard-summary-rail > article:nth-child(odd) {
        border-left: 0;
    }

    body.admin-surface .admin-dashboard-v3 .dashboard-summary-rail > article:nth-child(-n + 2) {
        border-top: 0;
    }

    body.admin-surface .admin-dashboard-v3 .dashboard-operations-grid,
    body.admin-surface .admin-dashboard-v3 .dashboard-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    body.admin-surface .admin-dashboard-v3 .admin-dashboard-date {
        width: 100%;
    }

    body.admin-surface .admin-dashboard-v3 .dashboard-v3-heading {
        align-items: flex-start;
    }

    body.admin-surface .admin-dashboard-v3 .dashboard-revenue-chart {
        min-height: 198px;
        padding-inline: 9px;
    }

    body.admin-surface .admin-dashboard-v3 .dashboard-chart-grid {
        inset-inline: 9px;
    }

    body.admin-surface .admin-dashboard-v3 .dashboard-chart-columns {
        height: 162px;
        gap: 4px;
    }

    body.admin-surface .admin-dashboard-v3 .dashboard-chart-column > span {
        font-size: 7px;
    }

    body.admin-surface .admin-dashboard-v3 .dashboard-order-list > a {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.admin-surface .admin-dashboard-v3 .dashboard-order-list .status-pill {
        display: none;
    }
}

html[data-color-scheme="dark"] body.admin-surface .admin-dashboard-v3 .dashboard-data-table td,
html[data-color-scheme="dark"] body.admin-surface .admin-dashboard-v3 .dashboard-chart-column > span {
    color: #d4d4d8;
}

html[data-color-scheme="dark"] body.admin-surface .admin-dashboard-v3 :is(.dashboard-v3-panel, .admin-dashboard-date) {
    border-color: var(--admin-v2-line);
    background: var(--admin-v2-surface);
}

html[data-color-scheme="dark"] body.admin-surface .admin-dashboard-v3 :is(.dashboard-priority-list > a, .dashboard-order-list > a, .dashboard-data-table tbody tr):hover {
    background: #1f1518;
}

@media (prefers-reduced-motion: reduce) {
    body.admin-surface .admin-dashboard-v3 .dashboard-chart-track > i {
        animation: none;
    }

    body.admin-surface .admin-dashboard-v3 :is(.dashboard-priority-list > a, .dashboard-order-list > a) {
        transition: none;
    }
}


/* Dashboard viewport fit refinements from concept comparison. */
body.admin-surface:has(.admin-dashboard-v3) .site-footer {
    display: none;
}

body.admin-surface .admin-dashboard-v3 .dashboard-data-table td {
    height: 45px;
}

/* Premium featured-product medal: layered metal, ribbon and brand accent. */
body.marketplace-surface .market-commerce-page .market-product-media > mark {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 6px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 29% 22%, rgba(255, 255, 255, .96) 0 7%, transparent 27%),
        linear-gradient(145deg, #fff8cf 0%, #ffd45e 48%, #e7a719 100%);
    border-color: rgba(255, 255, 255, .94);
    box-shadow:
        0 8px 18px rgba(105, 61, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -2px 4px rgba(131, 74, 0, .2);
    transform-origin: center;
    transition: transform .2s cubic-bezier(.2, .75, .25, 1), box-shadow .2s ease;
}

body.marketplace-surface .market-commerce-page .market-featured-medal {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    overflow: visible;
    filter: drop-shadow(0 2px 1px rgba(94, 48, 0, .28));
}

body.marketplace-surface .market-commerce-page .market-featured-medal .medal-ribbon {
    fill: #b51f34;
    stroke: #7e1425;
    stroke-width: .75;
    stroke-linejoin: round;
}

body.marketplace-surface .market-commerce-page .market-featured-medal .medal-ribbon-right {
    fill: #e43d50;
}

body.marketplace-surface .market-commerce-page .market-featured-medal .medal-ribbon-highlight {
    fill: rgba(255, 150, 158, .58);
}

body.marketplace-surface .market-commerce-page .market-featured-medal .medal-shadow {
    fill: rgba(117, 61, 0, .25);
}

body.marketplace-surface .market-commerce-page .market-featured-medal .medal-rim {
    fill: #d99b12;
    stroke: #925900;
    stroke-width: .9;
}

body.marketplace-surface .market-commerce-page .market-featured-medal .medal-face {
    fill: #ffe27a;
    stroke: #fff2ad;
    stroke-width: 1;
}

body.marketplace-surface .market-commerce-page .market-featured-medal .medal-core {
    fill: #fff0a8;
    opacity: .72;
}

body.marketplace-surface .market-commerce-page .market-featured-medal .medal-star {
    fill: #f43f5e;
    stroke: #b91c3a;
    stroke-width: .65;
    stroke-linejoin: round;
}

body.marketplace-surface .market-commerce-page .market-featured-medal .medal-glint {
    fill: none;
    stroke: rgba(255, 255, 255, .95);
    stroke-width: 1.35;
    stroke-linecap: round;
}

body.marketplace-surface .market-commerce-page .market-product-card:hover .market-product-media > mark {
    transform: translateY(-1px) rotate(-2deg) scale(1.025);
    box-shadow:
        0 10px 22px rgba(105, 61, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .92),
        inset 0 -2px 4px rgba(131, 74, 0, .2);
}

body.marketplace-surface .market-commerce-page .market-product-media > mark > span.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    display: block !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    body.marketplace-surface .market-commerce-page .market-product-media > mark {
        transition: none;
    }
}

/* Dashboard recent-order hover: preserve contrast in both color schemes. */
.commerce-workspace .dashboard-v2 .dashboard-order-table .mock-tr:not(.mock-th) {
    box-shadow: inset 3px 0 0 transparent;
    transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.commerce-workspace .dashboard-v2 .dashboard-order-table .mock-tr:not(.mock-th):is(:hover, :focus-visible) {
    background: #fff6f7;
    color: var(--dash-ink);
    box-shadow: inset 3px 0 0 var(--dash-accent);
}

html[data-color-scheme="dark"] .commerce-workspace .dashboard-v2 .dashboard-order-table .mock-tr:not(.mock-th):is(:hover, :focus-visible) {
    background: linear-gradient(90deg, rgb(255 70 88 / 16%), #182335 38%, #192334) !important;
    color: #f4f6fa;
    box-shadow:
        inset 3px 0 0 var(--dash-accent),
        inset 0 1px 0 rgb(255 255 255 / 3.5%),
        inset 0 -1px 0 rgb(255 255 255 / 3.5%);
}

html[data-color-scheme="dark"] .commerce-workspace .dashboard-v2 .dashboard-order-table .mock-tr:not(.mock-th):is(:hover, :focus-visible) .product-cell b,
html[data-color-scheme="dark"] .commerce-workspace .dashboard-v2 .dashboard-order-table .mock-tr:not(.mock-th):is(:hover, :focus-visible) > span:not(.product-cell) {
    color: #ffffff;
}

html[data-color-scheme="dark"] .commerce-workspace .dashboard-v2 .dashboard-order-table .mock-tr:not(.mock-th):is(:hover, :focus-visible) .product-cell small {
    color: #aeb8c8;
}